add 4 more screens for a demo

<html><head></head><body><h1>GitHub Issue: The Commuter Demo Screens</h1>
<h2>Issue Title</h2>
<p>feat: Implement "The Commuter" demo screens (ACP Inbox, Decision Queue, Review Flow, Notification History)</p>
<h2>Labels</h2>
<ul>
<li>enhancement</li>
<li>demo</li>
<li>priority: high</li>
</ul>
<h2>Milestone</h2>
<p>The Commuter Demo</p>
<hr>
<h2>Issue Body</h2>
<h3>Summary</h3>
<p>Implement 4 new screens to support "The Commuter" demo, which showcases async-first workflows with transparent session mobility. This demo will be used for stakeholder presentations and conference demos.</p>
<p><strong>Demo Script:</strong> See <code>docs/the-commuter-demo-script.md</code><br>
<strong>Component Specs:</strong> See <code>docs/the-commuter-component-specs.md</code></p>
<h3>Screens to Build</h3>

Screen | Route | Priority
-- | -- | --
ACP Inbox | app/(tabs)/inbox.tsx | P0
Decision Queue | app/decisions/index.tsx | P0
Start Review Flow | app/decisions/[id].tsx | P0
Notification History | app/notifications/history.tsx | P1


<h3>Design Principles</h3>
<ul>
<li><strong>Hard to make a mistake, easy to recover</strong> — Dismissed notifications can be restored. No data loss.</li>
<li><strong>No one-click approvals</strong> — Use "Start Review" flows with summary, key sections, and comment steps.</li>
<li><strong>Mobile reinforcement learning</strong> — Capture user preferences when agents go sideways.</li>
</ul>
<h3>Key Features</h3>
<p><strong>ACP Inbox (Homescreen)</strong></p>
<ul>
<li>Fixed header with greeting and 3 summary stats (done, stuck, decisions)</li>
<li>Scrollable card stack: stuck agents, decision queue, overnight results, forecast</li>
<li>Option D layout (hybrid fixed header + scrollable body)</li>
</ul>
<p><strong>Decision Queue</strong></p>
<ul>
<li>List of pending decisions from agents</li>
<li>Each card shows agent name, decision title, context</li>
<li>"Start Review" button (no approve/reject here)</li>
</ul>
<p><strong>Start Review Flow</strong></p>
<ul>
<li>3-step process: Summary → Key Sections → Comment + Complete</li>
<li>Expandable accordion sections with view tracking</li>
<li>Quick response chips for common replies</li>
<li>5-second undo toast after completion</li>
</ul>
<p><strong>Notification History</strong></p>
<ul>
<li>Grouped by date (Today, Yesterday, Earlier)</li>
<li>Status badges: DISMISSED, REVIEWED, RESTORED</li>
<li>"Restore" action for dismissed items</li>
<li>Zero-stress recovery from accidental dismisses</li>
</ul>
<h3>Acceptance Criteria</h3>
<ul>
<li>[ ] ACP Inbox displays greeting, summary stats, and 4 card sections</li>
<li>[ ] Stuck agent banner appears when agents need guidance</li>
<li>[ ] Decision Queue lists all pending decisions with "Start Review" CTA</li>
<li>[ ] Start Review flow enforces 3-step process with section view tracking</li>
<li>[ ] Notification History shows full history with restore functionality</li>
<li>[ ] Navigation integrates with existing tab bar and stack</li>
<li>[ ] All screens work with mock data (no backend changes required)</li>
<li>[ ] Pull to refresh works on applicable screens</li>
</ul>
<h3>Technical Notes</h3>
<ul>
<li>Use existing theme system and component patterns</li>
<li>Add mock data in <code>utils/mockInboxData.ts</code></li>
<li>Extend existing types in <code>types/</code> directory</li>
<li>Follow established component structure in <code>components/</code></li>
</ul>
<h3>Estimated Effort</h3>
<p>2-3 days with Claude Code</p>
<h3>Resources</h3>
<ul>
<li><a href="https://claude.ai/chat/the-commuter-component-specs.md">Component Specs</a></li>
<li><a href="https://claude.ai/chat/the-commuter-demo-script.md">Demo Script</a></li>
</ul>
<hr>
<h1>Cold-Startable Prompt</h1>
<p>Copy everything below this line into a new Claude Code session to implement this feature.</p>
<hr>
<h2>COLD START PROMPT</h2>
<pre><code># The Commuter Demo — Implementation Task

