{visibleLines.map((_, offset) => { const index = editorWindow.start + offset; const line = index + 1; return {line}; })}

setText(event.target.value)} onScroll={() => { if (editorRef.current) { if (gutterRef.current) gutterRef.current.scrollTop = editorRef.current.scrollTop; if (highlightsRef.current) { highlightsRef.current.scrollTop = editorRef.current.scrollTop; highlightsRef.current.scrollLeft = editorRef.current.scrollLeft; } updateEditorWindow(); } }} spellCheck={false} aria-invalid={Boolean(diagnostic)} aria-label="G-code program" /></div></div><div className="program-execution-panel"><div className="program-execution-line" role="status" aria-label="Currently executing G-code"><span>{executionLine ? `Executing source line ${executionLine}` : "Execution idle"}</span><code title={executionLineText}>{executionLineText || "-"}</code></div><div className="program-execution-trace" role="log" aria-label="G-code execution trace" aria-live="polite"><strong>Subprogram / execution trace <span>({executionTrace.length} cached)</span></strong><VirtualizedExecutionTrace entries={executionTrace} executing={executing} /></div></div></div><aside className="program-side"><div className="program-actions"><TextButton feature="AXIS-EDIT-01" onClick={onLoad} disabled={!canLoad}>Load</TextButton></div><label className="active-gcodes-label">Active G-Codes:<textarea data-axis-feature="AXIS-UI-07" readOnly value={activeGcodes} aria-label="Active G-Codes" /></label>{diagnostic && <output className="program-diagnostic" role="alert" data-axis-feature="AXIS-EDIT-01">{diagnostic}</output>}</aside></section>;
}

