@n-dx/web 0.1.0

package/dist/viewer/components/data-display/zone-map.js

@@ -0,0 +1,197 @@
+import { h } from "preact";
+import { useState, useMemo } from "preact/hooks";
+import { getZoneColorByIndex, basename } from "../../utils.js";
+export function ZoneMap({ zones, crossings, selectedZone, onZoneClick }) {
+    const [hoveredZone, setHoveredZone] = useState(null);
+    // Calculate zone metrics for sizing
+    const zoneMetrics = useMemo(() => {
+        const metrics = new Map();
+        for (const z of zones) {
+            metrics.set(z.id, {
+                files: z.files.length,
+                incoming: 0,
+                outgoing: 0,
+                cohesion: z.cohesion,
+                coupling: z.coupling,
+            });
+        }
+        for (const c of crossings) {
+            const from = metrics.get(c.fromZone);
+            const to = metrics.get(c.toZone);
+            if (from)
+                from.outgoing++;
+            if (to)
+                to.incoming++;
+        }
+        return metrics;
+    }, [zones, crossings]);
+    // Group crossings by zone pairs for connection rendering
+    const connectionCounts = useMemo(() => {
+        const counts = new Map();
+        for (const c of crossings) {
+            const key = [c.fromZone, c.toZone].sort().join(":");
+            counts.set(key, (counts.get(key) || 0) + 1);
+        }
+        return counts;
+    }, [crossings]);
+    // Get unique zone pairs with connections
+    const connections = useMemo(() => {
+        const pairs = [];
+        const seen = new Set();
+        for (const c of crossings) {
+            const key = [c.fromZone, c.toZone].sort().join(":");
+            if (seen.has(key))
+                continue;
+            seen.add(key);
+            const reverseKey = `${c.toZone}:${c.fromZone}`;
+            const forwardCount = crossings.filter(x => x.fromZone === c.fromZone && x.toZone === c.toZone).length;
+            const reverseCount = crossings.filter(x => x.fromZone === c.toZone && x.toZone === c.fromZone).length;
+            pairs.push({
+                from: c.fromZone,
+                to: c.toZone,
+                count: forwardCount + reverseCount,
+                bidirectional: forwardCount > 0 && reverseCount > 0,
+            });
+        }
+        return pairs.sort((a, b) => b.count - a.count);
+    }, [crossings]);
+    // Calculate grid layout
+    const cols = Math.ceil(Math.sqrt(zones.length));
+    const rows = Math.ceil(zones.length / cols);
+    const maxFiles = Math.max(...zones.map(z => z.files.length), 1);
+    return h("div", { class: "zone-map" }, h("div", { class: "zone-map-header" }, h("h4", null, "Architecture Map"), h("div", { class: "zone-map-legend" }, h("span", { class: "legend-item" }, h("span", { class: "legend-dot", style: "background: var(--green)" }), "High cohesion"), h("span", { class: "legend-item" }, h("span", { class: "legend-dot", style: "background: var(--orange)" }), "Bidirectional"), h("span", { class: "legend-item" }, h("span", { class: "legend-line" }), "Dependency"))), h("div", {
+        class: "zone-map-grid",
+        style: `grid-template-columns: repeat(${cols}, 1fr)`,
+    }, zones.map((zone, i) => {
+        const color = getZoneColorByIndex(i);
+        const metrics = zoneMetrics.get(zone.id);
+        const isSelected = selectedZone === zone.id;
+        const isHovered = hoveredZone === zone.id;
+        const isHighlighted = isSelected || isHovered;
+        // Scale box size by file count
+        const sizeScale = 0.7 + (zone.files.length / maxFiles) * 0.3;
+        // Health indicator color
+        const healthColor = zone.cohesion >= 0.7 ? "var(--green)"
+            : zone.cohesion >= 0.4 ? "var(--orange)"
+                : "var(--red)";
+        // Coupling indicator
+        const couplingLevel = zone.coupling >= 0.5 ? "high" : zone.coupling >= 0.3 ? "mid" : "low";
+        return h("div", {
+            key: zone.id,
+            class: `zone-map-node ${isSelected ? "selected" : ""} ${isHovered ? "hovered" : ""}`,
+            style: `
+            --zone-color: ${color};
+            transform: scale(${isHighlighted ? 1.05 : sizeScale});
+            border-color: ${isHighlighted ? color : "var(--border)"};
+          `,
+            onClick: () => onZoneClick?.(zone.id),
+            onMouseEnter: () => setHoveredZone(zone.id),
+            onMouseLeave: () => setHoveredZone(null),
+        }, h("div", { class: "zone-map-node-header" }, h("span", { class: "zone-map-node-dot", style: `background: ${color}` }), h("span", { class: "zone-map-node-name" }, zone.name)), h("div", { class: "zone-map-node-body" }, h("div", { class: "zone-map-node-stat" }, h("span", { class: "stat-value" }, zone.files.length), h("span", { class: "stat-label" }, "files")), h("div", { class: "zone-map-node-health" }, h("span", {
+            class: "health-dot",
+            style: `background: ${healthColor}`,
+            title: `Cohesion: ${zone.cohesion.toFixed(2)}`,
+        }), h("span", {
+            class: `coupling-indicator ${couplingLevel}`,
+            title: `Coupling: ${zone.coupling.toFixed(2)}`,
+        }, zone.coupling > 0.3 ? "\u26A0" : ""))), zone.subZones && zone.subZones.length > 0
+            ? h("div", { class: "zone-map-node-subzones" }, h("span", { class: "subzone-badge" }, `${zone.subZones.length} sub-zones`))
+            : null, metrics && (metrics.incoming > 0 || metrics.outgoing > 0)
+            ? h("div", { class: "zone-map-node-io" }, h("span", { class: "io-in", title: "Incoming deps" }, "\u2190", metrics.incoming), h("span", { class: "io-out", title: "Outgoing deps" }, metrics.outgoing, "\u2192"))
+            : null);
+    })), 
+    // Connection summary
+    connections.length > 0
+        ? h("div", { class: "zone-map-connections" }, h("h5", null, "Zone Dependencies"), h("div", { class: "connection-list" }, connections.slice(0, 10).map(conn => {
+            const fromZone = zones.find(z => z.id === conn.from);
+            const toZone = zones.find(z => z.id === conn.to);
+            if (!fromZone || !toZone)
+                return null;
+            const fromIdx = zones.indexOf(fromZone);
+            const toIdx = zones.indexOf(toZone);
+            return h("div", {
+                key: `${conn.from}-${conn.to}`,
+                class: `connection-item ${conn.bidirectional ? "bidirectional" : ""}`,
+            }, h("span", {
+                class: "connection-zone",
+                style: `--zone-color: ${getZoneColorByIndex(fromIdx)}`,
+            }, fromZone.name), h("span", { class: "connection-arrow" }, conn.bidirectional ? "\u21C4" : "\u2192"), h("span", {
+                class: "connection-zone",
+                style: `--zone-color: ${getZoneColorByIndex(toIdx)}`,
+            }, toZone.name), h("span", { class: "connection-count" }, conn.count));
+        }), connections.length > 10
+            ? h("div", { class: "connection-more" }, `+${connections.length - 10} more connections`)
+            : null))
+        : null);
+}
+export function ZoneDetail({ zone, crossings, allZones, onClose, onFileClick }) {
+    const [showFiles, setShowFiles] = useState(false);
+    // Get connections for this zone
+    const incoming = crossings.filter(c => c.toZone === zone.id);
+    const outgoing = crossings.filter(c => c.fromZone === zone.id);
+    // Group by source/target zone
+    const incomingByZone = groupBy(incoming, c => c.fromZone);
+    const outgoingByZone = groupBy(outgoing, c => c.toZone);
+    const zoneIdx = allZones.indexOf(zone);
+    const color = getZoneColorByIndex(zoneIdx);
+    return h("div", { class: "zone-detail-overlay" }, h("div", { class: "zone-detail-panel", style: `--zone-color: ${color}` }, h("div", { class: "zone-detail-header" }, h("h3", null, zone.name), h("button", { class: "close-btn", onClick: onClose }, "\u2715")), h("p", { class: "zone-detail-desc" }, zone.description), 
+    // Metrics row
+    h("div", { class: "zone-detail-metrics" }, h("div", { class: "metric" }, h("span", { class: "metric-val" }, zone.files.length), h("span", { class: "metric-lbl" }, "files")), h("div", { class: "metric" }, h("span", {
+        class: "metric-val",
+        style: `color: ${zone.cohesion >= 0.7 ? "var(--green)" : zone.cohesion >= 0.4 ? "var(--orange)" : "var(--red)"}`,
+    }, zone.cohesion.toFixed(2)), h("span", { class: "metric-lbl" }, "cohesion")), h("div", { class: "metric" }, h("span", {
+        class: "metric-val",
+        style: `color: ${zone.coupling <= 0.3 ? "var(--green)" : zone.coupling <= 0.5 ? "var(--orange)" : "var(--red)"}`,
+    }, zone.coupling.toFixed(2)), h("span", { class: "metric-lbl" }, "coupling"))), 
+    // Entry points
+    zone.entryPoints.length > 0
+        ? h("div", { class: "zone-detail-section" }, h("h4", null, "Entry Points"), h("ul", { class: "entry-point-list" }, zone.entryPoints.slice(0, 5).map(ep => h("li", { key: ep, class: "mono-sm" }, basename(ep))), zone.entryPoints.length > 5
+            ? h("li", { class: "more" }, `+${zone.entryPoints.length - 5} more`)
+            : null))
+        : null, 
+    // Insights
+    zone.insights && zone.insights.length > 0
+        ? h("div", { class: "zone-detail-section" }, h("h4", null, "Insights"), h("ul", { class: "insight-list" }, zone.insights.slice(0, 5).map((ins, i) => h("li", { key: i }, ins)), zone.insights.length > 5
+            ? h("li", { class: "more" }, `+${zone.insights.length - 5} more`)
+            : null))
+        : null, 
+    // Dependencies
+    (Object.keys(incomingByZone).length > 0 || Object.keys(outgoingByZone).length > 0)
+        ? h("div", { class: "zone-detail-section" }, h("h4", null, "Dependencies"), h("div", { class: "dep-grid" }, Object.keys(outgoingByZone).length > 0
+            ? h("div", { class: "dep-col" }, h("span", { class: "dep-label" }, "Depends on:"), ...Object.entries(outgoingByZone).slice(0, 5).map(([zoneId, items]) => {
+                const targetZone = allZones.find(z => z.id === zoneId);
+                return h("div", { key: zoneId, class: "dep-item" }, targetZone?.name || zoneId, h("span", { class: "dep-count" }, items.length));
+            }))
+            : null, Object.keys(incomingByZone).length > 0
+            ? h("div", { class: "dep-col" }, h("span", { class: "dep-label" }, "Used by:"), ...Object.entries(incomingByZone).slice(0, 5).map(([zoneId, items]) => {
+                const sourceZone = allZones.find(z => z.id === zoneId);
+                return h("div", { key: zoneId, class: "dep-item" }, sourceZone?.name || zoneId, h("span", { class: "dep-count" }, items.length));
+            }))
+            : null))
+        : null, 
+    // Files toggle
+    h("div", { class: "zone-detail-section" }, h("button", {
+        class: "toggle-files-btn",
+        onClick: () => setShowFiles(!showFiles),
+    }, showFiles ? "Hide files" : `Show ${zone.files.length} files`), showFiles
+        ? h("ul", { class: "file-list" }, zone.files.map(f => h("li", {
+            key: f,
+            class: "file-item mono-sm",
+            onClick: onFileClick ? () => onFileClick(f) : undefined,
+        }, f, zone.entryPoints.includes(f)
+            ? h("span", { class: "entry-badge" }, "entry")
+            : null)))
+        : null)));
+}
+// Helper
+function groupBy(items, key) {
+    const result = {};
+    for (const item of items) {
+        const k = key(item);
+        if (!result[k])
+            result[k] = [];
+        result[k].push(item);
+    }
+    return result;
+}
+//# sourceMappingURL=zone-map.js.map

