feat: Implement The Commuter demo screens #31
Merged
Conversation
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
Implement 4 new screens for "The Commuter" demo showcasing async-first
workflows with transparent session mobility. This implementation includes:
**Screens Implemented:**
- ACP Inbox (app/(tabs)/inbox.tsx) - Homescreen with summary stats, stuck
agent banner, decision queue card, overnight results, and forecast
- Decision Queue (app/decisions/index.tsx) - List of pending decisions
- Review Flow (app/decisions/[id].tsx) - 3-step review process with soft
gates, accordion tracking, quick response chips
- Notification History (app/notifications/history.tsx) - Date-grouped
notifications with restore functionality
**Components Created:**
- Inbox: InboxHeader, StuckAgentBanner, DecisionQueueCard,
OvernightResultsCard, ForecastCard
- Decisions: DecisionCard
- UI: AgentAvatar, NotificationStatusBadge
**Types & Mock Data:**
- types/inbox.ts: InboxSummary, StuckAgent, OvernightResult, Forecast,
Notification, AgentName, AGENT_COLORS
- types/decisions.ts: PendingDecision, DecisionDetails, AccordionSection,
ReviewFlow
- utils/mockInboxData.ts: Complete mock data for all 4 screens with
easter egg (RFE #67)
**Navigation:**
- Added Inbox tab to main navigation
- Created decisions stack navigation
- All screens support pull-to-refresh
**Features:**
- No one-click approvals (enforced via "Start Review" flow)
- 3-step review process with soft gate (must view all sections)
- Quick response chips ("Looks good", "Needs discussion", "Try different")
- Notification restore functionality (DISMISSED → RESTORED)
- Agent-colored avatars (Parker=blue, Archie=purple, Taylor=green,
Phoenix=orange, Morgan=red)
- Responsive to light/dark theme
Implements: #28
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
jeremyeder
force-pushed
the
001-commuter-demo-screens
branch
from
f11fd26 to
fc3b099
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Summary
Implements 4 new screens for "The Commuter" demo showcasing async-first workflows with transparent session mobility for stakeholder presentations and conference demos.
Implements #28
Screens Implemented
1. ACP Inbox - Priority P0
✅ Fixed header with personalized greeting and 3 summary stats
✅ Scrollable cards: Stuck Agent Banner, Decision Queue, Overnight Results, Forecast
✅ Pull-to-refresh functionality
✅ Integrated as new tab in navigation
2. Decision Queue - Priority P0
✅ List of all pending decisions with agent-colored avatars
✅ "Start Review" button only (NO one-click approvals)
✅ Navigation to review flow
3. Review Flow - Priority P0
✅ 3-step process: Summary → Key Sections → Comment + Complete
✅ Expandable accordion sections with view tracking
✅ Soft gate: Must view all sections before continuing
✅ Quick response chips + freeform comment
4. Notification History - Priority P1
✅ Date-grouped list (Today, Yesterday, Earlier)
✅ Status badges (DISMISSED/REVIEWED/RESTORED)
✅ Restore functionality for dismissed notifications
Key Features
✅ No one-click approvals - Enforced via multi-step review flow
✅ Soft gates - Cannot skip step 2 without viewing all sections
✅ Quick response chips - "Looks good", "Needs discussion", "Try different approach"
✅ Restore capability - Zero-stress recovery from dismissed notifications
✅ Agent-colored avatars - Phoenix=orange, Archie=purple, Parker=blue, Taylor=green
✅ Easter egg - "RFE #67 triage complete" notification from Parker
Implementation Stats
Testing
✅ Type-check passes
✅ Linter passes
✅ Prettier formatting applied
Demo Flow
Total demo time: ~5 minutes
🤖 Generated with Claude Code
Co-Authored-By: Claude noreply@anthropic.com