feat(ui): redesign to match design handoff prototype #9

2026-05-16T14:24:55Z

lerko commented

2026-05-16 14:24:55 +00:00

Summary

Phase 1: Layout + tokens — 192px/400px grid, JetBrains Mono, capture bar to bottom, search in header, tag rail grid + intent section
Phase 2: Card rows — title/preview/affordance badges/tag pills/pin/use count, cards sub-header, pinned/recent sections, flash animation
Phase 3: Peek pane — idle state, stream peek, card peek with container+sections, run/fill/edit modes, toast notifications
Phase 4: Promote modal polish, search wiring, inline edit bugfix

Test plan

All 61 Go tests pass
JS syntax validates
All API endpoints verified
Search filters client-side by text + #tag
Theme toggle, keyboard shortcuts, peek modes all functional

## Summary - **Phase 1**: Layout + tokens — 192px/400px grid, JetBrains Mono, capture bar to bottom, search in header, tag rail grid + intent section - **Phase 2**: Card rows — title/preview/affordance badges/tag pills/pin/use count, cards sub-header, pinned/recent sections, flash animation - **Phase 3**: Peek pane — idle state, stream peek, card peek with container+sections, run/fill/edit modes, toast notifications - **Phase 4**: Promote modal polish, search wiring, inline edit bugfix ## Test plan - [x] All 61 Go tests pass - [x] JS syntax validates - [x] All API endpoints verified - [x] Search filters client-side by text + #tag - [x] Theme toggle, keyboard shortcuts, peek modes all functional

lerko added 5 commits 2026-05-16 14:24:56 +00:00

feat(ui): phase 1 — layout, tokens, header, rail redesign dda8426113

- Switch mono font from Monaspace Neon to JetBrains Mono
- Grid layout 192px | 1fr | 400px (was 180/320)
- Move capture bar from header to bottom of center panel
- Add search input to header center
- Redesign tag rail: grid items with arrow/dot/name/count
- Add intent section (grab/read/fill) in cards view rail
- Add --a-str token, toast component
- Logo 16px 700 weight

feat(ui): phase 2 — card rows, affordance badges, cards sub-header 156ea6ea1c

- Rich card row rendering: title — preview — affordance badges — tags — pin — use count
- Affordance detection (code, fill, steps, decide, link) from entity shape
- Cards sub-header with scope label, count, sort dropdown
- Section labels (★ pinned / recent) in cards view
- Flash animation on copy (--a-str pulse)
- Tag pill styling for card rows
- Progress bar mini-display for checklists in card preview

feat(ui): phase 3 — peek pane redesign with modes 1c95902e2b

- Full peek pane rewrite: idle state, stream peek, card peek
- Idle state shows keyboard shortcuts per view
- Stream peek: eyebrow (glyph + kind + id + timestamp), body, tags, context
- Card peek: card container with eyebrow, title, desc, meta, content sections
- Decision section with choice/rationale/rejected display
- Steps section with run button
- Code section with content display
- Run mode: interactive checklist with progress bar + step toggling
- Fill mode: inline slot editor with tab navigation + copy resolved
- Edit mode: form fields for title/desc/body/tags
- Mode pills (running/filling/editing) with colored badges
- Pin/unpin action via keyboard (p) and button
- Escape exits any active mode
- Keyboard shortcuts: r=run, f=fill, e=edit, p=pin in cards view

feat(ui): phase 4 — promote modal polish, TODO complete f26716a9ee

- Promote modal: colored glyphs, type names, hint descriptions per type
- Show truncated entry body in promote modal subtitle
- Mark all redesign phases complete in TODO.md

fix(ui): broken peek editing + wire up search 6802474595

- Fix startEditBody/startEditField selectors (.detail-body → .peek-body,
  .detail-title → .peek-title) — double-click editing works again
- Wire up search input: client-side filter by body/title/description text
- Search supports #tag inline filters (e.g. "proxy #ops")
- Debounced input (150ms), Escape clears and blurs
- Shows "no matches" when search has no results

lerko merged commit 957265f7b4 into develop

2026-05-16 14:26:28 +00:00

lerko deleted branch feat/ui-redesign

2026-05-16 14:26:28 +00:00

lerko referenced this issue from a commit

2026-05-16 14:26:29 +00:00

Merge pull request 'feat(ui): redesign to match design handoff prototype' (#9) from feat/ui-redesign into develop

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: lerko/nib-v1#9