# Copilot-First Dashboard Redesign — Implementation Plan

> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

**Goal:** Redesign the dashboard and navigation so the AI chat copilot is the primary experience — an engineer handed a login URL should immediately see "What are you troubleshooting?" and be able to start a conversation, paste images, and drag files, like ChatGPT/Claude.

**Architecture:** The dashboard becomes a chat-first page with a centered input area (textarea + file upload), recent conversations sidebar, and secondary dashboard widgets collapsed below. The sidebar navigation is simplified to put the copilot front and center. Guided troubleshooting (flow-following mode) moves to the sidebar as an option but is no longer the default mode.

**Tech Stack:** React 19, Tailwind CSS v4, existing `RichTextInput` component (drag-drop + paste images), existing FlowPilot/Assistant Chat APIs

**GTM Context:** [resolutionflow-gtm-design.md](resolutionflow-gtm-design.md) — colleague pilot in 1-2 weeks. Engineers should open the app and immediately start troubleshooting, not learn a platform.

---

## Current State → Target State

### Dashboard (QuickStartPage)

**Current:** Greeting → Onboarding checklist → Small input bar → Escalations → Active sessions → Stat cards → Knowledge Base + Team Summary → Recent sessions

**Target:** Large centered chat input (ChatGPT-style) with:
- Greeting + subtitle ("What are you troubleshooting?")
- Large textarea with paste/drag-drop file support (reuse `RichTextInput`)
- Quick suggestion chips below ("VPN not connecting", "Outlook not syncing", "User locked out")
- Recent conversations list below the input (last 5-10 sessions)
- Secondary widgets (stats, KB, team summary) collapsed into a "Dashboard" section at the bottom or accessible via sidebar

### Sidebar Navigation

**Current:** Home → Work (Sessions, Escalations) → Know (Flows, Step Library, Scripts, Builder, Review) → Data (Exports, Analytics, FP Analytics) → Help (Guides, Feedback) → Acct

**Target:** New Conversation (top, prominent) → History (recent sessions) → Guided Flows → Scripts → Analytics → Account. The sidebar should feel like a chat app sidebar, not an enterprise nav.

### Input Experience

**Current:** Single-line `<input>` with mode toggle (Guided/Chat). No file support on the dashboard input.

**Target:** Multi-line `<textarea>` that auto-grows. Supports:
- Paste images (Ctrl+V / Cmd+V) — screenshots of errors, Event Viewer, etc.
- Drag and drop files (images, logs, documents)
- Thumbnail preview strip for attached files
- Enter to send, Shift+Enter for newline
- No mode toggle — default is always the chat copilot. Guided mode accessible from sidebar.

---

## File Map

### Task 1 — Dashboard Redesign
| Action | File |
|--------|------|
| Rewrite | `frontend/src/pages/QuickStartPage.tsx` |
| Modify | `frontend/src/components/dashboard/StartSessionInput.tsx` |
| Reference | `frontend/src/components/common/RichTextInput.tsx` |

### Task 2 — Sidebar Simplification
| Action | File |
|--------|------|
| Modify | `frontend/src/components/layout/Sidebar.tsx` |

### Task 3 — Onboarding Update
| Action | File |
|--------|------|
| Modify | `frontend/src/components/dashboard/OnboardingChecklist.tsx` |

---

## Task 1: Copilot-First Dashboard

**Files:**
- Rewrite: `frontend/src/pages/QuickStartPage.tsx`
- Rewrite: `frontend/src/components/dashboard/StartSessionInput.tsx`

### Step 1: Redesign StartSessionInput as a chat-style input

Replace the current single-line input + mode toggle with a ChatGPT-style textarea:

