@djangocfg/ui-tools 2.1.341 → 2.1.344

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 chunk5T4K3VUV_cjs = require('./chunk-5T4K3VUV.cjs');
+var chunkAK2VHUJV_cjs = require('./chunk-AK2VHUJV.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-BT3CLXI4.cjs').then((m) => ({ default: m.ChatRoot })),
+  () => import('./ChatRoot-CIOFUESH.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 ?? chunk5T4K3VUV_cjs.LIMITS.sseIdleMs;
+  const idleMs = options.idleTimeoutMs ?? chunkAK2VHUJV_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: chunk5T4K3VUV_cjs.createId("s"),
+        sessionId: chunkAK2VHUJV_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: chunk5T4K3VUV_cjs.createId("u"),
+        id: chunkAK2VHUJV_cjs.createId("u"),
         role: "user",
         content,
         createdAt: Date.now()
       });
-      const messageId = chunk5T4K3VUV_cjs.createId("a");
+      const messageId = chunkAK2VHUJV_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: chunk5T4K3VUV_cjs.createId("a"),
+        id: chunkAK2VHUJV_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 chunk5T4K3VUV_cjs.Attachments; }
+  get: function () { return chunkAK2VHUJV_cjs.Attachments; }
 });
 Object.defineProperty(exports, "AttachmentsGrid", {
   enumerable: true,
-  get: function () { return chunk5T4K3VUV_cjs.AttachmentsGrid; }
+  get: function () { return chunkAK2VHUJV_cjs.AttachmentsGrid; }
 });
 Object.defineProperty(exports, "AttachmentsList", {
   enumerable: true,
-  get: function () { return chunk5T4K3VUV_cjs.AttachmentsList; }
+  get: function () { return chunkAK2VHUJV_cjs.AttachmentsList; }
 });
 Object.defineProperty(exports, "CHAT_EVENT_NAME", {
   enumerable: true,
-  get: function () { return chunk5T4K3VUV_cjs.CHAT_EVENT_NAME; }
+  get: function () { return chunkAK2VHUJV_cjs.CHAT_EVENT_NAME; }
 });
 Object.defineProperty(exports, "CSS_VARS", {
   enumerable: true,
-  get: function () { return chunk5T4K3VUV_cjs.CSS_VARS; }
+  get: function () { return chunkAK2VHUJV_cjs.CSS_VARS; }
 });
 Object.defineProperty(exports, "ChatProvider", {
   enumerable: true,
-  get: function () { return chunk5T4K3VUV_cjs.ChatProvider; }
+  get: function () { return chunkAK2VHUJV_cjs.ChatProvider; }
 });
 Object.defineProperty(exports, "ChatRoot", {
   enumerable: true,
-  get: function () { return chunk5T4K3VUV_cjs.ChatRoot; }
+  get: function () { return chunkAK2VHUJV_cjs.ChatRoot; }
 });
 Object.defineProperty(exports, "Composer", {
   enumerable: true,
-  get: function () { return chunk5T4K3VUV_cjs.Composer; }
+  get: function () { return chunkAK2VHUJV_cjs.Composer; }
 });
 Object.defineProperty(exports, "DEFAULT_LABELS", {
   enumerable: true,
-  get: function () { return chunk5T4K3VUV_cjs.DEFAULT_LABELS; }
+  get: function () { return chunkAK2VHUJV_cjs.DEFAULT_LABELS; }
 });
 Object.defineProperty(exports, "DEFAULT_SIDEBAR", {
   enumerable: true,
-  get: function () { return chunk5T4K3VUV_cjs.DEFAULT_SIDEBAR; }
+  get: function () { return chunkAK2VHUJV_cjs.DEFAULT_SIDEBAR; }
 });
 Object.defineProperty(exports, "DEFAULT_Z_INDEX", {
   enumerable: true,
-  get: function () { return chunk5T4K3VUV_cjs.DEFAULT_Z_INDEX; }
+  get: function () { return chunkAK2VHUJV_cjs.DEFAULT_Z_INDEX; }
 });
 Object.defineProperty(exports, "EmptyState", {
   enumerable: true,
-  get: function () { return chunk5T4K3VUV_cjs.EmptyState; }
+  get: function () { return chunkAK2VHUJV_cjs.EmptyState; }
 });
 Object.defineProperty(exports, "ErrorBanner", {
   enumerable: true,
-  get: function () { return chunk5T4K3VUV_cjs.ErrorBanner; }
+  get: function () { return chunkAK2VHUJV_cjs.ErrorBanner; }
 });
 Object.defineProperty(exports, "HOTKEYS", {
   enumerable: true,
-  get: function () { return chunk5T4K3VUV_cjs.HOTKEYS; }
+  get: function () { return chunkAK2VHUJV_cjs.HOTKEYS; }
 });
 Object.defineProperty(exports, "JumpToLatest", {
   enumerable: true,
-  get: function () { return chunk5T4K3VUV_cjs.JumpToLatest; }
+  get: function () { return chunkAK2VHUJV_cjs.JumpToLatest; }
 });
 Object.defineProperty(exports, "LIMITS", {
   enumerable: true,
-  get: function () { return chunk5T4K3VUV_cjs.LIMITS; }
+  get: function () { return chunkAK2VHUJV_cjs.LIMITS; }
 });
 Object.defineProperty(exports, "MessageActions", {
   enumerable: true,
-  get: function () { return chunk5T4K3VUV_cjs.MessageActions; }
+  get: function () { return chunkAK2VHUJV_cjs.MessageActions; }
 });
 Object.defineProperty(exports, "MessageBubble", {
   enumerable: true,
-  get: function () { return chunk5T4K3VUV_cjs.MessageBubble; }
+  get: function () { return chunkAK2VHUJV_cjs.MessageBubble; }
 });
 Object.defineProperty(exports, "MessageList", {
   enumerable: true,
-  get: function () { return chunk5T4K3VUV_cjs.MessageList; }
+  get: function () { return chunkAK2VHUJV_cjs.MessageList; }
 });
 Object.defineProperty(exports, "STORAGE_KEYS", {
   enumerable: true,
-  get: function () { return chunk5T4K3VUV_cjs.STORAGE_KEYS; }
+  get: function () { return chunkAK2VHUJV_cjs.STORAGE_KEYS; }
 });
 Object.defineProperty(exports, "Sources", {
   enumerable: true,
-  get: function () { return chunk5T4K3VUV_cjs.Sources; }
+  get: function () { return chunkAK2VHUJV_cjs.Sources; }
 });
 Object.defineProperty(exports, "StreamingIndicator", {
   enumerable: true,
-  get: function () { return chunk5T4K3VUV_cjs.StreamingIndicator; }
+  get: function () { return chunkAK2VHUJV_cjs.StreamingIndicator; }
 });
 Object.defineProperty(exports, "ToolCalls", {
   enumerable: true,
-  get: function () { return chunk5T4K3VUV_cjs.ToolCalls; }
+  get: function () { return chunkAK2VHUJV_cjs.ToolCalls; }
 });
 Object.defineProperty(exports, "createId", {
   enumerable: true,
-  get: function () { return chunk5T4K3VUV_cjs.createId; }
+  get: function () { return chunkAK2VHUJV_cjs.createId; }
 });
 Object.defineProperty(exports, "createTokenBuffer", {
   enumerable: true,
-  get: function () { return chunk5T4K3VUV_cjs.createTokenBuffer; }
+  get: function () { return chunkAK2VHUJV_cjs.createTokenBuffer; }
 });
 Object.defineProperty(exports, "deriveInitials", {
   enumerable: true,
-  get: function () { return chunk5T4K3VUV_cjs.deriveInitials; }
+  get: function () { return chunkAK2VHUJV_cjs.deriveInitials; }
 });
 Object.defineProperty(exports, "getChatLogger", {
   enumerable: true,
-  get: function () { return chunk5T4K3VUV_cjs.getChatLogger; }
+  get: function () { return chunkAK2VHUJV_cjs.getChatLogger; }
 });
 Object.defineProperty(exports, "initialState", {
   enumerable: true,
-  get: function () { return chunk5T4K3VUV_cjs.initialState; }
+  get: function () { return chunkAK2VHUJV_cjs.initialState; }
 });
 Object.defineProperty(exports, "reducer", {
   enumerable: true,
-  get: function () { return chunk5T4K3VUV_cjs.reducer; }
+  get: function () { return chunkAK2VHUJV_cjs.reducer; }
 });
 Object.defineProperty(exports, "resolvePersona", {
   enumerable: true,
-  get: function () { return chunk5T4K3VUV_cjs.resolvePersona; }
+  get: function () { return chunkAK2VHUJV_cjs.resolvePersona; }
 });
 Object.defineProperty(exports, "useChat", {
   enumerable: true,
-  get: function () { return chunk5T4K3VUV_cjs.useChat; }
+  get: function () { return chunkAK2VHUJV_cjs.useChat; }
 });
 Object.defineProperty(exports, "useChatAudio", {
   enumerable: true,
-  get: function () { return chunk5T4K3VUV_cjs.useChatAudio; }
+  get: function () { return chunkAK2VHUJV_cjs.useChatAudio; }
 });
 Object.defineProperty(exports, "useChatAudioPrefs", {
   enumerable: true,
-  get: function () { return chunk5T4K3VUV_cjs.useChatAudioPrefs; }
+  get: function () { return chunkAK2VHUJV_cjs.useChatAudioPrefs; }
 });
 Object.defineProperty(exports, "useChatComposer", {
   enumerable: true,
-  get: function () { return chunk5T4K3VUV_cjs.useChatComposer; }
+  get: function () { return chunkAK2VHUJV_cjs.useChatComposer; }
 });
 Object.defineProperty(exports, "useChatContext", {
   enumerable: true,
-  get: function () { return chunk5T4K3VUV_cjs.useChatContext; }
+  get: function () { return chunkAK2VHUJV_cjs.useChatContext; }
 });
 Object.defineProperty(exports, "useChatContextOptional", {
   enumerable: true,
-  get: function () { return chunk5T4K3VUV_cjs.useChatContextOptional; }
+  get: function () { return chunkAK2VHUJV_cjs.useChatContextOptional; }
 });
 Object.defineProperty(exports, "useChatHistory", {
   enumerable: true,
-  get: function () { return chunk5T4K3VUV_cjs.useChatHistory; }
+  get: function () { return chunkAK2VHUJV_cjs.useChatHistory; }
 });
 Object.defineProperty(exports, "useChatLayout", {
   enumerable: true,
-  get: function () { return chunk5T4K3VUV_cjs.useChatLayout; }
+  get: function () { return chunkAK2VHUJV_cjs.useChatLayout; }
 });
 Object.defineProperty(exports, "useChatScroll", {
   enumerable: true,
-  get: function () { return chunk5T4K3VUV_cjs.useChatScroll; }
+  get: function () { return chunkAK2VHUJV_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;
@@ -1683,6 +1685,7 @@ type ChatAction = {
     type: 'STREAM_START';
     id: string;
     createdAt?: number;
+    continueExisting?: boolean;
 } | {
     type: 'STREAM_CHUNK';
     delta: string;
@@ -1971,6 +1974,8 @@ interface ChatRootProps {
     showAttachmentButton?: boolean;
     /** Called when the user clicks the attach button (host opens its file picker). */
     onPickFiles?: () => void;
+    /** Hide the composer input area entirely (e.g. while waiting for human approval). */
+    hideComposer?: boolean;
 }
 declare function ChatRoot(props: ChatRootProps): react_jsx_runtime.JSX.Element;
 

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;
@@ -1683,6 +1685,7 @@ type ChatAction = {
     type: 'STREAM_START';
     id: string;
     createdAt?: number;
+    continueExisting?: boolean;
 } | {
     type: 'STREAM_CHUNK';
     delta: string;
@@ -1971,6 +1974,8 @@ interface ChatRootProps {
     showAttachmentButton?: boolean;
     /** Called when the user clicks the attach button (host opens its file picker). */
     onPickFiles?: () => void;
+    /** Hide the composer input area entirely (e.g. while waiting for human approval). */
+    hideComposer?: boolean;
 }
 declare function ChatRoot(props: ChatRootProps): react_jsx_runtime.JSX.Element;
 

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-QE25H6DP.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-QE25H6DP.mjs';
+import { LIMITS, createId } from './chunk-D7ISTFUS.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-D7ISTFUS.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-R5YQTOLP.mjs').then((m) => ({ default: m.ChatRoot })),
+  () => import('./ChatRoot-OURQVRLD.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.341",
+  "version": "2.1.344",
   "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.341",
-    "@djangocfg/ui-core": "^2.1.341",
+    "@djangocfg/i18n": "^2.1.344",
+    "@djangocfg/ui-core": "^2.1.344",
     "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.341",
+    "@djangocfg/i18n": "^2.1.344",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.341",
-    "@djangocfg/ui-core": "^2.1.341",
+    "@djangocfg/typescript-config": "^2.1.344",
+    "@djangocfg/ui-core": "^2.1.344",
     "@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/components/ChatRoot.tsx

@@ -73,6 +73,8 @@ export interface ChatRootProps {
   showAttachmentButton?: boolean;
   /** Called when the user clicks the attach button (host opens its file picker). */
   onPickFiles?: () => void;
+  /** Hide the composer input area entirely (e.g. while waiting for human approval). */
+  hideComposer?: boolean;
 }
 
 export function ChatRoot(props: ChatRootProps) {
@@ -184,15 +186,17 @@ function ChatRootShell({ className, slots }: ChatRootShellProps) {
           )}
         </div>
       </div>
-      <Composer
-        composer={composer}
-        placeholder={chat.config.placeholder}
-        showAttachmentButton={slots.showAttachmentButton}
-        onPickFiles={slots.onPickFiles}
-        toolbarStart={slots.composerToolbarStart}
-        toolbarEnd={slots.composerToolbarEnd}
-        attachmentTray={slots.composerAttachmentTray}
-      />
+      {!slots.hideComposer && (
+        <Composer
+          composer={composer}
+          placeholder={chat.config.placeholder}
+          showAttachmentButton={slots.showAttachmentButton}
+          onPickFiles={slots.onPickFiles}
+          toolbarStart={slots.composerToolbarStart}
+          toolbarEnd={slots.composerToolbarEnd}
+          attachmentTray={slots.composerAttachmentTray}
+        />
+      )}
       {slots.footer ?? null}
     </div>
   );

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

@@ -58,7 +58,7 @@ export type ChatAction =
       cursor: string | null;
     }
   | { type: 'MESSAGE_USER_ADD'; message: ChatMessage }
-  | { type: 'STREAM_START'; id: string; createdAt?: number }
+  | { type: 'STREAM_START'; id: string; createdAt?: number; continueExisting?: boolean }
   | { type: 'STREAM_CHUNK'; delta: string }
   | { type: 'STREAM_TOOL_ACTIVITY'; tool: string }
   | { type: 'TOOL_CALL_START'; messageId: string; toolCall: ChatToolCall }
@@ -168,12 +168,27 @@ 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');
         }
         return state;
       }
+      // continueExisting: resume an agent run — reuse the last assistant message
+      // instead of creating a new empty placeholder. Used for HITL / approval-gate
+      // flows where the same logical turn resumes after a human decision.
+      if (action.continueExisting) {
+        const lastAssistantIdx = (() => {
+          for (let i = state.messages.length - 1; i >= 0; i--) {
+            if (state.messages[i].role === 'assistant') return i;
+          }
+          return -1;
+        })();
+        if (lastAssistantIdx !== -1) {
+          const msgs = state.messages.slice();
+          msgs[lastAssistantIdx] = { ...msgs[lastAssistantIdx], isStreaming: true };
+          return { ...state, isStreaming: true, messages: msgs };
+        }
+      }
       const placeholder: ChatMessage = {
         id: action.id,
         role: 'assistant',

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

@@ -207,9 +207,30 @@ export function useChat(config: UseChatConfig): UseChatReturn {
       const assistantId = createId('a');
       streamingMsgIdRef.current = assistantId;
 
-      dispatch({ type: 'STREAM_START', id: assistantId });
+      // Peek at the first event to detect resume streams before dispatching STREAM_START.
+      // A resume stream begins with { type: 'resume_start' } — in that case we reuse
+      // the last assistant message instead of creating a new empty placeholder.
+      const iterator = transport.stream(sessionId, content, {
+        signal: ctrl.signal,
+        attachments,
+        metadata: config.metadata,
+      });
+
+      let continueExisting = false;
+      let peekedEvent: ChatStreamEvent | null = null;
+      const firstResult = await iterator.next();
+      if (!firstResult.done) {
+        const ev = firstResult.value as ChatStreamEvent;
+        if (ev.type === 'resume_start') {
+          continueExisting = true;
+        } else {
+          peekedEvent = ev;
+        }
+      }
+
+      dispatch({ type: 'STREAM_START', id: assistantId, continueExisting });
       config.onStreamStart?.(assistantId);
-      log.stream.info('start', { sessionId, assistantId, chars: content.length });
+      log.stream.info('start', { sessionId, assistantId, chars: content.length, continueExisting });
 
       const tokenBuffer = createTokenBuffer((delta) =>
         dispatch({ type: 'STREAM_CHUNK', delta }),
@@ -221,11 +242,8 @@ export function useChat(config: UseChatConfig): UseChatReturn {
       const t0 = performance.now();
 
       try {
-        const iterator = transport.stream(sessionId, content, {
-          signal: ctrl.signal,
-          attachments,
-          metadata: config.metadata,
-        });
+        // iterator was already created above (for peek). Replay peeked event if any.
+        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-BT3CLXI4.cjs

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

package/dist/ChatRoot-R5YQTOLP.mjs

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