Repository navigation
feat(agent): declutter the chat page - #12540
Merged
Merged
Conversation
…cards, compact feedback The public notice is one line with an info popover for the details; a result card folds its rounds and change list behind one status line and its code behind .show_code(), with .copy() and the downloads in view; quick feedback shows only the reactions until one is picked; .save() and its data box move from the header row into a "⋯" menu. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01H7HSkGyea1k2v293XiAMo8
…b in the save test Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01H7HSkGyea1k2v293XiAMo8
…Escape test Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01H7HSkGyea1k2v293XiAMo8
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01H7HSkGyea1k2v293XiAMo8
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
An active moderate accessibility issue remains because the code-toggle accessible names omit the visible .show_code()/.hide_code() labels, violating label-in-name and hindering voice-control targeting.
1 open issue
What changed in this PR
This pull request declutters the experimental agent chat while preserving access to result details, code, feedback, and session-saving controls.
Changes:
- Adds a compact public-lane notice with an informational popover.
- Folds result details, code, and feedback controls behind explicit interactions.
- Moves session saving into a persistent overflow menu.
- Updates related documentation, changelog content, and frontend tests.
This pull request requires changes.
| File | Description |
|---|---|
docs/reference/plausible.md |
Documents the new session-save menu location. |
docs/concepts/agent-network.md |
Updates agent-chat and public-lane behavior documentation. |
changelog.d/agent-chat-declutter.md |
Adds the changelog fragment for the UI decluttering work. |
app/src/sections/agent-chat/SessionMenu.tsx |
Adds the persistent overflow menu for session saving. |
app/src/sections/agent-chat/SessionMenu.test.tsx |
Tests menu opening, focus behavior, failures, persistence, and disabled states. |
app/src/sections/agent-chat/SaveButton.tsx |
Supports save completion handling and menu integration. |
app/src/sections/agent-chat/SaveButton.test.tsx |
Tests save success and failure behavior. |
app/src/sections/agent-chat/ResultFeedback.tsx |
Folds feedback fields until a reaction is selected and adds cancellation. |
app/src/sections/agent-chat/ResultFeedback.test.tsx |
Tests folded feedback, cancellation, consent, and sending. |
app/src/sections/agent-chat/ResultCard.tsx |
Adds folded run details and code controls. |
app/src/sections/agent-chat/ResultCard.test.tsx |
Tests summaries, detail/code folding, failure states, and state persistence. |
app/src/sections/agent-chat/lane.ts |
Defines the revised public experimental notice text. |
app/src/sections/agent-chat/ExperimentalNotice.tsx |
Adds the compact notice and informational popover. |
app/src/sections/agent-chat/ChatFeedback.test.tsx |
Updates chat-feedback tests for folded forms. |
app/src/pages/AgentChatPage.tsx |
Integrates the session menu and experimental notice. |
app/src/pages/AgentChatPage.save.test.tsx |
Tests saving through the overflow menu. |
app/src/pages/AgentChatPage.public.test.tsx |
Tests the public notice popover and save defaults. |
app/src/pages/AgentChatPage.feedback.test.tsx |
Updates page-level feedback flow tests. |
Review effort: Lite
…short placeholders The data card's long label, its hint line and the how-to paragraph under it go; '# your data ⓘ' opens the formats, the steps, a fix in plain words and changes afterwards (InfoPopover, shared with the notice). The data box and the composer name example data, a curve and a fix in short placeholders. The missing-parameters notice names .use_my_data(). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01H7HSkGyea1k2v293XiAMo8
Codecov Report❌ Patch coverage is
📢 Thoughts on this report? Let us know! |
….md and the fragment Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01H7HSkGyea1k2v293XiAMo8
…tter # Conflicts: # docs/concepts/agent-network.md
… the new controls Owner decision of 2026-11-02: a visitor cannot resume a saved session, and the feedback form covers what went wrong, so the public lane offers no .save() and renders no "⋯" menu; the admin lane keeps both. The root prompt's control list names .show_code()/.hide_code() for the code, .expand()/.collapse() for the card, the status line, .cancel() in the feedback, and no longer names .save(), which the public page lacks. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01H7HSkGyea1k2v293XiAMo8
… line The data card, the plot cards and the code use the room of a wide screen; the thread's replies, turns and notices and a card's text lists stay at a readable line of about 80 characters. Below about 1100 px the window sets the width, as before. Both lanes share the layout. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01H7HSkGyea1k2v293XiAMo8
…ment Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01H7HSkGyea1k2v293XiAMo8
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
# experimental AI · results can be wrong · stored only if you send feedback, and its ⓘ button (About the assistant) opens a popover with which AI and where, what not to paste, the daily limits and the link to/legal#assistant(ExperimentalNotice.tsx, texts inlane.ts).# your data ⓘ, and the ⓘ opens the how-to (formats, steps, a fix in plain words, changes afterwards). The long label, its hint line and the how-to paragraph under the card are gone. The data box and the composer name example data, a curve and a fix in short placeholders, and typingexample dataor a curve still works as before. Both ⓘ popovers shareInfoPopover.tsx.second try · 2 changes ⓘ). The code sits behind.show_code()/.hide_code(), while.copy()and the downloads stay in view. Each card keeps its choice for the session, also across a collapse of the whole card, and a new version's card starts folded. Residual notes stay in view..send(). On the admin lane,.save()and its# include data.csvbox leave the header row for a "⋯" menu (SessionMenu.tsx). The public lane has no.save()and no menu (owner decision of 2026-11-02): a visitor cannot resume a saved session, and the feedback form covers "something went wrong"..use_my_data()(feat(spec-detail): .use_my_data() beside the library carousel replaces the image icon #12539) instead of.adapt().COLUMN_MAX_WIDTH, 960 before). The data card, the plot cards (bigger images) and the code use the full width. The thread's replies, turns and notices, and a card's text lists, keep a readable line of at most about 80 characters (CHAT_TEXT_MAX = '80ch'instyles.ts); user turns stay right-aligned. Below about 1100 px the window sets the width, as before. Both lanes share the layout. Measured at 1920 px with the BFF mock: before, column 960 and card 918 px; after, column 1360, card 1318 and reply 718 px.agents/anyplot/prompts/root.md, "The page's controls"): the list now names.show_code()and.hide_code()for the code,.expand()and.collapse()for the whole card, the status line, and.cancel()in the feedback. It no longer names.save(): the prompt has no notion of the lane, and the public page has no.save(). This is a wording-only prompt change, so it got no harness or eval run.test_prompt_controls.pyand all oftests/unit/agentspass (19,962 tests).Decisions (decided and documented)
<label>, not inside it, so it never joins the data box's accessible name.okis not said twice. The header keepsv2 · library · ● statusfor collapsed earlier versions. A run with neither rounds nor changes gets a plain status line without a toggle..copy()became a text button in the code row, because the code block it used to sit on is folded now. The highlighter chunk loads only when the code opens..save()goes into a "⋯" menu on the admin lane, not the feedback area. A save downloads the session to the user's computer and stores nothing, while feedback stores a case for the operator; one data box for both would blur what goes where. The menu stays mounted, so the box keeps its choice; a successful save closes it, and a failure keeps it open with its line, which goes when the menu closes. The admin lane keeps its ticked default (checked in the browser on/debug/agent). On the public lane the page renders neither the menu nor.save()..cancel(), which folds it back to the reactions and moves the focus to the first one; without it a mis-click could not be undone.::placeholderwithpre-wrap), while a pasted table keeps its lines.Finding for the API (not in this PR)
The public BFF route
GET /agent/session/bundlestill exists, but no page calls it now. Removing it is an API change for another PR;docs/reference/api.mdsays so for now.Texts to read
New or changed user-facing texts:
# experimental AI · results can be wrong · stored only if you send feedbackAbout the assistant# about the assistantClaude by Anthropic, through Google Cloud Vertex AI in the EU·don't paste data you may not share·daily limits apply· linkhow the assistant works(unchanged, now inside the popover)an AI does the work here: … reads what you paste and writes the plot and its codeandnobody checks them by hand. Say if either should come back into the popover.# your data — paste or drop CSV, TSV, JSON, plain text, Excel, ODS, Parquet, Feather or NumPy, now# your datawith an ⓘ (nameHow the data card works)# how it works, lines:formats: CSV, TSV, JSON, plain text, Excel, ODS, Parquet, Feather or NumPypaste or drop → check the preview and the bindings → .confirm() → .create_plot()the assistant fixes your data in plain words: "sum per month"afterwards, ask for changes: "log scale on y", "label the outliers"or type "example data" here, or ask for a curve in the chat: y = sin(x), x from -pi to pi, and the paragraph under the card (paste your data above, or ask here for example data or a curve … it sums your data up here … "read Anteil as numbers" or "sum per month". check the preview and the bindings, confirm, then .create_plot(), with a note first if the plot should do something differently. afterwards, ask for changes to the plot: "log scale on y", "dark version", "label the outliers".). The paragraph's "it sums your data up here", "read Anteil as numbers", "with a note first if the plot should do something differently" and "dark version" are not carried over.month,revenue / 2026-01,120 / 2026-02,135, now three lines:paste a table or drop a file (csv, excel, json …)/or type: example data/or ask for a curve: y = sin(x), x from -pi to piask for example data or a curve: "y = sin(x), x from -pi to pi"(no data) andask about your data, or for a fix: "sum per month"(data), nowask for example data, a curve, or a fix to your datafor bothask about this plot, or ask for a change, nowask for a change, e.g. log scale on yopen this page from a plot's .adapt() button: it needs a spec and a library, such as scatter-basic in matplotlib., nowopen it from a plot's .use_my_data(), or start with scatter-basic in matplotlib.<tries> · <n> change(s)with ⓘ, for examplesecond try · 2 changes; screen-reader nameRun details: ….show_code()/.hide_code()(namesShow code/Hide code); copy button.copy()/.copied.cancel()on a fresh form (nameCancel the feedback on version N)⋯(nameMore actions, tooltipmore · .save() the session as a json file); menu heading# save the session as a json file(the old.save()tooltip's words). Public lane:.save()and its# include data.csvbox are gone.`.save()`, which downloads the sessionis removed;`.expand()` and `.collapse()` for the codebecomesthe status line next to the light and dark switch (the tries and the number of changes), which opens the rounds and the list of what changed, `.show_code()` and `.hide_code()` for the code, `.expand()` and `.collapse()` for the whole card;with `.send()`becomesa click on one of which opens the message box with `.send()` and `.cancel()`.Screenshots (BFF mock, public lane, headless playwright-core)
All in
/tmp/claude-1000/-home-meake-projects-anyplot/402df83f-568f-4063-805d-572b195b8887/scratchpad/chatui/shots/, named<before|after>-<width>-<theme>-<n>-<what>.png, each at 1440 and 390 in light and dark.Wide screen at 1920 px, full page with two versions, a user turn and a reply, before and after:
/tmp/claude-1000/-home-meake-projects-anyplot/402df83f-568f-4063-805d-572b195b8887/scratchpad/chatui/shots/before-1920-light-wide.png→/tmp/claude-1000/-home-meake-projects-anyplot/402df83f-568f-4063-805d-572b195b8887/scratchpad/chatui/shots/after-1920-light-wide.png/tmp/claude-1000/-home-meake-projects-anyplot/402df83f-568f-4063-805d-572b195b8887/scratchpad/chatui/shots/before-1920-dark-wide.png→/tmp/claude-1000/-home-meake-projects-anyplot/402df83f-568f-4063-805d-572b195b8887/scratchpad/chatui/shots/after-1920-dark-wide.pngafter-1440-*-wide.png,after-2560-*-wide.pngandafter-390-*-wide.pngin the same folder (the masthead and the pinned data header appear mid-page in these full-page captures because they are sticky)Data card, before and after:
/tmp/claude-1000/-home-meake-projects-anyplot/402df83f-568f-4063-805d-572b195b8887/scratchpad/chatui/shots/before-1440-light-8-datacard.png→/tmp/claude-1000/-home-meake-projects-anyplot/402df83f-568f-4063-805d-572b195b8887/scratchpad/chatui/shots/after-1440-light-8-datacard.png/tmp/claude-1000/-home-meake-projects-anyplot/402df83f-568f-4063-805d-572b195b8887/scratchpad/chatui/shots/before-390-light-8-datacard.png→/tmp/claude-1000/-home-meake-projects-anyplot/402df83f-568f-4063-805d-572b195b8887/scratchpad/chatui/shots/after-390-light-8-datacard.png/tmp/claude-1000/-home-meake-projects-anyplot/402df83f-568f-4063-805d-572b195b8887/scratchpad/chatui/shots/before-1440-dark-8-datacard.png→/tmp/claude-1000/-home-meake-projects-anyplot/402df83f-568f-4063-805d-572b195b8887/scratchpad/chatui/shots/after-1440-dark-8-datacard.png/tmp/claude-1000/-home-meake-projects-anyplot/402df83f-568f-4063-805d-572b195b8887/scratchpad/chatui/shots/before-390-dark-8-datacard.png→/tmp/claude-1000/-home-meake-projects-anyplot/402df83f-568f-4063-805d-572b195b8887/scratchpad/chatui/shots/after-390-dark-8-datacard.png/tmp/claude-1000/-home-meake-projects-anyplot/402df83f-568f-4063-805d-572b195b8887/scratchpad/chatui/shots/after-1440-light-9-datacard-howto.png,/tmp/claude-1000/-home-meake-projects-anyplot/402df83f-568f-4063-805d-572b195b8887/scratchpad/chatui/shots/after-390-dark-9-datacard-howto.pngNotice, header, card and feedback, before:
/tmp/claude-1000/-home-meake-projects-anyplot/402df83f-568f-4063-805d-572b195b8887/scratchpad/chatui/shots/before-1440-light-1-top.png,/tmp/claude-1000/-home-meake-projects-anyplot/402df83f-568f-4063-805d-572b195b8887/scratchpad/chatui/shots/before-390-dark-1-top.png/tmp/claude-1000/-home-meake-projects-anyplot/402df83f-568f-4063-805d-572b195b8887/scratchpad/chatui/shots/before-1440-light-4-card-folded.png(the whole card as it was),/tmp/claude-1000/-home-meake-projects-anyplot/402df83f-568f-4063-805d-572b195b8887/scratchpad/chatui/shots/before-390-dark-4-card-folded.png/tmp/claude-1000/-home-meake-projects-anyplot/402df83f-568f-4063-805d-572b195b8887/scratchpad/chatui/shots/before-1440-light-6-feedback.pngAfter:
/tmp/claude-1000/-home-meake-projects-anyplot/402df83f-568f-4063-805d-572b195b8887/scratchpad/chatui/shots/after-1440-light-1-top.png: notice and header/tmp/claude-1000/-home-meake-projects-anyplot/402df83f-568f-4063-805d-572b195b8887/scratchpad/chatui/shots/after-1440-light-2-notice-open.png,/tmp/claude-1000/-home-meake-projects-anyplot/402df83f-568f-4063-805d-572b195b8887/scratchpad/chatui/shots/after-390-dark-2-notice-open.png: notice popover open/tmp/claude-1000/-home-meake-projects-anyplot/402df83f-568f-4063-805d-572b195b8887/scratchpad/chatui/shots/after-1440-light-admin-3-menu-open.png,/tmp/claude-1000/-home-meake-projects-anyplot/402df83f-568f-4063-805d-572b195b8887/scratchpad/chatui/shots/after-390-dark-admin-3-menu-open.png: the "⋯" menu on the admin lane (the public header inafter-1440-light-1-top.pnghas none)/tmp/claude-1000/-home-meake-projects-anyplot/402df83f-568f-4063-805d-572b195b8887/scratchpad/chatui/shots/after-1440-light-4-card-folded.png,/tmp/claude-1000/-home-meake-projects-anyplot/402df83f-568f-4063-805d-572b195b8887/scratchpad/chatui/shots/after-390-dark-4-card-folded.png: card folded/tmp/claude-1000/-home-meake-projects-anyplot/402df83f-568f-4063-805d-572b195b8887/scratchpad/chatui/shots/after-1440-light-5-card-open.png,/tmp/claude-1000/-home-meake-projects-anyplot/402df83f-568f-4063-805d-572b195b8887/scratchpad/chatui/shots/after-1440-dark-5-card-open.png: card with details and code open/tmp/claude-1000/-home-meake-projects-anyplot/402df83f-568f-4063-805d-572b195b8887/scratchpad/chatui/shots/after-1440-light-6-feedback.png//tmp/claude-1000/-home-meake-projects-anyplot/402df83f-568f-4063-805d-572b195b8887/scratchpad/chatui/shots/after-1440-light-7-feedback-open.png,/tmp/claude-1000/-home-meake-projects-anyplot/402df83f-568f-4063-805d-572b195b8887/scratchpad/chatui/shots/after-390-light-7-feedback-open.png: feedback before and after a clickPlan
N/A (owner decisions of 2026-11-02, relayed by the lead)
Test plan
yarn lint,yarn fm:check,yarn type-check,yarn test(149 files, 1561 tests),yarn build, on the head after the merges oforigin/main(feat(spec-detail): .use_my_data() beside the library carousel replaces the image icon #12539, docs(legal): cut the legal page by half, current state only #12538) and the width changeuv run --extra test --extra agents pytest tests/unit/agents(19,962 passed, 36 skipped) after theroot.mdchangeSessionMenu.test.tsx(new);ResultCard.test.tsx(status line, rounds, plain line, code fold, failed code, state across a collapse, new version folded);ResultFeedback.test.tsx(folded form,.cancel()focus, consent before send);SaveButton.test.tsx(onSaved);DataPanel.test.tsx(one-line label, placeholder, the how-to popover with Escape and focus return); page tests for the notice popover, the menu, the save flow, the placeholders and the.use_my_data()noticeuv run pytest tests/unit/agents/test_prompt_controls.py(3 passed).show_code(); and a "missing" edit-cancel test that already exists.https://claude.ai/code/session_01H7HSkGyea1k2v293XiAMo8