@flytedan/flytebot-design-system 0.71.7 → 0.72.0

package/dist/index.d.cts

@@ -363,10 +363,15 @@ interface DrawerProps {
     onClose?: () => void;
     /** Plain content, or a render function receiving `close` — call it to trigger the closing animation before onClose fires. */
     footer?: React.ReactNode | ((close: () => void) => React.ReactNode);
-    children?: React.ReactNode;
+    /** The drawer's content owns the whole panel: no header bar and no body padding, and the panel is the
+     *  full viewport height. For content that already has its own header and close control (a chat panel).
+     *  `title` is then only the dialog's accessible name; Escape, scrim click and focus handling are unchanged. */
+    bare?: boolean;
+    /** Plain content, or (like `footer`) a render function receiving `close`. */
+    children?: React.ReactNode | ((close: () => void) => React.ReactNode);
     className?: string;
 }
-declare function Drawer({ open, title, onClose, footer, children, className, ...rest }: DrawerProps): React.ReactPortal | null;
+declare function Drawer({ open, title, onClose, footer, bare, children, className, ...rest }: DrawerProps): React.ReactPortal | null;
 
 /** A focused decision on a scrim. Max 560px, 760 with `wide` for data. Escape closes.
  *  MP-212/MP-248: a trapping layer in the shared layer stack (kits/layerStack.tsx):
@@ -2017,12 +2022,18 @@ interface StepListProps {
     showDurations?: boolean;
     dense?: boolean;
     className?: string;
+    /**
+     * The work these steps belong to is not finished (a turn still waiting on background work). The head then
+     * reads as a neutral "Steps so far" disclosure, never the green "Worked for …" completion check, so a
+     * person never sees finished and working at once. A running step still shows its own spinner.
+     */
+    active?: boolean;
 }
 /**
  * A flat, collapsible list of work steps — one row per step, never one card per
  * call. A long run stays readable: it is a list, not a stack.
  */
