@intent-systems/nexus 2026.1.5-3

package/skills/json-render/assets/demo/README.md

@@ -0,0 +1,22 @@
+# json-render demo assets
+
+This folder contains the canonical Vite demo source used to showcase
+json-render with the Nexus core state map and live prompt editing.
+
+Copy these files into a Vite React app's `src/` directory or use:
+
+```bash
+bash scripts/create-vite-demo.sh ~/nexus/home/projects/json-render-demo
+```
+
+Files:
+- `App.tsx` - Demo UI with prompt-driven tree updates
+- `registry.tsx` - Component registry with Section, Stack, Grid, Badge, KeyValueList, DataTable, Button
+- `catalog.ts` - Zod component catalog (for streaming)
+- `App.css` / `index.css` - Styling for the demo
+- `data/nexus-core.json` - Optional data injected by the LLM server
+
+Optional LLM mode:
+- Start the LLM server in `scripts/llm-server`
+- Set `VITE_LLM_ENDPOINT=http://localhost:8787/api/generate`
+- Toggle **LLM streaming** in the demo UI

package/skills/json-render/assets/demo/catalog.ts

@@ -0,0 +1,78 @@
+import { createCatalog } from "@json-render/core";
+import { z } from "zod";
+
+export const catalog = createCatalog({
+  components: {
+    Section: {
+      props: z.object({
+        title: z.string().optional(),
+        description: z.string().optional(),
+      }),
+      hasChildren: true,
+    },
+    Stack: {
+      props: z.object({
+        gap: z.number().int().min(0).optional(),
+        align: z.enum(["left", "center", "right"]).optional(),
+      }),
+      hasChildren: true,
+    },
+    Grid: {
+      props: z.object({
+        columns: z.number().int().min(1).max(4).optional(),
+        gap: z.number().int().min(0).optional(),
+      }),
+      hasChildren: true,
+    },
+    Text: {
+      props: z.object({
+        content: z.string(),
+        tone: z.enum(["default", "muted", "danger"]).optional(),
+      }),
+    },
+    Badge: {
+      props: z.object({
+        label: z.string(),
+        tone: z.enum(["default", "info", "success", "warning"]).optional(),
+      }),
+    },
+    KeyValueList: {
+      props: z.object({
+        title: z.string().optional(),
+        items: z.array(
+          z.object({
+            label: z.string(),
+            value: z.string(),
+          }),
+        ),
+      }),
+    },
+    DataTable: {
+      props: z.object({
+        title: z.string().optional(),
+        columns: z.array(z.string()).min(1),
+        rows: z.array(z.array(z.string())).min(1),
+      }),
+    },
+    Button: {
+      props: z.object({
+        label: z.string(),
+        action: z.string(),
+        actionParams: z.record(z.unknown()).optional(),
+        variant: z.enum(["primary", "secondary"]).optional(),
+      }),
+    },
+  },
+  actions: {
+    navigate: {
+      params: z.object({
+        url: z.string().url(),
+      }),
+    },
+    submit: {
+      params: z.object({
+        formId: z.string(),
+      }),
+    },
+  },
+});

package/skills/json-render/assets/demo/data/nexus-core.json

@@ -0,0 +1,31 @@
+{
+  "capabilities": [
+    "email-read",
+    "email-send",
+    "chat-send",
+    "chat-read",
+    "browser-automation",
+    "web-search",
+    "filesystem",
+    "ui-render",
+    "calendar-read",
+    "calendar-write"
+  ],
+  "skills": [
+    { "name": "filesystem", "type": "prompt", "status": "ready" },
+    { "name": "gog", "type": "tool", "status": "ready" },
+    { "name": "brave-search", "type": "script", "status": "needs-setup" },
+    { "name": "agent-browser", "type": "tool", "status": "ready" }
+  ],
+  "credentials": [
+    { "kind": "oauth", "provider": "google", "status": "configured" },
+    { "kind": "api-key", "provider": "brave", "status": "missing" },
+    { "kind": "oauth", "provider": "github", "status": "configured" }
+  ],
+  "registry": {
+    "skills_total": 72,
+    "connectors_total": 18,
+    "last_audit": "2026-01-15",
+    "status": "healthy"
+  }
+}

package/skills/json-render/assets/demo/index.css

