feat: add supporting data capture, PDF export, and branding settings UI

- API clients for supporting data CRUD and team branding
- AddSupportingDataModal with text snippet and screenshot tabs (paste + upload)
- SupportingDataPanel collapsible section integrated into both session runners
- ExportPreviewModal updated with PDF format and server-side download flow
- BrandingSettings component for company name and logo management
- Expose team_id in UserResponse schema for branding endpoint access

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

frontend/src/components/session/AddSupportingDataModal.tsx

@@ -0,0 +1,263 @@
+import { useState, useRef, useCallback } from 'react'
+import { Code2, ImageIcon, Upload } from 'lucide-react'
+import { Modal } from '@/components/common/Modal'
+import { Button } from '@/components/ui/Button'
+import { cn } from '@/lib/utils'
+import { createSupportingData } from '@/api/supportingData'
+import { toast } from '@/lib/toast'
+
+interface AddSupportingDataModalProps {
+  isOpen: boolean
+  onClose: () => void
+  sessionId: string
+  onAdded: () => void
+}
+
+type TabType = 'text_snippet' | 'screenshot'
+
+const MAX_FILE_SIZE = 2 * 1024 * 1024 // 2MB
+
+export function AddSupportingDataModal({ isOpen, onClose, sessionId, onAdded }: AddSupportingDataModalProps) {
+  const [activeTab, setActiveTab] = useState<TabType>('text_snippet')
+  const [label, setLabel] = useState('')
+  const [textContent, setTextContent] = useState('')
+  const [imageBase64, setImageBase64] = useState<string | null>(null)
+  const [imageContentType, setImageContentType] = useState<string | null>(null)
+  const [imageFileName, setImageFileName] = useState<string | null>(null)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const resetForm = () => {
+    setLabel('')
+    setTextContent('')
+    setImageBase64(null)
+    setImageContentType(null)
+    setImageFileName(null)
+    setError(null)
+    setActiveTab('text_snippet')
+  }
+
+  const handleClose = () => {
+    resetForm()
+    onClose()
+  }
+
+  const processFile = useCallback((file: File) => {
+    if (file.size > MAX_FILE_SIZE) {
+      setError('File must be under 2MB')
+      return
+    }
+    if (!['image/png', 'image/jpeg', 'image/svg+xml'].includes(file.type)) {
+      setError('Only PNG, JPEG, and SVG files are supported')
+      return
+    }
+    setError(null)
+    setImageFileName(file.name)
+    setImageContentType(file.type)
+
+    const reader = new FileReader()
+    reader.onload = () => {
+      const result = reader.result as string
+      // Strip the data:... prefix to get raw base64
+      const base64 = result.includes(',') ? result.split(',')[1] : result
+      setImageBase64(base64)
+    }
+    reader.readAsDataURL(file)
+  }, [])
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (file) processFile(file)
+  }
+
+  const handlePaste = useCallback((e: React.ClipboardEvent) => {
+    const items = e.clipboardData?.items
+    if (!items) return
+    for (const item of items) {
+      if (item.type.startsWith('image/')) {
+        e.preventDefault()
+        const file = item.getAsFile()
+        if (file) processFile(file)
+        return
+      }
+    }
+  }, [processFile])
+
+  const handleSubmit = async () => {
+    if (!label.trim()) {
+      setError('Label is required')
+      return
+    }
+
+    if (activeTab === 'text_snippet' && !textContent.trim()) {
+      setError('Content is required')
+      return
+    }
+
+    if (activeTab === 'screenshot' && !imageBase64) {
+      setError('Please select or paste an image')
+      return
+    }
+
+    setIsSubmitting(true)
+    setError(null)
+    try {
+      await createSupportingData(sessionId, {
+        label: label.trim(),
+        data_type: activeTab,
+        content: activeTab === 'text_snippet' ? textContent : imageBase64!,
+        content_type: activeTab === 'screenshot' ? (imageContentType ?? undefined) : undefined,
+      })
+      toast.success('Supporting data added')
+      onAdded()
+      handleClose()
+    } catch (err) {
+      console.error('Failed to add supporting data:', err)
+      setError('Failed to save. Please try again.')
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={handleClose} title="Add Supporting Data">
+      {/* Tabs */}
+      <div className="mb-4 flex gap-1 rounded-lg bg-accent p-1">
+        <button
+          type="button"
+          onClick={() => setActiveTab('text_snippet')}
+          className={cn(
+            'flex flex-1 items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors',
+            activeTab === 'text_snippet'
+              ? 'bg-card text-foreground shadow-sm'
+              : 'text-muted-foreground hover:text-foreground'
+          )}
+        >
+          <Code2 className="h-4 w-4" />
+          Text Snippet
+        </button>
+        <button
+          type="button"
+          onClick={() => setActiveTab('screenshot')}
+          className={cn(
+            'flex flex-1 items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors',
+            activeTab === 'screenshot'
+              ? 'bg-card text-foreground shadow-sm'
+              : 'text-muted-foreground hover:text-foreground'
+          )}
+        >
+          <ImageIcon className="h-4 w-4" />
+          Screenshot
+        </button>
+      </div>
+
+      {/* Label */}
+      <div className="mb-4">
+        <label htmlFor="sd-label" className="mb-1 block text-sm font-medium text-foreground">
+          Label
+        </label>
+        <input
+          id="sd-label"
+          type="text"
+          value={label}
+          onChange={(e) => setLabel(e.target.value)}
+          placeholder={activeTab === 'text_snippet' ? 'e.g. Error log output' : 'e.g. Blue screen photo'}
+          className={cn(
+            'w-full rounded-md 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-hidden focus:ring-1 focus:ring-primary/20'
+          )}
+        />
+      </div>
+
+      {/* Text Snippet Tab Content */}
+      {activeTab === 'text_snippet' && (
+        <div className="mb-4">
+          <label htmlFor="sd-content" className="mb-1 block text-sm font-medium text-foreground">
+            Content
+          </label>
+          <textarea
+            id="sd-content"
+            value={textContent}
+            onChange={(e) => setTextContent(e.target.value)}
+            placeholder="Paste log output, error messages, config snippets..."
+            rows={8}
+            className={cn(
+              'w-full resize-y rounded-md border border-border bg-card px-3 py-2 text-sm',
+              'font-mono text-foreground placeholder:text-muted-foreground',
+              'focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20'
+            )}
+          />
+        </div>
+      )}
+
+      {/* Screenshot Tab Content */}
+      {activeTab === 'screenshot' && (
+        <div className="mb-4" onPaste={handlePaste}>
+          <label className="mb-1 block text-sm font-medium text-foreground">
+            Image
+          </label>
+          {imageBase64 ? (
+            <div className="relative rounded-md border border-border bg-card p-2">
+              <img
+                src={`data:${imageContentType};base64,${imageBase64}`}
+                alt="Preview"
+                className="mx-auto max-h-48 rounded object-contain"
+              />
+              <p className="mt-2 text-center text-xs text-muted-foreground">{imageFileName}</p>
+              <button
+                type="button"
+                onClick={() => {
+                  setImageBase64(null)
+                  setImageContentType(null)
+                  setImageFileName(null)
+                  if (fileInputRef.current) fileInputRef.current.value = ''
+                }}
+                className="mt-2 w-full text-center text-xs text-muted-foreground hover:text-foreground"
+              >
+                Remove and choose another
+              </button>
+            </div>
+          ) : (
+            <div
+              onClick={() => fileInputRef.current?.click()}
+              className={cn(
+                'flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed border-border',
+                'bg-card/50 py-10 transition-colors hover:border-muted-foreground'
+              )}
+            >
+              <Upload className="h-8 w-8 text-muted-foreground" />
+              <p className="text-sm text-muted-foreground">Click to upload or paste from clipboard</p>
+              <p className="text-xs text-muted-foreground">PNG, JPEG, or SVG - max 2MB</p>
+            </div>
+          )}
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept="image/png,image/jpeg,image/svg+xml"
+            onChange={handleFileChange}
+            className="hidden"
+          />
+        </div>
+      )}
+
+      {/* Error */}
+      {error && (
+        <p className="mb-4 text-sm text-rose-500">{error}</p>
+      )}
+
+      {/* Actions */}
+      <div className="flex items-center justify-end gap-2">
+        <Button variant="secondary" onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button onClick={handleSubmit} loading={isSubmitting}>
+          {isSubmitting ? 'Saving...' : 'Add'}
+        </Button>
+      </div>
+    </Modal>
+  )
+}
+
+export default AddSupportingDataModal

