Skip to content

Polish chat UI and provider prompts#2451

Draft
sandersonstabo wants to merge 11 commits intopingdotgg:mainfrom
sandersonstabo:pr/ui-polish-context-menu
Draft

Polish chat UI and provider prompts#2451
sandersonstabo wants to merge 11 commits intopingdotgg:mainfrom
sandersonstabo:pr/ui-polish-context-menu

Conversation

@sandersonstabo
Copy link
Copy Markdown

@sandersonstabo sandersonstabo commented May 1, 2026

Summary

  • polish chat timeline, changed-files, composer, sidebar, and model/settings UI details
  • add shared custom user-input option handling across Codex, Claude, OpenCode, and Cursor
  • surface Claude unauthenticated state with the same banner flow used by Codex

Checks

  • bun fmt
  • bun lint
  • bun typecheck

Note

Add AI-generated tool work log summaries and polish chat UI with status indicators

  • Adds end-to-end support for AI-generated friendly summary lines for tool work log entries: new generateToolWorkLogSummary RPC backed by Claude/Codex/Cursor/OpenCode text generation, IndexedDB caching in toolWorkLogSummaryCache.ts, and a toggle in General Settings (toolCallSummaries, default off).
  • Reworks SimpleWorkEntryRow in the messages timeline to show success/failure/neutral status icons with tooltips, expandable tool call details, and friendly summaries via the new useToolWorkLogFriendlyLine hook.
  • All provider adapters (Claude, Codex, OpenCode, Cursor) now append an 'Other (Type your own answer)' option to user input questions; ComposerPendingUserInputCard supports free-text entry with optimistic selection and Enter-to-submit.
  • Refactors TraitsPicker to render one trigger button per descriptor (with icons) instead of a single dropdown; ModelPickerContent adds Go/Zen tab filtering for OpenCode providers and disables incompatible providers in locked mode.
  • Adds Tabs, Table, Shortcut, SelectedModelBadge, and ColorSelector UI components; switches app fonts to DM Sans Variable and JetBrains Mono loaded from NPM packages.
  • Fixes a stuck activeTurnId in ProviderRuntimeIngestion by force-clearing it when lifecycle guard blocks turn completion or a runtime error occurs.
  • ClaudeProvider now detects unauthenticated CLI state via claude auth status and surfaces an error with a sign-in prompt instead of proceeding.

Macroscope summarized f4eff53.


Note

Medium Risk
Adds a new LLM-backed generateToolWorkLogSummary path and Claude auth probing, plus changes provider runtime lifecycle handling; these touch provider integration and session state, so regressions could affect chat/runtime UX.

Overview
Adds LLM-generated tool/work-log summary lines by extending TextGeneration with generateToolWorkLogSummary across Claude/Codex/Cursor/OpenCode, wiring it to a new websocket RPC (gitSummarizeToolWorkLog), and sanitizing/normalizing the resulting single-line output.

Unifies provider user-input question options by appending a trailing "Other" option via a shared helper, and updates the pending user-input UI to support inline custom answers with improved selection/auto-advance behavior.

Improves provider robustness by probing claude auth status to surface an explicit unauthenticated error state, and hardens provider runtime ingestion to force-clear stuck activeTurnId when lifecycle guards reject turn.completed/runtime.error events.

Polishes multiple web UI surfaces (composer controls/badges, branch picker, command palette shortcuts, timeline metadata/durations, changed-files panel, icons/styles), bundles variable fonts (removing Google Fonts), and makes small desktop/server script tweaks (context menu header skipping, Windows shell flag removal, test updates, TODO removal).

Reviewed by Cursor Bugbot for commit f4eff53. Bugbot is set up for automated code reviews on this repo. Configure here.

ss and others added 2 commits May 2, 2026 01:20
… remove TODO.md

- Model picker, provider settings, traits, badges, timestamps, branch/workspace pickers
- Bundled fonts; context menu fallback reliability; DONE.md changelog
- Delete TODO.md; server/provider contract and text-generation related updates

Co-authored-by: Cursor <[email protected]>
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 1, 2026

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: fc3c80a5-e648-415b-b41d-bc1db88dfa7c

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

  • Generate code and open pull requests
  • Plan features and break down work
  • Investigate incidents and troubleshoot customer tickets together
  • Automate recurring tasks and respond to alerts with triggers
  • Summarize progress and report instantly

Built for teams:

  • Shared memory across your entire org—no repeating context
  • Per-thread sandboxes to safely plan and execute work
  • Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get your free trial and get 200 agent minutes per Slack user (a $50 value).


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions github-actions Bot added size:XXL 1,000+ changed lines (additions + deletions). vouch:unvouched PR author is not yet trusted in the VOUCHED list. labels May 1, 2026
Comment thread DONE.md Outdated
Comment thread apps/web/src/components/chat/MessagesTimeline.tsx Outdated
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: c967b6d2ed

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

