@stigmer/react 3.6.0 → 3.8.0

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

@@ -6,6 +6,7 @@ import { ConfigureMenu, type ConfigureMenuItem } from "./ConfigureMenu.js";
 import { ModelSelector } from "../models/ModelSelector.js";
 import { HarnessSelector } from "../models/HarnessSelector.js";
 import type { HarnessOption } from "../models/harness.js";
+import type { ServiceTierOption } from "../models/service-tier.js";
 import { InteractionModePicker, type InteractionModeOption } from "./InteractionModePicker.js";
 import {
   PaperclipIcon,
@@ -42,6 +43,10 @@ export interface ComposerToolbarProps {
   readonly showModelSelector: boolean;
   readonly modelId?: string;
   readonly onModelChange: (id: string) => void;
+  /** Current service tier for the selected model (#357). */
+  readonly serviceTier?: ServiceTierOption;
+  /** Enables the fast-tier switch inside the model selector's options area. */
+  readonly onServiceTierChange?: (tier: ServiceTierOption) => void;
 
   // -- Right group: Secondary actions (icon-only) ---------------------------
 
@@ -115,6 +120,8 @@ export function ComposerToolbar({
   showModelSelector,
   modelId,
   onModelChange,
+  serviceTier,
+  onServiceTierChange,
 }: ComposerToolbarProps) {
   const showHarnessSeparate = showHarnessSelector && !showModelSelector;
 
@@ -146,6 +153,8 @@ export function ComposerToolbar({
             harness={showHarnessSelector ? undefined : harness}
             initialHarness={showHarnessSelector ? harness : undefined}
             onHarnessChange={showHarnessSelector ? onHarnessChange : undefined}
+            serviceTier={serviceTier}
+            onServiceTierChange={onServiceTierChange}
             disabled={disabled}
           />
         )}

package/src/composer/SessionComposer.tsx

@@ -7,6 +7,7 @@ import { useComposer } from "./useComposer.js";
 import { ComposerToolbar } from "./ComposerToolbar.js";
 import { type ConfigureMenuItem } from "./ConfigureMenu.js";
 import type { HarnessOption } from "../models/harness.js";
+import type { ServiceTierOption } from "../models/service-tier.js";
 import type { InteractionModeOption } from "./InteractionModePicker.js";
 import { parseModelKey } from "../models/registry.js";
 import { WorkspaceEditor } from "../workspace/WorkspaceEditor.js";
@@ -147,6 +148,14 @@ export interface SessionComposerSubmitContext {
    * Pass to execution creation as `execution_config.interaction_mode`.
    */
   readonly interactionMode?: InteractionModeOption;
+  /**
+   * Service tier the user actively selected for this execution
+   * (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`.
+   */
+  readonly serviceTier?: ServiceTierOption;
   /**
    * Workspace-relative file paths the user referenced via drag-to-reference.
    *
@@ -622,6 +631,11 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
     setModelIdRaw(id);
   }, []);
 
+  // Service tier (#357): composer-local state like modelId. "standard" is
+  // the resting default; the ModelSelector's fail-safe resets it when the
+  // user switches to a model without a fast tier.
+  const [serviceTier, setServiceTier] = useState<ServiceTierOption>("standard");
+
   const [displayNames, setDisplayNames] = useState<Map<string, string>>(
     () => new Map(),
   );
@@ -850,13 +864,20 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
           : undefined);
       const hasFileRefs = enableFileReferences && fileRefs.hasRefs;
       const buildFromPlan = overrides?.buildFromPlan;
+      // Carried only when the user actively chose fast: an untouched
+      // 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;
 
       const context: SessionComposerSubmitContext | undefined =
         hasEnv || hasAttachments || effectiveMode || hasFileRefs || buildFromPlan
+        || effectiveServiceTier
           ? {
               runtimeEnv: hasEnv ? env : undefined,
               attachments: hasAttachments ? attachmentInputs : undefined,
               interactionMode: effectiveMode,
+              serviceTier: effectiveServiceTier,
               workspaceFileRefs: hasFileRefs ? [...fileRefs.refs] : undefined,
               buildFromPlan,
             }
@@ -874,7 +895,7 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
         fileRefs.clear();
       }
     },
-    [onSubmit, modelId, stigmer, agentSetup.state, mcpSetup.pendingRuntimeEnv, sessionVariables, enableAttachments, attachments, personalEnv, showInteractionModePicker, interactionMode],
+    [onSubmit, modelId, serviceTier, stigmer, agentSetup.state, mcpSetup.pendingRuntimeEnv, sessionVariables, enableAttachments, attachments, personalEnv, showInteractionModePicker, interactionMode],
   );
 
   const composer = useComposer({
@@ -1614,6 +1635,8 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
           showModelSelector={showModelSelector}
           modelId={modelId}
           onModelChange={handleModelChange}
+          serviceTier={serviceTier}
+          onServiceTierChange={setServiceTier}
         />
       </div>
     </div>

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

@@ -0,0 +1,157 @@
+import { describe, it, expect, vi, afterEach, beforeAll } from "vitest";
+import { render, screen, cleanup, fireEvent, waitFor } from "@testing-library/react";
+import { type ReactNode } from "react";
+import type { Stigmer } from "@stigmer/sdk";
+import { StigmerContext } from "../../context";
+import { ModelRegistryContext } from "../../models/ModelRegistryContext";
+import type { ModelInfo } from "../../models/registry";
+import { SessionComposer } from "../SessionComposer";
+
+// Portal into document.body so the popover mounts under happy-dom, and shim
+// ResizeObserver for Base UI's positioner (the scheduleCreation.test.tsx
+// pattern).
+vi.mock("../../portal-container", () => ({
+  useStigmerPortalContainer: () => document.body,
+}));
+
+beforeAll(() => {
+  if (!("ResizeObserver" in globalThis)) {
+    (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver =
+      class {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+      };
+  }
+});
+
+/**
+ * End-to-end composer wiring for the service tier (stigmer/stigmer#357):
+ * the toolbar's ModelSelector toggle must reach composer state, and an
+ * active fast selection must ride the submit context to execution create.
+ * This seam (SessionComposer → ComposerToolbar props → submit context) is
+ * exactly where the feature can silently die while every layer on either
+ * side unit-tests green.
+ */
+
+const FAST_CAPABLE: ModelInfo = {
+  modelId: "composer-2.5",
+  provider: "cursor",
+  displayName: "Composer 2.5",
+  shortDescription: "Fast agentic model",
+  speedTier: "fastest",
+  costTier: "economy",
+  harness: "cursor",
+  featured: true,
+  serviceTiers: ["fast"],
+};
+
+function createMinimalStigmerMock(): Stigmer {
+  return {
+    agentExecution: { uploadAttachment: vi.fn() },
+    environment: { getPersonal: vi.fn().mockResolvedValue(null) },
+    baseUrl: "http://localhost:8080",
+    getAuthCredential: vi.fn().mockResolvedValue("test-token"),
+    config: {
+      baseUrl: "http://localhost:8080",
+      getAccessToken: vi.fn().mockResolvedValue(""),
+    },
+  } as unknown as Stigmer;
+}
+
+function createWrapper(client: Stigmer) {
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return (
+      <StigmerContext.Provider value={client}>
+        <ModelRegistryContext.Provider
+          value={{
+            models: [FAST_CAPABLE],
+            isLoading: false,
+            error: null,
+            refetch: vi.fn(),
+          }}
+        >
+          {children}
+        </ModelRegistryContext.Provider>
+      </StigmerContext.Provider>
+    );
+  };
+}
+
+function renderComposer() {
+  const client = createMinimalStigmerMock();
+  const onSubmit = vi.fn();
+
+  const result = render(
+    <SessionComposer
+      onSubmit={onSubmit}
+      harness="cursor"
+      defaultModelId="composer-2.5"
+    />,
+    { wrapper: createWrapper(client) },
+  );
+
+  return { ...result, onSubmit };
+}
+
+function submitMessage(message: string) {
+  const textarea = screen.getByRole("textbox");
+  fireEvent.change(textarea, { target: { value: message } });
+  fireEvent.keyDown(textarea, { key: "Enter", shiftKey: false });
+}
+
+/**
+ * Open the model selector popover (Base UI portals mount asynchronously in
+ * 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/ }));
+  const toggle = await screen.findByRole("switch", { name: "Fast tier" });
+  fireEvent.click(toggle);
+  fireEvent.keyDown(document.activeElement ?? document.body, { key: "Escape" });
+}
+
+afterEach(cleanup);
+
+describe("SessionComposer — service tier submit contract", () => {
+  it("renders the tier switch through the toolbar for a fast-capable model", async () => {
+    renderComposer();
+
+    fireEvent.click(screen.getByRole("button", { name: /Composer 2\.5/ }));
+    expect(await screen.findByRole("switch", { name: "Fast tier" })).toBeTruthy();
+  });
+
+  it("carries serviceTier 'fast' on the submit context after toggling", async () => {
+    const { onSubmit } = renderComposer();
+
+    await toggleFastTier();
+    submitMessage("Run it fast");
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledOnce());
+    const context = onSubmit.mock.calls[0][2];
+    expect(context?.serviceTier).toBe("fast");
+  });
+
+  it("leaves serviceTier undefined when the switch is untouched", async () => {
+    const { onSubmit } = renderComposer();
+
+    submitMessage("Run it normally");
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledOnce());
+    const context = onSubmit.mock.calls[0][2];
+    expect(context?.serviceTier).toBeUndefined();
+  });
+
+  it("leaves serviceTier undefined after toggling fast on and back off", async () => {
+    const { onSubmit } = renderComposer();
+
+    await toggleFastTier();
+    await toggleFastTier();
+    submitMessage("Changed my mind");
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledOnce());
+    const context = onSubmit.mock.calls[0][2];
+    expect(context?.serviceTier).toBeUndefined();
+  });
+});

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>
+  );
+}