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/components/dashboard/StartSessionInput.tsx

@@ -1,27 +1,50 @@
-import { useState, useRef, useEffect } from 'react'
+import { useState, useRef, useEffect, useCallback } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { Sparkles, MessageCircle } from 'lucide-react'
+import { Send, Paperclip, Terminal, Loader2, X, RotateCcw, ImagePlus } from 'lucide-react'
 import { cn } from '@/lib/utils'
+import { uploadsApi } from '@/api/uploads'
+import type { FileUploadResponse, PendingUpload } from '@/types/upload'
 
-type SessionMode = 'guided' | 'chat'
+const SUGGESTIONS = [
+  'VPN not connecting',
+  'Outlook not syncing',
+  'User locked out',
+  'Slow internet',
+  'Printer issues',
+  'MFA problems',
+]
+
+const ACCEPTED_FILE_TYPES = 'image/png,image/jpeg,image/gif,image/webp,.txt,.log,.csv,.pdf,.docx'
 
 export function StartSessionInput() {
-  const [mode, setMode] = useState<SessionMode>('guided')
   const [value, setValue] = useState('')
+  const [showLogs, setShowLogs] = useState(false)
+  const [logContent, setLogContent] = useState('')
+  const [pendingUploads, setPendingUploads] = useState<PendingUpload[]>([])
+  const [isDragOver, setIsDragOver] = useState(false)
   const navigate = useNavigate()
-  const inputRef = useRef<HTMLInputElement>(null)
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const dragCounterRef = useRef(0)
 
-  useEffect(() => { inputRef.current?.focus() }, [])
+  useEffect(() => { textareaRef.current?.focus() }, [])
+
+  // Auto-grow textarea
+  useEffect(() => {
+    const el = textareaRef.current
+    if (!el) return
+    el.style.height = 'auto'
+    el.style.height = `${Math.min(el.scrollHeight, 200)}px`
+  }, [value])
 
   const handleSubmit = () => {
     const trimmed = value.trim()
     if (!trimmed) return
-
+    const state: Record<string, unknown> = { prefill: trimmed }
-    if (mode === 'guided') {
+    if (logContent.trim()) {
-      navigate('/pilot', { state: { prefill: trimmed } })
+      state.logs = logContent.trim()
-    } else {
-      navigate('/assistant', { state: { prefill: trimmed } })
     }
+    navigate('/pilot', { state })
   }
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
@@ -31,58 +54,290 @@ export function StartSessionInput() {
     }
   }
 
+  const handleSuggestionClick = (suggestion: string) => {
+    navigate('/pilot', { state: { prefill: suggestion } })
+  }
+
+  // ── File handling ──────────────────────────────
+
+  const processFiles = useCallback((files: File[]) => {
+    if (files.length === 0) return
+
+    const newUploads: PendingUpload[] = files.map((file) => ({
+      id: crypto.randomUUID(),
+      file,
+      preview: file.type.startsWith('image/') ? URL.createObjectURL(file) : '',
+      status: 'uploading' as const,
+    }))
+
+    setPendingUploads((prev) => [...prev, ...newUploads])
+
+    newUploads.forEach((upload) => {
+      uploadsApi
+        .upload(upload.file)
+        .then((result) => {
+          setPendingUploads((prev) =>
+            prev.map((u) => u.id === upload.id ? { ...u, status: 'done' as const, result } : u)
+          )
+        })
+        .catch((err) => {
+          const errorMsg = err?.response?.status === 503
+            ? 'File uploads not available'
+            : err?.message || 'Upload failed'
+          setPendingUploads((prev) =>
+            prev.map((u) => u.id === upload.id ? { ...u, status: 'error' as const, error: errorMsg } : u)
+          )
+        })
+    })
+  }, [])
+
+  const handlePaste = useCallback((e: React.ClipboardEvent<HTMLTextAreaElement>) => {
+    const items = e.clipboardData?.items
+    if (!items) return
+    const imageFiles: File[] = []
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].type.startsWith('image/')) {
+        const file = items[i].getAsFile()
+        if (file) imageFiles.push(file)
+      }
+    }
+    if (imageFiles.length > 0) {
+      e.preventDefault()
+      processFiles(imageFiles)
+    }
+  }, [processFiles])
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    e.dataTransfer.dropEffect = 'copy'
+  }, [])
+
+  const handleDragEnter = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    dragCounterRef.current++
+    if (dragCounterRef.current === 1) setIsDragOver(true)
+  }, [])
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    dragCounterRef.current--
+    if (dragCounterRef.current === 0) setIsDragOver(false)
+  }, [])
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    dragCounterRef.current = 0
+    setIsDragOver(false)
+    processFiles(Array.from(e.dataTransfer.files))
+  }, [processFiles])
+
+  const handleFileSelect = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) {
+      processFiles(Array.from(e.target.files))
+      e.target.value = '' // reset so same file can be re-selected
+    }
+  }, [processFiles])
+
+  const handleRemoveUpload = useCallback((uploadId: string) => {
+    setPendingUploads((prev) => {
+      const toRemove = prev.find((u) => u.id === uploadId)
+      if (toRemove?.preview) URL.revokeObjectURL(toRemove.preview)
+      return prev.filter((u) => u.id !== uploadId)
+    })
+  }, [])
+
+  const retryUpload = useCallback((uploadId: string) => {
+    const upload = pendingUploads.find((u) => u.id === uploadId)
+    if (!upload) return
+    setPendingUploads((prev) =>
+      prev.map((u) => u.id === uploadId ? { ...u, status: 'uploading' as const, error: undefined } : u)
+    )
+    uploadsApi
+      .upload(upload.file)
+      .then((result) => {
+        setPendingUploads((prev) =>
+          prev.map((u) => u.id === uploadId ? { ...u, status: 'done' as const, result } : u)
+        )
+      })
+      .catch((err) => {
+        setPendingUploads((prev) =>
+          prev.map((u) => u.id === uploadId ? { ...u, status: 'error' as const, error: err?.message || 'Upload failed' } : u)
+        )
+      })
+  }, [pendingUploads])
+
+  // Cleanup blob URLs on unmount
+  useEffect(() => {
+    return () => {
+      pendingUploads.forEach((u) => { if (u.preview) URL.revokeObjectURL(u.preview) })
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const hasContent = value.trim().length > 0
+
   return (
-    <div className="card-flat overflow-hidden">
+    <div
-      <div className="px-5 py-4 sm:px-6 sm:py-5">
+      className="w-full"
-        <div className="relative">
+      onDragOver={handleDragOver}
-          <Sparkles
+      onDragEnter={handleDragEnter}
-            size={18}
+      onDragLeave={handleDragLeave}
-            className="absolute left-4 top-1/2 -translate-y-1/2 text-muted-foreground"
+      onDrop={handleDrop}
-          />
+    >
-          <input
+      {/* Main input area */}
-            ref={inputRef}
+      <div className={cn(
-            type="text"
+        'relative rounded-2xl border bg-card transition-all',
-            value={value}
+        isDragOver ? 'border-primary/50 bg-primary/5' : 'border-border',
-            onChange={(e) => setValue(e.target.value)}
+        'focus-within:border-[rgba(6,182,212,0.3)] focus-within:ring-1 focus-within:ring-primary/20'
-            onKeyDown={handleKeyDown}
+      )}>
-            placeholder="What are you troubleshooting?"
+        {/* Drag overlay */}
-            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"
+        {isDragOver && (
-          />
+          <div className="absolute inset-0 z-10 flex items-center justify-center rounded-2xl border-2 border-dashed border-primary/50 bg-primary/5 pointer-events-none">
-        </div>
+            <div className="flex items-center gap-2 text-sm text-primary">
-        <div className="mt-3 flex items-center justify-between">
+              <ImagePlus size={18} />
-          <div className="flex items-center gap-1 rounded-lg bg-secondary p-0.5">
+              Drop files to attach
-            <button
+            </div>
-              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-all duration-150',
-                mode === 'guided'
-                  ? 'bg-accent-dim text-foreground tab-active-shadow'
-                  : '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-all duration-150',
-                mode === 'chat'
-                  ? 'bg-accent-dim text-foreground tab-active-shadow'
-                  : '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>
+        {/* Textarea */}
+        <textarea
+          ref={textareaRef}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          onPaste={handlePaste}
+          placeholder="Describe the issue, paste an error message, or drop a screenshot..."
+          rows={3}
+          className="w-full resize-none bg-transparent px-5 pt-5 pb-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none"
+          style={{ minHeight: '80px', maxHeight: '200px' }}
+        />
+
+        {/* Thumbnail strip */}
+        {pendingUploads.length > 0 && (
+          <div className="flex gap-2 flex-wrap px-5 pb-2">
+            {pendingUploads.map((upload) => (
+              <div key={upload.id} className="relative w-14 h-14 rounded-lg overflow-hidden border border-border bg-background">
+                {upload.preview ? (
+                  <img src={upload.preview} alt="" className="w-full h-full object-cover" />
+                ) : (
+                  <div className="w-full h-full flex items-center justify-center text-[0.5rem] text-muted-foreground px-1 text-center">
+                    {upload.file.name.split('.').pop()?.toUpperCase()}
+                  </div>
+                )}
+                {upload.status === 'uploading' && (
+                  <div className="absolute inset-0 bg-background/60 flex items-center justify-center">
+                    <Loader2 size={14} className="animate-spin text-primary" />
+                  </div>
+                )}
+                {upload.status === 'done' && (
+                  <button
+                    type="button"
+                    onClick={() => handleRemoveUpload(upload.id)}
+                    className="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-background border border-border flex items-center justify-center hover:bg-rose-500/20 transition-colors"
+                  >
+                    <X size={8} className="text-muted-foreground" />
+                  </button>
+                )}
+                {upload.status === 'error' && (
+                  <div
+                    className="absolute inset-0 bg-rose-500/20 border-2 border-rose-500 flex items-center justify-center cursor-pointer"
+                    onClick={() => retryUpload(upload.id)}
+                  >
+                    <RotateCcw size={12} className="text-rose-500" />
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Logs textarea (expandable) */}
+        {showLogs && (
+          <div className="px-5 pb-2">
+            <div className="flex items-center justify-between mb-1">
+              <span className="text-[0.625rem] uppercase tracking-wide text-muted-foreground font-sans">Paste logs or error output</span>
+              <button type="button" onClick={() => { setShowLogs(false); setLogContent('') }} className="text-muted-foreground hover:text-foreground">
+                <X size={14} />
+              </button>
+            </div>
+            <textarea
+              value={logContent}
+              onChange={(e) => setLogContent(e.target.value)}
+              placeholder="Paste event viewer logs, error messages, PowerShell output..."
+              rows={4}
+              className="w-full resize-none rounded-lg border border-border bg-background p-3 font-mono text-xs text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none"
+            />
+          </div>
+        )}
+
+        {/* Bottom toolbar */}
+        <div className="flex items-center justify-between px-4 py-2.5 border-t border-border/50">
+          <div className="flex items-center gap-1">
+            {/* Attach button */}
+            <input
+              ref={fileInputRef}
+              type="file"
+              multiple
+              accept={ACCEPTED_FILE_TYPES}
+              onChange={handleFileSelect}
+              className="hidden"
+            />
+            <button
+              type="button"
+              onClick={() => fileInputRef.current?.click()}
+              className="flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
+              title="Attach files"
+            >
+              <Paperclip size={14} />
+              <span className="hidden sm:inline">Attach</span>
+            </button>
+
+            {/* Paste Logs button */}
+            {!showLogs && (
+              <button
+                type="button"
+                onClick={() => setShowLogs(true)}
+                className="flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
+                title="Paste logs or error output"
+              >
+                <Terminal size={14} />
+                <span className="hidden sm:inline">Paste Logs</span>
+              </button>
+            )}
+          </div>
+
+          {/* Send button */}
+          <button
+            type="button"
+            onClick={handleSubmit}
+            disabled={!hasContent}
+            className={cn(
+              'flex h-8 w-8 items-center justify-center rounded-lg transition-all',
+              hasContent
+                ? 'bg-primary text-white hover:brightness-110 active:scale-95'
+                : 'bg-secondary text-muted-foreground cursor-not-allowed'
+            )}
+            title="Start session"
+          >
+            <Send size={15} />
+          </button>
         </div>
       </div>
+
+      {/* Suggestion chips */}
+      <div className="flex flex-wrap gap-2 mt-3">
+        {SUGGESTIONS.map((s) => (
+          <button
+            key={s}
+            type="button"
+            onClick={() => handleSuggestionClick(s)}
+            className="rounded-full border border-border px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:border-primary/30 hover:bg-primary/5 transition-colors"
+          >
+            {s}
+          </button>
+        ))}
+      </div>
     </div>
   )
 }

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" />
+      <PageMeta title="ResolutionFlow" />
-      <div className="p-6 space-y-5 max-w-5xl mx-auto">
+      <div className="max-w-3xl mx-auto px-6 pt-12 pb-8">
-        {/* Greeting */}
+        {/* Hero: Greeting + Input */}
-        <div className="fade-in" style={{ animationDelay: '100ms' }}>
+        <div className="text-center mb-6">
-          <h1 className="font-heading text-3xl font-extrabold tracking-tight text-foreground">
+          <h1 className="font-heading text-2xl font-extrabold tracking-tight text-foreground">
-            Good{' '}
+            Good {greeting}, {user?.name?.split(' ')[0] || 'there'}
-            {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">
+          <p className="mt-1 text-base text-muted-foreground">
-            {new Date().toLocaleDateString('en-US', {
+            What are you troubleshooting?
-              weekday: 'long',
-              month: 'long',
-              day: 'numeric',
-              year: 'numeric',
-            })}
           </p>
         </div>
 
-        {/* Onboarding */}
+        {/* Chat-style input */}
-        <OnboardingChecklist />
+        <StartSessionInput />
 
-        {/* 1. Start Session Input */}
+        {/* Pending Escalations (auto-hides if none) */}
-        <div className="fade-in" style={{ animationDelay: '200ms' }}>
+        <div className="mt-6">
-          <StartSessionInput />
+          <PendingEscalations />
         </div>
 
-        {/* 2. Pending Escalations (auto-hides if none) */}
+        {/* Active Sessions */}
-        <PendingEscalations />
+        <div className="mt-4">
-
+          <ActiveFlowPilotSessions />
-        {/* 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 */}
+        {/* Recent Sessions */}
-        <RecentFlowPilotSessions />
+        <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>
   )