export function App() {
  const client = useMemo(() => new ReactWorkerClient(), []);
  const operationController = useMemo(() => new AxisOperationController(client), [client]);
  const [state, setState] = useState(INITIAL_STATE);
  const [casePath, setCasePath] = useState<string>(DEFAULT_CASE);
  const [caseStatus, setCaseStatus] = useState("loading configured program...");
  const [commandStatus, setCommandStatus] = useState("Idle");
  const [programText, setProgramTextState] = useState("");
  const [programPath, setProgramPath] = useState(PROGRAM_PATH);
  const [programLoading, setProgramLoading] = useState(true);
  const [selectedAxis, setSelectedAxis] = useState("x");
  const [leftTab, setLeftTab] = useState<"manual" | "mdi" | "diagnostics">("manual");
  const [rightTab, setRightTab] = useState<"preview" | "dro">("preview");
  const [view, setView] = useState<"z" | "z2" | "x" | "y" | "y2" | "p">("p");
  const [zoom, setZoom] = useState(1);
  const [rotateMode, setRotateMode] = useState(false);
  const [coordType, setCoordType] = useState<"machine" | "relative">("machine");
  const [displayType, setDisplayType] = useState<"actual" | "commanded">("actual");
  const [metric, setMetric] = useState(true);
  const [touchOffSystem, setTouchOffSystem] = useState("P1 G54");
  const [layers, setLayers] = useState({ grid: true, tool: true, path: true, live: true, limits: false, velocity: false, offsets: false, extents: false });
  const runTimer = useRef<ReturnType<typeof setInterval> | null>(null);
  const jogTimer = useRef<ReturnType<typeof setInterval> | null>(null);
  const runStepPending = useRef(false);
  const jogStepPending = useRef(false);
  const continuousJog = useRef<{ axis: string; direction: number } | null>(null);
  const programFileInput = useRef<HTMLInputElement>(null);
  const [plotCleared, setPlotCleared] = useState(false);
  const [operationTrace, setOperationTrace] = useState<XyzacOperationTrace[]>([]);
  const feedOverridePending = useRef<number | null>(null);
  const feedOverrideTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
  const uiCacheHydrated = useRef(false);
  const uiCacheSaveTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
  const UI_CACHE_KEY = "xyzac-trt";
  const [previewProgress, setPreviewProgress] = useState<{ percent: number; phase: "reading" | "wasm" | "ready" | "error"; detail: string } | null>(null);
  const previewProgressTimer = useRef<ReturnType<typeof setInterval> | null>(null);
  useEffect(() => {
    const unsubscribe = client.subscribe((message) => setState((previous) => reduceFrontendState(previous, message)));
    client.ensureSession().then(async () => {
      const cachedResponse = await client.loadUiState(UI_CACHE_KEY).catch(() => null);
      const cachedPayload = cachedResponse?.payload && typeof cachedResponse.payload === "object" ? cachedResponse.payload as Record<string, unknown> : null;
      const cached = cachedPayload?.status === "verified" && cachedPayload.state && typeof cachedPayload.state === "object" ? cachedPayload.state as Record<string, unknown> : null;
      if (cached) {
        if (cached.casePath === DEFAULT_CASE) setCasePath(DEFAULT_CASE);
        if (["x", "y", "z", "a", "c"].includes(String(cached.selectedAxis))) setSelectedAxis(String(cached.selectedAxis));
        if (["manual", "mdi", "diagnostics"].includes(String(cached.leftTab))) setLeftTab(cached.leftTab as "manual" | "mdi" | "diagnostics");
        if (["preview", "dro"].includes(String(cached.rightTab))) setRightTab(cached.rightTab as "preview" | "dro");
        if (["z", "z2", "x", "y", "y2", "p"].includes(String(cached.view))) setView(cached.view as "z" | "z2" | "x" | "y" | "y2" | "p");
        if (typeof cached.zoom === "number" && Number.isFinite(cached.zoom)) setZoom(Math.max(.5, Math.min(2, cached.zoom)));
        if (typeof cached.rotateMode === "boolean") setRotateMode(cached.rotateMode);
        if (["machine", "relative"].includes(String(cached.coordType))) setCoordType(cached.coordType as "machine" | "relative");
        if (["actual", "commanded"].includes(String(cached.displayType))) setDisplayType(cached.displayType as "actual" | "commanded");
        if (typeof cached.metric === "boolean") setMetric(cached.metric);
        if (typeof cached.touchOffSystem === "string" && /^(?:P[0-9]|G5[4-9](?:\.[123])?)(?:\s+.*)?$/i.test(cached.touchOffSystem)) setTouchOffSystem(cached.touchOffSystem);
        if (cached.layers && typeof cached.layers === "object") {
          const savedLayers = cached.layers as Record<string, unknown>;
          setLayers((current) => {
            const next = { ...current };
            for (const key of Object.keys(current) as Array<keyof typeof current>) if (typeof savedLayers[key] === "boolean") next[key] = savedLayers[key] as boolean;
            return next;
          });
        }
      }
      const bundle = await loadSimulationCase({ path: DEFAULT_CASE, baseUrl: "." });
      if (bundle.status !== "ready") throw new Error(`xyzac_case_blocked:${bundle.missing.join(",")}`);
      const source = bundle.files?.[PROGRAM_PATH];
      if (typeof source !== "string" || !source.trim()) throw new Error("xyzac_demo_program_missing");
      const normalizedSource = normalizeProgramSource(source);
      setProgramTextState(normalizedSource); setProgramPath(PROGRAM_PATH);
      const configuration = toWorkerConfiguration(bundle);
      await operationController.execute("LOAD_WORKSPACE", { root_path: "/workspace", configuration }, { state: {}, gate: false });
      await operationController.execute("PROGRAM_LOAD", { source: normalizedSource, path: PROGRAM_PATH }, { state: {}, gate: false });
      uiCacheHydrated.current = true;
      setOperationTrace(operationController.exportTrace());
      setCommandStatus("PROGRAM_LOAD acknowledged");
      setCaseStatus(`${DEFAULT_CASE} + ${PROGRAM_PATH} loaded`);
    }).catch((error: Error) => { setOperationTrace(operationController.exportTrace()); setCommandStatus(`Error: ${error.message}`); setCaseStatus(`blocked: ${error.message}`); }).finally(() => setProgramLoading(false));
    return () => { unsubscribe(); if (runTimer.current) clearInterval(runTimer.current); if (jogTimer.current) clearInterval(jogTimer.current); if (previewProgressTimer.current) clearInterval(previewProgressTimer.current); if (feedOverrideTimer.current) clearTimeout(feedOverrideTimer.current); if (uiCacheSaveTimer.current) clearTimeout(uiCacheSaveTimer.current); client.close(); };
  }, [client, operationController]);
  const axes = state.snapshot?.motion?.axes ?? [];
  const taskRecord = state.task ?? {};
  const axisState = { task: taskRecord, program: state.program ?? {}, motion: state.snapshot?.motion ?? {}, devices: state.devices ?? {}, xyzac: state.snapshot?.xyzac ?? {}, gates: state.gates };
  const xyzacView = useMemo(() => projectXyzacPanel(state.snapshot), [state.snapshot]);
  // Runtime state is displayed only after a Worker panel snapshot is
  // available. React may render before WASM boot, but it must not invent a
  // machine/task/operation state that can enable motion.
  const wasmSnapshotReady = Boolean(state.snapshot?.motion_authority === "wasm" && state.snapshot?.task_authority);
  const machineState = wasmSnapshotReady ? state.axisState?.machine_state ?? "OFF" : "PENDING";
  const operationState = wasmSnapshotReady ? state.axisState?.operation_state ?? "IDLE" : "PENDING";
  const taskState = wasmSnapshotReady ? state.axisState?.state ?? "OFF" : "PENDING";
  const isEstop = wasmSnapshotReady && machineState === "ESTOP";
  const machineOn = wasmSnapshotReady && machineState === "ON";
  const ready = wasmSnapshotReady && machineOn && !["error", "recovering"].includes(state.status);
  const programRunning = operationState === "RUNNING";
  const programPaused = operationState === "PAUSED";
  const idle = operationState === "IDLE";
  const wasmGate = (action: string) => state.gates[action] ?? { action, enabled: false, reason: "linuxcnc_wasm_snapshot_pending" };
  const gates = { load: wasmGate("load"), run: wasmGate("run"), step: wasmGate("step"), pause: wasmGate("pause"), resume: wasmGate("resume"), abort: wasmGate("abort"), mdi: wasmGate("mdi"), jog: wasmGate("jog"), home: wasmGate("home"), power: wasmGate("power"), reset: wasmGate("reset"), override: wasmGate("override"), spindle: wasmGate("spindle"), coolant: wasmGate("coolant"), tool: wasmGate("tool"), probe: wasmGate("probe"), touchOff: wasmGate("touchOff"), toolTouchOff: wasmGate("toolTouchOff") };
  const stopRunTimer = () => { if (runTimer.current) { clearInterval(runTimer.current); runTimer.current = null; } };
  const stopJogTimer = () => { continuousJog.current = null; if (jogTimer.current) { clearInterval(jogTimer.current); jogTimer.current = null; } };
  const startJogTimer = (axis: string, direction: number) => {
    continuousJog.current = { axis, direction };
    if (jogTimer.current) return;
    jogTimer.current = setInterval(() => {
      const jog = continuousJog.current;
      if (!jog || jogStepPending.current) return;
      jogStepPending.current = true;
      void operationController.execute("JOG_START", { axis: jog.axis, direction: jog.direction, increment: null, continuous: true, continuousSample: true }, { state: axisState, gate: false })
        .then(() => operationController.execute("SIM_STEP", { cycles: 1, response: "motion_delta" }, { state: axisState, gate: false }))
        .catch(() => undefined)
        .finally(() => { jogStepPending.current = false; });
    }, 50);
  };
  const startRunTimer = () => { if (runTimer.current) return; runTimer.current = setInterval(() => { if (runStepPending.current) return; runStepPending.current = true; operationController.execute("SIM_STEP", { cycles: 5, response: "motion_delta" }, { state: axisState, gate: false }).catch(() => undefined).finally(() => { runStepPending.current = false; }); }, 50); };
  const dispatch = async (kind: string, payload: Record<string, unknown> = {}, gate = true, action: string | null = null): Promise<void> => {
    setCommandStatus(`${kind} pending`);
    // The AXIS task stops issuing servo/task polls before changing the
    // interpreter state. A SIM_STEP already in flight is allowed to finish,
    // but no new poll may race PROGRAM_PAUSE/PROGRAM_ABORT and consume the
    // protocol sequence reserved for RESUME.
    if (kind === "JOG_STOP") stopJogTimer();
    if (["PROGRAM_PAUSE", "PROGRAM_ABORT"].includes(kind)) stopRunTimer();
    // AXIS stops its periodic stat/LivePlotter update before AUTO_PAUSE,
    // AUTO_RESUME and abort. Wait for the single already-issued WASM tick to
    // settle so the strict protocol sequence cannot interleave a control edge
    // with a servo/task sample.
    if (["PROGRAM_PAUSE", "PROGRAM_RESUME", "PROGRAM_ABORT"].includes(kind)) {
      while (runStepPending.current) await new Promise((resolve) => setTimeout(resolve, 0));
    }
    const pending = operationController.execute(kind, payload, { state: axisState, gate, ...(action ? { action } : {}) });
    setOperationTrace(operationController.exportTrace());
    return pending.then(() => { setOperationTrace(operationController.exportTrace()); setCommandStatus(`${kind} acknowledged`); if (kind === "PROGRAM_RUN" || kind === "PROGRAM_RESUME") startRunTimer(); if (["PROGRAM_PAUSE", "PROGRAM_ABORT", "PROGRAM_RESTART"].includes(kind)) stopRunTimer(); if (kind === "JOG_START" && payload.continuous === true && payload.continuousSample !== true) startJogTimer(String(payload.axis ?? "x"), Number(payload.direction)); if (kind === "JOG_STOP") stopJogTimer(); }).catch((error: Error) => {
      setOperationTrace(operationController.exportTrace());
      const code = error.message;
      setCommandStatus(`${kind} blocked: ${code}`);
      throw error;
    });
  };
  const execute: Action = (kind, payload = {}) => dispatch(kind, payload).catch(() => undefined);
  const runProgram = () => { if (programLoading) return; void dispatch("PROGRAM_RUN").catch(() => undefined); };
  const stopProgram = () => { const wasRunning = programRunning || programPaused; stopRunTimer(); if (wasRunning) void dispatch("PROGRAM_ABORT", {}, true).catch(() => undefined); };
  const emergencyStop = () => { stopRunTimer(); stopJogTimer(); void dispatch("ESTOP", { active: true }, false).catch(() => undefined); };
  const releaseEstop = () => dispatch("ESTOP", { active: false }, false);
  const toggleEstop = () => { if (!isEstop) { emergencyStop(); return; } void releaseEstop().catch(() => undefined); };
  const powerOn = () => { if (!gates.power.enabled) return; void dispatch("POWER", { active: isEstop ? false : !machineOn }, false).catch(() => undefined); };
  const homeAll = () => {
    const confirm = globalThis.confirm;
    if (allHomed && typeof confirm === "function" && !confirm("All joints are already homed. Re-home all joints?")) return;
    void dispatch("HOME", { all: true }).catch(() => undefined);
  };
  const homeAxis = () => {
    const index = ["x", "y", "z", "a", "c"].indexOf(selectedAxis);
    const confirm = globalThis.confirm;
    if (index >= 0 && homedAxes[index] && typeof confirm === "function" && !confirm(`${selectedAxis.toUpperCase()} is already homed. Re-home this joint?`)) return;
    void dispatch("HOME", { axis: selectedAxis }).catch(() => undefined);
  };
  const clearLoadedPreview = async () => {
    await operationController.execute("VISUAL_CLEAR", {}, { state: axisState, gate: false });
  };
  const stopPreviewProgress = () => {
    if (previewProgressTimer.current) {
      clearInterval(previewProgressTimer.current);
      previewProgressTimer.current = null;
    }
  };
  const startPreviewProgress = (label: string) => {
    stopPreviewProgress();
    setPreviewProgress({ percent: 8, phase: "reading", detail: `${label}: 读取 G-code` });
    previewProgressTimer.current = setInterval(() => {
      setPreviewProgress((previous) => {
        if (!previous || previous.percent >= 88) return previous;
        return { percent: Math.min(88, previous.percent + 4), phase: "wasm", detail: `${label}: LinuxCNC WASM 解析刀具路径` };
      });
    }, 100);
  };
  const markPreviewProgress = (percent: number, phase: "reading" | "wasm", detail: string) => {
    setPreviewProgress({ percent, phase, detail });
  };
  const finishPreviewProgress = (path: string, response: unknown) => {
    stopPreviewProgress();
    const payload = (response && typeof response === "object" ? (response as { payload?: unknown }).payload : null) as { preview?: { segments?: unknown[] } } | null;
    const segments = Array.isArray(payload?.preview?.segments) ? payload.preview.segments : [];
    const samples = segments.reduce<number>((count, segment) => count + (segment && typeof segment === "object" && Array.isArray((segment as { samples?: unknown[] }).samples) ? (segment as { samples: unknown[] }).samples.length : 0), 0);
    const detail = segments.length ? `WASM 刀具路径完成: ${segments.length} 段 / ${samples} 点` : "WASM 刀具路径完成";
    setPreviewProgress({ percent: 100, phase: "ready", detail: `${path}: ${detail}` });
  };
  const failPreviewProgress = (message: string) => {
    stopPreviewProgress();
    setPreviewProgress({ percent: 100, phase: "error", detail: `刀具路径加载失败: ${message}` });
  };
  const loadCase = async () => {
    if (programLoading || programRunning) return;
    setProgramLoading(true);
    startPreviewProgress("XYZAC 程序");
    setCommandStatus("PROGRAM_LOAD pending: waiting for LinuxCNC WASM preview");
    setCaseStatus("loading session...");
    try {
      await client.ensureSession();
      setCaseStatus("loading exact XYZAC case...");
      const bundle = await loadSimulationCase({ path: casePath, baseUrl: "." });
      if (bundle.status !== "ready") throw new Error(`xyzac_case_blocked:${bundle.missing.join(",")}`);
      const source = bundle.files?.[PROGRAM_PATH];
      if (typeof source !== "string" || !source.trim()) throw new Error("xyzac_demo_program_missing");
      const normalizedSource = normalizeProgramSource(source);
      setCaseStatus("starting exact case...");
      const operation = await operationController.execute("LOAD_WORKSPACE", { root_path: "/workspace", configuration: toWorkerConfiguration(bundle) }, { state: axisState, gate: false });
      const resultPayload = (operation.response as { payload?: { configuration?: { state?: string } } }).payload;
      markPreviewProgress(28, "wasm", "LinuxCNC WASM 配置已加载，准备解析刀具路径");
      setProgramText(normalizedSource); setProgramPath(PROGRAM_PATH); setPlotCleared(false);
      await clearLoadedPreview();
      markPreviewProgress(38, "wasm", "LinuxCNC WASM 正在解析刀具路径");
      const programLoad = await operationController.execute("PROGRAM_LOAD", { source: normalizedSource, path: PROGRAM_PATH }, { state: axisState, gate: false });
      finishPreviewProgress(PROGRAM_PATH, programLoad.response);
      setOperationTrace(operationController.exportTrace());
      setCommandStatus("PROGRAM_LOAD acknowledged");
      setCaseStatus(`${bundle.entrypoint} + ${PROGRAM_PATH} -> ${resultPayload?.configuration?.state ?? "READY"}`);
    } catch (error) {
      setOperationTrace(operationController.exportTrace());
      failPreviewProgress(error instanceof Error ? error.message : "case_load_failed");
      setCaseStatus(`blocked: ${error instanceof Error ? error.message : "case_load_failed"}`);
    } finally { setProgramLoading(false); }
  };
  const setProgramText = (value: string) => { setProgramTextState(value); };
  const loadPackagedProgram = async () => {
    if (programLoading || programRunning) return;
    const path = "linuxcnc/nc_files/3D_Chips.ngc";
    setProgramLoading(true);
    startPreviewProgress("3D_Chips.ngc");
    setCommandStatus("PROGRAM_LOAD pending: waiting for LinuxCNC WASM preview");
    setCaseStatus(`${path} loading from published workspace...`);
    try {
      const response = await fetch(`./${path}`);
      if (!response.ok) throw new Error(`program_asset_http_${response.status}`);
      const source = normalizeProgramSource(await response.text());
      if (!source.trim()) throw new Error("program_asset_empty");
      setProgramText(source); setProgramPath(path); setPlotCleared(false);
      await clearLoadedPreview();
      markPreviewProgress(38, "wasm", "LinuxCNC WASM 正在解析刀具路径");
      const programLoad = await operationController.execute("PROGRAM_LOAD", { source, path }, { state: axisState, gate: false });
      finishPreviewProgress(path, programLoad.response);
      setOperationTrace(operationController.exportTrace());
      setCommandStatus("PROGRAM_LOAD acknowledged");
      setCaseStatus(`${path} loaded through linuxcnc-wasm`);
    } catch (error) {
      setOperationTrace(operationController.exportTrace());
      failPreviewProgress(error instanceof Error ? error.message : "program_asset_load_failed");
      setCaseStatus(`blocked: ${error instanceof Error ? error.message : "program_asset_load_failed"}`);
    } finally { setProgramLoading(false); }
  };
  const loadProgram = () => {
    if (programLoading || programRunning) return;
    setProgramLoading(true);
    startPreviewProgress(programPath || "当前程序");
    setCommandStatus("PROGRAM_LOAD pending: waiting for LinuxCNC WASM preview");
    setPlotCleared(false);
    void clearLoadedPreview()
      .then(() => {
        markPreviewProgress(38, "wasm", "LinuxCNC WASM 正在解析刀具路径");
        return operationController.execute("PROGRAM_LOAD", { source: programText, path: programPath }, { state: axisState, gate: false });
      })
      .then((operation) => {
        finishPreviewProgress(programPath, operation.response);
        setOperationTrace(operationController.exportTrace());
        setCommandStatus("PROGRAM_LOAD acknowledged");
        setCaseStatus(`${programPath} loaded through linuxcnc-wasm`);
      })
      .catch((error) => {
        setOperationTrace(operationController.exportTrace());
        failPreviewProgress(error instanceof Error ? error.message : "program_load_failed");
        setCommandStatus(`PROGRAM_LOAD blocked: ${error instanceof Error ? error.message : "program_load_failed"}`);
      })
      .finally(() => setProgramLoading(false));
  };
  const openProgramFile = () => programFileInput.current?.click();
  const onProgramFile = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    event.target.value = "";
    if (!file || programLoading || programRunning) return;
    setProgramLoading(true);
    startPreviewProgress(file.name);
    try {
      const source = normalizeProgramSource(await file.text());
      if (!source.trim()) throw new Error("program_file_empty");
      const path = file.name === "3D_Chips.ngc" ? "linuxcnc/nc_files/3D_Chips.ngc" : `browser/${file.name}`;
      setProgramText(source);
      setProgramPath(path);
      setPlotCleared(false);
      setCommandStatus("PROGRAM_LOAD pending: waiting for LinuxCNC WASM preview");
      setCaseStatus(`${file.name} loading through linuxcnc-wasm...`);
      await clearLoadedPreview();
      markPreviewProgress(38, "wasm", "LinuxCNC WASM 正在解析刀具路径");
      const programLoad = await operationController.execute("PROGRAM_LOAD", { source, path }, { state: axisState, gate: false });
      finishPreviewProgress(path, programLoad.response);
      setOperationTrace(operationController.exportTrace());
      setCommandStatus("PROGRAM_LOAD acknowledged");
      setCaseStatus(`${path} loaded through linuxcnc-wasm`);
    } catch (error) {
      setOperationTrace(operationController.exportTrace());
      failPreviewProgress(error instanceof Error ? error.message : "program_file_load_failed");
      setCommandStatus(`PROGRAM_LOAD blocked: ${error instanceof Error ? error.message : "program_file_load_failed"}`);
      setCaseStatus(`blocked: ${error instanceof Error ? error.message : "program_file_load_failed"}`);
    } finally {
      setProgramLoading(false);
    }
  };
  const enterManualMode = () => {
    setLeftTab("manual");
    if (!wasmSnapshotReady || programRunning || programPaused || programLoading) return;
    if (String(axisState.task.mode).toUpperCase() === "MANUAL") return;
    // Send the explicit tab gesture in the same Worker queue as any following
    // Run command. A state-sync effect can otherwise arrive after AUTO starts
    // and be rejected as an invalid AUTO -> MANUAL transition.
    void dispatch("SET_MODE", { mode: "MANUAL" }, false).catch(() => undefined);
  };
  const enterMdiMode = () => {
    setLeftTab("mdi");
    if (!wasmSnapshotReady || programRunning || programPaused || programLoading) return;
    if (String(axisState.task.mode).toUpperCase() === "MDI") return;
    void dispatch("SET_MODE", { mode: "MDI" }, false).catch(() => undefined);
  };
  useEffect(() => {
    const onKeyDown = (event: KeyboardEvent) => {
      const target = event.target as HTMLElement | null;
      if (target && ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName)) return;
      if (!event.ctrlKey && event.key === "R") { event.preventDefault(); setCommandStatus("PROGRAM_REVERSE blocked: LinuxCNC reverse command is not exposed by the selected WASM program ABI"); return; }
      if (!event.ctrlKey && event.key === "F") { event.preventDefault(); setCommandStatus("PROGRAM_FORWARD blocked: LinuxCNC forward command is not exposed by the selected WASM program ABI"); return; }
      if (!event.ctrlKey && event.key === "B") { event.preventDefault(); execute("SPINDLE_BRAKE", { spindle: 0, engaged: true }); return; }
      if (!event.ctrlKey && event.key === "b") { event.preventDefault(); execute("SPINDLE_BRAKE", { spindle: 0, engaged: false }); return; }
      const key = event.key.toLowerCase();
      if (event.ctrlKey && key === "k") { event.preventDefault(); void dispatch("VISUAL_CLEAR", {}, true, "vismachClear").then(() => setPlotCleared(true)).catch(() => undefined); return; }
      if (event.ctrlKey && key === "r") { event.preventDefault(); loadProgram(); return; }
      if (event.ctrlKey && event.key === "Home") { event.preventDefault(); homeAll(); return; }
      if (event.ctrlKey && event.key === "End") { event.preventDefault(); promptTouchOff(true); return; }
      if (key === "f3") { event.preventDefault(); enterManualMode(); return; }
      if (key === "f5") { event.preventDefault(); enterMdiMode(); return; }
      if (key === "f1") { event.preventDefault(); toggleEstop(); return; }
      if (key === "f2") { event.preventDefault(); powerOn(); return; }
      if (key === "f7") { event.preventDefault(); onCoolant("mist"); return; }
      if (key === "f8") { event.preventDefault(); onCoolant("flood"); return; }
      if (key === "f9") { event.preventDefault(); onSpindle(spindleDirection === 1 ? 0 : 1); return; }
      if (key === "f10") { event.preventDefault(); onSpindle(spindleDirection === -1 ? 0 : -1); return; }
      if (key === "f11") { event.preventDefault(); execute("SPINDLE_COMMAND", { spindle: 0, delta: -100 }); return; }
      if (key === "f12") { event.preventDefault(); execute("SPINDLE_COMMAND", { spindle: 0, delta: 100 }); return; }
      if (key === "v") { event.preventDefault(); setView((current) => current === "x" ? "y" : current === "y" ? "p" : current === "z" ? "z2" : current === "z2" ? "x" : "z"); setRightTab("preview"); return; }
      if (key === "d") { event.preventDefault(); setRotateMode((current) => !current); return; }
      if (key === "!") { event.preventDefault(); setMetric((current) => !current); return; }
      if (key === "@") { event.preventDefault(); setDisplayType((current) => current === "actual" ? "commanded" : "actual"); return; }
      if (key === "#") { event.preventDefault(); setCoordType((current) => current === "machine" ? "relative" : "machine"); return; }
      if (key === "f4") { event.preventDefault(); setRightTab((current) => current === "preview" ? "dro" : "preview"); return; }
      if (event.key === "Home") { event.preventDefault(); homeAxis(); return; }
      if (event.key === "End") { event.preventDefault(); promptTouchOff(false); return; }
      if (key === "r") { event.preventDefault(); runProgram(); return; }
      if (key === "t") { event.preventDefault(); execute("PROGRAM_STEP"); return; }
      if (key === "p") { event.preventDefault(); execute("PROGRAM_PAUSE"); return; }
      if (key === "s") { event.preventDefault(); execute("PROGRAM_RESUME"); return; }
      if (key === "escape") { event.preventDefault(); stopProgram(); }
    };
    window.addEventListener("keydown", onKeyDown);
    return () => window.removeEventListener("keydown", onKeyDown);
  }, [axisState, enterManualMode, powerOn, runProgram, stopProgram, toggleEstop]);
  useEffect(() => {
    const wasmQueueDepth = Number((state.snapshot?.wasm_motion as { state?: { queue_depth?: number } } | undefined)?.state?.queue_depth ?? 0);
    const programComplete = String(state.program?.program_status ?? "") === "completed" && wasmQueueDepth === 0;
    const mdiMotionActive = !programRunning && String(state.task?.mode ?? "").toUpperCase() === "MDI" && wasmQueueDepth > 0;
    if ((programRunning && !programComplete) || mdiMotionActive) startRunTimer(); else stopRunTimer();
    if (!ready) { stopRunTimer(); stopJogTimer(); }
  }, [programRunning, ready, state.program?.program_status, state.task?.mode, state.snapshot?.wasm_motion]);
  const spindleState = (state.devices as Record<string, any> | null)?.spindles?.[0] as Record<string, any> | undefined;
  const spindleDirection = spindleState?.enabled ? Number(spindleState.command_rpm ?? 0) < 0 ? -1 : 1 : 0;
  const spindleBrake = spindleState ? Boolean(spindleState.brake) : false;
  const ioState = (state.snapshot?.io as Record<string, any> | undefined)?.state as Record<string, any> | undefined;
  const manualReady = wasmSnapshotReady && Boolean(ioState?.ready) && !Boolean(ioState?.estop);
  const deviceIoEnvelope = state.deviceIo as Record<string, any> | null;
  const deviceIoCanonical = (deviceIoEnvelope?.state as Record<string, any> | undefined) ?? deviceIoEnvelope;
  const coolant = { mist: Boolean(deviceIoCanonical?.coolant?.mist ?? deviceIoCanonical?.coolant?.mist_requested), flood: Boolean(deviceIoCanonical?.coolant?.flood ?? deviceIoCanonical?.coolant?.flood_requested) };
  const onSpindle = (direction: number) => { execute("SPINDLE_COMMAND", { spindle: 0, direction, rpm: direction === 0 ? 0 : 1, enabled: direction !== 0 }); };
  const onCoolant = (key: "mist" | "flood") => { const next = { ...coolant, [key]: !coolant[key] }; execute("COOLANT_COMMAND", { mist: next.mist, flood: next.flood, lube: false }); };
  const promptTouchOff = (toolOnly: boolean) => {
    if (toolOnly) { setCommandStatus("TOOL_TOUCH_OFF blocked: blocked_by_abi_tool_offsets"); return; }
    const prompt = globalThis.prompt;
    if (typeof prompt !== "function") return;
    const entered = prompt(toolOnly ? `Tool ${toolNumber} Touch Off: enter ${selectedAxis.toUpperCase()} coordinate` : `Touch Off: enter ${selectedAxis.toUpperCase()} coordinate`, "0");
    if (entered === null) return;
    const value = Number(entered);
    if (!Number.isFinite(value)) { setCommandStatus("TOUCH_OFF blocked: touch_off_value_invalid"); return; }
    const system = prompt("Coordinate system (P0 Current, P1 G54 ... P9 G59.3)", touchOffSystem);
    if (system === null) return;
    const normalizedSystem = system.trim().toUpperCase();
    if (!/^(?:P[0-9]|G5[4-9](?:\.[123])?)(?:\s+.*)?$/.test(normalizedSystem)) { setCommandStatus("TOUCH_OFF blocked: touch_off_system_invalid"); return; }
    setTouchOffSystem(normalizedSystem);
    void dispatch(toolOnly ? "TOOL_TOUCH_OFF" : "TOUCH_OFF", { axis: selectedAxis, value, system: normalizedSystem, units: metric ? "mm" : "inch" }).catch(() => undefined);
  };
  const wasmMotion = (state.snapshot?.wasm_motion as { state?: Record<string, unknown> } | undefined)?.state ?? {};
  const sourceFeedOverride = Number(state.snapshot?.overrides?.feed ?? wasmMotion.feed_override);
  const feedOverridePercent = Number.isFinite(sourceFeedOverride) ? Math.max(0, Math.min(200, Math.round(sourceFeedOverride * 100))) : null;
  const sourceJogScale = Number((state.snapshot?.motion as Record<string, unknown> | undefined)?.jog_scale ?? wasmMotion.jog_scale);
  const sourceVelocityScale = Number((state.snapshot?.motion as Record<string, unknown> | undefined)?.velocity_scale ?? wasmMotion.velocity_scale);
  const jogScalePercent = Number.isFinite(sourceJogScale) ? Math.max(6, Math.min(100, Math.round(sourceJogScale * 100))) : null;
  const maxVelocityPercent = Number.isFinite(sourceVelocityScale) ? Math.max(6, Math.min(100, Math.round(sourceVelocityScale * 100))) : null;
  const spindleOverrideSource = Number(state.snapshot?.overrides?.spindle?.[0] ?? (state.snapshot?.motion as Record<string, unknown> | undefined)?.spindle_override ?? spindleState?.override);
  const spindleOverridePercent = Number.isFinite(spindleOverrideSource) ? Math.max(0, Math.min(200, Math.round(spindleOverrideSource * 100))) : null;
  const requestFeedOverride = (event: React.ChangeEvent<HTMLInputElement>) => {
    const percent = Math.max(0, Math.min(200, Number(event.target.value)));
    if (!Number.isFinite(percent)) return;
    feedOverridePending.current = percent;
    if (feedOverrideTimer.current) clearTimeout(feedOverrideTimer.current);
    feedOverrideTimer.current = setTimeout(() => {
      feedOverrideTimer.current = null;
      const target = feedOverridePending.current;
      if (target === null) return;
      void dispatch("SET_OVERRIDE", { feed: target / 100 }).then(() => { if (feedOverridePending.current === target) feedOverridePending.current = null; }).catch(() => { if (feedOverridePending.current === target) feedOverridePending.current = null; });
    }, 80);
  };
  const activeGcodes = programLoading ? "" : state.program?.active_gcodes ? String(state.program.active_gcodes) : "-";
  const toolNumber = String((state.devices as Record<string, any> | null)?.tool?.current ?? state.snapshot?.tool?.current ?? 0);
  const currentLine = Number(state.program?.line ?? state.task?.current_line ?? 0) || null;
  const executionLine = Number(state.program?.execution_line ?? currentLine ?? 0) || null;
  const executionLineText = String(state.program?.execution_line_text ?? "");
  const visibleExecutionTrace = programLoading ? [] : state.executionTrace;
  const visibleCurrentLine = programLoading ? null : currentLine;
  const visibleExecutionLine = programLoading ? null : executionLine;
  const visibleExecutionLineText = programLoading ? "" : executionLineText;
  const visibleProgramStatus = programLoading ? "loading" : String(state.program?.program_status ?? "unknown");
  const homedAxes = Array.isArray(state.snapshot?.motion?.homed_axes) ? state.snapshot.motion.homed_axes : [];
  const allHomed = homedAxes.length >= 5 && homedAxes.slice(0, 5).every(Boolean);
  const xyzacCommand = (kind: string, payload: Record<string, unknown> = {}, action?: string) => { void dispatch(kind, payload, true, action ?? null).then(() => { if (kind === "VISUAL_CLEAR") setPlotCleared(true); }).catch(() => undefined); };
  const position = xyzacView.pose ? `X${Number(xyzacView.pose.x).toFixed(3)} Y${Number(xyzacView.pose.y).toFixed(3)} Z${Number(xyzacView.pose.z).toFixed(3)} A${Number(xyzacView.pose.a).toFixed(3)} C${Number(xyzacView.pose.c).toFixed(3)}` : "WASM state pending";
  useEffect(() => {
    if (!uiCacheHydrated.current || !wasmSnapshotReady) return;
    if (uiCacheSaveTimer.current) clearTimeout(uiCacheSaveTimer.current);
    const cacheState = {
      version: 2,
      selectedAxis,
      leftTab,
      rightTab,
      view,
      zoom,
      rotateMode,
      coordType,
      displayType,
      metric,
      layers,
      casePath,
      touchOffSystem,
    };
    uiCacheSaveTimer.current = setTimeout(() => {
      uiCacheSaveTimer.current = null;
      void client.saveUiState(cacheState, UI_CACHE_KEY).catch(() => undefined);
    }, 500);
    return () => { if (uiCacheSaveTimer.current) { clearTimeout(uiCacheSaveTimer.current); uiCacheSaveTimer.current = null; } };
  }, [client, wasmSnapshotReady, selectedAxis, leftTab, rightTab, view, zoom, rotateMode, coordType, displayType, metric, touchOffSystem, layers, casePath]);
  return <main className="axis-app" data-axis-feature="AXIS-UI-01" data-axis-authority="linuxcnc-wasm-worker" data-axis-state-source={wasmSnapshotReady ? "linuxcnc-wasm" : "pending"} data-axis-motion-authority={String(state.snapshot?.motion_authority ?? "pending")} data-axis-task-authority={String(state.snapshot?.task_authority ?? "pending")} data-axis-task-mode={String(taskRecord.mode ?? "pending")} data-axis-ui-cache={uiCacheHydrated.current ? "opfs" : "pending"} data-axis-view={view} data-axis-zoom={String(zoom)} data-axis-tp-queue-depth={String((wasmMotion as { queue_depth?: number }).queue_depth ?? "")} data-axis-tp-velocity={String((wasmMotion as { velocity?: number }).velocity ?? "")} data-axis-tp-active-id={String((wasmMotion as { active_id?: number }).active_id ?? "")} data-axis-current-line={String(visibleCurrentLine ?? "")} data-axis-run-enabled={String(gates.run.enabled && !programLoading)} data-axis-homed={JSON.stringify(state.snapshot?.motion?.homed_axes ?? state.snapshot?.motion?.homed ?? null)} data-axis-program-status={String(state.program?.program_status ?? "idle")} data-axis-program-loading={String(programLoading)} data-axis-program-path={String(state.program?.path ?? "")} data-axis-program-source-hash={String(state.program?.source_hash ?? "")}>
    <header className="axis-window-header" data-axis-feature="AXIS-SHELL-01"><div className="axis-brand"><img src={axisIcon("axis-24x24.png")} alt="AXIS" /> <strong>AXIS</strong><span>LinuxCNC Web/WASM</span></div><span className={`connection-state ${state.status}`} data-axis-feature="AXIS-SHELL-01" role="status">{state.status.toUpperCase()}</span><span className="axis-state-badge" data-axis-state={taskState} aria-label={`Machine ${machineState}, operation ${operationState}`}>{taskState}</span></header>
    <nav className="axis-menubar" data-axis-feature="AXIS-UI-02" aria-label="AXIS menu"><Menu label="File"><MenuAction onClick={loadProgram} disabled={programRunning || programLoading}>Reload editor</MenuAction><MenuAction onClick={() => setCommandStatus("Tool data editor is browser-backed")}>Edit tool data...</MenuAction><MenuAction onClick={() => setCommandStatus("Quit is unavailable in a browser tab")}>Quit</MenuAction></Menu><Menu label="Machine"><MenuAction shortcut="F1" onClick={toggleEstop}>{isEstop ? "Cancel Emergency Stop" : "Emergency Stop"}</MenuAction><MenuAction shortcut="F2" onClick={powerOn} disabled={!gates.power.enabled}>{machineOn ? "Power off" : "Power on"}</MenuAction><MenuAction shortcut="R" onClick={runProgram} disabled={!gates.run.enabled || programLoading}>Run program</MenuAction><MenuAction shortcut="T" onClick={() => execute("PROGRAM_STEP")} disabled={!gates.step.enabled || programLoading}>Step</MenuAction><MenuAction shortcut="P" onClick={() => execute("PROGRAM_PAUSE")} disabled={!gates.pause.enabled || programLoading}>Pause</MenuAction><MenuAction shortcut="S" onClick={() => execute("PROGRAM_RESUME")} disabled={!gates.resume.enabled || programLoading}>Resume</MenuAction><MenuAction shortcut="Esc" onClick={stopProgram} disabled={!programRunning && !programPaused}>Stop</MenuAction></Menu><Menu label="View"><MenuAction onClick={() => setRightTab("preview")}>Preview</MenuAction><MenuAction onClick={() => setRightTab("dro")}>DRO</MenuAction><MenuAction onClick={enterManualMode} disabled={programRunning || programLoading}>Manual Control</MenuAction><MenuAction onClick={enterMdiMode} disabled={programRunning || programLoading}>MDI</MenuAction></Menu><Menu label="Help"><MenuAction onClick={() => setCommandStatus("LinuxCNC AXIS source-compatible controls")}>About AXIS</MenuAction></Menu></nav>
    <section className="axis-toolbar" data-axis-feature="AXIS-UI-05" aria-label="AXIS toolbar"><IconButton feature="AXIS-MACHINE-01" label={isEstop ? "Cancel Emergency Stop [F1]" : "Emergency Stop [F1]"} asset="tool_estop.gif" danger onClick={toggleEstop} pressed={isEstop} /><IconButton feature="AXIS-MACHINE-02" label={machineOn ? "Power off [F2]" : "Power on [F2]"} asset="tool_power.gif" disabled={!gates.power.enabled || programLoading} disabledReason={programLoading ? "axis_program_load_in_progress" : gates.power.reason} onClick={powerOn} /><Separator /><IconButton feature="AXIS-FILE-01" label="Open G-Code file [O]" asset="tool_open.gif" disabled={programRunning || programLoading} onClick={openProgramFile} /><IconButton feature="AXIS-FILE-02" label="Load exact XYZAC TRT case" asset="tool_verify.gif" disabled={!gates.load.enabled || programLoading} disabledReason={programLoading ? "axis_program_load_in_progress" : gates.load.reason} onClick={loadCase} /><IconButton feature="AXIS-FILE-04" label="Reload current G-code [Ctrl-R]" asset="tool_reload.gif" disabled={!gates.load.enabled || programLoading} disabledReason={programLoading ? "axis_program_load_in_progress" : gates.load.reason} onClick={loadProgram} /><Separator /><IconButton feature="AXIS-MACHINE-03" label="Begin executing current file [R]" asset="tool_run.gif" disabled={!gates.run.enabled || programLoading} disabledReason={programLoading ? "axis_program_load_in_progress" : gates.run.reason} onClick={runProgram} /><IconButton feature="AXIS-MACHINE-05" label="Execute next line [T]" asset="tool_step.gif" disabled={!gates.step.enabled || programLoading} disabledReason={programLoading ? "axis_program_load_in_progress" : gates.step.reason} onClick={() => execute("PROGRAM_STEP")} /><IconButton feature="AXIS-MACHINE-06" label={programPaused ? "Resume execution [S]" : "Pause execution [P]"} asset={programPaused ? "resume_inhibit.gif" : "tool_pause.gif"} disabled={programLoading || (programPaused ? !gates.resume.enabled : !gates.pause.enabled)} disabledReason={programLoading ? "axis_program_load_in_progress" : programPaused ? gates.resume.reason : gates.pause.reason} onClick={() => execute(programPaused ? "PROGRAM_RESUME" : "PROGRAM_PAUSE")} /><IconButton feature="AXIS-MACHINE-07" label="Stop program execution [ESC]" asset="tool_stop.gif" disabled={!programRunning && !programPaused} disabledReason={!programRunning && !programPaused ? "axis_stop_state_gate" : gates.abort.reason} onClick={stopProgram} /><Separator /><IconButton feature="AXIS-MACHINE-09" label="Toggle skip lines with slash" asset="tool_blockdelete.gif" disabled disabledReason="blocked_by_abi: LinuxCNC block-delete state is unavailable" /><IconButton feature="AXIS-MACHINE-08" label="Toggle optional pause" asset="tool_optpause.gif" disabled disabledReason="blocked_by_abi: LinuxCNC optional-stop state is unavailable" /><Separator /><IconButton feature="AXIS-VIEW-01" label="Zoom in" asset="tool_zoomin.gif" onClick={() => setZoom((value) => Math.min(2, value + .2))} /><IconButton feature="AXIS-VIEW-01" label="Zoom out" asset="tool_zoomout.gif" onClick={() => setZoom((value) => Math.max(.5, value - .2))} /><IconButton feature="AXIS-VIEW-01" label="Top view" asset="tool_axis_z.gif" pressed={view === "z"} onClick={() => { setView("z"); setRightTab("preview"); }} /><IconButton feature="AXIS-VIEW-01" label="Rotated top view" asset="tool_axis_z2.gif" pressed={view === "z2"} onClick={() => { setView("z2"); setRightTab("preview"); }} /><IconButton feature="AXIS-VIEW-01" label="Side view" asset="tool_axis_x.gif" pressed={view === "x"} onClick={() => { setView("x"); setRightTab("preview"); }} /><IconButton feature="AXIS-VIEW-01" label="Front view" asset="tool_axis_y.gif" pressed={view === "y"} onClick={() => { setView("y"); setRightTab("preview"); }} /><IconButton feature="AXIS-VIEW-01" label="Inverted front view" asset="tool_axis_y2.png" pressed={view === "y2"} onClick={() => { setView("y2"); setRightTab("preview"); }} /><IconButton feature="AXIS-VIEW-01" label="Perspective view" asset="tool_axis_p.gif" pressed={view === "p"} onClick={() => { setView("p"); setRightTab("preview"); }} /><IconButton feature="AXIS-VIEW-02" label="Drag / rotate mode" asset="tool_rotate.gif" pressed={rotateMode} onClick={() => setRotateMode((value) => !value)} /><Separator /><IconButton feature="AXIS-VIEW-15" label="Clear live plot [Ctrl-K]" asset="tool_clear.gif" onClick={() => xyzacCommand("VISUAL_CLEAR", {}, "vismachClear")} /></section>
    <section className="axis-case-strip" data-axis-feature="AXIS-EDIT-03"><label>Simulation case<select data-axis-feature="AXIS-EDIT-03" value={casePath} onChange={(event) => setCasePath(event.target.value)}>{SIM_CASE_CATALOG.filter((entry) => entry.path === SELECTED_XYZAC_CASE).map((entry) => <option key={entry.path} value={entry.path}>{entry.label} | XYZAC TRT</option>)}</select></label><TextButton feature="AXIS-EDIT-03" onClick={loadPackagedProgram} disabled={!gates.load.enabled || programLoading}>Load 3D_Chips.ngc</TextButton><span className={`case-status${programLoading ? " loading" : ""}`} role="status" aria-live="polite" aria-busy={programLoading}>{programLoading ? "PROGRAM_LOAD pending: LinuxCNC WASM preview in progress..." : caseStatus}</span>{previewProgress && <div className={`preview-load-indicator ${previewProgress.phase}`} role="status" aria-live="polite" aria-label="Toolpath preview loading progress"><span title={previewProgress.detail}>{previewProgress.detail}</span><progress max="100" value={previewProgress.percent}>{previewProgress.percent}%</progress><output>{previewProgress.percent}%</output></div>}<span className="command-status" role="status">{commandStatus}</span></section>
    <MachineSequence wasmReady={wasmSnapshotReady} allHomed={allHomed} canHome={gates.home.enabled && !programLoading} onHomeAll={homeAll} />
    <XyzacTrtPanel view={xyzacView} command={xyzacCommand} loading={programLoading} />
    <XyzacLiveParameters snapshot={state.snapshot} />
    <section className="axis-top-pane" data-axis-feature="AXIS-UI-06"><div className="axis-notebook left-notebook" data-axis-feature="AXIS-UI-06"><div className="notebook-tabs" role="tablist" aria-label="Manual, MDI and diagnostics controls"><button id="axis-tab-manual" type="button" role="tab" aria-controls="axis-panel-manual" aria-selected={leftTab === "manual"} className={leftTab === "manual" ? "active" : ""} onClick={enterManualMode}>Manual Control [F3]</button><button id="axis-tab-mdi" type="button" role="tab" aria-controls="axis-panel-mdi" aria-selected={leftTab === "mdi"} className={leftTab === "mdi" ? "active" : ""} onClick={enterMdiMode}>MDI [F5]</button><button id="axis-tab-diagnostics" type="button" role="tab" aria-controls="axis-panel-diagnostics" aria-selected={leftTab === "diagnostics"} className={leftTab === "diagnostics" ? "active" : ""} onClick={() => setLeftTab("diagnostics")}>Diagnostics</button></div><div id="axis-panel-manual" role="tabpanel" aria-labelledby="axis-tab-manual" hidden={leftTab !== "manual"}><ManualControl action={execute} canJog={!programLoading && manualReady && gates.jog.enabled} canHome={!programLoading && gates.home.enabled} canSpindle={!programLoading && manualReady && Boolean(gates.spindle?.enabled)} canCoolant={!programLoading && wasmSnapshotReady && Boolean(gates.coolant?.enabled)} canTool={!programLoading && manualReady && Boolean(gates.tool?.enabled)} canProbe={!programLoading && manualReady && Boolean(gates.probe?.enabled)} canTouchOff={!programLoading && manualReady && Boolean(gates.touchOff?.enabled)} canToolTouchOff={!programLoading && manualReady && Boolean(gates.toolTouchOff?.enabled)} selectedAxis={selectedAxis} setSelectedAxis={setSelectedAxis} spindleDirection={spindleDirection} spindleBrake={spindleBrake} coolant={coolant} onSpindle={onSpindle} onCoolant={onCoolant} onHomeAxis={homeAxis} onTouchOff={() => promptTouchOff(false)} onToolTouchOff={() => promptTouchOff(true)} jogScale={Number.isFinite(sourceJogScale) ? sourceJogScale : null} onJogScale={(event) => void dispatch("SET_JOG_SCALE", { percent: Number(event.target.value) })} devices={state.devices ?? {}} /></div><div id="axis-panel-mdi" role="tabpanel" aria-labelledby="axis-tab-mdi" hidden={leftTab !== "mdi"}><MdiControl action={execute} ready={!programLoading && manualReady && gates.mdi.enabled} /></div><div id="axis-panel-diagnostics" role="tabpanel" aria-labelledby="axis-tab-diagnostics" hidden={leftTab !== "diagnostics"}><DiagnosticsPanel state={state} gates={gates} /><XyzacDiagnostics view={xyzacView} operations={operationTrace} alarms={state.alarms} error={state.error} /></div></div><div className="axis-notebook right-notebook" data-axis-feature="AXIS-UI-06"><div className="notebook-tabs" role="tablist" aria-label="Preview and DRO"><button id="axis-tab-preview" type="button" role="tab" aria-controls="axis-panel-preview" aria-selected={rightTab === "preview"} className={rightTab === "preview" ? "active" : ""} onClick={() => setRightTab("preview")}>Preview</button><button id="axis-tab-dro" type="button" role="tab" aria-controls="axis-panel-dro" aria-selected={rightTab === "dro"} className={rightTab === "dro" ? "active" : ""} onClick={() => setRightTab("dro")}>DRO</button></div><div id="axis-panel-preview" role="tabpanel" aria-labelledby="axis-tab-preview" className="axis-preview" hidden={rightTab !== "preview"}><XyzacToolPreviewFromSnapshot snapshot={programLoading ? null : state.snapshot} view={view} zoom={zoom} rotateMode={rotateMode} showPath={layers.path} showLive={layers.live} showLimits={layers.limits} showVelocity={layers.velocity} showOffsets={layers.offsets} showExtents={layers.extents} /></div><div id="axis-panel-dro" role="tabpanel" aria-labelledby="axis-tab-dro" hidden={rightTab !== "dro"}><DroView axes={axes} state={state} coordType={coordType} displayType={displayType} metric={metric} setCoordType={setCoordType} setDisplayType={setDisplayType} setMetric={setMetric} /></div></div></section>
    <section className="axis-metrics" data-axis-feature="AXIS-VIEW-03"><div className="axis-slider"><label>Jog Speed:<output>{jogScalePercent === null ? "-" : `${jogScalePercent}%`}</output><input type="range" min="6" max="100" value={jogScalePercent ?? 6} onChange={(event) => void dispatch("SET_JOG_SCALE", { percent: Number(event.target.value) })} disabled={programLoading || !gates.jog.enabled || jogScalePercent === null} aria-label="Jog speed" /></label><label>Feed Override:<output>{feedOverridePercent === null ? "-" : `${feedOverridePercent}%`}</output><input type="range" min="0" max="200" step="1" value={feedOverridePercent ?? 0} onChange={requestFeedOverride} disabled={!gates.override.enabled || programLoading || feedOverridePercent === null} aria-label="Feed override" aria-valuetext={feedOverridePercent === null ? "WASM state pending" : `${feedOverridePercent}%`} data-axis-feed-override={feedOverridePercent ?? ""} /></label><label>Spindle Override:<output>{spindleOverridePercent === null ? "-" : `${spindleOverridePercent}%`}</output><input type="range" min="0" max="200" value={spindleOverridePercent ?? 0} onChange={(event) => void dispatch("SET_SPINDLE_OVERRIDE", { spindle: 0, scale: Number(event.target.value) / 100 })} disabled={programLoading || !gates.override.enabled || spindleOverridePercent === null} aria-label="Spindle override" /></label><label>Max Velocity:<output>{maxVelocityPercent === null ? "-" : `${maxVelocityPercent}%`}</output><input type="range" min="6" max="100" value={maxVelocityPercent ?? 6} onChange={(event) => void dispatch("SET_MAX_VELOCITY", { percent: Number(event.target.value) })} disabled={programLoading || !gates.override.enabled || maxVelocityPercent === null} aria-label="Max velocity" /></label><label title="blocked_by_abi: LinuxCNC rapidrate is not exposed by the selected WASM TP"><span>Rapid Override</span><output>Unavailable</output><input type="range" min="0" max="120" value="0" disabled aria-label="Rapid override" /></label></div><div className="axis-layer-controls" aria-label="Preview layers">{(["path", "live", "limits", "velocity", "offsets", "extents"] as const).map((layer) => <label key={layer}><input type="checkbox" data-axis-feature="AXIS-VIEW-03" checked={layers[layer]} onChange={(event) => setLayers((current) => ({ ...current, [layer]: event.target.checked }))} /> {layer}</label>)}</div></section>
    <XyzacProgramPane status={visibleProgramStatus} currentLine={visibleCurrentLine} sourceHash={programLoading ? "" : String(state.program?.source_hash ?? "")}><ProgramPane text={programText} setText={setProgramText} activeGcodes={activeGcodes} executionTrace={visibleExecutionTrace} programStatus={visibleProgramStatus} onLoad={loadProgram} onRun={runProgram} onStep={() => execute("PROGRAM_STEP")} canLoad={gates.load.enabled && !programLoading} canRun={gates.run.enabled && !programLoading} canStep={gates.step.enabled && !programLoading} currentLine={visibleCurrentLine} executionLine={visibleExecutionLine} executionLineText={visibleExecutionLineText} diagnostic={state.error?.code ?? null} /></XyzacProgramPane>
    <input ref={programFileInput} className="visually-hidden-file-input" type="file" accept=".ngc,.nc,.gcode,.tap,text/plain" onChange={onProgramFile} aria-label="Open G-code file" />
    <footer className="axis-info-bar" data-axis-feature="AXIS-UI-07"><span className={`task-state ${state.status}`} data-axis-feature="AXIS-SHELL-01">{taskState}</span><span className="machine-state" data-axis-state-machine={machineState}>Machine {machineState}</span><span className="operation-state" data-axis-state-operation={operationState}>Operation {operationState}</span><span className="tool-state" data-axis-feature="AXIS-UI-07">Tool {toolNumber}</span><span className="position-state" data-axis-feature="AXIS-VIEW-17">{position}</span><span className="footer-status" role="status">{state.error ? `Error: ${state.error.code}` : commandStatus}</span></footer>
  </main>;
}

Axis:

Jog:

Spindle:

Coolant:

Tool / Probe:

MDI History