Refine premium workbench UX

2026-07-14 05:10:36 +02:00
parent a18fba8c7a
commit a2d9cef986
15 changed files with 1802 additions and 106 deletions
@@ -0,0 +1,84 @@
+from __future__ import annotations
+
+from pathlib import Path
+
+
+ROOT = Path(__file__).resolve().parents[2]
+
+
+def read(path: str) -> str:
+    return (ROOT / path).read_text(encoding="utf-8")
+
+
+def test_workbench_uses_grouped_navigation_and_optional_inspector() -> None:
+    app = read("frontend/src/App.tsx")
+    inspector = read("frontend/src/components/inspector/WorkbenchInspector.tsx")
+
+    assert "import './styles/premium.css'" in app
+    assert "const workspaceNavGroups" in app
+    assert "['overview', 'data', 'map']" in app
+    assert "['analysis', 'ai']" in app
+    assert "const [inspectorOpen, setInspectorOpen] = useState(false)" in app
+    assert "{inspectorOpen ? (" in app
+    assert 'id="workbench-inspector"' in app
+    assert "onClose={() => setInspectorOpen(false)}" in app
+    assert 'className="inspector-close"' in inspector
+
+
+def test_data_creation_forms_are_progressively_disclosed() -> None:
+    project = read("frontend/src/components/project/ProjectPanel.tsx")
+    area = read("frontend/src/components/project/AreaPanel.tsx")
+    dataset = read("frontend/src/components/datasets/DatasetPanel.tsx")
+    css = read("frontend/src/styles/premium.css")
+
+    assert '<details className="data-panel-form-block">' in project
+    assert '<summary>Create project</summary>' in project
+    assert '<details className="data-panel-form-block">' in area
+    assert '<summary>Create spatial scope</summary>' in area
+    assert '<details className="dataset-upload-block data-panel-form-block">' in dataset
+    assert '<summary>Upload source data</summary>' in dataset
+    assert "details.data-panel-form-block > summary" in css
+    assert ".workspace-grid-data > section:nth-child(n)" in css
+    assert "max-height: calc(100dvh - 10.5rem);" in css
+
+
+def test_map_prioritizes_controls_map_and_collapsed_diagnostics() -> None:
+    map_workspace = read("frontend/src/components/map/MapWorkspace.tsx")
+    css = read("frontend/src/styles/premium.css")
+
+    control_index = map_workspace.index('className="map-control-surface"')
+    map_index = map_workspace.index('className="map-frame-surface"')
+    detail_index = map_workspace.index('className="map-layer-details"')
+    assert control_index < map_index < detail_index
+    assert '<details className="map-layer-details">' in map_workspace
+    assert '<details className="map-advanced-tools">' in map_workspace
+    assert 'className="map-advanced-tools-body"' in map_workspace
+    assert ".map-control-surface {\n  order: 1;" in css
+    assert ".map-frame-surface {\n  order: 2;" in css
+    assert ".map-layer-details {\n  order: 3;" in css
+
+
+def test_ai_workspaces_prioritize_runs_and_collapse_registry_detail() -> None:
+    detection = read("frontend/src/components/detection/DetectionLab.tsx")
+    segmentation = read("frontend/src/components/segmentation/SegmentationLab.tsx")
+    css = read("frontend/src/styles/premium.css")
+
+    assert '<details className="ai-lab-model-surface" aria-label="Detection model capabilities">' in detection
+    assert '<details className="ai-lab-model-surface" aria-label="YOLO runtime preflight">' in detection
+    assert '<details className="ai-lab-model-surface" aria-label="Segmentation model capabilities">' in segmentation
+    assert ".ai-lab-shell > .lab-block {\n  order: 2;" in css
+    assert ".ai-lab-shell > .ai-lab-model-surface {\n  order: 7;" in css
+    assert "details.ai-lab-model-surface > summary" in css
+
+
+def test_mobile_shell_uses_full_width_main_and_horizontal_navigation() -> None:
+    css = read("frontend/src/styles/premium.css")
+
+    assert "@media (max-width: 920px)" in css
+    assert ".app-shell > header.workbench-topbar" in css
+    assert ".workbench-layout {\n    display: block;" in css
+    assert ".workbench-sidebar nav {\n    display: flex;" in css
+    assert ".nav-group {\n    display: contents;" in css
+    assert ".workbench-inspector {\n    top: 0;\n    width: 100vw;" in css
+    assert "grid-auto-flow: column;" in css
+    assert "overflow-x: auto;" in css