-declare function StepList({ steps, label, defaultOpen, open: openProp, onToggle, showDurations, dense, className, }: StepListProps): React.JSX.Element | null;
+declare function StepList({ steps, label, defaultOpen, open: openProp, onToggle, showDurations, dense, className, active, }: StepListProps): React.JSX.Element | null;
 
 /** Number of rows kept mounted above and below the visible band. Two buffers this size
  *  (one per edge) plus the visible band itself is what keeps the mounted node count
@@ -4143,6 +4154,18 @@ interface ChatMessage {
     model?: string;
     usage?: unknown;
     resumed?: boolean;
+    /**
+     * This message is a background task that is still in progress (a queued or running query's card). Set by the
+     * adapter. `working` keeps meaning only "the turn is in flight"; a pending message shows no working row of
+     * its own. A task-pending message is what a working turn waits on (see `waitingFor`).
+     */
+    taskPending?: boolean;
+    /**
+     * What a still-working turn is waiting on, in words ("Running 2 queries"): set by the engine, never the
+     * adapter, on the working turn whenever messages of the thread are `taskPending`. The working indicator then
+     * shows this in place of "Working" as the turn's one state. Never an id.
+     */
+    waitingFor?: string;
     metadata?: {
         type?: string;
         [k: string]: unknown;
@@ -4200,6 +4223,12 @@ interface ChatEngineOptions {
      * is always authoritative: a terminal status seen at any time wins over this.
      */
     pendingTimeoutMs?: number;
+    /**
+     * Words for the background work a working turn is waiting on: called with the thread's `taskPending` messages
+     * (a running query's card), whenever there is at least one. Default "Waiting on N background
+     * task(s)". Return the app's own phrasing, e.g. "Running 2 queries".
+     */
+    describeWaiting?: (pending: ChatMessage[]) => string;
     store?: {
         get(k: string): string | null;
         set(k: string, v: string): void;
@@ -4358,6 +4387,8 @@ interface AgentChatPanelProps {
     onApplyPacket?: (p: Packet) => void;
     /** Give-up time for a queued/running turn, in ms. Default 180000. The server's terminal job status always wins. */
     pendingTimeoutMs?: number;
+    /** Words for the background work a live turn waits on, given the still-working cards ("Running 2 queries"). */
+    describeWaiting?: (pending: ChatMessage[]) => string;
     onOpenAttachment?: (a: Attachment) => void;
     /** Map a backend error code to human copy. */
     errorCopy?: (code: string) => React.ReactNode;
@@ -4418,7 +4449,7 @@ interface AgentChatPanelProps {
  * renders only when its input is supplied. A panel with no telemetry shows no
  * telemetry, not zeroes.
  */
-declare function AgentChatPanel({ contextType, contextId, apiAdapter, threadId, title, subtitle, showHeader, headerActions, onClose, assistantName, userName, assistantAvatar, userAvatar, assistantIcon, showAvatars, markdown, maxVisibleChars, messageActions, showSteps, showThinking, emptyTitle, emptyDescription, emptyIcon, suggestions, renderEmpty, packetSchemas, packetRenderers, onApplyPacket, pendingTimeoutMs, onOpenAttachment, errorCopy, placeholder, maxLength, hint, fileUploadHandler, acceptFiles, maxFileSize, largePasteThreshold, slashCommands, mentionSources, voiceHandler, initialMessage, contextUsage, sessionStats, usageLimits, models, model, onModelChange, effortLevels, effort, onEffortChange, fastMode, onFastModeChange, moreModels, threads, onSelectThread, onNewThread, onDeleteThread, surface, width, minWidth, maxWidth, resizable, height, className, style, onPacket, onThreadReady, onError, onSend, onClear, onFeedback, onEditMessage, }: AgentChatPanelProps): React.JSX.Element;
+declare function AgentChatPanel({ contextType, contextId, apiAdapter, threadId, title, subtitle, showHeader, headerActions, onClose, assistantName, userName, assistantAvatar, userAvatar, assistantIcon, showAvatars, markdown, maxVisibleChars, messageActions, showSteps, showThinking, emptyTitle, emptyDescription, emptyIcon, suggestions, renderEmpty, packetSchemas, packetRenderers, onApplyPacket, pendingTimeoutMs, describeWaiting, onOpenAttachment, errorCopy, placeholder, maxLength, hint, fileUploadHandler, acceptFiles, maxFileSize, largePasteThreshold, slashCommands, mentionSources, voiceHandler, initialMessage, contextUsage, sessionStats, usageLimits, models, model, onModelChange, effortLevels, effort, onEffortChange, fastMode, onFastModeChange, moreModels, threads, onSelectThread, onNewThread, onDeleteThread, surface, width, minWidth, maxWidth, resizable, height, className, style, onPacket, onThreadReady, onError, onSend, onClear, onFeedback, onEditMessage, }: AgentChatPanelProps): React.JSX.Element;
 
 /**
  * Staged files, the queue strip, the markdown editor, slash/mention triggers, send + stop.

package/dist/index.d.ts

@@ -363,10 +363,15 @@ interface DrawerProps {
     onClose?: () => void;
     /** Plain content, or a render function receiving `close` — call it to trigger the closing animation before onClose fires. */
     footer?: React.ReactNode | ((close: () => void) => React.ReactNode);
-    children?: React.ReactNode;
+    /** The drawer's content owns the whole panel: no header bar and no body padding, and the panel is the
+     *  full viewport height. For content that already has its own header and close control (a chat panel).
+     *  `title` is then only the dialog's accessible name; Escape, scrim click and focus handling are unchanged. */
+    bare?: boolean;
+    /** Plain content, or (like `footer`) a render function receiving `close`. */
+    children?: React.ReactNode | ((close: () => void) => React.ReactNode);
     className?: string;
 }
-declare function Drawer({ open, title, onClose, footer, children, className, ...rest }: DrawerProps): React.ReactPortal | null;
+declare function Drawer({ open, title, onClose, footer, bare, children, className, ...rest }: DrawerProps): React.ReactPortal | null;
 
 /** A focused decision on a scrim. Max 560px, 760 with `wide` for data. Escape closes.
  *  MP-212/MP-248: a trapping layer in the shared layer stack (kits/layerStack.tsx):
@@ -2017,12 +2022,18 @@ interface StepListProps {
     showDurations?: boolean;
     dense?: boolean;
     className?: string;
+    /**
+     * The work these steps belong to is not finished (a turn still waiting on background work). The head then
+     * reads as a neutral "Steps so far" disclosure, never the green "Worked for …" completion check, so a
+     * person never sees finished and working at once. A running step still shows its own spinner.
+     */
+    active?: boolean;
 }
 /**
  * A flat, collapsible list of work steps — one row per step, never one card per
  * call. A long run stays readable: it is a list, not a stack.
  */
-declare function StepList({ steps, label, defaultOpen, open: openProp, onToggle, showDurations, dense, className, }: StepListProps): React.JSX.Element | null;
+declare function StepList({ steps, label, defaultOpen, open: openProp, onToggle, showDurations, dense, className, active, }: StepListProps): React.JSX.Element | null;
 
 /** Number of rows kept mounted above and below the visible band. Two buffers this size
  *  (one per edge) plus the visible band itself is what keeps the mounted node count
@@ -4143,6 +4154,18 @@ interface ChatMessage {
     model?: string;
     usage?: unknown;
     resumed?: boolean;
+    /**
+     * This message is a background task that is still in progress (a queued or running query's card). Set by the
+     * adapter. `working` keeps meaning only "the turn is in flight"; a pending message shows no working row of
+     * its own. A task-pending message is what a working turn waits on (see `waitingFor`).
+     */
+    taskPending?: boolean;
+    /**
+     * What a still-working turn is waiting on, in words ("Running 2 queries"): set by the engine, never the
+     * adapter, on the working turn whenever messages of the thread are `taskPending`. The working indicator then
+     * shows this in place of "Working" as the turn's one state. Never an id.
+     */
+    waitingFor?: string;
     metadata?: {
         type?: string;
         [k: string]: unknown;
@@ -4200,6 +4223,12 @@ interface ChatEngineOptions {
      * is always authoritative: a terminal status seen at any time wins over this.
      */
     pendingTimeoutMs?: number;
+    /**
+     * Words for the background work a working turn is waiting on: called with the thread's `taskPending` messages
+     * (a running query's card), whenever there is at least one. Default "Waiting on N background
+     * task(s)". Return the app's own phrasing, e.g. "Running 2 queries".
+     */
+    describeWaiting?: (pending: ChatMessage[]) => string;
     store?: {
         get(k: string): string | null;
         set(k: string, v: string): void;
@@ -4358,6 +4387,8 @@ interface AgentChatPanelProps {
     onApplyPacket?: (p: Packet) => void;
     /** Give-up time for a queued/running turn, in ms. Default 180000. The server's terminal job status always wins. */
     pendingTimeoutMs?: number;
+    /** Words for the background work a live turn waits on, given the still-working cards ("Running 2 queries"). */
+    describeWaiting?: (pending: ChatMessage[]) => string;
     onOpenAttachment?: (a: Attachment) => void;
     /** Map a backend error code to human copy. */
     errorCopy?: (code: string) => React.ReactNode;
@@ -4418,7 +4449,7 @@ interface AgentChatPanelProps {
  * renders only when its input is supplied. A panel with no telemetry shows no
  * telemetry, not zeroes.
  */
-declare function AgentChatPanel({ contextType, contextId, apiAdapter, threadId, title, subtitle, showHeader, headerActions, onClose, assistantName, userName, assistantAvatar, userAvatar, assistantIcon, showAvatars, markdown, maxVisibleChars, messageActions, showSteps, showThinking, emptyTitle, emptyDescription, emptyIcon, suggestions, renderEmpty, packetSchemas, packetRenderers, onApplyPacket, pendingTimeoutMs, onOpenAttachment, errorCopy, placeholder, maxLength, hint, fileUploadHandler, acceptFiles, maxFileSize, largePasteThreshold, slashCommands, mentionSources, voiceHandler, initialMessage, contextUsage, sessionStats, usageLimits, models, model, onModelChange, effortLevels, effort, onEffortChange, fastMode, onFastModeChange, moreModels, threads, onSelectThread, onNewThread, onDeleteThread, surface, width, minWidth, maxWidth, resizable, height, className, style, onPacket, onThreadReady, onError, onSend, onClear, onFeedback, onEditMessage, }: AgentChatPanelProps): React.JSX.Element;
+declare function AgentChatPanel({ contextType, contextId, apiAdapter, threadId, title, subtitle, showHeader, headerActions, onClose, assistantName, userName, assistantAvatar, userAvatar, assistantIcon, showAvatars, markdown, maxVisibleChars, messageActions, showSteps, showThinking, emptyTitle, emptyDescription, emptyIcon, suggestions, renderEmpty, packetSchemas, packetRenderers, onApplyPacket, pendingTimeoutMs, describeWaiting, onOpenAttachment, errorCopy, placeholder, maxLength, hint, fileUploadHandler, acceptFiles, maxFileSize, largePasteThreshold, slashCommands, mentionSources, voiceHandler, initialMessage, contextUsage, sessionStats, usageLimits, models, model, onModelChange, effortLevels, effort, onEffortChange, fastMode, onFastModeChange, moreModels, threads, onSelectThread, onNewThread, onDeleteThread, surface, width, minWidth, maxWidth, resizable, height, className, style, onPacket, onThreadReady, onError, onSend, onClear, onFeedback, onEditMessage, }: AgentChatPanelProps): React.JSX.Element;
 
 /**
  * Staged files, the queue strip, the markdown editor, slash/mention triggers, send + stop.

package/dist/index.js

@@ -940,7 +940,7 @@ function Collapsible({
 import * as React6 from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
-function Drawer({ open: open2 = true, title, onClose, footer, children, className = "", ...rest }) {
+function Drawer({ open: open2 = true, title, onClose, footer, bare = false, children, className = "", ...rest }) {
   const asideRef = React6.useRef(null);
   const [closing, setClosing] = React6.useState(false);
   const close2 = React6.useCallback(() => {
@@ -954,12 +954,12 @@ function Drawer({ open: open2 = true, title, onClose, footer, children, classNam
   return createPortal2(
     /* @__PURE__ */ jsxs6(StackedLayerProvider, { layer, children: [
       /* @__PURE__ */ jsx9("div", { className: "fd-scrim" + (closing ? " is-closing" : ""), style: { display: "block", zIndex: zIndex - LAYER_STEP }, onClick: close2 }),
-      /* @__PURE__ */ jsxs6("aside", { ref: asideRef, className: ["fd-drawer", closing ? "is-closing" : "", className].filter(Boolean).join(" "), role: "dialog", "aria-modal": "true", ...rest, style: { zIndex }, children: [
-        /* @__PURE__ */ jsxs6("div", { className: "fd-card-head", style: { flex: "none" }, children: [
+      /* @__PURE__ */ jsxs6("aside", { ref: asideRef, className: ["fd-drawer", bare ? "is-bare" : "", closing ? "is-closing" : "", className].filter(Boolean).join(" "), role: "dialog", "aria-modal": "true", "aria-label": bare && typeof title === "string" ? title : void 0, ...rest, style: { zIndex }, children: [
+        bare ? null : /* @__PURE__ */ jsxs6("div", { className: "fd-card-head", style: { flex: "none" }, children: [
           /* @__PURE__ */ jsx9("span", { className: "fd-card-head-title", title: truncationTitle(title), children: title }),
           onClose ? /* @__PURE__ */ jsx9("button", { type: "button", className: "fd-btn-icon", "aria-label": "Close", onClick: close2, children: /* @__PURE__ */ jsx9("i", { className: "ph ph-x" }) }) : null
         ] }),
-        /* @__PURE__ */ jsx9("div", { style: { flex: "1 1 auto", minHeight: 0, overflow: "auto", padding: 20 }, children }),
+        /* @__PURE__ */ jsx9("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__ */ jsx9("div", { className: "fd-card-foot", style: { flex: "none" }, children: typeof footer === "function" ? footer(close2) : footer }) : null
       ] })
     ] }),
@@ -5897,7 +5897,8 @@ function StepList({
   onToggle,
   showDurations = true,
   dense = false,
-  className = ""
+  className = "",
+  active = false
 }) {
   const [openState, setOpenState] = React39.useState(defaultOpen);
   const open2 = openProp == null ? openState : openProp;
@@ -5907,15 +5908,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__ */ jsxs51("div", { className: ["fd-steps", dense ? "is-dense" : "", open2 ? "is-open" : "", className].filter(Boolean).join(" "), children: [
+  return /* @__PURE__ */ jsxs51("div", { className: ["fd-steps", dense ? "is-dense" : "", active ? "is-active" : "", open2 ? "is-open" : "", className].filter(Boolean).join(" "), children: [
     /* @__PURE__ */ jsxs51("button", { type: "button", className: "fd-steps-head", onClick: toggle, "aria-expanded": open2, children: [
-      running ? /* @__PURE__ */ jsx61("span", { className: "fd-steps-spin", "aria-hidden": "true" }) : /* @__PURE__ */ jsx61("i", { className: "ph ph-" + (failed ? "warning-circle" : "check-circle"), "aria-hidden": "true" }),
+      running ? /* @__PURE__ */ jsx61("span", { className: "fd-steps-spin", "aria-hidden": "true" }) : /* @__PURE__ */ jsx61("i", { className: "ph ph-" + (failed ? "warning-circle" : active ? "list-checks" : "check-circle"), "aria-hidden": "true" }),
       /* @__PURE__ */ jsx61("span", { className: "fd-steps-title", title: truncationTitle(summary), children: summary }),
       /* @__PURE__ */ jsxs51("span", { className: "fd-steps-count fd-tabular", children: [
         steps.length,
@@ -12427,6 +12428,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,
@@ -12436,6 +12451,7 @@ function useChatEngine(opts) {
     threadId: threadIdProp,
     pollIntervalMs = 1500,
     pendingTimeoutMs = 18e4,
+    describeWaiting = defaultDescribeWaiting,
     store = safeStore,
     onPacket,
     onThreadReady,
@@ -12470,9 +12486,12 @@ function useChatEngine(opts) {
       mounted.current = false;
     };
   }, []);
+  const describeWaitingRef = React70.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));
@@ -12949,7 +12968,7 @@ function MessageBody({ message: m, ctx }) {
   const showMd = ctx.markdown && !isUser;
   return /* @__PURE__ */ jsxs88("div", { className: "fdc-body", children: [
     m.thinking && ctx.showThinking ? /* @__PURE__ */ jsx101(ThinkingBlock, { text: m.thinking, durationMs: m.thinkingMs, streaming: m.streaming && !m.text }) : null,
-    m.steps && m.steps.length && ctx.showSteps ? /* @__PURE__ */ jsx101(StepList, { steps: m.steps, defaultOpen: m.steps.some((s) => s.status === "running"), dense: true }) : null,
+    m.steps && m.steps.length && ctx.showSteps ? /* @__PURE__ */ jsx101(StepList, { steps: m.steps, defaultOpen: m.steps.some((s) => s.status === "running"), active: !!m.working, dense: true }) : null,
     body ? /* @__PURE__ */ jsxs88("div", { className: "fdc-text" + (isUser ? " is-user" : ""), children: [
       showMd ? /* @__PURE__ */ jsx101(Markdown, { source: body, headingOffset: 2, codeProps: { collapseAfter: 22 }, renderCitation: ctx.renderCitation }) : /* @__PURE__ */ jsx101("div", { className: "fdc-plain", children: body }),
       m.streaming ? /* @__PURE__ */ jsx101("span", { className: "fdc-caret", "aria-hidden": "true" }) : null
@@ -12981,8 +13000,8 @@ function MessageBody({ message: m, ctx }) {
         /* @__PURE__ */ jsx101("span", {})
       ] }),
       /* @__PURE__ */ jsxs88("span", { className: "fdc-working-label", children: [
-        m.resumed ? "Resuming" : "Working",
-        m.job && m.job.status ? /* @__PURE__ */ jsxs88("span", { className: "fdc-working-job", children: [
+        m.waitingFor || (m.resumed ? "Resuming" : "Working"),
+        !m.waitingFor && m.job && m.job.status ? /* @__PURE__ */ jsxs88("span", { className: "fdc-working-job", children: [
           " \xB7 ",
           m.job.status
         ] }) : null,
@@ -12990,8 +13009,7 @@ function MessageBody({ message: m, ctx }) {
           " \xB7 ",
           m.job.detail
         ] }) : null
-      ] }),
-      m.jobId ? /* @__PURE__ */ jsx101("span", { className: "fdc-working-id fd-mono", children: String(m.jobId).slice(0, 12) }) : null
+      ] })
     ] }) : null,
     m.stopped ? /* @__PURE__ */ jsxs88("div", { className: "fdc-stopped", children: [
       /* @__PURE__ */ jsx101("i", { className: "ph ph-stop-circle", "aria-hidden": "true" }),
@@ -13688,6 +13706,7 @@ function AgentChatPanel({
   packetRenderers,
   onApplyPacket,
   pendingTimeoutMs,
+  describeWaiting,
   onOpenAttachment,
   errorCopy,
   /* composer */
@@ -13750,6 +13769,7 @@ function AgentChatPanel({
     initialMessage,
     threadId,
     pendingTimeoutMs,
+    describeWaiting,
     onPacket,
     onThreadReady,
     onError,