**Layout:**
```
┌─────────────────────────────────────────────────┐
│  ⚡ What are you troubleshooting?               │
│                                                  │
│  [Multi-line textarea with placeholder]          │
│  [Thumbnail strip if files attached]             │
│                                                  │
│  [📎 Attach] [📋 Paste Logs]  [Pull Ticket]  ⬆ │
└─────────────────────────────────────────────────┘
  Suggestion chips: [VPN issues] [Outlook sync] [AD lockout] [Permission denied]
```

**Behavior:**
- Textarea auto-grows up to 200px, then scrolls
- Paste images via Ctrl+V — shows thumbnail preview (reuse `RichTextInput` paste/drag logic)
- Drag and drop files — shows thumbnail strip
- **📎 Attach button** opens native file picker dialog. Accepted types: images (png, jpg, gif, webp), logs (.txt, .log, .csv), documents (.pdf, .docx). Uses hidden `<input type="file" multiple accept="..." />` triggered by button click.
- "Paste Logs" button expands a secondary textarea for raw log content
- "Pull from Ticket" button opens ticket picker (only shown if PSA connected)
- Send button (arrow icon) or Enter submits → navigates to `/pilot` with prefill + attached files
- Shift+Enter for newline
- No Guided/Chat toggle — submits to the copilot (FlowPilot) by default

**Session ending (already built):**
The FlowPilot session page has a bottom action bar with: Resolve (write summary → generate docs), Escalate (hand off), Pause (save & resume later), Close (end without resolution). No changes needed.

**Key decisions:**
- Remove the "Guided" vs "Open Chat" mode toggle from the main input. The default path is always the AI copilot (FlowPilot). Guided flows are accessible from the sidebar under "Guided Flows."
- The input navigates to `/pilot` (FlowPilot session page) on submit — same as current "Guided" mode. The FlowPilot is the copilot.

### Step 2: Redesign QuickStartPage layout

**New layout (top to bottom):**

```
┌──────────────────────────────────────────────────────┐
│  Good evening, Michael                               │
│  What are you troubleshooting?                       │
│                                                      │
│  ┌──────────────────────────────────────────────┐    │
│  │  [Large chat-style input with file support]  │    │
│  └──────────────────────────────────────────────┘    │
│                                                      │
│  [VPN issues] [Outlook sync] [AD lockout] [Printer]  │
│                                                      │
│  ── Recent Sessions ────────────────────────────     │
│  ⚡ Mapped drive issue · 3d ago · 6 steps · Resume  │
│  ⚡ Exchange config · 5d ago · Resolved              │
│                                                      │
│  ── Performance ────────────────────────── [expand]  │
│  [Stats cards — collapsed by default, expandable]    │
│                                                      │
│  ── Knowledge ──────────────────────────── [expand]  │
│  [KB + Team cards — collapsed by default]            │
└──────────────────────────────────────────────────────┘
```

**Key changes from current:**
- Greeting is smaller, subtitle becomes "What are you troubleshooting?" in large text
- Chat input is the hero element — takes up the visual center
- Suggestion chips provide quick-start for common issues
- Recent sessions shown inline (not in a card) — just a clean list
- OnboardingChecklist moves below recent sessions or becomes a subtle banner
- PerformanceCards, KnowledgeBaseCards, TeamSummary collapse into expandable sections at the bottom — visible but not competing with the input
- PendingEscalations stays auto-hiding (only shows when there are escalations)

### Step 3: Implement suggestion chips