@@ -0,0 +1,27 @@
+:root {
+  font-family: "Inter", system-ui, -apple-system, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color: #0f172a;
+  background-color: #f1f5f9;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: #f1f5f9;
+}
+
+#root {
+  min-height: 100vh;
+}

package/skills/json-render/assets/demo/registry.tsx

@@ -0,0 +1,150 @@
+import React from "react";
+
+type ComponentProps = {
+  element: {
+    props: Record<string, unknown>;
+  };
+  children?: React.ReactNode;
+  onAction?: (action: string, params: Record<string, unknown>) => void;
+};
+
+const toneClasses: Record<string, string> = {
+  default: "text text--default",
+  muted: "text text--muted",
+  danger: "text text--danger",
+};
+
+const badgeClasses: Record<string, string> = {
+  default: "badge badge--default",
+  info: "badge badge--info",
+  success: "badge badge--success",
+  warning: "badge badge--warning",
+};
+
+export const registry = {
+  Section: ({ element, children }: ComponentProps) => (
+    <section className="section">
+      {element.props.title ? (
+        <h2 className="section__title">{element.props.title as string}</h2>
+      ) : null}
+      {element.props.description ? (
+        <p className="section__description">
+          {element.props.description as string}
+        </p>
+      ) : null}
+      <div className="section__body">{children}</div>
+    </section>
+  ),
+  Stack: ({ element, children }: ComponentProps) => {
+    const gap = (element.props.gap as number | undefined) ?? 12;
+    const align = (element.props.align as string | undefined) ?? "left";
+
+    return (
+      <div
+        className="stack"
+        style={{ gap, textAlign: align as React.CSSProperties["textAlign"] }}
+      >
+        {children}
+      </div>
+    );
+  },
+  Grid: ({ element, children }: ComponentProps) => {
+    const columns = (element.props.columns as number | undefined) ?? 2;
+    const gap = (element.props.gap as number | undefined) ?? 16;
+
+    return (
+      <div
+        className="grid"
+        style={{
+          gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+          gap,
+        }}
+      >
+        {children}
+      </div>
+    );
+  },
+  Text: ({ element }: ComponentProps) => {
+    const tone = (element.props.tone as string | undefined) ?? "default";
+
+    return (
+      <p className={toneClasses[tone] ?? toneClasses.default}>
+        {element.props.content as string}
+      </p>
+    );
+  },
+  Badge: ({ element }: ComponentProps) => {
+    const tone = (element.props.tone as string | undefined) ?? "default";
+    const className = badgeClasses[tone] ?? badgeClasses.default;
+
+    return <span className={className}>{element.props.label as string}</span>;
+  },
+  KeyValueList: ({ element }: ComponentProps) => {
+    const title = element.props.title as string | undefined;
+    const items =
+      (element.props.items as Array<{ label: string; value: string }>) ?? [];
+
+    return (
+      <div className="key-value">
+        {title ? <p className="key-value__title">{title}</p> : null}
+        <div className="key-value__list">
+          {items.map((item, index) => (
+            <div className="key-value__row" key={index}>
+              <span className="key-value__label">{item.label}</span>
+              <span className="key-value__value">{item.value}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  },
+  DataTable: ({ element }: ComponentProps) => {
+    const title = element.props.title as string | undefined;
+    const columns = (element.props.columns as string[]) ?? [];
+    const rows = (element.props.rows as string[][]) ?? [];
+
+    return (
+      <div className="data-table">
+        {title ? <p className="data-table__title">{title}</p> : null}
+        <div className="data-table__scroll">
+          <table>
+            <thead>
+              <tr>
+                {columns.map((column, index) => (
+                  <th key={index}>{column}</th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((row, rowIndex) => (
+                <tr key={rowIndex}>
+                  {row.map((cell, cellIndex) => (
+                    <td key={cellIndex}>{cell}</td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    );
+  },
+  Button: ({ element, onAction }: ComponentProps) => {
+    const variant = (element.props.variant as string | undefined) ?? "primary";
+    const actionParams =
+      (element.props.actionParams as Record<string, unknown> | undefined) ?? {};
+    const className = `btn btn--${variant}`;
+
+    return (
+      <button
+        className={className}
+        onClick={() =>
+          onAction?.(element.props.action as string, actionParams)
+        }
+        type="button"
+      >
+        {element.props.label as string}
+      </button>
+    );
+  },
+};

package/skills/json-render/docs/nexus-state-demo.md

@@ -0,0 +1,84 @@
+# Nexus core state demo (json-render)
+
+This demo renders a canonical Nexus core state map using the json-render
+catalog and a local Vite app. It includes a live prompt area that updates
+the UI in real time.
+
+## Goal
+
+Ship a distributable, repeatable demo that visualizes:
+- Core capabilities
+- Skills and connectors
+- Credentials + identity
+- Runtime state + gateway flow
+- Discovery, registry, and ownership boundaries
+
+## Prereqs
+
+- Node.js + npm
+- Access to `~/nexus/skills/json-render/assets/`
+
+## Quick start (scripted)
+
+```bash
+cd ~/nexus/skills/json-render
+bash scripts/create-vite-demo.sh ~/nexus/home/projects/json-render-demo
+cd ~/nexus/home/projects/json-render-demo
+npm run dev -- --host
+```
+
+Open `http://localhost:5173` and switch to **Nexus core state**.
+
+## Live prompt examples
+
+Try these prompts in the demo:
+- `highlight credentials`
+- `hide cli`
+- `3 columns`
+- `focus skills`
+- `add connectors`
+- `show registry`
+- `compact layout`
+
+The UI updates immediately as you type.
+
+## Optional: LLM streaming mode
+
+Run the local LLM server (requires API key):
+
+```bash
+cd ~/nexus/skills/json-render/scripts/llm-server
+npm install
+export ANTHROPIC_API_KEY="..."
+npm run dev
+```
+
+Then launch the demo with an endpoint configured:
+
+```bash
+cd ~/nexus/home/projects/json-render-demo
+VITE_LLM_ENDPOINT=http://localhost:8787/api/generate npm run dev -- --host
+```
+
+In the UI, toggle **LLM streaming** and click **Generate with LLM**.
+
+## Agent data hook
+
+The LLM server injects optional data from:
+
+`assets/demo/data/nexus-core.json`
+
+Replace this file or point `NEXUS_CORE_DATA_PATH` to a real agent/data source
+to make the UI respond to live data requests.
+
+## Asset locations
+
+- Component catalog + registry: `assets/components/`
+- Demo source (Vite): `assets/demo/`
+- Script to scaffold: `scripts/create-vite-demo.sh`
+
+## Updating the demo
+
+1. Edit files in `assets/demo/` and/or `assets/components/`.
+2. Re-run the scaffold script to refresh a demo app:
+   `bash scripts/create-vite-demo.sh ~/nexus/home/projects/json-render-demo`

package/skills/json-render/docs/shadcn-preset.md

@@ -0,0 +1,33 @@
+# shadcn/ui catalog preset (notes)
+
+Prepopulating the json-render catalog with the full shadcn/ui library is
+possible but large. Each component needs:
+
+1. A catalog schema (props + children)
+2. A registry implementation that wraps the shadcn component
+3. Any required Radix/provider dependencies
+
+## Recommended approach
+
+1. Start with a **shadcn-lite** subset (Button, Card, Badge, Table, Tabs,
+   Input, Select, Checkbox, Switch, Alert, Dialog, Tooltip, Accordion).
+2. Keep the preset in a separate folder:
+   - `assets/presets/shadcn/`
+3. Use a generator script to expand coverage incrementally.
+
+## Why a generator
+
+shadcn/ui evolves quickly and includes many interactive components. A generator
+lets you:
+- Keep schemas in sync with component props
+- Add/remove components without manual edits
+- Maintain a single source of truth for registry wrappers
+
+## Suggested workflow
+
+1. Define a JSON manifest of shadcn components + props
+2. Generate `catalog.ts` and `registry.tsx` from the manifest
+3. Validate rendering inside the demo app
+
+If you want the full preset, we can build the generator and include the
+resulting preset as a separate optional asset bundle.

package/skills/json-render/scripts/create-vite-demo.sh

@@ -0,0 +1,45 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+if [[ $# -lt 1 ]]; then
+  echo "Usage: $0 <target-dir>"
+  exit 1
+fi
+
+TARGET_DIR="$1"
+SKILL_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
+DEMO_ASSETS="$SKILL_DIR/assets/demo"
+
+if [[ ! -d "$DEMO_ASSETS" ]]; then
+  echo "Demo assets not found at $DEMO_ASSETS"
+  exit 1
+fi
+
+if [[ ! -d "$TARGET_DIR" ]]; then
+  echo "Creating Vite app in $TARGET_DIR"
+  npm create vite@latest "$TARGET_DIR" -- --template react-ts
+fi
+
+cd "$TARGET_DIR"
+
+if [[ ! -f "package.json" ]]; then
+  echo "No package.json found in $TARGET_DIR"
+  exit 1
+fi
+
+if [[ ! -d "node_modules" ]]; then
+  npm install
+fi
+
+npm install @json-render/core @json-render/react zod
+
+mkdir -p src
+cp "$DEMO_ASSETS/App.tsx" src/App.tsx
+cp "$DEMO_ASSETS/registry.tsx" src/registry.tsx
+cp "$DEMO_ASSETS/catalog.ts" src/catalog.ts
+cp "$DEMO_ASSETS/App.css" src/App.css
+cp "$DEMO_ASSETS/index.css" src/index.css
+
+echo "Demo scaffolded. Run:"
+echo "  cd \"$TARGET_DIR\""
+echo "  npm run dev -- --host"

package/skills/json-render/scripts/llm-server/README.md

@@ -0,0 +1,33 @@
+# json-render LLM server
+
+Local server that streams json-render patches from an LLM. This is optional
+and requires an API key.
+
+## Setup
+
+```bash
+cd ~/nexus/skills/json-render/scripts/llm-server
+npm install
+export ANTHROPIC_API_KEY="..."
+npm run dev
+```
+
+Default endpoint:
+- `http://localhost:8787/api/generate`
+
+## Client wiring (Vite demo)
+
+```bash
+cd ~/nexus/home/projects/json-render-demo
+VITE_LLM_ENDPOINT=http://localhost:8787/api/generate npm run dev -- --host
+```
+
+In the UI, toggle **LLM streaming** and click **Generate with LLM**.
+
+## Notes
+
+- The server uses `scripts/llm-server/catalog.ts`, which mirrors `assets/components/catalog.ts`.
+- Optional data payload comes from `assets/demo/data/nexus-core.json`.
+- Override with `NEXUS_CORE_DATA_PATH` if you want a different source.
+- Use `ALLOW_ORIGIN` to restrict CORS (defaults to `*`).
+- Set `ANTHROPIC_MODEL` to change the model (default: `claude-3-haiku-20240307`).

package/skills/json-render/scripts/llm-server/catalog.ts

@@ -0,0 +1,78 @@
+import { createCatalog } from "@json-render/core";
+import { z } from "zod";
+
+export const catalog = createCatalog({
+  components: {
+    Section: {
+      props: z.object({
+        title: z.string().optional(),
+        description: z.string().optional(),
+      }),
+      hasChildren: true,
+    },
+    Stack: {
+      props: z.object({
+        gap: z.number().int().min(0).optional(),
+        align: z.enum(["left", "center", "right"]).optional(),
+      }),
+      hasChildren: true,
+    },
+    Grid: {
+      props: z.object({
+        columns: z.number().int().min(1).max(4).optional(),
+        gap: z.number().int().min(0).optional(),
+      }),
+      hasChildren: true,
+    },
+    Text: {
+      props: z.object({
+        content: z.string(),
+        tone: z.enum(["default", "muted", "danger"]).optional(),
+      }),
+    },
+    Badge: {
+      props: z.object({
+        label: z.string(),
+        tone: z.enum(["default", "info", "success", "warning"]).optional(),
+      }),
+    },
+    KeyValueList: {
+      props: z.object({
+        title: z.string().optional(),
+        items: z.array(
+          z.object({
+            label: z.string(),
+            value: z.string(),
+          }),
+        ),
+      }),
+    },
+    DataTable: {
+      props: z.object({
+        title: z.string().optional(),
+        columns: z.array(z.string()).min(1),
+        rows: z.array(z.array(z.string())).min(1),
+      }),
+    },
+    Button: {
+      props: z.object({
+        label: z.string(),
+        action: z.string(),
+        actionParams: z.record(z.unknown()).optional(),
+        variant: z.enum(["primary", "secondary"]).optional(),
+      }),
+    },
+  },
+  actions: {
+    navigate: {
+      params: z.object({
+        url: z.string().url(),
+      }),
+    },
+    submit: {
+      params: z.object({
+        formId: z.string(),
+      }),
+    },
+  },
+});