feat: worker attach workspace console
This commit is contained in:
parent
f64e11b854
commit
c3fed59109
|
|
@ -6,10 +6,12 @@
|
||||||
"dev": "deno run -A npm:vite@7.2.7 dev",
|
"dev": "deno run -A npm:vite@7.2.7 dev",
|
||||||
"dev:backend": "cd ../.. && cargo run -p yoi-workspace-server -- serve --workspace . --db .yoi/workspace.db --listen 127.0.0.1:8787",
|
"dev:backend": "cd ../.. && cargo run -p yoi-workspace-server -- serve --workspace . --db .yoi/workspace.db --listen 127.0.0.1:8787",
|
||||||
"check": "deno run -A npm:@sveltejs/kit@2.49.4 sync && deno run -A npm:svelte-check@4.3.4 --tsconfig ./tsconfig.json",
|
"check": "deno run -A npm:@sveltejs/kit@2.49.4 sync && deno run -A npm:svelte-check@4.3.4 --tsconfig ./tsconfig.json",
|
||||||
|
"test": "deno test --allow-read=src src/lib/workspace-console/model.test.ts src/lib/workspace-console/worker-console.ui.test.ts",
|
||||||
"build": "deno run -A npm:vite@7.2.7 build",
|
"build": "deno run -A npm:vite@7.2.7 build",
|
||||||
"preview": "deno run -A npm:vite@7.2.7 preview"
|
"preview": "deno run -A npm:vite@7.2.7 preview"
|
||||||
},
|
},
|
||||||
"imports": {
|
"imports": {
|
||||||
|
"$lib/": "./src/lib/",
|
||||||
"@sveltejs/adapter-static": "npm:@sveltejs/adapter-static@3.0.9",
|
"@sveltejs/adapter-static": "npm:@sveltejs/adapter-static@3.0.9",
|
||||||
"@sveltejs/kit": "npm:@sveltejs/kit@2.49.4",
|
"@sveltejs/kit": "npm:@sveltejs/kit@2.49.4",
|
||||||
"@sveltejs/vite-plugin-svelte": "npm:@sveltejs/vite-plugin-svelte@6.2.1",
|
"@sveltejs/vite-plugin-svelte": "npm:@sveltejs/vite-plugin-svelte@6.2.1",
|
||||||
|
|
|
||||||
|
|
@ -677,3 +677,227 @@
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
opacity: 0.55;
|
opacity: 0.55;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--space-1);
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item.active,
|
||||||
|
.nav-item:has(.nav-link[aria-current='page']) {
|
||||||
|
background: color-mix(in srgb, var(--accent) 12%, transparent);
|
||||||
|
border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
|
||||||
|
}
|
||||||
|
|
||||||
|
.inline-link,
|
||||||
|
.secondary-button {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: var(--space-1);
|
||||||
|
border-radius: 999px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
padding: 0.4rem 0.75rem;
|
||||||
|
background: #ffffff;
|
||||||
|
color: #1d4ed8;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 800;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary-button:hover,
|
||||||
|
.inline-link:hover {
|
||||||
|
border-color: #bfdbfe;
|
||||||
|
background: #eff6ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.worker-console-shell {
|
||||||
|
grid-template-rows: auto minmax(0, 1fr) auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.console-status-pill {
|
||||||
|
min-width: 14rem;
|
||||||
|
padding: 0.75rem 0.9rem;
|
||||||
|
border-radius: 16px;
|
||||||
|
background: #ecfeff;
|
||||||
|
border: 1px solid #a5f3fc;
|
||||||
|
color: #0f766e;
|
||||||
|
font-weight: 800;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
font-size: 0.76rem;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.console-status-pill.warn {
|
||||||
|
background: #fff7ed;
|
||||||
|
border-color: #fed7aa;
|
||||||
|
color: #c2410c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.console-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem);
|
||||||
|
gap: var(--space-4);
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.transcript-toolbar {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: var(--space-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.worker-transcript {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--space-3);
|
||||||
|
max-height: min(68dvh, 50rem);
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
overflow-y: auto;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.worker-transcript li {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--space-2);
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
border-left: 4px solid #cbd5e1;
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 0.75rem 0.85rem;
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.worker-transcript li.user {
|
||||||
|
border-left-color: #2563eb;
|
||||||
|
background: #eff6ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.worker-transcript li.assistant {
|
||||||
|
border-left-color: #10b981;
|
||||||
|
background: #f0fdf4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.worker-transcript li.error-line {
|
||||||
|
border-left-color: #dc2626;
|
||||||
|
background: #fef2f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-heading {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: var(--space-2);
|
||||||
|
color: #0f172a;
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-heading small {
|
||||||
|
margin: 0;
|
||||||
|
color: #64748b;
|
||||||
|
font-size: 0.74rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.worker-transcript pre {
|
||||||
|
max-width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
overflow-x: auto;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
color: #1f2937;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-detail,
|
||||||
|
.metadata-details {
|
||||||
|
color: #475569;
|
||||||
|
font-size: 0.84rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-detail summary,
|
||||||
|
.metadata-details summary {
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.console-side-card {
|
||||||
|
align-content: start;
|
||||||
|
display: grid;
|
||||||
|
gap: var(--space-4);
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.console-side-card dl,
|
||||||
|
.console-side-card ul {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--space-2);
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.console-side-card dt {
|
||||||
|
color: #64748b;
|
||||||
|
font-size: 0.72rem;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.console-side-card dd {
|
||||||
|
margin: 0;
|
||||||
|
color: #0f172a;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.degrade-note {
|
||||||
|
border: 1px solid #fde68a;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 0.65rem 0.8rem;
|
||||||
|
background: #fffbeb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.console-composer {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--space-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.console-composer label {
|
||||||
|
color: #0f172a;
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.console-composer textarea {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 7rem;
|
||||||
|
resize: vertical;
|
||||||
|
border: 1px solid #cbd5e1;
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 0.85rem 1rem;
|
||||||
|
font: inherit;
|
||||||
|
color: #0f172a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.console-composer textarea:disabled {
|
||||||
|
background: #f8fafc;
|
||||||
|
color: #64748b;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 960px) {
|
||||||
|
.console-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.console-header {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.console-status-pill {
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
181
web/workspace/src/lib/workspace-console/model.test.ts
Normal file
181
web/workspace/src/lib/workspace-console/model.test.ts
Normal file
|
|
@ -0,0 +1,181 @@
|
||||||
|
import type { Event } from "$lib/generated/protocol";
|
||||||
|
import { projectConsole, segmentsToText, workerConsoleHref } from "./model.ts";
|
||||||
|
|
||||||
|
declare const Deno: {
|
||||||
|
test(name: string, fn: () => void): void;
|
||||||
|
};
|
||||||
|
|
||||||
|
function assert(condition: unknown, message: string): asserts condition {
|
||||||
|
if (!condition) {
|
||||||
|
throw new Error(message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Deno.test("workerConsoleHref encodes runtime and worker target authority", () => {
|
||||||
|
assert(
|
||||||
|
workerConsoleHref({
|
||||||
|
runtime_id: "local runtime",
|
||||||
|
worker_id: "worker/one",
|
||||||
|
}) ===
|
||||||
|
"/runtimes/local%20runtime/workers/worker%2Fone/console",
|
||||||
|
"href should contain encoded runtime_id and worker_id segments",
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
Deno.test("segmentsToText preserves protocol segment semantics", () => {
|
||||||
|
const text = segmentsToText([
|
||||||
|
{ kind: "text", content: "hello" },
|
||||||
|
{ kind: "file_ref", path: "/tmp/example.md" },
|
||||||
|
{ kind: "knowledge_ref", slug: "design-note" },
|
||||||
|
{ kind: "workflow_invoke", slug: "ticket-review" },
|
||||||
|
]);
|
||||||
|
|
||||||
|
assert(text.includes("hello"), "text segment should render content");
|
||||||
|
assert(
|
||||||
|
text.includes("@file /tmp/example.md"),
|
||||||
|
"file ref should render as a file reference",
|
||||||
|
);
|
||||||
|
assert(
|
||||||
|
text.includes("@knowledge design-note"),
|
||||||
|
"knowledge ref should render as a knowledge reference",
|
||||||
|
);
|
||||||
|
assert(
|
||||||
|
text.includes("/ticket-review"),
|
||||||
|
"workflow invocation should render as slash command",
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
Deno.test("projectConsole keeps transcript and protocol-derived event rows distinct", () => {
|
||||||
|
const projection = projectConsole(
|
||||||
|
[
|
||||||
|
{
|
||||||
|
sequence: 1,
|
||||||
|
role: "user",
|
||||||
|
content: "transcript input",
|
||||||
|
event_id: 10,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
cursor: "11",
|
||||||
|
event: {
|
||||||
|
event: "text_delta",
|
||||||
|
data: { text: "stream" },
|
||||||
|
} satisfies Event,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
cursor: "12",
|
||||||
|
event: {
|
||||||
|
event: "thinking_done",
|
||||||
|
data: { text: "reasoning" },
|
||||||
|
} satisfies Event,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
cursor: "13",
|
||||||
|
event: {
|
||||||
|
event: "tool_result",
|
||||||
|
data: {
|
||||||
|
id: "tool-1",
|
||||||
|
summary: "read file",
|
||||||
|
output: "content",
|
||||||
|
is_error: false,
|
||||||
|
},
|
||||||
|
} satisfies Event,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
cursor: "14",
|
||||||
|
event: {
|
||||||
|
event: "usage",
|
||||||
|
data: { input_tokens: 12, output_tokens: 5 },
|
||||||
|
} satisfies Event,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
cursor: "15",
|
||||||
|
event: {
|
||||||
|
event: "error",
|
||||||
|
data: { code: "invalid_request", message: "bad frame" },
|
||||||
|
} satisfies Event,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
);
|
||||||
|
|
||||||
|
assert(
|
||||||
|
projection.lines.some((line) =>
|
||||||
|
line.source === "transcript" && line.kind === "user"
|
||||||
|
),
|
||||||
|
"transcript user row expected",
|
||||||
|
);
|
||||||
|
assert(
|
||||||
|
projection.lines.some((line) =>
|
||||||
|
line.source === "event" && line.kind === "assistant"
|
||||||
|
),
|
||||||
|
"assistant event row expected",
|
||||||
|
);
|
||||||
|
assert(
|
||||||
|
projection.lines.some((line) => line.kind === "thinking"),
|
||||||
|
"thinking event row expected",
|
||||||
|
);
|
||||||
|
assert(
|
||||||
|
projection.lines.some((line) => line.kind === "tool"),
|
||||||
|
"tool event row expected",
|
||||||
|
);
|
||||||
|
assert(
|
||||||
|
projection.lines.some((line) => line.kind === "usage"),
|
||||||
|
"usage event row expected",
|
||||||
|
);
|
||||||
|
assert(
|
||||||
|
projection.lines.some((line) => line.kind === "error" && line.error),
|
||||||
|
"error event row expected",
|
||||||
|
);
|
||||||
|
assert(
|
||||||
|
projection.usage === "input 12 · output 5 · cache unknown",
|
||||||
|
"usage summary should be retained",
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
Deno.test("projectConsole displays snapshot and in-flight state", () => {
|
||||||
|
const projection = projectConsole([], [
|
||||||
|
{
|
||||||
|
cursor: "20",
|
||||||
|
event: {
|
||||||
|
event: "snapshot",
|
||||||
|
data: {
|
||||||
|
entries: [{ role: "user" }],
|
||||||
|
greeting: {
|
||||||
|
worker_name: "Worker",
|
||||||
|
cwd: "/repo",
|
||||||
|
provider: "provider",
|
||||||
|
model: "model",
|
||||||
|
scope_summary: "bounded",
|
||||||
|
tools: ["Read"],
|
||||||
|
context_window: 100,
|
||||||
|
context_tokens: 20,
|
||||||
|
},
|
||||||
|
status: "running",
|
||||||
|
in_flight: {
|
||||||
|
blocks: [
|
||||||
|
{ kind: "text", text: "unfinished answer", finished: false },
|
||||||
|
{
|
||||||
|
kind: "tool_call",
|
||||||
|
id: "call-1",
|
||||||
|
name: "Read",
|
||||||
|
args: "{}",
|
||||||
|
state: "streaming_args",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
} satisfies Event,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
assert(projection.status === "running", "snapshot should update status");
|
||||||
|
assert(
|
||||||
|
projection.lines.some((line) => line.kind === "snapshot"),
|
||||||
|
"snapshot row expected",
|
||||||
|
);
|
||||||
|
assert(
|
||||||
|
projection.lines.filter((line) => line.kind === "in_flight").length === 2,
|
||||||
|
"in-flight rows expected",
|
||||||
|
);
|
||||||
|
});
|
||||||
598
web/workspace/src/lib/workspace-console/model.ts
Normal file
598
web/workspace/src/lib/workspace-console/model.ts
Normal file
|
|
@ -0,0 +1,598 @@
|
||||||
|
import type {
|
||||||
|
Event as ProtocolEvent,
|
||||||
|
InFlightBlock,
|
||||||
|
Segment,
|
||||||
|
} from "$lib/generated/protocol";
|
||||||
|
import type { WorkerTranscriptItem } from "$lib/workspace-sidebar/types";
|
||||||
|
|
||||||
|
export type ConsoleLineKind =
|
||||||
|
| "user"
|
||||||
|
| "assistant"
|
||||||
|
| "thinking"
|
||||||
|
| "tool"
|
||||||
|
| "status"
|
||||||
|
| "error"
|
||||||
|
| "usage"
|
||||||
|
| "snapshot"
|
||||||
|
| "in_flight"
|
||||||
|
| "system";
|
||||||
|
|
||||||
|
export type ConsoleLine = {
|
||||||
|
id: string;
|
||||||
|
kind: ConsoleLineKind;
|
||||||
|
title: string;
|
||||||
|
body: string;
|
||||||
|
detail?: string;
|
||||||
|
cursor?: string | null;
|
||||||
|
source: "transcript" | "event";
|
||||||
|
streaming?: boolean;
|
||||||
|
error?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type ConsoleProjection = {
|
||||||
|
lines: ConsoleLine[];
|
||||||
|
status: string | null;
|
||||||
|
usage: string | null;
|
||||||
|
lastCursor: string | null;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type WorkerTarget = {
|
||||||
|
runtime_id: string;
|
||||||
|
worker_id: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function workerConsoleHref(target: WorkerTarget): string {
|
||||||
|
return `/runtimes/${encodeURIComponent(target.runtime_id)}/workers/${
|
||||||
|
encodeURIComponent(
|
||||||
|
target.worker_id,
|
||||||
|
)
|
||||||
|
}/console`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function workerConsolePath(runtimeId: string, workerId: string): string {
|
||||||
|
return workerConsoleHref({ runtime_id: runtimeId, worker_id: workerId });
|
||||||
|
}
|
||||||
|
|
||||||
|
export function transcriptLines(items: WorkerTranscriptItem[]): ConsoleLine[] {
|
||||||
|
return items.map((item) => ({
|
||||||
|
id: `transcript-${item.event_id}-${item.sequence}`,
|
||||||
|
kind: transcriptRoleKind(item.role),
|
||||||
|
title: `${item.role} · transcript #${item.sequence}`,
|
||||||
|
body: item.content,
|
||||||
|
detail: `event ${item.event_id}`,
|
||||||
|
source: "transcript",
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
export function projectConsole(
|
||||||
|
transcript: WorkerTranscriptItem[],
|
||||||
|
events: Array<{ cursor: string; event: ProtocolEvent }> = [],
|
||||||
|
): ConsoleProjection {
|
||||||
|
return events.reduce(applyProtocolEvent, {
|
||||||
|
lines: transcriptLines(transcript),
|
||||||
|
status: null,
|
||||||
|
usage: null,
|
||||||
|
lastCursor: null,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function applyProtocolEvent(
|
||||||
|
projection: ConsoleProjection,
|
||||||
|
envelope: { cursor: string; event: ProtocolEvent },
|
||||||
|
): ConsoleProjection {
|
||||||
|
const next: ConsoleProjection = {
|
||||||
|
lines: [...projection.lines],
|
||||||
|
status: projection.status,
|
||||||
|
usage: projection.usage,
|
||||||
|
lastCursor: envelope.cursor,
|
||||||
|
};
|
||||||
|
const event = envelope.event;
|
||||||
|
|
||||||
|
switch (event.event) {
|
||||||
|
case "user_message":
|
||||||
|
next.lines.push(
|
||||||
|
line(
|
||||||
|
envelope.cursor,
|
||||||
|
"user",
|
||||||
|
"user message",
|
||||||
|
segmentsToText(event.data.segments),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "system_item":
|
||||||
|
next.lines.push(
|
||||||
|
line(
|
||||||
|
envelope.cursor,
|
||||||
|
"system",
|
||||||
|
"system item",
|
||||||
|
jsonPreview(event.data.item),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "text_delta":
|
||||||
|
appendStreaming(
|
||||||
|
next,
|
||||||
|
envelope.cursor,
|
||||||
|
"assistant",
|
||||||
|
"assistant streaming",
|
||||||
|
event.data.text,
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "text_done":
|
||||||
|
finalizeStreaming(
|
||||||
|
next,
|
||||||
|
"assistant",
|
||||||
|
envelope.cursor,
|
||||||
|
"assistant",
|
||||||
|
event.data.text,
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "thinking_start":
|
||||||
|
next.lines.push(
|
||||||
|
line(envelope.cursor, "thinking", "thinking", "", undefined, true),
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "thinking_delta":
|
||||||
|
appendStreaming(
|
||||||
|
next,
|
||||||
|
envelope.cursor,
|
||||||
|
"thinking",
|
||||||
|
"thinking",
|
||||||
|
event.data.text,
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "thinking_done":
|
||||||
|
finalizeStreaming(
|
||||||
|
next,
|
||||||
|
"thinking",
|
||||||
|
envelope.cursor,
|
||||||
|
"thinking",
|
||||||
|
event.data.text,
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "tool_call_start":
|
||||||
|
next.lines.push(
|
||||||
|
line(
|
||||||
|
envelope.cursor,
|
||||||
|
"tool",
|
||||||
|
`tool call · ${event.data.name}`,
|
||||||
|
`id: ${event.data.id}`,
|
||||||
|
undefined,
|
||||||
|
true,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "tool_call_args_delta":
|
||||||
|
appendToolArgs(next, envelope.cursor, event.data.id, event.data.json);
|
||||||
|
break;
|
||||||
|
case "tool_call_done":
|
||||||
|
next.lines.push(
|
||||||
|
line(
|
||||||
|
envelope.cursor,
|
||||||
|
"tool",
|
||||||
|
`tool call done · ${event.data.name}`,
|
||||||
|
event.data.arguments,
|
||||||
|
`id: ${event.data.id}`,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "tool_result":
|
||||||
|
next.lines.push(
|
||||||
|
line(
|
||||||
|
envelope.cursor,
|
||||||
|
"tool",
|
||||||
|
event.data.is_error ? "tool result error" : "tool result",
|
||||||
|
event.data.output ?? event.data.summary,
|
||||||
|
`id: ${event.data.id} · ${event.data.summary}`,
|
||||||
|
false,
|
||||||
|
event.data.is_error,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "usage":
|
||||||
|
next.usage = usageText(event.data);
|
||||||
|
next.lines.push(line(envelope.cursor, "usage", "usage", next.usage));
|
||||||
|
break;
|
||||||
|
case "error":
|
||||||
|
next.lines.push(
|
||||||
|
line(
|
||||||
|
envelope.cursor,
|
||||||
|
"error",
|
||||||
|
`error · ${event.data.code}`,
|
||||||
|
event.data.message,
|
||||||
|
undefined,
|
||||||
|
false,
|
||||||
|
true,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "snapshot":
|
||||||
|
next.status = event.data.status;
|
||||||
|
next.lines.push(
|
||||||
|
line(
|
||||||
|
envelope.cursor,
|
||||||
|
"snapshot",
|
||||||
|
`snapshot · ${event.data.status}`,
|
||||||
|
`${event.data.entries.length} entries · ${event.data.greeting.provider} / ${event.data.greeting.model}`,
|
||||||
|
`${event.data.greeting.worker_name} · context ${event.data.greeting.context_tokens}/${event.data.greeting.context_window}`,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
for (const block of event.data.in_flight?.blocks ?? []) {
|
||||||
|
next.lines.push(inFlightLine(envelope.cursor, block));
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "status":
|
||||||
|
next.status = event.data.status;
|
||||||
|
next.lines.push(
|
||||||
|
line(envelope.cursor, "status", "status", event.data.status),
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "invoke_start":
|
||||||
|
next.lines.push(
|
||||||
|
line(envelope.cursor, "status", "invoke start", event.data.kind),
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "turn_start":
|
||||||
|
next.lines.push(
|
||||||
|
line(
|
||||||
|
envelope.cursor,
|
||||||
|
"status",
|
||||||
|
"turn start",
|
||||||
|
`turn ${event.data.turn}`,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "turn_end":
|
||||||
|
next.lines.push(
|
||||||
|
line(
|
||||||
|
envelope.cursor,
|
||||||
|
"status",
|
||||||
|
"turn end",
|
||||||
|
`turn ${event.data.turn} · ${event.data.result}`,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "llm_call_start":
|
||||||
|
next.lines.push(
|
||||||
|
line(
|
||||||
|
envelope.cursor,
|
||||||
|
"status",
|
||||||
|
"llm call start",
|
||||||
|
`call ${event.data.llm_call}`,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "llm_call_end":
|
||||||
|
next.lines.push(
|
||||||
|
line(
|
||||||
|
envelope.cursor,
|
||||||
|
"status",
|
||||||
|
"llm call end",
|
||||||
|
`call ${event.data.llm_call}`,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "llm_retry":
|
||||||
|
next.lines.push(
|
||||||
|
line(
|
||||||
|
envelope.cursor,
|
||||||
|
"status",
|
||||||
|
"llm retry",
|
||||||
|
`${event.data.error} · attempt ${event.data.failed_attempt}/${event.data.max_attempts}`,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "llm_continuation":
|
||||||
|
next.lines.push(
|
||||||
|
line(
|
||||||
|
envelope.cursor,
|
||||||
|
"status",
|
||||||
|
"llm continuation",
|
||||||
|
`${event.data.reason} · attempt ${event.data.attempt}/${event.data.max_attempts}`,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "run_end":
|
||||||
|
next.lines.push(
|
||||||
|
line(envelope.cursor, "status", "run end", event.data.result),
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "alert":
|
||||||
|
next.lines.push(
|
||||||
|
line(
|
||||||
|
envelope.cursor,
|
||||||
|
"status",
|
||||||
|
`alert · ${event.data.level}`,
|
||||||
|
event.data.message,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "memory_worker":
|
||||||
|
next.lines.push(
|
||||||
|
line(envelope.cursor, "status", "memory worker", event.data.message),
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "segment_rotated":
|
||||||
|
next.lines.push(
|
||||||
|
line(
|
||||||
|
envelope.cursor,
|
||||||
|
"status",
|
||||||
|
"segment rotated",
|
||||||
|
jsonPreview(event.data.entry),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "completions":
|
||||||
|
next.lines.push(
|
||||||
|
line(
|
||||||
|
envelope.cursor,
|
||||||
|
"status",
|
||||||
|
"completions",
|
||||||
|
`${event.data.kind} · ${event.data.entries.length} entries`,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "rewind_targets":
|
||||||
|
next.lines.push(
|
||||||
|
line(
|
||||||
|
envelope.cursor,
|
||||||
|
"status",
|
||||||
|
"rewind targets",
|
||||||
|
`${event.data.targets.length} targets · head ${event.data.head_entries}`,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "rewind_applied":
|
||||||
|
next.lines.push(
|
||||||
|
line(
|
||||||
|
envelope.cursor,
|
||||||
|
"status",
|
||||||
|
"rewind applied",
|
||||||
|
`${event.data.summary.discarded_entries} discarded · ${event.data.summary.truncated_to_entries} retained`,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "workers_listed":
|
||||||
|
next.lines.push(
|
||||||
|
line(
|
||||||
|
envelope.cursor,
|
||||||
|
"status",
|
||||||
|
"workers listed",
|
||||||
|
jsonPreview(event.data.workers),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "worker_restored":
|
||||||
|
next.lines.push(
|
||||||
|
line(
|
||||||
|
envelope.cursor,
|
||||||
|
"status",
|
||||||
|
"worker restored",
|
||||||
|
jsonPreview(event.data.result),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "peer_registered":
|
||||||
|
next.lines.push(
|
||||||
|
line(
|
||||||
|
envelope.cursor,
|
||||||
|
"status",
|
||||||
|
"peer registered",
|
||||||
|
jsonPreview(event.data.result),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "compact_start":
|
||||||
|
next.lines.push(
|
||||||
|
line(envelope.cursor, "status", "compact start", "compaction started"),
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "compact_done":
|
||||||
|
next.lines.push(
|
||||||
|
line(
|
||||||
|
envelope.cursor,
|
||||||
|
"status",
|
||||||
|
"compact done",
|
||||||
|
event.data.new_segment_id,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "compact_failed":
|
||||||
|
next.lines.push(
|
||||||
|
line(
|
||||||
|
envelope.cursor,
|
||||||
|
"error",
|
||||||
|
"compact failed",
|
||||||
|
event.data.error,
|
||||||
|
undefined,
|
||||||
|
false,
|
||||||
|
true,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case "shutdown":
|
||||||
|
next.status = "shutdown";
|
||||||
|
next.lines.push(
|
||||||
|
line(envelope.cursor, "status", "shutdown", "worker shut down"),
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
return next;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function segmentsToText(segments: Segment[]): string {
|
||||||
|
return segments
|
||||||
|
.map((segment) => {
|
||||||
|
switch (segment.kind) {
|
||||||
|
case "text":
|
||||||
|
return segment.content;
|
||||||
|
case "paste":
|
||||||
|
return segment.content ||
|
||||||
|
`[paste ${segment.id}: ${segment.chars} chars / ${segment.lines} lines]`;
|
||||||
|
case "file_ref":
|
||||||
|
return `@file ${segment.path}`;
|
||||||
|
case "knowledge_ref":
|
||||||
|
return `@knowledge ${segment.slug}`;
|
||||||
|
case "workflow_invoke":
|
||||||
|
return `/${segment.slug}`;
|
||||||
|
case "unknown":
|
||||||
|
return "[unknown segment]";
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.join("\n");
|
||||||
|
}
|
||||||
|
|
||||||
|
function transcriptRoleKind(role: string): ConsoleLineKind {
|
||||||
|
if (role === "user" || role === "assistant" || role === "system") {
|
||||||
|
return role;
|
||||||
|
}
|
||||||
|
return "system";
|
||||||
|
}
|
||||||
|
|
||||||
|
function line(
|
||||||
|
cursor: string,
|
||||||
|
kind: ConsoleLineKind,
|
||||||
|
title: string,
|
||||||
|
body: string,
|
||||||
|
detail?: string,
|
||||||
|
streaming = false,
|
||||||
|
error = false,
|
||||||
|
): ConsoleLine {
|
||||||
|
return {
|
||||||
|
id: `event-${cursor}-${kind}-${slugify(title)}-${body.length}`,
|
||||||
|
kind,
|
||||||
|
title,
|
||||||
|
body,
|
||||||
|
detail,
|
||||||
|
cursor,
|
||||||
|
source: "event",
|
||||||
|
streaming,
|
||||||
|
error,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function appendStreaming(
|
||||||
|
projection: ConsoleProjection,
|
||||||
|
cursor: string,
|
||||||
|
kind: "assistant" | "thinking",
|
||||||
|
title: string,
|
||||||
|
delta: string,
|
||||||
|
): void {
|
||||||
|
const existing = [...projection.lines].reverse().find((item) =>
|
||||||
|
item.kind === kind && item.streaming
|
||||||
|
);
|
||||||
|
if (existing) {
|
||||||
|
existing.body += delta;
|
||||||
|
existing.cursor = cursor;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
projection.lines.push(line(cursor, kind, title, delta, undefined, true));
|
||||||
|
}
|
||||||
|
|
||||||
|
function finalizeStreaming(
|
||||||
|
projection: ConsoleProjection,
|
||||||
|
kind: "assistant" | "thinking",
|
||||||
|
cursor: string,
|
||||||
|
title: string,
|
||||||
|
body: string,
|
||||||
|
): void {
|
||||||
|
const existing = [...projection.lines].reverse().find((item) =>
|
||||||
|
item.kind === kind && item.streaming
|
||||||
|
);
|
||||||
|
if (existing) {
|
||||||
|
existing.body = body || existing.body;
|
||||||
|
existing.streaming = false;
|
||||||
|
existing.title = title;
|
||||||
|
existing.cursor = cursor;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
projection.lines.push(line(cursor, kind, title, body));
|
||||||
|
}
|
||||||
|
|
||||||
|
function appendToolArgs(
|
||||||
|
projection: ConsoleProjection,
|
||||||
|
cursor: string,
|
||||||
|
id: string,
|
||||||
|
delta: string,
|
||||||
|
): void {
|
||||||
|
const existing = [...projection.lines]
|
||||||
|
.reverse()
|
||||||
|
.find((item) =>
|
||||||
|
item.kind === "tool" && item.streaming && item.body.includes(`id: ${id}`)
|
||||||
|
);
|
||||||
|
if (existing) {
|
||||||
|
existing.body += delta;
|
||||||
|
existing.cursor = cursor;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
projection.lines.push(
|
||||||
|
line(
|
||||||
|
cursor,
|
||||||
|
"tool",
|
||||||
|
"tool call args",
|
||||||
|
`id: ${id}\n${delta}`,
|
||||||
|
undefined,
|
||||||
|
true,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function usageText(
|
||||||
|
data: {
|
||||||
|
input_tokens: number | null;
|
||||||
|
output_tokens: number | null;
|
||||||
|
cache_read_input_tokens?: number | null;
|
||||||
|
},
|
||||||
|
): string {
|
||||||
|
return `input ${data.input_tokens ?? "unknown"} · output ${
|
||||||
|
data.output_tokens ?? "unknown"
|
||||||
|
} · cache ${data.cache_read_input_tokens ?? "unknown"}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function inFlightLine(cursor: string, block: InFlightBlock): ConsoleLine {
|
||||||
|
switch (block.kind) {
|
||||||
|
case "text":
|
||||||
|
return line(
|
||||||
|
cursor,
|
||||||
|
"in_flight",
|
||||||
|
"in-flight assistant text",
|
||||||
|
block.text,
|
||||||
|
undefined,
|
||||||
|
!block.finished,
|
||||||
|
);
|
||||||
|
case "thinking":
|
||||||
|
return line(
|
||||||
|
cursor,
|
||||||
|
"in_flight",
|
||||||
|
"in-flight thinking",
|
||||||
|
block.text,
|
||||||
|
undefined,
|
||||||
|
!block.finished,
|
||||||
|
);
|
||||||
|
case "tool_call":
|
||||||
|
return line(
|
||||||
|
cursor,
|
||||||
|
"in_flight",
|
||||||
|
`in-flight tool · ${block.name}`,
|
||||||
|
block.args,
|
||||||
|
`${block.id} · ${block.state ?? "pending"}`,
|
||||||
|
block.state !== "done",
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function slugify(value: string): string {
|
||||||
|
return value.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(
|
||||||
|
/^-|-$/g,
|
||||||
|
"",
|
||||||
|
) || "event";
|
||||||
|
}
|
||||||
|
|
||||||
|
function jsonPreview(value: unknown): string {
|
||||||
|
try {
|
||||||
|
return JSON.stringify(value, null, 2) ?? "null";
|
||||||
|
} catch {
|
||||||
|
return String(value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,78 @@
|
||||||
|
declare const Deno: {
|
||||||
|
test(name: string, fn: () => Promise<void> | void): void;
|
||||||
|
readTextFile(path: string | URL): Promise<string>;
|
||||||
|
};
|
||||||
|
|
||||||
|
function assert(condition: unknown, message: string): asserts condition {
|
||||||
|
if (!condition) {
|
||||||
|
throw new Error(message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Deno.test("workspace Worker list and sidebar attach through Worker Console hrefs", async () => {
|
||||||
|
const workspacePage = await Deno.readTextFile(
|
||||||
|
new URL("../workspace-pages/WorkspacePage.svelte", import.meta.url),
|
||||||
|
);
|
||||||
|
const workersNav = await Deno.readTextFile(
|
||||||
|
new URL("../workspace-sidebar/WorkersNavSection.svelte", import.meta.url),
|
||||||
|
);
|
||||||
|
const sidebar = await Deno.readTextFile(
|
||||||
|
new URL("../workspace-sidebar/WorkspaceSidebar.svelte", import.meta.url),
|
||||||
|
);
|
||||||
|
|
||||||
|
assert(
|
||||||
|
workspacePage.includes("workerConsoleHref(worker)") &&
|
||||||
|
workspacePage.includes("Open Console"),
|
||||||
|
"top Worker list should expose an attach action per Worker",
|
||||||
|
);
|
||||||
|
assert(
|
||||||
|
workersNav.includes("workerConsoleHref(worker)") &&
|
||||||
|
workersNav.includes("aria-current"),
|
||||||
|
"Workers sidebar rows should link to the Worker target Console route",
|
||||||
|
);
|
||||||
|
assert(
|
||||||
|
!sidebar.includes("CompanionNavSection") &&
|
||||||
|
sidebar.includes("WorkersNavSection"),
|
||||||
|
"standalone Companion/Console navigation should not remain canonical",
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
Deno.test("Worker Console page is routed by runtime_id and worker_id through backend APIs", async () => {
|
||||||
|
const consolePage = await Deno.readTextFile(
|
||||||
|
new URL(
|
||||||
|
"./../../routes/runtimes/[runtimeId]/workers/[workerId]/console/+page.svelte",
|
||||||
|
import.meta.url,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
const routeLoad = await Deno.readTextFile(
|
||||||
|
new URL(
|
||||||
|
"./../../routes/runtimes/[runtimeId]/workers/[workerId]/console/+page.ts",
|
||||||
|
import.meta.url,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
|
||||||
|
assert(
|
||||||
|
routeLoad.includes("runtimeId") && routeLoad.includes("workerId"),
|
||||||
|
"route load should expose both target ids",
|
||||||
|
);
|
||||||
|
assert(
|
||||||
|
consolePage.includes(
|
||||||
|
"/api/runtimes/${encodeURIComponent(runtimeId)}/workers/${encodeURIComponent(workerId)}",
|
||||||
|
),
|
||||||
|
"Worker detail should use the backend Worker detail API",
|
||||||
|
);
|
||||||
|
assert(
|
||||||
|
consolePage.includes("/transcript?limit=200") &&
|
||||||
|
consolePage.includes("/events/ws") && consolePage.includes("/input"),
|
||||||
|
"Console should use bounded transcript, observation WS, and input APIs",
|
||||||
|
);
|
||||||
|
assert(
|
||||||
|
!consolePage.includes("/api/companion"),
|
||||||
|
"Console page must not use Companion-specific APIs",
|
||||||
|
);
|
||||||
|
assert(
|
||||||
|
consolePage.includes("streaming observation is not available") ||
|
||||||
|
consolePage.includes("Streaming observation is not available"),
|
||||||
|
"Console should show an explicit non-streaming degradation path",
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import RepositoryTicketKanban from '$lib/workspace-pages/RepositoryTicketKanban.svelte';
|
import RepositoryTicketKanban from '$lib/workspace-pages/RepositoryTicketKanban.svelte';
|
||||||
|
import { workerConsoleHref } from '$lib/workspace-console/model';
|
||||||
import WorkspaceSidebar from '$lib/workspace-sidebar/WorkspaceSidebar.svelte';
|
import WorkspaceSidebar from '$lib/workspace-sidebar/WorkspaceSidebar.svelte';
|
||||||
import type {
|
import type {
|
||||||
Diagnostic,
|
Diagnostic,
|
||||||
|
|
@ -585,6 +586,7 @@
|
||||||
<th>State</th>
|
<th>State</th>
|
||||||
<th>Workspace</th>
|
<th>Workspace</th>
|
||||||
<th>Implementation</th>
|
<th>Implementation</th>
|
||||||
|
<th>Attach</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
|
|
@ -600,6 +602,7 @@
|
||||||
<td>{worker.state} · {worker.status}</td>
|
<td>{worker.state} · {worker.status}</td>
|
||||||
<td>{worker.workspace.visibility} · {worker.workspace.identity}</td>
|
<td>{worker.workspace.visibility} · {worker.workspace.identity}</td>
|
||||||
<td>{worker.implementation.kind}</td>
|
<td>{worker.implementation.kind}</td>
|
||||||
|
<td><a class="inline-link" href={workerConsoleHref(worker)}>Open Console</a></td>
|
||||||
</tr>
|
</tr>
|
||||||
{/each}
|
{/each}
|
||||||
</tbody>
|
</tbody>
|
||||||
|
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
type Props = {
|
|
||||||
currentPath?: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
let { currentPath = '/' }: Props = $props();
|
|
||||||
|
|
||||||
const active = $derived(currentPath === '/console');
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<section class="sidebar-section" aria-labelledby="companion-console-heading">
|
|
||||||
<div class="section-heading-row">
|
|
||||||
<h2 id="companion-console-heading">Console</h2>
|
|
||||||
<span class="section-count">MVP</span>
|
|
||||||
</div>
|
|
||||||
<a class:active class="nav-item" href="/console" aria-current={active ? 'page' : undefined}>
|
|
||||||
<span class="item-title">Companion Console</span>
|
|
||||||
<span class="item-meta">status · transcript · send</span>
|
|
||||||
</a>
|
|
||||||
</section>
|
|
||||||
|
|
@ -1,8 +1,15 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import { workerConsoleHref } from '$lib/workspace-console/model';
|
||||||
import type { ListResponse, Worker } from './types';
|
import type { ListResponse, Worker } from './types';
|
||||||
|
|
||||||
const MAX_VISIBLE_WORKERS = 6;
|
const MAX_VISIBLE_WORKERS = 6;
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
currentPath?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
let { currentPath = '/' }: Props = $props();
|
||||||
|
|
||||||
let loading = $state(true);
|
let loading = $state(true);
|
||||||
let error = $state<string | null>(null);
|
let error = $state<string | null>(null);
|
||||||
let workers = $state<Worker[]>([]);
|
let workers = $state<Worker[]>([]);
|
||||||
|
|
@ -63,12 +70,15 @@
|
||||||
<p class="section-state">{placeholder ?? 'Workers will appear here when an API is connected.'}</p>
|
<p class="section-state">{placeholder ?? 'Workers will appear here when an API is connected.'}</p>
|
||||||
{:else}
|
{:else}
|
||||||
<ul class="nav-list" aria-label="Workers">
|
<ul class="nav-list" aria-label="Workers">
|
||||||
{#each workers as worker (worker.worker_id)}
|
{#each workers as worker (`${worker.runtime_id}:${worker.worker_id}`)}
|
||||||
<li class="nav-item">
|
{@const href = workerConsoleHref(worker)}
|
||||||
|
<li class="nav-item" class:active={currentPath === href}>
|
||||||
|
<a href={href} class="nav-link" aria-current={currentPath === href ? 'page' : undefined}>
|
||||||
<span class="item-title">{worker.label}</span>
|
<span class="item-title">{worker.label}</span>
|
||||||
<span class="item-meta">
|
<span class="item-meta">
|
||||||
{worker.state} · {worker.status}{worker.role ? ` · ${worker.role}` : ''}
|
{worker.state} · {worker.status}{worker.role ? ` · ${worker.role}` : ''}
|
||||||
</span>
|
</span>
|
||||||
|
</a>
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import CompanionNavSection from './CompanionNavSection.svelte';
|
|
||||||
import ObjectivesNavSection from './ObjectivesNavSection.svelte';
|
import ObjectivesNavSection from './ObjectivesNavSection.svelte';
|
||||||
import RepositoriesNavSection from './RepositoriesNavSection.svelte';
|
import RepositoriesNavSection from './RepositoriesNavSection.svelte';
|
||||||
import WorkersNavSection from './WorkersNavSection.svelte';
|
import WorkersNavSection from './WorkersNavSection.svelte';
|
||||||
|
|
@ -42,9 +41,8 @@
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<nav class="sidebar-sections" aria-label="Workspace sections">
|
<nav class="sidebar-sections" aria-label="Workspace sections">
|
||||||
<CompanionNavSection {currentPath} />
|
|
||||||
<RepositoriesNavSection {workspace} {currentPath} />
|
<RepositoriesNavSection {workspace} {currentPath} />
|
||||||
<ObjectivesNavSection {currentPath} />
|
<ObjectivesNavSection {currentPath} />
|
||||||
<WorkersNavSection />
|
<WorkersNavSection {currentPath} />
|
||||||
</nav>
|
</nav>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,11 @@
|
||||||
export type {
|
import type {
|
||||||
Event as PodProtocolEvent,
|
Event as PodProtocolEvent,
|
||||||
Method as PodProtocolMethod,
|
Method as PodProtocolMethod,
|
||||||
Segment as PodProtocolSegment,
|
Segment as PodProtocolSegment
|
||||||
} from '$lib/generated/protocol';
|
} from '$lib/generated/protocol';
|
||||||
|
|
||||||
|
export type { PodProtocolEvent, PodProtocolMethod, PodProtocolSegment };
|
||||||
|
|
||||||
export type ExtensionPoint = {
|
export type ExtensionPoint = {
|
||||||
status: string;
|
status: string;
|
||||||
note: string;
|
note: string;
|
||||||
|
|
@ -93,6 +95,53 @@ export type Worker = {
|
||||||
diagnostics: Diagnostic[];
|
diagnostics: Diagnostic[];
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export type WorkerOperationState = 'accepted' | 'unsupported' | 'rejected';
|
||||||
|
|
||||||
|
export type WorkerInputResult = {
|
||||||
|
state: WorkerOperationState;
|
||||||
|
runtime_id: string;
|
||||||
|
worker_id: string;
|
||||||
|
transcript_sequence?: number | null;
|
||||||
|
event_id?: number | null;
|
||||||
|
diagnostics: Diagnostic[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export type WorkerTranscriptItem = {
|
||||||
|
sequence: number;
|
||||||
|
role: 'user' | 'assistant' | 'system' | string;
|
||||||
|
content: string;
|
||||||
|
event_id: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type WorkerTranscriptProjection = {
|
||||||
|
state: WorkerOperationState;
|
||||||
|
runtime_id: string;
|
||||||
|
worker_id: string;
|
||||||
|
start: number;
|
||||||
|
limit: number;
|
||||||
|
total_items: number;
|
||||||
|
next_start?: number | null;
|
||||||
|
items: WorkerTranscriptItem[];
|
||||||
|
diagnostics: Diagnostic[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export type ClientWorkerEventWsEnvelope = {
|
||||||
|
cursor: string;
|
||||||
|
event_id: string;
|
||||||
|
runtime_id: string;
|
||||||
|
worker_id: string;
|
||||||
|
payload: PodProtocolEvent;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type ClientWorkerEventWsDiagnostic = {
|
||||||
|
code: string;
|
||||||
|
message: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type ClientWorkerEventWsFrame =
|
||||||
|
| { kind: 'event'; envelope: ClientWorkerEventWsEnvelope }
|
||||||
|
| { kind: 'diagnostic'; diagnostic: ClientWorkerEventWsDiagnostic };
|
||||||
|
|
||||||
export type ListResponse<T> = {
|
export type ListResponse<T> = {
|
||||||
workspace_id: string;
|
workspace_id: string;
|
||||||
limit: number;
|
limit: number;
|
||||||
|
|
|
||||||
|
|
@ -1,281 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import WorkspaceSidebar from '$lib/workspace-sidebar/WorkspaceSidebar.svelte';
|
|
||||||
import type {
|
|
||||||
CompanionMessageResponse,
|
|
||||||
CompanionState,
|
|
||||||
CompanionStatusResponse,
|
|
||||||
CompanionTranscriptItem,
|
|
||||||
CompanionTranscriptProjection,
|
|
||||||
Diagnostic,
|
|
||||||
WorkspaceResponse
|
|
||||||
} from '$lib/workspace-sidebar/types';
|
|
||||||
|
|
||||||
let workspace = $state<WorkspaceResponse | null>(null);
|
|
||||||
let workspaceError = $state<string | null>(null);
|
|
||||||
let status = $state<CompanionStatusResponse | null>(null);
|
|
||||||
let transcript = $state<CompanionTranscriptProjection | null>(null);
|
|
||||||
let draft = $state('');
|
|
||||||
let operationState = $state<CompanionState>('ready');
|
|
||||||
let error = $state<string | null>(null);
|
|
||||||
let timeoutNotice = $state<string | null>(null);
|
|
||||||
let requestId = 0;
|
|
||||||
|
|
||||||
const currentPath = '/console';
|
|
||||||
const messages = $derived(transcript?.items ?? []);
|
|
||||||
const diagnostics = $derived(mergeDiagnostics(status?.diagnostics ?? [], transcript?.diagnostics ?? []));
|
|
||||||
const sending = $derived(operationState === 'busy');
|
|
||||||
const canSend = $derived(draft.trim().length > 0 && !sending);
|
|
||||||
|
|
||||||
async function getJson<T>(path: string): Promise<T> {
|
|
||||||
const response = await fetch(path);
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(`GET ${path} failed: ${response.status}`);
|
|
||||||
}
|
|
||||||
return response.json() as Promise<T>;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function postJson<T>(path: string, body: unknown, timeoutMs = 45_000): Promise<T> {
|
|
||||||
const controller = new AbortController();
|
|
||||||
const timeout = window.setTimeout(() => controller.abort(), timeoutMs);
|
|
||||||
try {
|
|
||||||
const response = await fetch(path, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'content-type': 'application/json' },
|
|
||||||
body: JSON.stringify(body),
|
|
||||||
signal: controller.signal
|
|
||||||
});
|
|
||||||
if (!response.ok) {
|
|
||||||
let detail = '';
|
|
||||||
try {
|
|
||||||
detail = await response.text();
|
|
||||||
} catch {
|
|
||||||
detail = '';
|
|
||||||
}
|
|
||||||
throw new Error(`POST ${path} failed: ${response.status}${detail ? ` ${detail}` : ''}`);
|
|
||||||
}
|
|
||||||
return response.json() as Promise<T>;
|
|
||||||
} catch (requestError) {
|
|
||||||
if (requestError instanceof DOMException && requestError.name === 'AbortError') {
|
|
||||||
operationState = 'timeout';
|
|
||||||
timeoutNotice = 'Workspace server request timed out before a Companion response arrived.';
|
|
||||||
}
|
|
||||||
throw requestError;
|
|
||||||
} finally {
|
|
||||||
window.clearTimeout(timeout);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadWorkspace() {
|
|
||||||
workspaceError = null;
|
|
||||||
try {
|
|
||||||
workspace = await getJson<WorkspaceResponse>('/api/workspace');
|
|
||||||
} catch (loadError) {
|
|
||||||
workspaceError = loadError instanceof Error ? loadError.message : String(loadError);
|
|
||||||
workspace = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadCompanion() {
|
|
||||||
error = null;
|
|
||||||
timeoutNotice = null;
|
|
||||||
try {
|
|
||||||
const [nextStatus, nextTranscript] = await Promise.all([
|
|
||||||
getJson<CompanionStatusResponse>('/api/companion/status'),
|
|
||||||
getJson<CompanionTranscriptProjection>('/api/companion/transcript?limit=200')
|
|
||||||
]);
|
|
||||||
status = nextStatus;
|
|
||||||
transcript = nextTranscript;
|
|
||||||
operationState = nextStatus.state === 'error' ? 'error' : 'ready';
|
|
||||||
} catch (loadError) {
|
|
||||||
error = loadError instanceof Error ? loadError.message : String(loadError);
|
|
||||||
operationState = 'error';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function sendMessage(event: SubmitEvent) {
|
|
||||||
event.preventDefault();
|
|
||||||
const content = draft.trim();
|
|
||||||
if (!content || sending) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const currentRequest = ++requestId;
|
|
||||||
error = null;
|
|
||||||
timeoutNotice = null;
|
|
||||||
operationState = 'busy';
|
|
||||||
try {
|
|
||||||
const response = await postJson<CompanionMessageResponse>('/api/companion/messages', { content });
|
|
||||||
if (currentRequest !== requestId) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
operationState = response.state;
|
|
||||||
transcript = response.transcript;
|
|
||||||
if (response.worker || status) {
|
|
||||||
status = {
|
|
||||||
state: response.state === 'accepted' ? 'ready' : response.state,
|
|
||||||
worker: response.worker ?? status?.worker ?? null,
|
|
||||||
transport: status?.transport ?? {
|
|
||||||
kind: 'providerless_backend_internal',
|
|
||||||
completion: 'synchronous_request_response',
|
|
||||||
limitation: 'Companion transport metadata was not available during this response.'
|
|
||||||
},
|
|
||||||
diagnostics: response.diagnostics
|
|
||||||
};
|
|
||||||
}
|
|
||||||
if (response.state === 'accepted') {
|
|
||||||
draft = '';
|
|
||||||
operationState = 'ready';
|
|
||||||
} else if (response.state === 'busy') {
|
|
||||||
error = 'Companion is busy with another message.';
|
|
||||||
} else if (response.state === 'rejected') {
|
|
||||||
error = diagnosticsToText(response.diagnostics) || 'Companion rejected the message.';
|
|
||||||
} else if (response.state === 'error') {
|
|
||||||
error = diagnosticsToText(response.diagnostics) || 'Companion returned an error.';
|
|
||||||
}
|
|
||||||
} catch (sendError) {
|
|
||||||
if (currentRequest !== requestId) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (operationState !== 'timeout') {
|
|
||||||
operationState = 'error';
|
|
||||||
}
|
|
||||||
error = sendError instanceof Error ? sendError.message : String(sendError);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function cancelMessage() {
|
|
||||||
++requestId;
|
|
||||||
operationState = 'cancelled';
|
|
||||||
try {
|
|
||||||
const response = await postJson<CompanionMessageResponse>('/api/companion/cancel', { reason: 'browser_cancel' }, 10_000);
|
|
||||||
transcript = response.transcript;
|
|
||||||
status = status
|
|
||||||
? { ...status, state: response.state, diagnostics: response.diagnostics }
|
|
||||||
: status;
|
|
||||||
} catch (cancelError) {
|
|
||||||
error = cancelError instanceof Error ? cancelError.message : String(cancelError);
|
|
||||||
operationState = 'error';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function mergeDiagnostics(...groups: Diagnostic[][]): Diagnostic[] {
|
|
||||||
return groups.flat();
|
|
||||||
}
|
|
||||||
|
|
||||||
function diagnosticsToText(items: Diagnostic[]): string {
|
|
||||||
return items.map((item) => `${item.severity}: ${item.message}`).join('\n');
|
|
||||||
}
|
|
||||||
|
|
||||||
function itemClass(item: CompanionTranscriptItem): string {
|
|
||||||
if (item.role === 'assistant') {
|
|
||||||
return 'assistant';
|
|
||||||
}
|
|
||||||
if (item.role === 'user') {
|
|
||||||
return 'user';
|
|
||||||
}
|
|
||||||
return 'system';
|
|
||||||
}
|
|
||||||
|
|
||||||
$effect(() => {
|
|
||||||
void loadWorkspace();
|
|
||||||
void loadCompanion();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<svelte:head>
|
|
||||||
<title>Companion Console · Yoi Workspace</title>
|
|
||||||
<meta name="description" content="Workspace Companion Web Console MVP" />
|
|
||||||
</svelte:head>
|
|
||||||
|
|
||||||
<div class="workspace-layout">
|
|
||||||
<WorkspaceSidebar {workspace} {workspaceError} {currentPath} />
|
|
||||||
|
|
||||||
<main class="shell console-shell">
|
|
||||||
<section class="console-header card">
|
|
||||||
<div>
|
|
||||||
<p class="eyebrow">Backend-internal Companion</p>
|
|
||||||
<h2>Companion Console</h2>
|
|
||||||
<p class="section-note">
|
|
||||||
Browser traffic stays behind Workspace API projections. No Worker socket, session path,
|
|
||||||
runtime credential, or local session file is exposed to the frontend.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="console-status" data-state={operationState}>
|
|
||||||
<span>{operationState}</span>
|
|
||||||
{#if status?.worker}
|
|
||||||
<small>{status.worker.label}</small>
|
|
||||||
{:else}
|
|
||||||
<small>worker pending</small>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{#if status?.transport}
|
|
||||||
<section class="card console-transport" aria-label="Companion transport">
|
|
||||||
<div>
|
|
||||||
<dt>Transport</dt>
|
|
||||||
<dd>{status.transport.kind}</dd>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<dt>Completion</dt>
|
|
||||||
<dd>{status.transport.completion}</dd>
|
|
||||||
</div>
|
|
||||||
<p>{status.transport.limitation}</p>
|
|
||||||
</section>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if error || timeoutNotice || diagnostics.length > 0}
|
|
||||||
<section class="card console-diagnostics" aria-label="Companion diagnostics">
|
|
||||||
{#if timeoutNotice}
|
|
||||||
<p class="diagnostic warning">{timeoutNotice}</p>
|
|
||||||
{/if}
|
|
||||||
{#if error}
|
|
||||||
<p class="diagnostic error">{error}</p>
|
|
||||||
{/if}
|
|
||||||
{#each diagnostics as diagnostic}
|
|
||||||
<p class={`diagnostic ${diagnostic.severity}`}>{diagnostic.code}: {diagnostic.message}</p>
|
|
||||||
{/each}
|
|
||||||
</section>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<section class="card transcript-card" aria-label="Companion transcript">
|
|
||||||
<div class="runtime-heading">
|
|
||||||
<h3>Transcript</h3>
|
|
||||||
<span>{transcript?.total_items ?? 0} items</span>
|
|
||||||
</div>
|
|
||||||
{#if messages.length === 0}
|
|
||||||
<p class="empty-state">No Companion messages yet. Send a message to exercise the backend boundary.</p>
|
|
||||||
{:else}
|
|
||||||
<ol class="transcript-list">
|
|
||||||
{#each messages as message (message.sequence)}
|
|
||||||
<li class={`transcript-item ${itemClass(message)}`}>
|
|
||||||
<div class="message-meta">
|
|
||||||
<strong>{message.role}</strong>
|
|
||||||
<span>{message.status}</span>
|
|
||||||
<time datetime={message.created_at}>{message.created_at}</time>
|
|
||||||
</div>
|
|
||||||
<p>{message.content}</p>
|
|
||||||
</li>
|
|
||||||
{/each}
|
|
||||||
</ol>
|
|
||||||
{/if}
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<form class="card composer-card" onsubmit={sendMessage}>
|
|
||||||
<label for="companion-message">Message Companion</label>
|
|
||||||
<textarea
|
|
||||||
id="companion-message"
|
|
||||||
bind:value={draft}
|
|
||||||
rows="4"
|
|
||||||
maxlength="8000"
|
|
||||||
placeholder="Ask or note something for the backend Companion boundary…"
|
|
||||||
disabled={sending}
|
|
||||||
></textarea>
|
|
||||||
<div class="composer-actions">
|
|
||||||
<span>{draft.trim().length}/8000</span>
|
|
||||||
<button type="button" class="secondary" onclick={loadCompanion} disabled={sending}>Refresh</button>
|
|
||||||
<button type="button" class="secondary" onclick={cancelMessage} disabled={!sending}>Cancel</button>
|
|
||||||
<button type="submit" disabled={!canSend}>Send</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
|
|
@ -0,0 +1,419 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import WorkspaceSidebar from '$lib/workspace-sidebar/WorkspaceSidebar.svelte';
|
||||||
|
import {
|
||||||
|
projectConsole,
|
||||||
|
workerConsolePath,
|
||||||
|
type ConsoleLine
|
||||||
|
} from '$lib/workspace-console/model';
|
||||||
|
import type {
|
||||||
|
ClientWorkerEventWsFrame,
|
||||||
|
Diagnostic,
|
||||||
|
Worker,
|
||||||
|
WorkerInputResult,
|
||||||
|
WorkerTranscriptProjection,
|
||||||
|
WorkspaceResponse
|
||||||
|
} from '$lib/workspace-sidebar/types';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
data: {
|
||||||
|
runtimeId: string;
|
||||||
|
workerId: string;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
let { data }: Props = $props();
|
||||||
|
|
||||||
|
const runtimeId = $derived(data.runtimeId);
|
||||||
|
const workerId = $derived(data.workerId);
|
||||||
|
const currentPath = $derived(workerConsolePath(runtimeId, workerId));
|
||||||
|
|
||||||
|
let workspace = $state<WorkspaceResponse | null>(null);
|
||||||
|
let workspaceError = $state<string | null>(null);
|
||||||
|
let worker = $state<Worker | null>(null);
|
||||||
|
let workerError = $state<string | null>(null);
|
||||||
|
let transcript = $state<WorkerTranscriptProjection | null>(null);
|
||||||
|
let transcriptError = $state<string | null>(null);
|
||||||
|
let draft = $state('');
|
||||||
|
let sending = $state(false);
|
||||||
|
let sendError = $state<string | null>(null);
|
||||||
|
let streamState = $state<'connecting' | 'open' | 'unsupported' | 'closed' | 'error'>('connecting');
|
||||||
|
let streamDiagnostics = $state<Diagnostic[]>([]);
|
||||||
|
let observedEvents = $state<Array<{ cursor: string; event: ClientWorkerEventWsFrame & { kind: 'event' } }>>([]);
|
||||||
|
let reloadToken = 0;
|
||||||
|
|
||||||
|
const projection = $derived(
|
||||||
|
projectConsole(
|
||||||
|
transcript?.items ?? [],
|
||||||
|
observedEvents.map((item) => ({ cursor: item.cursor, event: item.event.envelope.payload }))
|
||||||
|
)
|
||||||
|
);
|
||||||
|
const lines = $derived(projection.lines);
|
||||||
|
const diagnostics = $derived(
|
||||||
|
mergeDiagnostics(worker?.diagnostics ?? [], transcript?.diagnostics ?? [], streamDiagnostics)
|
||||||
|
);
|
||||||
|
const canSend = $derived(Boolean(worker?.capabilities.can_accept_input) && draft.trim().length > 0 && !sending);
|
||||||
|
const transcriptOnly = $derived(
|
||||||
|
worker && !worker.capabilities.can_stream_events
|
||||||
|
? 'Streaming observation is not available for this Worker. Console is using bounded transcript plus manual refresh.'
|
||||||
|
: null
|
||||||
|
);
|
||||||
|
|
||||||
|
async function getJson<T>(path: string): Promise<T> {
|
||||||
|
const response = await fetch(path);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`GET ${path} failed: ${response.status}`);
|
||||||
|
}
|
||||||
|
return response.json() as Promise<T>;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function postJson<T>(path: string, body: unknown, timeoutMs = 30_000): Promise<T> {
|
||||||
|
const controller = new AbortController();
|
||||||
|
const timeout = window.setTimeout(() => controller.abort(), timeoutMs);
|
||||||
|
try {
|
||||||
|
const response = await fetch(path, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'content-type': 'application/json' },
|
||||||
|
body: JSON.stringify(body),
|
||||||
|
signal: controller.signal
|
||||||
|
});
|
||||||
|
if (!response.ok) {
|
||||||
|
let detail = '';
|
||||||
|
try {
|
||||||
|
detail = await response.text();
|
||||||
|
} catch {
|
||||||
|
detail = '';
|
||||||
|
}
|
||||||
|
throw new Error(`POST ${path} failed: ${response.status}${detail ? ` ${detail}` : ''}`);
|
||||||
|
}
|
||||||
|
return response.json() as Promise<T>;
|
||||||
|
} finally {
|
||||||
|
window.clearTimeout(timeout);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadWorkspace() {
|
||||||
|
workspaceError = null;
|
||||||
|
try {
|
||||||
|
workspace = await getJson<WorkspaceResponse>('/api/workspace');
|
||||||
|
} catch (error) {
|
||||||
|
workspaceError = error instanceof Error ? error.message : String(error);
|
||||||
|
workspace = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadWorker() {
|
||||||
|
workerError = null;
|
||||||
|
try {
|
||||||
|
worker = await getJson<Worker>(
|
||||||
|
`/api/runtimes/${encodeURIComponent(runtimeId)}/workers/${encodeURIComponent(workerId)}`
|
||||||
|
);
|
||||||
|
} catch (error) {
|
||||||
|
workerError = error instanceof Error ? error.message : String(error);
|
||||||
|
worker = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadTranscript() {
|
||||||
|
transcriptError = null;
|
||||||
|
try {
|
||||||
|
transcript = await getJson<WorkerTranscriptProjection>(
|
||||||
|
`/api/runtimes/${encodeURIComponent(runtimeId)}/workers/${encodeURIComponent(workerId)}/transcript?limit=200`
|
||||||
|
);
|
||||||
|
} catch (error) {
|
||||||
|
transcriptError = error instanceof Error ? error.message : String(error);
|
||||||
|
transcript = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function refreshConsole() {
|
||||||
|
reloadToken += 1;
|
||||||
|
await Promise.all([loadWorker(), loadTranscript()]);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function sendMessage(event: SubmitEvent) {
|
||||||
|
event.preventDefault();
|
||||||
|
const content = draft.trim();
|
||||||
|
if (!content || sending || !worker?.capabilities.can_accept_input) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
sending = true;
|
||||||
|
sendError = null;
|
||||||
|
try {
|
||||||
|
const result = await postJson<WorkerInputResult>(
|
||||||
|
`/api/runtimes/${encodeURIComponent(runtimeId)}/workers/${encodeURIComponent(workerId)}/input`,
|
||||||
|
{ kind: 'user', content }
|
||||||
|
);
|
||||||
|
if (result.state === 'accepted') {
|
||||||
|
draft = '';
|
||||||
|
} else {
|
||||||
|
sendError = diagnosticsToText(result.diagnostics) || `Input was ${result.state}.`;
|
||||||
|
}
|
||||||
|
await loadTranscript();
|
||||||
|
} catch (error) {
|
||||||
|
sendError = error instanceof Error ? error.message : String(error);
|
||||||
|
} finally {
|
||||||
|
sending = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function connectObservation(target: Worker | null, token: number) {
|
||||||
|
if (!target) {
|
||||||
|
streamState = 'closed';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!target.capabilities.can_stream_events) {
|
||||||
|
streamState = 'unsupported';
|
||||||
|
streamDiagnostics = [
|
||||||
|
{
|
||||||
|
code: 'worker_streaming_unsupported',
|
||||||
|
severity: 'info',
|
||||||
|
message: 'This Worker does not expose backend-proxied observation streaming; transcript refresh remains available.'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
streamState = 'connecting';
|
||||||
|
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||||
|
const ws = new WebSocket(
|
||||||
|
`${protocol}//${window.location.host}/api/runtimes/${encodeURIComponent(runtimeId)}/workers/${encodeURIComponent(
|
||||||
|
workerId
|
||||||
|
)}/events/ws`
|
||||||
|
);
|
||||||
|
|
||||||
|
ws.onopen = () => {
|
||||||
|
if (token === reloadToken) {
|
||||||
|
streamState = 'open';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
ws.onmessage = (message) => {
|
||||||
|
if (token !== reloadToken) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const frame = JSON.parse(String(message.data)) as ClientWorkerEventWsFrame;
|
||||||
|
if (frame.kind === 'event') {
|
||||||
|
observedEvents = [
|
||||||
|
...observedEvents,
|
||||||
|
{
|
||||||
|
cursor: frame.envelope.cursor,
|
||||||
|
event: frame
|
||||||
|
}
|
||||||
|
].slice(-500);
|
||||||
|
} else {
|
||||||
|
streamDiagnostics = [
|
||||||
|
...streamDiagnostics,
|
||||||
|
{
|
||||||
|
code: frame.diagnostic.code,
|
||||||
|
severity: 'warning',
|
||||||
|
message: frame.diagnostic.message
|
||||||
|
}
|
||||||
|
];
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
streamDiagnostics = [
|
||||||
|
...streamDiagnostics,
|
||||||
|
{
|
||||||
|
code: 'worker_observation_frame_invalid',
|
||||||
|
severity: 'warning',
|
||||||
|
message: error instanceof Error ? error.message : String(error)
|
||||||
|
}
|
||||||
|
];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
ws.onerror = () => {
|
||||||
|
if (token === reloadToken) {
|
||||||
|
streamState = 'error';
|
||||||
|
streamDiagnostics = [
|
||||||
|
...streamDiagnostics,
|
||||||
|
{
|
||||||
|
code: 'worker_observation_ws_error',
|
||||||
|
severity: 'warning',
|
||||||
|
message: 'Backend observation WebSocket failed; transcript refresh remains available.'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
ws.onclose = () => {
|
||||||
|
if (token === reloadToken && streamState !== 'error') {
|
||||||
|
streamState = 'closed';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return () => ws.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
function mergeDiagnostics(...groups: Diagnostic[][]): Diagnostic[] {
|
||||||
|
return groups.flat();
|
||||||
|
}
|
||||||
|
|
||||||
|
function diagnosticsToText(items: Diagnostic[]): string {
|
||||||
|
return items.map((item) => `${item.severity}: ${item.message}`).join('\n');
|
||||||
|
}
|
||||||
|
|
||||||
|
function lineClass(line: ConsoleLine): string {
|
||||||
|
return line.error ? 'error' : line.kind;
|
||||||
|
}
|
||||||
|
|
||||||
|
$effect(() => {
|
||||||
|
void loadWorkspace();
|
||||||
|
});
|
||||||
|
|
||||||
|
$effect(() => {
|
||||||
|
observedEvents = [];
|
||||||
|
streamDiagnostics = [];
|
||||||
|
void refreshConsole();
|
||||||
|
});
|
||||||
|
|
||||||
|
$effect(() => connectObservation(worker, reloadToken));
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<title>Worker Console · Yoi Workspace</title>
|
||||||
|
<meta name="description" content="Worker attach console through Workspace Backend APIs" />
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
|
<div class="workspace-layout">
|
||||||
|
<WorkspaceSidebar {workspace} {workspaceError} {currentPath} />
|
||||||
|
|
||||||
|
<main class="shell console-shell worker-console-shell">
|
||||||
|
<section class="console-header card">
|
||||||
|
<div>
|
||||||
|
<p class="eyebrow">Worker attach Console</p>
|
||||||
|
<h2>{worker?.label ?? workerId}</h2>
|
||||||
|
<p class="section-note">
|
||||||
|
Target authority is <code>runtime_id</code> + <code>worker_id</code>. Browser traffic uses Workspace Backend Worker APIs only;
|
||||||
|
Runtime endpoints, credentials, socket paths, and session paths are not exposed.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="console-status-pill" class:warn={streamState !== 'open'}>
|
||||||
|
{worker?.state ?? 'unknown'} · {worker?.status ?? 'loading'} · stream {streamState}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="console-grid">
|
||||||
|
<article class="card transcript-card worker-transcript-card">
|
||||||
|
<header class="transcript-toolbar">
|
||||||
|
<div>
|
||||||
|
<h3>Transcript and protocol events</h3>
|
||||||
|
{#if projection.status || projection.usage}
|
||||||
|
<p class="section-note">
|
||||||
|
{#if projection.status}status: {projection.status}{/if}
|
||||||
|
{#if projection.status && projection.usage} · {/if}
|
||||||
|
{#if projection.usage}usage: {projection.usage}{/if}
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<button type="button" class="secondary-button" onclick={refreshConsole}>Refresh</button>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{#if workerError}
|
||||||
|
<p class="error">{workerError}</p>
|
||||||
|
{/if}
|
||||||
|
{#if transcriptError}
|
||||||
|
<p class="error">{transcriptError}</p>
|
||||||
|
{/if}
|
||||||
|
{#if transcriptOnly}
|
||||||
|
<p class="section-note degrade-note">{transcriptOnly}</p>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if lines.length === 0}
|
||||||
|
<p>No transcript items or observation events are available for this Worker yet.</p>
|
||||||
|
{:else}
|
||||||
|
<ol class="transcript worker-transcript">
|
||||||
|
{#each lines as item}
|
||||||
|
<li class:assistant={lineClass(item) === 'assistant'} class:user={lineClass(item) === 'user'} class:system={lineClass(item) !== 'assistant' && lineClass(item) !== 'user'} class:error-line={item.error}>
|
||||||
|
<div class="message-heading">
|
||||||
|
<span>{item.title}</span>
|
||||||
|
<small>{item.source}{item.streaming ? ' · streaming' : ''}</small>
|
||||||
|
</div>
|
||||||
|
<pre>{item.body || '—'}</pre>
|
||||||
|
{#if item.detail || item.cursor}
|
||||||
|
<details class="message-detail">
|
||||||
|
<summary>metadata</summary>
|
||||||
|
{#if item.detail}<p>{item.detail}</p>{/if}
|
||||||
|
{#if item.cursor}<code>{item.cursor}</code>{/if}
|
||||||
|
</details>
|
||||||
|
{/if}
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ol>
|
||||||
|
{/if}
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<aside class="console-side-card card">
|
||||||
|
<h3>Worker detail</h3>
|
||||||
|
{#if worker}
|
||||||
|
<dl>
|
||||||
|
<div>
|
||||||
|
<dt>Runtime</dt>
|
||||||
|
<dd><code>{worker.runtime_id}</code></dd>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dt>Worker</dt>
|
||||||
|
<dd><code>{worker.worker_id}</code></dd>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dt>Host</dt>
|
||||||
|
<dd><code>{worker.host_id}</code></dd>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dt>Role / profile</dt>
|
||||||
|
<dd>{worker.role ?? 'unknown'} / {worker.profile ?? 'unknown'}</dd>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dt>Workspace</dt>
|
||||||
|
<dd>{worker.workspace.visibility} · {worker.workspace.identity}</dd>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dt>Implementation</dt>
|
||||||
|
<dd>{worker.implementation.kind} · {worker.implementation.display_hint}</dd>
|
||||||
|
</div>
|
||||||
|
</dl>
|
||||||
|
<details class="metadata-details">
|
||||||
|
<summary>Capabilities</summary>
|
||||||
|
<ul>
|
||||||
|
<li>input: {worker.capabilities.can_accept_input ? 'available' : 'unsupported'}</li>
|
||||||
|
<li>stream: {worker.capabilities.can_stream_events ? 'available' : 'unsupported'}</li>
|
||||||
|
<li>bounded transcript: {worker.capabilities.can_read_bounded_transcript ? 'available' : 'unsupported'}</li>
|
||||||
|
<li>stop: {worker.capabilities.can_stop ? 'available' : 'unsupported'}</li>
|
||||||
|
<li>follow-up spawn: {worker.capabilities.can_spawn_followup ? 'available' : 'unsupported'}</li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
{:else if !workerError}
|
||||||
|
<p>Loading Worker detail…</p>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if diagnostics.length > 0}
|
||||||
|
<details class="metadata-details" open={streamState === 'error'}>
|
||||||
|
<summary>Diagnostics ({diagnostics.length})</summary>
|
||||||
|
<ul>
|
||||||
|
{#each diagnostics as diagnostic}
|
||||||
|
<li>
|
||||||
|
<strong>{diagnostic.severity}</strong>
|
||||||
|
<code>{diagnostic.code}</code>
|
||||||
|
<span>{diagnostic.message}</span>
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
{/if}
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<form class="console-composer card" onsubmit={sendMessage}>
|
||||||
|
<label for="worker-console-message">Send user input</label>
|
||||||
|
<textarea
|
||||||
|
id="worker-console-message"
|
||||||
|
bind:value={draft}
|
||||||
|
placeholder={worker?.capabilities.can_accept_input ? 'Message this Worker through the Backend input API…' : 'Input is unsupported for this Worker'}
|
||||||
|
disabled={!worker?.capabilities.can_accept_input || sending}
|
||||||
|
></textarea>
|
||||||
|
<div class="composer-actions">
|
||||||
|
<button type="submit" disabled={!canSend}>{sending ? 'Sending…' : 'Send'}</button>
|
||||||
|
{#if sendError}<p class="error">{sendError}</p>{/if}
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
export function load(
|
||||||
|
{ params }: { params: { runtimeId: string; workerId: string } },
|
||||||
|
) {
|
||||||
|
return {
|
||||||
|
runtimeId: params.runtimeId,
|
||||||
|
workerId: params.workerId,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -2,6 +2,7 @@
|
||||||
"extends": "./.svelte-kit/tsconfig.json",
|
"extends": "./.svelte-kit/tsconfig.json",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"allowJs": true,
|
"allowJs": true,
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
"checkJs": true,
|
"checkJs": true,
|
||||||
"esModuleInterop": true,
|
"esModuleInterop": true,
|
||||||
"forceConsistentCasingInFileNames": true,
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user