@n-dx/core 0.1.0

package/packages/web/dist/viewer/components/active-tasks-panel.js

@@ -0,0 +1,183 @@
+/**
+ * Active Tasks Panel — shows currently executing tasks prominently at the
+ * top of the Hench UI.
+ *
+ * Combines data from two sources:
+ * 1. Hench runs with status "running" (from /api/hench/runs)
+ * 2. Active task executions triggered via the dashboard (from /api/hench/execute/status)
+ *
+ * Updates in real-time via WebSocket ("hench:task-execution-progress" events)
+ * and periodic polling as a fallback.
+ *
+ * Displays task title, start time, elapsed duration (live-ticking), and
+ * health status (stale detection).
+ */
+import { h } from "preact";
+import { useState, useEffect, useCallback, useRef } from "preact/hooks";
+import { RexTaskLink } from "./rex-task-link.js";
+import { ElapsedTime } from "./elapsed-time.js";
+// ── Helpers ──────────────────────────────────────────────────────────
+const STALE_THRESHOLD_MS = 5 * 60 * 1000;
+function isStale(run) {
+    if (!run.lastActivityAt)
+        return true; // Legacy run
+    return Date.now() - new Date(run.lastActivityAt).getTime() > STALE_THRESHOLD_MS;
+}
+function formatElapsed(startedAt) {
+    const ms = Date.now() - new Date(startedAt).getTime();
+    if (ms < 0)
+        return "0s";
+    const totalSecs = Math.floor(ms / 1000);
+    if (totalSecs < 60)
+        return `${totalSecs}s`;
+    const mins = Math.floor(totalSecs / 60);
+    const secs = totalSecs % 60;
+    if (mins < 60)
+        return `${mins}m ${secs}s`;
+    const hours = Math.floor(mins / 60);
+    const remainMins = mins % 60;
+    return `${hours}h ${remainMins}m`;
+}
+function formatStartTime(iso) {
+    return new Date(iso).toLocaleTimeString(undefined, {
+        hour: "numeric",
+        minute: "2-digit",
+        second: "2-digit",
+    });
+}
+// ── Active task card ─────────────────────────────────────────────────
+function ActiveTaskCard({ run, navigateTo }) {
+    const stale = isStale(run);
+    return h("div", {
+        class: `active-task-card${stale ? " active-task-card-stale" : ""}`,
+    }, 
+    // Pulsing status indicator
+    h("div", { class: "active-task-pulse-wrapper", "aria-hidden": "true" }, h("span", { class: `active-task-pulse${stale ? " active-task-pulse-stale" : ""}` })), 
+    // Main content
+    h("div", { class: "active-task-content" }, 
+    // Title row
+    h("div", { class: "active-task-title-row" }, navigateTo && run.taskId
+        ? h(RexTaskLink, {
+            task: {
+                id: run.taskId,
+                title: run.taskTitle,
+                status: run.taskStatus ?? "in_progress",
+            },
+            navigateTo,
+            compact: true,
+            showStatus: false,
+            class: "active-task-link",
+        })
+        : h("span", { class: "active-task-title" }, run.taskTitle), stale
+        ? h("span", { class: "active-task-stale-badge" }, "Possibly stuck")
+        : null), 
+    // Metadata row — elapsed time is isolated in its own component to
+    // prevent the entire card from re-rendering on every 1-second tick.
+    h("div", { class: "active-task-meta" }, h("span", { class: "active-task-elapsed", title: "Elapsed time" }, h("span", { class: "active-task-meta-icon", "aria-hidden": "true" }, "⏱"), h(ElapsedTime, { startedAt: run.startedAt, formatter: formatElapsed })), h("span", { class: "active-task-started", title: `Started at ${formatStartTime(run.startedAt)}` }, h("span", { class: "active-task-meta-icon", "aria-hidden": "true" }, "▶"), formatStartTime(run.startedAt)), run.turns > 0
+        ? h("span", { class: "active-task-turns", title: `${run.turns} turns completed` }, h("span", { class: "active-task-meta-icon", "aria-hidden": "true" }, "↻"), `${run.turns} turns`)
+        : null, h("span", { class: `active-task-model active-task-model-${run.model}` }, run.model))));
+}
+// ── Execution state card (for dashboard-triggered executions) ────────
+function ExecutionCard({ exec }) {
+    const isStarting = exec.status === "starting";
+    return h("div", {
+        class: `active-task-card${isStarting ? " active-task-card-starting" : ""}`,
+    }, h("div", { class: "active-task-pulse-wrapper", "aria-hidden": "true" }, h("span", { class: `active-task-pulse${isStarting ? " active-task-pulse-starting" : ""}` })), h("div", { class: "active-task-content" }, h("div", { class: "active-task-title-row" }, h("span", { class: "active-task-title" }, exec.taskTitle), isStarting
+        ? h("span", { class: "active-task-starting-badge" }, "Starting…")
+        : null), h("div", { class: "active-task-meta" }, h("span", { class: "active-task-elapsed", title: "Elapsed time" }, h("span", { class: "active-task-meta-icon", "aria-hidden": "true" }, "⏱"), h(ElapsedTime, { startedAt: exec.startedAt, formatter: formatElapsed })), h("span", { class: "active-task-started", title: `Started at ${formatStartTime(exec.startedAt)}` }, h("span", { class: "active-task-meta-icon", "aria-hidden": "true" }, "▶"), formatStartTime(exec.startedAt)))));
+}
+// ── Main panel ───────────────────────────────────────────────────────
+export function ActiveTasksPanel({ runs, navigateTo }) {
+    const [executions, setExecutions] = useState([]);
+    const wsRef = useRef(null);
+    // Fetch active dashboard-triggered executions
+    const fetchExecutions = useCallback(async () => {
+        try {
+            const res = await fetch("/api/hench/execute/status");
+            if (res.ok) {
+                const data = await res.json();
+                const active = (data.executions ?? []).filter((e) => e.status === "running" || e.status === "starting");
+                setExecutions(active);
+            }
+        }
+        catch {
+            // Silently fail
+        }
+    }, []);
+    // WebSocket + polling
+    useEffect(() => {
+        let mounted = true;
+        fetchExecutions();
+        // Connect to WebSocket for real-time updates
+        const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+        const wsUrl = `${protocol}//${window.location.host}`;
+        let ws = null;
+        try {
+            ws = new WebSocket(wsUrl);
+            wsRef.current = ws;
+            ws.onmessage = (event) => {
+                if (!mounted)
+                    return;
+                try {
+                    const msg = JSON.parse(event.data);
+                    if (msg.type === "hench:task-execution-progress" && msg.state) {
+                        const state = msg.state;
+                        setExecutions((prev) => {
+                            // If completed/failed, remove from the list
+                            if (state.status === "completed" || state.status === "failed") {
+                                return prev.filter((e) => e.taskId !== state.taskId);
+                            }
+                            // Update or add
+                            const idx = prev.findIndex((e) => e.taskId === state.taskId);
+                            if (idx >= 0) {
+                                const updated = [...prev];
+                                updated[idx] = state;
+                                return updated;
+                            }
+                            return [...prev, state];
+                        });
+                    }
+                }
+                catch {
+                    // Ignore malformed messages
+                }
+            };
+            ws.onclose = () => { wsRef.current = null; };
+        }
+        catch {
+            // WebSocket not available
+        }
+        // Poll as fallback every 5 seconds
+        const interval = setInterval(fetchExecutions, 5000);
+        return () => {
+            mounted = false;
+            clearInterval(interval);
+            // Close WS using local reference (wsRef.current may already be null from onclose)
+            if (ws) {
+                try {
+                    ws.close();
+                }
+                catch { /* ignore */ }
+            }
+            wsRef.current = null;
+        };
+    }, [fetchExecutions]);
+    // Merge: running hench runs + dashboard-triggered executions.
+    // Deduplicate by taskId (hench runs take priority since they have more data).
+    const runTaskIds = new Set(runs.map((r) => r.taskId));
+    const uniqueExecutions = executions.filter((e) => !runTaskIds.has(e.taskId));
+    const totalActive = runs.length + uniqueExecutions.length;
+    // Nothing active → don't render
+    if (totalActive === 0)
+        return null;
+    return h("div", {
+        class: "active-tasks-panel",
+        role: "region",
+        "aria-label": `${totalActive} active task${totalActive === 1 ? "" : "s"}`,
+    }, h("div", { class: "active-tasks-header" }, h("div", { class: "active-tasks-header-left" }, h("span", { class: "active-tasks-icon", "aria-hidden": "true" }, "◐"), h("h3", { class: "active-tasks-title" }, `Active Task${totalActive === 1 ? "" : "s"}`), h("span", { class: "active-tasks-count" }, String(totalActive)))), h("div", { class: "active-tasks-list" }, 
+    // Hench runs first
+    ...runs.map((run) => h(ActiveTaskCard, { key: run.id, run, navigateTo })), 
+    // Then dashboard-triggered executions that aren't already in runs
+    ...uniqueExecutions.map((exec) => h(ExecutionCard, { key: exec.runId, exec }))));
+}
+//# sourceMappingURL=active-tasks-panel.js.map

