@anlyx/ui 0.1.5 → 0.1.6-beta.0

package/dist/workspace/WorkspaceApp.js

@@ -1,7 +1,8 @@
 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 { BookOpen, Box, Braces, BriefcaseBusiness, Check, ChevronRight, Circle, Clock3, Code2, Copy, Database, Download, FileCode2, FileText, Flag, Folder, Gauge, Layers3, Languages, Lock, Minus, MousePointerClick, Network, PanelLeft, Plus, RotateCw, Search, ShieldCheck, Tag, Workflow, Zap } from "lucide-react";
+import { siExpress, siNodedotjs, siReact, siTypescript } from "simple-icons";
+import { Fragment, createContext, useContext, useEffect, useMemo, useState } from "react";
 import { ScanTreeMap } from "./ScanTreeMap.js";
 import { buildProjectWorkspaceViewModel } from "./project-view-model.js";
 const WorkspaceLocaleContext = createContext("en");
@@ -240,13 +241,6 @@ function useWorkspaceLocale() {
 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",
@@ -254,6 +248,10 @@ const projectChromeTranslations = {
         disabled: "Disabled",
         language: "Language",
         lastAnalysis: "Last analysis",
+        overview: "Overview",
+        capabilities: "Capabilities",
+        dataLifecycle: "Data Lifecycle",
+        impactMap: "Impact Map",
         map: "Map",
         pages: "Pages",
         source: "Source",
@@ -267,6 +265,10 @@ const projectChromeTranslations = {
         disabled: "비활성",
         language: "언어",
         lastAnalysis: "마지막 분석",
+        overview: "Overview",
+        capabilities: "Capabilities",
+        dataLifecycle: "Data Lifecycle",
+        impactMap: "Impact Map",
         map: "맵",
         pages: "페이지",
         source: "소스",
@@ -280,6 +282,10 @@ const projectChromeTranslations = {
         disabled: "已停用",
         language: "语言",
         lastAnalysis: "最后分析",
+        overview: "Overview",
+        capabilities: "Capabilities",
+        dataLifecycle: "Data Lifecycle",
+        impactMap: "Impact Map",
         map: "地图",
         pages: "页面",
         source: "来源",
@@ -293,6 +299,10 @@ const projectChromeTranslations = {
         disabled: "無効",
         language: "言語",
         lastAnalysis: "最終分析",
+        overview: "Overview",
+        capabilities: "Capabilities",
+        dataLifecycle: "Data Lifecycle",
+        impactMap: "Impact Map",
         map: "マップ",
         pages: "ページ",
         source: "ソース",
@@ -306,6 +316,10 @@ const projectChromeTranslations = {
         disabled: "Désactivé",
         language: "Langue",
         lastAnalysis: "Dernière analyse",
+        overview: "Overview",
+        capabilities: "Capabilities",
+        dataLifecycle: "Data Lifecycle",
+        impactMap: "Impact Map",
         map: "Carte",
         pages: "Pages",
         source: "Source",
@@ -342,9 +356,9 @@ const layerIcons = {
     result: Flag,
     service: Layers3
 };
-export function WorkspaceApp({ data, projectData, streamUrl = "/_anlyx/events/stream", initialRecords = [] }) {
+export function WorkspaceApp({ data, projectData, projectValidationReport, streamUrl = "/_anlyx/events/stream", initialRecords = [] }) {
     if (projectData) {
-        return _jsx(ProjectWorkspacePreview, { data: projectData });
+        return (_jsx(ProjectWorkspacePreview, { data: projectData, ...(projectValidationReport ? { validationReport: projectValidationReport } : {}) }));
     }
     if (!data) {
         return (_jsx("main", { className: "project-workspace-preview", role: "application", "aria-label": "Anlyx workspace", children: _jsxs("section", { className: "project-workspace-preview__empty", children: [_jsx("strong", { children: "No Anlyx project data loaded" }), _jsx("span", { children: "Start the local 4777 viewer with anlyx.project.json." })] }) }));
@@ -411,8 +425,9 @@ function LegacyWorkspaceApp({ data, streamUrl, initialRecords }) {
     }, [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 }) {
+function ProjectWorkspacePreview({ data, validationReport }) {
     const [activeTab, setActiveTab] = useState("pages");
+    const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
     const [projectLocale, setProjectLocale] = useState(() => projectDefaultLocale(data));
     const [selectedPageId, setSelectedPageId] = useState(data.pages[0]?.id);
     const model = useMemo(() => buildProjectWorkspaceViewModel(data, selectedPageId), [data, selectedPageId]);
@@ -420,7 +435,7 @@ function ProjectWorkspacePreview({ 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 })] }));
+    return (_jsxs("main", { className: "project-workspace-preview", role: "application", "aria-label": "Anlyx project workspace", children: [_jsx(ProjectTopBar, { model: model, locale: projectLocale, onLocaleChange: setProjectLocale }), _jsxs("div", { className: `project-workspace-shell${isSidebarCollapsed ? " is-sidebar-collapsed" : ""}`, children: [_jsx(ProjectSidebar, { activeTab: activeTab, isCollapsed: isSidebarCollapsed, locale: projectLocale, onTabChange: setActiveTab, onToggleCollapse: () => setIsSidebarCollapsed((value) => !value) }), _jsx("div", { className: "project-workspace-surface", children: activeTab === "pages" ? (_jsx(ProjectPagesWorkspace, { data: data, model: model, ...(validationReport ? { validationReport } : {}), selectedPageId: model.selectedPage?.page.id, onPageSelect: setSelectedPageId, onOpenMap: () => setActiveTab("map") })) : activeTab === "map" ? (_jsx(ProjectMapView, { data: data, model: model })) : activeTab === "overview" ? (_jsx(ProjectOverviewView, { data: data })) : activeTab === "capabilities" ? (_jsx(ProjectCapabilitiesView, { data: data, model: model })) : (_jsx(ProjectJsonView, { data: data, rawJson: rawJson, model: model, ...(validationReport ? { validationReport } : {}) })) })] }), _jsx(ProjectStatusBar, { data: data, locale: projectLocale, model: model, ...(validationReport ? { validationReport } : {}) })] }));
 }
 function readProjectMetadataString(model, key) {
     const value = model.project.metadata?.[key];
@@ -432,157 +447,738 @@ function projectAgentName(model) {
 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 ProjectTopBar({ model }) {
+    return (_jsxs("header", { className: "project-topbar", children: [_jsxs("div", { className: "project-topbar__brand", children: [_jsx("img", { alt: "Anlyx", src: "/workspace/anlyx-logo-transparent.png" }), _jsxs("span", { children: ["v", model.schemaVersion] })] }), _jsxs("button", { className: "project-topbar__project", type: "button", children: [_jsx(Folder, { size: 17 }), _jsx("span", { children: model.project.name }), _jsx(ChevronRight, { size: 14 })] }), _jsx("div", { className: "project-topbar__spacer" })] }));
+}
+function projectTabLabel(tab, locale) {
+    if (tab === "pages")
+        return tp(locale, "pages");
+    if (tab === "map")
+        return tp(locale, "map");
+    if (tab === "overview")
+        return tp(locale, "overview");
+    if (tab === "capabilities")
+        return tp(locale, "capabilities");
+    return "JSON";
+}
+function ProjectSidebar({ activeTab, isCollapsed, locale, onTabChange, onToggleCollapse }) {
+    const items = [
+        { icon: FileText, tab: "pages" },
+        { icon: Network, tab: "map" },
+        { icon: Gauge, tab: "overview" },
+        { icon: Workflow, tab: "capabilities" },
+        { icon: Braces, tab: "json" }
+    ];
+    return (_jsxs("aside", { className: `project-sidebar${isCollapsed ? " is-collapsed" : ""}`, "aria-label": "Project navigation", children: [_jsxs("div", { className: "project-sidebar__group", children: [isCollapsed ? null : _jsx("h2", { children: "Project" }), items.map(({ icon: Icon, tab }) => (_jsxs("button", { "aria-current": activeTab === tab ? "page" : undefined, "aria-label": isCollapsed ? projectTabLabel(tab, locale) : undefined, className: activeTab === tab ? "is-active" : "", title: isCollapsed ? projectTabLabel(tab, locale) : undefined, type: "button", onClick: () => onTabChange(tab), children: [_jsx(Icon, { size: 17 }), isCollapsed ? null : _jsx("span", { children: projectTabLabel(tab, locale) })] }, tab)))] }), _jsxs("button", { "aria-label": isCollapsed ? "Expand project navigation" : "Collapse project navigation", className: "project-sidebar__collapse", title: isCollapsed ? "Expand" : undefined, type: "button", onClick: onToggleCollapse, children: [_jsx(PanelLeft, { size: 16 }), isCollapsed ? null : _jsx("span", { children: "Collapse" })] })] }));
+}
+function ProjectOverviewView({ data }) {
+    const overview = data.overview;
+    const stack = projectOverviewStack(overview.implementation);
+    const summary = overview.summary ??
+        "Inspect the authored Project JSON to understand pages, flows, requests, architecture, evidence, and unknowns.";
+    return (_jsx("section", { className: "anlyx-understanding anlyx-overview", "aria-label": "Project overview", children: _jsx("div", { className: "anlyx-overview-layout", children: _jsxs("div", { className: "anlyx-overview-main", children: [_jsxs("header", { className: "anlyx-readme-header", children: [_jsx("h1", { children: "Anlyx overview" }), _jsx("p", { children: summary })] }), _jsxs("section", { className: "anlyx-readme-section", "aria-label": "Built with", children: [_jsx("h2", { children: "Built with" }), stack.length > 0 ? (_jsx("div", { className: "anlyx-stack-grid", children: stack.map((item) => (_jsxs("div", { className: "anlyx-stack-item", children: [_jsx(ProjectStackIconView, { icon: item.icon, tone: item.tone }), _jsxs("div", { children: [_jsx("strong", { children: item.name }), _jsx("small", { children: item.detail })] })] }, item.name))) })) : (_jsx("p", { className: "project-muted", children: "No implementation stack authored." }))] }), _jsxs("section", { className: "anlyx-readme-section", "aria-label": "What it does", children: [_jsx("h2", { children: "What it does" }), _jsxs("div", { className: "anlyx-feature-list", children: [_jsx(ProjectReadmeFeature, { icon: FileText, title: "Inspect pages", description: "Explore the UI surfaces, components, and states that make up your app." }), _jsx(ProjectReadmeFeature, { icon: Workflow, title: "Trace request flows", description: "Follow the path from UI events to API requests and data responses." }), _jsx(ProjectReadmeFeature, { icon: Braces, title: "Review authored JSON", description: "Open the source Project JSON and understand the modeled structure." }), _jsx(ProjectReadmeFeature, { icon: Search, title: "Check evidence & unknowns", description: "See what\u2019s backed by evidence and what needs review or clarification." })] })] })] }) }) }));
+}
+function ProjectStackIconView({ icon, tone }) {
+    if (icon.kind === "lucide") {
+        const Icon = icon.icon;
+        return (_jsx("span", { className: `anlyx-stack-icon is-${tone}`, "aria-hidden": "true", children: _jsx(Icon, { size: 22 }) }));
+    }
+    return (_jsx("span", { className: `anlyx-stack-icon is-${tone}`, "aria-hidden": "true", style: { "--stack-icon-color": `#${icon.hex}` }, children: _jsx("svg", { role: "img", viewBox: "0 0 24 24", "aria-label": icon.title, children: _jsx("path", { d: icon.path }) }) }));
+}
+function ProjectReadmeFeature({ description, icon: Icon, title }) {
+    return (_jsxs("div", { className: "anlyx-readme-feature", children: [_jsx("span", { children: _jsx(Icon, { size: 20 }) }), _jsxs("div", { children: [_jsx("strong", { children: title }), _jsx("p", { children: description })] })] }));
+}
+function projectOverviewStack(implementation) {
+    return implementation.slice(0, 5).map((item) => ({
+        detail: item.description ?? capitalize(item.kind),
+        icon: stackIcon(item.name, item.kind),
+        name: stackDisplayName(item.name),
+        tone: stackTone(item.name, item.kind)
+    }));
+}
+function stackDisplayName(value) {
+    if (/react/i.test(value))
+        return "React";
+    if (/typescript|ts\b/i.test(value))
+        return "TypeScript";
+    if (/node|runtime|cli/i.test(value))
+        return "Node.js";
+    if (/express/i.test(value))
+        return "Express";
+    if (/schema|project json|contract/i.test(value))
+        return "Project JSON";
+    return value;
+}
+function stackIcon(name, kind) {
+    const value = `${name} ${kind}`;
+    if (/react/i.test(value))
+        return simpleStackIcon(siReact);
+    if (/typescript|ts\b/i.test(value))
+        return simpleStackIcon(siTypescript);
+    if (/node|runtime|cli/i.test(value))
+        return simpleStackIcon(siNodedotjs);
+    if (/express/i.test(value))
+        return simpleStackIcon(siExpress);
+    if (/schema|json|contract/i.test(value))
+        return { kind: "lucide", icon: Braces };
+    return { kind: "lucide", icon: Code2 };
+}
+function simpleStackIcon(icon) {
+    return {
+        hex: icon.hex,
+        kind: "simple",
+        path: icon.path,
+        title: icon.title
+    };
+}
+function stackTone(name, kind) {
+    const value = `${name} ${kind}`;
+    if (/react/i.test(value))
+        return "react";
+    if (/typescript|ts\b/i.test(value))
+        return "typescript";
+    if (/node|runtime|cli/i.test(value))
+        return "node";
+    if (/express/i.test(value))
+        return "express";
+    if (/schema|json|contract/i.test(value))
+        return "json";
+    return "json";
+}
+function ProjectCapabilitiesView({ data }) {
+    const defaultCapability = data.capabilities.find((capability) => /inspect page behavior/i.test(capability.name)) ??
+        data.capabilities[0];
+    const [selectedId, setSelectedId] = useState(defaultCapability?.id);
+    const [capabilityFilter, setCapabilityFilter] = useState("all");
+    const visibleCapabilities = data.capabilities.filter((capability) => {
+        if (capabilityFilter === "connected")
+            return capability.status === "connected";
+        if (capabilityFilter === "entry")
+            return Boolean(capability.entry);
+        if (capabilityFilter === "user")
+            return capability.actorRole === "user";
+        return true;
+    });
+    const selected = visibleCapabilities.find((capability) => capability.id === selectedId) ??
+        data.capabilities.find((capability) => capability.id === selectedId) ??
+        defaultCapability;
+    const connected = data.capabilities.filter((capability) => capability.status === "connected").length;
+    const userFacing = data.capabilities.filter((capability) => capability.actorRole !== "system").length;
+    const unresolved = data.capabilities.filter((capability) => capability.status !== "connected").length;
+    return (_jsx("section", { className: "anlyx-understanding anlyx-capabilities", "aria-label": "Project capabilities", children: _jsxs("div", { className: "anlyx-overview-layout", children: [_jsxs("div", { className: "anlyx-overview-main", children: [_jsxs("div", { className: "anlyx-metric-row", children: [_jsx(ProjectUnderstandingMetric, { icon: Workflow, label: "Total capabilities", value: String(data.capabilities.length), detail: "Authored" }), _jsx(ProjectUnderstandingMetric, { icon: Check, label: "Connected", value: String(connected), detail: `${percentage(connected, data.capabilities.length)}% of total` }), _jsx(ProjectUnderstandingMetric, { icon: MousePointerClick, label: "User-facing", value: String(userFacing), detail: `${percentage(userFacing, data.capabilities.length)}% of total` }), _jsx(ProjectUnderstandingMetric, { icon: Gauge, label: "Unresolved", value: String(unresolved), detail: "Requires review" })] }), _jsxs("div", { className: "anlyx-filter-row", "aria-label": "Filter capabilities by actor", children: [_jsx("span", { children: "Filter by" }), _jsx("button", { className: capabilityFilter === "all" ? "is-selected" : "", type: "button", onClick: () => setCapabilityFilter("all"), children: "All" }), _jsx("button", { className: capabilityFilter === "user" ? "is-selected" : "", type: "button", onClick: () => setCapabilityFilter("user"), children: "User" }), _jsx("button", { className: capabilityFilter === "entry" ? "is-selected" : "", type: "button", onClick: () => setCapabilityFilter("entry"), children: "Entry surface" }), _jsx("button", { className: capabilityFilter === "connected" ? "is-selected" : "", type: "button", onClick: () => setCapabilityFilter("connected"), children: "Connected only" })] }), data.capabilities.length === 0 ? (_jsx(ProjectSurfaceEmpty, { title: "No capabilities authored", description: "Add capabilities to describe product behavior without opening source code." })) : (_jsxs("div", { className: "anlyx-capability-table", role: "table", "aria-label": "Capabilities", children: [_jsxs("div", { className: "anlyx-capability-row is-header", role: "row", children: [_jsx("span", { children: "Actor" }), _jsx("span", { children: "Capability" }), _jsx("span", { children: "Entry surface" }), _jsx("span", { children: "Request" }), _jsx("span", { children: "Data touched" }), _jsx("span", { children: "Status" })] }), visibleCapabilities.map((capability) => (_jsxs("button", { className: `anlyx-capability-row${capability.id === selected?.id ? " is-selected" : ""}`, type: "button", onClick: () => setSelectedId(capability.id), children: [_jsxs("span", { className: `anlyx-role-badge is-${capability.actorRole}`, children: [_jsx("span", { className: `anlyx-role-dot is-${capability.actorRole}` }), capitalize(capability.actorRole)] }), _jsxs("span", { className: "anlyx-capability-name", children: [_jsx("strong", { children: capability.name }), _jsx("em", { children: capability.description ?? capability.visibleResult ?? "No capability description authored." })] }), _jsx("span", { children: capability.entry?.label ?? "No entry authored" }), _jsx("span", { children: requestSummary(data, capability.requestIds) }), _jsx("span", { children: capability.dataRefs.map((ref) => ref.name).join(", ") || "No data refs" }), _jsx(ProjectStatusPill, { status: capability.status })] }, capability.id))), _jsxs("div", { className: "anlyx-capability-footer", children: ["Showing ", visibleCapabilities.length, " of ", data.capabilities.length, " capabilities"] })] }))] }), _jsx("aside", { className: "anlyx-surface-rail", "aria-label": "Capability details", children: selected ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "anlyx-rail-section is-tinted", children: [_jsx("h2", { children: selected.name }), _jsx(ProjectStatusPill, { status: selected.status })] }), _jsxs("div", { className: "anlyx-rail-section", children: [_jsx("h3", { children: "Why this matters" }), _jsx("p", { children: capabilityWhyThisMatters(selected) })] }), _jsxs("div", { className: "anlyx-rail-section", children: [_jsx("h3", { children: "Trace summary" }), _jsxs("dl", { className: "anlyx-capability-compact-facts", children: [_jsxs("div", { children: [_jsx("dt", { children: "Actor" }), _jsx("dd", { children: capitalize(selected.actorRole) })] }), _jsxs("div", { children: [_jsx("dt", { children: "Request" }), _jsx("dd", { children: requestSummary(data, selected.requestIds) })] }), _jsxs("div", { children: [_jsx("dt", { children: "Confidence" }), _jsx("dd", { children: capitalize(selected.confidence ?? "unknown") })] })] })] }), _jsxs("div", { className: "anlyx-rail-section", children: [_jsx("h3", { children: "Evidence summary" }), _jsx(ProjectCapabilityEvidenceSummary, { capability: selected })] })] })) : (_jsx(ProjectSurfaceEmpty, { title: "No capability selected", description: "Select a capability row." })) })] }) }));
+}
+function ProjectCapabilityEvidenceSummary({ capability }) {
+    const pageCount = new Set(capability.pageIds).size;
+    const flowCount = new Set(capability.flowIds).size;
+    const dataCount = capability.dataRefs.length;
+    return (_jsxs("div", { className: "anlyx-evidence-summary-list", children: [_jsxs("span", { children: [_jsx(FileText, { size: 14 }), pageCount, " pages analyzed"] }), _jsxs("span", { children: [_jsx(Workflow, { size: 14 }), flowCount, " flows connected"] }), _jsxs("span", { children: [_jsx(Database, { size: 14 }), dataCount, " data objects referenced"] })] }));
+}
+function ProjectTrustSummary({ data, validationReport }) {
+    const coverage = projectPageCoverageSummary(data, validationReport);
+    const coverageStatus = validationReport?.summary.coverageStatus ?? data.coverage?.status;
+    const sourceIssueCount = validationReport?.summary.sourceIssueCount;
+    const sourceIssueDetails = validationReport
+        ? formatSourceIssueDetails(validationReport.summary.sourceIssueBreakdown)
+        : "";
+    const issueCount = validationReport?.issues.length;
+    const shouldShow = Boolean(coverage.detected) ||
+        coverageStatus === "partial" ||
+        coverageStatus === "unknown" ||
+        (sourceIssueCount ?? 0) > 0 ||
+        (issueCount ?? 0) > 0;
+    if (!shouldShow) {
+        return null;
+    }
+    return (_jsxs("section", { className: "project-trust-summary", "aria-label": "Project analysis coverage", children: [_jsxs("div", { children: [_jsx("span", { className: "project-trust-summary__eyebrow", children: "Analysis scope" }), _jsx("strong", { children: coverageStatus === "partial" ? "Partial analysis" : "Coverage summary" })] }), _jsxs("dl", { children: [_jsxs("div", { children: [_jsx("dt", { children: "Pages" }), _jsx("dd", { children: coverage.value })] }), sourceIssueCount !== undefined ? (_jsxs("div", { children: [_jsx("dt", { children: "Source issues" }), _jsxs("dd", { className: sourceIssueCount > 0 ? "is-warning" : "is-ok", children: [sourceIssueCount, sourceIssueDetails ? _jsx("small", { children: sourceIssueDetails }) : null] })] })) : null, issueCount !== undefined ? (_jsxs("div", { children: [_jsx("dt", { children: "Validation issues" }), _jsx("dd", { className: issueCount > 0 ? "is-warning" : "is-ok", children: issueCount })] })) : null] })] }));
+}
+function capabilityWhyThisMatters(capability) {
+    if (/inspect page behavior/i.test(capability.name)) {
+        return "This capability lets a user inspect authored pages, primary requests, selected flow layers, evidence, and unknowns—providing clarity into how data moves and where gaps exist.";
+    }
+    return capability.visibleResult ?? capability.description ?? "This capability ties a user-facing action to authored requests, data, evidence, and confidence.";
 }
-function 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 ProjectUnderstandingMetric({ detail, icon: Icon, label, value }) {
+    return (_jsxs("div", { className: "anlyx-understanding-metric", children: [_jsx("span", { children: _jsx(Icon, { size: 20 }) }), _jsxs("div", { children: [_jsx("small", { children: label }), _jsx("strong", { children: value }), _jsx("em", { children: detail })] })] }));
 }
-function 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 ProjectSurfaceEmpty({ description, title }) {
+    return (_jsxs("div", { className: "anlyx-surface-empty", children: [_jsx(Minus, { size: 18 }), _jsx("strong", { children: title }), _jsx("p", { children: description })] }));
 }
-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 ProjectStatusPill({ status }) {
+    return _jsx("span", { className: `anlyx-status-pill is-${status}`, children: status });
 }
-function ProjectPagesView({ onOpenMap, selectedPage }) {
-    const firstRequestId = selectedPage?.requests[0]?.id;
-    const [selectedRequestId, setSelectedRequestId] = useState(firstRequestId);
+function percentage(value, total) {
+    if (total <= 0)
+        return 0;
+    return Math.round((value / total) * 100);
+}
+function requestSummary(data, requestIds) {
+    const requests = requestIds
+        .map((id) => data.requests.find((request) => request.id === id))
+        .filter((request) => Boolean(request));
+    if (requests.length === 0)
+        return "No request authored";
+    return requests
+        .slice(0, 2)
+        .map((request) => `${request.method ?? "REQ"} ${request.path ?? request.label ?? request.id}`)
+        .join(", ");
+}
+function ProjectPagesWorkspace({ data, model, onOpenMap, onPageSelect, selectedPageId, validationReport }) {
+    const [isPageIndexCollapsed, setIsPageIndexCollapsed] = useState(false);
+    return (_jsxs("div", { className: `anlyx-pages project-pages-layout${isPageIndexCollapsed ? " is-index-collapsed" : ""}`, children: [_jsx(ProjectPageIndex, { data: data, isCollapsed: isPageIndexCollapsed, model: model, ...(validationReport ? { validationReport } : {}), selectedPageId: selectedPageId, onPageSelect: onPageSelect, onToggleCollapse: () => setIsPageIndexCollapsed((value) => !value) }), _jsx(ProjectPagesView, { data: data, model: model, ...(validationReport ? { validationReport } : {}), selectedPage: model.selectedPage, onOpenMap: onOpenMap })] }));
+}
+function ProjectPageIndex({ data, isCollapsed, model, onPageSelect, onToggleCollapse, selectedPageId, validationReport }) {
+    const pages = model.pageGroups.flatMap((group) => group.pages);
+    const pageCoverage = projectPageCoverageSummary(data, validationReport);
+    const [query, setQuery] = useState("");
+    const normalizedQuery = query.trim().toLowerCase();
+    const visibleGroups = normalizedQuery
+        ? model.pageGroups
+            .map((group) => ({
+            ...group,
+            pages: group.pages.filter((page) => page.title.toLowerCase().includes(normalizedQuery) ||
+                page.path.toLowerCase().includes(normalizedQuery))
+        }))
+            .filter((group) => group.pages.length > 0)
+        : model.pageGroups;
+    return (_jsxs("aside", { className: `anlyx-page-index project-page-index-panel${isCollapsed ? " is-collapsed" : ""}`, "aria-label": "Page index", children: [_jsxs("div", { className: "project-panel-title", children: [isCollapsed ? null : (_jsxs("div", { children: [_jsx("h2", { children: "Page Index" }), _jsx("span", { children: pageCoverage.label })] })), _jsx("button", { "aria-expanded": !isCollapsed, "aria-label": isCollapsed ? "Expand page index" : "Collapse page index", type: "button", onClick: onToggleCollapse, children: _jsx(PanelLeft, { size: 15 }) })] }), isCollapsed ? (_jsx("nav", { className: "project-page-index--collapsed", "aria-label": "Project pages", children: pages.map((page) => (_jsx("button", { "aria-label": `${page.title} ${page.path}`, className: selectedPageId === page.id ? "is-active" : "", title: `${page.title} ${page.path}`, type: "button", onClick: () => onPageSelect(page.id), children: _jsx(BookOpen, { size: 16 }) }, page.id))) })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "project-page-index__search", children: [_jsx(Search, { size: 16 }), _jsx("input", { "aria-label": "Search pages", placeholder: "Search pages...", type: "search", value: query, onChange: (event) => setQuery(event.currentTarget.value) }), _jsx("kbd", { children: "/" })] }), _jsx("nav", { className: "project-page-index", "aria-label": "Project pages", children: visibleGroups.map((group) => (_jsxs("section", { children: [_jsxs("h2", { children: [_jsx("span", { children: group.name }), _jsx("span", { children: group.pages.length })] }), group.pages.map((page) => (_jsxs("button", { className: selectedPageId === page.id ? "is-active" : "", type: "button", onClick: () => onPageSelect(page.id), children: [_jsx(BookOpen, { size: 15 }), _jsx("span", { children: page.title }), _jsx("em", { children: page.path })] }, page.id)))] }, group.id))) }), _jsxs("div", { className: "project-page-index-panel__footer", children: [_jsx("span", { children: "Total pages" }), _jsx("strong", { children: model.totals.pages })] })] }))] }));
+}
+function ProjectPagesView({ data, model, onOpenMap, selectedPage, validationReport }) {
+    const defaultRequestId = getDefaultPageRequestId(selectedPage);
+    const [selectedRequestId, setSelectedRequestId] = useState(defaultRequestId);
+    const [isRailOpen, setIsRailOpen] = useState(false);
     useEffect(() => {
-        setSelectedRequestId(firstRequestId);
-    }, [firstRequestId, selectedPage?.page.id]);
+        setSelectedRequestId(defaultRequestId);
+    }, [defaultRequestId, selectedPage?.page.id]);
     if (!selectedPage) {
         return (_jsxs("section", { className: "project-workspace-preview__empty", children: [_jsx("strong", { children: "No pages authored yet" }), _jsx("span", { children: "Ask the project Agent to write pages into anlyx.project.json." })] }));
     }
     const selectedRequest = selectedPage.requests.find((request) => request.id === selectedRequestId) ??
