@cosmicdrift/kumiko-renderer-web 0.31.1 → 0.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.31.1",
+  "version": "0.32.0",
   "description": "Web-platform bindings for @cosmicdrift/kumiko-renderer. HTML default-primitives, browser history-based navigation, EventSource-backed live events, and a one-call createKumikoApp that mounts the whole stack via react-dom.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",

package/src/__tests__/config-cascade.test.tsx

@@ -0,0 +1,157 @@
+// ConfigCascadeView — Regression zu den Prod-UX-Bugs 2026-06-07
+// (publicstatus Bugs 7+8): (7) Source-Badges zeigten ROHE i18n-Keys
+// ("config.source.default"), weil kein Bundle die Keys kannte; (8) ein
+// Tenant-Admin sah ALLE Cascade-Ebenen (System/App-Override/Computed)
+// obwohl er nur die Tenant-Ebene beeinflussen kann. Jetzt: Keys leben
+// als kumiko.config.* in kumikoDefaultTranslations, und Nicht-System-
+// Screens kollabieren alles oberhalb des Screen-Scopes zu EINER
+// neutralen "Preset"-Zeile.
+
+import { describe, expect, test } from "bun:test";
+import type { ConfigCascade, ConfigCascadeLevel } from "@cosmicdrift/kumiko-framework/engine";
+import userEvent from "@testing-library/user-event";
+import { ConfigCascadeView } from "../components/config-cascade";
+import { render, screen } from "./test-utils";
+
+function level(overrides: Partial<ConfigCascadeLevel> & { source: ConfigCascadeLevel["source"] }) {
+  return {
+    label: overrides.source,
+    value: undefined,
+    isActive: false,
+    hasValue: false,
+    ...overrides,
+  };
+}
+
+// Tenant-Scope-Key wie ihn buildCascade liefert: tenant-row + alle
+// Operator-Ebenen + default.
+function tenantCascade(overrides?: {
+  tenantValue?: string;
+  systemActive?: boolean;
+}): ConfigCascade {
+  const tenantHasValue = overrides?.tenantValue !== undefined;
+  const systemActive = overrides?.systemActive === true;
+  return {
+    value: overrides?.tenantValue ?? (systemActive ? "system-smtp" : "fallback"),
+    source: tenantHasValue ? "tenant-row" : systemActive ? "system-row" : "default",
+    levels: [
+      level({
+        source: "tenant-row",
+        value: overrides?.tenantValue,
+        hasValue: tenantHasValue,
+        isActive: tenantHasValue,
+      }),
+      level({
+        source: "system-row",
+        value: systemActive ? "system-smtp" : undefined,
+        hasValue: systemActive,
+        isActive: !tenantHasValue && systemActive,
+      }),
+      level({ source: "app-override" }),
+      level({ source: "computed" }),
+      level({
+        source: "default",
+        value: "fallback",
+        hasValue: true,
+        isActive: !tenantHasValue && !systemActive,
+      }),
+    ],
+  };
+}
+
+describe("ConfigCascadeView — i18n (Bug 7)", () => {
+  test("Source-Badges zeigen übersetzte Labels, keine rohen Keys", async () => {
+    const user = userEvent.setup();
+    const view = render(
+      <ConfigCascadeView cascade={tenantCascade({ tenantValue: "acme" })} screenScope="tenant" />,
+    );
+    // Collapsed-Header: aktive Ebene = Tenant.
+    expect(view.container.textContent).toContain("Tenant");
+    expect(view.container.textContent).not.toContain("config.source");
+
+    await user.click(screen.getByRole("button"));
+    expect(view.container.textContent).not.toContain("config.source");
+    expect(view.container.textContent).not.toContain("config.cascade");
+    // activeMarker übersetzt.
+    expect(view.container.textContent).toContain("active");
+  });
+});
+
+describe("ConfigCascadeView — Scope-Filter (Bug 8)", () => {
+  test("screenScope=tenant: Operator-Ebenen sind unsichtbar, EIN Preset-Fallback bleibt", async () => {
+    const user = userEvent.setup();
+    const view = render(<ConfigCascadeView cascade={tenantCascade()} screenScope="tenant" />);
+    await user.click(screen.getByRole("button"));
+
+    // Sichtbar: Tenant-Zeile + genau eine neutrale Preset-Zeile.
+    expect(view.container.textContent).toContain("Tenant");
+    expect(view.container.textContent).toContain("Preset");
+    // Unsichtbar: alles was nur der Operator steuert.
+    expect(view.container.textContent).not.toContain("System");
+    expect(view.container.textContent).not.toContain("App override");
+    expect(view.container.textContent).not.toContain("Computed");
+    // Der deklarierte Default erscheint als Preset-Wert, nicht als
+    // eigene "Default"-Ebene.
+    expect(view.container.textContent).toContain("fallback");
+    expect(view.container.textContent).not.toContain("Default");
+  });
+
+  test("screenScope=tenant mit aktivem System-Wert: Preset zeigt den effektiven Wert, nicht die Quelle", async () => {
+    const user = userEvent.setup();
+    const view = render(
+      <ConfigCascadeView cascade={tenantCascade({ systemActive: true })} screenScope="tenant" />,
+    );
+    // Collapsed-Header leakt die Operator-Quelle nicht …
+    expect(view.container.textContent).toContain("Preset");
+    expect(view.container.textContent).toContain("system-smtp");
+    expect(view.container.textContent).not.toContain("System");
+
+    // … und expanded genauso: effektiver Wert sichtbar, Quelle neutral.
+    await user.click(screen.getAllByRole("button")[0] as HTMLElement);
+    expect(view.container.textContent).toContain("system-smtp");
+    expect(view.container.textContent).not.toContain("System");
+  });
+
+  test("screenScope=system: Operator sieht weiterhin die volle Cascade", async () => {
+    const user = userEvent.setup();
+    const view = render(
+      <ConfigCascadeView cascade={tenantCascade({ systemActive: true })} screenScope="system" />,
+    );
+    await user.click(screen.getByRole("button"));
+    expect(view.container.textContent).toContain("System");
+    expect(view.container.textContent).toContain("App override");
+    expect(view.container.textContent).toContain("Computed");
+    expect(view.container.textContent).toContain("Default");
+  });
+
+  test("Reset-Button erscheint nur bei eigener Überschreibung und nennt den Scope übersetzt", async () => {
+    const user = userEvent.setup();
+    const resets: { key: string; scope: string }[] = [];
+    render(
+      <ConfigCascadeView
+        cascade={tenantCascade({ tenantValue: "acme" })}
+        screenScope="tenant"
+        qualifiedKey="branding.title"
+        onReset={(key, scope) => resets.push({ key, scope })}
+      />,
+    );
+    await user.click(screen.getByRole("button"));
+    const reset = screen.getByText("Reset override (Tenant)");
+    await user.click(reset);
+    expect(resets).toEqual([{ key: "branding.title", scope: "tenant" }]);
+  });
+
+  test("ohne eigene Überschreibung: kein Reset-Button", async () => {
+    const user = userEvent.setup();
+    const view = render(
+      <ConfigCascadeView
+        cascade={tenantCascade()}
+        screenScope="tenant"
+        qualifiedKey="branding.title"
+        onReset={() => undefined}
+      />,
+    );
+    await user.click(screen.getByRole("button"));
+    expect(view.queryByText("Reset override (Tenant)")).toBeNull();
+  });
+});

