UX: Make dashboard Quick Actions context-aware based on workspace state

[frankbria]

Problem

QuickActions on the dashboard always shows three fixed buttons: 'View PRD', 'Manage Tasks', 'Review Changes' — regardless of workspace state (no PRD yet, no tasks, no active execution).

Impact

Users see 'Review Changes' when nothing has been executed, and 'Manage Tasks' when no tasks exist. This creates decision paralysis and projects a cluttered, unguided first impression.

Recommendation

Make Quick Actions context-aware:

• No PRD → show 'Create PRD' (primary) + 'Import PRD'
• PRD exists, no tasks → show 'Generate Tasks' (primary) + 'View PRD'
• Tasks READY, no active execution → show 'Execute Tasks' (primary) + 'Manage Tasks'
• Execution complete → show 'View Proof Gates' (primary) + 'Review Changes'

Hide irrelevant actions; highlight the next logical step.

Acceptance Criteria

• Actions update dynamically when workspace state changes
• Irrelevant actions hidden or de-emphasized
• Next logical pipeline action is the primary CTA
• Button text matches state (e.g., 'Create' vs 'View' vs 'Generate')
• Fallback state when status is ambiguous

Affected Components

web-ui/src/components/workspace/QuickActions.tsx, web-ui/src/app/page.tsx

[coderabbitai]

🔗 Related PRs

#169 - feat(dashboard): Add dedicated tabs for Tasks, Quality Gates, and Metrics [merged]
#176 - feat: Create project selection home page [merged]
#213 - feat(planning): Add Generate Task Breakdown button to DiscoveryProgress [merged]
#215 - feat(dashboard): Add phase-aware task view integration (#016-6) [merged]
#389 - [Phase 3] Task Board: bulk stop, reset, and state management actions [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[traycerai]

Warning

Ticket Assist will be discontinued on May 1, 2026. After that date, the feature will no longer be available. We suggest installing the Traycer IDE Extension for continued AI-powered, spec-driven development. Thank you for choosing Traycer!

Plan

Observations

QuickActions is a static, zero-prop component. page.tsx already fetches workspace, tasksData (with by_status counts), and eventsData via SWR — all the data needed to derive workspace state is already in scope. The prdApi.getAll / prdApi.getLatest endpoints exist in file:web-ui/src/lib/api.ts. The Button component supports default (filled/primary) and outline variants. Icons come from @hugeicons/react.

Approach

Pass the already-fetched state from page.tsx down to QuickActions as props, add a lightweight SWR call for PRD existence, derive a WorkspaceStage enum from those signals, and render the correct 1–2 buttons per stage. No new hooks or stores are needed — the data is already available at the page level.

---

Implementation Steps

1. Add a PRD SWR fetch in page.tsx

In file:web-ui/src/app/page.tsx, alongside the existing tasksData SWR call, add a parallel SWR call using prdApi.getAll (already imported-ready from file:web-ui/src/lib/api.ts). Import prdApi from @/lib/api. Key the SWR call on workspace && workspacePath (same guard as tasks). Store the result as prdData of type PrdListResponse.

2. Define WorkspaceStage and a derivation helper

In file:web-ui/src/components/workspace/QuickActions.tsx, define a local union type:

type WorkspaceStage =
  | 'no_prd'
  | 'prd_no_tasks'
  | 'tasks_ready'
  | 'execution_complete'
  | 'fallback';

Add a pure function deriveStage(hasPrd, taskCounts, activeRunCount) that maps inputs to a WorkspaceStage using the priority order from the ticket:

Condition	Stage
!hasPrd	no_prd
hasPrd && totalTasks === 0	prd_no_tasks
taskCounts.READY > 0 && activeRunCount === 0	tasks_ready
taskCounts.DONE > 0 || taskCounts.MERGED > 0	execution_complete
otherwise	fallback

3. Update QuickActions props interface

Change QuickActions to accept:

interface QuickActionsProps {
  hasPrd: boolean;
  taskCounts: TaskStatusCounts;
  activeRunCount: number;
  workspacePath: string;
}

Import TaskStatusCounts from @/types.

