Beta 6 feedback batch: visual and interaction polish (panel hierarchy, execution panel behavior, responsive long-data rule, action-button vocabulary)

[cherishfall]

Problem Statement

Beta 6 testing surfaced a batch of visual and interaction inconsistencies that individually feel small but together make the app feel unpolished:

• Sidebar navigation toggle icons are visually misaligned between the two sidebar states.
• The language switcher popover renders its two menu items side by side on one row instead of as a vertical menu.
• The toolbar's directory pick button drifts between positions depending on directory vs. global mode, and global mode lacks a distinct eyebrow label.
• All three chrome panels (sidebar, top toolbar, execution deck) share a single flat surface color, which reads as bland in light mode and lacks hierarchy in dark mode.
• The execution panel header puts the copy command button before the status, and closes with a bare "×" glyph instead of a labeled text button.
• The execution panel auto-opens on every command start, yanking attention even when the user did not ask for it.
• Shrinking the window behaves differently on every page: the preview page wraps long values mid-token, the tools page clips its rightmost columns with no indication, and the environment page truncates values with ellipsis. Three pages, three behaviors.
• The same action vocabulary is styled inconsistently across pages: "choose directory" looks different in the link-tool form than in the toolbar, and destructive actions (remove an env var) render as low-emphasis ghost buttons while the same class of action (uninstall a tool) on another page renders with a danger treatment.

The window already has a minimum size, so the problem is not size alone — it is that long data and action styling have no single, documented rule.

Solution

One coordinated polish pass across chrome, content, and actions:

1. Alignment and layout bugs fixed so the sidebar toggle and language menu read correctly in both states.
2. A stable toolbar: the pick button sits at the right edge in both modes, and global mode shows its own eyebrow label.
3. A three-level panel surface hierarchy mapped from mise's own website palette (warm parchment / warm charcoal family): sidebar, top toolbar, and execution deck each get a distinct, intentional surface; elevated surfaces (popovers, dialogs, banners) get a warm value that stays visually "floating" between page and chrome. A new ADR records why values deviate from the upstream site.
4. A calmer execution panel: header order becomes status → copy command → close, close is a text button like copy, and the panel no longer auto-opens on command start — with one exception: a failure while the panel is closed opens the panel once so the error is immediately visible. The existing reopen affordance (status dot + label) surfaces all other activity.
5. One responsive rule for long data everywhere: fixed table layout, no wrapping mid-token, ellipsis with a hover tooltip showing the full value. No clipped columns, no horizontal scrolling to read ordinary data. The window keeps its existing minimum size.
6. One action-button vocabulary across all pages: primary for a row's main action, secondary for routine actions, danger for destructive ones, ghost only for dismissive/low-frequency actions. "Choose directory" renders as a primary button everywhere, backed by a single shared implementation — the toolbar's bespoke button style is converged onto the shared Button component.

User Stories

1. As a beta tester, I want the sidebar toggle icons visually centered in both sidebar states, so that the chrome looks deliberate rather than broken.
2. As a Chinese-language user, I want the language switcher to show its options as a vertical menu, so that it reads as a menu and not a broken row.
3. As a user switching between global and directory mode, I want the toolbar pick button to stay in one place, so that my muscle memory works.
4. As a user in global mode, I want a distinct eyebrow label, so that I know which mode I am in at a glance.
5. As a user who finds the default panels bland, I want sidebar, toolbar, and execution deck to have distinct warm surfaces, so that the app has visual depth without leaving the mise family palette.
6. As a user of popovers and dialogs, I want elevated surfaces to stay visually "floating" between the page background and chrome panels, so that overlays read as overlays.
7. As a curious user, I want an ADR explaining why panel colors deviate from mise's exact website values, so that future contributors do not "fix" them back.
8. As a user watching a command run, I want the header to show status first, then copy command, then close, so that the order matches my reading order.
9. As a user closing the execution panel, I want a labeled "close" text button, so that the affordance is explicit rather than a cryptic "×".
10. As a user running background reads, I want the execution panel to stay closed unless I open it, so that my reading flow is never yanked by automatic pop-ups.
11. As a user, I want the reopen affordance (status dot + label) to show command activity while the panel is closed, so that I never lose track of a running command.
12. As a user with a long PATH value, I want it truncated with an ellipsis and a hover tooltip, so that rows stay a stable height and I can still read the full value on demand.
13. As a user shrinking the window on any page, I want the same long-data behavior everywhere, so that no page ever clips columns or wraps paths mid-token.
14. As a user on a small window, I want action and input columns to keep their intrinsic width, so that buttons and inputs are never squeezed into illegibility.
15. As a user removing an environment variable, I want the remove button styled as a destructive action, so that sensitive operations are visually distinct from routine ones.
16. As a user comparing pages, I want edit/switch actions styled the same way everywhere, so that I can transfer what I learned on one page to another.
17. As a user linking a tool, I want the "choose directory" button to look like the toolbar's, so that the same action always looks the same.
18. As a Chinese-reading user, I want the env name input wide enough for its full placeholder hint, so that the naming convention is not cut off.
19. As a user whose command fails in the background of my reading, I want the panel to open once on failure, so that I never miss an error while the panel is closed.
20. As a design-conscious user, I want the toolbar's primary button to be the same component as every other primary button, so that typography, focus rings, and motion stay consistent app-wide.

