Phase 1054: Project Details Redesign

.specflow/orchestration-state.json

@@ -5,7 +5,7 @@
     "name": "specflow",
     "path": "/Users/ppatterson/dev/specflow"
   },
-  "last_updated": "2026-01-20T04:25:45.064Z",
+  "last_updated": "2026-01-20T06:34:58.277Z",
   "orchestration": {
     "phase": {
       "number": null,
@@ -281,6 +281,15 @@
         "completed_at": "2026-01-20T04:25:45.063Z",
         "tasks_completed": 0,
         "tasks_total": 0
+      },
+      {
+        "type": "phase_completed",
+        "phase_number": "1054",
+        "phase_name": "Project Details Redesign",
+        "branch": "1054-project-details-redesign",
+        "completed_at": "2026-01-20T06:34:58.276Z",
+        "tasks_completed": 0,
+        "tasks_total": 0
       }
     ]
   }

.specify/archive/1054-project-details-redesign/checklists/implementation.md

@@ -0,0 +1,91 @@
+# Implementation Checklist: Comprehensive Dashboard UI Redesign
+
+**Purpose**: Guide implementation quality and ensure requirements are correctly addressed
+**Created**: 2026-01-19
+**Feature**: [spec.md](../spec.md)
+
+## Design System Foundation
+
+- [ ] I-001 Tailwind color palette matches mockup exactly (surface-50 through surface-500, accent, success, warning, danger)
+- [ ] I-002 All animation keyframes are defined (glow-pulse, slide-up, beam, float) with correct timing
+- [ ] I-003 StatusPill component supports all 4 states with correct colors and glow effects
+- [ ] I-004 GlassCard uses backdrop-filter with webkit prefix for Safari support
+- [ ] I-005 GridBackground pattern matches mockup (32px grid, subtle indigo color)
+- [ ] I-006 FloatingOrbs use absolute positioning with z-index 0 to stay behind content
+
+## Layout Structure
+
+- [ ] I-007 Icon sidebar is exactly 64px wide (w-16)
+- [ ] I-008 Header is exactly 56px tall (h-14)
+- [ ] I-009 Context drawer is 288px wide (w-72) when open
+- [ ] I-010 Sidebar nav items have tooltip with label AND keyboard shortcut
+- [ ] I-011 Active nav item shows left pip indicator (4px wide, accent color)
+- [ ] I-012 Session nav item shows pulsing green dot when workflow running
+- [ ] I-013 Session nav item shows pulsing amber dot when workflow waiting
+- [ ] I-014 Header status pill is centered using absolute positioning
+- [ ] I-015 Status pill timer counts up in MM:SS format
+
+## Views Implementation
+
+- [ ] I-016 Dashboard welcome view only shows when activeView='dashboard' AND status='idle'
+- [ ] I-017 Primary action card shows current task from project context
+- [ ] I-018 Secondary action buttons trigger correct workflow skills (implement, orchestrate, design, verify)
+- [ ] I-019 Session console uses existing use-session-messages hook for data
+- [ ] I-020 Session messages show timestamp in HH:MM:SS format
+- [ ] I-021 Agent attribution uses @name format with accent color
+- [ ] I-022 Reasoning badge is accent/indigo colored
+- [ ] I-023 Action badge is green/success colored
+- [ ] I-024 Tool call blocks have syntax highlighting (use existing code styling)
+- [ ] I-025 Tasks kanban has exactly 2 columns (To Do, Done) - no In Progress
+- [ ] I-026 Completed tasks show strikethrough text and check icon
+
+## Input & Notifications
+
+- [ ] I-027 OmniBox shows different placeholder for each state (idle=Ready, running=Live, waiting=Waiting, failed=Failed)
+- [ ] I-028 OmniBox gradient glow appears on focus/hover
+- [ ] I-029 OmniBox state badge matches current workflow status
+- [ ] I-030 Decision toast positions at bottom-center (fixed positioning)
+- [ ] I-031 Decision toast has animated beam progress indicator
+- [ ] I-032 Decision toast option buttons are in 2-column grid
+- [ ] I-033 Failed toast shows error message in code block styling
+- [ ] I-034 Failed toast Retry button restarts workflow
+
+## History & Context
+
+- [ ] I-035 History timeline shows phases in chronological order (newest first)
+- [ ] I-036 Selected phase updates detail panel on right
+- [ ] I-037 Phase detail shows summary, sessions list, and artifact links
+- [ ] I-038 Context drawer has 2 tabs: Context and Activity
+- [ ] I-039 Context tab shows current task with progress bar
+- [ ] I-040 Touched files show file path and +/- line counts
+- [ ] I-041 Phase progress stepper has 4 steps: Discovery, Design, Implement, Verify
+
+## Project List
+
+- [ ] I-042 Project cards use GlassCard component
+- [ ] I-043 Project cards show status pill matching project state
+- [ ] I-044 Project list page uses same layout shell as project details
+- [ ] I-045 Visual styling is consistent between list and details pages
+
+## Keyboard Shortcuts
+
+- [ ] I-046 ⌘K focuses omni-box from any view
+- [ ] I-047 ⌘1 navigates to Dashboard view
+- [ ] I-048 ⌘2 navigates to Session view
+- [ ] I-049 ⌘3 navigates to Tasks view
+- [ ] I-050 ⌘4 navigates to History view
+- [ ] I-051 Keyboard shortcuts work with Ctrl as well as Cmd (Windows/Linux)
+
+## Data Integration
+
+- [ ] I-052 Workflow status comes from use-workflow-execution hook
+- [ ] I-053 Session messages come from use-session-messages hook
+- [ ] I-054 Tasks data comes from ConnectionContext (tasks Map)
+- [ ] I-055 Project data comes from ConnectionContext (registry, states)
+- [ ] I-056 Answer submission uses existing workflow answer API
+
+## Notes
+
+- Check items off as completed: `[x]`
+- Reference mockup at `mockups/project-details-redesign/index-v3.html` for visual verification
+- Use browser dev tools to verify exact measurements and colors

