@ai-matrx/chat 0.4.22 → 0.4.26

package/dist/tool-call-visualization/registry/registry.js

@@ -1079,10 +1079,10 @@ function notSetUpRendererFor(toolName) {
   if (hit) return hit;
   const NotSetUp = (props) => {
     reportUnregisteredHostSlot(`toolRenderer:${toolName}`, "the generic renderer is drawn");
-    return /* @__PURE__ */ jsxs("div", { "data-chat-slot-fallback": `toolRenderer:${toolName}`, children: [
-      /* @__PURE__ */ jsx("span", { className: "mb-1 inline-block rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground", children: "Not set up here" }),
-      /* @__PURE__ */ jsx(GenericRenderer, { ...props })
-    ] });
+    return (
+      // The generic renderer shows the call in full; the app's richer card is reported once, never labelled on screen.
+      /* @__PURE__ */ jsx("div", { "data-chat-slot-fallback": `toolRenderer:${toolName}`, children: /* @__PURE__ */ jsx(GenericRenderer, { ...props }) })
+    );
   };
   NotSetUp.displayName = `NotSetUpRenderer(${toolName})`;
   notSetUpByTool.set(toolName, NotSetUp);

package/dist/ui/aspect-ratio-options.d.ts

@@ -1,28 +1,6 @@
 /**
- * Aspect-ratio option sets — recognising them and ordering them for a picker.
- *
- * Model catalogs expose aspect ratio as a plain string enum ("1:1", "16:9",
- * "9:19.5", Runway's pixel pairs "1280:720", plus words like "auto" or
- * "match_input_image"). Any option list that is mostly ratios renders through
- * `AspectRatioSelect` — wherever it came from — so the rule lives on the data,
- * not on one control key.
+ * Aspect-ratio option sets — the one copy lives in `@ai-matrx/design-system/controls`
+ * (moved there with `AspectRatioSelect`, chat host-slot batch 2, 2026-10-08).
+ * This subpath keeps `@ai-matrx/chat/ui/aspect-ratio-options` importers working.
  */
-export interface ParsedRatio {
-    w: number;
-    h: number;
-}
-export declare function parseRatio(value: string): ParsedRatio | null;
-/** True when at least two options and every option but the words is a ratio. */
-export declare function isAspectRatioOptionSet(options: readonly string[]): boolean;
-/** "Square", "Landscape", … — a plain word for the shape. */
-export declare function ratioShapeName(value: string): string | null;
-/** Words that are not ratios ("auto", "match_input_image") read as words. */
-export declare function humanizeRatioWord(value: string): string;
-export interface RatioGroups {
-    /** Non-ratio words first (Auto, Match input image). */
-    words: string[];
-    common: string[];
-    more: string[];
-}
-/** Split options into words, common ratios (fixed order) and the rest (by shape). */
-export declare function groupRatioOptions(options: readonly string[]): RatioGroups;
+export { parseRatio, isAspectRatioOptionSet, ratioShapeName, humanizeRatioWord, groupRatioOptions, type ParsedRatio, type RatioGroups, } from "@ai-matrx/design-system/controls";

package/dist/ui/aspect-ratio-options.js

@@ -1,78 +1,10 @@
-import { humanizeIdentifier } from "@ai-matrx/kit/text-case";
-const RATIO_RE = /^\s*(\d+(?:\.\d+)?)\s*[:x×/]\s*(\d+(?:\.\d+)?)\s*$/i;
-function parseRatio(value) {
-  const m = RATIO_RE.exec(value);
-  if (!m) return null;
-  const w = Number(m[1]);
-  const h = Number(m[2]);
-  if (!(w > 0 && h > 0)) return null;
-  return { w, h };
-}
-function isAspectRatioOptionSet(options) {
-  const ratios = options.filter((o) => parseRatio(o) !== null).length;
-  return ratios >= 2 && ratios >= options.length - 2;
-}
-const COMMON_ORDER = [
-  "1:1",
-  "16:9",
-  "9:16",
-  "4:3",
-  "3:4",
-  "3:2",
-  "2:3",
-  "4:5",
-  "5:4",
-  "21:9"
-];
-function reduced(r) {
-  const scale = 1e3;
-  let a = Math.round(r.w * scale);
-  let b = Math.round(r.h * scale);
-  const gcd = (x, y) => y === 0 ? x : gcd(y, x % y);
-  const g = gcd(a, b);
-  a /= g;
-  b /= g;
-  return `${a}:${b}`;
-}
-function ratioShapeName(value) {
-  const r = parseRatio(value);
-  if (!r) return null;
-  const k = r.w / r.h;
-  if (Math.abs(k - 1) < 0.02) return "Square";
-  if (k >= 2.2) return "Ultrawide";
-  if (k <= 1 / 2.2) return "Tall";
-  if (k > 1.6) return "Widescreen";
-  if (k < 1 / 1.6) return "Story";
-  return k > 1 ? "Landscape" : "Portrait";
-}
-function humanizeRatioWord(value) {
-  return humanizeIdentifier(value) || value;
-}
-function groupRatioOptions(options) {
-  const words = [];
-  const ratioOpts = [];
-  for (const o of options) (parseRatio(o) ? ratioOpts : words).push(o);
-  const byReduced = /* @__PURE__ */ new Map();
-  for (const o of ratioOpts) {
-    const key = reduced(parseRatio(o));
-    if (!byReduced.has(key)) byReduced.set(key, o);
-  }
-  const common = [];
-  for (const c of COMMON_ORDER) {
-    const hit = byReduced.get(reduced(parseRatio(c)));
-    if (hit) common.push(hit);
-  }
-  const commonSet = new Set(common);
-  const more = ratioOpts.filter((o) => !commonSet.has(o)).sort((a, b) => {
-    const ra = parseRatio(a);
-    const rb = parseRatio(b);
-    return rb.w / rb.h - ra.w / ra.h;
-  });
-  if (ratioOpts.length <= 6) {
-    return { words, common: [...common, ...more], more: [] };
-  }
-  return { words, common, more };
-}
+import {
+  parseRatio,
+  isAspectRatioOptionSet,
+  ratioShapeName,
+  humanizeRatioWord,
+  groupRatioOptions
+} from "@ai-matrx/design-system/controls";
 export {
   groupRatioOptions,
   humanizeRatioWord,

package/dist/ui/chat-panel/ChatPanel.d.ts

@@ -0,0 +1,50 @@
+/**
+ * The package's chat panel chrome (HOST-OWNED-SOURCE-PLAN §2.6, P28f): a DOCK
+ * (a full-height side column with a resize edge) and a floating WINDOW (a
+ * draggable card) around whatever chat the host puts inside — normally an
+ * `AgentConversationColumn`. Tailwind + the design-system tokens only; no
+ * compat sheet.
+ *
+ * Slots, all optional and absent when not given (never a dead control):
+ *   header      one compact row: `title` (node), `badge`, `working`, `actions`
+ *   list        a conversation list opened by "Conversations" in the header,
+ *               with `listHeader` above it (what a click costs, etc.)
+ *   width / onWidthChange / minWidth / maxWidth   the host owns the width
+ *   label       the accessible name (a host's keyboard scope may key on it)
+ */
+import { type ReactNode } from "react";
+import { type DraggablePanelPosition } from "./drag.js";
+export declare const CHAT_PANEL_DOCK_MIN_WIDTH = 320;
+export declare const CHAT_PANEL_DOCK_MAX_WIDTH = 720;
+export declare const CHAT_PANEL_WINDOW_WIDTH = 420;
+export interface ChatPanelHeader {
+    title?: ReactNode;
+    badge?: ReactNode;
+    working?: ReactNode;
+    actions?: ReactNode;
+}
+interface ChatPanelCommon {
+    header?: ChatPanelHeader;
+    /** A conversation list; present ⇒ the header carries "Conversations". */
+    list?: ReactNode;
+    listHeader?: ReactNode;
+    label?: string;
+    className?: string;
+    children: ReactNode;
+}
+export interface ChatDockPanelProps extends ChatPanelCommon {
+    side?: "start" | "end";
+    width?: number;
+    onWidthChange?: (next: number) => void;
+    minWidth?: number;
+    maxWidth?: number;
+}
+export interface ChatWindowPanelProps extends ChatPanelCommon {
+    initialPosition?: DraggablePanelPosition;
+    width?: number;
+    height?: number | string;
+    onPositionCommit?: (position: DraggablePanelPosition) => void;
+}
+export declare function ChatDockPanel({ header, list, listHeader, label, className, children, side, width, onWidthChange, minWidth, maxWidth, }: ChatDockPanelProps): ReactNode;
+export declare function ChatWindowPanel({ header, list, listHeader, label, className, children, initialPosition, width, height, onPositionCommit, }: ChatWindowPanelProps): ReactNode;
+export {};

package/dist/ui/chat-panel/ChatPanel.js

@@ -0,0 +1,175 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import {
+  useDraggablePanel,
+  useResizableWidth
+} from "./drag.js";
+const CHAT_PANEL_DOCK_MIN_WIDTH = 320;
+const CHAT_PANEL_DOCK_MAX_WIDTH = 720;
+const CHAT_PANEL_WINDOW_WIDTH = 420;
+function HeaderRow({
+  header,
+  listToggle,
+  dragHandleProps
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex h-10 shrink-0 items-center gap-2 border-b border-border px-2",
+      "data-chat-panel-header": "",
+      ...dragHandleProps ?? {},
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2 text-sm font-medium text-foreground", children: [
+          header?.title ? /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: header.title }) : null,
+          header?.badge ?? null,
+          header?.working ?? null
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex shrink-0 items-center gap-1",
+            onPointerDown: (event) => event.stopPropagation(),
+            children: [
+              listToggle,
+              header?.actions ?? null
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function useListToggle(list) {
+  const [open, setOpen] = useState(false);
+  const id = useId();
+  const toggle = list === void 0 ? null : /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: "rounded-md px-2 py-1 text-xs text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      "aria-expanded": open,
+      "aria-controls": id,
+      onClick: () => setOpen((v) => !v),
+      children: "Conversations"
+    }
+  );
+  return { open, id, toggle };
+}
+function ListArea({
+  id,
+  listHeader,
+  list
+}) {
+  return /* @__PURE__ */ jsxs("div", { id, className: "max-h-[45%] shrink-0 overflow-y-auto border-b border-border", "data-chat-panel-list": "", children: [
+    listHeader ? /* @__PURE__ */ jsx("div", { className: "px-3 pt-2 text-xs text-muted-foreground", children: listHeader }) : null,
+    list
+  ] });
+}
+function ChatDockPanel({
+  header,
+  list,
+  listHeader,
+  label,
+  className,
+  children,
+  side = "start",
+  width = CHAT_PANEL_DOCK_MIN_WIDTH,
+  onWidthChange,
+  minWidth = CHAT_PANEL_DOCK_MIN_WIDTH,
+  maxWidth = CHAT_PANEL_DOCK_MAX_WIDTH
+}) {
+  const listToggle = useListToggle(list);
+  const resize = useResizableWidth({
+    width,
+    min: minWidth,
+    max: maxWidth,
+    edge: side === "start" ? "end" : "start",
+    ...onWidthChange === void 0 ? {} : { onWidthChange }
+  });
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      ref: resize.panelRef,
+      className: `relative flex h-full min-h-0 shrink-0 flex-col bg-background ${side === "start" ? "border-r" : "border-l"} border-border ${className ?? ""}`,
+      "data-chat-panel": "dock",
+      "data-side": side,
+      "data-resizing": resize.resizing,
+      style: { width },
+      role: "complementary",
+      "aria-label": label ?? "Chat",
+      children: [
+        onWidthChange === void 0 ? null : /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `absolute inset-y-0 z-10 w-1.5 cursor-col-resize hover:bg-primary/30 focus-visible:bg-primary/40 focus-visible:outline-none ${side === "start" ? "-right-0.5" : "-left-0.5"}`,
+            "aria-label": "Resize the chat panel",
+            ...resize.handleProps
+          }
+        ),
+        /* @__PURE__ */ jsx(HeaderRow, { header, listToggle: listToggle.toggle }),
+        list !== void 0 && listToggle.open ? /* @__PURE__ */ jsx(ListArea, { id: listToggle.id, listHeader, list }) : null,
+        /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 flex-col", children })
+      ]
+    }
+  );
+}
+function ChatWindowPanel({
+  header,
+  list,
+  listHeader,
+  label,
+  className,
+  children,
+  initialPosition,
+  width = CHAT_PANEL_WINDOW_WIDTH,
+  height = "min(640px, calc(100vh - 120px))",
+  onPositionCommit
+}) {
+  const listToggle = useListToggle(list);
+  const [fallback] = useState(() => ({
+    x: Math.max(8, (globalThis.innerWidth ?? width + 32) - width - 24),
+    y: 96
+  }));
+  const drag = useDraggablePanel({
+    initial: initialPosition ?? fallback,
+    ...onPositionCommit === void 0 ? {} : { onCommit: onPositionCommit }
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: drag.panelRef,
+      className: `fixed z-40 flex flex-col overflow-hidden rounded-xl border border-border bg-background shadow-xl ${className ?? ""}`,
+      "data-chat-panel": "window",
+      "data-dragging": drag.dragging,
+      role: "dialog",
+      "aria-label": label ?? "Chat",
+      style: {
+        left: drag.position.x,
+        top: drag.position.y,
+        width,
+        height,
+        transform: "translate(var(--mx-chat-panel-dx, 0px), var(--mx-chat-panel-dy, 0px))"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          HeaderRow,
+          {
+            header,
+            listToggle: listToggle.toggle,
+            dragHandleProps: drag.dragHandleProps
+          }
+        ),
+        list !== void 0 && listToggle.open ? /* @__PURE__ */ jsx(ListArea, { id: listToggle.id, listHeader, list }) : null,
+        /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 flex-col", children })
+      ]
+    }
+  );
+}
+export {
+  CHAT_PANEL_DOCK_MAX_WIDTH,
+  CHAT_PANEL_DOCK_MIN_WIDTH,
+  CHAT_PANEL_WINDOW_WIDTH,
+  ChatDockPanel,
+  ChatWindowPanel
+};