## Context

You are implementing 4 new screens for the ACP Mobile app to support "The Commuter" demo. This demo showcases async-first workflows where:

- Engineers review agent work during their commute
- Mobile reinforcement learning captures preferences when agents go sideways
- Notifications can be dismissed and restored with zero stress
- "Start Review" flows replace one-click approvals to prevent rubber-stamping

## Repository

https://github.com/ambient-code/mobile

Clone it and review the existing structure before starting.

## What Already Exists

- React Native + Expo app running on iPhone 14
- Session dashboard with real-time SSE updates
- Session cards, status badges, progress components
- Theme system (light/dark/system)
- TanStack Query for data fetching
- Mock data utilities

## What You're Building

### 1. ACP Inbox (`app/(tabs)/inbox.tsx`)

The new homescreen. Layout uses "Option D — Hybrid":

- Fixed header: Greeting + 3 summary stats (done, stuck, decisions)
- Scrollable body with cards:
  - Stuck Agent Banner (amber warning, "Help" button)
  - Decision Queue Card (count, time estimate, "Start Reviews" button)
  - Overnight Results Card (3 items max, status icons)
  - Forecast Card (deep work window, next batch time)

Components to create:
- `components/inbox/InboxHeader.tsx`
- `components/inbox/StuckAgentBanner.tsx`
- `components/inbox/DecisionQueueCard.tsx`
- `components/inbox/OvernightResultsCard.tsx`
- `components/inbox/ForecastCard.tsx`

### 2. Decision Queue (`app/decisions/index.tsx`)

List of pending decisions. Each decision is a card with:
- Agent name and avatar
- Decision title and context
- "Start Review" button

Components:
- `components/decisions/DecisionCard.tsx`
- `components/decisions/DecisionQueueHeader.tsx`

### 3. Start Review Flow (`app/decisions/[id].tsx`)

Multi-step review process. NOT one-click approval.

Step 1: Summary
- Show question, context, agent's analysis and recommendation

Step 2: Key Sections
- Expandable accordion sections
- Track which sections have been viewed
- Show checkmark on viewed sections
- Soft gate: "Expand all sections to continue"

Step 3: Comment + Complete
- Text input for freeform comment
- Quick response chips: "Looks good", "Needs discussion", "Try different approach"
- "Complete Review" button
- Show 5-second undo toast after completion

Components:
- `components/decisions/ReviewStepper.tsx`
- `components/decisions/ReviewSummary.tsx`
- `components/decisions/ReviewSections.tsx`
- `components/decisions/ReviewComment.tsx`

### 4. Notification History (`app/notifications/history.tsx`)

Full history of all notifications with restore capability.

- Group by date (Today, Yesterday, Earlier)
- Status badges: DISMISSED (amber), REVIEWED (green ✓), RESTORED (blue)
- "Restore" button on dismissed items
- "View Details" navigates to source

Components:
- `components/notifications/NotificationHistoryItem.tsx`
- `components/notifications/NotificationHistoryList.tsx`

## Shared Components

Create or update:
- `components/ui/AgentAvatar.tsx` — Colored avatar per agent (Parker=blue, Archie=purple, Taylor=green, Phoenix=orange, Morgan=red)
- Update `components/ui/StatusBadge.tsx` if needed for new statuses

## Mock Data

Create `utils/mockInboxData.ts` with:

