feat(ui): remix Hoist chrome in the 1Password / Knox direction - #22
Merged
Conversation
Borrowing directly from 1Password 8: 3-pane vault chrome, hairline-
bordered surface ladder, single brand-blue accent, pill primary CTAs,
Inter with ss03 stylistic set enabled site-wide.
What changed:
- src/renderer/styles/tokens.css — design tokens: surface ladder, single
accent (#157bf3), pill radius, Inter
w/ font-feature-settings ss03
- src/renderer/styles/components.css — .btn / .input / .card / .badge primitives
- src/renderer/styles/layout.css — 3-pane shell (sidebar / main / right rail)
- src/renderer/App.tsx — full rewrite: 3-pane shell with
Harnesses / Provider keys / Gateway /
Watchtower surfaces
- src/renderer/index.html — Inter via rsms.me
- src/renderer/main.tsx — load the new styles
Surfaces:
1. Harnesses — installed-state rows with right-rail inspector
2. Provider keys — New Item catalogue modal (1Password item-catalogue pattern)
3. Gateway — searchable list with placeholder warnings
4. Watchtower — health grid (6 stat cards) + right-rail recent probes
Power:
- Cmd+K / Ctrl+K → global command palette (Quick Access)
- 13 fuzzy-matchable items: install / probe / apply / navigate / reveal
- 80px-wide kind badges (ACTION, GATEWAY, NAVIGATE, REVEAL) per row
Mocked data for the screenshot — IPC wiring into the existing
vaultList / harnessList / gatewayList / probeRun channels is a
follow-up so the static UI can be reviewed first.
- npm install lucide-react
- src/renderer/App.tsx imports the 13 icons we use:
Zap - brand mark + sidebar Harnesses item + Claude Code row
Search - palette trigger + palette modal
KeyRound - sidebar Provider keys item
Globe - sidebar Gateway item + Gateway row
ShieldCheck - sidebar Watchtower item
ChevronDown - account caret + scope caret
Check - scope check + list row selected check
X - close buttons + danger actions (Uninstall / Delete)
RotateCw - Re-detect / Probe now
Download - Update
Pencil - Edit
Terminal - OpenCode row
SquareTerminal - Codex row
Circle - OpenAI row + OpenAI catalogue tile
- src/renderer/styles/layout.css: removed font-size rules on icons now
they're real SVG elements, added display: inline-flex on every icon
class so they align + accept color via currentColor.
Typecheck + lint + build all green.
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
Single source of truth for "what does Hoist look like and why?" Pairs with docs/adr/ (decisions) and src/renderer/styles/* (tokens). Sections: 1. Design intent — 5 principles + 4-source lineage (1Password Knox, Linear, Raycast, Claude Code /config) 2. Tokens — surface ladder, color, type (Inter w/ ss03), shape, spacing 3. Component catalogue — .btn / .card / .input / .badge / .kbd + Lucide icon mapping table 4. App shell architecture — 3-pane grid diagram + topbar / sidebar / main / detail rail sections 5. Surfaces — Harnesses, Provider keys (+ New Item catalogue), Gateway, Watchtower 6. Command palette — 13 items documented by kind 7. Status indicators — 3-color palette 8. Mocked vs real — table mapping each surface to its IPC todo 9. Adding to this design — how to add provider / surface / palette command / status color 10. Future directions — auto-lock, .env import, theme picker, multi-window 11. File map — everything relevant grouped 12. PR-review verification checklist — 11 items Nothing in here changes code; it documents PR #22 and the surrounding intent so future contributors can extend consistently.
Based on the design.pen review of the Hoist 1Password / Knox remix:
Tokens (src/renderer/styles/tokens.css):
- Add --surface-recessed (#0f0f12) — deeper than canvas, used for the
icon-only rail backdrop and the terminal code block surface.
- Add --rail-width (56px) and --sidebar-width (232px) — the design
explicitly chose a 56px rail for the Library surface (icon-only nav
with a H vault mark + 5 icons + ?).
- Promote the status palette to 5 colors matching the design's harness
state vocabulary:
installed → ok (green #2da44e)
installing → info (blue #157bf3, reuses accent)
available → accent (cyan #3ec1f3)
deprecated → merged (purple #a371f7)
failed → bad (red #cf222e)
warning → warn (orange #d97a00, unchanged)
Each gets a paired -soft variant for muted backgrounds.
Badges (src/renderer/styles/components.css):
- Switch to filled treatment (the design's installed is a solid green
pill, not an outline). New variants: badge-ok-faded, badge-info-faded,
badge-accent-faded, badge-merged-faded, badge-bad-faded.
- New badge-info, badge-accent, badge-merged cover the 5 harness states.
Docs/design.md:
- New section for the rail + sidebar widths and the 5-status palette.
- New paragraphs summarizing the design's 5 shells, 3 surfaces,
6-component grammar, and 4-card spec.
- Section 5.1 Harness → Library (chosen shell).
- New section Component grammar mapping the design's 6 reusable patterns
to the codebase.
- Section 8 Status indicators now maps the 5 harness states to the new tokens.
- Section 13 verification checklist adds the rule: if the change adds a
new state to the harness lifecycle, add the matching status token plus
badge variant rather than reusing an existing one.
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
1 participant
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.
Remix of Hoist's UI shell, borrowing directly from 1Password 8 (Knox design language). Mocked data only — IPC wiring is a follow-up so the visual redesign can be reviewed before behavior work.
What's in
Design tokens (
styles/tokens.css)#1d1d21canvas →#26262c→#2f2f37→#393943→#43434f#157bf3used surgically (1Password accent)9999pxfor primary CTAs12px, control8px, tile6pxfont-feature-settings: 'calt', 'kern', 'liga', 'ss03'Components (
styles/components.css) —.btn,.input,.card,.badge,.kbd,.icon, plus pill + ghost + danger variants.Layout (
styles/layout.css) — 3-pane grid232px 1fr 320pxwith breakpoints for narrower viewports.Surfaces
Anthropic / OpenAI / Azure / Vertex / Bedrock / Customwith monospace descriptor of eachCommand palette (
Cmd+K/Ctrl+K) — 13 fuzzy-matchable items, 4 categories (ACTION / GATEWAY / NAVIGATE / REVEAL), 80px kind badge on the left, hint on the right, footer with↑↓ ↵ eschints. Equivalent of 1Password's Ctrl+Shift+Space Quick Access.What's not (yet)
vaultList / harnessList / gatewayList / probeRunchannelsVertex(project + region),Bedrock(profile + region),Azure(endpoint + deployment + key) — currently the catalogue just picks a kindThese are the obvious next pass once the visual baseline is approved.
Verification
npm run typecheck✓npm run lint✓npm run catalog:check✓npm run test:extractor✓ (10/10 URL cases)npm run build✓ (215 KB renderer JS, 16 KB CSS — gzipped 65 KB / 3.3 KB)