@stigmer/react 3.12.4 → 3.12.6

package/src/channel/ChannelRunConfigDialog.tsx

@@ -0,0 +1,351 @@
+"use client";
+
+import { useCallback, useId, useState } from "react";
+import { cn } from "@stigmer/theme";
+import { getUserMessage, type RunConfigInput } from "@stigmer/sdk";
+import type { AgentChannel } from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/api_pb";
+import { Button } from "../button/Button.js";
+import { DialogShell } from "../internal/DialogShell.js";
+import { ModelSelector } from "../models/ModelSelector.js";
+import type { HarnessOption } from "../models/harness.js";
+import {
+  fromProtoServiceTier,
+  toProtoServiceTier,
+  type ServiceTierOption,
+} from "../models/service-tier.js";
+import {
+  fromProtoThinkingMode,
+  toProtoThinkingMode,
+  type ThinkingModeOption,
+} from "../models/thinking-mode.js";
+import { agentChannelToInput, useSaveAgentChannel } from "./useSaveAgentChannel.js";
+
+/** Props for {@link ChannelRunConfigDialog}. */
+export interface ChannelRunConfigDialogProps {
+  /** Whether the dialog is open. */
+  readonly open: boolean;
+  /** Called when the dialog requests an open-state change. */
+  readonly onOpenChange: (open: boolean) => void;
+  /** The channel whose run settings are edited. */
+  readonly channel: AgentChannel;
+  /** Called after a successful save (hosts typically pass `refetch`). */
+  readonly onSaved?: () => void;
+  /**
+   * When `false`, renders as an in-flow open dialog instead of a
+   * top-layer modal — for embedding in constrained surfaces
+   * (documentation demos, visual tests). Interactive hosts keep the
+   * default.
+   * @default true
+   */
+  readonly modal?: boolean;
+}
+
+/**
+ * Edits an installed channel's run settings (`AgentChannelSpec.run_config`)
+ * — the console's first run_config editor (stigmer/stigmer#792), replacing
+ * the Edit-YAML detour for the model pin the write-time validation guards
+ * (stigmer/stigmer#774).
+ *
+ * Speaks the schedule form's vocabulary (DD-018 D-5): the model pin uses
+ * the composer's own {@link ModelSelector} (with the fast-tier and
+ * thinking switches, #357/#772) and the budget is the one run bound a
+ * user owns; `max_tool_rounds` is an operator knob, API-reachable only —
+ * preserved verbatim on save, never rendered.
+ *
+ * The harness dropdown is a browsing scope for the picker, initialized to
+ * cursor (the platform's channel-serving default): channels carry no
+ * per-channel harness — the serving harness is a platform property — and
+ * the write-time model-pin validation judges the pin against any harness
+ * section, so pinning under either scope is legitimate.
+ *
+ * Saves are full-input applies via {@link agentChannelToInput}, so the
+ * agent reference, provider marker, credential bindings, and install
+ * status all survive; clearing the model with no budget set is an
+ * explicit reset to the platform defaults (`run_config` absent). Untouched
+ * variant switches stay off the wire — unspecified-vs-explicit is a
+ * load-bearing ledger distinction (#357).
+ *
+ * Built on the native `<dialog>` element, matching the SDK's modal
+ * convention. Most hosts mount it via {@link AgentChannelsPanel}'s
+ * channel card action.
+ */
+export function ChannelRunConfigDialog({
+  open,
+  onOpenChange,
+  channel,
+  onSaved,
+  modal = true,
+}: ChannelRunConfigDialogProps) {
+  // Instance-scoped title id (oss#593): hosts legitimately mount this
+  // dialog more than once per page; duplicate DOM ids would break the
+  // aria-labelledby association for every copy after the first.
+  const titleId = useId();
+
+  const handleClose = useCallback(() => {
+    onOpenChange(false);
+  }, [onOpenChange]);
+
+  return (
+    <DialogShell
+      open={open}
+      onOpenChange={onOpenChange}
+      modal={modal}
+      width="md"
+      aria-labelledby={titleId}
+    >
+      {/* Body mounts only while open so its draft resets per session —
+          reopening never resumes stale, unsaved edits. */}
+      {open && (
+        <ChannelRunConfigDialogBody
+          channel={channel}
+          onSaved={onSaved}
+          onClose={handleClose}
+          titleId={titleId}
+        />
+      )}
+    </DialogShell>
+  );
+}
+
+function ChannelRunConfigDialogBody({
+  channel,
+  onSaved,
+  onClose,
+  titleId,
+}: {
+  readonly channel: AgentChannel;
+  readonly onSaved?: () => void;
+  readonly onClose: () => void;
+  /** Heading id minted by the outer dialog for its aria-labelledby. */
+  readonly titleId: string;
+}) {
+  const channelName =
+    channel.metadata?.name || channel.metadata?.slug || "this channel";
+  const stored = channel.spec?.runConfig;
+
+  const { save, isPending, error, clearError } = useSaveAgentChannel();
+
+  const [modelName, setModelName] = useState(stored?.modelName ?? "");
+  const [harness, setHarness] = useState<HarnessOption>("cursor");
+  const [serviceTier, setServiceTier] = useState<ServiceTierOption>(
+    fromProtoServiceTier(stored?.serviceTier) ?? "standard",
+  );
+  const [thinkingMode, setThinkingMode] = useState<ThinkingModeOption>(
+    fromProtoThinkingMode(stored?.thinkingMode) ?? "disabled",
+  );
+  const [budgetUsd, setBudgetUsd] = useState(
+    stored && stored.maxCostUsd > 0 ? String(stored.maxCostUsd) : "",
+  );
+
+  const handleSave = useCallback(async () => {
+    try {
+      // Full-input apply: only run_config changes. An all-empty draft
+      // clears the block entirely — the proto's "empty = inherit" contract
+      // (DD-018 D-2) — while `max_tool_rounds`, which this editor never
+      // renders, survives verbatim (operator knob, DD-018 D-5).
+      await save({
+        ...agentChannelToInput(channel),
+        runConfig: buildRunConfig(
+          modelName,
+          budgetUsd,
+          serviceTier,
+          thinkingMode,
+          stored?.maxToolRounds ?? 0,
+        ),
+      });
+      onSaved?.();
+      onClose();
+    } catch {
+      // Surfaced through the hook's error state below.
+    }
+  }, [budgetUsd, channel, modelName, onClose, onSaved, save, serviceTier, stored, thinkingMode]);
+
+  return (
+    <div className="stg:flex stg:flex-col">
+      <div className="stg:flex stg:items-start stg:justify-between stg:gap-3 stg:border-b stg:border-border stg:px-5 stg:py-4">
+        <div className="stg:min-w-0">
+          <h2
+            id={titleId}
+            className="stg:text-sm stg:font-semibold stg:text-foreground"
+          >
+            Run settings
+          </h2>
+          <p className="stg:mt-0.5 stg:truncate stg:text-xs stg:text-muted-foreground">
+            {channelName}
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label="Close dialog"
+          className={cn(
+            "stg:rounded stg:p-1 stg:text-muted-foreground",
+            "stg:hover:bg-accent-hover stg:hover:text-foreground",
+            "stg:focus:outline-none stg:focus:ring-1 stg:focus:ring-ring",
+          )}
+        >
+          <CloseIcon />
+        </button>
+      </div>
+
+      <div className="stg:space-y-4 stg:px-5 stg:py-4">
+        {/* Engine & model — the composer's own picker (DD-018 D-5), the
+            same shape as the schedule form's. Nothing is pinned until a
+            model is picked. */}
+        <div className="stg:space-y-1">
+          <span className={labelClasses}>
+            Model{" "}
+            <span className="stg:font-normal stg:text-muted-foreground">(optional)</span>
+          </span>
+          <div className="stg:flex stg:items-center stg:gap-2">
+            <ModelSelector
+              value={modelName}
+              onValueChange={setModelName}
+              initialHarness={harness}
+              onHarnessChange={setHarness}
+              serviceTier={serviceTier}
+              onServiceTierChange={setServiceTier}
+              thinkingMode={thinkingMode}
+              onThinkingModeChange={setThinkingMode}
+              placeholderLabel="Platform default"
+              disabled={isPending}
+            />
+            {modelName !== "" && (
+              <button
+                type="button"
+                onClick={() => {
+                  setModelName("");
+                  setServiceTier("standard");
+                  setThinkingMode("disabled");
+                }}
+                disabled={isPending}
+                className={cn(
+                  "stg:rounded-md stg:px-2 stg:py-1 stg:text-[0.65rem] stg:text-muted-foreground",
+                  "stg:hover:text-foreground stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+                  "stg:disabled:pointer-events-none stg:disabled:opacity-50",
+                )}
+              >
+                Reset to platform default
+              </button>
+            )}
+          </div>
+          <p className={hintClasses}>
+            Every conversation turn on this channel runs the pinned model.
+            Unpinned, the platform&rsquo;s default engine and model apply.
+          </p>
+        </div>
+
+        {/* Budget — the one run bound that matters for an unattended
+            surface (DD-018 D-5). Clamped by the platform profile;
+            tool-round bounds stay API-only. */}
+        <div className="stg:space-y-1">
+          <label htmlFor={`${titleId}-budget`} className={labelClasses}>
+            Budget per run (USD){" "}
+            <span className="stg:font-normal stg:text-muted-foreground">(optional)</span>
+          </label>
+          <input
+            id={`${titleId}-budget`}
+            type="number"
+            min="0"
+            step="0.5"
+            inputMode="decimal"
+            value={budgetUsd}
+            onChange={(e) => setBudgetUsd(e.target.value)}
+            placeholder="Platform default"
+            disabled={isPending}
+            className={cn(inputClasses, "stg:max-w-40")}
+          />
+          <p className={hintClasses}>
+            Caps each turn&rsquo;s estimated spend. The platform profile
+            bounds this value; the lower cap wins.
+          </p>
+        </div>
+
+        {error && (
+          <div
+            role="alert"
+            className="stg:rounded-md stg:border stg:border-destructive/30 stg:bg-destructive-subtle stg:px-3 stg:py-2 stg:text-xs stg:text-destructive"
+          >
+            {getUserMessage(error)}
+          </div>
+        )}
+      </div>
+
+      <div className="stg:flex stg:justify-end stg:gap-2 stg:border-t stg:border-border stg:px-5 stg:py-3">
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => {
+            clearError();
+            onClose();
+          }}
+          disabled={isPending}
+        >
+          Cancel
+        </Button>
+        <Button
+          variant="primary"
+          size="sm"
+          onClick={() => void handleSave()}
+          disabled={isPending}
+        >
+          Save
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Assemble the run_config the save writes. The schedule form's
+ * `buildRunConfig` contract (#357/#772) plus the edit-surface rule from
+ * the schedule detail view's `normalizeRunConfig`: fields this editor
+ * does not own (`max_tool_rounds`) are preserved verbatim, and an
+ * all-empty result clears the block ("empty = inherit").
+ */
+function buildRunConfig(
+  modelName: string,
+  budgetUsd: string,
+  serviceTier: ServiceTierOption,
+  thinkingMode: ThinkingModeOption,
+  storedMaxToolRounds: number,
+): RunConfigInput | undefined {
+  const model = modelName.trim();
+  const cost = Number.parseFloat(budgetUsd);
+
+  const config: RunConfigInput = {};
+  if (model !== "") config.modelName = model;
+  if (Number.isFinite(cost) && cost > 0) config.maxCostUsd = cost;
+  if (storedMaxToolRounds > 0) config.maxToolRounds = storedMaxToolRounds;
+  // Carried only when the user actively chose the variant AND pinned a
+  // model (both are per-model; the server refuses them without one). An
+  // untouched switch stays absent — unspecified-vs-explicit is a
+  // load-bearing ledger distinction (#357/#772).
+  if (serviceTier === "fast" && model !== "") {
+    config.serviceTier = toProtoServiceTier(serviceTier);
+  }
+  if (thinkingMode === "enabled" && model !== "") {
+    config.thinkingMode = toProtoThinkingMode(thinkingMode);
+  }
+
+  return Object.keys(config).length > 0 ? config : undefined;
+}
+
+const labelClasses = "stg:block stg:text-xs stg:font-medium stg:text-foreground";
+
+const hintClasses = "stg:text-[0.65rem] stg:text-muted-foreground";
+
+const inputClasses = cn(
+  "stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2.5 stg:py-1.5 stg:text-xs stg:text-foreground",
+  "stg:placeholder:text-muted-foreground",
+  "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
+  "stg:disabled:pointer-events-none stg:disabled:opacity-50",
+);
+
+function CloseIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
+      <path d="m3 3 8 8M11 3l-8 8" />
+    </svg>
+  );
+}

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

