Skip to content

web-ui: loading state and the live thinking trace - #1054

Open
time-attack wants to merge 1 commit into
bui/01-foundationfrom
bui/02-thinking-trace
Open

web-ui: loading state and the live thinking trace#1054
time-attack wants to merge 1 commit into
bui/01-foundationfrom
bui/02-thinking-trace

Conversation

@time-attack

@time-attack time-attack commented Sep 10, 2026

Copy link
Copy Markdown
Collaborator

Summary

Loading: a 3×3 pixel-grid loader replaces the wave loader on the chat surface,
the working label shimmers, and the live status above the composer shows the
elapsed time of the current tool. Thinking: the streaming assistant row renders
the reference Thinking trace — open while the run is active with a shimmering
"Thinking" / "Searching the web" / "Running tools" header, reasoning
paragraphs, tool rows and search results fading up onto a guide line as they
arrive — and settles to a collapsed "Thought for Ns" / "Searched the web" /
"Ran N tools" header. Tool rows gain the compact label + mono detail layout
the trace relies on. Restores upstream's sandbox tool categorisation helpers in
the timeline so unified sandbox calls keep their labels and output.

Demo

First: the pixel-grid loader, shimmer label and elapsed counter while a command runs. Second: the trace opens live with "Thinking" then "Running tools", tool rows fade in as they run, and it settles to "Thought for Ns" / "Ran 4 tools".

02-loading.gif

03-thinking-trace.gif

Verification

Typecheck, the full plugins/web-ui suite, eslint and prettier pass at this level of the stack (each level is verified on its own, on top of the previous one). Live QA of the finished stack ran in a browser-only dev-instance against a seeded conversation (tool run, markdown table, TypeScript and diff fences, a pending approval, ⌘K, list pages, settings), in light and dark and at phone width.

Stack

Merge in order; each PR is based on the one above it and retargets automatically when its base merges.

# PR Change
1 #1053 Beautiful UI foundation — tokens, fonts, styles scaffold
2 #1054 (this) loading state and the live thinking trace
3 #1055 chat rows, session header and empty state
4 #1056 approval card with a pager
5 #1057 tool chips and code blocks
6 #1058 records tables and filter lists
7 #1059 search palette
8 #1060 settings as inspector cards
9 #1061 selection actions toolbar
10 #1062 recommendation card

Loading: a 3×3 pixel-grid loader replaces the wave loader on the chat surface,
the working label shimmers, and the live status above the composer shows the
elapsed time of the current tool. Thinking: the streaming assistant row renders
the reference Thinking trace — open while the run is active with a shimmering
"Thinking" / "Searching the web" / "Running tools" header, reasoning
paragraphs, tool rows and search results fading up onto a guide line as they
arrive — and settles to a collapsed "Thought for Ns" / "Searched the web" /
"Ran N tools" header. Tool rows gain the compact label + mono detail layout
the trace relies on. Restores upstream's sandbox tool categorisation helpers in
the timeline so unified sandbox calls keep their labels and output.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant