@agent-native/core 0.76.11 → 0.76.13

package/corpus/core/src/client/blocks/library/block-copy.ts

@@ -0,0 +1,367 @@
+import { useOptionalLocale } from "../../i18n.js";
+import {
+  DEFAULT_LOCALE,
+  type LocaleCode,
+} from "../../../localization/shared.js";
+
+const BLOCK_COPY: Record<
+  LocaleCode,
+  {
+    added: string;
+    modified: string;
+    removed: string;
+    renamed: string;
+    deprecated: string;
+    requiresAuthentication: string;
+    auth: string;
+    parameters: string;
+    name: string;
+    in: string;
+    type: string;
+    requiredColumn: string;
+    description: string;
+    required: string;
+    optional: string;
+    requestBody: string;
+    responses: string;
+    expandDiagram: string;
+    loadingDiagram: string;
+    couldNotRenderDiagram: string;
+    addDiagramDefinition: string;
+    switchToCleanDiagrams: string;
+    switchToHandDrawnDiagrams: string;
+    cleanDiagramsSwitch: string;
+    handDrawnDiagramsSwitch: string;
+    clean: string;
+    sketchy: string;
+    switchVisualStyle: string;
+    lineAnnotation: string;
+    hiddenLinesExpand: string;
+  }
+> = {
+  "en-US": {
+    added: "Added",
+    modified: "Modified",
+    removed: "Removed",
+    renamed: "Renamed",
+    deprecated: "Deprecated",
+    requiresAuthentication: "Requires authentication",
+    auth: "Auth",
+    parameters: "Parameters",
+    name: "Name",
+    in: "In",
+    type: "Type",
+    requiredColumn: "Required",
+    description: "Description",
+    required: "required",
+    optional: "optional",
+    requestBody: "Request body",
+    responses: "Responses",
+    expandDiagram: "Expand diagram",
+    loadingDiagram: "Loading diagram...",
+    couldNotRenderDiagram: "Could not render diagram",
+    addDiagramDefinition: "Add a diagram definition to render it.",
+    switchToCleanDiagrams: "Switch to clean diagrams",
+    switchToHandDrawnDiagrams: "Switch to hand-drawn diagrams",
+    cleanDiagramsSwitch: "Clean diagrams - switch to hand-drawn",
+    handDrawnDiagramsSwitch: "Hand-drawn diagrams - switch to clean",
+    clean: "Clean",
+    sketchy: "Sketchy",
+    switchVisualStyle: "Switch to {{style}} visual style",
+    lineAnnotation: "Line {{line}} annotation",
+    hiddenLinesExpand: "{{count}} lines - click to expand",
+  },
+  "zh-CN": {
+    added: "已添加",
+    modified: "已修改",
+    removed: "已移除",
+    renamed: "已重命名",
+    deprecated: "已弃用",
+    requiresAuthentication: "需要身份验证",
+    auth: "身份验证",
+    parameters: "参数",
+    name: "名称",
+    in: "位置",
+    type: "类型",
+    requiredColumn: "必填",
+    description: "描述",
+    required: "必填",
+    optional: "可选",
+    requestBody: "请求体",
+    responses: "响应",
+    expandDiagram: "展开图表",
+    loadingDiagram: "正在加载图表...",
+    couldNotRenderDiagram: "无法渲染图表",
+    addDiagramDefinition: "添加图表定义以渲染。",
+    switchToCleanDiagrams: "切换到简洁图表",
+    switchToHandDrawnDiagrams: "切换到手绘图表",
+    cleanDiagramsSwitch: "简洁图表 - 切换到手绘",
+    handDrawnDiagramsSwitch: "手绘图表 - 切换到简洁",
+    clean: "简洁",
+    sketchy: "手绘",
+    switchVisualStyle: "切换到{{style}}视觉样式",
+    lineAnnotation: "第 {{line}} 行注释",
+    hiddenLinesExpand: "{{count}} 行 - 点击展开",
+  },
+  "es-ES": {
+    added: "Añadido",
+    modified: "Modificado",
+    removed: "Eliminado",
+    renamed: "Renombrado",
+    deprecated: "Obsoleto",
+    requiresAuthentication: "Requiere autenticación",
+    auth: "Autenticación",
+    parameters: "Parámetros",
+    name: "Nombre",
+    in: "En",
+    type: "Tipo",
+    requiredColumn: "Obligatorio",
+    description: "Descripción",
+    required: "obligatorio",
+    optional: "opcional",
+    requestBody: "Cuerpo de la solicitud",
+    responses: "Respuestas",
+    expandDiagram: "Ampliar diagrama",
+    loadingDiagram: "Cargando diagrama...",
+    couldNotRenderDiagram: "No se pudo renderizar el diagrama",
+    addDiagramDefinition: "Añade una definición para renderizarlo.",
+    switchToCleanDiagrams: "Cambiar a diagramas limpios",
+    switchToHandDrawnDiagrams: "Cambiar a diagramas dibujados",
+    cleanDiagramsSwitch: "Diagramas limpios - cambiar a dibujados",
+    handDrawnDiagramsSwitch: "Diagramas dibujados - cambiar a limpios",
+    clean: "Limpio",
+    sketchy: "Boceto",
+    switchVisualStyle: "Cambiar al estilo visual {{style}}",
+    lineAnnotation: "Anotación de la línea {{line}}",
+    hiddenLinesExpand: "{{count}} líneas - clic para expandir",
+  },
+  "fr-FR": {
+    added: "Ajouté",
+    modified: "Modifié",
+    removed: "Supprimé",
+    renamed: "Renommé",
+    deprecated: "Obsolète",
+    requiresAuthentication: "Authentification requise",
+    auth: "Auth",
+    parameters: "Paramètres",
+    name: "Nom",
+    in: "Dans",
+    type: "Type",
+    requiredColumn: "Requis",
+    description: "Description",
+    required: "requis",
+    optional: "facultatif",
+    requestBody: "Corps de requête",
+    responses: "Réponses",
+    expandDiagram: "Agrandir le diagramme",
+    loadingDiagram: "Chargement du diagramme...",
+    couldNotRenderDiagram: "Impossible de rendre le diagramme",
+    addDiagramDefinition: "Ajoutez une définition pour le rendre.",
+    switchToCleanDiagrams: "Passer aux diagrammes nets",
+    switchToHandDrawnDiagrams: "Passer aux diagrammes dessinés",
+    cleanDiagramsSwitch: "Diagrammes nets - passer au dessin",
+    handDrawnDiagramsSwitch: "Diagrammes dessinés - passer au net",
+    clean: "Net",
+    sketchy: "Croquis",
+    switchVisualStyle: "Passer au style visuel {{style}}",
+    lineAnnotation: "Annotation de la ligne {{line}}",
+    hiddenLinesExpand: "{{count}} lignes - cliquer pour développer",
+  },
+  "de-DE": {
+    added: "Hinzugefügt",
+    modified: "Geändert",
+    removed: "Entfernt",
+    renamed: "Umbenannt",
+    deprecated: "Veraltet",
+    requiresAuthentication: "Authentifizierung erforderlich",
+    auth: "Auth",
+    parameters: "Parameter",
+    name: "Name",
+    in: "In",
+    type: "Typ",
+    requiredColumn: "Erforderlich",
+    description: "Beschreibung",
+    required: "erforderlich",
+    optional: "optional",
+    requestBody: "Anfragetext",
+    responses: "Antworten",
+    expandDiagram: "Diagramm vergrößern",
+    loadingDiagram: "Diagramm wird geladen...",
+    couldNotRenderDiagram: "Diagramm konnte nicht gerendert werden",
+    addDiagramDefinition: "Füge eine Diagrammdefinition hinzu.",
+    switchToCleanDiagrams: "Zu klaren Diagrammen wechseln",
+    switchToHandDrawnDiagrams: "Zu handgezeichneten Diagrammen wechseln",
+    cleanDiagramsSwitch: "Klare Diagramme - zu handgezeichnet wechseln",
+    handDrawnDiagramsSwitch: "Handgezeichnet - zu klar wechseln",
+    clean: "Klar",
+    sketchy: "Skizze",
+    switchVisualStyle: "Zum visuellen Stil {{style}} wechseln",
+    lineAnnotation: "Annotation für Zeile {{line}}",
+    hiddenLinesExpand: "{{count}} Zeilen - zum Erweitern klicken",
+  },
+  "ja-JP": {
+    added: "追加",
+    modified: "変更",
+    removed: "削除",
+    renamed: "名前変更",
+    deprecated: "非推奨",
+    requiresAuthentication: "認証が必要です",
+    auth: "認証",
+    parameters: "パラメーター",
+    name: "名前",
+    in: "場所",
+    type: "型",
+    requiredColumn: "必須",
+    description: "説明",
+    required: "必須",
+    optional: "任意",
+    requestBody: "リクエスト本文",
+    responses: "レスポンス",
+    expandDiagram: "図を拡大",
+    loadingDiagram: "図を読み込み中...",
+    couldNotRenderDiagram: "図を表示できませんでした",
+    addDiagramDefinition: "表示する図の定義を追加してください。",
+    switchToCleanDiagrams: "クリーン表示に切り替え",
+    switchToHandDrawnDiagrams: "手描き表示に切り替え",
+    cleanDiagramsSwitch: "クリーン表示 - 手描きに切り替え",
+    handDrawnDiagramsSwitch: "手描き表示 - クリーンに切り替え",
+    clean: "クリーン",
+    sketchy: "手描き",
+    switchVisualStyle: "{{style}}表示に切り替え",
+    lineAnnotation: "{{line}} 行目の注釈",
+    hiddenLinesExpand: "{{count}} 行 - クリックして展開",
+  },
+  "ko-KR": {
+    added: "추가됨",
+    modified: "수정됨",
+    removed: "제거됨",
+    renamed: "이름 변경됨",
+    deprecated: "사용 중단됨",
+    requiresAuthentication: "인증 필요",
+    auth: "인증",
+    parameters: "매개변수",
+    name: "이름",
+    in: "위치",
+    type: "유형",
+    requiredColumn: "필수",
+    description: "설명",
+    required: "필수",
+    optional: "선택",
+    requestBody: "요청 본문",
+    responses: "응답",
+    expandDiagram: "다이어그램 확대",
+    loadingDiagram: "다이어그램 로드 중...",
+    couldNotRenderDiagram: "다이어그램을 렌더링할 수 없음",
+    addDiagramDefinition: "렌더링할 다이어그램 정의를 추가하세요.",
+    switchToCleanDiagrams: "깔끔한 다이어그램으로 전환",
+    switchToHandDrawnDiagrams: "손그림 다이어그램으로 전환",
+    cleanDiagramsSwitch: "깔끔한 다이어그램 - 손그림으로 전환",
+    handDrawnDiagramsSwitch: "손그림 다이어그램 - 깔끔하게 전환",
+    clean: "깔끔함",
+    sketchy: "손그림",
+    switchVisualStyle: "{{style}} 시각 스타일로 전환",
+    lineAnnotation: "{{line}}번 줄 주석",
+    hiddenLinesExpand: "{{count}}줄 - 클릭하여 펼치기",
+  },
+  "pt-BR": {
+    added: "Adicionado",
+    modified: "Modificado",
+    removed: "Removido",
+    renamed: "Renomeado",
+    deprecated: "Obsoleto",
+    requiresAuthentication: "Requer autenticação",
+    auth: "Autenticação",
+    parameters: "Parâmetros",
+    name: "Nome",
+    in: "Em",
+    type: "Tipo",
+    requiredColumn: "Obrigatório",
+    description: "Descrição",
+    required: "obrigatório",
+    optional: "opcional",
+    requestBody: "Corpo da requisição",
+    responses: "Respostas",
+    expandDiagram: "Expandir diagrama",
+    loadingDiagram: "Carregando diagrama...",
+    couldNotRenderDiagram: "Não foi possível renderizar o diagrama",
+    addDiagramDefinition: "Adicione uma definição para renderizar.",
+    switchToCleanDiagrams: "Alternar para diagramas limpos",
+    switchToHandDrawnDiagrams: "Alternar para diagramas desenhados",
+    cleanDiagramsSwitch: "Diagramas limpos - alternar para desenhados",
+    handDrawnDiagramsSwitch: "Diagramas desenhados - alternar para limpos",
+    clean: "Limpo",
+    sketchy: "Esboço",
+    switchVisualStyle: "Alternar para o estilo visual {{style}}",
+    lineAnnotation: "Anotação da linha {{line}}",
+    hiddenLinesExpand: "{{count}} linhas - clique para expandir",
+  },
+  "hi-IN": {
+    added: "जोड़ा गया",
+    modified: "बदला गया",
+    removed: "हटाया गया",
+    renamed: "नाम बदला गया",
+    deprecated: "अप्रचलित",
+    requiresAuthentication: "प्रमाणीकरण आवश्यक",
+    auth: "प्रमाणीकरण",
+    parameters: "पैरामीटर",
+    name: "नाम",
+    in: "स्थान",
+    type: "प्रकार",
+    requiredColumn: "आवश्यक",
+    description: "विवरण",
+    required: "आवश्यक",
+    optional: "वैकल्पिक",
+    requestBody: "अनुरोध बॉडी",
+    responses: "प्रतिक्रियाएँ",
+    expandDiagram: "डायग्राम बड़ा करें",
+    loadingDiagram: "डायग्राम लोड हो रहा है...",
+    couldNotRenderDiagram: "डायग्राम रेंडर नहीं हो सका",
+    addDiagramDefinition: "रेंडर करने के लिए डायग्राम परिभाषा जोड़ें।",
+    switchToCleanDiagrams: "साफ़ डायग्राम पर स्विच करें",
+    switchToHandDrawnDiagrams: "हाथ से बने डायग्राम पर स्विच करें",
+    cleanDiagramsSwitch: "साफ़ डायग्राम - हाथ से बने पर स्विच करें",
+    handDrawnDiagramsSwitch: "हाथ से बने डायग्राम - साफ़ पर स्विच करें",
+    clean: "साफ़",
+    sketchy: "स्केच",
+    switchVisualStyle: "{{style}} दृश्य शैली पर स्विच करें",
+    lineAnnotation: "लाइन {{line}} एनोटेशन",
+    hiddenLinesExpand: "{{count}} लाइनें - विस्तार के लिए क्लिक करें",
+  },
+  "ar-SA": {
+    added: "مضاف",
+    modified: "معدل",
+    removed: "محذوف",
+    renamed: "أعيدت تسميته",
+    deprecated: "مهمل",
+    requiresAuthentication: "يتطلب المصادقة",
+    auth: "المصادقة",
+    parameters: "المعاملات",
+    name: "الاسم",
+    in: "في",
+    type: "النوع",
+    requiredColumn: "مطلوب",
+    description: "الوصف",
+    required: "مطلوب",
+    optional: "اختياري",
+    requestBody: "نص الطلب",
+    responses: "الاستجابات",
+    expandDiagram: "توسيع الرسم",
+    loadingDiagram: "جار تحميل الرسم...",
+    couldNotRenderDiagram: "تعذر عرض الرسم",
+    addDiagramDefinition: "أضف تعريف رسم لعرضه.",
+    switchToCleanDiagrams: "التبديل إلى رسوم نظيفة",
+    switchToHandDrawnDiagrams: "التبديل إلى رسوم مرسومة يدويا",
+    cleanDiagramsSwitch: "رسوم نظيفة - التبديل إلى مرسومة يدويا",
+    handDrawnDiagramsSwitch: "رسوم مرسومة يدويا - التبديل إلى نظيفة",
+    clean: "نظيف",
+    sketchy: "مرسوم",
+    switchVisualStyle: "التبديل إلى نمط {{style}} المرئي",
+    lineAnnotation: "تعليق السطر {{line}}",
+    hiddenLinesExpand: "{{count}} أسطر - انقر للتوسيع",
+  },
+};
+
+export function useBlockCopy() {
+  const locale = useOptionalLocale()?.locale ?? DEFAULT_LOCALE;
+  return BLOCK_COPY[locale] ?? BLOCK_COPY[DEFAULT_LOCALE];
+}

