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/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)}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter' && !e.shiftKey) {
-                  e.preventDefault()
-                  if (text.trim() || logContent.trim()) handleSubmit()
-                }
-              }}
+              onChange={setText}
+              onFilesChange={setIntakeUploads}
               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