package/dist/ui/chat-panel/drag.d.ts

@@ -0,0 +1,87 @@
+/**
+ * `useDraggablePanel()` — dragging that does not re-render the chat.
+ *
+ * THE RULE, lifted from the Workflow Studio's own `FloatingChatPanel` because
+ * it was paid for there: a pointer move paints through CSS CUSTOM PROPERTIES
+ * inside ONE requestAnimationFrame, and the position is committed to React
+ * state EXACTLY ONCE, on release. Writing React state per pointer event
+ * re-renders the transcript sixty times a second while an answer is streaming
+ * into it, which is precisely the budget design §7 sets out to protect.
+ *
+ * Two details that look like noise and are not:
+ *  - the paint offsets are CLEARED in a layout effect on the frame that adopts
+ *    the committed position, so the panel never jumps by the offset twice;
+ *  - a pending frame is cancelled on unmount, because a callback holding a
+ *    detached element is a leak that only shows up under a long session.
+ */
+import { type PointerEvent as ReactPointerEvent, type RefObject } from "react";
+export interface DraggablePanelPosition {
+    x: number;
+    y: number;
+}
+export interface UseResizableWidthOptions {
+    /** The host's stored width. This hook never owns it. */
+    width: number;
+    min: number;
+    max: number;
+    /** Which edge the handle sits on — the side the panel grows FROM. */
+    edge: "start" | "end";
+    /** Told once, on release, and on every keyboard step. */
+    onWidthChange?: ((next: number) => void) | undefined;
+}
+export interface ResizableWidthHandle {
+    panelRef: RefObject<HTMLElement | null>;
+    resizing: boolean;
+    handleProps: {
+        role: "separator";
+        tabIndex: 0;
+        "aria-orientation": "vertical";
+        "aria-valuenow": number;
+        "aria-valuemin": number;
+        "aria-valuemax": number;
+        onPointerDown(event: ReactPointerEvent): void;
+        onPointerMove(event: ReactPointerEvent): void;
+        onPointerUp(event: ReactPointerEvent): void;
+        onPointerCancel(event: ReactPointerEvent): void;
+        onKeyDown(event: {
+            key: string;
+            preventDefault(): void;
+        }): void;
+        onDoubleClick(): void;
+    };
+}
+/**
+ * THE WIDTH IS THE HOST'S, ALWAYS.
+ *
+ * The package never writes a width to storage: which pref store a surface uses,
+ * and whether the width is per-user or per-organization, is the host's to know
+ * (Law 6 — opinions become knobs, and the knob is theirs). So this hook paints
+ * the drag live and hands the final number back through one callback.
+ *
+ * The keyboard path is not decoration: a separator that only answers a pointer
+ * is unusable with a keyboard or a screen reader, and a panel whose size cannot
+ * be changed without a mouse is a dead control for the people who need it most.
+ */
+export declare function useResizableWidth(options: UseResizableWidthOptions): ResizableWidthHandle;
+export interface UseDraggablePanelOptions {
+    initial: DraggablePanelPosition;
+    /** Keep this much of the panel on screen on every edge. */
+    keepVisiblePx?: number | undefined;
+    /** Told once per drag, on release — a host that persists the position. */
+    onCommit?: ((position: DraggablePanelPosition) => void) | undefined;
+}
+export interface DraggablePanelHandle {
+    position: DraggablePanelPosition;
+    /** Attach to the element that MOVES. */
+    panelRef: RefObject<HTMLElement | null>;
+    /** Spread onto the element you drag BY (the header). */
+    dragHandleProps: {
+        onPointerDown(event: ReactPointerEvent): void;
+        onPointerMove(event: ReactPointerEvent): void;
+        onPointerUp(event: ReactPointerEvent): void;
+        onPointerCancel(event: ReactPointerEvent): void;
+    };
+    /** True while a pointer is down — a shell suppresses transitions with it. */
+    dragging: boolean;
+}
+export declare function useDraggablePanel(options: UseDraggablePanelOptions): DraggablePanelHandle;