```typescript
export const mockInboxData = {
  user: { name: 'Maya' },
  summary: {
    completedOvernight: 3,
    stuckAgents: 1,
    pendingDecisions: 4,
  },
  stuckAgents: [
    {
      id: 'stuck-1',
      name: 'Archie',
      task: 'Schema design',
      sessionId: 'session-archie-1',
      stuckSince: new Date('2025-12-07T03:42:00'),
    },
  ],
  overnightResults: [
    { agentName: 'Taylor', task: 'User preference caching', status: 'completed' },
    { agentName: 'Phoenix', task: 'Test suite for auth module', status: 'completed' },
    { agentName: 'Archie', task: 'Schema for multi-tenant config', status: 'stuck' },
  ],
  pendingDecisions: [
    { id: 'd1', agentName: 'Phoenix', title: 'Which test framework?', context: 'Payment module', estimatedMinutes: 3 },
    { id: 'd2', agentName: 'Archie', title: 'Confirm schema approach?', context: 'Multi-tenant config', estimatedMinutes: 4 },
    { id: 'd3', agentName: 'Parker', title: 'Priority call needed', context: 'Feature A vs B', estimatedMinutes: 3 },
    { id: 'd4', agentName: 'Taylor', title: 'Dependency update?', context: 'lodash 4.17.21', estimatedMinutes: 2 },
  ],
  forecast: {
    deepWorkWindow: { start: new Date('2025-12-07T10:30:00'), end: new Date('2025-12-07T13:00:00') },
    nextReviewBatch: new Date('2025-12-07T14:15:00'),
    agentHoursInProgress: 14,
  },
};

export const mockNotificationHistory = [
  { id: 'n1', agentName: 'Parker', title: 'RFE #67 triage complete', createdAt: new Date('2025-12-07T12:52:00'), status: 'dismissed' },
  { id: 'n2', agentName: 'Phoenix', title: 'Test suite ready', createdAt: new Date('2025-12-07T11:47:00'), status: 'reviewed' },
  { id: 'n3', agentName: 'Archie', title: 'Schema retry successful', createdAt: new Date('2025-12-07T10:15:00'), status: 'reviewed' },
];
</code></pre>
<h2>Types</h2>
<p>Create <code>types/inbox.ts</code> and <code>types/decisions.ts</code> with proper TypeScript interfaces for all data structures.</p>
<h2>Navigation</h2>
<p>Update <code>app/(tabs)/_layout.tsx</code> to add Inbox tab.
Create <code>app/decisions/_layout.tsx</code> for decision stack navigation.</p>
<h2>Implementation Order</h2>
<ol>
<li>Types and mock data</li>
<li>Shared components (AgentAvatar)</li>
<li>ACP Inbox screen and components</li>
<li>Notification History screen</li>
<li>Decision Queue screen</li>
<li>Start Review flow</li>
<li>Navigation integration</li>
<li>Polish and edge cases</li>
</ol>
<h2>Design Principles</h2>
<ul>
<li>Use existing theme colors and spacing from <code>constants/</code></li>
<li>Match existing component patterns</li>
<li>Keep it simple — this is for demo, not production</li>
<li>Prioritize visual clarity over feature completeness</li>
</ul>
<h2>Testing</h2>
<p>Run on iPhone 14 simulator or device. Verify:</p>
<ul>
<li>All screens render without errors</li>
<li>Navigation works between screens</li>
<li>Pull to refresh triggers (even if data doesn't change)</li>
<li>"Restore" updates notification status in history</li>
</ul>
<h2>Easter Egg</h2>
<p>Include "PR #67" or "RFE #67" in mock data (team meme reference).</p>
<h2>Questions?</h2>
<p>If unclear on any requirement, make a reasonable decision and document it in a code comment. Prioritize getting screens working over perfection.</p>
<p>Start by reading the existing codebase structure, then implement in order.</p>
<pre><code>
---

## How to Create This Issue

1. Go to https://github.com/ambient-code/mobile/issues/new
2. Copy the issue title and body above
3. Add labels: `enhancement`, `demo`
4. Attach the component specs file if desired
5. Submit

Alternatively, use GitHub CLI:

```bash
gh issue create \
  --repo ambient-code/mobile \
  --title "feat: Implement 'The Commuter' demo screens (ACP Inbox, Decision Queue, Review Flow, Notification History)" \
  --body-file github-issue-body.md \
  --label "enhancement" \
  --label "demo"
</code></pre></body></html># GitHub Issue: The Commuter Demo Screens

