@stigmer/react 3.7.0 → 3.8.0

package/src/channel/ChannelConversationsDialog.tsx

@@ -7,6 +7,7 @@ import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
 import type { AgentChannel } from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/api_pb";
 import type { Session } from "@stigmer/protos/ai/stigmer/agentic/session/v1/api_pb";
+import { formatRelativeTime } from "../activity/format-relative-time.js";
 import { Button } from "../button/Button.js";
 import { EmptyState } from "../empty-state/EmptyState.js";
 import { channelSessionExternalUserKey } from "../session/channelOrigin.js";
@@ -37,11 +38,19 @@ export interface ChannelConversationsDialogProps {
 }
 
 /**
- * Lists the conversations a channel created — the Slack/WhatsApp sessions
- * the channel runtime owns, visible to exactly the channel's viewers (the
- * connector and org admins; design decision 012).
+ * Lists the SESSIONS a channel created — the session-level forensics view
+ * (which execution containers served the channel's traffic), visible to
+ * exactly the channel's viewers (the connector and org admins; design
+ * decision 012).
  *
- * Each row shows the conversation subject, the external platform user it
+ * Deliberately titled "Sessions", not "Conversations": the customer-facing
+ * Conversations surface is the top-level `ConversationsWorkbench` over the
+ * conversation timeline API, which supersedes this read for that purpose
+ * (channel-conversations DD-004 D-g). This dialog remains what it actually
+ * is — the observability view underneath a conversation. The component
+ * name keeps its historical export for API stability.
+ *
+ * Each row shows the session subject, the external platform user it
  * belongs to (an opaque provider id in v1), and the last activity time.
  * Rows link to the host's session route, where `SessionViewer` renders the
  * transcript read-only (the observer audience — channel viewers hold
@@ -126,10 +135,10 @@ function ChannelConversationsDialogBody({
             id="channel-conversations-title"
             className="text-sm font-semibold text-popover-foreground"
           >
-            Conversations
+            Sessions
           </h2>
           <p className="mt-0.5 truncate text-xs text-muted-foreground">
-            What people asked {channelName} — read-only, visible to the
+            The sessions {channelName} created — read-only, visible to the
             channel&apos;s owner and org admins.
           </p>
         </div>
@@ -137,7 +146,7 @@ function ChannelConversationsDialogBody({
           variant="ghost"
           size="xs"
           onClick={onClose}
-          aria-label="Close conversations"
+          aria-label="Close sessions"
         >
           <X className="size-4" />
         </Button>
@@ -154,8 +163,8 @@ function ChannelConversationsDialogBody({
           <EmptyState
             variant="first-use"
             icon={<MessageSquare className="size-8" />}
-            title="No conversations yet"
-            description="When someone messages this channel, their conversation appears here."
+            title="No sessions yet"
+            description="When someone messages this channel, the sessions serving them appear here."
           />
         ) : (
           <ul className="space-y-1">
@@ -184,7 +193,7 @@ function ConversationRow({
   readonly session: Session;
   readonly href?: string;
 }) {
-  const subject = session.spec?.subject || "Untitled conversation";
+  const subject = session.spec?.subject || "Untitled session";
   const externalUser = channelSessionExternalUserKey(session);
   const lastActivity = lastActivityDate(session);
 
@@ -242,9 +251,9 @@ function ConversationsSkeleton() {
 }
 
 /**
- * The conversation's last activity: `statusAudit.updatedAt` (bumped on
- * every meaningful status change), falling back to `specAudit.createdAt`
- * — the recent-activity sort key, so the dialog agrees with the server's
+ * The session's last activity: `statusAudit.updatedAt` (bumped on every
+ * meaningful status change), falling back to `specAudit.createdAt` —
+ * the recent-activity sort key, so the dialog agrees with the server's
  * ordering.
  */
 function lastActivityDate(session: Session): Date | null {
@@ -253,15 +262,3 @@ function lastActivityDate(session: Session): Date | null {
     session.status?.audit?.specAudit?.createdAt;
   return ts ? timestampDate(ts) : null;
 }
-
-function formatRelativeTime(date: Date): string {
-  const seconds = Math.floor((Date.now() - date.getTime()) / 1000);
-  if (seconds < 60) return "just now";
-  const minutes = Math.floor(seconds / 60);
-  if (minutes < 60) return `${minutes}m ago`;
-  const hours = Math.floor(minutes / 60);
-  if (hours < 24) return `${hours}h ago`;
-  const days = Math.floor(hours / 24);
-  if (days < 30) return `${days}d ago`;
-  return date.toLocaleDateString();
-}

package/src/channel/__tests__/AgentChannelsPanel.test.tsx

@@ -419,16 +419,47 @@ describe("AgentChannelsPanel", () => {
     expect(screen.queryByRole("switch")).toBeNull();
     expect(screen.queryByRole("button", { name: /connect to slack/i })).toBeNull();
 
-    // The card menu still renders: Conversations is a viewer-level action
+    // The card menu still renders: Sessions is a viewer-level action
     // (everyone who sees the card holds can_view on the channel — the same
-    // bar as viewing its conversations, DD-012). Mutation items stay
+    // bar as viewing its sessions, DD-012). Mutation items stay
     // permission-gated and absent.
     fireEvent.click(screen.getByRole("button", { name: /actions for/i }));
-    expect(screen.getByRole("menuitem", { name: /conversations/i })).toBeTruthy();
+    expect(screen.getByRole("menuitem", { name: /sessions/i })).toBeTruthy();
     expect(screen.queryByRole("menuitem", { name: /tool credentials/i })).toBeNull();
     expect(screen.queryByRole("menuitem", { name: /disconnect/i })).toBeNull();
   });
 
+  it("offers Manage access from the card menu — the channel's canonical access home (F-11)", async () => {
+    const client = createMockStigmer({
+      channels: [makeChannel({ teamName: "Acme HQ" })],
+    });
+    // The dialog's People section lists existing grants on open.
+    (
+      client as { iamPolicy: Record<string, unknown> }
+    ).iamPolicy.listResourceAccessByPrincipal = vi
+      .fn()
+      .mockResolvedValue({ entries: [] });
+    render(
+      <Providers client={client}>
+        <AgentChannelsPanel agent={makeAgent()} />
+      </Providers>,
+    );
+    await waitFor(() => expect(screen.getByText("Support Slack")).toBeTruthy());
+
+    fireEvent.click(screen.getByRole("button", { name: /actions for/i }));
+    fireEvent.click(screen.getByRole("menuitem", { name: /manage access/i }));
+
+    // The one canonical dialog opens, and its subtitle names the channel
+    // — the scope every grant covers (a participant grant is per
+    // channel, never per conversation).
+    await waitFor(() =>
+      expect(screen.getByRole("heading", { name: "Manage access" })).toBeTruthy(),
+    );
+    const dialog = document.querySelector("dialog");
+    expect(dialog).not.toBeNull();
+    expect(within(dialog as HTMLElement).getByText("Support Slack")).toBeTruthy();
+  });
+
   it("warns on an installed card when a tool-using agent has no credentials bound", async () => {
     const client = createMockStigmer({
       channels: [makeChannel({ teamName: "Acme HQ" })],
@@ -655,7 +686,7 @@ describe("AgentChannelsPanel", () => {
     // Slack has no template concept: hidden, not disabled — a disabled
     // item would imply the capability might one day exist there.
     expect(
-      await screen.findByRole("menuitem", { name: /conversations/i }),
+      await screen.findByRole("menuitem", { name: /sessions/i }),
     ).toBeTruthy();
     expect(screen.queryByRole("menuitem", { name: "Templates" })).toBeNull();
   });
@@ -681,7 +712,7 @@ describe("AgentChannelsPanel", () => {
     fireEvent.click(screen.getByRole("button", { name: /actions for/i }));
 
     expect(
-      await screen.findByRole("menuitem", { name: /conversations/i }),
+      await screen.findByRole("menuitem", { name: /sessions/i }),
     ).toBeTruthy();
     expect(screen.queryByRole("menuitem", { name: "Templates" })).toBeNull();
   });

package/src/channel/__tests__/ChannelConversationsDialog.test.tsx

@@ -1,6 +1,7 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { render, screen, cleanup, waitFor } from "@testing-library/react";
 import type { ReactNode } from "react";
+import { timestampFromDate } from "@bufbuild/protobuf/wkt";
 import type { AgentChannel } from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/api_pb";
 import { StigmerContext } from "../../context";
 import { FetchCacheContext } from "../../internal/FetchCacheProvider";
@@ -92,11 +93,47 @@ describe("ChannelConversationsDialog", () => {
     expect(screen.queryAllByRole("link")).toHaveLength(0);
   });
 
+  it("titles itself Sessions and falls back to Untitled session (F-04, DD-004 D-g)", async () => {
+    // The word "conversation" belongs to the customer-facing surface;
+    // this dialog is the session-level forensics view.
+    const listByChannel = vi.fn().mockResolvedValue({
+      entries: [makeChannelSession("ses_1", "")],
+    });
+
+    renderDialog(listByChannel);
+
+    expect(screen.getByRole("heading", { name: "Sessions" })).toBeDefined();
+    await waitFor(() => expect(screen.getByText("Untitled session")).toBeDefined());
+    expect(screen.queryByText("Untitled conversation")).toBeNull();
+  });
+
+  it("formats activity in the shared compact style, matching the inbox (F-04)", async () => {
+    const fiveMinutesAgo = new Date(Date.now() - 5 * 60_000);
+    const listByChannel = vi.fn().mockResolvedValue({
+      entries: [
+        {
+          ...makeChannelSession("ses_1", "Deploy help"),
+          status: {
+            audit: { statusAudit: { updatedAt: timestampFromDate(fiveMinutesAgo) } },
+          },
+        },
+      ],
+    });
+
+    renderDialog(listByChannel);
+
+    // The shared helper's compact single-unit style ("5m"), not the
+    // retired local formatter's "5m ago" — one time vocabulary across
+    // the channel dialog and the conversations inbox.
+    await waitFor(() => expect(screen.getByText("5m")).toBeDefined());
+    expect(screen.queryByText("5m ago")).toBeNull();
+  });
+
   it("shows the empty state when nobody has messaged the channel", async () => {
     renderDialog(vi.fn().mockResolvedValue({ entries: [] }));
 
     await waitFor(() =>
-      expect(screen.getByText("No conversations yet")).toBeDefined(),
+      expect(screen.getByText("No sessions yet")).toBeDefined(),
     );
   });
 

package/src/channel/__tests__/useSaveAgentChannel.test.tsx

@@ -124,6 +124,32 @@ describe("agentChannelToInput", () => {
     expect(input).not.toHaveProperty("appRef");
   });
 
+  it("carries run_config — the toggle must never wipe an API-set execution override", () => {
+    const channel = makeChannel({
+      spec: {
+        agentRef: { org: "acme", slug: "support-agent" },
+        enabled: true,
+        providerConfig: { case: "slack", value: {} },
+        // Set via CLI/API (stigmer/stigmer#360); no console surface edits
+        // it, so it must ride through the full-input rebuild opaquely.
+        runConfig: { modelName: "gpt-5-mini", maxCostUsd: 0.25, maxToolRounds: 8 },
+      },
+    });
+
+    const input = agentChannelToInput(channel);
+    expect(input.runConfig).toEqual({
+      modelName: "gpt-5-mini",
+      maxCostUsd: 0.25,
+      maxToolRounds: 8,
+      serviceTier: undefined,
+    });
+  });
+
+  it("omits runConfig entirely when the channel carries none", () => {
+    const input = agentChannelToInput(makeChannel());
+    expect(input).not.toHaveProperty("runConfig");
+  });
+
   it("omits the slack marker when the provider config is absent", () => {
     const channel = makeChannel({
       spec: {

package/src/channel/providers.ts

@@ -55,6 +55,29 @@ export interface ChannelProviderDescriptor {
    * there one day.
    */
   readonly supportsMessageTemplates: boolean;
+  /**
+   * Whether staff can reply into and take over live conversations on
+   * this provider. Mirrors the server's `ProactiveMessageSender`
+   * registry — the same registry behind `reply`/`takeOver` refusing
+   * senderless providers with FAILED_PRECONDITION ("this channel's
+   * provider has no send lane for staff messages").
+   *
+   * Unlike templates, `false` here renders as DISABLED-with-explanation
+   * rather than hidden: the send lane is a planned capability (the
+   * suppression doors are already wired provider-blind server-side), so
+   * the affordance should say why it is off, not pretend it cannot
+   * exist. The server refusal stays the authoritative backstop.
+   */
+  readonly supportsStaffReplies: boolean;
+  /**
+   * Whether the conversation timeline includes the CUSTOMER's own
+   * messages on this provider. Mirrors the cloud stitcher's inbound
+   * sources: WhatsApp inbound rides a per-conversation event store;
+   * Slack's inbound lane has no timeline source yet, so its timeline
+   * shows only replies, sends, and internal events. Consumers render an
+   * honest notice instead of a silently one-sided thread.
+   */
+  readonly timelineIncludesCustomerMessages: boolean;
 }
 
 /**
@@ -73,6 +96,8 @@ export const CHANNEL_PROVIDERS: readonly ChannelProviderDescriptor[] = [
     Icon: SlackMarkIcon,
     installStyle: "redirect",
     supportsMessageTemplates: false,
+    supportsStaffReplies: false,
+    timelineIncludesCustomerMessages: false,
   },
   {
     id: "whatsapp",
@@ -80,6 +105,8 @@ export const CHANNEL_PROVIDERS: readonly ChannelProviderDescriptor[] = [
     Icon: WhatsAppMarkIcon,
     installStyle: "direct",
     supportsMessageTemplates: true,
+    supportsStaffReplies: true,
+    timelineIncludesCustomerMessages: true,
   },
 ];
 

package/src/channel/useSaveAgentChannel.ts

@@ -23,10 +23,11 @@ import { toError } from "../internal/toError.js";
  * carries its declared `phone_number_id`. Dropping the arm is never an
  * option — the provider oneof is immutable server-side, so a save
  * without it would be refused outright. The channel's bound tool
- * credentials (`environment_refs`) and its channel-app binding
- * (`app_ref`) carry over too — apply semantics would otherwise silently
- * unbind them on every toggle (and an installed channel's app_ref is
- * frozen server-side, so dropping it would refuse the save outright).
+ * credentials (`environment_refs`), its channel-app binding
+ * (`app_ref`), and its per-channel execution override (`run_config`)
+ * carry over too — apply semantics would otherwise silently unbind
+ * them on every toggle (and an installed channel's app_ref is frozen
+ * server-side, so dropping it would refuse the save outright).
  */
 export function agentChannelToInput(channel: AgentChannel): AgentChannelInput {
   const metadata = channel.metadata;
@@ -65,6 +66,19 @@ export function agentChannelToInput(channel: AgentChannel): AgentChannelInput {
           })),
         }
       : {}),
+    // The console does not edit run_config (yet) — it rides through
+    // opaquely so a settings save or pause/resume toggle never wipes an
+    // override set via the CLI or API.
+    ...(spec?.runConfig
+      ? {
+          runConfig: {
+            modelName: spec.runConfig.modelName,
+            maxCostUsd: spec.runConfig.maxCostUsd,
+            maxToolRounds: spec.runConfig.maxToolRounds,
+            serviceTier: spec.runConfig.serviceTier,
+          },
+        }
+      : {}),
   };
 }
 

package/src/composer/ComposerToolbar.tsx

@@ -45,7 +45,7 @@ export interface ComposerToolbarProps {
   readonly onModelChange: (id: string) => void;
   /** Current service tier for the selected model (#357). */
   readonly serviceTier?: ServiceTierOption;
-  /** Enables the fast-tier toggle inside the model selector. */
+  /** Enables the fast-tier switch inside the model selector's options area. */
   readonly onServiceTierChange?: (tier: ServiceTierOption) => void;
 
   // -- Right group: Secondary actions (icon-only) ---------------------------

package/src/composer/SessionComposer.tsx

@@ -150,7 +150,7 @@ export interface SessionComposerSubmitContext {
   readonly interactionMode?: InteractionModeOption;
   /**
    * Service tier the user actively selected for this execution
-   * (stigmer/stigmer#357). Only ever `"fast"` — an untouched toggle means
+   * (stigmer/stigmer#357). Only ever `"fast"` — an untouched tier means
    * "platform default" and is carried as `undefined`, preserving the
    * unspecified-vs-explicit distinction all the way to the ledger.
    * Pass to execution creation as `execution_config.service_tier`.
@@ -865,7 +865,7 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
       const hasFileRefs = enableFileReferences && fileRefs.hasRefs;
       const buildFromPlan = overrides?.buildFromPlan;
       // Carried only when the user actively chose fast: an untouched
-      // toggle means "platform default" (which resolves to standard in
+      // tier means "platform default" (which resolves to standard in
       // the runner), and the UNSPECIFIED-vs-explicit distinction is
       // load-bearing telemetry (#357).
       const effectiveServiceTier = serviceTier === "fast" ? serviceTier : undefined;

package/src/composer/__tests__/SessionComposer-serviceTier.test.tsx

@@ -102,7 +102,8 @@ function submitMessage(message: string) {
 
 /**
  * Open the model selector popover (Base UI portals mount asynchronously in
- * jsdom — the switch is awaited) and flip the fast-tier toggle.
+ * jsdom — the switch is awaited) and flip the fast-tier switch in the
+ * options area, then close the popover (toggling keeps it open).
  */
 async function toggleFastTier() {
   fireEvent.click(screen.getByRole("button", { name: /Composer 2\.5/ }));
@@ -114,7 +115,7 @@ async function toggleFastTier() {
 afterEach(cleanup);
 
 describe("SessionComposer — service tier submit contract", () => {
-  it("renders the tier toggle through the toolbar for a fast-capable model", async () => {
+  it("renders the tier switch through the toolbar for a fast-capable model", async () => {
     renderComposer();
 
     fireEvent.click(screen.getByRole("button", { name: /Composer 2\.5/ }));
@@ -132,7 +133,7 @@ describe("SessionComposer — service tier submit contract", () => {
     expect(context?.serviceTier).toBe("fast");
   });
 
-  it("leaves serviceTier undefined when the toggle is untouched", async () => {
+  it("leaves serviceTier undefined when the switch is untouched", async () => {
     const { onSubmit } = renderComposer();
 
     submitMessage("Run it normally");

package/src/conversation/ConversationAttentionBanner.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { TriangleAlert } from "lucide-react";
+import { cn } from "@stigmer/theme";
+import { getUserMessage } from "@stigmer/sdk";
+import type { ChannelConversation } from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/conversation_io_pb";
+import { Button } from "../button/Button.js";
+import type { UseConversationParticipationReturn } from "./useConversationParticipation.js";
+
+/** Props for {@link ConversationAttentionBanner}. */
+export interface ConversationAttentionBannerProps {
+  /** The conversation's fresh participation state. */
+  readonly conversation: ChannelConversation;
+  /** The participation commands (from `useConversationParticipation`). */
+  readonly participation: UseConversationParticipationReturn;
+  /** Additional classes for the banner container. */
+  readonly className?: string;
+}
+
+/**
+ * The needs-attention banner (channel-conversations DD-008): the
+ * escalating agent's reason, verbatim, with the false-alarm dismissal.
+ *
+ * Dismiss is `clearAttention` — attention clears in place and control
+ * never moves (taking over also clears it, structurally, because the
+ * human arriving IS the answer to an escalation). Renders nothing while
+ * the conversation is unflagged.
+ */
+export function ConversationAttentionBanner({
+  conversation,
+  participation,
+  className,
+}: ConversationAttentionBannerProps) {
+  if (!conversation.needsAttention) return null;
+
+  const { clearAttention, pendingCommands, commandErrors } = participation;
+  const error = commandErrors.get("clearAttention");
+
+  return (
+    <div
+      className={cn(
+        "border-b border-border bg-destructive-subtle px-4 py-2",
+        className,
+      )}
+      role="status"
+    >
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <p className="flex min-w-0 items-start gap-1.5 text-sm text-destructive">
+          <TriangleAlert aria-hidden="true" className="mt-0.5 size-4 shrink-0" />
+          <span className="min-w-0 break-words">
+            The agent asked for a human
+            {conversation.attentionReason ? (
+              <> — &ldquo;{conversation.attentionReason}&rdquo;</>
+            ) : (
+              "."
+            )}
+          </span>
+        </p>
+        <Button
+          variant="outline"
+          size="xs"
+          onClick={() =>
+            void clearAttention().catch(() => {
+              // Recorded in commandErrors and rendered below.
+            })
+          }
+          disabled={pendingCommands.has("clearAttention")}
+        >
+          {pendingCommands.has("clearAttention") ? "Dismissing…" : "Dismiss"}
+        </Button>
+      </div>
+      {error && (
+        <p className="mt-1 text-xs text-destructive">{getUserMessage(error)}</p>
+      )}
+    </div>
+  );
+}

package/src/conversation/ConversationComposer.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import { useId, useState } from "react";
+import { Send, TriangleAlert } from "lucide-react";
+import { cn } from "@stigmer/theme";
+import { getUserMessage } from "@stigmer/sdk";
+import { ChannelSendOutcome } from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/message_io_pb";
+import type { SendChannelMessageOutput } from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/message_io_pb";
+import { Button } from "../button/Button.js";
+import { SpinnerIcon } from "../composer/icons.js";
+import { useComposer } from "../composer/useComposer.js";
+
+/** Props for {@link ConversationComposer}. */
+export interface ConversationComposerProps {
+  /** Send a staff reply (from `useConversationParticipation().reply`). */
+  readonly onSend: (text: string) => Promise<SendChannelMessageOutput>;
+  /** `true` while a reply is in flight. */
+  readonly isSending: boolean;
+  /**
+   * Why replying is unavailable, when it is — rendered in place of the
+   * input (a senderless provider, or a conversation the customer has
+   * not started yet). `null` enables the composer.
+   */
+  readonly disabledReason: string | null;
+  /**
+   * A pre-send forecast that ANNOTATES the enabled input — the
+   * `disabledReason` pattern's sibling with the opposite contract
+   * (channel-conversations DD-014 D-e): a closed service window is a
+   * forecast, not a structural block, so the input stays usable and the
+   * send engines remain the authority. Rendered above the input and
+   * associated via `aria-describedby` (never a live region: the
+   * advisory is state a reader meets on open, not an event). Compute it
+   * with `serviceWindowOf`; `null` or omitted renders nothing.
+   */
+  readonly advisory?: string | null;
+  /** Additional classes for the composer container. */
+  readonly className?: string;
+}
+
+/**
+ * The staff reply composer. Sending is an implicit takeover — the agent
+ * goes quiet the moment a staff reply lands, before the send itself —
+ * so this composer is only ever rendered alongside the control banner
+ * that shows that state change.
+ *
+ * Outcome honesty: `refused` keeps the draft (the words never left) and
+ * renders the server's refusal detail verbatim; `queued` clears it and
+ * says the platform is retrying; a thrown failure keeps the draft and
+ * renders the error. The timeline shows the delivered item via its own
+ * read — this component never fabricates one.
+ */
+export function ConversationComposer({
+  onSend,
+  isSending,
+  disabledReason,
+  advisory,
+  className,
+}: ConversationComposerProps) {
+  const advisoryId = useId();
+  const hasAdvisory = advisory != null && advisory !== "";
+  const [notice, setNotice] = useState<{
+    readonly kind: "refused" | "queued" | "error";
+    readonly text: string;
+  } | null>(null);
+
+  const composer = useComposer({
+    onSubmit: (message) => {
+      setNotice(null);
+      onSend(message).then(
+        (output) => {
+          if (output.outcome === ChannelSendOutcome.refused) {
+            // The words never left; keep them so the user can adjust.
+            composer.setMessage(message);
+            setNotice({
+              kind: "refused",
+              text: output.detail || "The provider refused this message.",
+            });
+          } else if (output.outcome === ChannelSendOutcome.queued) {
+            setNotice({
+              kind: "queued",
+              text: "Delivery hit a transient issue — the platform is retrying in the background.",
+            });
+          }
+        },
+        (err) => {
+          composer.setMessage(message);
+          setNotice({ kind: "error", text: getUserMessage(err) });
+        },
+      );
+    },
+    disabled: disabledReason !== null || isSending,
+  });
+
+  if (disabledReason !== null) {
+    return (
+      <div className={cn("border-t border-border px-4 py-3", className)}>
+        <p className="text-center text-xs text-muted-foreground">{disabledReason}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("border-t border-border px-4 py-3", className)}>
+      {/* The persistent forecast sits above the transient send-outcome
+          notice: the notice is the more recent event and belongs closest
+          to the input it reacts to. */}
+      {hasAdvisory && (
+        <p
+          id={advisoryId}
+          className="mb-2 flex items-start gap-1.5 rounded-md bg-status-degraded-subtle px-2.5 py-1.5 text-xs text-status-degraded"
+        >
+          <TriangleAlert aria-hidden="true" className="mt-0.5 size-3.5 shrink-0" />
+          <span className="min-w-0">{advisory}</span>
+        </p>
+      )}
+      {notice && (
+        <p
+          className={cn(
+            "mb-2 text-xs",
+            notice.kind === "queued" ? "text-muted-foreground" : "text-destructive",
+          )}
+          role="status"
+        >
+          {notice.text}
+        </p>
+      )}
+      <div className="flex items-end gap-2">
+        <textarea
+          {...composer.textareaProps}
+          rows={1}
+          placeholder="Reply as your business…"
+          aria-label="Reply to the customer"
+          aria-describedby={hasAdvisory ? advisoryId : undefined}
+          className={cn(
+            "min-h-9 flex-1 resize-none rounded-md border border-border bg-background",
+            "px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground-faint",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          )}
+        />
+        <Button
+          variant="primary"
+          size="sm"
+          onClick={composer.submit}
+          disabled={!composer.canSubmit || isSending}
+          aria-label="Send reply"
+        >
+          {/* The house in-flight glyph (the session composer's pattern):
+              the spinner replaces the Send icon so the button itself
+              reports progress, not just its label. */}
+          {isSending ? <SpinnerIcon /> : <Send aria-hidden="true" className="size-4" />}
+          {isSending ? "Sending…" : "Send"}
+        </Button>
+      </div>
+    </div>
+  );
+}