resolutionflow/docs/plans/archive/2026-03-20-flowpilot-dashboard-sidebar-redesign.md

FlowPilot Dashboard & Sidebar Redesign — Implementation Plan

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

Goal: Transform the dashboard into a FlowPilot-centric cockpit where engineers land, see their active work, start new sessions, and navigate to deeper pages — with every number acting as a portal.

Architecture: Replace QuickStartPage with a new FlowPilotDashboardPage composed of section cards that each call existing APIs (sidebar stats, AI sessions, escalation queue, flowpilot analytics). Restructure the sidebar from 3 sections (Resolve/Build/Insights) to a cleaner nav (Resolve/Knowledge/Insights) with stats moved to the dashboard. No backend changes needed.

Tech Stack: React 19, TypeScript, Tailwind CSS v4, Zustand, Lucide React, existing API clients

---

Task 1: Create StartSessionInput Component

Files:

• Create: frontend/src/components/dashboard/StartSessionInput.tsx

What it does: A prominent text input with Guided | Chat mode toggle. Pressing Enter navigates to /pilot (Guided) or /assistant (Chat) with the problem text pre-filled via router state.

Step 1: Create the component

// frontend/src/components/dashboard/StartSessionInput.tsx
import { useState, useRef, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { Sparkles, MessageCircle } from 'lucide-react'
import { cn } from '@/lib/utils'

type SessionMode = 'guided' | 'chat'

export function StartSessionInput() {
  const [mode, setMode] = useState<SessionMode>('guided')
  const [value, setValue] = useState('')
  const navigate = useNavigate()
  const inputRef = useRef<HTMLInputElement>(null)

  // Auto-focus on mount
  useEffect(() => { inputRef.current?.focus() }, [])

  const handleSubmit = () => {
    const trimmed = value.trim()
    if (!trimmed) return

    if (mode === 'guided') {
      navigate('/pilot', { state: { prefill: trimmed } })
    } else {
      navigate('/assistant', { state: { prefill: trimmed } })
    }
  }

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault()
      handleSubmit()
    }
  }

  return (
    <div className="glass-card-static overflow-hidden">
      <div className="px-5 py-4 sm:px-6 sm:py-5">
        <div className="relative">
          <Sparkles
            size={18}
            className="absolute left-4 top-1/2 -translate-y-1/2 text-muted-foreground"
          />
          <input
            ref={inputRef}
            type="text"
            value={value}
            onChange={(e) => setValue(e.target.value)}
            onKeyDown={handleKeyDown}
            placeholder="What are you troubleshooting?"
            className="w-full rounded-xl border border-border bg-background py-3.5 pl-11 pr-4 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
          />
        </div>
        <div className="mt-3 flex items-center justify-between">
          <div className="flex items-center gap-1 rounded-lg bg-[rgba(255,255,255,0.04)] p-0.5">
            <button
              type="button"
              onClick={() => setMode('guided')}
              className={cn(
                'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors',
                mode === 'guided'
                  ? 'bg-primary/10 text-foreground'
                  : 'text-muted-foreground hover:text-foreground'
              )}
            >
              <Sparkles size={12} />
              Guided
            </button>
            <button
              type="button"
              onClick={() => setMode('chat')}
              className={cn(
                'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors',
                mode === 'chat'
                  ? 'bg-primary/10 text-foreground'
                  : 'text-muted-foreground hover:text-foreground'
              )}
            >
              <MessageCircle size={12} />
              Open Chat
            </button>
          </div>
          <span className="text-[0.625rem] text-muted-foreground">
            Press Enter to start
          </span>
        </div>
      </div>
    </div>
  )
}

Step 2: Verify build

