@cosmicdrift/kumiko-renderer-web 0.224.2 → 0.226.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.224.2",
+  "version": "0.226.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>",
@@ -16,9 +16,9 @@
     "./styles.css": "./src/styles.css"
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.224.2",
-    "@cosmicdrift/kumiko-headless": "0.224.2",
-    "@cosmicdrift/kumiko-renderer": "0.224.2",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.226.0",
+    "@cosmicdrift/kumiko-headless": "0.226.0",
+    "@cosmicdrift/kumiko-renderer": "0.226.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -64,7 +64,7 @@
     "@types/react-dom": "^19.2.3",
     "jsdom": "^29.1.1",
     "tailwindcss": "^4.3.0",
-    "@cosmicdrift/kumiko-locale-de": "0.224.2"
+    "@cosmicdrift/kumiko-locale-de": "0.226.0"
   },
   "repository": {
     "type": "git",

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

@@ -1,4 +1,4 @@
-import { describe, expect, test } from "bun:test";
+import { afterEach, describe, expect, test } from "bun:test";
 import type { DashboardScreenDefinition } from "@cosmicdrift/kumiko-framework/ui-types";
 import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
 import type { ExtensionSectionProps, FeatureSchema } from "@cosmicdrift/kumiko-renderer";
@@ -7,10 +7,12 @@ import {
   DispatcherProvider,
   ExtensionSectionsProvider,
   KumikoScreen,
+  NavProvider,
 } from "@cosmicdrift/kumiko-renderer";
 import userEvent from "@testing-library/user-event";
 import type { ReactNode } from "react";
 import { WebDashboardBody } from "../app/dashboard-body";
+import { useBrowserNavApi } from "../app/nav";
 import { createMockDispatcher, render, screen, waitFor } from "./test-utils";
 
 const dashboardScreen: DashboardScreenDefinition = {
@@ -153,7 +155,16 @@ const richSchema: FeatureSchema = {
   screens: [richScreen],
 };
 
+function BrowserNav({ children }: { readonly children: ReactNode }): ReactNode {
+  const nav = useBrowserNavApi({ hasWorkspaces: false });
+  return <NavProvider value={nav}>{children}</NavProvider>;
+}
+
 describe("KumikoScreen dashboard — neue Panel-Kinds", () => {
+  afterEach(() => {
+    window.history.replaceState(null, "", "/");
+  });
+
   test("stat-group rendert Sektions-Titel + genestete Stat-Panels", async () => {
     const dispatcher = createMockDispatcher({
       query: (async (type: string) => {
@@ -353,6 +364,8 @@ describe("KumikoScreen dashboard — neue Panel-Kinds", () => {
   });
 
   test("Filter-Wechsel refetcht Stat- UND Feed-Panel mit neuem Payload", async () => {
+    window.history.replaceState(null, "", "/rich");
+
     const calls: { readonly type: string; readonly payload: unknown }[] = [];
     const dispatcher = createMockDispatcher({
       query: (async (type: string, payload: unknown) => {
@@ -374,11 +387,13 @@ describe("KumikoScreen dashboard — neue Panel-Kinds", () => {
     });
     const user = userEvent.setup();
     render(
-      <DispatcherProvider dispatcher={dispatcher}>
-        <DashboardBodyProvider value={WebDashboardBody}>
-          <KumikoScreen schema={richSchema} qn="widgets:screen:rich" />
-        </DashboardBodyProvider>
-      </DispatcherProvider>,
+      <BrowserNav>
+        <DispatcherProvider dispatcher={dispatcher}>
+          <DashboardBodyProvider value={WebDashboardBody}>
+            <KumikoScreen schema={richSchema} qn="widgets:screen:rich" />
+          </DashboardBodyProvider>
+        </DispatcherProvider>
+      </BrowserNav>,
     );
     await waitFor(() => expect(screen.getByText("92.753 €")).toBeTruthy());
     await waitFor(() => expect(screen.getByText("EU-Event")).toBeTruthy());
@@ -390,4 +405,55 @@ describe("KumikoScreen dashboard — neue Panel-Kinds", () => {
     await waitFor(() => expect(screen.getByText("38.120 $")).toBeTruthy());
     await waitFor(() => expect(screen.getByText("US-Event")).toBeTruthy());
   });
+
+  test("Filter-Wert aus URL-Search-Param vorbelegt: Deep-Link ?tenantId=t-2 landet in der Panel-Query", async () => {
+    window.history.replaceState(null, "", "/rich?tenantId=t-2");
+
+    const calls: { readonly type: string; readonly payload: unknown }[] = [];
+    const dispatcher = createMockDispatcher({
+      query: (async (type: string, payload: unknown) => {
+        calls.push({ type, payload });
+        return { isSuccess: true, data: { value: "92.753 €" } };
+      }) as unknown as Dispatcher["query"],
+    });
+
+    const deepLinkScreen: DashboardScreenDefinition = {
+      id: "rich",
+      type: "dashboard",
+      filter: {
+        id: "tenantId",
+        label: "widgets:dashboard:filter-tenant",
+        kind: "select",
+        options: [{ value: "t-2", label: "widgets:dashboard:filter-tenant-t2" }],
+      },
+      panels: [
+        {
+          kind: "stat",
+          id: "kpi",
+          label: "widgets:dashboard:kpi",
+          query: "widgets:query:metrics:kpi",
+          valueField: "value",
+        },
+      ],
+    };
+    const deepLinkSchema: FeatureSchema = {
+      featureName: "widgets",
+      entities: {},
+      screens: [deepLinkScreen],
+    };
+
+    render(
+      <BrowserNav>
+        <DispatcherProvider dispatcher={dispatcher}>
+          <DashboardBodyProvider value={WebDashboardBody}>
+            <KumikoScreen schema={deepLinkSchema} qn="widgets:screen:rich" />
+          </DashboardBodyProvider>
+        </DispatcherProvider>
+      </BrowserNav>,
+    );
+
+    await waitFor(() => expect(screen.getByText("92.753 €")).toBeTruthy());
+    const kpiCall = calls.find((c) => c.type === "widgets:query:metrics:kpi");
+    expect(kpiCall?.payload).toEqual({ tenantId: "t-2" });
+  });
 });

package/src/__tests__/kumiko-screen-singleton-entity-edit.test.tsx

@@ -0,0 +1,237 @@
+import { describe, expect, mock, test } from "bun:test";
+import type {
+  EntityDefinition,
+  EntityEditScreenDefinition,
+} from "@cosmicdrift/kumiko-framework/ui-types";
+import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
+import type { FeatureSchema } from "@cosmicdrift/kumiko-renderer";
+import {
+  DispatcherProvider,
+  KumikoScreen,
+  kumikoDefaultTranslations,
+} from "@cosmicdrift/kumiko-renderer";
+import { createMockDispatcher, fireEvent, render, screen, waitFor } from "./test-utils";
+
+// Split out of kumiko-screen.test.tsx (#2495): the create->update submit
+// test below fires fireEvent.change immediately followed by fireEvent.click
+// right after an async data-load settles — exactly the pattern that trips
+// the #457 shared single-process happy-dom event-delegation corruption once
+// enough prior DOM test files have mounted/unmounted in the same process.
+// Isolating just this describe block (not the whole 2600+ line parent file)
+// keeps the coverage/dom blast radius small while still using the codebase's
+// established remedy (bunfig.ci-dom.toml, pathIgnorePatterns in
+// bunfig.dom.toml) for that bug class.
+
+const taskEntity = {
+  fields: {
+    title: { type: "text", required: true },
+    count: { type: "number" },
+    done: { type: "boolean" },
+  },
+} as unknown as EntityDefinition;
+
+function makeDispatcher(overrides: Partial<Dispatcher> = {}): Dispatcher {
+  const base = createMockDispatcher({
+    query: (async () => ({
+      isSuccess: true,
+      data: { rows: [], nextCursor: null },
+    })) as unknown as Dispatcher["query"],
+  });
+  return { ...base, ...overrides };
+}
+
+describe("KumikoScreen: singleton entityEdit", () => {
+  const singletonEdit: EntityEditScreenDefinition = {
+    id: "task-edit",
+    type: "entityEdit",
+    entity: "task",
+    singleton: true,
+    layout: { sections: [{ title: "Basics", fields: ["title"] }] },
+  };
+  const singletonSchema: FeatureSchema = {
+    featureName: "tasks",
+    entities: { task: taskEntity },
+    screens: [singletonEdit],
+  };
+
+  test("kein vorhandener Record → rendert leeres Create-Form", async () => {
+    const queryCalls: { type: string; payload: unknown }[] = [];
+    const dispatcher = makeDispatcher({
+      query: (async (type: string, payload: unknown) => {
+        queryCalls.push({ type, payload });
+        return { isSuccess: true, data: { rows: [], nextCursor: null } };
+      }) as unknown as Dispatcher["query"],
+    });
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen schema={singletonSchema} qn="tasks:screen:task-edit" />
+      </DispatcherProvider>,
+    );
+    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
+    expect(screen.getByTestId("render-edit-form")).toBeTruthy();
+    const titleInput = screen.getByTestId("field-title").querySelector("input") as HTMLInputElement;
+    expect(titleInput.value).toBe("");
+    expect(queryCalls).toEqual([{ type: "tasks:query:task:list", payload: { limit: 1 } }]);
+  });
+
+  test("vorhandener Record → lädt ihn (Update-Form, prefilled) statt Create", async () => {
+    const queryCalls: { type: string; payload: unknown }[] = [];
+    const dispatcher = makeDispatcher({
+      query: (async (type: string, payload: unknown) => {
+        queryCalls.push({ type, payload });
+        if (type.endsWith(":list")) {
+          return {
+            isSuccess: true,
+            data: { rows: [{ id: "task-1", title: "loaded-title" }], nextCursor: null },
+          };
+        }
+        return {
+          isSuccess: true,
+          data: { id: "task-1", version: 1, title: "loaded-title", count: 0, done: false },
+        };
+      }) as unknown as Dispatcher["query"],
+    });
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen schema={singletonSchema} qn="tasks:screen:task-edit" />
+      </DispatcherProvider>,
+    );
+    // Two sequential loading cycles (list, then detail once the singleton
+    // wrapper hands off to EntityEditUpdateBody) — default waitFor timeout
+    // can be too tight under CI's shared-process test load.
+    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull(), {
+      timeout: 5000,
+    });
+    expect(screen.getByTestId("render-edit-form")).toBeTruthy();
+    const titleInput = screen.getByTestId("field-title").querySelector("input") as HTMLInputElement;
+    expect(titleInput.value).toBe("loaded-title");
+    // Anchor: the id resolved from list(limit:1) reaches the detail query —
+    // otherwise the form would render empty/create-mode instead of loading it.
+    expect(queryCalls).toContainEqual({
+      type: "tasks:query:task:detail",
+      payload: { id: "task-1" },
+    });
+  });
+
+  test("allowCreate:false + leere Tabelle → Fehler-Banner statt Create-Form", async () => {
+    const disabledSchema: FeatureSchema = {
+      featureName: "tasks",
+      entities: { task: taskEntity },
+      screens: [{ ...singletonEdit, allowCreate: false }],
+    };
+    const dispatcher = makeDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { rows: [], nextCursor: null },
+      })) as unknown as Dispatcher["query"],
+    });
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen schema={disabledSchema} qn="tasks:screen:task-edit" />
+      </DispatcherProvider>,
+    );
+    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
+    expect(screen.getByTestId("kumiko-screen-create-disabled")).toBeTruthy();
+    expect(screen.queryByTestId("render-edit-form")).toBeNull();
+  });
+
+  // The singleton wrapper fires its own list(limit:1) query up front — a
+  // screen whose `list` handler has stricter access.roles than its `edit`
+  // handler used to render fine (no query ran before this feature) and now
+  // flips to an error banner instead. No test caught that regression.
+  test("list-Query schlägt fehl → Fehler-Banner statt Create-Form", async () => {
+    const dispatcher = makeDispatcher({
+      query: (async () => ({
+        isSuccess: false,
+        error: {
+          code: "access_denied",
+          httpStatus: 403,
+          i18nKey: "errors.access.denied",
+          message: "",
+        },
+      })) as unknown as Dispatcher["query"],
+    });
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen schema={singletonSchema} qn="tasks:screen:task-edit" />
+      </DispatcherProvider>,
+    );
+    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
+    const bannerText = screen.getByTestId("kumiko-screen-error").textContent;
+    expect(bannerText).toBe(kumikoDefaultTranslations["en"]?.["errors.access.denied"] ?? "");
+    expect(screen.queryByTestId("render-edit-form")).toBeNull();
+  });
+
+  // kumiko-screen#1944: EntityEditSingletonBody runs without a wrapping
+  // entityList screen, so the create-body's default "navigate back to the
+  // list" success handler is a silent no-op — a successful create used to
+  // leave the form stuck on the just-submitted create values, and a second
+  // submit created a duplicate record ("exactly one record per tenant"
+  // broken). Create on an empty table must now switch straight to the
+  // update form of the newly created record.
+  test("erfolgreicher Create bei leerer Tabelle wechselt in Update-Form des neuen Records (kein zweiter Create möglich)", async () => {
+    let created = false;
+    const write = mock(async (type: string) => {
+      if (type === "tasks:write:task:create") {
+        created = true;
+        return { isSuccess: true, data: { id: "task-1" } };
+      }
+      return { isSuccess: true, data: {} };
+    });
+    const query = mock(async (type: string) => {
+      if (type === "tasks:query:task:list") {
+        return created
+          ? { isSuccess: true, data: { rows: [{ id: "task-1", title: "Created title" }] } }
+          : { isSuccess: true, data: { rows: [], nextCursor: null } };
+      }
+      if (type === "tasks:query:task:detail") {
+        return {
+          isSuccess: true,
+          data: { id: "task-1", version: 1, title: "Created title", count: 0, done: false },
+        };
+      }
+      return { isSuccess: true, data: { rows: [], nextCursor: null } };
+    });
+    const dispatcher = makeDispatcher({
+      write: write as unknown as Dispatcher["write"],
+      query: query as unknown as Dispatcher["query"],
+    });
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen schema={singletonSchema} qn="tasks:screen:task-edit" />
+      </DispatcherProvider>,
+    );
+    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
+
+    const titleInput = screen.getByTestId("field-title").querySelector("input") as HTMLInputElement;
+    fireEvent.change(titleInput, { target: { value: "Created title" } });
+    fireEvent.click(screen.getByTestId("render-edit-submit"));
+
+    await waitFor(() => expect(write).toHaveBeenCalledTimes(1));
+    // The singleton wrapper refetches its list(limit:1) query after the
+    // create succeeds, sees the new row, and switches from the create body
+    // to the update body — which loads the record via its own detail
+    // query, landing on the same title through a different data path.
+    await waitFor(() => {
+      const input = screen.getByTestId("field-title").querySelector("input") as HTMLInputElement;
+      expect(input.value).toBe("Created title");
+    });
+    expect(query).toHaveBeenCalledWith(
+      "tasks:query:task:detail",
+      { id: "task-1" },
+      expect.anything(),
+    );
+
+    // A second submit on the (now update-mode) form must dispatch an
+    // update, never a second create.
+    fireEvent.change(screen.getByTestId("field-title").querySelector("input") as HTMLInputElement, {
+      target: { value: "Edited again" },
+    });
+    fireEvent.click(screen.getByTestId("render-edit-submit"));
+    // Exactly one create (the first submit) followed by an update, never a
+    // second create — the singleton wrapper must have flipped branches.
+    await waitFor(() => expect(write).toHaveBeenCalledTimes(2));
+    expect(write).toHaveBeenLastCalledWith("tasks:write:task:update", expect.anything());
+  });
+});

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

@@ -2387,201 +2387,10 @@ describe("KumikoScreen: update-only entityEdit (allowCreate/allowDelete)", () =>
 // Singleton entities (exactly one record per tenant) have no nav path
 // that supplies an entityId. `singleton: true` resolves the existing
 // record via list(limit:1) before deciding create vs update.
-describe("KumikoScreen: singleton entityEdit", () => {
-  const singletonEdit: EntityEditScreenDefinition = {
-    id: "task-edit",
-    type: "entityEdit",
-    entity: "task",
-    singleton: true,
-    layout: { sections: [{ title: "Basics", fields: ["title"] }] },
-  };
-  const singletonSchema: FeatureSchema = {
-    featureName: "tasks",
-    entities: { task: taskEntity },
-    screens: [singletonEdit],
-  };
-
-  test("kein vorhandener Record → rendert leeres Create-Form", async () => {
-    const queryCalls: { type: string; payload: unknown }[] = [];
-    const dispatcher = makeDispatcher({
-      query: (async (type: string, payload: unknown) => {
-        queryCalls.push({ type, payload });
-        return { isSuccess: true, data: { rows: [], nextCursor: null } };
-      }) as unknown as Dispatcher["query"],
-    });
-    render(
-      <DispatcherProvider dispatcher={dispatcher}>
-        <KumikoScreen schema={singletonSchema} qn="tasks:screen:task-edit" />
-      </DispatcherProvider>,
-    );
-    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
-    expect(screen.getByTestId("render-edit-form")).toBeTruthy();
-    const titleInput = screen.getByTestId("field-title").querySelector("input") as HTMLInputElement;
-    expect(titleInput.value).toBe("");
-    expect(queryCalls).toEqual([{ type: "tasks:query:task:list", payload: { limit: 1 } }]);
-  });
-
-  test("vorhandener Record → lädt ihn (Update-Form, prefilled) statt Create", async () => {
-    const queryCalls: { type: string; payload: unknown }[] = [];
-    const dispatcher = makeDispatcher({
-      query: (async (type: string, payload: unknown) => {
-        queryCalls.push({ type, payload });
-        if (type.endsWith(":list")) {
-          return {
-            isSuccess: true,
-            data: { rows: [{ id: "task-1", title: "loaded-title" }], nextCursor: null },
-          };
-        }
-        return {
-          isSuccess: true,
-          data: { id: "task-1", version: 1, title: "loaded-title", count: 0, done: false },
-        };
-      }) as unknown as Dispatcher["query"],
-    });
-    render(
-      <DispatcherProvider dispatcher={dispatcher}>
-        <KumikoScreen schema={singletonSchema} qn="tasks:screen:task-edit" />
-      </DispatcherProvider>,
-    );
-    // Two sequential loading cycles (list, then detail once the singleton
-    // wrapper hands off to EntityEditUpdateBody) — default waitFor timeout
-    // can be too tight under CI's shared-process test load.
-    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull(), {
-      timeout: 5000,
-    });
-    expect(screen.getByTestId("render-edit-form")).toBeTruthy();
-    const titleInput = screen.getByTestId("field-title").querySelector("input") as HTMLInputElement;
-    expect(titleInput.value).toBe("loaded-title");
-    // Anchor: the id resolved from list(limit:1) reaches the detail query —
-    // otherwise the form would render empty/create-mode instead of loading it.
-    expect(queryCalls).toContainEqual({
-      type: "tasks:query:task:detail",
-      payload: { id: "task-1" },
-    });
-  });
-
-  test("allowCreate:false + leere Tabelle → Fehler-Banner statt Create-Form", async () => {
-    const disabledSchema: FeatureSchema = {
-      featureName: "tasks",
-      entities: { task: taskEntity },
-      screens: [{ ...singletonEdit, allowCreate: false }],
-    };
-    const dispatcher = makeDispatcher({
-      query: (async () => ({
-        isSuccess: true,
-        data: { rows: [], nextCursor: null },
-      })) as unknown as Dispatcher["query"],
-    });
-    render(
-      <DispatcherProvider dispatcher={dispatcher}>
-        <KumikoScreen schema={disabledSchema} qn="tasks:screen:task-edit" />
-      </DispatcherProvider>,
-    );
-    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
-    expect(screen.getByTestId("kumiko-screen-create-disabled")).toBeTruthy();
-    expect(screen.queryByTestId("render-edit-form")).toBeNull();
-  });
-
-  // The singleton wrapper fires its own list(limit:1) query up front — a
-  // screen whose `list` handler has stricter access.roles than its `edit`
-  // handler used to render fine (no query ran before this feature) and now
-  // flips to an error banner instead. No test caught that regression.
-  test("list-Query schlägt fehl → Fehler-Banner statt Create-Form", async () => {
-    const dispatcher = makeDispatcher({
-      query: (async () => ({
-        isSuccess: false,
-        error: {
-          code: "access_denied",
-          httpStatus: 403,
-          i18nKey: "errors.access.denied",
-          message: "",
-        },
-      })) as unknown as Dispatcher["query"],
-    });
-    render(
-      <DispatcherProvider dispatcher={dispatcher}>
-        <KumikoScreen schema={singletonSchema} qn="tasks:screen:task-edit" />
-      </DispatcherProvider>,
-    );
-    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
-    const bannerText = screen.getByTestId("kumiko-screen-error").textContent;
-    expect(bannerText).toBe(kumikoDefaultTranslations["en"]?.["errors.access.denied"] ?? "");
-    expect(screen.queryByTestId("render-edit-form")).toBeNull();
-  });
-
-  // kumiko-screen#1944: EntityEditSingletonBody runs without a wrapping
-  // entityList screen, so the create-body's default "navigate back to the
-  // list" success handler is a silent no-op — a successful create used to
-  // leave the form stuck on the just-submitted create values, and a second
-  // submit created a duplicate record ("exactly one record per tenant"
-  // broken). Create on an empty table must now switch straight to the
-  // update form of the newly created record.
-  test("erfolgreicher Create bei leerer Tabelle wechselt in Update-Form des neuen Records (kein zweiter Create möglich)", async () => {
-    let created = false;
-    const write = mock(async (type: string) => {
-      if (type === "tasks:write:task:create") {
-        created = true;
-        return { isSuccess: true, data: { id: "task-1" } };
-      }
-      return { isSuccess: true, data: {} };
-    });
-    const query = mock(async (type: string) => {
-      if (type === "tasks:query:task:list") {
-        return created
-          ? { isSuccess: true, data: { rows: [{ id: "task-1", title: "Created title" }] } }
-          : { isSuccess: true, data: { rows: [], nextCursor: null } };
-      }
-      if (type === "tasks:query:task:detail") {
-        return {
-          isSuccess: true,
-          data: { id: "task-1", version: 1, title: "Created title", count: 0, done: false },
-        };
-      }
-      return { isSuccess: true, data: { rows: [], nextCursor: null } };
-    });
-    const dispatcher = makeDispatcher({
-      write: write as unknown as Dispatcher["write"],
-      query: query as unknown as Dispatcher["query"],
-    });
-
-    render(
-      <DispatcherProvider dispatcher={dispatcher}>
-        <KumikoScreen schema={singletonSchema} qn="tasks:screen:task-edit" />
-      </DispatcherProvider>,
-    );
-    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
-
-    const titleInput = screen.getByTestId("field-title").querySelector("input") as HTMLInputElement;
-    fireEvent.change(titleInput, { target: { value: "Created title" } });
-    fireEvent.click(screen.getByTestId("render-edit-submit"));
-
-    await waitFor(() => expect(write).toHaveBeenCalledTimes(1));
-    // The singleton wrapper refetches its list(limit:1) query after the
-    // create succeeds, sees the new row, and switches from the create body
-    // to the update body — which loads the record via its own detail
-    // query, landing on the same title through a different data path.
-    await waitFor(() => {
-      const input = screen.getByTestId("field-title").querySelector("input") as HTMLInputElement;
-      expect(input.value).toBe("Created title");
-    });
-    expect(query).toHaveBeenCalledWith(
-      "tasks:query:task:detail",
-      { id: "task-1" },
-      expect.anything(),
-    );
-
-    // A second submit on the (now update-mode) form must dispatch an
-    // update, never a second create.
-    fireEvent.change(screen.getByTestId("field-title").querySelector("input") as HTMLInputElement, {
-      target: { value: "Edited again" },
-    });
-    fireEvent.click(screen.getByTestId("render-edit-submit"));
-    // Exactly one create (the first submit) followed by an update, never a
-    // second create — the singleton wrapper must have flipped branches.
-    await waitFor(() => expect(write).toHaveBeenCalledTimes(2));
-    expect(write).toHaveBeenLastCalledWith("tasks:write:task:update", expect.anything());
-  });
-});
+// KumikoScreen: singleton entityEdit — moved to
+// kumiko-screen-singleton-entity-edit.test.tsx (#2495): its create->update
+// submit test needs its own isolated bun test process (#457 shared
+// single-process happy-dom event-delegation corruption).
 
 // --- actionForm extension-section (Wave J: Incident-Update-Timeline) ---
 // actionForm hat keinen record — Extension-Sections bekommen stattdessen

package/src/__tests__/projection-detail-record-layout.test.tsx

@@ -0,0 +1,305 @@
+// projectionDetail record header + metrics band + tabs (fw record-screen-type).
+
+import { describe, expect, test } from "bun:test";
+import type { ProjectionDetailScreenDefinition } from "@cosmicdrift/kumiko-framework/ui-types";
+import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
+import type { FeatureSchema, NavApi } from "@cosmicdrift/kumiko-renderer";
+import { DispatcherProvider, KumikoScreen, NavProvider } from "@cosmicdrift/kumiko-renderer";
+import userEvent from "@testing-library/user-event";
+import { createMockDispatcher, render, screen, waitFor } from "./test-utils";
+
+const baseScreen: ProjectionDetailScreenDefinition = {
+  id: "rent-detail",
+  type: "projectionDetail",
+  query: "rentals:query:rent:detail",
+  idParam: "id",
+  layout: {
+    sections: [{ title: "Rent", fields: ["description"] }],
+  },
+};
+
+const rowData = {
+  description: "Loft 4B",
+  tenantName: "Jamie Rivera",
+  address: "12 Canal St",
+  state: "active",
+  balance: "120",
+  overdueDays: "3",
+};
+
+function schemaFor(screen: ProjectionDetailScreenDefinition): FeatureSchema {
+  return { featureName: "rentals", entities: {}, screens: [screen] };
+}
+
+function dispatcherReturning(
+  data: Readonly<Record<string, unknown>>,
+): Dispatcher & { readonly calls: { readonly type: string; readonly payload: unknown }[] } {
+  const calls: { type: string; payload: unknown }[] = [];
+  const query = (async (type: string, payload: unknown) => {
+    calls.push({ type, payload });
+    if (type === "rentals:query:rent:detail") return { isSuccess: true, data };
+    return { isSuccess: true, data: { rows: [], nextCursor: null } };
+  }) as unknown as Dispatcher["query"];
+  const dispatcher = createMockDispatcher({ query });
+  return Object.assign(dispatcher, { calls });
+}
+
+describe("KumikoScreen / projectionDetail — record header + metrics band", () => {
+  test("renders header title/subtitle/status from the query row's named columns", async () => {
+    const headerScreen: ProjectionDetailScreenDefinition = {
+      ...baseScreen,
+      header: { title: "tenantName", subtitle: "address", status: "state" },
+    };
+    const dispatcher = dispatcherReturning(rowData);
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen
+          schema={schemaFor(headerScreen)}
+          qn="rentals:screen:rent-detail"
+          entityId="rent-1"
+        />
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("render-edit-form"));
+    expect(screen.getByTestId("kumiko-screen-projection-detail-title").textContent).toBe(
+      "Jamie Rivera",
+    );
+    expect(screen.getByTestId("kumiko-screen-projection-detail-subtitle").textContent).toBe(
+      "12 Canal St",
+    );
+    expect(screen.getByTestId("kumiko-screen-projection-detail-status").textContent).toBe("active");
+  });
+
+  test("renders the metrics band with fieldLabels-translated labels and query-row values", async () => {
+    const metricsScreen: ProjectionDetailScreenDefinition = {
+      ...baseScreen,
+      metrics: ["balance", "overdueDays"],
+      fieldLabels: {
+        balance: "rentals.detail.metric.balance",
+        overdueDays: "rentals.detail.metric.overdueDays",
+      },
+    };
+    const dispatcher = dispatcherReturning(rowData);
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen
+          schema={schemaFor(metricsScreen)}
+          qn="rentals:screen:rent-detail"
+          entityId="rent-1"
+        />
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("render-edit-form"));
+    expect(
+      screen.getByTestId("kumiko-screen-projection-detail-metric-balance-label").textContent,
+    ).toBe("rentals.detail.metric.balance");
+    expect(
+      screen.getByTestId("kumiko-screen-projection-detail-metric-balance-value").textContent,
+    ).toBe("120");
+    expect(
+      screen.getByTestId("kumiko-screen-projection-detail-metric-overdueDays-value").textContent,
+    ).toBe("3");
+  });
+
+  test("without header/metrics, neither renders — regression protection for existing screens", async () => {
+    const dispatcher = dispatcherReturning(rowData);
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen
+          schema={schemaFor(baseScreen)}
+          qn="rentals:screen:rent-detail"
+          entityId="rent-1"
+        />
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("render-edit-form"));
+    expect(screen.queryByTestId("kumiko-screen-projection-detail-title")).toBeNull();
+    expect(screen.queryByTestId("kumiko-screen-projection-detail-metrics")).toBeNull();
+  });
+});
+
+describe("KumikoScreen / projectionDetail — layout.mode: 'tabs'", () => {
+  const tabsScreen: ProjectionDetailScreenDefinition = {
+    ...baseScreen,
+    layout: {
+      mode: "tabs",
+      sections: [
+        { id: "overview", title: "Overview", fields: ["description"] },
+        {
+          id: "payments",
+          kind: "relatedList",
+          title: "Payments",
+          query: "rentals:query:rent:payments",
+          columns: [{ field: "amount", label: "Amount" }],
+        },
+        {
+          id: "invoices",
+          kind: "relatedList",
+          title: "Invoices",
+          query: "rentals:query:rent:invoices",
+          columns: [{ field: "amount", label: "Amount" }],
+        },
+      ],
+    },
+  };
+
+  function navWithTab(tab: string | undefined): {
+    readonly navApi: NavApi;
+    readonly setSearchParamsCalls: Readonly<Record<string, string | null>>[];
+  } {
+    const setSearchParamsCalls: Readonly<Record<string, string | null>>[] = [];
+    return {
+      navApi: {
+        route: undefined,
+        navigate: () => {},
+        replace: () => {},
+        hrefFor: () => "",
+        searchParams: tab !== undefined ? { tab } : {},
+        setSearchParams: (updates) => setSearchParamsCalls.push(updates),
+      },
+      setSearchParamsCalls,
+    };
+  }
+
+  test("fires exactly one query on first render — the inactive tabs' relatedList queries never fire", async () => {
+    const dispatcher = dispatcherReturning(rowData);
+    const { navApi } = navWithTab(undefined);
+
+    render(
+      <NavProvider value={navApi}>
+        <DispatcherProvider dispatcher={dispatcher}>
+          <KumikoScreen
+            schema={schemaFor(tabsScreen)}
+            qn="rentals:screen:rent-detail"
+            entityId="rent-1"
+          />
+        </DispatcherProvider>
+      </NavProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("render-edit-form"));
+    expect(dispatcher.calls).toHaveLength(1);
+    expect(dispatcher.calls[0]?.type).toBe("rentals:query:rent:detail");
+  });
+
+  test("?tab= selects the matching section — its content renders, the others don't", async () => {
+    const dispatcher = dispatcherReturning(rowData);
+    const { navApi } = navWithTab("payments");
+
+    render(
+      <NavProvider value={navApi}>
+        <DispatcherProvider dispatcher={dispatcher}>
+          <KumikoScreen
+            schema={schemaFor(tabsScreen)}
+            qn="rentals:screen:rent-detail"
+            entityId="rent-1"
+          />
+        </DispatcherProvider>
+      </NavProvider>,
+    );
+
+    await waitFor(() =>
+      expect(dispatcher.calls.some((c) => c.type === "rentals:query:rent:payments")).toBe(true),
+    );
+    expect(dispatcher.calls.some((c) => c.type === "rentals:query:rent:invoices")).toBe(false);
+    expect(screen.queryByTestId("field-description")).toBeNull();
+  });
+
+  test("an unknown ?tab= value falls back to the first section", async () => {
+    const dispatcher = dispatcherReturning(rowData);
+    const { navApi } = navWithTab("does-not-exist");
+
+    render(
+      <NavProvider value={navApi}>
+        <DispatcherProvider dispatcher={dispatcher}>
+          <KumikoScreen
+            schema={schemaFor(tabsScreen)}
+            qn="rentals:screen:rent-detail"
+            entityId="rent-1"
+          />
+        </DispatcherProvider>
+      </NavProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("field-description"));
+    expect(dispatcher.calls).toHaveLength(1);
+  });
+
+  test("clicking a tab calls nav.setSearchParams with the tab's id", async () => {
+    const dispatcher = dispatcherReturning(rowData);
+    const { navApi, setSearchParamsCalls } = navWithTab(undefined);
+    const user = userEvent.setup();
+
+    render(
+      <NavProvider value={navApi}>
+        <DispatcherProvider dispatcher={dispatcher}>
+          <KumikoScreen
+            schema={schemaFor(tabsScreen)}
+            qn="rentals:screen:rent-detail"
+            entityId="rent-1"
+          />
+        </DispatcherProvider>
+      </NavProvider>,
+    );
+
+    const trigger = await waitFor(() =>
+      screen.getByTestId("kumiko-screen-projection-detail-tabs-payments"),
+    );
+    await user.click(trigger);
+
+    expect(setSearchParamsCalls).toContainEqual({ tab: "payments" });
+  });
+});
+
+// Only guard against a solon-shaped screen (relatedList-heavy) silently regressing.
+describe("KumikoScreen / projectionDetail — unchanged for a solon-shaped screen", () => {
+  const solonShapedScreen: ProjectionDetailScreenDefinition = {
+    ...baseScreen,
+    layout: {
+      sections: [
+        { title: "Rent", fields: ["description"] },
+        {
+          kind: "relatedList",
+          title: "Payments",
+          query: "rentals:query:rent:payments",
+          columns: [{ field: "amount", label: "Amount" }],
+        },
+        {
+          kind: "relatedList",
+          title: "Invoices",
+          query: "rentals:query:rent:invoices",
+          columns: [{ field: "amount", label: "Amount" }],
+        },
+      ],
+    },
+  };
+
+  test("all sections render stacked, no tabs, all relatedList queries fire", async () => {
+    const dispatcher = dispatcherReturning(rowData);
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen
+          schema={schemaFor(solonShapedScreen)}
+          qn="rentals:screen:rent-detail"
+          entityId="rent-1"
+        />
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("field-description"));
+    await waitFor(() =>
+      expect(dispatcher.calls.some((c) => c.type === "rentals:query:rent:payments")).toBe(true),
+    );
+    await waitFor(() =>
+      expect(dispatcher.calls.some((c) => c.type === "rentals:query:rent:invoices")).toBe(true),
+    );
+    expect(screen.queryByTestId("kumiko-screen-projection-detail-tabs")).toBeNull();
+  });
+});

