@ai-matrx/chat 0.7.25 → 0.7.27

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @ai-matrx/chat
 
+## 0.7.27
+### Unreleased
+
+### An answered question is followed to its answer (lane F16)
+
+- **`runHeadlessAgentJson` / `adoptHeadlessAgentJson` / `continueAgentJson`: once the ask closes, the
+  wait re-reads the conversation every 15 s until the resumed turn's answer lands.** The resumed turn runs
+  on the server AFTER the answer is accepted (30-90 s for an Applet build); one follow taken before its
+  operation existed followed nothing, and the builder sat on "Waiting for your answer" for 7+ minutes over
+  a build the server had written. Guard: `a-run-parked-on-the-person-waits-for-their-answer.test.ts`.
+  Consumer action: none.
+- **`useActionRequestAnswer`: a reply that never came back says so — never "Nothing was recorded".**
+  New `ACTION_REQUEST_UNCONFIRMED` for a thrown transport (a dropped connection, an edge timeout): it may
+  have arrived, and a second answer is refused by the claim, so trying again is safe. Guard:
+  `a-lost-reply-never-claims-nothing-was-recorded.test.tsx`. Consumer action: none.
+
+### The messenger shell
+
+- **New domain `@ai-matrx/chat/messenger/*`**: ONE desktop-messenger layout for any conversation
+  source — `messenger/contract` (`MessengerSource`), `messenger/MessengerShell`,
+  `messenger/MessengerDetails`, `messenger/MessengerAvatar`. Rail of spaces with collapsible groups,
+  a profile and an expand/collapse toggle remembered per browser; a 320px contact list (search, an
+  "All" chip plus the source's chips, rows with avatar, time, preview, unread, pinned, muted and
+  draft); a thread header with a generic `titleMenu` dropdown; an optional details panel; and
+  right-click plus "⋯" menus on rows, rail items and the header whose items all come from the source.
+  Chrome only: the thread body is the source's renderer. The list can never scroll sideways.
+- **`messenger/people/usePeopleMessengerSource`**: `@ai-matrx/messaging` conversations as a source;
+  the thread is messaging's `ConversationView` with `appearance="messenger"`.
+- **`@ai-matrx/messaging` is now a dependency** (`workspace:*`), imported only by the people subpath,
+  so hosts that never import it load none of it.
+
 ## 0.7.25
 
 Automatic changed-only republish (docs/metadata drift since the last tag — see

package/dist/action-requests/components/ActionRequestAnswerForm.d.ts

@@ -28,6 +28,13 @@ export type ActionRequestDone = {
     next: string | null;
 };
 export declare const ACTION_REQUEST_UNREACHED = "That did not reach us. Nothing was recorded, so it is safe to try again.";
+/**
+ * The call never came back (a dropped connection, an edge timeout). It may or may not have
+ * reached the server, so the page never claims "nothing recorded" — the Applet builder said
+ * that over an answer the server had already recorded (live, 2026-10-09). A second answer is
+ * refused by the claim, so trying again is always safe.
+ */
+export declare const ACTION_REQUEST_UNCONFIRMED = "We lost the connection before hearing back. Trying again is safe; an answer is never recorded twice.";
 /**
  * The submit state machine, shared by every surface that answers an ask.
  * A second tap while in flight does nothing — `busy` is a render behind the

package/dist/action-requests/components/ActionRequestAnswerForm.js

@@ -15,6 +15,7 @@ import {
   parseApprovalUsd
 } from "./spendAmount.js";
 const ACTION_REQUEST_UNREACHED = "That did not reach us. Nothing was recorded, so it is safe to try again.";
+const ACTION_REQUEST_UNCONFIRMED = "We lost the connection before hearing back. Trying again is safe; an answer is never recorded twice.";
 function useActionRequestAnswer(transport, onDone) {
   const [busy, setBusy] = useState(false);
   const [refusal, setRefusal] = useState(null);
@@ -59,7 +60,7 @@ function useActionRequestAnswer(transport, onDone) {
       }
       setDone({ message: body.message ?? ACTION_REQUEST_UNREACHED, next: null });
     } catch {
-      setRefusal({ code: "offline", message: ACTION_REQUEST_UNREACHED, remedy: null });
+      setRefusal({ code: "offline", message: ACTION_REQUEST_UNCONFIRMED, remedy: null });
     } finally {
       inFlight.current = false;
       setBusy(false);
@@ -548,6 +549,7 @@ function safeFormat(format, iso) {
   return Number.isNaN(at.getTime()) ? iso : format.format(at);
 }
 export {
+  ACTION_REQUEST_UNCONFIRMED,
   ACTION_REQUEST_UNREACHED,
   ActionRequestAnswerForm,
   useActionRequestAnswer

package/dist/agents/components/inputs/smart-input/InputActionButtons.d.ts

@@ -58,9 +58,9 @@ interface InputActionButtonsProps {
          * audio) live in the + menu; Output and Effort in the agent pill's menu.
          */
         folded?: boolean;
-        /** Scope · values: after + · mic (· live audio) in Compact's row, after + in the card's own bar. */
+        /** Compact's row under the card: after + · mic (· live audio). */
         leading?: React.ReactNode;
-        /** Agent · output · effort: the right end of Compact's row, or just left of the mic in the card's own bar. */
+        /** Compact's row under the card: the right end (agent · output · effort). */
         trailing?: React.ReactNode;
         /**
          * Which part this instance draws. Compact mounts two: `"send"` (↵, inside

package/dist/agents/components/inputs/smart-input/InputActionButtons.js

@@ -202,11 +202,9 @@ function InputActionButtons({
       /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [
         plusMenu,
         database ? /* @__PURE__ */ jsx(DesktopPresenceIndicator, { conversationId }) : null,
-        variablesToggle,
-        composer.leading
+        variablesToggle
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [
-        composer.trailing,
         extraRightControls,
         micGroup,
         liveAudioButton,

package/dist/agents/components/inputs/smart-input/SmartAgentInputStacked.js

@@ -20,7 +20,7 @@ import { Button } from "@ai-matrx/design-system";
 import { cn } from "@ai-matrx/design-system";
 import { composerShows } from "./composer/composer-mode-visibility.js";
 import { ComposerChipsRow } from "./composer/ComposerChipsRow.js";
-import { ComposerPills, ComposerScopeCluster, ComposerValueGroupChip } from "./composer/ComposerMetaRow.js";
+import { ComposerMetaRow, ComposerPills, ComposerScopeCluster, ComposerValueGroupChip } from "./composer/ComposerMetaRow.js";
 import { useComposerFold } from "./composer/useComposerFold.js";
 import { useTouchOnlyDevice } from "../../../../ui/composer/useTouchOnlyDevice.js";
 function SmartAgentInputStacked({
@@ -323,12 +323,7 @@ function SmartAgentInputStacked({
                     onVoiceBusyChange: setVoiceBusy,
                     extraRightControls,
                     onRequestInputExpand: () => setExpandRequestKey((key) => key + 1),
-                    composer: {
-                      ...composerParts,
-                      // The pills live in the card's own bar: no strip under the card (rule: existing bars).
-                      leading: composer.meta === "none" ? void 0 : /* @__PURE__ */ jsx(ComposerScopeCluster, { conversationId, composer, folded }),
-                      trailing: composer.meta === "none" ? void 0 : /* @__PURE__ */ jsx(ComposerPills, { conversationId, composer, menuSide, folded })
-                    }
+                    composer: composerParts
                   }
                 )
               ] })
@@ -349,7 +344,7 @@ function SmartAgentInputStacked({
               trailing: composer.meta === "none" ? void 0 : /* @__PURE__ */ jsx(ComposerPills, { conversationId, composer, menuSide, folded })
             }
           }
-        ) : null
+        ) : composer.meta === "none" ? null : /* @__PURE__ */ jsx(ComposerMetaRow, { conversationId, composer, menuSide, folded })
       ]
     }
   );