Hardcoded initial set (can be made dynamic later based on team's common issues):

```typescript
const SUGGESTIONS = [
  'VPN not connecting',
  'Outlook not syncing',
  'User locked out of account',
  'Slow internet at client site',
  'Printer not working',
  'MFA issues',
]
```

Clicking a chip fills the input and auto-submits (navigates to `/pilot` with that text).

### Step 4: Verify build

Run: `cd frontend && npx tsc --noEmit`
Expected: Zero errors

### Step 5: Commit

```bash
git add frontend/src/pages/QuickStartPage.tsx frontend/src/components/dashboard/StartSessionInput.tsx
git commit -m "feat: copilot-first dashboard — chat-style input with file support

Large textarea with paste/drag-drop images, suggestion chips,
collapsible secondary widgets. Removes Guided/Chat toggle —
copilot is always the default path.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>"
```

---

## Task 2: Sidebar Navigation Simplification

**Files:**
- Modify: `frontend/src/components/layout/Sidebar.tsx`

### Step 1: Restructure the icon rail

**New rail groups (top to bottom):**

```
[⚡ New]      — always visible, prominent (accent colored)
              Clicking starts a fresh copilot session (navigates to /)
─────────
[🏠 Home]     — Dashboard
[📂 History]  — Session history (/sessions)
[🔀 Flows]    — Guided troubleshooting flows (/trees) — the guided mode lives here
[📜 Scripts]  — Script library + builder
[📊 Data]     — Analytics + Exports
─────────
[⚙ Acct]     — Account settings
[📌 Pin]      — Pin/unpin sidebar
```

**Key changes:**
- **"New" button at the top** — like ChatGPT's "New Chat" button. Always visible, uses accent color. Navigates to `/` (dashboard with fresh input).
- **"History"** replaces "Work" — shows session history (active + completed). This is where engineers find past conversations.
- **"Flows"** replaces "Know" — simplified. Contains guided flows and the flow library. Step Library and Review Queue move here as sub-items.
- **"Scripts"** gets its own icon — Script library + Script Builder as sub-items.
- **Help/Guides removed from rail** — moves to account section or footer link. Engineers in a pilot don't need user guides taking up sidebar real estate.
- **Escalations** — stays as a badge on History or as a sub-item, not a top-level icon.

**Pinned mode sub-items:**

```
NEW SESSION
─ RESOLVE ─
Dashboard
Session History (badge: active count)
Escalations (badge: count, only if > 0)
─ KNOWLEDGE ─
Guided Flows
  └ Troubleshooting
  └ Projects
Scripts
  └ Script Library
  └ Script Builder
─ INSIGHTS ─
Analytics
Exports
```

### Step 2: Verify build

Run: `cd frontend && npx tsc --noEmit`

### Step 3: Commit

```bash
git commit -m "refactor: simplify sidebar for copilot-first navigation

New Session button at top, History replaces Work, Flows replaces Know,
Scripts gets own icon. Guides/feedback moved out of main nav.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>"
```

---

## Task 3: Onboarding Update

**Files:**
- Modify: `frontend/src/components/dashboard/OnboardingChecklist.tsx`

### Step 1: Update onboarding steps

**Current steps:**
1. Create your first flow
2. Run your first session
3. Export a session
4. Try the AI assistant

**New steps (copilot-first):**
1. Try troubleshooting a ticket (navigates to input, focus)
2. Review your session notes (navigates to session history)
3. Explore guided flows (navigates to /trees)
4. Check out the Script Builder (navigates to /script-builder)

The onboarding should guide engineers toward *using the copilot*, not building flows. Building flows is a power-user action they discover later.

### Step 2: Make the checklist a subtle top banner instead of a card

Instead of a prominent card above the input, render it as a slim banner below the input area:

```
Getting started: Try troubleshooting a ticket → Review your notes → Explore flows    [Dismiss]
```

This keeps the input as the hero and the onboarding as a gentle nudge.

### Step 3: Verify build

Run: `cd frontend && npx tsc --noEmit`

### Step 4: Commit

```bash
git commit -m "refactor: update onboarding for copilot-first experience

Steps guide toward using the copilot, not building flows.
Checklist rendered as subtle banner below input.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>"
```

---

## Task 4: Mobile Responsive

**Files:**
- Modify: `frontend/src/pages/QuickStartPage.tsx`
- Modify: `frontend/src/components/dashboard/StartSessionInput.tsx`
- Modify: `frontend/src/components/layout/AppLayout.tsx` (mobile nav items)

### Step 1: Ensure chat input works on mobile

- Textarea should be full-width on mobile
- Suggestion chips wrap to 2 rows on small screens
- Attach/Paste Logs buttons stack vertically on mobile
- Thumbnail strip scrolls horizontally

### Step 2: Update mobile hamburger nav

Update `mobileNavItems` in `AppLayout.tsx` to match the new sidebar structure:
- Dashboard
- Session History
- Guided Flows
- Scripts
- Analytics
- Account

### Step 3: Verify build

Run: `cd frontend && npx tsc --noEmit`

### Step 4: Commit

```bash
git commit -m "fix: mobile responsive copilot-first dashboard

Chat input full-width, suggestion chips wrap, mobile nav updated.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>"
```

---

## Task 5: Remove Maintenance Flows

**Files:**
- Modify: `frontend/src/components/layout/Sidebar.tsx` — remove Maintenance from nav sub-items and pinned mode children
- Modify: `frontend/src/components/layout/AppLayout.tsx` — remove from mobile nav if present
- Modify: `frontend/src/pages/TreeListPage.tsx` — remove Maintenance tab from flow type filters
- Modify: `frontend/src/components/library/TreeGridView.tsx` — remove maintenance badge rendering
- Modify: `frontend/src/components/library/TreeListView.tsx` — same
- Modify: `frontend/src/components/library/TreeTableView.tsx` — same
- Modify: `frontend/src/components/common/CreateFlowDropdown.tsx` — remove Maintenance as a create option
- Modify: `frontend/src/components/layout/Sidebar.tsx` — remove Maintenance from rail group children and pinned sections

### Step 1: Remove Maintenance from all navigation and flow type filters

Remove `Maintenance` from:
- Sidebar rail group children (Know → Maintenance)
- Sidebar pinned mode sections (Knowledge → Maintenance)
- Flow type filter tabs on the flows page (All / Troubleshooting / Projects / ~~Maintenance~~)
- Create flow dropdown options
- Mobile nav items (if listed)

### Step 2: Remove maintenance-specific UI

Remove from tree view components:
- The amber "Maintenance" badge (`tree.tree_type === 'maintenance'` checks)
- Any maintenance-specific icons (Wrench)
- Maintenance flow batch launch entry points

**Note:** Do NOT remove backend support, database models, or API endpoints for maintenance flows. They can stay dormant. This is a frontend-only removal for the pilot to reduce confusion.

### Step 3: Verify build

Run: `cd frontend && npx tsc --noEmit`

### Step 4: Commit

```bash
git commit -m "refactor: remove maintenance flows from UI for pilot

Maintenance flows hidden from navigation, flow type filters, create
dropdown, and tree view badges. Backend support preserved — can be
re-enabled post-pilot if validated.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>"
```

---

## What's NOT in this plan (intentionally deferred)

- **Solutions Library** — spec written, builds after pilot ([2026-03-23-solutions-library-design.md](2026-03-23-solutions-library-design.md))
- **Landing page copy rewrite** — should be updated to match copilot-first messaging, but separate effort
- **FlowPilot session page changes** — the session page itself works fine, we're just changing how people get to it
- **Backend changes** — none needed. The frontend already navigates to `/pilot` with prefill text. File uploads already work via `RichTextInput` + `uploadsApi`.
- **Chat history in sidebar** — showing recent conversations in the sidebar (like ChatGPT's left panel) is a future enhancement. For now, "History" links to the sessions page.

---

## Summary of user experience after implementation

1. Engineer gets a URL, registers/logs in
2. Lands on a page with a big text input: "What are you troubleshooting?"
3. Types their problem, pastes a screenshot, or drags a log file
4. Hits Enter → FlowPilot starts helping them troubleshoot
5. When done, they get clean notes for their ticket
6. Next time, they see their recent sessions below the input
7. Guided flows, scripts, analytics are in the sidebar when they're ready to explore