Skip to content

Redesign every screen, the palette, and running subagents - #106

Merged
eivindjonassen merged 39 commits into
mainfrom
design/council-polish
Nov 9, 2026
Merged

eivindjonassen merged 39 commits into
mainfrom
design/council-polish

Conversation

@eivindjonassen

Copy link
Copy Markdown
Member

Summary

A design pass over every screen, sheet, and menu. Three reviewers from different model providers audited the app from source, then from phone-sized screenshots of a web preview. The owner supplied screenshots of the official OpenCode iOS app as the quality bar. Its visual patterns were adopted where they fit existing features; its other features were left out.

  • Design tokens. One palette.selected fill marks every chosen tab, option, and row. The old selected fill matched the card and was invisible. theme.ts also gains ripple, floating-shadow, and icon-tile tokens.
  • Palette. The palette is a subtly cool slate dark with soft pastel accents (#11131a background, #1a1d27 card). Working is one blue everywhere, as the spec says. Every text color clears 4.5:1 on each surface it is used on.
  • Buttons.
    • Buttons are capsules. Secondary and danger buttons are filled; the old outlines measured 1.1:1 against cards.
    • Pressed buttons change their fill instead of fading their label, so a pressed label keeps its contrast.
    • Always allow is an outlined capsule, quieter than Reject and Allow once.
  • Composer.
    • The toolbar reads agent, model, then variant ("Build Claude Sonnet 4.5 High"), with no chip borders.
    • When expanded, Send joins the toolbar so the text gets the full width.
    • While a run is active, a visible Steer or Queue label sits beside Send.
  • Transcript.
    • Expandable rows share one chevron and give press feedback.
    • Failed tools are red and interrupted tools amber.
    • Code comments are easier to read, and the code block header has no dead band.
    • Several images form a grid.
    • Transcript and session load failures offer Retry.
  • Subagent cards. Each card has two lines: a state glyph and the title, then "@agent · Background · state · elapsed". The border stays neutral and turns amber only when the child needs you. A result appears only once one exists, so a launch acknowledgement never becomes a result.
  • Subagent states.
    • Preparing, Running, Needs approval, Needs answer, Completed, Interrupted, Failed, and Finished.
    • A pending permission or form anywhere in the followed projects marks its child as needing you.
    • A child that only drops out of the active list reads as Finished, never as Completed. Screen readers hear "finished, outcome unknown".
  • Subagent monitor.
    • The chip counts every live child, foreground and background, and says how many need you.
    • The sheet lists Needs you, Working, and Finished. Rows open the child.
    • Working rows offer a confirmed Stop. Stop refreshes server state and stays Stopping until the child leaves Working.
    • While disconnected, the sheet keeps the last known rows and drops Stop.
  • Subagent sessions. The header reads "Subagent · project", the title drops the agent suffix, and back says it returns to the parent session.
  • Inbox.
    • Rows keep the specified 70% and 50% fades, but their quiet text starts brighter so the result clears 4.5:1.
    • Working rows show the working indicator.
    • Header icons match, attention dots sit on their icons, and search has an empty state.
  • Approvals.
    • Each pooled request names its project and session.
    • Permission cards lead with the action and show "Reject may also reject other requests in this session" before the buttons, as spec section 10.4 requires.
    • The Details sheet pins its actions, and form and permission actions share one order.
    • Invalid form fields get a danger border and expose their error to screen readers.
  • Sheets and full-screen states.
    • Modal headers share a height and divider.
    • Done closes a sheet; Cancel appears only where closing discards input.
    • The delete confirmation names the server, project, and path.
    • App lock, storage failure, and the render error screen share a scrolling layout.
  • Management screens.
    • Settings rows have icon tiles and show their current value; a version footer ends the screen.
    • A pairing review replaces the capture controls.
    • The connection editor scrolls into view when it opens.
    • Dev tools errors read as errors.
    • The diff screen is titled Changes.

The native root background in app.config.ts now matches the palette. That changes the native fingerprint, so this needs new native builds and can't ship as an OTA update to 0.1.5 builds. The preview runtime moves to 0.1.6, with iOS build 9 and Android version code 8.

Deliberately not changed:

  • The Settings gear keeps its attention dot on phones, because section 10.4 of the spec requires the header to show attention.
  • The session back button keeps a dot instead of a count badge, because a test requires the dot.
  • Not added: a light theme, sibling-card grouping, live per-subagent activity lines, and a "Waiting on N subagents" parent status.

Verification

  • pnpm check: lint, typecheck, 1527 tests in 114 suites, and iOS and Android Hermes exports.
  • pnpm native:doctor: 18 of 18 checks pass.
  • Tests cover the changed behavior, including:
    • Subagent states, attention, acknowledgement handling, monitor sections, Stop lifecycle, and the stale monitor.
    • Inferred-finish announcements, request owners, and the transcript Retry.
    • Pairing review, invalid form fields, new-session row affordances, header and back labels, and pressed button fills.
    • pnpm crap scores every changed function below 30. The highest score is 30.0, in installNotificationPairing, which this branch does not touch.
  • Platform behavior is verified on the affected targets, or the gap is documented.
    • The screenshots come from a react-native-web build in a scratch clone with fake fixture data, so they are not native renders.
    • Fonts, switches, sheet presentation, and the iOS header branch differ from devices.
    • EAS preview builds for runtime 0.1.6 were started from d71a46a on both platforms and are still running. Later commits change JavaScript only, so they keep the same native fingerprint.
    • No device check has happened yet. docs/UX-REVIEW.md lists what to check on devices: large text, VoiceOver and TalkBack, keyboard, Android header alignment, the iOS 26 header, hit-slop targets, and Stop against a real server. No probe is recorded in docs/COMPATIBILITY.md yet.
  • No credentials, addresses, identifiers, user content, private paths, or deployment files are included.
  • Documentation and TODO.md reflect the resulting behavior. docs/UX-REVIEW.md records the review and its device follow-up. TODO.md is unchanged, because its token and theming items stay open until device verification.
  • After merge, record the 0.1.6 baseline in the mobile-updates environment: MOBILE_RUNTIME_VERSION and both native hashes from pnpm mobile:runtime. Until then, Publish mobile update will refuse to publish.

Council review

Rounds: 7

Delegate Round 1 Round 2 Round 3 Round 4 Round 5 Round 6 Round 7
Claude Opus 5.5 6.5/10 7.5/10 8.3/10 8.6/10 8.3/10 8.8/10 9.0/10
GPT-6.1 Sol 7.2/10 8.3/10 8.8/10 9.0/10 8.8/10 9.1/10 9.5/10
Gemini 4 Argon 7.6/10 8.9/10 9.5/10 9.6/10 9.6/10 9.9/10 9.9/10

Rounds 5 to 7 widened the review to the composer, buttons, color, and running subagents. All three reviewers were satisfied after round 7. GPT's round 7 score is from its confirmation after the announcement fix.

…eject note, delete context, one chevron direction, tighter code headers, shared review button
…ed permission details actions with focus return, settings dot on the gear, subagent and diff action chevrons, transcript image grid
…casing, tighter copy icon, session dot by the chevron, platform-aligned header subtitle
…d as one phrase; capsule buttons with filled secondary and danger variants
… and needs-you states, elapsed time, and no result before it exists
…et lists Needs you, Working, and Finished with open and confirmed stop
@eivindjonassen
eivindjonassen merged commit c502a0f into main Nov 9, 2026
3 of 4 checks passed
@eivindjonassen
eivindjonassen deleted the design/council-polish branch November 9, 2026 23:14
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