@stigmer/react 3.12.4 → 3.12.6

package/src/channel-app/__tests__/channelAppWipeSafety.test.tsx

@@ -0,0 +1,87 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, fireEvent, waitFor, cleanup } from "@testing-library/react";
+import { create } from "@bufbuild/protobuf";
+import {
+  ChannelAppSchema,
+  type ChannelApp,
+} from "@stigmer/protos/ai/stigmer/agentic/channelapp/v1/api_pb";
+import type { ChannelAppInput } from "@stigmer/sdk";
+import { StigmerContext } from "../../context";
+import { ChannelAppDetailPanel } from "../ChannelAppDetailPanel";
+
+/**
+ * Regression suite for the full-spec-replace wipe bug: both detail forms
+ * must spread `toChannelAppUpdateInput` and override only their provider
+ * arm, so identity fields and any future spec field survive the save.
+ * Secrets follow the redaction contract: the form is seeded with the
+ * server's redaction marker, and sending the marker back means "keep the
+ * stored value" (per-field, verified by the backend's
+ * TestRedactAndEncryptCoverEveryProviderArm).
+ */
+
+const REDACTED = "***REDACTED***";
+
+const SLACK_APP: ChannelApp = create(ChannelAppSchema, {
+  metadata: {
+    id: "chapp_1",
+    name: "Acme Slack",
+    slug: "acme-slack",
+    org: "acme",
+    labels: { team: "support" },
+  },
+  spec: {
+    providerConfig: {
+      case: "slack",
+      value: {
+        clientId: "1234.5678",
+        clientSecret: REDACTED,
+        signingSecret: REDACTED,
+      },
+    },
+  },
+});
+
+function renderPanel(update: ReturnType<typeof vi.fn>) {
+  const client = {
+    baseUrl: "https://api.stigmer.ai",
+    channelapp: { update, delete: vi.fn(async () => ({})) },
+  } as never;
+  return render(
+    <StigmerContext.Provider value={client}>
+      <ChannelAppDetailPanel
+        channelApp={SLACK_APP}
+        consoleOrigin="https://console.acme.example"
+      />
+    </StigmerContext.Provider>,
+  );
+}
+
+afterEach(cleanup);
+
+describe("ChannelAppDetailPanel save payload (slack arm)", () => {
+  it("spreads the complete mapped input and overrides only the slack config", async () => {
+    const update = vi.fn(async (_input: ChannelAppInput) => SLACK_APP);
+    renderPanel(update);
+
+    const clientId = await screen.findByLabelText(/client id/i);
+    fireEvent.change(clientId, { target: { value: "9999.0000" } });
+    fireEvent.click(screen.getByRole("button", { name: /save credentials/i }));
+
+    await waitFor(() => expect(update).toHaveBeenCalledTimes(1));
+    const input = update.mock.calls[0]![0];
+
+    // The edited field, plus per-field keep-markers for untouched secrets.
+    expect(input.slack).toEqual({
+      clientId: "9999.0000",
+      clientSecret: REDACTED,
+      signingSecret: REDACTED,
+    });
+    // Identity and unrendered metadata survive via the mapper spread.
+    expect(input.name).toBe("Acme Slack");
+    expect(input.org).toBe("acme");
+    expect(input.slug).toBe("acme-slack");
+    expect(input.labels).toEqual({ team: "support" });
+    // The other provider arm stays absent — the oneof is preserved.
+    expect(input.whatsapp).toBeUndefined();
+  });
+});

package/src/composer/ComposerToolbar.tsx

