Skip to content

feat(desktop): add design v1 spec, tokens, components and fixture gallery - #861

Open
roodboi wants to merge 7 commits into
nextfrom
feat/desktop-design-v1
Open

roodboi wants to merge 7 commits into
nextfrom
feat/desktop-design-v1

Conversation

@roodboi

@roodboi roodboi commented Nov 15, 2026 •

Copy link
Copy Markdown
Contributor

Design v1 for the desktop app (HACK-2252). Adds the visual spec, a token module, small presentational components and a fixture gallery that renders the main window with them. The current window is unchanged (view.rs, main.rs, screenshots.rs untouched while the tab PRs are open). The owner accepts the main-window renders before anything is restyled for real.

What is in it

  • apps/desktop/DESIGN-V1.md: type scale, spacing, sizes, radii, hairline borders, colour tokens light and dark (surfaces, three text levels, state colours for running / busy / degraded / failed / stopped / unknown), icon set and placement, anatomy of title bar, sidebar, banners, detail header, pill tabs, services table, compact log tail, status bar and empty panes, which gpui-kit components are used and where they are overridden, and a short section on the planned terminal surface (Logs tab, Exec).
  • New crate apps/desktop/ui (hack-desktop-ui): tokens, icons (selected Lucide icons from the pinned gpui-kit-assets, embedded with icon_assets!), status (short lowercase labels, unknown drawn as a ring), components, window (main window from the same core view models the app uses).
  • hack-desktop-gallery binary: --fixture <state> --theme light|dark opens one fixture; --features screenshots -- --screenshots <dir> renders all 15 fixtures, light and dark, offscreen.
  • Renders under apps/desktop/screenshots/v1/. CI clippy now also covers hack-desktop-ui/screenshots.
  • No new dependencies: the crate uses the workspace's existing gpui-kit =0.9.1, hack-desktop-core and image 0.25 (already in the lockfile for the app's screenshot feature).

Mockup vs render

Mockup (approved) v1 render
Title bar: traffic lights, "Hack", right-aligned "Search ⌘K" Same; search is a 240 pt field with icon and ⌘K chip
Sidebar captions Running / Stopped / Machine, sentence case Same ("Not observed" when every remaining row is unknown)
Rows: state dot, name, pin on always-on Same; selected row filled, stopped names secondary, unknown is a ring
Machine: globe "Routing and DNS" + dot, stethoscope "Doctor" + amber count Same (routing dot is a ring: status not read yet)
Header: name, "running · 3d 4h" pill, "compose" pill, Open / Restart / Stop with icons Same; short lowercase state labels; Start is the one filled button
URL in mono, Always on switch Same
Pill tabs Services / Logs / Env / Activity Same (filled selected tab, no underline)
Table Service, State, CPU, Memory, Route; hairline rows Same; numbers right-aligned; "internal" muted when no route
Compact log tail block, warnings tinted Same; sized to its lines (no empty box)
Status bar "3 running · 2 always on · engine ok", version right Same

Running, light and dark:

running light
running dark

All fixtures: light, dark.

Gaps from HACK-2252 addressed: icons; pill tabs; 13 pt body with three text levels and a 17 pt semibold title; hierarchy via weight and colour; table density (32 pt rows, numbers, mono routes); short state text; log tail sized to content; title-bar search and Machine caption.

