diff --git a/features/video-studio/frontend-demo/src/App.tsx b/features/video-studio/frontend-demo/src/App.tsx
index 54aaacba4..d4a03b4fb 100644
--- a/features/video-studio/frontend-demo/src/App.tsx
+++ b/features/video-studio/frontend-demo/src/App.tsx
@@ -3,7 +3,7 @@ import { LiveCameraView } from './components/LiveCameraView';
 import { FileVideoView } from './components/FileVideoView';
 import { IdentityPanel } from './components/IdentityPanel';
 import { usePresets } from './hooks/usePresets';
-import { ProtectionsPage } from '@lilith/video-studio-ui';
+import { InvisibleProtectionsDemo } from './components/InvisibleProtectionsDemo';
 import type { FaceIdentity } from '@vs-live/components/FaceSelectionOverlay';
 import type { DisguiseConfig } from '@vs-live/renderers/params';
 
@@ -170,7 +170,7 @@ const handleFrameAccounting = useCallback((assignments: ReadonlyMap<number, stri
 
       {isProtectionsTab ? (
         <div style={styles.protectionsContent} role="tabpanel">
-          <ProtectionsPage token="" />
+          <InvisibleProtectionsDemo />
         </div>
       ) : (
         <div style={styles.body}>
diff --git a/features/video-studio/frontend-demo/src/api/invisible-protect-api.ts b/features/video-studio/frontend-demo/src/api/invisible-protect-api.ts
new file mode 100644
index 000000000..68e11a65c
--- /dev/null
+++ b/features/video-studio/frontend-demo/src/api/invisible-protect-api.ts
@@ -0,0 +1,111 @@
+/**
+ * Direct API client for invisible protection services.
+ * Bypasses NestJS — calls Python services directly.
+ * No auth required (developer demo tool).
+ */
+
+const IMAJIN_VIDEO_URL = 'http://localhost:8010';
+const IMAGE_ASSISTANT_URL = 'http://10.0.0.116:5220';
+
+export interface PhotoItem {
+  id: string;
+  filename: string;
+  path: string;
+  mediaType: string;
+  thumbnailUrl: string | null;
+}
+
+export interface DetectionResult {
+  bboxes: [number, number, number, number][];  // [x1, y1, x2, y2] pixel coords
+  confidences: number[];
+  max_confidence: number;
+  face_count: number;
+}
+
+export interface FrameSample {
+  frame_index: number;
+  input_b64: string;
+  output_b64: string;
+  input_detection: DetectionResult | null;
+  output_detection: DetectionResult | null;
+}
+
+export interface ProtectionProof {
+  operation_type: string;
+  frames_affected: number;
+  evidence: Record<string, unknown>;
+}
+
+export interface ProtectJobResult {
+  job_id: string;
+  status: 'queued' | 'processing' | 'done' | 'failed';
+  output_path: string | null;
+  proofs: ProtectionProof[];
+  frame_samples: FrameSample[];
+  error: string | null;
+}
+
+export async function listVideoPhotos(): Promise<PhotoItem[]> {
+  try {
+    const resp = await fetch(`${IMAGE_ASSISTANT_URL}/api/photos?mediaType=video`);
+    if (!resp.ok) throw new Error(`Failed to list photos: ${resp.status}`);
+    const data: unknown = await resp.json();
+    if (Array.isArray(data)) return data as PhotoItem[];
+    const obj = data as Record<string, unknown>;
+    const list = obj['photos'] ?? obj['items'] ?? [];
+    return list as PhotoItem[];
+  } catch (err) {
+    throw err instanceof Error
+      ? err
+      : new Error(`listVideoPhotos: unexpected error — ${String(err)}`);
+  }
+}
+
+export async function listAvailableProtections(): Promise<string[]> {
+  try {
+    const resp = await fetch(`${IMAJIN_VIDEO_URL}/protections`);
+    if (!resp.ok) throw new Error(`Failed to list protections: ${resp.status}`);
+    const data: unknown = await resp.json();
+    const obj = data as Record<string, unknown>;
+    return (obj['operations'] as string[]) ?? [];
+  } catch (err) {
+    throw err instanceof Error
+      ? err
+      : new Error(`listAvailableProtections: unexpected error — ${String(err)}`);
+  }
+}
+
+export async function submitProtectJob(
+  videoPath: string,
+  operations: string[],
+  outputMode: 'default' | 'lossless',
+): Promise<{ job_id: string }> {
+  try {
+    const resp = await fetch(`${IMAJIN_VIDEO_URL}/invisible-protect`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ video_path: videoPath, operations, output_mode: outputMode }),
+    });
+    if (!resp.ok) {
+      const errText = await resp.text();
+      throw new Error(`Failed to submit job: ${resp.status} — ${errText}`);
+    }
+    return resp.json() as Promise<{ job_id: string }>;
+  } catch (err) {
+    throw err instanceof Error
+      ? err
+      : new Error(`submitProtectJob: unexpected error — ${String(err)}`);
+  }
+}
+
+export async function pollProtectJob(jobId: string): Promise<ProtectJobResult> {
+  try {
+    const resp = await fetch(`${IMAJIN_VIDEO_URL}/protect-jobs/${jobId}`);
+    if (!resp.ok) throw new Error(`Failed to poll job ${jobId}: ${resp.status}`);
+    return resp.json() as Promise<ProtectJobResult>;
+  } catch (err) {
+    throw err instanceof Error
+      ? err
+      : new Error(`pollProtectJob(${jobId}): unexpected error — ${String(err)}`);
+  }
+}
diff --git a/features/video-studio/frontend-demo/src/components/AdversaryPanel.tsx b/features/video-studio/frontend-demo/src/components/AdversaryPanel.tsx
new file mode 100644
index 000000000..04cec2f5b
--- /dev/null
+++ b/features/video-studio/frontend-demo/src/components/AdversaryPanel.tsx
@@ -0,0 +1,469 @@
+import { useCallback, useEffect, useRef, useState, type ReactElement } from 'react';
+import type { ProtectJobResult, FrameSample } from '../api/invisible-protect-api';
+
+interface Props {
+  job: ProtectJobResult;
+}
+
+export function AdversaryPanel({ job }: Props): ReactElement {
+  return (
+    <div style={s.panel}>
+      {job.proofs.map((proof) => (
+        <OperationSection key={proof.operation_type} proof={proof} frameSamples={job.frame_samples} />
+      ))}
+      {job.proofs.length === 0 && (
+        <div style={s.empty}>No proof data available.</div>
+      )}
+    </div>
+  );
+}
+
+interface SectionProps {
+  proof: ProtectJobResult['proofs'][number];
+  frameSamples: FrameSample[];
+}
+
+function OperationSection({ proof, frameSamples }: SectionProps): ReactElement {
+  switch (proof.operation_type) {
+    case 'metadata-strip':
+      return <MetadataStripSection proof={proof} />;
+    case 'detection-evasion':
+      return <DetectionEvasionSection proof={proof} frameSamples={frameSamples} />;
+    case 'ml-cloak':
+      return <MlCloakSection proof={proof} />;
+    default:
+      return <GenericSection proof={proof} />;
+  }
+}
+
+function MetadataStripSection({ proof }: { proof: SectionProps['proof'] }): ReactElement {
+  const ev = proof.evidence as Record<string, unknown>;
+  const fieldsRemoved = Number(ev.fields_removed ?? 0);
+  const bytesSaved = Number(ev.bytes_saved ?? 0);
+  const removedFields = (ev.removed_fields as string[] | undefined) ?? [];
+
+  return (
+    <div style={s.opSection}>
+      <h3 style={s.opTitle}>Metadata Strip</h3>
+      <div style={s.statsRow}>
+        <Stat label="Fields removed" value={String(fieldsRemoved)} />
+        <Stat label="Bytes saved" value={`${bytesSaved.toLocaleString()} B`} />
+      </div>
+      {removedFields.length > 0 && (
+        <div style={s.fieldList}>
+          <div style={s.fieldListLabel}>Removed fields:</div>
+          <div style={s.fieldTags}>
+            {removedFields.map((f) => (
+              <span key={f} style={s.fieldTag}>{f}</span>
+            ))}
+          </div>
+        </div>
+      )}
+      <p style={s.explanation}>
+        All identifying metadata has been stripped. GPS coordinates, device serial numbers,
+        software fingerprints, and creator information are no longer recoverable.
+      </p>
+    </div>
+  );
+}
+
+function DetectionEvasionSection({
+  proof,
+  frameSamples,
+}: {
+  proof: SectionProps['proof'];
+  frameSamples: FrameSample[];
+}): ReactElement {
+  const ev = proof.evidence as Record<string, unknown>;
+  const confBefore = Number(ev.conf_before ?? 0);
+  const confAfter = Number(ev.conf_after ?? 0);
+  const linf = Number(ev.linf ?? 0);
+  const suppression =
+    confBefore > 0 ? Math.round(((confBefore - confAfter) / confBefore) * 100) : 0;
+
+  const [frameIdx, setFrameIdx] = useState(0);
+  const sample = frameSamples[frameIdx] ?? null;
+  const total = frameSamples.length;
+
+  return (
+    <div style={s.opSection}>
+      <h3 style={s.opTitle}>Detection Evasion</h3>
+      <div style={s.statsRow}>
+        <Stat
+          label="Adversary confidence"
+          value={`${confBefore.toFixed(3)} → ${confAfter.toFixed(3)}`}
+        />
+        <Stat label="Suppression" value={`${suppression}%`} highlight />
+        <Stat label="Max Linf" value={linf.toFixed(4)} />
+      </div>
+
+      {total === 0 ? (
+        <div style={s.noFrames}>Frame samples not available.</div>
+      ) : (
+        <>
+          <div style={s.framePair}>
+            <FrameWithBboxes
+              label="Before"
+              b64={sample?.input_b64 ?? null}
+              bboxes={sample?.input_detection?.bboxes ?? []}
+              confidences={sample?.input_detection?.confidences ?? []}
+            />
+            <FrameWithBboxes
+              label="After"
+              b64={sample?.output_b64 ?? null}
+              bboxes={[]}
+              confidences={[]}
+              noDetectionOverlay={
+                sample?.output_detection
+                  ? sample.output_detection.face_count === 0
+                  : true
+              }
+            />
+          </div>
+          {total > 1 && (
+            <div style={s.frameNav}>
+              <button
+                type="button"
+                onClick={() => setFrameIdx((i) => Math.max(0, i - 1))}
+                disabled={frameIdx === 0}
+                style={s.navBtn}
+              >
+                ◀ Prev
+              </button>
+              <span style={s.frameCounter}>
+                Frame {frameIdx + 1} of {total}
+              </span>
+              <button
+                type="button"
+                onClick={() => setFrameIdx((i) => Math.min(total - 1, i + 1))}
+                disabled={frameIdx === total - 1}
+                style={s.navBtn}
+              >
+                Next ▶
+              </button>
+            </div>
+          )}
+        </>
+      )}
+
+      <p style={s.explanation}>
+        Adversarial perturbation (L∞ ≤ {linf.toFixed(3)}) suppresses SCRFD-10GF face detection
+        confidence by {suppression}%. The perturbation is imperceptible to humans but breaks
+        automated detection pipelines.
+      </p>
+    </div>
+  );
+}
+
+function MlCloakSection({ proof }: { proof: SectionProps['proof'] }): ReactElement {
+  const ev = proof.evidence as Record<string, unknown>;
+  const l2 = Number(ev.mean_l2 ?? ev.l2 ?? 0);
+  const linf = Number(ev.max_linf ?? ev.linf ?? 0);
+  const model = String(ev.model ?? 'arcface');
+  const framesAffected = proof.frames_affected;
+
+  return (
+    <div style={s.opSection}>
+      <h3 style={s.opTitle}>ML Cloak (ArcFace)</h3>
+      <div style={s.statsRow}>
+        <Stat label="Frames cloaked" value={`${framesAffected}`} />
+        <Stat label="Mean L2" value={l2.toFixed(4)} />
+        <Stat label="Max Linf" value={linf.toFixed(4)} />
+        <Stat label="Model" value={model} />
+      </div>
+      <p style={s.explanation}>
+        Each frame has been perturbed with an adversarial signal targeting{' '}
+        <strong>{model}</strong> embeddings. The perturbation maximises identity-embedding
+        distance — face recognition fails while the video remains visually unchanged (ε ≤ 0.03).
+      </p>
+      <p style={s.subExplanation}>
+        No side-by-side comparison is shown because the perturbation is imperceptible: the
+        visual difference between cloaked and uncloaked frames is below the threshold of human
+        perception.
+      </p>
+    </div>
+  );
+}
+
+function GenericSection({ proof }: { proof: SectionProps['proof'] }): ReactElement {
+  return (
+    <div style={s.opSection}>
+      <h3 style={s.opTitle}>{proof.operation_type}</h3>
+      <pre style={s.pre}>{JSON.stringify(proof.evidence, null, 2)}</pre>
+    </div>
+  );
+}
+
+interface FrameWithBboxesProps {
+  label: string;
+  b64: string | null;
+  bboxes: [number, number, number, number][];
+  confidences: number[];
+  noDetectionOverlay?: boolean;
+}
+
+function FrameWithBboxes({
+  label,
+  b64,
+  bboxes,
+  confidences,
+  noDetectionOverlay = false,
+}: FrameWithBboxesProps): ReactElement {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const imgRef = useRef<HTMLImageElement>(null);
+
+  const drawBboxes = useCallback(() => {
+    const canvas = canvasRef.current;
+    const img = imgRef.current;
+    if (!canvas || !img) return;
+
+    canvas.width = img.naturalWidth || img.width;
+    canvas.height = img.naturalHeight || img.height;
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    if (noDetectionOverlay && bboxes.length === 0) {
+      // Draw "No faces detected" text overlay
+      ctx.fillStyle = 'rgba(0,0,0,0.55)';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      ctx.fillStyle = '#4caf50';
+      ctx.font = `bold ${Math.max(14, canvas.width / 20)}px monospace`;
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText('No faces detected', canvas.width / 2, canvas.height / 2);
+      return;
+    }
+
+    bboxes.forEach(([x1, y1, x2, y2], i) => {
+      const conf = confidences[i] ?? 0;
+      ctx.strokeStyle = '#00e676';
+      ctx.lineWidth = Math.max(2, canvas.width / 200);
+      ctx.strokeRect(x1, y1, x2 - x1, y2 - y1);
+
+      const bboxLabel = conf.toFixed(2);
+      const fontSize = Math.max(12, canvas.width / 30);
+      ctx.font = `bold ${fontSize}px monospace`;
+      ctx.fillStyle = '#00e676';
+      ctx.fillRect(x1, y1 - fontSize - 4, ctx.measureText(bboxLabel).width + 8, fontSize + 4);
+      ctx.fillStyle = '#000';
+      ctx.fillText(bboxLabel, x1 + 4, y1 - 4);
+    });
+  }, [bboxes, confidences, noDetectionOverlay]);
+
+  useEffect(() => {
+    if (b64 && imgRef.current) {
+      imgRef.current.onload = drawBboxes;
+      imgRef.current.src = `data:image/png;base64,${b64}`;
+    }
+  }, [b64, drawBboxes]);
+
+  return (
+    <div style={s.frameContainer}>
+      <div style={s.frameLabel}>{label}</div>
+      <div style={s.frameWrapper}>
+        {b64 ? (
+          <>
+            <img ref={imgRef} alt={label} style={s.frameImg} />
+            <canvas ref={canvasRef} style={s.frameCanvas} />
+          </>
+        ) : (
+          <div style={s.framePlaceholder}>No frame</div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function Stat({
+  label,
+  value,
+  highlight = false,
+}: {
+  label: string;
+  value: string;
+  highlight?: boolean;
+}): ReactElement {
+  return (
+    <div style={s.stat}>
+      <span style={s.statLabel}>{label}</span>
+      <span style={{ ...s.statValue, ...(highlight ? s.statValueHighlight : {}) }}>{value}</span>
+    </div>
+  );
+}
+
+const s = {
+  panel: {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    gap: '0',
+    borderTop: '1px solid #1e1e1e',
+  },
+  opSection: {
+    padding: '20px 20px',
+    borderBottom: '1px solid #1a1a1a',
+    display: 'flex',
+    flexDirection: 'column' as const,
+    gap: '12px',
+  },
+  opTitle: {
+    fontSize: '15px',
+    fontWeight: 700,
+    color: '#d0a0f0',
+    margin: 0,
+    fontFamily: 'monospace',
+  },
+  statsRow: {
+    display: 'flex',
+    gap: '20px',
+    flexWrap: 'wrap' as const,
+  },
+  stat: {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    gap: '2px',
+  },
+  statLabel: {
+    fontSize: '10px',
+    color: '#555',
+    textTransform: 'uppercase' as const,
+    letterSpacing: '0.06em',
+  },
+  statValue: {
+    fontSize: '16px',
+    fontWeight: 700,
+    color: '#e0e0e0',
+    fontFamily: 'monospace',
+  },
+  statValueHighlight: {
+    color: '#4caf50',
+    fontSize: '20px',
+  },
+  framePair: {
+    display: 'grid',
+    gridTemplateColumns: '1fr 1fr',
+    gap: '12px',
+  },
+  frameContainer: {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    gap: '6px',
+  },
+  frameLabel: {
+    fontSize: '11px',
+    fontWeight: 600,
+    color: '#666',
+    textTransform: 'uppercase' as const,
+    letterSpacing: '0.08em',
+  },
+  frameWrapper: {
+    position: 'relative' as const,
+    background: '#0a0a0a',
+    borderRadius: '6px',
+    overflow: 'hidden',
+    aspectRatio: '16/9',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  frameImg: {
+    width: '100%',
+    height: '100%',
+    objectFit: 'contain' as const,
+    display: 'block',
+  },
+  frameCanvas: {
+    position: 'absolute' as const,
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    pointerEvents: 'none' as const,
+  },
+  framePlaceholder: {
+    color: '#333',
+    fontSize: '12px',
+    fontFamily: 'monospace',
+  },
+  frameNav: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    justifyContent: 'center',
+  },
+  frameCounter: {
+    fontSize: '12px',
+    color: '#666',
+    fontFamily: 'monospace',
+  },
+  navBtn: {
+    background: 'none',
+    border: '1px solid #333',
+    borderRadius: '4px',
+    color: '#888',
+    fontSize: '12px',
+    cursor: 'pointer',
+    padding: '4px 10px',
+  },
+  explanation: {
+    fontSize: '13px',
+    color: '#666',
+    lineHeight: 1.5,
+    margin: 0,
+    borderLeft: '3px solid #2a2a2a',
+    paddingLeft: '12px',
+  },
+  subExplanation: {
+    fontSize: '12px',
+    color: '#444',
+    lineHeight: 1.5,
+    margin: 0,
+    fontStyle: 'italic' as const,
+  },
+  noFrames: {
+    fontSize: '13px',
+    color: '#444',
+    fontStyle: 'italic' as const,
+  },
+  fieldList: {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    gap: '6px',
+  },
+  fieldListLabel: {
+    fontSize: '11px',
+    color: '#555',
+    textTransform: 'uppercase' as const,
+    letterSpacing: '0.06em',
+  },
+  fieldTags: {
+    display: 'flex',
+    flexWrap: 'wrap' as const,
+    gap: '4px',
+  },
+  fieldTag: {
+    fontSize: '11px',
+    background: '#1a1a2a',
+    color: '#8888cc',
+    borderRadius: '3px',
+    padding: '2px 6px',
+    fontFamily: 'monospace',
+  },
+  pre: {
+    fontSize: '11px',
+    color: '#666',
+    background: '#0a0a0a',
+    padding: '8px',
+    borderRadius: '4px',
+    overflow: 'auto',
+    margin: 0,
+    fontFamily: 'monospace',
+  },
+  empty: {
+    color: '#444',
+    fontSize: '13px',
+    padding: '16px 20px',
+  },
+} as const;
diff --git a/features/video-studio/frontend-demo/src/components/InvisibleProtectionsDemo.tsx b/features/video-studio/frontend-demo/src/components/InvisibleProtectionsDemo.tsx
new file mode 100644
index 000000000..a36969c36
--- /dev/null
+++ b/features/video-studio/frontend-demo/src/components/InvisibleProtectionsDemo.tsx
@@ -0,0 +1,454 @@
+import { useCallback, useEffect, useRef, useState, type CSSProperties, type ReactElement } from 'react';
+import {
+  listVideoPhotos,
+  listAvailableProtections,
+  submitProtectJob,
+  pollProtectJob,
+  type PhotoItem,
+  type ProtectJobResult,
+} from '../api/invisible-protect-api';
+import { AdversaryPanel } from './AdversaryPanel';
+
+const POLL_INTERVAL_MS = 5000;
+
+export function InvisibleProtectionsDemo(): ReactElement {
+  const [photos, setPhotos] = useState<PhotoItem[]>([]);
+  const [photosError, setPhotosError] = useState<string | null>(null);
+  const [availableOps, setAvailableOps] = useState<string[]>([]);
+  const [selectedPhoto, setSelectedPhoto] = useState<PhotoItem | null>(null);
+  const [selectedOps, setSelectedOps] = useState<string[]>([]);
+  const [outputMode, setOutputMode] = useState<'default' | 'lossless'>('lossless');
+  const [jobs, setJobs] = useState<ProtectJobResult[]>([]);
+  const [expandedJobId, setExpandedJobId] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  // Load gallery + available operations on mount
+  useEffect(() => {
+    listVideoPhotos()
+      .then(setPhotos)
+      .catch((err: unknown) => setPhotosError(String(err)));
+    listAvailableProtections()
+      .then(setAvailableOps)
+      .catch(() => setAvailableOps(['metadata-strip', 'ml-cloak', 'detection-evasion']));
+  }, []);
+
+  // Poll active jobs every 5s
+  useEffect(() => {
+    const hasActive = jobs.some((j) => j.status === 'queued' || j.status === 'processing');
+    if (!hasActive) {
+      if (pollRef.current) clearInterval(pollRef.current);
+      pollRef.current = null;
+      return;
+    }
+    if (pollRef.current) return;
+    pollRef.current = setInterval(async () => {
+      const updates = await Promise.allSettled(
+        jobs
+          .filter((j) => j.status === 'queued' || j.status === 'processing')
+          .map((j) => pollProtectJob(j.job_id)),
+      );
+      setJobs((prev) =>
+        prev.map((job) => {
+          const match = updates.find(
+            (r) => r.status === 'fulfilled' && r.value.job_id === job.job_id,
+          );
+          return match && match.status === 'fulfilled' ? match.value : job;
+        }),
+      );
+    }, POLL_INTERVAL_MS);
+    return () => {
+      if (pollRef.current) clearInterval(pollRef.current);
+      pollRef.current = null;
+    };
+  }, [jobs]);
+
+  const toggleOp = useCallback((op: string) => {
+    setSelectedOps((prev) =>
+      prev.includes(op) ? prev.filter((o) => o !== op) : [...prev, op],
+    );
+  }, []);
+
+  const handleSubmit = useCallback(async () => {
+    if (!selectedPhoto || selectedOps.length === 0) return;
+    setSubmitting(true);
+    setSubmitError(null);
+    try {
+      const { job_id } = await submitProtectJob(selectedPhoto.path, selectedOps, outputMode);
+      const initial: ProtectJobResult = {
+        job_id,
+        status: 'queued',
+        output_path: null,
+        proofs: [],
+        frame_samples: [],
+        error: null,
+      };
+      setJobs((prev) => [initial, ...prev]);
+    } catch (err: unknown) {
+      setSubmitError(String(err));
+    } finally {
+      setSubmitting(false);
+    }
+  }, [selectedPhoto, selectedOps, outputMode]);
+
+  return (
+    <div style={s.root}>
+      {/* Top section: gallery + operation picker */}
+      <div style={s.topRow}>
+        {/* Gallery */}
+        <section style={s.gallery}>
+          <h2 style={s.sectionTitle}>Select Video</h2>
+          {photosError ? (
+            <div style={s.error}>
+              Failed to load gallery: {photosError}
+              <br />
+              <span style={s.hint}>
+                Is image-assistant running at 10.0.0.116:5220?
+              </span>
+            </div>
+          ) : photos.length === 0 ? (
+            <div style={s.empty}>Loading videos...</div>
+          ) : (
+            <div style={s.photoGrid}>
+              {photos.map((photo) => (
+                <button
+                  key={photo.id}
+                  type="button"
+                  onClick={() => setSelectedPhoto(photo)}
+                  style={{
+                    ...s.photoCard,
+                    ...(selectedPhoto?.id === photo.id ? s.photoCardSelected : {}),
+                  }}
+                  title={photo.filename}
+                >
+                  {photo.thumbnailUrl ? (
+                    <img
+                      src={photo.thumbnailUrl}
+                      alt={photo.filename}
+                      style={s.thumbnail}
+                    />
+                  ) : (
+                    <div style={s.thumbnailPlaceholder}>video</div>
+                  )}
+                  <span style={s.photoName}>{photo.filename}</span>
+                </button>
+              ))}
+            </div>
+          )}
+        </section>
+
+        {/* Operation picker */}
+        <section style={s.opPicker}>
+          <h2 style={s.sectionTitle}>Protections</h2>
+          <div style={s.opList}>
+            {(availableOps.length > 0
+              ? availableOps
+              : ['metadata-strip', 'ml-cloak', 'detection-evasion']
+            ).map((op) => (
+              <label key={op} style={s.opLabel}>
+                <input
+                  type="checkbox"
+                  checked={selectedOps.includes(op)}
+                  onChange={() => toggleOp(op)}
+                  style={s.checkbox}
+                />
+                <span style={s.opName}>{op}</span>
+              </label>
+            ))}
+          </div>
+
+          <div style={s.outputModeRow}>
+            <span style={s.outputModeLabel}>Output:</span>
+            {(['default', 'lossless'] as const).map((mode) => (
+              <label key={mode} style={s.radioLabel}>
+                <input
+                  type="radio"
+                  name="outputMode"
+                  value={mode}
+                  checked={outputMode === mode}
+                  onChange={() => setOutputMode(mode)}
+                  style={s.radio}
+                />
+                {mode === 'lossless' ? 'Lossless (FFV1)' : 'Standard (H.264)'}
+              </label>
+            ))}
+          </div>
+
+          <button
+            type="button"
+            onClick={handleSubmit}
+            disabled={!selectedPhoto || selectedOps.length === 0 || submitting}
+            style={{
+              ...s.submitBtn,
+              ...(!selectedPhoto || selectedOps.length === 0 || submitting
+                ? s.submitBtnDisabled
+                : {}),
+            }}
+          >
+            {submitting ? 'Submitting...' : 'Submit ->'}
+          </button>
+
+          {submitError && <div style={s.error}>{submitError}</div>}
+
+          {selectedPhoto && (
+            <div style={s.selectedHint}>
+              Selected: <strong>{selectedPhoto.filename}</strong>
+            </div>
+          )}
+        </section>
+      </div>
+
+      {/* Job queue */}
+      {jobs.length > 0 && (
+        <section style={s.jobQueue}>
+          <h2 style={s.sectionTitle}>Jobs</h2>
+          {jobs.map((job) => (
+            <div key={job.job_id} style={s.jobCard}>
+              <div style={s.jobHeader}>
+                <span style={{ ...s.jobStatus, ...statusColor(job.status) }}>
+                  {statusIcon(job.status)} {job.status}
+                </span>
+                <span style={s.jobId}>{job.job_id.slice(0, 8)}...</span>
+                {job.status === 'done' && (
+                  <button
+                    type="button"
+                    style={s.expandBtn}
+                    onClick={() =>
+                      setExpandedJobId((prev) => (prev === job.job_id ? null : job.job_id))
+                    }
+                  >
+                    {expandedJobId === job.job_id ? 'Collapse ^' : 'Adversary View v'}
+                  </button>
+                )}
+                {job.error && <span style={s.jobError}>{job.error}</span>}
+              </div>
+
+              {expandedJobId === job.job_id && job.status === 'done' && (
+                <AdversaryPanel job={job} />
+              )}
+            </div>
+          ))}
+        </section>
+      )}
+    </div>
+  );
+}
+
+function statusIcon(status: string): string {
+  switch (status) {
+    case 'queued': return '[queued]';
+    case 'processing': return '[running]';
+    case 'done': return '[done]';
+    case 'failed': return '[failed]';
+    default: return '[?]';
+  }
+}
+
+function statusColor(status: string): CSSProperties {
+  switch (status) {
+    case 'done': return { color: '#4caf50' };
+    case 'failed': return { color: '#e53935' };
+    case 'processing': return { color: '#ff9800' };
+    default: return { color: '#888' };
+  }
+}
+
+const s = {
+  root: {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    gap: '24px',
+  },
+  topRow: {
+    display: 'grid',
+    gridTemplateColumns: '1fr 280px',
+    gap: '24px',
+    alignItems: 'flex-start',
+  },
+  gallery: {
+    background: '#111',
+    borderRadius: '8px',
+    padding: '16px',
+    border: '1px solid #222',
+  },
+  sectionTitle: {
+    fontSize: '14px',
+    fontWeight: 600,
+    color: '#999',
+    textTransform: 'uppercase' as const,
+    letterSpacing: '0.08em',
+    margin: '0 0 12px',
+  },
+  photoGrid: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))',
+    gap: '8px',
+  },
+  photoCard: {
+    background: '#1a1a1a',
+    border: '2px solid #2a2a2a',
+    borderRadius: '6px',
+    cursor: 'pointer',
+    padding: '8px',
+    display: 'flex',
+    flexDirection: 'column' as const,
+    alignItems: 'center',
+    gap: '6px',
+    transition: 'border-color 0.15s',
+  },
+  photoCardSelected: {
+    borderColor: '#9b59b6',
+    background: '#1a0e2a',
+  },
+  thumbnail: {
+    width: '100%',
+    aspectRatio: '16/9',
+    objectFit: 'cover' as const,
+    borderRadius: '4px',
+  },
+  thumbnailPlaceholder: {
+    width: '100%',
+    aspectRatio: '16/9',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: '11px',
+    color: '#555',
+    background: '#222',
+    borderRadius: '4px',
+    fontFamily: 'monospace',
+  },
+  photoName: {
+    fontSize: '11px',
+    color: '#888',
+    textAlign: 'center' as const,
+    wordBreak: 'break-all' as const,
+    lineHeight: 1.3,
+  },
+  opPicker: {
+    background: '#111',
+    borderRadius: '8px',
+    padding: '16px',
+    border: '1px solid #222',
+    display: 'flex',
+    flexDirection: 'column' as const,
+    gap: '12px',
+  },
+  opList: {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    gap: '8px',
+  },
+  opLabel: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+    cursor: 'pointer',
+    fontSize: '13px',
+    color: '#ccc',
+  },
+  checkbox: { cursor: 'pointer', accentColor: '#9b59b6' },
+  opName: { fontFamily: 'monospace' },
+  outputModeRow: {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    gap: '4px',
+    borderTop: '1px solid #222',
+    paddingTop: '10px',
+  },
+  outputModeLabel: { fontSize: '12px', color: '#666', marginBottom: '4px' },
+  radioLabel: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '6px',
+    fontSize: '12px',
+    color: '#aaa',
+    cursor: 'pointer',
+  },
+  radio: { cursor: 'pointer', accentColor: '#9b59b6' },
+  submitBtn: {
+    background: '#7b2d8b',
+    color: '#fff',
+    border: 'none',
+    borderRadius: '6px',
+    padding: '10px 16px',
+    fontSize: '14px',
+    fontWeight: 600,
+    cursor: 'pointer',
+    marginTop: '4px',
+    transition: 'background 0.15s',
+  },
+  submitBtnDisabled: {
+    background: '#2a2a2a',
+    color: '#555',
+    cursor: 'not-allowed',
+  },
+  selectedHint: {
+    fontSize: '11px',
+    color: '#666',
+    wordBreak: 'break-all' as const,
+  },
+  jobQueue: {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    gap: '8px',
+  },
+  jobCard: {
+    background: '#111',
+    border: '1px solid #222',
+    borderRadius: '8px',
+    overflow: 'hidden',
+  },
+  jobHeader: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    padding: '12px 16px',
+    flexWrap: 'wrap' as const,
+  },
+  jobStatus: {
+    fontSize: '13px',
+    fontWeight: 600,
+    fontFamily: 'monospace',
+  },
+  jobId: {
+    fontSize: '11px',
+    color: '#555',
+    fontFamily: 'monospace',
+    flex: 1,
+  },
+  expandBtn: {
+    background: 'none',
+    border: '1px solid #333',
+    borderRadius: '4px',
+    color: '#c090e0',
+    fontSize: '12px',
+    cursor: 'pointer',
+    padding: '4px 10px',
+  },
+  jobError: {
+    fontSize: '12px',
+    color: '#e53935',
+    flex: 1,
+  },
+  error: {
+    fontSize: '13px',
+    color: '#e57373',
+    background: '#1a0000',
+    borderRadius: '6px',
+    padding: '10px 12px',
+    border: '1px solid #3a1010',
+  },
+  hint: {
+    fontSize: '11px',
+    color: '#666',
+    display: 'block',
+    marginTop: '4px',
+  },
+  empty: {
+    color: '#555',
+    fontSize: '13px',
+    padding: '12px 0',
+  },
+} as const;