@@ -13,6 +13,7 @@ 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 type { ThinkingModeOption } from "../models/thinking-mode.js";
 import { InteractionModePicker, type InteractionModeOption } from "./InteractionModePicker.js";
 import {
   PaperclipIcon,
@@ -53,6 +54,10 @@ export interface ComposerToolbarProps {
   readonly serviceTier?: ServiceTierOption;
   /** Enables the fast-tier switch inside the model selector's options area. */
   readonly onServiceTierChange?: (tier: ServiceTierOption) => void;
+  /** Current thinking mode for the selected model (#772). */
+  readonly thinkingMode?: ThinkingModeOption;
+  /** Enables the thinking switch inside the model selector's options area. */
+  readonly onThinkingModeChange?: (mode: ThinkingModeOption) => void;
 
   // -- Right group: Secondary actions (icon-only) ---------------------------
 
@@ -128,6 +133,8 @@ export function ComposerToolbar({
   onModelChange,
   serviceTier,
   onServiceTierChange,
+  thinkingMode,
+  onThinkingModeChange,
 }: ComposerToolbarProps) {
   const showHarnessSeparate = showHarnessSelector && !showModelSelector;
 
@@ -161,6 +168,8 @@ export function ComposerToolbar({
             onHarnessChange={showHarnessSelector ? onHarnessChange : undefined}
             serviceTier={serviceTier}
             onServiceTierChange={onServiceTierChange}
+            thinkingMode={thinkingMode}
+            onThinkingModeChange={onThinkingModeChange}
             disabled={disabled}
           />
         )}

package/src/composer/SessionComposer.tsx

@@ -8,6 +8,7 @@ import { ComposerToolbar } from "./ComposerToolbar.js";
 import { type ConfigureMenuItem } from "./ConfigureMenu.js";
 import type { HarnessOption } from "../models/harness.js";
 import { FAST_SERVICE_TIER, type ServiceTierOption } from "../models/service-tier.js";
+import type { ThinkingModeOption } from "../models/thinking-mode.js";
 import type { InteractionModeOption } from "./InteractionModePicker.js";
 import { parseModelKey } from "../models/registry.js";
 import { useModelRegistry } from "../models/useModelRegistry.js";
@@ -31,7 +32,6 @@ import type { UseGitHubConnectionReturn } from "../github/useGitHubConnection.js
 import { useAttachments } from "../attachment/useAttachments.js";
 import { AttachmentChipList } from "../attachment/AttachmentChipList.js";
 import { extractClipboardFiles } from "../attachment/clipboard.js";
-import { prepareImageForVision } from "../attachment/prepare-image.js";
 import { useFileReferences } from "../file-reference/useFileReferences.js";
 import { FileReferenceChipList } from "../file-reference/FileReferenceChipList.js";
 import { FILE_REF_MIME } from "../internal/file-tree/index.js";
@@ -165,6 +165,14 @@ export interface SessionComposerSubmitContext {
    * Pass to execution creation as `execution_config.service_tier`.
    */
   readonly serviceTier?: ServiceTierOption;
+  /**
+   * Thinking mode the user actively selected for this execution
+   * (stigmer/stigmer#772). Only ever `"enabled"` — an untouched mode means
+   * "platform default" and is carried as `undefined`, the same
+   * unspecified-vs-explicit contract as {@link serviceTier}.
+   * Pass to execution creation as `execution_config.thinking_mode`.
+   */
+  readonly thinkingMode?: ThinkingModeOption;
   /**
    * Workspace-relative file paths the user referenced via drag-to-reference.
    *
@@ -664,6 +672,9 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
   // selection below (#663) — state here records the user's intent only.
   const [serviceTier, setServiceTier] = useState<ServiceTierOption>("standard");
 
+  // Thinking mode (#772): the tier's twin, same intent-vs-effective split.
+  const [thinkingMode, setThinkingMode] = useState<ThinkingModeOption>("disabled");
+
   // Active harness mirror: controlled hosts (both viewers) keep the
   // `harness` prop current, but with `showHarnessSelector` the dropdown
   // lives inside ModelSelector and an uncontrolled host would leave the
@@ -838,10 +849,26 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
         ? "fast"
         : "standard";
 
-    return { modelId: effectiveModelId, model: effectiveModel, serviceTier: effectiveServiceTier };
+    // "enabled" rides under the identical rule, keyed on the capability
+    // (cursor-harness models only — v1 has no native thinking mapping, #772).
+    const effectiveThinkingMode: ThinkingModeOption =
+      thinkingMode === "enabled"
+        && effectiveModel !== undefined
+        && effectiveModel.harness === "cursor"
+        && effectiveModel.thinkingCapable === true
+        ? "enabled"
+        : "disabled";
+
+    return {
+      modelId: effectiveModelId,
+      model: effectiveModel,
+      serviceTier: effectiveServiceTier,
+      thinkingMode: effectiveThinkingMode,
+    };
   }, [
     modelId,
     serviceTier,
+    thinkingMode,
     showModelSelector,
     isRegistryLoading,
     registryGetByKey,
@@ -855,11 +882,17 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
   const visionNotice = useMemo(() => {
     if (!enableAttachments || attachments.entries.length === 0) return null;
     const preflight = assessVisionPreflight(
-      attachments.entries.map((e) => ({
-        name: e.file.name,
-        sizeBytes: e.file.size,
-        contentType: e.contentType,
-      })),
+      attachments.entries
+        // A `preparing` entry still carries pre-downscale bytes — judging
+        // those would flash a false "too large" that vanishes when
+        // preparation lands. Same tri-state discipline as the module
+        // itself: silent while the real size is unknown.
+        .filter((e) => e.phase !== "preparing")
+        .map((e) => ({
+          name: e.file.name,
+          sizeBytes: e.file.size,
+          contentType: e.contentType,
+        })),
       { model: effective.model, limits: visionLimits },
     );
     return visionPreflightMessage(preflight, {
@@ -963,12 +996,11 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
       e.preventDefault();
 
       // Pasted images (and only pasted — see prepare-image.ts) are bounded
-      // to provider resolution before upload. prepareImageForVision never
-      // throws; every failure path yields the original file.
+      // to provider resolution before upload. The hook owns the whole
+      // pipeline: chips appear immediately in the `preparing` phase
+      // (stigmer/stigmer#369), then upload.
       const addFiles = attachments.addFiles;
-      void Promise.all(files.map(prepareImageForVision)).then((prepared) => {
-        addFiles(prepared);
-      });
+      addFiles(files, { prepareImages: true });
     },
     [enableAttachments, isDisabled, attachments.addFiles],
   );
@@ -1050,15 +1082,19 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
       // explicit distinction is load-bearing telemetry (#357).
       const submitServiceTier =
         effective.serviceTier === "fast" ? effective.serviceTier : undefined;
+      // The tier's #772 twin: only an in-effect "enabled" is carried.
+      const submitThinkingMode =
+        effective.thinkingMode === "enabled" ? effective.thinkingMode : undefined;
 
       const context: SessionComposerSubmitContext | undefined =
         hasEnv || hasAttachments || effectiveMode || hasFileRefs || buildFromPlan
-        || submitServiceTier
+        || submitServiceTier || submitThinkingMode
           ? {
               runtimeEnv: hasEnv ? env : undefined,
               attachments: hasAttachments ? attachmentInputs : undefined,
               interactionMode: effectiveMode,
               serviceTier: submitServiceTier,
+              thinkingMode: submitThinkingMode,
               workspaceFileRefs: hasFileRefs ? [...fileRefs.refs] : undefined,
               buildFromPlan,
             }
@@ -1376,11 +1412,12 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
   // ---------------------------------------------------------------------------
 
   const mcpBlocked = showMcp && !mcpSetup.allReady;
-  // Send waits for in-flight uploads: toAttachmentInputs() carries only
+  // Send waits for in-flight work: toAttachmentInputs() carries only
   // "ready" entries, so a send racing an upload would silently drop the
   // file the user just pasted — the worst failure for "what's wrong in
   // this screenshot?". Errored entries never gate (their chip offers
-  // retry/remove); only the uploading phase blocks.
+  // retry/remove); isUploading covers both the preparing and uploading
+  // phases (see its doc — same drop class).
   const uploadsBlocked = enableAttachments && attachments.isUploading;
   const canSend = composer.canSubmit && !mcpBlocked && !uploadsBlocked;
 
@@ -1758,7 +1795,11 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
             className="stg:mx-3 stg:mb-2 stg:flex stg:items-center stg:gap-2 stg:rounded-md stg:bg-muted stg:px-2.5 stg:py-1.5 stg:text-xs stg:text-muted-foreground"
           >
             <ChipSpinner />
-            <span>Waiting for attachments to finish uploading…</span>
+            <span>
+              {attachments.isPreparing
+                ? "Waiting for attachments to finish preparing…"
+                : "Waiting for attachments to finish uploading…"}
+            </span>
           </div>
         )}
 
@@ -1885,6 +1926,8 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
           onModelChange={handleModelChange}
           serviceTier={serviceTier}
           onServiceTierChange={setServiceTier}
+          thinkingMode={thinkingMode}
+          onThinkingModeChange={setThinkingMode}
         />
       </div>
     </div>

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

@@ -0,0 +1,176 @@
+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";
+
+// Shim ResizeObserver for Base UI's positioner (the
+// scheduleCreation.test.tsx pattern).
+beforeAll(() => {
+  if (!("ResizeObserver" in globalThis)) {
+    (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver =
+      class {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+      };
+  }
+});
+
+/**
+ * End-to-end composer wiring for the thinking mode (stigmer/stigmer#772) —
+ * the SessionComposer-serviceTier twin. The toolbar's ModelSelector toggle
+ * must reach composer state, and an active enabled selection must ride the
+ * submit context to execution create. This seam (SessionComposer →
+ * ComposerToolbar props → submit context) is exactly where the #357 tier
+ * toggle originally shipped dead while every layer unit-tested green.
+ */
+
+const THINKING_CAPABLE: ModelInfo = {
+  modelId: "claude-haiku-4-5",
+  provider: "anthropic",
+  displayName: "Haiku 4.5",
+  shortDescription: "Fast Claude with optional thinking",
+  speedTier: "fast",
+  costTier: "economy",
+  harness: "cursor",
+  featured: true,
+  serviceTiers: [],
+  thinkingCapable: true,
+};
+
+const NOT_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"],
+  thinkingCapable: false,
+};
+
+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: [THINKING_CAPABLE, NOT_CAPABLE],
+            isLoading: false,
+            error: null,
+            refetch: vi.fn(),
+          }}
+        >
+          {children}
+        </ModelRegistryContext.Provider>
+      </StigmerContext.Provider>
+    );
+  };
+}
+
+function renderComposer(defaultModelId = "claude-haiku-4-5") {
+  const client = createMinimalStigmerMock();
+  const onSubmit = vi.fn();
+
+  const result = render(
+    <SessionComposer
+      onSubmit={onSubmit}
+      harness="cursor"
+      defaultModelId={defaultModelId}
+    />,
+    { 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 thinking switch in the
+ * options area, then close the popover (toggling keeps it open).
+ */
+async function toggleThinking(triggerName: RegExp = /Haiku 4\.5/) {
+  fireEvent.click(screen.getByRole("button", { name: triggerName }));
+  const toggle = await screen.findByRole("switch", { name: "Thinking" });
+  fireEvent.click(toggle);
+  fireEvent.keyDown(document.activeElement ?? document.body, { key: "Escape" });
+}
+
+afterEach(cleanup);
+
+describe("SessionComposer — thinking mode submit contract", () => {
+  it("renders the thinking switch through the toolbar for a capable model", async () => {
+    renderComposer();
+
+    fireEvent.click(screen.getByRole("button", { name: /Haiku 4\.5/ }));
+    expect(await screen.findByRole("switch", { name: "Thinking" })).toBeTruthy();
+  });
+
+  it("renders no thinking switch for a model without the capability", async () => {
+    renderComposer("composer-2.5");
+
+    fireEvent.click(screen.getByRole("button", { name: /Composer 2\.5/ }));
+    // The fast switch proves the options area itself rendered — only the
+    // thinking row must be absent (no dead controls).
+    await screen.findByRole("switch", { name: "Fast tier" });
+    expect(screen.queryByRole("switch", { name: "Thinking" })).toBeNull();
+  });
+
+  it("carries thinkingMode 'enabled' on the submit context after toggling", async () => {
+    const { onSubmit } = renderComposer();
+
+    await toggleThinking();
+    submitMessage("Think hard about this");
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledOnce());
+    const context = onSubmit.mock.calls[0][2];
+    expect(context?.thinkingMode).toBe("enabled");
+  });
+
+  it("leaves thinkingMode undefined when the switch is untouched", async () => {
+    const { onSubmit } = renderComposer();
+
+    submitMessage("Just answer");
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledOnce());
+    const context = onSubmit.mock.calls[0][2];
+    expect(context?.thinkingMode).toBeUndefined();
+  });
+
+  it("leaves thinkingMode undefined after toggling on and back off", async () => {
+    const { onSubmit } = renderComposer();
+
+    await toggleThinking();
+    await toggleThinking();
+    submitMessage("Changed my mind");
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledOnce());
+    const context = onSubmit.mock.calls[0][2];
+    expect(context?.thinkingMode).toBeUndefined();
+  });
+});

