diff --git a/web/workspace/src/app.css b/web/workspace/src/app.css index 23499e78..562eaeb1 100644 --- a/web/workspace/src/app.css +++ b/web/workspace/src/app.css @@ -1152,6 +1152,68 @@ color: var(--danger); } +.console-log li.user .rich-markdown { + color: var(--tui-green); +} + +.console-log li.assistant .rich-markdown { + color: var(--text-strong); +} + +.console-log li.thinking .message-heading { + color: var(--tui-magenta); + font-style: italic; +} + +.console-log li.thinking .rich-markdown { + color: var(--tui-dark-gray); + font-style: italic; +} + +.tool-summary { + display: flex; + align-items: baseline; + gap: 0; + color: var(--text-muted); + font-size: 0.88rem; + font-weight: 750; +} + +.tool-summary small { + margin-left: var(--space-2); + color: var(--text-muted); + font-size: 0.74rem; + font-weight: 700; + text-transform: uppercase; +} + +.tool-label { + color: var(--tui-cyan); +} + +.tool-separator, +.tool-suffix { + color: var(--tui-dark-gray); +} + +.tool-state-error .tool-suffix { + color: var(--tui-red); +} + +.tool-state-running .tool-suffix, +.tool-state-streaming_args .tool-suffix, +.tool-state-pending .tool-suffix { + color: var(--tui-yellow); +} + +.tool-state-done .tool-suffix { + color: var(--tui-dark-gray); +} + +.console-line.tool .rich-markdown { + color: var(--tui-gray); +} + .message-heading { display: flex; align-items: center; @@ -1162,50 +1224,6 @@ font-weight: 750; } -.console-log li.console-line.assistant .message-heading { - color: var(--tui-blue); -} - -.console-log li.console-line.user .message-heading { - color: var(--tui-green); -} - -.console-log li.console-line.thinking .message-heading { - color: var(--tui-magenta); -} - -.console-log li.console-line.tool .message-heading { - color: var(--tui-cyan); -} - -.console-log li.console-line.tool-read .message-heading { - color: var(--tui-blue); -} - -.console-log li.console-line.tool-write .message-heading, -.console-log li.console-line.tool-edit .message-heading { - color: var(--tui-yellow); -} - -.console-log li.console-line.tool-bash .message-heading { - color: var(--tui-magenta); -} - -.console-log li.console-line.tool-state-running .message-heading, -.console-log li.console-line.tool-state-streaming_args .message-heading, -.console-log li.console-line.tool-state-pending .message-heading { - color: var(--tui-yellow); -} - -.console-log li.console-line.tool-state-done .message-heading { - color: var(--tui-green); -} - -.console-log li.console-line.tool-state-error .message-heading, -.console-log li.console-line.error-line .message-heading { - color: var(--tui-red); -} - .message-heading.streaming-heading { justify-content: flex-start; } diff --git a/web/workspace/src/lib/workspace-console/model.ts b/web/workspace/src/lib/workspace-console/model.ts index afdd44a8..b4331445 100644 --- a/web/workspace/src/lib/workspace-console/model.ts +++ b/web/workspace/src/lib/workspace-console/model.ts @@ -128,7 +128,7 @@ export function applyProtocolEvent( line( envelope.cursor, "user", - "user message", + "User", segmentsToText(event.data.segments), ), ); @@ -156,7 +156,7 @@ export function applyProtocolEvent( break; case "thinking_start": next.lines.push( - line(envelope.cursor, "thinking", "thinking", "", undefined, true), + line(envelope.cursor, "thinking", "Thinking...", "", undefined, true), ); break; case "thinking_delta": @@ -164,7 +164,7 @@ export function applyProtocolEvent( next, envelope.cursor, "thinking", - "thinking", + "Thinking...", event.data.text, ); break; @@ -173,7 +173,7 @@ export function applyProtocolEvent( next, "thinking", envelope.cursor, - "thinking", + "Thought", event.data.text, ); break; diff --git a/web/workspace/src/routes/w/[workspaceId]/runtimes/[runtimeId]/workers/[workerId]/console/+page.svelte b/web/workspace/src/routes/w/[workspaceId]/runtimes/[runtimeId]/workers/[workerId]/console/+page.svelte index 37560a4e..6ace996c 100644 --- a/web/workspace/src/routes/w/[workspaceId]/runtimes/[runtimeId]/workers/[workerId]/console/+page.svelte +++ b/web/workspace/src/routes/w/[workspaceId]/runtimes/[runtimeId]/workers/[workerId]/console/+page.svelte @@ -250,6 +250,24 @@ return [name ? `tool-${name}` : '', `tool-state-${state}`].filter(Boolean).join(' '); } + function shouldRenderHeading(line: ConsoleLine): boolean { + return line.kind !== 'assistant' && line.kind !== 'user' && line.kind !== 'tool'; + } + + function toolSummary(line: ConsoleLine): { label: string; suffix: string; rest: string } { + const [firstLine = '', ...rest] = line.body.split('\n'); + const [label, suffix = ''] = firstLine.split(' — ', 2); + return { + label, + suffix, + rest: rest.join('\n') + }; + } + + function bodyTextAfterToolSummary(line: ConsoleLine): string { + return toolSummary(line).rest; + } + function isNearConsoleBottom(element: HTMLElement): boolean { return element.scrollHeight - element.scrollTop - element.clientHeight <= CONSOLE_BOTTOM_THRESHOLD_PX; } @@ -334,17 +352,30 @@
{#each item.diff as diffLine}
{diffLine.oldNumber ?? ''}{diffLine.newNumber ?? ''}{diffLine.kind === 'add' ? '+' : diffLine.kind === 'remove' ? '-' : ' '}{diffLine.content}{/each}