4. Implement context-aware button rendering

Inside QuickActions, call deriveStage(...) and render buttons per stage. Use variant="default" for the primary CTA and variant="outline" for the secondary. Map each stage to its action config:

Stage	Primary button	Secondary button
no_prd	Create PRD → /prd	Import PRD → /prd?import=true
prd_no_tasks	Generate Tasks → /tasks?generate=true	View PRD → /prd
tasks_ready	Execute Tasks → /tasks	Manage Tasks → /tasks
execution_complete	View Proof Gates → /proof	Review Changes → /review
fallback	Manage Tasks → /tasks	View PRD → /prd

Choose appropriate icons from @hugeicons/react already used in the file (e.g., FileEditIcon, Task01Icon, GitBranchIcon) and add PlayIcon or CheckmarkCircle01Icon as needed — verify they are exported from the package before using.

5. Update page.tsx to pass props to QuickActions

Replace the current <QuickActions /> call with:

<QuickActions
  hasPrd={(prdData?.total ?? 0) > 0}
  taskCounts={tasksData?.by_status || emptyTaskCounts}
  activeRunCount={activeRunCount}
  workspacePath={workspacePath}
/>

Pass workspacePath (already in scope as a non-null string at this render branch).

6. Update the barrel export (no change needed)

file:web-ui/src/components/workspace/index.ts already re-exports QuickActions by name — no change required since the component signature change is additive from the consumer's perspective.

---

Data Flow

sequenceDiagram
  participant Page as page.tsx
  participant SWR
  participant API as prdApi / tasksApi
  participant QA as QuickActions

  Page->>SWR: useSWR prdApi.getAll(workspacePath)
  SWR->>API: GET /api/v2/prd
  API-->>SWR: PrdListResponse
  SWR-->>Page: prdData

  Page->>QA: hasPrd, taskCounts, activeRunCount, workspacePath
  QA->>QA: deriveStage(...)
  QA-->>Page: renders 1-2 context-aware buttons

Loading

Import In IDE

🤖 Prompt for AI Agents

## Observations

`QuickActions` is a static, zero-prop component. `page.tsx` already fetches `workspace`, `tasksData` (with `by_status` counts), and `eventsData` via SWR — all the data needed to derive workspace state is already in scope. The `prdApi.getAll` / `prdApi.getLatest` endpoints exist in `file:web-ui/src/lib/api.ts`. The `Button` component supports `default` (filled/primary) and `outline` variants. Icons come from `@hugeicons/react`.

## Approach

Pass the already-fetched state from `page.tsx` down to `QuickActions` as props, add a lightweight SWR call for PRD existence, derive a `WorkspaceStage` enum from those signals, and render the correct 1–2 buttons per stage. No new hooks or stores are needed — the data is already available at the page level.

---

## Implementation Steps

### 1. Add a PRD SWR fetch in `page.tsx`

In `file:web-ui/src/app/page.tsx`, alongside the existing `tasksData` SWR call, add a parallel SWR call using `prdApi.getAll` (already imported-ready from `file:web-ui/src/lib/api.ts`). Import `prdApi` from `@/lib/api`. Key the SWR call on `workspace && workspacePath` (same guard as tasks). Store the result as `prdData` of type `PrdListResponse`.

### 2. Define `WorkspaceStage` and a derivation helper

In `file:web-ui/src/components/workspace/QuickActions.tsx`, define a local union type:

```
type WorkspaceStage =
  | 'no_prd'
  | 'prd_no_tasks'
  | 'tasks_ready'
  | 'execution_complete'
  | 'fallback';
```

Add a pure function `deriveStage(hasPrd, taskCounts, activeRunCount)` that maps inputs to a `WorkspaceStage` using the priority order from the ticket:

| Condition | Stage |
|---|---|
| `!hasPrd` | `no_prd` |
| `hasPrd && totalTasks === 0` | `prd_no_tasks` |
| `taskCounts.READY > 0 && activeRunCount === 0` | `tasks_ready` |
| `taskCounts.DONE > 0 \|\| taskCounts.MERGED > 0` | `execution_complete` |
| otherwise | `fallback` |