package/src/app/dashboard-body.tsx

@@ -44,11 +44,12 @@ import {
   type DashboardBodyProps,
   extensionSectionName,
   useExtensionSectionComponent,
+  useNav,
   usePrimitives,
   useQuery,
   useTranslation,
 } from "@cosmicdrift/kumiko-renderer";
-import { type ReactNode, useEffect, useState } from "react";
+import { type ReactNode, useEffect } from "react";
 import { TimeseriesChart, type TimeseriesPoint } from "../widgets/charts";
 import { FeedList, type FeedRow } from "../widgets/feed-list";
 import { ProgressList, type ProgressListRow } from "../widgets/progress-list";
@@ -337,18 +338,18 @@ function CustomPanelBody({
   );
 }
 
-// Screen-Filter: hält den gewählten Wert, rendert die Combobox, und liefert
-// den Payload-Merge für jede Panel-Query. Statische `options` werden als
-// i18n-Keys übersetzt; `optionsQuery`-Ergebnisse sind Server-Daten und werden
-// unverändert übernommen.
+// Value lives in the URL under `filter.id` (like useListUrlState's
+// `<screenId>.page`, same replaceState) so a `navigate` rowAction with
+// `params` can deep-link onto this filter.
 function useFilterParams(screen: DashboardScreenDefinition): {
   readonly params: Readonly<Record<string, unknown>>;
   readonly picker: ReactNode;
 } {
   const { Field, Input } = usePrimitives();
   const t = useTranslation();
+  const nav = useNav();
   const filter = screen.filter;
-  const [value, setValue] = useState("");
+  const value = filter !== undefined ? (nav.searchParams[filter.id] ?? "") : "";
   const optionsQueryResult = useQuery<{
     readonly rows: readonly { readonly value: string; readonly label: string }[];
   }>(filter?.optionsQuery ?? "", {}, { enabled: filter?.optionsQuery !== undefined });
@@ -373,7 +374,9 @@ function useFilterParams(screen: DashboardScreenDefinition): {
           name={filter.id}
           options={options}
           value={value}
-          onChange={setValue}
+          onChange={(next: string) =>
+            nav.setSearchParams({ [filter.id]: next === "" ? null : next })
+          }
           placeholder={filter.placeholder !== undefined ? t(filter.placeholder) : allLabel}
         />
       </Field>

package/src/primitives/__tests__/data-table-logic.test.ts

@@ -196,6 +196,22 @@ describe("defaultCellRender", () => {
     expect(defaultCellRender("op-x", "select", { "op-x": "Operativ X" })).toBe("Operativ X");
   });
 
+  test("multiSelect → Werte gejoint mit ', ', optionLabel gewinnt vor humanizeSlug pro Wert (fw#2491)", () => {
+    expect(
+      defaultCellRender(["op-x", "degraded-performance"], "multiSelect", {
+        "op-x": "Operativ X",
+      }),
+    ).toBe("Operativ X, Degraded performance");
+  });
+
+  test("multiSelect → leeres Array liefert leeren String", () => {
+    expect(defaultCellRender([], "multiSelect")).toBe("");
+  });
+
+  test("multiSelect → einzelner Nicht-Array-Wert wird wie select behandelt (defensive)", () => {
+    expect(defaultCellRender("op-x", "multiSelect", { "op-x": "Operativ X" })).toBe("Operativ X");
+  });
+
   test("text → String-Repräsentation", () => {
     expect(defaultCellRender("hallo", "text")).toBe("hallo");
   });

package/src/primitives/index.tsx

@@ -107,6 +107,8 @@ import { DefaultLightbox } from "./lightbox";
 import { LocatedTimestampInput } from "./located-timestamp-input";
 import { DefaultModal } from "./modal";
 import { currencyDecimals, formatMoney, MoneyInput } from "./money-input";
+import { DefaultStatusBadge } from "./status-badge";
+import { DefaultTabs } from "./tabs";
 import { TimestampInput } from "./timestamp-input";
 import { useToast } from "./toast";
 import { TzInput } from "./tz-input";
@@ -1443,7 +1445,7 @@ function isMoneyValue(value: unknown): value is MoneyCellValue {
 //   - boolean → ✓ / leer
 //   - timestamp/date → locale-formatiert (kein roher ISO-String)
 //   - number/decimal/bigInt → locale-formatted via Intl.NumberFormat (fw#2160)
-//   - select → human-lesbar (kebab-case → Title Case)
+//   - select/multiSelect → human-readable (kebab-case → Title Case), multiSelect values joined with ", "
 //   - money → { amount, currency } formatted via Intl (not "[object Object]")
 //   - text/else → toString
 export function defaultCellRender(
@@ -1471,15 +1473,19 @@ export function defaultCellRender(
     const minor = Math.round(value.amount * 10 ** currencyDecimals(value.currency));
     return formatMoney(minor, value.currency, locale);
   }
-  if (type === "select") {
-    const raw = String(value);
-    // Translated Label aus dem ViewModel-Builder (Convention-Key
-    // `<feature>:entity:<entity>:field:<field>:option:<value>`).
-    // Fallback humanizeSlug wenn kein Label registriert — gleiches
-    // Verhalten wie vor dem optionLabels-Patch.
-    const translated = optionLabels?.[raw];
-    if (translated !== undefined && translated !== raw) return translated;
-    return humanizeSlug(raw);
+  if (type === "select" || type === "multiSelect") {
+    const values = Array.isArray(value) ? value : [value];
+    return values
+      .map((v) => {
+        const raw = String(v);
+        // Translated label from the view-model builder (convention key
+        // `<feature>:entity:<entity>:field:<field>:option:<value>`).
+        // Fallback to humanizeSlug when no label is registered — same
+        // behavior as before the optionLabels patch.
+        const translated = optionLabels?.[raw];
+        return translated !== undefined && translated !== raw ? translated : humanizeSlug(raw);
+      })
+      .join(", ");
   }
   return typeof value === "string" ? value : String(value);
 }
@@ -1963,8 +1969,8 @@ function DefaultLink({
   );
 }
 
-function DefaultProgress({ value, testId }: ProgressProps): ReactNode {
-  return <ProgressBar value={value} testId={testId} />;
+function DefaultProgress({ value, tone, testId }: ProgressProps): ReactNode {
+  return <ProgressBar value={value} tone={tone} testId={testId} />;
 }
 
 function DefaultStepBar({
@@ -2090,4 +2096,6 @@ export const defaultPrimitives: CorePrimitives = {
   Progress: DefaultProgress,
   StepBar: DefaultStepBar,
   WizardStepGroup: DefaultWizardStepGroup,
+  Tabs: DefaultTabs,
+  StatusBadge: DefaultStatusBadge,
 };

package/src/primitives/status-badge.tsx

@@ -0,0 +1,11 @@
+import type { StatusBadgeProps } from "@cosmicdrift/kumiko-renderer";
+import type { ReactNode } from "react";
+import { StatusBadge } from "../widgets/status-badge";
+
+export function DefaultStatusBadge({ value, tone, testId }: StatusBadgeProps): ReactNode {
+  return (
+    <StatusBadge tone={tone ?? "muted"} testId={testId}>
+      {value}
+    </StatusBadge>
+  );
+}

package/src/primitives/tabs.tsx

@@ -0,0 +1,23 @@
+// Delegates keyboard nav + ARIA (role=tablist/tab) to Radix instead of hand-rolling it.
+
+import type { TabsProps } from "@cosmicdrift/kumiko-renderer";
+import type { ReactNode } from "react";
+import { Tabs, TabsList, TabsTrigger } from "../ui/tabs";
+
+export function DefaultTabs({ items, activeId, onSelect, testId }: TabsProps): ReactNode {
+  return (
+    <Tabs value={activeId} onValueChange={onSelect} data-testid={testId}>
+      <TabsList variant="line">
+        {items.map((item) => (
+          <TabsTrigger
+            key={item.id}
+            value={item.id}
+            data-testid={testId !== undefined ? `${testId}-${item.id}` : undefined}
+          >
+            {item.label}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+    </Tabs>
+  );
+}

package/src/ui/tabs.tsx

@@ -0,0 +1,92 @@
+// @ts-nocheck — vendored shadcn, regenerate via scripts/sync-shadcn.ts
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Tabs as TabsPrimitive } from "radix-ui"
+
+import { cn } from "../lib/cn"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
+        "data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

package/src/widgets/progress-bar.tsx

@@ -1,6 +1,16 @@
 import type { ReactNode } from "react";
 import { cn } from "../lib/cn";
 
+type ProgressTone = "default" | "warn" | "danger";
+
+// Fully spelled out (no interpolation) — Tailwind's scanner only picks up
+// literal class strings, not `bg-status-${tone}`.
+const FILL_TONE: Record<ProgressTone, string> = {
+  default: "bg-primary",
+  warn: "bg-status-warn",
+  danger: "bg-status-critical",
+};
+
 /**
  * Progress bar, `value` 0..1 (clamped).
  *
@@ -11,10 +21,12 @@ import { cn } from "../lib/cn";
  */
 export function ProgressBar({
   value,
+  tone = "default",
   className,
   testId,
 }: {
   readonly value: number;
+  readonly tone?: ProgressTone;
   readonly className?: string;
   readonly testId?: string;
 }): ReactNode {
@@ -32,7 +44,7 @@ export function ProgressBar({
         className="relative h-2 w-full overflow-hidden rounded-full bg-muted"
       >
         <div
-          className="absolute inset-y-0 left-0 rounded-full bg-primary"
+          className={cn("absolute inset-y-0 left-0 rounded-full", FILL_TONE[tone])}
           style={{ width: `${pct * 100}%` }}
         />
       </div>

package/src/widgets/stat.tsx

@@ -83,6 +83,7 @@ export function StatCard({
   trend,
   spark,
   testId,
+  children,
 }: {
   readonly icon?: ReactNode;
   readonly label: string;
@@ -94,6 +95,9 @@ export function StatCard({
   readonly trend?: string;
   readonly spark?: readonly number[];
   readonly testId?: string;
+  /** Extra content below the built-in fields (e.g. a usage meter) — kept
+   *  inside the same card chrome instead of stacking a second bordered box. */
+  readonly children?: ReactNode;
 }): ReactNode {
   const { Card } = usePrimitives();
   return (
@@ -140,6 +144,7 @@ export function StatCard({
       {spark !== undefined && (
         <Sparkline points={spark} className={cn("mt-2 h-7 w-full", TONE_VALUE[tone])} />
       )}
+      {children !== undefined && <div className="mt-3">{children}</div>}
     </Card>
   );
 }