@djangocfg/ui-tools 2.1.377 → 2.1.379

package/dist/index.cjs

@@ -7,7 +7,7 @@ var chunkKNDLV4PI_cjs = require('./chunk-KNDLV4PI.cjs');
 var chunk5I5QNGUG_cjs = require('./chunk-5I5QNGUG.cjs');
 var chunkYW5IVWHQ_cjs = require('./chunk-YW5IVWHQ.cjs');
 var chunk76NNDZH6_cjs = require('./chunk-76NNDZH6.cjs');
-var chunkTUZZROQU_cjs = require('./chunk-TUZZROQU.cjs');
+var chunkSI5RD2GD_cjs = require('./chunk-SI5RD2GD.cjs');
 var chunkYXZ6GU7H_cjs = require('./chunk-YXZ6GU7H.cjs');
 var chunkFVVF7VCD_cjs = require('./chunk-FVVF7VCD.cjs');
 var chunk7EYHNP3E_cjs = require('./chunk-7EYHNP3E.cjs');
@@ -374,7 +374,7 @@ var LazyTree = createLazyComponent(
   }
 );
 var LazyChat = createLazyComponent(
-  () => import('./ChatRoot-AWNBBBH7.cjs').then((m) => ({ default: m.ChatRoot })),
+  () => import('./ChatRoot-EJC5Y2YM.cjs').then((m) => ({ default: m.ChatRoot })),
   {
     displayName: "LazyChat",
     fallback: /* @__PURE__ */ jsxRuntime.jsx(LoadingFallback, { minHeight: 320, text: "Loading chat\u2026" })
@@ -411,7 +411,7 @@ async function* parseSSE(response, options = {}) {
     throw new Error("SSE response has no body");
   }
   const map = options.map ?? DEFAULT_MAP;
-  const idleMs = options.idleTimeoutMs ?? chunkTUZZROQU_cjs.LIMITS.sseIdleMs;
+  const idleMs = options.idleTimeoutMs ?? chunkSI5RD2GD_cjs.LIMITS.sseIdleMs;
   const reader = response.body.getReader();
   const decoder = new TextDecoder();
   let buffer = "";
@@ -614,7 +614,7 @@ function createMockTransport(opts = {}) {
     async createSession(_opts) {
       await sleep(latency);
       return {
-        sessionId: chunkTUZZROQU_cjs.createId("s"),
+        sessionId: chunkSI5RD2GD_cjs.createId("s"),
         messages: history.length ? [...history] : void 0,
         hasMore: false,
         cursor: null,
@@ -631,12 +631,12 @@ function createMockTransport(opts = {}) {
         throw new Error("mock transport scripted failure");
       }
       history.push({
-        id: chunkTUZZROQU_cjs.createId("u"),
+        id: chunkSI5RD2GD_cjs.createId("u"),
         role: "user",
         content,
         createdAt: Date.now()
       });
-      const messageId = chunkTUZZROQU_cjs.createId("a");
+      const messageId = chunkSI5RD2GD_cjs.createId("a");
       yield { type: "message_start", messageId, sessionId: _sid };
       const reply = replies[turn % replies.length];
       turn += 1;
@@ -665,7 +665,7 @@ function createMockTransport(opts = {}) {
       turn += 1;
       const text = typeof reply === "string" ? reply : reply.filter((e) => e.type === "chunk").map((e) => e.delta).join("");
       return {
-        id: chunkTUZZROQU_cjs.createId("a"),
+        id: chunkSI5RD2GD_cjs.createId("a"),
         role: "assistant",
         content: text || DEFAULT_REPLY,
         createdAt: Date.now()
@@ -821,7 +821,7 @@ function useChatLightbox() {
 chunkOLISEQHS_cjs.__name(useChatLightbox, "useChatLightbox");
 function useAutoFocusOnStreamEnd(options = {}) {
   const { isStreaming: isStreamingProp, targetRef, enabled = true, delayMs = 0 } = options;
-  const ctx = chunkTUZZROQU_cjs.useChatContextOptional();
+  const ctx = chunkSI5RD2GD_cjs.useChatContextOptional();
   const isStreaming = isStreamingProp ?? ctx?.isStreaming ?? false;
   const composerHandleRef = React.useRef(null);
   composerHandleRef.current = ctx?.composer ?? null;
@@ -846,7 +846,7 @@ function useAutoFocusOnStreamEnd(options = {}) {
 }
 chunkOLISEQHS_cjs.__name(useAutoFocusOnStreamEnd, "useAutoFocusOnStreamEnd");
 function useRegisterComposer(focus) {
-  const ctx = chunkTUZZROQU_cjs.useChatContextOptional();
+  const ctx = chunkSI5RD2GD_cjs.useChatContextOptional();
   const register = ctx?.registerComposer;
   React.useEffect(() => {
     if (!register) return;
@@ -901,9 +901,9 @@ function AudioToggle({
   alwaysShow = false,
   className
 }) {
-  const muted = chunkTUZZROQU_cjs.useChatAudioPrefs((s) => s.muted);
-  const setMuted = chunkTUZZROQU_cjs.useChatAudioPrefs((s) => s.setMuted);
-  const ctx = chunkTUZZROQU_cjs.useChatContextOptional();
+  const muted = chunkSI5RD2GD_cjs.useChatAudioPrefs((s) => s.muted);
+  const setMuted = chunkSI5RD2GD_cjs.useChatAudioPrefs((s) => s.setMuted);
+  const ctx = chunkSI5RD2GD_cjs.useChatContextOptional();
   if (ctx && !ctx.hasAudio && !alwaysShow) return null;
   const Icon = muted ? lucideReact.VolumeX : lucideReact.Volume2;
   const label = muted ? "Unmute chat sounds" : "Mute chat sounds";
@@ -2259,159 +2259,159 @@ Object.defineProperty(exports, "useCronWeekDays", {
 });
 Object.defineProperty(exports, "Attachments", {
   enumerable: true,
-  get: function () { return chunkTUZZROQU_cjs.Attachments; }
+  get: function () { return chunkSI5RD2GD_cjs.Attachments; }
 });
 Object.defineProperty(exports, "AttachmentsGrid", {
   enumerable: true,
-  get: function () { return chunkTUZZROQU_cjs.AttachmentsGrid; }
+  get: function () { return chunkSI5RD2GD_cjs.AttachmentsGrid; }
 });
 Object.defineProperty(exports, "AttachmentsList", {
   enumerable: true,
-  get: function () { return chunkTUZZROQU_cjs.AttachmentsList; }
+  get: function () { return chunkSI5RD2GD_cjs.AttachmentsList; }
 });
 Object.defineProperty(exports, "CHAT_EVENT_NAME", {
   enumerable: true,
-  get: function () { return chunkTUZZROQU_cjs.CHAT_EVENT_NAME; }
+  get: function () { return chunkSI5RD2GD_cjs.CHAT_EVENT_NAME; }
 });
 Object.defineProperty(exports, "CSS_VARS", {
   enumerable: true,
-  get: function () { return chunkTUZZROQU_cjs.CSS_VARS; }
+  get: function () { return chunkSI5RD2GD_cjs.CSS_VARS; }
 });
 Object.defineProperty(exports, "ChatProvider", {
   enumerable: true,
-  get: function () { return chunkTUZZROQU_cjs.ChatProvider; }
+  get: function () { return chunkSI5RD2GD_cjs.ChatProvider; }
 });
 Object.defineProperty(exports, "ChatRoot", {
   enumerable: true,
-  get: function () { return chunkTUZZROQU_cjs.ChatRoot; }
+  get: function () { return chunkSI5RD2GD_cjs.ChatRoot; }
 });
 Object.defineProperty(exports, "Composer", {
   enumerable: true,
-  get: function () { return chunkTUZZROQU_cjs.Composer; }
+  get: function () { return chunkSI5RD2GD_cjs.Composer; }
 });
 Object.defineProperty(exports, "DEFAULT_LABELS", {
   enumerable: true,
-  get: function () { return chunkTUZZROQU_cjs.DEFAULT_LABELS; }
+  get: function () { return chunkSI5RD2GD_cjs.DEFAULT_LABELS; }
 });
 Object.defineProperty(exports, "DEFAULT_SIDEBAR", {
   enumerable: true,
-  get: function () { return chunkTUZZROQU_cjs.DEFAULT_SIDEBAR; }
+  get: function () { return chunkSI5RD2GD_cjs.DEFAULT_SIDEBAR; }
 });
 Object.defineProperty(exports, "DEFAULT_Z_INDEX", {
   enumerable: true,
-  get: function () { return chunkTUZZROQU_cjs.DEFAULT_Z_INDEX; }
+  get: function () { return chunkSI5RD2GD_cjs.DEFAULT_Z_INDEX; }
 });
 Object.defineProperty(exports, "EmptyState", {
   enumerable: true,
-  get: function () { return chunkTUZZROQU_cjs.EmptyState; }
+  get: function () { return chunkSI5RD2GD_cjs.EmptyState; }
 });
 Object.defineProperty(exports, "ErrorBanner", {
   enumerable: true,
-  get: function () { return chunkTUZZROQU_cjs.ErrorBanner; }
+  get: function () { return chunkSI5RD2GD_cjs.ErrorBanner; }
 });
 Object.defineProperty(exports, "HOTKEYS", {
   enumerable: true,
-  get: function () { return chunkTUZZROQU_cjs.HOTKEYS; }
+  get: function () { return chunkSI5RD2GD_cjs.HOTKEYS; }
 });
 Object.defineProperty(exports, "JumpToLatest", {
   enumerable: true,
-  get: function () { return chunkTUZZROQU_cjs.JumpToLatest; }
+  get: function () { return chunkSI5RD2GD_cjs.JumpToLatest; }
 });
 Object.defineProperty(exports, "LIMITS", {
   enumerable: true,
-  get: function () { return chunkTUZZROQU_cjs.LIMITS; }
+  get: function () { return chunkSI5RD2GD_cjs.LIMITS; }
 });
 Object.defineProperty(exports, "MessageActions", {
   enumerable: true,
-  get: function () { return chunkTUZZROQU_cjs.MessageActions; }
+  get: function () { return chunkSI5RD2GD_cjs.MessageActions; }
 });
 Object.defineProperty(exports, "MessageBubble", {
   enumerable: true,
-  get: function () { return chunkTUZZROQU_cjs.MessageBubble; }
+  get: function () { return chunkSI5RD2GD_cjs.MessageBubble; }
 });
 Object.defineProperty(exports, "MessageList", {
   enumerable: true,
-  get: function () { return chunkTUZZROQU_cjs.MessageList; }
+  get: function () { return chunkSI5RD2GD_cjs.MessageList; }
 });
 Object.defineProperty(exports, "STORAGE_KEYS", {
   enumerable: true,
-  get: function () { return chunkTUZZROQU_cjs.STORAGE_KEYS; }
+  get: function () { return chunkSI5RD2GD_cjs.STORAGE_KEYS; }
 });
 Object.defineProperty(exports, "Sources", {
   enumerable: true,
-  get: function () { return chunkTUZZROQU_cjs.Sources; }
+  get: function () { return chunkSI5RD2GD_cjs.Sources; }
 });
 Object.defineProperty(exports, "StreamingIndicator", {
   enumerable: true,
-  get: function () { return chunkTUZZROQU_cjs.StreamingIndicator; }
+  get: function () { return chunkSI5RD2GD_cjs.StreamingIndicator; }
 });
 Object.defineProperty(exports, "ToolCalls", {
   enumerable: true,
-  get: function () { return chunkTUZZROQU_cjs.ToolCalls; }
+  get: function () { return chunkSI5RD2GD_cjs.ToolCalls; }
 });
 Object.defineProperty(exports, "createId", {
   enumerable: true,
-  get: function () { return chunkTUZZROQU_cjs.createId; }
+  get: function () { return chunkSI5RD2GD_cjs.createId; }
 });
 Object.defineProperty(exports, "createTokenBuffer", {
   enumerable: true,
-  get: function () { return chunkTUZZROQU_cjs.createTokenBuffer; }
+  get: function () { return chunkSI5RD2GD_cjs.createTokenBuffer; }
 });
 Object.defineProperty(exports, "deriveInitials", {
   enumerable: true,
-  get: function () { return chunkTUZZROQU_cjs.deriveInitials; }
+  get: function () { return chunkSI5RD2GD_cjs.deriveInitials; }
 });
 Object.defineProperty(exports, "getChatLogger", {
   enumerable: true,
-  get: function () { return chunkTUZZROQU_cjs.getChatLogger; }
+  get: function () { return chunkSI5RD2GD_cjs.getChatLogger; }
 });
 Object.defineProperty(exports, "initialState", {
   enumerable: true,
-  get: function () { return chunkTUZZROQU_cjs.initialState; }
+  get: function () { return chunkSI5RD2GD_cjs.initialState; }
 });
 Object.defineProperty(exports, "isSubmittableDraft", {
   enumerable: true,
-  get: function () { return chunkTUZZROQU_cjs.isSubmittableDraft; }
+  get: function () { return chunkSI5RD2GD_cjs.isSubmittableDraft; }
 });
 Object.defineProperty(exports, "reducer", {
   enumerable: true,
-  get: function () { return chunkTUZZROQU_cjs.reducer; }
+  get: function () { return chunkSI5RD2GD_cjs.reducer; }
 });
 Object.defineProperty(exports, "resolvePersona", {
   enumerable: true,
-  get: function () { return chunkTUZZROQU_cjs.resolvePersona; }
+  get: function () { return chunkSI5RD2GD_cjs.resolvePersona; }
 });
 Object.defineProperty(exports, "sanitizeDraft", {
   enumerable: true,
-  get: function () { return chunkTUZZROQU_cjs.sanitizeDraft; }
+  get: function () { return chunkSI5RD2GD_cjs.sanitizeDraft; }
 });
 Object.defineProperty(exports, "useChat", {
   enumerable: true,
-  get: function () { return chunkTUZZROQU_cjs.useChat; }
+  get: function () { return chunkSI5RD2GD_cjs.useChat; }
 });
 Object.defineProperty(exports, "useChatAudio", {
   enumerable: true,
-  get: function () { return chunkTUZZROQU_cjs.useChatAudio; }
+  get: function () { return chunkSI5RD2GD_cjs.useChatAudio; }
 });
 Object.defineProperty(exports, "useChatAudioPrefs", {
   enumerable: true,
-  get: function () { return chunkTUZZROQU_cjs.useChatAudioPrefs; }
+  get: function () { return chunkSI5RD2GD_cjs.useChatAudioPrefs; }
 });
 Object.defineProperty(exports, "useChatComposer", {
   enumerable: true,
-  get: function () { return chunkTUZZROQU_cjs.useChatComposer; }
+  get: function () { return chunkSI5RD2GD_cjs.useChatComposer; }
 });
 Object.defineProperty(exports, "useChatContext", {
   enumerable: true,
-  get: function () { return chunkTUZZROQU_cjs.useChatContext; }
+  get: function () { return chunkSI5RD2GD_cjs.useChatContext; }
 });
 Object.defineProperty(exports, "useChatContextOptional", {
   enumerable: true,
-  get: function () { return chunkTUZZROQU_cjs.useChatContextOptional; }
+  get: function () { return chunkSI5RD2GD_cjs.useChatContextOptional; }
 });
 Object.defineProperty(exports, "useChatLayout", {
   enumerable: true,
-  get: function () { return chunkTUZZROQU_cjs.useChatLayout; }
+  get: function () { return chunkSI5RD2GD_cjs.useChatLayout; }
 });
 Object.defineProperty(exports, "TreeError", {
   enumerable: true,

package/dist/index.d.cts

@@ -2042,9 +2042,28 @@ interface ToolCallsProps {
     renderStreaming?: (text: string, call: ChatToolCall) => ReactNode;
     /** Single override for all three; specific renderers above take precedence. */
     renderPayload?: (value: unknown, kind: ToolPayloadKind, call: ChatToolCall) => ReactNode;
+    /**
+     * Rendered once **after** all tool-call panels — always visible, outside
+     * the collapsible panels. Use for rich UI derived from tool outputs (e.g.
+     * vehicle cards, map pins, tax breakdowns). Receives the full calls array
+     * so the renderer can aggregate across multiple tool calls.
+     */
+    renderAfterCalls?: (calls: ChatToolCall[]) => ReactNode;
+    /**
+     * Custom renderer for each individual tool-call panel. When provided,
+     * replaces the default collapsible `<ToolCallItem>`. Return `null` to
+     * suppress a specific call while still letting others render.
+     */
+    renderToolCall?: (call: ChatToolCall) => ReactNode;
+    /**
+     * When `true`, the collapsible tool-call panels are not rendered at all.
+     * `renderAfterCalls` still runs — use together to show only rich UI with
+     * no raw accordion panels visible.
+     */
+    hideToolCalls?: boolean;
     className?: string;
 }
-declare function ToolCalls({ calls, defaultExpanded, expandWhileStreaming, renderInput, renderOutput, renderStreaming, renderPayload, className, }: ToolCallsProps): react_jsx_runtime.JSX.Element;
+declare function ToolCalls({ calls, defaultExpanded, expandWhileStreaming, renderInput, renderOutput, renderStreaming, renderPayload, renderAfterCalls, renderToolCall, hideToolCalls, className, }: ToolCallsProps): react_jsx_runtime.JSX.Element;
 
 interface ChatRootProps {
     transport: ChatTransport;

package/dist/index.d.ts

@@ -2042,9 +2042,28 @@ interface ToolCallsProps {
     renderStreaming?: (text: string, call: ChatToolCall) => ReactNode;
     /** Single override for all three; specific renderers above take precedence. */
     renderPayload?: (value: unknown, kind: ToolPayloadKind, call: ChatToolCall) => ReactNode;
+    /**
+     * Rendered once **after** all tool-call panels — always visible, outside
+     * the collapsible panels. Use for rich UI derived from tool outputs (e.g.
+     * vehicle cards, map pins, tax breakdowns). Receives the full calls array
+     * so the renderer can aggregate across multiple tool calls.
+     */
+    renderAfterCalls?: (calls: ChatToolCall[]) => ReactNode;
+    /**
+     * Custom renderer for each individual tool-call panel. When provided,
+     * replaces the default collapsible `<ToolCallItem>`. Return `null` to
+     * suppress a specific call while still letting others render.
+     */
+    renderToolCall?: (call: ChatToolCall) => ReactNode;
+    /**
+     * When `true`, the collapsible tool-call panels are not rendered at all.
+     * `renderAfterCalls` still runs — use together to show only rich UI with
+     * no raw accordion panels visible.
+     */
+    hideToolCalls?: boolean;
     className?: string;
 }
-declare function ToolCalls({ calls, defaultExpanded, expandWhileStreaming, renderInput, renderOutput, renderStreaming, renderPayload, className, }: ToolCallsProps): react_jsx_runtime.JSX.Element;
+declare function ToolCalls({ calls, defaultExpanded, expandWhileStreaming, renderInput, renderOutput, renderStreaming, renderPayload, renderAfterCalls, renderToolCall, hideToolCalls, className, }: ToolCallsProps): react_jsx_runtime.JSX.Element;
 
 interface ChatRootProps {
     transport: ChatTransport;

package/dist/index.mjs

@@ -5,8 +5,8 @@ export { NativeProvider, StreamProvider, VideoControls, VideoErrorFallback, Vide
 export { ImageViewer } from './chunk-OBRSGM64.mjs';
 export { generateContentKey, useAudioCache, useBlobUrlCleanup, useImageCache, useMediaCacheStore, useVideoCache, useVideoPlayerSettings } from './chunk-C6GXVH5J.mjs';
 export { CronSchedulerProvider, CustomInput, DayChips, MonthDayGrid, SchedulePreview, ScheduleTypeSelector, TimeSelector, buildCron, humanizeCron, isValidCron, parseCron, useCronCustom, useCronMonthDays, useCronPreview, useCronScheduler, useCronSchedulerContext, useCronTime, useCronType, useCronWeekDays } from './chunk-PVAX67JG.mjs';
-import { LIMITS, createId, useChatContextOptional, useChatAudioPrefs } from './chunk-BDWVCSM5.mjs';
-export { Attachments, AttachmentsGrid, AttachmentsList, CHAT_EVENT_NAME, CSS_VARS, ChatProvider, ChatRoot, Composer, DEFAULT_LABELS, DEFAULT_SIDEBAR, DEFAULT_Z_INDEX, EmptyState, ErrorBanner, HOTKEYS, JumpToLatest, LIMITS, MessageActions, MessageBubble, MessageList, STORAGE_KEYS, Sources, StreamingIndicator, ToolCalls, createId, createTokenBuffer, deriveInitials, getChatLogger, initialState, isSubmittableDraft, reducer, resolvePersona, sanitizeDraft, useChat, useChatAudio, useChatAudioPrefs, useChatComposer, useChatContext, useChatContextOptional, useChatLayout } from './chunk-BDWVCSM5.mjs';
+import { LIMITS, createId, useChatContextOptional, useChatAudioPrefs } from './chunk-QLMKCSR6.mjs';
+export { Attachments, AttachmentsGrid, AttachmentsList, CHAT_EVENT_NAME, CSS_VARS, ChatProvider, ChatRoot, Composer, DEFAULT_LABELS, DEFAULT_SIDEBAR, DEFAULT_Z_INDEX, EmptyState, ErrorBanner, HOTKEYS, JumpToLatest, LIMITS, MessageActions, MessageBubble, MessageList, STORAGE_KEYS, Sources, StreamingIndicator, ToolCalls, createId, createTokenBuffer, deriveInitials, getChatLogger, initialState, isSubmittableDraft, reducer, resolvePersona, sanitizeDraft, useChat, useChatAudio, useChatAudioPrefs, useChatComposer, useChatContext, useChatContextOptional, useChatLayout } from './chunk-QLMKCSR6.mjs';
 export { TreeError, TreeSkeleton, createDemoTree } from './chunk-B6IR5KSC.mjs';
 export { DEFAULT_TREE_APPEARANCE, DEFAULT_TREE_LABELS, TreeRoot as Tree, TreeChevron, TreeContent, TreeEmpty, TreeIcon, TreeIndentGuides, TreeLabel, TreeProvider, TreeRoot, TreeRow, TreeSearchInput, appearanceToStyle, clearTreeState, createChildCache, flattenTree, loadTreeState, resolveAppearance, resolveChildren, saveTreeState, useTreeActions, useTreeContext, useTreeExpansion, useTreeFocus, useTreeKeyboard, useTreeLabels, useTreeRows, useTreeSearch, useTreeSelection, useTreeTypeAhead } from './chunk-ZL7FH4NW.mjs';
 import { PlaygroundProvider } from './chunk-Y6UTOBF6.mjs';
@@ -349,7 +349,7 @@ var LazyTree = createLazyComponent(
   }
 );
 var LazyChat = createLazyComponent(
-  () => import('./ChatRoot-VJKOAVPQ.mjs').then((m) => ({ default: m.ChatRoot })),
+  () => import('./ChatRoot-QOSKJPM6.mjs').then((m) => ({ default: m.ChatRoot })),
   {
     displayName: "LazyChat",
     fallback: /* @__PURE__ */ jsx(LoadingFallback, { minHeight: 320, text: "Loading chat\u2026" })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-tools",
-  "version": "2.1.377",
+  "version": "2.1.379",
   "description": "Heavy React tools with lazy loading - for Electron, Vite, CRA, Next.js apps",
   "keywords": [
     "ui-tools",
@@ -156,8 +156,8 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.377",
-    "@djangocfg/ui-core": "^2.1.377",
+    "@djangocfg/i18n": "^2.1.379",
+    "@djangocfg/ui-core": "^2.1.379",
     "consola": "^3.4.2",
     "lodash-es": "^4.18.1",
     "lucide-react": "^0.545.0",
@@ -211,10 +211,10 @@
     "material-file-icons": "^2.4.0"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.377",
+    "@djangocfg/i18n": "^2.1.379",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.377",
-    "@djangocfg/ui-core": "^2.1.377",
+    "@djangocfg/typescript-config": "^2.1.379",
+    "@djangocfg/ui-core": "^2.1.379",
     "@types/lodash-es": "^4.17.12",
     "@types/mapbox__mapbox-gl-draw": "^1.4.8",
     "@types/node": "^24.7.2",

package/src/tools/Chat/Chat.story.tsx

@@ -1283,6 +1283,107 @@ export const WailsLikeVirtualization = () => {
   );
 };
 
+// ---------------------------------------------------------------------------
+// 16) WithRenderAfterCalls — rich UI outside tool panels
+//     Demonstrates: renderAfterCalls, hideToolCalls, renderToolCall
+// ---------------------------------------------------------------------------
+
+const SEARCH_SEQUENCE: ChatStreamEvent[] = [
+  { type: 'chunk', delta: 'Searching the catalog for you.\n\n' },
+  {
+    type: 'tool_call_start',
+    toolId: 'v1',
+    name: 'search_vehicles',
+    input: { make: 'BMW', year_min: 2022 },
+  },
+  { type: 'tool_call_delta', toolId: 'v1', delta: 'querying…\n' },
+  {
+    type: 'tool_call_end',
+    toolId: 'v1',
+    output: {
+      items: [
+        { id: 'car-001', make: 'BMW', model: '5 Series', year: 2023, price: 45000 },
+        { id: 'car-002', make: 'BMW', model: 'X5', year: 2022, price: 72000 },
+      ],
+      total: 2,
+    },
+    status: 'success',
+  },
+  { type: 'chunk', delta: 'Found 2 vehicles — see the cards below.' },
+  { type: 'message_end' },
+];
+
+function MockVehicleCards({ calls }: { calls: import('./types').ChatToolCall[] }) {
+  const items: Array<{ id: string; make: string; model: string; year: number; price: number }> = [];
+  for (const call of calls) {
+    if (call.status !== 'success' || call.name !== 'search_vehicles') continue;
+    const out = call.output as { items?: typeof items } | null;
+    for (const item of out?.items ?? []) items.push(item);
+  }
+  if (items.length === 0) return null;
+  return (
+    <div className="mt-2 space-y-1.5">
+      {items.map((v) => (
+        <div
+          key={v.id}
+          className="flex items-center gap-3 rounded-md border border-border bg-card px-3 py-2 text-xs"
+        >
+          <div className="size-10 shrink-0 rounded bg-muted" />
+          <div className="min-w-0 flex-1">
+            <p className="font-semibold">{v.make} {v.model}</p>
+            <p className="text-muted-foreground">{v.year}</p>
+          </div>
+          <span className="font-mono text-sm font-semibold">${v.price.toLocaleString()}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export const WithRenderAfterCalls = () => {
+  const [hide] = useBoolean('hide-panels', { defaultValue: false, label: 'hideToolCalls (hide accordion panels)' });
+  const [useCustom] = useBoolean('custom-call', { defaultValue: false, label: 'renderToolCall (custom per-call renderer)' });
+
+  const transport = useMemo(
+    () => createMockTransport({ replies: [SEARCH_SEQUENCE, SEARCH_SEQUENCE], latencyMs: 40 }),
+    [],
+  );
+
+  const toolCallsProps = useMemo(
+    () => ({
+      hideToolCalls: hide,
+      renderAfterCalls: (calls: import('./types').ChatToolCall[]) => <MockVehicleCards calls={calls} />,
+      ...(useCustom
+        ? {
+            renderToolCall: (call: import('./types').ChatToolCall) => (
+              <div className="flex items-center gap-2 rounded border border-border bg-muted/40 px-2 py-1 text-xs">
+                <span className="font-mono text-muted-foreground">{call.name}</span>
+                <span className={`ml-auto rounded px-1 py-0.5 text-[10px] font-medium ${
+                  call.status === 'success' ? 'bg-emerald-500/10 text-emerald-600' : 'bg-amber-500/10 text-amber-600'
+                }`}>{call.status}</span>
+              </div>
+            ),
+          }
+        : {}),
+    }),
+    [hide, useCustom],
+  );
+
+  return (
+    <Frame h={560}>
+      <ChatRoot
+        transport={transport}
+        config={{
+          greeting: 'Vehicle search demo',
+          placeholder: 'Ask "find BMW vehicles"…',
+          suggestions: [{ label: 'Find BMW vehicles', prompt: 'Find BMW vehicles from 2022' }],
+        }}
+        toolCallsProps={toolCallsProps}
+      />
+    </Frame>
+  );
+};
+
 // ---------------------------------------------------------------------------
 // AutoFocusOnStreamEnd — refocus composer the moment a reply lands
 // ---------------------------------------------------------------------------

package/src/tools/Chat/README.md

@@ -168,6 +168,68 @@ import { LazyJsonTree } from '@djangocfg/ui-tools/json-tree';
 
 We don't import `LazyJsonTree` automatically — keeping the chat dep-light. The host opts in.
 
+### ToolCalls — rich UI after panels (`renderAfterCalls`)
+
+`renderAfterCalls` renders **outside and below** all collapsible panels — always visible, regardless of whether panels are expanded or hidden. It receives the full `calls` array so you can aggregate across multiple tool calls (e.g. collect all vehicle IDs from `search_vehicles` + `get_vehicle` and render cards).
+
+```tsx
+<ChatRoot
+  toolCallsProps={{
+    // Rich UI below all panels — always visible, never inside collapsed accordions
+    renderAfterCalls: (calls) => <VehicleCardList calls={calls} />,
+  }}
+/>
+```
+
+#### hideToolCalls — show only rich UI, no raw panels
+
+Set `hideToolCalls={true}` to suppress accordion panels entirely while `renderAfterCalls` still renders. Use when you want clean product UI without raw tool payloads visible.
+
+```tsx
+<ChatRoot
+  toolCallsProps={{
+    hideToolCalls: true,                             // hides accordion panels
+    renderAfterCalls: (calls) => <VehicleCards calls={calls} />,  // still runs
+  }}
+/>
+```
+
+`hideToolCalls` only affects the accordion panels — `renderAfterCalls` is always independent.
+
+#### renderToolCall — custom per-call panel renderer
+
+Replace the default `<ToolCallItem>` accordion with your own UI. Return `null` to suppress a specific call.
+
+```tsx
+<ChatRoot
+  toolCallsProps={{
+    renderToolCall: (call) => (
+      <div className="flex items-center gap-2 rounded border px-2 py-1 text-xs">
+        <span className="font-mono">{call.name}</span>
+        <span className="ml-auto">{call.status}</span>
+      </div>
+    ),
+  }}
+/>
+```
+
+#### Full example — vehicle cards from tool output
+
+```tsx
+import { buildVamcarToolCallsProps } from './chat/toolPayloads';
+
+// toolPayloads.tsx:
+export function buildVamcarToolCallsProps(): Omit<ToolCallsProps, 'calls'> {
+  return {
+    renderAfterCalls: (calls) => <VehicleCardsFromCalls calls={calls} />,
+  };
+}
+
+// In your chat component:
+const toolCallsProps = useMemo(() => buildVamcarToolCallsProps(), []);
+<ChatRoot transport={transport} toolCallsProps={toolCallsProps} />
+```
+
 ## Personas (user & assistant identity)
 
 Pass identities once on `<ChatRoot config>` — every bubble gets the right name, avatar and `aria-label`. Outgoing user messages get the `sender` field auto-stamped from `config.user`.
@@ -569,7 +631,8 @@ useChatAudioPrefs
 // Tool-payload dispatch
 dispatchToolPayload, isPlainObject, isLatLng,
 isGeoJSONFeatureCollection, isStringValue,
-type ToolPayloadMatcher, type ToolPayloadFallback
+type ToolPayloadMatcher, type ToolPayloadFallback,
+type ToolPayloadKind, type ToolCallsProps
 
 // Lightbox helpers
 collectImageAttachments
@@ -674,4 +737,5 @@ Full implementation plan and rationale lives at [`@dev/@refactoring7-chat/`](../
 - `WithPersonas` — config-level `user` + `assistant` identity (avatar, name)
 - `MultiUser` — per-message `sender` overrides (multi-user / multi-bot)
 - `WithHideComposer` — `hideComposer` + `footer` approval gate (HITL / agent-pause pattern)
+- `WithRenderAfterCalls` — `renderAfterCalls` (vehicle cards outside panels), `hideToolCalls`, `renderToolCall` (custom per-call renderer) — knob-controlled
 - `Playground` — knobs (latency, streaming, suggestions)