Skip to content

Agent pane: permission card at Claude desktop's level, Esc and ⌘↩ keycaps; Needs your input pill on the live line - #36189

Open
teamleaderleo wants to merge 10 commits into
feat-cmux-nextfrom
lane/approval-card-and-fonts
Open

teamleaderleo wants to merge 10 commits into
feat-cmux-nextfrom
lane/approval-card-and-fonts

Conversation

@teamleaderleo

@teamleaderleo teamleaderleo commented Nov 5, 2026 •

Copy link
Copy Markdown
Collaborator

Summary

Leo, 2026-11-05, pointing at Claude desktop asking to use cmux NIGHTLY ("Allow Claude to use cmux NIGHTLY?", a muted reason, an app row, then "Deny Esc" and "Allow for this session ⌘↩", and a "Needs your input" pill in its plan list):

"This is the point. This is the point of it, of, like, sometimes it asks, like if it absolutely needs to do it, right? Only if it needs to. The whole, like, allow whatever to use, allow for this session, or deny. And then it shows the hotkeys. That's the kind of thing that we want for some of these. For a lot of these, of course, like just having that kind of size spacing, typography, or whatever. [...] Because, like, the needs your input. Actually, there's a little animation that plays. It, like, shrinks the thing, the circle into the Thinking... portion afterwards which is cute."