onPromptChange(stripped);
}
updateDescriptors(replaceDescriptorCurrentValue(descriptors, descriptor.id, value));
updateDescriptors(replaceDescriptorCurrentValue(visibleDescriptors, descriptor.id, value));
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Badge Preserve hidden traits when updating one descriptor

When hiddenDescriptorIds is used, replaceDescriptorCurrentValue is called with visibleDescriptors only, so changing a single trait rebuilds modelOptions from a partial descriptor list and drops every hidden option. This is reachable in the new split-trigger flow (each popup hides sibling descriptors), and it can silently reset previously selected provider options (e.g., reasoning/context settings) on the next change.

Useful? React with 👍 / 👎.

<TooltipTrigger
render={<p className="text-right text-muted-foreground text-sm" />}
>
{formatChatTimestamp(row.message.createdAt)}
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Refresh relative timestamps after initial render

This row now renders relative time via formatChatTimestamp(...), but non-streaming message rows have no ticking state, so labels like 59s ago stop updating until an unrelated re-render happens. The new chat timestamp UX therefore becomes stale during idle sessions and can mislead users about message recency.

Useful? React with 👍 / 👎.

@sandersonstabo
Copy link
Copy Markdown
Author

Fixed this group to centered vertically correctly...

Old:
image

New:
image

Comment thread apps/web/src/components/chat/ModelPickerContent.tsx Outdated
Comment thread apps/web/src/components/chat/TraitsPicker.tsx Outdated
Comment thread apps/web/src/components/chat/MessagesTimeline.tsx Outdated
Comment thread apps/web/src/session-logic.ts
@macroscopeapp
Copy link
Copy Markdown
Contributor

macroscopeapp Bot commented May 2, 2026

Approvability

Verdict: Needs human review

Diff is too large for automated approval analysis. A human reviewer should evaluate this PR.

You can customize Macroscope's approvability policy. Learn more.

@t3dotgg
Copy link
Copy Markdown
Member

t3dotgg commented May 2, 2026

Thank you so much for this work! Going through it all and will leave my thoughts as I look at each part

Biggest thing: There's a regression on starting new threads where the chat view gets populated, then a big visible repaint happens before the thread actually starts moving. Def need that fixed before we can ship.

Here's me going through each part:

  1. The "glow" is a bit much on the updated input box

  2. Blur is a little too intense but I'm convince-able

  3. I hate how this looks compared to the inline hit on MacOS. IMO this is a different enough use case and not using shortcut icons is fine

image
  1. This is the dumbest thing ever but I don't like how the icons look with lowercase text (which is common for branches). Just feels off
image
  1. Old badges were too subtle, these feel a bit too much. No "hierarchy" either (like I should not care about remote)

  2. Two things here...

12.1. I don't like the separated "Command + number" on MacOS, feels...weird. Might want to rethink the shortcut component at this point 🙃

image

12.2. We should do some kind of callout on "why you can't switch providers" here so users aren't as confused. Out of scope for this just writing it down before I forget to

  1. I liked the separator...

  2. I think we can just remove this "info" entirely, disabled is explicit

  3. Julius will fight you on this one

28-31 I don't love the "selected" badge, I feel like badges are for different types of context and it's weird using them this way. I can be convinced but would also love to think of other treatments. The check we currently use on the permissions is decent? Not sure.

  1. This is so much better omfg

  2. How does this handle custom providers the user authenticates?

  3. I really don't like how the tool call "update", they blur for a sec or something and it takes a lot of my attention. Also the bright blue check makes me feel like I need to click. I want to make sure tool calls are "not eye grabbing in general"

Also - do tool call summaries use inference? Not sure how I feel about that being on by default. Generally I think people care too much about tool calls and we were intentional with our decision to make them look uninteresting

Overall this is great and I can't wait to merge it

@juliusmarminge
Copy link
Copy Markdown
Member

juliusmarminge commented May 2, 2026

I like a lot of it, but removing the initials from the providers is a big no. I don't remember which color I chose for each of my codex accounts, but i do now i named them Work and Personal, so CW/CP is very useful information to me.
CleanShot 2026-05-01 at 17 36 14@2x

Also agree with Theo on the overuse of badges for selected state. checkmarks are fine?

the sensitive column is waaaay too big as well:
CleanShot 2026-05-01 at 17 36 53@2x

Fixed providers using monospace for the time instead of sans

I think this was to prevent layout shifts as it counts up

@sandersonstabo sandersonstabo changed the title UI polish Polish chat UI and provider prompts May 2, 2026
Comment thread apps/server/src/provider/userInputOptions.ts Outdated
Comment thread apps/web/src/components/chat/TraitsPicker.tsx Outdated
@sandersonstabo
Copy link
Copy Markdown
Author