.specify/archive/1054-project-details-redesign/checklists/verification.md

@@ -0,0 +1,159 @@
+# Verification Checklist: Comprehensive Dashboard UI Redesign
+
+**Purpose**: Post-implementation verification and user acceptance testing
+**Created**: 2026-01-19
+**Feature**: [spec.md](../spec.md)
+
+## User Story Verification
+
+### US1 - Design System Foundation
+
+- [ ] V-001 Tailwind colors render correctly (test by inspecting computed styles)
+- [ ] V-002 Animations run smoothly at 60fps (no jank or stuttering)
+- [ ] V-003 StatusPill component displays all 4 states correctly
+
+### US2 - Icon Sidebar Navigation
+
+- [ ] V-004 All 4 navigation icons (Dashboard, Session, Tasks, History) are visible
+- [ ] V-005 Clicking each icon switches to the corresponding view
+- [ ] V-006 Tooltips appear on hover showing label and keyboard shortcut
+- [ ] V-007 Active icon has white text, background, and left pip indicator
+- [ ] V-008 Inactive icons are zinc/gray colored
+- [ ] V-009 Live indicator (green dot) appears on Session icon when workflow running
+- [ ] V-010 Warning indicator (amber dot) appears on Session icon when workflow waiting
+
+### US3 - Header with Status Pill
+
+- [ ] V-011 Status pill is centered in header
+- [ ] V-012 "Ready" state shows gray styling, no timer
+- [ ] V-013 "Running" state shows green glow, pulsing dot, and timer counting up
+- [ ] V-014 "Input Needed" state shows amber glow, pulsing dot, and timer
+- [ ] V-015 "Failed" state shows red glow, static dot, no timer
+
+### US4 - Dashboard Welcome View
+
+- [ ] V-016 Dashboard view shows when idle (no active workflow)
+- [ ] V-017 "Ready to build?" greeting is displayed
+- [ ] V-018 Current phase number and completion percentage shown
+- [ ] V-019 Primary action card (Resume Implementation) is clickable
+- [ ] V-020 Secondary action buttons (Orchestrate, Design, Verify) are clickable
+- [ ] V-021 Stats row shows correct Done/Pending/Progress numbers
+
+### US5 - Session Console View
+
+- [ ] V-022 Session view displays when Session icon clicked
+- [ ] V-023 Messages show timestamps, agent names, and badges
+- [ ] V-024 Reasoning messages have indigo "reasoning" badge
+- [ ] V-025 Action messages have green "action" badge
+- [ ] V-026 Tool calls display as syntax-highlighted code blocks
+- [ ] V-027 Typing indicator shows when workflow is processing
+- [ ] V-028 Empty state shows when no workflow running with "Start Workflow" CTA
+
+### US6 - Omni-Box Input
+
+- [ ] V-029 Omni-box is visible at bottom of Session view
+- [ ] V-030 State badge matches current workflow status
+- [ ] V-031 Placeholder text changes based on state
+- [ ] V-032 Gradient glow appears when input is focused
+- [ ] V-033 Pressing Enter sends message to workflow
+- [ ] V-034 ⌘K focuses the omni-box from anywhere
+
+### US7 - Decision Toast
+
+- [ ] V-035 Toast appears when workflow enters "waiting_for_input" state
+- [ ] V-036 Toast is positioned at bottom-center of screen
+- [ ] V-037 Animated beam progress indicator is visible
+- [ ] V-038 Question text is displayed
+- [ ] V-039 Option buttons are arranged in 2 columns
+- [ ] V-040 Clicking an option submits answer and dismisses toast
+- [ ] V-041 "Provide custom instructions" expands for text input
+
+### US8 - Failed Toast
+
+- [ ] V-042 Toast appears when workflow status is "failed"
+- [ ] V-043 Toast has red theme with error icon
+- [ ] V-044 Error message is displayed in code block
+- [ ] V-045 Dismiss button hides toast and sets status to idle
+- [ ] V-046 Retry button restarts the workflow
+
+### US9 - Tasks Kanban View
+
+- [ ] V-047 Tasks view shows 2 columns: "To Do" and "Done"
+- [ ] V-048 Progress bar shows in header (X of Y complete)
+- [ ] V-049 Task cards show ID, priority badge (if applicable), description
+- [ ] V-050 Completed tasks show strikethrough text and check icon
+- [ ] V-051 Column counts are correct
+
+### US10 - History Timeline View
+
+- [ ] V-052 History view shows timeline on left, detail panel on right
+- [ ] V-053 Phases are listed in timeline with number and name
+- [ ] V-054 Clicking a phase selects it and updates detail panel
+- [ ] V-055 Detail panel shows summary text
+- [ ] V-056 Detail panel shows sessions list with date, skill, cost
+- [ ] V-057 Detail panel shows artifact links (spec.md, plan.md, etc.)
+
+### US11 - Context Drawer
+
+- [ ] V-058 Context button in header toggles drawer open/closed
+- [ ] V-059 Drawer has two tabs: Context and Activity
+- [ ] V-060 Context tab shows current task card with progress
+- [ ] V-061 Context tab shows touched files with +/- line counts
+- [ ] V-062 Context tab shows phase progress stepper (4 steps)
+- [ ] V-063 Activity tab shows recent activity with colored dots
+
+### US12 - Project List Redesign
+
+- [ ] V-064 Project list page uses icon sidebar
+- [ ] V-065 Project cards use glass morphism styling
+- [ ] V-066 Status indicators on cards match new design
+- [ ] V-067 Visual consistency with project details page
+
+### US13 - Visual Polish
+
+- [ ] V-068 Grid background pattern is visible on all pages
+- [ ] V-069 Floating orbs are visible and animating slowly
+- [ ] V-070 View transitions are animated (fade/slide)
+- [ ] V-071 Glass effects (backdrop-blur) work correctly
+- [ ] V-072 Custom scrollbars are styled
+
+## UI Design Verification
+
+- [ ] V-UI1 UI implementation matches ui-design.md mockups
+- [ ] V-UI2 All components from Component Inventory are implemented
+- [ ] V-UI3 All interactions from Interactions table work as specified
+- [ ] V-UI4 Design constraints from ui-design.md are respected
+- [ ] V-UI5 Color palette matches mockup exactly
+
+## Keyboard Shortcuts
+
+- [ ] V-073 ⌘K focuses omni-box from any view
+- [ ] V-074 ⌘1 navigates to Dashboard
+- [ ] V-075 ⌘2 navigates to Session
+- [ ] V-076 ⌘3 navigates to Tasks
+- [ ] V-077 ⌘4 navigates to History
+- [ ] V-078 Shortcuts work in Safari, Chrome, and Firefox
+
+## Regression Testing
+
+- [ ] V-079 Starting a workflow still works (via Dashboard or existing mechanisms)
+- [ ] V-080 Cancelling a workflow still works
+- [ ] V-081 Answering questions via toast or omni-box works
+- [ ] V-082 Real-time message updates in Session view work
+- [ ] V-083 Task completion updates in Tasks view work
+- [ ] V-084 No console errors during normal operation
+- [ ] V-085 Page loads without hydration errors
+
+## Performance
+
+- [ ] V-086 Initial page load is under 3 seconds
+- [ ] V-087 View transitions feel instant (<300ms)
+- [ ] V-088 Animations run at 60fps (no dropped frames)
+- [ ] V-089 No memory leaks during extended use
+
+## Notes
+
+- Check items off as completed: `[x]`
+- Test in both Chrome and Safari
+- Use mockup as reference: `mockups/project-details-redesign/index-v3.html`
+- Report any discrepancies with expected behavior