Our permission card was a compact glass card with a 13px title, the buttons at the leading edge (Allow once filled in the accent), light ⌥⌘1/2/3 hints, and the scope line under the buttons. This brings it to Claude's level. The question card already had Claude's structure (Skip esc, Submit ⌘↩, #27316, #27938), so it is unchanged.

Permission card (PermissionCard.tsx, styles.css):

  • As in Leo's screenshot: the head is a band a shade lighter than the card, with the tool glyph and the title in regular weight on the body step, and the reason under it in muted text. Below it, on the card itself: the clamped command (Show full command still opens it) and the scope line (the folder, the Always allow rule), then the answers.
  • Deny Esc keeps the leading edge (after any other option the agent offered), and the allows keep the trailing edge: Always allow (its ⌥⌘2 hint), then Allow once ⌘ ↩, filled in the text colour inverted, as the question card's Submit is. Each key is its own outlined keycap, as Claude draws them. On a narrow card the two allows wrap together onto the next line, still at the trailing edge.
  • ⌘↩ allows once. It works with nothing focused or with focus on one of the card's buttons, and never in a field (permissionKeyAction). Return, 1/2/3, Esc and ⌥⌘1/2/3 still do what they did. Each button lists both keys in aria-keyshortcuts (Meta+Enter ⌥⌘1, Escape ⌥⌘3).
  • Deny's "what to do instead" field shows Esc on Cancel and ↩ on Send, keys that already worked.
  • Every choice stays: Allow once, Always allow (or Allow for this chat), Deny, every extra option, the peer card's disabled Always allow, and the Bypass-mode line.

Needs your input on the live line (conversation/Thinking.tsx, conversation.css):

  • While the chat waits on the person, the running turn's line ("Waiting for you: allow this?") is now Claude's "Needs your input": a ringed dot in the needs-input mark colour, then the words on a pill tinted with it.
  • Once answered, the Thinking line that replaces it starts with that dot, which shrinks to nothing while its room closes, so the word slides back to the line's start (one 180ms step). With motion off or reduced the dot isn't drawn, and it goes after 400ms at most if no animation ends.

Before / after

Captures

Gallery entries, Linux Chromium, cropped to the component. Before is the merge-base (355773c), after is this head.

Dark

Case Before After
long-rule
four options
bypass still asks
waiting on you (pill + card)

Light

Case Before After
long-rule
four options
bypass still asks
waiting on you (pill + card)

Captures are at 30de747 (the before column is the merge-base 355773c). Commits after the first: answer labels centred on their keycaps (f77da28); the card and the live line matched to Leo's whole screenshot once it was forwarded (c7103af: tinted head, regular-weight title, Deny left and allows right, one keycap per key, the dot outside the pill); the allows wrap as a pair (24449f6); and the review's finding at f77da28, a real-time wait in the new test, fixed with fake timers, with the row starting at the leading edge when it wraps (41f85e8). Then the review's finding at 41f85e8: the keycaps' font shorthand added a raw size to the type-scale ratchet, and the new pill and dot were off the token scale; they now sit on it (the dot is one 12px glyph, an 8px dot in a 2px ring), and the design-token baseline drops the font-weight the card no longer uses (30de747).

Testing

  • bun test test/permission-card-prompt.test.tsx test/permission-card-shortcuts.test.tsx test/permission-card-peer-always.test.tsx test/question-consent-card.test.tsx test/button-ink-contrast.test.ts: 58 pass. The order and keycap expectations are updated, and there are new cases for ⌘↩ (allows on the body and on a focused button, never in a field or with the feedback field open).
  • New test/live-line-needs-input-pill.test.tsx: the pill carries the dot; once answered, the dot leads the Thinking line, and it goes on animationend or after its fallback time. It passes along with needs-input-mark-color, transcript-thinking-verbs and static-status-loops.
  • Gallery: agent-pane.permission-card (every variant) and agent-pane.waiting-on-you (permission-mid-turn shows the pill over the card).

Changelog

Changed: Permission asks in the agent chat read like Claude desktop's, with a bold title, a quiet details band, and Deny esc / Allow once ⌘↩ keycaps (⌘↩ now allows once). While a chat waits on you, its live line is a "Needs your input" pill whose dot shrinks into Thinking once you answer.

Agent session: agent session

🤖 Generated with Claude Code

…d ⌘↩; the Needs your input pill on the live line

Leo, 2026-11-05, on Claude desktop's "Allow Claude to use cmux NIGHTLY?" card: "The whole, like,
allow whatever to use, allow for this session, or deny. And then it shows the hotkeys."

- PermissionCard: a bold title on the title step over a muted reason, a quiet details band
  (command, scope line), then the answers at the trailing edge: other options, Deny with an esc
  keycap, Always allow with its ⌥⌘2 hint, and Allow once last, filled in the text colour
  inverted, with a ⌘↩ keycap. ⌘↩ allows once (Return still does); every choice, key and
  app shortcut is kept. Deny's field shows esc and ↩ on Cancel and Send.
- The live line while the chat waits on the person is the "Needs your input" pill (the
  attention dot on a tinted pill); once answered, the dot shrinks into the Thinking line.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Agent-Session: https://cmux.com/deeplink/agent?id=aid-82fcd56b3d2da30b801c
@github-actions

github-actions Bot commented Nov 5, 2026 •

Copy link
Copy Markdown
Contributor

cmux status (one comment, edited in place; each line is updated by the job that owns it)

Review c2d81b5: HQ feed card · gallery before/after runs · checks

App of this head (app.zip, kept 1 day)

gh workflow run reload-build.yml -R manaflow-ai/cmux --ref feat-cmux-next -f tag=pr36189 -f ref=lane/approval-card-and-fonts -f platform=macos -f backend_mode=local

Unclear: web / react-apps-check failed: no known signature; failed step: Check webview test shards.

CI failed on c2d81b5f53 (run 42050724308 attempt 1): 1 code, 1 unknown.

Job Verdict Why
web / react-apps-base-check (7) code a web test failed
web / react-apps-check unknown no known signature; failed step: Check webview test shards

Failures:

  • seen on other PRs composer-one-row-layout.test.ts Claude heads the box with folder and machine; the quiet row keeps mode and model: failed (job)
  • seen on other PRs new-tab-paste-attachments.test.ts chromium: an image pasted on the New Tab field shows as a chip and goes with the first prompt: failed (job)
  • seen on other PRs new-tab-paste-attachments.test.ts webkit: an image pasted on the New Tab field shows as a chip and goes with the first prompt: failed (job)
  • seen on other PRs new-tab-paste-attachments.test.ts chromium: a file dropped on the New Tab page shows as a chip; a pasted image alone is a prompt: failed (job)
  • seen on other PRs new-tab-paste-attachments.test.ts webkit: a file dropped on the New Tab page shows as a chip; a pasted image alone is a prompt: failed (job)
  • seen on other PRs new-tab-paste-attachments.test.ts chromium: with an image staged, Return on an address asks a chat instead of opening the page: failed (job)
  • seen on other PRs new-tab-paste-attachments.test.ts webkit: with an image staged, Return on an address asks a chat instead of opening the page: failed (job)
  • seen on other PRs popup-surface.test.ts popup surfaces in chromium > the web tooltips match the native tooltip: failed (job)
Matched log lines
web / react-apps-base-check (7): (fail) Claude heads the box with folder and machine; the quiet row keeps mode and model [1028.17ms]

Not re-run automatically: web / react-apps-base-check (7), web / react-apps-check are not machine failures.

Written by scripts/ci/classify_failures.py (ci-failure-attribution.yml); signatures are its SIGNATURES table. A machine verdict is the runner's fault, not this PR's; yours means the failing file is one this PR changes, also red on main that main's latest full suite fails the same way, seen on other PRs that it failed on another pull request's run lately.

red: web / Web status; a job it gathers is red on this change (its line here); do not merge until green; see lane-rules
red: web / react-apps-base-check (7); NEW webview test reds: test/pane-english.test.ts > agent pane strings > no user-visible English is written in the pane's sources; test/agent-pane-no-capsules.test.ts > agent pane page > rounds its controls as small-radius rects, not capsules; do not merge until green; see lane-rules
red: web / react-apps-check; a job it gathers is red on this change (its line here); do not merge until green; see lane-rules

Gallery before/after for c2d81b5: 16 states rendered, 4 images differ, 3747 more touched states not rendered. Images are in the run's artifact, not on this public PR; the independent review of this head reads them on its own, so the PR needs no hand-made screenshots of these states.

gh run download 42050723819 -R manaflow-ai/cmux -n gallery-advisory-36189-c2d81b5f53a09b4788f9462b718bf1b2e8db0cfa (then read gallery-review.json)

States
State Theme Status Diff Picked by
agent-pane.access-offer/turn-no-credits Apple System Colors Light unchanged 0% own conversation.css
agent-pane.access-offer/turn-no-credits Apple System Colors unchanged 0% own conversation.css
agent-pane.access-offer/turn-low-credits Apple System Colors Light unchanged 0% own conversation.css
agent-pane.access-offer/turn-low-credits Apple System Colors unchanged 0% own conversation.css
agent-pane.access-offer/turn-no-offer Apple System Colors Light unchanged 0% own conversation.css
agent-pane.access-offer/turn-no-offer Apple System Colors unchanged 0% own conversation.css
agent-pane.activity-line-looks/none Apple System Colors Light unchanged 0% own conversation.css
agent-pane.activity-line-looks/none Apple System Colors unchanged 0% own conversation.css
agent-pane.activity-line-looks/spinner Apple System Colors Light changed 0.0562% own conversation.css
agent-pane.activity-line-looks/spinner Apple System Colors changed 0.0496% own conversation.css
agent-pane.activity-line-looks/kind Apple System Colors Light changed 0.0288% own conversation.css
agent-pane.activity-line-looks/kind Apple System Colors changed 0.0261% own conversation.css
agent-pane.activity-line-looks/aligned Apple System Colors Light unchanged 0% own conversation.css
agent-pane.activity-line-looks/aligned Apple System Colors unchanged 0% own conversation.css
agent-pane.add-project-panel/environment Apple System Colors Light unchanged 0% own styles.css
agent-pane.add-project-panel/environment Apple System Colors unchanged 0% own styles.css
agent-pane.add-project-panel/sources Apple System Colors Light unchanged 0% own styles.css
agent-pane.add-project-panel/sources Apple System Colors unchanged 0% own styles.css
agent-pane.add-project-panel/directory Apple System Colors Light unchanged 0% own styles.css
agent-pane.add-project-panel/directory Apple System Colors unchanged 0% own styles.css
agent-pane.add-project-panel/long-directory Apple System Colors Light unchanged 0% own styles.css
agent-pane.add-project-panel/long-directory Apple System Colors unchanged 0% own styles.css
agent-pane.add-project-panel/keyboard Apple System Colors Light unchanged 0% own styles.css
agent-pane.add-project-panel/keyboard Apple System Colors unchanged 0% own styles.css
agent-pane.add-project-panel/browse-error Apple System Colors Light unchanged 0% own styles.css
agent-pane.add-project-panel/browse-error Apple System Colors unchanged 0% own styles.css
agent-pane.all-chats-list/page-failed Apple System Colors Light unchanged 0% own styles.css
agent-pane.all-chats-list/page-failed Apple System Colors unchanged 0% own styles.css
agent-pane.all-chats-list/page-recovered Apple System Colors Light unchanged 0% own styles.css
agent-pane.all-chats-list/page-recovered Apple System Colors unchanged 0% own styles.css
agent-pane.all-chats-list/long-values Apple System Colors Light unchanged 0% own styles.css
agent-pane.all-chats-list/long-values Apple System Colors unchanged 0% own styles.css

Pick other states with a Gallery: entry.id, entry.id/variant line in the PR body.

@github-actions github-actions Bot added the risk:normal Risk tier (docs/ci/risk-tiers.md) label Nov 5, 2026
@blacksmith-sh

blacksmith-sh Bot commented Nov 5, 2026 •

Copy link
Copy Markdown

Found 10 test failures on Blacksmith runners:

Failures

Test View Logs
test/agent-pane-no-capsules.test.ts/agent-pane-no-capsules.test View Logs
test/agent-pane-no-capsules.test.ts/agent-pane-no-capsules.test View Logs
test/composer-one-row-layout.test.ts/composer-one-row-layout.test View Logs
test/composer-one-row-layout.test.ts/composer-one-row-layout.test View Logs
test/new-tab-paste-attachments.test.ts/new-tab-paste-attachments.test View Logs
test/new-tab-paste-attachments.test.ts/new-tab-paste-attachments.test View Logs
test/pane-english.test.ts/pane-english.test View Logs
test/pane-english.test.ts/pane-english.test View Logs
test/popup-surface.test.ts/popup-surface.test View Logs
test/popup-surface.test.ts/popup-surface.test View Logs

Fix with [code]smith
Need help on this PR? Tag @codesmith-bot with what you need.

…enshot

Leo's screenshot, now forwarded whole, puts the tint on the card's head
(title and reason), the title in regular weight on the body step, Deny at
the leading edge and the allow at the trailing one, and one outlined
keycap per key ("Esc", "⌘ ↩"). The "Needs your input" dot is a ringed dot
before the pill, outside it. Match all of that; every answer and key
stays as it was.

Tests: permission-card-shortcuts, permission-card-prompt and
live-line-needs-input-pill, 19 pass.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Agent-Session: https://cmux.com/deeplink/agent?id=aid-82fcd56b3d2da30b801c
With four answers on a 540px card the row wrapped Allow once alone onto a
second line, away from Always allow. Group the two allows so a narrow card
moves them down together, still at the trailing edge, as Claude desktop
keeps its allow apart from Deny.

Tests: permission-card-shortcuts, permission-card-prompt and
live-line-needs-input-pill, 19 pass.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Agent-Session: https://cmux.com/deeplink/agent?id=aid-82fcd56b3d2da30b801c
…leading edge when the row wraps

Review (gpt-6-astra) at f77da28: the live-line test slept 450 ms for
real, which check:fixed-waits refuses. It now advances fake timers to one
ms under and then to SETTLE_MS. And when four answers wrap the row, the
row starts at the leading edge, so Deny stays left and the allows right.

Tests: permission-card-shortcuts, permission-card-prompt and
live-line-needs-input-pill, 19 pass; check-fixed-waits passes.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Agent-Session: https://cmux.com/deeplink/agent?id=aid-82fcd56b3d2da30b801c
@teamleaderleo

Copy link
Copy Markdown
Collaborator Author

Review (codex gpt-6.1-sol xhigh, router-review): BLOCK at 41f85e8

BLOCK at 41f85e8

Visual verdict: no visual blocker; all supplied after images reviewed against their before images and the requested Claude layout.

  1. [P1] [blocking] [category:tooling] [finding:F1] [outcome:pending] styles.css:968: The new font:var(--text-caption)/18px ... shorthand trips the type-scale ratchet: head reports 34 raw sizes against baseline 33, while the reconstructed base passes. This makes bun run check fail, although this branch’s CI treats that guard as warning-only. Split the tokenized font size and literal line height into separate declarations.

Follow-ups: none

Review (gpt-6.1-sol) at 41f85e8: the keycaps' `font:var(--text-caption)/18px`
shorthand added a raw size to the type-scale ratchet. They now set the
caption step's size and line height apart, centred in a 20px keycap (the
icon control step), with the half-step between them.