package/dist/viewer/components/data-display/zone-map.js.map

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

package/dist/viewer/components/degradation-banner.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Degradation notification banner component.
+ *
+ * Informs the user when features have been automatically disabled due to
+ * memory pressure. Explains what's disabled and why, and provides a button
+ * to dismiss the notice. Shows only when degradation is active (tier > normal)
+ * and the memory warning banner is NOT already visible (to avoid stacking).
+ */
+import type { MemoryLevel, DegradableFeature } from "../performance/index.js";
+export interface DegradationBannerProps {
+    /** Current degradation tier. */
+    tier: MemoryLevel;
+    /** Whether degradation is active (tier !== "normal"). */
+    isDegraded: boolean;
+    /** Human-readable summary message. */
+    summary: string;
+    /** Set of disabled features. */
+    disabledFeatures: ReadonlySet<DegradableFeature>;
+    /** Whether this banner should be visible. */
+    visible: boolean;
+    /** Called when the user dismisses the banner. */
+    onDismiss: () => void;
+}
+export declare function DegradationBanner({ tier, isDegraded, summary, disabledFeatures, visible, onDismiss, }: DegradationBannerProps): import("preact").VNode<import("preact").ClassAttributes<HTMLElement> & {
+    class: string;
+    role: "status";
+    "aria-live": "polite";
+}> | null;

package/dist/viewer/components/degradation-banner.js

@@ -0,0 +1,47 @@
+/**
+ * Degradation notification banner component.
+ *
+ * Informs the user when features have been automatically disabled due to
+ * memory pressure. Explains what's disabled and why, and provides a button
+ * to dismiss the notice. Shows only when degradation is active (tier > normal)
+ * and the memory warning banner is NOT already visible (to avoid stacking).
+ */
+import { h } from "preact";
+/** Human-readable names for degradable features. */
+const FEATURE_LABELS = {
+    autoRefresh: "Auto-refresh",
+    deferredLoading: "Background loading",
+    graphRendering: "Graph view",
+    animations: "Animations",
+    detailPanel: "Detail panel",
+};
+const TIER_ICON = {
+    normal: "",
+    elevated: "\u26A1", // lightning bolt
+    warning: "\u26A0\uFE0F", // warning sign
+    critical: "\uD83D\uDED1", // stop sign
+};
+export function DegradationBanner({ tier, isDegraded, summary, disabledFeatures, visible, onDismiss, }) {
+    if (!visible || !isDegraded || tier === "normal")
+        return null;
+    const icon = TIER_ICON[tier];
+    const tierClass = tier === "critical"
+        ? "degradation-banner degradation-critical"
+        : tier === "warning"
+            ? "degradation-banner degradation-warning"
+            : "degradation-banner degradation-elevated";
+    const featureList = Array.from(disabledFeatures)
+        .map((f) => FEATURE_LABELS[f])
+        .join(", ");
+    return h("div", {
+        class: tierClass,
+        role: "status",
+        "aria-live": "polite",
+    }, h("div", { class: "degradation-content" }, h("span", { class: "degradation-icon", "aria-hidden": "true" }, icon), h("div", { class: "degradation-text" }, h("strong", null, "Reduced functionality"), h("p", { class: "degradation-summary" }, summary), h("p", { class: "degradation-features" }, `Disabled: ${featureList}`)), h("button", {
+        class: "degradation-dismiss",
+        onClick: onDismiss,
+        "aria-label": "Dismiss degradation notice",
+        type: "button",
+    }, "\u2715")));
+}
+//# sourceMappingURL=degradation-banner.js.map

package/dist/viewer/components/degradation-banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"degradation-banner.js","sourceRoot":"","sources":["../../../src/viewer/components/degradation-banner.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAkB3B,oDAAoD;AACpD,MAAM,cAAc,GAAsC;IACxD,WAAW,EAAE,cAAc;IAC3B,eAAe,EAAE,oBAAoB;IACrC,cAAc,EAAE,YAAY;IAC5B,UAAU,EAAE,YAAY;IACxB,WAAW,EAAE,cAAc;CAC5B,CAAC;AAEF,MAAM,SAAS,GAAgC;IAC7C,MAAM,EAAE,EAAE;IACV,QAAQ,EAAE,QAAQ,EAAQ,iBAAiB;IAC3C,OAAO,EAAE,cAAc,EAAG,eAAe;IACzC,QAAQ,EAAE,cAAc,EAAE,YAAY;CACvC,CAAC;AAEF,MAAM,UAAU,iBAAiB,CAAC,EAChC,IAAI,EACJ,UAAU,EACV,OAAO,EACP,gBAAgB,EAChB,OAAO,EACP,SAAS,GACc;IACvB,IAAI,CAAC,OAAO,IAAI,CAAC,UAAU,IAAI,IAAI,KAAK,QAAQ;QAAE,OAAO,IAAI,CAAC;IAE9D,MAAM,IAAI,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC;IAC7B,MAAM,SAAS,GACb,IAAI,KAAK,UAAU;QACjB,CAAC,CAAC,yCAAyC;QAC3C,CAAC,CAAC,IAAI,KAAK,SAAS;YAClB,CAAC,CAAC,wCAAwC;YAC1C,CAAC,CAAC,yCAAyC,CAAC;IAElD,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC;SAC7C,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;SAC7B,IAAI,CAAC,IAAI,CAAC,CAAC;IAEd,OAAO,CAAC,CACN,KAAK,EACL;QACE,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,QAAQ;QACd,WAAW,EAAE,QAAQ;KACtB,EACD,CAAC,CACC,KAAK,EACL,EAAE,KAAK,EAAE,qBAAqB,EAAE,EAChC,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,IAAI,CAAC,EACrE,CAAC,CACC,KAAK,EACL,EAAE,KAAK,EAAE,kBAAkB,EAAE,EAC7B,CAAC,CAAC,QAAQ,EAAE,IAAI,EAAE,uBAAuB,CAAC,EAC1C,CAAC,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,qBAAqB,EAAE,EAAE,OAAO,CAAC,EACjD,CAAC,CACC,GAAG,EACH,EAAE,KAAK,EAAE,sBAAsB,EAAE,EACjC,aAAa,WAAW,EAAE,CAC3B,CACF,EACD,CAAC,CACC,QAAQ,EACR;QACE,KAAK,EAAE,qBAAqB;QAC5B,OAAO,EAAE,SAAS;QAClB,YAAY,EAAE,4BAA4B;QAC1C,IAAI,EAAE,QAAQ;KACf,EACD,QAAQ,CACT,CACF,CACF,CAAC;AACJ,CAAC"}

package/dist/viewer/components/detail-panel.d.ts

@@ -0,0 +1,12 @@
+import type { LoadedData, NavigateTo, DetailItem } from "../types.js";
+import type { VNode } from "preact";
+interface DetailPanelProps {
+    detail: DetailItem | null;
+    data?: LoadedData;
+    navigateTo?: NavigateTo;
+    onClose: () => void;
+    /** Optional custom content renderer for PRD details (injected from PRDView). */
+    prdDetailContent?: VNode<any> | null;
+}
+export declare function DetailPanel({ detail, data, navigateTo, onClose, prdDetailContent }: DetailPanelProps): VNode<import("preact").Attributes> | null;
+export {};

package/dist/viewer/components/detail-panel.js

@@ -0,0 +1,166 @@
+import { h, Fragment } from "preact";
+import { useEffect } from "preact/hooks";
+import { meterClass, getZoneColorByIndex } from "../visualization/index.js";
+import { basename } from "../utils.js";
+export function DetailPanel({ detail, data, navigateTo, onClose, prdDetailContent }) {
+    // Close on Escape
+    useEffect(() => {
+        if (!detail)
+            return;
+        const handleKey = (e) => {
+            if (e.key === "Escape")
+                onClose();
+        };
+        document.addEventListener("keydown", handleKey);
+        return () => document.removeEventListener("keydown", handleKey);
+    }, [detail, onClose]);
+    if (!detail)
+        return null;
+    let content;
+    if (detail.type === "prd" && prdDetailContent) {
+        content = prdDetailContent;
+    }
+    else if (detail.type === "file") {
+        content = renderFileDetail(detail, data, navigateTo, onClose);
+    }
+    else if (detail.type === "zone") {
+        content = renderZoneDetail(detail, data, navigateTo);
+    }
+    else {
+        content = renderGenericDetail(detail);
+    }
+    return h(Fragment, null, 
+    // Mobile backdrop
+    h("div", {
+        class: "detail-backdrop",
+        onClick: onClose,
+        "aria-hidden": "true",
+    }), h("div", {
+        class: "detail-panel open",
+        role: "complementary",
+        "aria-label": "Item details",
+    }, h("div", {
+        class: "detail-header",
+    }, h("h3", { title: detail.title || "Details" }, detail.title || "Details"), h("button", {
+        class: "detail-close",
+        onClick: onClose,
+        "aria-label": "Close detail panel",
+        title: "Close (Esc)",
+    }, "\u2715", h("span", { class: "sr-only" }, "Close"))), content));
+}
+function renderFileDetail(detail, data, navigateTo, onClose) {
+    const path = detail.path;
+    const imports = data?.imports;
+    const zones = data?.zones;
+    // Find zone membership
+    let fileZone = null;
+    if (zones) {
+        for (let i = 0; i < zones.zones.length; i++) {
+            const z = zones.zones[i];
+            if (z.files.includes(path)) {
+                fileZone = { id: z.id, name: z.name, color: getZoneColorByIndex(i) };
+                break;
+            }
+        }
+    }
+    // Incoming and outgoing imports
+    const incoming = imports?.edges.filter((e) => e.to === path).map((e) => e.from) ?? [];
+    const outgoing = imports?.edges.filter((e) => e.from === path).map((e) => e.to) ?? [];
+    return h(Fragment, null, 
+    // Path in monospace
+    h("div", { class: "detail-code" }, path), 
+    // File metadata
+    detail.language ? h("div", { class: "detail-row" }, h("span", { class: "label" }, "Language"), h("span", null, detail.language)) : null, detail.size ? h("div", { class: "detail-row" }, h("span", { class: "label" }, "Size"), h("span", null, detail.size)) : null, detail.lines ? h("div", { class: "detail-row" }, h("span", { class: "label" }, "Lines"), h("span", null, String(detail.lines))) : null, detail.role ? h("div", { class: "detail-row" }, h("span", { class: "label" }, "Role"), h("span", null, detail.role)) : null, detail.category ? h("div", { class: "detail-row" }, h("span", { class: "label" }, "Category"), h("span", null, detail.category)) : null, 
+    // Zone badge
+    fileZone
+        ? h("div", { class: "detail-row" }, h("span", { class: "label" }, "Zone"), h("span", { class: "zone-badge", style: `--zone-color: ${fileZone.color}` }, fileZone.name))
+        : null, 
+    // Incoming imports
+    incoming.length > 0
+        ? h("div", { class: "mt-12" }, h("div", { class: "label mb-6" }, `Imported by (${incoming.length})`), h("div", { class: "detail-import-list" }, incoming.slice(0, 10).map((f) => h("div", { key: f, class: "detail-import-item", title: f }, basename(f))), incoming.length > 10
+            ? h("div", { class: "detail-import-item text-dim" }, `... and ${incoming.length - 10} more`)
+            : null))
+        : null, 
+    // Outgoing imports
+    outgoing.length > 0
+        ? h("div", { class: "mt-12" }, h("div", { class: "label mb-6" }, `Imports (${outgoing.length})`), h("div", { class: "detail-import-list" }, outgoing.slice(0, 10).map((f) => h("div", { key: f, class: "detail-import-item", title: f }, basename(f))), outgoing.length > 10
+            ? h("div", { class: "detail-import-item text-dim" }, `... and ${outgoing.length - 10} more`)
+            : null))
+        : null, 
+    // Navigation button
+    navigateTo
+        ? h("button", {
+            class: "detail-nav-btn",
+            onClick: () => navigateTo("graph", { file: path }),
+        }, "\u2B95 View in Graph")
+        : null);
+}
+function renderZoneDetail(detail, data, navigateTo) {
+    const zoneId = detail.zoneId || detail.id;
+    const zones = data?.zones;
+    const zone = zones?.zones.find((z) => z.id === zoneId);
+    const cohesion = parseFloat(detail.cohesion ?? String(zone?.cohesion ?? 0));
+    const coupling = parseFloat(detail.coupling ?? String(zone?.coupling ?? 0));
+    // Scoped findings
+    const scopedFindings = zones?.findings?.filter((f) => f.scope === zoneId) ?? [];
+    return h(Fragment, null, detail.description
+        ? h("p", { class: "section-sub" }, detail.description)
+        : null, 
+    // File count
+    h("div", { class: "detail-row" }, h("span", { class: "label" }, "Files"), h("span", null, String(detail.files))), 
+    // Entry points
+    zone && zone.entryPoints.length > 0
+        ? h("div", { class: "mt-8" }, h("div", { class: "label" }, "Entry Points"), h("div", { class: "detail-import-list" }, zone.entryPoints.map((ep) => h("div", { key: ep, class: "detail-import-item", title: ep }, basename(ep)))))
+        : null, 
+    // Cohesion meter
+    h("div", { class: "mt-12" }, h("div", { class: "detail-row" }, h("span", { class: "label" }, "Cohesion"), h("span", null, cohesion.toFixed(2))), h("div", { class: "meter" }, h("div", {
+        class: `meter-fill ${meterClass(cohesion)}`,
+        style: `width: ${cohesion * 100}%`,
+    }))), 
+    // Coupling meter
+    h("div", { class: "mt-8" }, h("div", { class: "detail-row" }, h("span", { class: "label" }, "Coupling"), h("span", null, coupling.toFixed(2))), h("div", { class: "meter" }, h("div", {
+        class: `meter-fill ${meterClass(coupling, true)}`,
+        style: `width: ${coupling * 100}%`,
+    }))), 
+    // Scoped findings
+    scopedFindings.length > 0
+        ? h("div", { class: "mt-12" }, h("div", { class: "label mb-6" }, `Findings (${scopedFindings.length})`), scopedFindings.slice(0, 5).map((f, i) => h("div", { key: i, class: "detail-finding-item" }, f.text)), scopedFindings.length > 5
+            ? h("div", { class: "detail-more" }, `... and ${scopedFindings.length - 5} more`)
+            : null)
+        : null, 
+    // Navigation buttons
+    navigateTo
+        ? h("div", { class: "detail-nav-group" }, h("button", {
+            class: "detail-nav-btn",
+            onClick: () => navigateTo("files", { zone: zoneId }),
+        }, "\u2630 View in Files"), h("button", {
+            class: "detail-nav-btn",
+            onClick: () => navigateTo("problems"),
+        }, "\u26A0 View Problems"), h("button", {
+            class: "detail-nav-btn",
+            onClick: () => navigateTo("suggestions"),
+        }, "\u2728 View Suggestions"))
+        : null);
+}
+function renderGenericDetail(detail) {
+    const entries = Object.entries(detail).filter(([k, v]) => k !== "type" && v !== undefined && v !== null);
+    return h(Fragment, null, entries.map(([key, value]) => {
+        if (key === "title")
+            return null;
+        const displayValue = Array.isArray(value)
+            ? value.length > 5
+                ? `${value.slice(0, 5).join(", ")}... (${value.length} total)`
+                : value.join(", ")
+            : typeof value === "object"
+                ? JSON.stringify(value)
+                : String(value);
+        return h("div", { key, class: "detail-row" }, h("span", { class: "label" }, formatKey(key)), h("span", null, displayValue));
+    }));
+}
+function formatKey(key) {
+    return key
+        .replace(/([A-Z])/g, " $1")
+        .replace(/^./, (s) => s.toUpperCase())
+        .trim();
+}
+//# sourceMappingURL=detail-panel.js.map

package/dist/viewer/components/detail-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"detail-panel.js","sourceRoot":"","sources":["../../../src/viewer/components/detail-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAC5E,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAavC,MAAM,UAAU,WAAW,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,gBAAgB,EAAoB;IACnG,kBAAkB;IAClB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM;YAAE,OAAO;QACpB,MAAM,SAAS,GAAG,CAAC,CAAgB,EAAE,EAAE;YACrC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;gBAAE,OAAO,EAAE,CAAC;QACpC,CAAC,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAChD,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IAClE,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAEtB,IAAI,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IAEzB,IAAI,OAAO,CAAC;IACZ,IAAI,MAAM,CAAC,IAAI,KAAK,KAAK,IAAI,gBAAgB,EAAE,CAAC;QAC9C,OAAO,GAAG,gBAAgB,CAAC;IAC7B,CAAC;SAAM,IAAI,MAAM,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;QAClC,OAAO,GAAG,gBAAgB,CAAC,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,CAAC,CAAC;IAChE,CAAC;SAAM,IAAI,MAAM,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;QAClC,OAAO,GAAG,gBAAgB,CAAC,MAAM,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC;IACvD,CAAC;SAAM,CAAC;QACN,OAAO,GAAG,mBAAmB,CAAC,MAA4C,CAAC,CAAC;IAC9E,CAAC;IAED,OAAO,CAAC,CAAC,QAAQ,EAAE,IAAI;IACrB,kBAAkB;IAClB,CAAC,CAAC,KAAK,EAAE;QACP,KAAK,EAAE,iBAAiB;QACxB,OAAO,EAAE,OAAO;QAChB,aAAa,EAAE,MAAM;KACtB,CAAC,EACF,CAAC,CAAC,KAAK,EAAE;QACP,KAAK,EAAE,mBAAmB;QAC1B,IAAI,EAAE,eAAe;QACrB,YAAY,EAAE,cAAc;KAC7B,EACC,CAAC,CAAC,KAAK,EAAE;QACP,KAAK,EAAE,eAAe;KACvB,EACC,CAAC,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,IAAI,SAAS,EAAE,EAAE,MAAM,CAAC,KAAK,IAAI,SAAS,CAAC,EACxE,CAAC,CAAC,QAAQ,EAAE;QACV,KAAK,EAAE,cAAc;QACrB,OAAO,EAAE,OAAO;QAChB,YAAY,EAAE,oBAAoB;QAClC,KAAK,EAAE,aAAa;KACrB,EAAE,QAAQ,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,OAAO,CAAC,CAAC,CACvD,EACD,OAAO,CACR,CACF,CAAC;AACJ,CAAC;AAED,SAAS,gBAAgB,CACvB,MAAkB,EAClB,IAA4B,EAC5B,UAAkC,EAClC,OAAmB;IAEnB,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;IACzB,MAAM,OAAO,GAAG,IAAI,EAAE,OAAO,CAAC;IAC9B,MAAM,KAAK,GAAG,IAAI,EAAE,KAAK,CAAC;IAE1B,uBAAuB;IACvB,IAAI,QAAQ,GAAuD,IAAI,CAAC;IACxE,IAAI,KAAK,EAAE,CAAC;QACV,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAC5C,MAAM,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YACzB,IAAI,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;gBAC3B,QAAQ,GAAG,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAAE,CAAC;gBACrE,MAAM;YACR,CAAC;QACH,CAAC;IACH,CAAC;IAED,gCAAgC;IAChC,MAAM,QAAQ,GAAG,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IACtF,MAAM,QAAQ,GAAG,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC;IAEtF,OAAO,CAAC,CAAC,QAAQ,EAAE,IAAI;IACrB,oBAAoB;IACpB,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,IAAI,CAAC;IAExC,gBAAgB;IAChB,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,EAChD,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,UAAU,CAAC,EACzC,CAAC,CAAC,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,QAAQ,CAAC,CACjC,CAAC,CAAC,CAAC,IAAI,EACR,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,EAC5C,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,MAAM,CAAC,EACrC,CAAC,CAAC,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,CAC7B,CAAC,CAAC,CAAC,IAAI,EACR,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,EAC7C,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,OAAO,CAAC,EACtC,CAAC,CAAC,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CACtC,CAAC,CAAC,CAAC,IAAI,EACR,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,EAC5C,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,MAAM,CAAC,EACrC,CAAC,CAAC,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,CAC7B,CAAC,CAAC,CAAC,IAAI,EACR,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,EAChD,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,UAAU,CAAC,EACzC,CAAC,CAAC,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,QAAQ,CAAC,CACjC,CAAC,CAAC,CAAC,IAAI;IAER,aAAa;IACb,QAAQ;QACN,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,EAC9B,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,MAAM,CAAC,EACrC,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,iBAAiB,QAAQ,CAAC,KAAK,EAAE,EAAE,EACzE,QAAQ,CAAC,IAAI,CACd,CACF;QACH,CAAC,CAAC,IAAI;IAER,mBAAmB;IACnB,QAAQ,CAAC,MAAM,GAAG,CAAC;QACjB,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EACzB,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,EAAE,gBAAgB,QAAQ,CAAC,MAAM,GAAG,CAAC,EACrE,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,oBAAoB,EAAE,EACtC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAC9B,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,oBAAoB,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CACzE,EACD,QAAQ,CAAC,MAAM,GAAG,EAAE;YAClB,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,6BAA6B,EAAE,EAC/C,WAAW,QAAQ,CAAC,MAAM,GAAG,EAAE,OAAO,CACvC;YACH,CAAC,CAAC,IAAI,CACT,CACF;QACH,CAAC,CAAC,IAAI;IAER,mBAAmB;IACnB,QAAQ,CAAC,MAAM,GAAG,CAAC;QACjB,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EACzB,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,EAAE,YAAY,QAAQ,CAAC,MAAM,GAAG,CAAC,EACjE,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,oBAAoB,EAAE,EACtC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAC9B,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,oBAAoB,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CACzE,EACD,QAAQ,CAAC,MAAM,GAAG,EAAE;YAClB,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,6BAA6B,EAAE,EAC/C,WAAW,QAAQ,CAAC,MAAM,GAAG,EAAE,OAAO,CACvC;YACH,CAAC,CAAC,IAAI,CACT,CACF;QACH,CAAC,CAAC,IAAI;IAER,oBAAoB;IACpB,UAAU;QACR,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE;YACV,KAAK,EAAE,gBAAgB;YACvB,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;SACnD,EAAE,sBAAsB,CAAC;QAC5B,CAAC,CAAC,IAAI,CACT,CAAC;AACJ,CAAC;AAED,SAAS,gBAAgB,CACvB,MAAkB,EAClB,IAA4B,EAC5B,UAAkC;IAElC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,EAAE,CAAC;IAC1C,MAAM,KAAK,GAAG,IAAI,EAAE,KAAK,CAAC;IAC1B,MAAM,IAAI,GAAG,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC;IAEvD,MAAM,QAAQ,GAAG,UAAU,CAAC,MAAM,CAAC,QAAQ,IAAI,MAAM,CAAC,IAAI,EAAE,QAAQ,IAAI,CAAC,CAAC,CAAC,CAAC;IAC5E,MAAM,QAAQ,GAAG,UAAU,CAAC,MAAM,CAAC,QAAQ,IAAI,MAAM,CAAC,IAAI,EAAE,QAAQ,IAAI,CAAC,CAAC,CAAC,CAAC;IAE5E,kBAAkB;IAClB,MAAM,cAAc,GAAG,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,MAAM,CAAC,IAAI,EAAE,CAAC;IAEhF,OAAO,CAAC,CAAC,QAAQ,EAAE,IAAI,EACrB,MAAM,CAAC,WAAW;QAChB,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,MAAM,CAAC,WAAW,CAAC;QACtD,CAAC,CAAC,IAAI;IAER,aAAa;IACb,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,EAC9B,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,OAAO,CAAC,EACtC,CAAC,CAAC,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CACtC;IAED,eAAe;IACf,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC;QACjC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EACxB,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,cAAc,CAAC,EAC5C,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,oBAAoB,EAAE,EACtC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAC1B,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,oBAAoB,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC,CAC5E,CACF,CACF;QACH,CAAC,CAAC,IAAI;IAER,iBAAiB;IACjB,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EACzB,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,EAC9B,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,UAAU,CAAC,EACzC,CAAC,CAAC,MAAM,EAAE,IAAI,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CACrC,EACD,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EACzB,CAAC,CAAC,KAAK,EAAE;QACP,KAAK,EAAE,cAAc,UAAU,CAAC,QAAQ,CAAC,EAAE;QAC3C,KAAK,EAAE,UAAU,QAAQ,GAAG,GAAG,GAAG;KACnC,CAAC,CACH,CACF;IAED,iBAAiB;IACjB,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EACxB,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,EAC9B,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,UAAU,CAAC,EACzC,CAAC,CAAC,MAAM,EAAE,IAAI,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CACrC,EACD,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EACzB,CAAC,CAAC,KAAK,EAAE;QACP,KAAK,EAAE,cAAc,UAAU,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE;QACjD,KAAK,EAAE,UAAU,QAAQ,GAAG,GAAG,GAAG;KACnC,CAAC,CACH,CACF;IAED,kBAAkB;IAClB,cAAc,CAAC,MAAM,GAAG,CAAC;QACvB,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EACzB,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,EAAE,aAAa,cAAc,CAAC,MAAM,GAAG,CAAC,EACxE,cAAc,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CACtC,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,qBAAqB,EAAE,EAC/C,CAAC,CAAC,IAAI,CACP,CACF,EACD,cAAc,CAAC,MAAM,GAAG,CAAC;YACvB,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,aAAa,EAAE,EAC/B,WAAW,cAAc,CAAC,MAAM,GAAG,CAAC,OAAO,CAC5C;YACH,CAAC,CAAC,IAAI,CACT;QACH,CAAC,CAAC,IAAI;IAER,qBAAqB;IACrB,UAAU;QACR,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,kBAAkB,EAAE,EACpC,CAAC,CAAC,QAAQ,EAAE;YACV,KAAK,EAAE,gBAAgB;YACvB,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;SACrD,EAAE,sBAAsB,CAAC,EAC1B,CAAC,CAAC,QAAQ,EAAE;YACV,KAAK,EAAE,gBAAgB;YACvB,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,UAAU,CAAC;SACtC,EAAE,sBAAsB,CAAC,EAC1B,CAAC,CAAC,QAAQ,EAAE;YACV,KAAK,EAAE,gBAAgB;YACvB,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC;SACzC,EAAE,yBAAyB,CAAC,CAC9B;QACH,CAAC,CAAC,IAAI,CACT,CAAC;AACJ,CAAC;AAED,SAAS,mBAAmB,CAAC,MAA+B;IAC1D,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,CAC3C,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,MAAM,IAAI,CAAC,KAAK,SAAS,IAAI,CAAC,KAAK,IAAI,CAC1D,CAAC;IAEF,OAAO,CAAC,CAAC,QAAQ,EAAE,IAAI,EACrB,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;QAC3B,IAAI,GAAG,KAAK,OAAO;YAAE,OAAO,IAAI,CAAC;QAEjC,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;YACvC,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;gBAChB,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,KAAK,CAAC,MAAM,SAAS;gBAC9D,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;YACpB,CAAC,CAAC,OAAO,KAAK,KAAK,QAAQ;gBACzB,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;gBACvB,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAEpB,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,YAAY,EAAE,EAC1C,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC,EAC7C,CAAC,CAAC,MAAM,EAAE,IAAI,EAAE,YAAY,CAAC,CAC9B,CAAC;IACJ,CAAC,CAAC,CACH,CAAC;AACJ,CAAC;AAED,SAAS,SAAS,CAAC,GAAW;IAC5B,OAAO,GAAG;SACP,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC;SAC1B,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;SACrC,IAAI,EAAE,CAAC;AACZ,CAAC"}

package/dist/viewer/components/elapsed-time.d.ts

@@ -0,0 +1,38 @@
+/**
+ * ElapsedTime — memoized component for live-ticking elapsed time display.
+ *
+ * Isolates the 1-second tick re-renders from parent components. When the
+ * shared tick timer fires, only this small component re-renders — the
+ * parent card (which may contain links, badges, metadata chips, etc.)
+ * is unaffected.
+ *
+ * Usage:
+ * ```tsx
+ * // Before: useTick inside the card triggers full card re-render every second
+ * //   const elapsed = useTick(run.startedAt, formatElapsed);
+ * //   return h("span", null, elapsed);
+ *
+ * // After: only the ElapsedTime component re-renders
+ * //   return h(ElapsedTime, { startedAt: run.startedAt, formatter: formatElapsed });
+ * ```
+ */
+export interface ElapsedTimeProps {
+    /** ISO 8601 timestamp of when the timer began. */
+    startedAt: string;
+    /** Pure function that converts a start timestamp to a display string. */
+    formatter: (startedAt: string) => string;
+    /** Optional CSS class for the wrapping <span>. */
+    class?: string;
+    /** Optional title attribute for tooltip. */
+    title?: string;
+}
+/**
+ * Renders a live-updating elapsed time string. The tick timer state is
+ * confined to this component, so parent components avoid re-rendering
+ * on every 1-second tick.
+ */
+export declare function ElapsedTime({ startedAt, formatter, class: className, title }: ElapsedTimeProps): import("preact").VNode<import("preact").ClassAttributes<HTMLElement> & {
+    class: string | undefined;
+    title: string | undefined;
+    "data-elapsed": boolean;
+}>;

