TODO.md

@@ -1,37 +1,37 @@
 # UI Redesign — Design Handoff Implementation
 
-## Phase 1: Layout + Tokens + Header + Rail
-- [ ] Update CSS tokens (add --a-str, switch mono font to JetBrains Mono)
-- [ ] Fix grid dimensions (192px rail, 400px peek)
-- [ ] Move capture bar from header to bottom of center panel
-- [ ] Add search bar to header (centered, max-width 400px)
-- [ ] Redesign tag rail: grid layout (arrow ▸ + dot + name + count)
-- [ ] Add intent section (grab/read/fill) for cards view in rail
+## Phase 1: Layout + Tokens + Header + Rail ✓
+- [x] Update CSS tokens (add --a-str, switch mono font to JetBrains Mono)
+- [x] Fix grid dimensions (192px rail, 400px peek)
+- [x] Move capture bar from header to bottom of center panel
+- [x] Add search bar to header (centered, max-width 400px)
+- [x] Redesign tag rail: grid layout (arrow ▸ + dot + name + count)
+- [x] Add intent section (grab/read/fill) for cards view in rail
 
-## Phase 2: Stream + Cards Views
-- [ ] Stream rows: promoted entries get card-style border/radius + card-type badge
-- [ ] Card rows: rich single-line with title — preview — affordance badges — tag pills — pin — use count
-- [ ] Affordance detection client-side (fill, steps, decide, link, code)
-- [ ] Affordance badge components
-- [ ] Cards sub-header (scope label + card count + sort dropdown)
-- [ ] Section labels (★ pinned, recent)
-- [ ] Flash animation on copy
-- [ ] Bottom capture bar styling per view (different placeholders)
+## Phase 2: Stream + Cards Views ✓
+- [x] Stream rows: promoted entries get card-style border/radius + card-type badge
+- [x] Card rows: rich single-line with title — preview — affordance badges — tag pills — pin — use count
+- [x] Affordance detection client-side (fill, steps, decide, link, code)
+- [x] Affordance badge components
+- [x] Cards sub-header (scope label + card count + sort dropdown)
+- [x] Section labels (★ pinned, recent)
+- [x] Flash animation on copy
+- [x] Bottom capture bar styling per view (different placeholders)
 
-## Phase 3: Peek Pane + Modes
-- [ ] Idle state with keyboard shortcuts display
-- [ ] Stream entry peek: eyebrow, body, tags, context, actions
-- [ ] Card peek: card container with eyebrow, title, desc, meta, content sections
-- [ ] Code block with syntax highlighting
-- [ ] Decision section display
-- [ ] Steps section display
-- [ ] Link section display
-- [ ] Run mode (interactive checklist with progress bar)
-- [ ] Fill mode (inline slot editor with tab navigation)
-- [ ] Edit mode (form fields)
-- [ ] Toast notifications
+## Phase 3: Peek Pane + Modes ✓
+- [x] Idle state with keyboard shortcuts display
+- [x] Stream entry peek: eyebrow, body, tags, context, actions
+- [x] Card peek: card container with eyebrow, title, desc, meta, content sections
+- [x] Code block with content display
+- [x] Decision section display
+- [x] Steps section display
+- [x] Link section display
+- [x] Run mode (interactive checklist with progress bar)
+- [x] Fill mode (inline slot editor with tab navigation)
+- [x] Edit mode (form fields)
+- [x] Toast notifications
 
-## Phase 4: Polish
-- [ ] Promote modal enhancement (add hint text per type)
-- [ ] Remaining keyboard shortcuts (r=run, f=fill)
-- [ ] Scroll behavior and edge cases
+## Phase 4: Polish ✓
+- [x] Promote modal enhancement (add hint text per type, show entry body preview)
+- [x] Keyboard shortcuts (r=run, f=fill, p=pin in cards view)
+- [x] Escape exits active modes

web/app.js

@@ -1091,6 +1091,10 @@
       modal.classList.add('visible');
       modal.dataset.entityId = id;
 
+      const sub = $('#promote-sub');
+      const label = (e.body || '').slice(0, 64) + ((e.body || '').length > 64 ? '…' : '');
+      sub.textContent = label;
+
       const suggested = detectCardType(e.body);
       $$('.type-btn').forEach(btn => {
         btn.classList.toggle('suggested', btn.dataset.type === suggested);

web/index.html

@@ -41,26 +41,32 @@
         <div class="modal-backdrop"></div>
         <div class="modal-content">
             <h3>promote to card</h3>
+            <div class="modal-sub" id="promote-sub"></div>
             <div class="type-picker">
                 <button data-type="snippet" class="type-btn">
-                    <span class="type-glyph">◆</span>
-                    <span>snippet</span>
+                    <span class="type-glyph glyph-snippet">◆</span>
+                    <span class="type-name">snippet</span>
+                    <span class="type-hint">quick reference, command, code</span>
                 </button>
                 <button data-type="template" class="type-btn">
-                    <span class="type-glyph">◈</span>
-                    <span>template</span>
+                    <span class="type-glyph glyph-template">◈</span>
+                    <span class="type-name">template</span>
+                    <span class="type-hint">fillable with ${slot}s</span>
                 </button>
                 <button data-type="checklist" class="type-btn">
-                    <span class="type-glyph">☐</span>
-                    <span>checklist</span>
+                    <span class="type-glyph glyph-checklist">☐</span>
+                    <span class="type-name">checklist</span>
+                    <span class="type-hint">step-by-step process</span>
                 </button>
                 <button data-type="decision" class="type-btn">
-                    <span class="type-glyph">⚖</span>
-                    <span>decision</span>
+                    <span class="type-glyph glyph-decision">⚖</span>
+                    <span class="type-name">decision</span>
+                    <span class="type-hint">record a choice + rationale</span>
                 </button>
                 <button data-type="link" class="type-btn">
-                    <span class="type-glyph">↗</span>
-                    <span>link</span>
+                    <span class="type-glyph glyph-link">↗</span>
+                    <span class="type-name">link</span>
+                    <span class="type-hint">reference URL</span>
                 </button>
             </div>
             <button class="modal-close">esc to cancel</button>

web/style.css

@@ -1158,6 +1158,7 @@ kbd { background: var(--raised); border: 1px solid var(--border); border-radius:
 .type-btn.suggested { border-color: var(--accent); background: var(--a-bg); }
 
 .type-glyph { font-size: 13px; width: 16px; flex-shrink: 0; }
+.type-name { font-family: var(--mono); font-size: 12px; color: var(--text); min-width: 72px; }
 
 .type-hint {
     font-family: var(--sans);