frontend/src/components/session/ExportPreviewModal.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import { Copy, Download, Check, RotateCcw } from 'lucide-react'
+import { Copy, Download, Check, RotateCcw, FileDown } from 'lucide-react'
 import { Modal } from '@/components/common/Modal'
 import { cn } from '@/lib/utils'
 import type { RedactionSummary } from '@/types'
@@ -9,8 +9,10 @@ interface ExportPreviewModalProps {
   onClose: () => void
   content: string
   filename: string
-  format: 'markdown' | 'text' | 'html' | 'psa'
+  format: 'markdown' | 'text' | 'html' | 'psa' | 'pdf'
   onDownload: (content: string) => void
+  onDownloadPdf?: () => void
+  pdfLoading?: boolean
   includeSummary?: boolean
   onToggleSummary?: (include: boolean) => void
   redactionEnabled?: boolean
@@ -25,6 +27,8 @@ export function ExportPreviewModal({
   filename,
   format,
   onDownload,
+  onDownloadPdf,
+  pdfLoading = false,
   includeSummary = false,
   onToggleSummary,
   redactionEnabled = false,
@@ -72,7 +76,7 @@ export function ExportPreviewModal({
         <p className="text-sm text-muted-foreground">
           Filename: <span className="font-mono text-foreground">{filename}</span>
           <span className="ml-3 rounded bg-accent px-2 py-0.5 text-xs text-muted-foreground">
-            {format === 'markdown' ? 'Markdown' : format === 'html' ? 'HTML' : format === 'psa' ? 'PSA' : 'Plain Text'}
+            {format === 'markdown' ? 'Markdown' : format === 'html' ? 'HTML' : format === 'psa' ? 'PSA' : format === 'pdf' ? 'PDF' : 'Plain Text'}
           </span>
           {isModified && (
             <span className="ml-2 text-xs text-yellow-400">(edited)</span>
@@ -130,56 +134,79 @@ export function ExportPreviewModal({
         </div>
       </div>
 
-      {/* Editable Content */}
-      <label htmlFor="export-content" className="sr-only">
-        Export content
-      </label>
-      <textarea
-        id="export-content"
-        value={editedContent}
-        onChange={(e) => setEditedContent(e.target.value)}
-        className={cn(
-          'h-96 w-full resize-y rounded-md border border-border bg-card p-4',
-          'font-mono text-sm text-foreground',
-          'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
-        )}
-      />
+      {format === 'pdf' ? (
+        /* PDF download-only UI */
+        <div className="flex flex-col items-center justify-center py-12">
+          <FileDown className="mb-4 h-12 w-12 text-muted-foreground" />
+          <p className="text-muted-foreground mb-4">PDF exports are generated server-side with your team&apos;s branding.</p>
+          <button
+            type="button"
+            onClick={onDownloadPdf}
+            disabled={pdfLoading}
+            className={cn(
+              'inline-flex items-center gap-2 rounded-[10px] bg-gradient-brand px-6 py-3 text-sm font-semibold text-[#101114]',
+              'hover:opacity-90 active:scale-[0.97] transition-all',
+              'disabled:opacity-60 disabled:cursor-not-allowed'
+            )}
+          >
+            <Download className="h-4 w-4" />
+            {pdfLoading ? 'Generating PDF...' : 'Download PDF'}
+          </button>
+        </div>
+      ) : (
+        <>
+          {/* Editable Content */}
+          <label htmlFor="export-content" className="sr-only">
+            Export content
+          </label>
+          <textarea
+            id="export-content"
+            value={editedContent}
+            onChange={(e) => setEditedContent(e.target.value)}
+            className={cn(
+              'h-96 w-full resize-y rounded-md border border-border bg-card p-4',
+              'font-mono text-sm text-foreground',
+              'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
+            )}
+          />
 
-      {/* Actions */}
-      <div className="mt-4 flex items-center justify-end gap-2">
-        <button
-          type="button"
-          onClick={handleCopy}
-          className={cn(
-            'flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium',
-            'text-muted-foreground hover:bg-accent hover:text-foreground',
-            'focus:outline-hidden focus:ring-2 focus:ring-primary/20'
-          )}
-        >
-          {copied ? (
-            <>
-              <Check className="h-4 w-4 text-emerald-400" />
-              Copied!
-            </>
-          ) : (
-            <>
-              <Copy className="h-4 w-4" />
-              Copy to Clipboard
-            </>
-          )}
-        </button>
-        <button
-          type="button"
-          onClick={handleDownload}
-          className={cn(
-            'flex items-center gap-2 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-3 py-2 text-sm font-medium',
-            'hover:opacity-90 focus:outline-hidden focus:ring-2 focus:ring-primary/20'
-          )}
-        >
-          <Download className="h-4 w-4" />
-          Download
-        </button>
-      </div>
+          {/* Actions */}
+          <div className="mt-4 flex items-center justify-end gap-2">
+            <button
+              type="button"
+              onClick={handleCopy}
+              className={cn(
+                'flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium',
+                'text-muted-foreground hover:bg-accent hover:text-foreground',
+                'focus:outline-hidden focus:ring-2 focus:ring-primary/20'
+              )}
+            >
+              {copied ? (
+                <>
+                  <Check className="h-4 w-4 text-emerald-400" />
+                  Copied!
+                </>
+              ) : (
+                <>
+                  <Copy className="h-4 w-4" />
+                  Copy to Clipboard
+                </>
+              )}
+            </button>
+            <button
+              type="button"
+              onClick={handleDownload}
+              className={cn(
+                'flex items-center gap-2 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-3 py-2 text-sm font-medium',
+                'hover:opacity-90 focus:outline-hidden focus:ring-2 focus:ring-primary/20'
+              )}
+            >
+              <Download className="h-4 w-4" />
+              Download
+            </button>
+          </div>
+        </>
+      )}
     </Modal>
   )
 }

frontend/src/components/session/SupportingDataPanel.tsx

@@ -0,0 +1,152 @@
+import { useState, useEffect, useCallback } from 'react'
+import { Code2, ImageIcon, Plus, Trash2, ChevronDown, ChevronRight } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { getSupportingData, deleteSupportingData } from '@/api/supportingData'
+import type { SupportingDataItem } from '@/api/supportingData'
+import { AddSupportingDataModal } from './AddSupportingDataModal'
+import { toast } from '@/lib/toast'
+
+interface SupportingDataPanelProps {
+  sessionId: string
+}
+
+export function SupportingDataPanel({ sessionId }: SupportingDataPanelProps) {
+  const [items, setItems] = useState<SupportingDataItem[]>([])
+  const [isExpanded, setIsExpanded] = useState(false)
+  const [showAddModal, setShowAddModal] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+
+  const loadItems = useCallback(async () => {
+    setIsLoading(true)
+    try {
+      const data = await getSupportingData(sessionId)
+      setItems(data)
+    } catch (err) {
+      console.error('Failed to load supporting data:', err)
+    } finally {
+      setIsLoading(false)
+    }
+  }, [sessionId])
+
+  useEffect(() => {
+    loadItems()
+  }, [loadItems])
+
+  const handleDelete = async (itemId: string) => {
+    try {
+      await deleteSupportingData(sessionId, itemId)
+      setItems((prev) => prev.filter((item) => item.id !== itemId))
+      toast.success('Supporting data removed')
+    } catch (err) {
+      console.error('Failed to delete supporting data:', err)
+      toast.error('Failed to remove item')
+    }
+  }
+
+  const handleAdded = () => {
+    loadItems()
+    setIsExpanded(true)
+  }
+
+  return (
+    <div className="rounded-xl border border-border bg-card/50">
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-3">
+        <button
+          type="button"
+          onClick={() => setIsExpanded(!isExpanded)}
+          className="flex items-center gap-2 text-sm font-medium text-foreground hover:text-foreground/80"
+        >
+          {isExpanded ? (
+            <ChevronDown className="h-4 w-4 text-muted-foreground" />
+          ) : (
+            <ChevronRight className="h-4 w-4 text-muted-foreground" />
+          )}
+          Supporting Data
+          {items.length > 0 && (
+            <span className="rounded-full bg-accent px-2 py-0.5 text-xs text-muted-foreground">
+              {items.length}
+            </span>
+          )}
+        </button>
+        <button
+          type="button"
+          onClick={() => setShowAddModal(true)}
+          className={cn(
+            'flex items-center gap-1.5 rounded-[10px] px-3 py-1.5 text-xs font-medium',
+            'bg-gradient-brand text-[#101114] hover:opacity-90 active:scale-[0.97] transition-all'
+          )}
+        >
+          <Plus className="h-3.5 w-3.5" />
+          Add
+        </button>
+      </div>
+
+      {/* Items list */}
+      {isExpanded && (
+        <div className="border-t border-border px-4 py-2">
+          {isLoading && items.length === 0 ? (
+            <p className="py-4 text-center text-xs text-muted-foreground">Loading...</p>
+          ) : items.length === 0 ? (
+            <p className="py-4 text-center text-xs text-muted-foreground">
+              No supporting data yet. Add text snippets or screenshots to include in exports.
+            </p>
+          ) : (
+            <div className="space-y-2 py-1">
+              {items.map((item) => (
+                <div
+                  key={item.id}
+                  className={cn(
+                    'flex items-start gap-3 rounded-lg border border-border bg-card/30 px-3 py-2.5',
+                    'group transition-colors hover:border-[rgba(255,255,255,0.12)]'
+                  )}
+                >
+                  <span className="mt-0.5 shrink-0 text-muted-foreground">
+                    {item.data_type === 'text_snippet' ? (
+                      <Code2 className="h-4 w-4" />
+                    ) : (
+                      <ImageIcon className="h-4 w-4" />
+                    )}
+                  </span>
+                  <div className="min-w-0 flex-1">
+                    <p className="text-sm font-medium text-foreground">{item.label}</p>
+                    {item.data_type === 'text_snippet' && item.content && (
+                      <p className="mt-0.5 truncate text-xs font-mono text-muted-foreground">
+                        {item.content.length > 120 ? item.content.slice(0, 120) + '...' : item.content}
+                      </p>
+                    )}
+                    {item.data_type === 'screenshot' && item.content && (
+                      <img
+                        src={`data:${item.content_type || 'image/png'};base64,${item.content}`}
+                        alt={item.label}
+                        className="mt-1 max-h-16 rounded border border-border object-contain"
+                      />
+                    )}
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => handleDelete(item.id)}
+                    className="shrink-0 text-muted-foreground opacity-0 transition-opacity hover:text-rose-500 group-hover:opacity-100"
+                    title="Remove"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Add Modal */}
+      <AddSupportingDataModal
+        isOpen={showAddModal}
+        onClose={() => setShowAddModal(false)}
+        sessionId={sessionId}
+        onAdded={handleAdded}
+      />
+    </div>
+  )
+}
+
+export default SupportingDataPanel