@cosmicdrift/kumiko-bundled-features 0.124.0 → 0.125.0

package/src/feature-toggles/__tests__/toggle-admin.boot.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, test } from "bun:test";
+import { validateBoot } from "@cosmicdrift/kumiko-framework/engine";
+import { rolesOf } from "@cosmicdrift/kumiko-framework/testing";
+import { FeatureToggleHandlers, FeatureToggleQueries, TOGGLE_ADMIN_SCREEN_ID } from "../constants";
+import { createFeatureTogglesFeature } from "../feature";
+
+describe("feature-toggles screen + handler access alignment", () => {
+  const features = [createFeatureTogglesFeature()];
+
+  test("boot-validates with toggle-admin screen registered", () => {
+    expect(() => validateBoot(features)).not.toThrow();
+  });
+
+  test("toggle-admin screen is SystemAdmin-gated", () => {
+    const toggles = createFeatureTogglesFeature();
+    const screen = toggles.screens[TOGGLE_ADMIN_SCREEN_ID];
+    expect(screen?.type).toBe("custom");
+    if (screen && "access" in screen && screen.access && "roles" in screen.access) {
+      expect(screen.access.roles).toEqual(["SystemAdmin"]);
+    }
+  });
+
+  test("queries and set handler are SystemAdmin-only", () => {
+    const toggles = createFeatureTogglesFeature();
+    expect(rolesOf(toggles.queryHandlers["list"]?.access)).toEqual(["SystemAdmin"]);
+    expect(rolesOf(toggles.queryHandlers["registered"]?.access)).toEqual(["SystemAdmin"]);
+    expect(rolesOf(toggles.writeHandlers["set"]?.access)).toEqual(["SystemAdmin"]);
+    void FeatureToggleQueries;
+    void FeatureToggleHandlers;
+  });
+});

package/src/feature-toggles/__tests__/toggle-admin.security.integration.test.ts

@@ -0,0 +1,69 @@
+import { afterAll, beforeAll, describe, expect, test } from "bun:test";
+import {
+  createTestUser,
+  setupTestStack,
+  type TestStack,
+  unsafePushTables,
+} from "@cosmicdrift/kumiko-framework/stack";
+import { rolesOf } from "@cosmicdrift/kumiko-framework/testing";
+import { FeatureToggleHandlers, FeatureToggleQueries, TOGGLE_ADMIN_SCREEN_ID } from "../constants";
+import { createFeatureTogglesFeature } from "../feature";
+import { globalFeatureStateTable } from "../global-feature-state-table";
+
+let stack: TestStack;
+
+beforeAll(async () => {
+  stack = await setupTestStack({
+    features: [createFeatureTogglesFeature()],
+  });
+  await unsafePushTables(stack.db, { globalFeatureStateTable });
+});
+
+afterAll(async () => {
+  await stack.cleanup();
+});
+
+describe("feature-toggles access matrix", () => {
+  test("queries, set, and screen are SystemAdmin-only", () => {
+    expect(rolesOf(stack.registry.getQueryHandler(FeatureToggleQueries.list)?.access)).toEqual([
+      "SystemAdmin",
+    ]);
+    expect(
+      rolesOf(stack.registry.getQueryHandler(FeatureToggleQueries.registered)?.access),
+    ).toEqual(["SystemAdmin"]);
+    expect(rolesOf(stack.registry.getWriteHandler(FeatureToggleHandlers.set)?.access)).toEqual([
+      "SystemAdmin",
+    ]);
+    const feature = createFeatureTogglesFeature();
+    const screen = feature.screens[TOGGLE_ADMIN_SCREEN_ID];
+    if (screen && "access" in screen && screen.access && "roles" in screen.access) {
+      expect(screen.access.roles).toEqual(["SystemAdmin"]);
+    }
+  });
+});
+
+describe("feature-toggles HTTP access", () => {
+  test("SystemAdmin can query list and registered", async () => {
+    const admin = createTestUser({ id: 21, roles: ["SystemAdmin"] });
+    const list = await stack.http.queryOk<
+      { items?: readonly unknown[] } | { rows?: readonly unknown[] }
+    >(FeatureToggleQueries.list, {}, admin);
+    expect(typeof list).toBe("object");
+    const registered = await stack.http.queryOk<{ items: readonly unknown[] }>(
+      FeatureToggleQueries.registered,
+      {},
+      admin,
+    );
+    expect(Array.isArray(registered.items)).toBe(true);
+  });
+
+  test("TenantAdmin gets 403 on list, registered, and set", async () => {
+    const user = createTestUser({ id: 22, roles: ["TenantAdmin"] });
+    expect((await stack.http.query(FeatureToggleQueries.list, {}, user)).status).toBe(403);
+    expect((await stack.http.query(FeatureToggleQueries.registered, {}, user)).status).toBe(403);
+    expect(
+      (await stack.http.write(FeatureToggleHandlers.set, { featureName: "x", enabled: true }, user))
+        .status,
+    ).toBe(403);
+  });
+});

