workspace: align console colors with tui

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;
 }

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;

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 @@
           <ol class="console-log">
             {#each lines as item}
               <li class={`console-line ${lineClass(item)} ${toolClass(item)}`} class:error-line={item.error}>
-                {#if lineClass(item) !== 'assistant' && lineClass(item) !== 'user'}
+                {#if shouldRenderHeading(item)}
                   <div class="message-heading">
                     <span>{item.title}</span>
                     {#if item.streaming}<small>streaming</small>{/if}
                   </div>
+                {:else if item.kind === 'tool'}
+                  <div class="tool-summary">
+                    <span class="tool-label">{toolSummary(item).label}</span>
+                    <span class="tool-separator"> — </span>
+                    <span class={`tool-suffix ${item.toolCall?.state ?? ''}`}>{toolSummary(item).suffix}</span>
+                    {#if item.streaming}<small>streaming</small>{/if}
+                  </div>
                 {:else if item.streaming}
                   <div class="message-heading streaming-heading">
                     <small>streaming</small>
                   </div>
                 {/if}
+                {#if item.kind === 'tool'}
+                  {#if bodyTextAfterToolSummary(item)}
+                    <RichMarkdown text={bodyTextAfterToolSummary(item)} />
+                  {/if}
+                {:else}
                   <RichMarkdown text={item.body || '—'} />
+                {/if}
                 {#if item.diff}
                   <pre class="console-diff" aria-label="Edit diff">{#each item.diff as diffLine}
 <span class={`diff-line ${diffLine.kind}`}><span class="diff-gutter">{diffLine.oldNumber ?? ''}</span><span class="diff-gutter">{diffLine.newNumber ?? ''}</span><span class="diff-marker">{diffLine.kind === 'add' ? '+' : diffLine.kind === 'remove' ? '-' : ' '}</span><span class="diff-content">{diffLine.content}</span></span>{/each}</pre>