sandersonstabo commented May 2, 2026

@juliusmarminge @t3dotgg I've applied to the fixes to the issues raised. I also added the option to answer to questionnaires with your own input, as it was low effort and probably a highly requested feature.

Biggest thing: There's a regression on starting new threads where the chat view gets populated, then a big visible repaint happens before the thread actually starts moving. Def need that fixed before we can ship.

I dont have this issue. Is it a mac issue? It loads instantly for me without any repaints.

I also didn't touch anything about the shortcut component yet, I'm not sure what todo about it so I'm leaving it as.

Questionnaire

image image

Added back the initials for colours

Somewhat reckless in hindsight to remove this. Requested by Julius

image

Limited the tool calls visible to 1 at a time

I made the tool calls show the latest tool call currently available. You can still expand it down.

image

Toned down the glow for when text area is focused

I also thought it was too much, but didn't want to lose the intent with the focus, so I just made it consistent with what other inputs have as focus ring, but now it's toned down.

image

Moved checkbox to the right

image

Debadged most of the UI

I agree that the badge usage was excessive and a checkmark is sufficient for most UI here. It now displays a blue checkmark. As requested by both

image

Fixed both icons under the text-area to not look weird.

The issue was that it was not properly sized with the text. As requested by Theo

image

Updated model picker again

Added an explanation for why models are missing by adding them back as disabled, with a tooltip on hover. Also added a slight 1 tw unit offset to give it room to breathe. as requested by Theo
image

Made tool call summaries default to off

It uses inference as Theo suspected, using the same model as the text generation model. I would come back to this and suggest to create another model picker in settings allowing a small model like gpt-5-nano to generate summaries. Requested by Theo

image

Simplified visuals for the "worked for" dash

image

Removed the double highlight for buttons inside directory tab and per thread tab

image

Fixed revert button to be in the button group with copy prompt button

image

Preserved GitHub original colour

During a pass to fix every icon to be consistently muted when it has a foreground text label, GPT accidentally overwrote GitHub's logo to be muted. I reverted this change to respect GitBub's branding guidelines.

image

Fixed dialogs under Connections to use correct vertical centering

The dialogs for Connections used the vertical centering for a command menu (like search bar). I changed it to be middle to create a distinction between user expectations and what shadcn does.

image

Lowered blur tint for dialogs

Lowered from sm (8px) to xs (4px). Requested by Theo

Refactored the changed files card

It was using the old style and had too much visual noise. I simplified it while preserving all details, and added the +- diff to be a consistent 4ch. This should hopefully allow easier visual scanning. I also added rounding to closest power when it reaches 1000 LoC (very unlikely). Also fixed various padding issues around the card.

image

Fixed visual profile of when a tool call errors with runtime errror

When a tool call errored like this, its visual profile was all over the place. I made it fully red, to create a difference between a runtime error and normal error.

image image

Added blue checkmark when a model selected

image

Fixed top padding for on the model rail for model picker

It was off by a pixel, so I fixed it.
image

I also did a lot of misc like fixing alignment and padding which was not important enough to write here, but I added my notes just in-case:

# features
added the ability to write your own answer in question tool call as a 4th option.

# ui changes & fixes

removed blur from tool call summaries on pop in

fixed unintentional github logo color override
fixed miss-sized branch icon for branch selector

fixed reasoning dropdown not auto closing after value change

fixed user messages horizontal padding being off by 4 px
fixed tool calls card horizontal padding being off by 4 px

replaced all selected badges in the prompt center to use a blue checkmark instead

added a header to the tool calls card
made toll calls auto collapsible to 1 tool call visible at all times
fixed tool calls card bottom padding being off
added tooltips when hovering of tool call indicators
made tool call summaries default to false in settings
made tool calls filter out empty tool calls to reduce useless information
fixed correct radii on tool call items
fixed tool call header not displaying when 1 tool call only is called

removed the deeply nested bg highlight when hovering over thread archive button or new thread button

fixed archive button not being consistent with style. added hover effect and fixed position and aligment
fixed revert all changes button being misplaced

fixed alert banner having missaligned icon
decodexified the error language when codex is unauthenticated

fixed table not using shadcn table primitive
fixed wrong alignment of checkbox in environment variables

fixed performance issue on color picker lagging out (when rapidly changing color)
reverted removing initals from color badge

added all providers back to model picker
added a grayed out state if provider is not available because of lock
added favorites tab to model picker
made favorites tab filtered if locked provider is present
replaced the selected badge with a blue checkmark instead
added 1 tw unit worth of gap between extended tooltip in model picker
fixed missing two pixels worth of padding inside model picker rail

fixed search bar's search icon being highlighted to foreground when hovered