### 3. Update `QuickActions` props interface

Change `QuickActions` to accept:

```
interface QuickActionsProps {
  hasPrd: boolean;
  taskCounts: TaskStatusCounts;
  activeRunCount: number;
  workspacePath: string;
}
```

Import `TaskStatusCounts` from `@/types`.

### 4. Implement context-aware button rendering

Inside `QuickActions`, call `deriveStage(...)` and render buttons per stage. Use `variant="default"` for the primary CTA and `variant="outline"` for the secondary. Map each stage to its action config:

| Stage | Primary button | Secondary button |
|---|---|---|
| `no_prd` | `Create PRD` → `/prd` | `Import PRD` → `/prd?import=true` |
| `prd_no_tasks` | `Generate Tasks` → `/tasks?generate=true` | `View PRD` → `/prd` |
| `tasks_ready` | `Execute Tasks` → `/tasks` | `Manage Tasks` → `/tasks` |
| `execution_complete` | `View Proof Gates` → `/proof` | `Review Changes` → `/review` |
| `fallback` | `Manage Tasks` → `/tasks` | `View PRD` → `/prd` |

Choose appropriate icons from `@hugeicons/react` already used in the file (e.g., `FileEditIcon`, `Task01Icon`, `GitBranchIcon`) and add `PlayIcon` or `CheckmarkCircle01Icon` as needed — verify they are exported from the package before using.

### 5. Update `page.tsx` to pass props to `QuickActions`

Replace the current `<QuickActions />` call with:

```
<QuickActions
  hasPrd={(prdData?.total ?? 0) > 0}
  taskCounts={tasksData?.by_status || emptyTaskCounts}
  activeRunCount={activeRunCount}
  workspacePath={workspacePath}
/>
```

Pass `workspacePath` (already in scope as a non-null string at this render branch).

### 6. Update the barrel export (no change needed)

`file:web-ui/src/components/workspace/index.ts` already re-exports `QuickActions` by name — no change required since the component signature change is additive from the consumer's perspective.

---

## Data Flow

```mermaid
sequenceDiagram
  participant Page as page.tsx
  participant SWR
  participant API as prdApi / tasksApi
  participant QA as QuickActions

  Page->>SWR: useSWR prdApi.getAll(workspacePath)
  SWR->>API: GET /api/v2/prd
  API-->>SWR: PrdListResponse
  SWR-->>Page: prdData

  Page->>QA: hasPrd, taskCounts, activeRunCount, workspacePath
  QA->>QA: deriveStage(...)
  QA-->>Page: renders 1-2 context-aware buttons
```

---

Execution Information

Branch: main
Commit: 49ff38b

---

💡 Tips

Supported Commands (Inside Comments)

• Use @traycerai generate to iterate on the previous version of the implementation plan.

Supported Commands (Inside Description)

• Add @traycerai ignore anywhere in the ticket description to prevent this ticket from being processed.
• Add @traycerai branch:<branch-name> anywhere in the ticket description to specify the target branch for the implementation plan.

Community

• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[traycerai]

Warning

Ticket Assist will be discontinued on May 1, 2026. After that date, the feature will no longer be available. We suggest installing the Traycer IDE Extension for continued AI-powered, spec-driven development. Thank you for choosing Traycer!

I have updated the Implementation Plan to reflect the recent changes in the ticket.

New Plan

Observations

QuickActions is a static, zero-prop component. page.tsx already fetches workspace, tasksData (with by_status counts), and eventsData via SWR — all the data needed to derive workspace state is already in scope. The prdApi.getAll / prdApi.getLatest endpoints exist in file:web-ui/src/lib/api.ts. The Button component supports default (filled/primary) and outline variants. Icons come from @hugeicons/react.

Approach

Pass the already-fetched state from page.tsx down to QuickActions as props, add a lightweight SWR call for PRD existence, derive a WorkspaceStage enum from those signals, and render the correct 1–2 buttons per stage. No new hooks or stores are needed — the data is already available at the page level.

---

Implementation Steps