package/src/conversation/ConversationComposer.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useId, useState } from "react";
-import { Send, TriangleAlert } from "lucide-react";
+import { LayoutTemplate, 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";
@@ -9,13 +9,29 @@ import type { SendChannelMessageOutput } from "@stigmer/protos/ai/stigmer/agenti
 import { Button } from "../button/Button.js";
 import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 import { useComposer } from "../composer/useComposer.js";
+import type { ConversationReplyPayload } from "./useConversationParticipation.js";
 
 /** Props for {@link ConversationComposer}. */
 export interface ConversationComposerProps {
-  /** Send a staff reply (from `useConversationParticipation().reply`). */
-  readonly onSend: (text: string) => Promise<SendChannelMessageOutput>;
+  /**
+   * Send a staff reply (from `useConversationParticipation().reply`).
+   * The composer's own textarea always submits the `text` lane; hosts
+   * wiring a template picker send the `template` lane through the same
+   * seam — one command, one busy state, one outcome contract.
+   */
+  readonly onSend: (payload: ConversationReplyPayload) => Promise<SendChannelMessageOutput>;
   /** `true` while a reply is in flight. */
   readonly isSending: boolean;
+  /**
+   * Opens the host's template picker. When present, a persistent
+   * template affordance renders beside Send — templates are the one
+   * lane WhatsApp offers for a closed window, so the surface must
+   * offer the door, not just the advisory's warning (hosts should
+   * point at the button in the advisory copy; the advisory itself
+   * stays interaction-free — it is the input's description, F-18).
+   * Omit on channels whose provider has no template registry.
+   */
+  readonly onOpenTemplatePicker?: () => void;
   /**
    * Why replying is unavailable, when it is — rendered in place of the
    * input (a senderless provider, or a conversation the customer has
@@ -52,6 +68,7 @@ export interface ConversationComposerProps {
 export function ConversationComposer({
   onSend,
   isSending,
+  onOpenTemplatePicker,
   disabledReason,
   advisory,
   className,
@@ -66,7 +83,7 @@ export function ConversationComposer({
   const composer = useComposer({
     onSubmit: (message) => {
       setNotice(null);
-      onSend(message).then(
+      onSend({ kind: "text", body: message }).then(
         (output) => {
           if (output.outcome === ChannelSendOutcome.refused) {
             // The words never left; keep them so the user can adjust.
@@ -110,6 +127,12 @@ export function ConversationComposer({
           className="stg:mb-2 stg:flex stg:items-start stg:gap-1.5 stg:rounded-md stg:bg-status-degraded-subtle stg:px-2.5 stg:py-1.5 stg:text-xs stg:text-status-degraded"
         >
           <TriangleAlert aria-hidden="true" className="stg:mt-0.5 stg:size-3.5 stg:shrink-0" />
+          {/* Interactive content is deliberately NOT allowed in here:
+              this element is the input's aria-describedby target with
+              zero tab stops (F-18). The way forward the advisory names
+              (the template lane) lives on the persistent template
+              button beside Send — hosts point at it in the advisory
+              COPY, never with an embedded control. */}
           <span className="stg:min-w-0">{advisory}</span>
         </p>
       )}
@@ -137,6 +160,17 @@ export function ConversationComposer({
             "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
           )}
         />
+        {onOpenTemplatePicker && (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onOpenTemplatePicker}
+            disabled={isSending}
+            aria-label="Send a template reply"
+          >
+            <LayoutTemplate aria-hidden="true" className="stg:size-4" />
+          </Button>
+        )}
         <Button
           variant="primary"
           size="sm"