package/corpus/core/src/client/blocks/library/diagram.tsx

@@ -31,6 +31,7 @@ import {
   sanitizeWireframeCss,
   scopeDesignCss,
 } from "./sanitize-html.js";
+import { useBlockCopy } from "./block-copy.js";
 import {
   diagramMdx,
   diagramSchema,
@@ -626,13 +627,14 @@ function ExpandableDiagramBody({
   const [expanded, setExpanded] = useState(false);
   const supportsStyleToggle = Boolean(data.html);
   const style = useWireframeStyle();
+  const copy = useBlockCopy();
   const sketchy = style === "sketchy";
   const styleLabel = sketchy
-    ? "Switch to clean diagrams"
-    : "Switch to hand-drawn diagrams";
+    ? copy.switchToCleanDiagrams
+    : copy.switchToHandDrawnDiagrams;
   const styleTooltip = sketchy
-    ? "Hand-drawn diagrams - switch to clean"
-    : "Clean diagrams - switch to hand-drawn";
+    ? copy.handDrawnDiagramsSwitch
+    : copy.cleanDiagramsSwitch;
   return (
     <div className="group/diagram relative">
       <DiagramBody data={data} ctx={ctx} compact={compact} />
@@ -665,13 +667,13 @@ function ExpandableDiagramBody({
                 type="button"
                 data-plan-interactive
                 onClick={() => setExpanded(true)}
-                aria-label="Expand diagram"
+                aria-label={copy.expandDiagram}
                 className="an-diagram-expand-trigger flex size-7 items-center justify-center rounded-md border border-border/60 bg-background/90 text-muted-foreground opacity-0 shadow-sm backdrop-blur transition-[color,opacity] hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring group-hover/diagram:opacity-100"
               >
                 <IconArrowsMaximize className="size-4" />
               </button>
             </TooltipTrigger>
-            <TooltipContent side="left">Expand diagram</TooltipContent>
+            <TooltipContent side="left">{copy.expandDiagram}</TooltipContent>
           </Tooltip>
         </div>
       </TooltipProvider>

package/corpus/core/src/client/blocks/library/wireframe.tsx

@@ -35,6 +35,7 @@ import {
   sanitizeWireframeHtml,
   scopeDesignCss,
 } from "./sanitize-html.js";
+import { useBlockCopy } from "./block-copy.js";
 import { renderWireframeIconHtml } from "./wireframe-icons.js";
 
 /**
@@ -291,9 +292,13 @@ function ArtboardFrame({
 
 function WireframeStyleToggleButton() {
   const style = useWireframeStyle();
+  const copy = useBlockCopy();
   const nextStyle = style === "sketchy" ? "clean" : "sketchy";
-  const label = nextStyle === "clean" ? "Clean" : "Sketchy";
-  const description = `Switch to ${label.toLowerCase()} visual style`;
+  const label = nextStyle === "clean" ? copy.clean : copy.sketchy;
+  const description = copy.switchVisualStyle.replace(
+    "{{style}}",
+    label.toLocaleLowerCase(),
+  );
 
   return (
     <button

package/corpus/core/src/client/i18n.tsx

@@ -464,6 +464,10 @@ export function useLocale(): LocaleContextValue {
   return value;
 }
 
+export function useOptionalLocale(): LocaleContextValue | null {
+  return useContext(LocaleContext);
+}
+
 const CORE_FALLBACK_MESSAGES: Record<string, string> = {
   "runsTray.runs": "Runs",
   "runsTray.agentRuns": "Agent runs",

package/corpus/templates/clips/app/components/recorder/camera-visualizer.tsx

@@ -2,6 +2,11 @@ import { useCallback, useEffect, useRef, useState } from "react";
 
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
+import {
+  createBackgroundBlurStream,
+  DEFAULT_BLUR_PX,
+  type CameraBlurHandle,
+} from "@/lib/camera-blur";
 import type { CameraBubbleSize } from "./camera-bubble";
 
 export type CameraTestStatus = "idle" | "starting" | "live" | "error";
@@ -10,6 +15,10 @@ export interface CameraVisualizerProps {
   deviceId: string | null;
   disabled?: boolean;
   className?: string;
+  /** Mirror the recording's background-blur setting in the live test preview. */
+  blur?: boolean;
+  /** Background blur radius (px) reflected live in the test preview. */
+  blurRadius?: number;
   size?: CameraBubbleSize;
   onSizeChange?: (size: CameraBubbleSize) => void;
   onStatusChange?: (
@@ -119,6 +128,8 @@ export function CameraVisualizer({
   deviceId,
   disabled,
   className,
+  blur = false,
+  blurRadius = DEFAULT_BLUR_PX,
   size = "md",
   onSizeChange,
   onStatusChange,
@@ -126,8 +137,14 @@ export function CameraVisualizer({
 }: CameraVisualizerProps) {
   const videoRef = useRef<HTMLVideoElement | null>(null);
   const streamRef = useRef<MediaStream | null>(null);
+  const blurHandleRef = useRef<CameraBlurHandle | null>(null);
+  // Bumped per attachPreview() so a stale segmenter build (blur toggled mid-load)
+  // bails instead of clobbering the preview.
+  const attachGenRef = useRef(0);
+  const blurRadiusRef = useRef(blurRadius);
   const runIdRef = useRef(0);
   const previousDeviceIdRef = useRef(deviceId);
+  const previousBlurRef = useRef(blur);
 
   const [status, setStatus] = useState<CameraTestStatus>("idle");
   const [error, setError] = useState<string | null>(null);
@@ -144,11 +161,45 @@ export function CameraVisualizer({
   }, [onPreviewChange]);
 
   const stopCurrent = useCallback(() => {
+    blurHandleRef.current?.cleanup();
+    blurHandleRef.current = null;
     stopStream(streamRef.current);
     streamRef.current = null;
     clearVideo();
   }, [clearVideo]);
 
+  // Bind the raw camera or its blurred derivative to the <video> per the current
+  // `blur` setting, so the preview matches what recording bakes in. Each call
+  // claims a generation and bails if a newer attach superseded it during an await.
+  const attachPreview = useCallback(async () => {
+    const gen = ++attachGenRef.current;
+    const raw = streamRef.current;
+    const video = videoRef.current;
+    if (!raw || !video) return;
+
+    let display: MediaStream = raw;
+    if (blur) {
+      blurHandleRef.current?.cleanup();
+      blurHandleRef.current = null;
+      const handle = await createBackgroundBlurStream(raw, {
+        blurPx: blurRadiusRef.current,
+      });
+      if (gen !== attachGenRef.current || streamRef.current !== raw) {
+        handle.cleanup();
+        return;
+      }
+      blurHandleRef.current = handle;
+      display = handle.stream;
+    } else {
+      blurHandleRef.current?.cleanup();
+      blurHandleRef.current = null;
+    }
+
+    if (gen !== attachGenRef.current) return;
+    if (video.srcObject !== display) video.srcObject = display;
+    await video.play().catch(() => {});
+  }, [blur]);
+
   const stopTest = useCallback(() => {
     runIdRef.current += 1;
     stopCurrent();
@@ -216,12 +267,15 @@ export function CameraVisualizer({
       }
 
       streamRef.current = stream;
-      const video = videoRef.current;
-      if (video) {
-        video.srcObject = stream;
-        await video.play().catch(() => {});
+      // Webcam unplugged mid-test: tear down so the preview + blur pipeline
+      // don't keep running frozen. runId guard skips our own stop().
+      for (const track of stream.getVideoTracks()) {
+        track.addEventListener("ended", () => {
+          if (runIdRef.current === runId) stopTest();
+        });
       }
-      // Re-check after play()'s await so a newer startTest can't be clobbered.
+      await attachPreview();
+      // Re-check after the async attach so a newer startTest can't be clobbered.
       if (runIdRef.current !== runId) {
         stopCurrent();
         return;
@@ -239,7 +293,15 @@ export function CameraVisualizer({
       onStatusChange?.("error", { error: message });
       clearVideo();
     }
-  }, [clearVideo, deviceId, disabled, onStatusChange, stopCurrent]);
+  }, [
+    attachPreview,
+    clearVideo,
+    deviceId,
+    disabled,
+    onStatusChange,
+    stopCurrent,
+    stopTest,
+  ]);
 
   useEffect(() => {
     if (disabled) {
@@ -270,10 +332,10 @@ export function CameraVisualizer({
   useEffect(() => {
     if (status !== "live" && status !== "starting") return;
     const video = videoRef.current;
-    const stream = streamRef.current;
-    if (!video || !stream) return;
-    if (video.srcObject !== stream) {
-      video.srcObject = stream;
+    const display = blurHandleRef.current?.stream ?? streamRef.current;
+    if (!video || !display) return;
+    if (video.srcObject !== display) {
+      video.srcObject = display;
     }
     const tryPlay = () => {
       video.play().catch(() => undefined);
@@ -285,6 +347,22 @@ export function CameraVisualizer({
     };
   }, [status]);
 
+  // Toggle blur while live: swap the preview source in place (startTest already
+  // binds the initial value, so skip mount).
+  useEffect(() => {
+    if (previousBlurRef.current === blur) return;
+    previousBlurRef.current = blur;
+    if (status !== "live" && status !== "starting") return;
+    if (!streamRef.current) return;
+    void attachPreview();
+  }, [blur, status, attachPreview]);
+
+  // Slider drags adjust the live pipeline without rebuilding the segmenter.
+  useEffect(() => {
+    blurRadiusRef.current = blurRadius;
+    blurHandleRef.current?.setBlurPx(blurRadius);
+  }, [blurRadius]);
+
   const live = status === "live";
   const starting = status === "starting";
   const showBubble = live || starting;