package/packages/web/dist/viewer/components/active-tasks-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"active-tasks-panel.js","sourceRoot":"","sources":["../../../src/viewer/components/active-tasks-panel.ts"],"names":[],"mappings":"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"}

package/packages/web/dist/viewer/components/breadcrumb.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Breadcrumb navigation component.
+ *
+ * Displays a "project > tool > view" hierarchy in the page header area.
+ * Fetches project metadata from the `/api/project` endpoint and combines
+ * it with the current view to build a contextual breadcrumb trail.
+ *
+ * Also manages `document.title` to reflect the current project and view,
+ * formatted as "ProjectName | n-dx" (or "ViewLabel — ProductLabel | ProjectName | n-dx").
+ */
+import type { ViewId, NavigateTo } from "../types.js";
+export interface BreadcrumbProps {
+    view: ViewId;
+    navigateTo: NavigateTo;
+    /** When set, restricts navigation to a single product scope. */
+    scope?: string | null;
+}
+export declare function Breadcrumb({ view, navigateTo, scope }: BreadcrumbProps): import("preact").VNode<import("preact").ClassAttributes<HTMLElement> & {
+    class: string;
+    "aria-label": string;
+}>;

package/packages/web/dist/viewer/components/breadcrumb.js

@@ -0,0 +1,117 @@
+/**
+ * Breadcrumb navigation component.
+ *
+ * Displays a "project > tool > view" hierarchy in the page header area.
+ * Fetches project metadata from the `/api/project` endpoint and combines
+ * it with the current view to build a contextual breadcrumb trail.
+ *
+ * Also manages `document.title` to reflect the current project and view,
+ * formatted as "ProjectName | n-dx" (or "ViewLabel — ProductLabel | ProjectName | n-dx").
+ */
+import { h } from "preact";
+import { useEffect, useMemo } from "preact/hooks";
+import { useProjectMetadata } from "../hooks/index.js";
+/** Default view for each product section */
+const PRODUCT_DEFAULT_VIEW = {
+    sourcevision: "overview",
+    rex: "rex-dashboard",
+    hench: "hench-runs",
+};
+const VIEW_META = {
+    overview: { product: "sourcevision", label: "Overview", productLabel: "SourceVision" },
+    graph: { product: "sourcevision", label: "Import Graph", productLabel: "SourceVision" },
+    zones: { product: "sourcevision", label: "Zones", productLabel: "SourceVision" },
+    files: { product: "sourcevision", label: "Files", productLabel: "SourceVision" },
+    routes: { product: "sourcevision", label: "Routes", productLabel: "SourceVision" },
+    architecture: { product: "sourcevision", label: "Architecture", productLabel: "SourceVision" },
+    problems: { product: "sourcevision", label: "Problems", productLabel: "SourceVision" },
+    suggestions: { product: "sourcevision", label: "Suggestions", productLabel: "SourceVision" },
+    "pr-markdown": { product: "sourcevision", label: "PR Markdown", productLabel: "SourceVision" },
+    "rex-dashboard": { product: "rex", label: "Dashboard", productLabel: "Rex" },
+    prd: { product: "rex", label: "Tasks", productLabel: "Rex" },
+    "token-usage": { product: "global", label: "Token Usage", productLabel: "Global" },
+    validation: { product: "rex", label: "Validation", productLabel: "Rex" },
+    "notion-config": { product: "rex", label: "Notion", productLabel: "Rex" },
+    integrations: { product: "rex", label: "Integrations", productLabel: "Rex" },
+    "hench-runs": { product: "hench", label: "Runs", productLabel: "Hench" },
+    "hench-audit": { product: "hench", label: "Audit", productLabel: "Hench" },
+    "hench-config": { product: "hench", label: "Config", productLabel: "Hench" },
+    "hench-templates": { product: "hench", label: "Templates", productLabel: "Hench" },
+    "hench-optimization": { product: "hench", label: "Optimization", productLabel: "Hench" },
+    "feature-toggles": { product: "rex", label: "Feature Flags", productLabel: "Settings" },
+};
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+/** Chevron separator between breadcrumb segments. */
+function Separator() {
+    return h("svg", {
+        class: "breadcrumb-sep",
+        width: 12,
+        height: 12,
+        viewBox: "0 0 12 12",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "1.5",
+        "stroke-linecap": "round",
+        "aria-hidden": "true",
+    }, h("path", { d: "M4.5 2.5l3 3.5-3 3.5" }));
+}
+export function Breadcrumb({ view, navigateTo, scope }) {
+    const project = useProjectMetadata();
+    // Keep document.title in sync with project + current view
+    useEffect(() => {
+        const meta = VIEW_META[view];
+        const parts = [];
+        if (meta)
+            parts.push(`${meta.label} — ${meta.productLabel}`);
+        if (project)
+            parts.push(project.name);
+        parts.push("n-dx");
+        document.title = parts.join(" | ");
+    }, [project, view]);
+    const meta = VIEW_META[view];
+    /** Truncated project name — max 28 chars. */
+    const projectName = useMemo(() => {
+        if (!project)
+            return null;
+        const name = project.name;
+        return name.length > 28 ? name.slice(0, 26) + "\u2026" : name;
+    }, [project]);
+    const gitBranch = project?.git?.branch ?? null;
+    return h("nav", {
+        class: "breadcrumb",
+        "aria-label": "Breadcrumb",
+    }, h("ol", { class: "breadcrumb-list" }, 
+    // ── Segment 1: Project name ──
+    project && projectName
+        ? h("li", { class: "breadcrumb-item" }, h("span", {
+            class: "breadcrumb-project",
+            title: project.name.length > 28 ? project.name : undefined,
+        }, projectName), gitBranch
+            ? h("span", { class: "breadcrumb-branch", title: `Branch: ${gitBranch}` }, h("svg", {
+                class: "breadcrumb-branch-icon",
+                width: 11,
+                height: 11,
+                viewBox: "0 0 16 16",
+                fill: "currentColor",
+                "aria-hidden": "true",
+            }, 
+            // Git branch icon (simplified)
+            h("path", { d: "M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5zM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5z" })), gitBranch.length > 20 ? gitBranch.slice(0, 18) + "\u2026" : gitBranch)
+            : null, Separator())
+        : null, 
+    // ── Segment 2: Product / tool ──
+    meta && meta.product !== "global"
+        ? h("li", { class: "breadcrumb-item" }, h("button", {
+            class: `breadcrumb-link breadcrumb-product breadcrumb-product-${meta.product}`,
+            onClick: () => navigateTo(PRODUCT_DEFAULT_VIEW[meta.product]),
+            type: "button",
+        }, meta.productLabel), Separator())
+        : null, 
+    // ── Segment 3: Current view (active, not a link) ──
+    meta
+        ? h("li", { class: "breadcrumb-item breadcrumb-current", "aria-current": "page" }, meta.label)
+        : null));
+}
+//# sourceMappingURL=breadcrumb.js.map