## Issue Title
feat: Implement "The Commuter" demo screens (ACP Inbox, Decision Queue, Review Flow, Notification History)

## Labels
- enhancement
- demo
- priority: high

## Milestone
The Commuter Demo

---

## Issue Body

### Summary

Implement 4 new screens to support "The Commuter" demo, which showcases async-first workflows with transparent session mobility. This demo will be used for stakeholder presentations and conference demos.

**Demo Script:** See `docs/the-commuter-demo-script.md`  
**Component Specs:** See `docs/the-commuter-component-specs.md`

### Screens to Build

| Screen | Route | Priority |
|--------|-------|----------|
| ACP Inbox | `app/(tabs)/inbox.tsx` | P0 |
| Decision Queue | `app/decisions/index.tsx` | P0 |
| Start Review Flow | `app/decisions/[id].tsx` | P0 |
| Notification History | `app/notifications/history.tsx` | P1 |

### Design Principles

- **Hard to make a mistake, easy to recover** — Dismissed notifications can be restored. No data loss.
- **No one-click approvals** — Use "Start Review" flows with summary, key sections, and comment steps.
- **Mobile reinforcement learning** — Capture user preferences when agents go sideways.

### Key Features

**ACP Inbox (Homescreen)**
- Fixed header with greeting and 3 summary stats (done, stuck, decisions)
- Scrollable card stack: stuck agents, decision queue, overnight results, forecast
- Option D layout (hybrid fixed header + scrollable body)

**Decision Queue**
- List of pending decisions from agents
- Each card shows agent name, decision title, context
- "Start Review" button (no approve/reject here)

**Start Review Flow**
- 3-step process: Summary → Key Sections → Comment + Complete
- Expandable accordion sections with view tracking
- Quick response chips for common replies
- 5-second undo toast after completion

**Notification History**
- Grouped by date (Today, Yesterday, Earlier)
- Status badges: DISMISSED, REVIEWED, RESTORED
- "Restore" action for dismissed items
- Zero-stress recovery from accidental dismisses

### Acceptance Criteria

- [ ] ACP Inbox displays greeting, summary stats, and 4 card sections
- [ ] Stuck agent banner appears when agents need guidance
- [ ] Decision Queue lists all pending decisions with "Start Review" CTA
- [ ] Start Review flow enforces 3-step process with section view tracking
- [ ] Notification History shows full history with restore functionality
- [ ] Navigation integrates with existing tab bar and stack
- [ ] All screens work with mock data (no backend changes required)
- [ ] Pull to refresh works on applicable screens

### Technical Notes

- Use existing theme system and component patterns
- Add mock data in `utils/mockInboxData.ts`
- Extend existing types in `types/` directory
- Follow established component structure in `components/`

### Estimated Effort

2-3 days with Claude Code

### Resources

