@hachej/boring-ui-kit 0.4.23 → 0.4.24

package/dist/chat-view.js

@@ -0,0 +1,393 @@
+/** The tool that asks the person a question (`ask_user` of `@hachej/boring-agent/ask-user`). Its calls are question parts. */
+export const ASK_USER_TOOL = 'ask_user';
+/** Key of `{ summary, decision? }` in a gated call's details: `APPROVAL_DETAILS` of `@hachej/boring-agent/approval` (a contract test keeps them equal). */
+export const APPROVAL_DETAILS = 'boring.approval';
+/** The host adds file content for `@path` mentions as parts that start like this; the message already shows the mention itself. */
+export const isFileBlock = (text) => text.startsWith('<file path="');
+/** A marked app context stays in the native message; presentation collapses only a valid leading target block to a chip. */
+export function targetContent(text) {
+    if (!text.startsWith('<target>'))
+        return;
+    const end = text.indexOf('</target>');
+    if (end < 0 || text.slice(end + 9, end + 11) !== '\n\n')
+        return;
+    const json = text.slice(8, end);
+    if (new TextEncoder().encode(json).length > 1024)
+        return;
+    try {
+        const target = object(JSON.parse(json));
+        if (!target)
+            return;
+        const label = Object.entries(target).map(([key, value]) => typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean' ? `${key}: ${value}` : key).join(' · ') || 'Target';
+        return { target, speech: text.slice(end + 11), label };
+    }
+    catch {
+        return;
+    }
+}
+export function object(value) {
+    return value !== null && typeof value === 'object' && !Array.isArray(value) ? value : undefined;
+}
+export function streamParts(value) {
+    if (!Array.isArray(value))
+        return [];
+    return value.flatMap((item) => {
+        const part = object(item);
+        if (part?.['type'] === 'text' && typeof part['text'] === 'string')
+            return [{ type: 'text', text: part['text'] }];
+        if (part?.['type'] === 'thinking' && typeof part['thinking'] === 'string')
+            return [{ type: 'thinking', thinking: part['thinking'] }];
+        const args = object(part?.['arguments']);
+        if (part?.['type'] === 'toolCall' && typeof part['id'] === 'string' && typeof part['name'] === 'string' && args)
+            return [{ type: 'toolCall', id: part['id'], name: part['name'], arguments: args }];
+        return [];
+    });
+}
+export function queuedMessages(view) {
+    const items = object(view?.docs['pi.inbox'])?.['items'];
+    if (!Array.isArray(items))
+        return [];
+    return items.filter((item) => {
+        const value = object(item);
+        return value !== undefined && (value['mode'] === 'steer' || value['mode'] === 'followUp') && value['id'] !== undefined;
+    });
+}
+/** The approval record a gated call publishes: its summary and, once made, the decision (`approved`, `denied` or `cancelled`). */
+const approvalRecord = (details) => {
+    const record = object(object(details)?.[APPROVAL_DETAILS]);
+    const summary = record?.['summary'], decision = record?.['decision'];
+    if (typeof summary !== 'string' || !summary.trim())
+        return undefined;
+    return { summary: summary.trim(), ...(decision === 'approved' || decision === 'denied' || decision === 'cancelled' ? { decision } : {}) };
+};
+function visibleText(text, streaming, hideLine) {
+    if (!hideLine)
+        return text;
+    const lines = text.match(/[^\n]*\n|[^\n]+$/g) ?? [];
+    return lines.filter(line => (!streaming || line.endsWith('\n')) && !hideLine(line.replace(/\r?\n$/, ''))).join('');
+}
+const textOf = (parts) => parts.flatMap(part => part.kind === 'text' ? [part.text] : []).join('\n');
+/** The display rows of a native conversation view, plus its run, retry, compaction and pinned cards. */
+export function derive(view, options) {
+    const { mode, renderEntry, renderTool } = options;
+    const natural = options.presentation === 'natural';
+    const developer = mode === 'developer' && !natural;
+    const live = object(view?.docs['pi.live']);
+    const run = object(live?.['run']), generation = object(live?.['generation']);
+    const liveMessage = object(generation?.['message']), retry = object(generation?.['retry']);
+    const taskId = run?.['taskId'];
+    let stageStatus;
+    const items = [], results = new Map(), counts = new Map(), questionIds = new Map();
+    const pendingCalls = new Map();
+    for (const entry of view?.entries ?? []) {
+        const custom = renderEntry?.(entry);
+        if (custom && 'status' in custom)
+            stageStatus = custom.status;
+        const card = custom && (developer || custom.required || custom.inline) ? custom : undefined;
+        if (card)
+            items.push({ key: `entry:${entry.id}`, entry, card });
+        if (!entry.model?.length) {
+            if (!card && developer)
+                items.push({ key: `entry:${entry.id}`, entry });
+            continue;
+        }
+        for (const [index, message] of entry.model.entries()) {
+            if (message.role === 'assistant')
+                for (const part of message.content)
+                    if (part.type === 'toolCall') {
+                        pendingCalls.set(part.id, part);
+                        questionIds.set(part, JSON.stringify([entry.id, part.id]));
+                    }
+            if (message.role === 'toolResult') {
+                const call = pendingCalls.get(message.toolCallId);
+                if (call) {
+                    results.set(call, message);
+                    pendingCalls.delete(message.toolCallId);
+                }
+            }
+            let key = `entry:${entry.id}:${index}`;
+            if (message.role === 'assistant' && entry.byTaskId !== undefined) {
+                const ordinal = counts.get(entry.byTaskId) ?? 0;
+                counts.set(entry.byTaskId, ordinal + 1);
+                key = `assistant:${entry.byTaskId}:${ordinal}`;
+            }
+            if (!card)
+                items.push({ key, entry, message });
+        }
+    }
+    const matched = new Set(results.values());
+    const pinned = [];
+    for (const item of items)
+        if (item.card?.required)
+            pinned.push({ key: item.key, content: item.card.content });
+    const status = (result) => result ? (result.isError ? 'failed' : 'completed') : run ? 'running' : 'unfinished';
+    function toolPart(call, key, committed) {
+        const result = results.get(call);
+        if (call.name === ASK_USER_TOOL)
+            return { kind: 'question', key, call, result, live: !committed, questionId: questionIds.get(call) };
+        // A call gated by `requireApproval` identifies itself: it publishes its summary under APPROVAL_DETAILS before it asks.
+        const slotDetails = result ? undefined : (Array.isArray(live?.['tools']) ? live['tools'] : []).map(object).find(slot => slot?.['callId'] === call.id)?.['details'];
+        const record = approvalRecord(result ? result.details : slotDetails);
+        if (record)
+            return { kind: 'approval', key, call, result, live: !committed, questionId: questionIds.get(call), summary: record.summary, ...(record.decision ? { decision: record.decision } : {}), ...(result ? { entry: { key: `${key}:step`, call, result, status: status(result) } } : {}) };
+        // A `delegate` call (or any tool publishing `DelegateDetails`) is a sub-agent card, live from its running slot, when the sub-agent item draws it.
+        const delegated = options.subagent?.(call, result ? result.details : slotDetails, result);
+        if (delegated !== undefined)
+            return { kind: 'subagent', key, call, result, content: delegated, ...(result ? { entry: { key: `${key}:step`, call, result, status: status(result) } } : {}) };
+        // With the artifacts item, a finished call that carries a descriptor becomes a card and a running `present` an "opening" card. A failed call stays an ordinary (failed) tool step.
+        const artifact = options.artifacts?.recognise(call, result, !result && run !== undefined, options.artifacts.detect);
+        // A tool whose own result carries the descriptor is replaced by its card; a host-detected card is shown in addition to the step.
+        if (artifact)
+            return { kind: 'artifact', key, call, artifact, ...(result && !artifact.own ? { entry: { key, call, result, status: status(result) } } : {}) };
+        const custom = committed ? renderTool?.(call, result) : undefined;
+        if (custom?.required) {
+            pinned.push({ key, content: custom.content });
+            return undefined;
+        }
+        if (natural)
+            return undefined;
+        if (custom && (developer || result?.isError || custom.inline))
+            return { kind: 'tool', key, entry: { key, call, result, status: status(result), custom: custom.content } };
+        // A host that folds only some calls (`groupTool`) keeps the rest as cards, which expert mode hides unless they failed.
+        if (!developer && !result?.isError && options.groupTool && !(result && safe(options.groupTool, { key, call, result, status: status(result) })))
+            return undefined;
+        return { kind: 'tool', key, entry: { key, call, result, status: status(result) } };
+    }
+    function partsOf(content, rowKey, streaming, committed) {
+        const parts = [];
+        for (const [index, part] of content.entries()) {
+            if (part.type === 'text') {
+                const text = visibleText(part.text, streaming && index === content.length - 1, options.hideLine);
+                if (text.length)
+                    parts.push({ kind: 'text', key: `${rowKey}:text:${index}`, text });
+            }
+            else if (part.type === 'thinking') {
+                if (developer && part.thinking.length)
+                    parts.push({ kind: 'thinking', key: `${rowKey}:thinking:${index}`, text: part.thinking, streaming: streaming && index === content.length - 1 });
+            }
+            else {
+                const made = toolPart(part, `${rowKey}:tool:${index}`, committed);
+                if (!natural && (made?.kind === 'artifact' || made?.kind === 'approval' || made?.kind === 'subagent') && made.entry)
+                    parts.push({ kind: 'tool', key: `${made.key}:step`, entry: made.entry });
+                if (made)
+                    parts.push(made);
+            }
+        }
+        return parts;
+    }
+    const imagesOf = (content) => content.flatMap(part => part.type === 'toolCall'
+        ? (results.get(part)?.content ?? []).filter((item) => item.type === 'image') : []);
+    // Pass 2: rows.
+    const rows = [];
+    for (const item of items) {
+        if (item.card) {
+            if (!item.card.required)
+                rows.push({ key: item.key, type: 'card', card: item.card });
+            continue;
+        }
+        const message = item.message;
+        if (!message) {
+            if (developer)
+                rows.push({ key: item.key, type: 'event', label: item.entry.kind });
+            continue;
+        }
+        if (message.role === 'system') {
+            if (developer)
+                rows.push({ key: item.key, type: 'system', text: typeof message.content === 'string' ? message.content : message.content.map(part => part.text).join('\n') });
+        }
+        else if (message.role === 'toolResult') {
+            // A result with its call is shown on the call's card. Only an unmatched failure gets its own row.
+            if (!natural && message.isError && !matched.has(message))
+                rows.push({ key: item.key, type: 'orphan-result', message });
+        }
+        else if (message.role === 'user')
+            rows.push({ key: item.key, type: 'user', message });
+        else {
+            const parts = partsOf(message.content, item.key, false, true), images = imagesOf(message.content);
+            // Empty/tool-only rounds still contribute their native metadata to the answer.
+            rows.push({ key: item.key, type: 'assistant', parts, ...(images.length ? { images } : {}), streaming: false, stopReason: message.stopReason, ...(message.errorMessage && !natural ? { errorMessage: message.errorMessage } : {}), text: textOf(parts), ...replyMeta(message), entryId: String(item.entry.id) });
+        }
+    }
+    if (typeof taskId === 'number' && liveMessage) {
+        const key = `assistant:${taskId}:${counts.get(taskId) ?? 0}`, content = streamParts(liveMessage['content']);
+        const parts = partsOf(content, key, true, false), images = imagesOf(content);
+        if (!natural || parts.length || images.length)
+            rows.push({ key, type: 'assistant', parts, ...(images.length ? { images } : {}), streaming: true, text: textOf(parts) });
+    }
+    const merged = mergeTurns(rows).filter(row => row.type !== 'assistant' || row.parts.length || row.images?.length || row.stopReason === 'error' || row.stopReason === 'aborted' || row.streaming && !natural).map(row => row.type === 'assistant' && options.artifacts ? { ...row, parts: oneCardPerArtifact(row.parts) } : row);
+    const last = merged[merged.length - 1];
+    if (run && last?.type === 'assistant')
+        merged[merged.length - 1] = { ...last, active: true };
+    return { rows: merged, pinned, run, retry, ...(stageStatus !== undefined ? { stageStatus } : {}), compacting: Array.isArray(live?.['compactions']) && live['compactions'].length > 0 };
+}
+/** What a reply reports about the model round that wrote it, read from Pi's own message (each field only when it is there). */
+export function replyMeta(message) {
+    return {
+        ...(typeof message.timestamp === 'number' ? { timestamp: message.timestamp } : {}),
+        ...(typeof message.provider === 'string' && typeof message.model === 'string' ? { model: { provider: message.provider, modelId: message.model } } : {}),
+        ...(typeof message.durationMs === 'number' ? { durationMs: message.durationMs } : {}),
+    };
+}
+/**
+ * Pi commits one assistant message per model round, so a turn with tool use is several messages in a row.
+ * They read as one answer: merge consecutive assistant rows (unless one ended in an error or stop) so tool calls
+ * group across rounds and the turn has a single copy action. The first row's key is kept, so identity is stable.
+ */
+function mergeTurns(rows) {
+    const out = [];
+    for (const row of rows) {
+        const last = out[out.length - 1];
+        if (last?.type === 'assistant' && row.type === 'card' && row.card.inline) {
+            out[out.length - 1] = { ...last, parts: [...last.parts, { kind: 'card', key: row.key, content: row.card.content }] };
+        }
+        else if (last?.type === 'assistant' && row.type === 'assistant' && !last.stopReason?.match(/^(error|aborted)$/)) {
+            out[out.length - 1] = { key: last.key, type: 'assistant', parts: [...last.parts, ...row.parts], ...((last.images?.length || row.images?.length) ? { images: [...(last.images ?? []), ...(row.images ?? [])] } : {}), streaming: row.streaming,
+                ...(row.stopReason ? { stopReason: row.stopReason } : {}), ...(row.errorMessage ? { errorMessage: row.errorMessage } : {}),
+                text: [last.text, row.text].filter(Boolean).join('\n\n'), ...(row.timestamp !== undefined ? { timestamp: row.timestamp } : {}), ...(row.model ? { model: row.model } : {}), ...(last.durationMs !== undefined || row.durationMs !== undefined ? { durationMs: (last.durationMs ?? 0) + (row.durationMs ?? 0) } : {}),
+                ...(row.entryId !== undefined ? { entryId: row.entryId } : last.entryId !== undefined ? { entryId: last.entryId } : {}) };
+        }
+        else
+            out.push(row);
+    }
+    return out;
+}
+/**
+ * A turn that revises an artifact several times shows one card for it: the last version, at the place of the last step.
+ * A running `present` of a file already shown takes over the title of its card.
+ */
+function oneCardPerArtifact(parts) {
+    const idOf = (part) => part.kind === 'artifact' ? part.artifact.id : undefined;
+    const last = new Map();
+    for (const [index, part] of parts.entries()) {
+        const id = idOf(part);
+        if (id !== undefined)
+            last.set(id, index);
+    }
+    const out = [];
+    for (const [index, part] of parts.entries()) {
+        const id = idOf(part);
+        if (id === undefined || last.get(id) === index) {
+            if (part.kind === 'artifact' && part.artifact.state === 'presenting' && part.artifact.title === undefined && id !== undefined) {
+                const earlier = parts.find(other => other.kind === 'artifact' && other.artifact.state === 'ready' && other.artifact.id === id);
+                if (earlier?.kind === 'artifact') {
+                    out.push({ ...part, artifact: { ...part.artifact, title: earlier.artifact.title } });
+                    continue;
+                }
+            }
+            out.push(part);
+        }
+    }
+    return out;
+}
+export function segments(parts, groupTool) {
+    const out = [];
+    let run = [];
+    const flush = () => {
+        const first = run[0];
+        if (first)
+            out.push({ kind: 'activity', key: `activity:${first.key}`, steps: run });
+        run = [];
+    };
+    for (const part of parts) {
+        if (part.kind === 'thinking')
+            run.push({ kind: 'thinking', key: part.key, text: part.text, streaming: part.streaming });
+        else if (part.kind === 'tool' && !part.entry.custom && (!groupTool || safe(groupTool, part.entry)))
+            run.push({ kind: 'tool', key: part.key, entry: part.entry });
+        else {
+            flush();
+            out.push({ kind: 'part', part });
+        }
+    }
+    flush();
+    return out;
+}
+function safe(groupTool, entry) {
+    try {
+        return entry.result !== undefined && !entry.result.isError && groupTool(entry.call, entry.result) === true;
+    }
+    catch {
+        return false;
+    }
+}
+const LEAD_GAP_MS = 15 * 60_000;
+const leads = new WeakMap();
+const stamp = (row) => row.type === 'user' ? row.message.timestamp : row.type === 'assistant' ? row.timestamp : undefined;
+/**
+ * `messageStyle="messaging"`: flags the first user or assistant row of each run (a change of side, or more than 15 minutes since the
+ * last message) so only it gets a tail. A row keeps its identity while its flag does not change, so memoized rows stay still.
+ */
+export function markLeads(rows) {
+    return rows.map((row, at) => {
+        if (row.type !== 'user' && row.type !== 'assistant')
+            return row;
+        const before = rows[at - 1], time = stamp(row), last = before && stamp(before);
+        const lead = !before || before.type !== row.type || (time !== undefined && last !== undefined && time - last > LEAD_GAP_MS);
+        if (row.lead === lead)
+            return row;
+        const cached = leads.get(row), hit = lead ? cached?.yes : cached?.no;
+        if (hit)
+            return hit;
+        const next = { ...row, lead };
+        leads.set(row, { ...cached, [lead ? 'yes' : 'no']: next });
+        return next;
+    });
+}
+/**
+ * The newest question or approval that waits for the person: committed (not still being generated), with no result yet and, for an
+ * approval, no decision recorded. An approval whose decision is made is not waiting: the run carries on (or stops) by itself.
+ */
+export function waitingPart(rows) {
+    for (let at = rows.length - 1; at >= 0; at--) {
+        const row = rows[at];
+        if (row?.type === 'assistant')
+            for (const part of row.parts)
+                if (waits(part))
+                    return part;
+    }
+    return undefined;
+}
+/** Whether this one part waits for the person (the rule of `waitingPart`). */
+export function waits(part) {
+    return (part.kind === 'question' || (part.kind === 'approval' && !part.decision)) && !part.live && !part.result;
+}
+/** Whether the conversation waits for the person to answer a question or decide an approval (`waitingPart`). */
+export const waitingForAnswer = (rows) => waitingPart(rows) !== undefined;
+/** `presentation="natural"`: whether the one "preparing" status shows. Any work (a run, a retry, a compaction) counts, except a confirmed stop with no run left; a question waiting for the person does not. */
+export function preparing(input) {
+    const { natural, waitingForAnswer, run, retry, compacting, stop } = input;
+    return natural && !waitingForAnswer && Boolean(run || retry || compacting) && !(stop === 'confirmed' && !run);
+}
+/** The words of run notices (toasts and system notifications). One table, so a surface localizes them in one place. */
+export const defaultNoticeText = {
+    /** What a waiting approval asks. */
+    approve: (summary) => `Approve: ${summary}`,
+    /** A failed run that reported no error message. */
+    runFailed: 'The run failed',
+    /** A finished run whose reply has no text. */
+    finished: 'Finished',
+};
+/** One line from a Markdown reply: its first non-empty line without Markdown marks, cut with an ellipsis. */
+export function summaryOf(text, limit = 140) {
+    const line = text.split('\n').map(item => item.trim()).find(item => item && !/^(```|---+$)/.test(item)) ?? '';
+    const plain = line.replace(/^(#{1,6}\s+|>\s*|[-*+]\s+|\d+[.)]\s+)/, '').replace(/!?\[([^\]]*)\]\([^)]*\)/g, '$1').replace(/[*_`~]+/g, '').replace(/\s+/g, ' ').trim();
+    return plain.length > limit ? `${plain.slice(0, limit - 1).trimEnd()}…` : plain;
+}
+/**
+ * What a notice says about the question or approval waiting for the person (`waitingPart`), if one waits. `question` reads the
+ * question text from an `ask_user` call (the question item owns that grammar).
+ */
+export function pendingNotice(rows, question, text = defaultNoticeText) {
+    const part = waitingPart(rows);
+    if (!part)
+        return undefined;
+    return part.kind === 'question' ? question(part.call) : text.approve(part.summary);
+}
+/** What a notice says about a run that just ended, from the conversation's rows; `undefined` when the person stopped it. */
+export function finishNotice(rows, text = defaultNoticeText) {
+    const last = [...rows].reverse().find((row) => row.type === 'assistant');
+    if (last?.stopReason === 'aborted')
+        return undefined;
+    if (last?.stopReason === 'error')
+        return { kind: 'error', summary: last.errorMessage ?? text.runFailed };
+    return { kind: 'done', summary: summaryOf(last?.text ?? '') || text.finished };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hachej/boring-ui-kit",
-  "version": "0.4.23",
+  "version": "0.4.24",
   "license": "MIT",
   "private": false,
   "type": "module",
@@ -55,6 +55,10 @@
       "types": "./dist/native-chat.d.ts",
       "import": "./dist/native-chat.js"
     },
+    "./chat-view": {
+      "types": "./dist/chat-view.d.ts",
+      "import": "./dist/chat-view.js"
+    },
     "./voice-capture": {
       "types": "./dist/voice-capture.d.ts",
       "import": "./dist/voice-capture.js"
@@ -134,7 +138,7 @@
     }
   },
   "peerDependencies": {
-    "@hachej/boring-files": "^0.4.23",
+    "@hachej/boring-files": "^0.4.24",
     "@earendil-works/pi-durable": "~1.2.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

package/r/agent-target.json

@@ -4,15 +4,15 @@
   "title": "Point and dictate on app data",
   "description": "Tap explicitly marked JSON app context, dictate once and show the same app agent’s native reply without opening chat. Host-controlled presentation; no feedback report or second controller.",
   "dependencies": [
-    "@hachej/boring-ui-kit@^0.4.23",
-    "@hachej/boring-feedback@^0.4.23",
+    "@hachej/boring-ui-kit@^0.4.24",
+    "@hachej/boring-feedback@^0.4.24",
     "@earendil-works/pi-durable@~1.2.0",
     "react@^19.0.0",
     "react-dom@^19.0.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.23/r/app-shell.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.23/r/pi-chat.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/app-shell.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/pi-chat.json",
     "button",
     "card",
     "message",

package/r/app-shell.json

@@ -4,21 +4,21 @@
   "title": "App shell: layouts, list/detail and agent layer",
   "description": "AppShell with three layouts. B \"workspace\" puts a ListDetail on a screen (phone: the list, then the detail as a stack step with Back; wide: a 20rem list and the detail side by side, sidebar as an icon rail). C \"chat\" wraps the app's own AgentWorkspace (untouched, passed as the nav item's render; install the pi-app item yourself) in the same sidebar, account menu and header; it takes no shell agent. A \"screen\": one screen at a time, every screen kept mounted. On a phone bottom tabs (at most four; more give three plus a « Plus » sheet) and an avatar button that opens the account sheet; on a wide screen the shadcn sidebar (icon rail, NavUser). One header per screen through useScreenHeader (title, subtitle, back, up to two actions, the rest behind « … »). The account menu holds « Améliorer l'app » (the improve agent), the app's own entries and sign out. AppSheet is the one bottom sheet (one open at a time, Back closes it). It mounts the AgentLayer: one agent's PiChat above the app (phone: a drawer with peek, half and full snap points; wide: a right panel), the improve agent in the same layer, optional push-to-talk and point mode. Also useAgentContext and readAgentContext (the screen on show travels as `context` with each submit) and useBackLayer, the one Back manager. Built on explicitly pinned Base UI drawer and dropdown-menu recipes, plus the sidebar and avatar of the host's own shadcn style.",
   "dependencies": [
-    "@hachej/boring-feedback@^0.4.23",
-    "@hachej/boring-ui-kit@^0.4.23",
+    "@hachej/boring-feedback@^0.4.24",
+    "@hachej/boring-ui-kit@^0.4.24",
     "@base-ui/react@^1.9.0",
     "react@^19.0.0",
     "react-dom@^19.0.0",
     "lucide-react@^1.51.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.23/r/pi-chat.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.23/r/pi-chat-plugins.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.23/r/pi-chat-voice.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.23/r/dock.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.23/r/feedback.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.23/r/utils.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.23/r/button.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/pi-chat.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/pi-chat-plugins.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/pi-chat-voice.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/dock.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/feedback.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/utils.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/button.json",
     "drawer",
     "sidebar",
     "avatar",

package/r/board-viewer.json

@@ -4,16 +4,16 @@
   "title": "Board viewer",
   "description": "A board@1 artifact kind for *.board.json. Lazy native tldraw projection of maquette screens, sandboxed HTML mock-ups, goto arrows and notes. Conditional board-file autosave; phone viewing without accidental frame edits. Hosts supply their resource client, asset URLs and license key.",
   "dependencies": [
-    "@hachej/boring-ui-kit@^0.4.23",
-    "@hachej/boring-files@^0.4.23",
+    "@hachej/boring-ui-kit@^0.4.24",
+    "@hachej/boring-files@^0.4.24",
     "react@^19.0.0",
     "lucide-react@1.51.0",
     "tldraw@5.5.2"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.23/r/maquette-viewer.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.23/r/mockup-viewer.json",
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.23/r/pi-artifacts.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/maquette-viewer.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/mockup-viewer.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/pi-artifacts.json",
     "button",
     "alert",
     "card",

package/r/button.json

@@ -9,7 +9,7 @@
     "lucide-react@^1.51.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.23/r/utils.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/utils.json",
     "dropdown-menu",
     "button",
     "toggle",

package/r/diagram-viewer.json

@@ -2,13 +2,13 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "diagram-viewer",
   "title": "Diagram viewer",
-  "description": "DiagramViewer, DiagramView and diagramKind: an agent's *.diagram.json (format v1, versioned: nodes, edges, optional groups, highlighted path and note) as boxes and numbered arrows with a legend that says what happens and who acts. Layers run left to right while they fit and top to bottom on a phone, scrolling inside their own box; no layout library. A superset of a maquette's workflow, which the maquette viewer draws with DiagramView. The pi-app artifact panel shows .diagram.json files with it by default; app artifactKinds win.",
+  "description": "DiagramViewer, DiagramView and diagramKind: an agent's *.diagram.json (format v1, versioned: nodes, edges, optional groups, highlighted path and note) as boxes and numbered arrows with a legend that says what happens and who acts. Layers run left to right while they fit and top to bottom on a phone, scrolling inside their own box; no layout library. A superset of a maquette's workflow, which the maquette viewer draws with DiagramView. Its kind is in the pi-app-kinds default list, which an app passes to the pi-app artifact panel; an app kind placed before it wins.",
   "dependencies": [
     "react@^19.0.0",
     "lucide-react@^1.51.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.23/r/theme.json",
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/theme.json",
     "alert",
     "badge"
   ],
@@ -33,13 +33,13 @@
     },
     {
       "path": "registry/diagram-viewer/diagram-viewer.tsx",
-      "content": "'use client';\n\n// The diagram viewer: an agent's `*.diagram.json` (format v1) drawn by `DiagramView`, with its highlighted path and note. `diagramKind` (diagram-kind.ts) is\n// the kind the pi-app artifact panel uses by default for `.diagram.json` files; an app's own kind in `artifactKinds` wins. The maquette\n// viewer draws its workflow (\"How it works\") with the same `DiagramView`. It draws data only: nothing in the file runs.\nimport { useMemo } from 'react';\nimport { InfoIcon, TriangleAlertIcon } from 'lucide-react';\nimport { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';\nimport { DIAGRAM_FORMAT_VERSION, parseDiagram } from './diagram';\nimport { diagramLabelsFor } from './diagram-labels';\nimport type { DiagramLabels, DiagramLocale } from './diagram-labels';\nimport { DiagramView } from './diagram-view';\n\nexport { DIAGRAM_FORMAT_VERSION, isDiagramPath, parseDiagram } from './diagram';\nexport type { Diagram, DiagramEdge, DiagramFileV1, DiagramGroup, DiagramNode, DiagramParse } from './diagram';\nexport { DiagramView } from './diagram-view';\nexport type { DiagramViewLabels } from './diagram-view';\nexport { defaultDiagramLabels, diagramLabelsFor, frenchDiagramLabels } from './diagram-labels';\nexport type { DiagramLabels, DiagramLocale } from './diagram-labels';\n\nexport interface DiagramViewerProps {\n  /** The file's text (JSON). */\n  readonly text: string;\n  /** The base words: English by default. */\n  readonly locale?: DiagramLocale | undefined;\n  /** Any word over the locale's. */\n  readonly labels?: Partial<DiagramLabels> | undefined;\n}\n\n/** A diagram file; a newer format version shows a notice, an unreadable file an inline error. */\nexport function DiagramViewer({ text, locale, labels: given }: DiagramViewerProps) {\n  const labels = useMemo(() => diagramLabelsFor(locale, given), [locale, given]);\n  const parsed = useMemo(() => parseDiagram(text), [text]);\n  const newer = parsed.version !== undefined && parsed.version > DIAGRAM_FORMAT_VERSION;\n  return <section data-boring=\"diagram-viewer\" data-state={parsed.kind} aria-label={parsed.kind === 'ok' ? parsed.diagram.title || labels.kind : labels.kind}\n    className=\"mx-auto flex w-full max-w-5xl min-w-0 flex-col gap-3 px-3 pt-2 pb-4 sm:px-6\">\n    {newer && <Alert data-testid=\"diagram-newer\"><InfoIcon aria-hidden=\"true\" /><AlertTitle>{labels.newerTitle}</AlertTitle><AlertDescription>{labels.newer(parsed.version!)}</AlertDescription></Alert>}\n    {parsed.kind === 'ok' ? <DiagramView diagram={parsed.diagram} labels={labels} />\n      : <Alert variant=\"destructive\" data-testid=\"diagram-error\" data-reason={parsed.reason}><TriangleAlertIcon aria-hidden=\"true\" /><AlertTitle>{labels.errorTitle}</AlertTitle>\n        <AlertDescription>{parsed.reason === 'json' ? labels.invalidJson : labels.invalidShape}</AlertDescription></Alert>}\n  </section>;\n}\n",
+      "content": "'use client';\n\n// The diagram viewer: an agent's `*.diagram.json` (format v1) drawn by `DiagramView`, with its highlighted path and note. `diagramKind` (diagram-kind.ts) is\n// the kind of the pi-app-kinds default list for `.diagram.json` files; an app kind placed before it in `artifactKinds` wins. The maquette\n// viewer draws its workflow (\"How it works\") with the same `DiagramView`. It draws data only: nothing in the file runs.\nimport { useMemo } from 'react';\nimport { InfoIcon, TriangleAlertIcon } from 'lucide-react';\nimport { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';\nimport { DIAGRAM_FORMAT_VERSION, parseDiagram } from './diagram';\nimport { diagramLabelsFor } from './diagram-labels';\nimport type { DiagramLabels, DiagramLocale } from './diagram-labels';\nimport { DiagramView } from './diagram-view';\n\nexport { DIAGRAM_FORMAT_VERSION, isDiagramPath, parseDiagram } from './diagram';\nexport type { Diagram, DiagramEdge, DiagramFileV1, DiagramGroup, DiagramNode, DiagramParse } from './diagram';\nexport { DiagramView } from './diagram-view';\nexport type { DiagramViewLabels } from './diagram-view';\nexport { defaultDiagramLabels, diagramLabelsFor, frenchDiagramLabels } from './diagram-labels';\nexport type { DiagramLabels, DiagramLocale } from './diagram-labels';\n\nexport interface DiagramViewerProps {\n  /** The file's text (JSON). */\n  readonly text: string;\n  /** The base words: English by default. */\n  readonly locale?: DiagramLocale | undefined;\n  /** Any word over the locale's. */\n  readonly labels?: Partial<DiagramLabels> | undefined;\n}\n\n/** A diagram file; a newer format version shows a notice, an unreadable file an inline error. */\nexport function DiagramViewer({ text, locale, labels: given }: DiagramViewerProps) {\n  const labels = useMemo(() => diagramLabelsFor(locale, given), [locale, given]);\n  const parsed = useMemo(() => parseDiagram(text), [text]);\n  const newer = parsed.version !== undefined && parsed.version > DIAGRAM_FORMAT_VERSION;\n  return <section data-boring=\"diagram-viewer\" data-state={parsed.kind} aria-label={parsed.kind === 'ok' ? parsed.diagram.title || labels.kind : labels.kind}\n    className=\"mx-auto flex w-full max-w-5xl min-w-0 flex-col gap-3 px-3 pt-2 pb-4 sm:px-6\">\n    {newer && <Alert data-testid=\"diagram-newer\"><InfoIcon aria-hidden=\"true\" /><AlertTitle>{labels.newerTitle}</AlertTitle><AlertDescription>{labels.newer(parsed.version!)}</AlertDescription></Alert>}\n    {parsed.kind === 'ok' ? <DiagramView diagram={parsed.diagram} labels={labels} />\n      : <Alert variant=\"destructive\" data-testid=\"diagram-error\" data-reason={parsed.reason}><TriangleAlertIcon aria-hidden=\"true\" /><AlertTitle>{labels.errorTitle}</AlertTitle>\n        <AlertDescription>{parsed.reason === 'json' ? labels.invalidJson : labels.invalidShape}</AlertDescription></Alert>}\n  </section>;\n}\n",
       "type": "registry:component",
       "target": "components/diagram-viewer/diagram-viewer.tsx"
     },
     {
       "path": "registry/diagram-viewer/diagram-kind.tsx",
-      "content": "'use client';\n\nimport { lazy } from 'react';\nimport type { ComponentType, ReactNode } from 'react';\nimport { WorkflowIcon } from 'lucide-react';\nimport { isDiagramPath } from './diagram';\nimport { diagramLabelsFor } from './diagram-labels';\nimport type { DiagramLabels, DiagramLocale } from './diagram-labels';\n\nconst DiagramViewer = lazy(() => import('./diagram-viewer').then(module => ({ default: module.DiagramViewer })));\n\n/**\n * The artifact kind of a diagram file (structurally an `ArtifactKind` of pi-artifacts): it matches `*.diagram.json`, names it, gives its icon\n * and draws it with `DiagramViewer`, loaded on first open. Pass it, or your own, in `artifactKinds`; kinds an app passes are consulted first.\n */\nexport interface DiagramKind {\n  readonly match: (target: { readonly resource: { readonly path: string } }) => boolean;\n  readonly label: string;\n  readonly icon: ComponentType<{ readonly className?: string; readonly 'aria-hidden'?: boolean | 'true' }>;\n  readonly renderer: (props: { readonly text: string }) => ReactNode;\n}\n\n/** A diagram kind in `locale` (\"Diagram\" in English, \"Diagramme\" in French) with any word overridden. */\nexport function createDiagramKind({ locale, labels }: { readonly locale?: DiagramLocale | undefined; readonly labels?: Partial<DiagramLabels> | undefined } = {}): DiagramKind {\n  return {\n    match: target => isDiagramPath(target.resource.path),\n    label: diagramLabelsFor(locale, labels).kind,\n    icon: WorkflowIcon,\n    renderer: ({ text }) => <DiagramViewer text={text} locale={locale} labels={labels} />,\n  };\n}\n\n/** The built-in diagram kind, in English. */\nexport const diagramKind: DiagramKind = createDiagramKind();\n",
+      "content": "'use client';\n\nimport { lazy } from 'react';\nimport type { ComponentType, ReactNode } from 'react';\nimport { WorkflowIcon } from 'lucide-react';\nimport { isDiagramPath } from './diagram';\nimport { diagramLabelsFor } from './diagram-labels';\nimport type { DiagramLabels, DiagramLocale } from './diagram-labels';\n\nconst DiagramViewer = lazy(() => import('./diagram-viewer').then(module => ({ default: module.DiagramViewer })));\n\n/**\n * The artifact kind of a diagram file (structurally an `ArtifactKind` of pi-artifacts): it matches `*.diagram.json`, names it, gives its icon\n * and draws it with `DiagramViewer`, loaded on first open. It is in the pi-app-kinds default list (`defaultKinds`); kinds in `artifactKinds` are consulted in order.\n */\nexport interface DiagramKind {\n  readonly match: (target: { readonly resource: { readonly path: string } }) => boolean;\n  readonly label: string;\n  readonly icon: ComponentType<{ readonly className?: string; readonly 'aria-hidden'?: boolean | 'true' }>;\n  readonly renderer: (props: { readonly text: string }) => ReactNode;\n}\n\n/** A diagram kind in `locale` (\"Diagram\" in English, \"Diagramme\" in French) with any word overridden. */\nexport function createDiagramKind({ locale, labels }: { readonly locale?: DiagramLocale | undefined; readonly labels?: Partial<DiagramLabels> | undefined } = {}): DiagramKind {\n  return {\n    match: target => isDiagramPath(target.resource.path),\n    label: diagramLabelsFor(locale, labels).kind,\n    icon: WorkflowIcon,\n    renderer: ({ text }) => <DiagramViewer text={text} locale={locale} labels={labels} />,\n  };\n}\n\n/** The built-in diagram kind, in English. */\nexport const diagramKind: DiagramKind = createDiagramKind();\n",
       "type": "registry:component",
       "target": "components/diagram-viewer/diagram-kind.tsx"
     }

package/r/dock.json

@@ -7,7 +7,7 @@
     "react@^19.0.0"
   ],
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.23/r/utils.json"
+    "https://cdn.jsdelivr.net/npm/@hachej/boring-ui-kit@0.4.24/r/utils.json"
   ],
   "files": [
     {