The design-token ratchet also caught the new pill and dot off the scale:
the pill is 20px high with 8px sides; the ringed dot is one 12px glyph
(an 8px dot in a 2px ring of the mark, as before) drawn as a gradient,
renamed .cv-needs-input-glyph; its shrink uses --cmux-ease-out. The
baseline loses the font-weight 500 this change removed.

check:type-scale, check:design-tokens, check-fixed-waits and the other
check:pieces style checks pass; permission-card-shortcuts,
permission-card-prompt and live-line-needs-input-pill: 19 pass.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Agent-Session: https://cmux.com/deeplink/agent?id=aid-82fcd56b3d2da30b801c
…al-card-and-fonts

# Conflicts:
#	webviews/src/agent-session/acpmux/conversation/Thinking.tsx
@cursor

cursor Bot commented Nov 5, 2026

Copy link
Copy Markdown

Bugbot needs on-demand usage enabled

Bugbot uses usage-based billing for this team and requires on-demand usage to be enabled.

A team admin can enable on-demand usage in the Cursor dashboard.

@teamleaderleo

Copy link
Copy Markdown
Collaborator Author

Review (codex gpt-6-astra high, router-review): BLOCK at 8887174

BLOCK at 8887174

Visual verdict: supplied captures match the redesigned permission card and needs-input pill; gallery activity-line differences are tiny.

  • [P2] [blocking] [category:ux] [finding:F1] [outcome:pending] conversation.css:6245 applies the new needs-input styling to ActivityLine.tsx:28 and WorkingFor.tsx:107, whose markup remains bare text without the dot or pill. Their alternate waiting states therefore inherit the warning color and inline-flex spacing, changing alignment/wrapping and producing an un-pill'd needs-input label. Scope the rule to the Thinking markup or update all waiting-line renderers consistently.

