feat(video-studio): ✨ Add demo logic for adversarial player interactions and invisible protections UI in the video studio frontend

Co-Authored-By: Lilith Autocommit <noreply@atlilith.com>

features/video-studio/frontend-demo/src/components/AdversaryPlayerPanel.tsx

@@ -176,7 +176,8 @@ interface VideoWithAdversaryOverlayProps {
   src: string;
   overlayType: OverlayType;
   detectEndpoint: string | null;
-  label: string;
+  label: string;           // column header label
+  adversaryLabel: string;  // adversary system name for badges
   adversaryActive: boolean;
   detectionDisabled?: boolean;
 }
@@ -186,6 +187,7 @@ function VideoWithAdversaryOverlay({
   overlayType,
   detectEndpoint,
   label,
+  adversaryLabel,
   adversaryActive,
   detectionDisabled = false,
 }: VideoWithAdversaryOverlayProps): ReactElement {
@@ -361,7 +363,7 @@ function VideoWithAdversaryOverlay({
             <span
               style={adversaryActive ? p.threatBadgeStyle : p.safeBadgeStyle}
             >
-              {adversaryActive ? `\u26A0\uFE0F ${label} scanning` : `\u2705 ${label} defeated`}
+              {adversaryActive ? `\u26A0\uFE0F ${adversaryLabel} scanning` : `\u2705 ${adversaryLabel} defeated`}
             </span>
           </div>
         )}
@@ -429,8 +431,6 @@ export function AdversaryPlayerPanel({
   const overlayMeta = activeOp ? (ADVERSARY_OVERLAY[activeOp] ?? null) : null;
   const overlayType: OverlayType = overlayMeta?.overlayType ?? 'info-only';
   const detectEndpoint = overlayMeta?.detectEndpoint ?? null;
-  const overlayLabel = overlayMeta?.label ?? (activeOp ?? 'Unknown');
-
   const infoContent = activeOp ? (INFO_OVERLAY_CONTENT[activeOp] ?? null) : null;
 
   return (
@@ -466,6 +466,7 @@ export function AdversaryPlayerPanel({
           overlayType={overlayType}
           detectEndpoint={detectEndpoint}
           label="Source \u00b7 Adversary View"
+          adversaryLabel={overlayMeta?.label ?? ''}
           adversaryActive={true}
           detectionDisabled={false}
         />
@@ -476,6 +477,7 @@ export function AdversaryPlayerPanel({
             overlayType={overlayType}
             detectEndpoint={detectEndpoint}
             label="Protected \u00b7 Defense Result"
+            adversaryLabel={overlayMeta?.label ?? ''}
             adversaryActive={false}
             detectionDisabled={false}
           />

features/video-studio/frontend-demo/src/components/InvisibleProtectionsDemo.tsx

@@ -1095,103 +1095,6 @@ const s = {
     fontFamily: 'monospace',
     flexShrink: 0,
   },
-  // ThreatPreview styles
-  threatContainer: {
-    padding: '20px 24px',
-    flex: 1,
-    display: 'flex',
-    flexDirection: 'column' as const,
-  },
-  threatColumns: {
-    display: 'grid',
-    gridTemplateColumns: '1fr 1fr',
-    gap: '16px',
-    flex: 1,
-  },
-  threatColumn: {
-    display: 'flex',
-    flexDirection: 'column' as const,
-    gap: '8px',
-  },
-  threatColLabel: {
-    fontSize: '10px',
-    fontWeight: 700,
-    color: '#555',
-    textTransform: 'uppercase' as const,
-    letterSpacing: '0.08em',
-  },
-  threatFrameBox: {
-    position: 'relative' as const,
-    aspectRatio: '16/9',
-    background: '#111',
-    borderRadius: '6px',
-    overflow: 'hidden',
-    border: '1px solid #2a2a2a',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  threatThumb: {
-    width: '100%',
-    height: '100%',
-    objectFit: 'cover' as const,
-    display: 'block',
-    filter: 'brightness(0.65)',
-  },
-  threatBadgeList: {
-    position: 'absolute' as const,
-    bottom: '6px',
-    left: '6px',
-    right: '6px',
-    display: 'flex',
-    flexWrap: 'wrap' as const,
-    gap: '3px',
-  },
-  threatBadge: {
-    background: '#c0392bcc',
-    color: '#fff',
-    fontSize: '9px',
-    fontWeight: 700,
-    padding: '2px 5px',
-    borderRadius: '3px',
-    backdropFilter: 'blur(3px)',
-    lineHeight: 1.3,
-  },
-  threatActiveStatus: {
-    fontSize: '11px',
-    color: '#e57373',
-    fontWeight: 600,
-  },
-  threatNoVideo: {
-    display: 'flex',
-    flexDirection: 'column' as const,
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: '100%',
-    gap: '8px',
-  },
-  threatPendingBox: {
-    border: '1px dashed #2a2a2a',
-    background: 'transparent',
-  },
-  threatPending: {
-    display: 'flex',
-    flexDirection: 'column' as const,
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: '100%',
-    gap: '12px',
-    opacity: 0.45,
-  },
-  shieldIcon: { fontSize: '36px' },
-  shieldText: {
-    fontSize: '12px',
-    color: '#888',
-    textAlign: 'center' as const,
-    maxWidth: '160px',
-    lineHeight: 1.5,
-    margin: 0,
-  },
   // JobProgressCanvas styles
   progressCanvas: {
     padding: '32px 24px',