package/packages/web/dist/viewer/components/breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.js","sourceRoot":"","sources":["../../../src/viewer/components/breadcrumb.ts"],"names":[],"mappings":"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"}

package/packages/web/dist/viewer/components/concurrency-panel.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Concurrency Panel — displays real-time concurrent execution count,
+ * configured limits, and queue status in the Hench dashboard section.
+ *
+ * Data comes from GET /api/hench/concurrency (initial + polling fallback)
+ * and WebSocket "hench:concurrency-status" events (real-time updates).
+ *
+ * Shows:
+ * - Current/max concurrent process count with a visual bar
+ * - Slots available and utilization percentage
+ * - Queue length and pending task count
+ * - Visual indicators (color-coded) for approaching resource limits
+ */
+export declare function ConcurrencyPanel(): import("preact").VNode<import("preact").ClassAttributes<HTMLElement> & {
+    class: string;
+    role: "region";
+    "aria-label": string;
+}> | null;

package/packages/web/dist/viewer/components/concurrency-panel.js

@@ -0,0 +1,175 @@
+/**
+ * Concurrency Panel — displays real-time concurrent execution count,
+ * configured limits, and queue status in the Hench dashboard section.
+ *
+ * Data comes from GET /api/hench/concurrency (initial + polling fallback)
+ * and WebSocket "hench:concurrency-status" events (real-time updates).
+ *
+ * Shows:
+ * - Current/max concurrent process count with a visual bar
+ * - Slots available and utilization percentage
+ * - Queue length and pending task count
+ * - Visual indicators (color-coded) for approaching resource limits
+ */
+import { h } from "preact";
+import { useState, useEffect, useCallback, useRef } from "preact/hooks";
+// ── Helpers ──────────────────────────────────────────────────────────
+const LEVEL_CONFIG = {
+    low: {
+        color: "var(--green)",
+        barColor: "var(--green)",
+        label: "Available",
+        icon: "●",
+    },
+    moderate: {
+        color: "var(--accent)",
+        barColor: "var(--accent)",
+        label: "Active",
+        icon: "◐",
+    },
+    high: {
+        color: "var(--orange)",
+        barColor: "var(--orange)",
+        label: "Nearing limit",
+        icon: "◕",
+    },
+    at_limit: {
+        color: "var(--red)",
+        barColor: "var(--red)",
+        label: "At limit",
+        icon: "●",
+    },
+};
+/** Defaults when no data has been fetched yet. */
+const EMPTY_STATUS = {
+    processCount: 0,
+    maxConcurrent: 3,
+    slotsAvailable: 3,
+    level: "low",
+    utilization: 0,
+    totalRunning: 0,
+    dashboardActive: 0,
+    diskRunning: 0,
+    pendingTasks: 0,
+    timestamp: "",
+};
+// ── Component ────────────────────────────────────────────────────────
+export function ConcurrencyPanel() {
+    const [status, setStatus] = useState(EMPTY_STATUS);
+    const [loaded, setLoaded] = useState(false);
+    const wsRef = useRef(null);
+    // Fetch from REST endpoint
+    const fetchConcurrency = useCallback(async () => {
+        try {
+            const res = await fetch("/api/hench/concurrency");
+            if (res.ok) {
+                const data = await res.json();
+                setStatus(data);
+                setLoaded(true);
+            }
+        }
+        catch {
+            // Silently fail — will retry on next poll
+        }
+    }, []);
+    // WebSocket + polling
+    useEffect(() => {
+        let mounted = true;
+        fetchConcurrency();
+        // Connect to WebSocket for real-time updates
+        const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+        const wsUrl = `${protocol}//${window.location.host}`;
+        let ws = null;
+        try {
+            ws = new WebSocket(wsUrl);
+            wsRef.current = ws;
+            ws.onmessage = (event) => {
+                if (!mounted)
+                    return;
+                try {
+                    const msg = JSON.parse(event.data);
+                    if (msg.type === "hench:concurrency-status") {
+                        setStatus((prev) => ({
+                            processCount: msg.processCount,
+                            maxConcurrent: msg.maxConcurrent,
+                            slotsAvailable: msg.slotsAvailable,
+                            level: msg.level,
+                            utilization: msg.utilization,
+                            totalRunning: msg.totalRunning,
+                            dashboardActive: msg.dashboardActive,
+                            diskRunning: msg.diskRunning,
+                            pendingTasks: prev.pendingTasks, // WS doesn't include pending tasks; preserve from REST
+                            timestamp: msg.timestamp,
+                        }));
+                        setLoaded(true);
+                    }
+                }
+                catch {
+                    // Ignore malformed messages
+                }
+            };
+            ws.onclose = () => { wsRef.current = null; };
+        }
+        catch {
+            // WebSocket not available
+        }
+        // Poll as fallback every 15 seconds
+        const interval = setInterval(fetchConcurrency, 15_000);
+        return () => {
+            mounted = false;
+            clearInterval(interval);
+            if (ws) {
+                try {
+                    ws.close();
+                }
+                catch { /* ignore */ }
+            }
+            wsRef.current = null;
+        };
+    }, [fetchConcurrency]);
+    // Don't render until we have data
+    if (!loaded)
+        return null;
+    const { processCount, maxConcurrent, slotsAvailable, level, utilization, totalRunning, pendingTasks } = status;
+    const config = LEVEL_CONFIG[level];
+    const pct = Math.round(utilization * 100);
+    return h("div", {
+        class: `concurrency-panel concurrency-panel-${level}`,
+        role: "region",
+        "aria-label": "Concurrent execution status",
+    }, 
+    // Header row
+    h("div", { class: "concurrency-header" }, h("div", { class: "concurrency-header-left" }, h("span", {
+        class: `concurrency-icon concurrency-icon-${level}`,
+        "aria-hidden": "true",
+    }, config.icon), h("h3", { class: "concurrency-title" }, "Concurrency"), h("span", {
+        class: `concurrency-level-badge concurrency-level-${level}`,
+    }, config.label)), h("div", { class: "concurrency-header-right" }, h("span", {
+        class: "concurrency-ratio",
+        style: `color: ${config.color}`,
+    }, h("span", { class: "concurrency-ratio-current" }, String(processCount)), h("span", { class: "concurrency-ratio-sep" }, "/"), h("span", { class: "concurrency-ratio-max" }, String(maxConcurrent))))), 
+    // Utilization bar
+    h("div", { class: "concurrency-bar-container" }, h("div", {
+        class: "concurrency-bar-track",
+    }, h("div", {
+        class: `concurrency-bar-fill concurrency-bar-${level}`,
+        style: `width: ${pct}%`,
+        role: "progressbar",
+        "aria-valuenow": processCount,
+        "aria-valuemin": 0,
+        "aria-valuemax": maxConcurrent,
+        "aria-label": `${processCount} of ${maxConcurrent} concurrent processes`,
+    }), 
+    // Segment markers for each slot
+    ...Array.from({ length: maxConcurrent - 1 }, (_, i) => h("div", {
+        key: i,
+        class: "concurrency-bar-segment",
+        style: `left: ${((i + 1) / maxConcurrent) * 100}%`,
+        "aria-hidden": "true",
+    }))), h("span", { class: "concurrency-bar-pct" }, `${pct}%`)), 
+    // Stats row
+    h("div", { class: "concurrency-stats" }, h("div", { class: "concurrency-stat" }, h("span", { class: "concurrency-stat-value" }, String(slotsAvailable)), h("span", { class: "concurrency-stat-label" }, `slot${slotsAvailable === 1 ? "" : "s"} available`)), h("div", { class: "concurrency-stat" }, h("span", { class: "concurrency-stat-value" }, String(totalRunning)), h("span", { class: "concurrency-stat-label" }, `task${totalRunning === 1 ? "" : "s"} running`)), pendingTasks > 0
+        ? h("div", { class: "concurrency-stat" }, h("span", { class: "concurrency-stat-value concurrency-stat-pending" }, String(pendingTasks)), h("span", { class: "concurrency-stat-label" }, `pending task${pendingTasks === 1 ? "" : "s"}`))
+        : null));
+}
+//# sourceMappingURL=concurrency-panel.js.map