Focused tests were not run because bun is unavailable in the review environment.

Follow-ups: none

Review (gpt-6-astra) at 8887174: the pill rule sat on `.cv-waiting`,
which the activity and Worked-for lines (ActivityLine.tsx, WorkingFor.tsx)
also use for a waiting turn, as bare text with no dot or pill; they took
the mark colour and inline-flex spacing. `.cv-waiting` keeps its old full
text colour for them, and the pill's look is `.cv-thinking.cv-waiting`.

live-line-needs-input-pill.test.tsx: the new scoping test fails on
8887174 and passes here; with permission-card-shortcuts and
permission-card-prompt, 20 pass. design-tokens, type-scale and
fixed-waits pass.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Agent-Session: https://cmux.com/deeplink/agent?id=aid-82fcd56b3d2da30b801c
@teamleaderleo

Copy link
Copy Markdown
Collaborator Author

Review (codex, router-review): SHIP at 0be3019

Reviewer: codex gpt-6-astra high, fast tier.

SHIP at 0be3019

Visual verdict: after screenshots match the intended dark/light layouts; no off-screen or bloated controls observed.

Follow-ups: none

@cmux-bot cmux-bot Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

cmux-bot approves 0be3019: an independent review passed this exact head (router-review receipt by teamleaderleo). A push needs a new review; a later BLOCK at this head dismisses this approval.