Run: cd frontend && PATH="/home/michaelchihlas/.nvm/versions/node/v20.19.0/bin:$PATH" npm run build 2>&1 | tail -5 Expected: Build succeeds (component isn't imported yet, just verifying no syntax errors via tree-shaking)

Step 3: Commit

git add frontend/src/components/dashboard/StartSessionInput.tsx
git commit -m "feat(dashboard): add StartSessionInput with guided/chat mode toggle"

---

Task 2: Create PendingEscalations Component

Files:

• Create: frontend/src/components/dashboard/PendingEscalations.tsx

What it does: Shows unacknowledged escalations with "Pick up" buttons. Only renders if there are pending escalations. Team leads see all team escalations; engineers see their own.

Step 1: Create the component

// frontend/src/components/dashboard/PendingEscalations.tsx
import { useState, useEffect } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { AlertTriangle } from 'lucide-react'
import { aiSessionsApi } from '@/api/aiSessions'
import type { AISessionSummary } from '@/types/ai-session'

function timeAgo(dateStr: string): string {
  const diffMs = Date.now() - new Date(dateStr).getTime()
  const minutes = Math.floor(diffMs / 60000)
  if (minutes < 1) return 'just now'
  if (minutes < 60) return `${minutes}m ago`
  const hours = Math.floor(minutes / 60)
  if (hours < 24) return `${hours}h ago`
  return `${Math.floor(hours / 24)}d ago`
}

export function PendingEscalations() {
  const [escalations, setEscalations] = useState<AISessionSummary[]>([])
  const navigate = useNavigate()

  useEffect(() => {
    aiSessionsApi.getEscalationQueue()
      .then(setEscalations)
      .catch(() => {})
  }, [])

  if (escalations.length === 0) return null

  return (
    <div
      className="glass-card-static overflow-hidden"
      style={{ borderColor: 'rgba(251, 191, 36, 0.2)' }}
    >
      <div
        className="flex items-center justify-between px-5 py-3"
        style={{ borderBottom: '1px solid var(--glass-border)' }}
      >
        <div className="flex items-center gap-2">
          <AlertTriangle size={14} className="text-amber-400" />
          <h3 className="font-heading text-sm font-bold text-foreground">
            Pending Escalations
            <span className="ml-2 inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-amber-400/10 px-1.5 text-[0.625rem] font-bold text-amber-400">
              {escalations.length}
            </span>
          </h3>
        </div>
        <Link
          to="/escalations"
          className="text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors"
        >
          View all
        </Link>
      </div>
      <div>
        {escalations.slice(0, 3).map((esc, i) => (
          <div
            key={esc.id}
            className="flex items-center gap-3 px-5 py-3"
            style={{
              borderBottom: i < Math.min(escalations.length, 3) - 1
                ? '1px solid var(--glass-border)'
                : undefined,
            }}
          >
            <span className="h-2 w-2 shrink-0 rounded-full bg-amber-400 animate-pulse" />
            <div className="flex-1 min-w-0">
              <div className="text-sm text-foreground truncate">
                {esc.problem_summary || 'Escalated session'}
              </div>
              <div className="text-[0.6875rem] text-muted-foreground">
                {esc.problem_domain || 'General'}
                <span className="mx-1.5 text-[var(--text-dimmed)]">&middot;</span>
                <span className="font-label text-[0.625rem]">{timeAgo(esc.created_at)}</span>
              </div>
            </div>
            <button
              onClick={() => navigate(`/pilot/${esc.id}?pickup=true`)}
              className="shrink-0 rounded-lg border border-amber-400/30 bg-amber-400/10 px-3 py-1 text-[0.6875rem] font-medium text-amber-400 hover:bg-amber-400/20 transition-colors"
            >
              Pick up
            </button>
          </div>
        ))}
      </div>
    </div>
  )
}

Step 2: Commit

git add frontend/src/components/dashboard/PendingEscalations.tsx
git commit -m "feat(dashboard): add PendingEscalations component with pickup action"

---

Task 3: Create ActiveFlowPilotSessions Component

Files:

• Create: frontend/src/components/dashboard/ActiveFlowPilotSessions.tsx

What it does: Shows the user's active FlowPilot (AI) sessions as cards. Click any card to resume at /pilot/{id}.

Step 1: Create the component

// frontend/src/components/dashboard/ActiveFlowPilotSessions.tsx
import { useState, useEffect } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { Sparkles, Clock, ArrowRight } from 'lucide-react'
import { aiSessionsApi } from '@/api/aiSessions'
import type { AISessionSummary } from '@/types/ai-session'
import { cn } from '@/lib/utils'

function timeAgo(dateStr: string): string {
  const diffMs = Date.now() - new Date(dateStr).getTime()
  const minutes = Math.floor(diffMs / 60000)
  if (minutes < 1) return 'just now'
  if (minutes < 60) return `${minutes}m ago`
  const hours = Math.floor(minutes / 60)
  if (hours < 24) return `${hours}h ago`
  return `${Math.floor(hours / 24)}d ago`
}

export function ActiveFlowPilotSessions() {
  const [sessions, setSessions] = useState<AISessionSummary[]>([])
  const [loading, setLoading] = useState(true)
  const navigate = useNavigate()

  useEffect(() => {
    aiSessionsApi.listSessions({ status: 'active', limit: 6 })
      .then(setSessions)
      .catch(() => {})
      .finally(() => setLoading(false))
  }, [])

  if (loading) {
    return (
      <div className="glass-card-static">
        <div className="px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
          <h3 className="font-heading text-sm font-bold text-foreground">Active Sessions</h3>
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 p-4">
          {Array.from({ length: 3 }).map((_, i) => (
            <div key={i} className="h-24 rounded-xl bg-card border border-border animate-pulse" />
          ))}
        </div>
      </div>
    )
  }

  return (
    <div className="glass-card-static">
      <div
        className="flex items-center justify-between px-5 py-3"
        style={{ borderBottom: '1px solid var(--glass-border)' }}
      >
        <div className="flex items-center gap-2">
          <h3 className="font-heading text-sm font-bold text-foreground">Active Sessions</h3>
          {sessions.length > 0 && (
            <span className="inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary/10 px-1.5 text-[0.625rem] font-bold text-primary">
              {sessions.length}
            </span>
          )}
        </div>
        <Link
          to="/sessions?filter=active"
          className="flex items-center gap-1 text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors"
        >
          View all <ArrowRight size={10} />
        </Link>
      </div>

      {sessions.length === 0 ? (
        <div className="px-5 py-8 text-center">
          <p className="text-sm text-muted-foreground">No active sessions</p>
          <p className="mt-1 text-[0.6875rem] text-[#5a6170]">Start typing above to begin troubleshooting</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 p-4">
          {sessions.map((session) => (
            <button
              key={session.id}
              onClick={() => navigate(`/pilot/${session.id}`)}
              className="glass-card p-4 text-left"
            >
              <div className="flex items-start justify-between gap-2 mb-2">
                <Sparkles size={14} className="shrink-0 text-primary mt-0.5" />
                <span
                  className={cn(
                    'font-label text-[0.5625rem] uppercase px-1.5 py-0.5 rounded',
                    session.confidence_tier === 'guided' && 'bg-emerald-400/10 text-emerald-400',
                    session.confidence_tier === 'exploring' && 'bg-amber-400/10 text-amber-400',
                    session.confidence_tier === 'discovery' && 'bg-blue-400/10 text-blue-400',
                    !session.confidence_tier && 'bg-card text-muted-foreground',
                  )}
                >
                  {session.confidence_tier || 'starting'}
                </span>
              </div>
              <p className="text-sm font-medium text-foreground truncate">
                {session.problem_summary || 'Session in progress'}
              </p>
              <div className="mt-2 flex items-center gap-2 text-[0.625rem] text-muted-foreground">
                <span className="flex items-center gap-1">
                  <Clock size={10} />
                  {timeAgo(session.created_at)}
                </span>
                <span>&middot;</span>
                <span>{session.step_count} steps</span>
              </div>
            </button>
          ))}
        </div>
      )}
    </div>
  )
}

Step 2: Commit

git add frontend/src/components/dashboard/ActiveFlowPilotSessions.tsx
git commit -m "feat(dashboard): add ActiveFlowPilotSessions card grid"

---

Task 4: Create PerformanceCards Component

Files:

• Create: frontend/src/components/dashboard/PerformanceCards.tsx

What it does: 4 stat cards (Resolved Today, Avg MTTR, Success Rate, Escalated) — each clickable to navigate to analytics.

Step 1: Create the component

// frontend/src/components/dashboard/PerformanceCards.tsx
import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { CheckCircle, Clock, TrendingUp, AlertTriangle } from 'lucide-react'
import type { LucideIcon } from 'lucide-react'
import { sidebarApi } from '@/api'
import { cn } from '@/lib/utils'

interface StatCard {
  label: string
  value: string | number
  icon: LucideIcon
  iconColor: string
  href: string
  highlight?: boolean
}

export function PerformanceCards() {
  const navigate = useNavigate()
  const [resolved, setResolved] = useState(0)
  const [active, setActive] = useState(0)
  const [totalMinutes, setTotalMinutes] = useState(0)

  useEffect(() => {
    sidebarApi.getStats()
      .then((stats) => {
        setResolved(stats.resolved_today)
        setActive(stats.active_count)
        setTotalMinutes(stats.total_session_minutes_today)
      })
      .catch(() => {})
  }, [])

  const avgMttr = resolved > 0 ? Math.round(totalMinutes / resolved) : 0

  const cards: StatCard[] = [
    {
      label: 'Resolved Today',
      value: resolved,
      icon: CheckCircle,
      iconColor: '#34d399',
      href: '/analytics',
      highlight: true,
    },
    {
      label: 'Avg Resolution',
      value: avgMttr > 0 ? `${avgMttr}m` : '—',
      icon: Clock,
      iconColor: '#22d3ee',
      href: '/analytics',
    },
    {
      label: 'Active Now',
      value: active,
      icon: TrendingUp,
      iconColor: '#38bdf8',
      href: '/sessions?filter=active',
    },
    {
      label: 'Session Time',
      value: totalMinutes > 0 ? `${totalMinutes}m` : '—',
      icon: AlertTriangle,
      iconColor: '#fbbf24',
      href: '/analytics',
    },
  ]

  return (
    <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
      {cards.map((card, i) => (
        <button
          key={card.label}
          onClick={() => navigate(card.href)}
          className={cn(
            'glass-card p-4 text-left fade-in',
            i === 0 && 'active-glow'
          )}
          style={{ animationDelay: `${400 + i * 60}ms` }}
        >
          <div className="flex items-center justify-between mb-2">
            <p className="font-label text-[0.5625rem] uppercase tracking-[0.1em] text-muted-foreground">
              {card.label}
            </p>
            <card.icon size={14} style={{ color: card.iconColor }} />
          </div>
          <p className={cn(
            'font-heading text-2xl font-extrabold tracking-tight',
            card.highlight ? 'text-gradient-brand' : 'text-foreground'
          )}>
            {card.value}
          </p>
        </button>
      ))}
    </div>
  )
}

Step 2: Commit

git add frontend/src/components/dashboard/PerformanceCards.tsx
git commit -m "feat(dashboard): add PerformanceCards with clickable stat cards"

---

Task 5: Create KnowledgeBaseCards Component

Files:

• Create: frontend/src/components/dashboard/KnowledgeBaseCards.tsx

What it does: Shows counts (Flows, Scripts, Pending Review) — each clickable to navigate to the relevant page.

Step 1: Create the component

// frontend/src/components/dashboard/KnowledgeBaseCards.tsx
import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { Network, Code2, ListChecks, ArrowRight } from 'lucide-react'
import { sidebarApi } from '@/api'

export function KnowledgeBaseCards() {
  const navigate = useNavigate()
  const [flowCount, setFlowCount] = useState(0)

  useEffect(() => {
    sidebarApi.getStats()
      .then((stats) => {
        setFlowCount(stats.tree_counts.total)
      })
      .catch(() => {})
  }, [])

  const items = [
    { label: 'Flows', value: flowCount, icon: Network, color: '#a78bfa', href: '/trees' },
    { label: 'Scripts', value: '—', icon: Code2, color: '#2dd4bf', href: '/scripts' },
    { label: 'Pending Review', value: '—', icon: ListChecks, color: '#fbbf24', href: '/review-queue' },
  ]

  return (
    <div className="glass-card-static">
      <div
        className="flex items-center justify-between px-5 py-3"
        style={{ borderBottom: '1px solid var(--glass-border)' }}
      >
        <h3 className="font-heading text-sm font-bold text-foreground">Knowledge Base</h3>
        <button
          onClick={() => navigate('/trees')}
          className="flex items-center gap-1 text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors"
        >
          Browse <ArrowRight size={10} />
        </button>
      </div>
      <div className="grid grid-cols-3 divide-x" style={{ borderColor: 'var(--glass-border)' }}>
        {items.map((item) => (
          <button
            key={item.label}
            onClick={() => navigate(item.href)}
            className="flex flex-col items-center gap-2 py-5 hover:bg-[rgba(255,255,255,0.02)] transition-colors"
          >
            <item.icon size={20} style={{ color: item.color }} />
            <p className="font-heading text-xl font-extrabold text-foreground">{item.value}</p>
            <p className="font-label text-[0.5625rem] uppercase tracking-[0.1em] text-muted-foreground">
              {item.label}
            </p>
          </button>
        ))}
      </div>
    </div>
  )
}

Step 2: Commit

git add frontend/src/components/dashboard/KnowledgeBaseCards.tsx
git commit -m "feat(dashboard): add KnowledgeBaseCards with portal navigation"

---

Task 6: Create TeamSummary Component

Files:

• Create: frontend/src/components/dashboard/TeamSummary.tsx

What it does: Admin/team lead only section showing team-wide metrics. Each number navigates to its detail page.

Step 1: Create the component

// frontend/src/components/dashboard/TeamSummary.tsx
import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { Users, AlertTriangle, Activity, ArrowRight } from 'lucide-react'
import { usePermissions } from '@/hooks/usePermissions'
import { aiSessionsApi } from '@/api/aiSessions'

export function TeamSummary() {
  const { isAccountOwner } = usePermissions()
  const navigate = useNavigate()
  const [escalationCount, setEscalationCount] = useState(0)

  useEffect(() => {
    if (!isAccountOwner) return
    aiSessionsApi.getEscalationQueue()
      .then((esc) => setEscalationCount(esc.length))
      .catch(() => {})
  }, [isAccountOwner])

  if (!isAccountOwner) return null

  const items = [
    { label: 'Escalations', value: escalationCount, icon: AlertTriangle, color: '#fbbf24', href: '/escalations' },
    { label: 'Team Activity', value: '—', icon: Activity, color: '#22d3ee', href: '/analytics' },
    { label: 'Members', value: '—', icon: Users, color: '#a78bfa', href: '/account' },
  ]

  return (
    <div className="glass-card-static">
      <div
        className="flex items-center justify-between px-5 py-3"
        style={{ borderBottom: '1px solid var(--glass-border)' }}
      >
        <h3 className="font-heading text-sm font-bold text-foreground">Team Summary</h3>
        <button
          onClick={() => navigate('/analytics')}
          className="flex items-center gap-1 text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors"
        >
          Manage <ArrowRight size={10} />
        </button>
      </div>
      <div className="grid grid-cols-3 divide-x" style={{ borderColor: 'var(--glass-border)' }}>
        {items.map((item) => (
          <button
            key={item.label}
            onClick={() => navigate(item.href)}
            className="flex flex-col items-center gap-2 py-5 hover:bg-[rgba(255,255,255,0.02)] transition-colors"
          >
            <item.icon size={20} style={{ color: item.color }} />
            <p className="font-heading text-xl font-extrabold text-foreground">{item.value}</p>
            <p className="font-label text-[0.5625rem] uppercase tracking-[0.1em] text-muted-foreground">
              {item.label}
            </p>
          </button>
        ))}
      </div>
    </div>
  )
}

Step 2: Commit

git add frontend/src/components/dashboard/TeamSummary.tsx
git commit -m "feat(dashboard): add TeamSummary component (admin/lead only)"

---

Task 7: Create RecentFlowPilotSessions Component

Files:

• Create: frontend/src/components/dashboard/RecentFlowPilotSessions.tsx

What it does: Shows last 5 completed/escalated AI sessions with status indicators and links to history.

Step 1: Create the component

// frontend/src/components/dashboard/RecentFlowPilotSessions.tsx
import { useState, useEffect } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { CheckCircle, AlertTriangle, XCircle, ArrowRight } from 'lucide-react'
import { aiSessionsApi } from '@/api/aiSessions'
import type { AISessionSummary } from '@/types/ai-session'

function timeAgo(dateStr: string): string {
  const diffMs = Date.now() - new Date(dateStr).getTime()
  const minutes = Math.floor(diffMs / 60000)
  if (minutes < 1) return 'just now'
  if (minutes < 60) return `${minutes}m ago`
  const hours = Math.floor(minutes / 60)
  if (hours < 24) return `${hours}h ago`
  const days = Math.floor(hours / 24)
  if (days === 1) return 'yesterday'
  return `${days}d ago`
}

const STATUS_CONFIG: Record<string, { icon: typeof CheckCircle; color: string; label: string }> = {
  resolved: { icon: CheckCircle, color: '#34d399', label: 'Resolved' },
  escalated: { icon: AlertTriangle, color: '#fbbf24', label: 'Escalated' },
  abandoned: { icon: XCircle, color: '#8891a0', label: 'Abandoned' },
}

export function RecentFlowPilotSessions() {
  const [sessions, setSessions] = useState<AISessionSummary[]>([])
  const navigate = useNavigate()

  useEffect(() => {
    // Fetch recent completed sessions (resolved, escalated, abandoned)
    Promise.all([
      aiSessionsApi.listSessions({ status: 'resolved', limit: 5 }).catch(() => []),
      aiSessionsApi.listSessions({ status: 'escalated', limit: 3 }).catch(() => []),
    ]).then(([resolved, escalated]) => {
      const all = [...resolved, ...escalated]
        .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
        .slice(0, 5)
      setSessions(all)
    })
  }, [])

  if (sessions.length === 0) return null

  return (
    <div className="glass-card-static">
      <div
        className="flex items-center justify-between px-5 py-3"
        style={{ borderBottom: '1px solid var(--glass-border)' }}
      >
        <h3 className="font-heading text-sm font-bold text-foreground">Recent Sessions</h3>
        <Link
          to="/sessions"
          className="flex items-center gap-1 text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors"
        >
          History <ArrowRight size={10} />
        </Link>
      </div>
      <div>
        {sessions.map((session, i) => {
          const config = STATUS_CONFIG[session.status] || STATUS_CONFIG.abandoned
          const StatusIcon = config.icon
          return (
            <button
              key={session.id}
              onClick={() => navigate(`/pilot/${session.id}`)}
              className="flex w-full items-center gap-3 px-5 py-3 text-left hover:bg-[rgba(255,255,255,0.02)] transition-colors"
              style={{
                borderBottom: i < sessions.length - 1 ? '1px solid var(--glass-border)' : undefined,
              }}
            >
              <StatusIcon size={14} style={{ color: config.color }} className="shrink-0" />
              <div className="flex-1 min-w-0">
                <p className="text-sm text-foreground truncate">
                  {session.problem_summary || 'Session'}
                </p>
              </div>
              <span className="shrink-0 font-label text-[0.625rem] text-muted-foreground">
                {timeAgo(session.resolved_at || session.created_at)}
              </span>
            </button>
          )
        })}
      </div>
    </div>
  )
}

Step 2: Commit

git add frontend/src/components/dashboard/RecentFlowPilotSessions.tsx
git commit -m "feat(dashboard): add RecentFlowPilotSessions with status indicators"

---

Task 8: Assemble FlowPilotDashboardPage

Files:

• Modify: frontend/src/pages/QuickStartPage.tsx (rewrite)

What it does: Replace the current QuickStartPage content with the new FlowPilot cockpit layout, composing all the new section components.

Step 1: Rewrite QuickStartPage

Replace the entire file content with:

// frontend/src/pages/QuickStartPage.tsx
import { PageMeta } from '@/components/common/PageMeta'
import { useAuthStore } from '@/store/authStore'
import { StartSessionInput } from '@/components/dashboard/StartSessionInput'
import { PendingEscalations } from '@/components/dashboard/PendingEscalations'
import { ActiveFlowPilotSessions } from '@/components/dashboard/ActiveFlowPilotSessions'
import { PerformanceCards } from '@/components/dashboard/PerformanceCards'
import { KnowledgeBaseCards } from '@/components/dashboard/KnowledgeBaseCards'
import { TeamSummary } from '@/components/dashboard/TeamSummary'
import { RecentFlowPilotSessions } from '@/components/dashboard/RecentFlowPilotSessions'
import { OnboardingChecklist } from '@/components/dashboard/OnboardingChecklist'

export function QuickStartPage() {
  const user = useAuthStore((s) => s.user)

  return (
    <div className="overflow-y-auto h-full">
      <PageMeta title="Dashboard" />
      <div className="p-6 space-y-5 max-w-5xl mx-auto">
        {/* Greeting */}
        <div className="fade-in" style={{ animationDelay: '100ms' }}>
          <h1 className="font-heading text-3xl font-extrabold tracking-tight text-foreground">
            Good{' '}
            {new Date().getHours() < 12
              ? 'morning'
              : new Date().getHours() < 18
              ? 'afternoon'
              : 'evening'}
            , {user?.name?.split(' ')[0] || 'there'}
          </h1>
          <p className="mt-1 text-sm text-muted-foreground">
            {new Date().toLocaleDateString('en-US', {
              weekday: 'long',
              month: 'long',
              day: 'numeric',
              year: 'numeric',
            })}
          </p>
        </div>

        {/* Onboarding */}
        <OnboardingChecklist />

        {/* 1. Start Session Input */}
        <div className="fade-in" style={{ animationDelay: '200ms' }}>
          <StartSessionInput />
        </div>

        {/* 2. Pending Escalations (auto-hides if none) */}
        <PendingEscalations />

        {/* 3. Active Sessions */}
        <ActiveFlowPilotSessions />

        {/* 4. Performance Stats */}
        <PerformanceCards />

        {/* 5 + 6. Knowledge Base + Team Summary side by side on desktop */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
          <KnowledgeBaseCards />
          <TeamSummary />
        </div>

        {/* 7. Recent Sessions */}
        <RecentFlowPilotSessions />
      </div>
    </div>
  )
}

export default QuickStartPage

Step 2: Verify build

Run: cd frontend && PATH="/home/michaelchihlas/.nvm/versions/node/v20.19.0/bin:$PATH" npm run build 2>&1 | tail -5 Expected: Build succeeds

Step 3: Commit

git add frontend/src/pages/QuickStartPage.tsx
git commit -m "feat(dashboard): replace QuickStartPage with FlowPilot cockpit layout"

---

Task 9: Wire Prefill into FlowPilotSessionPage and AssistantChatPage

Files:

• Modify: frontend/src/pages/FlowPilotSessionPage.tsx — read location.state.prefill and pass to FlowPilotIntake
• Modify: frontend/src/pages/AssistantChatPage.tsx — read location.state.prefill and auto-send first message

Step 1: Update FlowPilotSessionPage

In FlowPilotSessionPage.tsx, add after the existing useParams/useSearchParams:

const location = useLocation()
const prefill = (location.state as { prefill?: string })?.prefill || ''

Pass prefill to FlowPilotIntake as a defaultProblem prop. In the FlowPilotIntake component, initialize the problem field with this value.

Step 2: Update AssistantChatPage

In AssistantChatPage.tsx, read location.state.prefill. If present and no existing chat is loaded, auto-populate the input field and optionally auto-send.

Step 3: Verify build

Run: cd frontend && PATH="/home/michaelchihlas/.nvm/versions/node/v20.19.0/bin:$PATH" npm run build 2>&1 | tail -5

Step 4: Commit

git add frontend/src/pages/FlowPilotSessionPage.tsx frontend/src/pages/AssistantChatPage.tsx
git commit -m "feat(dashboard): wire prefill from dashboard input to FlowPilot and Chat"

---

Task 10: Restructure Sidebar Navigation

Files:

• Modify: frontend/src/components/layout/Sidebar.tsx

What it does: Replace the 3-section nav (Resolve/Build/Insights) with the new structure: Dashboard → Resolve (Active Sessions, History, Escalations) → Knowledge (Flows, Step Library, Scripts, Review Queue) → Insights (Analytics, FlowPilot Analytics). Remove SidebarStatsBar, SidebarActivityFeed, and "New Session" CTA.

Step 1: Update expanded sidebar nav

Replace lines 106-175 (the expanded mode content) with:

{/* Navigation — no stats bar, no activity feed, no New Session CTA */}
<div className="px-3 py-2 space-y-0.5">
  {/* Dashboard */}
  <NavItem href="/" icon={LayoutGrid} label="Dashboard" iconColor={NAV_COLORS.dashboard} />

  {/* Resolve */}
  <div className="font-label text-[0.5625rem] uppercase tracking-[0.12em] text-[#5a6170] px-3 pt-3 pb-1">
    Resolve
  </div>
  <NavItem href="/sessions?filter=active" icon={Clock} label="Active Sessions" badge={stats?.active_count || undefined} iconColor={NAV_COLORS.sessions} matchPaths={['/sessions']} />
  <NavItem href="/sessions?filter=completed" icon={Clock} label="History" iconColor={NAV_COLORS.sessions} />
  <NavItem href="/escalations" icon={AlertTriangle} label="Escalations" iconColor="#fbbf24" />

  {/* Knowledge */}
  <div className="font-label text-[0.5625rem] uppercase tracking-[0.12em] text-[#5a6170] px-3 pt-3 pb-1">
    Knowledge
  </div>
  <NavItem
    href="/trees"
    icon={Network}
    label="Flows"
    badge={stats?.tree_counts.total || undefined}
    iconColor={NAV_COLORS.flows}
    matchPaths={['/trees', '/flows', '/my-trees']}
    children={[
      { href: '/trees?type=troubleshooting', label: 'Troubleshooting', count: stats?.tree_counts.troubleshooting || undefined },
      { href: '/trees?type=procedural', label: 'Projects', count: stats?.tree_counts.procedural || undefined },
      { href: '/trees?type=maintenance', label: 'Maintenance', count: stats?.tree_counts.maintenance || undefined },
    ]}
  />
  <NavItem href="/step-library" icon={Library} label="Step Library" iconColor={NAV_COLORS.stepLib} />
  <NavItem href="/scripts" icon={Code2} label="Scripts" iconColor={NAV_COLORS.scripts} />
  <NavItem href="/review-queue" icon={ListChecks} label="Review Queue" iconColor="#fbbf24" />

  {/* Insights */}
  <div className="font-label text-[0.5625rem] uppercase tracking-[0.12em] text-[#5a6170] px-3 pt-3 pb-1">
    Insights
  </div>
  <NavItem href="/shares" icon={FileOutput} label="Exports" iconColor={NAV_COLORS.exports} />
  <NavItem href="/analytics" icon={BarChart3} label="Analytics" iconColor={NAV_COLORS.analytics} />
  <NavItem href="/analytics/flowpilot" icon={TrendingUp} label="FlowPilot Analytics" iconColor="#2dd4bf" />
</div>

Step 2: Update collapsed sidebar

Update the collapsed icon list to match (remove New Session, FlowPilot, Flow Editor, Flow Assist, KB Accelerator).

Step 3: Remove unused imports

Remove SidebarStatsBar and SidebarActivityFeed imports (they're no longer rendered).

Step 4: Verify build

Run: cd frontend && PATH="/home/michaelchihlas/.nvm/versions/node/v20.19.0/bin:$PATH" npm run build 2>&1 | tail -5

Step 5: Commit

git add frontend/src/components/layout/Sidebar.tsx
git commit -m "refactor(sidebar): restructure nav to Resolve/Knowledge/Insights sections"

---

Task 11: Update Mobile Nav in AppLayout

Files:

• Modify: frontend/src/components/layout/AppLayout.tsx

What it does: Update the mobile hamburger menu items to match the new sidebar structure.

Step 1: Update mobile nav items

Find the mobile nav items array and replace with:

const mobileNavItems = [
  { href: '/', label: 'Dashboard', icon: LayoutGrid },
  { href: '/sessions?filter=active', label: 'Active Sessions', icon: Clock },
  { href: '/sessions', label: 'History', icon: Clock },
  { href: '/escalations', label: 'Escalations', icon: AlertTriangle },
  { href: '/trees', label: 'Flows', icon: Network },
  { href: '/step-library', label: 'Step Library', icon: Library },
  { href: '/scripts', label: 'Scripts', icon: Code2 },
  { href: '/analytics', label: 'Analytics', icon: BarChart3 },
  { href: '/account', label: 'Account', icon: Settings },
]

Step 2: Verify build

Run: cd frontend && PATH="/home/michaelchihlas/.nvm/versions/node/v20.19.0/bin:$PATH" npm run build 2>&1 | tail -5

Step 3: Commit

git add frontend/src/components/layout/AppLayout.tsx
git commit -m "refactor(mobile): update mobile nav to match new sidebar structure"

---

Task 12: Final Build Verification + Cleanup

Step 1: Full frontend build

Run: cd frontend && PATH="/home/michaelchihlas/.nvm/versions/node/v20.19.0/bin:$PATH" npm run build Expected: Clean build with no errors

Step 2: Backend tests

Run: cd backend && source venv/bin/activate && python -m pytest tests/ -x -q --override-ini="addopts=" 2>&1 | tail -10 Expected: All tests pass (no backend changes, so this is a sanity check)

Step 3: Verify all routes still work

Manual spot-check that these routes still load:

• / — new dashboard
• /pilot — FlowPilot (still works)
• /assistant — Chat (still works)
• /sessions — Session history
• /escalations — Escalation queue
• /trees — Flow library
• /analytics — Team analytics
• /my-trees — Flow editor (deep link still works even though removed from nav)

Step 4: Commit and push

git add -A
git commit -m "chore: final build verification for dashboard/sidebar redesign"
git push

---

Removed Items — Routes Preserved

These pages are removed from nav but their routes are NOT deleted (deep links still work):

• /assistant — FlowPilot Chat (accessible via dashboard Chat mode)
• /my-trees — Flow Editor (accessible via Flows sub-navigation or direct link)
• /flow-assist — Flow Assist (accessible from within flow editor)
• /kb-accelerator — KB Accelerator (accessible from review queue)

No routes are deleted from router.tsx — only sidebar nav links are reorganized.