@cosmicdrift/kumiko-renderer-web 0.130.2 → 0.131.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.130.2",
+  "version": "0.131.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.130.2",
-    "@cosmicdrift/kumiko-headless": "0.130.2",
-    "@cosmicdrift/kumiko-renderer": "0.130.2",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.131.0",
+    "@cosmicdrift/kumiko-headless": "0.131.0",
+    "@cosmicdrift/kumiko-renderer": "0.131.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",

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

@@ -0,0 +1,86 @@
+import { describe, expect, test } from "bun:test";
+import type { DashboardScreenDefinition } from "@cosmicdrift/kumiko-framework/ui-types";
+import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
+import type { FeatureSchema } from "@cosmicdrift/kumiko-renderer";
+import {
+  DashboardBodyProvider,
+  DispatcherProvider,
+  KumikoScreen,
+} from "@cosmicdrift/kumiko-renderer";
+import { WebDashboardBody } from "../app/dashboard-body";
+import { createMockDispatcher, render, screen, waitFor } from "./test-utils";
+
+const dashboardScreen: DashboardScreenDefinition = {
+  id: "overview",
+  type: "dashboard",
+  panels: [
+    {
+      kind: "stat",
+      id: "uptime",
+      label: "status:dashboard:uptime",
+      query: "status:query:monitor:uptime-stat",
+      valueField: "value",
+      subField: "sub",
+      toneField: "tone",
+    },
+    {
+      kind: "list",
+      id: "latest",
+      label: "status:dashboard:latest",
+      query: "status:query:incident:latest",
+      columns: [{ field: "name", label: "status:dashboard:col-name" }],
+    },
+  ],
+};
+
+const schema: FeatureSchema = {
+  featureName: "status",
+  entities: {},
+  screens: [dashboardScreen],
+};
+
+function makeDispatcher(): Dispatcher {
+  return createMockDispatcher({
+    query: (async (type: string) => {
+      if (type === "status:query:monitor:uptime-stat") {
+        return {
+          isSuccess: true,
+          data: { value: "99,98 %", sub: "letzte 90 Tage", tone: "positive" },
+        };
+      }
+      return {
+        isSuccess: true,
+        data: { rows: [{ id: "i1", name: "API-Ausfall" }], nextCursor: null },
+      };
+    }) as unknown as Dispatcher["query"],
+  });
+}
+
+describe("KumikoScreen dashboard", () => {
+  test("ohne registrierten Body → Placeholder-Banner", () => {
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <KumikoScreen schema={schema} qn="status:screen:overview" />
+      </DispatcherProvider>,
+    );
+    expect(screen.getByTestId("kumiko-screen-dashboard-placeholder")).toBeTruthy();
+  });
+
+  test("WebDashboardBody rendert Stat- und List-Panels aus den Queries", async () => {
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <DashboardBodyProvider value={WebDashboardBody}>
+          <KumikoScreen schema={schema} qn="status:screen:overview" />
+        </DashboardBodyProvider>
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => expect(screen.getByText("99,98 %")).toBeTruthy());
+    expect(screen.getByTestId("dashboard-overview")).toBeTruthy();
+    // Stat-Panel: Label (Key-Fallback), Wert, Sub-Zeile aus dem Query-Record.
+    expect(screen.getByText("status:dashboard:uptime")).toBeTruthy();
+    expect(screen.getByText("letzte 90 Tage")).toBeTruthy();
+    // List-Panel: Row aus der paged envelope.
+    await waitFor(() => expect(screen.getByText("API-Ausfall")).toBeTruthy());
+  });
+});

package/src/__tests__/projection-list-actions.test.tsx

