npm - @hybridlabor-api/aos - Versions diffs - 4.3.0 → 4.4.0 - Mend

@hybridlabor-api/aos 4.3.0 → 4.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1052) hide show

package/mcps/windows-computer-use-mcp/docs/_stale/TARGETS_PAGE_SKETCH.md DELETED Viewed

@@ -1,977 +0,0 @@
-# Targets Page — Component Sketch
-**For:** web_sota (`web_sota/src/`)
-**Feature:** W1 in ASSESSMENT_2026-06-08.md
-**Route:** `/targets`
-**Stack:** React + Tailwind + shadcn/ui — same as rest of web_sota
-This document is a Cursor-ready implementation spec. File paths, component names,
-API calls, and state shapes are all concrete. Mock data is clearly marked.
----
-## File tree to create
-```
-web_sota/src/
-  hooks/
-    useHitl.ts          ← polls automation_safety(status) every 10s
-    useWindowFind.ts    ← automation_windows(find, title=...)
-    useTaskRunner.ts    ← automation_task run/poll/cancel lifecycle
-  pages/
-    targets.tsx         ← page shell: HITL bar + tab strip
-    targets/
-      notepad.tsx
-      libreoffice.tsx
-      vroid.tsx
-      kicad.tsx
-      custom.tsx
-      shared.tsx        ← AppStatusStrip, QuickActionBar, EvidencePanel components
-```
-Modify:
-- `App.tsx` — add `/targets` route
-- `components/layout/sidebar.tsx` — add Targets nav entry
----
-## 1. hooks/useHitl.ts
-```typescript
-import { useCallback, useEffect, useState } from "react";
-import { callMcpTool } from "@/lib/mcpTools";
-export type HitlStatus = {
-  approved: boolean;
-  expiresAt: number | null;       // Unix timestamp
-  killSwitchActive: boolean;
-  bypassActive: boolean;
-  actionsLast60s: number;
-  loading: boolean;
-  error: string | null;
-};
-export function useHitl(pollMs = 10_000) {
-  const [status, setStatus] = useState<HitlStatus>({
-    approved: false, expiresAt: null, killSwitchActive: false,
-    bypassActive: false, actionsLast60s: 0, loading: true, error: null,
-  });
-  const refresh = useCallback(async () => {
-    const r = await callMcpTool("automation_safety", { operation: "status" });
-    if (!r.ok) {
-      setStatus(s => ({ ...s, loading: false, error: r.error }));
-      return;
-    }
-    const d = (r.raw.result as any) ?? {};
-    const hitl = d.hitl ?? {};
-    const snap = d.snapshot ?? {};
-    setStatus({
-      approved: hitl.safe_window_until > Date.now() / 1000,
-      expiresAt: hitl.safe_window_until ?? null,
-      killSwitchActive: d.env?.WINDOWS_COMPUTER_USE_MCP_KILL_SWITCH === "1",
-      bypassActive: d.env?.WINDOWS_COMPUTER_USE_MCP_BYPASS_HITL === "1",
-      actionsLast60s: snap.actions_last_60s ?? 0,
-      loading: false,
-      error: null,
-    });
-  }, []);
-  const approve = useCallback(async (minutes = 5) => {
-    await callMcpTool("approve_automation", { duration_minutes: minutes });
-    await refresh();
-  }, [refresh]);
-  useEffect(() => {
-    void refresh();
-    const id = window.setInterval(() => void refresh(), pollMs);
-    return () => clearInterval(id);
-  }, [refresh, pollMs]);
-  return { ...status, refresh, approve };
-}
-```
----
-## 2. hooks/useWindowFind.ts
-```typescript
-import { useCallback, useState } from "react";
-import { callMcpTool } from "@/lib/mcpTools";
-export type WindowFindResult = {
-  handle: number | null;
-  found: boolean;
-  title: string;
-  loading: boolean;
-  error: string | null;
-};
-export function useWindowFind(windowTitle: string) {
-  const [result, setResult] = useState<WindowFindResult>({
-    handle: null, found: false, title: windowTitle, loading: false, error: null,
-  });
-  const find = useCallback(async () => {
-    setResult(s => ({ ...s, loading: true, error: null }));
-    const r = await callMcpTool("automation_windows", {
-      operation: "find",
-      title: windowTitle,
-      partial: true,
-    });
-    if (!r.ok) {
-      setResult(s => ({ ...s, loading: false, found: false, handle: null, error: r.error }));
-      return;
-    }
-    // automation_windows find returns data.windows[] (fast path) — take first match
-    const data = (r.raw.result as any)?.data ?? (r.raw.result as any)?.structured_content?.data;
-    const handle = data?.windows?.[0]?.handle ?? data?.handle ?? null;
-    setResult({ handle, found: handle != null, title: windowTitle, loading: false, error: null });
-  }, [windowTitle]);
-  return { ...result, find };
-}
-```
----
-## 3. hooks/useTaskRunner.ts
-```typescript
-import { useCallback, useRef, useState } from "react";
-import { callMcpTool } from "@/lib/mcpTools";
-export type StepEvidence = {
-  step_index: number;
-  kind: string;
-  status: "success" | "failed" | "skipped_optional";
-  before_screenshot: string | null;
-  after_screenshot: string | null;
-  error?: string;
-};
-export type TaskState = {
-  taskId: string | null;
-  status: "idle" | "running" | "complete" | "failed" | "cancelled";
-  currentStep: number;
-  totalSteps: number;
-  evidence: StepEvidence[];
-  error: string | null;
-  loading: boolean;
-};
-const EMPTY: TaskState = {
-  taskId: null, status: "idle", currentStep: 0, totalSteps: 0,
-  evidence: [], error: null, loading: false,
-};
-export function useTaskRunner() {
-  const [state, setState] = useState<TaskState>(EMPTY);
-  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
-  const stopPoll = () => {
-    if (pollRef.current) { clearInterval(pollRef.current); pollRef.current = null; }
-  };
-  const pollStatus = useCallback(async (taskId: string) => {
-    const r = await callMcpTool("automation_task", { operation: "status", task_id: taskId });
-    if (!r.ok) return;
-    const d = r.raw.result as any;
-    const finished = ["complete", "failed", "cancelled"].includes(d.status);
-    setState(s => ({
-      ...s,
-      status: d.status,
-      currentStep: d.current_step ?? s.currentStep,
-      totalSteps: d.steps_total ?? s.totalSteps,
-      evidence: d.evidence ?? s.evidence,
-      error: d.error ?? null,
-      loading: !finished,
-    }));
-    if (finished) stopPoll();
-  }, []);
-  const run = useCallback(async (params: {
-    app: string;
-    steps: object[];
-    windowHandle?: number | null;
-    outputDir?: string;
-  }) => {
-    stopPoll();
-    setState({ ...EMPTY, status: "running", loading: true, totalSteps: params.steps.length });
-    const r = await callMcpTool("automation_task", {
-      operation: "run",
-      app: params.app,
-      steps: params.steps,
-      window_handle: params.windowHandle ?? undefined,
-      output_dir: params.outputDir ?? undefined,
-    });
-    if (!r.ok) {
-      setState(s => ({ ...s, status: "failed", error: r.error, loading: false }));
-      return;
-    }
-    const d = r.raw.result as any;
-    const taskId: string = d.task_id;
-    const finished = ["complete", "failed", "cancelled"].includes(d.status);
-    setState(s => ({
-      ...s,
-      taskId,
-      status: d.status,
-      currentStep: d.current_step ?? 0,
-      totalSteps: d.steps_total ?? params.steps.length,
-      evidence: d.evidence ?? [],
-      error: d.error ?? null,
-      loading: !finished,
-    }));
-    // automation_task is currently synchronous so returns final state immediately.
-    // Poll anyway in case it becomes async (F8).
-    if (!finished) {
-      pollRef.current = setInterval(() => void pollStatus(taskId), 1500);
-    }
-  }, [pollStatus]);
-  const cancel = useCallback(async () => {
-    stopPoll();
-    if (!state.taskId) { setState(EMPTY); return; }
-    await callMcpTool("automation_task", { operation: "cancel", task_id: state.taskId });
-    setState(s => ({ ...s, status: "cancelled", loading: false }));
-  }, [state.taskId]);
-  const reset = useCallback(() => { stopPoll(); setState(EMPTY); }, []);
-  return { ...state, run, cancel, reset };
-}
-```
----
-## 4. pages/targets/shared.tsx
-Reusable sub-components used by every target tab.
-```tsx
-import { apiPath } from "@/lib/api";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { CheckCircle2, Loader2, XCircle, AlertTriangle } from "lucide-react";
-import type { TaskState } from "@/hooks/useTaskRunner";
-import type { WindowFindResult } from "@/hooks/useWindowFind";
-// ── App Status Strip ─────────────────────────────────────────────────────────
-type AppStatusStripProps = {
-  window: WindowFindResult;
-  dispatch: "foreground" | "background";
-  onFind: () => void;
-};
-export function AppStatusStrip({ window: w, dispatch, onFind }: AppStatusStripProps) {
-  return (
-    <div className="flex items-center gap-3 rounded-md border border-slate-800 bg-slate-950/50 px-4 py-2 text-sm">
-      {w.loading
-        ? <Loader2 className="h-4 w-4 animate-spin text-slate-400" />
-        : w.found
-          ? <CheckCircle2 className="h-4 w-4 text-emerald-400" />
-          : <XCircle className="h-4 w-4 text-amber-400" />
-      }
-      <span className="text-slate-300 font-medium">{w.title}</span>
-      {w.found && (
-        <Badge variant="outline" className="border-slate-700 text-slate-400 font-mono text-xs">
-          HWND {w.handle}
-        </Badge>
-      )}
-      <Badge
-        variant="outline"
-        className={dispatch === "background"
-          ? "border-blue-500/40 text-blue-400"
-          : "border-amber-500/40 text-amber-400"}
-      >
-        {dispatch}
-      </Badge>
-      {w.error && <span className="text-red-400 text-xs truncate">{w.error}</span>}
-      <Button variant="ghost" size="sm" className="ml-auto h-7 text-xs" onClick={onFind}>
-        Find window
-      </Button>
-    </div>
-  );
-}
-// ── Evidence Panel ────────────────────────────────────────────────────────────
-type EvidencePanelProps = { state: TaskState };
-export function EvidencePanel({ state }: EvidencePanelProps) {
-  if (state.status === "idle") return null;
-  return (
-    <Card className="border-slate-800 bg-slate-950/50">
-      <CardHeader className="pb-2">
-        <CardTitle className="text-sm text-slate-300 flex items-center gap-2">
-          Evidence trail
-          {state.loading && <Loader2 className="h-3 w-3 animate-spin text-slate-400" />}
-          {state.status === "complete" && <CheckCircle2 className="h-3 w-3 text-emerald-400" />}
-          {state.status === "failed" && <XCircle className="h-3 w-3 text-red-400" />}
-          <span className="ml-auto font-normal text-slate-500 text-xs">
-            step {state.currentStep} / {state.totalSteps}
-          </span>
-        </CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-3">
-        {state.error && (
-          <div className="rounded border border-red-900/50 bg-red-950/30 px-3 py-2 text-xs text-red-300">
-            {state.error}
-          </div>
-        )}
-        {/* Progress bar */}
-        {state.totalSteps > 0 && (
-          <div className="h-1.5 rounded-full bg-slate-800 overflow-hidden">
-            <div
-              className="h-full bg-emerald-500 transition-all duration-300"
-              style={{ width: `${Math.round((state.currentStep / state.totalSteps) * 100)}%` }}
-            />
-          </div>
-        )}
-        {/* Step cards — most recent first */}
-        <div className="space-y-2 max-h-80 overflow-y-auto">
-          {[...state.evidence].reverse().map((ev) => (
-            <div
-              key={ev.step_index}
-              className="flex items-start gap-3 rounded border border-slate-800 bg-slate-900/50 p-2 text-xs"
-            >
-              <span className="shrink-0 text-slate-500">#{ev.step_index}</span>
-              <span className={`shrink-0 font-mono ${
-                ev.status === "success" ? "text-emerald-400"
-                : ev.status === "failed" ? "text-red-400"
-                : "text-slate-500"}`}>
-                {ev.kind}
-              </span>
-              {ev.error && <span className="text-red-300 truncate">{ev.error}</span>}
-              <div className="ml-auto flex gap-2 shrink-0">
-                {ev.before_screenshot && (
-                  <EvidenceThumb
-                    path={ev.before_screenshot}
-                    label="before"
-                  />
-                )}
-                {ev.after_screenshot && (
-                  <EvidenceThumb
-                    path={ev.after_screenshot}
-                    label="after"
-                  />
-                )}
-              </div>
-            </div>
-          ))}
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
-function EvidenceThumb({ path, label }: { path: string; label: string }) {
-  // path is an absolute Windows path — extract filename and load via download endpoint
-  const filename = path.replace(/\\/g, "/").split("/").pop() ?? path;
-  return (
-    <a
-      href={apiPath(`/api/v1/download/${filename}`)}
-      target="_blank"
-      rel="noreferrer"
-      className="group relative block"
-    >
-      <img
-        src={apiPath(`/api/v1/download/${filename}`)}
-        alt={label}
-        className="h-12 w-20 rounded object-cover border border-slate-700 group-hover:border-slate-500"
-        onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }}
-      />
-      <span className="absolute bottom-0 left-0 rounded-br rounded-tl bg-black/60 px-1 text-[9px] text-slate-300">
-        {label}
-      </span>
-    </a>
-  );
-}
-// ── Step Runner Strip ─────────────────────────────────────────────────────────
-type StepRunnerProps = {
-  templates: Array<{ label: string; steps: object[] }>;
-  outputDir: string;
-  onOutputDirChange: (v: string) => void;
-  onRun: (steps: object[]) => void;
-  onCancel: () => void;
-  running: boolean;
-};
-export function StepRunner({
-  templates, outputDir, onOutputDirChange, onRun, onCancel, running
-}: StepRunnerProps) {
-  const [selectedTemplate, setSelectedTemplate] = useState(0);
-  return (
-    <div className="flex flex-wrap items-end gap-3 rounded-md border border-slate-800 bg-slate-950/50 px-4 py-3">
-      {templates.length > 0 && (
-        <div className="flex flex-col gap-1">
-          <label className="text-xs text-slate-400">Template</label>
-          <select
-            className="h-8 rounded border border-slate-700 bg-slate-900 px-2 text-sm text-slate-200"
-            value={selectedTemplate}
-            onChange={e => setSelectedTemplate(Number(e.target.value))}
-            disabled={running}
-          >
-            {templates.map((t, i) => (
-              <option key={t.label} value={i}>{t.label}</option>
-            ))}
-          </select>
-        </div>
-      )}
-      <div className="flex flex-col gap-1 flex-1 min-w-48">
-        <label className="text-xs text-slate-400">Output dir</label>
-        <input
-          className="h-8 rounded border border-slate-700 bg-slate-900 px-2 text-sm text-slate-200 font-mono"
-          value={outputDir}
-          onChange={e => onOutputDirChange(e.target.value)}
-          placeholder="C:\Users\sandr\AppData\Local\cua-mcp\outputs"
-          disabled={running}
-        />
-      </div>
-      {!running ? (
-        <Button
-          size="sm"
-          className="bg-emerald-600 hover:bg-emerald-700 text-white h-8"
-          onClick={() => onRun(templates[selectedTemplate]?.steps ?? [])}
-          disabled={templates.length === 0}
-        >
-          ▶ Run
-        </Button>
-      ) : (
-        <Button
-          size="sm"
-          variant="destructive"
-          className="h-8"
-          onClick={onCancel}
-        >
-          ✕ Cancel
-        </Button>
-      )}
-    </div>
-  );
-}
-// need useState import at top — add to the import line above
-import { useState } from "react";
-```
----
-## 5. pages/targets/notepad.tsx
-The canary. If this works, the whole stack works.
-```tsx
-import { useCallback } from "react";
-import { useState } from "react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { callMcpTool } from "@/lib/mcpTools";
-import { useWindowFind } from "@/hooks/useWindowFind";
-import { useTaskRunner } from "@/hooks/useTaskRunner";
-import { AppStatusStrip, EvidencePanel, StepRunner } from "./shared";
-const NOTEPAD_TEMPLATES = [
-  {
-    label: "type_and_save",
-    steps: [
-      { kind: "focus" },
-      { kind: "shortcut", app: "notepad", action: "new_file" },
-      { kind: "wait_stable", timeout_s: 3 },
-      // text injected at runtime via makeSteps()
-    ],
-  },
-];
-function makeTypeSteps(text: string, outputDir: string) {
-  return [
-    { kind: "focus" },
-    // automation_keyboard type via task runner — use a raw click + keyboard step
-    // until shortcut_engine has a notepad profile; fallback to automation_keyboard
-    { kind: "shortcut", app: "notepad", action: "select_all" },
-    { kind: "sleep", seconds: 0.1 },
-    // Note: for typing arbitrary text, automation_task currently needs a
-    // custom step kind. Workaround: use automation_keyboard via the tools hub,
-    // or add a "type_text" step kind to task_engine (tracked in assessment).
-    { kind: "shortcut", app: "notepad", action: "save" },
-    { kind: "wait_stable", timeout_s: 3 },
-    { kind: "screenshot", name: "notepad_after_save", output_dir: outputDir },
-  ];
-}
-export function NotepadTarget() {
-  const win = useWindowFind("Notepad");
-  const task = useTaskRunner();
-  const [text, setText] = useState("Hello from cua-mcp");
-  const [outputDir, setOutputDir] = useState("C:\\Users\\sandr\\AppData\\Local\\cua-mcp\\evidence");
-  const quickLaunch = useCallback(async () => {
-    // automation_system start_app
-    await callMcpTool("automation_system", { operation: "start_app", app: "notepad.exe" });
-    setTimeout(() => void win.find(), 1500);
-  }, [win]);
-  const quickScreenshot = useCallback(async () => {
-    if (!win.handle) return;
-    await callMcpTool("automation_visual", {
-      operation: "screenshot",
-      window_handle: win.handle,
-      output_path: `${outputDir}\\notepad_snap.png`,
-    });
-  }, [win.handle, outputDir]);
-  return (
-    <div className="space-y-3">
-      <AppStatusStrip window={win} dispatch="background" onFind={win.find} />
-      {/* Quick actions */}
-      <div className="flex flex-wrap gap-2">
-        <Button size="sm" variant="outline" onClick={quickLaunch}>Launch</Button>
-        <Button size="sm" variant="outline" onClick={win.find}>Find window</Button>
-        <Button size="sm" variant="outline" onClick={quickScreenshot} disabled={!win.found}>
-          Screenshot
-        </Button>
-        <div className="flex items-center gap-2 ml-auto">
-          <Input
-            className="h-8 w-56 bg-slate-950 border-slate-700 text-sm"
-            placeholder="Text to type..."
-            value={text}
-            onChange={e => setText(e.target.value)}
-          />
-          <Button
-            size="sm"
-            variant="outline"
-            disabled={!win.found || task.loading}
-            onClick={() => task.run({ app: "notepad", steps: makeTypeSteps(text, outputDir), windowHandle: win.handle, outputDir })}
-          >
-            Type + Save
-          </Button>
-        </div>
-      </div>
-      <StepRunner
-        templates={NOTEPAD_TEMPLATES}
-        outputDir={outputDir}
-        onOutputDirChange={setOutputDir}
-        onRun={steps => task.run({ app: "notepad", steps, windowHandle: win.handle, outputDir })}
-        onCancel={task.cancel}
-        running={task.loading}
-      />
-      <EvidencePanel state={task} />
-    </div>
-  );
-}
-```
----
-## 6. pages/targets/vroid.tsx
-The flagship. Most complexity here is in the template picker and the stable region visualizer.
-```tsx
-import { useCallback, useEffect, useState } from "react";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { callMcpTool } from "@/lib/mcpTools";
-import { apiPath } from "@/lib/api";
-import { useWindowFind } from "@/hooks/useWindowFind";
-import { useTaskRunner } from "@/hooks/useTaskRunner";
-import { AppStatusStrip, EvidencePanel, StepRunner } from "./shared";
-// Stable region from app_profiles.py — will be read from API when F7 (hot-reload) lands
-const VROID_STABLE_REGION = { left: 280, top: 120, right: 1640, bottom: 980 };
-// Built-in minimal export template — mirrors F3 from the feature list
-const VROID_BUILTIN_TEMPLATES = [
-  {
-    label: "quick_export (sample female)",
-    steps: [
-      { kind: "preflight", min_memory_mb: 4096, min_disk_mb: 500 },
-      { kind: "focus" },
-      { kind: "shortcut", app: "vroidstudio", action: "new_project" },
-      { kind: "wait_stable", timeout_s: 12, stable_frames_required: 3,
-        region_left: 280, region_top: 120, region_right: 1640, region_bottom: 980 },
-      // click sample tile — coordinates from env; will be replaced by F9 (grid mapping)
-      { kind: "click", x: 640, y: 420, button: "left" },
-      { kind: "wait_stable", timeout_s: 10,
-        region_left: 280, region_top: 120, region_right: 1640, region_bottom: 980 },
-      { kind: "shortcut", app: "vroidstudio", action: "export_vrm" },
-      { kind: "wait_stable", timeout_s: 5 },
-      // dialog: path injected at runtime
-      { kind: "screenshot", name: "vroid_after_export" },
-    ],
-  },
-  {
-    label: "focus + screenshot only",
-    steps: [
-      { kind: "focus" },
-      { kind: "wait_stable", timeout_s: 5,
-        region_left: 280, region_top: 120, region_right: 1640, region_bottom: 980 },
-      { kind: "screenshot", name: "vroid_state_check" },
-    ],
-  },
-];
-export function VRoidTarget() {
-  const win = useWindowFind("VRoid Studio");
-  const task = useTaskRunner();
-  const [outputDir, setOutputDir] = useState("C:\\Users\\sandr\\Documents\\vroid_exports");
-  const [lastScreenshot, setLastScreenshot] = useState<string | null>(null);
-  const [archetypes, setArchetypes] = useState<string[]>([]);
-  // Load archetype list from vroidstudio-mcp if available (port 10881)
-  // Falls back to built-in templates if not reachable
-  useEffect(() => {
-    fetch("http://localhost:10881/api/v1/control/tool", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ tool: "vroid_studio", arguments: { operation: "list_archetypes" } }),
-    })
-      .then(r => r.json())
-      .then(d => {
-        const ids: string[] = (d.archetypes ?? []).map((a: any) => a.id ?? a);
-        if (ids.length > 0) setArchetypes(ids);
-      })
-      .catch(() => {/* vroidstudio-mcp not running — use built-in templates */});
-  }, []);
-  const quickScreenshot = useCallback(async () => {
-    if (!win.handle) return;
-    const r = await callMcpTool("automation_visual", {
-      operation: "screenshot",
-      window_handle: win.handle,
-      output_path: `${outputDir}\\vroid_snap.png`,
-    });
-    if (r.ok) setLastScreenshot(`${outputDir}\\vroid_snap.png`);
-  }, [win.handle, outputDir]);
-  const quickNewProject = useCallback(async () => {
-    if (!win.handle) return;
-    await callMcpTool("automation_shortcut", {
-      app: "vroidstudio",
-      action: "new_project",
-      window_handle: win.handle,
-    });
-  }, [win.handle]);
-  const quickExport = useCallback(async () => {
-    if (!win.handle) return;
-    await callMcpTool("automation_shortcut", {
-      app: "vroidstudio",
-      action: "export_vrm",
-      window_handle: win.handle,
-    });
-  }, [win.handle]);
-  // Inject output_dir into dialog steps at run time
-  const handleRun = useCallback((steps: object[]) => {
-    const patched = steps.map((s: any) =>
-      s.kind === "dialog" ? { ...s, path: `${outputDir}\\export.vrm` }
-      : s.kind === "screenshot" ? { ...s, output_dir: outputDir }
-      : s
-    );
-    task.run({ app: "vroidstudio", steps: patched, windowHandle: win.handle, outputDir });
-  }, [task, win.handle, outputDir]);
-  const allTemplates = [
-    ...VROID_BUILTIN_TEMPLATES,
-    ...archetypes.map(id => ({
-      label: `archetype: ${id}`,
-      // These call vroidstudio-mcp directly — not automation_task
-      // Shown as informational; actual run goes through vroidstudio-mcp REST
-      steps: [{ kind: "shortcut", app: "vroidstudio", action: "via_vroidstudio_mcp", archetype_id: id }],
-    })),
-  ];
-  return (
-    <div className="space-y-3">
-      <AppStatusStrip window={win} dispatch="foreground" onFind={win.find} />
-      {/* Quick actions */}
-      <div className="flex flex-wrap gap-2">
-        <Button size="sm" variant="outline" onClick={win.find}>Find window</Button>
-        <Button size="sm" variant="outline" onClick={quickNewProject} disabled={!win.found}>
-          New project (Ctrl+N)
-        </Button>
-        <Button size="sm" variant="outline" onClick={quickExport} disabled={!win.found}>
-          Export VRM (F8)
-        </Button>
-        <Button size="sm" variant="outline" onClick={quickScreenshot} disabled={!win.found}>
-          Screenshot
-        </Button>
-      </div>
-      <StepRunner
-        templates={allTemplates}
-        outputDir={outputDir}
-        onOutputDirChange={setOutputDir}
-        onRun={handleRun}
-        onCancel={task.cancel}
-        running={task.loading}
-      />
-      {/* Stable region visualizer */}
-      {lastScreenshot && (
-        <StableRegionVisualizer screenshotPath={lastScreenshot} region={VROID_STABLE_REGION} />
-      )}
-      <EvidencePanel state={task} />
-    </div>
-  );
-}
-// Overlay the stable region bounding box on the last screenshot.
-// Makes miscalibration immediately visible.
-function StableRegionVisualizer({
-  screenshotPath,
-  region,
-}: {
-  screenshotPath: string;
-  region: typeof VROID_STABLE_REGION;
-}) {
-  const filename = screenshotPath.replace(/\\/g, "/").split("/").pop() ?? screenshotPath;
-  const src = apiPath(`/api/v1/download/${filename}`);
-  // We don't know rendered image dimensions until load — use a relative approach.
-  // The overlay rect is expressed as percentage of native screenshot resolution (1920×1080 assumed).
-  // TODO: read actual dimensions from assert_engine or store them in evidence.
-  const W = 1920; const H = 1080;
-  const pct = {
-    left:   `${(region.left   / W * 100).toFixed(2)}%`,
-    top:    `${(region.top    / H * 100).toFixed(2)}%`,
-    width:  `${((region.right - region.left) / W * 100).toFixed(2)}%`,
-    height: `${((region.bottom - region.top) / H * 100).toFixed(2)}%`,
-  };
-  return (
-    <Card className="border-slate-800 bg-slate-950/50">
-      <CardHeader className="pb-2">
-        <CardTitle className="text-xs text-slate-400 font-normal">
-          Stable region overlay{" "}
-          <span className="font-mono text-slate-500">
-            ({region.left},{region.top}) → ({region.right},{region.bottom})
-          </span>
-          <Badge variant="outline" className="ml-2 border-amber-500/30 text-amber-400 text-[10px]">
-            hardcoded 1920×1080
-          </Badge>
-        </CardTitle>
-      </CardHeader>
-      <CardContent>
-        <div className="relative inline-block max-w-full">
-          <img src={src} alt="last screenshot" className="max-w-full rounded border border-slate-800" />
-          <div
-            className="absolute border-2 border-emerald-400/70 bg-emerald-400/5 pointer-events-none"
-            style={{ left: pct.left, top: pct.top, width: pct.width, height: pct.height }}
-          />
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
-```
----
-## 7. pages/targets/kicad.tsx (abbreviated)
-KiCad profile needs to be added to `app_profiles.py` first. The tab structure is identical to LibreOffice — shown abbreviated.
-```tsx
-// Quick actions: Open project, Run DRC, Export Gerbers, Export BOM
-// App profile: dispatch=foreground, keyboard_backend=win32
-// Templates: kicad_open_and_drc, kicad_export_gerbers
-// Shortcut registry entries needed in shortcut_engine.py:
-//   open_project: ["ctrl", "o"]
-//   run_drc: ["alt", "t", "d"]          — Tools > Design Rules Checker
-//   export_gerbers: ["alt", "f", "b"]    — File > Fabrication Outputs > Gerbers
-//   export_bom: ["alt", "t", "b"]        — Tools > Generate BOM
-// Window title: "KiCad" (partial match — covers "KiCad 8.0.x" etc.)
-```
-Add to `app_profiles.py`:
-```python
-"kicad": AppProfile(
-    app_id="kicad",
-    window_title="KiCad",
-    dispatch="foreground",
-    keyboard_backend="win32",
-    description="EDA — schematic/PCB design, no API, shortcut-first",
-    stable_region=RegionMask(0, 80, 1920, 1040, label="canvas"),
-    template_version="default",
-),
-```
----
-## 8. pages/targets.tsx (page shell)
-```tsx
-import { useState } from "react";
-import { Shield, ShieldCheck, ShieldOff, Timer } from "lucide-react";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { useHitl } from "@/hooks/useHitl";
-import { NotepadTarget } from "./targets/notepad";
-import { LibreOfficeTarget } from "./targets/libreoffice";
-import { VRoidTarget } from "./targets/vroid";
-import { KiCadTarget } from "./targets/kicad";
-import { CustomTarget } from "./targets/custom";
-const TABS = [
-  { id: "notepad",     label: "Notepad",     component: NotepadTarget },
-  { id: "libreoffice", label: "LibreOffice", component: LibreOfficeTarget },
-  { id: "vroid",       label: "VRoid Studio", component: VRoidTarget },
-  { id: "kicad",       label: "KiCad",       component: KiCadTarget },
-  { id: "custom",      label: "Custom",      component: CustomTarget },
-] as const;
-type TabId = typeof TABS[number]["id"];
-function HitlBar() {
-  const hitl = useHitl();
-  const secondsLeft = hitl.expiresAt
-    ? Math.max(0, Math.round(hitl.expiresAt - Date.now() / 1000))
-    : 0;
-  return (
-    <div className="flex items-center gap-3 rounded-md border border-slate-800 bg-slate-900/80 px-4 py-2 text-sm">
-      {hitl.killSwitchActive ? (
-        <ShieldOff className="h-4 w-4 text-red-400" />
-      ) : hitl.approved ? (
-        <ShieldCheck className="h-4 w-4 text-emerald-400" />
-      ) : (
-        <Shield className="h-4 w-4 text-amber-400" />
-      )}
-      <span className="text-slate-300 font-medium">HITL</span>
-      {hitl.killSwitchActive && (
-        <Badge variant="outline" className="border-red-500/40 text-red-400">Kill switch active</Badge>
-      )}
-      {hitl.bypassActive && (
-        <Badge variant="outline" className="border-orange-500/40 text-orange-400">Bypass active</Badge>
-      )}
-      {!hitl.killSwitchActive && hitl.approved && (
-        <Badge variant="outline" className="border-emerald-500/40 text-emerald-400">
-          <Timer className="h-3 w-3 mr-1" />
-          {secondsLeft}s remaining
-        </Badge>
-      )}
-      {!hitl.killSwitchActive && !hitl.approved && !hitl.bypassActive && (
-        <Badge variant="outline" className="border-amber-500/40 text-amber-400">Approval required</Badge>
-      )}
-      <span className="text-slate-500 text-xs">{hitl.actionsLast60s} actions/min</span>
-      <div className="ml-auto flex gap-2">
-        <Button
-          size="sm"
-          variant="outline"
-          className="h-7 text-xs border-emerald-800 text-emerald-300 hover:bg-emerald-950"
-          onClick={() => hitl.approve(5)}
-          disabled={hitl.killSwitchActive}
-        >
-          Approve 5 min
-        </Button>
-        <Button
-          size="sm"
-          variant="outline"
-          className="h-7 text-xs border-slate-700 text-slate-400"
-          onClick={() => hitl.approve(60)}
-          disabled={hitl.killSwitchActive}
-        >
-          1 hour
-        </Button>
-      </div>
-    </div>
-  );
-}
-export function Targets() {
-  const [activeTab, setActiveTab] = useState<TabId>(() => {
-    return (localStorage.getItem("targets-tab") as TabId) ?? "notepad";
-  });
-  const handleTabChange = (id: TabId) => {
-    setActiveTab(id);
-    localStorage.setItem("targets-tab", id);
-  };
-  const ActiveComponent = TABS.find(t => t.id === activeTab)?.component ?? NotepadTarget;
-  return (
-    <div className="space-y-4">
-      <div>
-        <h2 className="text-2xl font-bold tracking-tight text-white">Automation Targets</h2>
-        <p className="text-slate-400 text-sm">
-          Operator console — fire automation_task runs, review evidence, manage HITL.
-        </p>
-      </div>
-      <HitlBar />
-      {/* Tab strip */}
-      <div className="flex gap-1 border-b border-slate-800 pb-0">
-        {TABS.map(tab => (
-          <button
-            key={tab.id}
-            onClick={() => handleTabChange(tab.id)}
-            className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
-              activeTab === tab.id
-                ? "border-emerald-500 text-white"
-                : "border-transparent text-slate-400 hover:text-slate-200 hover:border-slate-600"
-            }`}
-          >
-            {tab.label}
-          </button>
-        ))}
-      </div>
-      {/* Active target panel */}
-      <div className="min-h-96">
-        <ActiveComponent />
-      </div>
-    </div>
-  );
-}
-```
----
-## 9. Wire into App.tsx and sidebar
-`App.tsx` — add one line:
-```tsx
-import { Targets } from "@/pages/targets";
-// inside <Routes>:
-<Route path="/targets" element={<Targets />} />
-```
-`sidebar.tsx` — add one nav entry (exact implementation depends on sidebar structure):
-```tsx
-{ path: "/targets", label: "Targets", icon: Crosshair }  // lucide-react
-```
----
-## Known gaps / deferred to backend
-- **`automation_task` type_text step kind** — task_engine has no "type text into focused window" step. Currently needs a workaround via automation_keyboard called separately, or adding a `type_text` step kind to task_engine. Track as Bug in assessment.
-- **`GET /api/v1/tasks/{task_id}`** — the polling path in `useTaskRunner` calls `automation_task(status, task_id)` via the tools call endpoint, which works but is inefficient. A dedicated REST endpoint would be cleaner.
-- **Screenshot dimensions** — `StableRegionVisualizer` hardcodes 1920×1080 for percentage calculation. Fix when evidence includes screenshot dimensions (trivial backend addition to `_capture_screenshot`).
-- **vroidstudio-mcp archetype list** — the VRoid tab fetches from port 10881 directly. If CORS is not configured on that server's `/api/v1/control/tool`, this will fail. Proxy through cua-mcp or fix CORS in vroidstudio-mcp.