@flanksource/clicky-ui 0.3.45 → 0.3.47

package/dist/data/ai/ChatWindow.placement.cjs

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const utils = require("../../lib/utils.cjs");
+const CHAT_WINDOW_MOBILE_QUERY = "(max-width: 767px)";
+const MAXIMIZE_CSS = `
+.chat-maximized .react-draggable {
+  transform: none !important;
+  width: auto !important;
+  height: auto !important;
+  inset: 0 !important;
+  position: absolute !important;
+}`;
+function ChatWindowSheet({
+  layerStyle,
+  hidden,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { hidden, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-testid": "chat-window-sheet",
+      className: utils.cn(
+        "fixed inset-x-0 top-0 flex h-dvh flex-col overflow-hidden bg-background",
+        "pt-[env(safe-area-inset-top)]",
+        "pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)]"
+      ),
+      style: layerStyle,
+      children
+    }
+  ) });
+}
+function ChatWindowFloating({
+  panel,
+  layerStyle,
+  Rnd,
+  onDragStart,
+  onGeometryChange,
+  children
+}) {
+  const outerClass = utils.cn(
+    "fixed pointer-events-none",
+    panel.maximized ? "inset-4 chat-maximized" : "inset-0"
+  );
+  if (!Rnd) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: outerClass, style: layerStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "pointer-events-auto h-full",
+        style: panel.maximized ? { position: "relative", width: "100%", height: "100%" } : {
+          position: "absolute",
+          left: panel.x,
+          top: panel.y,
+          width: panel.width,
+          height: panel.height
+        },
+        children
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: outerClass, style: layerStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: MAXIMIZE_CSS }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Rnd,
+      {
+        default: {
+          x: panel.x,
+          y: panel.y,
+          width: panel.width,
+          height: panel.height
+        },
+        style: { pointerEvents: "auto" },
+        minWidth: Math.min(360, Math.max(1, window.innerWidth - 32)),
+        minHeight: Math.min(400, Math.max(1, window.innerHeight - 32)),
+        bounds: "parent",
+        dragHandleClassName: "chat-drag-handle",
+        disableDragging: panel.maximized,
+        enableResizing: !panel.maximized,
+        onDragStart,
+        onDragStop: (_e, d) => onGeometryChange({ x: d.x, y: d.y }),
+        onResizeStop: (_e, _dir, ref, _delta, pos) => onGeometryChange({
+          width: ref.offsetWidth,
+          height: ref.offsetHeight,
+          x: pos.x,
+          y: pos.y
+        }),
+        children
+      }
+    )
+  ] });
+}
+exports.CHAT_WINDOW_MOBILE_QUERY = CHAT_WINDOW_MOBILE_QUERY;
+exports.ChatWindowFloating = ChatWindowFloating;
+exports.ChatWindowSheet = ChatWindowSheet;
+//# sourceMappingURL=ChatWindow.placement.cjs.map

package/dist/data/ai/ChatWindow.placement.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatWindow.placement.cjs","sources":["../../../src/data/ai/ChatWindow.placement.tsx"],"sourcesContent":["import type { ComponentType, CSSProperties, ReactNode } from \"react\";\nimport type { Props as RndProps } from \"react-rnd\";\nimport { cn } from \"../../lib/utils\";\nimport type { ChatWindowState } from \"./chat-window-context\";\n\n/** The small-screen query the chat window switches to a full-screen sheet at.\n *  Matches AppShell's md breakpoint (its mobile drawer is md:hidden); export so hosts can align\n *  their own chrome (e.g. hide a bottom bar) with it. */\nexport const CHAT_WINDOW_MOBILE_QUERY = \"(max-width: 767px)\";\n\nconst MAXIMIZE_CSS = `\n.chat-maximized .react-draggable {\n  transform: none !important;\n  width: auto !important;\n  height: auto !important;\n  inset: 0 !important;\n  position: absolute !important;\n}`;\n\n/** The window on a phone: fixed to the dynamic viewport (`h-dvh`, so a URL-bar\n *  or on-screen-keyboard resize never pushes the prompt off-screen), clipped so\n *  the document cannot scroll, padded by the top and side safe areas (the\n *  prompt bar pads its own bottom), never draggable or resizable. `hidden`\n *  keeps a non-front window mounted (its stream and draft survive) without\n *  painting it. */\nexport function ChatWindowSheet({\n  layerStyle,\n  hidden,\n  children,\n}: {\n  /** Stacking style of the window layer, built by the host (ChatWindow). */\n  layerStyle: CSSProperties;\n  hidden: boolean;\n  children: ReactNode;\n}) {\n  return (\n    <div hidden={hidden}>\n      <div\n        data-testid=\"chat-window-sheet\"\n        className={cn(\n          \"fixed inset-x-0 top-0 flex h-dvh flex-col overflow-hidden bg-background\",\n          \"pt-[env(safe-area-inset-top)]\",\n          \"pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)]\",\n        )}\n        style={layerStyle}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\n/** The window on a larger screen: a draggable/resizable react-rnd box. Until\n *  react-rnd loads (and as a graceful fallback if it never does) the window is\n *  statically positioned — still usable, just not draggable. */\nexport function ChatWindowFloating({\n  panel,\n  layerStyle,\n  Rnd,\n  onDragStart,\n  onGeometryChange,\n  children,\n}: {\n  panel: ChatWindowState;\n  /** Stacking style of the window layer, built by the host (ChatWindow). */\n  layerStyle: CSSProperties;\n  Rnd: ComponentType<RndProps> | null;\n  onDragStart: () => void;\n  onGeometryChange: (\n    partial: Pick<Partial<ChatWindowState>, \"x\" | \"y\" | \"width\" | \"height\">,\n  ) => void;\n  children: ReactNode;\n}) {\n  const outerClass = cn(\n    \"fixed pointer-events-none\",\n    panel.maximized ? \"inset-4 chat-maximized\" : \"inset-0\",\n  );\n\n  if (!Rnd) {\n    return (\n      <div className={outerClass} style={layerStyle}>\n        <div\n          className=\"pointer-events-auto h-full\"\n          style={\n            panel.maximized\n              ? { position: \"relative\", width: \"100%\", height: \"100%\" }\n              : {\n                  position: \"absolute\",\n                  left: panel.x,\n                  top: panel.y,\n                  width: panel.width,\n                  height: panel.height,\n                }\n          }\n        >\n          {children}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className={outerClass} style={layerStyle}>\n      <style>{MAXIMIZE_CSS}</style>\n      <Rnd\n        default={{\n          x: panel.x,\n          y: panel.y,\n          width: panel.width,\n          height: panel.height,\n        }}\n        style={{ pointerEvents: \"auto\" }}\n        minWidth={Math.min(360, Math.max(1, window.innerWidth - 32))}\n        minHeight={Math.min(400, Math.max(1, window.innerHeight - 32))}\n        bounds=\"parent\"\n        dragHandleClassName=\"chat-drag-handle\"\n        disableDragging={panel.maximized}\n        enableResizing={!panel.maximized}\n        onDragStart={onDragStart}\n        onDragStop={(_e, d) => onGeometryChange({ x: d.x, y: d.y })}\n        onResizeStop={(_e, _dir, ref, _delta, pos) =>\n          onGeometryChange({\n            width: ref.offsetWidth,\n            height: ref.offsetHeight,\n            x: pos.x,\n            y: pos.y,\n          })\n        }\n      >\n        {children}\n      </Rnd>\n    </div>\n  );\n}\n"],"names":["jsx","cn","jsxs"],"mappings":";;;;AAQO,MAAM,2BAA2B;AAExC,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAed,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,SACEA,2BAAAA,IAAC,SAAI,QACH,UAAAA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,OAAO;AAAA,MAEN;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;AAKO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAUG;AACD,QAAM,aAAaA,MAAAA;AAAAA,IACjB;AAAA,IACA,MAAM,YAAY,2BAA2B;AAAA,EAAA;AAG/C,MAAI,CAAC,KAAK;AACR,WACED,2BAAAA,IAAC,OAAA,EAAI,WAAW,YAAY,OAAO,YACjC,UAAAA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,OACE,MAAM,YACF,EAAE,UAAU,YAAY,OAAO,QAAQ,QAAQ,WAC/C;AAAA,UACE,UAAU;AAAA,UACV,MAAM,MAAM;AAAA,UACZ,KAAK,MAAM;AAAA,UACX,OAAO,MAAM;AAAA,UACb,QAAQ,MAAM;AAAA,QAAA;AAAA,QAIrB;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAEJ;AAEA,SACEE,2BAAAA,KAAC,OAAA,EAAI,WAAW,YAAY,OAAO,YACjC,UAAA;AAAA,IAAAF,2BAAAA,IAAC,WAAO,UAAA,aAAA,CAAa;AAAA,IACrBA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,UACP,GAAG,MAAM;AAAA,UACT,GAAG,MAAM;AAAA,UACT,OAAO,MAAM;AAAA,UACb,QAAQ,MAAM;AAAA,QAAA;AAAA,QAEhB,OAAO,EAAE,eAAe,OAAA;AAAA,QACxB,UAAU,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,OAAO,aAAa,EAAE,CAAC;AAAA,QAC3D,WAAW,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,OAAO,cAAc,EAAE,CAAC;AAAA,QAC7D,QAAO;AAAA,QACP,qBAAoB;AAAA,QACpB,iBAAiB,MAAM;AAAA,QACvB,gBAAgB,CAAC,MAAM;AAAA,QACvB;AAAA,QACA,YAAY,CAAC,IAAI,MAAM,iBAAiB,EAAE,GAAG,EAAE,GAAG,GAAG,EAAE,EAAA,CAAG;AAAA,QAC1D,cAAc,CAAC,IAAI,MAAM,KAAK,QAAQ,QACpC,iBAAiB;AAAA,UACf,OAAO,IAAI;AAAA,UACX,QAAQ,IAAI;AAAA,UACZ,GAAG,IAAI;AAAA,UACP,GAAG,IAAI;AAAA,QAAA,CACR;AAAA,QAGF;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;;;;"}