package/dist/ui/chat-panel/drag.js

@@ -0,0 +1,194 @@
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+const KEYBOARD_STEP_PX = 24;
+function useResizableWidth(options) {
+  const { width, min, max, edge, onWidthChange } = options;
+  const panelRef = useRef(null);
+  const [resizing, setResizing] = useState(false);
+  const frameRef = useRef(null);
+  const dragRef = useRef(
+    null
+  );
+  const initialRef = useRef(width);
+  const clamp = useCallback(
+    (next) => Math.max(min, Math.min(max, Math.round(next))),
+    [min, max]
+  );
+  const commit = useCallback(
+    (next) => {
+      panelRef.current?.style.removeProperty("width");
+      onWidthChange?.(clamp(next));
+    },
+    [clamp, onWidthChange]
+  );
+  const end = useCallback(() => {
+    const drag = dragRef.current;
+    if (frameRef.current !== null) {
+      globalThis.cancelAnimationFrame?.(frameRef.current);
+      frameRef.current = null;
+    }
+    dragRef.current = null;
+    setResizing(false);
+    if (drag !== null) commit(drag.latest);
+  }, [commit]);
+  useEffect(
+    () => () => {
+      if (frameRef.current !== null) globalThis.cancelAnimationFrame?.(frameRef.current);
+    },
+    []
+  );
+  return {
+    panelRef,
+    resizing,
+    handleProps: {
+      role: "separator",
+      tabIndex: 0,
+      "aria-orientation": "vertical",
+      "aria-valuenow": width,
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      onPointerDown(event) {
+        event.preventDefault();
+        dragRef.current = { startX: event.clientX, startWidth: width, latest: width };
+        setResizing(true);
+        event.target.setPointerCapture?.(event.pointerId);
+      },
+      onPointerMove(event) {
+        const drag = dragRef.current;
+        if (drag === null) return;
+        const delta = edge === "end" ? event.clientX - drag.startX : drag.startX - event.clientX;
+        drag.latest = clamp(drag.startWidth + delta);
+        if (frameRef.current !== null) return;
+        const schedule = globalThis.requestAnimationFrame;
+        const paint = () => {
+          frameRef.current = null;
+          const active = dragRef.current;
+          if (active === null || panelRef.current === null) return;
+          panelRef.current.style.width = `${active.latest}px`;
+        };
+        if (typeof schedule === "function") frameRef.current = schedule(paint);
+        else paint();
+      },
+      onPointerUp: end,
+      onPointerCancel: end,
+      onKeyDown(event) {
+        const grow = edge === "end" ? "ArrowRight" : "ArrowLeft";
+        const shrink = edge === "end" ? "ArrowLeft" : "ArrowRight";
+        if (event.key === grow) {
+          event.preventDefault();
+          commit(width + KEYBOARD_STEP_PX);
+          return;
+        }
+        if (event.key === shrink) {
+          event.preventDefault();
+          commit(width - KEYBOARD_STEP_PX);
+        }
+      },
+      onDoubleClick() {
+        commit(initialRef.current);
+      }
+    }
+  };
+}
+const DEFAULT_KEEP_VISIBLE = 64;
+function useDraggablePanel(options) {
+  const keepVisible = options.keepVisiblePx ?? DEFAULT_KEEP_VISIBLE;
+  const [position, setPosition] = useState(options.initial);
+  const [dragging, setDragging] = useState(false);
+  const panelRef = useRef(null);
+  const frameRef = useRef(null);
+  const adoptingRef = useRef(false);
+  const dragRef = useRef(null);
+  const clamp = useCallback(
+    (next) => {
+      const width = globalThis.innerWidth ?? 0;
+      const height = globalThis.innerHeight ?? 0;
+      if (width === 0 || height === 0) return next;
+      return {
+        x: Math.max(0, Math.min(width - keepVisible, next.x)),
+        y: Math.max(0, Math.min(height - keepVisible, next.y))
+      };
+    },
+    [keepVisible]
+  );
+  const onPointerDown = useCallback(
+    (event) => {
+      if (event.target.closest("button,a,input,select,textarea")) return;
+      event.preventDefault();
+      dragRef.current = {
+        dx: event.clientX - position.x,
+        dy: event.clientY - position.y,
+        origin: position,
+        latest: position
+      };
+      setDragging(true);
+      event.target.setPointerCapture?.(event.pointerId);
+    },
+    [position]
+  );
+  const onPointerMove = useCallback(
+    (event) => {
+      const drag = dragRef.current;
+      if (drag === null) return;
+      drag.latest = clamp({ x: event.clientX - drag.dx, y: event.clientY - drag.dy });
+      if (frameRef.current !== null) return;
+      const schedule = globalThis.requestAnimationFrame;
+      const paint = () => {
+        frameRef.current = null;
+        const active = dragRef.current;
+        const element = panelRef.current;
+        if (active === null || element === null) return;
+        element.style.setProperty("--mx-chat-panel-dx", `${active.latest.x - active.origin.x}px`);
+        element.style.setProperty("--mx-chat-panel-dy", `${active.latest.y - active.origin.y}px`);
+      };
+      if (typeof schedule === "function") frameRef.current = schedule(paint);
+      else paint();
+    },
+    [clamp]
+  );
+  const end = useCallback(() => {
+    const drag = dragRef.current;
+    if (frameRef.current !== null) {
+      globalThis.cancelAnimationFrame?.(frameRef.current);
+      frameRef.current = null;
+    }
+    dragRef.current = null;
+    setDragging(false);
+    if (drag === null) return;
+    adoptingRef.current = true;
+    setPosition(drag.latest);
+    options.onCommit?.(drag.latest);
+  }, [options]);
+  useLayoutEffect(() => {
+    if (!adoptingRef.current) return;
+    adoptingRef.current = false;
+    panelRef.current?.style.removeProperty("--mx-chat-panel-dx");
+    panelRef.current?.style.removeProperty("--mx-chat-panel-dy");
+  });
+  useEffect(
+    () => () => {
+      if (frameRef.current !== null) globalThis.cancelAnimationFrame?.(frameRef.current);
+    },
+    []
+  );
+  return {
+    position,
+    panelRef,
+    dragging,
+    dragHandleProps: {
+      onPointerDown,
+      onPointerMove,
+      onPointerUp: end,
+      onPointerCancel: end
+    }
+  };
+}
+export {
+  useDraggablePanel,
+  useResizableWidth
+};