@@ -0,0 +1,89 @@
+import { describe, expect, mock, test } from "bun:test";
+import type { ProjectionListScreenDefinition } from "@cosmicdrift/kumiko-framework/ui-types";
+import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
+import type { FeatureSchema } from "@cosmicdrift/kumiko-renderer";
+import { DispatcherProvider, KumikoScreen } from "@cosmicdrift/kumiko-renderer";
+import { createMockDispatcher, fireEvent, render, screen, waitFor } from "./test-utils";
+
+// writeHandler-Row/Toolbar-Actions auf projectionList — der entityList-
+// Dispatch-Pfad gilt jetzt auch hier (vorher v1: nur navigate).
+
+const projectionScreen: ProjectionListScreenDefinition = {
+  id: "maintenance-list",
+  type: "projectionList",
+  query: "status:query:maintenance:upcoming",
+  columns: [{ field: "name", label: "status:col:name" }],
+  rowActions: [
+    {
+      kind: "writeHandler",
+      id: "start",
+      label: "status:action:start",
+      handler: "status:write:maintenance:start",
+    },
+  ],
+  toolbarActions: [
+    {
+      kind: "writeHandler",
+      id: "sync",
+      label: "status:action:sync",
+      handler: "status:write:maintenance:sync",
+      payload: { source: "manual" },
+    },
+  ],
+};
+
+const schema: FeatureSchema = {
+  featureName: "status",
+  entities: {},
+  screens: [projectionScreen],
+};
+
+function makeDispatcher(write: Dispatcher["write"]): Dispatcher {
+  return {
+    ...createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { rows: [{ id: "m1", name: "DB-Upgrade" }], nextCursor: null },
+      })) as unknown as Dispatcher["query"],
+    }),
+    write,
+  };
+}
+
+describe("projectionList writeHandler-Actions", () => {
+  test("Row-Action dispatcht den Handler mit Default-Payload {id}", async () => {
+    const write = mock(async (_type: string, _payload: unknown) => ({
+      isSuccess: true,
+      data: {},
+    }));
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher(write as unknown as Dispatcher["write"])}>
+        <KumikoScreen schema={schema} qn="status:screen:maintenance-list" />
+      </DispatcherProvider>,
+    );
+    await waitFor(() => expect(screen.getByText("DB-Upgrade")).toBeTruthy());
+
+    fireEvent.click(screen.getByRole("button", { name: "status:action:start" }));
+    await waitFor(() => expect(write).toHaveBeenCalledTimes(1));
+    expect(write.mock.calls[0]?.[0]).toBe("status:write:maintenance:start");
+    expect(write.mock.calls[0]?.[1]).toEqual({ id: "m1" });
+  });
+
+  test("Toolbar-Action dispatcht den Handler mit deklariertem Payload", async () => {
+    const write = mock(async (_type: string, _payload: unknown) => ({
+      isSuccess: true,
+      data: {},
+    }));
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher(write as unknown as Dispatcher["write"])}>
+        <KumikoScreen schema={schema} qn="status:screen:maintenance-list" />
+      </DispatcherProvider>,
+    );
+    await waitFor(() => expect(screen.getByText("DB-Upgrade")).toBeTruthy());
+
+    fireEvent.click(screen.getByRole("button", { name: "status:action:sync" }));
+    await waitFor(() => expect(write).toHaveBeenCalledTimes(1));
+    expect(write.mock.calls[0]?.[0]).toBe("status:write:maintenance:sync");
+    expect(write.mock.calls[0]?.[1]).toEqual({ source: "manual" });
+  });
+});

package/src/app/create-app.tsx