package/dist/data/ai/ChatWindow.placement.d.ts

@@ -0,0 +1,32 @@
+import { ComponentType, CSSProperties, ReactNode } from 'react';
+import { Props as RndProps } from 'react-rnd';
+import { ChatWindowState } from './chat-window-context.js';
+/** The small-screen query the chat window switches to a full-screen sheet at.
+ *  Matches AppShell's md breakpoint (its mobile drawer is md:hidden); export so hosts can align
+ *  their own chrome (e.g. hide a bottom bar) with it. */
+export declare const CHAT_WINDOW_MOBILE_QUERY = "(max-width: 767px)";
+/** The window on a phone: fixed to the dynamic viewport (`h-dvh`, so a URL-bar
+ *  or on-screen-keyboard resize never pushes the prompt off-screen), clipped so
+ *  the document cannot scroll, padded by the top and side safe areas (the
+ *  prompt bar pads its own bottom), never draggable or resizable. `hidden`
+ *  keeps a non-front window mounted (its stream and draft survive) without
+ *  painting it. */
+export declare function ChatWindowSheet({ layerStyle, hidden, children, }: {
+    /** Stacking style of the window layer, built by the host (ChatWindow). */
+    layerStyle: CSSProperties;
+    hidden: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** The window on a larger screen: a draggable/resizable react-rnd box. Until
+ *  react-rnd loads (and as a graceful fallback if it never does) the window is
+ *  statically positioned — still usable, just not draggable. */
+export declare function ChatWindowFloating({ panel, layerStyle, Rnd, onDragStart, onGeometryChange, children, }: {
+    panel: ChatWindowState;
+    /** Stacking style of the window layer, built by the host (ChatWindow). */
+    layerStyle: CSSProperties;
+    Rnd: ComponentType<RndProps> | null;
+    onDragStart: () => void;
+    onGeometryChange: (partial: Pick<Partial<ChatWindowState>, "x" | "y" | "width" | "height">) => void;
+    children: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=ChatWindow.placement.d.ts.map

package/dist/data/ai/ChatWindow.placement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatWindow.placement.d.ts","sourceRoot":"","sources":["../../../src/data/ai/ChatWindow.placement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,KAAK,EAAE,KAAK,IAAI,QAAQ,EAAE,MAAM,WAAW,CAAC;AAEnD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE7D;;yDAEyD;AACzD,eAAO,MAAM,wBAAwB,uBAAuB,CAAC;AAW7D;;;;;mBAKmB;AACnB,wBAAgB,eAAe,CAAC,EAC9B,UAAU,EACV,MAAM,EACN,QAAQ,GACT,EAAE;IACD,0EAA0E;IAC1E,UAAU,EAAE,aAAa,CAAC;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAgBA;AAED;;gEAEgE;AAChE,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,UAAU,EACV,GAAG,EACH,WAAW,EACX,gBAAgB,EAChB,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,eAAe,CAAC;IACvB,0EAA0E;IAC1E,UAAU,EAAE,aAAa,CAAC;IAC1B,GAAG,EAAE,aAAa,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC;IACpC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,gBAAgB,EAAE,CAChB,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,OAAO,GAAG,QAAQ,CAAC,KACpE,IAAI,CAAC;IACV,QAAQ,EAAE,SAAS,CAAC;CACrB,+BA6DA"}

package/dist/data/ai/ChatWindow.placement.js

@@ -0,0 +1,95 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+const CHAT_WINDOW_MOBILE_QUERY = "(max-width: 767px)";
+const MAXIMIZE_CSS = `
+.chat-maximized .react-draggable {
+  transform: none !important;
+  width: auto !important;
+  height: auto !important;
+  inset: 0 !important;
+  position: absolute !important;
+}`;
+function ChatWindowSheet({
+  layerStyle,
+  hidden,
+  children
+}) {
+  return /* @__PURE__ */ jsx("div", { hidden, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-testid": "chat-window-sheet",
+      className: cn(
+        "fixed inset-x-0 top-0 flex h-dvh flex-col overflow-hidden bg-background",
+        "pt-[env(safe-area-inset-top)]",
+        "pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)]"
+      ),
+      style: layerStyle,
+      children
+    }
+  ) });
+}
+function ChatWindowFloating({
+  panel,
+  layerStyle,
+  Rnd,
+  onDragStart,
+  onGeometryChange,
+  children
+}) {
+  const outerClass = cn(
+    "fixed pointer-events-none",
+    panel.maximized ? "inset-4 chat-maximized" : "inset-0"
+  );
+  if (!Rnd) {
+    return /* @__PURE__ */ jsx("div", { className: outerClass, style: layerStyle, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "pointer-events-auto h-full",
+        style: panel.maximized ? { position: "relative", width: "100%", height: "100%" } : {
+          position: "absolute",
+          left: panel.x,
+          top: panel.y,
+          width: panel.width,
+          height: panel.height
+        },
+        children
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: outerClass, style: layerStyle, children: [
+    /* @__PURE__ */ jsx("style", { children: MAXIMIZE_CSS }),
+    /* @__PURE__ */ jsx(
+      Rnd,
+      {
+        default: {
+          x: panel.x,
+          y: panel.y,
+          width: panel.width,
+          height: panel.height
+        },
+        style: { pointerEvents: "auto" },
+        minWidth: Math.min(360, Math.max(1, window.innerWidth - 32)),
+        minHeight: Math.min(400, Math.max(1, window.innerHeight - 32)),
+        bounds: "parent",
+        dragHandleClassName: "chat-drag-handle",
+        disableDragging: panel.maximized,
+        enableResizing: !panel.maximized,
+        onDragStart,
+        onDragStop: (_e, d) => onGeometryChange({ x: d.x, y: d.y }),
+        onResizeStop: (_e, _dir, ref, _delta, pos) => onGeometryChange({
+          width: ref.offsetWidth,
+          height: ref.offsetHeight,
+          x: pos.x,
+          y: pos.y
+        }),
+        children
+      }
+    )
+  ] });
+}
+export {
+  CHAT_WINDOW_MOBILE_QUERY,
+  ChatWindowFloating,
+  ChatWindowSheet
+};
+//# sourceMappingURL=ChatWindow.placement.js.map

package/dist/data/ai/ChatWindow.placement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatWindow.placement.js","sources":["../../../src/data/ai/ChatWindow.placement.tsx"],"sourcesContent":["import type { ComponentType, CSSProperties, ReactNode } from \"react\";\nimport type { Props as RndProps } from \"react-rnd\";\nimport { cn } from \"../../lib/utils\";\nimport type { ChatWindowState } from \"./chat-window-context\";\n\n/** The small-screen query the chat window switches to a full-screen sheet at.\n *  Matches AppShell's md breakpoint (its mobile drawer is md:hidden); export so hosts can align\n *  their own chrome (e.g. hide a bottom bar) with it. */\nexport const CHAT_WINDOW_MOBILE_QUERY = \"(max-width: 767px)\";\n\nconst MAXIMIZE_CSS = `\n.chat-maximized .react-draggable {\n  transform: none !important;\n  width: auto !important;\n  height: auto !important;\n  inset: 0 !important;\n  position: absolute !important;\n}`;\n\n/** The window on a phone: fixed to the dynamic viewport (`h-dvh`, so a URL-bar\n *  or on-screen-keyboard resize never pushes the prompt off-screen), clipped so\n *  the document cannot scroll, padded by the top and side safe areas (the\n *  prompt bar pads its own bottom), never draggable or resizable. `hidden`\n *  keeps a non-front window mounted (its stream and draft survive) without\n *  painting it. */\nexport function ChatWindowSheet({\n  layerStyle,\n  hidden,\n  children,\n}: {\n  /** Stacking style of the window layer, built by the host (ChatWindow). */\n  layerStyle: CSSProperties;\n  hidden: boolean;\n  children: ReactNode;\n}) {\n  return (\n    <div hidden={hidden}>\n      <div\n        data-testid=\"chat-window-sheet\"\n        className={cn(\n          \"fixed inset-x-0 top-0 flex h-dvh flex-col overflow-hidden bg-background\",\n          \"pt-[env(safe-area-inset-top)]\",\n          \"pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)]\",\n        )}\n        style={layerStyle}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\n/** The window on a larger screen: a draggable/resizable react-rnd box. Until\n *  react-rnd loads (and as a graceful fallback if it never does) the window is\n *  statically positioned — still usable, just not draggable. */\nexport function ChatWindowFloating({\n  panel,\n  layerStyle,\n  Rnd,\n  onDragStart,\n  onGeometryChange,\n  children,\n}: {\n  panel: ChatWindowState;\n  /** Stacking style of the window layer, built by the host (ChatWindow). */\n  layerStyle: CSSProperties;\n  Rnd: ComponentType<RndProps> | null;\n  onDragStart: () => void;\n  onGeometryChange: (\n    partial: Pick<Partial<ChatWindowState>, \"x\" | \"y\" | \"width\" | \"height\">,\n  ) => void;\n  children: ReactNode;\n}) {\n  const outerClass = cn(\n    \"fixed pointer-events-none\",\n    panel.maximized ? \"inset-4 chat-maximized\" : \"inset-0\",\n  );\n\n  if (!Rnd) {\n    return (\n      <div className={outerClass} style={layerStyle}>\n        <div\n          className=\"pointer-events-auto h-full\"\n          style={\n            panel.maximized\n              ? { position: \"relative\", width: \"100%\", height: \"100%\" }\n              : {\n                  position: \"absolute\",\n                  left: panel.x,\n                  top: panel.y,\n                  width: panel.width,\n                  height: panel.height,\n                }\n          }\n        >\n          {children}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className={outerClass} style={layerStyle}>\n      <style>{MAXIMIZE_CSS}</style>\n      <Rnd\n        default={{\n          x: panel.x,\n          y: panel.y,\n          width: panel.width,\n          height: panel.height,\n        }}\n        style={{ pointerEvents: \"auto\" }}\n        minWidth={Math.min(360, Math.max(1, window.innerWidth - 32))}\n        minHeight={Math.min(400, Math.max(1, window.innerHeight - 32))}\n        bounds=\"parent\"\n        dragHandleClassName=\"chat-drag-handle\"\n        disableDragging={panel.maximized}\n        enableResizing={!panel.maximized}\n        onDragStart={onDragStart}\n        onDragStop={(_e, d) => onGeometryChange({ x: d.x, y: d.y })}\n        onResizeStop={(_e, _dir, ref, _delta, pos) =>\n          onGeometryChange({\n            width: ref.offsetWidth,\n            height: ref.offsetHeight,\n            x: pos.x,\n            y: pos.y,\n          })\n        }\n      >\n        {children}\n      </Rnd>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAQO,MAAM,2BAA2B;AAExC,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAed,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,SACE,oBAAC,SAAI,QACH,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,OAAO;AAAA,MAEN;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;AAKO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAUG;AACD,QAAM,aAAa;AAAA,IACjB;AAAA,IACA,MAAM,YAAY,2BAA2B;AAAA,EAAA;AAG/C,MAAI,CAAC,KAAK;AACR,WACE,oBAAC,OAAA,EAAI,WAAW,YAAY,OAAO,YACjC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,OACE,MAAM,YACF,EAAE,UAAU,YAAY,OAAO,QAAQ,QAAQ,WAC/C;AAAA,UACE,UAAU;AAAA,UACV,MAAM,MAAM;AAAA,UACZ,KAAK,MAAM;AAAA,UACX,OAAO,MAAM;AAAA,UACb,QAAQ,MAAM;AAAA,QAAA;AAAA,QAIrB;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAEJ;AAEA,SACE,qBAAC,OAAA,EAAI,WAAW,YAAY,OAAO,YACjC,UAAA;AAAA,IAAA,oBAAC,WAAO,UAAA,aAAA,CAAa;AAAA,IACrB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,UACP,GAAG,MAAM;AAAA,UACT,GAAG,MAAM;AAAA,UACT,OAAO,MAAM;AAAA,UACb,QAAQ,MAAM;AAAA,QAAA;AAAA,QAEhB,OAAO,EAAE,eAAe,OAAA;AAAA,QACxB,UAAU,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,OAAO,aAAa,EAAE,CAAC;AAAA,QAC3D,WAAW,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,OAAO,cAAc,EAAE,CAAC;AAAA,QAC7D,QAAO;AAAA,QACP,qBAAoB;AAAA,QACpB,iBAAiB,MAAM;AAAA,QACvB,gBAAgB,CAAC,MAAM;AAAA,QACvB;AAAA,QACA,YAAY,CAAC,IAAI,MAAM,iBAAiB,EAAE,GAAG,EAAE,GAAG,GAAG,EAAE,EAAA,CAAG;AAAA,QAC1D,cAAc,CAAC,IAAI,MAAM,KAAK,QAAQ,QACpC,iBAAiB;AAAA,UACf,OAAO,IAAI;AAAA,UACX,QAAQ,IAAI;AAAA,UACZ,GAAG,IAAI;AAAA,UACP,GAAG,IAAI;AAAA,QAAA,CACR;AAAA,QAGF;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}

package/dist/data/ai/SessionChatComposer.cjs

@@ -12,6 +12,7 @@ function SessionChatComposer({
   capabilities,
   queued = [],
   error,
+  disabledReason,
   onSubmit,
   onInterrupt,
   toolbar,
@@ -24,7 +25,7 @@ function SessionChatComposer({
 }) {
   const active = status === "running" || status === "interrupting";
   const canSubmitWhileActive = capabilities.steer || capabilities.followUp;
-  const disabled = status === "starting" || status === "interrupting" || status === "stopping" || status === "running" && !canSubmitWhileActive;
+  const disabled = disabledReason !== void 0 || status === "starting" || status === "interrupting" || status === "stopping" || status === "running" && !canSubmitWhileActive;
   const pickerReadOnly = !onPermissionModeChange || status === "starting" || status === "interrupting" || status === "stopping";
   const picker = permissionMode && permissionModes && permissionModes.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
     PermissionModePicker,
@@ -65,6 +66,7 @@ function SessionChatComposer({
       {
         status: active ? "streaming" : "ready",
         disabled,
+        ...disabledReason !== void 0 ? { disabledReason } : {},
         allowSubmitWhileStreaming: canSubmitWhileActive,
         stopLabel: "Interrupt",
         placeholder: status === "idle" ? "Continue this session…" : "Add a follow-up…",

package/dist/data/ai/SessionChatComposer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SessionChatComposer.cjs","sources":["../../../src/data/ai/SessionChatComposer.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Select } from \"../../components\";\nimport { PromptInput } from \"../chat/PromptInput\";\nimport { CLAUDE_PERMISSION_MODE_OPTIONS } from \"../chat/types\";\nimport { Icon } from \"../Icon\";\nimport { sessionTone } from \"./session-tones\";\nimport { permissionModeVisual } from \"./SpecRuntimeEditor/permission-mode-visuals\";\nimport type { SpecPermissionMode } from \"./SpecRuntimeEditor.model\";\n\nexport type SessionChatCapabilities = {\n  interrupt: boolean;\n  steer: boolean;\n  followUp: boolean;\n  resume: boolean;\n  /** True when the live run's runtime can switch permission posture mid-session. */\n  setPermissionMode?: boolean;\n};\n\nexport type SessionChatQueuedMessage = {\n  messageId: string;\n  text: string;\n};\n\nexport type SessionChatComposerProps = {\n  status: \"starting\" | \"running\" | \"interrupting\" | \"idle\" | \"stopping\";\n  capabilities: SessionChatCapabilities;\n  queued?: SessionChatQueuedMessage[];\n  error?: string;\n  onSubmit: (text: string) => void;\n  onInterrupt?: () => void;\n  toolbar?: ReactNode;\n  inputAccessory?: ReactNode;\n  className?: string;\n  /** Current permission posture, when the host tracks one for this session. */\n  permissionMode?: SpecPermissionMode;\n  /** Modes the run's runtime honours, canonical order. */\n  permissionModes?: SpecPermissionMode[];\n  /** Agent family (\"claude\", \"codex\", \"gemini\") whose vocabulary labels the modes. */\n  permissionFamily?: string;\n  /** Omit to render the picker read-only. */\n  onPermissionModeChange?: (mode: SpecPermissionMode) => void;\n};\n\nexport function SessionChatComposer({\n  status,\n  capabilities,\n  queued = [],\n  error,\n  onSubmit,\n  onInterrupt,\n  toolbar,\n  inputAccessory,\n  className,\n  permissionMode,\n  permissionModes,\n  permissionFamily,\n  onPermissionModeChange,\n}: SessionChatComposerProps) {\n  const active = status === \"running\" || status === \"interrupting\";\n  const canSubmitWhileActive = capabilities.steer || capabilities.followUp;\n  const disabled =\n    status === \"starting\" ||\n    status === \"interrupting\" ||\n    status === \"stopping\" ||\n    (status === \"running\" && !canSubmitWhileActive);\n  const pickerReadOnly =\n    !onPermissionModeChange ||\n    status === \"starting\" ||\n    status === \"interrupting\" ||\n    status === \"stopping\";\n  const picker =\n    permissionMode && permissionModes && permissionModes.length > 0 ? (\n      <PermissionModePicker\n        mode={permissionMode}\n        modes={permissionModes}\n        family={permissionFamily}\n        readOnly={pickerReadOnly}\n        {...(onPermissionModeChange ? { onChange: onPermissionModeChange } : {})}\n      />\n    ) : null;\n  const composedToolbar =\n    picker || toolbar ? (\n      <>\n        {picker}\n        {toolbar}\n      </>\n    ) : undefined;\n\n  return (\n    <div className={className}>\n      {queued.length > 0 && (\n        <div\n          className=\"mb-density-2 flex flex-wrap gap-density-1\"\n          aria-label=\"Queued messages\"\n        >\n          {queued.map((message) => (\n            <span\n              key={message.messageId}\n              className=\"max-w-full truncate rounded-full border border-border bg-muted px-density-2 py-1 text-xs text-muted-foreground\"\n            >\n              Queued: {message.text}\n            </span>\n          ))}\n        </div>\n      )}\n      {error && (\n        <div className=\"mb-density-2 text-xs text-destructive\">{error}</div>\n      )}\n      <PromptInput\n        status={active ? \"streaming\" : \"ready\"}\n        disabled={disabled}\n        allowSubmitWhileStreaming={canSubmitWhileActive}\n        stopLabel=\"Interrupt\"\n        placeholder={\n          status === \"idle\" ? \"Continue this session…\" : \"Add a follow-up…\"\n        }\n        onSubmit={(text) => onSubmit(text)}\n        {...(inputAccessory ? { inputAccessory } : {})}\n        {...(composedToolbar ? { toolbar: composedToolbar } : {})}\n        {...(capabilities.interrupt && status === \"running\" && onInterrupt\n          ? { onStop: onInterrupt }\n          : {})}\n      />\n    </div>\n  );\n}\n\nfunction PermissionModePicker({\n  mode,\n  modes,\n  family,\n  readOnly,\n  onChange,\n}: {\n  mode: SpecPermissionMode;\n  modes: SpecPermissionMode[];\n  family: string | undefined;\n  readOnly: boolean;\n  onChange?: (mode: SpecPermissionMode) => void;\n}) {\n  const visual = permissionModeVisual(family, mode);\n  const tone = sessionTone(visual.tone);\n  return (\n    <div className=\"inline-flex items-center gap-1.5\">\n      <Icon\n        icon={visual.icon}\n        title={visual.label}\n        className={`size-3.5 ${tone.text}`}\n      />\n      <Select\n        aria-label=\"Permission mode\"\n        value={mode}\n        disabled={readOnly}\n        onChange={(event) =>\n          onChange?.(event.target.value as SpecPermissionMode)\n        }\n        className=\"h-7 w-auto min-w-24 py-0 text-xs\"\n      >\n        {modes.map((candidate) => (\n          <option\n            key={candidate}\n            value={candidate}\n            title={descriptionFor(family, candidate)}\n          >\n            {permissionModeVisual(family, candidate).label}\n          </option>\n        ))}\n      </Select>\n    </div>\n  );\n}\n\n// The option descriptions document Claude's postures, so other families get none.\nfunction descriptionFor(\n  family: string | undefined,\n  mode: SpecPermissionMode,\n): string | undefined {\n  if (family && family !== \"claude\") return undefined;\n  return CLAUDE_PERMISSION_MODE_OPTIONS.find(\n    (option) => option.value === mode,\n  )?.description;\n}\n"],"names":["jsx","jsxs","Fragment","PromptInput","permissionModeVisual","sessionTone","Icon","Select","CLAUDE_PERMISSION_MODE_OPTIONS"],"mappings":"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"}
+{"version":3,"file":"SessionChatComposer.cjs","sources":["../../../src/data/ai/SessionChatComposer.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Select } from \"../../components\";\nimport { PromptInput } from \"../chat/PromptInput\";\nimport { CLAUDE_PERMISSION_MODE_OPTIONS } from \"../chat/types\";\nimport { Icon } from \"../Icon\";\nimport { sessionTone } from \"./session-tones\";\nimport { permissionModeVisual } from \"./SpecRuntimeEditor/permission-mode-visuals\";\nimport type { SpecPermissionMode } from \"./SpecRuntimeEditor.model\";\n\nexport type SessionChatCapabilities = {\n  interrupt: boolean;\n  steer: boolean;\n  followUp: boolean;\n  resume: boolean;\n  /** True when the live run's runtime can switch permission posture mid-session. */\n  setPermissionMode?: boolean;\n};\n\nexport type SessionChatQueuedMessage = {\n  messageId: string;\n  text: string;\n};\n\nexport type SessionChatComposerProps = {\n  status: \"starting\" | \"running\" | \"interrupting\" | \"idle\" | \"stopping\";\n  capabilities: SessionChatCapabilities;\n  queued?: SessionChatQueuedMessage[];\n  error?: string;\n  /** Disables the input and shows this reason in it (e.g. while the session\n   *  it continues is still loading, or could not be read). */\n  disabledReason?: string;\n  onSubmit: (text: string) => void;\n  onInterrupt?: () => void;\n  toolbar?: ReactNode;\n  inputAccessory?: ReactNode;\n  className?: string;\n  /** Current permission posture, when the host tracks one for this session. */\n  permissionMode?: SpecPermissionMode;\n  /** Modes the run's runtime honours, canonical order. */\n  permissionModes?: SpecPermissionMode[];\n  /** Agent family (\"claude\", \"codex\", \"gemini\") whose vocabulary labels the modes. */\n  permissionFamily?: string;\n  /** Omit to render the picker read-only. */\n  onPermissionModeChange?: (mode: SpecPermissionMode) => void;\n};\n\nexport function SessionChatComposer({\n  status,\n  capabilities,\n  queued = [],\n  error,\n  disabledReason,\n  onSubmit,\n  onInterrupt,\n  toolbar,\n  inputAccessory,\n  className,\n  permissionMode,\n  permissionModes,\n  permissionFamily,\n  onPermissionModeChange,\n}: SessionChatComposerProps) {\n  const active = status === \"running\" || status === \"interrupting\";\n  const canSubmitWhileActive = capabilities.steer || capabilities.followUp;\n  const disabled =\n    disabledReason !== undefined ||\n    status === \"starting\" ||\n    status === \"interrupting\" ||\n    status === \"stopping\" ||\n    (status === \"running\" && !canSubmitWhileActive);\n  const pickerReadOnly =\n    !onPermissionModeChange ||\n    status === \"starting\" ||\n    status === \"interrupting\" ||\n    status === \"stopping\";\n  const picker =\n    permissionMode && permissionModes && permissionModes.length > 0 ? (\n      <PermissionModePicker\n        mode={permissionMode}\n        modes={permissionModes}\n        family={permissionFamily}\n        readOnly={pickerReadOnly}\n        {...(onPermissionModeChange ? { onChange: onPermissionModeChange } : {})}\n      />\n    ) : null;\n  const composedToolbar =\n    picker || toolbar ? (\n      <>\n        {picker}\n        {toolbar}\n      </>\n    ) : undefined;\n\n  return (\n    <div className={className}>\n      {queued.length > 0 && (\n        <div\n          className=\"mb-density-2 flex flex-wrap gap-density-1\"\n          aria-label=\"Queued messages\"\n        >\n          {queued.map((message) => (\n            <span\n              key={message.messageId}\n              className=\"max-w-full truncate rounded-full border border-border bg-muted px-density-2 py-1 text-xs text-muted-foreground\"\n            >\n              Queued: {message.text}\n            </span>\n          ))}\n        </div>\n      )}\n      {error && (\n        <div className=\"mb-density-2 text-xs text-destructive\">{error}</div>\n      )}\n      <PromptInput\n        status={active ? \"streaming\" : \"ready\"}\n        disabled={disabled}\n        {...(disabledReason !== undefined ? { disabledReason } : {})}\n        allowSubmitWhileStreaming={canSubmitWhileActive}\n        stopLabel=\"Interrupt\"\n        placeholder={\n          status === \"idle\" ? \"Continue this session…\" : \"Add a follow-up…\"\n        }\n        onSubmit={(text) => onSubmit(text)}\n        {...(inputAccessory ? { inputAccessory } : {})}\n        {...(composedToolbar ? { toolbar: composedToolbar } : {})}\n        {...(capabilities.interrupt && status === \"running\" && onInterrupt\n          ? { onStop: onInterrupt }\n          : {})}\n      />\n    </div>\n  );\n}\n\nfunction PermissionModePicker({\n  mode,\n  modes,\n  family,\n  readOnly,\n  onChange,\n}: {\n  mode: SpecPermissionMode;\n  modes: SpecPermissionMode[];\n  family: string | undefined;\n  readOnly: boolean;\n  onChange?: (mode: SpecPermissionMode) => void;\n}) {\n  const visual = permissionModeVisual(family, mode);\n  const tone = sessionTone(visual.tone);\n  return (\n    <div className=\"inline-flex items-center gap-1.5\">\n      <Icon\n        icon={visual.icon}\n        title={visual.label}\n        className={`size-3.5 ${tone.text}`}\n      />\n      <Select\n        aria-label=\"Permission mode\"\n        value={mode}\n        disabled={readOnly}\n        onChange={(event) =>\n          onChange?.(event.target.value as SpecPermissionMode)\n        }\n        className=\"h-7 w-auto min-w-24 py-0 text-xs\"\n      >\n        {modes.map((candidate) => (\n          <option\n            key={candidate}\n            value={candidate}\n            title={descriptionFor(family, candidate)}\n          >\n            {permissionModeVisual(family, candidate).label}\n          </option>\n        ))}\n      </Select>\n    </div>\n  );\n}\n\n// The option descriptions document Claude's postures, so other families get none.\nfunction descriptionFor(\n  family: string | undefined,\n  mode: SpecPermissionMode,\n): string | undefined {\n  if (family && family !== \"claude\") return undefined;\n  return CLAUDE_PERMISSION_MODE_OPTIONS.find(\n    (option) => option.value === mode,\n  )?.description;\n}\n"],"names":["jsx","jsxs","Fragment","PromptInput","permissionModeVisual","sessionTone","Icon","Select","CLAUDE_PERMISSION_MODE_OPTIONS"],"mappings":"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"}

package/dist/data/ai/SessionChatComposer.d.ts

@@ -17,6 +17,9 @@ export type SessionChatComposerProps = {
     capabilities: SessionChatCapabilities;
     queued?: SessionChatQueuedMessage[];
     error?: string;
+    /** Disables the input and shows this reason in it (e.g. while the session
+     *  it continues is still loading, or could not be read). */
+    disabledReason?: string;
     onSubmit: (text: string) => void;
     onInterrupt?: () => void;
     toolbar?: ReactNode;
@@ -31,5 +34,5 @@ export type SessionChatComposerProps = {
     /** Omit to render the picker read-only. */
     onPermissionModeChange?: (mode: SpecPermissionMode) => void;
 };
-export declare function SessionChatComposer({ status, capabilities, queued, error, onSubmit, onInterrupt, toolbar, inputAccessory, className, permissionMode, permissionModes, permissionFamily, onPermissionModeChange, }: SessionChatComposerProps): import("react").JSX.Element;
+export declare function SessionChatComposer({ status, capabilities, queued, error, disabledReason, onSubmit, onInterrupt, toolbar, inputAccessory, className, permissionMode, permissionModes, permissionFamily, onPermissionModeChange, }: SessionChatComposerProps): import("react").JSX.Element;
 //# sourceMappingURL=SessionChatComposer.d.ts.map

package/dist/data/ai/SessionChatComposer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SessionChatComposer.d.ts","sourceRoot":"","sources":["../../../src/data/ai/SessionChatComposer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAEpE,MAAM,MAAM,uBAAuB,GAAG;IACpC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,kFAAkF;IAClF,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,MAAM,EAAE,UAAU,GAAG,SAAS,GAAG,cAAc,GAAG,MAAM,GAAG,UAAU,CAAC;IACtE,YAAY,EAAE,uBAAuB,CAAC;IACtC,MAAM,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6EAA6E;IAC7E,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,wDAAwD;IACxD,eAAe,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACvC,oFAAoF;IACpF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2CAA2C;IAC3C,sBAAsB,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAC7D,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,YAAY,EACZ,MAAW,EACX,KAAK,EACL,QAAQ,EACR,WAAW,EACX,OAAO,EACP,cAAc,EACd,SAAS,EACT,cAAc,EACd,eAAe,EACf,gBAAgB,EAChB,sBAAsB,GACvB,EAAE,wBAAwB,+BAoE1B"}
+{"version":3,"file":"SessionChatComposer.d.ts","sourceRoot":"","sources":["../../../src/data/ai/SessionChatComposer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAEpE,MAAM,MAAM,uBAAuB,GAAG;IACpC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,kFAAkF;IAClF,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,MAAM,EAAE,UAAU,GAAG,SAAS,GAAG,cAAc,GAAG,MAAM,GAAG,UAAU,CAAC;IACtE,YAAY,EAAE,uBAAuB,CAAC;IACtC,MAAM,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;gEAC4D;IAC5D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6EAA6E;IAC7E,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,wDAAwD;IACxD,eAAe,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACvC,oFAAoF;IACpF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2CAA2C;IAC3C,sBAAsB,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAC7D,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,YAAY,EACZ,MAAW,EACX,KAAK,EACL,cAAc,EACd,QAAQ,EACR,WAAW,EACX,OAAO,EACP,cAAc,EACd,SAAS,EACT,cAAc,EACd,eAAe,EACf,gBAAgB,EAChB,sBAAsB,GACvB,EAAE,wBAAwB,+BAsE1B"}

package/dist/data/ai/SessionChatComposer.js

@@ -10,6 +10,7 @@ function SessionChatComposer({
   capabilities,
   queued = [],
   error,
+  disabledReason,
   onSubmit,
   onInterrupt,
   toolbar,
@@ -22,7 +23,7 @@ function SessionChatComposer({
 }) {
   const active = status === "running" || status === "interrupting";
   const canSubmitWhileActive = capabilities.steer || capabilities.followUp;
-  const disabled = status === "starting" || status === "interrupting" || status === "stopping" || status === "running" && !canSubmitWhileActive;
+  const disabled = disabledReason !== void 0 || status === "starting" || status === "interrupting" || status === "stopping" || status === "running" && !canSubmitWhileActive;
   const pickerReadOnly = !onPermissionModeChange || status === "starting" || status === "interrupting" || status === "stopping";
   const picker = permissionMode && permissionModes && permissionModes.length > 0 ? /* @__PURE__ */ jsx(
     PermissionModePicker,
@@ -63,6 +64,7 @@ function SessionChatComposer({
       {
         status: active ? "streaming" : "ready",
         disabled,
+        ...disabledReason !== void 0 ? { disabledReason } : {},
         allowSubmitWhileStreaming: canSubmitWhileActive,
         stopLabel: "Interrupt",
         placeholder: status === "idle" ? "Continue this session…" : "Add a follow-up…",

package/dist/data/ai/SessionChatComposer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SessionChatComposer.js","sources":["../../../src/data/ai/SessionChatComposer.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Select } from \"../../components\";\nimport { PromptInput } from \"../chat/PromptInput\";\nimport { CLAUDE_PERMISSION_MODE_OPTIONS } from \"../chat/types\";\nimport { Icon } from \"../Icon\";\nimport { sessionTone } from \"./session-tones\";\nimport { permissionModeVisual } from \"./SpecRuntimeEditor/permission-mode-visuals\";\nimport type { SpecPermissionMode } from \"./SpecRuntimeEditor.model\";\n\nexport type SessionChatCapabilities = {\n  interrupt: boolean;\n  steer: boolean;\n  followUp: boolean;\n  resume: boolean;\n  /** True when the live run's runtime can switch permission posture mid-session. */\n  setPermissionMode?: boolean;\n};\n\nexport type SessionChatQueuedMessage = {\n  messageId: string;\n  text: string;\n};\n\nexport type SessionChatComposerProps = {\n  status: \"starting\" | \"running\" | \"interrupting\" | \"idle\" | \"stopping\";\n  capabilities: SessionChatCapabilities;\n  queued?: SessionChatQueuedMessage[];\n  error?: string;\n  onSubmit: (text: string) => void;\n  onInterrupt?: () => void;\n  toolbar?: ReactNode;\n  inputAccessory?: ReactNode;\n  className?: string;\n  /** Current permission posture, when the host tracks one for this session. */\n  permissionMode?: SpecPermissionMode;\n  /** Modes the run's runtime honours, canonical order. */\n  permissionModes?: SpecPermissionMode[];\n  /** Agent family (\"claude\", \"codex\", \"gemini\") whose vocabulary labels the modes. */\n  permissionFamily?: string;\n  /** Omit to render the picker read-only. */\n  onPermissionModeChange?: (mode: SpecPermissionMode) => void;\n};\n\nexport function SessionChatComposer({\n  status,\n  capabilities,\n  queued = [],\n  error,\n  onSubmit,\n  onInterrupt,\n  toolbar,\n  inputAccessory,\n  className,\n  permissionMode,\n  permissionModes,\n  permissionFamily,\n  onPermissionModeChange,\n}: SessionChatComposerProps) {\n  const active = status === \"running\" || status === \"interrupting\";\n  const canSubmitWhileActive = capabilities.steer || capabilities.followUp;\n  const disabled =\n    status === \"starting\" ||\n    status === \"interrupting\" ||\n    status === \"stopping\" ||\n    (status === \"running\" && !canSubmitWhileActive);\n  const pickerReadOnly =\n    !onPermissionModeChange ||\n    status === \"starting\" ||\n    status === \"interrupting\" ||\n    status === \"stopping\";\n  const picker =\n    permissionMode && permissionModes && permissionModes.length > 0 ? (\n      <PermissionModePicker\n        mode={permissionMode}\n        modes={permissionModes}\n        family={permissionFamily}\n        readOnly={pickerReadOnly}\n        {...(onPermissionModeChange ? { onChange: onPermissionModeChange } : {})}\n      />\n    ) : null;\n  const composedToolbar =\n    picker || toolbar ? (\n      <>\n        {picker}\n        {toolbar}\n      </>\n    ) : undefined;\n\n  return (\n    <div className={className}>\n      {queued.length > 0 && (\n        <div\n          className=\"mb-density-2 flex flex-wrap gap-density-1\"\n          aria-label=\"Queued messages\"\n        >\n          {queued.map((message) => (\n            <span\n              key={message.messageId}\n              className=\"max-w-full truncate rounded-full border border-border bg-muted px-density-2 py-1 text-xs text-muted-foreground\"\n            >\n              Queued: {message.text}\n            </span>\n          ))}\n        </div>\n      )}\n      {error && (\n        <div className=\"mb-density-2 text-xs text-destructive\">{error}</div>\n      )}\n      <PromptInput\n        status={active ? \"streaming\" : \"ready\"}\n        disabled={disabled}\n        allowSubmitWhileStreaming={canSubmitWhileActive}\n        stopLabel=\"Interrupt\"\n        placeholder={\n          status === \"idle\" ? \"Continue this session…\" : \"Add a follow-up…\"\n        }\n        onSubmit={(text) => onSubmit(text)}\n        {...(inputAccessory ? { inputAccessory } : {})}\n        {...(composedToolbar ? { toolbar: composedToolbar } : {})}\n        {...(capabilities.interrupt && status === \"running\" && onInterrupt\n          ? { onStop: onInterrupt }\n          : {})}\n      />\n    </div>\n  );\n}\n\nfunction PermissionModePicker({\n  mode,\n  modes,\n  family,\n  readOnly,\n  onChange,\n}: {\n  mode: SpecPermissionMode;\n  modes: SpecPermissionMode[];\n  family: string | undefined;\n  readOnly: boolean;\n  onChange?: (mode: SpecPermissionMode) => void;\n}) {\n  const visual = permissionModeVisual(family, mode);\n  const tone = sessionTone(visual.tone);\n  return (\n    <div className=\"inline-flex items-center gap-1.5\">\n      <Icon\n        icon={visual.icon}\n        title={visual.label}\n        className={`size-3.5 ${tone.text}`}\n      />\n      <Select\n        aria-label=\"Permission mode\"\n        value={mode}\n        disabled={readOnly}\n        onChange={(event) =>\n          onChange?.(event.target.value as SpecPermissionMode)\n        }\n        className=\"h-7 w-auto min-w-24 py-0 text-xs\"\n      >\n        {modes.map((candidate) => (\n          <option\n            key={candidate}\n            value={candidate}\n            title={descriptionFor(family, candidate)}\n          >\n            {permissionModeVisual(family, candidate).label}\n          </option>\n        ))}\n      </Select>\n    </div>\n  );\n}\n\n// The option descriptions document Claude's postures, so other families get none.\nfunction descriptionFor(\n  family: string | undefined,\n  mode: SpecPermissionMode,\n): string | undefined {\n  if (family && family !== \"claude\") return undefined;\n  return CLAUDE_PERMISSION_MODE_OPTIONS.find(\n    (option) => option.value === mode,\n  )?.description;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SessionChatComposer.js","sources":["../../../src/data/ai/SessionChatComposer.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Select } from \"../../components\";\nimport { PromptInput } from \"../chat/PromptInput\";\nimport { CLAUDE_PERMISSION_MODE_OPTIONS } from \"../chat/types\";\nimport { Icon } from \"../Icon\";\nimport { sessionTone } from \"./session-tones\";\nimport { permissionModeVisual } from \"./SpecRuntimeEditor/permission-mode-visuals\";\nimport type { SpecPermissionMode } from \"./SpecRuntimeEditor.model\";\n\nexport type SessionChatCapabilities = {\n  interrupt: boolean;\n  steer: boolean;\n  followUp: boolean;\n  resume: boolean;\n  /** True when the live run's runtime can switch permission posture mid-session. */\n  setPermissionMode?: boolean;\n};\n\nexport type SessionChatQueuedMessage = {\n  messageId: string;\n  text: string;\n};\n\nexport type SessionChatComposerProps = {\n  status: \"starting\" | \"running\" | \"interrupting\" | \"idle\" | \"stopping\";\n  capabilities: SessionChatCapabilities;\n  queued?: SessionChatQueuedMessage[];\n  error?: string;\n  /** Disables the input and shows this reason in it (e.g. while the session\n   *  it continues is still loading, or could not be read). */\n  disabledReason?: string;\n  onSubmit: (text: string) => void;\n  onInterrupt?: () => void;\n  toolbar?: ReactNode;\n  inputAccessory?: ReactNode;\n  className?: string;\n  /** Current permission posture, when the host tracks one for this session. */\n  permissionMode?: SpecPermissionMode;\n  /** Modes the run's runtime honours, canonical order. */\n  permissionModes?: SpecPermissionMode[];\n  /** Agent family (\"claude\", \"codex\", \"gemini\") whose vocabulary labels the modes. */\n  permissionFamily?: string;\n  /** Omit to render the picker read-only. */\n  onPermissionModeChange?: (mode: SpecPermissionMode) => void;\n};\n\nexport function SessionChatComposer({\n  status,\n  capabilities,\n  queued = [],\n  error,\n  disabledReason,\n  onSubmit,\n  onInterrupt,\n  toolbar,\n  inputAccessory,\n  className,\n  permissionMode,\n  permissionModes,\n  permissionFamily,\n  onPermissionModeChange,\n}: SessionChatComposerProps) {\n  const active = status === \"running\" || status === \"interrupting\";\n  const canSubmitWhileActive = capabilities.steer || capabilities.followUp;\n  const disabled =\n    disabledReason !== undefined ||\n    status === \"starting\" ||\n    status === \"interrupting\" ||\n    status === \"stopping\" ||\n    (status === \"running\" && !canSubmitWhileActive);\n  const pickerReadOnly =\n    !onPermissionModeChange ||\n    status === \"starting\" ||\n    status === \"interrupting\" ||\n    status === \"stopping\";\n  const picker =\n    permissionMode && permissionModes && permissionModes.length > 0 ? (\n      <PermissionModePicker\n        mode={permissionMode}\n        modes={permissionModes}\n        family={permissionFamily}\n        readOnly={pickerReadOnly}\n        {...(onPermissionModeChange ? { onChange: onPermissionModeChange } : {})}\n      />\n    ) : null;\n  const composedToolbar =\n    picker || toolbar ? (\n      <>\n        {picker}\n        {toolbar}\n      </>\n    ) : undefined;\n\n  return (\n    <div className={className}>\n      {queued.length > 0 && (\n        <div\n          className=\"mb-density-2 flex flex-wrap gap-density-1\"\n          aria-label=\"Queued messages\"\n        >\n          {queued.map((message) => (\n            <span\n              key={message.messageId}\n              className=\"max-w-full truncate rounded-full border border-border bg-muted px-density-2 py-1 text-xs text-muted-foreground\"\n            >\n              Queued: {message.text}\n            </span>\n          ))}\n        </div>\n      )}\n      {error && (\n        <div className=\"mb-density-2 text-xs text-destructive\">{error}</div>\n      )}\n      <PromptInput\n        status={active ? \"streaming\" : \"ready\"}\n        disabled={disabled}\n        {...(disabledReason !== undefined ? { disabledReason } : {})}\n        allowSubmitWhileStreaming={canSubmitWhileActive}\n        stopLabel=\"Interrupt\"\n        placeholder={\n          status === \"idle\" ? \"Continue this session…\" : \"Add a follow-up…\"\n        }\n        onSubmit={(text) => onSubmit(text)}\n        {...(inputAccessory ? { inputAccessory } : {})}\n        {...(composedToolbar ? { toolbar: composedToolbar } : {})}\n        {...(capabilities.interrupt && status === \"running\" && onInterrupt\n          ? { onStop: onInterrupt }\n          : {})}\n      />\n    </div>\n  );\n}\n\nfunction PermissionModePicker({\n  mode,\n  modes,\n  family,\n  readOnly,\n  onChange,\n}: {\n  mode: SpecPermissionMode;\n  modes: SpecPermissionMode[];\n  family: string | undefined;\n  readOnly: boolean;\n  onChange?: (mode: SpecPermissionMode) => void;\n}) {\n  const visual = permissionModeVisual(family, mode);\n  const tone = sessionTone(visual.tone);\n  return (\n    <div className=\"inline-flex items-center gap-1.5\">\n      <Icon\n        icon={visual.icon}\n        title={visual.label}\n        className={`size-3.5 ${tone.text}`}\n      />\n      <Select\n        aria-label=\"Permission mode\"\n        value={mode}\n        disabled={readOnly}\n        onChange={(event) =>\n          onChange?.(event.target.value as SpecPermissionMode)\n        }\n        className=\"h-7 w-auto min-w-24 py-0 text-xs\"\n      >\n        {modes.map((candidate) => (\n          <option\n            key={candidate}\n            value={candidate}\n            title={descriptionFor(family, candidate)}\n          >\n            {permissionModeVisual(family, candidate).label}\n          </option>\n        ))}\n      </Select>\n    </div>\n  );\n}\n\n// The option descriptions document Claude's postures, so other families get none.\nfunction descriptionFor(\n  family: string | undefined,\n  mode: SpecPermissionMode,\n): string | undefined {\n  if (family && family !== \"claude\") return undefined;\n  return CLAUDE_PERMISSION_MODE_OPTIONS.find(\n    (option) => option.value === mode,\n  )?.description;\n}\n"],"names":[],"mappings":"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"}

package/dist/data/ai/SessionInspector.cjs

@@ -4,6 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const utils = require("../../lib/utils.cjs");
 const SessionInspector_panels = require("./SessionInspector.panels.cjs");
+const SessionInspector_composerSlot = require("./SessionInspector.composer-slot.cjs");
 const SessionInspector_summary = require("./SessionInspector.summary.cjs");
 const SessionInspector_compact = require("./SessionInspector.compact.cjs");
 const SessionInspector_tabs = require("./SessionInspector.tabs.cjs");
@@ -22,6 +23,7 @@ function SessionInspector({
   src,
   follow,
   className,
+  onLoadStateChange,
   ...options
 }) {
   if (session !== void 0 && src !== void 0) {
@@ -34,10 +36,23 @@ function SessionInspector({
   }
   const followOptions = follow === void 0 ? {} : { follow };
   const remote = SessionInspector_remote.useRemoteSession(src, followOptions);
+  SessionInspector_remote.useReportLoadState({
+    state: remote,
+    enabled: src !== void 0,
+    onChange: onLoadStateChange
+  });
   const collection = session !== void 0 && SessionInspector_collection.isSessionCollectionInput(session) ? session : void 0;
   const remoteCollection = SessionInspector_remote.useRemoteCollection(collection, followOptions);
   const status = src !== void 0 ? remote : remoteCollection;
   const resolved = src !== void 0 ? remote.session : collection ? remoteCollection.collection : session;
+  const viewOptions = src !== void 0 && (remote.hasOlder || remote.loadingOlder) ? {
+    ...options,
+    transcriptProps: {
+      ...options.transcriptProps,
+      onReachStart: () => void remote.loadOlder(),
+      loadingOlder: remote.loadingOlder === true
+    }
+  } : options;
   const remoteBacked = src !== void 0 || collection !== void 0 && remoteCollection.collection !== collection;
   if (resolved && !remoteBacked) {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -56,12 +71,13 @@ function SessionInspector({
       loading: status.loading,
       ...status.error ? { error: status.error } : {},
       ...className ? { className } : {},
+      ...options.composer ? { composer: options.composer } : {},
       children: resolved ? /* @__PURE__ */ jsxRuntime.jsx(
         SessionInspectorView,
         {
           session: resolved,
           ...followOptions,
-          ...options
+          ...viewOptions
         }
       ) : null
     }
@@ -235,85 +251,65 @@ function CollectionSessionInspector({
           ),
           /* @__PURE__ */ jsxRuntime.jsx(SessionInspector_tabs.InspectorTabs, { tab, tabs: compactTabs, onSelect: setTab })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", children: compact ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: utils.cn(
+                "min-h-0 flex-1 overflow-hidden",
+                tab !== "transcript" && "hidden"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                SessionInspector_transcript.SessionTranscript,
+                {
+                  session: hierarchy.filtered,
+                  viewerProps: {
+                    ...compactTranscriptProps,
+                    className: transcriptClassName
+                  }
+                }
+              )
+            }
+          ),
+          tab !== "transcript" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-auto p-density-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+            SessionInspector_panels.SessionInspectorPanel,
+            {
+              tab,
+              detail: panelDetail,
+              session: hierarchy.current,
+              ...onPlanChange ? { onPlanChange } : {},
+              ...onResolveApproval ? { onResolveApproval } : {}
+            }
+          ) }) : null
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: utils.cn(
-              "min-h-0 flex-1 overflow-y-auto",
-              !compact && "flex flex-col lg:overflow-hidden"
+              "min-h-0 flex-1",
+              tab === "transcript" ? "overflow-hidden" : "overflow-auto p-density-4"
             ),
-            children: /* @__PURE__ */ jsxRuntime.jsxs(
-              "main",
+            children: tab === "transcript" ? /* @__PURE__ */ jsxRuntime.jsx(
+              SessionInspector_transcript.SessionTranscript,
+              {
+                session: hierarchy.filtered,
+                viewerProps: {
+                  ...transcriptProps,
+                  className: transcriptClassName
+                }
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              SessionInspector_panels.SessionInspectorPanel,
               {
-                className: utils.cn(
-                  "flex min-w-0 flex-col",
-                  compact ? "min-h-0" : "min-h-[28rem] flex-1 lg:min-h-0"
-                ),
-                children: [
-                  compact ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "div",
-                      {
-                        className: utils.cn(
-                          "min-h-0 flex-1 overflow-hidden",
-                          tab !== "transcript" && "hidden"
-                        ),
-                        children: /* @__PURE__ */ jsxRuntime.jsx(
-                          SessionInspector_transcript.SessionTranscript,
-                          {
-                            session: hierarchy.filtered,
-                            viewerProps: {
-                              ...compactTranscriptProps,
-                              className: transcriptClassName
-                            }
-                          }
-                        )
-                      }
-                    ),
-                    tab !== "transcript" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-auto p-density-4", children: /* @__PURE__ */ jsxRuntime.jsx(
-                      SessionInspector_panels.SessionInspectorPanel,
-                      {
-                        tab,
-                        detail: panelDetail,
-                        session: hierarchy.current,
-                        ...onPlanChange ? { onPlanChange } : {},
-                        ...onResolveApproval ? { onResolveApproval } : {}
-                      }
-                    ) }) : null
-                  ] }) : /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      className: utils.cn(
-                        "min-h-0 flex-1",
-                        tab === "transcript" ? "overflow-hidden" : "overflow-auto p-density-4"
-                      ),
-                      children: tab === "transcript" ? /* @__PURE__ */ jsxRuntime.jsx(
-                        SessionInspector_transcript.SessionTranscript,
-                        {
-                          session: hierarchy.filtered,
-                          viewerProps: {
-                            ...transcriptProps,
-                            className: transcriptClassName
-                          }
-                        }
-                      ) : /* @__PURE__ */ jsxRuntime.jsx(
-                        SessionInspector_panels.SessionInspectorPanel,
-                        {
-                          tab,
-                          detail: panelDetail,
-                          session: hierarchy.current,
-                          ...onPlanChange ? { onPlanChange } : {},
-                          ...onResolveApproval ? { onResolveApproval } : {}
-                        }
-                      )
-                    }
-                  ),
-                  composer ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 border-t border-border p-density-3", children: composer }) : null
-                ]
+                tab,
+                detail: panelDetail,
+                session: hierarchy.current,
+                ...onPlanChange ? { onPlanChange } : {},
+                ...onResolveApproval ? { onResolveApproval } : {}
               }
             )
           }
-        )
+        ) }),
+        composer ? /* @__PURE__ */ jsxRuntime.jsx(SessionInspector_composerSlot.PinnedComposer, { children: composer }) : null
       ]
     }
   );