@@ -0,0 +1,210 @@
+import { describe, it, expect, vi, beforeAll, afterEach } from "vitest";
+import { render, screen, fireEvent, waitFor, cleanup } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { ServiceTier, ThinkingMode } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import type { AgentChannelInput } from "@stigmer/sdk";
+import { StigmerContext } from "../../context";
+import { ModelRegistryContext } from "../../models/ModelRegistryContext";
+import type { ModelInfo } from "../../models/registry";
+import { ChannelRunConfigDialog } from "../ChannelRunConfigDialog";
+
+// happy-dom does not implement the native dialog show/close methods.
+beforeAll(() => {
+  HTMLDialogElement.prototype.showModal = function showModal() {
+    this.open = true;
+  };
+  HTMLDialogElement.prototype.close = function close() {
+    this.open = false;
+  };
+  if (!("ResizeObserver" in globalThis)) {
+    (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver =
+      class {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+      };
+  }
+});
+
+afterEach(cleanup);
+
+/**
+ * The console's first run_config editor (stigmer/stigmer#792). The pinned
+ * behaviors are the edit-surface contracts the rest of the platform relies
+ * on: `max_tool_rounds` (the operator knob this editor never renders)
+ * survives every save verbatim, an all-empty draft clears the block
+ * ("empty = inherit"), and untouched variant switches stay off the wire
+ * (the #357/#772 unspecified-vs-explicit ledger distinction).
+ */
+
+const MODELS: 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,
+  },
+];
+
+function makeChannel(runConfig?: {
+  modelName?: string;
+  maxCostUsd?: number;
+  maxToolRounds?: number;
+  serviceTier?: ServiceTier;
+  thinkingMode?: ThinkingMode;
+}) {
+  return {
+    metadata: {
+      id: "ach_1",
+      name: "Support Slack",
+      slug: "support-slack",
+      org: "acme",
+      labels: {},
+    },
+    spec: {
+      agentRef: { org: "acme", slug: "support-agent" },
+      enabled: true,
+      providerConfig: { case: "slack", value: {} },
+      environmentRefs: [],
+      ...(runConfig
+        ? {
+            runConfig: {
+              modelName: runConfig.modelName ?? "",
+              maxCostUsd: runConfig.maxCostUsd ?? 0,
+              maxToolRounds: runConfig.maxToolRounds ?? 0,
+              serviceTier: runConfig.serviceTier ?? ServiceTier.UNSPECIFIED,
+              thinkingMode: runConfig.thinkingMode ?? ThinkingMode.UNSPECIFIED,
+            },
+          }
+        : {}),
+    },
+    status: { installState: 2 },
+  } as never;
+}
+
+function createMockStigmer() {
+  const apply = vi.fn().mockResolvedValue({});
+  const client = { agentChannel: { apply } } as never;
+  return { client, apply };
+}
+
+function Providers({
+  client,
+  children,
+}: {
+  client: unknown;
+  children: ReactNode;
+}) {
+  return (
+    <StigmerContext.Provider value={client as never}>
+      <ModelRegistryContext.Provider
+        value={{ models: MODELS, isLoading: false, error: null, refetch: vi.fn() }}
+      >
+        {children}
+      </ModelRegistryContext.Provider>
+    </StigmerContext.Provider>
+  );
+}
+
+function renderDialog(channel: unknown) {
+  const { client, apply } = createMockStigmer();
+  const onSaved = vi.fn();
+  render(
+    <Providers client={client}>
+      <ChannelRunConfigDialog
+        open
+        onOpenChange={vi.fn()}
+        channel={channel as never}
+        onSaved={onSaved}
+      />
+    </Providers>,
+  );
+  return { apply, onSaved };
+}
+
+async function save() {
+  fireEvent.click(screen.getByRole("button", { name: "Save" }));
+}
+
+describe("ChannelRunConfigDialog", () => {
+  it("preserves max_tool_rounds verbatim even though it never renders", async () => {
+    const { apply } = renderDialog(
+      makeChannel({ modelName: "claude-haiku-4-5", maxToolRounds: 25 }),
+    );
+
+    expect(screen.queryByText(/tool round/i)).toBeNull();
+    await save();
+
+    await waitFor(() => expect(apply).toHaveBeenCalledOnce());
+    const input = apply.mock.calls[0][0] as AgentChannelInput;
+    expect(input.runConfig?.maxToolRounds).toBe(25);
+    expect(input.runConfig?.modelName).toBe("claude-haiku-4-5");
+  });
+
+  it("clears run_config entirely when the draft is emptied (empty = inherit)", async () => {
+    const { apply } = renderDialog(
+      makeChannel({ modelName: "claude-haiku-4-5", maxCostUsd: 2 }),
+    );
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Reset to platform default" }),
+    );
+    fireEvent.change(screen.getByLabelText(/Budget per run/), {
+      target: { value: "" },
+    });
+    await save();
+
+    await waitFor(() => expect(apply).toHaveBeenCalledOnce());
+    const input = apply.mock.calls[0][0] as AgentChannelInput;
+    expect(input.runConfig).toBeUndefined();
+  });
+
+  it("carries an actively enabled thinking mode, and only then", async () => {
+    const { apply } = renderDialog(makeChannel({ modelName: "claude-haiku-4-5" }));
+
+    fireEvent.click(screen.getByRole("button", { name: /Haiku 4\.5/ }));
+    fireEvent.click(await screen.findByRole("switch", { name: "Thinking" }));
+    fireEvent.keyDown(document.activeElement ?? document.body, { key: "Escape" });
+    await save();
+
+    await waitFor(() => expect(apply).toHaveBeenCalledOnce());
+    const input = apply.mock.calls[0][0] as AgentChannelInput;
+    expect(input.runConfig?.thinkingMode).toBe(ThinkingMode.ENABLED);
+    // The untouched tier stays absent — never stamped as an explicit
+    // STANDARD by a save (#357 ledger distinction).
+    expect(input.runConfig?.serviceTier).toBeUndefined();
+  });
+
+  it("round-trips a stored thinking pin into the switch state", async () => {
+    renderDialog(
+      makeChannel({
+        modelName: "claude-haiku-4-5",
+        thinkingMode: ThinkingMode.ENABLED,
+      }),
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /Haiku 4\.5/ }));
+    const toggle = await screen.findByRole("switch", { name: "Thinking" });
+    expect(toggle.getAttribute("aria-checked")).toBe("true");
+  });
+
+  it("collects a budget without requiring a model pin", async () => {
+    const { apply } = renderDialog(makeChannel());
+
+    fireEvent.change(screen.getByLabelText(/Budget per run/), {
+      target: { value: "1.5" },
+    });
+    await save();
+
+    await waitFor(() => expect(apply).toHaveBeenCalledOnce());
+    const input = apply.mock.calls[0][0] as AgentChannelInput;
+    expect(input.runConfig?.maxCostUsd).toBe(1.5);
+    expect(input.runConfig?.modelName).toBeUndefined();
+  });
+});

package/src/channel/index.ts

@@ -69,6 +69,8 @@ export type { ConnectWhatsAppDialogProps } from "./ConnectWhatsAppDialog.js";
 
 export { ChannelCredentialsDialog } from "./ChannelCredentialsDialog.js";
 export type { ChannelCredentialsDialogProps } from "./ChannelCredentialsDialog.js";
+export { ChannelRunConfigDialog } from "./ChannelRunConfigDialog.js";
+export type { ChannelRunConfigDialogProps } from "./ChannelRunConfigDialog.js";
 
 export { ChannelToolCredentials } from "./ChannelToolCredentials.js";
 export type { ChannelToolCredentialsProps } from "./ChannelToolCredentials.js";

package/src/channel/useSaveAgentChannel.ts

@@ -66,9 +66,11 @@ 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.
+    // run_config rides through verbatim so a settings save or
+    // pause/resume toggle never wipes an override set elsewhere (the
+    // ChannelRunConfigDialog — the one surface that edits it, #792 —
+    // overrides this copy with its own draft; CLI/API overrides survive
+    // every other save).
     ...(spec?.runConfig
       ? {
           runConfig: {
@@ -76,6 +78,7 @@ export function agentChannelToInput(channel: AgentChannel): AgentChannelInput {
             maxCostUsd: spec.runConfig.maxCostUsd,
             maxToolRounds: spec.runConfig.maxToolRounds,
             serviceTier: spec.runConfig.serviceTier,
+            thinkingMode: spec.runConfig.thinkingMode,
           },
         }
       : {}),

package/src/channel-app/ChannelAppDetailPanel.tsx

@@ -2,7 +2,7 @@
 
 import { type FormEvent, useCallback, useId, useMemo, useState } from "react";
 import { cn } from "@stigmer/theme";
-import { getUserMessage } from "@stigmer/sdk";
+import { getUserMessage, toChannelAppUpdateInput } from "@stigmer/sdk";
 import type { ChannelApp } from "@stigmer/protos/ai/stigmer/agentic/channelapp/v1/api_pb";
 import { useStigmer } from "../hooks.js";
 import { useUpdateChannelApp } from "./useUpdateChannelApp.js";
@@ -229,10 +229,10 @@ function SlackAppDetail({
 
       clearError();
       try {
+        // Full-spec-replace safety: spread the complete mapped input and
+        // override only the slack arm this form owns.
         const updated = await update({
-          name,
-          org: channelApp.metadata?.org ?? "",
-          ...(channelApp.metadata?.slug ? { slug: channelApp.metadata.slug } : {}),
+          ...toChannelAppUpdateInput(channelApp),
           slack: {
             clientId: clientId.trim(),
             // The redaction marker means "keep the stored value" — the
@@ -246,7 +246,7 @@ function SlackAppDetail({
         // error state is managed by useUpdateChannelApp
       }
     },
-    [canSave, clearError, update, name, channelApp.metadata, clientId, clientSecret, signingSecret, onUpdated],
+    [canSave, clearError, update, channelApp, clientId, clientSecret, signingSecret, onUpdated],
   );
 
   return (
@@ -379,10 +379,10 @@ function WhatsAppAppDetail({
 
       clearError();
       try {
+        // Full-spec-replace safety: spread the complete mapped input and
+        // override only the whatsapp arm this form owns.
         const updated = await update({
-          name,
-          org: channelApp.metadata?.org ?? "",
-          ...(channelApp.metadata?.slug ? { slug: channelApp.metadata.slug } : {}),
+          ...toChannelAppUpdateInput(channelApp),
           whatsapp: {
             appId: metaAppId.trim(),
             // The redaction marker means "keep the stored value" — the
@@ -397,7 +397,7 @@ function WhatsAppAppDetail({
         // error state is managed by useUpdateChannelApp
       }
     },
-    [canSave, clearError, update, name, channelApp.metadata, metaAppId, appSecret, accessToken, verifyToken, onUpdated],
+    [canSave, clearError, update, channelApp, metaAppId, appSecret, accessToken, verifyToken, onUpdated],
   );
 
   return (

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

@@ -228,6 +228,8 @@ describe("ChannelAppDetailPanel — WhatsApp branch", () => {
 
     await waitFor(() => expect(update).toHaveBeenCalled());
     expect(update).toHaveBeenCalledWith({
+      // The generated mapper carries metadata.id for exact update addressing.
+      id: "chapp_1",
       name: "Acme WhatsApp",
       org: "acme",
       slug: "acme-whatsapp",