@tangle-network/ui 11.16.3 → 11.16.5

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/run/expandable-content.tsx

@@ -11,6 +11,9 @@ export interface ExpandableContentProps {
    */
   fadeClassName?: string;
   className?: string;
+  /** Classes for the Show more / Show less toggle, e.g. an inset when the
+   *  content sits flush against its card's edges. */
+  toggleClassName?: string;
 }
 
 /**
@@ -23,6 +26,7 @@ export function ExpandableContent({
   collapsedMaxPx = 180,
   fadeClassName = "from-muted",
   className,
+  toggleClassName,
 }: ExpandableContentProps) {
   const [expanded, setExpanded] = useState(false);
   const [overflowing, setOverflowing] = useState(false);
@@ -63,7 +67,10 @@ export function ExpandableContent({
         <button
           type="button"
           onClick={() => setExpanded((value) => !value)}
-          className="mt-1 text-[11px] font-medium text-muted-foreground transition-colors hover:text-foreground"
+          className={cn(
+            "mt-1 text-[11px] font-medium text-muted-foreground transition-colors hover:text-foreground",
+            toggleClassName,
+          )}
         >
           {expanded ? "Show less" : "Show more"}
         </button>

package/src/run/expanded-tool-detail.tsx

@@ -23,6 +23,10 @@ export interface ExpandedToolDetailProps {
   part: ToolPart;
 }
 
+// The clamped output sits flush against its card's edges; the toggle under it
+// takes the card's 12px content inset so it does not touch the border.
+const FLUSH_TOGGLE = "mx-3 mb-2";
+
 const EXT_LANG: Record<string, string> = {
   ts: "typescript", tsx: "tsx", js: "javascript", jsx: "jsx",
   rs: "rust", py: "python", go: "go", rb: "ruby",
@@ -147,7 +151,7 @@ export const ExpandedToolDetail = memo(({ part }: ExpandedToolDetailProps) => {
               Output
             </span>
           </div>
-          <ExpandableContent fadeClassName="from-card">
+          <ExpandableContent fadeClassName="from-card" toggleClassName={FLUSH_TOGGLE}>
             <CodeBlock
               code={
                 outputStr.length > 2000
@@ -170,7 +174,7 @@ export const ExpandedToolDetail = memo(({ part }: ExpandedToolDetailProps) => {
               Error
             </span>
           </div>
-          <ExpandableContent fadeClassName="from-[var(--surface-danger-bg)]">
+          <ExpandableContent fadeClassName="from-[var(--surface-danger-bg)]" toggleClassName={FLUSH_TOGGLE}>
             <pre className="bg-[var(--surface-danger-bg)] p-3 text-xs font-mono whitespace-pre-wrap break-all text-[var(--surface-danger-text)]">
               {error}
             </pre>