feat: copilot-first dashboard — chat-style input with file support

Redesign dashboard as copilot-first experience:
- Large auto-growing textarea with paste/drag-drop file support
- Attach button for native file picker (images, logs, docs)
- Paste Logs expandable textarea for raw error output
- Suggestion chips for common issues (VPN, Outlook, lockout, etc.)
- Remove Guided/Chat toggle — copilot is always the default
- Collapsible Dashboard section for stats/KB/team summary
- Centered layout with "What are you troubleshooting?" hero

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/pages/QuickStartPage.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import { PageMeta } from '@/components/common/PageMeta'
 import { useAuthStore } from '@/store/authStore'
 import { StartSessionInput } from '@/components/dashboard/StartSessionInput'
@@ -7,61 +8,76 @@ 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'
+import { ChevronDown } from 'lucide-react'
+import { cn } from '@/lib/utils'
 
 export function QuickStartPage() {
   const user = useAuthStore((s) => s.user)
+  const [dashboardExpanded, setDashboardExpanded] = useState(false)
+
+  const greeting = new Date().getHours() < 12
+    ? 'morning'
+    : new Date().getHours() < 18
+    ? 'afternoon'
+    : 'evening'
 
   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'}
+      <PageMeta title="ResolutionFlow" />
+      <div className="max-w-3xl mx-auto px-6 pt-12 pb-8">
+        {/* Hero: Greeting + Input */}
+        <div className="text-center mb-6">
+          <h1 className="font-heading text-2xl font-extrabold tracking-tight text-foreground">
+            Good {greeting}, {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 className="mt-1 text-base text-muted-foreground">
+            What are you troubleshooting?
           </p>
         </div>
 
-        {/* Onboarding */}
-        <OnboardingChecklist />
+        {/* Chat-style input */}
+        <StartSessionInput />
 
-        {/* 1. Start Session Input */}
-        <div className="fade-in" style={{ animationDelay: '200ms' }}>
-          <StartSessionInput />
+        {/* Pending Escalations (auto-hides if none) */}
+        <div className="mt-6">
+          <PendingEscalations />
         </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 />
+        {/* Active Sessions */}
+        <div className="mt-4">
+          <ActiveFlowPilotSessions />
         </div>
 
-        {/* 7. Recent Sessions */}
-        <RecentFlowPilotSessions />
+        {/* Recent Sessions */}
+        <div className="mt-4">
+          <RecentFlowPilotSessions />
+        </div>
+
+        {/* Collapsible Dashboard section */}
+        <div className="mt-8">
+          <button
+            type="button"
+            onClick={() => setDashboardExpanded(!dashboardExpanded)}
+            className="flex items-center gap-2 text-xs font-sans uppercase tracking-wide text-muted-foreground hover:text-foreground transition-colors w-full"
+          >
+            <div className="flex-1 h-px bg-border" />
+            <span className="flex items-center gap-1.5 px-3">
+              Dashboard
+              <ChevronDown size={12} className={cn('transition-transform', dashboardExpanded && 'rotate-180')} />
+            </span>
+            <div className="flex-1 h-px bg-border" />
+          </button>
+
+          {dashboardExpanded && (
+            <div className="mt-4 space-y-4 animate-fade-in">
+              <PerformanceCards />
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <KnowledgeBaseCards />
+                <TeamSummary />
+              </div>
+            </div>
+          )}
+        </div>
       </div>
     </div>
   )