… in the new card layout

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Agent-Session: https://cmux.com/deeplink/agent?id=aid-82fcd56b3d2da30b801c
@teamleaderleo

Copy link
Copy Markdown
Collaborator Author

Review (codex, router-review): SHIP at 3d5ceee

Reviewer: codex gpt-6-astra high, fast tier.

SHIP at 3d5ceee

Visual verdict: Supplied dark/light captures match the intended permission-card and needs-input layouts.

Changed TypeScript parses cleanly; focused Bun tests were unavailable because bun is not installed.

Follow-ups: none

@cmux-bot cmux-bot Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

cmux-bot approves 3d5ceee: an independent review passed this exact head (router-review receipt by teamleaderleo). A push needs a new review; a later BLOCK at this head dismisses this approval.

…e the Thinking row

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Agent-Session: https://cmux.com/deeplink/agent?id=aid-82fcd56b3d2da30b801c
@teamleaderleo

Copy link
Copy Markdown
Collaborator Author

Review (codex, router-review): SHIP at c2d81b5

Reviewer: codex gpt-6-astra high, fast tier.

SHIP at c2d81b5

Visual verdict: after captures match the intended permission-card layout and needs-input pill in dark and light themes.

Follow-ups: none

@cmux-bot cmux-bot Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

cmux-bot approves c2d81b5: an independent review passed this exact head (router-review receipt by teamleaderleo). A push needs a new review; a later BLOCK at this head dismisses this approval.

@teamleaderleo

Copy link
Copy Markdown
Collaborator Author

Orphaned: no activity for 17 h, and no lane holds a lease on it. The orphan sweep could not merge feat-cmux-next in: conflicts in webviews/src/agent-session/acpmux/conversation/Thinking.tsx. Listed for a lane to resolve.

This branch was previously deployed

1 inactive deployment
ci-routing-agent — c2d81b5f Deployed Nov 5, 2026 by teamleaderleo via wait for same-key tree publisher #116644
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

risk:normal Risk tier (docs/ci/risk-tiers.md)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant