@cosmicdrift/kumiko-renderer-web 0.239.0 → 0.241.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.239.0",
+  "version": "0.241.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.239.0",
-    "@cosmicdrift/kumiko-headless": "0.239.0",
-    "@cosmicdrift/kumiko-renderer": "0.239.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.241.0",
+    "@cosmicdrift/kumiko-headless": "0.241.0",
+    "@cosmicdrift/kumiko-renderer": "0.241.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.239.0"
+    "@cosmicdrift/kumiko-locale-de": "0.241.0"
   },
   "repository": {
     "type": "git",

package/src/__tests__/primitives.test.tsx

@@ -12,6 +12,7 @@ import { type ColumnRendererProps, ColumnRenderersProvider } from "@cosmicdrift/
 import userEvent from "@testing-library/user-event";
 import type { ReactNode } from "react";
 import { defaultPrimitives, END_LABEL_MIN_ROWS, FormScreenShell } from "../primitives";
+import { DefaultJsonView } from "../primitives/json-view";
 import { PageSection, Stack } from "../primitives/layout";
 import { fireEvent, render, screen, waitFor } from "./test-utils";
 
@@ -1766,3 +1767,50 @@ describe("PageSection", () => {
     expect(screen.getByTestId("p-default").className).toContain("max-w-full");
   });
 });
+
+describe("JsonView", () => {
+  test("tokenisiert statt einen flachen String zu rendern — Keys/Strings/Zahlen/Booleans/null bekommen je eigene Klasse", () => {
+    render(
+      <DefaultJsonView testId="jv" value={{ name: "job-1", attempts: 3, ok: true, error: null }} />,
+    );
+    const spans = Array.from(screen.getByTestId("jv").querySelectorAll("span"));
+    // 1 Key-Token pro Feld + 1 Value-Token (string/number/boolean/null) = 8.
+    expect(spans.length).toBe(8);
+    const classNames = new Set(spans.map((s) => s.className));
+    expect(classNames.size).toBe(5);
+  });
+
+  test("Whitespace bleibt erhalten (pre-wrap) — mehrzeiliger, eingerückter Output statt einer kollabierten Zeile", () => {
+    const value = { a: { b: 1 } };
+    render(<DefaultJsonView testId="jv" value={value} />);
+    const el = screen.getByTestId("jv");
+    expect(el.className).toContain("whitespace-pre-wrap");
+    expect(el.className).toContain("break-words");
+    expect(el.textContent).toBe(JSON.stringify(value, null, 2));
+    expect(el.textContent).toContain("\n");
+  });
+
+  test("indent-Prop steuert die Einrückung wie bei JSON.stringify", () => {
+    const value = { a: 1 };
+    render(<DefaultJsonView testId="jv" value={value} indent={4} />);
+    expect(screen.getByTestId("jv").textContent).toBe(JSON.stringify(value, null, 4));
+  });
+
+  test("zirkulärer Wert wirft nicht — rendert einen [Circular]-Marker statt die Seite zu killen", () => {
+    const circular: Record<string, unknown> = { name: "job-1" };
+    circular["self"] = circular;
+    expect(() => render(<DefaultJsonView testId="jv" value={circular} />)).not.toThrow();
+    expect(screen.getByTestId("jv").textContent).toContain("[Circular]");
+  });
+
+  test("BigInt wirft nicht — wird als String serialisiert", () => {
+    expect(() =>
+      render(<DefaultJsonView testId="jv" value={{ amount: 9007199254740993n }} />),
+    ).not.toThrow();
+    expect(screen.getByTestId("jv").textContent).toContain("9007199254740993n");
+  });
+
+  test("undefined wirft nicht", () => {
+    expect(() => render(<DefaultJsonView testId="jv" value={undefined} />)).not.toThrow();
+  });
+});

package/src/app/dashboard-body.tsx

@@ -91,9 +91,13 @@ function StatPanelBody({
     }
   }, [panel.icon, panel.id, iconName, Icon, screenId]);
 
+  // filterParams first, panel.params second: a static author-set param is a
+  // deliberate pin (e.g. status: "failed") and must win over whatever the
+  // screen-wide filter happens to contribute under the same key.
+  const queryParams = { ...filterParams, ...panel.params };
   const { data, error, loading, refetch } = useQuery<Readonly<Record<string, unknown>>>(
     panel.query,
-    filterParams,
+    queryParams,
     { live: true },
   );
   if (loading && data === null) return <LoadingState rows={2} />;

package/src/layout/editor-panel.tsx

@@ -13,7 +13,7 @@
 // Siehe visual-tree.md V.1.2 + V.1.1-B + V.1.4b.
 
 import type { TargetRef } from "@cosmicdrift/kumiko-framework/engine";
-import { useNav } from "@cosmicdrift/kumiko-renderer";
+import { useNav, usePrimitives } from "@cosmicdrift/kumiko-renderer";
 import { X } from "lucide-react";
 import type { ComponentType, ReactNode } from "react";
 import { useCallback, useMemo } from "react";
@@ -37,6 +37,7 @@ function EditorPanelInner({
   readonly resolvers: ReadonlyMap<string, ResolverComponent>;
   readonly onClose: () => void;
 }): ReactNode {
+  const { JsonView } = usePrimitives();
   const resolverKey = `${target.featureId}:${target.action}`;
   const Resolver = resolvers.get(resolverKey);
 
@@ -65,9 +66,13 @@ function EditorPanelInner({
           </code>{" "}
           registriert.
         </p>
-        <pre className="bg-muted p-2 rounded text-xs overflow-auto">
-          {JSON.stringify(target.args, null, 2)}
-        </pre>
+        {JsonView !== undefined ? (
+          <JsonView value={target.args} />
+        ) : (
+          <pre className="bg-muted p-2 rounded text-xs overflow-auto">
+            {JSON.stringify(target.args, null, 2)}
+          </pre>
+        )}
       </div>
     </div>
   );

package/src/primitives/index.tsx

@@ -109,6 +109,7 @@ import {
 } from "./dropdown-menu";
 import { EmbeddedListInput } from "./embedded-list-input";
 import { FileUploadInput } from "./file-upload";
+import { DefaultJsonView } from "./json-view";
 import { screenWidthClassName } from "./layout";
 import { DefaultLightbox } from "./lightbox";
 import { LocatedTimestampInput } from "./located-timestamp-input";
@@ -2560,4 +2561,5 @@ export const defaultPrimitives: CorePrimitives = {
   Tabs: DefaultTabs,
   StatusBadge: DefaultStatusBadge,
   Metric: DefaultMetric,
+  JsonView: DefaultJsonView,
 };

package/src/primitives/json-view.tsx

@@ -0,0 +1,93 @@
+import type { JsonViewProps } from "@cosmicdrift/kumiko-renderer";
+import type { ReactNode } from "react";
+
+// Recursive pre-pass (not JSX) that turns `value` into a JSON.stringify-safe
+// plain structure: BigInt → string, and a real ancestor-path cycle check
+// (not a global "seen" set — a value referenced twice via two different,
+// non-circular paths must still render twice, not collapse to "[Circular]").
+function toSafeJson(value: unknown, ancestors: readonly unknown[] = []): unknown {
+  if (typeof value === "bigint") return `${value.toString()}n`;
+  if (typeof value !== "object" || value === null) return value;
+  if (ancestors.includes(value)) return "[Circular]";
+  const nextAncestors = [...ancestors, value];
+  if (Array.isArray(value)) return value.map((item) => toSafeJson(item, nextAncestors));
+  const out: Record<string, unknown> = {};
+  for (const [k, v] of Object.entries(value)) out[k] = toSafeJson(v, nextAncestors);
+  return out;
+}
+
+// A broken audit/log payload must not take the whole screen down with it —
+// double try/catch so even a throwing getter on the input falls back to a
+// plain string instead of propagating.
+function safeStringify(value: unknown, indent: number): string {
+  try {
+    const json = JSON.stringify(toSafeJson(value), null, indent);
+    return json ?? String(value);
+  } catch {
+    try {
+      return String(value);
+    } catch {
+      return "[unserializable value]";
+    }
+  }
+}
+
+type TokenKind = "key" | "string" | "number" | "boolean" | "null";
+
+const TOKEN_CLASS_NAME: Record<TokenKind, string> = {
+  key: "text-syntax-key font-medium",
+  string: "text-syntax-string",
+  number: "text-syntax-number",
+  boolean: "text-syntax-literal",
+  null: "text-syntax-literal italic",
+};
+
+function classifyToken(token: string): TokenKind {
+  if (token.startsWith('"')) return token.endsWith(":") ? "key" : "string";
+  if (token === "true" || token === "false") return "boolean";
+  if (token === "null") return "null";
+  return "number";
+}
+
+// The stringify output is canonical JSON — a regex tokenizer over that
+// string is a fraction of the code of a recursive value-tree renderer, and
+// tokens become plain React elements (never dangerouslySetInnerHTML): audit
+// payloads and job logs carry untrusted third-party data, so this must not
+// become an HTML-injection path.
+function tokenizeJson(json: string): ReactNode[] {
+  const tokenRe =
+    /("(?:\\u[a-fA-F0-9]{4}|\\.|[^\\"])*"(?:\s*:)?|-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?|\btrue\b|\bfalse\b|\bnull\b)/g;
+  const nodes: ReactNode[] = [];
+  let lastIndex = 0;
+  let match: RegExpExecArray | null = tokenRe.exec(json);
+  let key = 0;
+  while (match !== null) {
+    if (match.index > lastIndex) nodes.push(json.slice(lastIndex, match.index));
+    const token = match[0];
+    nodes.push(
+      <span key={key++} className={TOKEN_CLASS_NAME[classifyToken(token)]}>
+        {token}
+      </span>,
+    );
+    lastIndex = tokenRe.lastIndex;
+    match = tokenRe.exec(json);
+  }
+  if (lastIndex < json.length) nodes.push(json.slice(lastIndex));
+  return nodes;
+}
+
+/** Syntax-highlighted, whitespace-preserving JSON display. Bounded height
+ *  with its own vertical scroll (job logs get long) instead of growing the
+ *  page; wraps rather than overflowing horizontally. Colors come from the
+ *  dedicated syntax-* theme tokens (styles.css), readable in light + dark. */
+export function DefaultJsonView({ value, indent = 2, testId }: JsonViewProps): ReactNode {
+  const json = safeStringify(value, indent);
+  return (
+    <pre
+      data-testid={testId}
+      className="max-h-80 overflow-y-auto whitespace-pre-wrap break-words rounded bg-muted p-2 font-mono text-xs"
+    >
+      {tokenizeJson(json)}
+    </pre>
+  );
+}

package/src/styles.css

@@ -89,6 +89,15 @@
   --color-status-warn: #f59e0b;
   --color-status-bad: #ef4444;
   --color-status-critical: #f87171;
+
+  /* JSON-Syntax-Highlighting (JsonView). Eigene, gedämpfte Palette statt der
+     Status-Ampel — ein `false` oder eine Zahl ist kein Fehler-/Warn-Signal.
+     Dark-Werte; Light-Overrides unten. Kontrast gegen bg-muted geprüft (>=6:1
+     in beiden Themes). */
+  --color-syntax-key: hsl(210 15% 75%);
+  --color-syntax-string: hsl(150 25% 60%);
+  --color-syntax-number: hsl(35 40% 65%);
+  --color-syntax-literal: hsl(270 25% 70%);
 }
 
 /* Card-Chrome-Maße — Framework-Defaults. Eine App überschreibt selektiv in
@@ -151,6 +160,13 @@
     --color-status-warn: #d97706;
     --color-status-bad: #dc2626;
     --color-status-critical: #991b1b;
+
+    /* JSON-Syntax-Highlighting Light — dunkler/gesättigter, Kontrast gegen
+       bg-muted geprüft (>=6:1). */
+    --color-syntax-key: hsl(210 20% 35%);
+    --color-syntax-string: hsl(150 30% 30%);
+    --color-syntax-number: hsl(30 45% 32%);
+    --color-syntax-literal: hsl(270 30% 40%);
   }
 
   * {