-        selectedPage.requests[0];
+        getDefaultPageRequest(selectedPage);
     const selectedRequestLabel = selectedRequest?.path ?? selectedRequest?.label ?? selectedRequest?.id ?? "selected request";
+    const requestGroups = groupRequestsByRole(selectedPage.requests);
     const selectedRequestFlows = selectedRequest
         ? selectedPage.flows.filter((flow) => flow.request?.id === selectedRequest.id ||
             (flow.request?.path && flow.request.path === selectedRequest.path))
         : [];
     const visibleFlows = selectedRequest ? selectedRequestFlows : selectedPage.flows;
-    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 })] }) })] }));
+    const unknownEvidence = selectedPage.evidence.filter((item) => item.status === "not-proven" || item.status === "unknown");
+    const selectedFlow = visibleFlows[0];
+    return (_jsxs("div", { className: `project-page-workspace${isRailOpen ? "" : " is-rail-collapsed"}`, children: [_jsxs("main", { className: "anlyx-page-report project-page-workspace__main", children: [!isRailOpen ? (_jsxs("button", { className: "anlyx-rail-reopen", type: "button", onClick: () => setIsRailOpen(true), children: [_jsx(PanelLeft, { size: 14 }), "Details"] })) : null, _jsx(ProjectTrustSummary, { data: data, ...(validationReport ? { validationReport } : {}) }), _jsx(PageBrief, { selectedPage: selectedPage }), _jsxs("div", { className: "project-page-two-up", children: [_jsx(ProjectSection, { title: "Story", children: _jsx("p", { className: "project-story-copy", children: selectedPage.page.description ??
+                                        "No story was authored for this page yet. Ask the project Agent to describe what this page does and why it exists." }) }), _jsx(ProjectSection, { className: "anlyx-user-actions", title: "User actions", children: _jsx("div", { className: "anlyx-action-list project-action-list", children: selectedPage.features.length > 0 ? (selectedPage.features.map((feature) => (_jsx(ProjectFeatureCard, { feature: feature }, feature.id)))) : (_jsx("p", { className: "project-muted", children: "No user actions authored for this page." })) }) })] }), _jsx(RequestsByRole, { groups: requestGroups, selectedRequest: selectedRequest, onRequestSelect: setSelectedRequestId }), _jsx(ProjectSection, { className: "anlyx-flow-section", meta: selectedRequest
+                            ? `${selectedRequest.method ?? "HTTP"} ${selectedRequestLabel}`
+                            : undefined, title: "Selected Flow", children: selectedFlow ? (_jsx(ProjectFlowTrace, { flow: selectedFlow })) : (_jsx("p", { className: "project-muted", children: "No backend flow linked to this request." })) }), _jsxs("div", { className: "anlyx-trust-unknowns project-page-two-up project-page-two-up--trust", children: [_jsx(ProjectSection, { className: "anlyx-trust-breakdown", title: "Trust Breakdown", children: _jsxs("div", { className: "anlyx-trust-grid project-evidence-row", children: [_jsx(EvidenceChip, { label: "Source-matched", total: selectedPage.evidenceSummary.total, value: selectedPage.evidenceSummary.sourceMatched }), _jsx(EvidenceChip, { label: "Agent-inferred", total: selectedPage.evidenceSummary.total, value: selectedPage.evidenceSummary.agentInferred }), _jsx(EvidenceChip, { label: "Observed", total: selectedPage.evidenceSummary.total, value: selectedPage.evidenceSummary.observed }), _jsx(EvidenceChip, { label: "Not-proven", total: selectedPage.evidenceSummary.total, value: selectedPage.evidenceSummary.notProven }), _jsx(EvidenceChip, { label: "Unknown", total: selectedPage.evidenceSummary.total, value: selectedPage.evidenceSummary.unknown })] }) }), _jsx(ProjectSection, { className: "anlyx-unknowns", title: "Unknowns", children: unknownEvidence.length > 0 ? (_jsx("ul", { className: "anlyx-unknown-list project-unknown-list", children: unknownEvidence.slice(0, 4).map((item) => (_jsx("li", { children: item.detail ?? item.label }, item.id))) })) : (_jsxs("div", { className: "anlyx-unknown-empty", children: [_jsx("p", { children: "No unknown or not-proven evidence authored for this page." }), _jsx("p", { children: "All detected elements are source-matched." })] })) })] })] }), isRailOpen ? (_jsx(PageDetailsRail, { model: model, selectedPage: selectedPage, onCollapse: () => setIsRailOpen(false), onOpenMap: onOpenMap })) : null] }));
+}
+function PageBrief({ selectedPage }) {
+    return (_jsx("header", { className: "project-page-brief", children: _jsx("div", { className: "project-page-brief__body", children: _jsxs("div", { className: "project-page-brief__title", children: [_jsxs("div", { children: [_jsx("h1", { children: selectedPage.page.title }), _jsx("code", { children: selectedPage.page.path })] }), _jsx("p", { children: selectedPage.page.description ??
+                            "No page story was authored yet. Ask the project Agent to describe what this page does and why it exists." })] }) }) }));
+}
+function RequestsByRole({ groups, onRequestSelect, selectedRequest }) {
+    return (_jsx(ProjectSection, { title: "Requests", children: _jsx("div", { className: "anlyx-requests-grid project-request-columns", children: groups.some((group) => group.requests.length > 0) ? (groups.map((group) => (_jsxs("section", { className: "project-request-column", children: [_jsxs("header", { children: [_jsx("strong", { children: group.label }), _jsx("span", { children: group.requests.length })] }), group.requests.length > 0 ? (group.requests.map((request) => (_jsx(ProjectRequestCard, { isSelected: selectedRequest?.id === request.id, request: request, onSelect: () => onRequestSelect(request.id) }, request.id)))) : (_jsxs("div", { className: "anlyx-request-empty", children: [_jsx(Minus, { size: 18 }), _jsxs("strong", { children: ["No ", group.label.toLowerCase(), " requests"] }), _jsx("span", { children: "None detected for this page." })] }))] }, group.role)))) : (_jsx("p", { className: "project-muted", children: "No requests linked to this page." })) }) }));
+}
+function getDefaultPageRequestId(selectedPage) {
+    return getDefaultPageRequest(selectedPage)?.id;
+}
+function getDefaultPageRequest(selectedPage) {
+    if (!selectedPage)
+        return undefined;
+    return (selectedPage.requests.find((request) => request.role === "primary") ??
+        selectedPage.requests.find((request) => request.role === "supporting") ??
+        selectedPage.requests[0]);
+}
+function groupRequestsByRole(requests) {
+    const groups = [
+        { role: "primary", label: "Primary", requests: [] },
+        { role: "supporting", label: "Supporting", requests: [] },
+        { role: "background", label: "Background", requests: [] },
+        { role: "external", label: "External", requests: [] }
+    ];
+    for (const request of requests) {
+        const group = groups.find((item) => item.role === request.role);
+        group?.requests.push(request);
+    }
+    const externalGroup = groups.find((group) => group.role === "external");
+    const baseGroups = groups.filter((group) => group.role !== "external");
+    return externalGroup && externalGroup.requests.length > 0
+        ? [...baseGroups, externalGroup]
+        : baseGroups;
 }
