feat: rich message bar in FlowPilot — paste, drag-drop, attach, logs

Upgraded FlowPilotMessageBar from basic textarea to ChatGPT-style input:
- Paste images (Ctrl+V) with thumbnail preview
- Drag-and-drop files with drop zone overlay
- Attach button (images, logs, docs, PDFs)
- Expandable "Paste Logs" section for raw error output
- Auto-growing textarea with focus ring
- Adjusted bottom offset for slimmer action bar

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

frontend/src/components/flowpilot/FlowPilotMessageBar.tsx

@@ -1,7 +1,11 @@
-import { useState, useRef, useCallback } from 'react'
-import { Send } from 'lucide-react'
+import { useState, useRef, useCallback, useEffect } from 'react'
+import { Send, Paperclip, Terminal, Loader2, X, RotateCcw, ImagePlus } from 'lucide-react'
 import { cn } from '@/lib/utils'
+import { uploadsApi } from '@/api/uploads'
 import type { StepResponseRequest } from '@/types/ai-session'
+import type { PendingUpload } from '@/types/upload'
+
+const ACCEPTED_FILE_TYPES = 'image/png,image/jpeg,image/gif,image/webp,.txt,.log,.csv,.pdf,.docx'
 
 interface FlowPilotMessageBarProps {
   onRespond: (response: StepResponseRequest) => void
@@ -11,19 +15,41 @@ interface FlowPilotMessageBarProps {
 
 export function FlowPilotMessageBar({ onRespond, disabled = false, isProcessing = false }: FlowPilotMessageBarProps) {
   const [message, setMessage] = useState('')
+  const [showLogs, setShowLogs] = useState(false)
+  const [logContent, setLogContent] = useState('')
+  const [pendingUploads, setPendingUploads] = useState<PendingUpload[]>([])
+  const [isDragOver, setIsDragOver] = useState(false)
   const textareaRef = useRef<HTMLTextAreaElement>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const dragCounterRef = useRef(0)
 
   const isDisabled = disabled || isProcessing
 
+  // Auto-grow textarea
+  useEffect(() => {
+    const el = textareaRef.current
+    if (!el) return
+    el.style.height = 'auto'
+    el.style.height = `${Math.min(el.scrollHeight, 150)}px`
+  }, [message])
+
   const handleSubmit = useCallback(() => {
     const trimmed = message.trim()
     if (!trimmed || isDisabled) return
-    onRespond({ free_text_input: trimmed })
+
+    let fullMessage = trimmed
+    if (logContent.trim()) {
+      fullMessage += `\n\n--- Logs ---\n${logContent.trim()}`
+    }
+
+    onRespond({ free_text_input: fullMessage })
     setMessage('')
+    setLogContent('')
+    setShowLogs(false)
     if (textareaRef.current) {
       textareaRef.current.style.height = 'auto'
     }
-  }, [message, isDisabled, onRespond])
+  }, [message, logContent, isDisabled, onRespond])
 
   const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
     if (e.key === 'Enter' && !e.shiftKey) {
@@ -32,50 +58,280 @@ export function FlowPilotMessageBar({ onRespond, disabled = false, isProcessing
     }
   }, [handleSubmit])
 
-  const handleInput = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setMessage(e.target.value)
-    const textarea = e.target
-    textarea.style.height = 'auto'
-    textarea.style.height = `${Math.min(textarea.scrollHeight, 120)}px`
+  // ── 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 = ''
+    }
+  }, [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 = message.trim().length > 0
+
   return (
     <div
-      className="fixed bottom-[68px] right-0 lg:right-72 z-40 px-4 sm:px-6 lg:px-8 pb-2"
+      className="fixed bottom-[52px] sm:bottom-[56px] right-0 lg:right-72 z-40 px-3 sm:px-6 lg:px-8 pb-2"
       style={{ left: 'var(--sidebar-w, 0px)' }}
+      onDragOver={handleDragOver}
+      onDragEnter={handleDragEnter}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
     >
       <div
         className={cn(
-          'flex items-end gap-2 rounded-xl border p-3 transition-colors',
+          'relative rounded-xl border transition-all',
           isDisabled
             ? 'border-border/50 opacity-50'
-            : 'border-border focus-within:border-[rgba(6,182,212,0.3)]'
+            : isDragOver
+              ? 'border-primary/50 bg-primary/5'
+              : 'border-border focus-within:border-[rgba(6,182,212,0.3)] focus-within:ring-1 focus-within:ring-primary/20'
         )}
         style={{ background: 'var(--color-bg-card)' }}
       >
+        {/* Drag overlay */}
+        {isDragOver && (
+          <div className="absolute inset-0 z-10 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={18} />
+              Drop files to attach
+            </div>
+          </div>
+        )}
+
+        {/* Textarea */}
         <textarea
           ref={textareaRef}
           value={message}
-          onChange={handleInput}
+          onChange={(e) => setMessage(e.target.value)}
           onKeyDown={handleKeyDown}
-          placeholder={isProcessing ? 'FlowPilot is thinking...' : 'Type a message...'}
+          onPaste={handlePaste}
+          placeholder={isProcessing ? 'FlowPilot is thinking...' : 'Type a message, paste a screenshot, or drag a file...'}
           disabled={isDisabled}
           rows={1}
-          className="flex-1 resize-none bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed py-1.5 px-2"
+          className="w-full resize-none bg-transparent px-4 pt-3 pb-1 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed"
+          style={{ minHeight: '40px', maxHeight: '150px' }}
         />
-        <button
-          onClick={handleSubmit}
-          disabled={isDisabled || !message.trim()}
-          aria-label="Send message"
-          className={cn(
-            'flex h-9 w-9 shrink-0 items-center justify-center rounded-lg transition-all',
-            message.trim() && !isDisabled
-              ? 'bg-primary text-white hover:brightness-110 active:scale-[0.98]'
-              : 'bg-[rgba(255,255,255,0.04)] text-muted-foreground cursor-not-allowed'
-          )}
-        >
-          <Send size={16} />
-        </button>
+
+        {/* Thumbnail strip */}
+        {pendingUploads.length > 0 && (
+          <div className="flex gap-2 flex-wrap px-4 pb-1">
+            {pendingUploads.map((upload) => (
+              <div key={upload.id} className="relative w-12 h-12 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={12} 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={10} className="text-rose-500" />
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Logs textarea (expandable) */}
+        {showLogs && (
+          <div className="px-4 pb-1">
+            <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={3}
+              className="w-full resize-none rounded-lg border border-border bg-background p-2 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-3 py-1.5 border-t border-border/50">
+          <div className="flex items-center gap-0.5">
+            {/* Attach button */}
+            <input
+              ref={fileInputRef}
+              type="file"
+              multiple
+              accept={ACCEPTED_FILE_TYPES}
+              onChange={handleFileSelect}
+              className="hidden"
+            />
+            <button
+              type="button"
+              onClick={() => fileInputRef.current?.click()}
+              disabled={isDisabled}
+              className="flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors disabled:opacity-40"
+              title="Attach files (images, logs, docs)"
+            >
+              <Paperclip size={14} />
+              <span className="hidden sm:inline">Attach</span>
+            </button>
+
+            {/* Paste Logs button */}
+            {!showLogs && (
+              <button
+                type="button"
+                onClick={() => setShowLogs(true)}
+                disabled={isDisabled}
+                className="flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors disabled:opacity-40"
+                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={isDisabled || !hasContent}
+            aria-label="Send message"
+            className={cn(
+              'flex h-8 w-8 items-center justify-center rounded-lg transition-all',
+              hasContent && !isDisabled
+                ? 'bg-primary text-white hover:brightness-110 active:scale-95'
+                : 'bg-secondary text-muted-foreground cursor-not-allowed'
+            )}
+          >
+            <Send size={15} />
+          </button>
+        </div>
       </div>
     </div>
   )