feat(dashboard): FlowPilot cockpit dashboard + sidebar redesign

- Replace QuickStartPage with FlowPilot-centric dashboard
- Add StartSessionInput with Guided/Chat mode toggle
- Add PendingEscalations, ActiveFlowPilotSessions, PerformanceCards
- Add KnowledgeBaseCards, TeamSummary, RecentFlowPilotSessions
- Every number/card is a portal to its detail page
- Restructure sidebar: Resolve/Knowledge/Insights sections
- Remove redundant nav items (FlowPilot, Flow Editor, Flow Assist, etc.)
- Wire prefill from dashboard input to FlowPilot intake
- Update mobile nav to match new sidebar structure

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/components/dashboard/ActiveFlowPilotSessions.tsx

@@ -0,0 +1,111 @@
+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>
+  )
+}

frontend/src/components/dashboard/KnowledgeBaseCards.tsx

@@ -0,0 +1,53 @@
+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: '\u2014', icon: Code2, color: '#2dd4bf', href: '/scripts' },
+    { label: 'Pending Review', value: '\u2014', 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>
+  )
+}

frontend/src/components/dashboard/PendingEscalations.tsx

@@ -0,0 +1,87 @@
+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>
+  )
+}

frontend/src/components/dashboard/PerformanceCards.tsx

@@ -0,0 +1,95 @@
+import { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { CheckCircle, Clock, TrendingUp, Timer } 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` : '\u2014',
+      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` : '\u2014',
+      icon: Timer,
+      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>
+  )
+}

frontend/src/components/dashboard/RecentFlowPilotSessions.tsx

@@ -0,0 +1,85 @@
+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 }> = {
+  resolved: { icon: CheckCircle, color: '#34d399' },
+  escalated: { icon: AlertTriangle, color: '#fbbf24' },
+  abandoned: { icon: XCircle, color: '#8891a0' },
+}
+
+export function RecentFlowPilotSessions() {
+  const [sessions, setSessions] = useState<AISessionSummary[]>([])
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    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>
+  )
+}

frontend/src/components/dashboard/StartSessionInput.tsx

@@ -0,0 +1,88 @@
+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)
+
+  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>
+  )
+}

frontend/src/components/dashboard/TeamSummary.tsx

@@ -0,0 +1,58 @@
+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: '\u2014', icon: Activity, color: '#22d3ee', href: '/analytics' },
+    { label: 'Members', value: '\u2014', 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>
+  )
+}

frontend/src/components/flowpilot/FlowPilotIntake.tsx

@@ -10,10 +10,11 @@ import type { FileUploadResponse } from '@/types/upload'
 interface FlowPilotIntakeProps {
   onSubmit: (request: AISessionCreateRequest) => void
   isLoading: boolean
+  defaultProblem?: string
 }
 