-function ProjectSection({ children, 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 ProjectSection({ children, className, index, meta, title }) {
+    return (_jsxs("section", { className: `anlyx-report-section project-section${className ? ` ${className}` : ""}`, children: [_jsxs("header", { className: "project-section__header", children: [_jsxs("h3", { children: [index ? (_jsx("span", { className: "project-section__number", "aria-hidden": "true", children: index })) : null, _jsx("span", { children: title })] }), meta ? _jsx("span", { children: meta }) : null] }), children] }));
 }
 function ProjectFeatureCard({ feature }) {
-    return (_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"] })] }));
+    return (_jsx("article", { className: "anlyx-action-item project-feature-card", children: _jsxs("div", { children: [_jsx("strong", { children: feature.name }), _jsx("p", { children: feature.description ?? "No feature description authored yet." })] }) }));
 }
 function ProjectRequestCard({ isSelected, onSelect, request }) {
     const label = request.path ?? request.label ?? request.id;
-    return (_jsxs("button", { className: `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 })] })] }));
+    return (_jsxs("button", { className: `anlyx-request-card project-request-card project-request-card--${request.role} ${isSelected ? "is-selected" : ""}`, type: "button", onClick: onSelect, children: [_jsxs("header", { children: [_jsx("span", { className: `project-method-badge project-method-badge--${request.method ?? "HTTP"}`, children: request.method ?? "HTTP" }), isSelected ? _jsx(Check, { size: 15 }) : null] }), _jsx("strong", { children: label }), _jsx("p", { children: request.description ?? request.purpose }), _jsx("footer", { children: _jsx("b", { children: request.role }) })] }));
 }
 function ProjectFlowTrace({ flow }) {
     const layers = flow.layers.length > 0 ? flow.layers : [];
-    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))) })] }));
+    const [expandedLayerId, setExpandedLayerId] = useState();
+    return (_jsxs("article", { className: "anlyx-flow-trace project-flow-trace", children: [_jsxs("header", { className: "project-flow-trace__header", children: [_jsx("span", { children: flow.request?.role ?? "flow" }), _jsx("strong", { children: flow.name ?? flow.request?.path ?? flow.id })] }), _jsx("div", { className: "anlyx-flow-scroll", children: _jsx("div", { className: "anlyx-flow-track project-flow-trace__layers", children: layers.map((layer, index) => (_jsxs(Fragment, { children: [_jsx(ProjectFlowLayerCard, { isExpanded: expandedLayerId === layer.id, layer: layer, onToggle: () => setExpandedLayerId((current) => (current === layer.id ? undefined : layer.id)) }), index < layers.length - 1 ? (_jsx("span", { className: "anlyx-flow-arrow", "aria-hidden": "true", children: _jsx(ChevronRight, { size: 18 }) })) : null] }, layer.id))) }) })] }));
+}
+function ProjectFlowLayerCard({ isExpanded, onToggle, layer }) {
+    const source = formatSourceLocation(layer.source) ?? formatLayerHint(layer);
+    return (_jsxs("button", { "aria-expanded": isExpanded, className: `anlyx-flow-node project-flow-layer project-flow-layer--${layer.kind}${isExpanded ? " is-expanded" : ""}`, title: source, type: "button", onClick: onToggle, children: [_jsx("span", { className: "anlyx-flow-layer", children: titleCase(layer.kind) }), _jsx("strong", { className: "anlyx-flow-title", children: layer.label }), _jsx("em", { className: "anlyx-flow-source", children: source }), _jsx("small", { className: "anlyx-evidence-pill", children: evidenceStatusLabel(layer.status) })] }));
+}
+function EvidenceChip({ label, total, value }) {
+    const percent = total > 0 ? Math.round((value / total) * 100) : 0;
+    const status = label.toLowerCase().replace(/[^a-z]+/g, "-").replace(/^-|-$/g, "");
+    return (_jsxs("span", { className: `anlyx-trust-card anlyx-trust-card--${status} project-evidence-chip`, children: [_jsxs("span", { children: [_jsx("i", { "aria-hidden": "true" }), label] }), _jsx("strong", { children: value }), _jsxs("em", { children: [percent, "%"] })] }));
+}
+function PageDetailsRail({ model, onCollapse, onOpenMap, selectedPage }) {
+    const page = selectedPage.page;
+    const relatedPages = getRelatedPages(model, page.metadata?.["relatedPageIds"]);
+    const tags = getStringList(page.metadata?.["tags"]);
+    const evidenceLabel = formatEvidenceSummary(selectedPage.evidenceSummary);
+    return (_jsxs("aside", { className: "anlyx-page-rail project-page-details-panel", "aria-label": "Page details", children: [_jsxs("div", { className: "anlyx-page-rail__header", children: [_jsx("h2", { children: "Page Details" }), _jsx("button", { "aria-label": "Collapse page details", type: "button", onClick: onCollapse, children: _jsx(PanelLeft, { size: 14 }) })] }), _jsxs("dl", { children: [_jsx(ProjectDetailField, { label: "Area", value: selectedPage.areaName }), _jsx(ProjectDetailField, { label: "Route", value: page.path }), _jsx(ProjectDetailField, { label: "Page Type", value: metadataString(page.metadata?.["pageType"]) ?? "Not authored" }), _jsx(ProjectDetailField, { label: "Auth Required", value: metadataBooleanLabel(page.metadata?.["authRequired"]) }), _jsx(ProjectDetailField, { label: "Layout", value: metadataString(page.metadata?.["layout"]) ?? "Not authored" }), _jsx(ProjectDetailField, { label: "Last Seen", value: formatAnalysisTime(model.project.analyzedAt) ?? "Not authored" })] }), _jsxs("section", { children: [_jsx("h3", { children: "Evidence" }), _jsx("p", { children: evidenceLabel }), page.source ? _jsx("p", { children: formatSourceLocation(page.source) }) : null] }), _jsxs("section", { children: [_jsx("h3", { children: "Related Pages" }), relatedPages.length > 0 ? (_jsx("ul", { children: relatedPages.map((relatedPage) => (_jsxs("li", { children: [_jsx("strong", { children: relatedPage.title }), _jsx("span", { children: relatedPage.path })] }, relatedPage.id))) })) : (_jsx("p", { children: "No related pages authored." }))] }), _jsxs("section", { children: [_jsx("h3", { children: "Tags" }), tags.length > 0 ? (_jsx("div", { className: "project-page-tags", children: tags.map((tag) => (_jsxs("span", { children: [_jsx(Tag, { size: 12 }), tag] }, tag))) })) : (_jsx("p", { children: "No tags authored." }))] }), _jsxs("button", { type: "button", onClick: onOpenMap, children: [_jsx(Network, { size: 15 }), "View in Map"] })] }));
+}
+function ProjectDetailField({ label, value }) {
+    return (_jsxs("div", { children: [_jsx("dt", { children: label }), _jsx("dd", { children: value })] }));
+}
+function getRelatedPages(model, value) {
+    const ids = getStringList(value);
+    const pages = model.pageGroups.flatMap((group) => group.pages);
+    return ids.flatMap((id) => {
+        const page = pages.find((item) => item.id === id);
+        return page ? [{ id: page.id, path: page.path, title: page.title }] : [];
+    });
+}
+function getStringList(value) {
+    return Array.isArray(value)
+        ? value.filter((item) => typeof item === "string" && item.trim().length > 0)
+        : [];
+}
+function metadataString(value) {
+    return typeof value === "string" && value.trim().length > 0 ? value : undefined;
+}
+function metadataBooleanLabel(value) {
+    if (typeof value === "boolean")
+        return value ? "Yes" : "No";
+    if (typeof value === "string" && value.trim().length > 0)
+        return value;
+    return "Not authored";
+}
+function formatAnalysisTime(value) {
+    if (!value)
+        return undefined;
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime()))
+        return value;
+    return date.toLocaleString("en", {
+        day: "2-digit",
+        hour: "2-digit",
+        minute: "2-digit",
+        month: "short",
+        year: "numeric"
+    });
 }
-function 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 formatEvidenceSummary(summary) {
+    if (summary.total === 0)
+        return "Not authored";
+    const strongest = summary.sourceMatched > 0
+        ? "Source-matched"
+        : summary.observed > 0
+            ? "Observed"
+            : summary.agentInferred > 0
+                ? "Agent-inferred"
+                : summary.notProven > 0
+                    ? "Not-proven"
+                    : "Unknown";
+    return `${strongest} (${summary.total})`;
+}
+function formatSourceLocation(source) {
+    if (!source)
+        return undefined;
+    const line = source.lineStart ? `:${source.lineStart}` : "";
+    const symbol = source.symbol ? ` ${source.symbol}` : "";
+    return `${source.filePath}${line}${symbol}`;
+}
+function formatLayerHint(layer) {
+    return metadataString(layer.metadata?.["module"]) ?? metadataString(layer.metadata?.["file"]) ?? layer.id;
 }
-function EvidenceChip({ label, value }) {
-    return (_jsxs("span", { className: "project-evidence-chip", children: [_jsx(Check, { size: 15 }), label, _jsx("strong", { children: value })] }));
+function titleCase(value) {
+    return value
+        .split("-")
+        .map((part) => `${part.slice(0, 1).toUpperCase()}${part.slice(1)}`)
+        .join("-");
 }
 function ProjectMapView({ data, model }) {
-    const graph = useMemo(() => buildProjectArchitectureReactFlow(data), [data]);
+    const map = useMemo(() => buildProjectArchitectureMap(data), [data]);
+    const [selectedNodeId, setSelectedNodeId] = useState(undefined);
+    const [inspectorOpen, setInspectorOpen] = useState(false);
+    const selectedNode = map.nodes.find((node) => node.id === selectedNodeId);
+    const focus = useMemo(() => buildProjectArchitectureFocus(map, selectedNode?.id), [map, selectedNode?.id]);
+    const selectNode = (nodeId) => {
+        setSelectedNodeId(nodeId);
+        setInspectorOpen(true);
+    };
     if (data.architecture.nodes.length === 0) {
         return (_jsxs("section", { className: "project-map-placeholder", "aria-label": "Project architecture map", children: [_jsxs("div", { children: [_jsx(Network, { size: 24 }), _jsx("h2", { children: "Map" }), _jsx("p", { children: "No architecture graph was authored yet. The viewer will not invent mock project data." })] }), _jsxs("dl", { children: [_jsxs("div", { children: [_jsx("dt", { children: "Nodes" }), _jsx("dd", { children: "0" })] }), _jsxs("div", { children: [_jsx("dt", { children: "Edges" }), _jsx("dd", { children: "0" })] })] })] }));
     }
-    return (_jsxs("section", { className: "project-architecture-map 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) {
+    return (_jsxs("section", { className: "project-architecture-map anlyx-map-shell", "aria-label": "Project architecture map", children: [_jsxs("header", { className: "project-architecture-map__toolbar", children: [_jsxs("div", { children: [_jsx("h1", { children: "Map" }), _jsx("p", { children: "Agent-authored architecture map. The viewer renders nodes and edges from project JSON." })] }), _jsx("div", { className: "anlyx-map-header-actions", children: _jsx(ProjectArchitectureMapStats, { map: map, model: model }) })] }), _jsxs("div", { className: `anlyx-map-body${inspectorOpen ? " has-inspector" : ""}`, children: [_jsx("div", { className: `project-architecture-map__canvas${selectedNode ? " is-focused" : ""}${map.isCompact ? " is-small-graph" : ""}`, "data-testid": "project-architecture-map", style: {
+                            "--anlyx-map-width": `${map.width}px`,
+                            "--anlyx-map-height": `${map.height}px`
+                        }, children: _jsxs("div", { className: "anlyx-map-stage", children: [_jsx("svg", { "aria-hidden": "true", className: "anlyx-map-edges", height: map.height, viewBox: `0 0 ${map.width} ${map.height}`, width: map.width, children: map.edges.map((edge) => (_jsx(ProjectArchitectureMapEdge, { edge: edge, focus: focus }, edge.id))) }), _jsx("div", { className: "anlyx-map-columns", "aria-hidden": "true", children: map.columns.map((column) => (_jsxs("div", { className: "anlyx-map-column-guide", style: { left: column.x, width: column.width }, children: [_jsx("strong", { children: column.label }), _jsx("span", { children: column.count })] }, column.id))) }), map.nodes.map((node) => (_jsx(ProjectArchitectureMapNode, { focus: focus, node: node, onSelect: selectNode, selected: node.id === selectedNode?.id }, node.id))), _jsxs("div", { className: "anlyx-map-legend", children: [_jsxs("span", { children: [_jsx("i", { className: "is-primary" }), " Selected path"] }), _jsxs("span", { children: [_jsx("i", { className: "is-shared" }), " Shared dependency"] }), _jsxs("span", { children: [_jsx("i", { className: "is-muted" }), " Other / Unknown"] })] })] }) }), inspectorOpen ? (_jsx(ProjectArchitectureInspector, { focus: focus, node: selectedNode, nodesById: map.nodesById, onClose: () => {
+                            setInspectorOpen(false);
+                            setSelectedNodeId(undefined);
+                        } })) : null] })] }));
+}
+const projectArchitectureColumns = [
+    { id: "pages", label: "Pages / Features", kinds: ["frontend"] },
+    { id: "requests", label: "Requests", kinds: ["request"] },
+    { id: "api", label: "API", kinds: ["api"] },
+    { id: "controllers", label: "Controllers", kinds: ["controller", "handler", "middleware"] },
+    { id: "services", label: "Services", kinds: ["service", "cache", "queue", "job", "external"] },
+    { id: "repository", label: "Repository / Mapper", kinds: ["repository", "mapper"] },
+    { id: "policy", label: "Policy / Schema", kinds: ["policy"] },
+    { id: "data", label: "Data / JSON", kinds: ["database"] },
+    { id: "result", label: "Results", kinds: ["result", "unknown"] }
+];
+function buildProjectArchitectureMap(data) {
     const nodeIds = new Set(data.architecture.nodes.map((node) => node.id));
     const validEdges = data.architecture.edges.filter((edge) => nodeIds.has(edge.source) && nodeIds.has(edge.target));
+    const evidenceById = new Map(data.evidence.map((evidence) => [evidence.id, evidence]));
     const connectionCounts = new Map();
+    const upstreamCounts = new Map();
+    const downstreamCounts = new Map();
     validEdges.forEach((edge) => {
         connectionCounts.set(edge.source, (connectionCounts.get(edge.source) ?? 0) + 1);
         connectionCounts.set(edge.target, (connectionCounts.get(edge.target) ?? 0) + 1);
+        downstreamCounts.set(edge.source, (downstreamCounts.get(edge.source) ?? 0) + 1);
+        upstreamCounts.set(edge.target, (upstreamCounts.get(edge.target) ?? 0) + 1);
+    });
+    const columnIdByKind = new Map(projectArchitectureColumns.flatMap((column) => column.kinds.map((kind) => [kind, column.id])));
+    const isCompact = data.architecture.nodes.length <= 12;
+    const filledColumnWidth = isCompact ? 176 : 196;
+    const nodeHeight = isCompact ? 90 : 96;
+    const columnGap = isCompact ? 28 : 34;
+    const rowGap = isCompact ? 16 : 22;
+    const top = isCompact ? 62 : 82;
+    const left = 18;
+    const grouped = new Map();
+    for (const node of data.architecture.nodes) {
+        const columnId = columnIdByKind.get(node.kind) ?? "result";
+        const nodes = grouped.get(columnId) ?? [];
+        nodes.push(node);
+        grouped.set(columnId, nodes);
+    }
+    const columnCounts = new Map();
+    for (const column of projectArchitectureColumns) {
+        columnCounts.set(column.id, grouped.get(column.id)?.length ?? 0);
+    }
+    let currentX = left;
+    const columns = projectArchitectureColumns
+        .filter((column) => (columnCounts.get(column.id) ?? 0) > 0)
+        .map((column) => {
+        const count = columnCounts.get(column.id) ?? 0;
+        const width = filledColumnWidth;
+        const positionedColumn = {
+            ...column,
+            x: currentX,
+            width,
+            count
+        };
+        currentX += width + columnGap;
+        return positionedColumn;
+    });
+    const mapNodes = [];
+    for (const column of columns) {
+        const nodes = grouped.get(column.id) ?? [];
+        nodes
+            .sort((a, b) => {
+            const degreeDelta = (connectionCounts.get(b.id) ?? 0) - (connectionCounts.get(a.id) ?? 0);
+            return degreeDelta || a.label.localeCompare(b.label);
+        })
+            .forEach((node, index) => {
+            const evidenceStatus = projectArchitectureEvidenceStatus(node.evidenceIds, evidenceById);
+            const source = formatProjectArchitectureSource(node.source);
+            mapNodes.push({
+                ...node,
+                columnId: column.id,
+                x: column.x,
+                y: top + index * (nodeHeight + rowGap),
+                width: column.width,
+                height: nodeHeight,
+                connectionCount: connectionCounts.get(node.id) ?? 0,
+                upstreamCount: upstreamCounts.get(node.id) ?? 0,
+                downstreamCount: downstreamCounts.get(node.id) ?? 0,
+                evidenceStatus,
+                evidenceLabel: node.evidenceIds.length > 0 ? evidenceStatusLabel(evidenceStatus) : "Unknown",
+                subtitle: source ?? projectArchitectureNodeSubtitle(node)
+            });
+        });
+    }
+    const nodesById = new Map(mapNodes.map((node) => [node.id, node]));
+    const logicalEdges = validEdges
+        .map((edge) => {
+        const sourceNode = nodesById.get(edge.source);
+        const targetNode = nodesById.get(edge.target);
+        if (!sourceNode || !targetNode)
+            return undefined;
+        return sourceNode && targetNode ? { ...edge, sourceNode, targetNode, routeX: 0 } : undefined;
+    })
+        .filter((edge) => Boolean(edge));
+    const mapEdgesWithoutLanes = logicalEdges.filter((edge) => {
+        if (edge.sourceNode.columnId === edge.targetNode.columnId)
+            return false;
+        return edge.sourceNode.x + edge.sourceNode.width < edge.targetNode.x;
     });
-    const 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);
+    const gutterCounts = new Map();
+    const mapEdges = mapEdgesWithoutLanes.map((edge) => {
+        const sourceRight = edge.sourceNode.x + edge.sourceNode.width;
+        const gap = Math.max(1, edge.targetNode.x - sourceRight);
+        const gutterKey = `${edge.sourceNode.columnId}->${edge.targetNode.columnId}`;
+        const gutterIndex = gutterCounts.get(gutterKey) ?? 0;
+        gutterCounts.set(gutterKey, gutterIndex + 1);
+        const laneOffset = (gutterIndex - 1) * 6;
+        const routeX = sourceRight + gap / 2 + laneOffset;
         return {
-            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
+            ...edge,
+            routeX: Math.max(sourceRight + 14, Math.min(edge.targetNode.x - 14, routeX))
         };
     });
+    const maxColumnCount = Math.max(1, ...columns.map((column) => column.count));
     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
-        }))
+        columns,
+        columnCounts,
+        nodes: mapNodes,
+        edges: mapEdges,
+        logicalEdges,
+        nodesById,
+        width: Math.max(0, currentX - columnGap + left),
+        height: top + maxColumnCount * (nodeHeight + rowGap) + (isCompact ? 34 : 80),
+        nodeWidth: filledColumnWidth,
+        isCompact
     };
 }
-function ProjectArchitectureNode({ data }) {
-    const node = data.node;
-    const label = node.displayLabel ?? node.label;
+function buildProjectArchitectureFocus(map, selectedNodeId) {
+    if (!selectedNodeId) {
+        return { nodeIds: new Set(), edgeIds: new Set(), upstreamIds: [], downstreamIds: [] };
+    }
+    const upstreamIds = collectArchitectureReachable(map.logicalEdges, selectedNodeId, "upstream");
+    const downstreamIds = collectArchitectureReachable(map.logicalEdges, selectedNodeId, "downstream");
+    const nodeIds = new Set([selectedNodeId, ...upstreamIds, ...downstreamIds]);
+    const edgeIds = new Set(map.logicalEdges
+        .filter((edge) => nodeIds.has(edge.source) && nodeIds.has(edge.target))
+        .map((edge) => edge.id));
+    return { nodeIds, edgeIds, upstreamIds, downstreamIds };
+}
+function collectArchitectureReachable(edges, nodeId, direction) {
+    const result = [];
+    const visited = new Set([nodeId]);
+    const queue = [nodeId];
+    while (queue.length > 0) {
+        const current = queue.shift() ?? "";
+        const nextEdges = direction === "downstream"
+            ? edges.filter((edge) => edge.source === current)
+            : edges.filter((edge) => edge.target === current);
+        for (const edge of nextEdges) {
+            const nextId = direction === "downstream" ? edge.target : edge.source;
+            if (visited.has(nextId))
+                continue;
+            visited.add(nextId);
+            result.push(nextId);
+            queue.push(nextId);
+        }
+    }
+    return result;
+}
+function ProjectArchitectureMapStats({ map, model }) {
+    const stats = [
+        { label: "Pages", value: model.totals.pages },
+        { label: "Requests", value: map.columnCounts.get("requests") ?? 0 },
+        { label: "API", value: map.columnCounts.get("api") ?? 0 },
+        { label: "Controllers", value: map.columnCounts.get("controllers") ?? 0 },
+        { label: "Services", value: map.columnCounts.get("services") ?? 0 },
+        { label: "Mappers", value: map.columnCounts.get("repository") ?? 0 },
+        { label: "Results", value: map.columnCounts.get("result") ?? 0 }
+    ];
+    return (_jsx("dl", { children: stats.map((stat) => (_jsxs("div", { children: [_jsx("dt", { children: stat.label }), _jsx("dd", { children: stat.value })] }, stat.label))) }));
+}
+function ProjectArchitectureMapNode({ focus, node, onSelect, selected }) {
     const Icon = projectArchitectureNodeIcon(node.kind);
-    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" })] }));
+    const muted = focus.nodeIds.size > 0 && !focus.nodeIds.has(node.id);
+    const shared = node.upstreamCount > 1 || node.downstreamCount > 1;
+    return (_jsxs("button", { className: `anlyx-map-node${selected ? " is-selected" : ""}${muted ? " is-muted" : ""}`, onClick: () => onSelect(node.id), style: { left: node.x, top: node.y, width: node.width, minHeight: node.height }, title: `${node.label}${node.source?.filePath ? ` · ${node.source.filePath}` : ""}`, type: "button", children: [_jsx("span", { className: "anlyx-map-node__icon", "aria-hidden": "true", children: _jsx(Icon, { size: 15 }) }), _jsxs("span", { className: "anlyx-map-node__body", children: [_jsx("span", { className: "anlyx-map-node__layer", children: projectArchitectureKindLabel(node.kind) }), _jsx("strong", { children: node.displayLabel ?? node.label }), _jsx("small", { children: node.subtitle })] }), _jsx("span", { className: `anlyx-map-evidence anlyx-map-evidence--${node.evidenceStatus}`, children: node.evidenceLabel }), shared ? _jsx("span", { className: "anlyx-map-node__degree", children: node.connectionCount }) : null] }));
+}
+function ProjectArchitectureMapEdge({ edge, focus }) {
+    const selected = focus.edgeIds.has(edge.id);
+    const muted = focus.edgeIds.size > 0 && !selected;
+    const sourceX = edge.sourceNode.x + edge.sourceNode.width;
+    const sourceY = edge.sourceNode.y + edge.sourceNode.height / 2;
+    const targetX = edge.targetNode.x;
+    const targetY = edge.targetNode.y + edge.targetNode.height / 2;
+    const path = createProjectArchitectureOrthogonalPath(sourceX, sourceY, edge.routeX, targetX, targetY);
+    const role = edge.role ?? "primary";
+    const status = projectArchitectureEdgeStatus(edge);
+    const visualRole = status === "not-proven" || status === "unknown"
+        ? "unknown"
+        : role === "shared" || edge.targetNode.upstreamCount > 1
+            ? "shared"
+            : "primary";
+    return (_jsx("path", { className: `anlyx-map-edge anlyx-map-edge--${visualRole}${selected ? " is-selected" : ""}${muted ? " is-muted" : ""}`, d: path }));
+}
+function createProjectArchitectureOrthogonalPath(sourceX, sourceY, routeX, targetX, targetY) {
+    return `M ${sourceX} ${sourceY} H ${routeX} V ${targetY} H ${targetX}`;
+}
+function projectArchitectureEdgeStatus(edge) {
+    if (edge.confidence === "low")
+        return "not-proven";
+    if (edge.sourceNode.evidenceStatus === "not-proven" || edge.targetNode.evidenceStatus === "not-proven") {
+        return "not-proven";
+    }
+    if (edge.sourceNode.evidenceStatus === "unknown" || edge.targetNode.evidenceStatus === "unknown") {
+        return "unknown";
+    }
+    return edge.targetNode.evidenceStatus;
+}
+function ProjectArchitectureInspector({ focus, node, nodesById, onClose }) {
+    if (!node) {
+        return (_jsxs("aside", { className: "anlyx-map-inspector", "aria-label": "Map inspector", children: [_jsx("button", { className: "anlyx-map-inspector__close", onClick: onClose, type: "button", children: "Close" }), _jsx("h2", { children: "No node selected" })] }));
+    }
+    const upstream = focus.upstreamIds.map((id) => nodesById.get(id)).filter(Boolean);
+    const downstream = focus.downstreamIds.map((id) => nodesById.get(id)).filter(Boolean);
+    const contract = projectArchitectureNodeContract(node);
+    return (_jsxs("aside", { className: "anlyx-map-inspector", "aria-label": "Map inspector", children: [_jsxs("header", { children: [_jsxs("div", { children: [_jsx("span", { children: "Selected" }), _jsx("h2", { children: node.displayLabel ?? node.label })] }), _jsx("button", { className: "anlyx-map-inspector__close", onClick: onClose, type: "button", children: "Close" })] }), _jsxs("dl", { className: "anlyx-map-inspector__meta", children: [_jsxs("div", { children: [_jsx("dt", { children: "Layer" }), _jsx("dd", { children: projectArchitectureKindLabel(node.kind) })] }), _jsxs("div", { children: [_jsx("dt", { children: "Title" }), _jsx("dd", { children: node.label })] }), _jsxs("div", { children: [_jsx("dt", { children: "Path" }), _jsx("dd", { children: formatProjectArchitectureSource(node.source) ?? "Not authored" })] }), _jsxs("div", { children: [_jsx("dt", { children: "Evidence" }), _jsx("dd", { children: node.evidenceLabel })] })] }), _jsx(ProjectArchitectureContractSection, { contract: contract }), _jsxs("section", { children: [_jsx("h3", { children: "Upstream" }), _jsx(ProjectArchitectureInspectorList, { emptyLabel: "No upstream nodes.", nodes: upstream })] }), _jsxs("section", { children: [_jsx("h3", { children: "Downstream path" }), _jsx(ProjectArchitectureInspectorList, { emptyLabel: "No downstream nodes.", nodes: downstream, ordered: true })] })] }));
+}
+function ProjectArchitectureContractSection({ contract }) {
+    const hasContract = Boolean(contract.endpoint) ||
+        Boolean(contract.inputName) ||
+        Boolean(contract.outputName) ||
+        contract.relatedModels.length > 0 ||
+        contract.transforms.length > 0 ||
+        Boolean(contract.mapping) ||
+        Boolean(contract.inputShape) ||
+        Boolean(contract.outputShape);
+    return (_jsxs("section", { className: "anlyx-map-contract", children: [_jsx("h3", { children: "Data Contract" }), hasContract ? (_jsxs("div", { className: "anlyx-map-contract__body", children: [contract.endpoint ? (_jsx(ProjectArchitectureContractField, { label: "Endpoint", value: contract.endpoint })) : null, _jsx(ProjectArchitectureContractField, { label: "Input", value: formatProjectArchitectureContractName(contract.inputName, contract.inputKind) }), _jsx(ProjectArchitectureContractField, { label: "Output", value: formatProjectArchitectureContractName(contract.outputName, contract.outputKind) }), _jsx(ProjectArchitectureShapePreview, { shape: contract.outputShape ?? contract.inputShape }), contract.mapping ? (_jsx(ProjectArchitectureContractField, { label: "Mapping", value: contract.mapping })) : null, contract.transforms.length > 0 ? (_jsxs("div", { className: "anlyx-map-contract__group", children: [_jsx("span", { children: "Transforms" }), _jsx("ul", { children: contract.transforms.slice(0, 6).map((transform) => (_jsx("li", { children: transform }, transform))) })] })) : null, contract.relatedModels.length > 0 ? (_jsxs("div", { className: "anlyx-map-contract__group", children: [_jsx("span", { children: "Models" }), _jsx("ul", { children: contract.relatedModels.slice(0, 8).map((model) => (_jsx("li", { children: model }, model))) })] })) : null] })) : (_jsx("p", { className: "project-muted", children: "No contract authored." }))] }));
+}
+function ProjectArchitectureContractField({ label, value }) {
+    return (_jsxs("div", { className: "anlyx-map-contract__field", children: [_jsx("span", { children: label }), _jsx("strong", { children: value ?? "No contract authored" })] }));
+}
+function ProjectArchitectureShapePreview({ shape }) {
+    if (!shape) {
+        return null;
+    }
+    const entries = Object.entries(shape).slice(0, 8);
+    if (entries.length === 0) {
+        return null;
+    }
+    return (_jsxs("div", { className: "anlyx-map-contract__shape", children: [_jsx("span", { children: "Shape" }), _jsxs("pre", { children: [entries.map(([key, value]) => `${key}: ${value}`).join("\n"), Object.keys(shape).length > entries.length ? "\n..." : ""] })] }));
 }
-function 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 ProjectArchitectureInspectorList({ emptyLabel, nodes, ordered = false }) {
+    const visibleNodes = nodes.filter((node) => Boolean(node));
+    if (visibleNodes.length === 0) {
+        return _jsx("p", { className: "project-muted", children: emptyLabel });
+    }
+    return (_jsx("ol", { className: ordered ? "anlyx-map-path-list" : "anlyx-map-node-list", children: visibleNodes.slice(0, 8).map((node) => (_jsxs("li", { children: [_jsx("strong", { children: node.displayLabel ?? node.label }), _jsx("span", { children: projectArchitectureKindLabel(node.kind) })] }, node.id))) }));
+}
+function projectArchitectureNodeContract(node) {
+    const metadata = recordFromUnknown(node.metadata);
+    const contractRoot = recordFromUnknown(metadata?.["contracts"]) ?? metadata;
+    const input = contractItemFromUnknown(contractRoot?.["input"]);
+    const output = contractItemFromUnknown(contractRoot?.["output"]);
+    return {
+        endpoint: metadataString(contractRoot?.["endpoint"]),
+        inputName: input.name,
+        inputKind: input.kind,
+        inputShape: input.shape,
+        outputName: output.name,
+        outputKind: output.kind,
+        outputShape: output.shape,
+        relatedModels: getStringList(contractRoot?.["relatedModels"]).length > 0
+            ? getStringList(contractRoot?.["relatedModels"])
+            : getStringList(contractRoot?.["models"]),
+        transforms: getStringList(contractRoot?.["transforms"]),
+        mapping: metadataString(contractRoot?.["mapping"])
+    };
+}
+function contractItemFromUnknown(value) {
+    if (typeof value === "string") {
+        return { name: value, kind: undefined, shape: undefined };
+    }
+    const record = recordFromUnknown(value);
+    if (!record) {
+        return { name: undefined, kind: undefined, shape: undefined };
+    }
+    return {
+        name: metadataString(record["name"]),
+        kind: metadataString(record["kind"]),
+        shape: shapeFromUnknown(record["shape"])
+    };
+}
+function shapeFromUnknown(value) {
+    const record = recordFromUnknown(value);
+    if (!record) {
+        return undefined;
+    }
+    const entries = Object.entries(record)
+        .map(([key, item]) => [key, typeof item === "string" ? item : JSON.stringify(item)])
+        .filter((entry) => typeof entry[1] === "string");
+    return entries.length > 0 ? Object.fromEntries(entries) : undefined;
+}
+function recordFromUnknown(value) {
+    if (!value || typeof value !== "object" || Array.isArray(value)) {
+        return undefined;
+    }
+    return value;
+}
+function formatProjectArchitectureContractName(name, kind) {
+    if (!name) {
+        return undefined;
+    }
+    return kind ? `${name} (${kind})` : name;
+}
+function projectArchitectureEvidenceStatus(evidenceIds, evidenceById) {
+    const statuses = evidenceIds
+        .map((id) => evidenceById.get(id)?.status)
+        .filter((status) => Boolean(status));
+    if (statuses.includes("source-matched"))
+        return "source-matched";
+    if (statuses.includes("observed"))
+        return "observed";
+    if (statuses.includes("measured"))
+        return "measured";
+    if (statuses.includes("agent-inferred"))
+        return "agent-inferred";
+    if (statuses.includes("not-proven"))
+        return "not-proven";
+    return "unknown";
+}
+function projectArchitectureNodeSubtitle(node) {
+    const module = metadataString(node.metadata?.["module"]);
+    const path = metadataString(node.metadata?.["path"]);
+    const detail = metadataString(node.metadata?.["detail"]);
+    return module ?? path ?? detail ?? node.domain ?? node.id;
+}
+function formatProjectArchitectureSource(source) {
+    if (!source)
+        return undefined;
+    const line = source.lineStart ? `:${source.lineStart}` : "";
+    const symbol = source.symbol ? ` ${source.symbol}` : "";
+    return `${source.filePath}${line}${symbol}`;
+}
+function projectArchitectureKindLabel(kind) {
+    const labels = {
+        frontend: "Page",
+        request: "HTTP",
+        api: "API",
+        controller: "CTRL",
+        handler: "Handler",
+        middleware: "Middleware",
+        service: "SRV",
+        policy: "Policy",
+        mapper: "Map",
+        repository: "Repo",
+        database: "Data",
+        cache: "Cache",
+        queue: "Queue",
+        job: "Job",
+        external: "External",
+        result: "UI",
+        unknown: "Unknown"
+    };
+    return labels[kind] ?? titleCase(kind);
 }
 function projectArchitectureNodeIcon(kind) {
     if (kind === "database") {
@@ -605,24 +1201,47 @@ function projectArchitectureNodeIcon(kind) {
     }
     return Circle;
 }
-function ProjectJsonView({ data, model, rawJson }) {
-    const jsonFiles = useMemo(() => projectJsonFiles(data, model, rawJson), [data, model, rawJson]);
+function ProjectJsonView({ data, model, rawJson, validationReport }) {
+    const jsonFiles = useMemo(() => projectJsonFiles(data, model, rawJson, validationReport), [data, model, rawJson, validationReport]);
     const [selectedJsonFileId, setSelectedJsonFileId] = useState(jsonFiles[0]?.id ?? "project");
     const selectedJsonFile = jsonFiles.find((file) => file.id === selectedJsonFileId) ?? jsonFiles[0];
     const activeJson = selectedJsonFile?.content ?? rawJson;
     const lines = activeJson.split("\n");
     const inventory = useMemo(() => projectJsonInventoryItems(data, model), [data, model]);
     const EditorFileIcon = selectedJsonFile?.icon ?? Code2;
+    const validationTone = validationReport
+        ? validationReport.valid
+            ? validationReport.issues.length > 0
+                ? "amber"
+                : "green"
+            : "red"
+        : "green";
+    const validationLabel = validationReport
+        ? validationReport.valid
+            ? validationReport.issues.length > 0
+                ? "Valid with warnings"
+                : "Valid"
+            : "Invalid"
+        : "Valid";
     return (_jsxs("section", { className: "project-json-workspace", "aria-label": "Project JSON", children: [_jsxs("aside", { className: "project-json-outline", "aria-label": "JSON files", children: [_jsx("div", { className: "project-panel-title", children: _jsx("h2", { children: "JSON Files" }) }), _jsx("span", { className: "project-badge project-badge--green", children: "AI-authored" }), _jsx("div", { className: "project-json-file-list", role: "list", children: jsonFiles.map((file) => {
                             const Icon = file.icon;
                             return (_jsxs("button", { className: file.id === selectedJsonFile?.id ? "is-selected" : "", type: "button", onClick: () => setSelectedJsonFileId(file.id), children: [_jsx(Icon, { size: 17 }), _jsxs("span", { children: [_jsx("strong", { children: file.name }), _jsx("small", { children: file.description })] }), _jsx("em", { children: file.countLabel })] }, file.id));
-                        }) })] }), _jsxs("article", { className: "project-json-editor", "aria-label": "Raw project JSON", children: [_jsxs("header", { children: [_jsxs("span", { className: "project-json-file", children: [_jsx(EditorFileIcon, { size: 16 }), selectedJsonFile?.name ?? "anlyx.project.json"] }), _jsxs("div", { children: [_jsxs("button", { type: "button", onClick: () => void navigator.clipboard?.writeText(activeJson), children: [_jsx(Copy, { size: 15 }), "Copy JSON"] }), _jsx("button", { type: "button", onClick: () => downloadProjectJson(activeJson, selectedJsonFile?.name), children: _jsx(Download, { size: 15 }) })] })] }), _jsx("pre", { children: lines.map((line, index) => (_jsxs("span", { children: [_jsx("em", { children: index + 1 }), _jsx("code", { children: line || " " })] }, `${index}:${line}`))) })] }), _jsxs("aside", { className: "project-json-details", "aria-label": "JSON details", children: [_jsxs(JsonDetailsCard, { title: "Schema", children: [_jsx(ProjectDetailRow, { label: "Version", value: data.schemaVersion }), _jsx(ProjectDetailRow, { label: "Validation", value: "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))) }) })] })] }));
+                        }) })] }), _jsxs("article", { className: "project-json-editor", "aria-label": "Raw project JSON", children: [_jsxs("header", { children: [_jsxs("span", { className: "project-json-file", children: [_jsx(EditorFileIcon, { size: 16 }), selectedJsonFile?.name ?? "anlyx.project.json"] }), _jsxs("div", { children: [_jsxs("button", { type: "button", onClick: () => void navigator.clipboard?.writeText(activeJson), children: [_jsx(Copy, { size: 15 }), "Copy JSON"] }), _jsx("button", { type: "button", onClick: () => downloadProjectJson(activeJson, selectedJsonFile?.name), children: _jsx(Download, { size: 15 }) })] })] }), _jsx("pre", { children: lines.map((line, index) => (_jsxs("span", { children: [_jsx("em", { children: index + 1 }), _jsx("code", { children: line || " " })] }, `${index}:${line}`))) })] }), _jsxs("aside", { className: "project-json-details", "aria-label": "JSON details", children: [_jsxs(JsonDetailsCard, { title: "Schema", children: [_jsx(ProjectDetailRow, { label: "Version", value: data.schemaVersion }), _jsx(ProjectDetailRow, { label: "Validation", value: validationLabel, tone: validationTone })] }), validationReport ? (_jsxs(JsonDetailsCard, { title: "Trust checks", children: [_jsx(ProjectDetailRow, { label: "Source issues", value: String(validationReport.summary.sourceIssueCount), tone: validationReport.summary.sourceIssueCount > 0 ? "amber" : "green" }), validationReport.summary.sourceIssueBreakdown ? (_jsxs(_Fragment, { children: [_jsx(ProjectDetailRow, { label: "Missing files", value: String(validationReport.summary.sourceIssueBreakdown.missingFiles), tone: validationReport.summary.sourceIssueBreakdown.missingFiles > 0
+                                            ? "amber"
+                                            : "green" }), _jsx(ProjectDetailRow, { label: "Line issues", value: String(validationReport.summary.sourceIssueBreakdown.placeholderLines +
+                                            validationReport.summary.sourceIssueBreakdown.outOfRangeLines), tone: validationReport.summary.sourceIssueBreakdown.placeholderLines +
+                                            validationReport.summary.sourceIssueBreakdown.outOfRangeLines >
+                                            0
+                                            ? "amber"
+                                            : "green" }), _jsx(ProjectDetailRow, { label: "Symbol issues", value: String(validationReport.summary.sourceIssueBreakdown.missingSymbols), tone: validationReport.summary.sourceIssueBreakdown.missingSymbols > 0
+                                            ? "amber"
+                                            : "green" })] })) : null, _jsx(ProjectDetailRow, { label: "Coverage", value: validationReport.summary.coverageStatus, tone: validationReport.summary.coverageStatus === "partial" ? "amber" : "green" }), _jsx(ProjectDetailRow, { label: "Issues", value: String(validationReport.issues.length), tone: validationReport.issues.length > 0 ? "amber" : "green" })] })) : null, data.coverage || validationReport ? (_jsxs(JsonDetailsCard, { title: "Coverage", children: [_jsx(ProjectDetailRow, { label: "Pages", value: coverageValue(validationReport?.summary.modeled.pages ?? data.pages.length, validationReport?.summary.detected?.pages ?? data.coverage?.detected?.pages) }), _jsx(ProjectDetailRow, { label: "Requests", value: coverageValue(validationReport?.summary.modeled.requests ?? data.requests.length, data.coverage?.detected?.requests ?? data.coverage?.detected?.backendEndpoints) }), _jsx(ProjectDetailRow, { label: "Flows", value: coverageValue(validationReport?.summary.modeled.flows ?? data.flows.length, validationReport?.summary.detected?.flows ?? data.coverage?.detected?.flows) })] })) : null, _jsxs(JsonDetailsCard, { title: "Project", children: [_jsx(ProjectDetailRow, { label: "Name", value: data.project.name }), _jsx(ProjectDetailRow, { label: "ID", value: data.project.id }), _jsx(ProjectDetailRow, { label: "Root", value: data.project.root ?? "not provided" })] }), _jsx(JsonDetailsCard, { title: "Counts", children: _jsx("div", { className: "project-json-counts", children: inventory.map((item) => (_jsx(JsonInventoryItem, { item: item }, item.id))) }) })] })] }));
 }
 function JsonInventoryItem({ item }) {
     const Icon = item.icon;
     return (_jsxs("a", { className: "project-json-count-item", href: `#json-${item.id}`, children: [_jsx(Icon, { size: 16 }), _jsx("span", { children: item.label }), _jsx("strong", { children: item.value })] }));
 }
-function projectJsonFiles(data, model, rawJson) {
+function projectJsonFiles(data, model, rawJson, validationReport) {
     const files = [
         {
             id: "project",
@@ -664,6 +1283,22 @@ function projectJsonFiles(data, model, rawJson) {
             content: projectJsonString(data.features),
             icon: FileText
         },
+        {
+            id: "overview",
+            name: ".anlyx/project/overview.json",
+            description: "Human project summary",
+            countLabel: data.overview.summary ? "authored" : "empty",
+            content: projectJsonString(data.overview),
+            icon: BookOpen
+        },
+        {
+            id: "capabilities",
+            name: ".anlyx/project/capabilities.json",
+            description: "Readable product capabilities",
+            countLabel: String(data.capabilities.length),
+            content: projectJsonString(data.capabilities),
+            icon: Workflow
+        },
         {
             id: "requests",
             name: ".anlyx/project/requests.json",
@@ -696,6 +1331,30 @@ function projectJsonFiles(data, model, rawJson) {
             content: projectJsonString(data.evidence),
             icon: ShieldCheck
         },
+        {
+            id: "data-lifecycles",
+            name: ".anlyx/project/data-lifecycles.json",
+            description: "Core data lifecycle maps",
+            countLabel: String(data.dataLifecycles.length),
+            content: projectJsonString(data.dataLifecycles),
+            icon: Database
+        },
+        {
+            id: "impact-maps",
+            name: ".anlyx/project/impact-maps.json",
+            description: "Product impact maps",
+            countLabel: String(data.impactMaps.length),
+            content: projectJsonString(data.impactMaps),
+            icon: Network
+        },
+        {
+            id: "coverage",
+            name: ".anlyx/project/coverage.json",
+            description: "Detected and modeled coverage",
+            countLabel: data.coverage?.status ?? "unknown",
+            content: projectJsonString(data.coverage ?? { status: "unknown" }),
+            icon: Gauge
+        },
         {
             id: "dictionary",
             name: ".anlyx/project/dictionary.json",
@@ -715,8 +1374,33 @@ function projectJsonFiles(data, model, rawJson) {
             icon: Clock3
         });
     }
+    if (validationReport) {
+        files.push({
+            id: "validation-report",
+            name: ".anlyx/validation-report.json",
+            description: "Source and coverage validation",
+            countLabel: `${validationReport.issues.length} issues`,
+            content: projectJsonString(validationReport),
+            icon: ShieldCheck
+        });
+    }
     return files;
 }
+function coverageValue(modeled, detected) {
+    return detected === undefined ? String(modeled) : `${modeled} / ${detected}`;
+}
+function formatSourceIssueDetails(breakdown) {
+    if (!breakdown) {
+        return "";
+    }
+    const lineIssues = breakdown.placeholderLines + breakdown.outOfRangeLines;
+    const parts = [
+        breakdown.missingFiles > 0 ? `${breakdown.missingFiles} missing file` : "",
+        breakdown.missingSymbols > 0 ? `${breakdown.missingSymbols} symbol` : "",
+        lineIssues > 0 ? `${lineIssues} line` : ""
+    ].filter(Boolean);
+    return parts.join(" / ");
+}
 function projectJsonInventoryItems(data, model) {
     return [
         { id: "schemaVersion", label: "schemaVersion", value: data.schemaVersion, icon: Braces },
@@ -724,6 +1408,18 @@ function projectJsonInventoryItems(data, model) {
         { id: "areas", label: "areas", value: String(model.totals.areas), icon: BriefcaseBusiness },
         { id: "pages", label: "pages", value: String(model.totals.pages), icon: BookOpen },
         { id: "features", label: "features", value: String(model.totals.features), icon: FileText },
+        {
+            id: "overview",
+            label: "overview",
+            value: data.overview.summary ? "authored" : "empty",
+            icon: BookOpen
+        },
+        {
+            id: "capabilities",
+            label: "capabilities",
+            value: String(data.capabilities.length),
+            icon: Workflow
+        },
         { id: "requests", label: "requests", value: String(model.totals.requests), icon: Network },
         { id: "flows", label: "flows", value: String(model.totals.flows), icon: Workflow },
         {
@@ -733,6 +1429,18 @@ function projectJsonInventoryItems(data, model) {
             icon: Layers3
         },
         { id: "evidence", label: "evidence", value: String(model.totals.evidence), icon: ShieldCheck },
+        {
+            id: "dataLifecycles",
+            label: "dataLifecycles",
+            value: String(data.dataLifecycles.length),
+            icon: Database
+        },
+        {
+            id: "impactMaps",
+            label: "impactMaps",
+            value: String(data.impactMaps.length),
+            icon: Network
+        },
         {
             id: "measurements",
             label: "measurements",
@@ -754,12 +1462,27 @@ 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 })] }));
+    return (_jsxs("div", { className: "project-detail-row", children: [_jsx("dt", { children: label }), _jsx("dd", { className: tone ? `is-${tone}` : "", children: value })] }));
 }
-function ProjectStatusBar({ locale, model }) {
+function ProjectStatusBar({ data, locale, model, validationReport }) {
     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")] })] })] }));
+    const pageCoverage = projectPageCoverageSummary(data, validationReport);
+    const coverageStatus = validationReport?.summary.coverageStatus ?? data.coverage?.status;
+    const sourceIssueCount = validationReport?.summary.sourceIssueCount ?? 0;
+    const hasTrustWarning = coverageStatus === "partial" || sourceIssueCount > 0;
+    return (_jsxs("div", { className: "project-statusbar", "aria-label": "Project source status", children: [_jsxs("div", { className: "project-statusbar__provenance", children: [_jsxs("span", { children: [_jsx(Code2, { size: 15 }), tp(locale, "source"), ": ", _jsx("strong", { children: sourceFile })] }), _jsxs("span", { children: [_jsx(Zap, { size: 15 }), tp(locale, "agent"), ": ", _jsx("strong", { children: generatedBy })] })] }), _jsxs("div", { className: "project-statusbar__summary", children: [_jsx("strong", { children: pageCoverage.label }), coverageStatus ? (_jsxs("span", { className: `project-status ${hasTrustWarning ? "project-status--amber" : "project-status--green"}`, children: [_jsx(ShieldCheck, { size: 15 }), coverageStatus === "partial" ? "Partial analysis" : "Coverage checked"] })) : null, _jsxs("span", { children: [_jsx(Clock3, { size: 15 }), tp(locale, "lastAnalysis"), ": ", formatDateTime(model.project.analyzedAt)] }), _jsxs("span", { className: "project-status project-status--green", children: [_jsx(Check, { size: 15 }), tp(locale, "upToDate")] })] })] }));
+}
+function projectPageCoverageSummary(data, validationReport) {
+    const modeled = validationReport?.summary.modeled.pages ?? data.coverage?.modeled?.pages ?? data.pages.length;
+    const detected = validationReport?.summary.detected?.pages ?? data.coverage?.detected?.pages;
+    const value = coverageValue(modeled, detected);
+    return {
+        detected,
+        label: detected !== undefined ? `${value} pages modeled` : `${modeled} pages analyzed`,
+        modeled,
+        value
+    };
 }
 function evidenceStatusLabel(status) {
     if (status === "source-matched")