` : this.lines.map(
+ ${this.loadingSnapshot && this.lines.length === 0 ? c`
${s.stream}${s.text}
@@ -1339,7 +1377,7 @@ let v = class extends $ {
` : c`
Select a process to view its output.
`;
}
};
-v.styles = B`
+b.styles = B`
:host {
display: block;
font-family: system-ui, -apple-system, sans-serif;
@@ -1443,33 +1481,36 @@ v.styles = B`
font-size: 0.8125rem;
}
`;
-O([
+S([
f({ attribute: "api-url" })
-], v.prototype, "apiUrl", 2);
-O([
+], b.prototype, "apiUrl", 2);
+S([
f({ attribute: "ws-url" })
-], v.prototype, "wsUrl", 2);
-O([
+], b.prototype, "wsUrl", 2);
+S([
f({ attribute: "process-id" })
-], v.prototype, "processId", 2);
-O([
+], b.prototype, "processId", 2);
+S([
u()
-], v.prototype, "lines", 2);
-O([
+], b.prototype, "lines", 2);
+S([
u()
-], v.prototype, "autoScroll", 2);
-O([
+], b.prototype, "autoScroll", 2);
+S([
u()
-], v.prototype, "connected", 2);
-v = O([
- F("core-process-output")
-], v);
-var Xe = Object.defineProperty, Ye = Object.getOwnPropertyDescriptor, Q = (s, e, t, i) => {
+], b.prototype, "connected", 2);
+S([
+ u()
+], b.prototype, "loadingSnapshot", 2);
+b = S([
+ W("core-process-output")
+], b);
+var Xe = Object.defineProperty, Ye = Object.getOwnPropertyDescriptor, X = (s, e, t, i) => {
for (var r = i > 1 ? void 0 : i ? Ye(e, t) : e, n = s.length - 1, o; n >= 0; n--)
(o = s[n]) && (r = (i ? o(e, t, r) : o(r)) || r);
return i && r && Xe(e, t, r), r;
};
-let H = class extends $ {
+let H = class extends y {
constructor() {
super(...arguments), this.apiUrl = "", this.result = null, this.expandedOutputs = /* @__PURE__ */ new Set();
}
@@ -1740,24 +1781,24 @@ H.styles = B`
margin-bottom: 1rem;
}
`;
-Q([
+X([
f({ attribute: "api-url" })
], H.prototype, "apiUrl", 2);
-Q([
+X([
f({ type: Object })
], H.prototype, "result", 2);
-Q([
+X([
u()
], H.prototype, "expandedOutputs", 2);
-H = Q([
- F("core-process-runner")
+H = X([
+ W("core-process-runner")
], H);
var et = Object.defineProperty, tt = Object.getOwnPropertyDescriptor, z = (s, e, t, i) => {
for (var r = i > 1 ? void 0 : i ? tt(e, t) : e, n = s.length - 1, o; n >= 0; n--)
(o = s[n]) && (r = (i ? o(e, t, r) : o(r)) || r);
return i && r && et(e, t, r), r;
};
-let _ = class extends $ {
+let _ = class extends y {
constructor() {
super(...arguments), this.apiUrl = "", this.wsUrl = "", this.activeTab = "daemons", this.wsConnected = !1, this.lastEvent = "", this.selectedProcessId = "", this.ws = null, this.tabs = [
{ id: "daemons", label: "Daemons" },
@@ -1772,7 +1813,7 @@ let _ = class extends $ {
super.disconnectedCallback(), this.ws && (this.ws.close(), this.ws = null);
}
connectWs() {
- this.ws = xe(this.wsUrl, (s) => {
+ this.ws = Ae(this.wsUrl, (s) => {
this.lastEvent = s.channel ?? s.type ?? "", this.requestUpdate();
}), this.ws.onopen = () => {
this.wsConnected = !0;
@@ -1982,14 +2023,14 @@ z([
u()
], _.prototype, "selectedProcessId", 2);
_ = z([
- F("core-process-panel")
+ W("core-process-panel")
], _);
export {
- Ae as ProcessApi,
+ G as ProcessApi,
g as ProcessDaemons,
- y as ProcessList,
- v as ProcessOutput,
+ v as ProcessList,
+ b as ProcessOutput,
_ as ProcessPanel,
H as ProcessRunner,
- xe as connectProcessEvents
+ Ae as connectProcessEvents
};
diff --git a/ui/src/process-output.ts b/ui/src/process-output.ts
index e16fcbc..91948bb 100644
--- a/ui/src/process-output.ts
+++ b/ui/src/process-output.ts
@@ -3,6 +3,7 @@
import { LitElement, html, css, nothing } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { connectProcessEvents, type ProcessEvent } from './shared/events.js';
+import { ProcessApi } from './shared/api.js';
interface OutputLine {
text: string;
@@ -131,14 +132,15 @@ export class ProcessOutput extends LitElement {
@state() private lines: OutputLine[] = [];
@state() private autoScroll = true;
@state() private connected = false;
+ @state() private loadingSnapshot = false;
private ws: WebSocket | null = null;
+ private api = new ProcessApi(this.apiUrl);
+ private syncToken = 0;
connectedCallback() {
super.connectedCallback();
- if (this.wsUrl && this.processId) {
- this.connect();
- }
+ this.syncSources();
}
disconnectedCallback() {
@@ -147,12 +149,12 @@ export class ProcessOutput extends LitElement {
}
updated(changed: Map
) {
- if (changed.has('processId') || changed.has('wsUrl')) {
- this.disconnect();
- this.lines = [];
- if (this.wsUrl && this.processId) {
- this.connect();
- }
+ if (changed.has('apiUrl')) {
+ this.api = new ProcessApi(this.apiUrl);
+ }
+
+ if (changed.has('processId') || changed.has('wsUrl') || changed.has('apiUrl')) {
+ this.syncSources();
}
if (this.autoScroll) {
@@ -160,6 +162,66 @@ export class ProcessOutput extends LitElement {
}
}
+ private syncSources() {
+ this.disconnect();
+ this.lines = [];
+ if (!this.processId) {
+ return;
+ }
+
+ void this.loadSnapshotAndConnect();
+ }
+
+ private async loadSnapshotAndConnect() {
+ const token = ++this.syncToken;
+
+ if (!this.processId) {
+ return;
+ }
+
+ if (this.apiUrl) {
+ this.loadingSnapshot = true;
+ try {
+ const output = await this.api.getProcessOutput(this.processId);
+ if (token !== this.syncToken) {
+ return;
+ }
+ const snapshot = this.linesFromOutput(output);
+ if (snapshot.length > 0) {
+ this.lines = snapshot;
+ }
+ } catch {
+ // Ignore missing snapshot data and continue with live streaming.
+ } finally {
+ if (token === this.syncToken) {
+ this.loadingSnapshot = false;
+ }
+ }
+ }
+
+ if (token === this.syncToken && this.wsUrl) {
+ this.connect();
+ }
+ }
+
+ private linesFromOutput(output: string): OutputLine[] {
+ if (!output) {
+ return [];
+ }
+
+ const normalized = output.replace(/\r\n/g, '\n');
+ const parts = normalized.split('\n');
+ if (parts.length > 0 && parts[parts.length - 1] === '') {
+ parts.pop();
+ }
+
+ return parts.map((text) => ({
+ text,
+ stream: 'stdout' as const,
+ timestamp: Date.now(),
+ }));
+ }
+
private connect() {
this.ws = connectProcessEvents(this.wsUrl, (event: ProcessEvent) => {
const data = event.data;
@@ -231,7 +293,9 @@ export class ProcessOutput extends LitElement {