-export function FlowPilotIntake({ onSubmit, isLoading }: FlowPilotIntakeProps) {
-  const [text, setText] = useState('')
+export function FlowPilotIntake({ onSubmit, isLoading, defaultProblem }: FlowPilotIntakeProps) {
+  const [text, setText] = useState(defaultProblem || '')
   const [showLogs, setShowLogs] = useState(false)
   const [logContent, setLogContent] = useState('')
   const [showTicketPicker, setShowTicketPicker] = useState(false)

frontend/src/components/layout/AppLayout.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState, useCallback } from 'react'
 import { useLocation, useNavigate, Link } from 'react-router-dom'
-import { Menu, X, LayoutGrid, Box, PenLine, Clock, FileText, Bookmark, Settings, LogOut, Shield, Terminal } from 'lucide-react'
+import { Menu, X, LayoutGrid, Clock, Network, AlertTriangle, Code2, BarChart3, Settings, LogOut, Shield, Library } from 'lucide-react'
 import { useAuthStore } from '@/store/authStore'
 import { usePermissions } from '@/hooks/usePermissions'
 import { useUserPreferencesStore } from '@/store/userPreferencesStore'
@@ -52,12 +52,12 @@ export function AppLayout() {
 
   const mobileNavItems = [
     { path: '/', label: 'Dashboard', icon: LayoutGrid },
-    { path: '/trees', label: 'All Flows', icon: Box },
-    { path: '/my-trees', label: 'My Flows', icon: PenLine },
-    { path: '/sessions', label: 'Sessions', icon: Clock },
-    { path: '/shares', label: 'Exports', icon: FileText },
-    { path: '/step-library', label: 'Step Library', icon: Bookmark },
-    { path: '/scripts', label: 'Script Library', icon: Terminal },
+    { path: '/sessions', label: 'Active Sessions', icon: Clock },
+    { path: '/escalations', label: 'Escalations', icon: AlertTriangle },
+    { path: '/trees', label: 'Flows', icon: Network },
+    { path: '/step-library', label: 'Step Library', icon: Library },
+    { path: '/scripts', label: 'Scripts', icon: Code2 },
+    { path: '/analytics', label: 'Analytics', icon: BarChart3 },
     { path: '/account', label: 'Account', icon: Settings },
   ]
 

frontend/src/components/layout/Sidebar.tsx

@@ -1,30 +1,24 @@
 import { useCallback, useEffect, useState } from 'react'
 import { useLocation } from 'react-router-dom'
 import {
-  LayoutGrid, Network, Wrench, Clock, FileOutput, BarChart3, TrendingUp,
+  LayoutGrid, Network, Clock, FileOutput, BarChart3, TrendingUp,
   Settings, PanelLeftClose, PanelLeftOpen, MessageSquareText, ListChecks,
-  BookOpen, Lightbulb, Code2, Library, Brain, WandSparkles, Sparkles, AlertTriangle,
+  BookOpen, Code2, Library, AlertTriangle,
 } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { useUserPreferencesStore } from '@/store/userPreferencesStore'
 import { sidebarApi } from '@/api'
 import type { SidebarStatsResponse } from '@/api/sidebar'
-import { SidebarStatsBar } from '@/components/sidebar/SidebarStatsBar'
-import { SidebarActivityFeed } from '@/components/sidebar/SidebarActivityFeed'
 import { NavItem } from './NavItem'
 
 // Semantic icon colors — each nav item gets a unique color for visual landmarks
 const NAV_COLORS = {
   dashboard: '#22d3ee',  // cyan-400
   flows:     '#a78bfa',  // violet-400
-  editor:    '#f59e0b',  // amber-500
   sessions:  '#34d399',  // emerald-400
   exports:   '#60a5fa',  // blue-400
-  flowPilot: '#e879f9',  // fuchsia-400
-  flowAssist:'#f472b6',  // pink-400
   stepLib:   '#fb923c',  // orange-400
   scripts:   '#2dd4bf',  // teal-400
-  kb:        '#fb7185',  // rose-400
   analytics: '#38bdf8',  // sky-400
   guides:    '#a3e635',  // lime-400
   feedback:  '#818cf8',  // indigo-400
@@ -83,17 +77,12 @@ export function Sidebar() {
         <>
           {/* Collapsed: icon-only nav */}
           <div className="flex flex-col items-center px-1.5 py-3 space-y-1">
-            <NavItem href="/pilot" icon={Sparkles} label="New Session" iconColor={NAV_COLORS.dashboard} collapsed />
             <NavItem href="/" icon={LayoutGrid} label="Dashboard" iconColor={NAV_COLORS.dashboard} collapsed />
-            <NavItem href="/sessions" icon={Clock} label="Sessions" badge={stats?.active_count || undefined} iconColor={NAV_COLORS.sessions} collapsed />
+            <NavItem href="/sessions" icon={Clock} label="Active Sessions" badge={stats?.active_count || undefined} iconColor={NAV_COLORS.sessions} collapsed />
             <NavItem href="/escalations" icon={AlertTriangle} label="Escalations" iconColor="#fbbf24" collapsed />
-            <NavItem href="/trees" icon={Network} label="All Flows" matchPaths={['/trees', '/flows']} iconColor={NAV_COLORS.flows} collapsed />
-            <NavItem href="/assistant" icon={Brain} label="FlowPilot" iconColor={NAV_COLORS.flowPilot} collapsed />
-            <NavItem href="/scripts" icon={Code2} label="Script Library" iconColor={NAV_COLORS.scripts} collapsed />
-            <NavItem href="/my-trees" icon={Wrench} label="Flow Editor" iconColor={NAV_COLORS.editor} collapsed />
-            <NavItem href="/flow-assist" icon={WandSparkles} label="Flow Assist" iconColor={NAV_COLORS.flowAssist} collapsed />
+            <NavItem href="/trees" icon={Network} label="Flows" matchPaths={['/trees', '/flows', '/my-trees']} iconColor={NAV_COLORS.flows} collapsed />
             <NavItem href="/step-library" icon={Library} label="Step Library" iconColor={NAV_COLORS.stepLib} collapsed />
-            <NavItem href="/kb-accelerator" icon={Lightbulb} label="KB Accelerator" iconColor={NAV_COLORS.kb} collapsed />
+            <NavItem href="/scripts" icon={Code2} label="Scripts" iconColor={NAV_COLORS.scripts} collapsed />
             <NavItem href="/review-queue" icon={ListChecks} label="Review Queue" iconColor="#fbbf24" collapsed />
             <NavItem href="/shares" icon={FileOutput} label="Exports" iconColor={NAV_COLORS.exports} collapsed />
             <NavItem href="/analytics" icon={BarChart3} label="Analytics" iconColor={NAV_COLORS.analytics} collapsed />
@@ -104,65 +93,37 @@ export function Sidebar() {
         </>
       ) : (
         <>
-          {/* Stats Bar */}
-          <SidebarStatsBar
-            resolved={stats?.resolved_today ?? 0}
-            active={stats?.active_count ?? 0}
-            completedMinutes={stats?.total_session_minutes_today ?? 0}
-            activeSessionStartTimes={stats?.active_sessions.map(s => s.started_at) ?? []}
-          />
-
-          {/* Activity Feed */}
-          <SidebarActivityFeed
-            activeSessions={stats?.active_sessions ?? []}
-            recentCompletions={stats?.recent_completions ?? []}
-            totalActive={stats?.active_count ?? 0}
-          />
-
-          <div style={{ borderBottom: '1px solid var(--glass-border)' }} />
-
-          {/* New Session CTA */}
-          <div className="px-3 pt-2 pb-1">
-            <NavItem href="/pilot" icon={Sparkles} label="New Session" iconColor={NAV_COLORS.dashboard} />
-          </div>
-
-          <div style={{ borderBottom: '1px solid var(--glass-border)' }} />
-
           {/* Navigation */}
           <div className="px-3 py-2 space-y-0.5">
-            {/* Dashboard (standalone) */}
+            {/* 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" icon={Clock} label="Sessions" badge={stats?.active_count || undefined} iconColor={NAV_COLORS.sessions} />
+            <NavItem href="/sessions" icon={Clock} label="Active Sessions" badge={stats?.active_count || undefined} iconColor={NAV_COLORS.sessions} matchPaths={['/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="All Flows"
+              label="Flows"
               badge={stats?.tree_counts.total || undefined}
               iconColor={NAV_COLORS.flows}
-              matchPaths={['/trees', '/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="/assistant" icon={Brain} label="FlowPilot" iconColor={NAV_COLORS.flowPilot} />
-            <NavItem href="/scripts" icon={Code2} label="Script Library" iconColor={NAV_COLORS.scripts} />
-
-            {/* Build */}
-            <div className="font-label text-[0.5625rem] uppercase tracking-[0.12em] text-[#5a6170] px-3 pt-3 pb-1">
-              Build
-            </div>
-            <NavItem href="/my-trees" icon={Wrench} label="Flow Editor" iconColor={NAV_COLORS.editor} />
-            <NavItem href="/flow-assist" icon={WandSparkles} label="Flow Assist" iconColor={NAV_COLORS.flowAssist} />
             <NavItem href="/step-library" icon={Library} label="Step Library" iconColor={NAV_COLORS.stepLib} />
-            <NavItem href="/kb-accelerator" icon={Lightbulb} label="KB Accelerator" iconColor={NAV_COLORS.kb} />
+            <NavItem href="/scripts" icon={Code2} label="Scripts" iconColor={NAV_COLORS.scripts} />
             <NavItem href="/review-queue" icon={ListChecks} label="Review Queue" iconColor="#fbbf24" />
 
             {/* Insights */}

frontend/src/pages/FlowPilotSessionPage.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { useParams, useSearchParams } from 'react-router-dom'
+import { useParams, useSearchParams, useLocation } from 'react-router-dom'
 import { Sparkles, Loader2 } from 'lucide-react'
 import { useFlowPilotSession } from '@/hooks/useFlowPilotSession'
 import { FlowPilotIntake, FlowPilotSession, SessionBriefing } from '@/components/flowpilot'
@@ -9,6 +9,8 @@ import { toast } from '@/lib/toast'
 export default function FlowPilotSessionPage() {
   const { sessionId } = useParams<{ sessionId?: string }>()
   const [searchParams, setSearchParams] = useSearchParams()
+  const location = useLocation()
+  const prefill = (location.state as { prefill?: string } | null)?.prefill || ''
   const isPickup = searchParams.get('pickup') === 'true'
   const fp = useFlowPilotSession()
   const [pickingUp, setPickingUp] = useState(false)
@@ -84,7 +86,7 @@ export default function FlowPilotSessionPage() {
   if (!fp.session) {
     return (
       <div className="h-full p-6">
-        <FlowPilotIntake onSubmit={fp.startSession} isLoading={fp.isLoading} />
+        <FlowPilotIntake onSubmit={fp.startSession} isLoading={fp.isLoading} defaultProblem={prefill} />
       </div>
     )
   }

frontend/src/pages/QuickStartPage.tsx

@@ -1,581 +1,68 @@
-import { useState, useEffect, useRef, useCallback } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { Search, Loader2, ChevronLeft, ChevronRight, GitBranch } from 'lucide-react'
 import { PageMeta } from '@/components/common/PageMeta'
-import { treesApi } from '@/api/trees'
-import { sessionsApi } from '@/api/sessions'
-import type { TreeListItem, TreeFilters } from '@/types'
-import type { Session } from '@/types/session'
-import { getTreeNavigatePath } from '@/lib/routing'
-import { usePermissions } from '@/hooks/usePermissions'
 import { useAuthStore } from '@/store/authStore'
-import { useUserPreferencesStore } from '@/store/userPreferencesStore'
-import { usePaginationParams } from '@/hooks/usePaginationParams'
-import { useCachedQuota } from '@/hooks/useCachedQuota'
-// QuickStats and SessionsPanel replaced by new dashboard panels
-import { TreeGridView } from '@/components/library/TreeGridView'
-import { TreeListView } from '@/components/library/TreeListView'
-import { TreeTableView } from '@/components/library/TreeTableView'
-import { ViewToggle } from '@/components/library/ViewToggle'
-
-import { CreateFlowDropdown } from '@/components/common/CreateFlowDropdown'
-import { cn } from '@/lib/utils'
-import { toast } from '@/lib/toast'
-import { WeeklyCalendar } from '@/components/dashboard/WeeklyCalendar'
-import { QuickActions } from '@/components/dashboard/QuickActions'
-import { OpenSessions } from '@/components/dashboard/OpenSessions'
-import { RecentActivity } from '@/components/dashboard/RecentActivity'
-import { PreparedSessions } from '@/components/dashboard/PreparedSessions'
+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'
 
-function timeAgo(dateStr: string): string {
-  const now = Date.now()
-  const then = new Date(dateStr).getTime()
-  const diffMs = now - then
-  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`
-}
-
 export function QuickStartPage() {
-  const navigate = useNavigate()
-  const { canCreateTrees } = usePermissions()
   const user = useAuthStore((s) => s.user)
 
-  // Search state
-  const [query, setQuery] = useState('')
-  const [searchResults, setSearchResults] = useState<TreeListItem[]>([])
-  const [isSearching, setIsSearching] = useState(false)
-  const [showResults, setShowResults] = useState(false)
-  const searchRef = useRef<HTMLDivElement>(null)
-  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-
-  // Sessions state
-  const [activeSessions, setActiveSessions] = useState<Session[]>([])
-  const [allSessions, setAllSessions] = useState<Session[]>([])
-
-  // My Flows state
-  const [myFlows, setMyFlows] = useState<TreeListItem[]>([])
-  const [isLoadingFlows, setIsLoadingFlows] = useState(true)
-  const [hasNextPage, setHasNextPage] = useState(false)
-  const [allFlowsCeiling, setAllFlowsCeiling] = useState(false)
-
-  // Favorites state
-
-
-  // AI Builder
-  const { aiEnabled } = useCachedQuota()
-
-  // Tab state
-  type Tab = 'mine' | 'team' | 'public' | 'all'
-  const hasTeam = Boolean(user?.account_id)
-  const [activeTab, setActiveTab] = useState<Tab>('mine')
-
-  // Fork modal state
-  const [forkTarget, setForkTarget] = useState<TreeListItem | null>(null)
-  const [forkReason, setForkReason] = useState('')
-  const [isForking, setIsForking] = useState(false)
-
-  // Preferences
-  const { dashboardMyFlowsView, setDashboardMyFlowsView } = useUserPreferencesStore()
-
-  // Pagination
-  const { page, pageSize, setPage, setPageSize } = usePaginationParams({
-    defaultPageSize: 10,
-    allowedPageSizes: [10, 25, 50, 'all'],
-  })
-
-
-
-  // Load sessions on mount
-  useEffect(() => {
-    Promise.all([
-      sessionsApi.list({ completed: false, size: 5 }).catch(() => []),
-      sessionsApi.list({ size: 10 }).catch(() => []),
-    ]).then(([active, recent]) => {
-      setActiveSessions(active)
-      setAllSessions(recent)
-    })
-  }, [])
-
-  // Load flows — tab-aware
-  const loadFlows = useCallback(async () => {
-    if (!user?.id) return
-    setIsLoadingFlows(true)
-    setAllFlowsCeiling(false)
-
-    try {
-      if (pageSize === 'all') {
-        let allItems: TreeListItem[] = []
-        let skip = 0
-        const CHUNK = 100
-        const MAX = 500
-
-        while (true) {
-          const params: TreeFilters = { sort_by: 'updated_at', limit: CHUNK, skip }
-          if (activeTab === 'mine') params.author_id = user.id
-          if (activeTab === 'team') params.visibility = 'team'
-          if (activeTab === 'public') { params.visibility = 'public'; params.sort_by = 'usage_count' }
-
-          const chunk = await treesApi.list(params)
-          allItems = [...allItems, ...chunk]
-          if (chunk.length < CHUNK || allItems.length >= MAX) {
-            if (allItems.length >= MAX) { allItems = allItems.slice(0, MAX); setAllFlowsCeiling(true) }
-            break
-          }
-          skip += CHUNK
-        }
-        setMyFlows(allItems)
-        setHasNextPage(false)
-      } else {
-        const numSize = pageSize as number
-        const params: TreeFilters = {
-          sort_by: activeTab === 'public' ? 'usage_count' : 'updated_at',
-          limit: numSize + 1,
-          skip: (page - 1) * numSize,
-        }
-        if (activeTab === 'mine') params.author_id = user.id
-        if (activeTab === 'team') params.visibility = 'team'
-        if (activeTab === 'public') params.visibility = 'public'
-
-        const response = await treesApi.list(params)
-        setHasNextPage(response.length > numSize)
-        setMyFlows(response.slice(0, numSize))
-      }
-    } catch {
-      // silently fail
-    } finally {
-      setIsLoadingFlows(false)
-    }
-  }, [user?.id, page, pageSize, activeTab])
-
-  useEffect(() => { loadFlows() }, [loadFlows])
-
-  // Reload on window focus (fixes stale data after returning from editor)
-  useEffect(() => {
-    const onFocus = () => loadFlows()
-    window.addEventListener('focus', onFocus)
-    return () => window.removeEventListener('focus', onFocus)
-  }, [loadFlows])
-
-  // Debounced search with staleness guard
-  const searchRequestId = useRef(0)
-  useEffect(() => {
-    if (debounceRef.current) clearTimeout(debounceRef.current)
-    if (query.length < 2) {
-      setSearchResults([])
-      setShowResults(false)
-      setIsSearching(false)
-      return
-    }
-    setIsSearching(true)
-    setShowResults(true)
-    debounceRef.current = setTimeout(async () => {
-      const requestId = ++searchRequestId.current
-      try {
-        const results = await treesApi.search(query, 8)
-        if (requestId !== searchRequestId.current) return
-        setSearchResults(results)
-      } catch {
-        if (requestId !== searchRequestId.current) return
-        setSearchResults([])
-      } finally {
-        if (requestId === searchRequestId.current) setIsSearching(false)
-      }
-    }, 300)
-    return () => { if (debounceRef.current) clearTimeout(debounceRef.current) }
-  }, [query])
-
-  // Close search dropdown on outside click
-  useEffect(() => {
-    function handleClick(e: MouseEvent) {
-      if (searchRef.current && !searchRef.current.contains(e.target as Node)) {
-        setShowResults(false)
-      }
-    }
-    document.addEventListener('mousedown', handleClick)
-    return () => document.removeEventListener('mousedown', handleClick)
-  }, [])
-
-  // Stats
-  const openSessions = activeSessions.length
-  const todaySessions = allSessions.filter(s => {
-    if (!s.started_at) return false
-    const d = new Date(s.started_at)
-    const now = new Date()
-    return d.toDateString() === now.toDateString()
-  }).length
-  // completedSessions removed — no longer displayed in new layout
-
-  // Open sessions for the new panel (3 oldest)
-  const openSessionItems = activeSessions
-    .filter(s => s.started_at) // Exclude prepared sessions (started_at is null)
-    .sort((a, b) => new Date(a.started_at!).getTime() - new Date(b.started_at!).getTime())
-    .slice(0, 3)
-    .map(s => ({
-      id: s.id,
-      treeName: s.tree_snapshot?.name || 'Unknown',
-      treeId: s.tree_id,
-      treeType: (s.tree_snapshot as unknown as Record<string, unknown>)?.tree_type as string | undefined,
-      timeAgo: timeAgo(s.started_at!),
-    }))
-
-  // recentSessionItems removed — replaced by RecentActivity component
-
-  // Handlers
-  const handleStartSession = (treeId: string, treeType?: string) => {
-    navigate(getTreeNavigatePath(treeId, treeType))
-  }
-
-  const handleDeleteTree = () => {} // Not used on dashboard
-  const handleTagClick = () => {} // Not used on dashboard
-  const handleFolderCreated = () => {} // Not used on dashboard
-
-  const handleFork = async () => {
-    if (!forkTarget) return
-    setIsForking(true)
-    try {
-      const forked = await treesApi.fork(forkTarget.id, {
-        fork_reason: forkReason.trim() || undefined,
-      })
-      toast.success(`"${forked.name}" added to your flows`)
-      setForkTarget(null)
-      setForkReason('')
-      setActiveTab('mine')
-    } catch {
-      toast.error('Failed to fork flow')
-    } finally {
-      setIsForking(false)
-    }
-  }
-
-  // Page size options
-  const pageSizeOptions: (number | 'all')[] = [10, 25, 50, 'all']
-
-  // Tabs
-  const tabs: { id: Tab; label: string }[] = [
-    { id: 'mine', label: 'My Flows' },
-    ...(hasTeam ? [{ id: 'team' as Tab, label: 'My Team' }] : []),
-    { id: 'public', label: 'Public' },
-    { id: 'all', label: 'All' },
-  ]
-
   return (
     <div className="overflow-y-auto h-full">
-    <PageMeta title="Dashboard" />
-    <div className="p-6 space-y-6">
-      {/* Greeting */}
-      <div className="fade-in" style={{ animationDelay: '100ms' }}>
-        <h1 className="font-heading text-4xl 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>
+      <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>
-
-      {/* Onboarding Checklist */}
-      <OnboardingChecklist />
-
-      {/* Row 1: Calendar + Quick Actions */}
-      <div className="flex gap-4" style={{ alignItems: 'stretch' }}>
-        <div className="flex-1 min-w-0">
-          <WeeklyCalendar />
-        </div>
-        <div className="w-72 shrink-0">
-          <QuickActions />
-        </div>
-      </div>
-
-      {/* Row 2: Open Sessions + Stats 2x2 */}
-      <div className="flex gap-4" style={{ alignItems: 'stretch' }}>
-        <div className="flex-1 min-w-0">
-          <OpenSessions sessions={openSessionItems} />
-        </div>
-        <div className="w-72 shrink-0">
-          <div className="grid grid-cols-2 gap-3 h-full">
-            {[
-              { label: 'Active Flows', value: myFlows.length, gradient: true, glow: true },
-              { label: 'This Week', value: todaySessions },
-              { label: 'Open Sessions', value: openSessions },
-            ].map((stat, i) => (
-              <div
-                key={stat.label}
-                className={cn('glass-card p-4 flex flex-col justify-between fade-in', stat.glow && 'active-glow')}
-                style={{ animationDelay: `${500 + i * 70}ms` }}
-              >
-                <p className="font-label text-[0.625rem] font-medium uppercase tracking-widest text-muted-foreground">
-                  {stat.label}
-                </p>
-                <p className={cn('font-heading text-2xl font-extrabold tracking-tight', stat.gradient && 'text-gradient-brand')}>
-                  {stat.value}
-                </p>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      {/* Row 3: Prepared Sessions (only visible when sessions exist) */}
-      <PreparedSessions />
-
-      {/* Row 4: Recent Activity */}
-      <RecentActivity />
-
-      {/* ── Existing content below ── */}
-      <div style={{ borderTop: '1px solid var(--glass-border)' }} className="pt-6 space-y-6">
-
-        {/* Search */}
-        <div ref={searchRef} className="relative">
-          <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
-          <input
-            type="text"
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            onFocus={() => query.length >= 2 && setShowResults(true)}
-            placeholder="Search flows, sessions, tags…"
-            className="w-full rounded-lg border border-border bg-card py-2.5 pl-9 pr-4 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
-          />
-          {showResults && (
-            <div className="absolute z-10 mt-1 w-full rounded-lg border border-border bg-card shadow-xl overflow-hidden">
-              {isSearching ? (
-                <div className="flex items-center justify-center py-6">
-                  <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
-                </div>
-              ) : searchResults.length === 0 ? (
-                <div className="px-4 py-6 text-center text-sm text-muted-foreground">No results found</div>
-              ) : (
-                <ul className="max-h-72 overflow-y-auto py-1">
-                  {searchResults.map((tree) => (
-                    <li key={tree.id}>
-                      <button
-                        onClick={() => navigate(getTreeNavigatePath(tree.id, tree.tree_type))}
-                        className="w-full px-4 py-3 text-left transition-colors hover:bg-accent"
-                      >
-                        <div className="text-sm font-medium text-foreground">{tree.name}</div>
-                        {tree.description && (
-                          <div className="mt-0.5 line-clamp-1 text-xs text-muted-foreground">{tree.description}</div>
-                        )}
-                      </button>
-                    </li>
-                  ))}
-                </ul>
-              )}
-            </div>
-          )}
-        </div>
-
-        {/* My Flows Section — tabbed */}
-        <div>
-          <div className="mb-3 flex items-center gap-1 border-b border-border">
-            {tabs.map((tab) => (
-              <button
-                key={tab.id}
-                type="button"
-                onClick={() => { setActiveTab(tab.id); setPage(1) }}
-                className={cn(
-                  'px-4 py-2.5 text-sm font-medium transition-colors border-b-2 -mb-px',
-                  activeTab === tab.id
-                    ? 'border-primary text-foreground'
-                    : 'border-transparent text-muted-foreground hover:text-foreground'
-                )}
-              >
-                {tab.label}
-              </button>
-            ))}
-            <div className="ml-auto flex items-center gap-2 pb-1.5">
-              {activeTab === 'mine' && canCreateTrees && (
-                <CreateFlowDropdown
-                  aiEnabled={aiEnabled}
-
-                />
-              )}
-              <ViewToggle view={dashboardMyFlowsView} onChange={setDashboardMyFlowsView} />
-            </div>
-          </div>
-
-          {isLoadingFlows ? (
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-              {Array.from({ length: 6 }).map((_, i) => (
-                <div key={i} className="h-32 rounded-xl bg-card border border-border animate-pulse" />
-              ))}
-            </div>
-          ) : myFlows.length === 0 ? (
-            <div className="py-12 text-center">
-              <p className="text-muted-foreground mb-4">
-                {activeTab === 'mine'
-                  ? "You haven't created any flows yet."
-                  : activeTab === 'team'
-                  ? 'No team flows found.'
-                  : activeTab === 'public'
-                  ? 'No public flows found.'
-                  : 'No flows found.'}
-              </p>
-              {activeTab === 'mine' && canCreateTrees && (
-                <CreateFlowDropdown
-                  aiEnabled={aiEnabled}
-
-                  label="Create your first flow"
-                />
-              )}
-            </div>
-          ) : (
-            <>
-              {allFlowsCeiling && (
-                <p className="mb-3 text-sm text-muted-foreground">
-                  Showing first 500 flows. Use search or filters to find specific flows.
-                </p>
-              )}
-
-              {dashboardMyFlowsView === 'grid' && (
-                <TreeGridView
-                  trees={myFlows}
-                  onStartSession={handleStartSession}
-                  onTagClick={handleTagClick}
-                  onFolderCreated={handleFolderCreated}
-                  onDeleteTree={handleDeleteTree}
-                />
-              )}
-              {dashboardMyFlowsView === 'list' && (
-                <TreeListView
-                  trees={myFlows}
-                  onStartSession={handleStartSession}
-                  onTagClick={handleTagClick}
-                  onFolderCreated={handleFolderCreated}
-                  onDeleteTree={handleDeleteTree}
-                />
-              )}
-              {dashboardMyFlowsView === 'table' && (
-                <TreeTableView
-                  trees={myFlows}
-                  onStartSession={handleStartSession}
-                  onTagClick={handleTagClick}
-                  onFolderCreated={handleFolderCreated}
-                  onDeleteTree={handleDeleteTree}
-                />
-              )}
-
-              {/* Pagination controls */}
-              {pageSize !== 'all' && (
-                <div className="mt-4 flex items-center justify-between">
-                  <div className="flex items-center gap-2">
-                    <button
-                      onClick={() => setPage(page - 1)}
-                      disabled={page <= 1}
-                      className={cn(
-                        'flex items-center gap-1 rounded-md border border-border px-3 py-1.5 text-sm transition-colors',
-                        page <= 1 ? 'opacity-50 cursor-not-allowed' : 'hover:bg-accent'
-                      )}
-                    >
-                      <ChevronLeft size={14} />
-                      Prev
-                    </button>
-                    <span className="text-sm text-muted-foreground">Page {page}</span>
-                    <button
-                      onClick={() => setPage(page + 1)}
-                      disabled={!hasNextPage}
-                      className={cn(
-                        'flex items-center gap-1 rounded-md border border-border px-3 py-1.5 text-sm transition-colors',
-                        !hasNextPage ? 'opacity-50 cursor-not-allowed' : 'hover:bg-accent'
-                      )}
-                    >
-                      Next
-                      <ChevronRight size={14} />
-                    </button>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <span className="text-sm text-muted-foreground">Show:</span>
-                    <select
-                      value={String(pageSize)}
-                      onChange={(e) => {
-                        const val = e.target.value
-                        setPageSize(val === 'all' ? 'all' : parseInt(val, 10))
-                      }}
-                      className="rounded-md border border-border bg-card px-2 py-1 text-sm text-foreground focus:border-primary focus:outline-hidden"
-                    >
-                      {pageSizeOptions.map((opt) => (
-                        <option key={String(opt)} value={String(opt)}>
-                          {opt === 'all' ? 'All' : opt}
-                        </option>
-                      ))}
-                    </select>
-                  </div>
-                </div>
-              )}
-              {pageSize === 'all' && (
-                <div className="mt-4 flex items-center justify-end">
-                  <div className="flex items-center gap-2">
-                    <span className="text-sm text-muted-foreground">Show:</span>
-                    <select
-                      value="all"
-                      onChange={(e) => {
-                        const val = e.target.value
-                        setPageSize(val === 'all' ? 'all' : parseInt(val, 10))
-                      }}
-                      className="rounded-md border border-border bg-card px-2 py-1 text-sm text-foreground focus:border-primary focus:outline-hidden"
-                    >
-                      {pageSizeOptions.map((opt) => (
-                        <option key={String(opt)} value={String(opt)}>
-                          {opt === 'all' ? 'All' : opt}
-                        </option>
-                      ))}
-                    </select>
-                  </div>
-                </div>
-              )}
-            </>
-          )}
-        </div>
-      </div>
-
-      {/* Fork Modal */}
-      {forkTarget && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-xs">
-          <div className="w-full max-w-sm rounded-xl border border-border bg-card p-5 shadow-xl">
-            <h3 className="mb-1 text-sm font-semibold text-foreground">Fork this flow?</h3>
-            <p className="mb-4 text-xs text-muted-foreground">
-              Creates a copy of &ldquo;{forkTarget.name}&rdquo; under your account that you can edit freely.
-            </p>
-            <label className="mb-1 block text-xs text-muted-foreground">
-              Why are you forking? <span className="opacity-60">(optional)</span>
-            </label>
-            <input
-              type="text"
-              value={forkReason}
-              onChange={(e) => setForkReason(e.target.value)}
-              placeholder="e.g. Adding Cisco Meraki steps for our network"
-              maxLength={255}
-              className="mb-4 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
-              onKeyDown={(e) => e.key === 'Enter' && handleFork()}
-            />
-            <div className="flex gap-2">
-              <button
-                type="button"
-                onClick={handleFork}
-                disabled={isForking}
-                className="flex flex-1 items-center justify-center gap-1.5 rounded-lg bg-gradient-brand py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90 disabled:opacity-50"
-              >
-                <GitBranch className="h-3.5 w-3.5" />
-                {isForking ? 'Forking...' : 'Fork Flow'}
-              </button>
-              <button
-                type="button"
-                onClick={() => setForkTarget(null)}
-                className="rounded-lg border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent"
-              >
-                Cancel
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-
-    </div>
     </div>
   )
 }