package/src/__tests__/kumiko-screen.test.tsx

@@ -348,18 +348,95 @@ describe("KumikoScreen", () => {
     });
   });
 
+  // Regression zum Prod-Bug 2026-06-07 (Bug 4): dispatcher.write wirft
+  // nicht — ein Failure-Result wurde verworfen, der Confirm-Dialog
+  // schloss kommentarlos und der User sah "nichts passiert". Jetzt:
+  // Dialog schließt UND ein destructive-Toast zeigt den Fehlertext.
+  test("entityList rowActions writeHandler: fehlgeschlagener Write → Fehler-Toast statt stillem Dialog-Close", async () => {
+    const dispatcher = makeDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: {
+          rows: [{ id: "r1", title: "Alpha", count: 1, done: false }],
+          nextCursor: null,
+        },
+      })) as unknown as Dispatcher["query"],
+      write: (async () => ({
+        isSuccess: false,
+        error: {
+          code: "conflict",
+          httpStatus: 409,
+          // Key absichtlich in keinem Bundle — dispatcherErrorText muss
+          // auf error.message zurückfallen.
+          i18nKey: "tasks.errors.delete-conflict",
+          message: "Version conflict for entity r1",
+        },
+      })) as unknown as Dispatcher["write"],
+    });
+
+    const screenWithDelete: EntityListScreenDefinition = {
+      id: "task-list",
+      type: "entityList",
+      entity: "task",
+      columns: ["title"],
+      rowActions: [
+        {
+          id: "delete",
+          label: "actions.delete",
+          handler: "tasks:write:task:delete",
+          confirm: "actions.delete-confirm",
+          style: "danger",
+        },
+      ],
+    };
+
+    const { ToastProvider } = await import("../primitives/toast");
+    const user = userEvent.setup();
+    render(
+      <ToastProvider>
+        <DispatcherProvider dispatcher={dispatcher}>
+          <KumikoScreen
+            schema={{ ...schema, screens: [screenWithDelete] }}
+            qn="tasks:screen:task-list"
+          />
+        </DispatcherProvider>
+      </ToastProvider>,
+    );
+    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
+
+    // danger erzwingt den Confirm-Dialog.
+    await user.click(screen.getByTestId("row-r1-action-delete"));
+    expect(await screen.findByTestId("row-r1-action-delete-dialog")).toBeTruthy();
+
+    await user.click(screen.getByTestId("row-r1-action-delete-dialog-confirm"));
+
+    // Dialog schließt — aber NICHT kommentarlos: der Fehlertext ist da.
+    await waitFor(() => expect(screen.queryByTestId("row-r1-action-delete-dialog")).toBeNull());
+    expect(await screen.findByText("Version conflict for entity r1")).toBeTruthy();
+  });
+
   // Tier 2.7e-1: rowAction kind="navigate" — Click ruft nav.navigate
   // mit screen-id, ggf. mit URL-Search-Params aus params(row).
