@acpus/web 0.1.0-alpha.0

package/dist/client/ui/App.js

@@ -0,0 +1,742 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { useEffect, useRef, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import ReactMarkdown from "react-markdown";
+import { allExpanded, defaultStyles, JsonView } from "react-json-view-lite";
+import "react-json-view-lite/dist/index.css";
+import remarkGfm from "remark-gfm";
+import Activity from "lucide-react/dist/esm/icons/activity.js";
+import Ban from "lucide-react/dist/esm/icons/ban.js";
+import Boxes from "lucide-react/dist/esm/icons/boxes.js";
+import CheckCircle2 from "lucide-react/dist/esm/icons/circle-check-big.js";
+import ChevronRight from "lucide-react/dist/esm/icons/chevron-right.js";
+import ChevronsLeft from "lucide-react/dist/esm/icons/chevrons-left.js";
+import ChevronsRight from "lucide-react/dist/esm/icons/chevrons-right.js";
+import CircleAlert from "lucide-react/dist/esm/icons/circle-alert.js";
+import Clock from "lucide-react/dist/esm/icons/clock.js";
+import Copy from "lucide-react/dist/esm/icons/copy.js";
+import FileSearch from "lucide-react/dist/esm/icons/file-search.js";
+import FileText from "lucide-react/dist/esm/icons/file-text.js";
+import Folder from "lucide-react/dist/esm/icons/folder.js";
+import LoaderCircle from "lucide-react/dist/esm/icons/loader-circle.js";
+import Package from "lucide-react/dist/esm/icons/package.js";
+import Pause from "lucide-react/dist/esm/icons/pause.js";
+import Play from "lucide-react/dist/esm/icons/play.js";
+import Radio from "lucide-react/dist/esm/icons/radio.js";
+import RotateCcw from "lucide-react/dist/esm/icons/rotate-ccw.js";
+import Search from "lucide-react/dist/esm/icons/search.js";
+import Square from "lucide-react/dist/esm/icons/square.js";
+import Workflow from "lucide-react/dist/esm/icons/workflow.js";
+import XCircle from "lucide-react/dist/esm/icons/circle-x.js";
+import { getConfig, getArtifactPreview, getHealth, getNodeExecutionInspection, getNodeInspection, getRunRuntimeSnapshot, listWorkflowCatalog, listWorkflowFiles, listRuns, submitRunCommand, visualizeWorkflow, } from "../api.js";
+import { RunGraph } from "./RunGraph.js";
+import { StaticGraphApp } from "./StaticGraphApp.js";
+import { ToastViewport, useToasts } from "./Toast.js";
+import { Button } from "./shadcn/button.js";
+import { Alert } from "./shadcn/alert.js";
+import { Badge } from "./shadcn/badge.js";
+import { Breadcrumb, BreadcrumbButton, BreadcrumbItem, BreadcrumbList, BreadcrumbSeparator, } from "./shadcn/breadcrumb.js";
+import { Card } from "./shadcn/card.js";
+import { Dialog, DialogContent, DialogDescription, DialogTitle, } from "./shadcn/dialog.js";
+import { Input } from "./shadcn/input.js";
+import { List, ListRow } from "./shadcn/list.js";
+import { Popover, PopoverClose, PopoverContent, PopoverTrigger, } from "./shadcn/popover.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "./shadcn/select.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger, } from "./shadcn/tabs.js";
+import { Textarea } from "./shadcn/textarea.js";
+import { normalizeRuntimeStatus, runtimeStatusLabel } from "../../runtime-status.js";
+const inspectorExitMs = 220;
+const reducedMotionQuery = "(prefers-reduced-motion: reduce)";
+export function App() {
+    const [page, setPage] = useState("runtime");
+    const [selectedRunId, setSelectedRunId] = useState();
+    const [graphTarget, setGraphTarget] = useState();
+    const [statusOpen, setStatusOpen] = useState(false);
+    const [sidebarCollapsed, setSidebarCollapsed] = useState(true);
+    const runs = useQuery({
+        queryKey: ["runs"],
+        queryFn: listRuns,
+        refetchInterval: 4_000,
+    });
+    const health = useQuery({
+        queryKey: ["health"],
+        queryFn: getHealth,
+        refetchInterval: 5_000,
+    });
+    const config = useQuery({
+        queryKey: ["config"],
+        queryFn: getConfig,
+    });
+    useEffect(() => {
+        if (!selectedRunId && runs.data?.[0])
+            setSelectedRunId(runs.data[0].id);
+    }, [runs.data, selectedRunId]);
+    return (_jsxs("main", { className: `app-shell ${sidebarCollapsed ? "sidebar-collapsed" : ""}`, children: [_jsxs("aside", { className: "sidebar", children: [_jsxs("div", { className: "sidebar-head", children: [_jsxs("div", { className: "brand", children: [_jsx("div", { className: "brand-mark", children: _jsx(Workflow, { size: 19 }) }), _jsx("div", { className: "brand-copy", children: _jsx("h1", { children: "Acpus" }) })] }), _jsx(Button, { type: "button", variant: "ghost", className: "sidebar-toggle", "aria-label": sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar", title: sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar", onClick: () => setSidebarCollapsed(current => !current), children: sidebarCollapsed ? _jsx(ChevronsRight, { size: 16 }) : _jsx(ChevronsLeft, { size: 16 }) })] }), _jsxs("nav", { className: "nav-list", children: [_jsx(NavButton, { icon: _jsx(Activity, { size: 17 }), label: "Runtime", active: page === "runtime", onClick: () => setPage("runtime") }), _jsx(NavButton, { icon: _jsx(FileSearch, { size: 17 }), label: "Workflows", active: page === "workflows", onClick: () => setPage("workflows") })] }), _jsxs(Popover, { open: statusOpen, onOpenChange: setStatusOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(SidebarStatus, { health: health.data, config: config.data }) }), _jsx(StatusInfoPopover, { health: health.data, config: config.data })] })] }), _jsxs("section", { className: "workspace", children: [page === "runtime" && (_jsx(RuntimePage, { runId: selectedRunId, runs: runs.data ?? [], selectedTarget: graphTarget, onSelectRun: id => {
+                            setSelectedRunId(id);
+                            setGraphTarget(undefined);
+                        }, onSelectTarget: setGraphTarget })), page === "workflows" && _jsx(WorkflowsPage, {})] })] }));
+}
+function RuntimePage({ runId, runs, selectedTarget, onSelectRun, onSelectTarget, }) {
+    const queryClient = useQueryClient();
+    const { toasts, push, dismiss } = useToasts();
+    const { exiting, close, layoutState } = useInspectorPresence(selectedTarget, () => onSelectTarget(undefined));
+    const selectedNodeId = selectedTarget?.kind === "node" ? selectedTarget.id : undefined;
+    const selectedNodeContext = selectedTarget?.kind === "node" ? selectedTarget.context : [];
+    const selectedNodeDisplayStatus = selectedTarget?.kind === "node" ? selectedTarget.displayStatus : undefined;
+    const snapshot = useQuery({
+        queryKey: ["run-runtime-snapshot", runId],
+        queryFn: () => getRunRuntimeSnapshot(runId),
+        enabled: Boolean(runId),
+        refetchInterval: query => isTerminalRunStatus(query.state.data?.run.status) ? false : 1_000,
+    });
+    const inspection = useQuery({
+        queryKey: ["node-inspection", runId, selectedNodeId, selectedNodeContext],
+        queryFn: () => getNodeInspection(runId, selectedNodeId, selectedNodeContext),
+        enabled: Boolean(runId && selectedNodeId),
+        refetchInterval: 2_500,
+    });
+    const command = useMutation({
+        mutationFn: (input) => submitRunCommand(runId, input),
+        onSuccess: async (_data, variables) => {
+            push({ tone: "success", title: `${commandLabel(variables)} accepted` });
+            await Promise.all([
+                queryClient.invalidateQueries({ queryKey: ["run", runId] }),
+                queryClient.invalidateQueries({ queryKey: ["run-runtime-snapshot", runId] }),
+                queryClient.invalidateQueries({ queryKey: ["runs"] }),
+            ]);
+        },
+        onError: (error, variables) => {
+            push({ tone: "error", title: `${commandLabel(variables)} failed`, detail: error instanceof Error ? error.message : String(error) });
+        },
+    });
+    const runDetails = snapshot.data?.run;
+    const signalWait = selectedTarget?.kind === "node"
+        ? inspection.data?.signalWaits.find(w => w.status === "awaiting")
+        : undefined;
+    const retryTargets = retryTargetsForRun(runDetails);
+    const retryTargetSignature = retryTargets.map(target => target.value).join("|");
+    const [retryTarget, setRetryTarget] = useState();
+    useEffect(() => {
+        const values = new Set(retryTargets.map(target => target.value));
+        setRetryTarget(current => current && values.has(current) ? current : retryTargets[0]?.value);
+    }, [retryTargetSignature]);
+    if (!runId)
+        return _jsx(EmptyState, { title: "No Run Selected", detail: "Open Runs to choose a durable run." });
+    const headerState = runHeaderViewState(runDetails, snapshot.error);
+    return (_jsxs("div", { className: "runtime-grid", children: [_jsxs("header", { className: "topbar", children: [_jsx("div", { className: "run-titlebar", children: headerState.kind === "ready" ? (_jsxs(_Fragment, { children: [_jsx("h2", { children: headerState.run.name }), _jsxs("div", { className: "run-meta", children: [_jsx(RunStatusIndicator, { status: headerState.run.status }), _jsx("span", { children: runId }), headerState.run.updatedAt && _jsx("span", { children: formatDate(headerState.run.updatedAt) })] })] })) : headerState.kind === "error" ? (_jsx(RunHeaderError, { message: headerState.message })) : (_jsx(RunHeaderSkeleton, {})) }), _jsxs("div", { className: "run-header-actions", children: [_jsx(RunSelector, { runs: runs, selectedRunId: runId, onSelectRun: onSelectRun }), _jsx(RunControls, { disabled: !runDetails || command.isPending, status: runDetails?.status, selectedNodeId: selectedNodeId, retryTargets: retryTargets, selectedRetryTarget: retryTarget, onSelectRetryTarget: setRetryTarget, onCommand: input => command.mutate(input) })] })] }), _jsxs("div", { className: `graph-inspection-layout ${layoutState === "open" ? "with-inspector" : layoutState === "closing" ? "closing-inspector" : ""}`, children: [_jsx("section", { className: "graph-panel", children: _jsx(RunGraph, { graph: snapshot.data?.graph, ...(selectedNodeId === undefined ? {} : { selectedNodeId }), onSelectNode: (id, context = [], displayStatus) => onSelectTarget(id ? { kind: "node", id, context, ...(displayStatus ? { displayStatus } : {}) } : undefined), onSelectWorkflow: () => onSelectTarget({ kind: "workflow" }) }) }), selectedTarget && (_jsx("div", { className: "inspector-slot", children: _jsxs(InspectorPanel, { title: selectedTarget.kind === "workflow" ? "Workflow I/O" : inspection.data?.summary.nodeId ?? selectedNodeId ?? "Node", exiting: exiting, onClose: close, children: [selectedTarget.kind === "workflow" ? (_jsx(RuntimeWorkflowInspector, { run: runDetails })) : (_jsx(Inspector, { runId: runId, target: selectedNodeId, context: selectedNodeContext, displayStatus: selectedNodeDisplayStatus, inspection: inspection.data, loading: inspection.isLoading })), selectedTarget.kind === "node" && signalWait && (_jsx(SignalBox, { wait: signalWait, onSubmit: payload => command.mutate({ type: "signal", target: signalWait.nodeKey, payload }) }))] }) }))] }), _jsx(ToastViewport, { toasts: toasts, onDismiss: dismiss })] }));
+}
+export function runHeaderViewState(run, error) {
+    if (run)
+        return { kind: "ready", run };
+    if (error)
+        return { kind: "error", message: error instanceof Error ? error.message : String(error) };
+    return { kind: "loading" };
+}
+function RunHeaderSkeleton() {
+    return (_jsxs("div", { className: "run-header-skeleton", role: "status", "aria-label": "Loading run details", "aria-busy": "true", children: [_jsx("span", { className: "state-skeleton-line title", "aria-hidden": "true" }), _jsx("span", { className: "state-skeleton-line meta", "aria-hidden": "true" })] }));
+}
+function RunHeaderError({ message }) {
+    return (_jsxs("div", { className: "run-header-error", role: "alert", children: [_jsx("strong", { children: "Run details unavailable" }), _jsx("span", { children: message })] }));
+}
+function commandLabel(input) {
+    return typeof input.type === "string" ? input.type : "command";
+}
+function useInspectorPresence(target, onExited) {
+    const [exiting, setExiting] = useState(false);
+    const timerRef = useRef(undefined);
+    useEffect(() => {
+        setExiting(false);
+        if (timerRef.current !== undefined) {
+            window.clearTimeout(timerRef.current);
+            timerRef.current = undefined;
+        }
+    }, [target]);
+    useEffect(() => () => {
+        if (timerRef.current !== undefined)
+            window.clearTimeout(timerRef.current);
+    }, []);
+    const close = () => {
+        if (!target || exiting)
+            return;
+        if (window.matchMedia(reducedMotionQuery).matches) {
+            setExiting(false);
+            onExited();
+            return;
+        }
+        setExiting(true);
+        timerRef.current = window.setTimeout(() => {
+            timerRef.current = undefined;
+            setExiting(false);
+            onExited();
+        }, inspectorExitMs);
+    };
+    return { exiting, layoutState: target ? exiting ? "closing" : "open" : "closed", close };
+}
+function WorkflowsPage() {
+    const [dir, setDir] = useState("");
+    const [source, setSource] = useState();
+    const [result, setResult] = useState();
+    const catalog = useQuery({
+        queryKey: ["workflow-catalog"],
+        queryFn: listWorkflowCatalog,
+    });
+    const files = useQuery({
+        queryKey: ["workflow-files", dir],
+        queryFn: () => listWorkflowFiles(dir),
+    });
+    const visualize = useMutation({
+        mutationFn: (next) => visualizeWorkflow(next),
+        onSuccess: next => {
+            setResult(next);
+        },
+    });
+    const graph = result?.status === "ready" ? result.graph : undefined;
+    return (_jsxs("div", { className: "workflow-viz-grid", children: [_jsxs("section", { className: "table-panel workflow-source-panel", children: [_jsx(PageHeader, { title: "Workflows", detail: "Static Visualization" }), _jsx(WorkflowSourcePicker, { catalog: catalog.data ?? [], catalogLoading: catalog.isLoading, catalogError: catalog.error, files: files.data?.entries ?? [], filesLoading: files.isLoading, filesError: files.error, dir: files.data?.dir ?? dir, selected: source, visualizing: visualize.isPending, visualizeError: visualize.error, visualizationFailure: result?.status === "failed" ? result : undefined, onOpenDir: setDir, onSelect: next => {
+                            setSource(next);
+                            setResult(undefined);
+                        }, onVisualize: () => source && visualize.mutate(source) })] }), graph && result?.status === "ready" ? (_jsx(StaticGraphApp, { data: result })) : (_jsx("section", { className: "graph-panel", children: _jsx(EmptyState, { title: "No Workflow Visualized", detail: "Choose a catalog entry or workspace workflow file, then click Visualize." }) }))] }));
+}
+function WorkflowSourcePicker({ catalog, catalogLoading, catalogError, files, filesLoading, filesError, dir, selected, visualizing, visualizeError, visualizationFailure, onOpenDir, onSelect, onVisualize, }) {
+    const [activeTab, setActiveTab] = useState("catalog");
+    const selectedSummary = describeWorkflowSource(selected);
+    return (_jsxs("div", { className: "workflow-picker", children: [_jsxs(Tabs, { value: activeTab, onValueChange: value => setActiveTab(value), className: "workflow-picker-tabs", children: [_jsxs(TabsList, { className: "workflow-picker-tabs-list", "aria-label": "Workflow source type", children: [_jsx(TabsTrigger, { value: "catalog", children: "Catalog" }), _jsx(TabsTrigger, { value: "files", children: "Files" })] }), _jsx(TabsContent, { value: "catalog", className: "workflow-picker-tab-panel", children: _jsx(WorkflowCatalogList, { entries: catalog, loading: catalogLoading, error: catalogError, selected: selected, onSelect: onSelect }) }), _jsx(TabsContent, { value: "files", className: "workflow-picker-tab-panel", children: _jsx(WorkflowFileSelector, { entries: files, loading: filesLoading, error: filesError, dir: dir, selected: selected, onOpenDir: onOpenDir, onSelect: onSelect }) })] }), _jsxs("div", { className: "workflow-picker-footer", children: [_jsxs("div", { className: `workflow-selected-source ${selected ? "selected" : ""}`, children: [_jsx("span", { children: "Selected source" }), _jsx("strong", { children: selectedSummary.title }), selectedSummary.detail && _jsx("small", { children: selectedSummary.detail })] }), _jsx(Button, { variant: "default", className: "primary-button", disabled: !selected || visualizing, onClick: onVisualize, children: visualizing ? "Visualizing..." : "Visualize" }), visualizeError ? (_jsx(StateBlock, { tone: "error", title: "Visualization failed", detail: visualizeError instanceof Error ? visualizeError.message : String(visualizeError) })) : null, visualizationFailure && (_jsx(StateBlock, { tone: "error", title: `${visualizationFailure.phase} failed`, detail: visualizationFailure.message }))] })] }));
+}
+function WorkflowCatalogList({ entries, loading, error, selected, onSelect, }) {
+    if (loading)
+        return _jsx(StateBlock, { tone: "loading", title: "Loading catalog" });
+    if (error)
+        return _jsx(StateBlock, { tone: "error", title: "Catalog unavailable", detail: error instanceof Error ? error.message : String(error) });
+    if (entries.length === 0) {
+        return _jsx(StateBlock, { tone: "empty", title: "No catalog workflows", detail: "Use Files to choose a workflow module from this workspace." });
+    }
+    return (_jsx(List, { className: "workflow-source-table", "aria-label": "Project catalog workflows", children: entries.map(entry => {
+            const active = selected?.kind === "catalog" && selected.name === entry.name;
+            return (_jsxs(ListRow, { className: `workflow-list-row catalog ${active ? "selected" : ""}`, "aria-pressed": active, onClick: () => onSelect({ kind: "catalog", name: entry.name }), children: [_jsx(Package, { size: 15 }), _jsxs("span", { className: "workflow-row-main", children: [_jsx("strong", { children: entry.name }), _jsx("small", { children: compactWorkflowPath(entry.entryPath) })] }), _jsx(Badge, { className: "workflow-row-badge", children: "project" })] }, entry.name));
+        }) }));
+}
+function WorkflowFileSelector({ entries, loading, error, dir, selected, onOpenDir, onSelect, }) {
+    const [filter, setFilter] = useState("");
+    const normalizedFilter = filter.trim().toLowerCase();
+    const visibleEntries = normalizedFilter
+        ? entries.filter(entry => `${entry.name} ${entry.path}`.toLowerCase().includes(normalizedFilter))
+        : entries;
+    return (_jsxs("div", { className: "workflow-file-selector", children: [_jsxs("div", { className: "workflow-file-toolbar", children: [_jsx(WorkflowBreadcrumb, { dir: dir, onOpenDir: onOpenDir }), _jsxs("label", { className: "workflow-filter", children: [_jsx(Search, { size: 14, "aria-hidden": "true" }), _jsx(Input, { value: filter, onChange: event => setFilter(event.currentTarget.value), placeholder: "Filter current directory", "aria-label": "Filter current directory" })] })] }), loading ? (_jsx(StateBlock, { tone: "loading", title: "Loading workspace files" })) : error ? (_jsx(StateBlock, { tone: "error", title: "Files unavailable", detail: error instanceof Error ? error.message : String(error) })) : visibleEntries.length === 0 ? (_jsx(StateBlock, { tone: "empty", title: "No workflow files here", detail: filter ? "Clear the filter or open another directory." : "Open a directory that contains .workflow.ts or .workflow.tsx files." })) : (_jsx(List, { className: "workflow-source-table", "aria-label": "Workspace workflow files", children: visibleEntries.map(entry => {
+                    const active = selected?.kind === "file" && selected.path === entry.path;
+                    const directory = entry.kind === "directory";
+                    return (_jsxs(ListRow, { className: `workflow-list-row file ${directory ? "directory" : "workflow"} ${active ? "selected" : ""}`, "aria-pressed": active, onClick: () => directory ? onOpenDir(entry.path) : onSelect({ kind: "file", path: entry.path }), children: [directory ? _jsx(Folder, { size: 15 }) : _jsx(FileText, { size: 15 }), _jsxs("span", { className: "workflow-row-main", children: [_jsx("strong", { children: entry.name }), _jsx("small", { children: entry.path })] }), _jsx(Badge, { className: "workflow-row-badge", children: directory ? "directory" : "workflow" }), directory && _jsx(ChevronRight, { size: 14, className: "workflow-row-chevron", "aria-hidden": "true" })] }, `${entry.kind}:${entry.path}`));
+                }) }))] }));
+}
+function WorkflowBreadcrumb({ dir, onOpenDir }) {
+    const segments = dir.split("/").filter(Boolean);
+    const targets = segments.map((_segment, index) => segments.slice(0, index + 1).join("/"));
+    return (_jsx(Breadcrumb, { "aria-label": "Workspace path", className: "workflow-breadcrumb", children: _jsxs(BreadcrumbList, { children: [_jsx(BreadcrumbItem, { children: _jsx(BreadcrumbButton, { "aria-current": dir.length === 0 ? "page" : undefined, onClick: () => onOpenDir(""), children: "Workspace" }) }), segments.map((segment, index) => {
+                    const target = targets[index];
+                    return (_jsxs(React.Fragment, { children: [_jsx(BreadcrumbSeparator, { children: _jsx(ChevronRight, { size: 13 }) }), _jsx(BreadcrumbItem, { children: _jsx(BreadcrumbButton, { "aria-current": target === dir ? "page" : undefined, onClick: () => onOpenDir(target), children: segment }) })] }, target));
+                })] }) }));
+}
+function describeWorkflowSource(source) {
+    if (!source)
+        return { title: "None selected", detail: "Choose from Catalog or Files." };
+    if (source.kind === "catalog")
+        return { title: source.name, detail: "Project catalog entry" };
+    return { title: fileNameFromPath(source.path), detail: source.path };
+}
+function fileNameFromPath(path) {
+    return path.split("/").filter(Boolean).at(-1) ?? path;
+}
+function compactWorkflowPath(path) {
+    const workflowMarker = "/.acpus/workflows/";
+    const workflowIndex = path.indexOf(workflowMarker);
+    if (workflowIndex >= 0)
+        return `.acpus/workflows/${path.slice(workflowIndex + workflowMarker.length)}`;
+    const packageMarker = "/packages/";
+    const packageIndex = path.indexOf(packageMarker);
+    if (packageIndex >= 0)
+        return `packages/${path.slice(packageIndex + packageMarker.length)}`;
+    return path;
+}
+function RuntimeWorkflowInspector({ run }) {
+    if (!run)
+        return _jsx(StateBlock, { tone: "loading", title: "Loading workflow I/O" });
+    const hasOutput = run.output !== undefined;
+    const terminal = isTerminalRunStatus(run.status);
+    return (_jsxs("div", { className: "inspector-stack", children: [_jsxs(InspectorSection, { title: "Workflow", children: [_jsx(KeyValue, { label: "Name", value: run.name }), _jsx(KeyValue, { label: "Run ID", value: run.id }), _jsx(KeyValue, { label: "Status", value: runtimeStatusLabel(normalizeRuntimeStatus(run.status)) }), run.dynamic?.version !== undefined && _jsx(KeyValue, { label: "Runtime version", value: String(run.dynamic.version) }), _jsx(KeyValue, { label: "Started", value: formatDate(run.createdAt) }), _jsx(KeyValue, { label: "Updated", value: formatDate(run.updatedAt) }), _jsx(KeyValue, { label: "Duration", value: formatDuration(durationBetween(run.createdAt, run.updatedAt)) })] }), _jsx(JsonSection, { title: "Input", value: run.input }), hasOutput
+                ? _jsx(JsonSection, { title: "Output", value: run.output })
+                : (_jsx(InspectorSection, { title: "Output", children: _jsx(StateBlock, { tone: "empty", title: terminal ? "No workflow output recorded" : "Output pending", detail: terminal ? "The run reached a terminal state without a workflow output value." : "Workflow output is available after the run completes." }) }))] }));
+}
+function StaticWorkflowInspector({ result }) {
+    return (_jsxs("div", { className: "inspector-stack", children: [_jsxs(InspectorSection, { title: "Workflow", children: [_jsx(KeyValue, { label: "Name", value: result.workflow.name }), result.workflow.description && _jsx(KeyValue, { label: "Description", value: result.workflow.description }), _jsx(KeyValue, { label: "IR version", value: String(result.workflow.irVersion) }), _jsx(KeyValue, { label: "Node count", value: String(result.workflow.nodeCount) }), _jsx(KeyValue, { label: "IR digest", value: result.irDigest }), _jsx(KeyValue, { label: "Source digest", value: result.sourceGraphDigest })] }), result.contract.inputSchema
+                ? _jsx(JsonSection, { title: "Input Contract", value: result.contract.inputSchema })
+                : (_jsx(InspectorSection, { title: "Input Contract", children: _jsx(StateBlock, { tone: "empty", title: "No input contract", detail: "This workflow does not declare an input schema." }) })), _jsx(JsonSection, { title: "Output Mapping", value: result.contract.outputs })] }));
+}
+function StaticGraphInspector({ graph, target }) {
+    if (!graph || !target)
+        return _jsx(StateBlock, { tone: "empty", title: "Select a graph node", detail: "Node details appear here after selection." });
+    const node = graph.nodes.find(item => item.id === target);
+    const container = graph.containers.find(item => item.id === target);
+    if (!node && !container)
+        return _jsx(StateBlock, { tone: "empty", title: "No graph detail", detail: "The selected graph target is no longer available." });
+    return (_jsxs("div", { className: "inspector-stack", children: [_jsxs(InspectorSection, { title: "Identity", children: [_jsx(KeyValue, { label: "Kind", value: node?.kind ?? container?.kind ?? "unknown" }), _jsx(KeyValue, { label: "Node ID", value: node?.nodeId ?? container?.nodeId ?? target }), _jsx(KeyValue, { label: "Path", value: (node?.path ?? container?.path ?? []).join(" / ") })] }), node?.detail && (_jsx(JsonSection, { title: "Definition", value: node.detail }))] }));
+}
+function InspectorPanel({ title, exiting = false, onClose, children, }) {
+    useEffect(() => {
+        const onKeyDown = (event) => {
+            if (event.key === "Escape")
+                onClose();
+        };
+        window.addEventListener("keydown", onKeyDown);
+        return () => window.removeEventListener("keydown", onKeyDown);
+    }, [onClose]);
+    return (_jsx(Card, { asChild: true, className: `inspector-card ${exiting ? "exiting" : ""}`, children: _jsxs("aside", { role: "dialog", "aria-label": title, children: [_jsxs("div", { className: "inspector-card-head", children: [_jsxs("div", { children: [_jsx("span", { children: "Inspector" }), _jsx("strong", { children: title })] }), _jsx(Button, { variant: "ghost", className: "close-button", onClick: onClose, "aria-label": "Close inspector", children: _jsx(XCircle, { size: 16 }) })] }), _jsx("div", { className: "inspector-card-body", children: children })] }) }));
+}
+function RunControls({ disabled, status, selectedNodeId, retryTargets, selectedRetryTarget, onSelectRetryTarget, onCommand, }) {
+    const controls = controlStateForRun(status, disabled, retryTargets);
+    const retryTarget = retryCommandTarget(retryTargets, selectedRetryTarget);
+    const [pendingControl, setPendingControl] = useState();
+    const retryTargetLabel = retryTargets.find(target => target.value === retryTarget)?.label;
+    return (_jsxs("div", { className: "control-strip", children: [retryTargets.length > 1 && controls.some(control => control.id === "retry") && (_jsxs(Select, { value: selectedRetryTarget ?? retryTargets[0]?.value ?? "", disabled: disabled, onValueChange: onSelectRetryTarget, children: [_jsx(SelectTrigger, { className: "retry-target-select", "aria-label": "Retry target", title: "Retry target", children: _jsx(SelectValue, { placeholder: "Retry target" }) }), _jsx(SelectContent, { children: retryTargets.map(target => _jsx(SelectItem, { value: target.value, children: target.label }, target.value)) })] })), controls.map(control => {
+                const command = commandForControl(control.id, retryTarget, selectedNodeId);
+                const commandDisabled = control.id === "retry" && !command;
+                return (_jsx(IconButton, { label: control.label, title: control.title, tone: control.tone, icon: controlIcon(control.id), disabled: control.disabled || commandDisabled, onClick: () => {
+                        if (!command)
+                            return;
+                        setPendingControl({
+                            control,
+                            command,
+                            targetLabel: control.id === "retry" ? retryTargetLabel : selectedNodeId,
+                            restoreFocus: document.activeElement instanceof HTMLElement ? document.activeElement : undefined,
+                        });
+                    } }, control.id));
+            }), pendingControl && (_jsx(ConfirmDialog, { confirmation: confirmationForControl(pendingControl.control.id, pendingControl.targetLabel), restoreFocus: pendingControl.restoreFocus, onCancel: () => setPendingControl(undefined), onConfirm: () => {
+                    onCommand(pendingControl.command);
+                    setPendingControl(undefined);
+                } }))] }));
+}
+function RunSelector({ runs, selectedRunId, onSelectRun, }) {
+    return (_jsxs("label", { className: "run-select-wrap", children: [_jsx("span", { children: "Run" }), _jsxs(Select, { ...(selectedRunId ? { value: selectedRunId } : {}), disabled: runs.length === 0, onValueChange: onSelectRun, children: [_jsx(SelectTrigger, { className: "run-select", "aria-label": "Select run", children: _jsx(SelectValue, { placeholder: "No runs" }) }), _jsx(SelectContent, { children: runs.map(run => (_jsxs(SelectItem, { value: run.id, children: [run.name, " \u00B7 ", runtimeStatusLabel(normalizeRuntimeStatus(run.status))] }, run.id))) })] })] }));
+}
+export function retryTargetsForRun(run) {
+    const targets = new Map();
+    const add = (target) => {
+        if (target.value.length > 0 && !targets.has(target.value))
+            targets.set(target.value, target);
+    };
+    for (const frame of run?.dynamic?.frames ?? []) {
+        if (frame.status !== "failed")
+            continue;
+        if (frame.frameKind !== undefined && frame.frameKind !== "node" && frame.frameKind !== "loop")
+            continue;
+        add({
+            value: frame.frameKey,
+            label: frame.nodeId ? `frame: ${frame.nodeId}` : `frame: ${frame.frameKey}`,
+            kind: "frame",
+        });
+    }
+    for (const instance of run?.dynamic?.nodeInstances ?? []) {
+        if (instance.status !== "failed")
+            continue;
+        add({
+            value: instance.nodeKey,
+            label: `node: ${instance.nodeId}`,
+            kind: "node",
+        });
+    }
+    for (const member of run?.dynamic?.groupMembers ?? []) {
+        if (member.status !== "failed")
+            continue;
+        add({
+            value: member.memberKey,
+            label: `member: ${member.branchId ?? member.itemKey ?? member.memberKey}`,
+            kind: "member",
+        });
+    }
+    return [...targets.values()].sort((left, right) => left.value.localeCompare(right.value));
+}
+export function controlStateForRun(status, disabled, retryTargets = []) {
+    if (status === "failed") {
+        return [{
+                id: "retry",
+                label: "Retry",
+                tone: "retry",
+                disabled: disabled || retryTargets.length === 0,
+                title: retryTargets.length === 0 ? "No failed retry target found. Use CLI for run-level retry." : "Retry failed target",
+            }];
+    }
+    if (status === "paused") {
+        return [
+            controlSpec("resume", disabled),
+            controlSpec("cancel", disabled),
+        ];
+    }
+    if (status === "pending" || status === "running" || status === "awaiting") {
+        return [
+            controlSpec("pause", disabled),
+            controlSpec("cancel", disabled),
+        ];
+    }
+    return [
+        controlSpec("pause", true),
+        controlSpec("cancel", true),
+    ];
+}
+export function retryCommandTarget(retryTargets, selectedRetryTarget) {
+    if (retryTargets.length === 1)
+        return retryTargets[0].value;
+    return retryTargets.some(target => target.value === selectedRetryTarget) ? selectedRetryTarget : undefined;
+}
+export function commandForControl(controlId, retryTarget, selectedNodeId) {
+    if (controlId === "retry")
+        return retryTarget ? { type: "retry", target: retryTarget } : undefined;
+    if (controlId === "cancel")
+        return selectedNodeId ? { type: "cancel", target: selectedNodeId } : { type: "cancel" };
+    return { type: controlId };
+}
+export function confirmationForControl(controlId, targetLabel) {
+    if (controlId === "cancel") {
+        return {
+            title: targetLabel ? "Cancel selected target?" : "Cancel this run?",
+            detail: targetLabel ? `Cancel target ${targetLabel}. This cannot be undone.` : "Cancel the current run. This cannot be undone.",
+            confirmLabel: "Cancel",
+            tone: "cancel",
+        };
+    }
+    if (controlId === "retry") {
+        return {
+            title: "Retry failed target?",
+            detail: targetLabel ? `Retry ${targetLabel}. The selected failed target will be re-driven.` : "Retry the selected failed target.",
+            confirmLabel: "Retry",
+            tone: "retry",
+        };
+    }
+    if (controlId === "resume") {
+        return {
+            title: "Resume this run?",
+            detail: "Resume the paused run and continue eligible work.",
+            confirmLabel: "Resume",
+            tone: "resume",
+        };
+    }
+    return {
+        title: "Pause this run?",
+        detail: "Pause the run and stop active work as soon as the runtime can safely do so.",
+        confirmLabel: "Pause",
+        tone: "pause",
+    };
+}
+function controlSpec(id, disabled) {
+    return {
+        id,
+        label: id[0].toUpperCase() + id.slice(1),
+        tone: id,
+        disabled,
+        title: id[0].toUpperCase() + id.slice(1),
+    };
+}
+function controlIcon(id) {
+    if (id === "pause")
+        return _jsx(Pause, { size: 16 });
+    if (id === "resume")
+        return _jsx(Play, { size: 16 });
+    if (id === "retry")
+        return _jsx(RotateCcw, { size: 16 });
+    return _jsx(Square, { size: 16 });
+}
+function ConfirmDialog({ confirmation, restoreFocus, onCancel, onConfirm, }) {
+    return (_jsx(Dialog, { open: true, onOpenChange: open => {
+            if (!open)
+                onCancel();
+        }, children: _jsxs(DialogContent, { className: `confirm-dialog ${confirmation.tone}`, onCloseAutoFocus: event => {
+                event.preventDefault();
+                restoreFocus?.focus();
+            }, children: [_jsx(DialogTitle, { children: confirmation.title }), _jsx(DialogDescription, { children: confirmation.detail }), _jsxs("div", { className: "confirm-actions", children: [_jsx(Button, { type: "button", variant: "confirmSecondary", onClick: onCancel, children: "Back" }), _jsx(Button, { type: "button", variant: "confirmPrimary", tone: confirmation.tone, onClick: onConfirm, children: confirmation.confirmLabel })] })] }) }));
+}
+function Inspector({ runId, target, context, displayStatus, inspection, loading, }) {
+    const [activeTab, setActiveTab] = useState("overview");
+    useEffect(() => {
+        setActiveTab("overview");
+    }, [target]);
+    useEffect(() => {
+        const hasArtifacts = (inspection?.summary.artifacts.length ?? 0) > 0;
+        const hasExecution = inspection?.summary.staticKind === "agent";
+        if ((activeTab === "artifacts" && !hasArtifacts) || (activeTab === "execution" && !hasExecution)) {
+            setActiveTab("overview");
+        }
+    }, [activeTab, inspection?.summary.artifacts.length, inspection?.summary.staticKind]);
+    if (loading)
+        return _jsx(StateBlock, { tone: "loading", title: "Loading node details" });
+    if (!inspection)
+        return _jsx(StateBlock, { tone: "empty", title: "Select a graph node", detail: "Node runtime details appear here after selection." });
+    const summary = inspection.summary;
+    const runtimeStatus = displayStatus ?? normalizeRuntimeStatus(summary.nodeStatus ?? summary.runStatus);
+    const hasArtifacts = summary.artifacts.length > 0;
+    const hasExecution = summary.staticKind === "agent";
+    return (_jsxs("div", { className: "inspector-stack", children: [_jsxs("div", { className: "inspector-runtime-head", children: [_jsx(StatusPill, { status: runtimeStatus }), _jsxs("div", { children: [summary.runStartedAt && (_jsxs(_Fragment, { children: [_jsx("span", { children: "Start" }), _jsx("strong", { children: formatDate(summary.runStartedAt) })] })), summary.runDurationMs !== undefined && (_jsxs(_Fragment, { children: [_jsx("span", { children: "Duration" }), _jsx("strong", { children: formatDuration(summary.runDurationMs) })] }))] })] }), _jsxs(Tabs, { value: activeTab, onValueChange: value => setActiveTab(value), children: [_jsxs(TabsList, { className: "inspector-tabs", "aria-label": "Inspector sections", children: [_jsx(InspectorTab, { id: "overview", children: "Overview" }), hasArtifacts && _jsxs(InspectorTab, { id: "artifacts", children: ["Artifacts ", _jsx(Badge, { variant: "tabCount", children: summary.artifacts.length })] }), hasExecution && _jsx(InspectorTab, { id: "execution", children: "Execution" })] }), _jsx(InspectorTabPanel, { id: "overview", children: _jsxs(_Fragment, { children: [_jsxs(InspectorSection, { title: "Identity", children: [summary.nodeId && _jsx(KeyValue, { label: "Node ID", value: summary.nodeId }), summary.nodeKey && _jsx(KeyValue, { label: "Node Key", value: summary.nodeKey }), summary.frameKey && _jsx(KeyValue, { label: "Frame Key", value: summary.frameKey }), summary.staticKind && _jsx(KeyValue, { label: "Kind", value: summary.staticKind }), summary.staticOrder !== undefined && _jsx(KeyValue, { label: "Static order", value: String(summary.staticOrder) }), _jsx(KeyValue, { label: "Runtime", value: runtimeStatus }), summary.latestAttempt && _jsx(KeyValue, { label: "Latest attempt", value: `${summary.latestAttempt.attemptNo} · ${summary.latestAttempt.status}` })] }), summary.input && (_jsx(JsonSection, { title: summary.input.kind === "runtime" ? "Input" : "Authored Input", value: summary.input.value })), summary.prompt && (_jsx(InspectorSection, { title: "Prompt", children: _jsx(PromptContent, { runId: runId, prompt: summary.prompt }) })), summary.output !== undefined && (_jsx(JsonSection, { title: "Output", value: summary.output })), summary.error !== undefined && (_jsx(JsonSection, { title: "Diagnostics", value: summary.error }))] }) }), hasArtifacts && (_jsx(InspectorTabPanel, { id: "artifacts", children: _jsx(ArtifactList, { runId: runId, artifacts: summary.artifacts }) })), hasExecution && (_jsx(InspectorTabPanel, { id: "execution", children: runId && target && _jsx(AgentExecutionTab, { runId: runId, target: target, context: context, active: activeTab === "execution" }) }))] })] }));
+}
+function InspectorTab({ id, children }) {
+    return (_jsx(TabsTrigger, { value: id, id: `inspector-tab-${id}`, className: "inspector-tab", "aria-controls": `inspector-panel-${id}`, children: children }));
+}
+function InspectorTabPanel({ id, children }) {
+    return (_jsx(TabsContent, { value: id, id: `inspector-panel-${id}`, className: "inspector-tab-panel", "aria-labelledby": `inspector-tab-${id}`, children: children }));
+}
+function InspectorSection({ title, action, children }) {
+    return (_jsxs("section", { className: "inspector-section", children: [_jsxs("div", { className: "inspector-section-head", children: [_jsx("h3", { children: title }), action] }), _jsx("div", { className: "inspector-section-body", children: children })] }));
+}
+function JsonSection({ title, value }) {
+    return (_jsx(InspectorSection, { title: title, action: _jsx(JsonCopyButton, { value: value }), children: _jsx(JsonBlock, { value: value }) }));
+}
+function JsonCopyButton({ value }) {
+    const [state, setState] = useState("idle");
+    return (_jsxs(Button, { type: "button", variant: "ghost", className: `json-copy-button ${state}`, onClick: async () => {
+            try {
+                await navigator.clipboard.writeText(JSON.stringify(value, null, 2));
+                setState("copied");
+                window.setTimeout(() => setState("idle"), 1_400);
+            }
+            catch {
+                setState("failed");
+                window.setTimeout(() => setState("idle"), 1_800);
+            }
+        }, children: [_jsx(Copy, { size: 13 }), state === "copied" ? "Copied" : state === "failed" ? "Copy failed" : "Copy JSON"] }));
+}
+function PromptContent({ runId, prompt }) {
+    if (prompt.text)
+        return _jsx(MarkdownBlock, { value: prompt.text });
+    if (!runId || !prompt.artifactId)
+        return _jsx(StateBlock, { tone: "empty", title: "Prompt unavailable", detail: "No prompt artifact or inline prompt was recorded for this scope." });
+    return _jsx(ArtifactPreviewBlock, { runId: runId, artifactId: prompt.artifactId, ...(prompt.mediaType ? { mediaType: prompt.mediaType } : {}) });
+}
+function ArtifactList({ runId, artifacts }) {
+    const [selectedArtifactId, setSelectedArtifactId] = useState();
+    const selected = artifacts.find(artifact => artifact.id === selectedArtifactId);
+    return (_jsxs("div", { className: "artifact-stack", children: [_jsx("div", { className: "artifact-list", children: artifacts.map(artifact => (_jsxs(Button, { variant: "ghost", className: `artifact-row ${artifact.id === selectedArtifactId ? "selected" : ""}`, title: artifact.relativePath, "aria-label": `Artifact ${artifact.relativePath}`, onClick: () => setSelectedArtifactId(current => current === artifact.id ? undefined : artifact.id), children: [_jsx("span", { className: "artifact-title mono", title: artifact.relativePath, children: artifact.relativePath }), _jsx("span", { children: artifact.mediaType ?? "unknown" }), _jsx("span", { children: formatSize(artifact.size) })] }, artifact.id))) }), runId && selected && _jsx(ArtifactPreviewBlock, { runId: runId, artifactId: selected.id, ...(selected.mediaType ? { mediaType: selected.mediaType } : {}) })] }));
+}
+function ArtifactPreviewBlock({ runId, artifactId, mediaType }) {
+    const preview = useQuery({
+        queryKey: ["artifact-preview", runId, artifactId],
+        queryFn: () => getArtifactPreview(runId, artifactId),
+    });
+    if (preview.isLoading)
+        return _jsx(StateBlock, { tone: "loading", title: "Loading artifact" });
+    if (preview.error)
+        return _jsx(StateBlock, { tone: "error", title: "Artifact preview failed", detail: preview.error instanceof Error ? preview.error.message : String(preview.error) });
+    const loaded = preview.data;
+    if (!loaded)
+        return null;
+    const effectiveMediaType = mediaType ?? loaded.mediaType;
+    if (isJsonMedia(effectiveMediaType)) {
+        const value = tryParseJsonPreview(loaded.text);
+        return value.ok ? (_jsx("div", { className: "json-standalone", children: _jsx(JsonBlock, { value: value.value }) })) : (_jsx(TextArtifactPreview, { value: loaded.text, label: "Raw JSON text" }));
+    }
+    if (isMarkdownMedia(effectiveMediaType))
+        return _jsx(MarkdownBlock, { value: loaded.text });
+    if (isTextMedia(effectiveMediaType))
+        return _jsx(TextArtifactPreview, { value: loaded.text });
+    return _jsx(StateBlock, { tone: "empty", title: "Preview unavailable", detail: `Preview is not available for ${effectiveMediaType}.` });
+}
+function AgentExecutionTab({ runId, target, context, active }) {
+    const execution = useQuery({
+        queryKey: ["node-execution", runId, target, context],
+        queryFn: () => getNodeExecutionInspection(runId, target, context),
+        enabled: active,
+        refetchInterval: active ? 2_500 : false,
+    });
+    if (execution.isLoading)
+        return _jsx(StateBlock, { tone: "loading", title: "Loading execution telemetry" });
+    if (execution.error)
+        return _jsx(StateBlock, { tone: "error", title: "Execution telemetry failed", detail: execution.error instanceof Error ? execution.error.message : String(execution.error) });
+    if (!execution.data)
+        return _jsx(StateBlock, { tone: "empty", title: "No execution telemetry", detail: "No agent execution metadata exists for the selected scope." });
+    const data = execution.data;
+    if (!data.available)
+        return _jsx(StateBlock, { tone: "empty", title: "No execution telemetry", detail: data.reason ?? "No agent execution metadata exists for the selected scope." });
+    return (_jsxs("div", { className: "inspector-stack", children: [_jsxs(InspectorSection, { title: "Summary", children: [data.summary.status && _jsx(KeyValue, { label: "Status", value: data.summary.status }), data.lastActiveAt && _jsx(KeyValue, { label: "Last active", value: formatRelativeAge(data.lastActiveAt) }), data.summary.sessionName && _jsx(KeyValue, { label: "Session", value: data.summary.sessionName }), data.summary.turnCount !== undefined && _jsx(KeyValue, { label: "Turns", value: String(data.summary.turnCount) }), data.summary.message && _jsx(KeyValue, { label: "Message", value: data.summary.message })] }), _jsx(InspectorSection, { title: "Context Window", children: data.contextWindow ? _jsx(ContextWindowMeter, { context: data.contextWindow }) : _jsx(StateBlock, { tone: "empty", title: "No context window data", detail: "The selected agent attempt did not report context usage." }) }), _jsx(InspectorSection, { title: "Token Usage", children: data.tokenUsage ? _jsx(TokenUsageMetrics, { usage: data.tokenUsage }) : _jsx(StateBlock, { tone: "empty", title: "No token usage", detail: "The selected agent attempt did not report token usage." }) }), _jsx(InspectorSection, { title: "Output Stream", children: data.output ? _jsx(TextArtifactPreview, { value: data.output.tail, label: progressOutputLabel(data.output) }) : _jsx(StateBlock, { tone: "empty", title: "No streamed output", detail: "The selected agent attempt did not report streamed output." }) }), _jsx(InspectorSection, { title: "Last Tool Calls", children: data.lastToolCalls.length > 0 ? _jsx(ToolCallList, { calls: data.lastToolCalls, total: data.toolCallCount }) : _jsx(StateBlock, { tone: "empty", title: "No tool calls", detail: "No tool calls were recorded for the selected agent attempt." }) })] }));
+}
+function ContextWindowMeter({ context }) {
+    const percent = Math.max(0, Math.min(context.percent ?? 0, 100));
+    return (_jsxs("div", { className: "execution-card", children: [_jsxs("div", { className: "execution-meter-head", children: [_jsxs("strong", { children: [context.used ?? "?", " / ", context.size ?? "?"] }), context.percent !== undefined && _jsxs("span", { children: [context.percent, "%"] })] }), _jsx("div", { className: "execution-meter", "aria-label": `Context window ${context.percent ?? 0}% used`, children: _jsx("span", { style: { width: `${percent}%` } }) }), context.updatedAt && _jsxs("small", { children: ["Updated ", formatDate(context.updatedAt)] })] }));
+}
+function TokenUsageMetrics({ usage }) {
+    return (_jsxs("div", { className: "execution-metrics", children: [_jsx(Metric, { label: "Input", value: usage.inputTokens }), _jsx(Metric, { label: "Output", value: usage.outputTokens }), _jsx(Metric, { label: "Total", value: usage.totalTokens }), usage.source && _jsx(Metric, { label: "Source", value: usage.source })] }));
+}
+function progressOutputLabel(output) {
+    const retained = new TextEncoder().encode(output.tail).length;
+    return output.truncated ? `Last ${retained} of ${output.totalBytes} bytes` : `${output.totalBytes} bytes`;
+}
+function Metric({ label, value }) {
+    return (_jsxs("div", { className: "execution-metric", children: [_jsx("span", { children: label }), _jsx("strong", { children: value ?? "n/a" })] }));
+}
+function ToolCallList({ calls, total }) {
+    return (_jsxs("div", { className: "tool-call-stack", children: [total !== undefined && _jsxs("span", { className: "tool-call-summary", children: ["Last ", calls.length, " of ", total] }), calls.map((call, index) => (_jsxs("div", { className: "tool-call-row", children: [_jsxs("div", { className: "tool-call-head", children: [_jsxs("div", { children: [_jsx("strong", { children: call.toolName ?? "Tool call" }), _jsxs("span", { children: ["turn ", call.turn, call.durationMs !== undefined ? ` · ${formatDuration(call.durationMs)}` : ""] })] }), call.status && _jsx(ToolCallStatus, { status: call.status })] }), call.inputPreview && _jsx("p", { children: call.inputPreview }), call.outputPreview && _jsx("p", { children: call.outputPreview })] }, `${call.turn}-${call.toolCallId ?? index}`)))] }));
+}
+function ToolCallStatus({ status }) {
+    const display = normalizeRuntimeStatus(status);
+    return (_jsxs("span", { className: `tool-call-status ${display}`, children: [runStatusIcon(display), _jsx("span", { children: runtimeStatusLabel(display) })] }));
+}
+function JsonBlock({ value }) {
+    return (_jsx("div", { className: "json-viewer", children: _jsx(JsonView, { data: jsonViewData(value), shouldExpandNode: allExpanded, style: defaultStyles }) }));
+}
+function MarkdownBlock({ value }) {
+    return (_jsx("div", { className: "markdown-viewer", children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: value }) }));
+}
+function TextArtifactPreview({ value, label }) {
+    return (_jsxs("div", { className: "text-artifact-shell", children: [label && _jsx("div", { className: "artifact-preview-label", children: label }), _jsx("pre", { className: "text-artifact-preview", children: value })] }));
+}
+function SignalBox({ wait, onSubmit, }) {
+    const [payload, setPayload] = useState("{}");
+    const [payloadError, setPayloadError] = useState();
+    return (_jsxs("form", { className: "signal-box", onSubmit: e => {
+            e.preventDefault();
+            try {
+                onSubmit(JSON.parse(payload));
+                setPayloadError(undefined);
+            }
+            catch {
+                setPayloadError("Signal payload must be valid JSON.");
+            }
+        }, children: [_jsx("strong", { children: "Awaiting Signal" }), wait.renderedPrompt && _jsx("p", { children: wait.renderedPrompt }), _jsx(Textarea, { value: payload, "aria-label": "Signal payload JSON", "aria-invalid": payloadError ? true : undefined, "aria-describedby": payloadError ? "signal-payload-error" : undefined, onChange: e => {
+                    setPayload(e.target.value);
+                    if (payloadError)
+                        setPayloadError(undefined);
+                } }), payloadError && _jsx("p", { id: "signal-payload-error", className: "signal-error", role: "alert", children: payloadError }), _jsx(Button, { className: "primary-button", type: "submit", children: "Submit Signal" })] }));
+}
+function StatusInfoPopover({ health, config, }) {
+    const daemon = health?.checks.find(check => check.area === "daemon");
+    const checks = health?.checks.filter(check => check.area !== "daemon" && check.status !== "ok") ?? [];
+    const status = daemon?.status ?? (health ? "unknown" : "checking");
+    return (_jsxs(PopoverContent, { className: "status-info-popover", role: "dialog", "aria-labelledby": "status-info-title", children: [_jsxs("div", { className: "dialog-head", children: [_jsxs("div", { className: "status-info-title", children: [_jsx("span", { className: `sidebar-status-icon ${status}`, "aria-hidden": "true", children: sidebarStatusIcon(status) }), _jsx("h2", { id: "status-info-title", children: "Runtime status" })] }), _jsx(PopoverClose, { asChild: true, children: _jsx(Button, { variant: "ghost", className: "close-button", "aria-label": "Close", children: _jsx(XCircle, { size: 16 }) }) })] }), _jsxs("div", { className: "status-info-rows", children: [_jsx(KeyValue, { label: "Daemon", value: daemon?.message ? `${daemon.status}: ${daemon.message}` : status }), _jsx(KeyValue, { label: "Access", value: config?.access === "token" ? "Token" : "Open" }), _jsx(KeyValue, { label: "Workspace", value: config?.cwd ?? "Resolving" }), _jsx("div", { className: "status-health-summary", children: health ? (checks.length === 0 ? (_jsx("span", { children: "Health checks OK" })) : (checks.map(check => (_jsxs("span", { children: [check.status === "warn" ? _jsx(CircleAlert, { size: 14 }) : _jsx(XCircle, { size: 14 }), _jsx("strong", { children: check.area }), check.message] }, `${check.area}-${check.message}`))))) : (_jsx("span", { children: "Checking runtime health" })) })] })] }));
+}
+const SidebarStatus = React.forwardRef(({ health, config, ...props }, ref) => {
+    const daemon = health?.checks.find(check => check.area === "daemon");
+    const status = daemon?.status ?? (health ? "unknown" : "checking");
+    return (_jsxs(Button, { ref: ref, type: "button", variant: "ghost", className: "sidebar-status", title: "Runtime status", ...props, children: [_jsx("span", { className: `sidebar-status-icon ${status}`, "aria-hidden": "true", children: sidebarStatusIcon(status) }), _jsxs("span", { className: "sidebar-status-copy", children: [_jsx("span", { children: "Runtime status" }), _jsxs("small", { children: [status, " \u00B7 ", config?.access === "token" ? "token" : "open"] })] })] }));
+});
+SidebarStatus.displayName = "SidebarStatus";
+function sidebarStatusIcon(status) {
+    if (status === "ok" || status === "running")
+        return _jsx(CheckCircle2, { size: 14, strokeWidth: 2 });
+    if (status === "warn")
+        return _jsx(CircleAlert, { size: 14, strokeWidth: 2 });
+    if (status === "fail" || status === "error")
+        return _jsx(XCircle, { size: 14, strokeWidth: 2 });
+    if (status === "checking")
+        return _jsx(LoaderCircle, { size: 14, strokeWidth: 2 });
+    return _jsx(Clock, { size: 14, strokeWidth: 2 });
+}
+function NavButton({ icon, label, active, onClick }) {
+    return (_jsxs(Button, { variant: "ghost", className: `nav-button ${active ? "active" : ""}`, "aria-label": label, "aria-current": active ? "page" : undefined, onClick: onClick, children: [icon, _jsx("span", { children: label })] }));
+}
+function IconButton({ icon, label, title, disabled, tone, onClick, }) {
+    return (_jsxs(Button, { variant: "icon", tone: tone, disabled: disabled, onClick: onClick, title: title, children: [icon, _jsx("span", { children: label })] }));
+}
+function PageHeader({ title, detail }) {
+    return (_jsxs("header", { className: "page-header", children: [_jsx("h2", { children: title }), _jsx("span", { className: "page-header-detail", children: detail })] }));
+}
+function StatusPill({ status }) {
+    return _jsx(Badge, { variant: "status", className: status, children: status });
+}
+function RunStatusIndicator({ status }) {
+    const display = normalizeRuntimeStatus(status);
+    const active = display === "running" || display === "awaiting";
+    return (_jsxs("span", { className: `run-status-indicator ${display} ${active ? "live" : ""}`, "aria-label": `Run status ${runtimeStatusLabel(display)}`, children: [_jsx("span", { className: "run-status-icon", children: runStatusIcon(display) }), _jsx("span", { className: "run-status-label", children: runtimeStatusLabel(display) })] }));
+}
+function isTerminalRunStatus(status) {
+    const display = normalizeRuntimeStatus(status);
+    return display === "completed" || display === "failed" || display === "canceled";
+}
+function runStatusIcon(status) {
+    if (status === "running")
+        return _jsx(LoaderCircle, { size: 13, strokeWidth: 2 });
+    if (status === "awaiting")
+        return _jsx(Radio, { size: 13, strokeWidth: 2 });
+    if (status === "paused")
+        return _jsx(Pause, { size: 13, strokeWidth: 2 });
+    if (status === "completed")
+        return _jsx(CheckCircle2, { size: 13, strokeWidth: 2 });
+    if (status === "failed")
+        return _jsx(XCircle, { size: 13, strokeWidth: 2 });
+    if (status === "canceled")
+        return _jsx(Ban, { size: 13, strokeWidth: 2 });
+    return _jsx(Clock, { size: 13, strokeWidth: 2 });
+}
+function KeyValue({ label, value }) {
+    return (_jsxs("div", { className: "key-value", tabIndex: 0, title: `${label}: ${value}`, "aria-label": `${label}: ${value}`, children: [_jsx("span", { children: label }), _jsx("strong", { children: value })] }));
+}
+function EmptyState({ title, detail }) {
+    return (_jsxs("div", { className: "empty-state", children: [_jsx(Boxes, { size: 22 }), _jsx("h2", { children: title }), _jsx("p", { children: detail })] }));
+}
+function StateBlock({ tone, title, detail }) {
+    const icon = tone === "loading"
+        ? _jsx(LoaderCircle, { size: 16 })
+        : tone === "error"
+            ? _jsx(CircleAlert, { size: 16 })
+            : _jsx(Boxes, { size: 16 });
+    return (_jsxs(Alert, { className: `state-block ${tone}`, role: tone === "error" ? "alert" : tone === "loading" ? "status" : undefined, "aria-busy": tone === "loading" ? true : undefined, children: [_jsx("span", { className: "state-block-icon", children: icon }), _jsxs("div", { children: [_jsx("strong", { children: title }), detail && _jsx("p", { children: detail }), tone === "loading" && (_jsxs("div", { className: "state-skeleton", "aria-hidden": "true", children: [_jsx("span", { className: "state-skeleton-line" }), _jsx("span", { className: "state-skeleton-line short" })] }))] })] }));
+}
+function formatDate(value) {
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime()))
+        return value;
+    const pad = (part) => String(part).padStart(2, "0");
+    return `${date.getFullYear()}/${pad(date.getMonth() + 1)}/${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
+function formatRelativeAge(value) {
+    const timestamp = Date.parse(value);
+    if (!Number.isFinite(timestamp))
+        return value;
+    const ageMs = Math.max(0, Date.now() - timestamp);
+    return ageMs < 1_000 ? "<1s ago" : `${formatDuration(ageMs)} ago`;
+}
+function durationBetween(start, end) {
+    return Math.max(0, Date.parse(end) - Date.parse(start));
+}
+function formatDuration(ms) {
+    if (ms < 1000)
+        return `${ms}ms`;
+    const seconds = Math.round(ms / 1000);
+    if (seconds < 60)
+        return `${seconds}s`;
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = seconds % 60;
+    return remainingSeconds === 0 ? `${minutes}m` : `${minutes}m ${remainingSeconds}s`;
+}
+function formatSize(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function isJsonMedia(mediaType) {
+    return mediaType.includes("json") || mediaType.includes("ndjson");
+}
+function isMarkdownMedia(mediaType) {
+    return mediaType.includes("markdown") || mediaType.includes("md");
+}
+function isTextMedia(mediaType) {
+    return mediaType.startsWith("text/") || mediaType.includes("xml") || mediaType.includes("yaml");
+}
+function tryParseJsonPreview(text) {
+    try {
+        return { ok: true, value: JSON.parse(text) };
+    }
+    catch {
+        const lines = text.split("\n").filter(Boolean);
+        if (lines.length === 0)
+            return { ok: false };
+        const values = [];
+        for (const line of lines) {
+            try {
+                values.push(JSON.parse(line));
+            }
+            catch {
+                return { ok: false };
+            }
+        }
+        return { ok: true, value: values };
+    }
+}
+function jsonViewData(value) {
+    return value !== null && typeof value === "object" ? value : { value };
+}
+//# sourceMappingURL=App.js.map