Hare/yoi
1
1
Fork 0
Code Actions Packages Releases Activity

workspace: align console colors with tui

Browse Source
This commit is contained in:
Keisuke Hirata 2026-07-11 08:18:44 +09:00
parent 69607d02bc
commit 0e01e5c84b
No known key found for this signature in database
3 changed files with 99 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
web/workspace/src/app.css
View File

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

8
web/workspace/src/lib/workspace-console/model.ts
View File

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

35
web/workspace/src/routes/w/[workspaceId]/runtimes/[runtimeId]/workers/[workerId]/console/+page.svelte
View File

@ -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>