feat(evidence): add RichTextInput with clipboard paste and wire into FlowPilot

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

frontend/src/components/common/RichTextInput.tsx

@@ -0,0 +1,285 @@
+import { useState, useRef, useEffect, useCallback } from 'react'
+import { Loader2, X, RotateCcw, ImagePlus } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { uploadsApi } from '@/api/uploads'
+import type { FileUploadResponse, PendingUpload } from '@/types/upload'
+
+interface RichTextInputProps {
+  value: string
+  onChange: (value: string) => void
+  onFilesChange?: (uploads: FileUploadResponse[]) => void
+  sessionId?: string
+  placeholder?: string
+  rows?: number
+  className?: string
+  disabled?: boolean
+}
+
+export function RichTextInput({
+  value,
+  onChange,
+  onFilesChange,
+  sessionId,
+  placeholder,
+  rows = 3,
+  className,
+  disabled,
+}: RichTextInputProps) {
+  const [pendingUploads, setPendingUploads] = useState<PendingUpload[]>([])
+  const [isDragOver, setIsDragOver] = useState(false)
+  const [isFocused, setIsFocused] = useState(false)
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+  const dragCounterRef = useRef(0)
+
+  // Cleanup blob URLs on unmount
+  useEffect(() => {
+    return () => {
+      pendingUploads.forEach((upload) => {
+        URL.revokeObjectURL(upload.preview)
+      })
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const processFiles = useCallback(
+    (files: File[]) => {
+      const imageFiles = files.filter((f) => f.type.startsWith('image/'))
+      if (imageFiles.length === 0) return
+
+      const newUploads: PendingUpload[] = imageFiles.map((file) => ({
+        id: crypto.randomUUID(),
+        file,
+        preview: URL.createObjectURL(file),
+        status: 'uploading' as const,
+      }))
+
+      setPendingUploads((prev) => [...prev, ...newUploads])
+
+      // Upload each file
+      newUploads.forEach((upload) => {
+        uploadsApi
+          .upload(upload.file, sessionId)
+          .then((result) => {
+            setPendingUploads((prev) => {
+              const updated = prev.map((u) =>
+                u.id === upload.id ? { ...u, status: 'done' as const, result } : u
+              )
+              // Notify parent of all completed uploads
+              const completed = updated
+                .filter((u) => u.status === 'done' && u.result)
+                .map((u) => u.result!)
+              onFilesChange?.(completed)
+              return updated
+            })
+          })
+          .catch((err) => {
+            setPendingUploads((prev) =>
+              prev.map((u) =>
+                u.id === upload.id
+                  ? { ...u, status: 'error' as const, error: err?.message || 'Upload failed' }
+                  : u
+              )
+            )
+          })
+      })
+    },
+    [sessionId, onFilesChange]
+  )
+
+  const handlePaste = useCallback(
+    (e: React.ClipboardEvent<HTMLTextAreaElement>) => {
+      if (disabled) return
+      const items = e.clipboardData?.items
+      if (!items) return
+
+      const imageFiles: File[] = []
+      for (let i = 0; i < items.length; i++) {
+        const item = items[i]
+        if (item.type.startsWith('image/')) {
+          const file = item.getAsFile()
+          if (file) imageFiles.push(file)
+        }
+      }
+
+      if (imageFiles.length > 0) {
+        e.preventDefault()
+        processFiles(imageFiles)
+      }
+    },
+    [disabled, processFiles]
+  )
+
+  const handleDragOver = useCallback(
+    (e: React.DragEvent) => {
+      if (disabled) return
+      e.preventDefault()
+      e.dataTransfer.dropEffect = 'copy'
+    },
+    [disabled]
+  )
+
+  const handleDragEnter = useCallback(
+    (e: React.DragEvent) => {
+      if (disabled) return
+      e.preventDefault()
+      dragCounterRef.current++
+      if (dragCounterRef.current === 1) {
+        setIsDragOver(true)
+      }
+    },
+    [disabled]
+  )
+
+  const handleDragLeave = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault()
+      dragCounterRef.current--
+      if (dragCounterRef.current === 0) {
+        setIsDragOver(false)
+      }
+    },
+    []
+  )
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      if (disabled) return
+      e.preventDefault()
+      dragCounterRef.current = 0
+      setIsDragOver(false)
+
+      const files = Array.from(e.dataTransfer.files)
+      processFiles(files)
+    },
+    [disabled, processFiles]
+  )
+
+  const handleRemove = useCallback(
+    (uploadId: string) => {
+      setPendingUploads((prev) => {
+        const toRemove = prev.find((u) => u.id === uploadId)
+        if (toRemove) {
+          URL.revokeObjectURL(toRemove.preview)
+        }
+        const updated = prev.filter((u) => u.id !== uploadId)
+        const completed = updated
+          .filter((u) => u.status === 'done' && u.result)
+          .map((u) => u.result!)
+        onFilesChange?.(completed)
+        return updated
+      })
+    },
+    [onFilesChange]
+  )
+
+  const retryUpload = useCallback(
+    (uploadId: string) => {
+      setPendingUploads((prev) =>
+        prev.map((u) => (u.id === uploadId ? { ...u, status: 'uploading' as const, error: undefined } : u))
+      )
+
+      const upload = pendingUploads.find((u) => u.id === uploadId)
+      if (!upload) return
+
+      uploadsApi
+        .upload(upload.file, sessionId)
+        .then((result) => {
+          setPendingUploads((prev) => {
+            const updated = prev.map((u) =>
+              u.id === uploadId ? { ...u, status: 'done' as const, result } : u
+            )
+            const completed = updated
+              .filter((u) => u.status === 'done' && u.result)
+              .map((u) => u.result!)
+            onFilesChange?.(completed)
+            return updated
+          })
+        })
+        .catch((err) => {
+          setPendingUploads((prev) =>
+            prev.map((u) =>
+              u.id === uploadId
+                ? { ...u, status: 'error' as const, error: err?.message || 'Upload failed' }
+                : u
+            )
+          )
+        })
+    },
+    [pendingUploads, sessionId, onFilesChange]
+  )
+
+  return (
+    <div
+      className={cn('relative', className)}
+      onDragOver={handleDragOver}
+      onDragEnter={handleDragEnter}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+    >
+      <textarea
+        ref={textareaRef}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onPaste={handlePaste}
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => setIsFocused(false)}
+        placeholder={placeholder}
+        rows={rows}
+        disabled={disabled}
+        className={cn(
+          'w-full bg-card border border-border rounded-xl p-3 text-sm text-foreground placeholder:text-muted-foreground',
+          'focus:border-[rgba(6,182,212,0.3)] focus:outline-none resize-none transition-colors',
+          isDragOver && 'border-primary/50 bg-primary/5',
+          disabled && 'opacity-50 cursor-not-allowed'
+        )}
+      />
+
+      {/* Drag overlay hint */}
+      {isDragOver && (
+        <div className="absolute inset-0 flex items-center justify-center rounded-xl border-2 border-dashed border-primary/50 bg-primary/5 pointer-events-none">
+          <div className="flex items-center gap-2 text-sm text-primary">
+            <ImagePlus size={16} />
+            Drop image to attach
+          </div>
+        </div>
+      )}
+
+      {/* Thumbnail strip */}
+      {pendingUploads.length > 0 && (
+        <div className="flex gap-2 flex-wrap mt-2">
+          {pendingUploads.map((upload) => (
+            <div key={upload.id} className="relative w-16 h-16 rounded-lg overflow-hidden border border-border">
+              <img src={upload.preview} alt="" className="w-full h-full object-cover" />
+              {upload.status === 'uploading' && (
+                <div className="absolute inset-0 bg-background/50 flex items-center justify-center">
+                  <Loader2 size={16} className="animate-spin text-primary" />
+                </div>
+              )}
+              {upload.status === 'done' && (
+                <button
+                  onClick={() => handleRemove(upload.id)}
+                  className="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-background/80 border border-border flex items-center justify-center hover:bg-rose-500/20 transition-colors"
+                >
+                  <X size={10} 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={14} className="text-rose-500" />
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Paste hint */}
+      {isFocused && !value && pendingUploads.length === 0 && (
+        <p className="text-[0.625rem] text-muted-foreground/50 mt-1">Paste screenshots with Ctrl+V</p>
+      )}
+    </div>
+  )
+}

frontend/src/components/flowpilot/EscalateModal.tsx

@@ -1,7 +1,9 @@
 import { useState } from 'react'
 import { AlertTriangle, Loader2 } from 'lucide-react'
 import { Modal } from '@/components/common/Modal'
+import { RichTextInput } from '@/components/common/RichTextInput'
 import type { EscalateSessionRequest } from '@/types/ai-session'
+import type { FileUploadResponse } from '@/types/upload'
 
 interface EscalateModalProps {
   open: boolean
@@ -9,10 +11,12 @@ interface EscalateModalProps {
   onEscalate: (data: EscalateSessionRequest) => Promise<unknown>
   isProcessing: boolean
   hasPsaTicket: boolean
+  sessionId?: string
 }
 
-export function EscalateModal({ open, onClose, onEscalate, isProcessing, hasPsaTicket }: EscalateModalProps) {
+export function EscalateModal({ open, onClose, onEscalate, isProcessing, hasPsaTicket, sessionId }: EscalateModalProps) {
   const [reason, setReason] = useState('')
+  const [_escalateUploads, setEscalateUploads] = useState<FileUploadResponse[]>([])
 
   const handleSubmit = async () => {
     if (!reason.trim() || reason.trim().length < 5) return
@@ -42,13 +46,13 @@ export function EscalateModal({ open, onClose, onEscalate, isProcessing, hasPsaT
           <label className="mb-1.5 block text-sm font-medium text-foreground">
             Why are you escalating?
           </label>
-          <textarea
+          <RichTextInput
             value={reason}
-            onChange={(e) => setReason(e.target.value)}
+            onChange={setReason}
+            onFilesChange={setEscalateUploads}
+            sessionId={sessionId}
             placeholder="e.g. I've exhausted all networking diagnostics and suspect this is a firewall policy issue that requires senior admin access..."
-            className="w-full rounded-lg border border-border bg-card px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none resize-none"
             rows={4}
-            autoFocus
           />
           <p className="mt-1 text-[0.625rem] text-[#5a6170]">
             Minimum 5 characters. This will be shown to the engineer who picks up.

frontend/src/components/flowpilot/FlowPilotActionBar.tsx

@@ -8,6 +8,7 @@ interface FlowPilotActionBarProps {
   canEscalate: boolean
   isProcessing: boolean
   hasPsaTicket?: boolean
+  sessionId?: string
   onResolve: (data: ResolveSessionRequest) => Promise<SessionDocumentation>
   onEscalate: (data: EscalateSessionRequest) => Promise<SessionDocumentation>
   onPause?: () => Promise<void>
@@ -18,6 +19,7 @@ export function FlowPilotActionBar({
   canEscalate,
   isProcessing,
   hasPsaTicket = false,
+  sessionId,
   onResolve,
   onEscalate,
   onPause,
@@ -126,6 +128,7 @@ export function FlowPilotActionBar({
         onEscalate={onEscalate}
         isProcessing={isProcessing || submitting}
         hasPsaTicket={hasPsaTicket}
+        sessionId={sessionId}
       />
     </>
   )

frontend/src/components/flowpilot/FlowPilotIntake.tsx

@@ -1,9 +1,11 @@
 import { useState, useEffect } from 'react'
 import { Sparkles, FileText, Terminal, X, AlertTriangle } from 'lucide-react'
 import { TicketPickerModal } from '@/components/session/TicketPickerModal'
+import { RichTextInput } from '@/components/common/RichTextInput'
 import { integrationsApi } from '@/api/integrations'
 import type { AISessionCreateRequest } from '@/types/ai-session'
 import type { PSATicketInfo, PsaConnectionResponse } from '@/types/integrations'
+import type { FileUploadResponse } from '@/types/upload'
 
 interface FlowPilotIntakeProps {
   onSubmit: (request: AISessionCreateRequest) => void
@@ -20,6 +22,9 @@ export function FlowPilotIntake({ onSubmit, isLoading }: FlowPilotIntakeProps) {
   const [psaConnection, setPsaConnection] = useState<PsaConnectionResponse | null>(null)
   const [psaChecked, setPsaChecked] = useState(false)
 
+  // Upload state (no session_id yet — uploads linked later)
+  const [_intakeUploads, setIntakeUploads] = useState<FileUploadResponse[]>([])
+
   // Selected ticket state
   const [selectedTicket, setSelectedTicket] = useState<PSATicketInfo | null>(null)
   const [selectedTicketId, setSelectedTicketId] = useState<string | null>(null)
@@ -168,19 +173,12 @@ export function FlowPilotIntake({ onSubmit, isLoading }: FlowPilotIntakeProps) {
 
           {/* Main text area (hidden when ticket is selected) */}
           {!selectedTicket && (
-            <textarea
+            <RichTextInput
               value={text}
-              onChange={(e) => setText(e.target.value)}
+              onChange={setText}
-              onKeyDown={(e) => {
+              onFilesChange={setIntakeUploads}
-                if (e.key === 'Enter' && !e.shiftKey) {
-                  e.preventDefault()
-                  if (text.trim() || logContent.trim()) handleSubmit()
-                }
-              }}
               placeholder="e.g. User can't access shared drive after password reset, getting 'Access Denied' in Event Viewer..."
-              className="w-full rounded-lg border border-border bg-card px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none resize-none"
               rows={5}
-              autoFocus
             />
           )}
 

frontend/src/components/flowpilot/FlowPilotSession.tsx

@@ -302,6 +302,7 @@ export function FlowPilotSession({
           canEscalate={canEscalate}
           isProcessing={isProcessing}
           hasPsaTicket={!!session.psa_ticket_id}
+          sessionId={session.id}
           onResolve={onResolve}
           onEscalate={onEscalate}
           onPause={onPause}

frontend/src/components/flowpilot/FlowPilotStepCard.tsx

@@ -2,7 +2,9 @@ import { useState } from 'react'
 import { MessageSquare, Zap, CheckCircle2, SkipForward, ChevronDown, ChevronUp } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import type { AISessionStepResponse, StepResponseRequest } from '@/types/ai-session'
+import type { FileUploadResponse } from '@/types/upload'
 import { MarkdownContent } from '@/components/ui/MarkdownContent'
+import { RichTextInput } from '@/components/common/RichTextInput'
 import { FlowPilotOptions } from './FlowPilotOptions'
 import { InSessionScriptGenerator } from './InSessionScriptGenerator'
 
@@ -28,6 +30,7 @@ export function FlowPilotStepCard({ step, isCurrentStep, isProcessing, sessionId
   const [freeText, setFreeText] = useState('')
   const [showFreeText, setShowFreeText] = useState(false)
   const [isCollapsed, setIsCollapsed] = useState(!isCurrentStep)
+  const [_freeTextUploads, setFreeTextUploads] = useState<FileUploadResponse[]>([])
 
   const content = step.content as Record<string, unknown>
   const stepText = (content.text as string) || ''
@@ -206,13 +209,13 @@ export function FlowPilotStepCard({ step, isCurrentStep, isProcessing, sessionId
                 </button>
               ) : (
                 <div className="space-y-2">
-                  <textarea
+                  <RichTextInput
                     value={freeText}
-                    onChange={(e) => setFreeText(e.target.value)}
+                    onChange={setFreeText}
+                    onFilesChange={setFreeTextUploads}
+                    sessionId={sessionId}
                     placeholder="Describe what you're seeing..."
-                    className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none resize-none"
                     rows={3}
-                    autoFocus
                   />
                   <div className="flex gap-2">
                     <button