@flytedan/flytebot-design-system 0.71.7 → 0.73.0

package/dist/index.cjs

@@ -1013,6 +1013,7 @@ __export(index_exports, {
   ModeSwitch: () => ModeSwitch,
   ModelControls: () => ModelControls,
   NumberInput: () => NumberInput,
+  OVERLAY_BREAKPOINT: () => OVERLAY_BREAKPOINT,
   OVERLAY_CEILING: () => OVERLAY_CEILING,
   POPOVER_BODY_MIN: () => POPOVER_BODY_MIN,
   PacketCard: () => PacketCard,
@@ -1137,6 +1138,7 @@ __export(index_exports, {
   useDocumentTitle: () => useDocumentTitle,
   useFeatureStatus: () => useFeatureStatus,
   useLayerZIndex: () => useLayerZIndex,
+  useOverlayLayout: () => useOverlayLayout,
   usePopoverPosition: () => usePopoverPosition,
   useResponsiveRail: () => useResponsiveRail,
   useRuntimeMode: () => useRuntimeMode,
@@ -2083,7 +2085,7 @@ function Collapsible({
 var React6 = __toESM(require("react"), 1);
 var import_react_dom3 = require("react-dom");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-function Drawer({ open: open2 = true, title, onClose, footer, children, className = "", ...rest }) {
+function Drawer({ open: open2 = true, title, label, onClose, footer, bare = false, children, className = "", ...rest }) {
   const asideRef = React6.useRef(null);
   const [closing, setClosing] = React6.useState(false);
   const close2 = React6.useCallback(() => {
@@ -2093,16 +2095,22 @@ function Drawer({ open: open2 = true, title, onClose, footer, children, classNam
   }, [onClose]);
   const layer = useStackedLayer({ active: !!open2, containerRef: asideRef, trap: true, onEscape: onClose ? close2 : void 0 });
   const zIndex = useLayerZIndex(layer);
+  const titleId = React6.useId();
+  const accessibleName = bare ? label ?? (typeof title === "string" ? title : void 0) : label;
+  const unnamed = !!open2 && bare && !accessibleName;
+  React6.useEffect(() => {
+    if (process.env.NODE_ENV !== "production" && unnamed) console.warn("Drawer: a bare Drawer has no header to name it. Pass `label`, or a string `title`, so the dialog has an accessible name.");
+  }, [unnamed]);
   if (!open2) return null;
   return (0, import_react_dom3.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(StackedLayerProvider, { layer, children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "fd-scrim" + (closing ? " is-closing" : ""), style: { display: "block", zIndex: zIndex - LAYER_STEP }, onClick: close2 }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("aside", { ref: asideRef, className: ["fd-drawer", closing ? "is-closing" : "", className].filter(Boolean).join(" "), role: "dialog", "aria-modal": "true", ...rest, style: { zIndex }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "fd-card-head", style: { flex: "none" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "fd-card-head-title", title: truncationTitle(title), children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("aside", { ref: asideRef, className: ["fd-drawer", bare ? "is-bare" : "", closing ? "is-closing" : "", className].filter(Boolean).join(" "), role: "dialog", "aria-modal": "true", "aria-label": accessibleName, "aria-labelledby": bare || label ? void 0 : titleId, ...rest, style: { zIndex }, children: [
+        bare ? null : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "fd-card-head", style: { flex: "none" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { id: titleId, className: "fd-card-head-title", title: truncationTitle(title), children: title }),
           onClose ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: "fd-btn-icon", "aria-label": "Close", onClick: close2, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("i", { className: "ph ph-x" }) }) : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { flex: "1 1 auto", minHeight: 0, overflow: "auto", padding: 20 }, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: bare ? { flex: "1 1 auto", minHeight: 0, display: "flex", flexDirection: "column" } : { flex: "1 1 auto", minHeight: 0, overflow: "auto", padding: 20 }, children: typeof children === "function" ? children(close2) : children }),
         footer ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "fd-card-foot", style: { flex: "none" }, children: typeof footer === "function" ? footer(close2) : footer }) : null
       ] })
     ] }),
@@ -2672,8 +2680,16 @@ function Topbar({
 
 // src/kits/useResponsiveRail.ts
 var React15 = __toESM(require("react"), 1);
+
+// src/kits/overlayLayout.ts
+var OVERLAY_BREAKPOINT = 1024;
+function useOverlayLayout() {
+  return useIsNarrow(OVERLAY_BREAKPOINT);
+}
+
+// src/kits/useResponsiveRail.ts
 function useResponsiveRail(options = {}) {
-  const { breakpoint = 1024, initialOpen = true, onPersist } = options;
+  const { breakpoint = OVERLAY_BREAKPOINT, initialOpen = true, onPersist } = options;
   const navRef = React15.useRef(null);
   const overlay = useIsNarrow(breakpoint);
   const [open2, setOpenRaw] = React15.useState(() => overlay ? false : initialOpen);
@@ -2714,7 +2730,7 @@ function AppShell({
   navFooter,
   initialNavOpen = true,
   onNavOpenChange,
-  railBreakpoint = 1024,
+  railBreakpoint = OVERLAY_BREAKPOINT,
   crumbs,
   loading,
   actions,
@@ -5034,7 +5050,7 @@ var import_jsx_runtime50 = require("react/jsx-runtime");
 var TAIL_CHARS = 12;
 var graphemes = new Intl.Segmenter(void 0, { granularity: "grapheme" });
 function splitForMiddleEllipsis(text) {
-  const chars = Array.from(graphemes.segment(text), (part) => part.segment);
+  const chars = Array.from(graphemes.segment(text), (part2) => part2.segment);
   if (chars.length <= TAIL_CHARS) return { head: text, tail: "" };
   return { head: chars.slice(0, -TAIL_CHARS).join(""), tail: chars.slice(-TAIL_CHARS).join("") };
 }
@@ -7070,7 +7086,8 @@ function StepList({
   onToggle,
   showDurations = true,
   dense = false,
-  className = ""
+  className = "",
+  active = false
 }) {
   const [openState, setOpenState] = React39.useState(defaultOpen);
   const open2 = openProp == null ? openState : openProp;
@@ -7080,15 +7097,15 @@ function StepList({
   const failed = steps.filter((s) => s.status === "error").length;
   const total = steps.reduce((n, s) => n + (s.durationMs || 0), 0);
   const current2 = steps.filter((s) => s.status === "running").slice(-1)[0];
-  const summary = label || (running ? current2 ? current2.label : "Working" : total ? "Worked for " + formatDuration(total) : "Steps");
+  const summary = label || (running ? current2 ? current2.label : "Working" : active ? "Steps so far" : total ? "Worked for " + formatDuration(total) : "Steps");
   const toggle = () => {
     const next = !open2;
     if (openProp == null) setOpenState(next);
     onToggle && onToggle(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: ["fd-steps", dense ? "is-dense" : "", open2 ? "is-open" : "", className].filter(Boolean).join(" "), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: ["fd-steps", dense ? "is-dense" : "", active ? "is-active" : "", open2 ? "is-open" : "", className].filter(Boolean).join(" "), children: [
     /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("button", { type: "button", className: "fd-steps-head", onClick: toggle, "aria-expanded": open2, children: [
-      running ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "fd-steps-spin", "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("i", { className: "ph ph-" + (failed ? "warning-circle" : "check-circle"), "aria-hidden": "true" }),
+      running ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "fd-steps-spin", "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("i", { className: "ph ph-" + (failed ? "warning-circle" : active ? "list-checks" : "check-circle"), "aria-hidden": "true" }),
       /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "fd-steps-title", title: truncationTitle(summary), children: summary }),
       /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { className: "fd-steps-count fd-tabular", children: [
         steps.length,
@@ -13565,17 +13582,13 @@ function PreferenceMeter({
 }
 
 // src/components/chat/AgentChatPanel.tsx
-var React75 = __toESM(require("react"), 1);
+var React76 = __toESM(require("react"), 1);
 
 // src/components/chat/chatEngine.ts
+var React71 = __toESM(require("react"), 1);
+
+// src/components/chat/chatStore.ts
 var React70 = __toESM(require("react"), 1);
-var CHAT_UNAVAILABLE = "chat_unavailable";
-var JOB_PENDING = ["queued", "running"];
-var JOB_SUCCESS = ["completed", "recovered"];
-var STORAGE_PREFIX = "fdchat:job:";
-var seq = 0;
-var uid = (p) => p + "_" + ++seq + "_" + Date.now().toString(36);
-var sleep = (ms) => new Promise((r) => setTimeout(r, ms));
 var safeStore = {
   get(k) {
     try {
@@ -13597,6 +13610,38 @@ var safeStore = {
     }
   }
 };
+var part = (v) => encodeURIComponent(v);
+var jobKey = (threadId) => "fdchat:job:" + part(threadId);
+var draftKey = (owner, contextType, contextId) => "fdchat:draft:" + [owner, contextType, contextId].map(part).join(":");
+function useChatDraft(owner, contextType, contextId, store = safeStore) {
+  if (owner === "") throw new Error("useChatDraft: draftOwner is an empty string; pass the signed-in user's id, or null for no owner.");
+  const key = owner === null ? null : draftKey(owner, contextType, contextId);
+  const read2 = (k) => k ? store.get(k) || "" : "";
+  const [state, setState] = React70.useState(() => ({ key, text: read2(key) }));
+  let current2 = state;
+  if (state.key !== key) {
+    current2 = { key, text: read2(key) };
+    setState(current2);
+  }
+  const setText = React70.useCallback((text) => {
+    if (key) {
+      if (text) {
+        store.set(key, text);
+        if (store.get(key) !== text) store.del(key);
+      } else store.del(key);
+    }
+    setState({ key, text });
+  }, [key, store]);
+  return [current2.text, setText];
+}
+
+// src/components/chat/chatEngine.ts
+var CHAT_UNAVAILABLE = "chat_unavailable";
+var JOB_PENDING = ["queued", "running"];
+var JOB_SUCCESS = ["completed", "recovered"];
+var seq = 0;
+var uid = (p) => p + "_" + ++seq + "_" + Date.now().toString(36);
+var sleep = (ms) => new Promise((r) => setTimeout(r, ms));
 var isSystemMessage = (m) => !!m && (m.role === "system" || m.metadata != null && m.metadata.type === "system");
 var visibleMessages = (list) => (list || []).filter((m) => !isSystemMessage(m));
 function jobBucket(status) {
@@ -13605,6 +13650,20 @@ function jobBucket(status) {
   if (JOB_SUCCESS.indexOf(s) !== -1) return "success";
   return "failure";
 }
+function defaultDescribeWaiting(pending) {
+  return "Waiting on " + pending.length + " background " + (pending.length === 1 ? "task" : "tasks");
+}
+function withWaiting(list, describe) {
+  const pending = list.filter((m) => m.taskPending);
+  let turn = -1;
+  list.forEach((m, i) => {
+    if (m.working) turn = i;
+  });
+  return list.map((m, i) => {
+    const want = i === turn && pending.length ? describe(pending) : void 0;
+    return m.waitingFor === want ? m : Object.assign({}, m, { waitingFor: want });
+  });
+}
 function useChatEngine(opts) {
   const {
     contextType,
@@ -13614,6 +13673,7 @@ function useChatEngine(opts) {
     threadId: threadIdProp,
     pollIntervalMs = 1500,
     pendingTimeoutMs = 18e4,
+    describeWaiting = defaultDescribeWaiting,
     store = safeStore,
     onPacket,
     onThreadReady,
@@ -13622,35 +13682,38 @@ function useChatEngine(opts) {
     onClear,
     onFeedback
   } = opts || {};
-  const [status, setStatus] = React70.useState("idle");
-  const [threadId, setThreadId] = React70.useState(null);
-  const [messages, setMessages] = React70.useState([]);
-  const [queue, setQueue] = React70.useState([]);
-  const [fatal, setFatal] = React70.useState(null);
-  const [busy, setBusy] = React70.useState(false);
-  const [turnStartedAt, setTurnStartedAt] = React70.useState(null);
-  const listRef = React70.useRef([]);
-  const queueRef = React70.useRef([]);
-  const busyRef = React70.useRef(false);
-  const loadedRef = React70.useRef(false);
-  const stoppedRef = React70.useRef(false);
-  const abortRef = React70.useRef(null);
-  const serverCount = React70.useRef(0);
-  const serverIds = React70.useRef(/* @__PURE__ */ new Set());
-  const liveTurn = React70.useRef(null);
-  const lastTurnOwn = React70.useRef(/* @__PURE__ */ new Set());
-  const retired = React70.useRef(/* @__PURE__ */ new Set());
-  const threadRef = React70.useRef(null);
-  const mounted = React70.useRef(true);
-  React70.useEffect(() => {
+  const [status, setStatus] = React71.useState("idle");
+  const [threadId, setThreadId] = React71.useState(null);
+  const [messages, setMessages] = React71.useState([]);
+  const [queue, setQueue] = React71.useState([]);
+  const [fatal, setFatal] = React71.useState(null);
+  const [busy, setBusy] = React71.useState(false);
+  const [turnStartedAt, setTurnStartedAt] = React71.useState(null);
+  const listRef = React71.useRef([]);
+  const queueRef = React71.useRef([]);
+  const busyRef = React71.useRef(false);
+  const loadedRef = React71.useRef(false);
+  const stoppedRef = React71.useRef(false);
+  const abortRef = React71.useRef(null);
+  const serverCount = React71.useRef(0);
+  const serverIds = React71.useRef(/* @__PURE__ */ new Set());
+  const liveTurn = React71.useRef(null);
+  const lastTurnOwn = React71.useRef(/* @__PURE__ */ new Set());
+  const retired = React71.useRef(/* @__PURE__ */ new Set());
+  const threadRef = React71.useRef(null);
+  const mounted = React71.useRef(true);
+  React71.useEffect(() => {
     mounted.current = true;
     return () => {
       mounted.current = false;
     };
   }, []);
+  const describeWaitingRef = React71.useRef(describeWaiting);
+  describeWaitingRef.current = describeWaiting;
   const commit = (next) => {
-    listRef.current = next;
-    if (mounted.current) setMessages(next);
+    const derived = withWaiting(next, (pending) => describeWaitingRef.current(pending));
+    listRef.current = derived;
+    if (mounted.current) setMessages(derived);
   };
   const patch = (id, p) => commit(listRef.current.map((m) => m.id === id ? Object.assign({}, m, typeof p === "function" ? p(m) : p) : m));
   const push = (...msgs) => commit(listRef.current.concat(msgs));
@@ -13664,7 +13727,7 @@ function useChatEngine(opts) {
     }
     return false;
   };
-  const loadThread = React70.useCallback(async (id) => {
+  const loadThread = React71.useCallback(async (id) => {
     const data = await apiAdapter.getThread(id);
     const list = [...data && data.messages || []];
     serverCount.current = list.length;
@@ -13704,7 +13767,7 @@ function useChatEngine(opts) {
       packet: progress.packet ?? holder.packet
     });
   }
-  React70.useEffect(() => {
+  React71.useEffect(() => {
     if (!apiAdapter) {
       setStatus("idle");
       setFatal(null);
@@ -13751,7 +13814,7 @@ function useChatEngine(opts) {
         setStatus("ready");
         loadedRef.current = true;
         onThreadReady && onThreadReady(id);
-        const stored = store.get(STORAGE_PREFIX + id);
+        const stored = store.get(jobKey(id));
         const last = [...visibleMessages(listRef.current)].reverse().find((m) => m.role === "assistant");
         if (stored) resumeJob(stored);
         else if (last && last.working && last.jobId) resumeJob(last.jobId, last.id);
@@ -13770,7 +13833,7 @@ function useChatEngine(opts) {
     };
   }, [apiAdapter, contextType, contextId, threadIdProp]);
   async function pollJob(jobId, placeholderId) {
-    store.set(STORAGE_PREFIX + threadRef.current, jobId);
+    store.set(jobKey(threadRef.current), jobId);
     const deadline = Date.now() + pendingTimeoutMs;
     while (true) {
       if (stoppedRef.current) break;
@@ -13818,7 +13881,7 @@ function useChatEngine(opts) {
     }
   }
   async function finishJob(_jobId, _job) {
-    store.del(STORAGE_PREFIX + threadRef.current);
+    store.del(jobKey(threadRef.current));
     try {
       const list = await loadThread(threadRef.current);
       const withPacket = [...list].reverse().find((m) => m && m.packet);
@@ -13828,7 +13891,7 @@ function useChatEngine(opts) {
     }
   }
   function recordFailure(placeholderId, code, retryable, job) {
-    store.del(STORAGE_PREFIX + threadRef.current);
+    store.del(jobKey(threadRef.current));
     if (!listRef.current.some((m) => m.id === placeholderId)) {
       push({ id: placeholderId, role: "assistant", text: null });
     }
@@ -13936,7 +13999,7 @@ function useChatEngine(opts) {
       await dispatchTurn(turn);
     }
   }
-  const send = React70.useCallback((text, attachments) => {
+  const send = React71.useCallback((text, attachments) => {
     const body = (text || "").trim();
     if (!body && !(attachments && attachments.length)) return;
     if (status === "disconnected") return;
@@ -13946,7 +14009,7 @@ function useChatEngine(opts) {
     stoppedRef.current = false;
     drain();
   }, [status]);
-  const stop = React70.useCallback(() => {
+  const stop = React71.useCallback(() => {
     stoppedRef.current = true;
     const ac = abortRef.current;
     if (ac) {
@@ -13962,14 +14025,14 @@ function useChatEngine(opts) {
         Promise.resolve(apiAdapter.cancelJob(holder.jobId)).catch(() => {
         });
       }
-      store.del(STORAGE_PREFIX + threadRef.current);
+      store.del(jobKey(threadRef.current));
     }
   }, [apiAdapter]);
-  const removeQueued = React70.useCallback((id) => {
+  const removeQueued = React71.useCallback((id) => {
     queueRef.current = queueRef.current.filter((t) => t.id !== id);
     setQueue(queueRef.current.slice());
   }, []);
-  const retry = React70.useCallback(() => {
+  const retry = React71.useCallback(() => {
     const list = listRef.current;
     let at = -1;
     for (let i = list.length - 1; i >= 0; i--) if (list[i].role === "user") {
@@ -13986,19 +14049,19 @@ function useChatEngine(opts) {
     setQueue(queueRef.current.slice());
     drain();
   }, []);
-  const clear = React70.useCallback(() => {
+  const clear = React71.useCallback(() => {
     commit([]);
     serverCount.current = 0;
     queueRef.current = [];
     setQueue([]);
     onClear && onClear();
   }, [onClear]);
-  const setFeedback = React70.useCallback((id, value) => {
+  const setFeedback = React71.useCallback((id, value) => {
     patch(id, (m) => ({ feedback: m.feedback === value ? null : value }));
     const msg = listRef.current.find((m) => m.id === id);
     onFeedback && onFeedback({ message: msg, feedback: msg ? msg.feedback : value });
   }, [onFeedback]);
-  const reload = React70.useCallback(async () => {
+  const reload = React71.useCallback(async () => {
     if (!threadRef.current) return;
     setStatus("loading");
     try {
@@ -14036,10 +14099,10 @@ var ChatKit = {
 };
 
 // src/components/chat/ChatTranscript.tsx
-var React72 = __toESM(require("react"), 1);
+var React73 = __toESM(require("react"), 1);
 
 // src/components/chat/ChatTurn.tsx
-var React71 = __toESM(require("react"), 1);
+var React72 = __toESM(require("react"), 1);
 var import_jsx_runtime102 = require("react/jsx-runtime");
 function JsonView({ value }) {
   let text;
@@ -14076,7 +14139,7 @@ function PacketCard({ packet, schema, render, onApply, applied }) {
   ] });
 }
 function ThinkingBlock({ text, durationMs, streaming, defaultOpen = false }) {
-  const [open2, setOpen] = React71.useState(defaultOpen);
+  const [open2, setOpen] = React72.useState(defaultOpen);
   if (!text) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "fdc-think" + (open2 ? " is-open" : ""), children: [
     /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("button", { type: "button", className: "fdc-think-head", onClick: () => setOpen((v) => !v), "aria-expanded": open2, children: [
@@ -14093,7 +14156,7 @@ function ThinkingBlock({ text, durationMs, streaming, defaultOpen = false }) {
   ] });
 }
 function Citations({ items = [], onOpen }) {
-  const [open2, setOpen] = React71.useState(false);
+  const [open2, setOpen] = React72.useState(false);
   if (!items.length) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "fdc-cites", children: [
     /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("button", { type: "button", className: "fdc-cites-head", onClick: () => setOpen((v) => !v), "aria-expanded": open2, children: [
@@ -14119,7 +14182,7 @@ function clampText(text, max) {
   return (at > max * 0.6 ? cut.slice(0, at) : cut).trimEnd() + "\u2026";
 }
 function MessageBody({ message: m, ctx }) {
-  const [expanded, setExpanded] = React71.useState(false);
+  const [expanded, setExpanded] = React72.useState(false);
   const isUser = m.role === "user";
   const raw = m.text || "";
   const clamped = !expanded && !m.streaming ? clampText(raw, ctx.maxVisibleChars) : null;
@@ -14127,7 +14190,7 @@ function MessageBody({ message: m, ctx }) {
   const showMd = ctx.markdown && !isUser;
   return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "fdc-body", children: [
     m.thinking && ctx.showThinking ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(ThinkingBlock, { text: m.thinking, durationMs: m.thinkingMs, streaming: m.streaming && !m.text }) : null,
-    m.steps && m.steps.length && ctx.showSteps ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(StepList, { steps: m.steps, defaultOpen: m.steps.some((s) => s.status === "running"), dense: true }) : null,
+    m.steps && m.steps.length && ctx.showSteps ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(StepList, { steps: m.steps, defaultOpen: m.steps.some((s) => s.status === "running"), active: !!m.working, dense: true }) : null,
     body ? /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "fdc-text" + (isUser ? " is-user" : ""), children: [
       showMd ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(Markdown, { source: body, headingOffset: 2, codeProps: { collapseAfter: 22 }, renderCitation: ctx.renderCitation }) : /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: "fdc-plain", children: body }),
       m.streaming ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("span", { className: "fdc-caret", "aria-hidden": "true" }) : null
@@ -14159,8 +14222,8 @@ function MessageBody({ message: m, ctx }) {
         /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("span", {})
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("span", { className: "fdc-working-label", children: [
-        m.resumed ? "Resuming" : "Working",
-        m.job && m.job.status ? /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("span", { className: "fdc-working-job", children: [
+        m.waitingFor || (m.resumed ? "Resuming" : "Working"),
+        !m.waitingFor && m.job && m.job.status ? /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("span", { className: "fdc-working-job", children: [
           " \xB7 ",
           m.job.status
         ] }) : null,
@@ -14168,8 +14231,7 @@ function MessageBody({ message: m, ctx }) {
           " \xB7 ",
           m.job.detail
         ] }) : null
-      ] }),
-      m.jobId ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("span", { className: "fdc-working-id fd-mono", children: String(m.jobId).slice(0, 12) }) : null
+      ] })
     ] }) : null,
     m.stopped ? /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "fdc-stopped", children: [
       /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("i", { className: "ph ph-stop-circle", "aria-hidden": "true" }),
@@ -14199,7 +14261,7 @@ function RunActions({ group, ctx }) {
     ] }),
     isAssistant && ctx.onRetry ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("button", { type: "button", className: "fdc-act", onClick: ctx.onRetry, "aria-label": "Retry this turn", children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("i", { className: "ph ph-arrow-clockwise", "aria-hidden": "true" }) }) : null,
     group.role === "user" && ctx.onEdit ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("button", { type: "button", className: "fdc-act", onClick: () => ctx.onEdit(last), "aria-label": "Edit and resend", children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("i", { className: "ph ph-pencil-simple", "aria-hidden": "true" }) }) : null,
-    isAssistant && ctx.onFeedback ? /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(React71.Fragment, { children: [
+    isAssistant && ctx.onFeedback ? /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(React72.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("button", { type: "button", className: "fdc-act" + (fb === "up" ? " is-on" : ""), onClick: () => ctx.onFeedback(last.id, "up"), "aria-pressed": fb === "up", "aria-label": "Good response", children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("i", { className: "ph ph-thumbs-up", "aria-hidden": "true" }) }),
       /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("button", { type: "button", className: "fdc-act" + (fb === "down" ? " is-on" : ""), onClick: () => ctx.onFeedback(last.id, "down"), "aria-pressed": fb === "down", "aria-label": "Bad response", children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("i", { className: "ph ph-thumbs-down", "aria-hidden": "true" }) })
     ] }) : null,
@@ -14294,10 +14356,10 @@ function ChatTranscript({
   renderEmpty,
   className = ""
 }) {
-  const scroller = React72.useRef(null);
-  const stick = React72.useRef(true);
-  const [pill, setPill] = React72.useState(0);
-  const seen = React72.useRef(0);
+  const scroller = React73.useRef(null);
+  const stick = React73.useRef(true);
+  const [pill, setPill] = React73.useState(0);
+  const seen = React73.useRef(0);
   const toBottom = (smooth) => {
     const el = scroller.current;
     if (!el) return;
@@ -14316,7 +14378,7 @@ function ChatTranscript({
       seen.current = messages.length;
     }
   };
-  React72.useLayoutEffect(() => {
+  React73.useLayoutEffect(() => {
     const el = scroller.current;
     if (!el) return;
     if (stick.current) {
@@ -14324,7 +14386,7 @@ function ChatTranscript({
       seen.current = messages.length;
     } else setPill(Math.max(0, messages.length - seen.current));
   }, [messages]);
-  React72.useEffect(() => {
+  React73.useEffect(() => {
     const el = scroller.current;
     const inner = el && el.firstChild;
     if (!el || !inner || typeof ResizeObserver === "undefined") return;
@@ -14334,7 +14396,7 @@ function ChatTranscript({
     ro.observe(inner);
     return () => ro.disconnect();
   }, []);
-  const groups = React72.useMemo(() => groupMessages(messages), [messages]);
+  const groups = React73.useMemo(() => groupMessages(messages), [messages]);
   const empty = !messages.length && status === "ready";
   return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: ["fdc-scroll", className].filter(Boolean).join(" "), ref: scroller, onScroll, children: [
     /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: "fdc-log", role: "log", "aria-label": "Conversation", children: [
@@ -14358,7 +14420,7 @@ function ChatTranscript({
         const prev = groups[i - 1];
         const k = dayKey(g.messages[0].timestamp);
         const showDay = !!k && (!prev || dayKey(prev.messages[0].timestamp) !== k);
-        return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(React72.Fragment, { children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(React73.Fragment, { children: [
           showDay ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { className: "fdc-day", children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("span", { children: dayLabel(k) }) }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(ChatTurn, { group: g, ctx })
         ] }, g.key || i);
@@ -14375,7 +14437,7 @@ function ChatTranscript({
 var TranscriptKit = { groupMessages };
 
 // src/components/chat/ChatComposer.tsx
-var React73 = __toESM(require("react"), 1);
+var React74 = __toESM(require("react"), 1);
 var import_jsx_runtime104 = require("react/jsx-runtime");
 function ChatComposer({
   onSubmit,
@@ -14403,17 +14465,17 @@ function ChatComposer({
   onReject,
   onOpenAttachment
 }) {
-  const [text, setText] = React73.useState(draft || "");
-  const [trigger, setTrigger] = React73.useState(null);
-  const [mentionItems, setMentionItems] = React73.useState([]);
-  const [listening, setListening] = React73.useState(false);
-  const [notice, setNotice] = React73.useState(null);
-  const editor = React73.useRef(null);
-  const wrap = React73.useRef(null);
-  const stopVoice = React73.useRef(null);
+  const [text, setText] = React74.useState(draft || "");
+  const [trigger, setTrigger] = React74.useState(null);
+  const [mentionItems, setMentionItems] = React74.useState([]);
+  const [listening, setListening] = React74.useState(false);
+  const [notice, setNotice] = React74.useState(null);
+  const editor = React74.useRef(null);
+  const wrap = React74.useRef(null);
+  const stopVoice = React74.useRef(null);
   const staged = useStagedFiles(fileUploadHandler, { onError: () => {
   } });
-  React73.useEffect(() => {
+  React74.useEffect(() => {
     if (draft != null && draft !== text) setText(draft);
   }, [draft]);
   const change = (v) => {
@@ -14449,7 +14511,7 @@ function ChatComposer({
     e.preventDefault();
     staged.add(found.files);
   };
-  React73.useEffect(() => {
+  React74.useEffect(() => {
     if (!trigger || trigger.type !== "mention" || !mentionSources) {
       setMentionItems([]);
       return;
@@ -14467,7 +14529,7 @@ function ChatComposer({
     const q = (trigger.query || "").toLowerCase();
     setMentionItems(mentionSources.filter((m) => !q || (m.label + " " + (m.description || "")).toLowerCase().includes(q)));
   }, [trigger, mentionSources]);
-  const slashItems = React73.useMemo(() => {
+  const slashItems = React74.useMemo(() => {
     if (!trigger || trigger.type !== "slash" || !slashCommands) return [];
     const q = (trigger.query || "").toLowerCase();
     return slashCommands.filter((c) => !q || (c.id + " " + c.label + " " + (c.description || "")).toLowerCase().includes(q));
@@ -14637,12 +14699,12 @@ function ChatComposer({
 }
 
 // src/components/chat/ChatSessionBar.tsx
-var React74 = __toESM(require("react"), 1);
+var React75 = __toESM(require("react"), 1);
 var import_jsx_runtime105 = require("react/jsx-runtime");
 var compact2 = meterFormats.compact;
 function ChatSessionBar({ sessionStats, contextUsage, usageLimits, onClear, extras }) {
-  const [open2, setOpen] = React74.useState(false);
-  const anchor = React74.useRef(null);
+  const [open2, setOpen] = React75.useState(false);
+  const anchor = React75.useRef(null);
   const stats = sessionStats || null;
   const cu = contextUsage || null;
   const limits = usageLimits || null;
@@ -14657,7 +14719,7 @@ function ChatSessionBar({ sessionStats, contextUsage, usageLimits, onClear, extr
   if (stats && stats.runningTasks) bits.push(stats.runningTasks + " running task" + (stats.runningTasks === 1 ? "" : "s"));
   if (cu) bits.push(pct + "% context");
   const expandable = !!(cu || limits);
-  return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(React74.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(React75.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: "fdc-bar", children: [
       /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
         "button",
@@ -14798,7 +14860,7 @@ function ModelControls({
       ] })
     });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(React74.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(React75.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
       MenuButton,
       {
@@ -14837,6 +14899,7 @@ function AgentChatPanel({
   /* required */
   contextType,
   contextId,
+  draftOwner,
   apiAdapter,
   threadId,
   /* identity + chrome */
@@ -14866,6 +14929,7 @@ function AgentChatPanel({
   packetRenderers,
   onApplyPacket,
   pendingTimeoutMs,
+  describeWaiting,
   onOpenAttachment,
   errorCopy,
   /* composer */
@@ -14916,11 +14980,11 @@ function AgentChatPanel({
   onFeedback,
   onEditMessage
 }) {
-  const [panelWidth, setPanelWidth] = React75.useState(width);
-  const [applied, setApplied] = React75.useState({});
-  const [draft, setDraft] = React75.useState("");
-  const dragging = React75.useRef(null);
-  React75.useEffect(() => setPanelWidth(width), [width]);
+  const [panelWidth, setPanelWidth] = React76.useState(width);
+  const [applied, setApplied] = React76.useState({});
+  const [draft, setDraft] = useChatDraft(draftOwner, contextType, contextId);
+  const dragging = React76.useRef(null);
+  React76.useEffect(() => setPanelWidth(width), [width]);
   const engine = useChatEngine({
     contextType,
     contextId,
@@ -14928,6 +14992,7 @@ function AgentChatPanel({
     initialMessage,
     threadId,
     pendingTimeoutMs,
+    describeWaiting,
     onPacket,
     onThreadReady,
     onError,
@@ -15125,7 +15190,7 @@ function AgentChatPanel({
 }
 
 // src/components/files/FileViewer.tsx
-var React76 = __toESM(require("react"), 1);
+var React77 = __toESM(require("react"), 1);
 var import_jsx_runtime107 = require("react/jsx-runtime");
 function previewKindOf(file) {
   const mime = (file.mime || "").toLowerCase();
@@ -15182,13 +15247,13 @@ function parseDelimited(text, delimiter) {
   return rows;
 }
 function usePreview(file, kind, resolveUrl) {
-  const [state, setState] = React76.useState({ status: "loading" });
-  const [attempt, setAttempt] = React76.useState(0);
-  const resolveRef = React76.useRef(resolveUrl);
-  React76.useEffect(() => {
+  const [state, setState] = React77.useState({ status: "loading" });
+  const [attempt, setAttempt] = React77.useState(0);
+  const resolveRef = React77.useRef(resolveUrl);
+  React77.useEffect(() => {
     resolveRef.current = resolveUrl;
   }, [resolveUrl]);
-  React76.useEffect(() => {
+  React77.useEffect(() => {
     if (kind === "none") {
       setState({ status: "ready" });
       return;
@@ -15218,7 +15283,7 @@ function usePreview(file, kind, resolveUrl) {
       if (ac) ac.abort();
     };
   }, [file.id, kind, attempt]);
-  return { ...state, retry: React76.useCallback(() => setAttempt((a) => a + 1), []) };
+  return { ...state, retry: React77.useCallback(() => setAttempt((a) => a + 1), []) };
 }
 function PreviewBody({ file, kind, state }) {
   if (kind === "image") return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("img", { className: "fd-fv-image", src: state.url, alt: file.name || "Preview" });
@@ -15263,13 +15328,13 @@ function PreviewBody({ file, kind, state }) {
   ] });
 }
 function FileViewer({ file, resolveUrl, sidePanel, sidePanelLabel = "Details", onClose, actions, className = "" }) {
-  const kind = React76.useMemo(() => previewKindOf(file), [file]);
+  const kind = React77.useMemo(() => previewKindOf(file), [file]);
   const preview = usePreview(file, kind, resolveUrl);
-  const [tab, setTab] = React76.useState("preview");
-  const [downloading, setDownloading] = React76.useState(false);
-  const [downloadError, setDownloadError] = React76.useState(null);
+  const [tab, setTab] = React77.useState("preview");
+  const [downloading, setDownloading] = React77.useState(false);
+  const [downloadError, setDownloadError] = React77.useState(null);
   const hasSide = sidePanel != null;
-  React76.useEffect(() => {
+  React77.useEffect(() => {
     setTab("preview");
   }, [file.id]);
   const download = () => {
@@ -15336,7 +15401,7 @@ function FileViewer({ file, resolveUrl, sidePanel, sidePanelLabel = "Details", o
 }
 
 // src/components/files/FileBrowser.tsx
-var React77 = __toESM(require("react"), 1);
+var React78 = __toESM(require("react"), 1);
 var import_jsx_runtime108 = require("react/jsx-runtime");
 function childrenOf(folders, parentId) {
   return folders.filter((f) => f.parentId === parentId).sort((a, b) => a.name.localeCompare(b.name));
@@ -15446,8 +15511,8 @@ function FolderPickerMenu({
   ] });
 }
 function RowShell({ icon, name, meta, onOpen, draggableId, isDropTarget, onDropPayload, actions, className = "" }) {
-  const [over, setOver] = React77.useState(false);
-  const dragCounter = React77.useRef(0);
+  const [over, setOver] = React78.useState(false);
+  const dragCounter = React78.useRef(0);
   const dropHandlers = isDropTarget ? {
     onDragEnter: (e) => {
       if (!hasInternalPayload(e)) return;
@@ -15495,8 +15560,8 @@ function RowShell({ icon, name, meta, onOpen, draggableId, isDropTarget, onDropP
 }
 function TreeNode({ folder, depth, folders, currentFolderId, onNavigate, onMoveInto, canMove }) {
   const kids = childrenOf(folders, folder.id);
-  const [expanded, setExpanded] = React77.useState(() => currentFolderId != null && isSelfOrDescendant(folders, folder.id, currentFolderId));
-  React77.useEffect(() => {
+  const [expanded, setExpanded] = React78.useState(() => currentFolderId != null && isSelfOrDescendant(folders, folder.id, currentFolderId));
+  React78.useEffect(() => {
     if (currentFolderId != null && isSelfOrDescendant(folders, folder.id, currentFolderId)) setExpanded(true);
   }, [currentFolderId, folder.id, folders]);
   const isCurrent = folder.id === currentFolderId;
@@ -15562,15 +15627,15 @@ function FileBrowser({
   const canUpload = perm.canUpload !== false && !!onUpload;
   const canRemoveFile = perm.canRemoveFile !== false && !!onRemoveFile;
   const canDeleteFolder = perm.canDeleteFolder !== false && !!onDeleteFolder;
-  const [createOpen, setCreateOpen] = React77.useState(false);
-  const [createName, setCreateName] = React77.useState("");
-  const [renameTarget, setRenameTarget] = React77.useState(null);
-  const [renameValue, setRenameValue] = React77.useState("");
-  const [deleteTarget, setDeleteTarget] = React77.useState(null);
-  const uploadInputRef = React77.useRef(null);
-  const crumbFolders = React77.useMemo(() => ancestorsOf(folders, currentFolderId), [folders, currentFolderId]);
-  const subfolders = React77.useMemo(() => childrenOf(folders, currentFolderId), [folders, currentFolderId]);
-  const currentFiles = React77.useMemo(
+  const [createOpen, setCreateOpen] = React78.useState(false);
+  const [createName, setCreateName] = React78.useState("");
+  const [renameTarget, setRenameTarget] = React78.useState(null);
+  const [renameValue, setRenameValue] = React78.useState("");
+  const [deleteTarget, setDeleteTarget] = React78.useState(null);
+  const uploadInputRef = React78.useRef(null);
+  const crumbFolders = React78.useMemo(() => ancestorsOf(folders, currentFolderId), [folders, currentFolderId]);
+  const subfolders = React78.useMemo(() => childrenOf(folders, currentFolderId), [folders, currentFolderId]);
+  const currentFiles = React78.useMemo(
     () => files.filter((f) => f.folderId === currentFolderId).sort((a, b) => a.name.localeCompare(b.name)),
     [files, currentFolderId]
   );
@@ -15802,8 +15867,8 @@ function BreadcrumbCrumb({
   isDropTarget,
   onDropPayload
 }) {
-  const [over, setOver] = React77.useState(false);
-  const dragCounter = React77.useRef(0);
+  const [over, setOver] = React78.useState(false);
+  const dragCounter = React78.useRef(0);
   const dropHandlers = isDropTarget ? {
     onDragEnter: (e) => {
       if (!hasInternalPayload(e)) return;
@@ -15832,7 +15897,7 @@ function BreadcrumbCrumb({
 }
 
 // src/kits/query.ts
-var React78 = __toESM(require("react"), 1);
+var React79 = __toESM(require("react"), 1);
 
 // src/kits/queryUrl.ts
 var historyUrlAdapter = {
@@ -15970,38 +16035,38 @@ function requestFor(params, query, paging, after) {
 }
 var toError = (e) => e instanceof Error ? e : new Error(String(e));
 function useServerTable({ endpoint, params, defaults, deps, prefsKey, paging = "page", url }) {
-  const [base] = React78.useState(() => {
+  const [base] = React79.useState(() => {
     const store = PREFS || window.PlannerPrefs;
     const saved = prefsKey && store ? store.getTable(prefsKey) : {};
     return { ...DEFAULTS, ...defaults || {}, ...saved.pageSize ? { pageSize: saved.pageSize } : {}, ...saved.sort ? { sort: saved.sort, dir: saved.dir || "desc" } : {} };
   });
-  const [mountParams] = React78.useState(() => url ? (url.adapter ?? historyUrlAdapter).read() : null);
-  const address = React78.useRef(mountParams);
-  const [query, setQuery] = React78.useState(() => url && mountParams ? readQueryFromUrl(mountParams, url.scope, base, paging) : base);
-  const savePref = React78.useCallback((patch2) => {
+  const [mountParams] = React79.useState(() => url ? (url.adapter ?? historyUrlAdapter).read() : null);
+  const address = React79.useRef(mountParams);
+  const [query, setQuery] = React79.useState(() => url && mountParams ? readQueryFromUrl(mountParams, url.scope, base, paging) : base);
+  const savePref = React79.useCallback((patch2) => {
     const store = PREFS || window.PlannerPrefs;
     if (prefsKey && store) store.setTable(prefsKey, patch2);
   }, [prefsKey]);
-  const [res, setRes] = React78.useState(null);
-  const [loading, setLoading] = React78.useState(true);
-  const [loadingMore, setLoadingMore] = React78.useState(false);
-  const [failure, setFailure] = React78.useState(null);
-  const [reloadToken, setReloadToken] = React78.useState(0);
-  const moreController = React78.useRef(null);
+  const [res, setRes] = React79.useState(null);
+  const [loading, setLoading] = React79.useState(true);
+  const [loadingMore, setLoadingMore] = React79.useState(false);
+  const [failure, setFailure] = React79.useState(null);
+  const [reloadToken, setReloadToken] = React79.useState(0);
+  const moreController = React79.useRef(null);
   const depKey = (deps || []).join("|");
   const paramKey = JSON.stringify(params || {});
   const queryKey = JSON.stringify(query);
-  const lifetime = React78.useRef(null);
-  React78.useEffect(() => {
+  const lifetime = React79.useRef(null);
+  React79.useEffect(() => {
     const controller = new AbortController();
     lifetime.current = controller;
     return () => controller.abort();
   }, []);
-  const latest = React78.useRef({ res, loading, query, params, endpoint, url, base });
-  React78.useLayoutEffect(() => {
+  const latest = React79.useRef({ res, loading, query, params, endpoint, url, base });
+  React79.useLayoutEffect(() => {
     latest.current = { res, loading, query, params, endpoint, url, base };
   });
-  React78.useEffect(() => {
+  React79.useEffect(() => {
     const controller = new AbortController();
     const { signal } = controller;
     setLoading(true);
@@ -16037,7 +16102,7 @@ function useServerTable({ endpoint, params, defaults, deps, prefsKey, paging = "
     };
   }, [endpoint, queryKey, paramKey, depKey, paging, reloadToken]);
   const adapter = url ? url.adapter ?? historyUrlAdapter : null;
-  React78.useEffect(() => {
+  React79.useEffect(() => {
     if (!adapter) return;
     return adapter.subscribe((params2) => {
       const { url: u, base: b } = latest.current;
@@ -16387,12 +16452,12 @@ function createVersionStore(initialState, options) {
 }
 
 // src/kits/documentTitle.ts
-var React79 = __toESM(require("react"), 1);
+var React80 = __toESM(require("react"), 1);
 function formatDocumentTitle(routeTitle, appName) {
-  return [routeTitle, appName, "Flytedesk"].filter((part) => !!part && part.length > 0).join(" \xB7 ");
+  return [routeTitle, appName, "Flytedesk"].filter((part2) => !!part2 && part2.length > 0).join(" \xB7 ");
 }
 function useDocumentTitle(routeTitle, appName) {
-  React79.useEffect(() => {
+  React80.useEffect(() => {
     if (typeof document === "undefined") return;
     document.title = formatDocumentTitle(routeTitle, appName);
   }, [routeTitle, appName]);
@@ -16503,6 +16568,7 @@ function useDocumentTitle(routeTitle, appName) {
   ModeSwitch,
   ModelControls,
   NumberInput,
+  OVERLAY_BREAKPOINT,
   OVERLAY_CEILING,
   POPOVER_BODY_MIN,
   PacketCard,
@@ -16627,6 +16693,7 @@ function useDocumentTitle(routeTitle, appName) {
   useDocumentTitle,
   useFeatureStatus,
   useLayerZIndex,
+  useOverlayLayout,
   usePopoverPosition,
   useResponsiveRail,
   useRuntimeMode,