- [[Component Specs](https://claude.ai/chat/the-commuter-component-specs.md)](./the-commuter-component-specs.md)
- [[Demo Script](https://claude.ai/chat/the-commuter-demo-script.md)](./the-commuter-demo-script.md)

---

# Cold-Startable Prompt

Copy everything below this line into a new Claude Code session to implement this feature.

---

## COLD START PROMPT

```
# The Commuter Demo — Implementation Task

## Context

You are implementing 4 new screens for the ACP Mobile app to support "The Commuter" demo. This demo showcases async-first workflows where:

- Engineers review agent work during their commute
- Mobile reinforcement learning captures preferences when agents go sideways
- Notifications can be dismissed and restored with zero stress
- "Start Review" flows replace one-click approvals to prevent rubber-stamping

## Repository

https://github.com/ambient-code/mobile

Clone it and review the existing structure before starting.

## What Already Exists

- React Native + Expo app running on iPhone 14
- Session dashboard with real-time SSE updates
- Session cards, status badges, progress components
- Theme system (light/dark/system)
- TanStack Query for data fetching
- Mock data utilities

## What You're Building

### 1. ACP Inbox (`app/(tabs)/inbox.tsx`)

The new homescreen. Layout uses "Option D — Hybrid":

- Fixed header: Greeting + 3 summary stats (done, stuck, decisions)
- Scrollable body with cards:
  - Stuck Agent Banner (amber warning, "Help" button)
  - Decision Queue Card (count, time estimate, "Start Reviews" button)
  - Overnight Results Card (3 items max, status icons)
  - Forecast Card (deep work window, next batch time)

Components to create:
- `components/inbox/InboxHeader.tsx`
- `components/inbox/StuckAgentBanner.tsx`
- `components/inbox/DecisionQueueCard.tsx`
- `components/inbox/OvernightResultsCard.tsx`
- `components/inbox/ForecastCard.tsx`

### 2. Decision Queue (`app/decisions/index.tsx`)

List of pending decisions. Each decision is a card with:
- Agent name and avatar
- Decision title and context
- "Start Review" button

Components:
- `components/decisions/DecisionCard.tsx`
- `components/decisions/DecisionQueueHeader.tsx`

### 3. Start Review Flow (`app/decisions/[id].tsx`)

Multi-step review process. NOT one-click approval.

Step 1: Summary
- Show question, context, agent's analysis and recommendation

Step 2: Key Sections
- Expandable accordion sections
- Track which sections have been viewed
- Show checkmark on viewed sections
- Soft gate: "Expand all sections to continue"

Step 3: Comment + Complete
- Text input for freeform comment
- Quick response chips: "Looks good", "Needs discussion", "Try different approach"
- "Complete Review" button
- Show 5-second undo toast after completion

Components:
- `components/decisions/ReviewStepper.tsx`
- `components/decisions/ReviewSummary.tsx`
- `components/decisions/ReviewSections.tsx`
- `components/decisions/ReviewComment.tsx`

### 4. Notification History (`app/notifications/history.tsx`)

Full history of all notifications with restore capability.

- Group by date (Today, Yesterday, Earlier)
- Status badges: DISMISSED (amber), REVIEWED (green ✓), RESTORED (blue)
- "Restore" button on dismissed items
- "View Details" navigates to source

Components:
- `components/notifications/NotificationHistoryItem.tsx`
- `components/notifications/NotificationHistoryList.tsx`

## Shared Components

Create or update:
- `components/ui/AgentAvatar.tsx` — Colored avatar per agent (Parker=blue, Archie=purple, Taylor=green, Phoenix=orange, Morgan=red)
- Update `components/ui/StatusBadge.tsx` if needed for new statuses

## Mock Data

Create `utils/mockInboxData.ts` with:

```typescript
export const mockInboxData = {
  user: { name: 'Maya' },
  summary: {
    completedOvernight: 3,
    stuckAgents: 1,
    pendingDecisions: 4,
  },
  stuckAgents: [
    {
      id: 'stuck-1',
      name: 'Archie',
      task: 'Schema design',
      sessionId: 'session-archie-1',
      stuckSince: new Date('2025-12-07T03:42:00'),
    },
  ],
  overnightResults: [
    { agentName: 'Taylor', task: 'User preference caching', status: 'completed' },
    { agentName: 'Phoenix', task: 'Test suite for auth module', status: 'completed' },
    { agentName: 'Archie', task: 'Schema for multi-tenant config', status: 'stuck' },
  ],
  pendingDecisions: [
    { id: 'd1', agentName: 'Phoenix', title: 'Which test framework?', context: 'Payment module', estimatedMinutes: 3 },
    { id: 'd2', agentName: 'Archie', title: 'Confirm schema approach?', context: 'Multi-tenant config', estimatedMinutes: 4 },
    { id: 'd3', agentName: 'Parker', title: 'Priority call needed', context: 'Feature A vs B', estimatedMinutes: 3 },
    { id: 'd4', agentName: 'Taylor', title: 'Dependency update?', context: 'lodash 4.17.21', estimatedMinutes: 2 },
  ],
  forecast: {
    deepWorkWindow: { start: new Date('2025-12-07T10:30:00'), end: new Date('2025-12-07T13:00:00') },
    nextReviewBatch: new Date('2025-12-07T14:15:00'),
    agentHoursInProgress: 14,
  },
};

export const mockNotificationHistory = [
  { id: 'n1', agentName: 'Parker', title: 'RFE #67 triage complete', createdAt: new Date('2025-12-07T12:52:00'), status: 'dismissed' },
  { id: 'n2', agentName: 'Phoenix', title: 'Test suite ready', createdAt: new Date('2025-12-07T11:47:00'), status: 'reviewed' },
  { id: 'n3', agentName: 'Archie', title: 'Schema retry successful', createdAt: new Date('2025-12-07T10:15:00'), status: 'reviewed' },
];
```

## Types

Create `types/inbox.ts` and `types/decisions.ts` with proper TypeScript interfaces for all data structures.

## Navigation

Update `app/(tabs)/_layout.tsx` to add Inbox tab.
Create `app/decisions/_layout.tsx` for decision stack navigation.

## Implementation Order

1. Types and mock data
2. Shared components (AgentAvatar)
3. ACP Inbox screen and components
4. Notification History screen
5. Decision Queue screen
6. Start Review flow
7. Navigation integration
8. Polish and edge cases

## Design Principles

- Use existing theme colors and spacing from `constants/`
- Match existing component patterns
- Keep it simple — this is for demo, not production
- Prioritize visual clarity over feature completeness

## Testing

Run on iPhone 14 simulator or device. Verify:
- All screens render without errors
- Navigation works between screens
- Pull to refresh triggers (even if data doesn't change)
- "Restore" updates notification status in history

## Easter Egg

Include "PR #67" or "RFE #67" in mock data (team meme reference).

## Questions?

If unclear on any requirement, make a reasonable decision and document it in a code comment. Prioritize getting screens working over perfection.

Start by reading the existing codebase structure, then implement in order.
```

---

## How to Create This Issue

1. Go to https://github.com/ambient-code/mobile/issues/new
2. Copy the issue title and body above
3. Add labels: `enhancement`, `demo`
4. Attach the component specs file if desired
5. Submit

Alternatively, use GitHub CLI:

```bash
gh issue create \
  --repo ambient-code/mobile \
  --title "feat: Implement 'The Commuter' demo screens (ACP Inbox, Decision Queue, Review Flow, Notification History)" \
  --body-file github-issue-body.md \
  --label "enhancement" \
  --label "demo"
```

Screen	Route	Priority
ACP Inbox	app/(tabs)/inbox.tsx	P0
Decision Queue	app/decisions/index.tsx	P0
Start Review Flow	app/decisions/[id].tsx	P0
Notification History	app/notifications/history.tsx	P1

Uh oh!

add 4 more screens for a demo #28

Description

GitHub Issue: The Commuter Demo Screens

Issue Title

Labels

Milestone

Issue Body

Summary

Screens to Build

Design Principles

Key Features

Acceptance Criteria

Technical Notes

Estimated Effort

Resources

Cold-Startable Prompt

COLD START PROMPT

Context

Repository

What Already Exists

What You're Building

1. ACP Inbox (app/(tabs)/inbox.tsx)

2. Decision Queue (app/decisions/index.tsx)

3. Start Review Flow (app/decisions/[id].tsx)

4. Notification History (app/notifications/history.tsx)

Shared Components

Mock Data

The Commuter Demo — Implementation Task

Context

Repository

What Already Exists

What You're Building

1. ACP Inbox (app/(tabs)/inbox.tsx)

2. Decision Queue (app/decisions/index.tsx)

3. Start Review Flow (app/decisions/[id].tsx)

4. Notification History (app/notifications/history.tsx)

Shared Components

Mock Data

Types

Navigation

Implementation Order

Design Principles

Testing

Easter Egg

Questions?

Activity

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

1. ACP Inbox (`app/(tabs)/inbox.tsx`)

2. Decision Queue (`app/decisions/index.tsx`)

3. Start Review Flow (`app/decisions/[id].tsx`)

4. Notification History (`app/notifications/history.tsx`)

1. ACP Inbox (`app/(tabs)/inbox.tsx`)

2. Decision Queue (`app/decisions/index.tsx`)

3. Start Review Flow (`app/decisions/[id].tsx`)

4. Notification History (`app/notifications/history.tsx`)