package/src/feature-toggles/constants.ts

@@ -1,3 +1,6 @@
+// @runtime client
+export const FEATURE_TOGGLES_FEATURE = "feature-toggles" as const;
+
 // Fully-qualified event name for feature-toggle changes. Kept as a constant
 // so write-handler + tests reference one source.
 export const FEATURE_TOGGLE_SET_EVENT_NAME = "feature-toggles:event:toggle-set";
@@ -18,3 +21,14 @@ export const FeatureToggleErrors = {
   // Prevents typos from silently piling up orphan rows.
   unknownFeature: "unknown_feature",
 } as const;
+
+export const FeatureToggleHandlers = {
+  set: "feature-toggles:write:set",
+} as const;
+
+export const FeatureToggleQueries = {
+  list: "feature-toggles:query:list",
+  registered: "feature-toggles:query:registered",
+} as const;
+
+export const TOGGLE_ADMIN_SCREEN_ID = "toggle-admin" as const;

package/src/feature-toggles/feature.ts

@@ -1,5 +1,5 @@
 import { defineFeature, type FeatureDefinition } from "@cosmicdrift/kumiko-framework/engine";
-import { FEATURE_TOGGLE_SET_EVENT_NAME } from "./constants";
+import { FEATURE_TOGGLE_SET_EVENT_NAME, TOGGLE_ADMIN_SCREEN_ID } from "./constants";
 import { featureToggleSetSchema } from "./events";
 import { listQuery } from "./handlers/list.query";
 import { registeredQuery } from "./handlers/registered.query";
@@ -62,6 +62,19 @@ export function createFeatureTogglesFeature(
       registered: r.queryHandler(registeredQuery),
     };
 
+    r.screen({
+      id: TOGGLE_ADMIN_SCREEN_ID,
+      type: "custom",
+      renderer: { react: { __component: "ToggleAdminScreen" } },
+      access: { roles: ["SystemAdmin"] },
+    });
+    r.nav({
+      id: "toggle-admin",
+      label: "feature-toggles:nav.toggleAdmin",
+      screen: "feature-toggles:screen:toggle-admin",
+      order: 20,
+    });
+
     // toggle-cache-sync — multi-instance snapshot propagation. Every
     // API/worker instance runs its own dispatcher cursor on this MSP
     // (delivery: "per-instance") and converges its in-memory snapshot on

package/src/feature-toggles/handlers/list.query.ts