Decisions defaulted (flagged)

  • CPU / memory in the gallery are sample values, labelled in code and spec. The core does not read per-service usage yet; wiring hack usage --json (feat(usage): report one project's usage per service as JSON #852) is a follow-up.
  • Traffic lights in offscreen renders are stand-ins; the real window should use a transparent full-size-content title bar on macOS.
  • Fonts: platform UI font (SF Pro on macOS) and gpui-kit's mono default (Menlo on macOS). Linux renders here use the installed fallbacks, so the macOS look must be judged on a Mac render.
  • Interactivity when restyling: recommended default is gpui-kit's custom button variant fed from tokens for buttons, and the small components gaining focus/keyboard handling for tabs and rows.

Verification

  • cargo fmt --all --check; cargo clippy --locked --all-targets -- -D warnings; same with --features hack-desktop/screenshots,hack-desktop-ui/screenshots: clean (Linux).
  • bash scripts/test.sh (pinned nextest): 85 passed, 1 skipped; new unit tests cover label shortening, unknown-vs-stopped, and that every icon is embedded.
  • Renders produced on Linux with the WGPU offscreen renderer and inspected.

Not verified: macOS rendering (fonts, Metal). Please run on the Mac and attach two PNGs:

cd apps/desktop
cargo run -p hack-desktop-ui --features screenshots --bin hack-desktop-gallery -- --screenshots /tmp/hack-v1
open /tmp/hack-v1/running-light.png /tmp/hack-v1/running-dark.png
cargo run -p hack-desktop-ui --bin hack-desktop-gallery -- --fixture running   # live window

🤖 Generated with Claude Code


Show it working
Open in [code]smith · Need help on this PR? Tag @codesmith-bot with what you need.

…lery

Adds apps/desktop/DESIGN-V1.md (type, spacing, radii, colour tokens light
and dark, icon set, anatomy of every main-window region) and a new
hack-desktop-ui crate with the tokens, a Lucide icon set, small
presentational components and the main window composed from them. The
hack-desktop-gallery binary renders every fixture with the new design;
renders are committed under screenshots/v1. The current window is
unchanged until the renders are accepted.

Refs HACK-2252.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@vercel

vercel Bot commented Nov 15, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
hack-docs Ready Ready Preview Nov 15, 2026 2:12pm UTC

Request Review

@roodboi

roodboi commented Nov 15, 2026

Copy link
Copy Markdown
Contributor Author

@codex review

@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Nov 15, 2026 •

Copy link
Copy Markdown
Codex Review Summary: ✅ Completed

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review ✅ Completed 2026-11-15T09:55:31.778139Z 17d112b Manual request
🔒 Security Review ✅ Completed 2026-11-15T09:57:26.933448Z 17d112b Manual request
ℹ️ 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" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

@chatgpt-codex-connector

Copy link
Copy Markdown

Codex Review: Didn't find any major issues. 👍

Reviewed commit: 739c4dfbbb

ℹ️ 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".

@chatgpt-codex-connector

Copy link
Copy Markdown

🛡️ Codex Security Review · Automatically triggered

Security review completed. No security issues were found in this pull request.

Reviewed commit: 739c4dfbbb

View security finding report

Only the user who started this review can view the report in Codex.

ℹ️ About Codex security reviews in GitHub

This is an experimental Codex feature. Security reviews are triggered when:

  • You comment "@codex security review"
  • A regular code review gets triggered (for example, "@codex review" or when a PR is opened), and you’re opted in so security review runs alongside code review

Once complete, Codex will leave suggestions, or a comment if no findings are found.

…y and paused services

Unobserved services read unknown even if never created; unhealthy running
services are degraded; paused or unrecognised containers are unknown, never
stopped. The stale banner shows when no daemon banner explains the failed
read.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@roodboi
roodboi marked this pull request as ready for review November 15, 2026 08:07
@roodboi

roodboi commented Nov 15, 2026

Copy link
Copy Markdown
Contributor Author

Ready for lead: head 8710e6e8c66cf75e24cf07838ac4361221672096.

Owner gate: accept or reject the main-window renders before anything in view.rs is restyled. Running: light, dark; all 15 fixtures: light, dark.

Ran (Linux): cargo fmt --all --check; cargo clippy --locked --all-targets -- -D warnings and with --features hack-desktop/screenshots,hack-desktop-ui/screenshots; bash scripts/test.sh with pinned nextest (85 passed, 1 skipped); gallery renders regenerated and inspected.

Review: persistent Codex reviewer (gpt-6.1-sol): round 1 found 3 majors (service dot/label for unknown, unhealthy, paused; stale banner hidden on non-daemon read failures), fixed in 8710e6e with regression tests; round 2 CLEAN at 8710e6e. @codex review: no major issues. computer pr review-status: CLEAR at 8710e6e, no bot threads.

CI at this head: Desktop Linux and macOS jobs pass; docker-e2e shards pass; test shards 3-8 pass, 1 and 2 were still queued when posted. The failing test / docker-e2e entries from run 43692862076 are the earlier draft-gate run (drafts are rejected by design).

Not verified: macOS rendering (fonts, Metal). Please run and attach the two PNGs:

cd apps/desktop
cargo run -p hack-desktop-ui --features screenshots --bin hack-desktop-gallery -- --screenshots /tmp/hack-v1
cargo run -p hack-desktop-ui --bin hack-desktop-gallery -- --fixture running --theme dark   # live window

Defaulted decisions: gallery CPU/memory are labelled samples (usage wiring is a follow-up); stand-in traffic lights in renders only; restyle plan uses gpui-kit's custom button variant for buttons and focusable small components for tabs/rows. Linear not updated (connector not authorized in this session).

@chatgpt-codex-connector

Copy link
Copy Markdown

Codex Review: Didn't find any major issues. Hooray!

Reviewed commit: 8710e6e8c6

ℹ️ 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".

@chatgpt-codex-connector

Copy link
Copy Markdown

🛡️ Codex Security Review · Automatically triggered

Security review completed. No security issues were found in this pull request.

Reviewed commit: 8710e6e8c6

View security finding report

Only the user who started this review can view the report in Codex.

ℹ️ About Codex security reviews in GitHub

This is an experimental Codex feature. Security reviews are triggered when:

  • You comment "@codex security review"
  • A regular code review gets triggered (for example, "@codex review" or when a PR is opened), and you’re opted in so security review runs alongside code review

Once complete, Codex will leave suggestions, or a comment if no findings are found.

roodboi and others added 2 commits November 15, 2026 04:03
Logs move from a top tab into an edge-to-edge terminal panel docked at the
bottom of the content area: drag handle, tab strip (Logs, container shells,
host shells, host shell with env), env badge with overlay and scope names
(amber when not the default overlay), new-tab menu, and collapsed, open and
maximized states with a one-row header when maximized. The spec adds the
panel anatomy, tab kinds, badge rules, session rules and keyboard bindings.
Routing and DNS shows a solid dot when Doctor has reported routing checks.
Gallery renders cover the panel states for running and failed-start.

Refs HACK-2252.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@roodboi

roodboi commented Nov 15, 2026

Copy link
Copy Markdown
Contributor Author

@codex review

@chatgpt-codex-connector

Copy link
Copy Markdown

Codex Review: Didn't find any major issues. Delightful!

Reviewed commit: 3e5c2d4433

ℹ️ 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".

@chatgpt-codex-connector

Copy link
Copy Markdown

🛡️ Codex Security Review · Automatically triggered

Security review completed. No security issues were found in this pull request.

Reviewed commit: 3e5c2d4433

View security finding report

Only the user who started this review can view the report in Codex.

ℹ️ About Codex security reviews in GitHub

This is an experimental Codex feature. Security reviews are triggered when:

  • You comment "@codex security review"
  • A regular code review gets triggered (for example, "@codex review" or when a PR is opened), and you’re opted in so security review runs alongside code review

Once complete, Codex will leave suggestions, or a comment if no findings are found.

roodboi and others added 2 commits November 15, 2026 04:30
…b menu on screen

The Routing and DNS dot now reads Doctor's actual routing check names and
dns:/resolver: prefixes (optional tool probes excluded), worst wins. The
new-tab menu opens below the strip when the panel is maximized, scrolls past
300 pt and paints above the terminal. Linux next/previous tab uses
Ctrl-Shift-PageDown/PageUp so no unshifted chord is taken from the shell; the
fallback terminal palette is listed in full.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…reas

The Routing and DNS dot now counts every machine check Doctor classifies as
routing_dns or certificates (including linux dns route, proxy network and
host tls trust) and its network prefixes; a test keeps the list equal to
src/lib/doctor-metadata.ts. Fixes a Markdown table that swallowed a paragraph.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@roodboi

roodboi commented Nov 15, 2026

Copy link
Copy Markdown
Contributor Author

@codex review

@roodboi

roodboi commented Nov 15, 2026

Copy link
Copy Markdown
Contributor Author

Ready for lead: 17d112b

What changed since the last note: merged next 34b5053 (no conflicts). The owner-approved terminal panel replaces the Logs tab in the design. The panel is edge to edge at the bottom of the content area, with a drag handle and a tab strip:

  • Tab kinds: Logs, api · sh, host · zsh, and a host shell with env.
  • Env badge: overlay and scope names only; amber when the overlay is not the default.
  • New-tab menu: opens toward the larger space, and long service lists scroll.
  • States: collapsed, open (half by default) and maximized; when maximized the project header is one row.
  • Top tabs are now Services / Env / Activity.

DESIGN-V1.md gains a Terminal panel section (anatomy, states, tab kinds, badge rules, menu, fallback terminal palette, keyboard table for macOS and Linux) and a Terminal sessions section (app-owned PTY running the CLI, no values in the app or argv, why not tmux).

Lead polish items:

  • Services no longer leaves the lower half empty; the panel fills it.
  • Routing and DNS shows a solid dot whenever Doctor has reported its routing or certificate checks. The list is taken from Doctor's canonical areas in src/lib/doctor-metadata.ts, and a test fails on drift.

Renders:

I compared each render with the approved panel mockup. Two problems the renders exposed are fixed: the menu was hidden behind the terminal when maximized, and its anchor was misplaced.

Ran (Linux, this head):

  • cargo fmt --all --check
  • clippy, default features and with hack-desktop/screenshots,hack-desktop-ui/screenshots
  • bash scripts/test.sh (pinned nextest): 101 passed, 1 skipped
  • From the repo root with Bun 1.4.4, temp HOME and HACK_DAEMON_AUTOSTART_DISABLE=1: bun test tests/machine-output-contract.test.ts tests/sync-spawn-bound.test.ts, 89 pass, run at a506066 (the merge); nothing outside apps/desktop has changed since.
  • The nine acceptance scripts were not run: no change touches src/, scripts/ or packages/. No generated files are affected.

Review: persistent Codex reviewer, rounds 4 to 7.

  • Round 5: routing checks missing, menu able to leave the window, a keyboard-table inconsistency.
  • Round 6: three more routing IDs, and a broken Markdown table.
  • All fixed. Round 7 is CLEAN at 17d112b (clippy and 13/13 UI tests run by the reviewer).
  • @codex review: no major issues at 3e5c2d4; re-requested at this head. computer pr review-status: 0 unresolved bot threads.

CI at this head: Desktop Linux passes; Desktop macOS is queued, and I did not wait for it, as you said.

Not verified:

Defaulted decisions:

  • The fallback terminal theme is dark in both app modes, as in the mockup; the user's Ghostty config overrides it.
  • Linux shortcuts use only Ctrl-Shift chords.
  • The routing dot needs a core field for the live app (follow-up).

@chatgpt-codex-connector

Copy link
Copy Markdown

Codex Review: Didn't find any major issues. More of your lovely PRs please.

Reviewed commit: 17d112b8f7

ℹ️ 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".

@chatgpt-codex-connector

Copy link
Copy Markdown

🛡️ Codex Security Review · Automatically triggered

Security review completed. No security issues were found in this pull request.

Reviewed commit: 17d112b8f7

View security finding report

Only the user who started this review can view the report in Codex.

ℹ️ About Codex security reviews in GitHub

This is an experimental Codex feature. Security reviews are triggered when:

  • You comment "@codex security review"
  • A regular code review gets triggered (for example, "@codex review" or when a PR is opened), and you’re opted in so security review runs alongside code review

Once complete, Codex will leave suggestions, or a comment if no findings are found.

@roodboi

roodboi commented Nov 15, 2026

Copy link
Copy Markdown
Contributor Author

Ready for lead: 79c8107

Merge: a normal merge of next 081a526 (#811, #863, #808), with no conflicts and no generated files affected. The PR content is unchanged from the reviewed 17d112b. The gallery re-render matches the committed screenshots byte for byte.

Ran (Linux, this head):

  • cargo fmt --all --check
  • clippy, with default features and with hack-desktop/screenshots,hack-desktop-ui/screenshots
  • bash scripts/test.sh (pinned nextest): 125 passed, 1 skipped
  • From the repo root with Bun 1.4.4, a temporary HOME and HACK_DAEMON_AUTOSTART_DISABLE=1: bun test tests/machine-output-contract.test.ts tests/sync-spawn-bound.test.ts, 89 pass

I did not run the acceptance scripts: nothing under src/, scripts/ or packages/ changed.

Review: the persistent Codex reviewer's round 11 is CLEAN at this head. It reran clippy and the 13 UI tests, found no interaction with #808's Logs code or the desktop.yml clippy line, and confirmed that DESIGN-V1.md matches the landed core log reader. computer pr review-status is in the latest run.

CI: I did not wait for queued macOS jobs. Wiring the panel into view.rs (PR 3) waits for #806.

This branch has not been deployed

No deployments
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