@@ -11,6 +11,7 @@ import {
   type ColumnRendererComponent,
   ColumnRenderersProvider,
   CustomScreensProvider,
+  DashboardBodyProvider,
   DispatcherProvider,
   type ExtensionSectionComponent,
   ExtensionSectionsProvider,
@@ -38,6 +39,7 @@ import { useBrowserTokensApi } from "../tokens";
 import { UpdateChecker } from "../version/update-checker";
 import { createBrowserLocaleResolver } from "./browser-locale";
 import { type ClientFeatureDefinition, stackWrappers } from "./client-plugin";
+import { WebDashboardBody } from "./dashboard-body";
 import { useBrowserNavApi } from "./nav";
 import { NavProvidersProvider } from "./nav-providers-context";
 import { type ResolverComponent, ResolversProvider } from "./resolvers-context";
@@ -285,20 +287,22 @@ export function createKumikoApp(options: CreateKumikoAppOptions = {}): { readonl
         <PrimitivesProvider value={primitives}>
           <DispatcherProvider dispatcher={dispatcher}>
             <LiveEventsProvider value={liveEvents}>
-              <CustomScreensProvider value={customScreens}>
-                <ColumnRenderersProvider value={columnRenderers}>
-                  <ExtensionSectionsProvider value={extensionSectionComponents}>
-                    <NavProvidersProvider value={navProviders} entities={navEntities}>
-                      <ResolversProvider resolvers={resolvers}>
-                        <ToastProvider>
-                          <UpdateChecker />
-                          {stackWrappers(providers, stackWrappers(gates, screenNode))}
-                        </ToastProvider>
-                      </ResolversProvider>
-                    </NavProvidersProvider>
-                  </ExtensionSectionsProvider>
-                </ColumnRenderersProvider>
-              </CustomScreensProvider>
+              <DashboardBodyProvider value={WebDashboardBody}>
+                <CustomScreensProvider value={customScreens}>
+                  <ColumnRenderersProvider value={columnRenderers}>
+                    <ExtensionSectionsProvider value={extensionSectionComponents}>
+                      <NavProvidersProvider value={navProviders} entities={navEntities}>
+                        <ResolversProvider resolvers={resolvers}>
+                          <ToastProvider>
+                            <UpdateChecker />
+                            {stackWrappers(providers, stackWrappers(gates, screenNode))}
+                          </ToastProvider>
+                        </ResolversProvider>
+                      </NavProvidersProvider>
+                    </ExtensionSectionsProvider>
+                  </ColumnRenderersProvider>
+                </CustomScreensProvider>
+              </DashboardBodyProvider>
             </LiveEventsProvider>
           </DispatcherProvider>
         </PrimitivesProvider>

package/src/app/dashboard-body.tsx

@@ -0,0 +1,146 @@
+// Web-Implementierung des dashboard-Screen-Typs: rendert die deklarierten
+// Panels über das Widget-Kit (StatCard, TimeseriesChart, QueryTable) in
+// einem responsiven Grid. Registriert via DashboardBodyProvider in
+// createKumikoApp — der KumikoScreen-Switch bleibt plattform-agnostisch.
+//
+// Panel-Daten-Contracts (siehe DashboardPanelDefinition in kumiko-framework):
+//   stat  → flaches Record, valueField/subField/toneField zeigen auf
+//           anzeigefertige Werte (der Query-Handler formatiert).
+//   chart → { points: { atMs, value | null }[], windowStartMs, windowEndMs }
+//   list  → paged envelope { rows, nextCursor, total? } wie projectionList.
+
+import type {
+  DashboardChartPanel,
+  DashboardListPanel,
+  DashboardStatPanel,
+} from "@cosmicdrift/kumiko-framework/ui-types";
+import { normalizeListColumn } from "@cosmicdrift/kumiko-framework/ui-types";
+import { type DashboardBodyProps, useQuery, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import type { ReactNode } from "react";
+import { TimeseriesChart, type TimeseriesPoint } from "../widgets/charts";
+import { QueryTable } from "../widgets/query-table";
+import { SectionCard } from "../widgets/section-card";
+import { StatCard, type StatTone } from "../widgets/stat";
+import { ErrorState, LoadingState } from "../widgets/states";
+
+const STAT_TONES: ReadonlySet<string> = new Set(["default", "positive", "warn"]);
+
+function StatPanelBody({
+  panel,
+  label,
+}: {
+  readonly panel: DashboardStatPanel;
+  readonly label: string;
+}): ReactNode {
+  const { data, error, loading, refetch } = useQuery<Readonly<Record<string, unknown>>>(
+    panel.query,
+    {},
+    { live: true },
+  );
+  if (loading && data === null) return <LoadingState rows={2} />;
+  if (error !== null) return <ErrorState error={error} onRetry={() => void refetch()} />;
+  const record = data ?? {};
+  const rawTone = panel.toneField !== undefined ? record[panel.toneField] : undefined;
+  const tone =
+    typeof rawTone === "string" && STAT_TONES.has(rawTone) ? (rawTone as StatTone) : "default";
+  const sub = panel.subField !== undefined ? record[panel.subField] : undefined;
+  return (
+    <StatCard
+      label={label}
+      value={String(record[panel.valueField] ?? "—")}
+      tone={tone}
+      {...(sub !== undefined && sub !== null && { sub: String(sub) })}
+      testId={`dashboard-panel-${panel.id}`}
+    />
+  );
+}
+
+type TimeseriesEnvelope = {
+  readonly points: readonly TimeseriesPoint[];
+  readonly windowStartMs: number;
+  readonly windowEndMs: number;
+};
+
+function ChartPanelBody({
+  panel,
+  label,
+}: {
+  readonly panel: DashboardChartPanel;
+  readonly label: string;
+}): ReactNode {
+  const t = useTranslation();
+  const { data, error, loading, refetch } = useQuery<TimeseriesEnvelope>(
+    panel.query,
+    {},
+    { live: true },
+  );
+  if (loading && data === null) return <LoadingState rows={3} />;
+  if (error !== null) return <ErrorState error={error} onRetry={() => void refetch()} />;
+  return (
+    <SectionCard title={label} testId={`dashboard-panel-${panel.id}`}>
+      <TimeseriesChart
+        points={data?.points ?? []}
+        windowStartMs={data?.windowStartMs ?? 0}
+        windowEndMs={data?.windowEndMs ?? 1}
+        ariaLabel={label}
+        emptyContent={t("kumiko.list.no-entries")}
+      />
+    </SectionCard>
+  );
+}
+
+function ListPanelBody({
+  panel,
+  label,
+}: {
+  readonly panel: DashboardListPanel;
+  readonly label: string;
+}): ReactNode {
+  const t = useTranslation();
+  return (
+    <SectionCard title={label} testId={`dashboard-panel-${panel.id}`}>
+      <QueryTable<{ readonly rows: readonly Readonly<Record<string, unknown>>[] }>
+        query={panel.query}
+        live
+        columns={panel.columns.map((c) => {
+          const normalized = normalizeListColumn(c);
+          return {
+            field: normalized.field,
+            label: t(normalized.label ?? normalized.field),
+          };
+        })}
+        rows={(data) => data.rows}
+      />
+    </SectionCard>
+  );
+}
+
+export function WebDashboardBody({ screen, translate }: DashboardBodyProps): ReactNode {
+  const t = useTranslation();
+  const effectiveTranslate = translate ?? t;
+  return (
+    <div
+      className="grid gap-4 p-6 sm:grid-cols-2 lg:grid-cols-4"
+      data-testid={`dashboard-${screen.id}`}
+    >
+      {screen.panels.map((panel) => {
+        const label = effectiveTranslate(panel.label);
+        if (panel.kind === "stat") {
+          return <StatPanelBody key={panel.id} panel={panel} label={label} />;
+        }
+        if (panel.kind === "chart") {
+          return (
+            <div key={panel.id} className="sm:col-span-2 lg:col-span-4">
+              <ChartPanelBody panel={panel} label={label} />
+            </div>
+          );
+        }
+        return (
+          <div key={panel.id} className="sm:col-span-2 lg:col-span-4">
+            <ListPanelBody panel={panel} label={label} />
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/index.ts

@@ -154,3 +154,31 @@ export {
   useBrowserTokensApi,
 } from "./tokens";
 export { SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider } from "./ui/sidebar";
+export type {
+  QueryTableColumn,
+  QueryTableProps,
+  StatDelta,
+  StatTone,
+  StatusBarEntry,
+  StatusTone,
+  TimeseriesPoint,
+} from "./widgets";
+export {
+  CollapsibleSection,
+  DetailList,
+  EmptyState,
+  ErrorState,
+  LoadingState,
+  MiniStat,
+  ModeSwitch,
+  ProgressBar,
+  QueryTable,
+  SectionCard,
+  Sparkline,
+  STATUS_TONE_TEXT,
+  StatCard,
+  StatusBadge,
+  StatusBarChart,
+  smoothPath,
+  TimeseriesChart,
+} from "./widgets";

package/src/primitives/index.tsx

@@ -29,6 +29,7 @@ import {
   type GridProps,
   type HeadingProps,
   type InputProps,
+  type LinkProps,
   type SectionProps,
   type TextProps,
   useColumnRenderer,
@@ -59,7 +60,7 @@ import {
 } from "react";
 import { cn } from "../lib/cn";
 import { Badge } from "../ui/badge";
-import { Button as UiButton } from "../ui/button";
+import { buttonVariants, Button as UiButton } from "../ui/button";
 import { Checkbox } from "../ui/checkbox";
 import { Input as UiInput } from "../ui/input";
 import { Label as UiLabel } from "../ui/label";
@@ -102,11 +103,12 @@ const cardFooterBorder = "border-t bg-muted/30";
 
 // Contract-Variant → shadcn-Variant: secondary war schon immer der
 // bordered-bg-background-Look = shadcns `outline`. primary→default,
-// danger→destructive.
+// danger→destructive, link→link (kein BG, underline on hover).
 const BUTTON_VARIANT = {
   primary: "default",
   secondary: "outline",
   danger: "destructive",
+  link: "link",
 } as const;
 
 function DefaultButton({
@@ -126,6 +128,9 @@ function DefaultButton({
       data-testid={testId}
       data-loading={loading === true ? "true" : undefined}
       variant={BUTTON_VARIANT[variant]}
+      // link-Variant rendert text-artig (Inline-Link im Fließtext/Banner),
+      // nicht als gepolsterte Buttonfläche.
+      className={variant === "link" ? "h-auto px-0 py-0" : undefined}
     >
       {loading === true ? <Loader2 className="size-4 animate-spin" aria-hidden="true" /> : children}
     </UiButton>
@@ -1590,11 +1595,50 @@ function DefaultText({ variant = "body", children, testId }: TextProps): ReactNo
           {children}
         </span>
       );
+    case "muted":
+      return (
+        <span data-testid={testId} className="text-sm text-muted-foreground">
+          {children}
+        </span>
+      );
     default:
       return <span data-testid={testId}>{children}</span>;
   }
 }
 
+// ---- Link (anchor mit Button-/Muted-Optik) ----
+
+// `button` nutzt die Primary-Buttonfläche auf einem semantischen <a> —
+// der Standard für „weiter zu"-Navigationen nach Success-States (ehem.
+// authButtonClass), `muted` der dezente Sekundär-Link (ehem.
+// authMutedLinkClass).
+function DefaultLink({
+  href,
+  variant = "default",
+  target,
+  className,
+  children,
+  testId,
+}: LinkProps): ReactNode {
+  const variantClass =
+    variant === "button"
+      ? buttonVariants({ variant: "default" })
+      : variant === "muted"
+        ? "text-sm text-muted-foreground underline-offset-4 hover:text-foreground hover:underline"
+        : "text-primary underline-offset-4 hover:underline";
+  return (
+    <a
+      href={href}
+      target={target}
+      rel={target === "_blank" ? "noreferrer" : undefined}
+      data-testid={testId}
+      className={cn(variantClass, className)}
+    >
+      {children}
+    </a>
+  );
+}
+
 function DefaultHeading({ variant = "page", children, testId }: HeadingProps): ReactNode {
   // Page-Heading = h1, sehr selten in einer App (max 1 pro Screen).
   // Section-Heading = h2 mit uppercase + muted-foreground — derselbe
@@ -1685,4 +1729,5 @@ export const defaultPrimitives: CorePrimitives = {
   Lightbox: DefaultLightbox,
   ConfigSourceBadge: DefaultConfigSourceBadge,
   ConfigCascadeView: DefaultConfigCascadeView,
+  Link: DefaultLink,
 };

package/src/styles.css

@@ -80,6 +80,14 @@
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
+
+  /* Semantische Status-Farben (Widgets: StatusBadge, Charts, StatCard-Tones).
+     @theme generiert die Utilities (text-status-ok, bg-status-warn/10, …).
+     Dark-Werte; Light-Overrides unten. Apps überschreiben in ihrer styles.css. */
+  --color-status-ok: #22c55e;
+  --color-status-warn: #f59e0b;
+  --color-status-bad: #ef4444;
+  --color-status-critical: #f87171;
 }
 
 /* Card-Chrome-Maße — Framework-Defaults. Eine App überschreibt selektiv in
@@ -132,6 +140,12 @@
     --color-sidebar-accent-foreground: hsl(0 0% 9%);
     --color-sidebar-border: hsl(0 0% 89.8%);
     --color-sidebar-ring: hsl(0 0% 63%);
+
+    /* Status-Farben Light — kräftiger/dunkler als die Dark-Werte. */
+    --color-status-ok: #16a34a;
+    --color-status-warn: #d97706;
+    --color-status-bad: #dc2626;
+    --color-status-critical: #991b1b;
   }
 
   * {

package/src/widgets/__tests__/query-table.test.tsx

@@ -0,0 +1,118 @@
+import { describe, expect, mock, test } from "bun:test";
+import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
+import { DispatcherProvider } from "@cosmicdrift/kumiko-renderer";
+import type { ReactNode } from "react";
+import {
+  createMockDispatcher,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "../../__tests__/test-utils";
+import { QueryTable } from "../query-table";
+
+function renderWithDispatcher(ui: ReactNode, dispatcher: Dispatcher) {
+  return render(<DispatcherProvider dispatcher={dispatcher}>{ui}</DispatcherProvider>);
+}
+
+const COLUMNS = [
+  { field: "name", label: "Name" },
+  { field: "plan", label: "Plan" },
+] as const;
+
+describe("QueryTable", () => {
+  test("rendert Query-Result als DataTable-Rows", async () => {
+    const dispatcher = createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: [
+          { id: "t1", name: "Acme", plan: "pro" },
+          { id: "t2", name: "Beta GmbH", plan: "free" },
+        ],
+      })) as unknown as Dispatcher["query"],
+    });
+    renderWithDispatcher(
+      <QueryTable query="tenant:query:tenant:list" columns={COLUMNS} testId="tbl" />,
+      dispatcher,
+    );
+    await waitFor(() => expect(screen.getByText("Acme")).toBeTruthy());
+    expect(screen.getByText("Beta GmbH")).toBeTruthy();
+    expect(screen.getByText("Name")).toBeTruthy();
+  });
+
+  test("Row-Click liefert die geklickte Row", async () => {
+    const onRowClick = mock((_row: { id: string }) => {});
+    const dispatcher = createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: [{ id: "t1", name: "Acme", plan: "pro" }],
+      })) as unknown as Dispatcher["query"],
+    });
+    renderWithDispatcher(
+      <QueryTable query="tenant:query:tenant:list" columns={COLUMNS} onRowClick={onRowClick} />,
+      dispatcher,
+    );
+    await waitFor(() => expect(screen.getByText("Acme")).toBeTruthy());
+    fireEvent.click(screen.getByText("Acme"));
+    expect(onRowClick).toHaveBeenCalledTimes(1);
+    expect(onRowClick.mock.calls[0]?.[0]?.id).toBe("t1");
+  });
+
+  test("Fehler → ErrorState, Retry refetcht", async () => {
+    let calls = 0;
+    const dispatcher = createMockDispatcher({
+      query: (async () => {
+        calls += 1;
+        if (calls === 1) {
+          return {
+            isSuccess: false,
+            error: { code: "internal", message: "kaputt", i18nKey: "errors.internal" },
+          };
+        }
+        return { isSuccess: true, data: [{ id: "t1", name: "Acme", plan: "pro" }] };
+      }) as unknown as Dispatcher["query"],
+    });
+    renderWithDispatcher(
+      <QueryTable query="tenant:query:tenant:list" columns={COLUMNS} testId="tbl" />,
+      dispatcher,
+    );
+    await waitFor(() => expect(screen.getByRole("button")).toBeTruthy());
+    fireEvent.click(screen.getByRole("button"));
+    await waitFor(() => expect(screen.getByText("Acme")).toBeTruthy());
+    expect(calls).toBe(2);
+  });
+
+  test("leeres Result rendert Empty-State", async () => {
+    const dispatcher = createMockDispatcher({
+      query: (async () => ({ isSuccess: true, data: [] })) as unknown as Dispatcher["query"],
+    });
+    const { container } = renderWithDispatcher(
+      <QueryTable
+        query="tenant:query:tenant:list"
+        columns={COLUMNS}
+        emptyState={<span>Keine Tenants</span>}
+      />,
+      dispatcher,
+    );
+    await waitFor(() => expect(screen.getByText("Keine Tenants")).toBeTruthy());
+    expect(container.querySelectorAll("tbody tr").length).toBe(0);
+  });
+
+  test("rows-Selector zieht Rows aus verschachteltem Result", async () => {
+    const dispatcher = createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { items: [{ id: "x", name: "Nested", plan: "pro" }], total: 1 },
+      })) as unknown as Dispatcher["query"],
+    });
+    renderWithDispatcher(
+      <QueryTable<{ items: readonly Record<string, unknown>[]; total: number }>
+        query="tenant:query:tenant:list"
+        columns={COLUMNS}
+        rows={(data) => data.items}
+      />,
+      dispatcher,
+    );
+    await waitFor(() => expect(screen.getByText("Nested")).toBeTruthy());
+  });
+});