1. Add a PRD SWR fetch in page.tsx

In file:web-ui/src/app/page.tsx, alongside the existing tasksData SWR call, add a parallel SWR call using prdApi.getAll (already imported-ready from file:web-ui/src/lib/api.ts). Import prdApi from @/lib/api. Key the SWR call on workspace && workspacePath (same guard as tasks). Store the result as prdData of type PrdListResponse.

2. Define WorkspaceStage and a derivation helper

In file:web-ui/src/components/workspace/QuickActions.tsx, define a local union type:

type WorkspaceStage =
  | 'no_prd'
  | 'prd_no_tasks'
  | 'tasks_ready'
  | 'execution_complete'
  | 'fallback';

Add a pure function deriveStage(hasPrd, taskCounts, activeRunCount) that maps inputs to a WorkspaceStage using the priority order from the ticket:

Condition	Stage
!hasPrd	no_prd
hasPrd && totalTasks === 0	prd_no_tasks
taskCounts.READY > 0 && activeRunCount === 0	tasks_ready
taskCounts.DONE > 0 || taskCounts.MERGED > 0	execution_complete
otherwise	fallback

3. Update QuickActions props interface

Change QuickActions to accept:

interface QuickActionsProps {
  hasPrd: boolean;
  taskCounts: TaskStatusCounts;
  activeRunCount: number;
  workspacePath: string;
}

Import TaskStatusCounts from @/types.

4. Implement context-aware button rendering

Inside QuickActions, call deriveStage(...) and render buttons per stage. Use variant="default" for the primary CTA and variant="outline" for the secondary. Map each stage to its action config:

Stage	Primary button	Secondary button
no_prd	Create PRD → /prd	Import PRD → /prd?import=true
prd_no_tasks	Generate Tasks → /tasks?generate=true	View PRD → /prd
tasks_ready	Execute Tasks → /tasks	Manage Tasks → /tasks
execution_complete	View Proof Gates → /proof	Review Changes → /review
fallback	Manage Tasks → /tasks	View PRD → /prd

Choose appropriate icons from @hugeicons/react already used in the file (e.g., FileEditIcon, Task01Icon, GitBranchIcon) and add PlayIcon or CheckmarkCircle01Icon as needed — verify they are exported from the package before using.

5. Update page.tsx to pass props to QuickActions

Replace the current <QuickActions /> call with:

<QuickActions
  hasPrd={(prdData?.total ?? 0) > 0}
  taskCounts={tasksData?.by_status || emptyTaskCounts}
  activeRunCount={activeRunCount}
  workspacePath={workspacePath}
/>

Pass workspacePath (already in scope as a non-null string at this render branch).

6. Update the barrel export (no change needed)

file:web-ui/src/components/workspace/index.ts already re-exports QuickActions by name — no change required since the component signature change is additive from the consumer's perspective.

---

Data Flow

sequenceDiagram
  participant Page as page.tsx
  participant SWR
  participant API as prdApi / tasksApi
  participant QA as QuickActions

  Page->>SWR: useSWR prdApi.getAll(workspacePath)
  SWR->>API: GET /api/v2/prd
  API-->>SWR: PrdListResponse
  SWR-->>Page: prdData

  Page->>QA: hasPrd, taskCounts, activeRunCount, workspacePath
  QA->>QA: deriveStage(...)
  QA-->>Page: renders 1-2 context-aware buttons

Loading

Import In IDE

🤖 Prompt for AI Agents

## Observations

`QuickActions` is a static, zero-prop component. `page.tsx` already fetches `workspace`, `tasksData` (with `by_status` counts), and `eventsData` via SWR — all the data needed to derive workspace state is already in scope. The `prdApi.getAll` / `prdApi.getLatest` endpoints exist in `file:web-ui/src/lib/api.ts`. The `Button` component supports `default` (filled/primary) and `outline` variants. Icons come from `@hugeicons/react`.

## Approach

Pass the already-fetched state from `page.tsx` down to `QuickActions` as props, add a lightweight SWR call for PRD existence, derive a `WorkspaceStage` enum from those signals, and render the correct 1–2 buttons per stage. No new hooks or stores are needed — the data is already available at the page level.

