@anlyx/ui 0.1.3 → 0.1.5

package/dist/workspace/WorkspaceApp.js

@@ -0,0 +1,2293 @@
+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, Workflow, Zap } from "lucide-react";
+import { 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 projectChromeLocales = [
+    { value: "en", label: "English", shortLabel: "EN" },
+    { value: "ko", label: "한국어", shortLabel: "KO" },
+    { value: "zh", label: "中文", shortLabel: "ZH" },
+    { value: "ja", label: "日本語", shortLabel: "JA" },
+    { value: "fr", label: "Français", shortLabel: "FR" }
+];
+const projectChromeTranslations = {
+    en: {
+        agent: "AI Agent",
+        available: "Available",
+        disabled: "Disabled",
+        language: "Language",
+        lastAnalysis: "Last analysis",
+        map: "Map",
+        pages: "Pages",
+        source: "Source",
+        timing: "Timing",
+        upToDate: "Up to date",
+        pagesAnalyzed: "pages analyzed"
+    },
+    ko: {
+        agent: "AI Agent",
+        available: "사용 가능",
+        disabled: "비활성",
+        language: "언어",
+        lastAnalysis: "마지막 분석",
+        map: "맵",
+        pages: "페이지",
+        source: "소스",
+        timing: "타이밍",
+        upToDate: "최신 상태",
+        pagesAnalyzed: "개 페이지 분석됨"
+    },
+    zh: {
+        agent: "AI Agent",
+        available: "可用",
+        disabled: "已停用",
+        language: "语言",
+        lastAnalysis: "最后分析",
+        map: "地图",
+        pages: "页面",
+        source: "来源",
+        timing: "计时",
+        upToDate: "已是最新",
+        pagesAnalyzed: "个页面已分析"
+    },
+    ja: {
+        agent: "AI Agent",
+        available: "利用可能",
+        disabled: "無効",
+        language: "言語",
+        lastAnalysis: "最終分析",
+        map: "マップ",
+        pages: "ページ",
+        source: "ソース",
+        timing: "タイミング",
+        upToDate: "最新",
+        pagesAnalyzed: "ページ分析済み"
+    },
+    fr: {
+        agent: "Agent IA",
+        available: "Disponible",
+        disabled: "Désactivé",
+        language: "Langue",
+        lastAnalysis: "Dernière analyse",
+        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, streamUrl = "/_anlyx/events/stream", initialRecords = [] }) {
+    if (projectData) {
+        return _jsx(ProjectWorkspacePreview, { data: projectData });
+    }
+    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 }) {
+    const [activeTab, setActiveTab] = useState("pages");
+    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 }), _jsx(ProjectTabs, { activeTab: activeTab, locale: projectLocale, onTabChange: setActiveTab }), activeTab === "pages" ? (_jsx(ProjectPagesWorkspace, { model: model, selectedPageId: model.selectedPage?.page.id, onPageSelect: setSelectedPageId, onOpenMap: () => setActiveTab("map") })) : activeTab === "map" ? (_jsx(ProjectMapView, { data: data, model: model })) : (_jsx(ProjectJsonView, { data: data, rawJson: rawJson, model: model })), _jsx(ProjectStatusBar, { locale: projectLocale, model: model })] }));
+}
+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({ locale, model, onLocaleChange }) {
+    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] }), _jsx("strong", { children: "OSS" })] }), _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" }), _jsx("div", { className: "project-topbar__actions", children: _jsxs("label", { className: "project-language-select", children: [_jsx(Languages, { size: 15 }), _jsx("span", { children: tp(locale, "language") }), _jsx("select", { "aria-label": tp(locale, "language"), value: locale, onChange: (event) => onLocaleChange(event.currentTarget.value), children: projectChromeLocales.map((item) => (_jsx("option", { value: item.value, children: item.shortLabel }, item.value))) })] }) })] }));
+}
+function ProjectTabs({ activeTab, locale, onTabChange }) {
+    return (_jsx("div", { className: "project-tabs", role: "tablist", "aria-label": "Project workspace views", children: ["pages", "map", "json"].map((tab) => (_jsx("button", { "aria-selected": activeTab === tab, className: activeTab === tab ? "is-active" : "", role: "tab", type: "button", onClick: () => onTabChange(tab), children: tab === "pages" ? tp(locale, "pages") : tab === "map" ? tp(locale, "map") : "JSON" }, tab))) }));
+}
+function ProjectPagesWorkspace({ model, onOpenMap, onPageSelect, selectedPageId }) {
+    return (_jsxs("div", { className: "project-pages-layout", children: [_jsx(ProjectPageIndex, { model: model, selectedPageId: selectedPageId, onPageSelect: onPageSelect }), _jsx(ProjectPagesView, { selectedPage: model.selectedPage, onOpenMap: onOpenMap })] }));
+}
+function ProjectPageIndex({ model, onPageSelect, selectedPageId }) {
+    return (_jsxs("aside", { className: "project-page-index-panel", "aria-label": "Page index", children: [_jsxs("div", { className: "project-panel-title", children: [_jsx("h2", { children: "Page Index" }), _jsx("button", { "aria-label": "Filter pages", type: "button", children: _jsx(PanelLeft, { size: 15 }) })] }), _jsxs("div", { className: "project-page-index__search", children: [_jsx(Search, { size: 16 }), _jsx("span", { children: "Search pages..." }), _jsx("kbd", { children: "/" })] }), _jsx("nav", { className: "project-page-index", "aria-label": "Project pages", children: model.pageGroups.map((group) => (_jsxs("section", { children: [_jsxs("h2", { 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({ onOpenMap, selectedPage }) {
+    const firstRequestId = selectedPage?.requests[0]?.id;
+    const [selectedRequestId, setSelectedRequestId] = useState(firstRequestId);
+    useEffect(() => {
+        setSelectedRequestId(firstRequestId);
+    }, [firstRequestId, 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) ??
+        selectedPage.requests[0];
+    const selectedRequestLabel = selectedRequest?.path ?? selectedRequest?.label ?? selectedRequest?.id ?? "selected request";
+    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;
+    return (_jsxs("div", { className: "project-page-workspace", children: [_jsxs("header", { className: "project-page-workspace__title", children: [_jsxs("div", { children: [_jsxs("span", { children: [selectedPage.areaName, " / Page detail"] }), _jsx("h1", { children: selectedPage.page.title }), _jsx("code", { children: selectedPage.page.path })] }), _jsxs("div", { children: [_jsx("span", { className: "project-badge project-badge--green", children: "AI-authored" }), _jsxs("button", { type: "button", onClick: onOpenMap, children: [_jsx(Network, { size: 16 }), "View in Map"] })] })] }), _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, { title: "Features", children: _jsx("div", { className: "project-feature-grid", children: selectedPage.features.length > 0 ? (selectedPage.features.map((feature) => (_jsx(ProjectFeatureCard, { feature: feature }, feature.id)))) : (_jsx("p", { className: "project-muted", children: "No features authored for this page." })) }) }), _jsxs(ProjectSection, { title: "Requests", children: [_jsxs("div", { className: "project-section__summary", children: [_jsxs("span", { children: [selectedPage.requests.length, " requests"] }), _jsx("span", { children: "Select a request to show its backend path." })] }), _jsx("div", { className: "project-request-grid", children: selectedPage.requests.length > 0 ? (selectedPage.requests.map((request) => (_jsx(ProjectRequestCard, { isSelected: selectedRequest?.id === request.id, request: request, onSelect: () => setSelectedRequestId(request.id) }, request.id)))) : (_jsx("p", { className: "project-muted", children: "No requests linked to this page." })) })] }), _jsx(ProjectSection, { meta: selectedRequest
+                    ? `${selectedRequest.method ?? "HTTP"} ${selectedRequestLabel}`
+                    : undefined, title: "Flow summary", children: visibleFlows.length > 0 ? (visibleFlows.map((flow) => _jsx(ProjectFlowTrace, { flow: flow }, flow.id))) : (_jsx("p", { className: "project-muted", children: "No backend flow linked to this request." })) }), _jsx(ProjectSection, { title: "Evidence summary", children: _jsxs("div", { className: "project-evidence-row", children: [_jsx(EvidenceChip, { label: "Observed", value: selectedPage.evidenceSummary.observed }), _jsx(EvidenceChip, { label: "Found in code", value: selectedPage.evidenceSummary.sourceMatched }), _jsx(EvidenceChip, { label: "Agent inferred", value: selectedPage.evidenceSummary.agentInferred }), _jsx(EvidenceChip, { label: "Not proven", value: selectedPage.evidenceSummary.notProven }), _jsx(EvidenceChip, { label: "Unknown", value: selectedPage.evidenceSummary.unknown })] }) })] }));
+}
+function ProjectSection({ children, meta, title }) {
+    return (_jsxs("section", { className: "project-section", children: [_jsxs("header", { className: "project-section__header", children: [_jsx("h3", { children: title }), meta ? _jsx("span", { children: meta }) : null] }), children] }));
+}
+function ProjectFeatureCard({ feature }) {
+    return (_jsxs("article", { className: "project-feature-card", children: [_jsx(FileText, { size: 20 }), _jsxs("div", { children: [_jsx("strong", { children: feature.name }), _jsx("p", { children: feature.description ?? "No feature description authored yet." })] }), _jsxs("span", { children: [feature.requests.length, " requests"] })] }));
+}
+function ProjectRequestCard({ isSelected, onSelect, request }) {
+    const label = request.path ?? request.label ?? request.id;
+    return (_jsxs("button", { className: `project-request-card project-request-card--${request.role} ${isSelected ? "is-selected" : ""}`, type: "button", onClick: onSelect, children: [_jsx("header", { children: _jsx("span", { children: request.role }) }), _jsxs("strong", { children: [_jsx("em", { children: request.method ?? "HTTP" }), label] }), _jsxs("footer", { children: [_jsx("small", { children: "Purpose" }), _jsx("b", { children: request.purpose })] })] }));
+}
+function ProjectFlowTrace({ flow }) {
+    const layers = flow.layers.length > 0 ? flow.layers : [];
+    return (_jsxs("article", { className: "project-flow-trace", children: [_jsxs("header", { children: [_jsx("span", { children: flow.request?.role ?? "flow" }), _jsx("strong", { children: flow.name ?? flow.request?.path ?? flow.id })] }), _jsx("div", { className: "project-flow-trace__layers", children: layers.map((layer, index) => (_jsx(ProjectFlowLayerCard, { index: index, layer: layer }, layer.id))) })] }));
+}
+function ProjectFlowLayerCard({ index, layer }) {
+    return (_jsxs("div", { className: `project-flow-layer project-flow-layer--${layer.kind}`, children: [_jsx("span", { children: index + 1 }), _jsx("strong", { children: layer.kind }), _jsx("em", { children: layer.label }), _jsx("small", { children: evidenceStatusLabel(layer.status) })] }));
+}
+function EvidenceChip({ label, value }) {
+    return (_jsxs("span", { className: "project-evidence-chip", children: [_jsx(Check, { size: 15 }), label, _jsx("strong", { children: value })] }));
+}
+function ProjectMapView({ data, model }) {
+    const graph = useMemo(() => buildProjectArchitectureReactFlow(data), [data]);
+    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 project-screen-panel", "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 only nodes and edges from project JSON." })] }), _jsxs("dl", { children: [_jsxs("div", { children: [_jsx("dt", { children: "Nodes" }), _jsx("dd", { children: data.architecture.nodes.length })] }), _jsxs("div", { children: [_jsx("dt", { children: "Edges" }), _jsx("dd", { children: graph.edges.length })] }), _jsxs("div", { children: [_jsx("dt", { children: "Pages" }), _jsx("dd", { children: model.totals.pages })] })] })] }), _jsx("div", { className: "project-architecture-map__canvas", "data-testid": "project-architecture-map", children: _jsx(ReactFlow, { className: "project-architecture-react-flow", edgeTypes: projectArchitectureEdgeTypes, edges: graph.edges, fitView: true, fitViewOptions: { padding: 0.18 }, maxZoom: 1.45, minZoom: 0.45, nodes: graph.nodes, nodesConnectable: false, nodesDraggable: false, nodeTypes: projectArchitectureNodeTypes, proOptions: { hideAttribution: true } }) })] }));
+}
+const projectArchitectureNodeTypes = { projectArchitectureNode: ProjectArchitectureNode };
+const projectArchitectureEdgeTypes = { projectArchitectureEdge: ProjectArchitectureEdge };
+const projectArchitectureLayerX = {
+    frontend: 32,
+    request: 220,
+    api: 410,
+    controller: 600,
+    handler: 600,
+    middleware: 600,
+    service: 810,
+    policy: 810,
+    mapper: 810,
+    cache: 810,
+    queue: 810,
+    job: 810,
+    external: 810,
+    repository: 1030,
+    database: 1240,
+    result: 1450,
+    unknown: 810
+};
+function buildProjectArchitectureReactFlow(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 connectionCounts = 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);
+    });
+    const domains = Array.from(new Set(data.architecture.nodes.map((node) => node.domain ?? "Project")));
+    const domainIndex = new Map(domains.map((domain, index) => [domain, index]));
+    const slotCounts = new Map();
+    const nodes = data.architecture.nodes.map((node) => {
+        const domain = node.domain ?? "Project";
+        const layer = node.kind in projectArchitectureLayerX ? node.kind : "unknown";
+        const layerX = projectArchitectureLayerX[layer] ?? 810;
+        const slotKey = `${domain}:${layer}`;
+        const slot = slotCounts.get(slotKey) ?? 0;
+        slotCounts.set(slotKey, slot + 1);
+        return {
+            id: node.id,
+            type: "projectArchitectureNode",
+            position: {
+                x: layerX,
+                y: 54 + (domainIndex.get(domain) ?? 0) * 138 + slot * 46
+            },
+            data: {
+                node: {
+                    ...node,
+                    connectionCount: connectionCounts.get(node.id) ?? 0
+                }
+            },
+            draggable: false,
+            selectable: false
+        };
+    });
+    return {
+        nodes,
+        edges: validEdges.map((edge) => ({
+            id: edge.id,
+            source: edge.source,
+            sourceHandle: "right",
+            target: edge.target,
+            targetHandle: "left",
+            type: "projectArchitectureEdge",
+            data: { edge },
+            focusable: false,
+            selectable: false
+        }))
+    };
+}
+function ProjectArchitectureNode({ data }) {
+    const node = data.node;
+    const label = node.displayLabel ?? node.label;
+    const Icon = projectArchitectureNodeIcon(node.kind);
+    return (_jsxs("article", { className: `project-architecture-node project-architecture-node--${node.kind}`, title: `${node.label}${node.source?.filePath ? ` · ${node.source.filePath}` : ""}`, children: [_jsx(Handle, { className: "project-architecture-handle", id: "left", position: Position.Left, type: "target" }), _jsx("span", { className: "project-architecture-node__icon", children: _jsx(Icon, { size: 15 }) }), _jsxs("div", { children: [_jsx("strong", { children: label }), _jsx("span", { children: node.kind })] }), node.connectionCount > 2 ? _jsx("em", { children: node.connectionCount }) : null, _jsx(Handle, { className: "project-architecture-handle", id: "right", position: Position.Right, type: "source" })] }));
+}
+function ProjectArchitectureEdge({ data, sourcePosition, sourceX, sourceY, targetPosition, targetX, targetY }) {
+    const [path] = getSmoothStepPath({
+        borderRadius: 12,
+        offset: 18,
+        sourcePosition,
+        sourceX,
+        sourceY,
+        targetPosition,
+        targetX,
+        targetY
+    });
+    const role = data?.edge.role ?? "primary";
+    return (_jsx(BaseEdge, { className: `project-architecture-edge project-architecture-edge--${role}`, path: path }));
+}
+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 }) {
+    const jsonFiles = useMemo(() => projectJsonFiles(data, model, rawJson), [data, model, rawJson]);
+    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;
+    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: "Valid", tone: "green" })] }), _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) {
+    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: "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: "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
+        });
+    }
+    return files;
+}
+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: "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: "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 === "green" ? "is-green" : "", children: value })] }));
+}
+function ProjectStatusBar({ locale, model }) {
+    const sourceFile = projectSourceFile(model);
+    const generatedBy = projectAgentName(model);
+    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: [_jsxs("strong", { children: [model.totals.pages, " ", tp(locale, "pagesAnalyzed")] }), _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 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);
+}