diff --git a/docs/plans/2026-03-23-copilot-first-dashboard.md b/docs/plans/2026-03-23-copilot-first-dashboard.md new file mode 100644 index 00000000..f8abee9f --- /dev/null +++ b/docs/plans/2026-03-23-copilot-first-dashboard.md @@ -0,0 +1,404 @@ +# 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 `` with mode toggle (Guided/Chat). No file support on the dashboard input. + +**Target:** Multi-line `