---

## Implementation Steps

### 1. Add a PRD SWR fetch in `page.tsx`

In `file:web-ui/src/app/page.tsx`, alongside the existing `tasksData` SWR call, add a parallel SWR call using `prdApi.getAll` (already imported-ready from `file:web-ui/src/lib/api.ts`). Import `prdApi` from `@/lib/api`. Key the SWR call on `workspace && workspacePath` (same guard as tasks). Store the result as `prdData` of type `PrdListResponse`.

### 2. Define `WorkspaceStage` and a derivation helper

In `file:web-ui/src/components/workspace/QuickActions.tsx`, define a local union type:

```
type WorkspaceStage =
  | 'no_prd'
  | 'prd_no_tasks'
  | 'tasks_ready'
  | 'execution_complete'
  | 'fallback';
```

Add a pure function `deriveStage(hasPrd, taskCounts, activeRunCount)` that maps inputs to a `WorkspaceStage` using the priority order from the ticket:

| Condition | Stage |
|---|---|
| `!hasPrd` | `no_prd` |
| `hasPrd && totalTasks === 0` | `prd_no_tasks` |
| `taskCounts.READY > 0 && activeRunCount === 0` | `tasks_ready` |
| `taskCounts.DONE > 0 \|\| taskCounts.MERGED > 0` | `execution_complete` |
| otherwise | `fallback` |

### 3. Update `QuickActions` props interface

Change `QuickActions` to accept:

```
interface QuickActionsProps {
  hasPrd: boolean;
  taskCounts: TaskStatusCounts;
  activeRunCount: number;
  workspacePath: string;
}
```

Import `TaskStatusCounts` from `@/types`.

### 4. Implement context-aware button rendering

Inside `QuickActions`, call `deriveStage(...)` and render buttons per stage. Use `variant="default"` for the primary CTA and `variant="outline"` for the secondary. Map each stage to its action config:

| Stage | Primary button | Secondary button |
|---|---|---|
| `no_prd` | `Create PRD` → `/prd` | `Import PRD` → `/prd?import=true` |
| `prd_no_tasks` | `Generate Tasks` → `/tasks?generate=true` | `View PRD` → `/prd` |
| `tasks_ready` | `Execute Tasks` → `/tasks` | `Manage Tasks` → `/tasks` |
| `execution_complete` | `View Proof Gates` → `/proof` | `Review Changes` → `/review` |
| `fallback` | `Manage Tasks` → `/tasks` | `View PRD` → `/prd` |

Choose appropriate icons from `@hugeicons/react` already used in the file (e.g., `FileEditIcon`, `Task01Icon`, `GitBranchIcon`) and add `PlayIcon` or `CheckmarkCircle01Icon` as needed — verify they are exported from the package before using.

### 5. Update `page.tsx` to pass props to `QuickActions`

Replace the current `<QuickActions />` call with:

```
<QuickActions
  hasPrd={(prdData?.total ?? 0) > 0}
  taskCounts={tasksData?.by_status || emptyTaskCounts}
  activeRunCount={activeRunCount}
  workspacePath={workspacePath}
/>
```

Pass `workspacePath` (already in scope as a non-null string at this render branch).

### 6. Update the barrel export (no change needed)

`file:web-ui/src/components/workspace/index.ts` already re-exports `QuickActions` by name — no change required since the component signature change is additive from the consumer's perspective.

---

## Data Flow

```mermaid
sequenceDiagram
  participant Page as page.tsx
  participant SWR
  participant API as prdApi / tasksApi
  participant QA as QuickActions

  Page->>SWR: useSWR prdApi.getAll(workspacePath)
  SWR->>API: GET /api/v2/prd
  API-->>SWR: PrdListResponse
  SWR-->>Page: prdData

  Page->>QA: hasPrd, taskCounts, activeRunCount, workspacePath
  QA->>QA: deriveStage(...)
  QA-->>Page: renders 1-2 context-aware buttons
```

---

Execution Information

Branch: main
Commit: 49ff38b