@@ -10,7 +10,7 @@ import { globalFeatureStateTable } from "../global-feature-state-table";
 export const listQuery = defineQueryHandler({
   name: "list",
   schema: z.object({}),
-  access: { roles: ["SystemAdmin", "Admin"] },
+  access: { roles: ["SystemAdmin"] },
   handler: async (_event, ctx) => {
     type Row = {
       featureName: string;

package/src/feature-toggles/handlers/registered.query.ts

@@ -14,7 +14,7 @@ import { globalFeatureStateTable } from "../global-feature-state-table";
 export const registeredQuery = defineQueryHandler({
   name: "registered",
   schema: z.object({}),
-  access: { roles: ["SystemAdmin", "Admin"] },
+  access: { roles: ["SystemAdmin"] },
   handler: async (_event, ctx) => {
     type OverrideRow = { featureName: string; enabled: boolean };
     const overrideRows = await selectMany<OverrideRow>(ctx.db.raw, globalFeatureStateTable);

package/src/feature-toggles/index.ts

@@ -1,3 +1,9 @@
+export {
+  FEATURE_TOGGLES_FEATURE,
+  FeatureToggleHandlers,
+  FeatureToggleQueries,
+  TOGGLE_ADMIN_SCREEN_ID,
+} from "./constants";
 export {
   createFeatureToggleRuntime,
   createFeatureTogglesFeature,

package/src/feature-toggles/web/client-plugin.tsx

@@ -0,0 +1,22 @@
+// @runtime client
+import { mergeTranslations, type TranslationsByLocale } from "@cosmicdrift/kumiko-renderer";
+import type { ClientFeatureDefinition } from "@cosmicdrift/kumiko-renderer-web";
+import { FEATURE_TOGGLES_FEATURE, TOGGLE_ADMIN_SCREEN_ID } from "../constants";
+import { defaultTranslations } from "./i18n";
+import { ToggleAdminScreen } from "./toggle-admin-screen";
+
+export type FeatureTogglesClientOptions = {
+  readonly translations?: TranslationsByLocale;
+};
+
+export function featureTogglesClient(
+  options?: FeatureTogglesClientOptions,
+): ClientFeatureDefinition {
+  return {
+    name: FEATURE_TOGGLES_FEATURE,
+    translations: mergeTranslations(defaultTranslations, options?.translations ?? {}),
+    components: {
+      [TOGGLE_ADMIN_SCREEN_ID]: ToggleAdminScreen,
+    },
+  };
+}

package/src/feature-toggles/web/i18n.ts

@@ -0,0 +1,29 @@
+// @runtime client
+import type { TranslationsByLocale } from "@cosmicdrift/kumiko-renderer";
+
+export const defaultTranslations: TranslationsByLocale = {
+  de: {
+    "feature-toggles.admin.title": "Feature-Toggles",
+    "feature-toggles.admin.loading": "Lade Feature-Toggles…",
+    "feature-toggles.admin.col.feature": "Feature",
+    "feature-toggles.admin.col.default": "Default",
+    "feature-toggles.admin.col.override": "Override",
+    "feature-toggles.admin.col.effective": "Effektiv",
+    "feature-toggles.admin.toggle": "Umschalten",
+    "feature-toggles.admin.saving": "Speichert…",
+    "feature-toggles.admin.alwaysOn": "immer an",
+    "feature-toggles:nav.toggleAdmin": "Feature-Toggles",
+  },
+  en: {
+    "feature-toggles.admin.title": "Feature toggles",
+    "feature-toggles.admin.loading": "Loading feature toggles…",
+    "feature-toggles.admin.col.feature": "Feature",
+    "feature-toggles.admin.col.default": "Default",
+    "feature-toggles.admin.col.override": "Override",
+    "feature-toggles.admin.col.effective": "Effective",
+    "feature-toggles.admin.toggle": "Toggle",
+    "feature-toggles.admin.saving": "Saving…",
+    "feature-toggles.admin.alwaysOn": "always on",
+    "feature-toggles:nav.toggleAdmin": "Feature toggles",
+  },
+};

package/src/feature-toggles/web/index.ts

@@ -0,0 +1,6 @@
+// @runtime client
+export {
+  type FeatureTogglesClientOptions,
+  featureTogglesClient,
+} from "./client-plugin";
+export { ToggleAdminScreen } from "./toggle-admin-screen";

package/src/feature-toggles/web/toggle-admin-screen.tsx

@@ -0,0 +1,136 @@
+// @runtime client
+import { useDispatcher, usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { FormScreenShell } from "@cosmicdrift/kumiko-renderer-web";
+import { type ReactNode, useCallback, useEffect, useState } from "react";
+import { FeatureToggleHandlers, FeatureToggleQueries } from "../constants";
+
+type ToggleRow = {
+  readonly name: string;
+  readonly toggleable: boolean;
+  readonly default: boolean | null;
+  readonly override: boolean | null;
+  readonly effective: boolean | null;
+};
+
+type RegisteredResponse = {
+  readonly items: readonly ToggleRow[];
+};
+
+type State =
+  | { readonly kind: "loading" }
+  | { readonly kind: "error"; readonly message: string }
+  | { readonly kind: "ready"; readonly items: readonly ToggleRow[] };
+
+export function ToggleAdminScreen(): ReactNode {
+  const t = useTranslation();
+  const { Banner, Card, DataTable, Heading, Text } = usePrimitives();
+  const dispatcher = useDispatcher();
+  const [state, setState] = useState<State>({ kind: "loading" });
+  const [actionError, setActionError] = useState<string | null>(null);
+
+  const load = useCallback(async (): Promise<void> => {
+    setState({ kind: "loading" });
+    const res = await dispatcher.query<RegisteredResponse>(FeatureToggleQueries.registered, {});
+    if (!res.isSuccess) {
+      setState({ kind: "error", message: res.error.message });
+      return;
+    }
+    setState({ kind: "ready", items: res.data.items });
+  }, [dispatcher]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  const onSet = async (featureName: string, enabled: boolean): Promise<void> => {
+    setActionError(null);
+    const res = await dispatcher.write(FeatureToggleHandlers.set, { featureName, enabled });
+    if (!res.isSuccess) {
+      setActionError(res.error.message);
+      return;
+    }
+    await load();
+  };
+
+  if (state.kind === "loading") {
+    return (
+      <FormScreenShell testId="toggle-admin-screen">
+        <Text variant="small">{t("feature-toggles.admin.loading")}</Text>
+      </FormScreenShell>
+    );
+  }
+
+  if (state.kind === "error") {
+    return (
+      <FormScreenShell testId="toggle-admin-screen">
+        <Banner variant="error">{state.message}</Banner>
+      </FormScreenShell>
+    );
+  }
+
+  return (
+    <FormScreenShell testId="toggle-admin-screen" className="flex max-w-5xl flex-col gap-6">
+      <Heading variant="page">{t("feature-toggles.admin.title")}</Heading>
+
+      {actionError !== null && <Banner variant="error">{actionError}</Banner>}
+
+      <Card options={{ padded: false }}>
+        <DataTable
+          testId="toggle-admin-table"
+          columns={[
+            {
+              field: "feature",
+              label: t("feature-toggles.admin.col.feature"),
+              type: "string",
+              sortable: false,
+            },
+            {
+              field: "default",
+              label: t("feature-toggles.admin.col.default"),
+              type: "string",
+              sortable: false,
+            },
+            {
+              field: "override",
+              label: t("feature-toggles.admin.col.override"),
+              type: "string",
+              sortable: false,
+            },
+            {
+              field: "effective",
+              label: t("feature-toggles.admin.col.effective"),
+              type: "string",
+              sortable: false,
+            },
+          ]}
+          rows={state.items.map((row) => ({
+            id: row.name,
+            values: {
+              feature: row.name,
+              default: formatFlag(row.default),
+              override: formatFlag(row.override),
+              effective: formatFlag(row.effective),
+              toggleable: row.toggleable,
+              effectiveBool: row.effective ?? row.default ?? false,
+            },
+          }))}
+          rowActions={[
+            {
+              id: "toggle",
+              label: t("feature-toggles.admin.toggle"),
+              style: "secondary",
+              isVisible: (row) => row.values["toggleable"] === true,
+              onTrigger: (row) => void onSet(row.id, !(row.values["effectiveBool"] as boolean)),
+            },
+          ]}
+          rowActionMode="inline"
+        />
+      </Card>
+    </FormScreenShell>
+  );
+}
+
+function formatFlag(value: boolean | null): string {
+  if (value === null) return "inherit";
+  return value ? "on" : "off";
+}

package/src/jobs/__tests__/jobs-screens.boot.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, test } from "bun:test";
+import { validateBoot } from "@cosmicdrift/kumiko-framework/engine";
+import { rolesOf } from "@cosmicdrift/kumiko-framework/testing";
+import { createConfigFeature } from "../../config/feature";
+import { JOB_RUN_DETAIL_SCREEN_ID, JOB_RUNS_SCREEN_ID } from "../constants";
+import { createJobsFeature } from "../feature";
+
+const SYSTEM_ADMIN_ROLES = ["SystemAdmin"] as const;
+
+describe("jobs screens + handler access alignment", () => {
+  const features = [createConfigFeature(), createJobsFeature()];
+
+  test("boot-validates with job-runs screens registered", () => {
+    expect(() => validateBoot(features)).not.toThrow();
+  });
+
+  test("job-runs screens are SystemAdmin-gated", () => {
+    const jobs = createJobsFeature();
+    for (const id of [JOB_RUNS_SCREEN_ID, JOB_RUN_DETAIL_SCREEN_ID] as const) {
+      const screen = jobs.screens[id];
+      expect(screen?.type).toBe("custom");
+      if (screen && "access" in screen && screen.access && "roles" in screen.access) {
+        expect(screen.access.roles).toEqual(SYSTEM_ADMIN_ROLES);
+      }
+    }
+  });
+
+  test("jobs queries + operator writes share SystemAdmin access", () => {
+    const jobs = createJobsFeature();
+    const roles = [...SYSTEM_ADMIN_ROLES];
+    expect(rolesOf(jobs.queryHandlers["list"]?.access)).toEqual(roles);
+    expect(rolesOf(jobs.queryHandlers["details"]?.access)).toEqual(roles);
+    expect(rolesOf(jobs.writeHandlers["trigger"]?.access)).toEqual(roles);
+    expect(rolesOf(jobs.writeHandlers["retry"]?.access)).toEqual(roles);
+  });
+});

package/src/jobs/__tests__/jobs-security.integration.test.ts

@@ -0,0 +1,108 @@
+// Security integration tests for jobs operator HTTP surface.
+// Real HTTP via setupTestStack — no mocks.
+
+import { afterAll, beforeAll, describe, expect, test } from "bun:test";
+import { defineFeature, type SessionUser } from "@cosmicdrift/kumiko-framework/engine";
+import {
+  createTestUser,
+  setupTestStack,
+  type TestStack,
+  TestUsers,
+  unsafePushTables,
+} from "@cosmicdrift/kumiko-framework/stack";
+import { rolesOf } from "@cosmicdrift/kumiko-framework/testing";
+import { createConfigFeature } from "../../config/feature";
+import {
+  JOB_RUN_DETAIL_SCREEN_ID,
+  JOB_RUNS_SCREEN_ID,
+  JobHandlers,
+  JobQueries,
+} from "../constants";
+import { createJobsFeature } from "../feature";
+import { jobRunLogsTable, jobRunsTable } from "../job-run-table";
+
+const SYSTEM_ADMIN_ROLES = ["SystemAdmin"] as const;
+
+const noopJobFeature = defineFeature("jobs-sec-app", (r) => {
+  r.job("ping", { trigger: { manual: true } }, async () => {});
+});
+
+let stack: TestStack;
+
+const systemAdmin = TestUsers.systemAdmin;
+const tenantAdmin: SessionUser = createTestUser({ id: 3, roles: ["TenantAdmin"] });
+const regularUser: SessionUser = createTestUser({ id: 4, roles: ["User"] });
+
+beforeAll(async () => {
+  stack = await setupTestStack({
+    features: [createConfigFeature(), noopJobFeature, createJobsFeature()],
+  });
+  await unsafePushTables(stack.db, { jobRunsTable, jobRunLogsTable });
+});
+
+afterAll(async () => {
+  await stack.cleanup();
+});
+
+describe("access matrix: jobs operator surface is SystemAdmin-only", () => {
+  test("list, detail, trigger, retry handlers share SystemAdmin", () => {
+    const roles = [...SYSTEM_ADMIN_ROLES];
+    expect(rolesOf(stack.registry.getQueryHandler(JobQueries.list)?.access)).toEqual(roles);
+    expect(rolesOf(stack.registry.getQueryHandler(JobQueries.details)?.access)).toEqual(roles);
+    expect(rolesOf(stack.registry.getWriteHandler(JobHandlers.trigger)?.access)).toEqual(roles);
+    expect(rolesOf(stack.registry.getWriteHandler(JobHandlers.retry)?.access)).toEqual(roles);
+  });
+
+  test("job screens match SystemAdmin handler access", () => {
+    const jobs = createJobsFeature();
+    for (const id of [JOB_RUNS_SCREEN_ID, JOB_RUN_DETAIL_SCREEN_ID] as const) {
+      const screen = jobs.screens[id];
+      if (screen && "access" in screen && screen.access && "roles" in screen.access) {
+        expect(screen.access.roles).toEqual(SYSTEM_ADMIN_ROLES);
+      }
+    }
+  });
+});
+
+describe("non-SystemAdmin denied jobs HTTP surface", () => {
+  test("TenantAdmin 403 on list, detail, trigger", async () => {
+    for (const fn of [
+      () => stack.http.query(JobQueries.list, {}, tenantAdmin),
+      () =>
+        stack.http.query(
+          JobQueries.details,
+          { runId: "00000000-0000-4000-8000-000000000099" },
+          tenantAdmin,
+        ),
+      () =>
+        stack.http.write(JobHandlers.trigger, { jobName: "jobs-sec-app:job:ping" }, tenantAdmin),
+    ] as const) {
+      const res = await fn();
+      expect(res.status).toBe(403);
+    }
+  });
+
+  test("regular User 403 on list and trigger", async () => {
+    expect((await stack.http.query(JobQueries.list, {}, regularUser)).status).toBe(403);
+    expect(
+      (
+        await stack.http.write(
+          JobHandlers.trigger,
+          { jobName: "jobs-sec-app:job:ping" },
+          regularUser,
+        )
+      ).status,
+    ).toBe(403);
+  });
+});
+
+describe("SystemAdmin can use jobs queries", () => {
+  test("empty list is OK", async () => {
+    const res = await stack.http.queryOk<{ rows: readonly unknown[] }>(
+      JobQueries.list,
+      {},
+      systemAdmin,
+    );
+    expect(Array.isArray(res.rows)).toBe(true);
+  });
+});

package/src/jobs/constants.ts

@@ -1,4 +1,5 @@
-// Feature name
+// @runtime client
+// Feature name + qualified names for server handlers and web screens.
 export const JOBS_FEATURE = "jobs" as const;
 
 // Qualified write handler names (QN format: scope:type:name)
@@ -19,3 +20,9 @@ export const JobErrors = {
   notFound: "not_found",
   onlyFailedCanRetry: "only_failed_jobs_can_be_retried",
 } as const;
+
+/** SystemAdmin job-runs list. Nav: `jobs:screen:job-runs`. */
+export const JOB_RUNS_SCREEN_ID = "job-runs" as const;
+
+/** Run detail — route entityId is the run uuid. Nav: `jobs:screen:job-run-detail`. */
+export const JOB_RUN_DETAIL_SCREEN_ID = "job-run-detail" as const;

package/src/jobs/feature.ts

@@ -5,6 +5,7 @@ import {
   type FeatureDefinition,
 } from "@cosmicdrift/kumiko-framework/engine";
 import type { z } from "zod";
+import { JOB_RUN_DETAIL_SCREEN_ID, JOB_RUNS_SCREEN_ID } from "./constants";
 // Event-payload schemas live in a sibling module so the logger can import
 // them without the cycle jobs-feature ↔ job-run-logger. The logger parses
 // payloads against these schemas before low-level append() — that's what
@@ -18,6 +19,7 @@ import {
 } from "./handlers/projection-rebuild.job";
 import { retryWrite } from "./handlers/retry.write";
 import { triggerWrite } from "./handlers/trigger.write";
+import { JOBS_I18N } from "./i18n";
 import {
   JOB_RUN_COMPLETED_EVENT,
   JOB_RUN_FAILED_EVENT,
@@ -182,6 +184,30 @@ export function createJobsFeature(): FeatureDefinition {
       detail: r.queryHandler(detailQuery),
     };
 
+    const systemAdminAccess = { roles: ["SystemAdmin"] as const };
+
+    r.translations({ keys: JOBS_I18N });
+
+    r.screen({
+      id: JOB_RUNS_SCREEN_ID,
+      type: "custom",
+      renderer: { react: { __component: "JobRunsScreen" } },
+      access: systemAdminAccess,
+    });
+    r.screen({
+      id: JOB_RUN_DETAIL_SCREEN_ID,
+      type: "custom",
+      renderer: { react: { __component: "JobRunDetailScreen" } },
+      access: systemAdminAccess,
+    });
+    r.nav({
+      id: "job-runs",
+      label: "jobs:nav.jobRuns",
+      icon: "list",
+      screen: "jobs:screen:job-runs",
+      order: 10,
+    });
+
     return { handlers, queries };
   });
 }

package/src/jobs/i18n.ts

@@ -0,0 +1,32 @@
+// @runtime client
+// Server + client i18n for jobs operator screens.
+
+type LocalizedString = { readonly de: string; readonly en: string };
+
+export const JOBS_I18N: Readonly<Record<string, LocalizedString>> = {
+  "screen:job-runs.title": { de: "Job-Läufe", en: "Job runs" },
+  "screen:job-run-detail.title": { de: "Job-Lauf", en: "Job run" },
+  "jobs:nav.jobRuns": { de: "Jobs", en: "Jobs" },
+  "jobs.runs.title": { de: "Job-Läufe", en: "Job runs" },
+  "jobs.runs.loading": { de: "Lade Läufe…", en: "Loading runs…" },
+  "jobs.runs.empty": { de: "Keine Job-Läufe.", en: "No job runs." },
+  "jobs.runs.open": { de: "Details", en: "Details" },
+  "jobs.runs.filter.status": { de: "Status", en: "Status" },
+  "jobs.runs.filter.all": { de: "Alle", en: "All" },
+  "jobs.runs.col.job": { de: "Job", en: "Job" },
+  "jobs.runs.col.status": { de: "Status", en: "Status" },
+  "jobs.runs.col.started": { de: "Gestartet", en: "Started" },
+  "jobs.runs.col.duration": { de: "Dauer (ms)", en: "Duration (ms)" },
+  "jobs.detail.title": { de: "Job-Lauf", en: "Job run" },
+  "jobs.detail.loading": { de: "Lade Details…", en: "Loading details…" },
+  "jobs.detail.missing": { de: "Lauf nicht gefunden.", en: "Run not found." },
+  "jobs.detail.back": { de: "← Zurück zur Liste", en: "← Back to list" },
+  "jobs.detail.field.job": { de: "Job", en: "Job" },
+  "jobs.detail.field.status": { de: "Status", en: "Status" },
+  "jobs.detail.field.id": { de: "Run-ID", en: "Run ID" },
+  "jobs.detail.field.error": { de: "Fehler", en: "Error" },
+  "jobs.detail.logs": { de: "Logs", en: "Logs" },
+  "jobs.detail.logs.empty": { de: "Keine Log-Zeilen.", en: "No log lines." },
+  "jobs.detail.retry": { de: "Erneut ausführen", en: "Retry" },
+  "jobs.detail.retrying": { de: "Wird erneut gestartet…", en: "Retrying…" },
+};

package/src/jobs/web/client-plugin.tsx

@@ -0,0 +1,22 @@
+// @runtime client
+import { mergeTranslations, type TranslationsByLocale } from "@cosmicdrift/kumiko-renderer";
+import type { ClientFeatureDefinition } from "@cosmicdrift/kumiko-renderer-web";
+import { JOB_RUN_DETAIL_SCREEN_ID, JOB_RUNS_SCREEN_ID, JOBS_FEATURE } from "../constants";
+import { defaultTranslations } from "./i18n";
+import { JobRunDetailScreen } from "./job-run-detail-screen";
+import { JobRunsScreen } from "./job-runs-screen";
+
+export type JobsClientOptions = {
+  readonly translations?: TranslationsByLocale;
+};
+
+export function jobsClient(options?: JobsClientOptions): ClientFeatureDefinition {
+  return {
+    name: JOBS_FEATURE,
+    translations: mergeTranslations(defaultTranslations, options?.translations ?? {}),
+    components: {
+      [JOB_RUNS_SCREEN_ID]: JobRunsScreen,
+      [JOB_RUN_DETAIL_SCREEN_ID]: JobRunDetailScreen,
+    },
+  };
+}

package/src/jobs/web/i18n.ts

@@ -0,0 +1,12 @@
+// @runtime client
+import type { TranslationsByLocale } from "@cosmicdrift/kumiko-renderer";
+import { JOBS_I18N } from "../i18n";
+
+const LOCALES = ["de", "en"] as const;
+
+export const defaultTranslations: TranslationsByLocale = Object.fromEntries(
+  LOCALES.map((locale) => [
+    locale,
+    Object.fromEntries(Object.entries(JOBS_I18N).map(([key, value]) => [key, value[locale]])),
+  ]),
+);

package/src/jobs/web/index.ts

@@ -0,0 +1,4 @@
+// @runtime client
+export { type JobsClientOptions, jobsClient } from "./client-plugin";
+export { JobRunDetailScreen } from "./job-run-detail-screen";
+export { JobRunsScreen } from "./job-runs-screen";