package/dist/agents/components/inputs/smart-input/composer/ComposerSplash.js

@@ -36,6 +36,7 @@ function ComposerGreeting({ className }) {
     () => timeOfDayGreeting((/* @__PURE__ */ new Date()).getHours()),
     () => null
   );
+  const onServerHtml = useSyncExternalStore(noSubscription, () => false, () => true);
   return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-center gap-3.5", className), children: [
     /* @__PURE__ */ jsx(
       "span",
@@ -48,7 +49,7 @@ function ComposerGreeting({ className }) {
       /* @__PURE__ */ jsx("span", { "data-matrx-greeting": "", suppressHydrationWarning: true, children: greeting ?? "Hello" }),
       firstName ? `, ${firstName}` : ""
     ] }),
-    /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: GREETING_SCRIPT } })
+    onServerHtml ? /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: GREETING_SCRIPT } }) : null
   ] });
 }
 function parseQuickActions(value) {

package/dist/agents/components/messages-display/assistant/AssistantMessageFooter.js

@@ -165,7 +165,7 @@ function AssistantMessageFooter(props) {
     isLatestAssistant
   } = useAssistantMessageActions(props);
   const answerActions = useTranscriptLayout().answerActions;
-  const isHoverOnly = answerActions === "hover" || answerActions === "latest" && !isLatestAssistant || density === "compact" && !isLatestAssistant;
+  const isHoverOnly = answerActions === "hover" || density === "compact" && !isLatestAssistant;
   const rowRef = useRef(null);
   useEffect(() => {
     const row = rowRef.current;
@@ -183,9 +183,7 @@ function AssistantMessageFooter(props) {
       {
         className: cn(
           "transition-opacity",
-          isHoverOnly && // Hidden by opacity, never display: the row keeps its height, so revealing it shifts
-          // nothing. A touch screen has no hover, so it is always visible there.
-          "opacity-0 group-hover/assistant-msg:opacity-100 focus-within:opacity-100 [@media(hover:none)]:opacity-100"
+          isHoverOnly && "opacity-0 group-hover/assistant-msg:opacity-100 focus-within:opacity-100"
         ),
         children: [
           /* @__PURE__ */ jsxs(

package/dist/agents/components/shared/transcript-layout.d.ts

@@ -1,20 +1,19 @@
 /**
  * How a host lays the ONE conversation column out (HOST-OWNED-SOURCE-PLAN P28e look bar).
  *
- * Knobs, never forks: a host that says nothing gets the default look (flat compact user turn,
- * actions on hover). Matrx 2 (desktop) fills its pane, starts at the left edge and draws the
+ * Knobs, never forks: every value has today's web default, and a host that says nothing gets
+ * exactly the web chat. Matrx 2 (desktop) fills its pane, starts at the left edge and draws the
  * person's turn as a compact block — the look its coding screen had before the column.
  *
  *  - `width`: "reading" (the canonical `max-w-3xl` reading column) | "fill" (the host's pane).
  *  - `align`: "center" | "start" — where a reading-width column sits in a wider pane.
- *  - `userMessage`: "compact" (DEFAULT: a flat tight block; only a genuinely long message
- *    collapses) | "card" (the bordered card that collapses a long message behind a chevron) |
+ *  - `userMessage`: "card" (DEFAULT: the bordered card that collapses a long message behind a chevron) |
+ *    "compact" (a flat tight block; only a genuinely long message collapses) |
  *    "bubble" (Messages / Xcode's coding assistant: the person's turn on the trailing side in a
  *    rounded bubble as wide as its words, answers full width; collapses like "compact").
- *  - `answerActions`: "hover" (DEFAULT: the action row is revealed on hover / keyboard focus, and
+ *  - `answerActions`: "shown" (DEFAULT: the latest answer's action row always visible) | "hover" (the action row is revealed on hover / keyboard focus, and
  *    always on touch — its height is reserved, so revealing it moves nothing; a finished answer ends
- *    on its last word) | "latest" (the latest answer's row is always visible, older ones on hover) |
- *    "shown" (every answer's row always visible).
+ *    on its last word) | "latest" (the latest answer's row is always visible, older ones on hover).
  */
 import { type ReactNode } from "react";
 export interface TranscriptLayout {

package/dist/agents/components/shared/transcript-layout.js

@@ -6,8 +6,8 @@ import {
 const DEFAULT_TRANSCRIPT_LAYOUT = {
   width: "reading",
   align: "center",
-  userMessage: "compact",
-  answerActions: "hover",
+  userMessage: "card",
+  answerActions: "shown",
   timestamps: "hover"
 };
 const TranscriptLayoutContext = createContext(DEFAULT_TRANSCRIPT_LAYOUT);

package/dist/agents/redux/execution-system/thunks/run-headless-agent-json.js

@@ -19,6 +19,7 @@ import {
 } from "../messages/messages.selectors.js";
 import { countOpenAsksForConversation } from "../../../runtime-reconnect/parked-on-person.js";
 import { rereadAndFollow } from "../../../runtime-reconnect/reread-and-follow.js";
+import { loadConversation } from "./load-conversation.thunk.js";
 import {
   selectLatestAnswerText,
   selectLatestRequestId
@@ -55,6 +56,7 @@ const DEFAULT_PERSON_WAIT_MS = 6 * 60 * 6e4;
 const RECONNECT_WAIT_MS = 5 * 6e4;
 const isConnectionLoss = (errorType) => errorType === "transport_lost" || errorType === "heartbeat_timeout";
 const PERSON_ASK_POLL_MS = 1e4;
+const PERSON_REREAD_MS = 15e3;
 const DEFAULT_MESSAGES = {
   streamError: "The agent failed before returning a result.",
   noJson: "The agent finished but produced no structured JSON.",
@@ -644,6 +646,12 @@ async function waitForExtraction(dispatch, getState, args) {
             }
           } catch {
           }
+        } else if (person.following && now - person.askedAt >= PERSON_REREAD_MS) {
+          person.askedAt = now;
+          try {
+            await dispatch(loadConversation({ conversationId })).unwrap();
+          } catch {
+          }
         }
         const now2 = getState();
         const marker = answerSince(now2);

package/dist/host/admin-seat.js

@@ -1,6 +1,8 @@
 import { adminLaneOrganizationId } from "./server/admin-lane.js";
 import { selectIsAdmin } from "./identity.js";
+import { isChatHostConfigured } from "./configure.js";
 function adminSeatOpen(state) {
+  if (!isChatHostConfigured()) return false;
   return adminLaneOrganizationId() !== null && selectIsAdmin(state);
 }
 export {

package/dist/messenger/MessengerAvatar.d.ts

@@ -0,0 +1,18 @@
+import { type MessengerAvatar as AvatarSpec } from "./contract.js";
+/** Box sizes measured from WhatsApp desktop: row 48, header 40, rail profile 28, details 80. */
+declare const SIZES: {
+    readonly rail: "h-7 w-7 text-[11px]";
+    readonly header: "h-10 w-10 text-sm";
+    readonly row: "h-12 w-12 text-base";
+    readonly details: "h-20 w-20 text-2xl";
+};
+export type MessengerAvatarSize = keyof typeof SIZES;
+export interface MessengerAvatarProps {
+    readonly name: string;
+    readonly avatar?: AvatarSpec;
+    readonly size: MessengerAvatarSize;
+    readonly className?: string;
+}
+/** One round avatar: image, emoji, icon or monogram. Never grows or shrinks in a flex row. */
+export declare function MessengerAvatar({ name, avatar, size, className }: MessengerAvatarProps): import("react").JSX.Element;
+export {};

package/dist/messenger/MessengerAvatar.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "@ai-matrx/design-system/cn";
+import { initialsOf } from "./contract.js";
+const SIZES = {
+  rail: "h-7 w-7 text-[11px]",
+  header: "h-10 w-10 text-sm",
+  row: "h-12 w-12 text-base",
+  details: "h-20 w-20 text-2xl"
+};
+function MessengerAvatar({ name, avatar, size, className }) {
+  const box = cn(
+    "relative flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-muted font-medium text-muted-foreground",
+    SIZES[size],
+    className
+  );
+  if (avatar?.kind === "image") {
+    return /* @__PURE__ */ jsx("span", { className: box, "data-avatar": "image", children: /* @__PURE__ */ jsx("img", { src: avatar.src, alt: "", className: "h-full w-full object-cover", draggable: false }) });
+  }
+  if (avatar?.kind === "emoji") {
+    return /* @__PURE__ */ jsx("span", { className: box, "data-avatar": "emoji", "aria-hidden": true, children: /* @__PURE__ */ jsx("span", { className: "leading-none", children: avatar.emoji }) });
+  }
+  if (avatar?.kind === "icon") {
+    const Icon = avatar.icon;
+    return /* @__PURE__ */ jsx("span", { className: cn(box, "bg-primary/10 text-primary"), "data-avatar": "icon", "aria-hidden": true, children: /* @__PURE__ */ jsx(Icon, { className: "h-1/2 w-1/2" }) });
+  }
+  return /* @__PURE__ */ jsx("span", { className: box, "data-avatar": "monogram", "aria-hidden": true, children: avatar?.kind === "monogram" && avatar.text ? avatar.text : initialsOf(name) });
+}
+export {
+  MessengerAvatar
+};

package/dist/messenger/MessengerContactList.d.ts

@@ -0,0 +1,16 @@
+import type { MessengerContact, MessengerFilter, MessengerSource } from "./contract.js";
+export declare function MessengerContactRow({ contact, active, source, }: {
+    contact: MessengerContact;
+    active: boolean;
+    source: MessengerSource;
+}): import("react").JSX.Element;
+export interface MessengerContactListProps {
+    readonly source: MessengerSource;
+    readonly contacts: readonly MessengerContact[];
+    readonly query: string;
+    readonly onQueryChange: (query: string) => void;
+    readonly activeFilter: MessengerFilter | null;
+    readonly onFilterChange: (filterId: string | null) => void;
+    readonly className?: string;
+}
+export declare function MessengerContactList({ source, contacts, query, onQueryChange, activeFilter, onFilterChange, className, }: MessengerContactListProps): import("react").JSX.Element;

package/dist/messenger/MessengerContactList.js

@@ -0,0 +1,210 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { BellOff, MoreHorizontal, Pin, Plus, Search, X } from "lucide-react";
+import { cn } from "@ai-matrx/design-system/cn";
+import { MessengerAvatar } from "./MessengerAvatar.js";
+import { MessengerContextMenu, MessengerDropdownMenu } from "./MessengerMenu.js";
+function formatUnread(count) {
+  return count > 99 ? "99+" : String(count);
+}
+function MessengerContactRow({
+  contact,
+  active,
+  source
+}) {
+  const unread = contact.unread ?? 0;
+  const menu = source.contactMenu;
+  return /* @__PURE__ */ jsx(MessengerContextMenu, { entries: menu ? () => menu(contact) : void 0, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "group relative w-full min-w-0 rounded-lg transition-colors",
+        active ? "bg-accent" : "hover:bg-accent/50"
+      ),
+      "data-contact-id": contact.id,
+      "data-active": active ? "true" : void 0,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => source.onSelectContact(contact.id),
+            "aria-current": active ? "true" : void 0,
+            className: "flex h-[68px] w-full min-w-0 items-center gap-3 px-2 text-left outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
+            children: [
+              /* @__PURE__ */ jsx(MessengerAvatar, { name: contact.name, avatar: contact.avatar, size: "row" }),
+              /* @__PURE__ */ jsxs("span", { className: "flex h-full min-w-0 flex-1 flex-col justify-center gap-0.5 overflow-hidden", children: [
+                /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-baseline gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-[15px] font-medium text-foreground", "data-row-name": true, children: contact.name }),
+                  contact.time ? /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "shrink-0 whitespace-nowrap text-[12px] tabular-nums",
+                        unread > 0 ? "font-medium text-primary" : "text-muted-foreground"
+                      ),
+                      children: contact.time
+                    }
+                  ) : null
+                ] }),
+                /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "min-w-0 flex-1 truncate text-[14px]",
+                        unread > 0 ? "text-foreground" : "text-muted-foreground"
+                      ),
+                      "data-row-preview": true,
+                      children: contact.draft !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "Draft: " }),
+                        contact.draft
+                      ] }) : contact.preview ?? ""
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      className: cn(
+                        "flex shrink-0 items-center gap-1.5 text-muted-foreground",
+                        menu ? "group-hover:invisible group-focus-within:invisible" : void 0
+                      ),
+                      children: [
+                        contact.muted ? /* @__PURE__ */ jsx(BellOff, { className: "h-3.5 w-3.5", "aria-label": "Muted" }) : null,
+                        contact.pinned ? /* @__PURE__ */ jsx(Pin, { className: "h-3.5 w-3.5 rotate-45", "aria-label": "Pinned" }) : null,
+                        unread > 0 ? /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: "min-w-5 rounded-full bg-primary px-1.5 text-center text-[11px] font-semibold leading-5 text-primary-foreground",
+                            "aria-label": `${unread} unread`,
+                            children: formatUnread(unread)
+                          }
+                        ) : null
+                      ]
+                    }
+                  )
+                ] })
+              ] })
+            ]
+          }
+        ),
+        menu ? /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute bottom-2.5 right-2 opacity-0 group-hover:pointer-events-auto group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:opacity-100", children: /* @__PURE__ */ jsx(
+          MessengerDropdownMenu,
+          {
+            entries: () => menu(contact),
+            trigger: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": `More for ${contact.name}`,
+                className: "flex h-6 w-6 items-center justify-center rounded-full text-muted-foreground hover:bg-background hover:text-foreground",
+                children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" })
+              }
+            )
+          }
+        ) }) : null
+      ]
+    }
+  ) });
+}
+function MessengerContactList({
+  source,
+  contacts,
+  query,
+  onQueryChange,
+  activeFilter,
+  onFilterChange,
+  className
+}) {
+  const state = source.listState ?? {};
+  const listMenu = source.listMenu;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": source.title,
+      className: cn("flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden bg-card", className),
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "grid h-14 shrink-0 grid-cols-[36px_1fr_36px] items-center gap-2 px-3", children: [
+          listMenu ? /* @__PURE__ */ jsx(
+            MessengerDropdownMenu,
+            {
+              align: "start",
+              entries: listMenu,
+              trigger: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": `${source.title} menu`,
+                  className: "flex h-9 w-9 items-center justify-center rounded-full border border-border text-foreground hover:bg-accent",
+                  children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" })
+                }
+              )
+            }
+          ) : /* @__PURE__ */ jsx("span", {}),
+          /* @__PURE__ */ jsx("h2", { className: "truncate text-center text-[15px] font-semibold text-foreground", children: source.title }),
+          source.onNew ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: source.onNew,
+              "aria-label": source.newLabel ?? "New",
+              title: source.newLabel ?? "New",
+              className: "flex h-9 w-9 items-center justify-center rounded-full bg-primary text-primary-foreground hover:bg-primary/90",
+              children: /* @__PURE__ */ jsx(Plus, { className: "h-5 w-5", strokeWidth: 2.25 })
+            }
+          ) : /* @__PURE__ */ jsx("span", {})
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "shrink-0 px-3 pb-2", children: /* @__PURE__ */ jsxs("label", { className: "flex h-9 w-full min-w-0 items-center gap-2 rounded-full border border-border bg-background px-3 text-muted-foreground focus-within:border-ring", children: [
+          /* @__PURE__ */ jsx(Search, { className: "h-4 w-4 shrink-0" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "search",
+              value: query,
+              onChange: (event) => onQueryChange(event.target.value),
+              placeholder: "Search",
+              "aria-label": `Search ${source.title}`,
+              className: "min-w-0 flex-1 bg-transparent text-[16px] text-foreground outline-none placeholder:text-muted-foreground md:text-[14px] [&::-webkit-search-cancel-button]:hidden"
+            }
+          ),
+          query !== "" ? /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Clear search", onClick: () => onQueryChange(""), className: "shrink-0 hover:text-foreground", children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) }) : null
+        ] }) }),
+        source.filters && source.filters.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 gap-1.5 overflow-x-auto px-3 pb-2 [scrollbar-width:none]", role: "tablist", "aria-label": "Filters", children: [{ id: "", label: "All" }, ...source.filters].map((filter) => {
+          const on = filter.id === "" ? activeFilter === null : activeFilter?.id === filter.id;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              "aria-selected": on,
+              onClick: () => onFilterChange(filter.id === "" || on ? null : filter.id),
+              className: cn(
+                "h-7 shrink-0 rounded-full px-3 text-[13px] transition-colors",
+                on ? "bg-primary/15 font-medium text-primary" : "bg-muted text-muted-foreground hover:text-foreground"
+              ),
+              children: filter.label
+            },
+            filter.id
+          );
+        }) }) : null,
+        /* @__PURE__ */ jsx("div", { className: "min-h-0 w-full min-w-0 flex-1 overflow-y-auto overflow-x-hidden px-2 pb-2", "data-messenger-list": true, children: state.error ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 px-4 py-8 text-center text-[13px] text-muted-foreground", role: "alert", children: [
+          /* @__PURE__ */ jsx("span", { children: state.error }),
+          state.retry ? /* @__PURE__ */ jsx("button", { type: "button", onClick: state.retry, className: "font-medium text-primary hover:underline", children: "Try again" }) : null
+        ] }) : state.loading && contacts.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-col", "aria-busy": "true", "aria-label": "Loading", children: Array.from({ length: 6 }, (_, i) => /* @__PURE__ */ jsxs("div", { className: "flex h-[68px] items-center gap-3 px-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "h-12 w-12 shrink-0 animate-pulse rounded-full bg-muted" }),
+          /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "h-3 w-1/2 animate-pulse rounded bg-muted" }),
+            /* @__PURE__ */ jsx("span", { className: "h-3 w-3/4 animate-pulse rounded bg-muted" })
+          ] })
+        ] }, i)) }) : contacts.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-4 py-8 text-center text-[13px] text-muted-foreground", children: query !== "" || activeFilter !== null ? "No matches" : state.emptyLabel ?? "Nothing here yet" }) : /* @__PURE__ */ jsxs("ul", { className: "flex w-full min-w-0 flex-col", children: [
+          contacts.map((contact) => /* @__PURE__ */ jsx("li", { className: "w-full min-w-0", children: /* @__PURE__ */ jsx(MessengerContactRow, { contact, active: source.activeContactId === contact.id, source }) }, contact.id)),
+          state.hasMore && state.loadMore ? /* @__PURE__ */ jsx("li", { className: "flex justify-center py-2", children: /* @__PURE__ */ jsx("button", { type: "button", onClick: state.loadMore, className: "text-[13px] font-medium text-primary hover:underline", children: "Load more" }) }) : null
+        ] }) })
+      ]
+    }
+  );
+}
+export {
+  MessengerContactList,
+  MessengerContactRow
+};