fixed correct dialog placement in connections tab
added blur to connections tab dialogs be consistent with search bar
toned down blur to 4px for all dialog tints

fixed markdown tables to have a fully opaque border as before it bleeds color in cross sections

fixed wrong radii for file tree explorer with the changed files card in mind
decodexified the header to changes files and collapses large numbers to the nearest unit (k, M)
made the +- diff for each file changed 4ch to make it easier to visually scan
fixed the +- diff for each file tree item being off by a few px
fixed various padding issues in the changed files card
fixed padding issue for file tree viewer
changed the highlight color of file tree to be consistent with already established uii

fixed inconsistent gap px for chat responses/input for message metadata/opts

fixed misalignment of the icon, text and cross in the error/warning banner

muted the focus-ring the text area

Fixed inconsistent behaviour when Claude is unauthenticated

I noticed that Codex and Claude behave differently in T3 Code when unauthenticated, where Codex generates an alert banner. I made this the same behaviour for Claude also.

Comment thread apps/web/src/components/chat/MessagesTimeline.logic.ts
@sandersonstabo
Copy link
Copy Markdown
Author

sandersonstabo commented May 2, 2026

Some more fixes

features
added tabular number rendering for relative timestamps/timers to reduce layout shift
preserved all provider questionnaire options while still adding an Other/custom answer option

ui changes & fixes
added pt-4 spacing to the changed files card
changed changed files card spacing to better match tool call card spacing
fixed flat/root-level changed files being indented as if they were inside a directory
added pointer cursor to tool call show more controls
restored assistant response copy button in the metadata/action row
fixed user message metadata action order so copy is the rightmost button
moved assistant response copy button to the left side of response metadata
changed message metadata timestamps to text-xs
added tabular number styling to message metadata timestamps, working timers, completion dividers, sidebar timestamps, diff timestamps, and plan sidebar timestamps
made the Tasks sidebar button match the Build/Plan toggle active style
centered task sidebar step icons and text vertically
updated task sidebar styling to use shared UI color tokens where appropriate
restored blue and emerald row tint highlights for active/completed task steps
replaced the composer send loading-circle SVG with the shared spinner
removed the faint nested card/background from the root "Pick a thread to continue" empty state
changed code block copy button to use shared Button with variant=ghost
removed custom framed border/background styling from the code block copy button

review fixes
fixed provider user-input options being silently truncated to three
fixed TraitsPicker hook order by moving useState before the early return
fixed Worked for X duration using the previous assistant message timing instead of the current assistant row
added/updated tests for custom user-input options and completion divider duration

Comment thread apps/web/src/components/ChatView.tsx
Comment thread apps/web/src/components/chat/ComposerPendingUserInputPanel.tsx Outdated
Comment thread apps/web/src/components/chat/ChatComposer.tsx
Comment thread apps/web/src/components/ChatView.tsx Outdated
Copy link
Copy Markdown
Contributor

@cursor cursor Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 06e063f. Configure here.

const option = activeQuestion.options[optionIndex];
if (!option) return;
event.preventDefault();
if (option.label === "Other") {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Case-sensitive "Other" check mismatches server-side case-insensitive filtering

Low Severity

The server-side withCustomUserInputOption uses case-insensitive matching (option.label.trim().toLowerCase() !== "other") to identify and reposition the "Other" option, but the client-side ComposerPendingUserInputPanel uses strict case-sensitive equality (option.label === "Other") to decide whether to render the inline text input. If a provider sends an option with label "other" or "OTHER", it would be recognized by the server as the custom-answer option and moved to the end, but the UI wouldn't render the inline text input for it — the user would see it as a regular clickable option with no way to type a custom answer.

Additional Locations (2)
Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit 06e063f. Configure here.

@sandersonstabo
Copy link
Copy Markdown
Author


ui changes & fixes
replaced plain "Plan Ready" label with Badge component in composer follow-up banner
added pointer cursor to pending user-input cards in non-other mode
replaced live LiveMessageMeta timer with static timestamp on completed assistant messages
removed unused LiveMessageMeta and formatMessageMeta helpers
added force-clear of stuck active turns when lifecycle guard blocks turn.completed/runtime.error
properly transition latestTurn to settled state on thread.session-set, filling completedAt and clearing pendingSourceProposedPlan
added completionDividerDuration input to use turn-level duration for completion divider
added showAssistantMeta row field so only the terminal assistant message shows metadata/copy

review fixes
added completionDividerDuration to all existing test fixtures
added test for turn-level completion divider duration propagation
added test asserting only terminal assistant message shows showAssistantMeta: true
added showAssistantMeta to isRowUnchanged stability check

@sandersonstabo sandersonstabo marked this pull request as draft May 3, 2026 12:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:XXL 1,000+ changed lines (additions + deletions). vouch:unvouched PR author is not yet trusted in the VOUCHED list.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants