@anlyx/ui 0.1.3 → 0.1.6-beta.0

package/dist/workspace/WorkspaceApp.js

@@ -0,0 +1,3016 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { BaseEdge, Handle, Position, ReactFlow, getSmoothStepPath } from "@xyflow/react";
+import { BookOpen, Box, Braces, BriefcaseBusiness, Check, ChevronRight, Circle, Clock3, Code2, Copy, Database, Download, FileCode2, FileText, Flag, Folder, Gauge, Layers3, Languages, Lock, Minus, MousePointerClick, Network, PanelLeft, Plus, RotateCw, Search, ShieldCheck, Tag, Workflow, Zap } from "lucide-react";
+import { siExpress, siNodedotjs, siReact, siTypescript } from "simple-icons";
+import { Fragment, createContext, useContext, useEffect, useMemo, useState } from "react";
+import { ScanTreeMap } from "./ScanTreeMap.js";
+import { buildProjectWorkspaceViewModel } from "./project-view-model.js";
+const WorkspaceLocaleContext = createContext("en");
+const TIMELINE_START_INSET_PERCENT = 2.5;
+const translations = {
+    en: {
+        appLabel: "Anlyx live workspace",
+        sidebarLabel: "Workspace navigation",
+        primaryNavLabel: "Primary",
+        flows: "Flows",
+        docs: "Docs",
+        language: "Language",
+        flowViews: "Flow views",
+        flow: "Flow",
+        waiting: "waiting",
+        lastScan: "Last import",
+        matchedBackendFlow: "Matched backend flow",
+        liveWorkspace: "Live workspace",
+        captureConnected: "Capture connected",
+        waitingForCapture: "Waiting for capture",
+        matchedSubtitle: "Browser request first, source-matched backend path follows.",
+        readyPrefix: "is ready. Use your local app and Anlyx will stream requests here.",
+        readySuffix: "",
+        selectedRequest: "Selected request",
+        selectedRequestLabel: "Selected request",
+        currentPage: "Current page",
+        pageUrlNotCaptured: "Page URL not captured",
+        requestEvidenceSummary: "Request evidence summary",
+        mappedEvidence: "Browser-observed request mapped to imported source evidence.",
+        mappedEvidenceWithRuntime: "Browser-observed request mapped to imported source evidence and development runtime spans.",
+        controllerPending: "Controller pending",
+        flowTiming: "Flow timing",
+        totalDuration: "Total duration",
+        fit: "Fit",
+        focusSlowestSegment: "Focus slowest segment",
+        zoomIn: "Zoom in",
+        totalDurationOverview: "Total duration overview",
+        slowestShownSegment: "Slowest shown segment",
+        startsAt: "starts at",
+        layer: "Layer",
+        node: "Node",
+        duration: "Duration",
+        notProven: "not proven",
+        knownBySourceOnly: "known by source evidence only",
+        bottleneck: "Bottleneck",
+        slowestSourceSegment: "Slowest source segment",
+        blocked: "blocked",
+        flowSummary: "Flow summary",
+        observedSourceMatchedPath: "Observed / source-matched path",
+        summaryMatchedCopy: "Browser-observed request first, then imported source evidence.",
+        layers: "layers",
+        knownDownstreamPath: "Known downstream path",
+        summaryNote: "Anlyx maps this browser-observed request to imported source evidence. Source-matched rows are not a production runtime trace; muted rows were not proven executed.",
+        flowDiagram: "Flow diagram",
+        observedSourceMatchedLegend: "Observed / source-matched path",
+        knownDownstreamLegend: "Known downstream (not proven)",
+        entryPoint: "Entry point",
+        fitView: "Fit view",
+        reset: "Reset",
+        zoomOut: "Zoom out",
+        authDecision: "Auth / Decision",
+        backend: "Backend",
+        service: "Service",
+        repository: "Repository",
+        database: "Database",
+        untrackedApp: "Untracked app",
+        untrackedRuntime: "not yet split into lower layers",
+        noScannedNode: "No source node matched",
+        downstreamMatched: "Downstream path matched by browser request and source evidence",
+        knownScannedNotProven: "Known source path, not proven executed",
+        inferred: "Inferred",
+        matched: "Matched",
+        evidenceInspector: "Evidence inspector",
+        anlyxFlow: "Anlyx Flow",
+        recentRequests: "Recent requests",
+        background: "Background",
+        currentRequestWindow: "Current page/action only",
+        request: "Request",
+        method: "Method",
+        path: "Path",
+        outcome: "Outcome",
+        mappingConfidence: "Mapping confidence",
+        evidenceUsed: "Evidence used",
+        coverage: "Coverage",
+        traceNote: "Trace note",
+        keepWorkspaceOpen: "Keep this workspace open, then use your local app. Captured requests will appear here.",
+        firstRequestHint: "Click your local app to stream the first browser request.",
+        waitingForBrowserRequests: "Waiting for browser requests",
+        liveCaptureReady: "Live capture ready",
+        noRequestSelected: "No request selected yet",
+        noCurrentPageRequests: "No requests observed on this page",
+        noCurrentPageRequestsCopy: "Anlyx captured the current page, but no API request has been observed for this page/action yet.",
+        emptyWorkspaceCopy: "No flow entries are loaded yet. Add Flow JSON to populate this workspace.",
+        requestProcessing: "Request/Processing",
+        application: "Application",
+        authDecisionLegend: "Auth / Decision",
+        result: "Result",
+        pending: "Pending",
+        ok: "OK",
+        unauthorized: "Unauthorized",
+        forbidden: "Forbidden",
+        conflict: "Conflict",
+        serverError: "Server error",
+        observed: "observed",
+        sourceMatched: "source matched",
+        browserSpan: "browser span",
+        serverRequestSpan: "server request span",
+        browserObserved: "browser observed",
+        devRuntimeSpan: "dev runtime span",
+        measuredRuntime: "measured runtime",
+        callCount: "calls",
+        sourceDerivedEstimate: "source-derived estimate",
+        responseMarker: "response marker",
+        estimate: "estimate",
+        browser: "Browser",
+        source: "Source",
+        backendCoverage: "Backend"
+    },
+    ko: {
+        appLabel: "Anlyx 라이브 워크스페이스",
+        sidebarLabel: "워크스페이스 내비게이션",
+        primaryNavLabel: "주 메뉴",
+        flows: "흐름",
+        docs: "문서",
+        language: "언어",
+        flowViews: "흐름 보기",
+        flow: "흐름",
+        waiting: "대기 중",
+        lastScan: "마지막 가져오기",
+        matchedBackendFlow: "매칭된 백엔드 흐름",
+        liveWorkspace: "라이브 워크스페이스",
+        captureConnected: "캡처 연결됨",
+        waitingForCapture: "캡처 대기 중",
+        matchedSubtitle: "브라우저 요청을 먼저 보고, 소스 매칭 백엔드 경로를 이어서 보여줍니다.",
+        readyPrefix: "준비되었습니다. 로컬 앱을 사용하면 Anlyx가 요청을 이곳으로 스트리밍합니다.",
+        readySuffix: "",
+        selectedRequest: "선택된 요청",
+        selectedRequestLabel: "선택된 요청",
+        currentPage: "현재 페이지",
+        pageUrlNotCaptured: "페이지 URL 미수집",
+        requestEvidenceSummary: "요청 근거 요약",
+        mappedEvidence: "브라우저에서 관찰된 요청을 가져온 소스 근거와 매칭했습니다.",
+        mappedEvidenceWithRuntime: "브라우저에서 관찰된 요청을 가져온 소스 근거와 개발용 런타임 span에 매칭했습니다.",
+        controllerPending: "컨트롤러 확인 대기",
+        flowTiming: "흐름 타이밍",
+        totalDuration: "전체 소요 시간",
+        fit: "맞춤",
+        focusSlowestSegment: "가장 느린 구간 강조",
+        zoomIn: "확대",
+        totalDurationOverview: "전체 소요 시간 요약",
+        slowestShownSegment: "가장 긴 구간",
+        startsAt: "시작",
+        layer: "레이어",
+        node: "노드",
+        duration: "소요 시간",
+        notProven: "실행 확인 안 됨",
+        knownBySourceOnly: "소스 근거로만 확인됨",
+        bottleneck: "병목",
+        slowestSourceSegment: "가장 긴 소스 구간",
+        blocked: "차단됨",
+        flowSummary: "흐름 요약",
+        observedSourceMatchedPath: "관찰 / 소스 매칭 경로",
+        summaryMatchedCopy: "브라우저 요청을 먼저 보여주고, 이어서 가져온 소스 근거를 보여줍니다.",
+        layers: "개 레이어",
+        knownDownstreamPath: "알려진 하위 경로",
+        summaryNote: "Anlyx는 브라우저에서 관찰된 요청을 가져온 소스 근거와 연결합니다. 소스 매칭 행은 운영 런타임 트레이스가 아니며, 흐리게 표시된 행은 실제 실행이 확인되지 않았습니다.",
+        flowDiagram: "흐름 다이어그램",
+        observedSourceMatchedLegend: "관찰 / 소스 매칭 경로",
+        knownDownstreamLegend: "알려진 하위 경로(실행 미확인)",
+        entryPoint: "진입점",
+        fitView: "화면 맞춤",
+        reset: "초기화",
+        zoomOut: "축소",
+        authDecision: "인증 / 결정",
+        backend: "백엔드",
+        service: "서비스",
+        repository: "레포지토리",
+        database: "데이터베이스",
+        untrackedApp: "미분해 앱 시간",
+        untrackedRuntime: "하위 레이어로 아직 분해되지 않음",
+        noScannedNode: "매칭된 소스 노드 없음",
+        downstreamMatched: "브라우저 요청과 소스 근거로 하위 경로가 매칭되었습니다",
+        knownScannedNotProven: "소스 근거로 알려진 경로지만 실행은 확인되지 않았습니다",
+        inferred: "추론됨",
+        matched: "매칭됨",
+        evidenceInspector: "근거 인스펙터",
+        anlyxFlow: "Anlyx 흐름",
+        recentRequests: "최근 요청",
+        background: "백그라운드",
+        currentRequestWindow: "현재 페이지/액션만",
+        request: "요청",
+        method: "메서드",
+        path: "경로",
+        outcome: "결과",
+        mappingConfidence: "매핑 신뢰도",
+        evidenceUsed: "사용된 근거",
+        coverage: "근거 범위",
+        traceNote: "트레이스 참고",
+        keepWorkspaceOpen: "이 워크스페이스를 열어둔 뒤 로컬 앱을 사용하세요. 캡처된 요청이 이곳에 표시됩니다.",
+        firstRequestHint: "로컬 앱을 클릭하면 첫 브라우저 요청이 스트리밍됩니다.",
+        waitingForBrowserRequests: "브라우저 요청 대기 중",
+        liveCaptureReady: "라이브 캡처 준비됨",
+        noRequestSelected: "아직 선택된 요청이 없습니다",
+        noCurrentPageRequests: "이 페이지에서 관찰된 요청이 없습니다",
+        noCurrentPageRequestsCopy: "현재 페이지는 감지됐지만, 이 페이지/액션에 연결된 API 요청은 아직 관찰되지 않았습니다.",
+        emptyWorkspaceCopy: "아직 불러온 flow entry가 없습니다. Flow JSON을 추가하면 이 워크스페이스가 채워집니다.",
+        requestProcessing: "요청/처리",
+        application: "애플리케이션",
+        authDecisionLegend: "인증 / 결정",
+        result: "결과",
+        pending: "대기 중",
+        ok: "정상",
+        unauthorized: "인증 필요",
+        forbidden: "권한 없음",
+        conflict: "충돌",
+        serverError: "서버 오류",
+        observed: "관찰됨",
+        sourceMatched: "소스 매칭",
+        browserSpan: "브라우저 구간",
+        serverRequestSpan: "서버 요청 구간",
+        browserObserved: "브라우저 관찰",
+        devRuntimeSpan: "개발 런타임 구간",
+        measuredRuntime: "실측 시간",
+        callCount: "회 호출",
+        sourceDerivedEstimate: "소스 기반 추정",
+        responseMarker: "응답 지점",
+        estimate: "추정",
+        browser: "브라우저",
+        source: "소스",
+        backendCoverage: "백엔드"
+    }
+};
+function useWorkspaceLocale() {
+    return useContext(WorkspaceLocaleContext);
+}
+function t(locale, key) {
+    return translations[locale][key] ?? translations.en[key];
+}
+const projectChromeTranslations = {
+    en: {
+        agent: "AI Agent",
+        available: "Available",
+        disabled: "Disabled",
+        language: "Language",
+        lastAnalysis: "Last analysis",
+        overview: "Overview",
+        capabilities: "Capabilities",
+        dataLifecycle: "Data Lifecycle",
+        impactMap: "Impact Map",
+        map: "Map",
+        pages: "Pages",
+        source: "Source",
+        timing: "Timing",
+        upToDate: "Up to date",
+        pagesAnalyzed: "pages analyzed"
+    },
+    ko: {
+        agent: "AI Agent",
+        available: "사용 가능",
+        disabled: "비활성",
+        language: "언어",
+        lastAnalysis: "마지막 분석",
+        overview: "Overview",
+        capabilities: "Capabilities",
+        dataLifecycle: "Data Lifecycle",
+        impactMap: "Impact Map",
+        map: "맵",
+        pages: "페이지",
+        source: "소스",
+        timing: "타이밍",
+        upToDate: "최신 상태",
+        pagesAnalyzed: "개 페이지 분석됨"
+    },
+    zh: {
+        agent: "AI Agent",
+        available: "可用",
+        disabled: "已停用",
+        language: "语言",
+        lastAnalysis: "最后分析",
+        overview: "Overview",
+        capabilities: "Capabilities",
+        dataLifecycle: "Data Lifecycle",
+        impactMap: "Impact Map",
+        map: "地图",
+        pages: "页面",
+        source: "来源",
+        timing: "计时",
+        upToDate: "已是最新",
+        pagesAnalyzed: "个页面已分析"
+    },
+    ja: {
+        agent: "AI Agent",
+        available: "利用可能",
+        disabled: "無効",
+        language: "言語",
+        lastAnalysis: "最終分析",
+        overview: "Overview",
+        capabilities: "Capabilities",
+        dataLifecycle: "Data Lifecycle",
+        impactMap: "Impact Map",
+        map: "マップ",
+        pages: "ページ",
+        source: "ソース",
+        timing: "タイミング",
+        upToDate: "最新",
+        pagesAnalyzed: "ページ分析済み"
+    },
+    fr: {
+        agent: "Agent IA",
+        available: "Disponible",
+        disabled: "Désactivé",
+        language: "Langue",
+        lastAnalysis: "Dernière analyse",
+        overview: "Overview",
+        capabilities: "Capabilities",
+        dataLifecycle: "Data Lifecycle",
+        impactMap: "Impact Map",
+        map: "Carte",
+        pages: "Pages",
+        source: "Source",
+        timing: "Timing",
+        upToDate: "À jour",
+        pagesAnalyzed: "pages analysées"
+    }
+};
+function tp(locale, key) {
+    return projectChromeTranslations[locale]?.[key] ?? projectChromeTranslations.en[key];
+}
+function projectDefaultLocale(data) {
+    return data.dictionary?.defaultLanguage ?? "en";
+}
+const layerOrder = [
+    "action",
+    "api",
+    "controller",
+    "auth",
+    "decision",
+    "service",
+    "repository",
+    "database",
+    "result"
+];
+const layerIcons = {
+    action: Zap,
+    api: Network,
+    auth: Lock,
+    controller: FileCode2,
+    database: Database,
+    decision: Lock,
+    repository: Box,
+    result: Flag,
+    service: Layers3
+};
+export function WorkspaceApp({ data, projectData, projectValidationReport, streamUrl = "/_anlyx/events/stream", initialRecords = [] }) {
+    if (projectData) {
+        return (_jsx(ProjectWorkspacePreview, { data: projectData, ...(projectValidationReport ? { validationReport: projectValidationReport } : {}) }));
+    }
+    if (!data) {
+        return (_jsx("main", { className: "project-workspace-preview", role: "application", "aria-label": "Anlyx workspace", children: _jsxs("section", { className: "project-workspace-preview__empty", children: [_jsx("strong", { children: "No Anlyx project data loaded" }), _jsx("span", { children: "Start the local 4777 viewer with anlyx.project.json." })] }) }));
+    }
+    return _jsx(LegacyWorkspaceApp, { data: data, initialRecords: initialRecords, streamUrl: streamUrl });
+}
+function LegacyWorkspaceApp({ data, streamUrl, initialRecords }) {
+    const [records, setRecords] = useState(initialRecords);
+    const [selectedId, setSelectedId] = useState(initialRecords[0]?.id);
+    const [tab, setTab] = useState("timing");
+    const [activeView, setActiveView] = useState("flows");
+    const [locale, setLocale] = useState("en");
+    const [pageContext, setPageContext] = useState();
+    const currentPageRecords = useMemo(() => recordsForPageContext(records, pageContext), [records, pageContext]);
+    const currentPagePrimaryRecords = useMemo(() => currentPageRecords.filter(isPrimaryRecord), [currentPageRecords]);
+    const selectedRecord = currentPagePrimaryRecords.find((record) => record.id === selectedId) ??
+        currentPagePrimaryRecords[0];
+    const scopedRecords = scopedRecentRecords(currentPageRecords, selectedRecord);
+    useEffect(() => {
+        if (currentPagePrimaryRecords.length === 0) {
+            if (pageContext && selectedId) {
+                setSelectedId(undefined);
+            }
+            return;
+        }
+        if (!selectedId || !currentPagePrimaryRecords.some((record) => record.id === selectedId)) {
+            const firstRecord = currentPagePrimaryRecords[0];
+            if (firstRecord) {
+                setSelectedId(firstRecord.id);
+            }
+        }
+    }, [currentPagePrimaryRecords, pageContext, selectedId]);
+    useEffect(() => {
+        if (typeof EventSource === "undefined") {
+            return undefined;
+        }
+        const source = new EventSource(streamUrl);
+        const handlePageContext = (event) => {
+            const context = parsePageContextEvent(event.data);
+            if (context) {
+                setPageContext(context);
+            }
+        };
+        const handleFlow = (event) => {
+            const record = parseFlowRecord(event.data);
+            if (!record) {
+                return;
+            }
+            setRecords((current) => [record, ...current.filter((item) => item.id !== record.id)]);
+            setSelectedId((current) => {
+                if (isPrimaryRecord(record)) {
+                    return record.id;
+                }
+                return current;
+            });
+        };
+        source.addEventListener("page-context", handlePageContext);
+        source.addEventListener("flow", handleFlow);
+        return () => {
+            source.removeEventListener("page-context", handlePageContext);
+            source.removeEventListener("flow", handleFlow);
+            source.close();
+        };
+    }, [streamUrl]);
+    return (_jsx(WorkspaceLocaleContext.Provider, { value: locale, children: _jsxs("main", { className: `live-workspace live-workspace--${activeView === "flows" ? tab : activeView}`, role: "application", "aria-label": t(locale, "appLabel"), children: [_jsx(WorkspaceSidebar, { activeView: activeView, locale: locale, onLocaleChange: setLocale, onViewChange: setActiveView }), _jsx("section", { className: "workspace-main", children: activeView === "json" ? (_jsx(JsonReaderView, { data: data })) : activeView === "map" ? (_jsx(ScanTreeMap, { data: data })) : (_jsxs("div", { className: "timing-layout", id: "workspace", children: [_jsxs("div", { className: "timing-content", children: [_jsx(WorkspaceHeader, { data: data, record: selectedRecord, recordCount: records.length, activeTab: tab, onTabChange: setTab }), _jsx(RequestContextPanel, { data: data, pageContext: pageContext, record: selectedRecord }), selectedRecord ? (_jsx(WorkspaceContent, { record: selectedRecord, tab: tab })) : (_jsx(EmptyWorkspace, { pageContext: pageContext }))] }), _jsx(FlowInspector, { pageContext: pageContext, record: selectedRecord, records: scopedRecords, selectedId: selectedRecord?.id, onSelect: setSelectedId })] })) })] }) }));
+}
+function ProjectWorkspacePreview({ data, validationReport }) {
+    const [activeTab, setActiveTab] = useState("pages");
+    const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
+    const [projectLocale, setProjectLocale] = useState(() => projectDefaultLocale(data));
+    const [selectedPageId, setSelectedPageId] = useState(data.pages[0]?.id);
+    const model = useMemo(() => buildProjectWorkspaceViewModel(data, selectedPageId), [data, selectedPageId]);
+    const rawJson = useMemo(() => JSON.stringify(data, null, 2), [data]);
+    useEffect(() => {
+        setProjectLocale(projectDefaultLocale(data));
+    }, [data]);
+    return (_jsxs("main", { className: "project-workspace-preview", role: "application", "aria-label": "Anlyx project workspace", children: [_jsx(ProjectTopBar, { model: model, locale: projectLocale, onLocaleChange: setProjectLocale }), _jsxs("div", { className: `project-workspace-shell${isSidebarCollapsed ? " is-sidebar-collapsed" : ""}`, children: [_jsx(ProjectSidebar, { activeTab: activeTab, isCollapsed: isSidebarCollapsed, locale: projectLocale, onTabChange: setActiveTab, onToggleCollapse: () => setIsSidebarCollapsed((value) => !value) }), _jsx("div", { className: "project-workspace-surface", children: activeTab === "pages" ? (_jsx(ProjectPagesWorkspace, { data: data, model: model, ...(validationReport ? { validationReport } : {}), selectedPageId: model.selectedPage?.page.id, onPageSelect: setSelectedPageId, onOpenMap: () => setActiveTab("map") })) : activeTab === "map" ? (_jsx(ProjectMapView, { data: data, model: model })) : activeTab === "overview" ? (_jsx(ProjectOverviewView, { data: data })) : activeTab === "capabilities" ? (_jsx(ProjectCapabilitiesView, { data: data, model: model })) : (_jsx(ProjectJsonView, { data: data, rawJson: rawJson, model: model, ...(validationReport ? { validationReport } : {}) })) })] }), _jsx(ProjectStatusBar, { data: data, locale: projectLocale, model: model, ...(validationReport ? { validationReport } : {}) })] }));
+}
+function readProjectMetadataString(model, key) {
+    const value = model.project.metadata?.[key];
+    return typeof value === "string" && value.trim().length > 0 ? value : undefined;
+}
+function projectAgentName(model) {
+    return model.project.generatedBy?.name ?? model.project.generatedBy?.kind ?? "AI Agent";
+}
+function projectSourceFile(model) {
+    return readProjectMetadataString(model, "sourceFile") ?? "anlyx.project.json";
+}
+function ProjectTopBar({ model }) {
+    return (_jsxs("header", { className: "project-topbar", children: [_jsxs("div", { className: "project-topbar__brand", children: [_jsx("img", { alt: "Anlyx", src: "/workspace/anlyx-logo-transparent.png" }), _jsxs("span", { children: ["v", model.schemaVersion] })] }), _jsxs("button", { className: "project-topbar__project", type: "button", children: [_jsx(Folder, { size: 17 }), _jsx("span", { children: model.project.name }), _jsx(ChevronRight, { size: 14 })] }), _jsx("div", { className: "project-topbar__spacer" })] }));
+}
+function projectTabLabel(tab, locale) {
+    if (tab === "pages")
+        return tp(locale, "pages");
+    if (tab === "map")
+        return tp(locale, "map");
+    if (tab === "overview")
+        return tp(locale, "overview");
+    if (tab === "capabilities")
+        return tp(locale, "capabilities");
+    return "JSON";
+}
+function ProjectSidebar({ activeTab, isCollapsed, locale, onTabChange, onToggleCollapse }) {
+    const items = [
+        { icon: FileText, tab: "pages" },
+        { icon: Network, tab: "map" },
+        { icon: Gauge, tab: "overview" },
+        { icon: Workflow, tab: "capabilities" },
+        { icon: Braces, tab: "json" }
+    ];
+    return (_jsxs("aside", { className: `project-sidebar${isCollapsed ? " is-collapsed" : ""}`, "aria-label": "Project navigation", children: [_jsxs("div", { className: "project-sidebar__group", children: [isCollapsed ? null : _jsx("h2", { children: "Project" }), items.map(({ icon: Icon, tab }) => (_jsxs("button", { "aria-current": activeTab === tab ? "page" : undefined, "aria-label": isCollapsed ? projectTabLabel(tab, locale) : undefined, className: activeTab === tab ? "is-active" : "", title: isCollapsed ? projectTabLabel(tab, locale) : undefined, type: "button", onClick: () => onTabChange(tab), children: [_jsx(Icon, { size: 17 }), isCollapsed ? null : _jsx("span", { children: projectTabLabel(tab, locale) })] }, tab)))] }), _jsxs("button", { "aria-label": isCollapsed ? "Expand project navigation" : "Collapse project navigation", className: "project-sidebar__collapse", title: isCollapsed ? "Expand" : undefined, type: "button", onClick: onToggleCollapse, children: [_jsx(PanelLeft, { size: 16 }), isCollapsed ? null : _jsx("span", { children: "Collapse" })] })] }));
+}
+function ProjectOverviewView({ data }) {
+    const overview = data.overview;
+    const stack = projectOverviewStack(overview.implementation);
+    const summary = overview.summary ??
+        "Inspect the authored Project JSON to understand pages, flows, requests, architecture, evidence, and unknowns.";
+    return (_jsx("section", { className: "anlyx-understanding anlyx-overview", "aria-label": "Project overview", children: _jsx("div", { className: "anlyx-overview-layout", children: _jsxs("div", { className: "anlyx-overview-main", children: [_jsxs("header", { className: "anlyx-readme-header", children: [_jsx("h1", { children: "Anlyx overview" }), _jsx("p", { children: summary })] }), _jsxs("section", { className: "anlyx-readme-section", "aria-label": "Built with", children: [_jsx("h2", { children: "Built with" }), stack.length > 0 ? (_jsx("div", { className: "anlyx-stack-grid", children: stack.map((item) => (_jsxs("div", { className: "anlyx-stack-item", children: [_jsx(ProjectStackIconView, { icon: item.icon, tone: item.tone }), _jsxs("div", { children: [_jsx("strong", { children: item.name }), _jsx("small", { children: item.detail })] })] }, item.name))) })) : (_jsx("p", { className: "project-muted", children: "No implementation stack authored." }))] }), _jsxs("section", { className: "anlyx-readme-section", "aria-label": "What it does", children: [_jsx("h2", { children: "What it does" }), _jsxs("div", { className: "anlyx-feature-list", children: [_jsx(ProjectReadmeFeature, { icon: FileText, title: "Inspect pages", description: "Explore the UI surfaces, components, and states that make up your app." }), _jsx(ProjectReadmeFeature, { icon: Workflow, title: "Trace request flows", description: "Follow the path from UI events to API requests and data responses." }), _jsx(ProjectReadmeFeature, { icon: Braces, title: "Review authored JSON", description: "Open the source Project JSON and understand the modeled structure." }), _jsx(ProjectReadmeFeature, { icon: Search, title: "Check evidence & unknowns", description: "See what\u2019s backed by evidence and what needs review or clarification." })] })] })] }) }) }));
+}
+function ProjectStackIconView({ icon, tone }) {
+    if (icon.kind === "lucide") {
+        const Icon = icon.icon;
+        return (_jsx("span", { className: `anlyx-stack-icon is-${tone}`, "aria-hidden": "true", children: _jsx(Icon, { size: 22 }) }));
+    }
+    return (_jsx("span", { className: `anlyx-stack-icon is-${tone}`, "aria-hidden": "true", style: { "--stack-icon-color": `#${icon.hex}` }, children: _jsx("svg", { role: "img", viewBox: "0 0 24 24", "aria-label": icon.title, children: _jsx("path", { d: icon.path }) }) }));
+}
+function ProjectReadmeFeature({ description, icon: Icon, title }) {
+    return (_jsxs("div", { className: "anlyx-readme-feature", children: [_jsx("span", { children: _jsx(Icon, { size: 20 }) }), _jsxs("div", { children: [_jsx("strong", { children: title }), _jsx("p", { children: description })] })] }));
+}
+function projectOverviewStack(implementation) {
+    return implementation.slice(0, 5).map((item) => ({
+        detail: item.description ?? capitalize(item.kind),
+        icon: stackIcon(item.name, item.kind),
+        name: stackDisplayName(item.name),
+        tone: stackTone(item.name, item.kind)
+    }));
+}
+function stackDisplayName(value) {
+    if (/react/i.test(value))
+        return "React";
+    if (/typescript|ts\b/i.test(value))
+        return "TypeScript";
+    if (/node|runtime|cli/i.test(value))
+        return "Node.js";
+    if (/express/i.test(value))
+        return "Express";
+    if (/schema|project json|contract/i.test(value))
+        return "Project JSON";
+    return value;
+}
+function stackIcon(name, kind) {
+    const value = `${name} ${kind}`;
+    if (/react/i.test(value))
+        return simpleStackIcon(siReact);
+    if (/typescript|ts\b/i.test(value))
+        return simpleStackIcon(siTypescript);
+    if (/node|runtime|cli/i.test(value))
+        return simpleStackIcon(siNodedotjs);
+    if (/express/i.test(value))
+        return simpleStackIcon(siExpress);
+    if (/schema|json|contract/i.test(value))
+        return { kind: "lucide", icon: Braces };
+    return { kind: "lucide", icon: Code2 };
+}
+function simpleStackIcon(icon) {
+    return {
+        hex: icon.hex,
+        kind: "simple",
+        path: icon.path,
+        title: icon.title
+    };
+}
+function stackTone(name, kind) {
+    const value = `${name} ${kind}`;
+    if (/react/i.test(value))
+        return "react";
+    if (/typescript|ts\b/i.test(value))
+        return "typescript";
+    if (/node|runtime|cli/i.test(value))
+        return "node";
+    if (/express/i.test(value))
+        return "express";
+    if (/schema|json|contract/i.test(value))
+        return "json";
+    return "json";
+}
+function ProjectCapabilitiesView({ data }) {
+    const defaultCapability = data.capabilities.find((capability) => /inspect page behavior/i.test(capability.name)) ??
+        data.capabilities[0];
+    const [selectedId, setSelectedId] = useState(defaultCapability?.id);
+    const [capabilityFilter, setCapabilityFilter] = useState("all");
+    const visibleCapabilities = data.capabilities.filter((capability) => {
+        if (capabilityFilter === "connected")
+            return capability.status === "connected";
+        if (capabilityFilter === "entry")
+            return Boolean(capability.entry);
+        if (capabilityFilter === "user")
+            return capability.actorRole === "user";
+        return true;
+    });
+    const selected = visibleCapabilities.find((capability) => capability.id === selectedId) ??
+        data.capabilities.find((capability) => capability.id === selectedId) ??
+        defaultCapability;
+    const connected = data.capabilities.filter((capability) => capability.status === "connected").length;
+    const userFacing = data.capabilities.filter((capability) => capability.actorRole !== "system").length;
+    const unresolved = data.capabilities.filter((capability) => capability.status !== "connected").length;
+    return (_jsx("section", { className: "anlyx-understanding anlyx-capabilities", "aria-label": "Project capabilities", children: _jsxs("div", { className: "anlyx-overview-layout", children: [_jsxs("div", { className: "anlyx-overview-main", children: [_jsxs("div", { className: "anlyx-metric-row", children: [_jsx(ProjectUnderstandingMetric, { icon: Workflow, label: "Total capabilities", value: String(data.capabilities.length), detail: "Authored" }), _jsx(ProjectUnderstandingMetric, { icon: Check, label: "Connected", value: String(connected), detail: `${percentage(connected, data.capabilities.length)}% of total` }), _jsx(ProjectUnderstandingMetric, { icon: MousePointerClick, label: "User-facing", value: String(userFacing), detail: `${percentage(userFacing, data.capabilities.length)}% of total` }), _jsx(ProjectUnderstandingMetric, { icon: Gauge, label: "Unresolved", value: String(unresolved), detail: "Requires review" })] }), _jsxs("div", { className: "anlyx-filter-row", "aria-label": "Filter capabilities by actor", children: [_jsx("span", { children: "Filter by" }), _jsx("button", { className: capabilityFilter === "all" ? "is-selected" : "", type: "button", onClick: () => setCapabilityFilter("all"), children: "All" }), _jsx("button", { className: capabilityFilter === "user" ? "is-selected" : "", type: "button", onClick: () => setCapabilityFilter("user"), children: "User" }), _jsx("button", { className: capabilityFilter === "entry" ? "is-selected" : "", type: "button", onClick: () => setCapabilityFilter("entry"), children: "Entry surface" }), _jsx("button", { className: capabilityFilter === "connected" ? "is-selected" : "", type: "button", onClick: () => setCapabilityFilter("connected"), children: "Connected only" })] }), data.capabilities.length === 0 ? (_jsx(ProjectSurfaceEmpty, { title: "No capabilities authored", description: "Add capabilities to describe product behavior without opening source code." })) : (_jsxs("div", { className: "anlyx-capability-table", role: "table", "aria-label": "Capabilities", children: [_jsxs("div", { className: "anlyx-capability-row is-header", role: "row", children: [_jsx("span", { children: "Actor" }), _jsx("span", { children: "Capability" }), _jsx("span", { children: "Entry surface" }), _jsx("span", { children: "Request" }), _jsx("span", { children: "Data touched" }), _jsx("span", { children: "Status" })] }), visibleCapabilities.map((capability) => (_jsxs("button", { className: `anlyx-capability-row${capability.id === selected?.id ? " is-selected" : ""}`, type: "button", onClick: () => setSelectedId(capability.id), children: [_jsxs("span", { className: `anlyx-role-badge is-${capability.actorRole}`, children: [_jsx("span", { className: `anlyx-role-dot is-${capability.actorRole}` }), capitalize(capability.actorRole)] }), _jsxs("span", { className: "anlyx-capability-name", children: [_jsx("strong", { children: capability.name }), _jsx("em", { children: capability.description ?? capability.visibleResult ?? "No capability description authored." })] }), _jsx("span", { children: capability.entry?.label ?? "No entry authored" }), _jsx("span", { children: requestSummary(data, capability.requestIds) }), _jsx("span", { children: capability.dataRefs.map((ref) => ref.name).join(", ") || "No data refs" }), _jsx(ProjectStatusPill, { status: capability.status })] }, capability.id))), _jsxs("div", { className: "anlyx-capability-footer", children: ["Showing ", visibleCapabilities.length, " of ", data.capabilities.length, " capabilities"] })] }))] }), _jsx("aside", { className: "anlyx-surface-rail", "aria-label": "Capability details", children: selected ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "anlyx-rail-section is-tinted", children: [_jsx("h2", { children: selected.name }), _jsx(ProjectStatusPill, { status: selected.status })] }), _jsxs("div", { className: "anlyx-rail-section", children: [_jsx("h3", { children: "Why this matters" }), _jsx("p", { children: capabilityWhyThisMatters(selected) })] }), _jsxs("div", { className: "anlyx-rail-section", children: [_jsx("h3", { children: "Trace summary" }), _jsxs("dl", { className: "anlyx-capability-compact-facts", children: [_jsxs("div", { children: [_jsx("dt", { children: "Actor" }), _jsx("dd", { children: capitalize(selected.actorRole) })] }), _jsxs("div", { children: [_jsx("dt", { children: "Request" }), _jsx("dd", { children: requestSummary(data, selected.requestIds) })] }), _jsxs("div", { children: [_jsx("dt", { children: "Confidence" }), _jsx("dd", { children: capitalize(selected.confidence ?? "unknown") })] })] })] }), _jsxs("div", { className: "anlyx-rail-section", children: [_jsx("h3", { children: "Evidence summary" }), _jsx(ProjectCapabilityEvidenceSummary, { capability: selected })] })] })) : (_jsx(ProjectSurfaceEmpty, { title: "No capability selected", description: "Select a capability row." })) })] }) }));
+}
+function ProjectCapabilityEvidenceSummary({ capability }) {
+    const pageCount = new Set(capability.pageIds).size;
+    const flowCount = new Set(capability.flowIds).size;
+    const dataCount = capability.dataRefs.length;
+    return (_jsxs("div", { className: "anlyx-evidence-summary-list", children: [_jsxs("span", { children: [_jsx(FileText, { size: 14 }), pageCount, " pages analyzed"] }), _jsxs("span", { children: [_jsx(Workflow, { size: 14 }), flowCount, " flows connected"] }), _jsxs("span", { children: [_jsx(Database, { size: 14 }), dataCount, " data objects referenced"] })] }));
+}
+function ProjectTrustSummary({ data, validationReport }) {
+    const coverage = projectPageCoverageSummary(data, validationReport);
+    const coverageStatus = validationReport?.summary.coverageStatus ?? data.coverage?.status;
+    const sourceIssueCount = validationReport?.summary.sourceIssueCount;
+    const sourceIssueDetails = validationReport
+        ? formatSourceIssueDetails(validationReport.summary.sourceIssueBreakdown)
+        : "";
+    const issueCount = validationReport?.issues.length;
+    const shouldShow = Boolean(coverage.detected) ||
+        coverageStatus === "partial" ||
+        coverageStatus === "unknown" ||
+        (sourceIssueCount ?? 0) > 0 ||
+        (issueCount ?? 0) > 0;
+    if (!shouldShow) {
+        return null;
+    }
+    return (_jsxs("section", { className: "project-trust-summary", "aria-label": "Project analysis coverage", children: [_jsxs("div", { children: [_jsx("span", { className: "project-trust-summary__eyebrow", children: "Analysis scope" }), _jsx("strong", { children: coverageStatus === "partial" ? "Partial analysis" : "Coverage summary" })] }), _jsxs("dl", { children: [_jsxs("div", { children: [_jsx("dt", { children: "Pages" }), _jsx("dd", { children: coverage.value })] }), sourceIssueCount !== undefined ? (_jsxs("div", { children: [_jsx("dt", { children: "Source issues" }), _jsxs("dd", { className: sourceIssueCount > 0 ? "is-warning" : "is-ok", children: [sourceIssueCount, sourceIssueDetails ? _jsx("small", { children: sourceIssueDetails }) : null] })] })) : null, issueCount !== undefined ? (_jsxs("div", { children: [_jsx("dt", { children: "Validation issues" }), _jsx("dd", { className: issueCount > 0 ? "is-warning" : "is-ok", children: issueCount })] })) : null] })] }));
+}
+function capabilityWhyThisMatters(capability) {
+    if (/inspect page behavior/i.test(capability.name)) {
+        return "This capability lets a user inspect authored pages, primary requests, selected flow layers, evidence, and unknowns—providing clarity into how data moves and where gaps exist.";
+    }
+    return capability.visibleResult ?? capability.description ?? "This capability ties a user-facing action to authored requests, data, evidence, and confidence.";
+}
+function ProjectUnderstandingMetric({ detail, icon: Icon, label, value }) {
+    return (_jsxs("div", { className: "anlyx-understanding-metric", children: [_jsx("span", { children: _jsx(Icon, { size: 20 }) }), _jsxs("div", { children: [_jsx("small", { children: label }), _jsx("strong", { children: value }), _jsx("em", { children: detail })] })] }));
+}
+function ProjectSurfaceEmpty({ description, title }) {
+    return (_jsxs("div", { className: "anlyx-surface-empty", children: [_jsx(Minus, { size: 18 }), _jsx("strong", { children: title }), _jsx("p", { children: description })] }));
+}
+function ProjectStatusPill({ status }) {
+    return _jsx("span", { className: `anlyx-status-pill is-${status}`, children: status });
+}
+function percentage(value, total) {
+    if (total <= 0)
+        return 0;
+    return Math.round((value / total) * 100);
+}
+function requestSummary(data, requestIds) {
+    const requests = requestIds
+        .map((id) => data.requests.find((request) => request.id === id))
+        .filter((request) => Boolean(request));
+    if (requests.length === 0)
+        return "No request authored";
+    return requests
+        .slice(0, 2)
+        .map((request) => `${request.method ?? "REQ"} ${request.path ?? request.label ?? request.id}`)
+        .join(", ");
+}
+function ProjectPagesWorkspace({ data, model, onOpenMap, onPageSelect, selectedPageId, validationReport }) {
+    const [isPageIndexCollapsed, setIsPageIndexCollapsed] = useState(false);
+    return (_jsxs("div", { className: `anlyx-pages project-pages-layout${isPageIndexCollapsed ? " is-index-collapsed" : ""}`, children: [_jsx(ProjectPageIndex, { data: data, isCollapsed: isPageIndexCollapsed, model: model, ...(validationReport ? { validationReport } : {}), selectedPageId: selectedPageId, onPageSelect: onPageSelect, onToggleCollapse: () => setIsPageIndexCollapsed((value) => !value) }), _jsx(ProjectPagesView, { data: data, model: model, ...(validationReport ? { validationReport } : {}), selectedPage: model.selectedPage, onOpenMap: onOpenMap })] }));
+}
+function ProjectPageIndex({ data, isCollapsed, model, onPageSelect, onToggleCollapse, selectedPageId, validationReport }) {
+    const pages = model.pageGroups.flatMap((group) => group.pages);
+    const pageCoverage = projectPageCoverageSummary(data, validationReport);
+    const [query, setQuery] = useState("");
+    const normalizedQuery = query.trim().toLowerCase();
+    const visibleGroups = normalizedQuery
+        ? model.pageGroups
+            .map((group) => ({
+            ...group,
+            pages: group.pages.filter((page) => page.title.toLowerCase().includes(normalizedQuery) ||
+                page.path.toLowerCase().includes(normalizedQuery))
+        }))
+            .filter((group) => group.pages.length > 0)
+        : model.pageGroups;
+    return (_jsxs("aside", { className: `anlyx-page-index project-page-index-panel${isCollapsed ? " is-collapsed" : ""}`, "aria-label": "Page index", children: [_jsxs("div", { className: "project-panel-title", children: [isCollapsed ? null : (_jsxs("div", { children: [_jsx("h2", { children: "Page Index" }), _jsx("span", { children: pageCoverage.label })] })), _jsx("button", { "aria-expanded": !isCollapsed, "aria-label": isCollapsed ? "Expand page index" : "Collapse page index", type: "button", onClick: onToggleCollapse, children: _jsx(PanelLeft, { size: 15 }) })] }), isCollapsed ? (_jsx("nav", { className: "project-page-index--collapsed", "aria-label": "Project pages", children: pages.map((page) => (_jsx("button", { "aria-label": `${page.title} ${page.path}`, className: selectedPageId === page.id ? "is-active" : "", title: `${page.title} ${page.path}`, type: "button", onClick: () => onPageSelect(page.id), children: _jsx(BookOpen, { size: 16 }) }, page.id))) })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "project-page-index__search", children: [_jsx(Search, { size: 16 }), _jsx("input", { "aria-label": "Search pages", placeholder: "Search pages...", type: "search", value: query, onChange: (event) => setQuery(event.currentTarget.value) }), _jsx("kbd", { children: "/" })] }), _jsx("nav", { className: "project-page-index", "aria-label": "Project pages", children: visibleGroups.map((group) => (_jsxs("section", { children: [_jsxs("h2", { children: [_jsx("span", { children: group.name }), _jsx("span", { children: group.pages.length })] }), group.pages.map((page) => (_jsxs("button", { className: selectedPageId === page.id ? "is-active" : "", type: "button", onClick: () => onPageSelect(page.id), children: [_jsx(BookOpen, { size: 15 }), _jsx("span", { children: page.title }), _jsx("em", { children: page.path })] }, page.id)))] }, group.id))) }), _jsxs("div", { className: "project-page-index-panel__footer", children: [_jsx("span", { children: "Total pages" }), _jsx("strong", { children: model.totals.pages })] })] }))] }));
+}
+function ProjectPagesView({ data, model, onOpenMap, selectedPage, validationReport }) {
+    const defaultRequestId = getDefaultPageRequestId(selectedPage);
+    const [selectedRequestId, setSelectedRequestId] = useState(defaultRequestId);
+    const [isRailOpen, setIsRailOpen] = useState(false);
+    useEffect(() => {
+        setSelectedRequestId(defaultRequestId);
+    }, [defaultRequestId, selectedPage?.page.id]);
+    if (!selectedPage) {
+        return (_jsxs("section", { className: "project-workspace-preview__empty", children: [_jsx("strong", { children: "No pages authored yet" }), _jsx("span", { children: "Ask the project Agent to write pages into anlyx.project.json." })] }));
+    }
+    const selectedRequest = selectedPage.requests.find((request) => request.id === selectedRequestId) ??
+        getDefaultPageRequest(selectedPage);
+    const selectedRequestLabel = selectedRequest?.path ?? selectedRequest?.label ?? selectedRequest?.id ?? "selected request";
+    const requestGroups = groupRequestsByRole(selectedPage.requests);
+    const selectedRequestFlows = selectedRequest
+        ? selectedPage.flows.filter((flow) => flow.request?.id === selectedRequest.id ||
+            (flow.request?.path && flow.request.path === selectedRequest.path))
+        : [];
+    const visibleFlows = selectedRequest ? selectedRequestFlows : selectedPage.flows;
+    const unknownEvidence = selectedPage.evidence.filter((item) => item.status === "not-proven" || item.status === "unknown");
+    const selectedFlow = visibleFlows[0];
+    return (_jsxs("div", { className: `project-page-workspace${isRailOpen ? "" : " is-rail-collapsed"}`, children: [_jsxs("main", { className: "anlyx-page-report project-page-workspace__main", children: [!isRailOpen ? (_jsxs("button", { className: "anlyx-rail-reopen", type: "button", onClick: () => setIsRailOpen(true), children: [_jsx(PanelLeft, { size: 14 }), "Details"] })) : null, _jsx(ProjectTrustSummary, { data: data, ...(validationReport ? { validationReport } : {}) }), _jsx(PageBrief, { selectedPage: selectedPage }), _jsxs("div", { className: "project-page-two-up", children: [_jsx(ProjectSection, { title: "Story", children: _jsx("p", { className: "project-story-copy", children: selectedPage.page.description ??
+                                        "No story was authored for this page yet. Ask the project Agent to describe what this page does and why it exists." }) }), _jsx(ProjectSection, { className: "anlyx-user-actions", title: "User actions", children: _jsx("div", { className: "anlyx-action-list project-action-list", children: selectedPage.features.length > 0 ? (selectedPage.features.map((feature) => (_jsx(ProjectFeatureCard, { feature: feature }, feature.id)))) : (_jsx("p", { className: "project-muted", children: "No user actions authored for this page." })) }) })] }), _jsx(RequestsByRole, { groups: requestGroups, selectedRequest: selectedRequest, onRequestSelect: setSelectedRequestId }), _jsx(ProjectSection, { className: "anlyx-flow-section", meta: selectedRequest
+                            ? `${selectedRequest.method ?? "HTTP"} ${selectedRequestLabel}`
+                            : undefined, title: "Selected Flow", children: selectedFlow ? (_jsx(ProjectFlowTrace, { flow: selectedFlow })) : (_jsx("p", { className: "project-muted", children: "No backend flow linked to this request." })) }), _jsxs("div", { className: "anlyx-trust-unknowns project-page-two-up project-page-two-up--trust", children: [_jsx(ProjectSection, { className: "anlyx-trust-breakdown", title: "Trust Breakdown", children: _jsxs("div", { className: "anlyx-trust-grid project-evidence-row", children: [_jsx(EvidenceChip, { label: "Source-matched", total: selectedPage.evidenceSummary.total, value: selectedPage.evidenceSummary.sourceMatched }), _jsx(EvidenceChip, { label: "Agent-inferred", total: selectedPage.evidenceSummary.total, value: selectedPage.evidenceSummary.agentInferred }), _jsx(EvidenceChip, { label: "Observed", total: selectedPage.evidenceSummary.total, value: selectedPage.evidenceSummary.observed }), _jsx(EvidenceChip, { label: "Not-proven", total: selectedPage.evidenceSummary.total, value: selectedPage.evidenceSummary.notProven }), _jsx(EvidenceChip, { label: "Unknown", total: selectedPage.evidenceSummary.total, value: selectedPage.evidenceSummary.unknown })] }) }), _jsx(ProjectSection, { className: "anlyx-unknowns", title: "Unknowns", children: unknownEvidence.length > 0 ? (_jsx("ul", { className: "anlyx-unknown-list project-unknown-list", children: unknownEvidence.slice(0, 4).map((item) => (_jsx("li", { children: item.detail ?? item.label }, item.id))) })) : (_jsxs("div", { className: "anlyx-unknown-empty", children: [_jsx("p", { children: "No unknown or not-proven evidence authored for this page." }), _jsx("p", { children: "All detected elements are source-matched." })] })) })] })] }), isRailOpen ? (_jsx(PageDetailsRail, { model: model, selectedPage: selectedPage, onCollapse: () => setIsRailOpen(false), onOpenMap: onOpenMap })) : null] }));
+}
+function PageBrief({ selectedPage }) {
+    return (_jsx("header", { className: "project-page-brief", children: _jsx("div", { className: "project-page-brief__body", children: _jsxs("div", { className: "project-page-brief__title", children: [_jsxs("div", { children: [_jsx("h1", { children: selectedPage.page.title }), _jsx("code", { children: selectedPage.page.path })] }), _jsx("p", { children: selectedPage.page.description ??
+                            "No page story was authored yet. Ask the project Agent to describe what this page does and why it exists." })] }) }) }));
+}
+function RequestsByRole({ groups, onRequestSelect, selectedRequest }) {
+    return (_jsx(ProjectSection, { title: "Requests", children: _jsx("div", { className: "anlyx-requests-grid project-request-columns", children: groups.some((group) => group.requests.length > 0) ? (groups.map((group) => (_jsxs("section", { className: "project-request-column", children: [_jsxs("header", { children: [_jsx("strong", { children: group.label }), _jsx("span", { children: group.requests.length })] }), group.requests.length > 0 ? (group.requests.map((request) => (_jsx(ProjectRequestCard, { isSelected: selectedRequest?.id === request.id, request: request, onSelect: () => onRequestSelect(request.id) }, request.id)))) : (_jsxs("div", { className: "anlyx-request-empty", children: [_jsx(Minus, { size: 18 }), _jsxs("strong", { children: ["No ", group.label.toLowerCase(), " requests"] }), _jsx("span", { children: "None detected for this page." })] }))] }, group.role)))) : (_jsx("p", { className: "project-muted", children: "No requests linked to this page." })) }) }));
+}
+function getDefaultPageRequestId(selectedPage) {
+    return getDefaultPageRequest(selectedPage)?.id;
+}
+function getDefaultPageRequest(selectedPage) {
+    if (!selectedPage)
+        return undefined;
+    return (selectedPage.requests.find((request) => request.role === "primary") ??
+        selectedPage.requests.find((request) => request.role === "supporting") ??
+        selectedPage.requests[0]);
+}
+function groupRequestsByRole(requests) {
+    const groups = [
+        { role: "primary", label: "Primary", requests: [] },
+        { role: "supporting", label: "Supporting", requests: [] },
+        { role: "background", label: "Background", requests: [] },
+        { role: "external", label: "External", requests: [] }
+    ];
+    for (const request of requests) {
+        const group = groups.find((item) => item.role === request.role);
+        group?.requests.push(request);
+    }
+    const externalGroup = groups.find((group) => group.role === "external");
+    const baseGroups = groups.filter((group) => group.role !== "external");
+    return externalGroup && externalGroup.requests.length > 0
+        ? [...baseGroups, externalGroup]
+        : baseGroups;
+}
+function ProjectSection({ children, className, index, meta, title }) {
+    return (_jsxs("section", { className: `anlyx-report-section project-section${className ? ` ${className}` : ""}`, children: [_jsxs("header", { className: "project-section__header", children: [_jsxs("h3", { children: [index ? (_jsx("span", { className: "project-section__number", "aria-hidden": "true", children: index })) : null, _jsx("span", { children: title })] }), meta ? _jsx("span", { children: meta }) : null] }), children] }));
+}
+function ProjectFeatureCard({ feature }) {
+    return (_jsx("article", { className: "anlyx-action-item project-feature-card", children: _jsxs("div", { children: [_jsx("strong", { children: feature.name }), _jsx("p", { children: feature.description ?? "No feature description authored yet." })] }) }));
+}
+function ProjectRequestCard({ isSelected, onSelect, request }) {
+    const label = request.path ?? request.label ?? request.id;
+    return (_jsxs("button", { className: `anlyx-request-card project-request-card project-request-card--${request.role} ${isSelected ? "is-selected" : ""}`, type: "button", onClick: onSelect, children: [_jsxs("header", { children: [_jsx("span", { className: `project-method-badge project-method-badge--${request.method ?? "HTTP"}`, children: request.method ?? "HTTP" }), isSelected ? _jsx(Check, { size: 15 }) : null] }), _jsx("strong", { children: label }), _jsx("p", { children: request.description ?? request.purpose }), _jsx("footer", { children: _jsx("b", { children: request.role }) })] }));
+}
+function ProjectFlowTrace({ flow }) {
+    const layers = flow.layers.length > 0 ? flow.layers : [];
+    const [expandedLayerId, setExpandedLayerId] = useState();
+    return (_jsxs("article", { className: "anlyx-flow-trace project-flow-trace", children: [_jsxs("header", { className: "project-flow-trace__header", children: [_jsx("span", { children: flow.request?.role ?? "flow" }), _jsx("strong", { children: flow.name ?? flow.request?.path ?? flow.id })] }), _jsx("div", { className: "anlyx-flow-scroll", children: _jsx("div", { className: "anlyx-flow-track project-flow-trace__layers", children: layers.map((layer, index) => (_jsxs(Fragment, { children: [_jsx(ProjectFlowLayerCard, { isExpanded: expandedLayerId === layer.id, layer: layer, onToggle: () => setExpandedLayerId((current) => (current === layer.id ? undefined : layer.id)) }), index < layers.length - 1 ? (_jsx("span", { className: "anlyx-flow-arrow", "aria-hidden": "true", children: _jsx(ChevronRight, { size: 18 }) })) : null] }, layer.id))) }) })] }));
+}
+function ProjectFlowLayerCard({ isExpanded, onToggle, layer }) {
+    const source = formatSourceLocation(layer.source) ?? formatLayerHint(layer);
+    return (_jsxs("button", { "aria-expanded": isExpanded, className: `anlyx-flow-node project-flow-layer project-flow-layer--${layer.kind}${isExpanded ? " is-expanded" : ""}`, title: source, type: "button", onClick: onToggle, children: [_jsx("span", { className: "anlyx-flow-layer", children: titleCase(layer.kind) }), _jsx("strong", { className: "anlyx-flow-title", children: layer.label }), _jsx("em", { className: "anlyx-flow-source", children: source }), _jsx("small", { className: "anlyx-evidence-pill", children: evidenceStatusLabel(layer.status) })] }));
+}
+function EvidenceChip({ label, total, value }) {
+    const percent = total > 0 ? Math.round((value / total) * 100) : 0;
+    const status = label.toLowerCase().replace(/[^a-z]+/g, "-").replace(/^-|-$/g, "");
+    return (_jsxs("span", { className: `anlyx-trust-card anlyx-trust-card--${status} project-evidence-chip`, children: [_jsxs("span", { children: [_jsx("i", { "aria-hidden": "true" }), label] }), _jsx("strong", { children: value }), _jsxs("em", { children: [percent, "%"] })] }));
+}
+function PageDetailsRail({ model, onCollapse, onOpenMap, selectedPage }) {
+    const page = selectedPage.page;
+    const relatedPages = getRelatedPages(model, page.metadata?.["relatedPageIds"]);
+    const tags = getStringList(page.metadata?.["tags"]);
+    const evidenceLabel = formatEvidenceSummary(selectedPage.evidenceSummary);
+    return (_jsxs("aside", { className: "anlyx-page-rail project-page-details-panel", "aria-label": "Page details", children: [_jsxs("div", { className: "anlyx-page-rail__header", children: [_jsx("h2", { children: "Page Details" }), _jsx("button", { "aria-label": "Collapse page details", type: "button", onClick: onCollapse, children: _jsx(PanelLeft, { size: 14 }) })] }), _jsxs("dl", { children: [_jsx(ProjectDetailField, { label: "Area", value: selectedPage.areaName }), _jsx(ProjectDetailField, { label: "Route", value: page.path }), _jsx(ProjectDetailField, { label: "Page Type", value: metadataString(page.metadata?.["pageType"]) ?? "Not authored" }), _jsx(ProjectDetailField, { label: "Auth Required", value: metadataBooleanLabel(page.metadata?.["authRequired"]) }), _jsx(ProjectDetailField, { label: "Layout", value: metadataString(page.metadata?.["layout"]) ?? "Not authored" }), _jsx(ProjectDetailField, { label: "Last Seen", value: formatAnalysisTime(model.project.analyzedAt) ?? "Not authored" })] }), _jsxs("section", { children: [_jsx("h3", { children: "Evidence" }), _jsx("p", { children: evidenceLabel }), page.source ? _jsx("p", { children: formatSourceLocation(page.source) }) : null] }), _jsxs("section", { children: [_jsx("h3", { children: "Related Pages" }), relatedPages.length > 0 ? (_jsx("ul", { children: relatedPages.map((relatedPage) => (_jsxs("li", { children: [_jsx("strong", { children: relatedPage.title }), _jsx("span", { children: relatedPage.path })] }, relatedPage.id))) })) : (_jsx("p", { children: "No related pages authored." }))] }), _jsxs("section", { children: [_jsx("h3", { children: "Tags" }), tags.length > 0 ? (_jsx("div", { className: "project-page-tags", children: tags.map((tag) => (_jsxs("span", { children: [_jsx(Tag, { size: 12 }), tag] }, tag))) })) : (_jsx("p", { children: "No tags authored." }))] }), _jsxs("button", { type: "button", onClick: onOpenMap, children: [_jsx(Network, { size: 15 }), "View in Map"] })] }));
+}
+function ProjectDetailField({ label, value }) {
+    return (_jsxs("div", { children: [_jsx("dt", { children: label }), _jsx("dd", { children: value })] }));
+}
+function getRelatedPages(model, value) {
+    const ids = getStringList(value);
+    const pages = model.pageGroups.flatMap((group) => group.pages);
+    return ids.flatMap((id) => {
+        const page = pages.find((item) => item.id === id);
+        return page ? [{ id: page.id, path: page.path, title: page.title }] : [];
+    });
+}
+function getStringList(value) {
+    return Array.isArray(value)
+        ? value.filter((item) => typeof item === "string" && item.trim().length > 0)
+        : [];
+}
+function metadataString(value) {
+    return typeof value === "string" && value.trim().length > 0 ? value : undefined;
+}
+function metadataBooleanLabel(value) {
+    if (typeof value === "boolean")
+        return value ? "Yes" : "No";
+    if (typeof value === "string" && value.trim().length > 0)
+        return value;
+    return "Not authored";
+}
+function formatAnalysisTime(value) {
+    if (!value)
+        return undefined;
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime()))
+        return value;
+    return date.toLocaleString("en", {
+        day: "2-digit",
+        hour: "2-digit",
+        minute: "2-digit",
+        month: "short",
+        year: "numeric"
+    });
+}
+function formatEvidenceSummary(summary) {
+    if (summary.total === 0)
+        return "Not authored";
+    const strongest = summary.sourceMatched > 0
+        ? "Source-matched"
+        : summary.observed > 0
+            ? "Observed"
+            : summary.agentInferred > 0
+                ? "Agent-inferred"
+                : summary.notProven > 0
+                    ? "Not-proven"
+                    : "Unknown";
+    return `${strongest} (${summary.total})`;
+}
+function formatSourceLocation(source) {
+    if (!source)
+        return undefined;
+    const line = source.lineStart ? `:${source.lineStart}` : "";
+    const symbol = source.symbol ? ` ${source.symbol}` : "";
+    return `${source.filePath}${line}${symbol}`;
+}
+function formatLayerHint(layer) {
+    return metadataString(layer.metadata?.["module"]) ?? metadataString(layer.metadata?.["file"]) ?? layer.id;
+}
+function titleCase(value) {
+    return value
+        .split("-")
+        .map((part) => `${part.slice(0, 1).toUpperCase()}${part.slice(1)}`)
+        .join("-");
+}
+function ProjectMapView({ data, model }) {
+    const map = useMemo(() => buildProjectArchitectureMap(data), [data]);
+    const [selectedNodeId, setSelectedNodeId] = useState(undefined);
+    const [inspectorOpen, setInspectorOpen] = useState(false);
+    const selectedNode = map.nodes.find((node) => node.id === selectedNodeId);
+    const focus = useMemo(() => buildProjectArchitectureFocus(map, selectedNode?.id), [map, selectedNode?.id]);
+    const selectNode = (nodeId) => {
+        setSelectedNodeId(nodeId);
+        setInspectorOpen(true);
+    };
+    if (data.architecture.nodes.length === 0) {
+        return (_jsxs("section", { className: "project-map-placeholder", "aria-label": "Project architecture map", children: [_jsxs("div", { children: [_jsx(Network, { size: 24 }), _jsx("h2", { children: "Map" }), _jsx("p", { children: "No architecture graph was authored yet. The viewer will not invent mock project data." })] }), _jsxs("dl", { children: [_jsxs("div", { children: [_jsx("dt", { children: "Nodes" }), _jsx("dd", { children: "0" })] }), _jsxs("div", { children: [_jsx("dt", { children: "Edges" }), _jsx("dd", { children: "0" })] })] })] }));
+    }
+    return (_jsxs("section", { className: "project-architecture-map anlyx-map-shell", "aria-label": "Project architecture map", children: [_jsxs("header", { className: "project-architecture-map__toolbar", children: [_jsxs("div", { children: [_jsx("h1", { children: "Map" }), _jsx("p", { children: "Agent-authored architecture map. The viewer renders nodes and edges from project JSON." })] }), _jsx("div", { className: "anlyx-map-header-actions", children: _jsx(ProjectArchitectureMapStats, { map: map, model: model }) })] }), _jsxs("div", { className: `anlyx-map-body${inspectorOpen ? " has-inspector" : ""}`, children: [_jsx("div", { className: `project-architecture-map__canvas${selectedNode ? " is-focused" : ""}${map.isCompact ? " is-small-graph" : ""}`, "data-testid": "project-architecture-map", style: {
+                            "--anlyx-map-width": `${map.width}px`,
+                            "--anlyx-map-height": `${map.height}px`
+                        }, children: _jsxs("div", { className: "anlyx-map-stage", children: [_jsx("svg", { "aria-hidden": "true", className: "anlyx-map-edges", height: map.height, viewBox: `0 0 ${map.width} ${map.height}`, width: map.width, children: map.edges.map((edge) => (_jsx(ProjectArchitectureMapEdge, { edge: edge, focus: focus }, edge.id))) }), _jsx("div", { className: "anlyx-map-columns", "aria-hidden": "true", children: map.columns.map((column) => (_jsxs("div", { className: "anlyx-map-column-guide", style: { left: column.x, width: column.width }, children: [_jsx("strong", { children: column.label }), _jsx("span", { children: column.count })] }, column.id))) }), map.nodes.map((node) => (_jsx(ProjectArchitectureMapNode, { focus: focus, node: node, onSelect: selectNode, selected: node.id === selectedNode?.id }, node.id))), _jsxs("div", { className: "anlyx-map-legend", children: [_jsxs("span", { children: [_jsx("i", { className: "is-primary" }), " Selected path"] }), _jsxs("span", { children: [_jsx("i", { className: "is-shared" }), " Shared dependency"] }), _jsxs("span", { children: [_jsx("i", { className: "is-muted" }), " Other / Unknown"] })] })] }) }), inspectorOpen ? (_jsx(ProjectArchitectureInspector, { focus: focus, node: selectedNode, nodesById: map.nodesById, onClose: () => {
+                            setInspectorOpen(false);
+                            setSelectedNodeId(undefined);
+                        } })) : null] })] }));
+}
+const projectArchitectureColumns = [
+    { id: "pages", label: "Pages / Features", kinds: ["frontend"] },
+    { id: "requests", label: "Requests", kinds: ["request"] },
+    { id: "api", label: "API", kinds: ["api"] },
+    { id: "controllers", label: "Controllers", kinds: ["controller", "handler", "middleware"] },
+    { id: "services", label: "Services", kinds: ["service", "cache", "queue", "job", "external"] },
+    { id: "repository", label: "Repository / Mapper", kinds: ["repository", "mapper"] },
+    { id: "policy", label: "Policy / Schema", kinds: ["policy"] },
+    { id: "data", label: "Data / JSON", kinds: ["database"] },
+    { id: "result", label: "Results", kinds: ["result", "unknown"] }
+];
+function buildProjectArchitectureMap(data) {
+    const nodeIds = new Set(data.architecture.nodes.map((node) => node.id));
+    const validEdges = data.architecture.edges.filter((edge) => nodeIds.has(edge.source) && nodeIds.has(edge.target));
+    const evidenceById = new Map(data.evidence.map((evidence) => [evidence.id, evidence]));
+    const connectionCounts = new Map();
+    const upstreamCounts = new Map();
+    const downstreamCounts = new Map();
+    validEdges.forEach((edge) => {
+        connectionCounts.set(edge.source, (connectionCounts.get(edge.source) ?? 0) + 1);
+        connectionCounts.set(edge.target, (connectionCounts.get(edge.target) ?? 0) + 1);
+        downstreamCounts.set(edge.source, (downstreamCounts.get(edge.source) ?? 0) + 1);
+        upstreamCounts.set(edge.target, (upstreamCounts.get(edge.target) ?? 0) + 1);
+    });
+    const columnIdByKind = new Map(projectArchitectureColumns.flatMap((column) => column.kinds.map((kind) => [kind, column.id])));
+    const isCompact = data.architecture.nodes.length <= 12;
+    const filledColumnWidth = isCompact ? 176 : 196;
+    const nodeHeight = isCompact ? 90 : 96;
+    const columnGap = isCompact ? 28 : 34;
+    const rowGap = isCompact ? 16 : 22;
+    const top = isCompact ? 62 : 82;
+    const left = 18;
+    const grouped = new Map();
+    for (const node of data.architecture.nodes) {
+        const columnId = columnIdByKind.get(node.kind) ?? "result";
+        const nodes = grouped.get(columnId) ?? [];
+        nodes.push(node);
+        grouped.set(columnId, nodes);
+    }
+    const columnCounts = new Map();
+    for (const column of projectArchitectureColumns) {
+        columnCounts.set(column.id, grouped.get(column.id)?.length ?? 0);
+    }
+    let currentX = left;
+    const columns = projectArchitectureColumns
+        .filter((column) => (columnCounts.get(column.id) ?? 0) > 0)
+        .map((column) => {
+        const count = columnCounts.get(column.id) ?? 0;
+        const width = filledColumnWidth;
+        const positionedColumn = {
+            ...column,
+            x: currentX,
+            width,
+            count
+        };
+        currentX += width + columnGap;
+        return positionedColumn;
+    });
+    const mapNodes = [];
+    for (const column of columns) {
+        const nodes = grouped.get(column.id) ?? [];
+        nodes
+            .sort((a, b) => {
+            const degreeDelta = (connectionCounts.get(b.id) ?? 0) - (connectionCounts.get(a.id) ?? 0);
+            return degreeDelta || a.label.localeCompare(b.label);
+        })
+            .forEach((node, index) => {
+            const evidenceStatus = projectArchitectureEvidenceStatus(node.evidenceIds, evidenceById);
+            const source = formatProjectArchitectureSource(node.source);
+            mapNodes.push({
+                ...node,
+                columnId: column.id,
+                x: column.x,
+                y: top + index * (nodeHeight + rowGap),
+                width: column.width,
+                height: nodeHeight,
+                connectionCount: connectionCounts.get(node.id) ?? 0,
+                upstreamCount: upstreamCounts.get(node.id) ?? 0,
+                downstreamCount: downstreamCounts.get(node.id) ?? 0,
+                evidenceStatus,
+                evidenceLabel: node.evidenceIds.length > 0 ? evidenceStatusLabel(evidenceStatus) : "Unknown",
+                subtitle: source ?? projectArchitectureNodeSubtitle(node)
+            });
+        });
+    }
+    const nodesById = new Map(mapNodes.map((node) => [node.id, node]));
+    const logicalEdges = validEdges
+        .map((edge) => {
+        const sourceNode = nodesById.get(edge.source);
+        const targetNode = nodesById.get(edge.target);
+        if (!sourceNode || !targetNode)
+            return undefined;
+        return sourceNode && targetNode ? { ...edge, sourceNode, targetNode, routeX: 0 } : undefined;
+    })
+        .filter((edge) => Boolean(edge));
+    const mapEdgesWithoutLanes = logicalEdges.filter((edge) => {
+        if (edge.sourceNode.columnId === edge.targetNode.columnId)
+            return false;
+        return edge.sourceNode.x + edge.sourceNode.width < edge.targetNode.x;
+    });
+    const gutterCounts = new Map();
+    const mapEdges = mapEdgesWithoutLanes.map((edge) => {
+        const sourceRight = edge.sourceNode.x + edge.sourceNode.width;
+        const gap = Math.max(1, edge.targetNode.x - sourceRight);
+        const gutterKey = `${edge.sourceNode.columnId}->${edge.targetNode.columnId}`;
+        const gutterIndex = gutterCounts.get(gutterKey) ?? 0;
+        gutterCounts.set(gutterKey, gutterIndex + 1);
+        const laneOffset = (gutterIndex - 1) * 6;
+        const routeX = sourceRight + gap / 2 + laneOffset;
+        return {
+            ...edge,
+            routeX: Math.max(sourceRight + 14, Math.min(edge.targetNode.x - 14, routeX))
+        };
+    });
+    const maxColumnCount = Math.max(1, ...columns.map((column) => column.count));
+    return {
+        columns,
+        columnCounts,
+        nodes: mapNodes,
+        edges: mapEdges,
+        logicalEdges,
+        nodesById,
+        width: Math.max(0, currentX - columnGap + left),
+        height: top + maxColumnCount * (nodeHeight + rowGap) + (isCompact ? 34 : 80),
+        nodeWidth: filledColumnWidth,
+        isCompact
+    };
+}
+function buildProjectArchitectureFocus(map, selectedNodeId) {
+    if (!selectedNodeId) {
+        return { nodeIds: new Set(), edgeIds: new Set(), upstreamIds: [], downstreamIds: [] };
+    }
+    const upstreamIds = collectArchitectureReachable(map.logicalEdges, selectedNodeId, "upstream");
+    const downstreamIds = collectArchitectureReachable(map.logicalEdges, selectedNodeId, "downstream");
+    const nodeIds = new Set([selectedNodeId, ...upstreamIds, ...downstreamIds]);
+    const edgeIds = new Set(map.logicalEdges
+        .filter((edge) => nodeIds.has(edge.source) && nodeIds.has(edge.target))
+        .map((edge) => edge.id));
+    return { nodeIds, edgeIds, upstreamIds, downstreamIds };
+}
+function collectArchitectureReachable(edges, nodeId, direction) {
+    const result = [];
+    const visited = new Set([nodeId]);
+    const queue = [nodeId];
+    while (queue.length > 0) {
+        const current = queue.shift() ?? "";
+        const nextEdges = direction === "downstream"
+            ? edges.filter((edge) => edge.source === current)
+            : edges.filter((edge) => edge.target === current);
+        for (const edge of nextEdges) {
+            const nextId = direction === "downstream" ? edge.target : edge.source;
+            if (visited.has(nextId))
+                continue;
+            visited.add(nextId);
+            result.push(nextId);
+            queue.push(nextId);
+        }
+    }
+    return result;
+}
+function ProjectArchitectureMapStats({ map, model }) {
+    const stats = [
+        { label: "Pages", value: model.totals.pages },
+        { label: "Requests", value: map.columnCounts.get("requests") ?? 0 },
+        { label: "API", value: map.columnCounts.get("api") ?? 0 },
+        { label: "Controllers", value: map.columnCounts.get("controllers") ?? 0 },
+        { label: "Services", value: map.columnCounts.get("services") ?? 0 },
+        { label: "Mappers", value: map.columnCounts.get("repository") ?? 0 },
+        { label: "Results", value: map.columnCounts.get("result") ?? 0 }
+    ];
+    return (_jsx("dl", { children: stats.map((stat) => (_jsxs("div", { children: [_jsx("dt", { children: stat.label }), _jsx("dd", { children: stat.value })] }, stat.label))) }));
+}
+function ProjectArchitectureMapNode({ focus, node, onSelect, selected }) {
+    const Icon = projectArchitectureNodeIcon(node.kind);
+    const muted = focus.nodeIds.size > 0 && !focus.nodeIds.has(node.id);
+    const shared = node.upstreamCount > 1 || node.downstreamCount > 1;
+    return (_jsxs("button", { className: `anlyx-map-node${selected ? " is-selected" : ""}${muted ? " is-muted" : ""}`, onClick: () => onSelect(node.id), style: { left: node.x, top: node.y, width: node.width, minHeight: node.height }, title: `${node.label}${node.source?.filePath ? ` · ${node.source.filePath}` : ""}`, type: "button", children: [_jsx("span", { className: "anlyx-map-node__icon", "aria-hidden": "true", children: _jsx(Icon, { size: 15 }) }), _jsxs("span", { className: "anlyx-map-node__body", children: [_jsx("span", { className: "anlyx-map-node__layer", children: projectArchitectureKindLabel(node.kind) }), _jsx("strong", { children: node.displayLabel ?? node.label }), _jsx("small", { children: node.subtitle })] }), _jsx("span", { className: `anlyx-map-evidence anlyx-map-evidence--${node.evidenceStatus}`, children: node.evidenceLabel }), shared ? _jsx("span", { className: "anlyx-map-node__degree", children: node.connectionCount }) : null] }));
+}
+function ProjectArchitectureMapEdge({ edge, focus }) {
+    const selected = focus.edgeIds.has(edge.id);
+    const muted = focus.edgeIds.size > 0 && !selected;
+    const sourceX = edge.sourceNode.x + edge.sourceNode.width;
+    const sourceY = edge.sourceNode.y + edge.sourceNode.height / 2;
+    const targetX = edge.targetNode.x;
+    const targetY = edge.targetNode.y + edge.targetNode.height / 2;
+    const path = createProjectArchitectureOrthogonalPath(sourceX, sourceY, edge.routeX, targetX, targetY);
+    const role = edge.role ?? "primary";
+    const status = projectArchitectureEdgeStatus(edge);
+    const visualRole = status === "not-proven" || status === "unknown"
+        ? "unknown"
+        : role === "shared" || edge.targetNode.upstreamCount > 1
+            ? "shared"
+            : "primary";
+    return (_jsx("path", { className: `anlyx-map-edge anlyx-map-edge--${visualRole}${selected ? " is-selected" : ""}${muted ? " is-muted" : ""}`, d: path }));
+}
+function createProjectArchitectureOrthogonalPath(sourceX, sourceY, routeX, targetX, targetY) {
+    return `M ${sourceX} ${sourceY} H ${routeX} V ${targetY} H ${targetX}`;
+}
+function projectArchitectureEdgeStatus(edge) {
+    if (edge.confidence === "low")
+        return "not-proven";
+    if (edge.sourceNode.evidenceStatus === "not-proven" || edge.targetNode.evidenceStatus === "not-proven") {
+        return "not-proven";
+    }
+    if (edge.sourceNode.evidenceStatus === "unknown" || edge.targetNode.evidenceStatus === "unknown") {
+        return "unknown";
+    }
+    return edge.targetNode.evidenceStatus;
+}
+function ProjectArchitectureInspector({ focus, node, nodesById, onClose }) {
+    if (!node) {
+        return (_jsxs("aside", { className: "anlyx-map-inspector", "aria-label": "Map inspector", children: [_jsx("button", { className: "anlyx-map-inspector__close", onClick: onClose, type: "button", children: "Close" }), _jsx("h2", { children: "No node selected" })] }));
+    }
+    const upstream = focus.upstreamIds.map((id) => nodesById.get(id)).filter(Boolean);
+    const downstream = focus.downstreamIds.map((id) => nodesById.get(id)).filter(Boolean);
+    const contract = projectArchitectureNodeContract(node);
+    return (_jsxs("aside", { className: "anlyx-map-inspector", "aria-label": "Map inspector", children: [_jsxs("header", { children: [_jsxs("div", { children: [_jsx("span", { children: "Selected" }), _jsx("h2", { children: node.displayLabel ?? node.label })] }), _jsx("button", { className: "anlyx-map-inspector__close", onClick: onClose, type: "button", children: "Close" })] }), _jsxs("dl", { className: "anlyx-map-inspector__meta", children: [_jsxs("div", { children: [_jsx("dt", { children: "Layer" }), _jsx("dd", { children: projectArchitectureKindLabel(node.kind) })] }), _jsxs("div", { children: [_jsx("dt", { children: "Title" }), _jsx("dd", { children: node.label })] }), _jsxs("div", { children: [_jsx("dt", { children: "Path" }), _jsx("dd", { children: formatProjectArchitectureSource(node.source) ?? "Not authored" })] }), _jsxs("div", { children: [_jsx("dt", { children: "Evidence" }), _jsx("dd", { children: node.evidenceLabel })] })] }), _jsx(ProjectArchitectureContractSection, { contract: contract }), _jsxs("section", { children: [_jsx("h3", { children: "Upstream" }), _jsx(ProjectArchitectureInspectorList, { emptyLabel: "No upstream nodes.", nodes: upstream })] }), _jsxs("section", { children: [_jsx("h3", { children: "Downstream path" }), _jsx(ProjectArchitectureInspectorList, { emptyLabel: "No downstream nodes.", nodes: downstream, ordered: true })] })] }));
+}
+function ProjectArchitectureContractSection({ contract }) {
+    const hasContract = Boolean(contract.endpoint) ||
+        Boolean(contract.inputName) ||
+        Boolean(contract.outputName) ||
+        contract.relatedModels.length > 0 ||
+        contract.transforms.length > 0 ||
+        Boolean(contract.mapping) ||
+        Boolean(contract.inputShape) ||
+        Boolean(contract.outputShape);
+    return (_jsxs("section", { className: "anlyx-map-contract", children: [_jsx("h3", { children: "Data Contract" }), hasContract ? (_jsxs("div", { className: "anlyx-map-contract__body", children: [contract.endpoint ? (_jsx(ProjectArchitectureContractField, { label: "Endpoint", value: contract.endpoint })) : null, _jsx(ProjectArchitectureContractField, { label: "Input", value: formatProjectArchitectureContractName(contract.inputName, contract.inputKind) }), _jsx(ProjectArchitectureContractField, { label: "Output", value: formatProjectArchitectureContractName(contract.outputName, contract.outputKind) }), _jsx(ProjectArchitectureShapePreview, { shape: contract.outputShape ?? contract.inputShape }), contract.mapping ? (_jsx(ProjectArchitectureContractField, { label: "Mapping", value: contract.mapping })) : null, contract.transforms.length > 0 ? (_jsxs("div", { className: "anlyx-map-contract__group", children: [_jsx("span", { children: "Transforms" }), _jsx("ul", { children: contract.transforms.slice(0, 6).map((transform) => (_jsx("li", { children: transform }, transform))) })] })) : null, contract.relatedModels.length > 0 ? (_jsxs("div", { className: "anlyx-map-contract__group", children: [_jsx("span", { children: "Models" }), _jsx("ul", { children: contract.relatedModels.slice(0, 8).map((model) => (_jsx("li", { children: model }, model))) })] })) : null] })) : (_jsx("p", { className: "project-muted", children: "No contract authored." }))] }));
+}
+function ProjectArchitectureContractField({ label, value }) {
+    return (_jsxs("div", { className: "anlyx-map-contract__field", children: [_jsx("span", { children: label }), _jsx("strong", { children: value ?? "No contract authored" })] }));
+}
+function ProjectArchitectureShapePreview({ shape }) {
+    if (!shape) {
+        return null;
+    }
+    const entries = Object.entries(shape).slice(0, 8);
+    if (entries.length === 0) {
+        return null;
+    }
+    return (_jsxs("div", { className: "anlyx-map-contract__shape", children: [_jsx("span", { children: "Shape" }), _jsxs("pre", { children: [entries.map(([key, value]) => `${key}: ${value}`).join("\n"), Object.keys(shape).length > entries.length ? "\n..." : ""] })] }));
+}
+function ProjectArchitectureInspectorList({ emptyLabel, nodes, ordered = false }) {
+    const visibleNodes = nodes.filter((node) => Boolean(node));
+    if (visibleNodes.length === 0) {
+        return _jsx("p", { className: "project-muted", children: emptyLabel });
+    }
+    return (_jsx("ol", { className: ordered ? "anlyx-map-path-list" : "anlyx-map-node-list", children: visibleNodes.slice(0, 8).map((node) => (_jsxs("li", { children: [_jsx("strong", { children: node.displayLabel ?? node.label }), _jsx("span", { children: projectArchitectureKindLabel(node.kind) })] }, node.id))) }));
+}
+function projectArchitectureNodeContract(node) {
+    const metadata = recordFromUnknown(node.metadata);
+    const contractRoot = recordFromUnknown(metadata?.["contracts"]) ?? metadata;
+    const input = contractItemFromUnknown(contractRoot?.["input"]);
+    const output = contractItemFromUnknown(contractRoot?.["output"]);
+    return {
+        endpoint: metadataString(contractRoot?.["endpoint"]),
+        inputName: input.name,
+        inputKind: input.kind,
+        inputShape: input.shape,
+        outputName: output.name,
+        outputKind: output.kind,
+        outputShape: output.shape,
+        relatedModels: getStringList(contractRoot?.["relatedModels"]).length > 0
+            ? getStringList(contractRoot?.["relatedModels"])
+            : getStringList(contractRoot?.["models"]),
+        transforms: getStringList(contractRoot?.["transforms"]),
+        mapping: metadataString(contractRoot?.["mapping"])
+    };
+}
+function contractItemFromUnknown(value) {
+    if (typeof value === "string") {
+        return { name: value, kind: undefined, shape: undefined };
+    }
+    const record = recordFromUnknown(value);
+    if (!record) {
+        return { name: undefined, kind: undefined, shape: undefined };
+    }
+    return {
+        name: metadataString(record["name"]),
+        kind: metadataString(record["kind"]),
+        shape: shapeFromUnknown(record["shape"])
+    };
+}
+function shapeFromUnknown(value) {
+    const record = recordFromUnknown(value);
+    if (!record) {
+        return undefined;
+    }
+    const entries = Object.entries(record)
+        .map(([key, item]) => [key, typeof item === "string" ? item : JSON.stringify(item)])
+        .filter((entry) => typeof entry[1] === "string");
+    return entries.length > 0 ? Object.fromEntries(entries) : undefined;
+}
+function recordFromUnknown(value) {
+    if (!value || typeof value !== "object" || Array.isArray(value)) {
+        return undefined;
+    }
+    return value;
+}
+function formatProjectArchitectureContractName(name, kind) {
+    if (!name) {
+        return undefined;
+    }
+    return kind ? `${name} (${kind})` : name;
+}
+function projectArchitectureEvidenceStatus(evidenceIds, evidenceById) {
+    const statuses = evidenceIds
+        .map((id) => evidenceById.get(id)?.status)
+        .filter((status) => Boolean(status));
+    if (statuses.includes("source-matched"))
+        return "source-matched";
+    if (statuses.includes("observed"))
+        return "observed";
+    if (statuses.includes("measured"))
+        return "measured";
+    if (statuses.includes("agent-inferred"))
+        return "agent-inferred";
+    if (statuses.includes("not-proven"))
+        return "not-proven";
+    return "unknown";
+}
+function projectArchitectureNodeSubtitle(node) {
+    const module = metadataString(node.metadata?.["module"]);
+    const path = metadataString(node.metadata?.["path"]);
+    const detail = metadataString(node.metadata?.["detail"]);
+    return module ?? path ?? detail ?? node.domain ?? node.id;
+}
+function formatProjectArchitectureSource(source) {
+    if (!source)
+        return undefined;
+    const line = source.lineStart ? `:${source.lineStart}` : "";
+    const symbol = source.symbol ? ` ${source.symbol}` : "";
+    return `${source.filePath}${line}${symbol}`;
+}
+function projectArchitectureKindLabel(kind) {
+    const labels = {
+        frontend: "Page",
+        request: "HTTP",
+        api: "API",
+        controller: "CTRL",
+        handler: "Handler",
+        middleware: "Middleware",
+        service: "SRV",
+        policy: "Policy",
+        mapper: "Map",
+        repository: "Repo",
+        database: "Data",
+        cache: "Cache",
+        queue: "Queue",
+        job: "Job",
+        external: "External",
+        result: "UI",
+        unknown: "Unknown"
+    };
+    return labels[kind] ?? titleCase(kind);
+}
+function projectArchitectureNodeIcon(kind) {
+    if (kind === "database") {
+        return Database;
+    }
+    if (kind === "repository") {
+        return Box;
+    }
+    if (kind === "service" || kind === "policy" || kind === "mapper") {
+        return Layers3;
+    }
+    if (kind === "controller" || kind === "handler" || kind === "middleware") {
+        return FileCode2;
+    }
+    if (kind === "api" || kind === "request") {
+        return Network;
+    }
+    if (kind === "result") {
+        return Flag;
+    }
+    return Circle;
+}
+function ProjectJsonView({ data, model, rawJson, validationReport }) {
+    const jsonFiles = useMemo(() => projectJsonFiles(data, model, rawJson, validationReport), [data, model, rawJson, validationReport]);
+    const [selectedJsonFileId, setSelectedJsonFileId] = useState(jsonFiles[0]?.id ?? "project");
+    const selectedJsonFile = jsonFiles.find((file) => file.id === selectedJsonFileId) ?? jsonFiles[0];
+    const activeJson = selectedJsonFile?.content ?? rawJson;
+    const lines = activeJson.split("\n");
+    const inventory = useMemo(() => projectJsonInventoryItems(data, model), [data, model]);
+    const EditorFileIcon = selectedJsonFile?.icon ?? Code2;
+    const validationTone = validationReport
+        ? validationReport.valid
+            ? validationReport.issues.length > 0
+                ? "amber"
+                : "green"
+            : "red"
+        : "green";
+    const validationLabel = validationReport
+        ? validationReport.valid
+            ? validationReport.issues.length > 0
+                ? "Valid with warnings"
+                : "Valid"
+            : "Invalid"
+        : "Valid";
+    return (_jsxs("section", { className: "project-json-workspace", "aria-label": "Project JSON", children: [_jsxs("aside", { className: "project-json-outline", "aria-label": "JSON files", children: [_jsx("div", { className: "project-panel-title", children: _jsx("h2", { children: "JSON Files" }) }), _jsx("span", { className: "project-badge project-badge--green", children: "AI-authored" }), _jsx("div", { className: "project-json-file-list", role: "list", children: jsonFiles.map((file) => {
+                            const Icon = file.icon;
+                            return (_jsxs("button", { className: file.id === selectedJsonFile?.id ? "is-selected" : "", type: "button", onClick: () => setSelectedJsonFileId(file.id), children: [_jsx(Icon, { size: 17 }), _jsxs("span", { children: [_jsx("strong", { children: file.name }), _jsx("small", { children: file.description })] }), _jsx("em", { children: file.countLabel })] }, file.id));
+                        }) })] }), _jsxs("article", { className: "project-json-editor", "aria-label": "Raw project JSON", children: [_jsxs("header", { children: [_jsxs("span", { className: "project-json-file", children: [_jsx(EditorFileIcon, { size: 16 }), selectedJsonFile?.name ?? "anlyx.project.json"] }), _jsxs("div", { children: [_jsxs("button", { type: "button", onClick: () => void navigator.clipboard?.writeText(activeJson), children: [_jsx(Copy, { size: 15 }), "Copy JSON"] }), _jsx("button", { type: "button", onClick: () => downloadProjectJson(activeJson, selectedJsonFile?.name), children: _jsx(Download, { size: 15 }) })] })] }), _jsx("pre", { children: lines.map((line, index) => (_jsxs("span", { children: [_jsx("em", { children: index + 1 }), _jsx("code", { children: line || " " })] }, `${index}:${line}`))) })] }), _jsxs("aside", { className: "project-json-details", "aria-label": "JSON details", children: [_jsxs(JsonDetailsCard, { title: "Schema", children: [_jsx(ProjectDetailRow, { label: "Version", value: data.schemaVersion }), _jsx(ProjectDetailRow, { label: "Validation", value: validationLabel, tone: validationTone })] }), validationReport ? (_jsxs(JsonDetailsCard, { title: "Trust checks", children: [_jsx(ProjectDetailRow, { label: "Source issues", value: String(validationReport.summary.sourceIssueCount), tone: validationReport.summary.sourceIssueCount > 0 ? "amber" : "green" }), validationReport.summary.sourceIssueBreakdown ? (_jsxs(_Fragment, { children: [_jsx(ProjectDetailRow, { label: "Missing files", value: String(validationReport.summary.sourceIssueBreakdown.missingFiles), tone: validationReport.summary.sourceIssueBreakdown.missingFiles > 0
+                                            ? "amber"
+                                            : "green" }), _jsx(ProjectDetailRow, { label: "Line issues", value: String(validationReport.summary.sourceIssueBreakdown.placeholderLines +
+                                            validationReport.summary.sourceIssueBreakdown.outOfRangeLines), tone: validationReport.summary.sourceIssueBreakdown.placeholderLines +
+                                            validationReport.summary.sourceIssueBreakdown.outOfRangeLines >
+                                            0
+                                            ? "amber"
+                                            : "green" }), _jsx(ProjectDetailRow, { label: "Symbol issues", value: String(validationReport.summary.sourceIssueBreakdown.missingSymbols), tone: validationReport.summary.sourceIssueBreakdown.missingSymbols > 0
+                                            ? "amber"
+                                            : "green" })] })) : null, _jsx(ProjectDetailRow, { label: "Coverage", value: validationReport.summary.coverageStatus, tone: validationReport.summary.coverageStatus === "partial" ? "amber" : "green" }), _jsx(ProjectDetailRow, { label: "Issues", value: String(validationReport.issues.length), tone: validationReport.issues.length > 0 ? "amber" : "green" })] })) : null, data.coverage || validationReport ? (_jsxs(JsonDetailsCard, { title: "Coverage", children: [_jsx(ProjectDetailRow, { label: "Pages", value: coverageValue(validationReport?.summary.modeled.pages ?? data.pages.length, validationReport?.summary.detected?.pages ?? data.coverage?.detected?.pages) }), _jsx(ProjectDetailRow, { label: "Requests", value: coverageValue(validationReport?.summary.modeled.requests ?? data.requests.length, data.coverage?.detected?.requests ?? data.coverage?.detected?.backendEndpoints) }), _jsx(ProjectDetailRow, { label: "Flows", value: coverageValue(validationReport?.summary.modeled.flows ?? data.flows.length, validationReport?.summary.detected?.flows ?? data.coverage?.detected?.flows) })] })) : null, _jsxs(JsonDetailsCard, { title: "Project", children: [_jsx(ProjectDetailRow, { label: "Name", value: data.project.name }), _jsx(ProjectDetailRow, { label: "ID", value: data.project.id }), _jsx(ProjectDetailRow, { label: "Root", value: data.project.root ?? "not provided" })] }), _jsx(JsonDetailsCard, { title: "Counts", children: _jsx("div", { className: "project-json-counts", children: inventory.map((item) => (_jsx(JsonInventoryItem, { item: item }, item.id))) }) })] })] }));
+}
+function JsonInventoryItem({ item }) {
+    const Icon = item.icon;
+    return (_jsxs("a", { className: "project-json-count-item", href: `#json-${item.id}`, children: [_jsx(Icon, { size: 16 }), _jsx("span", { children: item.label }), _jsx("strong", { children: item.value })] }));
+}
+function projectJsonFiles(data, model, rawJson, validationReport) {
+    const files = [
+        {
+            id: "project",
+            name: projectSourceFile(model),
+            description: "Complete project document",
+            countLabel: "full",
+            content: rawJson,
+            icon: Code2
+        },
+        {
+            id: "index",
+            name: ".anlyx/project/index.json",
+            description: "Schema and project metadata",
+            countLabel: data.schemaVersion,
+            content: projectJsonString({ schemaVersion: data.schemaVersion, project: data.project }),
+            icon: Folder
+        },
+        {
+            id: "areas",
+            name: ".anlyx/project/areas.json",
+            description: "Project areas",
+            countLabel: String(model.totals.areas),
+            content: projectJsonString(data.areas),
+            icon: BriefcaseBusiness
+        },
+        {
+            id: "pages",
+            name: ".anlyx/project/pages.json",
+            description: "Page index and routes",
+            countLabel: String(model.totals.pages),
+            content: projectJsonString(data.pages),
+            icon: BookOpen
+        },
+        {
+            id: "features",
+            name: ".anlyx/project/features.json",
+            description: "Page capabilities",
+            countLabel: String(model.totals.features),
+            content: projectJsonString(data.features),
+            icon: FileText
+        },
+        {
+            id: "overview",
+            name: ".anlyx/project/overview.json",
+            description: "Human project summary",
+            countLabel: data.overview.summary ? "authored" : "empty",
+            content: projectJsonString(data.overview),
+            icon: BookOpen
+        },
+        {
+            id: "capabilities",
+            name: ".anlyx/project/capabilities.json",
+            description: "Readable product capabilities",
+            countLabel: String(data.capabilities.length),
+            content: projectJsonString(data.capabilities),
+            icon: Workflow
+        },
+        {
+            id: "requests",
+            name: ".anlyx/project/requests.json",
+            description: "Frontend and API requests",
+            countLabel: String(model.totals.requests),
+            content: projectJsonString(data.requests),
+            icon: Network
+        },
+        {
+            id: "flows",
+            name: ".anlyx/project/flows.json",
+            description: "Request-to-backend paths",
+            countLabel: String(model.totals.flows),
+            content: projectJsonString(data.flows),
+            icon: Workflow
+        },
+        {
+            id: "architecture",
+            name: ".anlyx/project/architecture.json",
+            description: "Architecture nodes and edges",
+            countLabel: String(model.totals.architectureNodes),
+            content: projectJsonString(data.architecture),
+            icon: Layers3
+        },
+        {
+            id: "evidence",
+            name: ".anlyx/project/evidence.json",
+            description: "Proof and confidence sources",
+            countLabel: String(model.totals.evidence),
+            content: projectJsonString(data.evidence),
+            icon: ShieldCheck
+        },
+        {
+            id: "data-lifecycles",
+            name: ".anlyx/project/data-lifecycles.json",
+            description: "Core data lifecycle maps",
+            countLabel: String(data.dataLifecycles.length),
+            content: projectJsonString(data.dataLifecycles),
+            icon: Database
+        },
+        {
+            id: "impact-maps",
+            name: ".anlyx/project/impact-maps.json",
+            description: "Product impact maps",
+            countLabel: String(data.impactMaps.length),
+            content: projectJsonString(data.impactMaps),
+            icon: Network
+        },
+        {
+            id: "coverage",
+            name: ".anlyx/project/coverage.json",
+            description: "Detected and modeled coverage",
+            countLabel: data.coverage?.status ?? "unknown",
+            content: projectJsonString(data.coverage ?? { status: "unknown" }),
+            icon: Gauge
+        },
+        {
+            id: "dictionary",
+            name: ".anlyx/project/dictionary.json",
+            description: "Language and term dictionary",
+            countLabel: String(data.dictionary.terms.length),
+            content: projectJsonString(data.dictionary),
+            icon: Languages
+        }
+    ];
+    if (data.measurements.length > 0) {
+        files.push({
+            id: "measurements",
+            name: ".anlyx/project/measurements.json",
+            description: "Optional runtime measurements",
+            countLabel: String(model.totals.measurements),
+            content: projectJsonString(data.measurements),
+            icon: Clock3
+        });
+    }
+    if (validationReport) {
+        files.push({
+            id: "validation-report",
+            name: ".anlyx/validation-report.json",
+            description: "Source and coverage validation",
+            countLabel: `${validationReport.issues.length} issues`,
+            content: projectJsonString(validationReport),
+            icon: ShieldCheck
+        });
+    }
+    return files;
+}
+function coverageValue(modeled, detected) {
+    return detected === undefined ? String(modeled) : `${modeled} / ${detected}`;
+}
+function formatSourceIssueDetails(breakdown) {
+    if (!breakdown) {
+        return "";
+    }
+    const lineIssues = breakdown.placeholderLines + breakdown.outOfRangeLines;
+    const parts = [
+        breakdown.missingFiles > 0 ? `${breakdown.missingFiles} missing file` : "",
+        breakdown.missingSymbols > 0 ? `${breakdown.missingSymbols} symbol` : "",
+        lineIssues > 0 ? `${lineIssues} line` : ""
+    ].filter(Boolean);
+    return parts.join(" / ");
+}
+function projectJsonInventoryItems(data, model) {
+    return [
+        { id: "schemaVersion", label: "schemaVersion", value: data.schemaVersion, icon: Braces },
+        { id: "project", label: "project", value: data.project.name, icon: Folder },
+        { id: "areas", label: "areas", value: String(model.totals.areas), icon: BriefcaseBusiness },
+        { id: "pages", label: "pages", value: String(model.totals.pages), icon: BookOpen },
+        { id: "features", label: "features", value: String(model.totals.features), icon: FileText },
+        {
+            id: "overview",
+            label: "overview",
+            value: data.overview.summary ? "authored" : "empty",
+            icon: BookOpen
+        },
+        {
+            id: "capabilities",
+            label: "capabilities",
+            value: String(data.capabilities.length),
+            icon: Workflow
+        },
+        { id: "requests", label: "requests", value: String(model.totals.requests), icon: Network },
+        { id: "flows", label: "flows", value: String(model.totals.flows), icon: Workflow },
+        {
+            id: "architecture",
+            label: "architecture",
+            value: String(model.totals.architectureNodes),
+            icon: Layers3
+        },
+        { id: "evidence", label: "evidence", value: String(model.totals.evidence), icon: ShieldCheck },
+        {
+            id: "dataLifecycles",
+            label: "dataLifecycles",
+            value: String(data.dataLifecycles.length),
+            icon: Database
+        },
+        {
+            id: "impactMaps",
+            label: "impactMaps",
+            value: String(data.impactMaps.length),
+            icon: Network
+        },
+        {
+            id: "measurements",
+            label: "measurements",
+            value: String(model.totals.measurements),
+            icon: Clock3
+        },
+        {
+            id: "dictionary",
+            label: "dictionary",
+            value: String(data.dictionary.terms.length),
+            icon: Languages
+        }
+    ];
+}
+function projectJsonString(value) {
+    return JSON.stringify(value, null, 2);
+}
+function JsonDetailsCard({ children, title }) {
+    return (_jsxs("section", { className: "project-json-details-card", children: [_jsx("h2", { children: title }), children] }));
+}
+function ProjectDetailRow({ label, tone, value }) {
+    return (_jsxs("div", { className: "project-detail-row", children: [_jsx("dt", { children: label }), _jsx("dd", { className: tone ? `is-${tone}` : "", children: value })] }));
+}
+function ProjectStatusBar({ data, locale, model, validationReport }) {
+    const sourceFile = projectSourceFile(model);
+    const generatedBy = projectAgentName(model);
+    const pageCoverage = projectPageCoverageSummary(data, validationReport);
+    const coverageStatus = validationReport?.summary.coverageStatus ?? data.coverage?.status;
+    const sourceIssueCount = validationReport?.summary.sourceIssueCount ?? 0;
+    const hasTrustWarning = coverageStatus === "partial" || sourceIssueCount > 0;
+    return (_jsxs("div", { className: "project-statusbar", "aria-label": "Project source status", children: [_jsxs("div", { className: "project-statusbar__provenance", children: [_jsxs("span", { children: [_jsx(Code2, { size: 15 }), tp(locale, "source"), ": ", _jsx("strong", { children: sourceFile })] }), _jsxs("span", { children: [_jsx(Zap, { size: 15 }), tp(locale, "agent"), ": ", _jsx("strong", { children: generatedBy })] })] }), _jsxs("div", { className: "project-statusbar__summary", children: [_jsx("strong", { children: pageCoverage.label }), coverageStatus ? (_jsxs("span", { className: `project-status ${hasTrustWarning ? "project-status--amber" : "project-status--green"}`, children: [_jsx(ShieldCheck, { size: 15 }), coverageStatus === "partial" ? "Partial analysis" : "Coverage checked"] })) : null, _jsxs("span", { children: [_jsx(Clock3, { size: 15 }), tp(locale, "lastAnalysis"), ": ", formatDateTime(model.project.analyzedAt)] }), _jsxs("span", { className: "project-status project-status--green", children: [_jsx(Check, { size: 15 }), tp(locale, "upToDate")] })] })] }));
+}
+function projectPageCoverageSummary(data, validationReport) {
+    const modeled = validationReport?.summary.modeled.pages ?? data.coverage?.modeled?.pages ?? data.pages.length;
+    const detected = validationReport?.summary.detected?.pages ?? data.coverage?.detected?.pages;
+    const value = coverageValue(modeled, detected);
+    return {
+        detected,
+        label: detected !== undefined ? `${value} pages modeled` : `${modeled} pages analyzed`,
+        modeled,
+        value
+    };
+}
+function evidenceStatusLabel(status) {
+    if (status === "source-matched")
+        return "Source-matched";
+    if (status === "agent-inferred")
+        return "Agent-inferred";
+    if (status === "not-proven")
+        return "Not-proven";
+    return status.charAt(0).toUpperCase() + status.slice(1);
+}
+function downloadProjectJson(rawJson, fileName = "anlyx.project.json") {
+    const blob = new Blob([rawJson], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    const safeFileName = fileName.split("/").pop() ?? "anlyx.project.json";
+    link.href = url;
+    link.download = safeFileName;
+    link.click();
+    URL.revokeObjectURL(url);
+}
+function WorkspaceSidebar({ activeView, locale, onLocaleChange, onViewChange }) {
+    return (_jsxs("aside", { className: "workspace-sidebar workspace-sidebar--timing", "aria-label": t(locale, "sidebarLabel"), children: [_jsx("div", { className: "workspace-brand workspace-brand--wordmark", children: _jsx("img", { alt: "Anlyx", src: "/workspace/anlyx-logo-transparent.png" }) }), _jsxs("nav", { className: "workspace-nav", "aria-label": t(locale, "primaryNavLabel"), children: [_jsxs("button", { className: activeView === "flows" ? "is-active" : "", type: "button", onClick: () => onViewChange("flows"), children: [_jsx(Workflow, { size: 19 }), _jsx("span", { children: t(locale, "flows") })] }), _jsxs("button", { className: activeView === "map" ? "is-active" : "", type: "button", onClick: () => onViewChange("map"), children: [_jsx(Network, { size: 19 }), _jsx("span", { children: "Map" })] }), _jsxs("button", { className: activeView === "json" ? "is-active" : "", type: "button", onClick: () => onViewChange("json"), children: [_jsx(FileCode2, { size: 19 }), _jsx("span", { children: "JSON" })] })] }), _jsx("div", { className: "workspace-sidebar__bottom", children: _jsxs("div", { className: "language-toggle", "aria-label": t(locale, "language"), children: [_jsx("button", { className: locale === "en" ? "is-active" : "", type: "button", onClick: () => onLocaleChange("en"), children: "EN" }), _jsx("button", { className: locale === "ko" ? "is-active" : "", type: "button", onClick: () => onLocaleChange("ko"), children: "\uD55C" })] }) })] }));
+}
+function WorkspaceHeader({ activeTab, data, onTabChange, record, recordCount }) {
+    const locale = useWorkspaceLocale();
+    return (_jsxs("header", { className: "workspace-header", children: [_jsxs("div", { className: "workspace-header__top", children: [_jsxs("div", { children: [_jsxs("div", { className: "breadcrumbs", children: [_jsx("span", { children: t(locale, "flows") }), _jsx(ChevronRight, { size: 13 }), _jsxs("strong", { children: [t(locale, "flow"), " ", record ? compactId(record.requestId) : t(locale, "waiting")] })] }), _jsxs("div", { className: "title-row", children: [_jsx("h1", { children: record ? t(locale, "matchedBackendFlow") : t(locale, "liveWorkspace") }), _jsx("span", { className: `capture-dot ${recordCount > 0 ? "is-live" : ""}`, "aria-label": recordCount > 0 ? t(locale, "captureConnected") : t(locale, "waitingForCapture") })] }), _jsx("p", { children: record
+                                    ? t(locale, "matchedSubtitle")
+                                    : `${data.projectName} ${t(locale, "readyPrefix")}${t(locale, "readySuffix")}` })] }), _jsxs("div", { className: "header-meta", children: [_jsxs("span", { children: [_jsx(Clock3, { size: 15 }), t(locale, "lastScan"), " ", formatDateTime(data.generatedAt)] }), _jsxs("span", { children: [_jsx(Clock3, { size: 15 }), formatDateTime(record?.createdAt)] })] })] }), _jsx("div", { className: "workspace-header__tabs", children: _jsx(FlowTabs, { activeTab: activeTab, onTabChange: onTabChange }) })] }));
+}
+function FlowTabs({ activeTab, onTabChange }) {
+    const locale = useWorkspaceLocale();
+    return (_jsx("div", { className: "flow-tabs", role: "tablist", "aria-label": t(locale, "flowViews"), children: ["summary", "timing", "diagram"].map((tab) => (_jsx("button", { "aria-selected": activeTab === tab, className: activeTab === tab ? "is-active" : "", role: "tab", type: "button", onClick: () => onTabChange(tab), children: tabLabel(tab, locale) }, tab))) }));
+}
+function JsonReaderView({ data }) {
+    const [activeTab, setActiveTab] = useState("overview");
+    const locale = useWorkspaceLocale();
+    const flows = data.flows;
+    const endpointsById = useMemo(() => new Map(data.endpoints.map((endpoint) => [endpoint.id, endpoint])), [data.endpoints]);
+    const rawJson = useMemo(() => JSON.stringify(data, null, 2), [data]);
+    const stats = useMemo(() => jsonStats(data), [data]);
+    return (_jsxs("div", { className: "json-reader-layout", id: "json", children: [_jsxs("header", { className: "json-reader-hero", children: [_jsxs("div", { children: [_jsxs("div", { className: "breadcrumbs", children: [_jsx("span", { children: t(locale, "flows") }), _jsx(ChevronRight, { size: 13 }), _jsx("strong", { children: "JSON" })] }), _jsxs("div", { className: "title-row", children: [_jsx("h1", { children: "JSON workspace" }), _jsx("span", { className: "capture-dot is-live", "aria-label": "JSON loaded" })] }), _jsx("p", { children: "Inspect the imported snapshot exactly as Anlyx reads it: schema, flows, evidence, warnings, and raw data." })] }), _jsxs("div", { className: "json-reader-source", children: [_jsx("span", { children: "loaded from" }), _jsx("strong", { children: "report-data.json" }), _jsx("small", { children: formatDateTime(data.generatedAt) })] })] }), _jsxs("section", { className: "json-stat-grid", "aria-label": "JSON inventory", children: [_jsx(JsonStatCard, { label: "schema", value: data.schemaVersion, detail: data.projectName }), _jsx(JsonStatCard, { label: "requests", value: String(stats.endpointCount), detail: `${stats.flowCount} mapped flows` }), _jsx(JsonStatCard, { label: "graph", value: `${stats.nodeCount} / ${stats.edgeCount}`, detail: "nodes / edges" }), _jsx(JsonStatCard, { label: "evidence", value: String(stats.evidenceCount), detail: `${stats.warningCount} warnings` })] }), _jsxs("section", { className: "json-reader-panel", children: [_jsx("div", { className: "json-reader-tabs", role: "tablist", "aria-label": "JSON reader views", children: ["overview", "flows", "raw"].map((tab) => (_jsx("button", { "aria-selected": activeTab === tab, className: activeTab === tab ? "is-active" : "", role: "tab", type: "button", onClick: () => setActiveTab(tab), children: jsonTabLabel(tab) }, tab))) }), activeTab === "overview" ? (_jsx(JsonOverview, { data: data, stats: stats })) : activeTab === "flows" ? (_jsx("div", { className: "json-flow-list", children: flows.map((flow) => (_jsx(JsonFlowCard, { endpoint: endpointsById.get(flow.endpointId), flow: flow }, flow.endpointId))) })) : (_jsxs("div", { className: "json-raw-view", children: [_jsxs("div", { className: "json-raw-view__header", children: [_jsxs("div", { children: [_jsx("strong", { children: "Raw imported JSON" }), _jsx("span", { children: "Pretty printed, read-only" })] }), _jsx("code", { children: formatBytes(rawJson.length) })] }), _jsx("pre", { children: rawJson })] }))] })] }));
+}
+function JsonStatCard({ detail, label, value }) {
+    return (_jsxs("article", { className: "json-stat-card", children: [_jsx("span", { children: label }), _jsx("strong", { title: value, children: value }), _jsx("small", { children: detail })] }));
+}
+function JsonOverview({ data, stats }) {
+    const topMethods = methodCounts(data);
+    const topWarnings = data.warnings.slice(0, 4);
+    return (_jsxs("div", { className: "json-overview-grid", children: [_jsxs("article", { className: "json-section-card", children: [_jsx("h2", { children: "Document" }), _jsxs("dl", { className: "json-kv-list", children: [_jsxs("div", { children: [_jsx("dt", { children: "projectName" }), _jsx("dd", { children: data.projectName })] }), _jsxs("div", { children: [_jsx("dt", { children: "schemaVersion" }), _jsx("dd", { children: data.schemaVersion })] }), _jsxs("div", { children: [_jsx("dt", { children: "generatedAt" }), _jsx("dd", { children: formatDateTime(data.generatedAt) })] }), _jsxs("div", { children: [_jsx("dt", { children: "pages" }), _jsx("dd", { children: stats.pageCount })] }), _jsxs("div", { children: [_jsx("dt", { children: "edges" }), _jsx("dd", { children: stats.edgeCount })] }), _jsxs("div", { children: [_jsx("dt", { children: "capture" }), _jsx("dd", { children: data.capture ? "included" : "not included" })] })] })] }), _jsxs("article", { className: "json-section-card", children: [_jsx("h2", { children: "Requests" }), _jsx("div", { className: "json-method-bars", children: topMethods.map(([method, count]) => (_jsxs("div", { children: [_jsx("span", { children: method }), _jsx("i", { style: {
+                                        width: `${Math.max(12, (count / Math.max(stats.endpointCount, 1)) * 100)}%`
+                                    } }), _jsx("strong", { children: count })] }, method))) })] }), _jsxs("article", { className: "json-section-card json-section-card--wide", children: [_jsx("h2", { children: "Flow index" }), _jsx("div", { className: "json-path-preview", children: data.flows.slice(0, 5).map((flow) => {
+                            const endpoint = data.endpoints.find((item) => item.id === flow.endpointId);
+                            return (_jsxs("div", { children: [_jsx("span", { children: endpoint ? `${endpoint.method} ${endpoint.path}` : flow.endpointId }), _jsxs("strong", { children: [flow.nodes.length, " nodes \u00B7 ", flow.edges.length, " edges"] })] }, flow.endpointId));
+                        }) })] }), _jsxs("article", { className: "json-section-card json-section-card--wide", children: [_jsx("h2", { children: "Warnings" }), _jsx("div", { className: "json-warning-list", children: topWarnings.length > 0 ? (topWarnings.map((warning, index) => (_jsxs("div", { children: [_jsx("code", { children: warning.code }), _jsx("span", { children: warning.message })] }, `${warning.code}-${index}`)))) : (_jsx("p", { children: "No warnings in the imported report data." })) })] })] }));
+}
+function JsonFlowCard({ endpoint, flow }) {
+    const mainNodes = flow.mainPath
+        .map((nodeId) => flow.nodes.find((node) => node.id === nodeId))
+        .filter((node) => Boolean(node));
+    return (_jsxs("article", { className: "json-flow-card", children: [_jsxs("header", { children: [_jsx("span", { children: endpoint?.method ?? "FLOW" }), _jsxs("div", { children: [_jsx("strong", { title: endpoint?.path ?? flow.endpointId, children: endpoint?.path ?? flow.endpointId }), _jsxs("small", { children: [flow.nodes.length, " nodes \u00B7 ", flow.edges.length, " edges \u00B7 ", flow.subFlows.length, " sub flows"] })] })] }), _jsx("div", { className: "json-node-rail", children: (mainNodes.length > 0 ? mainNodes : flow.nodes.slice(0, 6)).map((node) => (_jsxs("span", { title: node.label, children: [_jsx("i", { children: node.type }), _jsx("strong", { children: node.label }), _jsxs("small", { children: [node.evidenceIds?.length ?? node.evidence?.length ?? 0, " evidence"] })] }, node.id))) })] }));
+}
+function jsonStats(data) {
+    return {
+        edgeCount: data.flows.reduce((sum, flow) => sum + flow.edges.length, 0),
+        endpointCount: data.endpoints.length,
+        evidenceCount: data.flows.reduce((sum, flow) => sum +
+            flow.nodes.reduce((nodeSum, node) => nodeSum + (node.evidence?.length ?? node.evidenceIds?.length ?? 0), 0), 0),
+        flowCount: data.flows.length,
+        nodeCount: data.flows.reduce((sum, flow) => sum + flow.nodes.length, 0),
+        pageCount: data.pages.length,
+        warningCount: data.warnings.length
+    };
+}
+function methodCounts(data) {
+    const counts = new Map();
+    for (const endpoint of data.endpoints) {
+        counts.set(endpoint.method, (counts.get(endpoint.method) ?? 0) + 1);
+    }
+    return [...counts.entries()].sort((first, second) => second[1] - first[1]);
+}
+function jsonTabLabel(tab) {
+    if (tab === "overview")
+        return "Overview";
+    if (tab === "flows")
+        return "Flows";
+    return "Raw JSON";
+}
+function formatBytes(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 RequestContextPanel({ data, pageContext, record }) {
+    const locale = useWorkspaceLocale();
+    const layers = record ? diagramLayers(record) : [];
+    const controller = findFirstLayer(layers, ["controller"]);
+    const result = findFirstLayer(layers, ["result"]);
+    const pageUrl = displayPageUrl(record, locale, pageContext);
+    return (_jsxs("section", { className: "benefits-studio request-context-panel", "aria-label": t(locale, "selectedRequestLabel"), children: [_jsx("div", { className: "benefits-studio__main", children: _jsxs("div", { className: "benefits-studio__copy", children: [_jsxs("small", { children: [t(locale, "currentPage"), " \u00B7 ", data.projectName] }), _jsx("h2", { title: pageUrl, children: pageUrl }), _jsx("p", { children: record
+                                ? requestContextDescription(record, locale)
+                                : t(locale, "noCurrentPageRequestsCopy") })] }) }), record ? (_jsxs("div", { className: "request-context-actions", "aria-label": t(locale, "requestEvidenceSummary"), children: [_jsxs("span", { children: [_jsx(OutcomeIcon, { record: record, size: 14 }), record.status ?? t(locale, "pending"), " ", outcomeStatusText(record, locale)] }), _jsxs("span", { children: [_jsx(Clock3, { size: 14 }), formatDuration(recordTotalDuration(record))] }), _jsxs("span", { children: [_jsx(Workflow, { size: 14 }), controller?.label ?? t(locale, "controllerPending")] }), _jsxs("span", { children: [_jsx(Flag, { size: 14 }), result?.label ?? outcomeLabel(record, locale)] })] })) : null] }));
+}
+function WorkspaceContent({ record, tab }) {
+    if (tab === "summary") {
+        return _jsx(SummaryFlowView, { record: record });
+    }
+    if (tab === "diagram") {
+        return _jsx(DiagramFlowView, { record: record });
+    }
+    return _jsx(TimingWaterfallView, { record: record });
+}
+function TimingWaterfallView({ record }) {
+    const locale = useWorkspaceLocale();
+    const [timelineZoom, setTimelineZoom] = useState(1);
+    const [focusSlowest, setFocusSlowest] = useState(false);
+    const rows = compactTimingLayers(record);
+    const total = recordTotalDuration(record, rows);
+    const ticks = timelineTicks(total);
+    const slowestLayer = rows
+        .filter((layer) => !isUnprovenLayer(layer) && layer.type !== "api" && layer.type !== "result")
+        .sort((a, b) => estimatedLayerDuration(b, total) - estimatedLayerDuration(a, total))[0];
+    return (_jsxs("section", { className: "waterfall-card", "aria-label": t(locale, "flowTiming"), children: [_jsxs("div", { className: "waterfall-toolbar", children: [_jsxs("div", { className: "duration-chip", children: [t(locale, "totalDuration"), "\u00A0 ", _jsxs("strong", { children: [Math.round(total), " ms"] })] }), _jsxs("div", { className: "waterfall-toolbar__right", children: [_jsxs("div", { className: "zoom-group", children: [_jsx("button", { type: "button", onClick: () => setTimelineZoom(0.92), children: t(locale, "fit") }), _jsxs("button", { type: "button", onClick: () => setTimelineZoom(1), children: [Math.round(timelineZoom * 100), "%"] })] }), _jsxs("div", { className: "zoom-icons", children: [_jsx("button", { type: "button", "aria-label": t(locale, "focusSlowestSegment"), onClick: () => setFocusSlowest((value) => !value), children: _jsx(Search, { size: 17 }) }), _jsx("button", { type: "button", "aria-label": t(locale, "zoomIn"), onClick: () => setTimelineZoom((value) => Math.min(1.24, value + 0.08)), children: _jsx(Plus, { size: 17 }) })] })] })] }), _jsx(TimingOverview, { rows: rows, slowestLayer: slowestLayer, total: total }), _jsxs("div", { className: "waterfall-grid", style: { "--timeline-zoom": timelineZoom }, children: [_jsxs("div", { className: "waterfall-axis", children: [_jsx("span", { children: t(locale, "layer") }), _jsx("span", { children: t(locale, "node") }), _jsx("span", { children: t(locale, "duration") }), _jsx("div", { className: "waterfall-axis__timeline", style: { "--tick-count": ticks.length - 1 }, children: ticks.map((tick) => (_jsxs("strong", { style: { left: `${timelineX((tick / total) * 100)}%` }, children: [Math.round(tick), " ms"] }, tick))) })] }), rows.map((layer) => (_jsx(WaterfallRow, { focused: focusSlowest && layer.id === slowestLayer?.id, layer: layer, runtimeSource: record.runtimeSource, total: total, tickCount: ticks.length - 1 }, layer.id)))] }), _jsx(DurationLegend, {})] }));
+}
+function TimingOverview({ rows, slowestLayer, total }) {
+    const locale = useWorkspaceLocale();
+    const breakdown = timingBreakdownSegments(rows, total);
+    return (_jsxs("section", { className: "timing-overview", "aria-label": t(locale, "totalDurationOverview"), children: [_jsxs("div", { className: "timing-overview__top", children: [_jsxs("div", { children: [_jsx("span", { children: t(locale, "totalDuration") }), _jsxs("strong", { children: ["0 ms to ", Math.round(total), " ms"] })] }), slowestLayer ? (_jsxs("p", { children: [t(locale, "slowestShownSegment"), ": ", _jsx("strong", { children: layerLabel(slowestLayer, locale) }), " ", _jsxs("span", { children: [Math.round(estimatedLayerDuration(slowestLayer, total)), " ms"] })] })) : null] }), _jsxs("div", { className: "timing-overview__breakdown", children: [_jsxs("div", { className: "timing-overview__scale", "aria-hidden": "true", children: [_jsx("strong", { children: "0" }), _jsxs("strong", { children: [Math.round(total), " ms"] })] }), _jsx("div", { className: "timing-breakdown-bar", "aria-label": t(locale, "totalDurationOverview"), children: breakdown.map((segment) => (_jsx("span", { className: `timing-breakdown-segment timing-breakdown-segment--${segment.type} ${segment.durationMs <= 0 ? "is-empty" : ""}`, style: { width: `${segment.width}%` }, title: `${segment.label}: ${Math.round(segment.durationMs)} ms` }, segment.type))) }), _jsx("div", { className: "timing-breakdown-legend", children: breakdown.map((segment) => (_jsxs("span", { className: segment.durationMs <= 0 ? "is-empty" : "", title: `${segment.label}: ${Math.round(segment.durationMs)} ms`, children: [_jsx("i", { className: `timing-breakdown-dot timing-breakdown-dot--${segment.type}` }), _jsx("b", { children: segment.label }), _jsxs("strong", { children: [Math.round(segment.durationMs), " ms"] })] }, segment.type))) })] })] }));
+}
+function WaterfallRow({ layer, focused, runtimeSource, tickCount, total }) {
+    const locale = useWorkspaceLocale();
+    const Icon = layerIcons[layer.type] ?? Circle;
+    const muted = isUnprovenLayer(layer);
+    const sourceMatched = isSourceMatchedLayer(layer);
+    const visualType = visualLayerType(layer);
+    const isResultMarker = layer.type === "result";
+    const duration = layer.durationMs ?? estimatedLayerDuration(layer, total);
+    const runtimeGroupCount = backendRuntimeGroupCount(layer);
+    const left = layerOffset(layer, total);
+    const width = muted
+        ? 0
+        : duration <= 0
+            ? 0
+            : Math.max(isResultMarker ? 0.8 : 1.8, Math.min(100 - left, (duration / total) * 100));
+    const visualLeft = timelineX(left);
+    const visualWidth = timelineWidth(left, width);
+    return (_jsxs("div", { className: `waterfall-row waterfall-row--${visualType} ${muted ? "is-muted" : ""} ${sourceMatched ? "is-source-matched" : ""} ${focused ? "is-focused" : ""} ${layer.execution === "executed" || layer.execution === "inferred" ? "is-neutral" : ""}`, children: [_jsxs("div", { className: "waterfall-layer", children: [_jsx("span", { className: `layer-icon layer-icon--${visualType}`, children: _jsx(Icon, { size: 18 }) }), _jsx("span", { children: layerLabel(layer, locale) })] }), _jsxs("div", { className: "waterfall-node", children: [_jsx("strong", { children: layer.label }), _jsx("span", { children: layerSubtitle(layer, locale, runtimeSource) })] }), _jsx("div", { className: "waterfall-duration", children: muted ? (_jsxs(_Fragment, { children: [_jsx("strong", { children: "-" }), _jsx("small", { children: t(locale, "notProven") })] })) : (_jsxs(_Fragment, { children: [_jsx("strong", { children: durationValueLabel(layer, duration) }), _jsx("small", { children: durationCaption(layer, duration, total, locale, runtimeSource, runtimeGroupCount) })] })) }), _jsxs("div", { className: "waterfall-track", style: { "--tick-count": tickCount }, children: [_jsx("span", { className: muted
+                            ? "waterfall-not-proven-label"
+                            : `waterfall-bar waterfall-bar--${visualType}${isResultMarker ? " is-marker" : ""}`, style: muted ? undefined : { left: `${visualLeft}%`, width: `${visualWidth}%` }, children: muted ? t(locale, "knownBySourceOnly") : null }), isDecisionLayer(layer) && layer.execution !== "executed" ? (_jsx("span", { className: "row-badge row-badge--red", children: t(locale, "bottleneck") })) : null, sourceMatched && focused ? (_jsx("span", { className: "row-badge row-badge--blue", children: t(locale, "slowestSourceSegment") })) : null, layer.type === "result" && layer.execution === "blocked" ? (_jsx("span", { className: "row-badge row-badge--orange", children: t(locale, "blocked") })) : null] })] }));
+}
+function SummaryFlowView({ record }) {
+    const locale = useWorkspaceLocale();
+    const rows = summaryRows(record);
+    const matchedRows = rows.filter((layer) => !isUnprovenLayer(layer));
+    const unprovenRows = rows.filter((layer) => isUnprovenLayer(layer));
+    return (_jsx("section", { className: "summary-view", "aria-label": t(locale, "flowSummary"), children: _jsxs("div", { className: "summary-panel", children: [_jsxs("div", { className: "summary-panel__header", children: [_jsxs("div", { children: [_jsx("h2", { children: t(locale, "observedSourceMatchedPath") }), _jsx("p", { children: t(locale, "summaryMatchedCopy") })] }), _jsxs("span", { children: [matchedRows.length, " ", t(locale, "layers")] })] }), _jsx("div", { className: "summary-path-list", children: matchedRows.map((layer, index) => (_jsx(SummaryPathRow, { index: index + 1, layer: layer, runtimeSource: record.runtimeSource }, layer.id))) }), unprovenRows.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "summary-panel__subheader", children: [_jsx("h3", { children: t(locale, "knownDownstreamPath") }), _jsxs("span", { children: [unprovenRows.length, " ", t(locale, "layers")] })] }), _jsx("div", { className: "summary-path-list summary-path-list--muted", children: unprovenRows.map((layer, index) => (_jsx(SummaryPathRow, { index: matchedRows.length + index + 1, layer: layer, runtimeSource: record.runtimeSource }, layer.id))) })] })) : null, _jsx("p", { className: "summary-note", children: t(locale, "summaryNote") })] }) }));
+}
+function SummaryPathRow({ index, layer, runtimeSource }) {
+    const locale = useWorkspaceLocale();
+    const Icon = layerIcons[layer.type] ?? Circle;
+    const visualType = visualLayerType(layer);
+    const muted = isUnprovenLayer(layer);
+    return (_jsxs("article", { className: `summary-path-row ${muted ? "is-muted" : ""}`, children: [_jsx("span", { className: `summary-step summary-step--${visualType}`, children: index }), _jsx("span", { className: `layer-icon layer-icon--${visualType}`, children: _jsx(Icon, { size: 18 }) }), _jsxs("div", { children: [_jsx("small", { children: layerLabel(layer, locale) }), _jsx("strong", { children: layer.label }), _jsx("p", { children: layerSubtitle(layer, locale, runtimeSource) })] }), _jsx("span", { className: `summary-status summary-status--${summaryStatusTone(layer)}`, children: summaryStatusLabel(layer, locale) })] }));
+}
+function DiagramFlowView({ record }) {
+    const locale = useWorkspaceLocale();
+    const [zoom, setZoom] = useState(0.82);
+    const nodeTypes = useMemo(() => ({ anlyxNode: LayeredFlowNode }), []);
+    const edgeTypes = useMemo(() => ({ anlyxSmooth: LayeredSmoothEdge }), []);
+    const model = useMemo(() => buildLayeredReactFlowDiagram(record, locale), [record, locale]);
+    useEffect(() => {
+        setZoom(0.82);
+    }, [record.id]);
+    return (_jsxs("section", { className: "diagram-canvas-card", "aria-label": t(locale, "flowDiagram"), children: [_jsxs("div", { className: "diagram-canvas-toolbar", children: [_jsxs("div", { className: "diagram-legend", children: [_jsxs("span", { children: [_jsx("i", { className: "solid-line" }), t(locale, "observedSourceMatchedLegend")] }), _jsxs("span", { children: [_jsx("i", { className: "dashed-line" }), t(locale, "knownDownstreamLegend")] }), _jsxs("span", { children: [_jsx(Circle, { size: 12 }), t(locale, "entryPoint")] })] }), _jsxs("div", { className: "diagram-controls", children: [_jsxs("button", { type: "button", onClick: () => setZoom(0.82), children: [_jsx(Gauge, { size: 16 }), t(locale, "fitView")] }), _jsxs("button", { type: "button", onClick: () => setZoom(1), children: [_jsx(RotateCw, { size: 16 }), t(locale, "reset")] }), _jsxs("div", { children: [_jsx("button", { type: "button", "aria-label": t(locale, "zoomOut"), onClick: () => setZoom((value) => Math.max(0.72, value - 0.1)), children: _jsx(Minus, { size: 16 }) }), _jsxs("span", { children: [Math.round(zoom * 100), "%"] }), _jsx("button", { type: "button", "aria-label": t(locale, "zoomIn"), onClick: () => setZoom((value) => Math.min(1.2, value + 0.1)), children: _jsx(Plus, { size: 16 }) })] })] })] }), _jsx("div", { className: "diagram-canvas diagram-canvas--layered", style: {
+                    "--diagram-stage-height": `${Math.ceil(model.canvasHeight * zoom + 72)}px`
+                }, children: _jsxs("div", { className: `layered-diagram layered-diagram--react-flow ${zoom === 0.82 ? "layered-diagram--fit" : ""}`, style: {
+                        "--layered-column-height": `${model.canvasHeight - 50}px`,
+                        transform: `scale(${zoom})`
+                    }, children: [model.layers.map((layer) => (_jsx(LayeredDiagramColumnBackdrop, { hasSecondaryNodes: model.nodes.some((node) => node.data.node.layer === layer && !node.data.node.isMainPath), layer: layer, locale: locale }, layer))), _jsx(ReactFlow, { className: "layered-react-flow", edgeTypes: edgeTypes, edges: model.edges, fitView: false, maxZoom: 1, minZoom: 1, nodes: model.nodes, nodesConnectable: false, nodesDraggable: false, nodeTypes: nodeTypes, panOnDrag: false, preventScrolling: false, proOptions: { hideAttribution: true }, zoomOnDoubleClick: false, zoomOnPinch: false, zoomOnScroll: false })] }) }), _jsxs("div", { className: "layered-diagram-status", children: [_jsxs("span", { children: [_jsx("i", { className: "status-dot status-dot--success" }), locale === "ko" ? "성공" : "Success"] }), _jsxs("span", { children: [_jsx("i", { className: "status-dot status-dot--warning" }), locale === "ko" ? "주의" : "Warning"] }), _jsxs("span", { children: [_jsx("i", { className: "status-dot status-dot--error" }), locale === "ko" ? "오류" : "Error"] }), _jsxs("span", { children: [_jsx("i", { className: "dashed-line" }), locale === "ko" ? "미확인" : "not proven"] }), _jsxs("strong", { children: [t(locale, "totalDuration"), ": ", recordDuration(record), " ms"] })] })] }));
+}
+const layeredDiagramLayers = [
+    "browser",
+    "api",
+    "application",
+    "data",
+    "response"
+];
+const layeredLayout = {
+    canvasHeight: 610,
+    columnWidth: 220,
+    nodeWidth: 180,
+    nodeHeight: 148,
+    mainStartY: 98,
+    mainGap: 172,
+    secondaryStartY: 430,
+    secondaryGap: 158,
+    layerX: {
+        browser: 0,
+        api: 260,
+        application: 520,
+        data: 860,
+        response: 1120
+    }
+};
+function LayeredDiagramColumnBackdrop({ hasSecondaryNodes, layer, locale }) {
+    const heading = layeredLayerMeta(layer, locale);
+    const Icon = heading.icon;
+    return (_jsxs("section", { className: `layered-column layered-column--${layer}`, style: { left: layeredLayout.layerX[layer] }, children: [_jsxs("header", { className: "layered-column__header", children: [_jsx("span", { children: _jsx(Icon, { size: 22 }) }), _jsxs("div", { children: [_jsx("strong", { children: heading.title }), _jsx("small", { children: heading.subtitle })] })] }), hasSecondaryNodes ? (_jsx("div", { className: "layered-column__divider layered-column__divider--absolute", children: locale === "ko" ? "알려졌지만 미확인" : "Known but not proven" })) : null] }));
+}
+function LayeredFlowNode({ data }) {
+    return _jsx(LayeredNodeCard, { node: data.node });
+}
+function LayeredNodeCard({ node }) {
+    const Icon = layeredNodeIcon(node);
+    return (_jsxs("article", { className: `layered-node layered-node--${node.layer} layered-node--${node.status} ${node.isMainPath ? "is-main-path" : "is-secondary-path"} ${node.kind === "action" ? "is-entry-point" : ""}`, title: `${node.title} · ${node.subtitle}`, children: [_jsx(Handle, { className: "anlyx-flow-handle", id: "left", position: Position.Left, type: "target" }), _jsx(Handle, { className: "anlyx-flow-handle", id: "right", position: Position.Right, type: "source" }), _jsx(Handle, { className: "anlyx-flow-handle", id: "top", position: Position.Top, type: "target" }), _jsx(Handle, { className: "anlyx-flow-handle", id: "top", position: Position.Top, type: "source" }), _jsx(Handle, { className: "anlyx-flow-handle", id: "bottom", position: Position.Bottom, type: "source" }), _jsx(Handle, { className: "anlyx-flow-handle", id: "bottom", position: Position.Bottom, type: "target" }), node.kind === "action" ? _jsx("span", { className: "layered-node__entry", "aria-hidden": "true" }) : null, _jsx("span", { className: `layered-node__icon layered-node__icon--${node.layer}`, children: _jsx(Icon, { size: 20 }) }), _jsx("span", { className: "layered-node__state", children: node.status === "not_proven" ? _jsx(Minus, { size: 13 }) : _jsx(Check, { size: 13 }) }), _jsx("strong", { children: node.title }), _jsx("small", { children: node.subtitle }), _jsxs("div", { className: "layered-node__meta", children: [_jsx("span", { children: node.durationMs !== undefined ? `${node.durationMs} ms` : "—" }), _jsx("em", { children: layeredDiagramNodeStatusLabel(node.status) })] })] }));
+}
+function LayeredSmoothEdge({ data, sourcePosition, sourceX, sourceY, targetPosition, targetX, targetY }) {
+    const [path] = getSmoothStepPath({
+        borderRadius: 18,
+        offset: 26,
+        sourcePosition,
+        sourceX,
+        sourceY,
+        targetPosition,
+        targetX,
+        targetY
+    });
+    const kind = data?.kind ?? "executed";
+    return (_jsxs(_Fragment, { children: [_jsx("path", { className: `anlyx-flow-edge-halo anlyx-flow-edge-halo--${kind}`, d: path }), _jsx(BaseEdge, { className: `anlyx-flow-edge anlyx-flow-edge--${kind}`, path: path })] }));
+}
+function buildLayeredReactFlowDiagram(record, locale) {
+    const diagramNodes = assignLayeredNodePositions(layeredDiagramLayersForRecord(record).map((layer) => toLayeredDiagramNode(layer, record, locale)));
+    const diagramEdges = buildLayeredDiagramEdges(diagramNodes);
+    return {
+        layers: layeredDiagramLayers,
+        canvasHeight: diagramCanvasHeight(diagramNodes),
+        nodes: diagramNodes.map((node) => ({
+            id: node.id,
+            type: "anlyxNode",
+            position: { x: node.x, y: node.y },
+            data: { node },
+            draggable: false,
+            selectable: false
+        })),
+        edges: diagramEdges.map((edge) => {
+            const from = diagramNodes.find((node) => node.id === edge.from);
+            const to = diagramNodes.find((node) => node.id === edge.to);
+            const handles = from && to ? reactFlowHandlesForEdge(from, to) : {};
+            return {
+                id: edge.id,
+                source: edge.from,
+                target: edge.to,
+                type: "anlyxSmooth",
+                data: { kind: edge.kind },
+                focusable: false,
+                selectable: false,
+                ...handles
+            };
+        })
+    };
+}
+function layeredDiagramLayersForRecord(record) {
+    const layers = diagramLayers(record).filter((layer) => layer.type !== "page");
+    const fallback = layers.length > 0 ? layers : timingLayers(record);
+    const hasBlocked = hasBlockedOutcome(record);
+    const order = hasBlocked
+        ? [
+            "action",
+            "api",
+            "controller",
+            "auth",
+            "decision",
+            "result",
+            "service",
+            "repository",
+            "database"
+        ]
+        : [
+            "action",
+            "api",
+            "controller",
+            "auth",
+            "decision",
+            "service",
+            "repository",
+            "database",
+            "result"
+        ];
+    return order
+        .map((type) => fallback.find((layer) => layer.type === type))
+        .filter((layer) => Boolean(layer));
+}
+function diagramCanvasHeight(nodes) {
+    return Math.max(layeredLayout.canvasHeight, ...nodes.map((node) => node.y + layeredLayout.nodeHeight + 110));
+}
+function assignLayeredNodePositions(nodes) {
+    const mainSlotByLayer = new Map();
+    const secondarySlotByLayer = new Map();
+    return nodes.map((node) => {
+        const slotMap = node.isMainPath ? mainSlotByLayer : secondarySlotByLayer;
+        const slot = slotMap.get(node.layer) ?? 0;
+        const y = node.isMainPath
+            ? layeredLayout.mainStartY + slot * layeredLayout.mainGap
+            : layeredLayout.secondaryStartY + slot * layeredLayout.secondaryGap;
+        slotMap.set(node.layer, slot + 1);
+        return {
+            ...node,
+            slot,
+            x: layeredLayout.layerX[node.layer] +
+                (layeredLayout.columnWidth - layeredLayout.nodeWidth) / 2,
+            y
+        };
+    });
+}
+function toLayeredDiagramNode(layer, record, locale) {
+    const status = layeredDiagramNodeStatus(layer, record);
+    return {
+        id: layer.id,
+        sourceLayer: layer,
+        layer: diagramLayerForFlowLayer(layer.type),
+        kind: layer.type,
+        title: layeredDiagramTitle(layer, record, locale),
+        subtitle: layeredDiagramSubtitle(layer, record),
+        status,
+        edgeKind: edgeKindForLayer(layer, status),
+        isMainPath: !isUnprovenLayer(layer),
+        slot: 0,
+        x: 0,
+        y: 0,
+        ...(layer.durationMs !== undefined ? { durationMs: Math.round(layer.durationMs) } : {})
+    };
+}
+function buildLayeredDiagramEdges(nodes) {
+    const mainNodes = nodes.filter((node) => node.isMainPath).sort(compareLayeredNodes);
+    const secondaryNodes = nodes.filter((node) => !node.isMainPath).sort(compareLayeredNodes);
+    const edges = [];
+    for (let index = 0; index < mainNodes.length - 1; index += 1) {
+        const from = mainNodes[index];
+        const to = mainNodes[index + 1];
+        if (from && to) {
+            edges.push({
+                id: `${from.id}->${to.id}`,
+                from: from.id,
+                to: to.id,
+                kind: edgeKindBetween(from, to)
+            });
+        }
+    }
+    const anchor = mainNodes.find((node) => node.layer === "application" && node.kind !== "controller") ??
+        mainNodes.find((node) => node.layer === "application") ??
+        mainNodes.find((node) => node.layer === "api");
+    if (anchor) {
+        for (const node of secondaryNodes) {
+            edges.push({
+                id: `${anchor.id}->${node.id}`,
+                from: anchor.id,
+                to: node.id,
+                kind: "not_proven"
+            });
+        }
+    }
+    return edges;
+}
+function compareLayeredNodes(first, second) {
+    const layerDelta = layeredDiagramLayers.indexOf(first.layer) - layeredDiagramLayers.indexOf(second.layer);
+    if (layerDelta !== 0)
+        return layerDelta;
+    return layerOrderIndex(first.kind) - layerOrderIndex(second.kind);
+}
+function reactFlowHandlesForEdge(from, to) {
+    if (from.layer === to.layer) {
+        return to.y > from.y
+            ? { sourceHandle: "bottom", targetHandle: "top" }
+            : { sourceHandle: "top", targetHandle: "bottom" };
+    }
+    return { sourceHandle: "right", targetHandle: "left" };
+}
+function edgeKindBetween(from, to) {
+    if (from.status === "blocked" || to.status === "blocked")
+        return "blocked";
+    if (from.status === "inferred" || to.status === "inferred")
+        return "inferred";
+    if (from.status === "source_matched" || to.status === "source_matched")
+        return "source_matched";
+    return "executed";
+}
+function edgeKindForLayer(layer, status) {
+    if (status === "blocked")
+        return "blocked";
+    if (status === "inferred")
+        return "inferred";
+    if (isUnprovenLayer(layer) || status === "not_proven")
+        return "not_proven";
+    if (layer.type !== "action" && layer.type !== "api" && layer.type !== "result") {
+        return "source_matched";
+    }
+    return "executed";
+}
+function diagramLayerForFlowLayer(layer) {
+    if (layer === "action")
+        return "browser";
+    if (layer === "api")
+        return "api";
+    if (layer === "repository" || layer === "database")
+        return "data";
+    if (layer === "result")
+        return "response";
+    return "application";
+}
+function layeredDiagramNodeStatus(layer, record) {
+    if (isUnprovenLayer(layer))
+        return "not_proven";
+    if (layer.execution === "blocked")
+        return "blocked";
+    if (layer.execution === "inferred" || layer.evidenceLevel === "inferred")
+        return "inferred";
+    if (layer.type === "result" && outcomeTone(record) === "success")
+        return "success";
+    if (layer.type === "action" || layer.type === "api")
+        return "observed";
+    if (layer.type !== "result")
+        return "source_matched";
+    return "matched";
+}
+function layeredDiagramTitle(layer, record, locale) {
+    if (layer.type === "action")
+        return locale === "ko" ? "사용자 액션" : "User Action";
+    if (layer.type === "api")
+        return locale === "ko" ? "HTTP 요청" : "HTTP Request";
+    if (layer.type === "result")
+        return outcomeTone(record) === "success" ? "OK" : outcomeLabel(record, locale);
+    return layerLabel(layer, locale);
+}
+function layeredDiagramSubtitle(layer, record) {
+    if (layer.type === "action")
+        return record.action?.label ?? layer.label;
+    if (layer.type === "api")
+        return `${record.method} ${record.path}`;
+    if (layer.type === "result")
+        return layer.label;
+    return layer.label;
+}
+function layeredLayerMeta(layer, locale) {
+    const ko = locale === "ko";
+    if (layer === "browser") {
+        return {
+            icon: MousePointerClick,
+            title: ko ? "브라우저" : "Browser",
+            subtitle: ko ? "사용자 상호작용" : "User interaction"
+        };
+    }
+    if (layer === "api") {
+        return {
+            icon: Network,
+            title: "API",
+            subtitle: ko ? "요청과 라우팅" : "Edge & routing"
+        };
+    }
+    if (layer === "application") {
+        return {
+            icon: Workflow,
+            title: ko ? "애플리케이션" : "Application",
+            subtitle: ko ? "비즈니스 로직" : "Business logic"
+        };
+    }
+    if (layer === "data") {
+        return {
+            icon: Database,
+            title: ko ? "데이터" : "Data",
+            subtitle: ko ? "저장소 계층" : "Persistence layer"
+        };
+    }
+    return {
+        icon: Flag,
+        title: ko ? "응답" : "Response",
+        subtitle: ko ? "클라이언트로 반환" : "Back to client"
+    };
+}
+function layeredNodeIcon(node) {
+    if (node.kind === "action")
+        return MousePointerClick;
+    if (node.kind === "api")
+        return Network;
+    if (node.kind === "auth" || node.kind === "decision")
+        return Lock;
+    if (node.kind === "service")
+        return Layers3;
+    if (node.kind === "repository")
+        return Box;
+    if (node.kind === "database")
+        return Database;
+    if (node.kind === "result")
+        return Flag;
+    if (node.kind === "controller")
+        return FileCode2;
+    return Circle;
+}
+function layeredDiagramNodeStatusLabel(status) {
+    if (status === "observed")
+        return "observed";
+    if (status === "source_matched")
+        return "source matched";
+    if (status === "inferred")
+        return "inferred";
+    if (status === "not_proven")
+        return "not proven";
+    if (status === "success")
+        return "success";
+    if (status === "blocked")
+        return "blocked";
+    return "matched";
+}
+function recordTotalDuration(record, rows) {
+    const baseDuration = record.durationMs ?? record.duration ?? 0;
+    const layerEnd = Math.max(0, ...(rows ?? timingLayers(record)).map((layer) => (layer.startOffsetMs ?? 0) + Math.max(1, layer.durationMs ?? 0)));
+    return Math.max(1, Math.round(Math.max(baseDuration, layerEnd)));
+}
+function recordDuration(record) {
+    return Math.round(recordTotalDuration(record));
+}
+function FlowInspector({ onSelect, pageContext, record, records, selectedId }) {
+    const locale = useWorkspaceLocale();
+    const evidence = useMemo(() => record?.evidence ?? [], [record]);
+    const recentRecords = useMemo(() => mergeRecentRecords(records, selectedId), [records, selectedId]);
+    const coverage = record
+        ? evidenceCoverage(record)
+        : { browser: 0, backend: 0, source: 0, notProven: 0 };
+    return (_jsxs("aside", { className: "flow-inspector", "aria-label": t(locale, "evidenceInspector"), children: [_jsx("div", { className: "inspector-title", children: _jsx("h2", { children: t(locale, "anlyxFlow") }) }), _jsx(InspectorSection, { title: t(locale, "recentRequests"), count: String(recentRecords.length), children: _jsx(RecentEventsList, { records: recentRecords, selectedId: selectedId, onSelect: onSelect }) }), record ? (_jsxs(_Fragment, { children: [_jsx(InspectorSection, { title: t(locale, "request"), children: _jsxs("dl", { className: "request-dl", children: [_jsxs("div", { children: [_jsx("dt", { children: t(locale, "method") }), _jsx("dd", { children: _jsx("span", { className: "method-pill", children: record.method }) })] }), _jsxs("div", { children: [_jsx("dt", { children: t(locale, "path") }), _jsx("dd", { children: shortPath(record.path) })] })] }) }), _jsxs(InspectorSection, { title: t(locale, "outcome"), children: [_jsxs("span", { className: `outcome-pill outcome-pill--${outcomeTone(record)}`, children: [record.status ?? "—", "\u00A0\u00A0", outcomeStatusText(record, locale)] }), _jsxs("p", { children: [_jsx("strong", { children: outcomeLabel(record, locale) }), outcomeDescription(record, locale)] })] }), _jsx(InspectorSection, { title: t(locale, "totalDuration"), children: _jsxs("p", { className: "metric-line", children: [_jsx(Clock3, { size: 17 }), _jsx("strong", { children: formatDuration(recordTotalDuration(record)) })] }) }), _jsxs(InspectorSection, { title: t(locale, "mappingConfidence"), children: [_jsxs("div", { className: "confidence-row", children: [_jsx("span", { className: "confidence-chip", children: confidenceLabel(record.confidence, locale) }), _jsx(ConfidenceBars, {})] }), _jsx("p", { children: confidenceDescription(record, locale) })] }), _jsx(InspectorSection, { title: t(locale, "evidenceUsed"), count: String(evidence.length), children: _jsx("ul", { className: "evidence-list", children: evidence.slice(0, 5).map((item) => (_jsxs("li", { children: [_jsx(Check, { size: 14 }), translateEvidence(item, locale)] }, item))) }) }), _jsxs(InspectorSection, { title: t(locale, "coverage"), children: [_jsxs("div", { className: "layers-bar", "aria-hidden": "true", children: [_jsx("span", { style: { flex: Math.max(coverage.browser, 1) } }), _jsx("span", { style: { flex: Math.max(coverage.backend, 1) } }), _jsx("span", { style: { flex: Math.max(coverage.source, 1) } }), _jsx("span", { style: { flex: Math.max(coverage.notProven, 1) } })] }), _jsxs("small", { children: [t(locale, "browser"), " ", coverage.browser, " \u00B7 ", t(locale, "backendCoverage"), " ", coverage.backend, " \u00B7 ", t(locale, "source"), " ", coverage.source, " \u00B7", " ", t(locale, "notProven"), " ", coverage.notProven] })] }), _jsx(InspectorSection, { title: t(locale, "traceNote"), children: _jsx("p", { children: flowNote(record, locale) }) })] })) : (_jsx(InspectorSection, { title: t(locale, "request"), children: _jsx("p", { className: "events-empty", children: pageContext ? t(locale, "noCurrentPageRequestsCopy") : t(locale, "keepWorkspaceOpen") }) }))] }));
+}
+function RecentEventsList({ onSelect, records, selectedId }) {
+    const locale = useWorkspaceLocale();
+    const primaryRecords = records.filter(isPrimaryRecord).slice(0, 5);
+    const backgroundRecords = records.filter((record) => !isPrimaryRecord(record)).slice(0, 4);
+    if (records.length === 0) {
+        return _jsx("p", { className: "events-empty", children: t(locale, "noCurrentPageRequestsCopy") });
+    }
+    return (_jsxs("div", { className: "recent-events", "aria-label": "Recent events", children: [_jsx("p", { className: "recent-events-scope", children: t(locale, "currentRequestWindow") }), primaryRecords.map((record) => (_jsx(RecentEventButton, { onSelect: onSelect, record: record, selectedId: selectedId }, record.id))), backgroundRecords.length > 0 ? (_jsxs("div", { className: "recent-events-background", children: [_jsx("p", { children: t(locale, "background") }), backgroundRecords.map((record) => (_jsx(RecentEventButton, { background: true, onSelect: onSelect, record: record, selectedId: selectedId }, record.id)))] })) : null] }));
+}
+function RecentEventButton({ background = false, onSelect, record, selectedId }) {
+    return (_jsxs("button", { className: `${record.id === selectedId ? "is-selected" : ""} ${background ? "is-background" : ""}`, type: "button", onClick: () => onSelect(record.id), children: [_jsx("span", { children: record.method }), _jsx("strong", { children: shortPath(record.path) }), _jsxs("small", { children: [record.status ?? "pending", " \u00B7 ", recordTotalDuration(record), " ms", record.occurrenceCount && record.occurrenceCount > 1
+                        ? ` · ${record.occurrenceCount}x`
+                        : ""] })] }));
+}
+function EmptyWorkspace({ pageContext }) {
+    const locale = useWorkspaceLocale();
+    const pageUrl = pageContext ? normalizeDisplayUrl(pageContext.pageUrl) : undefined;
+    return (_jsxs("section", { className: "waterfall-card empty-workspace-card", "aria-label": t(locale, "waitingForBrowserRequests"), children: [_jsx("span", { children: pageContext ? t(locale, "currentPage") : t(locale, "liveCaptureReady") }), _jsx("h2", { children: pageContext ? t(locale, "noCurrentPageRequests") : t(locale, "noRequestSelected") }), _jsx("p", { children: pageContext
+                    ? `${pageUrl}: ${t(locale, "noCurrentPageRequestsCopy")}`
+                    : t(locale, "emptyWorkspaceCopy") })] }));
+}
+function InspectorSection({ children, count, title }) {
+    return (_jsxs("section", { className: "inspector-section", children: [_jsxs("h3", { children: [title, count ? _jsx("span", { children: count }) : null] }), children] }));
+}
+function DurationLegend() {
+    const locale = useWorkspaceLocale();
+    return (_jsxs("div", { className: "duration-legend", children: [_jsxs("span", { children: [_jsx("i", { className: "legend-blue" }), t(locale, "requestProcessing")] }), _jsxs("span", { children: [_jsx("i", { className: "legend-purple" }), t(locale, "application")] }), _jsxs("span", { children: [_jsx("i", { className: "legend-red" }), t(locale, "authDecisionLegend")] }), _jsxs("span", { children: [_jsx("i", { className: "legend-orange" }), t(locale, "result")] }), _jsxs("span", { children: [_jsx("i", { className: "legend-hatched" }), t(locale, "notProven")] })] }));
+}
+function ConfidenceBars() {
+    return (_jsxs("span", { className: "confidence-bars", "aria-hidden": "true", children: [_jsx("i", {}), _jsx("i", {}), _jsx("i", {})] }));
+}
+function parseFlowRecord(value) {
+    try {
+        const parsed = JSON.parse(value);
+        if (typeof parsed.id === "string" &&
+            typeof parsed.requestId === "string" &&
+            typeof parsed.method === "string" &&
+            typeof parsed.path === "string" &&
+            (parsed.pageUrl === undefined || typeof parsed.pageUrl === "string") &&
+            Array.isArray(parsed.layers)) {
+            return {
+                ...parsed,
+                trigger: parsed.trigger === "user_action" ? "user_action" : "background",
+                priority: parsed.priority === "background" ? "background" : "primary",
+                runtimeSource: parsed.runtimeSource === "server" || parsed.runtimeSource === "browser"
+                    ? parsed.runtimeSource
+                    : "unknown"
+            };
+        }
+    }
+    catch {
+        return null;
+    }
+    return null;
+}
+function parsePageContextEvent(value) {
+    try {
+        const parsed = JSON.parse(value);
+        if (parsed.type === "page_context" &&
+            typeof parsed.pageUrl === "string" &&
+            typeof parsed.contextId === "string" &&
+            typeof parsed.observedAt === "string") {
+            return {
+                type: "page_context",
+                pageUrl: parsed.pageUrl,
+                contextId: parsed.contextId,
+                observedAt: parsed.observedAt
+            };
+        }
+    }
+    catch {
+        return null;
+    }
+    return null;
+}
+function recordsForPageContext(records, pageContext) {
+    if (!pageContext) {
+        return records;
+    }
+    return records.filter((record) => recordBelongsToPageContext(record, pageContext));
+}
+function recordBelongsToPageContext(record, pageContext) {
+    if (record.contextId && record.contextId === pageContext.contextId) {
+        return true;
+    }
+    if (record.pageUrl) {
+        return normalizeDisplayUrl(record.pageUrl) === normalizeDisplayUrl(pageContext.pageUrl);
+    }
+    return false;
+}
+function scopedRecentRecords(records, selectedRecord) {
+    if (!selectedRecord) {
+        return records;
+    }
+    const selectedAt = recordTime(selectedRecord);
+    const windowStart = selectedAt - 1_500;
+    const windowEnd = Math.max(Date.now(), selectedAt + 12_000);
+    const selectedContext = selectedRecord.contextId;
+    const scoped = records.filter((record) => {
+        if (record.id === selectedRecord.id) {
+            return true;
+        }
+        const time = recordTime(record);
+        if (time < windowStart || time > windowEnd) {
+            return false;
+        }
+        if (!selectedContext || !record.contextId) {
+            return true;
+        }
+        return record.contextId === selectedContext;
+    });
+    return scoped.length > 0 ? scoped : [selectedRecord];
+}
+function mergeRecentRecords(records, selectedId) {
+    const grouped = new Map();
+    for (const record of records) {
+        const key = [
+            record.contextId ?? "",
+            record.priority,
+            record.method,
+            normalizeComparablePath(record.path),
+            record.status ?? "",
+            record.matchState
+        ].join("|");
+        grouped.set(key, [...(grouped.get(key) ?? []), record]);
+    }
+    return [...grouped.values()]
+        .map((group) => {
+        const selectedRecord = selectedId
+            ? group.find((record) => record.id === selectedId)
+            : undefined;
+        const latestRecord = group.reduce((latest, record) => recordTime(record) > recordTime(latest) ? record : latest);
+        return {
+            ...(selectedRecord ?? latestRecord),
+            occurrenceCount: group.length
+        };
+    })
+        .sort((left, right) => recordTime(right) - recordTime(left));
+}
+function normalizeComparablePath(path) {
+    try {
+        const parsed = new URL(path, "http://anlyx.local");
+        parsed.searchParams.sort();
+        return `${parsed.pathname}${parsed.search}`;
+    }
+    catch {
+        return path;
+    }
+}
+function displayPageUrl(record, locale, pageContext) {
+    if (pageContext?.pageUrl && (!record || isPageContextCurrentForRecord(pageContext, record))) {
+        return normalizeDisplayUrl(pageContext.pageUrl);
+    }
+    if (record?.pageUrl) {
+        return normalizeDisplayUrl(record.pageUrl);
+    }
+    if (record?.contextId?.startsWith("page:")) {
+        const path = record.contextId.slice("page:".length) || "/";
+        return normalizeDisplayUrl(path);
+    }
+    return t(locale, "pageUrlNotCaptured");
+}
+function isPageContextCurrentForRecord(pageContext, record) {
+    if (!record.pageUrl && !record.contextId) {
+        return true;
+    }
+    const pageObservedAt = Date.parse(pageContext.observedAt);
+    const recordCreatedAt = Date.parse(record.createdAt);
+    if (!Number.isFinite(pageObservedAt) || !Number.isFinite(recordCreatedAt)) {
+        return pageContext.contextId !== record.contextId;
+    }
+    return pageObservedAt >= recordCreatedAt || pageContext.contextId !== record.contextId;
+}
+function normalizeDisplayUrl(urlOrPath) {
+    try {
+        const parsed = new URL(urlOrPath);
+        if (parsed.hostname === "localhost" || parsed.hostname === "127.0.0.1") {
+            return `${parsed.pathname}${parsed.search}` || "/";
+        }
+        return `${parsed.origin}${parsed.pathname}${parsed.search}`;
+    }
+    catch {
+        return urlOrPath || "/";
+    }
+}
+function isPrimaryRecord(record) {
+    if (record.priority === "background") {
+        return false;
+    }
+    if (record.trigger === "user_action") {
+        return true;
+    }
+    return !isPassiveImplementationRequest(record);
+}
+function isPassiveImplementationRequest(record) {
+    const method = record.method.toUpperCase();
+    const segments = record.path.split("?")[0]?.toLowerCase().split("/").filter(Boolean) ?? [];
+    const last = segments[segments.length - 1] ?? "";
+    if (segments.some((segment) => [
+        "health",
+        "healthz",
+        "ready",
+        "readyz",
+        "live",
+        "livez",
+        "ping",
+        "metrics",
+        "poll",
+        "polling"
+    ].includes(segment))) {
+        return true;
+    }
+    if (segments.some((segment) => ["page-views", "analytics", "telemetry", "events", "metrics"].includes(segment))) {
+        return true;
+    }
+    if (method === "GET" && ["me", "session", "profile", "current-user"].includes(last)) {
+        return true;
+    }
+    if (segments.includes("csrf") || segments.includes("xsrf")) {
+        return true;
+    }
+    if (segments.includes("auth") &&
+        ["session", "refresh", "token", "csrf", "status"].includes(last)) {
+        return true;
+    }
+    return (method === "GET" &&
+        ["saved-benefits", "saved-items", "bookmarks", "favorites"].some((segment) => segments.includes(segment)));
+}
+function recordTime(record) {
+    const time = Date.parse(record.createdAt);
+    return Number.isFinite(time) ? time : Date.now();
+}
+function orderedLayers(record) {
+    const used = new Set();
+    const ordered = [];
+    for (const type of layerOrder) {
+        for (const layer of record.layers) {
+            if (layer.type === type && !used.has(layer.id)) {
+                used.add(layer.id);
+                ordered.push(layer);
+            }
+        }
+    }
+    for (const layer of record.layers) {
+        if (!used.has(layer.id)) {
+            ordered.push(layer);
+        }
+    }
+    return ordered;
+}
+function timingLayers(record) {
+    if (!record.backendSpans?.length) {
+        return assignReadableOffsets(orderedLayers(record).filter((layer) => layer.type !== "page"), Math.max(record.durationMs ?? record.duration ?? 1, 1));
+    }
+    const action = record.layers.find((layer) => layer.type === "action");
+    const api = record.layers.find((layer) => layer.type === "api");
+    const result = record.layers.find((layer) => layer.type === "result");
+    const total = Math.max(record.durationMs ?? record.duration ?? 1, 1);
+    const layers = [];
+    if (action) {
+        layers.push({
+            ...action,
+            startOffsetMs: 0,
+            durationMs: Math.min(action.durationMs ?? 4, 4)
+        });
+    }
+    if (api) {
+        layers.push({
+            ...api,
+            startOffsetMs: 3,
+            durationMs: Math.max(1, (record.durationMs ?? record.duration ?? api.durationMs ?? 1) - 3)
+        });
+    }
+    layers.push(...[...record.backendSpans]
+        .filter((span) => span.type !== "api")
+        .sort(compareBackendSpans)
+        .map(backendSpanToLayer));
+    if (result) {
+        layers.push({
+            ...result,
+            startOffsetMs: Math.max(0, total - Math.max(1, result.durationMs ?? 1)),
+            durationMs: Math.max(1, result.durationMs ?? 1)
+        });
+    }
+    return layers;
+}
+function compactTimingLayers(record) {
+    if (!record.backendSpans?.length) {
+        return timingLayers(record);
+    }
+    const rawRows = timingLayers(record);
+    const action = rawRows.find((layer) => layer.type === "action");
+    const api = rawRows.find((layer) => layer.type === "api");
+    const result = rawRows.find((layer) => layer.type === "result");
+    const observedRows = summarizeBackendObservedSpans(record.backendSpans);
+    const requestOverhead = requestOverheadLayer(record, api, result);
+    const sourceRows = orderedLayers(record).filter((layer) => layer.type !== "page");
+    const observedTypes = new Set(observedRows.map((layer) => layer.type));
+    const unprovenRows = sourceRows.filter((layer) => isUnprovenLayer(layer) &&
+        !observedTypes.has(layer.type) &&
+        layer.type !== "action" &&
+        layer.type !== "api" &&
+        layer.type !== "result");
+    return [action, requestOverhead, ...observedRows, result, ...unprovenRows].filter((layer) => Boolean(layer));
+}
+function summaryRows(record) {
+    if (!record.backendSpans?.length) {
+        return orderedLayers(record).filter((layer) => layer.type !== "page");
+    }
+    const sourceRows = orderedLayers(record).filter((layer) => layer.type !== "page");
+    const action = sourceRows.find((layer) => layer.type === "action");
+    const api = sourceRows.find((layer) => layer.type === "api");
+    const result = sourceRows.find((layer) => layer.type === "result");
+    const observedRows = summarizeBackendObservedSpans(record.backendSpans);
+    const requestOverhead = requestOverheadLayer(record, api, result);
+    const observedTypes = new Set(observedRows.map((layer) => layer.type));
+    const unprovenRows = sourceRows.filter((layer) => isUnprovenLayer(layer) &&
+        !observedTypes.has(layer.type) &&
+        layer.type !== "action" &&
+        layer.type !== "api" &&
+        layer.type !== "result");
+    return [action, requestOverhead, ...observedRows, result, ...unprovenRows].filter((layer) => Boolean(layer));
+}
+function assignReadableOffsets(layers, total) {
+    const backend = layers.filter((layer) => layer.type !== "action" &&
+        layer.type !== "api" &&
+        layer.type !== "result" &&
+        !isUnprovenLayer(layer));
+    const backendStart = Math.max(14, Math.round(total * 0.08));
+    const backendEnd = Math.max(backendStart + 1, Math.round(total * 0.78));
+    const slot = backend.length > 0 ? Math.max(8, Math.round((backendEnd - backendStart) / backend.length)) : 0;
+    return layers.map((layer) => {
+        if (layer.startOffsetMs !== undefined)
+            return layer;
+        if (layer.type === "action") {
+            return { ...layer, startOffsetMs: 0, durationMs: Math.min(layer.durationMs ?? 4, 4) };
+        }
+        if (layer.type === "api") {
+            return {
+                ...layer,
+                startOffsetMs: 3,
+                durationMs: Math.max(1, total - 3)
+            };
+        }
+        if (layer.type === "result") {
+            return {
+                ...layer,
+                startOffsetMs: Math.max(0, total - Math.max(1, layer.durationMs ?? 2)),
+                durationMs: Math.max(1, layer.durationMs ?? 2)
+            };
+        }
+        if (isUnprovenLayer(layer)) {
+            return layer;
+        }
+        const index = Math.max(0, backend.findIndex((item) => item.id === layer.id));
+        const estimatedDuration = layer.durationMs ?? estimatedLayerDuration(layer, total);
+        return {
+            ...layer,
+            startOffsetMs: Math.min(Math.max(0, total - estimatedDuration), backendStart + slot * index),
+            durationMs: estimatedDuration
+        };
+    });
+}
+function backendSpanToLayer(span) {
+    return {
+        id: `backend:${span.id}`,
+        type: span.type,
+        label: span.label,
+        execution: "observed",
+        evidenceLevel: "backend_observed",
+        evidence: span.evidence ?? ["backend_observed: server-side method span reported by dev bridge"],
+        ...(span.nodeId ? { nodeId: span.nodeId } : {}),
+        ...(span.filePath ? { filePath: span.filePath } : {}),
+        ...(span.lineNumber !== undefined ? { lineNumber: span.lineNumber } : {}),
+        startOffsetMs: span.startOffsetMs,
+        durationMs: span.durationMs,
+        ...(span.status !== undefined ? { status: span.status } : {})
+    };
+}
+function diagramLayers(record) {
+    if (!record.backendSpans?.length) {
+        return orderedLayers(record).filter((layer) => layer.type !== "page");
+    }
+    return summaryRows(record).filter((layer) => !isUnprovenLayer(layer));
+}
+function requestOverheadLayer(record, api, result) {
+    if (!api || !record.backendSpans?.length) {
+        return api;
+    }
+    const backendSpans = record.backendSpans.filter((span) => span.type !== "api");
+    const total = Math.max(1, record.durationMs ?? record.duration ?? api.durationMs ?? 1);
+    const backendCoveredDuration = coveredDurationMs(backendSpans);
+    const resultDuration = Math.max(0, result?.durationMs ?? 0);
+    const durationMs = Math.max(0, total - backendCoveredDuration - resultDuration);
+    return {
+        ...api,
+        label: `${record.method} ${record.path}`,
+        startOffsetMs: 0,
+        durationMs
+    };
+}
+function summarizeBackendObservedSpans(spans) {
+    const groupedSpans = new Map();
+    const databaseSpans = [];
+    const untrackedControllerSpans = [];
+    const selfDurations = backendSelfDurationBySpanId(spans);
+    for (const span of [...spans].sort(compareBackendSpans)) {
+        if (span.type === "api") {
+            continue;
+        }
+        if (span.type === "controller") {
+            untrackedControllerSpans.push(span);
+            continue;
+        }
+        if (span.type === "database") {
+            databaseSpans.push(span);
+            continue;
+        }
+        const key = `${span.type}:${span.label}`;
+        groupedSpans.set(key, [...(groupedSpans.get(key) ?? []), span]);
+    }
+    const rows = [...groupedSpans.values()].map((group) => groupedBackendSpansToLayer(group, selfDurations));
+    if (databaseSpans.length > 0) {
+        rows.push(databaseSpansToSummaryLayer(databaseSpans, selfDurations));
+    }
+    if (untrackedControllerSpans.length > 0) {
+        rows.push(untrackedControllerSpansToLayer(untrackedControllerSpans, selfDurations));
+    }
+    return rows.sort(compareFlowLayersByTiming);
+}
+function groupedBackendSpansToLayer(spans, selfDurations) {
+    if (spans.length === 1) {
+        const span = spans[0];
+        return backendSpanToLayer({
+            ...span,
+            durationMs: Math.max(0, Math.round(selfDurations.get(span.id) ?? span.durationMs))
+        });
+    }
+    const first = spans[0];
+    const startOffsetMs = Math.min(...spans.map((span) => span.startOffsetMs));
+    const evidence = spans.flatMap((span) => span.evidence ?? []);
+    const selfDurationMs = spans.reduce((sum, span) => sum + Math.max(0, selfDurations.get(span.id) ?? span.durationMs), 0);
+    return {
+        id: `backend:group:${first.type}:${first.label}`,
+        type: first.type,
+        label: `${first.label} ×${spans.length}`,
+        execution: "observed",
+        evidenceLevel: "backend_observed",
+        evidence: [
+            `backend_observed: ${spans.length} runtime ${first.type} span${spans.length === 1 ? "" : "s"} grouped by label`,
+            ...evidence.slice(0, 2)
+        ],
+        startOffsetMs,
+        durationMs: Math.max(0, Math.round(selfDurationMs))
+    };
+}
+function databaseSpansToSummaryLayer(spans, selfDurations) {
+    const startOffsetMs = Math.min(...spans.map((span) => span.startOffsetMs));
+    const firstEvidence = spans.flatMap((span) => span.evidence ?? [])[0];
+    const selfDurationMs = spans.reduce((sum, span) => sum + Math.max(0, selfDurations.get(span.id) ?? span.durationMs), 0);
+    return {
+        id: "backend:database-summary",
+        type: "database",
+        label: `${spans.length} JDBC statement${spans.length === 1 ? "" : "s"}`,
+        execution: "observed",
+        evidenceLevel: "backend_observed",
+        evidence: [
+            `backend_observed: ${spans.length} JDBC execute span${spans.length === 1 ? "" : "s"} reported by dev bridge`,
+            ...(firstEvidence ? [firstEvidence] : [])
+        ],
+        startOffsetMs,
+        durationMs: Math.max(0, Math.round(selfDurationMs))
+    };
+}
+function untrackedControllerSpansToLayer(spans, selfDurations) {
+    const startOffsetMs = Math.min(...spans.map((span) => span.startOffsetMs));
+    const selfDurationMs = spans.reduce((sum, span) => sum + Math.max(0, selfDurations.get(span.id) ?? 0), 0);
+    return {
+        id: "backend:untracked-app",
+        type: "unknown",
+        label: "Untracked application time",
+        execution: "observed",
+        evidenceLevel: "backend_observed",
+        evidence: [
+            "backend_observed: controller runtime remained after measured child spans were removed"
+        ],
+        startOffsetMs,
+        durationMs: Math.max(0, Math.round(selfDurationMs))
+    };
+}
+function backendSelfDurationBySpanId(spans) {
+    const childrenByParent = new Map();
+    for (const span of spans) {
+        if (!span.parentId) {
+            continue;
+        }
+        childrenByParent.set(span.parentId, [...(childrenByParent.get(span.parentId) ?? []), span]);
+    }
+    return new Map(spans.map((span) => {
+        const childDuration = coveredDurationMs(childrenByParent.get(span.id) ?? []);
+        return [span.id, Math.max(0, span.durationMs - childDuration)];
+    }));
+}
+function coveredDurationMs(spans) {
+    const intervals = spans
+        .filter((span) => span.durationMs > 0)
+        .map((span) => ({
+        start: span.startOffsetMs,
+        end: span.startOffsetMs + span.durationMs
+    }))
+        .sort((left, right) => left.start - right.start);
+    let covered = 0;
+    let currentStart;
+    let currentEnd;
+    for (const interval of intervals) {
+        if (currentStart === undefined || currentEnd === undefined) {
+            currentStart = interval.start;
+            currentEnd = interval.end;
+            continue;
+        }
+        if (interval.start <= currentEnd) {
+            currentEnd = Math.max(currentEnd, interval.end);
+            continue;
+        }
+        covered += currentEnd - currentStart;
+        currentStart = interval.start;
+        currentEnd = interval.end;
+    }
+    if (currentStart !== undefined && currentEnd !== undefined) {
+        covered += currentEnd - currentStart;
+    }
+    return Math.max(0, covered);
+}
+function findFirstLayer(layers, types) {
+    return layers.find((layer) => types.includes(layer.type));
+}
+function compareBackendSpans(a, b) {
+    const timingDelta = a.startOffsetMs - b.startOffsetMs;
+    if (timingDelta !== 0)
+        return timingDelta;
+    if (a.id === b.parentId)
+        return -1;
+    if (a.parentId === b.id)
+        return 1;
+    return layerOrderIndex(a.type) - layerOrderIndex(b.type) || a.label.localeCompare(b.label);
+}
+function compareFlowLayersByTiming(a, b) {
+    const timingDelta = (a.startOffsetMs ?? Number.MAX_SAFE_INTEGER) - (b.startOffsetMs ?? Number.MAX_SAFE_INTEGER);
+    if (timingDelta !== 0)
+        return timingDelta;
+    return layerOrderIndex(a.type) - layerOrderIndex(b.type) || a.label.localeCompare(b.label);
+}
+function layerOrderIndex(type) {
+    const index = layerOrder.indexOf(type);
+    return index === -1 ? layerOrder.length : index;
+}
+function isUnprovenLayer(layer) {
+    return layer.execution === "not_proven" || layer.evidenceLevel === "not_proven";
+}
+function isUntrackedAppLayer(layer) {
+    return layer.id === "backend:untracked-app";
+}
+function isSourceMatchedLayer(layer) {
+    return layer.execution === "scanned" || layer.evidenceLevel === "source_derived";
+}
+function isDecisionLayer(layer) {
+    return layer.type === "auth" || layer.type === "decision";
+}
+function summaryStatusLabel(layer, locale) {
+    if (isUnprovenLayer(layer))
+        return t(locale, "notProven");
+    if (layer.execution === "blocked")
+        return t(locale, "blocked");
+    if (layer.evidenceLevel === "browser_observed" || layer.evidenceLevel === "backend_observed") {
+        return t(locale, "observed");
+    }
+    if (layer.evidenceLevel === "inferred")
+        return t(locale, "inferred");
+    if (isSourceMatchedLayer(layer))
+        return t(locale, "sourceMatched");
+    return t(locale, "matched");
+}
+function summaryStatusTone(layer) {
+    if (isUnprovenLayer(layer) || isSourceMatchedLayer(layer))
+        return "scanned";
+    if (layer.execution === "blocked")
+        return "blocked";
+    if (layer.evidenceLevel === "inferred")
+        return "inferred";
+    return "matched";
+}
+function visualLayerType(layer) {
+    if (isUntrackedAppLayer(layer))
+        return "untracked";
+    if (layer.type === "decision")
+        return "auth";
+    if (layer.type === "action" ||
+        layer.type === "api" ||
+        layer.type === "controller" ||
+        layer.type === "auth" ||
+        layer.type === "result" ||
+        layer.type === "service" ||
+        layer.type === "repository" ||
+        layer.type === "database") {
+        return layer.type;
+    }
+    return "controller";
+}
+function layerLabel(layer, locale = "en") {
+    if (isUntrackedAppLayer(layer))
+        return t(locale, "untrackedApp");
+    if (layer.type === "api")
+        return "API";
+    if (layer.type === "auth")
+        return locale === "ko" ? "인증 / 세션" : "Auth / Session";
+    if (layer.type === "action")
+        return locale === "ko" ? "사용자 액션" : "Action";
+    if (layer.type === "controller")
+        return locale === "ko" ? "컨트롤러" : "Controller";
+    if (layer.type === "decision")
+        return locale === "ko" ? "결정" : "Decision";
+    if (layer.type === "service")
+        return t(locale, "service");
+    if (layer.type === "repository")
+        return t(locale, "repository");
+    if (layer.type === "database")
+        return t(locale, "database");
+    if (layer.type === "result")
+        return t(locale, "result");
+    return capitalize(layer.type);
+}
+function estimatedLayerDuration(layer, total) {
+    if (layer.durationMs !== undefined) {
+        return layer.durationMs;
+    }
+    if (isUnprovenLayer(layer)) {
+        return Math.max(1, Math.round(total * 0.06));
+    }
+    if (layer.type === "result") {
+        return 1;
+    }
+    return Math.max(1, Math.round(total * 0.18));
+}
+function layerOffset(layer, total) {
+    if (layer.startOffsetMs !== undefined) {
+        return Math.min(96, Math.max(0, (layer.startOffsetMs / Math.max(total, 1)) * 100));
+    }
+    if (layer.type === "action" || layer.type === "api")
+        return 0;
+    if (layer.type === "controller")
+        return 2;
+    if (isDecisionLayer(layer))
+        return 10;
+    if (layer.type === "result")
+        return 76;
+    return 9;
+}
+function timelineTicks(total) {
+    const steps = 4;
+    return Array.from({ length: steps + 1 }, (_, index) => (total / steps) * index);
+}
+function timingBreakdownSegments(rows, total) {
+    const types = [
+        "api",
+        "controller",
+        "service",
+        "repository",
+        "database",
+        "untracked",
+        "result"
+    ];
+    const labels = {
+        api: "API",
+        controller: "Controller",
+        service: "Service",
+        repository: "Repository",
+        database: "Database",
+        untracked: "Untracked",
+        result: "Result"
+    };
+    const durations = new Map(types.map((type) => [type, 0]));
+    for (const row of rows) {
+        if (isUnprovenLayer(row)) {
+            continue;
+        }
+        const type = isUntrackedAppLayer(row) ? "untracked" : row.type;
+        if (!types.includes(type)) {
+            continue;
+        }
+        durations.set(type, (durations.get(type) ?? 0) + Math.max(0, row.durationMs ?? 0));
+    }
+    const rawNonApiDuration = types
+        .filter((type) => type !== "api")
+        .reduce((sum, type) => sum + (durations.get(type) ?? 0), 0);
+    const nonApiScale = rawNonApiDuration > total ? total / rawNonApiDuration : 1;
+    if (nonApiScale < 1) {
+        for (const type of types) {
+            if (type !== "api") {
+                durations.set(type, (durations.get(type) ?? 0) * nonApiScale);
+            }
+        }
+    }
+    const nonApiDuration = types
+        .filter((type) => type !== "api")
+        .reduce((sum, type) => sum + (durations.get(type) ?? 0), 0);
+    durations.set("api", Math.max(0, total - nonApiDuration));
+    const measuredTotal = Math.max(total, 1);
+    return types.map((type) => {
+        const durationMs = durations.get(type) ?? 0;
+        return {
+            durationMs,
+            label: labels[type],
+            type,
+            width: durationMs <= 0 ? 0 : (durationMs / measuredTotal) * 100
+        };
+    });
+}
+function timelineX(percent) {
+    const clamped = Math.min(100, Math.max(0, percent));
+    return TIMELINE_START_INSET_PERCENT + (clamped / 100) * (100 - TIMELINE_START_INSET_PERCENT);
+}
+function timelineWidth(left, width) {
+    const visualLeft = timelineX(left);
+    const visualRight = timelineX(Math.min(100, left + width));
+    return Math.max(0, visualRight - visualLeft);
+}
+function hasBlockedOutcome(record) {
+    return record.status !== undefined && [401, 403, 409].includes(record.status);
+}
+function OutcomeIcon({ record, size }) {
+    if (hasBlockedOutcome(record)) {
+        return _jsx(Lock, { size: size });
+    }
+    if (record.status !== undefined && record.status >= 500) {
+        return _jsx(Flag, { size: size });
+    }
+    return _jsx(Check, { size: size });
+}
+function outcomeLabel(record, locale) {
+    if (record.status === undefined)
+        return t(locale, "pending");
+    if (record.status >= 200 && record.status < 300)
+        return t(locale, "ok");
+    if (hasBlockedOutcome(record))
+        return t(locale, "blocked");
+    if (record.status >= 500)
+        return t(locale, "serverError");
+    return locale === "ko" ? "관찰됨" : "Observed";
+}
+function outcomeStatusText(record, locale) {
+    if (record.status === undefined)
+        return t(locale, "pending");
+    if (record.status >= 200 && record.status < 300)
+        return t(locale, "ok");
+    if (record.status === 401)
+        return t(locale, "unauthorized");
+    if (record.status === 403)
+        return t(locale, "forbidden");
+    if (record.status === 409)
+        return t(locale, "conflict");
+    if (record.status >= 500)
+        return t(locale, "serverError");
+    return locale === "ko" ? "관찰됨" : "Observed";
+}
+function outcomeTone(record) {
+    if (record.status !== undefined && record.status >= 200 && record.status < 300)
+        return "success";
+    if (hasBlockedOutcome(record))
+        return "blocked";
+    return "error";
+}
+function outcomeDescription(record, locale) {
+    if (record.status !== undefined && record.status >= 200 && record.status < 300) {
+        if (record.matchState !== "matched") {
+            if (record.backendSpans?.length) {
+                return locale === "ko"
+                    ? "요청이 완료되었고 개발 런타임 span이 관찰되었습니다. 가져온 Flow JSON과는 아직 매칭되지 않았습니다."
+                    : "Request completed with development runtime spans observed. It is not matched to imported Flow JSON yet.";
+            }
+            return locale === "ko"
+                ? "요청이 완료되었지만 가져온 Flow JSON과는 아직 매칭되지 않았습니다."
+                : "Request completed, but it is not matched to imported Flow JSON yet.";
+        }
+        return locale === "ko"
+            ? "요청이 완료되었고 가져온 백엔드 흐름과 매칭되었습니다."
+            : "Request completed and matched imported backend flow.";
+    }
+    if (record.status === 409) {
+        return locale === "ko"
+            ? "요청이 결정 분기에 도달했고 차단 결과를 반환했습니다."
+            : "Request reached a decision branch and returned a blocked result.";
+    }
+    if (hasBlockedOutcome(record)) {
+        return locale === "ko"
+            ? "하위 비즈니스 로직의 실행이 확인되기 전에 요청이 차단되었습니다."
+            : "Request blocked before downstream business logic was proven executed.";
+    }
+    return locale === "ko"
+        ? "브라우저에서 관찰된 요청과 소스 기반 백엔드 매칭입니다. 서버 런타임 트레이스는 아닙니다."
+        : "Browser-observed request with source-derived backend matching. This is not a server runtime trace.";
+}
+function requestContextDescription(record, locale) {
+    const hasRuntimeSpans = Boolean(record.backendSpans?.length);
+    if (record.matchState === "matched" && hasRuntimeSpans) {
+        return t(locale, "mappedEvidenceWithRuntime");
+    }
+    if (record.matchState === "matched") {
+        return t(locale, "mappedEvidence");
+    }
+    if (hasRuntimeSpans) {
+        return locale === "ko"
+            ? "브라우저에서 관찰된 요청에 개발 런타임 span이 연결되었습니다. 가져온 Flow JSON 매칭은 아직 없습니다."
+            : "Browser-observed request with development runtime spans. No imported Flow JSON match yet.";
+    }
+    return locale === "ko"
+        ? "브라우저에서 관찰된 요청입니다. 가져온 Flow JSON 매칭은 아직 없습니다."
+        : "Browser-observed request. No imported Flow JSON match yet.";
+}
+function flowNote(record, locale) {
+    if (record.backendSpans?.length) {
+        return locale === "ko"
+            ? "관찰됨으로 표시된 백엔드 행은 이 요청에 대한 개발 전용 백엔드 브리지에서 왔습니다. 소스 행은 가져온 근거를 기반으로 합니다."
+            : "Backend rows marked observed came from a development-only backend bridge for this request. Source rows still come from imported evidence.";
+    }
+    const hasUnprovenDownstream = record.layers.some((layer) => (layer.type === "service" || layer.type === "repository" || layer.type === "database") &&
+        isUnprovenLayer(layer));
+    if (hasUnprovenDownstream) {
+        return locale === "ko"
+            ? "흐리게 표시된 레이어는 소스 근거로만 알려진 경로이며 실제 실행은 확인되지 않았습니다."
+            : "Muted layers are known by source evidence only and were not proven executed.";
+    }
+    return locale === "ko"
+        ? "브라우저 행은 페이지에서 관찰된 내용입니다. 소스 행은 가져온 백엔드 근거이며 운영 런타임 트레이스가 아닙니다."
+        : "Browser rows are observed in the page. Source rows come from imported backend evidence and are not a production runtime trace.";
+}
+function confidenceDescription(record, locale) {
+    if (record.confidence === "high") {
+        return locale === "ko"
+            ? "브라우저 요청, 엔드포인트, 컨트롤러, 소스 근거가 모두 매칭되었습니다."
+            : "Browser request, endpoint, controller, and source evidence all matched.";
+    }
+    if (record.confidence === "medium") {
+        return locale === "ko"
+            ? "브라우저 요청은 소스 근거와 매칭되었지만 일부 백엔드 세부 정보는 추론입니다."
+            : "The browser request matched source evidence, but some backend details are inferred.";
+    }
+    return locale === "ko"
+        ? "Anlyx가 브라우저 요청을 관찰했지만 백엔드 소스 근거가 충분하지 않습니다."
+        : "Anlyx observed the browser request, but backend source evidence is incomplete.";
+}
+function evidenceCoverage(record) {
+    return record.layers.reduce((coverage, layer) => {
+        if (layer.evidenceLevel === "browser_observed") {
+            coverage.browser += 1;
+        }
+        else if (layer.evidenceLevel === "backend_observed") {
+            coverage.backend += 1;
+        }
+        else if (isUnprovenLayer(layer)) {
+            coverage.notProven += 1;
+        }
+        else {
+            coverage.source += 1;
+        }
+        return coverage;
+    }, { browser: 0, backend: record.backendSpans?.length ?? 0, source: 0, notProven: 0 });
+}
+function layerSubtitle(layer, locale, runtimeSource = "browser") {
+    if (layer.type === "action")
+        return locale === "ko" ? "사용자 클릭 캡처됨" : "user click captured";
+    if (layer.type === "api") {
+        return runtimeSource === "server" ? t(locale, "serverRequestSpan") : t(locale, "browserSpan");
+    }
+    if (isUnprovenLayer(layer))
+        return t(locale, "knownBySourceOnly");
+    if (layer.evidenceLevel === "browser_observed")
+        return t(locale, "browserObserved");
+    if (layer.evidenceLevel === "backend_observed")
+        return t(locale, "devRuntimeSpan");
+    if (isSourceMatchedLayer(layer) || layer.evidenceLevel === "inferred") {
+        return t(locale, "sourceDerivedEstimate");
+    }
+    return executionLabel(layer.execution, locale);
+}
+function backendRuntimeGroupCount(layer) {
+    if (layer.evidenceLevel !== "backend_observed") {
+        return undefined;
+    }
+    const jdbcMatch = /^(\d+)\s+JDBC statement/.exec(layer.label);
+    if (jdbcMatch?.[1]) {
+        return Number(jdbcMatch[1]);
+    }
+    const groupedMatch = /×(\d+)$/.exec(layer.label);
+    if (groupedMatch?.[1]) {
+        return Number(groupedMatch[1]);
+    }
+    return undefined;
+}
+function durationValueLabel(_layer, duration) {
+    return `${Math.round(duration)} ms`;
+}
+function durationCaption(layer, duration, total, locale, runtimeSource = "browser", runtimeGroupCount) {
+    if (isUntrackedAppLayer(layer))
+        return t(locale, "untrackedRuntime");
+    if (layer.type === "result")
+        return t(locale, "responseMarker");
+    if (layer.type === "action" || layer.type === "api") {
+        return runtimeSource === "server" ? t(locale, "serverRequestSpan") : t(locale, "browserSpan");
+    }
+    if (layer.evidenceLevel === "backend_observed") {
+        if (runtimeGroupCount) {
+            return `${runtimeGroupCount} ${t(locale, "callCount")}`;
+        }
+        return t(locale, "measuredRuntime");
+    }
+    return `${t(locale, "estimate")} · ${Math.round((duration / Math.max(total, 1)) * 100)}%`;
+}
+function tabLabel(tab, locale) {
+    if (locale === "ko") {
+        if (tab === "summary")
+            return "요약";
+        if (tab === "timing")
+            return "타이밍";
+        return "다이어그램";
+    }
+    return capitalize(tab);
+}
+function executionLabel(execution, locale) {
+    if (execution === "blocked")
+        return t(locale, "blocked");
+    if (execution === "inferred")
+        return t(locale, "inferred");
+    if (execution === "not_proven")
+        return t(locale, "notProven");
+    if (execution === "observed")
+        return t(locale, "observed");
+    if (execution === "scanned")
+        return locale === "ko" ? "소스 매칭" : "source matched";
+    if (execution === "executed")
+        return locale === "ko" ? "실행됨" : "executed";
+    return execution.replace("_", " ");
+}
+function confidenceLabel(confidence, locale) {
+    if (locale === "ko") {
+        if (confidence === "high")
+            return "높음";
+        if (confidence === "medium")
+            return "보통";
+        return "낮음";
+    }
+    return capitalize(confidence);
+}
+function translateEvidence(value, locale) {
+    if (locale === "en")
+        return value;
+    const normalized = value.toLowerCase();
+    if (normalized.includes("click") || normalized.includes("browser-observed request")) {
+        return "브라우저에서 사용자 액션을 관찰했습니다";
+    }
+    if (normalized.includes("fetch") || normalized.includes("xmlhttprequest")) {
+        return "브라우저 fetch/XHR 요청을 관찰했습니다";
+    }
+    if (normalized.includes("endpoint")) {
+        return "가져온 엔드포인트와 매칭되었습니다";
+    }
+    if (normalized.includes("controller")) {
+        return "컨트롤러 근거가 매칭되었습니다";
+    }
+    if (normalized.includes("backend_observed") || normalized.includes("runtime")) {
+        return "개발용 백엔드 브리지에서 런타임 span을 받았습니다";
+    }
+    if (normalized.includes("source-derived") || normalized.includes("source")) {
+        return "소스 근거 기반 백엔드 매칭입니다";
+    }
+    if (normalized.includes("not a runtime") || normalized.includes("not_proven")) {
+        return "운영 런타임 트레이스가 아니며 실행이 확인되지 않은 구간이 있습니다";
+    }
+    return value;
+}
+function compactId(value) {
+    return value.replace(/^browser-request:/, "").slice(0, 8);
+}
+function shortPath(value) {
+    return value.length > 30 ? `${value.slice(0, 27)}...` : value;
+}
+function formatDateTime(value) {
+    if (!value) {
+        return "Waiting for request";
+    }
+    return new Intl.DateTimeFormat(undefined, {
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit"
+    }).format(new Date(value));
+}
+function formatDuration(value) {
+    return `${Math.round(value ?? 0)} ms`;
+}
+function capitalize(value) {
+    return value.charAt(0).toUpperCase() + value.slice(1);
+}