From 590d1ad1cb8ea71f39a4629ebd1cca90a445c29f Mon Sep 17 00:00:00 2001 From: chihlasm Date: Mon, 23 Mar 2026 04:00:52 +0000 Subject: [PATCH] refactor: onboarding, mobile nav, remove maintenance flows - Onboarding steps guide toward copilot usage, not flow building - Mobile nav updated to match sidebar (Session History, Guided Flows) - Remove Step Library from mobile nav - Remove Maintenance from flow type filter tabs - Remove Maintenance badge from all tree views (grid, list, table) - Remove Maintenance create option from CreateFlowDropdown - Add copilot-first dashboard plan and solutions library spec docs Co-Authored-By: Claude Opus 4.6 (1M context) --- .../2026-03-23-copilot-first-dashboard.md | 404 ++++++++++++++++++ .../2026-03-23-solutions-library-design.md | 211 +++++++++ .../components/common/CreateFlowDropdown.tsx | 14 +- .../dashboard/OnboardingChecklist.tsx | 16 +- frontend/src/components/layout/AppLayout.tsx | 9 +- .../src/components/library/TreeGridView.tsx | 8 +- .../src/components/library/TreeListView.tsx | 8 +- .../src/components/library/TreeTableView.tsx | 8 +- frontend/src/pages/TreeLibraryPage.tsx | 2 +- 9 files changed, 632 insertions(+), 48 deletions(-) create mode 100644 docs/plans/2026-03-23-copilot-first-dashboard.md create mode 100644 docs/plans/2026-03-23-solutions-library-design.md 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 `