package/dist/messenger/MessengerDetails.d.ts

@@ -0,0 +1,20 @@
+/**
+ * The details panel's chrome — big avatar, name, a subtitle, and tabs — the
+ * look of Matrx Desktop's agent panel (Details / Library / Computer). A source
+ * returns this from `renderDetails` with its own tabs; the shell draws the
+ * panel frame and the close button around it.
+ */
+import { type ReactNode } from "react";
+import type { MessengerAvatar as AvatarSpec } from "./contract.js";
+export interface MessengerDetailsTab {
+    readonly id: string;
+    readonly label: string;
+    readonly content: ReactNode;
+}
+export interface MessengerDetailsProps {
+    readonly name: string;
+    readonly avatar?: AvatarSpec;
+    readonly subtitle?: ReactNode;
+    readonly tabs: readonly MessengerDetailsTab[];
+}
+export declare function MessengerDetails({ name, avatar, subtitle, tabs }: MessengerDetailsProps): import("react").JSX.Element;

package/dist/messenger/MessengerDetails.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "@ai-matrx/design-system/cn";
+import { MessengerAvatar } from "./MessengerAvatar.js";
+function MessengerDetails({ name, avatar, subtitle, tabs }) {
+  const [tabId, setTabId] = useState(tabs[0]?.id ?? "");
+  const tab = tabs.find((t) => t.id === tabId) ?? tabs[0];
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-col items-center gap-1 px-4 pb-3 pt-6 text-center", children: [
+      /* @__PURE__ */ jsx(MessengerAvatar, { name, avatar, size: "details" }),
+      /* @__PURE__ */ jsx("h3", { className: "mt-3 max-w-full truncate text-[17px] font-semibold text-foreground", children: name }),
+      subtitle ? /* @__PURE__ */ jsx("div", { className: "max-w-full truncate text-[12px] text-muted-foreground", children: subtitle }) : null
+    ] }),
+    tabs.length > 1 ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 justify-center gap-1 px-4 pb-3", role: "tablist", children: tabs.map((t) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        "aria-selected": t.id === tab?.id,
+        onClick: () => setTabId(t.id),
+        className: cn(
+          "h-7 rounded-full px-2.5 text-[13px] transition-colors",
+          t.id === tab?.id ? "bg-muted font-medium text-foreground" : "text-muted-foreground hover:text-foreground"
+        ),
+        children: t.label
+      },
+      t.id
+    )) }) : null,
+    /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-3 pb-4", role: "tabpanel", children: tab?.content })
+  ] });
+}
+export {
+  MessengerDetails
+};

package/dist/messenger/MessengerMenu.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The source's menu entries drawn with the design system's menus — the SAME
+ * entries as a right-click menu and as a "⋯" dropdown. Never a hand-rolled menu.
+ * Entries are read when the menu OPENS (Radix mounts content only then), so a
+ * source computes them about the clicked item at that moment.
+ */
+import type { ReactNode } from "react";
+import { type MessengerMenuEntry } from "./contract.js";
+type EntriesFn = () => readonly MessengerMenuEntry[];
+/** Right-click on `children` opens the entries. No entries function: children render alone. */
+export declare function MessengerContextMenu({ entries, children }: {
+    entries?: EntriesFn;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** A trigger (the "⋯" button, a header title) that opens the same entries as a dropdown. */
+export declare function MessengerDropdownMenu({ entries, trigger, align, }: {
+    entries: EntriesFn;
+    trigger: ReactNode;
+    align?: "start" | "end";
+}): import("react").JSX.Element;
+export {};