workspace: align console colors with tui

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}
-                <RichMarkdown text={item.body || '—'} />
+                {#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>