Implementation Decisions

• Sidebar toggle alignment is fixed by reusing the nav item's existing spacing model for the button box, so both icons share the same center line in both states.
• The language switcher popover gets an explicit vertical flex direction so its menu items stack; the active item is indicated by background, not a checkmark glyph.
• The toolbar actions container right-aligns its content in both modes; global mode gains its own short eyebrow label, split from the reusable button label in the i18n catalogs (en + zh-CN updated together).
• Panel surfaces adopt a five-token model: page background, elevated surfaces, and three chrome levels (sidebar, top toolbar, execution deck), with light values taken from mise's published palette (bg / bg-elv analog / bg-soft / bg-alt / bg-mute roles) and dark values from the same family. One dark value intentionally deviates from the upstream site (their nav bar value is nearly invisible at functional panel heights) — the deviation stays within the warm charcoal family and is recorded in a new ADR.
• Elevated surfaces (popover, dialog, banner, generic panel) change from pure white / near-black to warm values that sit between page and sidebar in both themes, so elevation is carried by shadow plus distinguishable color; derived color-mix tints follow automatically.
• The execution panel header reorders to status (dot + label) → copy command → close; close becomes a text button using the existing dismiss strings (already present in both locales); running state's existing "cancel" text button already matches the new order.
• The execution panel's open-on-start behavior is removed: starting a command preserves current visibility (closed stays closed, open stays open); the existing reopen affordance surfaces activity with tone-colored status. The single exception: a run that fails while the panel is closed opens the panel once — silence on failure was judged too easy to miss during review.
• The toolbar's bespoke primary button style is deleted and the button converges onto the shared Button component, so button typography, radius, focus ring, and reduced-motion handling have one implementation app-wide.
• Long data in every table uses fixed layout + nowrap + ellipsis + title tooltip; action and input columns declare fixed widths; all mid-token break-all usage is removed; prose keeps soft wrapping; log and file-content viewers keep their scroll containers as legitimate exceptions.
• The responsive rule is tightened in the UI/UX rules doc from "ellipsis or scroll" to a single default (ellipsis + tooltip; scroll only for full-browse surfaces), plus a total rule for window shrink behavior and an action-column button variant mapping (primary = row's main action; secondary = routine; danger = destructive; ghost = dismissive/low-frequency). A global action ("choose directory") has exactly one visual role: primary.
• Documentation changes are mirrored in English and Chinese per the project's documentation rule.

Testing Decisions

• No new test seams. All changes are CSS/TSX presentation-layer; the existing Rust integration suite is untouched and must stay green.
• The verification seam is the existing CI gate (typecheck, i18n parity lint, CSS token lint, build) plus running the app.
• Visual verification follows the project's economical rule: build + run + static self-audit; tickets that restructure layout attach screenshots.
• Responsive tickets verify by shrinking the window to the minimum size and walking every page: no mid-token wrap, no clipped columns, no accidental horizontal scroll; every ellipsized cell shows the full value on hover.
• Prior art: the env page's table already implements the target long-data pattern; the tools page already implements the target action-column variant pattern.

Out of Scope

• Any change to the window minimum size, Rust command layer, or backend behavior.
• New color tokens outside the warm parchment / warm charcoal family.
• Converging the execution panel's mono-styled action buttons onto the shared Button component — the panel's terminal context intentionally keeps monospace controls; only the toolbar's off-system button converges this round.
• (Two items originally listed here — failure auto-open and toolbar button convergence — were reviewed and promoted into scope during the beta 6 cycle.)

Further Notes

• This batch is the beta 6 feedback cycle, synthesized from ten reviewed feedback items in the beta 6 scratch notes.
• The panel-surface ticket delivers the ADR alongside the code: the split between chrome and elevated surface roles, the dark toolbar visibility deviation, and the elevated-surface value deviation are the three decisions worth recording.
• The two execution panel tickets touch the same component but different layers (header markup vs. open behavior) and are independent.

[cherishfall]

关闭：本周期全部 tickets 已实现并合入 master，经后续多个 beta 构建（beta.10/beta.11）实际安装使用验证，owner 反馈未再复现，视觉验证视为通过。