feat(webui): govern actions, quick access, and metrics

Refs #264, #285, #289

webui/conformance/ConformanceApp.tsx

@@ -1,6 +1,7 @@
 import { useMemo, useState } from "react";
 import { FileText, GitBranch, Inbox, Search, ShieldCheck } from "lucide-react";
 import { useLocation } from "react-router";
+import QuickAccessRail from "../../../govoplan-quick-access/webui/src/components/QuickAccessRail";
 import ActionToolbar from "../src/components/ActionToolbar";
 import Button from "../src/components/Button";
 import Card from "../src/components/Card";
@@ -23,17 +24,20 @@ import SelectionList, { SelectionListItem, SelectionListItemContent } from "../s
 import StatePanel from "../src/components/StatePanel";
 import WorkspaceFrame from "../src/components/WorkspaceFrame";
 import WorkspaceLayout from "../src/components/WorkspaceLayout";
+import WorkspaceActionBar from "../src/components/WorkspaceActionBar";
 import BreadcrumbBar from "../src/layout/BreadcrumbBar";
 import { useGuardedNavigate } from "../src/components/UnsavedChangesGuard";
 import {
   createQuickAccessLaunchContext,
   quickAccessLaunchState
 } from "../src/platform/launchContext";
-import type { AuthInfo } from "../src/types";
+import type { ApiSettings, AuthInfo, QuickAccessToolMetadata } from "../src/types";
 
 export default function ConformanceApp() {
+  const location = useLocation();
   const [dialogOpen, setDialogOpen] = useState(false);
   const [editorDirty, setEditorDirty] = useState(true);
+  const [metricDrilldown, setMetricDrilldown] = useState("");
 
   return (
     <main className="conformance-root" data-conformance-id="shared-ui-lab">
@@ -49,9 +53,9 @@ export default function ConformanceApp() {
           <PageActionBar
             variant="editor"
             refreshable
-            dirty={editorDirty}
+            state={editorDirty ? "dirty" : "clean"}
             label="Bearbeitungsaktionen"
-            reloadAction={<Button variant="ghost">Neu laden</Button>}
+            reloadAction={{ onReload: () => undefined, label: "Neu laden" }}
             contextActions={<Button>Vorschau öffnen</Button>}
             destructiveActions={<Button variant="danger" disabledReason="Nur die federführende Stelle darf diesen Vorgang endgültig löschen.">Löschen</Button>}
             discardAction={{ label: "Verwerfen", onClick: () => setEditorDirty(false) }}
@@ -73,11 +77,12 @@ export default function ConformanceApp() {
         <section className="conformance-section" aria-labelledby="metrics-heading">
           <h2 id="metrics-heading">Kennzahlen und Eigenschaften</h2>
           <MetricGrid columns={4} collapseAt="standard">
-            <MetricCard label="Offene Aufgaben" value="18" detail="3 heute fällig" />
+            <MetricCard label="Offene Aufgaben" value="18" detail="3 heute fällig" drilldown={{ label: "Offene Aufgaben prüfen", onActivate: () => setMetricDrilldown("18 offene Aufgaben") }} />
             <MetricCard label="Fristgerecht" value="94 %" tone="good" detail="Letzte 30 Tage" />
             <MetricCard label="Klärung erforderlich" value="4" tone="warning" density="compact" />
             <MetricCard label="Fehlgeschlagen" value="1" tone="danger" surface="subtle" />
           </MetricGrid>
+          <p data-testid="metric-drilldown-result" role="status">{metricDrilldown}</p>
           <ContentSection density="default" surface="subtle">
             <h3>Nachvollziehbare Entscheidung</h3>
             <DescriptionList columns={3} collapseAt="standard">
@@ -98,25 +103,31 @@ export default function ConformanceApp() {
               primaryLabel="Vorgänge"
               contentLabel="Ausgewählter Vorgang"
               primary={
-                <SelectionList label="Vorgänge" variant="navigation">
-                  <SelectionListItem selected>
-                    <SelectionListItemContent leading={<FileText size={18} />} title="Anwohnerparkausweis" description="A-2026-004218 · Prüfung läuft" />
-                  </SelectionListItem>
-                  <SelectionListItem selected={false}>
-                    <SelectionListItemContent leading={<FileText size={18} />} title="Sondernutzung öffentlicher Fläche" description="A-2026-004219 · Rückfrage offen" />
-                  </SelectionListItem>
-                </SelectionList>
+                <>
+                  <WorkspaceActionBar scope="collection-pane" variant="collection" refreshable reloadAction={{ onReload: () => undefined, label: "Vorgänge neu laden" }} contextActions={<strong>Vorgänge</strong>} createAction={<Button variant="primary">Neu</Button>} />
+                  <SelectionList label="Vorgänge" variant="navigation">
+                    <SelectionListItem selected>
+                      <SelectionListItemContent leading={<FileText size={18} />} title="Anwohnerparkausweis" description="A-2026-004218 · Prüfung läuft" />
+                    </SelectionListItem>
+                    <SelectionListItem selected={false}>
+                      <SelectionListItemContent leading={<FileText size={18} />} title="Sondernutzung öffentlicher Fläche" description="A-2026-004219 · Rückfrage offen" />
+                    </SelectionListItem>
+                  </SelectionList>
+                </>
               }
             >
-              <Card title="Anwohnerparkausweis" actions={<Button variant="primary">Bearbeiten</Button>}>
-                <p>Die Identität wurde geprüft. Ein aktueller Wohnsitznachweis muss noch bestätigt werden.</p>
-                <FormSection title="Nächster Arbeitsschritt" description="Die Entscheidung bleibt nachvollziehbar und kann vor Abschluss korrigiert werden." variant="panel">
-                  <FormGrid columns={2}>
-                    <label>Zuständigkeit<input defaultValue="Bürgerdienste Mitte" /></label>
-                    <label>Bearbeitungsfrist<input type="date" defaultValue="2026-08-28" /></label>
-                  </FormGrid>
-                </FormSection>
-              </Card>
+              <>
+                <WorkspaceActionBar scope="detail-pane" variant="detail" contextActions={<strong>Anwohnerparkausweis</strong>} primaryActions={<Button variant="primary">Bearbeiten</Button>} destructiveActions={<Button variant="danger">Schließen</Button>} />
+                <Card title="Anwohnerparkausweis">
+                  <p>Die Identität wurde geprüft. Ein aktueller Wohnsitznachweis muss noch bestätigt werden.</p>
+                  <FormSection title="Nächster Arbeitsschritt" description="Die Entscheidung bleibt nachvollziehbar und kann vor Abschluss korrigiert werden." variant="panel">
+                    <FormGrid columns={2}>
+                      <label>Zuständigkeit<input defaultValue="Bürgerdienste Mitte" /></label>
+                      <label>Bearbeitungsfrist<input type="date" defaultValue="2026-08-28" /></label>
+                    </FormGrid>
+                  </FormSection>
+                </Card>
+              </>
             </WorkspaceLayout>
           </WorkspaceFrame>
         </section>
@@ -154,10 +165,36 @@ export default function ConformanceApp() {
           </DialogSection>
         </DialogForm>
       </Dialog>
+      {new URLSearchParams(location.search).has("quick-access") ? <QuickAccessScenario /> : null}
     </main>
   );
 }
 
+function QuickAccessScenario() {
+  const location = useLocation();
+  const launchContext = useMemo(() => createQuickAccessLaunchContext({
+    pathname: location.pathname,
+    search: location.search,
+    hash: location.hash,
+    historyIndex: browserHistoryIndex(),
+    auth: CONFORMANCE_AUTH,
+    activeObject: {
+      ownerModule: "cases",
+      kind: "case",
+      objectId: "case-1",
+      tenantId: "tenant-1",
+      label: "RPP-2026-0001 · Anwohnerparkausweis"
+    },
+    temporalContext: { validityMode: "current", validAt: null, recordedAt: null }
+  }), [location.hash, location.pathname, location.search]);
+  return <QuickAccessRail
+    settings={CONFORMANCE_SETTINGS}
+    auth={CONFORMANCE_AUTH}
+    tools={CONFORMANCE_QUICK_ACCESS_TOOLS}
+    launchContext={launchContext}
+  />;
+}
+
 function LaunchContextScenario() {
   const location = useLocation();
   const navigate = useGuardedNavigate();
@@ -210,6 +247,33 @@ const CONFORMANCE_AUTH = {
   groups_loaded: true
 } satisfies AuthInfo;
 
+const CONFORMANCE_SETTINGS: ApiSettings = {
+  apiBaseUrl: "",
+  apiKey: "",
+  accessToken: ""
+};
+
+const CONFORMANCE_QUICK_ACCESS_TOOLS: QuickAccessToolMetadata[] = [{
+  contractVersion: "1",
+  id: "files.recent",
+  moduleId: "files",
+  categoryId: "files",
+  label: "Recent files",
+  description: "Select an authorized file without leaving this case.",
+  iconName: "files",
+  surfaceId: "files.route.files",
+  fullPagePath: "/files",
+  allOf: [],
+  anyOf: [],
+  order: 10,
+  defaultEnabled: true,
+  modes: ["select"],
+  availability: "global",
+  acceptedReferenceKinds: [],
+  returnedReferenceKinds: ["files.file-version"],
+  helpContextId: "files.quick_access.files"
+}];
+
 function browserHistoryIndex(): number | null {
   const value = (window.history.state as { idx?: unknown } | null)?.idx;
   return typeof value === "number" && Number.isInteger(value) ? value : null;