8d4d24f0bb
Reworks the UI so the Scan tab shows only core actions and all developer / diagnostic surfaces live in one dedicated view. - New "Diagnose" nav view. ScanView stays mounted for scan|diagnose (the scan controller state persists across the switch) and renders either the clean workspace or the new DiagnosticsView by mode. - DiagnosticsView consolidates runtime/rights, grid detection, learning + data staleness, fingerprint, auto-scan counters, the automation log, the dev-output toggle, the Demo-Daten action, and the raw crops/OCR/confidence dump. Reuses the existing diagnostics/details model hooks. - Scan workspace decluttered: removed the Scanner Diagnose button and the Details button, dropped the rules/grid/mode dev fields from the result brief and capture meta, shortened the topbar headline, and moved Demo-Daten out of the topbar. - Removed the now-dead ScanDiagnosticsModal / ScanDetailsModal components (their content moved into the view); metrics grid hidden on the Diagnose view. - Added dev:web script + .claude/launch.json for browser preview. Verified in the browser preview (both views render, no console errors); 120 tests + build green. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
83 lines
3.0 KiB
TypeScript
83 lines
3.0 KiB
TypeScript
import { Eye, Play, Save } from "lucide-react";
|
|
import { BuildsView } from "../../features/builds/BuildsView";
|
|
import { OverlayPreview, OverlaySettings } from "../../features/overlay/OverlayViews";
|
|
import { ScanView } from "../../features/scan/ScanView";
|
|
import { TriageView } from "../../features/triage/TriageView";
|
|
import { AppMetrics, AppShell, AppSidebar, AppTopbar } from "../../features/layout";
|
|
import type { AppPageLayoutProps } from "./types";
|
|
import { useAppPageLayoutModel } from "./hooks/useAppPageLayoutModel";
|
|
|
|
export function AppPageLayout({ controller }: AppPageLayoutProps) {
|
|
const {
|
|
activeView,
|
|
setActiveView,
|
|
isOverlay,
|
|
isScanning,
|
|
snapshot,
|
|
captureSources,
|
|
selectedSourceId,
|
|
setSelectedSourceId,
|
|
latestCapture,
|
|
topbarStatus,
|
|
bridgeReady,
|
|
canExportGood,
|
|
canShowOverlay,
|
|
metricCards,
|
|
refreshCaptureSources,
|
|
captureSelectedSource,
|
|
exportCurrentGood,
|
|
loadStoredArtifactSnapshot,
|
|
showOverlay,
|
|
} = controller;
|
|
const { renderNavigation, handleDemoScan } = useAppPageLayoutModel({ controller });
|
|
|
|
if (isOverlay) {
|
|
return <OverlayPreview snapshot={snapshot} />;
|
|
}
|
|
|
|
return (
|
|
<AppShell
|
|
sidebar={<AppSidebar activeView={activeView} items={renderNavigation} onSelect={setActiveView} />}
|
|
children={
|
|
<>
|
|
<AppTopbar
|
|
topbarStatus={topbarStatus}
|
|
canExportGood={canExportGood}
|
|
canShowOverlay={canShowOverlay}
|
|
isScanning={isScanning}
|
|
artifactCount={snapshot.artifacts.length}
|
|
onExportGood={exportCurrentGood}
|
|
onShowOverlay={showOverlay}
|
|
onDemoScan={handleDemoScan}
|
|
exportIcon={<Save size={16} />}
|
|
overlayIcon={<Eye size={16} />}
|
|
demoIcon={<Play size={16} />}
|
|
/>
|
|
{activeView !== "diagnose" && <AppMetrics metricCards={metricCards} />}
|
|
{(activeView === "scan" || activeView === "diagnose") && (
|
|
<ScanView
|
|
mode={activeView === "diagnose" ? "diagnose" : "workspace"}
|
|
onDemoScan={handleDemoScan}
|
|
canDemoScan={!isScanning}
|
|
isScanning={isScanning}
|
|
snapshot={snapshot}
|
|
captureSources={captureSources}
|
|
selectedSourceId={selectedSourceId}
|
|
setSelectedSourceId={setSelectedSourceId}
|
|
latestCapture={latestCapture}
|
|
captureStatus={topbarStatus}
|
|
refreshCaptureSources={refreshCaptureSources}
|
|
captureSelectedSource={captureSelectedSource}
|
|
bridgeReady={bridgeReady}
|
|
onStoredArtifactsChanged={loadStoredArtifactSnapshot}
|
|
/>
|
|
)}
|
|
{activeView === "triage" && <TriageView snapshot={snapshot} />}
|
|
{activeView === "builds" && <BuildsView snapshot={snapshot} />}
|
|
{activeView === "overlay" && <OverlaySettings canShowOverlay={canShowOverlay} onShowOverlay={showOverlay} />}
|
|
</>
|
|
}
|
|
/>
|
|
);
|
|
}
|