package/dist/viewer/components/elapsed-time.js

@@ -0,0 +1,35 @@
+/**
+ * ElapsedTime — memoized component for live-ticking elapsed time display.
+ *
+ * Isolates the 1-second tick re-renders from parent components. When the
+ * shared tick timer fires, only this small component re-renders — the
+ * parent card (which may contain links, badges, metadata chips, etc.)
+ * is unaffected.
+ *
+ * Usage:
+ * ```tsx
+ * // Before: useTick inside the card triggers full card re-render every second
+ * //   const elapsed = useTick(run.startedAt, formatElapsed);
+ * //   return h("span", null, elapsed);
+ *
+ * // After: only the ElapsedTime component re-renders
+ * //   return h(ElapsedTime, { startedAt: run.startedAt, formatter: formatElapsed });
+ * ```
+ */
+import { h } from "preact";
+import { useTick } from "../hooks/index.js";
+// ── Component ────────────────────────────────────────────────────────
+/**
+ * Renders a live-updating elapsed time string. The tick timer state is
+ * confined to this component, so parent components avoid re-rendering
+ * on every 1-second tick.
+ */
+export function ElapsedTime({ startedAt, formatter, class: className, title }) {
+    const display = useTick(startedAt, formatter);
+    return h("span", {
+        class: className ?? undefined,
+        title: title ?? undefined,
+        "data-elapsed": true, // marker for testing / styling
+    }, display);
+}
+//# sourceMappingURL=elapsed-time.js.map

package/dist/viewer/components/elapsed-time.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elapsed-time.js","sourceRoot":"","sources":["../../../src/viewer/components/elapsed-time.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAe5C,wEAAwE;AAExE;;;;GAIG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAoB;IAC7F,MAAM,OAAO,GAAG,OAAO,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IAE9C,OAAO,CAAC,CAAC,MAAM,EAAE;QACf,KAAK,EAAE,SAAS,IAAI,SAAS;QAC7B,KAAK,EAAE,KAAK,IAAI,SAAS;QACzB,cAAc,EAAE,IAAI,EAAE,+BAA+B;KACtD,EAAE,OAAO,CAAC,CAAC;AACd,CAAC"}

package/dist/viewer/components/faq.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Global FAQ button — lives in the sidebar footer toolbar (bottom-left).
+ * Opens the full FAQ modal without view-contextual auto-expansion.
+ */
+export declare function GlobalFAQ(): import("preact").VNode<import("preact").Attributes>;
+/**
+ * Header FAQ button — contextual entry point in the content area header.
+ * Auto-expands the FAQ section relevant to the current view.
+ */
+export declare function HeaderFAQ({ view }: {
+    view: string;
+}): import("preact").VNode<import("preact").Attributes>;