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: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",
|
||||
"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",
|
||||
"preview": "deno run -A npm:vite@7.2.7 preview"
|
||||
},
|
||||
"imports": {
|
||||
"$lib/": "./src/lib/",
|
||||
"@sveltejs/adapter-static": "npm:@sveltejs/adapter-static@3.0.9",
|
||||
"@sveltejs/kit": "npm:@sveltejs/kit@2.49.4",
|
||||
"@sveltejs/vite-plugin-svelte": "npm:@sveltejs/vite-plugin-svelte@6.2.1",
|
||||
|
|
|
|||
|
|
@ -677,3 +677,227 @@
|
|||
cursor: not-allowed;
|
||||
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">
|
||||
import RepositoryTicketKanban from '$lib/workspace-pages/RepositoryTicketKanban.svelte';
|
||||
import { workerConsoleHref } from '$lib/workspace-console/model';
|
||||
import WorkspaceSidebar from '$lib/workspace-sidebar/WorkspaceSidebar.svelte';
|
||||
import type {
|
||||
Diagnostic,
|
||||
|
|
@ -585,6 +586,7 @@
|
|||
<th>State</th>
|
||||
<th>Workspace</th>
|
||||
<th>Implementation</th>
|
||||
<th>Attach</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -600,6 +602,7 @@
|
|||
<td>{worker.state} · {worker.status}</td>
|
||||
<td>{worker.workspace.visibility} · {worker.workspace.identity}</td>
|
||||
<td>{worker.implementation.kind}</td>
|
||||
<td><a class="inline-link" href={workerConsoleHref(worker)}>Open Console</a></td>
|
||||
</tr>
|
||||
{/each}
|
||||
</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">
|
||||
import { workerConsoleHref } from '$lib/workspace-console/model';
|
||||
import type { ListResponse, Worker } from './types';
|
||||
|
||||
const MAX_VISIBLE_WORKERS = 6;
|
||||
|
||||
type Props = {
|
||||
currentPath?: string;
|
||||
};
|
||||
|
||||
let { currentPath = '/' }: Props = $props();
|
||||
|
||||
let loading = $state(true);
|
||||
let error = $state<string | null>(null);
|
||||
let workers = $state<Worker[]>([]);
|
||||
|
|
@ -63,12 +70,15 @@
|
|||
<p class="section-state">{placeholder ?? 'Workers will appear here when an API is connected.'}</p>
|
||||
{:else}
|
||||
<ul class="nav-list" aria-label="Workers">
|
||||
{#each workers as worker (worker.worker_id)}
|
||||
<li class="nav-item">
|
||||
<span class="item-title">{worker.label}</span>
|
||||
<span class="item-meta">
|
||||
{worker.state} · {worker.status}{worker.role ? ` · ${worker.role}` : ''}
|
||||
</span>
|
||||
{#each workers as worker (`${worker.runtime_id}:${worker.worker_id}`)}
|
||||
{@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-meta">
|
||||
{worker.state} · {worker.status}{worker.role ? ` · ${worker.role}` : ''}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<script lang="ts">
|
||||
import CompanionNavSection from './CompanionNavSection.svelte';
|
||||
import ObjectivesNavSection from './ObjectivesNavSection.svelte';
|
||||
import RepositoriesNavSection from './RepositoriesNavSection.svelte';
|
||||
import WorkersNavSection from './WorkersNavSection.svelte';
|
||||
|
|
@ -42,9 +41,8 @@
|
|||
</header>
|
||||
|
||||
<nav class="sidebar-sections" aria-label="Workspace sections">
|
||||
<CompanionNavSection {currentPath} />
|
||||
<RepositoriesNavSection {workspace} {currentPath} />
|
||||
<ObjectivesNavSection {currentPath} />
|
||||
<WorkersNavSection />
|
||||
<WorkersNavSection {currentPath} />
|
||||
</nav>
|
||||
</aside>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
export type {
|
||||
import type {
|
||||
Event as PodProtocolEvent,
|
||||
Method as PodProtocolMethod,
|
||||
Segment as PodProtocolSegment,
|
||||
Segment as PodProtocolSegment
|
||||
} from '$lib/generated/protocol';
|
||||
|
||||
export type { PodProtocolEvent, PodProtocolMethod, PodProtocolSegment };
|
||||
|
||||
export type ExtensionPoint = {
|
||||
status: string;
|
||||
note: string;
|
||||
|
|
@ -93,6 +95,53 @@ export type Worker = {
|
|||
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> = {
|
||||
workspace_id: string;
|
||||
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",
|
||||
"compilerOptions": {
|
||||
"allowJs": true,
|
||||
"allowImportingTsExtensions": true,
|
||||
"checkJs": true,
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user