@djangocfg/ui-tools 2.1.342 → 2.1.345

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 chunk4C4FGPZV_cjs = require('./chunk-4C4FGPZV.cjs');
+var chunkHE3N2ACJ_cjs = require('./chunk-HE3N2ACJ.cjs');
 var chunkYXZ6GU7H_cjs = require('./chunk-YXZ6GU7H.cjs');
 var chunkIEEAENLX_cjs = require('./chunk-IEEAENLX.cjs');
 var chunkQW4RBGHN_cjs = require('./chunk-QW4RBGHN.cjs');
@@ -372,7 +372,7 @@ var LazyTree = createLazyComponent(
   }
 );
 var LazyChat = createLazyComponent(
-  () => import('./ChatRoot-XJMWMJVD.cjs').then((m) => ({ default: m.ChatRoot })),
+  () => import('./ChatRoot-RU7MQUXF.cjs').then((m) => ({ default: m.ChatRoot })),
   {
     displayName: "LazyChat",
     fallback: /* @__PURE__ */ jsxRuntime.jsx(LoadingFallback, { minHeight: 320, text: "Loading chat\u2026" })
@@ -409,7 +409,7 @@ async function* parseSSE(response, options = {}) {
     throw new Error("SSE response has no body");
   }
   const map = options.map ?? DEFAULT_MAP;
-  const idleMs = options.idleTimeoutMs ?? chunk4C4FGPZV_cjs.LIMITS.sseIdleMs;
+  const idleMs = options.idleTimeoutMs ?? chunkHE3N2ACJ_cjs.LIMITS.sseIdleMs;
   const reader = response.body.getReader();
   const decoder = new TextDecoder();
   let buffer = "";
@@ -612,7 +612,7 @@ function createMockTransport(opts = {}) {
     async createSession(_opts) {
       await sleep(latency);
       return {
-        sessionId: chunk4C4FGPZV_cjs.createId("s"),
+        sessionId: chunkHE3N2ACJ_cjs.createId("s"),
         messages: history.length ? [...history] : void 0,
         hasMore: false,
         cursor: null,
@@ -629,12 +629,12 @@ function createMockTransport(opts = {}) {
         throw new Error("mock transport scripted failure");
       }
       history.push({
-        id: chunk4C4FGPZV_cjs.createId("u"),
+        id: chunkHE3N2ACJ_cjs.createId("u"),
         role: "user",
         content,
         createdAt: Date.now()
       });
-      const messageId = chunk4C4FGPZV_cjs.createId("a");
+      const messageId = chunkHE3N2ACJ_cjs.createId("a");
       yield { type: "message_start", messageId, sessionId: _sid };
       const reply = replies[turn % replies.length];
       turn += 1;
@@ -663,7 +663,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: chunk4C4FGPZV_cjs.createId("a"),
+        id: chunkHE3N2ACJ_cjs.createId("a"),
         role: "assistant",
         content: text || DEFAULT_REPLY,
         createdAt: Date.now()
@@ -2019,159 +2019,159 @@ Object.defineProperty(exports, "useCronWeekDays", {
 });
 Object.defineProperty(exports, "Attachments", {
   enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.Attachments; }
+  get: function () { return chunkHE3N2ACJ_cjs.Attachments; }
 });
 Object.defineProperty(exports, "AttachmentsGrid", {
   enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.AttachmentsGrid; }
+  get: function () { return chunkHE3N2ACJ_cjs.AttachmentsGrid; }
 });
 Object.defineProperty(exports, "AttachmentsList", {
   enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.AttachmentsList; }
+  get: function () { return chunkHE3N2ACJ_cjs.AttachmentsList; }
 });
 Object.defineProperty(exports, "CHAT_EVENT_NAME", {
   enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.CHAT_EVENT_NAME; }
+  get: function () { return chunkHE3N2ACJ_cjs.CHAT_EVENT_NAME; }
 });
 Object.defineProperty(exports, "CSS_VARS", {
   enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.CSS_VARS; }
+  get: function () { return chunkHE3N2ACJ_cjs.CSS_VARS; }
 });
 Object.defineProperty(exports, "ChatProvider", {
   enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.ChatProvider; }
+  get: function () { return chunkHE3N2ACJ_cjs.ChatProvider; }
 });
 Object.defineProperty(exports, "ChatRoot", {
   enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.ChatRoot; }
+  get: function () { return chunkHE3N2ACJ_cjs.ChatRoot; }
 });
 Object.defineProperty(exports, "Composer", {
   enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.Composer; }
+  get: function () { return chunkHE3N2ACJ_cjs.Composer; }
 });
 Object.defineProperty(exports, "DEFAULT_LABELS", {
   enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.DEFAULT_LABELS; }
+  get: function () { return chunkHE3N2ACJ_cjs.DEFAULT_LABELS; }
 });
 Object.defineProperty(exports, "DEFAULT_SIDEBAR", {
   enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.DEFAULT_SIDEBAR; }
+  get: function () { return chunkHE3N2ACJ_cjs.DEFAULT_SIDEBAR; }
 });
 Object.defineProperty(exports, "DEFAULT_Z_INDEX", {
   enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.DEFAULT_Z_INDEX; }
+  get: function () { return chunkHE3N2ACJ_cjs.DEFAULT_Z_INDEX; }
 });
 Object.defineProperty(exports, "EmptyState", {
   enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.EmptyState; }
+  get: function () { return chunkHE3N2ACJ_cjs.EmptyState; }
 });
 Object.defineProperty(exports, "ErrorBanner", {
   enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.ErrorBanner; }
+  get: function () { return chunkHE3N2ACJ_cjs.ErrorBanner; }
 });
 Object.defineProperty(exports, "HOTKEYS", {
   enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.HOTKEYS; }
+  get: function () { return chunkHE3N2ACJ_cjs.HOTKEYS; }
 });
 Object.defineProperty(exports, "JumpToLatest", {
   enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.JumpToLatest; }
+  get: function () { return chunkHE3N2ACJ_cjs.JumpToLatest; }
 });
 Object.defineProperty(exports, "LIMITS", {
   enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.LIMITS; }
+  get: function () { return chunkHE3N2ACJ_cjs.LIMITS; }
 });
 Object.defineProperty(exports, "MessageActions", {
   enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.MessageActions; }
+  get: function () { return chunkHE3N2ACJ_cjs.MessageActions; }
 });
 Object.defineProperty(exports, "MessageBubble", {
   enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.MessageBubble; }
+  get: function () { return chunkHE3N2ACJ_cjs.MessageBubble; }
 });
 Object.defineProperty(exports, "MessageList", {
   enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.MessageList; }
+  get: function () { return chunkHE3N2ACJ_cjs.MessageList; }
 });
 Object.defineProperty(exports, "STORAGE_KEYS", {
   enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.STORAGE_KEYS; }
+  get: function () { return chunkHE3N2ACJ_cjs.STORAGE_KEYS; }
 });
 Object.defineProperty(exports, "Sources", {
   enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.Sources; }
+  get: function () { return chunkHE3N2ACJ_cjs.Sources; }
 });
 Object.defineProperty(exports, "StreamingIndicator", {
   enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.StreamingIndicator; }
+  get: function () { return chunkHE3N2ACJ_cjs.StreamingIndicator; }
 });
 Object.defineProperty(exports, "ToolCalls", {
   enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.ToolCalls; }
+  get: function () { return chunkHE3N2ACJ_cjs.ToolCalls; }
 });
 Object.defineProperty(exports, "createId", {
   enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.createId; }
+  get: function () { return chunkHE3N2ACJ_cjs.createId; }
 });
 Object.defineProperty(exports, "createTokenBuffer", {
   enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.createTokenBuffer; }
+  get: function () { return chunkHE3N2ACJ_cjs.createTokenBuffer; }
 });
 Object.defineProperty(exports, "deriveInitials", {
   enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.deriveInitials; }
+  get: function () { return chunkHE3N2ACJ_cjs.deriveInitials; }
 });
 Object.defineProperty(exports, "getChatLogger", {
   enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.getChatLogger; }
+  get: function () { return chunkHE3N2ACJ_cjs.getChatLogger; }
 });
 Object.defineProperty(exports, "initialState", {
   enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.initialState; }
+  get: function () { return chunkHE3N2ACJ_cjs.initialState; }
 });
 Object.defineProperty(exports, "reducer", {
   enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.reducer; }
+  get: function () { return chunkHE3N2ACJ_cjs.reducer; }
 });
 Object.defineProperty(exports, "resolvePersona", {
   enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.resolvePersona; }
+  get: function () { return chunkHE3N2ACJ_cjs.resolvePersona; }
 });
 Object.defineProperty(exports, "useChat", {
   enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.useChat; }
+  get: function () { return chunkHE3N2ACJ_cjs.useChat; }
 });
 Object.defineProperty(exports, "useChatAudio", {
   enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.useChatAudio; }
+  get: function () { return chunkHE3N2ACJ_cjs.useChatAudio; }
 });
 Object.defineProperty(exports, "useChatAudioPrefs", {
   enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.useChatAudioPrefs; }
+  get: function () { return chunkHE3N2ACJ_cjs.useChatAudioPrefs; }
 });
 Object.defineProperty(exports, "useChatComposer", {
   enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.useChatComposer; }
+  get: function () { return chunkHE3N2ACJ_cjs.useChatComposer; }
 });
 Object.defineProperty(exports, "useChatContext", {
   enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.useChatContext; }
+  get: function () { return chunkHE3N2ACJ_cjs.useChatContext; }
 });
 Object.defineProperty(exports, "useChatContextOptional", {
   enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.useChatContextOptional; }
+  get: function () { return chunkHE3N2ACJ_cjs.useChatContextOptional; }
 });
 Object.defineProperty(exports, "useChatHistory", {
   enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.useChatHistory; }
+  get: function () { return chunkHE3N2ACJ_cjs.useChatHistory; }
 });
 Object.defineProperty(exports, "useChatLayout", {
   enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.useChatLayout; }
+  get: function () { return chunkHE3N2ACJ_cjs.useChatLayout; }
 });
 Object.defineProperty(exports, "useChatScroll", {
   enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.useChatScroll; }
+  get: function () { return chunkHE3N2ACJ_cjs.useChatScroll; }
 });
 Object.defineProperty(exports, "TreeError", {
   enumerable: true,

package/dist/index.d.cts

@@ -1553,6 +1553,8 @@ type ChatStreamEvent = {
     type: 'message_start';
     messageId: string;
     sessionId: string;
+} | {
+    type: 'resume_start';
 } | {
     type: 'chunk';
     delta: string;
@@ -1719,6 +1721,11 @@ type ChatAction = {
     type: 'STREAM_ERROR';
     id?: string;
     message: string;
+} | {
+    type: 'STREAM_CANCEL_PLACEHOLDER';
+    id: string;
+} | {
+    type: 'STREAM_RESUME_EXISTING';
 } | {
     type: 'MESSAGE_EDIT';
     id: string;

package/dist/index.d.ts

@@ -1553,6 +1553,8 @@ type ChatStreamEvent = {
     type: 'message_start';
     messageId: string;
     sessionId: string;
+} | {
+    type: 'resume_start';
 } | {
     type: 'chunk';
     delta: string;
@@ -1719,6 +1721,11 @@ type ChatAction = {
     type: 'STREAM_ERROR';
     id?: string;
     message: string;
+} | {
+    type: 'STREAM_CANCEL_PLACEHOLDER';
+    id: string;
+} | {
+    type: 'STREAM_RESUME_EXISTING';
 } | {
     type: 'MESSAGE_EDIT';
     id: string;

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 } from './chunk-CJ76BM2N.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, reducer, resolvePersona, useChat, useChatAudio, useChatAudioPrefs, useChatComposer, useChatContext, useChatContextOptional, useChatHistory, useChatLayout, useChatScroll } from './chunk-CJ76BM2N.mjs';
+import { LIMITS, createId } from './chunk-OMUJNA42.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, reducer, resolvePersona, useChat, useChatAudio, useChatAudioPrefs, useChatComposer, useChatContext, useChatContextOptional, useChatHistory, useChatLayout, useChatScroll } from './chunk-OMUJNA42.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-G5IEC7SR.mjs';
 import { PlaygroundProvider } from './chunk-ZUFTH5IR.mjs';
@@ -347,7 +347,7 @@ var LazyTree = createLazyComponent(
   }
 );
 var LazyChat = createLazyComponent(
-  () => import('./ChatRoot-AFBNSI2A.mjs').then((m) => ({ default: m.ChatRoot })),
+  () => import('./ChatRoot-APZXBHDT.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.342",
+  "version": "2.1.345",
   "description": "Heavy React tools with lazy loading - for Electron, Vite, CRA, Next.js apps",
   "keywords": [
     "ui-tools",
@@ -101,8 +101,8 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.342",
-    "@djangocfg/ui-core": "^2.1.342",
+    "@djangocfg/i18n": "^2.1.345",
+    "@djangocfg/ui-core": "^2.1.345",
     "consola": "^3.4.2",
     "lodash-es": "^4.18.1",
     "lucide-react": "^0.545.0",
@@ -155,10 +155,10 @@
     "material-file-icons": "^2.4.0"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.342",
+    "@djangocfg/i18n": "^2.1.345",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.342",
-    "@djangocfg/ui-core": "^2.1.342",
+    "@djangocfg/typescript-config": "^2.1.345",
+    "@djangocfg/ui-core": "^2.1.345",
     "@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

@@ -941,7 +941,80 @@ export const MultiUser = () => (
 );
 
 // ---------------------------------------------------------------------------
-// 13) Playground — knobs
+// 13) WithHideComposer — agent-pause pattern (approval gate, human-in-the-loop)
+// ---------------------------------------------------------------------------
+
+export const WithHideComposer = () => {
+  const [paused, setPaused] = useState(false);
+
+  const transport = useMemo(
+    () =>
+      createMockTransport({
+        replies: [
+          'Sure — I will send that email. Waiting for your approval before proceeding.',
+        ],
+        latencyMs: 30,
+      }),
+    [],
+  );
+
+  return (
+    <Frame h={480}>
+      <ChatRoot
+        transport={transport}
+        config={{
+          greeting: 'Agent-pause demo',
+          placeholder: 'Ask to do something requiring approval…',
+        }}
+        hideComposer={paused}
+        footer={
+          paused ? (
+            <div className="flex flex-col gap-2 border-t bg-background px-3 py-2">
+              <div className="rounded-lg border border-amber-200 bg-amber-50 dark:border-amber-800 dark:bg-amber-950/40 p-3 text-sm">
+                <div className="mb-1 font-medium text-amber-900 dark:text-amber-200">
+                  Approval required
+                  <span className="ml-2 font-mono text-xs text-amber-700 dark:text-amber-400">send_email</span>
+                </div>
+                <pre className="mb-2 rounded bg-muted px-2 py-1.5 text-[11px] text-muted-foreground">
+                  {`{ "to": "mark@example.com", "subject": "Hello" }`}
+                </pre>
+                <div className="flex gap-2">
+                  <button
+                    type="button"
+                    onClick={() => setPaused(false)}
+                    className="flex-1 rounded bg-amber-600 hover:bg-amber-700 px-3 py-1.5 text-xs font-medium text-white transition-colors"
+                  >
+                    Approve
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setPaused(false)}
+                    className="flex-1 rounded border border-amber-300 hover:bg-amber-100 px-3 py-1.5 text-xs font-medium text-amber-800 transition-colors"
+                  >
+                    Deny
+                  </button>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className="border-t border-border bg-muted/20 px-3 py-1.5 text-center">
+              <button
+                type="button"
+                onClick={() => setPaused(true)}
+                className="text-[11px] text-muted-foreground hover:text-foreground underline"
+              >
+                Simulate approval gate
+              </button>
+            </div>
+          )
+        }
+      />
+    </Frame>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// 14) Playground — knobs
 // ---------------------------------------------------------------------------
 
 export const Playground = () => {

package/src/tools/Chat/README.md

@@ -93,6 +93,9 @@ Module boundaries:
     renderInput:  (v) => <LazyJsonTree data={v} mode="compact" />,
     renderOutput: (v) => <LazyJsonTree data={v} mode="compact" />,
   }}
+
+  // Hide composer while agent is paused waiting for human input
+  hideComposer={hasPendingApprovals}
 />
 ```
 
@@ -106,14 +109,32 @@ Module boundaries:
 ├───────────────────────────────┤
 │ messages    (jumpToLatest)    │
 ├───────────────────────────────┤
-│ composerToolbarStart          │
+│ composerToolbarStart          │  ← hidden when hideComposer={true}
 │   [textarea]   composerToolbarEnd │
 │ composerAttachmentTray        │
 ├───────────────────────────────┤
-│ footer                        │
+│ footer                        │  ← use for approval panels, disclaimers
 └───────────────────────────────┘
 ```
 
+### hideComposer — agent-pause / human-in-the-loop
+
+Set `hideComposer={true}` to remove the composer while the agent is waiting for a human decision (approval gate, HITL). Combine with `footer` to show action buttons:
+
+```tsx
+<ChatRoot
+  transport={transport}
+  hideComposer={pendingActions.length > 0}
+  footer={
+    pendingActions.length > 0 ? (
+      <AgentActions actions={pendingActions} onResult={handleResult} />
+    ) : null
+  }
+/>
+```
+
+The composer reappears automatically once `hideComposer` returns `false`.
+
 ### ToolCalls — expand behavior
 
 Panels are **collapsed by default**. While a tool is `running`, the panel auto-expands so you can see live `streamingText`; on completion it auto-collapses again. Manual user toggles (open or close) are remembered and override the auto-behavior for that call.
@@ -525,4 +546,5 @@ Full implementation plan and rationale lives at [`@dev/@refactoring7-chat/`](../
 - `WithMapPayload` — `dispatchToolPayload` with `LazyJsonTree` fallback
 - `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)
 - `Playground` — knobs (latency, streaming, suggestions)

package/src/tools/Chat/core/reducer.ts

@@ -79,6 +79,8 @@ export type ChatAction =
     }
   | { type: 'STREAM_CANCELLED'; id: string; partialText: string; label?: string }
   | { type: 'STREAM_ERROR'; id?: string; message: string }
+  | { type: 'STREAM_CANCEL_PLACEHOLDER'; id: string }
+  | { type: 'STREAM_RESUME_EXISTING' }
   | { type: 'MESSAGE_EDIT'; id: string; content: string }
   | { type: 'MESSAGE_DELETE'; id: string }
   | { type: 'MESSAGES_CLEAR' }
@@ -168,7 +170,6 @@ export function reducer(state: ChatState, action: ChatAction): ChatState {
     case 'STREAM_START': {
       if (state.isStreaming) {
         if (typeof console !== 'undefined') {
-          // Soft guard — UI should disable the composer; this catches bugs.
           // eslint-disable-next-line no-console
           console.warn('[chat] STREAM_START while already streaming, ignoring');
         }
@@ -280,6 +281,28 @@ export function reducer(state: ChatState, action: ChatAction): ChatState {
       return { ...state, isStreaming: false, error: action.message, messages };
     }
 
+    case 'STREAM_CANCEL_PLACEHOLDER':
+      // Remove the freshly-created empty assistant placeholder (resume path).
+      return {
+        ...state,
+        isStreaming: false,
+        messages: state.messages.filter((m) => m.id !== action.id),
+      };
+
+    case 'STREAM_RESUME_EXISTING': {
+      // Mark the last assistant message as streaming so resume chunks append to it.
+      const lastIdx = (() => {
+        for (let i = state.messages.length - 1; i >= 0; i--) {
+          if (state.messages[i].role === 'assistant') return i;
+        }
+        return -1;
+      })();
+      if (lastIdx === -1) return { ...state, isStreaming: true };
+      const msgs = state.messages.slice();
+      msgs[lastIdx] = { ...msgs[lastIdx], isStreaming: true };
+      return { ...state, isStreaming: true, messages: msgs };
+    }
+
     case 'MESSAGE_EDIT': {
       const messages = patchMessageById(state.messages, action.id, (m) => ({
         ...m,

package/src/tools/Chat/hooks/useChat.ts

@@ -207,6 +207,17 @@ export function useChat(config: UseChatConfig): UseChatReturn {
       const assistantId = createId('a');
       streamingMsgIdRef.current = assistantId;
 
+      const iterator = transport.stream(sessionId, content, {
+        signal: ctrl.signal,
+        attachments,
+        metadata: config.metadata,
+      });
+
+      // Peek at the first event — if it's `resume_start` we reuse the last assistant
+      // message instead of creating a new empty placeholder. The peek happens inside
+      // the try/catch so any transport error (network, 401, etc.) is handled normally.
+      let peekedEvent: ChatStreamEvent | null = null;
+
       dispatch({ type: 'STREAM_START', id: assistantId });
       config.onStreamStart?.(assistantId);
       log.stream.info('start', { sessionId, assistantId, chars: content.length });
@@ -221,11 +232,22 @@ export function useChat(config: UseChatConfig): UseChatReturn {
       const t0 = performance.now();
 
       try {
-        const iterator = transport.stream(sessionId, content, {
-          signal: ctrl.signal,
-          attachments,
-          metadata: config.metadata,
-        });
+        // Peek first event to detect resume_start — must be inside try/catch so
+        // transport errors (network down, 401) are caught and shown as error banners.
+        const firstResult = await iterator.next();
+        if (!firstResult.done) {
+          const ev = firstResult.value as ChatStreamEvent;
+          if (ev.type === 'resume_start') {
+            // Switch existing placeholder to continueExisting mode: remove the
+            // just-created empty placeholder and mark the last assistant msg streaming.
+            dispatch({ type: 'STREAM_CANCEL_PLACEHOLDER', id: assistantId });
+            dispatch({ type: 'STREAM_RESUME_EXISTING' });
+          } else {
+            peekedEvent = ev;
+          }
+        }
+
+        if (peekedEvent) handleEvent(peekedEvent);
 
         for await (const ev of iterator) {
           if (ctrl.signal.aborted) break;

package/src/tools/Chat/types.ts

@@ -200,6 +200,7 @@ export interface SendOptions {
 
 export type ChatStreamEvent =
   | { type: 'message_start'; messageId: string; sessionId: string }
+  | { type: 'resume_start' }
   | { type: 'chunk'; delta: string }
   | { type: 'tool_activity'; tool: string; status: string }
   | {

package/dist/ChatRoot-AFBNSI2A.mjs

@@ -1,5 +0,0 @@
-export { ChatRoot } from './chunk-CJ76BM2N.mjs';
-import './chunk-2ZLKZ5VR.mjs';
-import './chunk-N2XQF2OL.mjs';
-//# sourceMappingURL=ChatRoot-AFBNSI2A.mjs.map
-//# sourceMappingURL=ChatRoot-AFBNSI2A.mjs.map

package/dist/ChatRoot-XJMWMJVD.cjs

@@ -1,14 +0,0 @@
-'use strict';
-
-var chunk4C4FGPZV_cjs = require('./chunk-4C4FGPZV.cjs');
-require('./chunk-B5AWZOHJ.cjs');
-require('./chunk-OLISEQHS.cjs');
-
-
-
-Object.defineProperty(exports, "ChatRoot", {
-  enumerable: true,
-  get: function () { return chunk4C4FGPZV_cjs.ChatRoot; }
-});
-//# sourceMappingURL=ChatRoot-XJMWMJVD.cjs.map
-//# sourceMappingURL=ChatRoot-XJMWMJVD.cjs.map