-  test("entityList rowActions kind=navigate: Click → nav.navigate + setSearchParams", async () => {
+  // Reihenfolge ist Teil des Contracts: navigate ZUERST, dann
+  // setSearchParams — pushState trägt keine Query, vorher gesetzte
+  // Params kleben sonst an der alten URL (actionForm-Prefill leer).
+  test("entityList rowActions kind=navigate: Click → nav.navigate, DANN setSearchParams", async () => {
+    const calls: { kind: "navigate" | "setSearchParams"; value: unknown }[] = [];
     const navigateCalls: { screenId: string }[] = [];
     const searchParamUpdates: Record<string, string | null>[] = [];
     const memoryNav = {
       route: { screenId: "task-list" },
-      navigate: (target: { screenId: string }) => navigateCalls.push(target),
+      navigate: (target: { screenId: string }) => {
+        calls.push({ kind: "navigate", value: target });
+        navigateCalls.push(target);
+      },
       replace: () => undefined,
       hrefFor: (t: { screenId: string }) => `/${t.screenId}`,
       searchParams: {},
-      setSearchParams: (u: Record<string, string | null>) => searchParamUpdates.push(u),
+      setSearchParams: (u: Record<string, string | null>) => {
+        calls.push({ kind: "setSearchParams", value: u });
+        searchParamUpdates.push(u);
+      },
     };
     const dispatcher = makeDispatcher({
       query: (async () => ({
@@ -406,6 +483,68 @@ describe("KumikoScreen", () => {
     expect(navigateCalls[0]).toEqual({ screenId: "task-edit" });
     // params werden zu Strings serialisiert (URL-Layer kennt nur Strings).
     expect(searchParamUpdates).toEqual([{ taskId: "r1", priority: "5" }]);
+    // Reihenfolge-Pin: erst navigate, dann setSearchParams.
+    expect(calls.map((c) => c.kind)).toEqual(["navigate", "setSearchParams"]);
+  });
+
+  // entityId-Variante: entityEdit-Targets brauchen die Id als PFAD-
+  // Segment (route.entityId), nicht als Search-Param — sonst öffnet
+  // der Edit-Screen im Create-Mode (Prod-Bug 2026-06-07, Bug 3).
+  test("entityList rowActions kind=navigate mit entityId: Id landet im NavTarget, nicht in den Search-Params", async () => {
+    const navigateCalls: { screenId: string; entityId?: string }[] = [];
+    const searchParamUpdates: Record<string, string | null>[] = [];
+    const memoryNav = {
+      route: { screenId: "task-list" },
+      navigate: (target: { screenId: string; entityId?: string }) => navigateCalls.push(target),
+      replace: () => undefined,
+      hrefFor: (t: { screenId: string }) => `/${t.screenId}`,
+      searchParams: {},
+      setSearchParams: (u: Record<string, string | null>) => searchParamUpdates.push(u),
+    };
+    const dispatcher = makeDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: {
+          rows: [{ id: "r1", title: "Alpha", count: 1, done: false }],
+          nextCursor: null,
+        },
+      })) as unknown as Dispatcher["query"],
+    });
+
+    const screenWithEdit: EntityListScreenDefinition = {
+      id: "task-list",
+      type: "entityList",
+      entity: "task",
+      columns: ["title"],
+      rowActions: [
+        {
+          kind: "navigate",
+          id: "edit",
+          label: "actions.edit",
+          screen: "task-edit",
+          entityId: (row) => String(row["id"] ?? ""),
+        },
+      ],
+    };
+
+    const { NavProvider } = await import("@cosmicdrift/kumiko-renderer");
+    const user = userEvent.setup();
+    render(
+      <NavProvider value={memoryNav}>
+        <DispatcherProvider dispatcher={dispatcher}>
+          <KumikoScreen
+            schema={{ ...schema, screens: [screenWithEdit] }}
+            qn="tasks:screen:task-list"
+          />
+        </DispatcherProvider>
+      </NavProvider>,
+    );
+    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
+
+    await user.click(screen.getByTestId("row-r1-action-edit"));
+    await waitFor(() => expect(navigateCalls.length).toBe(1));
+    expect(navigateCalls[0]).toEqual({ screenId: "task-edit", entityId: "r1" });
+    expect(searchParamUpdates).toEqual([]);
   });
 
   test("entityList rowActions kind=navigate ohne params: setSearchParams wird NICHT gerufen", async () => {
@@ -746,6 +885,85 @@ describe("KumikoScreen", () => {
     expect(navigateCalls[0]).toEqual({ screenId: "task-list" });
   });
 
+  // cancelTarget (Bug-Bash 2026-06-07, Bug 9): redirect erzeugte
+  // automatisch einen Abbrechen-Button mit demselben Ziel wie der
+  // Submit-Redirect — auf Single-Action-Screens ("Test-Mail senden")
+  // semantisch leer. `cancelTarget: false` schaltet ihn ab,
+  // `cancelTarget: "<screen>"` entkoppelt ihn vom redirect.
+  test("actionForm mit redirect: Abbrechen-Button existiert (historisches Default-Verhalten)", () => {
+    const actionScreen: ActionFormScreenDefinition = {
+      id: "quick-add",
+      type: "actionForm",
+      handler: "tasks:write:task:quick-add",
+      fields: { title: { type: "text", required: true } },
+      layout: { sections: [{ title: "x", fields: ["title"] }] },
+      redirect: "task-list",
+    };
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <KumikoScreen
+          schema={{ ...schema, screens: [actionScreen, listScreen] }}
+          qn="tasks:screen:quick-add"
+        />
+      </DispatcherProvider>,
+    );
+    expect(screen.getByTestId("render-edit-cancel")).toBeTruthy();
+  });
+
+  test("actionForm mit cancelTarget=false: KEIN Abbrechen-Button trotz redirect", () => {
+    const actionScreen: ActionFormScreenDefinition = {
+      id: "quick-add",
+      type: "actionForm",
+      handler: "tasks:write:task:quick-add",
+      fields: { title: { type: "text", required: true } },
+      layout: { sections: [{ title: "x", fields: ["title"] }] },
+      redirect: "task-list",
+      cancelTarget: false,
+    };
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <KumikoScreen
+          schema={{ ...schema, screens: [actionScreen, listScreen] }}
+          qn="tasks:screen:quick-add"
+        />
+      </DispatcherProvider>,
+    );
+    expect(screen.queryByTestId("render-edit-cancel")).toBeNull();
+  });
+
+  test("actionForm mit cancelTarget-Screen: Abbrechen navigiert dorthin, auch ohne redirect", async () => {
+    const navigateCalls: { screenId: string }[] = [];
+    const memoryNav = {
+      route: { screenId: "quick-add" },
+      navigate: (target: { screenId: string }) => navigateCalls.push(target),
+      replace: () => undefined,
+      hrefFor: (t: { screenId: string }) => `/${t.screenId}`,
+      searchParams: {},
+      setSearchParams: () => undefined,
+    };
+    const actionScreen: ActionFormScreenDefinition = {
+      id: "quick-add",
+      type: "actionForm",
+      handler: "tasks:write:task:quick-add",
+      fields: { title: { type: "text", required: true } },
+      layout: { sections: [{ title: "x", fields: ["title"] }] },
+      cancelTarget: "task-list",
+    };
+    const { NavProvider } = await import("@cosmicdrift/kumiko-renderer");
+    render(
+      <NavProvider value={memoryNav}>
+        <DispatcherProvider dispatcher={makeDispatcher()}>
+          <KumikoScreen
+            schema={{ ...schema, screens: [actionScreen, listScreen] }}
+            qn="tasks:screen:quick-add"
+          />
+        </DispatcherProvider>
+      </NavProvider>,
+    );
+    fireEvent.click(screen.getByTestId("render-edit-cancel"));
+    expect(navigateCalls).toEqual([{ screenId: "task-list" }]);
+  });
+
   // Tier 2.7e-2: URL-Search-Params füllen die actionForm initial values.
   // Use-case: rowAction kind=navigate setzt `?taskId=r1`, das actionForm
   // sieht es beim Mount und pre-fillt das title-Feld.

package/src/__tests__/nav-workspace-preserve.test.tsx

@@ -0,0 +1,167 @@
+//
+// useBrowserNavApi({ hasWorkspaces }) — NavTarget-Contract: workspaceId
+// weglassen = aktueller Workspace bleibt. Regression zum Prod-Bug
+// 2026-06-07 (publicstatus Bugs 3/5): navigate({ screenId }) aus einem
+// Workspace heraus erzeugte `/<screenId>`, parsePath las das Screen-
+// Segment als Workspace-Id, WorkspaceShell revertete sofort auf den
+// Default-Screen — Edit-/Toolbar-Aktionen wirkten tot.
+//
+
+import { beforeEach, describe, expect, test } from "bun:test";
+import { NavProvider, useNav } from "@cosmicdrift/kumiko-renderer";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { useBrowserNavApi } from "../app/nav";
+
+function WorkspaceNav({ children }: { readonly children: ReactNode }): ReactNode {
+  const api = useBrowserNavApi({ hasWorkspaces: true });
+  return <NavProvider value={api}>{children}</NavProvider>;
+}
+
+function Probe(): React.ReactElement {
+  const nav = useNav();
+  return (
+    <div>
+      <span data-testid="workspace-id">{nav.route?.workspaceId ?? "(none)"}</span>
+      <span data-testid="screen-id">{nav.route?.screenId ?? "(none)"}</span>
+      <span data-testid="entity-id">{nav.route?.entityId ?? "(none)"}</span>
+      <span data-testid="href-edit">
+        {nav.hrefFor({ screenId: "component-edit", entityId: "c1" })}
+      </span>
+      <button
+        type="button"
+        data-testid="go-edit"
+        onClick={() => nav.navigate({ screenId: "component-edit", entityId: "c1" })}
+      >
+        edit
+      </button>
+      <button
+        type="button"
+        data-testid="go-form"
+        onClick={() => nav.navigate({ screenId: "maintenance-schedule-form" })}
+      >
+        form
+      </button>
+      <button
+        type="button"
+        data-testid="go-other-workspace"
+        onClick={() => nav.navigate({ workspaceId: "visual", screenId: "tree" })}
+      >
+        switch
+      </button>
+      <button
+        type="button"
+        data-testid="replace-form"
+        onClick={() => nav.replace({ screenId: "maintenance-schedule-form" })}
+      >
+        replace
+      </button>
+    </div>
+  );
+}
+
+describe("useBrowserNavApi({ hasWorkspaces: true }) — Workspace-Erhalt ohne explizite workspaceId", () => {
+  beforeEach(() => {
+    window.history.replaceState(null, "", "/admin/component-list");
+  });
+
+  test("navigate({ screenId, entityId }) erbt den aktuellen Workspace → '/admin/component-edit/c1'", () => {
+    render(
+      <WorkspaceNav>
+        <Probe />
+      </WorkspaceNav>,
+    );
+    act(() => {
+      fireEvent.click(screen.getByTestId("go-edit"));
+    });
+    expect(window.location.pathname).toBe("/admin/component-edit/c1");
+    expect(screen.getByTestId("workspace-id").textContent).toBe("admin");
+    expect(screen.getByTestId("screen-id").textContent).toBe("component-edit");
+    expect(screen.getByTestId("entity-id").textContent).toBe("c1");
+  });
+
+  test("navigate({ screenId }) (Toolbar-Fall 'Wartung planen') bleibt im Workspace", () => {
+    render(
+      <WorkspaceNav>
+        <Probe />
+      </WorkspaceNav>,
+    );
+    act(() => {
+      fireEvent.click(screen.getByTestId("go-form"));
+    });
+    expect(window.location.pathname).toBe("/admin/maintenance-schedule-form");
+    expect(screen.getByTestId("screen-id").textContent).toBe("maintenance-schedule-form");
+  });
+
+  test("explizite workspaceId gewinnt weiterhin (WorkspaceSwitcher-Fall)", () => {
+    render(
+      <WorkspaceNav>
+        <Probe />
+      </WorkspaceNav>,
+    );
+    act(() => {
+      fireEvent.click(screen.getByTestId("go-other-workspace"));
+    });
+    expect(window.location.pathname).toBe("/visual/tree");
+    expect(screen.getByTestId("workspace-id").textContent).toBe("visual");
+  });
+
+  test("replace erbt den Workspace symmetrisch zu navigate", () => {
+    render(
+      <WorkspaceNav>
+        <Probe />
+      </WorkspaceNav>,
+    );
+    act(() => {
+      fireEvent.click(screen.getByTestId("replace-form"));
+    });
+    expect(window.location.pathname).toBe("/admin/maintenance-schedule-form");
+  });
+
+  test("hrefFor erbt den Workspace — Anchor-Links zeigen nicht aus dem Workspace raus", () => {
+    render(
+      <WorkspaceNav>
+        <Probe />
+      </WorkspaceNav>,
+    );
+    expect(screen.getByTestId("href-edit").textContent).toBe("/admin/component-edit/c1");
+  });
+
+  test("ohne aktuelle Route (URL an der Root) bleibt das Target unverändert", () => {
+    window.history.replaceState(null, "", "/");
+    render(
+      <WorkspaceNav>
+        <Probe />
+      </WorkspaceNav>,
+    );
+    act(() => {
+      fireEvent.click(screen.getByTestId("go-form"));
+    });
+    // Kein Workspace zum Erben — formatPath bleibt flach; WorkspaceShell
+    // löst die Default-Workspace-Auflösung wie bisher selbst.
+    expect(window.location.pathname).toBe("/maintenance-schedule-form");
+  });
+});
+
+describe("useBrowserNavApi ohne Workspaces — Injection bleibt aus", () => {
+  beforeEach(() => {
+    window.history.replaceState(null, "", "/task-list");
+  });
+
+  function FlatNav({ children }: { readonly children: ReactNode }): ReactNode {
+    const api = useBrowserNavApi({ hasWorkspaces: false });
+    return <NavProvider value={api}>{children}</NavProvider>;
+  }
+
+  test("navigate({ screenId }) bleibt flach: '/maintenance-schedule-form'", () => {
+    render(
+      <FlatNav>
+        <Probe />
+      </FlatNav>,
+    );
+    act(() => {
+      fireEvent.click(screen.getByTestId("go-form"));
+    });
+    expect(window.location.pathname).toBe("/maintenance-schedule-form");
+  });
+});

package/src/__tests__/tokens-theme-persist.test.tsx

@@ -0,0 +1,79 @@
+// Theme-Persistenz (Bug-Bash 2026-06-07, Bug 13): Der Toggle setzte
+// nur die .dark-Class — ohne localStorage-Persist + Restore war die
+// Wahl nach jedem Reload weg, was sich für User als "dark/light geht
+// nicht" anfühlte. Der FOUC-Schutz (Inline-Script in der Host-HTML)
+// ist App-Sache; hier wird die JS-Seite gepinnt.
+
+import { beforeEach, describe, expect, test } from "bun:test";
+import { act, render, screen } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { applyStoredThemeMode, THEME_STORAGE_KEY, useBrowserTokensApi } from "../tokens";
+
+function Probe(): ReactNode {
+  const api = useBrowserTokensApi();
+  return (
+    <div>
+      <span data-testid="mode">{api.mode}</span>
+      <button type="button" data-testid="toggle" onClick={() => api.toggleMode()}>
+        toggle
+      </button>
+      <button type="button" data-testid="set-light" onClick={() => api.setMode("light")}>
+        light
+      </button>
+    </div>
+  );
+}
+
+describe("useBrowserTokensApi — Theme-Persistenz", () => {
+  beforeEach(() => {
+    window.localStorage.removeItem(THEME_STORAGE_KEY);
+    document.documentElement.classList.remove("dark");
+  });
+
+  test("toggleMode persistiert die Wahl in localStorage", () => {
+    render(<Probe />);
+    expect(screen.getByTestId("mode").textContent).toBe("light");
+
+    act(() => {
+      screen.getByTestId("toggle").click();
+    });
+    expect(document.documentElement.classList.contains("dark")).toBe(true);
+    expect(window.localStorage.getItem(THEME_STORAGE_KEY)).toBe("dark");
+
+    act(() => {
+      screen.getByTestId("toggle").click();
+    });
+    expect(window.localStorage.getItem(THEME_STORAGE_KEY)).toBe("light");
+  });
+
+  test("setMode persistiert ebenfalls", () => {
+    render(<Probe />);
+    act(() => {
+      screen.getByTestId("set-light").click();
+    });
+    expect(window.localStorage.getItem(THEME_STORAGE_KEY)).toBe("light");
+    expect(document.documentElement.classList.contains("dark")).toBe(false);
+  });
+
+  test("applyStoredThemeMode restored die gespeicherte Wahl (Reload-Simulation)", () => {
+    // "Reload": Class weg (frisches HTML), aber localStorage hat dark.
+    window.localStorage.setItem(THEME_STORAGE_KEY, "dark");
+    document.documentElement.classList.remove("dark");
+
+    applyStoredThemeMode();
+    expect(document.documentElement.classList.contains("dark")).toBe(true);
+  });
+
+  test("applyStoredThemeMode ohne gespeicherte Wahl lässt den HTML-Default stehen", () => {
+    document.documentElement.classList.add("dark");
+    applyStoredThemeMode();
+    // Kein gespeicherter Wert → nichts anfassen.
+    expect(document.documentElement.classList.contains("dark")).toBe(true);
+  });
+
+  test("applyStoredThemeMode ignoriert kaputte Werte", () => {
+    window.localStorage.setItem(THEME_STORAGE_KEY, "neon");
+    applyStoredThemeMode();
+    expect(document.documentElement.classList.contains("dark")).toBe(false);
+  });
+});

package/src/app/nav.tsx

@@ -185,17 +185,28 @@ export function useBrowserNavApi(options?: {
   const basePath = useMemo(() => normalizeBasePath(options?.basePath), [options?.basePath]);
   const searchParams = useMemo(() => parseSearchParams(search), [search]);
   const inAppPath = useMemo(() => stripBasePath(path, basePath), [path, basePath]);
-  return useMemo<NavApi>(
-    () => ({
-      route: inAppPath === undefined ? undefined : parsePath(inAppPath, hasWorkspaces),
-      navigate: (target) => pushPath(prependBasePath(formatPath(target), basePath)),
-      replace: (target) => replacePath(prependBasePath(formatPath(target), basePath)),
-      hrefFor: (target) => prependBasePath(formatPath(target), basePath),
+  return useMemo<NavApi>(() => {
+    const route = inAppPath === undefined ? undefined : parsePath(inAppPath, hasWorkspaces);
+    // NavTarget-Contract: workspaceId weglassen = aktueller Workspace
+    // bleibt. formatPath kennt die aktuelle Route nicht — ohne Injection
+    // landet `/screen-id` in parsePath(hasWorkspaces) als workspaceId,
+    // WorkspaceShell sieht einen unbekannten Workspace und revertet
+    // sofort auf den Default-Screen ("Klick tut nichts"-Prod-Bug).
+    const inCurrentWorkspace = (target: NavTarget): NavTarget =>
+      hasWorkspaces && target.workspaceId === undefined && route?.workspaceId !== undefined
+        ? { ...target, workspaceId: route.workspaceId }
+        : target;
+    return {
+      route,
+      navigate: (target) =>
+        pushPath(prependBasePath(formatPath(inCurrentWorkspace(target)), basePath)),
+      replace: (target) =>
+        replacePath(prependBasePath(formatPath(inCurrentWorkspace(target)), basePath)),
+      hrefFor: (target) => prependBasePath(formatPath(inCurrentWorkspace(target)), basePath),
       searchParams,
       setSearchParams: applySearchParamUpdates,
-    }),
-    [inAppPath, hasWorkspaces, basePath, searchParams],
-  );
+    };
+  }, [inAppPath, hasWorkspaces, basePath, searchParams]);
 }
 
 // ---- KumikoLink (Anchor-basiert, nur Web) ----

package/src/components/config-cascade.tsx

@@ -9,13 +9,13 @@ import type { ReactNode } from "react";
 import { useState } from "react";
 
 const SOURCE_I18N_KEY: Record<ConfigValueSource, string> = {
-  "user-row": "config.source.user",
-  "tenant-row": "config.source.tenant",
-  "system-row": "config.source.system",
-  "app-override": "config.source.appOverride",
-  computed: "config.source.computed",
-  default: "config.source.default",
-  missing: "config.source.missing",
+  "user-row": "kumiko.config.source.user",
+  "tenant-row": "kumiko.config.source.tenant",
+  "system-row": "kumiko.config.source.system",
+  "app-override": "kumiko.config.source.appOverride",
+  computed: "kumiko.config.source.computed",
+  default: "kumiko.config.source.default",
+  missing: "kumiko.config.source.missing",
 };
 
 const SOURCE_COLORS: Record<ConfigValueSource, string> = {
@@ -28,13 +28,32 @@ const SOURCE_COLORS: Record<ConfigValueSource, string> = {
   missing: "text-red-500 bg-red-50 border-red-200",
 };
 
-function SourceBadge({ source }: { source: ConfigValueSource }): ReactNode {
+// Fallback-Reihenfolge der Cascade, spezifischste Quelle zuerst.
+// Index-Vergleich gegen die Screen-Scope-Quelle entscheidet, welche
+// Ebenen ein Nicht-Operator sehen darf.
+const SOURCE_ORDER: readonly ConfigValueSource[] = [
+  "user-row",
+  "tenant-row",
+  "system-row",
+  "app-override",
+  "computed",
+  "default",
+  "missing",
+];
+
+function SourceBadge({
+  source,
+  labelKey,
+}: {
+  source: ConfigValueSource;
+  labelKey?: string;
+}): ReactNode {
   const t = useTranslation();
   return (
     <span
       className={`inline-flex items-center rounded border px-1.5 py-0.5 text-xs font-medium ${SOURCE_COLORS[source]}`}
     >
-      {t(SOURCE_I18N_KEY[source])}
+      {t(labelKey ?? SOURCE_I18N_KEY[source])}
     </span>
   );
 }
@@ -50,6 +69,47 @@ function scopeToSource(scope: ConfigScope): ConfigValueSource {
   return "system-row";
 }
 
+// Eine Cascade-Zeile in Anzeige-Form: Ebenen oberhalb des Screen-Scopes
+// werden für Nicht-Operator-Screens zu EINER neutralen "Vorgabe"-Zeile
+// kollabiert — der Wert bleibt sichtbar, die Operator-Quelle nicht.
+type DisplayLevel = {
+  readonly level: ConfigCascadeLevel;
+  readonly badgeSource: ConfigValueSource;
+  readonly badgeLabelKey?: string;
+};
+
+function toDisplayLevels(
+  levels: readonly ConfigCascadeLevel[],
+  screenScopeSource: ConfigValueSource,
+): readonly DisplayLevel[] {
+  // System-Screens sind Operator-Sicht — volle Cascade inkl.
+  // app-override/computed/default bleibt sichtbar.
+  if (screenScopeSource === "system-row") {
+    return levels.map((level) => ({ level, badgeSource: level.source }));
+  }
+  const scopeIdx = SOURCE_ORDER.indexOf(screenScopeSource);
+  const own = levels.filter((l) => SOURCE_ORDER.indexOf(l.source) <= scopeIdx);
+  const higher = levels.filter((l) => SOURCE_ORDER.indexOf(l.source) > scopeIdx);
+  // Genau eine Fallback-Zeile: die aktive höhere Ebene (deren Wert der
+  // User effektiv bekommt), sonst der deklarierte Default/Missing.
+  const fallback =
+    higher.find((l) => l.isActive) ??
+    higher.find((l) => l.source === "default" || l.source === "missing");
+  const ownRows: DisplayLevel[] = own.map((level) => ({ level, badgeSource: level.source }));
+  if (fallback === undefined) return ownRows;
+  return [
+    ...ownRows,
+    {
+      level: fallback,
+      badgeSource: "default",
+      // Neutral "Vorgabe" statt System/Override/Computed — der Screen-
+      // Scope kann diese Ebenen weder setzen noch zurücksetzen, die
+      // Quelle ist für ihn Operator-Interna.
+      badgeLabelKey: "kumiko.config.cascade.preset",
+    },
+  ];
+}
+
 type ConfigCascadeViewProps = {
   readonly cascade: ConfigCascade;
   readonly screenScope: ConfigScope;
@@ -71,9 +131,10 @@ export function ConfigCascadeView({
   // the screen.
   if (!Array.isArray(cascade?.levels)) return null;
 
-  const activeLevel = cascade.levels.find((l) => l.isActive);
   const screenScopeSource = scopeToSource(screenScope);
-  const hasOverride = activeLevel?.source === screenScopeSource;
+  const displayLevels = toDisplayLevels(cascade.levels, screenScopeSource);
+  const activeDisplay = displayLevels.find((d) => d.level.isActive);
+  const hasOverride = activeDisplay?.level.source === screenScopeSource;
 
   return (
     <div className="mt-1 text-xs">
@@ -83,22 +144,27 @@ export function ConfigCascadeView({
         className="flex items-center gap-1 text-gray-500 hover:text-gray-700 cursor-pointer"
       >
         <span className="text-[10px]">{expanded ? "▼" : "▶"}</span>
-        {activeLevel ? (
+        {activeDisplay ? (
           <>
-            <SourceBadge source={activeLevel.source} />
+            <SourceBadge
+              source={activeDisplay.badgeSource}
+              {...(activeDisplay.badgeLabelKey !== undefined && {
+                labelKey: activeDisplay.badgeLabelKey,
+              })}
+            />
             <span className="text-gray-400">
-              {formatValue(activeLevel.value, activeLevel.hasValue)}
+              {formatValue(activeDisplay.level.value, activeDisplay.level.hasValue)}
             </span>
           </>
         ) : (
-          <span className="text-gray-400">{t("config.cascade.noValue")}</span>
+          <span className="text-gray-400">{t("kumiko.config.cascade.noValue")}</span>
         )}
       </button>
 
       {expanded ? (
         <div className="mt-1 flex flex-col gap-0.5 pl-3 border-l-2 border-gray-100">
-          {cascade.levels.map((level) => (
-            <CascadeLevelRow key={level.source} level={level} />
+          {displayLevels.map((display) => (
+            <CascadeLevelRow key={display.level.source} display={display} />
           ))}
 
           {hasOverride && onReset && qualifiedKey ? (
@@ -107,7 +173,9 @@ export function ConfigCascadeView({
               onClick={() => onReset(qualifiedKey, screenScope)}
               className="mt-1 self-start text-[10px] text-orange-500 hover:text-orange-700 cursor-pointer underline"
             >
-              {t("config.cascade.resetTo", { scope: t(SOURCE_I18N_KEY[screenScopeSource]) })}
+              {t("kumiko.config.cascade.resetTo", {
+                scope: t(SOURCE_I18N_KEY[screenScopeSource]),
+              })}
             </button>
           ) : null}
         </div>
@@ -116,16 +184,20 @@ export function ConfigCascadeView({
   );
 }
 
-function CascadeLevelRow({ level }: { level: ConfigCascadeLevel }): ReactNode {
+function CascadeLevelRow({ display }: { display: DisplayLevel }): ReactNode {
   const t = useTranslation();
+  const { level } = display;
   return (
     <div
       className={`flex items-center gap-1.5 ${level.isActive ? "font-medium" : "text-gray-400"}`}
     >
-      <SourceBadge source={level.source} />
+      <SourceBadge
+        source={display.badgeSource}
+        {...(display.badgeLabelKey !== undefined && { labelKey: display.badgeLabelKey })}
+      />
       <span>{formatValue(level.value, level.hasValue)}</span>
       {level.isActive ? (
-        <span className="text-[10px] text-gray-400">{t("config.cascade.activeMarker")}</span>
+        <span className="text-[10px] text-gray-400">{t("kumiko.config.cascade.activeMarker")}</span>
       ) : null}
     </div>
   );

package/src/components/config-source-badge.tsx

@@ -1,17 +1,19 @@
 import type { ConfigValueSource } from "@cosmicdrift/kumiko-framework/engine";
+import { useTranslation } from "@cosmicdrift/kumiko-renderer";
 import type { ReactNode } from "react";
 
-const SOURCE_CONFIG: Record<ConfigValueSource, { label: string; bg: string; text: string }> = {
-  "user-row": { label: "User", bg: "#dbeafe", text: "#1e40af" },
-  "tenant-row": { label: "Tenant", bg: "#dcfce7", text: "#166534" },
-  "system-row": { label: "System", bg: "#f3e8ff", text: "#6b21a8" },
-  "app-override": { label: "Override", bg: "#ffedd5", text: "#9a3412" },
-  computed: { label: "Computed", bg: "#ccfbf1", text: "#115e59" },
-  default: { label: "Default", bg: "#f3f4f6", text: "#4b5563" },
-  missing: { label: "Missing", bg: "#fee2e2", text: "#991b1b" },
+const SOURCE_CONFIG: Record<ConfigValueSource, { labelKey: string; bg: string; text: string }> = {
+  "user-row": { labelKey: "kumiko.config.source.user", bg: "#dbeafe", text: "#1e40af" },
+  "tenant-row": { labelKey: "kumiko.config.source.tenant", bg: "#dcfce7", text: "#166534" },
+  "system-row": { labelKey: "kumiko.config.source.system", bg: "#f3e8ff", text: "#6b21a8" },
+  "app-override": { labelKey: "kumiko.config.source.appOverride", bg: "#ffedd5", text: "#9a3412" },
+  computed: { labelKey: "kumiko.config.source.computed", bg: "#ccfbf1", text: "#115e59" },
+  default: { labelKey: "kumiko.config.source.default", bg: "#f3f4f6", text: "#4b5563" },
+  missing: { labelKey: "kumiko.config.source.missing", bg: "#fee2e2", text: "#991b1b" },
 };
 
 export function ConfigSourceBadge({ source }: { readonly source: ConfigValueSource }): ReactNode {
+  const t = useTranslation();
   const cfg = SOURCE_CONFIG[source];
 
   return (
@@ -30,7 +32,7 @@ export function ConfigSourceBadge({ source }: { readonly source: ConfigValueSour
         whiteSpace: "nowrap",
       }}
     >
-      {cfg.label}
+      {t(cfg.labelKey)}
     </span>
   );
 }

package/src/primitives/dialog.tsx

@@ -36,9 +36,12 @@ export function DefaultDialog({
     setLoading(true);
     try {
       await onConfirm();
-      onOpenChange(false);
     } finally {
       setLoading(false);
+      // Auch bei rejected onConfirm schließen — ein offen hängendes Modal
+      // ohne Botschaft wirkt eingefroren; der Fehler selbst wird vom
+      // onConfirm-Pfad surfaced (Row-Actions: Toast).
+      onOpenChange(false);
     }
   }
 

package/src/primitives/index.tsx

@@ -29,6 +29,7 @@ import {
   type TextProps,
   useColumnRenderer,
   useTranslation,
+  WriteFailedError,
 } from "@cosmicdrift/kumiko-renderer";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { cva } from "class-variance-authority";
@@ -53,6 +54,7 @@ import {
   DropdownMenuTrigger,
 } from "./dropdown-menu";
 import { MoneyInput } from "./money-input";
+import { useToast } from "./toast";
 
 // ---- Button ----
 
@@ -599,10 +601,22 @@ function needsConfirm(action: DataTableRowAction): boolean {
 
 function useRowActionTrigger(row: ListRowViewModel) {
   const [busy, setBusy] = useState(false);
+  const { toast } = useToast();
+  const t = useTranslation();
   const triggerNow = async (action: DataTableRowAction): Promise<void> => {
     setBusy(true);
     try {
       await action.onTrigger(row);
+    } catch (e) {
+      // Surfacing statt schlucken: ein verschluckter Write-Fehler sah für
+      // den User wie "nichts passiert" aus (Prod-Bug 2026-06-07).
+      const docsUrl = e instanceof WriteFailedError ? e.dispatcherError.docsUrl : undefined;
+      toast({
+        title: t("kumiko.rowAction.failed"),
+        description: e instanceof Error ? e.message : String(e),
+        variant: "destructive",
+        ...(docsUrl !== undefined && { docsUrl }),
+      });
     } finally {
       setBusy(false);
     }

package/src/tokens.ts

@@ -16,9 +16,20 @@ import { useSyncExternalStore } from "react";
 // reiner Notification-Bus (Tick-Counter), den setMode/toggleMode bei
 // jedem Class-Wechsel hochzählen. So bleibt die DOM-Klasse die einzige
 // Wahrheit — readCurrentMode liest sie frisch bei jedem getSnapshot.
+//
+// Persistenz: die Wahl landet in localStorage (THEME_STORAGE_KEY) und
+// wird beim ersten Hook-Mount restored — ohne das war der Toggle nach
+// jedem Reload weg ("dark/light geht nicht", Prod-Bug 2026-06-07).
+// Gegen FOUC gehört zusätzlich ein synchrones Inline-Script in die
+// Host-HTML, VOR dem Stylesheet-Link:
+//
+//   <script>try{if(localStorage.getItem("kumiko:theme")==="dark")
+//     document.documentElement.classList.add("dark")}catch(e){}</script>
 
 const themeTick = createStore(0);
 
+export const THEME_STORAGE_KEY = "kumiko:theme";
+
 function readCurrentMode(): ThemeMode {
   if (typeof document === "undefined") return "dark";
   return document.documentElement.classList.contains("dark") ? "dark" : "light";
@@ -28,11 +39,46 @@ function notifyThemeChange(): void {
   themeTick.setState((t) => t + 1);
 }
 
+function persistMode(mode: ThemeMode): void {
+  try {
+    window.localStorage.setItem(THEME_STORAGE_KEY, mode);
+  } catch {
+    // skip: localStorage kann werfen (Private-Mode/Quota) — Theme bleibt
+    // dann sessionbasiert, der Class-Toggle hat trotzdem funktioniert.
+  }
+}
+
+/** Liest die persistierte Theme-Wahl und setzt die `.dark`-Class. Wird
+ *  beim ersten useBrowserTokensApi-Mount aufgerufen; das Inline-Script
+ *  in der Host-HTML (siehe Header-Kommentar) macht dasselbe synchron
+ *  vor dem ersten Paint. */
+export function applyStoredThemeMode(): void {
+  if (typeof document === "undefined") return;
+  let stored: string | null = null;
+  try {
+    stored = window.localStorage.getItem(THEME_STORAGE_KEY);
+  } catch {
+    // skip: localStorage kann werfen (Private-Mode) — ohne gespeicherte
+    // Wahl bleibt der Server-/HTML-Default stehen.
+  }
+  if (stored !== "dark" && stored !== "light") return;
+  document.documentElement.classList.toggle("dark", stored === "dark");
+  notifyThemeChange();
+}
+
+let storedModeApplied = false;
+
 /** Hook der eine TokensApi für den Browser baut. Wird von
  *  createKumikoApp genutzt; App-Code der einen eigenen Token-State
  *  braucht (z.B. User-Präferenz aus localStorage) kann selber
  *  `<TokensProvider value={...}>` mounten. */
 export function useBrowserTokensApi(): TokensApi {
+  // Einmal pro Page-Load: gespeicherte Wahl anwenden. Lazy statt
+  // Modul-Side-Effect, damit Import ohne DOM (SSR/Tests) safe bleibt.
+  if (!storedModeApplied && typeof document !== "undefined") {
+    storedModeApplied = true;
+    applyStoredThemeMode();
+  }
   const mode = useSyncExternalStore(themeTick.subscribe, readCurrentMode, () => "dark" as const);
   return {
     tokens: cssVarTokens,
@@ -40,11 +86,13 @@ export function useBrowserTokensApi(): TokensApi {
     setMode: (next) => {
       if (typeof document === "undefined") return;
       document.documentElement.classList.toggle("dark", next === "dark");
+      persistMode(next);
       notifyThemeChange();
     },
     toggleMode: () => {
       if (typeof document === "undefined") return;
-      document.documentElement.classList.toggle("dark");
+      const nowDark = document.documentElement.classList.toggle("dark");
+      persistMode(nowDark ? "dark" : "light");
       notifyThemeChange();
     },
   };