package/dist/window-panels/windows/agents/AgentRunWindow.js

@@ -49,6 +49,7 @@ import {
   AGENT_RUN_WINDOW_AGENT_ARG,
   AGENT_RUN_WINDOW_CONVERSATION_ARG,
   addressableConversationId,
+  adoptLateWindowSeed,
   AGENT_RUN_WINDOW_URL_MODE
 } from "./agentRunWindowAddress.js";
 import { ErrorAlchemyMenu } from "../../../host/ui-slots.js";
@@ -534,6 +535,22 @@ function AgentRunWindowInner({
   const liveResourceIdentity = seedApplies ? initialResourceIdentity : null;
   const liveAutoRun = seedApplies ? initialAutoRun : false;
   const [selectedConversationId, setSelectedConversationId] = useState(initialSelectedConversationId);
+  const [seenSeed, setSeenSeed] = useState({
+    agent: initialAgentId,
+    conversation: initialSelectedConversationId
+  });
+  const lateSeed = adoptLateWindowSeed({
+    seen: seenSeed,
+    incoming: { agent: initialAgentId, conversation: initialSelectedConversationId },
+    current: { agent: agentId, conversation: selectedConversationId }
+  });
+  if (lateSeed) {
+    setSeenSeed(lateSeed.seen);
+    if (lateSeed.agent !== agentId) setAgentId(lateSeed.agent);
+    if (lateSeed.conversation !== selectedConversationId) {
+      setSelectedConversationId(lateSeed.conversation);
+    }
+  }
   const siblingWindowCount = useChatManagedWindowCount("agent-run-window:");
   const initialPosition = AGENT_RUN_WINDOW_POSITIONS[siblingWindowCount % AGENT_RUN_WINDOW_POSITIONS.length];
   const liveAgentName = useAgentName(agentId) ?? null;