@tangle-network/ui 11.16.4 → 11.16.6

package/src/openui/schema-data.ts

@@ -7,7 +7,11 @@ const string = { type: "string" } as const;
 const boolean = { type: "boolean" } as const;
 const gap = { enum: ["sm", "md", "lg"] } as const;
 const primitive = { type: ["string", "number", "boolean", "null"] } as const;
-const children = { type: "array", minItems: 1, items: { $ref: "#/$defs/node" } } as const;
+// No minItems here: stack and grid require `children` and a child can itself be
+// a stack, so a nonempty minimum makes a required recursive loop that model
+// tool-schema converters reject (opencode refused render_ui outright). The
+// persistence gate in schema.ts still rejects an empty container.
+const children = { type: "array", items: { $ref: "#/$defs/node" } } as const;
 const actions = { type: "array", minItems: 1, items: { $ref: "#/$defs/action" } } as const;
 
 function node(type: string, fields: Record<string, unknown>, required: string[] = []) {

package/src/openui/schema.test.tsx

@@ -24,6 +24,45 @@ const validPage = {
   ],
 };
 
+type JsonSchema = Record<string, unknown>;
+
+/**
+ * Model tool-schema converters accept a recursive `$ref` only when the loop can
+ * terminate: it must pass through an optional property or an array that may be
+ * empty. Return the first `$defs` path that recurses through required,
+ * nonempty values only.
+ */
+function findRequiredRefLoop(defs: Record<string, JsonSchema>): string | null {
+  function visit(schema: JsonSchema, path: string, stack: string[]): string | null {
+    const ref = typeof schema.$ref === "string" ? schema.$ref.replace("#/$defs/", "") : null;
+    if (ref) {
+      if (stack.includes(ref)) return path;
+      return visit(defs[ref]!, `$defs.${ref}`, [...stack, ref]);
+    }
+    for (const key of ["oneOf", "anyOf"] as const) {
+      const options = schema[key];
+      if (Array.isArray(options)) {
+        for (const [index, option] of options.entries()) {
+          const loop = visit(option as JsonSchema, `${path}.${key}.${index}`, stack);
+          if (loop) return loop;
+        }
+      }
+    }
+    if (schema.type === "array" && schema.items && Number(schema.minItems ?? 0) > 0) {
+      return visit(schema.items as JsonSchema, `${path}.items`, stack);
+    }
+    const required = Array.isArray(schema.required) ? schema.required as string[] : [];
+    const properties = (schema.properties ?? {}) as Record<string, JsonSchema>;
+    for (const name of required) {
+      if (!properties[name]) continue;
+      const loop = visit(properties[name], `${path}.properties.${name}`, stack);
+      if (loop) return loop;
+    }
+    return null;
+  }
+  return visit({ $ref: "#/$defs/node" }, "$", []);
+}
+
 describe("OpenUI JSON contract", () => {
   it("advertises every renderer node and accepts nested JSON with primitive cells", () => {
     expect(OPENUI_NODE_TYPES).toHaveLength(13);
@@ -32,6 +71,12 @@ describe("OpenUI JSON contract", () => {
     expect(validateOpenUIJsonArtifact([validPage, { type: "text", text: "Afterword" }])).toMatchObject({ ok: true });
   });
 
+  it("keeps every recursive node path terminable for model tool-schema converters", () => {
+    expect(findRequiredRefLoop(OPENUI_NODE_JSON_SCHEMA.$defs as unknown as Record<string, JsonSchema>)).toBeNull();
+    expect(validateOpenUIJsonNode({ type: "card", title: "Empty", children: [] }))
+      .toMatchObject({ ok: false, issue: { path: "$.children" } });
+  });
+
   it("rejects an unsupported top-level or nested section before it can be dropped", () => {
     expect(validateOpenUIJsonNode({ type: "section", children: [{ type: "text", text: "hidden" }] }))
       .toMatchObject({ ok: false, issue: { path: "$", message: expect.stringContaining("section") } });

package/src/openui/schema.ts

@@ -40,6 +40,11 @@ export function findUnsupportedOpenUINode(value: unknown): OpenUISchemaIssue | n
       return { path, message: `Unsupported OpenUI node type: ${String(record.type)}.` };
     }
     if (record.type === "stack" || record.type === "grid" || record.type === "card") {
+      // The model-facing schema cannot express this minimum without a required
+      // recursive loop (see schema-data.ts), so the gate enforces it here.
+      if (Array.isArray(record.children) && record.children.length === 0) {
+        return { path: `${path}.children`, message: "OpenUI containers need at least one child." };
+      }
       if (Array.isArray(record.children)) {
         for (const [index, child] of record.children.entries()) {
           const issue = visit(child, `${path}.children[${index}]`, depth + 1);

package/src/primitives/status-pill.tsx

@@ -11,8 +11,8 @@ import { cn } from "../lib/utils";
  * the tone's COLOUR, and the state's own LABEL as text.
  *
  * The glyphs are chosen to survive at 8px and to differ in outline rather than
- * in fill: a ring reads as "still open", a solid disc as "settled", a slashed
- * disc as "stopped". Two states never share one silhouette.
+ * in fill: a ring reads as "still open", a solid disc as "settled", a cross as
+ * "failed". Two states never share one silhouette.
  *
  * Each tone draws its fill, border and text from ONE matched token triple.
  * That pairing is the whole point: a status colour is solved against its own
@@ -107,8 +107,8 @@ function ToneGlyph({ tone }: { tone: StatusTone }) {
           <circle cx="4" cy="4" r="3.25" />
         </svg>
       );
-    // Settled and bad: a disc with a bar through it, so it differs from
-    // success in OUTLINE and not only in hue.
+    // Settled and bad: a cross, so it differs from success in OUTLINE and not
+    // only in hue. A slashed disc read as "disabled" beside a failed run.
     case "danger":
       return (
         <svg
@@ -116,10 +116,9 @@ function ToneGlyph({ tone }: { tone: StatusTone }) {
           aria-hidden="true"
           fill="none"
           stroke="currentColor"
-          strokeWidth="1.5"
+          strokeWidth="1.75"
         >
-          <circle cx="4" cy="4" r="3.1" fill="currentColor" opacity="0.35" />
-          <path d="M1.9 6.1 6.1 1.9" strokeLinecap="round" />
+          <path d="M1.5 1.5 6.5 6.5M6.5 1.5 1.5 6.5" strokeLinecap="round" />
         </svg>
       );
     // Needs a person: a triangle.

package/src/tool-previews/command-preview.test.tsx

@@ -0,0 +1,73 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import type { ToolPart } from "../types/parts";
+import { CommandPreview } from "./command-preview";
+
+function part(state: Partial<ToolPart["state"]>): ToolPart {
+  return {
+    type: "tool",
+    id: "t1",
+    tool: "bash",
+    state: { status: "completed", input: { command: "git status --short" }, ...state },
+  } as ToolPart;
+}
+
+describe("CommandPreview", () => {
+  it("shows a neutral badge, not a red exit, when a tool errored without an exit code", () => {
+    render(<CommandPreview part={part({ status: "error", output: "warning: x" })} />);
+    const badge = screen.getByText("tool error");
+    expect(badge.className).toContain("surface-neutral");
+    expect(badge.className).not.toContain("surface-danger");
+    expect(screen.queryByText("error")).toBeNull();
+  });
+
+  it("keeps a recorded nonzero exit red", () => {
+    render(
+      <CommandPreview
+        part={part({ status: "error", output: { stdout: "", stderr: "no", exitCode: 2 } })}
+      />,
+    );
+    expect(screen.getByText("exit 2").className).toContain("surface-danger");
+  });
+
+  it("boxes each token so a phone wraps between flags", () => {
+    render(<CommandPreview part={part({ output: "M a" })} />);
+    const flag = screen.getByText("--short");
+    expect(flag.tagName).toBe("SPAN");
+    expect(flag.className).toContain("inline-block");
+    // A box wider than the line still breaks, so no token overflows.
+    expect(flag.className).toContain("[overflow-wrap:anywhere]");
+    // The text is unchanged, so a copy pastes the exact command.
+    expect(screen.getByTestId("command-preview").querySelector("code")?.textContent).toBe(
+      "git status --short",
+    );
+  });
+
+  it("treats a timeout or a signal as a failure even without an exit code", () => {
+    render(
+      <CommandPreview
+        part={part({ status: "error", output: { stdout: "", stderr: "", timedOut: true } })}
+      />,
+    );
+    expect(screen.getByText("timed out").className).toContain("surface-danger");
+  });
+
+  it("keeps a runner error after a clean exit neutral", () => {
+    render(
+      <CommandPreview
+        part={part({ status: "error", output: { stdout: "ok", stderr: "", exitCode: 0 } })}
+      />,
+    );
+    expect(screen.getByText("exit 0 · tool error").className).toContain("surface-neutral");
+  });
+
+  it("is a quiet row until opened, then a dark terminal", () => {
+    render(<CommandPreview part={part({ output: "M a" })} />);
+    const block = screen.getByTestId("command-preview");
+    expect(block).not.toHaveAttribute("data-theme");
+    expect(block.className).toContain("bg-transparent");
+    fireEvent.click(screen.getByRole("button"));
+    expect(block).toHaveAttribute("data-theme", "dark");
+    expect(screen.getByRole("region", { name: "stdout" })).toHaveTextContent("M a");
+  });
+});

package/src/tool-previews/command-preview.tsx

@@ -36,6 +36,10 @@ export interface CommandOutput {
   stderr: string;
   /** Undefined when the producer persisted plain text and never reported one. */
   exitCode: number | undefined;
+  /** The command ran past its time limit. */
+  timedOut?: boolean;
+  /** The signal that ended the command, such as `SIGKILL`. */
+  signal?: string;
 }
 
 function finiteNumber(value: unknown): number | undefined {
@@ -72,10 +76,14 @@ export function extractCommandOutput(output: unknown): CommandOutput {
 function fromObject(obj: Record<string, unknown>): CommandOutput {
   const text = (value: unknown) =>
     value === undefined || value === null ? "" : String(value);
+  const timedOut = obj.timedOut ?? obj.timed_out;
+  const signal = obj.signal;
   return {
     stdout: text(obj.stdout ?? obj.output),
     stderr: text(obj.stderr),
     exitCode: finiteNumber(obj.exitCode ?? obj.exit_code ?? obj.code),
+    ...(timedOut === true ? { timedOut: true } : {}),
+    ...(typeof signal === "string" && signal.length > 0 ? { signal } : {}),
   };
 }
 
@@ -117,13 +125,16 @@ function parseStructured(text: string): CommandOutput | undefined {
   }
 }
 
-/** Exit status as a badge: the code when one is known, else the tool's status.
- *  Red only for a nonzero exit or an error; a clean run stays quiet green. */
+/** Exit status as a badge. Red only where the command itself is known to have
+ *  failed: a nonzero exit, a timeout, or a signal. A tool that reported an
+ *  error with nothing recorded about the command (no exit code, or exit 0
+ *  from a runner that failed afterwards) gets a neutral badge; its error text
+ *  prints below. A clean run stays quiet green. */
 function ExitBadge({
-  exitCode,
+  output,
   status,
 }: {
-  exitCode: number | undefined;
+  output: CommandOutput;
   status: ToolPart["state"]["status"];
 }) {
   if (status === "running" || status === "pending") {
@@ -134,19 +145,37 @@ function ExitBadge({
       </span>
     );
   }
-  // The tool's own error status wins: a runner can fail after the shell exited
-  // 0, and a green "exit 0" beside that error would contradict it.
-  const failed = status === "error" || (exitCode !== undefined && exitCode !== 0);
-  const label =
-    exitCode !== undefined ? `exit ${exitCode}` : failed ? "error" : null;
+  const { exitCode, timedOut, signal } = output;
+  let label: string | null;
+  let tone: "danger" | "success" | "neutral";
+  if (timedOut) {
+    label = "timed out";
+    tone = "danger";
+  } else if (signal) {
+    label = signal;
+    tone = "danger";
+  } else if (exitCode !== undefined && exitCode !== 0) {
+    label = `exit ${exitCode}`;
+    tone = "danger";
+  } else if (status === "error") {
+    label = exitCode === 0 ? "exit 0 · tool error" : "tool error";
+    tone = "neutral";
+  } else {
+    label = exitCode === 0 ? "exit 0" : null;
+    tone = "success";
+  }
   if (label === null) return null;
   return (
     <span
       className={cn(
-        "inline-flex shrink-0 items-center rounded-full px-1.5 py-px text-[11px] font-medium tabular-nums",
-        failed
-          ? "bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]"
-          : "bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]",
+        // Every badge has a border, so mixed rows keep one height.
+        "inline-flex shrink-0 items-center rounded-full border px-1.5 py-px text-[11px] font-medium tabular-nums",
+        tone === "danger" &&
+          "border-transparent bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]",
+        tone === "success" &&
+          "border-transparent bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]",
+        tone === "neutral" &&
+          "border-[var(--surface-neutral-border)] bg-[var(--surface-neutral-bg)] text-[var(--surface-neutral-text)]",
       )}
     >
       {label}
@@ -154,11 +183,44 @@ function ExitBadge({
   );
 }
 
+/** A closed row shows two lines, so only its first tokens need their own
+ *  box; a long script renders the rest as plain text. */
+const BOXED_TOKENS = 64;
+
+/**
+ * A command split at its whitespace, each token in an inline box. Browsers
+ * break after a hyphen, which split `--short` into `--` and `short` on a
+ * phone. A box moves to the next line whole, and breaks inside only when it
+ * is wider than the line (a full SHA). The text is unchanged, so a copy still
+ * pastes the exact command.
+ */
+function CommandText({ command, all }: { command: string; all: boolean }) {
+  const tokens = command.split(/(\s+)/);
+  const limit = all ? tokens.length : BOXED_TOKENS * 2;
+  return (
+    <>
+      {tokens.slice(0, limit).map((token, i) =>
+        token.length > 0 && !/\s/.test(token) ? (
+          // Tokens repeat (two spaces, two "&&"), so position is the key.
+          <span key={i} className="inline-block max-w-full [overflow-wrap:anywhere]">
+            {token}
+          </span>
+        ) : (
+          token
+        ),
+      )}
+      {limit < tokens.length ? tokens.slice(limit).join("") : null}
+    </>
+  );
+}
+
 /**
  * One shell command as a terminal block: a `$ command` prompt line with its
  * exit status, and stdout and stderr in separate regions below it.
  *
- * The block is always dark. It scopes the dark token set onto itself with
+ * Closed, a command is a quiet row on the surface it sits on: a list of
+ * commands should read as a list, not a stack of black bars. Opened, it is a
+ * dark terminal. It scopes the dark token set onto itself with
  * `data-theme="dark"`, so stderr, the badges and the muted prompt keep the
  * contrast they were designed with on a dark ground, in a light console too.
  */
@@ -195,18 +257,24 @@ export const CommandPreview = memo(
             expanded ? "" : "line-clamp-2",
           )}
         >
-          {command}
+          <CommandText command={command} all={expanded} />
         </code>
-        <ExitBadge exitCode={output.exitCode} status={status} />
+        <ExitBadge output={output} status={status} />
       </>
     );
 
     return (
       <div
-        data-theme="dark"
+        data-theme={expanded ? "dark" : undefined}
         data-testid="command-preview"
+        data-expanded={expanded}
         className={cn(
-          "overflow-hidden rounded-[var(--radius-md)] bg-[var(--md3-surface-container-lowest)] font-mono text-xs text-foreground",
+          // One border in both states, so opening a row does not shift the
+          // list; the terminal's is its own fill colour.
+          "overflow-hidden rounded-[var(--radius-md)] border font-mono text-xs text-foreground",
+          expanded
+            ? "border-[var(--md3-surface-container-lowest)] bg-[var(--md3-surface-container-lowest)]"
+            : "border-border bg-transparent",
           className,
         )}
       >
@@ -217,7 +285,8 @@ export const CommandPreview = memo(
             aria-expanded={expanded}
             aria-controls={bodyId}
             className={cn(
-              "flex w-full items-start gap-2 px-3 py-2 text-left transition-colors hover:bg-white/5",
+              "flex w-full items-start gap-2 px-3 py-2 text-left transition-colors",
+              expanded ? "hover:bg-white/5" : "hover:bg-muted",
               focusRing,
             )}
           >