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) <noreply@anthropic.com>
This commit is contained in:
2026-03-23 04:00:52 +00:00
parent ee606643d5
commit 590d1ad1cb
9 changed files with 632 additions and 48 deletions

View File

@@ -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 `<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

View File

@@ -0,0 +1,211 @@
# Solutions Library + Smart RAG — Design Spec
> **Status:** SPEC ONLY — not implementing yet. Build after colleague pilot (Week 3-4).
> **Date:** 2026-03-23
> **Context:** [GTM validation plan](resolutionflow-gtm-design.md) — copilot-first, team knowledge flywheel
---
## Problem
Engineers solve the same problems repeatedly across an MSP. Today that knowledge lives in engineers' heads, scattered PSA ticket notes, or nowhere. When an engineer resolves a tricky issue through the FlowPilot copilot, that knowledge dies with the session. The next engineer who hits the same issue starts from scratch.
## Solution
**Solutions Library** — a team knowledge base that builds itself from resolved copilot sessions and feeds back into future sessions via RAG.
Two halves:
1. **Capture & Dedup** — save resolutions from copilot sessions, prevent duplicates
2. **Smart RAG** — FlowPilot pulls from the Solutions Library during live sessions and surfaces relevant prior resolutions
## How It Works
### 1. Resolution Capture (post-session)
When an engineer resolves a copilot session, FlowPilot auto-generates a structured resolution:
```
{
"title": "Exchange Online mailbox not receiving email",
"problem": "User reports not receiving emails in Outlook. OWA also shows no new mail.",
"root_cause": "Mail flow rule blocking external senders due to tenant-wide transport rule misconfiguration",
"resolution_steps": [
"Checked MX records — correct",
"Ran message trace in Exchange Admin Center — messages queued",
"Found transport rule 'Block External' was enabled tenant-wide instead of per-group",
"Disabled rule, emails delivered within 5 minutes"
],
"environment_tags": ["exchange-online", "mail-flow", "transport-rules"],
"auto_detected_category": "Microsoft 365"
}
```
Engineer gets prompted: **"Save this as a reusable solution?"**
- One-click save with auto-generated content
- Can edit title, tags, steps before saving
- Can skip (not every session produces reusable knowledge)
### 2. Dedup Check (on save)
Before saving, system does a similarity search (embedding cosine similarity) against existing solutions.
**If similarity > 0.85 (strong match):**
- Show existing solution side-by-side with new one
- Three options:
- **Merge** — update existing solution with new context/steps (keeps the better version, increments usage count)
- **Keep Both** — they look similar but are actually different problems
- **Discard** — it's the same thing, don't save
**If similarity 0.6-0.85 (partial match):**
- Show as "Related solutions" but save as new by default
- Engineer can choose to merge if they recognize it's the same
**If similarity < 0.6:**
- Save directly, no prompt
### 3. RAG During Live Sessions
When an engineer starts or progresses through a copilot conversation:
1. After the first 2-3 message exchanges (enough context to understand the problem), FlowPilot searches the Solutions Library
2. Uses the conversation context as the query (not just the initial message)
3. If a solution scores above threshold, FlowPilot surfaces it naturally:
> *"I found a similar issue. Sarah resolved an Exchange mail flow problem 3 days ago — she found a transport rule was blocking external senders. Want me to walk you through her resolution?"*
**If engineer says yes:**
- FlowPilot presents the resolution steps one at a time
- Engineer confirms each step worked or skips
- At the end, the solution's usage count increments
**If engineer says no:**
- FlowPilot continues open-ended troubleshooting
- The suggestion is noted (helps tune future relevance)
**Retrieval rules:**
- Only surface solutions from the same team
- Max 1 suggestion per session (don't nag)
- Don't suggest solutions the same engineer saved (they already know)
- Prefer recent solutions over old ones (tie-breaker)
### 4. Confidence Scoring
Each solution gets a confidence score (0-100):
| Event | Score change |
|-------|-------------|
| Saved from resolved session | +50 (base) |
| Another engineer uses it successfully | +15 |
| Engineer accepts RAG suggestion | +10 |
| Engineer rejects RAG suggestion | -5 |
| Multiple engineers save similar (merged) | +20 |
| Not suggested in 90 days | -10 (decay) |
High-confidence solutions are suggested more aggressively. Low-confidence solutions still appear in search but aren't proactively surfaced.
### 5. Solutions Library UI
Replaces the current Step Library page. Card-based grid with:
**Each solution card shows:**
- Title (e.g., "Exchange Online mailbox not receiving email")
- Problem summary (2 lines, truncated)
- Root cause (1 line)
- Tags (environment, category)
- Saved by [engineer name] · [date]
- Used [N] times · Confidence [high/medium/low]
**Page features:**
- Search (full-text + semantic)
- Filter by tag, engineer, confidence, recency
- Sort by most used, most recent, highest confidence
- Manual "Add Solution" button (not just from sessions)
- Edit/delete for solutions you created (team admins can edit any)
---
## Data Model
### `solutions` table
| Column | Type | Notes |
|--------|------|-------|
| id | UUID | PK |
| team_id | UUID | FK to teams |
| created_by | UUID | FK to users |
| title | VARCHAR(255) | |
| problem_description | TEXT | What the user reported |
| root_cause | TEXT | What was actually wrong |
| resolution_steps | JSONB | Array of step strings |
| environment_tags | JSONB | Array of tag strings |
| category | VARCHAR(100) | Auto-detected or manual |
| source_session_id | UUID | FK to ai_sessions (nullable — manual entries have no source) |
| embedding | VECTOR(1536) | For similarity search (pgvector) |
| confidence_score | INTEGER | 0-100, default 50 |
| use_count | INTEGER | Times used via RAG suggestion |
| last_used_at | TIMESTAMPTZ | |
| created_at | TIMESTAMPTZ | |
| updated_at | TIMESTAMPTZ | |
### `solution_events` table (for confidence scoring)
| Column | Type | Notes |
|--------|------|-------|
| id | UUID | PK |
| solution_id | UUID | FK to solutions |
| event_type | VARCHAR(30) | 'used', 'accepted', 'rejected', 'merged', 'decayed' |
| user_id | UUID | FK to users (nullable for decay events) |
| session_id | UUID | FK to ai_sessions (nullable) |
| created_at | TIMESTAMPTZ | |
---
## Existing Infrastructure to Reuse
| What exists | Where | How it maps |
|-------------|-------|-------------|
| Knowledge Flywheel | `services/knowledge_flywheel.py` | Session analysis → can generate solution drafts |
| Knowledge Gap Service | `services/knowledge_gap_service.py` | Detects weak options → can flag sessions worth saving |
| RAG in assistant chat | `services/ai_chat_service.py` | Already does retrieval — extend to Solutions Library |
| Step Library UI | `components/step-library/` | Restyle as Solutions Library |
| pgvector | Already in Docker image (`pgvector/pgvector:pg16`) | Embedding storage + similarity search |
| FlowPilot session conclusion | `components/flowpilot/` | Add "Save as Solution" prompt |
---
## Implementation Phases (future)
### Phase 1: Capture & Library
- Solutions table + migrations
- Post-session "Save as Solution" prompt in FlowPilot
- Auto-generate resolution summary from session transcript
- Solutions Library page (replaces Step Library)
- Manual add/edit/delete
### Phase 2: Dedup
- Embedding generation on save (Anthropic or OpenAI embeddings)
- Similarity search on save
- Merge/Keep Both/Discard UI
### Phase 3: Smart RAG
- Mid-session similarity search
- Natural language suggestion in FlowPilot conversation
- Accept/reject tracking
- Confidence scoring + decay job
### Phase 4: Team Intelligence
- "Trending solutions" on dashboard
- "Your team resolved 12 Exchange issues this week" insights
- Solution suggestions in the copilot intake ("Common issues today: VPN, Exchange, AD lockouts")
---
## Open Questions (to answer during pilot)
1. Do engineers actually want to save resolutions, or is it friction?
2. How similar do problems need to be before a suggestion is helpful vs. annoying?
3. Should solutions be editable by the whole team, or only the creator + admins?
4. What's the right moment to prompt "Save as Solution" — right after resolution, or in a follow-up?
5. Do engineers trust AI-generated resolution summaries, or do they want to write their own?
These questions should be answerable after 2-4 weeks of pilot usage.

View File

@@ -137,24 +137,12 @@ export function CreateFlowDropdown({
<div className="my-1 border-t border-border" />
{/* Maintenance */}
<Link
to="/flows/new?type=maintenance"
onClick={() => setShowMenu(false)}
className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent"
>
<Wrench className="h-4 w-4 text-amber-400" />
<div className="flex-1">
<div className="font-medium">Maintenance Flow</div>
<div className="text-xs text-muted-foreground">Scheduled multi-target tasks</div>
</div>
</Link>
{aiEnabled && (
<button
type="button"
onClick={() => {
setShowMenu(false)
setAiPromptFlowType('maintenance')
setAiPromptFlowType('procedural')
setAiPromptOpen(true)
}}
className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm text-foreground hover:bg-accent"

View File

@@ -12,18 +12,18 @@ interface ChecklistItem {
}
const SOLO_ITEMS: ChecklistItem[] = [
{ key: 'created_flow', label: 'Create your first flow', path: '/trees' },
{ key: 'ran_session', label: 'Run your first session', path: '/trees' },
{ key: 'exported_session', label: 'Export a session', path: '/sessions' },
{ key: 'tried_ai_assistant', label: 'Try the AI assistant', path: '/assistant' },
{ key: 'ran_session', label: 'Try troubleshooting a ticket', path: '/' },
{ key: 'exported_session', label: 'Review your session notes', path: '/sessions' },
{ key: 'created_flow', label: 'Explore guided flows', path: '/trees' },
{ key: 'tried_ai_assistant', label: 'Check out the Script Builder', path: '/script-builder' },
]
const TEAM_ITEMS: ChecklistItem[] = [
{ key: 'created_flow', label: 'Create your first flow', path: '/trees' },
{ key: 'ran_session', label: 'Try troubleshooting a ticket', path: '/' },
{ key: 'exported_session', label: 'Review your session notes', path: '/sessions' },
{ key: 'invited_teammate', label: 'Invite a team member', path: '/account' },
{ key: 'ran_session', label: 'Run your first session', path: '/trees' },
{ key: 'connected_psa', label: 'Connect a PSA integration', path: '/account/integrations' },
{ key: 'exported_session', label: 'Export a session', path: '/sessions' },
{ key: 'created_flow', label: 'Explore guided flows', path: '/trees' },
{ key: 'connected_psa', label: 'Connect your PSA', path: '/account/integrations' },
]
export function OnboardingChecklist() {

View File

@@ -1,6 +1,6 @@
import { useEffect, useState, useCallback } from 'react'
import { useLocation, useNavigate, Link } from 'react-router-dom'
import { Menu, X, LayoutGrid, Clock, AlertTriangle, GitBranch, Code2, Wand2, BarChart3, Settings, LogOut, Shield, Layers } from 'lucide-react'
import { Menu, X, LayoutGrid, Clock, AlertTriangle, GitBranch, Code2, Wand2, BarChart3, Settings, LogOut, Shield, FileText } from 'lucide-react'
import { useAuthStore } from '@/store/authStore'
import { usePermissions } from '@/hooks/usePermissions'
import { useUserPreferencesStore } from '@/store/userPreferencesStore'
@@ -52,11 +52,10 @@ export function AppLayout() {
const mobileNavItems = [
{ path: '/', label: 'Dashboard', icon: LayoutGrid },
{ path: '/sessions', label: 'Active Sessions', icon: Clock },
{ path: '/sessions', label: 'Session History', icon: Clock },
{ path: '/escalations', label: 'Escalations', icon: AlertTriangle },
{ path: '/trees', label: 'Flows', icon: GitBranch },
{ path: '/step-library', label: 'Step Library', icon: Layers },
{ path: '/scripts', label: 'Scripts', icon: Code2 },
{ path: '/trees', label: 'Guided Flows', icon: GitBranch },
{ path: '/scripts', label: 'Scripts', icon: FileText },
{ path: '/script-builder', label: 'Script Builder', icon: Wand2 },
{ path: '/analytics', label: 'Analytics', icon: BarChart3 },
{ path: '/account', label: 'Account', icon: Settings },

View File

@@ -1,5 +1,5 @@
import { Link } from 'react-router-dom'
import { Pencil, Globe, Lock, Trash2, GitBranch, FileText, Wrench, Download, ClipboardList } from 'lucide-react'
import { Pencil, Globe, Lock, Trash2, GitBranch, FileText, Download, ClipboardList } from 'lucide-react'
import type { TreeListItem } from '@/types'
import { TagBadges } from '@/components/common/TagBadges'
import { StaggerList } from '@/components/common/StaggerList'
@@ -45,12 +45,6 @@ export function TreeGridView({
Draft
</span>
)}
{tree.tree_type === 'maintenance' && (
<span className="inline-flex items-center gap-1 rounded-full border border-amber-500/30 bg-amber-500/10 px-2 py-0.5 font-sans text-xs text-[0.625rem] uppercase tracking-wide text-amber-400">
<Wrench className="h-3 w-3" />
Maintenance
</span>
)}
{'fork_info' in tree && Boolean((tree as Record<string, unknown>).fork_info) && (
<span className="shrink-0 rounded-full bg-violet-400/15 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-violet-400">
Fork

View File

@@ -1,5 +1,5 @@
import { Link } from 'react-router-dom'
import { Pencil, Globe, Lock, GitBranch, FileText, Trash2, Wrench, Download, ClipboardList } from 'lucide-react'
import { Pencil, Globe, Lock, GitBranch, FileText, Trash2, Download, ClipboardList } from 'lucide-react'
import type { TreeListItem } from '@/types'
import { TagBadges } from '@/components/common/TagBadges'
import { cn } from '@/lib/utils'
@@ -45,12 +45,6 @@ export function TreeListView({
Draft
</span>
)}
{tree.tree_type === 'maintenance' && (
<span className="inline-flex items-center gap-1 rounded-full border border-amber-500/30 bg-amber-500/10 px-2 py-0.5 font-sans text-xs text-[0.625rem] uppercase tracking-wide text-amber-400 shrink-0">
<Wrench className="h-3 w-3" />
Maintenance
</span>
)}
{'fork_info' in tree && Boolean((tree as Record<string, unknown>).fork_info) && (
<span className="shrink-0 rounded-full bg-violet-400/15 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-violet-400">
Fork

View File

@@ -1,6 +1,6 @@
import { useState } from 'react'
import { Link } from 'react-router-dom'
import { Pencil, Globe, Lock, ChevronUp, ChevronDown, GitBranch, FileText, Trash2, Wrench, Download, ClipboardList } from 'lucide-react'
import { Pencil, Globe, Lock, ChevronUp, ChevronDown, GitBranch, FileText, Trash2, Download, ClipboardList } from 'lucide-react'
import type { TreeListItem } from '@/types'
import { TagBadges } from '@/components/common/TagBadges'
import { cn } from '@/lib/utils'
@@ -147,12 +147,6 @@ export function TreeTableView({
Draft
</span>
)}
{tree.tree_type === 'maintenance' && (
<span className="inline-flex items-center gap-1 rounded-full border border-amber-500/30 bg-amber-500/10 px-2 py-0.5 font-sans text-xs text-[0.625rem] uppercase tracking-wide text-amber-400 shrink-0">
<Wrench className="h-3 w-3" />
Maintenance
</span>
)}
{'fork_info' in tree && Boolean((tree as Record<string, unknown>).fork_info) && (
<span className="shrink-0 rounded-full bg-violet-400/15 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-violet-400">
Fork

View File

@@ -365,7 +365,7 @@ export function TreeLibraryPage() {
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
{/* Type filter tabs */}
<div className="flex rounded-lg border border-border p-0.5">
{(['all', 'troubleshooting', 'procedural', 'maintenance'] as const).map((t) => (
{(['all', 'troubleshooting', 'procedural'] as const).map((t) => (
<button
key={t}
onClick={() => setTypeFilter(t)}