package/packages/web/dist/viewer/components/concurrency-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"concurrency-panel.js","sourceRoot":"","sources":["../../../src/viewer/components/concurrency-panel.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAqBxE,wEAAwE;AAExE,MAAM,YAAY,GAKb;IACH,GAAG,EAAE;QACH,KAAK,EAAE,cAAc;QACrB,QAAQ,EAAE,cAAc;QACxB,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,GAAG;KACV;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,eAAe;QACtB,QAAQ,EAAE,eAAe;QACzB,KAAK,EAAE,QAAQ;QACf,IAAI,EAAE,GAAG;KACV;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,eAAe;QACtB,QAAQ,EAAE,eAAe;QACzB,KAAK,EAAE,eAAe;QACtB,IAAI,EAAE,GAAG;KACV;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,YAAY;QACnB,QAAQ,EAAE,YAAY;QACtB,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,GAAG;KACV;CACF,CAAC;AAEF,kDAAkD;AAClD,MAAM,YAAY,GAAsB;IACtC,YAAY,EAAE,CAAC;IACf,aAAa,EAAE,CAAC;IAChB,cAAc,EAAE,CAAC;IACjB,KAAK,EAAE,KAAK;IACZ,WAAW,EAAE,CAAC;IACd,YAAY,EAAE,CAAC;IACf,eAAe,EAAE,CAAC;IAClB,WAAW,EAAE,CAAC;IACd,YAAY,EAAE,CAAC;IACf,SAAS,EAAE,EAAE;CACd,CAAC;AAEF,wEAAwE;AAExE,MAAM,UAAU,gBAAgB;IAC9B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAoB,YAAY,CAAC,CAAC;IACtE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,KAAK,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAE7C,2BAA2B;IAC3B,MAAM,gBAAgB,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QAC9C,IAAI,CAAC;YACH,MAAM,GAAG,GAAG,MAAM,KAAK,CAAC,wBAAwB,CAAC,CAAC;YAClD,IAAI,GAAG,CAAC,EAAE,EAAE,CAAC;gBACX,MAAM,IAAI,GAAG,MAAM,GAAG,CAAC,IAAI,EAAuB,CAAC;gBACnD,SAAS,CAAC,IAAI,CAAC,CAAC;gBAChB,SAAS,CAAC,IAAI,CAAC,CAAC;YAClB,CAAC;QACH,CAAC;QAAC,MAAM,CAAC;YACP,0CAA0C;QAC5C,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,sBAAsB;IACtB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,GAAG,IAAI,CAAC;QACnB,gBAAgB,EAAE,CAAC;QAEnB,6CAA6C;QAC7C,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC;QACxE,MAAM,KAAK,GAAG,GAAG,QAAQ,KAAK,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;QACrD,IAAI,EAAE,GAAqB,IAAI,CAAC;QAEhC,IAAI,CAAC;YACH,EAAE,GAAG,IAAI,SAAS,CAAC,KAAK,CAAC,CAAC;YAC1B,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;YAEnB,EAAE,CAAC,SAAS,GAAG,CAAC,KAAK,EAAE,EAAE;gBACvB,IAAI,CAAC,OAAO;oBAAE,OAAO;gBACrB,IAAI,CAAC;oBACH,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;oBACnC,IAAI,GAAG,CAAC,IAAI,KAAK,0BAA0B,EAAE,CAAC;wBAC5C,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;4BACnB,YAAY,EAAE,GAAG,CAAC,YAAY;4BAC9B,aAAa,EAAE,GAAG,CAAC,aAAa;4BAChC,cAAc,EAAE,GAAG,CAAC,cAAc;4BAClC,KAAK,EAAE,GAAG,CAAC,KAAK;4BAChB,WAAW,EAAE,GAAG,CAAC,WAAW;4BAC5B,YAAY,EAAE,GAAG,CAAC,YAAY;4BAC9B,eAAe,EAAE,GAAG,CAAC,eAAe;4BACpC,WAAW,EAAE,GAAG,CAAC,WAAW;4BAC5B,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,uDAAuD;4BACxF,SAAS,EAAE,GAAG,CAAC,SAAS;yBACzB,CAAC,CAAC,CAAC;wBACJ,SAAS,CAAC,IAAI,CAAC,CAAC;oBAClB,CAAC;gBACH,CAAC;gBAAC,MAAM,CAAC;oBACP,4BAA4B;gBAC9B,CAAC;YACH,CAAC,CAAC;YAEF,EAAE,CAAC,OAAO,GAAG,GAAG,EAAE,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;QAC/C,CAAC;QAAC,MAAM,CAAC;YACP,0BAA0B;QAC5B,CAAC;QAED,oCAAoC;QACpC,MAAM,QAAQ,GAAG,WAAW,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC;QAEvD,OAAO,GAAG,EAAE;YACV,OAAO,GAAG,KAAK,CAAC;YAChB,aAAa,CAAC,QAAQ,CAAC,CAAC;YACxB,IAAI,EAAE,EAAE,CAAC;gBACP,IAAI,CAAC;oBAAC,EAAE,CAAC,KAAK,EAAE,CAAC;gBAAC,CAAC;gBAAC,MAAM,CAAC,CAAC,YAAY,CAAC,CAAC;YAC5C,CAAC;YACD,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC;QACvB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,kCAAkC;IAClC,IAAI,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IAEzB,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,MAAM,CAAC;IAC/G,MAAM,MAAM,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACnC,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,GAAG,CAAC,CAAC;IAE1C,OAAO,CAAC,CAAC,KAAK,EAAE;QACd,KAAK,EAAE,uCAAuC,KAAK,EAAE;QACrD,IAAI,EAAE,QAAQ;QACd,YAAY,EAAE,6BAA6B;KAC5C;IACC,aAAa;IACb,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,oBAAoB,EAAE,EACtC,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,yBAAyB,EAAE,EAC3C,CAAC,CAAC,MAAM,EAAE;QACR,KAAK,EAAE,qCAAqC,KAAK,EAAE;QACnD,aAAa,EAAE,MAAM;KACtB,EAAE,MAAM,CAAC,IAAI,CAAC,EACf,CAAC,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,mBAAmB,EAAE,EAAE,aAAa,CAAC,EACtD,CAAC,CAAC,MAAM,EAAE;QACR,KAAK,EAAE,6CAA6C,KAAK,EAAE;KAC5D,EAAE,MAAM,CAAC,KAAK,CAAC,CACjB,EACD,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,0BAA0B,EAAE,EAC5C,CAAC,CAAC,MAAM,EAAE;QACR,KAAK,EAAE,mBAAmB;QAC1B,KAAK,EAAE,UAAU,MAAM,CAAC,KAAK,EAAE;KAChC,EACC,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,2BAA2B,EAAE,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC,EACvE,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,uBAAuB,EAAE,EAAE,GAAG,CAAC,EAClD,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,uBAAuB,EAAE,EAAE,MAAM,CAAC,aAAa,CAAC,CAAC,CACrE,CACF,CACF;IAED,kBAAkB;IAClB,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,2BAA2B,EAAE,EAC7C,CAAC,CAAC,KAAK,EAAE;QACP,KAAK,EAAE,uBAAuB;KAC/B,EACC,CAAC,CAAC,KAAK,EAAE;QACP,KAAK,EAAE,wCAAwC,KAAK,EAAE;QACtD,KAAK,EAAE,UAAU,GAAG,GAAG;QACvB,IAAI,EAAE,aAAa;QACnB,eAAe,EAAE,YAAY;QAC7B,eAAe,EAAE,CAAC;QAClB,eAAe,EAAE,aAAa;QAC9B,YAAY,EAAE,GAAG,YAAY,OAAO,aAAa,uBAAuB;KACzE,CAAC;IACF,gCAAgC;IAChC,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,aAAa,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CACpD,CAAC,CAAC,KAAK,EAAE;QACP,GAAG,EAAE,CAAC;QACN,KAAK,EAAE,yBAAyB;QAChC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,aAAa,CAAC,GAAG,GAAG,GAAG;QAClD,aAAa,EAAE,MAAM;KACtB,CAAC,CACH,CACF,EACD,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,qBAAqB,EAAE,EAAE,GAAG,GAAG,GAAG,CAAC,CACvD;IAED,YAAY;IACZ,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,mBAAmB,EAAE,EACrC,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,kBAAkB,EAAE,EACpC,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,wBAAwB,EAAE,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC,EACtE,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,wBAAwB,EAAE,EAC3C,OAAO,cAAc,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,YAAY,CACnD,CACF,EACD,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,kBAAkB,EAAE,EACpC,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,wBAAwB,EAAE,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC,EACpE,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,wBAAwB,EAAE,EAC3C,OAAO,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,UAAU,CAC/C,CACF,EACD,YAAY,GAAG,CAAC;QACd,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,kBAAkB,EAAE,EACpC,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,iDAAiD,EAAE,EACpE,MAAM,CAAC,YAAY,CAAC,CACrB,EACD,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,wBAAwB,EAAE,EAC3C,eAAe,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,EAAE,CAC/C,CACF;QACH,CAAC,CAAC,IAAI,CACT,CACF,CAAC;AACJ,CAAC"}

package/packages/web/dist/viewer/components/config-footer.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Configuration display footer for the sidebar.
+ *
+ * Shows active n-dx configuration (model, auth method, token budget) in a
+ * collapsible panel above the sidebar footer controls.
+ */
+export declare function ConfigFooter(): import("preact").VNode<import("preact").ClassAttributes<HTMLElement> & {
+    class: string;
+    role: "region";
+    "aria-label": string;
+}> | null;