@stigmer/react 3.12.4 → 3.12.6

package/src/models/ModelSelector.tsx

@@ -9,6 +9,7 @@ import { useModelRegistry } from "./useModelRegistry.js";
 import type { ModelInfo, CostTier, SpeedTier } from "./registry.js";
 import { HARNESS_META, HARNESS_OPTIONS, type HarnessOption } from "./harness.js";
 import { FAST_SERVICE_TIER, type ServiceTierOption } from "./service-tier.js";
+import type { ThinkingModeOption } from "./thinking-mode.js";
 
 const COST_TIER_LABEL: Record<CostTier, string> = {
   economy: "$",
@@ -23,6 +24,17 @@ const SPEED_TIER_LABEL: Record<SpeedTier, string> = {
   slow: "Powerful",
 };
 
+/**
+ * Whether the thinking switch may act on this model (stigmer/stigmer#772):
+ * the registry declares the capability AND the model is cursor-harness —
+ * the only harness with a thinking translation in v1. Native models
+ * truthfully declare the capability too, but selecting it there would be
+ * refused at create time, so the control never renders for them.
+ */
+function supportsThinking(model: ModelInfo): boolean {
+  return model.harness === "cursor" && model.thinkingCapable === true;
+}
+
 /** Props for {@link ModelSelector}. */
 export interface ModelSelectorProps {
   /** Currently selected model ID. */
@@ -95,6 +107,30 @@ export interface ModelSelectorProps {
    */
   readonly onServiceTierChange?: (tier: ServiceTierOption) => void;
 
+  /**
+   * Current thinking mode for the selected model (stigmer/stigmer#772).
+   * Defaults to "disabled". Only meaningful together with
+   * {@link onThinkingModeChange}.
+   */
+  readonly thinkingMode?: ThinkingModeOption;
+  /**
+   * Called when the user toggles extended reasoning. Providing this enables
+   * the "Thinking" switch as a sibling of the fast-tier switch in the
+   * popover's options area, which renders ONLY while the selected model is
+   * a cursor-harness model declaring the thinking capability
+   * ({@link ModelInfo.thinkingCapable}) — no dead controls, and v1 honors
+   * the selection on the cursor harness only.
+   *
+   * The same persistence rule as the fast tier: an active thinking mode
+   * survives switches between thinking-capable models (trigger badge +
+   * options switch keep it visible) and resets to "disabled" only when the
+   * new model lacks the capability — an unsupported combination can never
+   * be submitted (#772, refused at create time). Unlike fast, thinking
+   * bills at base per-token rates; enabled turns consume more output
+   * (reasoning) tokens.
+   */
+  readonly onThinkingModeChange?: (mode: ThinkingModeOption) => void;
+
   /**
    * @deprecated Use {@link onHarnessChange} instead.
    */
@@ -125,6 +161,14 @@ export interface ModelSelectorProps {
  * switch keep the state honest — and resets only for models with no fast
  * variant, where it would be refused at create time.
  *
+ * **Thinking mode (#772).** The same options-area pattern for the second
+ * variant dimension: opting in via
+ * {@link ModelSelectorProps.onThinkingModeChange} renders a "Thinking"
+ * switch for cursor-harness models declaring the thinking capability.
+ * Capability-gated rather than priced-variant-gated — thinking bills at
+ * base per-token rates and costs more only through extra reasoning
+ * (output) tokens. Persistence and reset rules mirror the fast tier's.
+ *
  * @example
  * ```tsx
  * <ModelSelector
@@ -153,6 +197,8 @@ export function ModelSelector({
   placeholderLabel,
   serviceTier = "standard",
   onServiceTierChange,
+  thinkingMode = "disabled",
+  onThinkingModeChange,
 }: ModelSelectorProps) {
   const portalContainer = useStigmerPortalContainer();
 
@@ -277,9 +323,19 @@ export function ModelSelector({
       ) {
         onServiceTierChange("standard");
       }
+      // The identical persistence rule for the thinking mode (#772):
+      // survives between thinking-capable cursor models, resets only
+      // where the selection would be refused at create time.
+      if (
+        thinkingMode === "enabled"
+        && onThinkingModeChange
+        && !supportsThinking(model)
+      ) {
+        onThinkingModeChange("disabled");
+      }
       setOpen(false);
     },
-    [onValueChange, serviceTier, onServiceTierChange],
+    [onValueChange, serviceTier, onServiceTierChange, thinkingMode, onThinkingModeChange],
   );
 
   const scrollHighlightIntoView = useCallback((idx: number) => {
@@ -338,6 +394,15 @@ export function ModelSelector({
   const fastActive =
     serviceTier === "fast"
     && (selectedModel?.serviceTiers.includes(FAST_SERVICE_TIER) ?? false);
+  // The thinking switch renders under the same no-dead-controls rule,
+  // gated on the capability instead of a priced variant (#772).
+  const showThinkingToggle =
+    onThinkingModeChange !== undefined
+    && selectedModel !== undefined
+    && supportsThinking(selectedModel);
+  const thinkingActive =
+    thinkingMode === "enabled"
+    && (selectedModel !== undefined && supportsThinking(selectedModel));
 
   const usingPlaceholder = !value && placeholderLabel !== undefined;
   const triggerLabel = usingPlaceholder
@@ -379,6 +444,16 @@ export function ModelSelector({
             Fast
           </span>
         )}
+        {thinkingActive && (
+          <span
+            className={cn(
+              "stg:inline-flex stg:shrink-0 stg:items-center stg:gap-0.5 stg:rounded-full stg:border stg:border-primary stg:px-1.5 stg:py-px",
+              "stg:text-[0.6rem] stg:font-medium stg:uppercase stg:tracking-wider stg:text-primary",
+            )}
+          >
+            Thinking
+          </span>
+        )}
         <ChevronIcon />
       </Popover.Trigger>
 
@@ -483,6 +558,24 @@ export function ModelSelector({
               </div>
             )}
 
+            {showThinkingToggle && (
+              <div className="stg:flex stg:items-center stg:justify-between stg:border-b stg:border-border stg:px-3 stg:py-2">
+                <div className="stg:flex stg:flex-col">
+                  <span className="stg:text-xs stg:text-foreground">Thinking</span>
+                  <span className="stg:text-[0.65rem] stg:text-muted-foreground">
+                    Extended reasoning; uses more output tokens
+                  </span>
+                </div>
+                <Switch
+                  checked={thinkingActive}
+                  onCheckedChange={(next) =>
+                    onThinkingModeChange?.(next ? "enabled" : "disabled")
+                  }
+                  aria-label="Thinking"
+                />
+              </div>
+            )}
+
             {/* Search input */}
             <div className="stg:border-b stg:border-border stg:px-3 stg:py-1.5">
               <input

package/src/models/index.ts

@@ -13,3 +13,5 @@ export { DEFAULT_HARNESS, HARNESS_LABELS, HARNESS_META, HARNESS_OPTIONS, toProto
 export type { HarnessOption, HarnessDisplayInfo } from "./harness.js";
 export { FAST_SERVICE_TIER, toProtoServiceTier, fromProtoServiceTier } from "./service-tier.js";
 export type { ServiceTierOption } from "./service-tier.js";
+export { toProtoThinkingMode, fromProtoThinkingMode } from "./thinking-mode.js";
+export type { ThinkingModeOption } from "./thinking-mode.js";

package/src/models/registry.ts

@@ -114,6 +114,22 @@ export interface ModelInfo {
    * parse the same document and must agree on what absence means.
    */
   readonly visionCapability?: boolean;
+  /**
+   * Tri-state thinking capability from the registry's `capabilities` block
+   * (stigmer/stigmer#772), the same absence convention as
+   * {@link visionCapability}:
+   *
+   * - `true` — the model declares an extended-reasoning (thinking) variant;
+   *   the thinking switch in the model popover's options area may render
+   * - `false` — explicitly assessed as having none
+   * - `undefined` — never assessed; **stay silent, never treat as false**
+   *
+   * Capability-gated, not pricing-gated (unlike {@link serviceTiers}):
+   * thinking bills at base per-token rates, so no priced variant exists to
+   * key on. v1 honors the selection on the cursor harness only — gate any
+   * control on `harness === "cursor"` as well as this flag.
+   */
+  readonly thinkingCapable?: boolean;
 }
 
 /**
@@ -229,6 +245,17 @@ function parseVisionCapability(capabilities: unknown): boolean | undefined {
   return typeof vision === "boolean" ? vision : undefined;
 }
 
+/**
+ * Extract `capabilities.thinking` with the same tri-state convention as
+ * {@link parseVisionCapability} (stigmer/stigmer#772): a missing or
+ * malformed `capabilities` block stays `undefined`, never coerced to false.
+ */
+function parseThinkingCapability(capabilities: unknown): boolean | undefined {
+  if (!capabilities || typeof capabilities !== "object") return undefined;
+  const thinking = (capabilities as Record<string, unknown>).thinking;
+  return typeof thinking === "boolean" ? thinking : undefined;
+}
+
 /**
  * Parse the document-level `limits.vision` block. Returns `undefined` for
  * documents that predate the block or carry a malformed one — absence
@@ -284,6 +311,7 @@ export function parseRegistryDocument(data: unknown): ModelRegistryDocument {
     .filter(isModelEntry)
     .map((m) => {
       const visionCapability = parseVisionCapability(m.capabilities);
+      const thinkingCapable = parseThinkingCapability(m.capabilities);
       return {
         modelId: m.id,
         provider: m.provider as Provider,
@@ -300,6 +328,7 @@ export function parseRegistryDocument(data: unknown): ModelRegistryDocument {
         // Conditional spread keeps unassessed models free of the key
         // (tri-state absence, not an explicit undefined).
         ...(visionCapability !== undefined ? { visionCapability } : {}),
+        ...(thinkingCapable !== undefined ? { thinkingCapable } : {}),
       };
     });
 

package/src/models/thinking-mode.ts

@@ -0,0 +1,48 @@
+import { ThinkingMode } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+
+/**
+ * String form of the thinking mode for component props and hook inputs
+ * (stigmer/stigmer#772). Mirrors {@link ServiceTierOption}: components
+ * speak strings, execution creation speaks proto.
+ *
+ * "disabled" is the model's base variant; "enabled" is the model's
+ * extended-reasoning variant — selectable only for models whose
+ * {@link ModelInfo.thinkingCapable} is true. Unlike the fast tier,
+ * thinking bills at base per-token rates; enabled turns simply consume
+ * more output (reasoning) tokens.
+ */
+export type ThinkingModeOption = "disabled" | "enabled";
+
+/**
+ * Convert a {@link ThinkingModeOption} string to the proto enum.
+ */
+export function toProtoThinkingMode(mode: ThinkingModeOption): ThinkingMode {
+  switch (mode) {
+    case "enabled":
+      return ThinkingMode.ENABLED;
+    case "disabled":
+    default:
+      return ThinkingMode.DISABLED;
+  }
+}
+
+/**
+ * Convert a proto {@link ThinkingMode} enum to its string form.
+ *
+ * `UNSPECIFIED` (and any unknown value) maps to `undefined` so callers can
+ * decide their own default — matching the proto contract (`UNSPECIFIED`
+ * resolves to `THINKING_MODE_DISABLED` in the runner, never the provider
+ * account default).
+ */
+export function fromProtoThinkingMode(
+  mode: ThinkingMode | undefined,
+): ThinkingModeOption | undefined {
+  switch (mode) {
+    case ThinkingMode.DISABLED:
+      return "disabled";
+    case ThinkingMode.ENABLED:
+      return "enabled";
+    default:
+      return undefined;
+  }
+}

package/src/oauth-app/CreateOAuthAppForm.tsx

@@ -4,7 +4,10 @@ import { type FormEvent, useCallback, useId, useState } from "react";
 import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
 import type { OAuthApp } from "@stigmer/protos/ai/stigmer/iam/oauthapp/v1/api_pb";
-import { VendorApprovalStatus } from "@stigmer/protos/ai/stigmer/iam/oauthapp/v1/spec_pb";
+import {
+  TokenEndpointAuthMethod,
+  VendorApprovalStatus,
+} from "@stigmer/protos/ai/stigmer/iam/oauthapp/v1/spec_pb";
 import { useCreateOAuthApp } from "./useCreateOAuthApp.js";
 import { SpinnerIcon } from "../internal/SpinnerIcon.js";
 
@@ -30,8 +33,8 @@ export interface CreateOAuthAppFormProps {
  * Collects the required OAuth configuration: **name**, **provider**,
  * **client ID**, **client secret**, **authorization URL**, and
  * **token URL**. An expandable "Advanced" section provides optional
- * fields for scopes, userinfo URL, scope parameter name, and vendor
- * approval settings.
+ * fields for scopes, userinfo URL, scope parameter name, token endpoint
+ * auth method, and vendor approval settings.
  *
  * This is a pure presentational component with no dialog wrapper
  * (headless-first). The parent is responsible for rendering it inside
@@ -71,6 +74,9 @@ export function CreateOAuthAppForm({
   const [scopes, setScopes] = useState("");
   const [userinfoUrl, setUserinfoUrl] = useState("");
   const [scopeParameterName, setScopeParameterName] = useState("");
+  const [tokenEndpointAuthMethod, setTokenEndpointAuthMethod] = useState<
+    "unspecified" | "client_secret_basic" | "client_secret_post"
+  >("unspecified");
   const [vendorApprovalStatus, setVendorApprovalStatus] = useState<
     "unspecified" | "pending" | "approved" | "rejected"
   >("unspecified");
@@ -117,6 +123,10 @@ export function CreateOAuthAppForm({
           ...(scopeParameterName.trim() && {
             scopeParameterName: scopeParameterName.trim(),
           }),
+          ...(tokenEndpointAuthMethod !== "unspecified" && {
+            tokenEndpointAuthMethod:
+              TOKEN_AUTH_METHOD_MAP[tokenEndpointAuthMethod],
+          }),
           ...(vendorApprovalStatus !== "unspecified" && {
             vendorApprovalStatus: APPROVAL_STATUS_MAP[vendorApprovalStatus],
           }),
@@ -141,6 +151,7 @@ export function CreateOAuthAppForm({
       scopes,
       userinfoUrl,
       scopeParameterName,
+      tokenEndpointAuthMethod,
       vendorApprovalStatus,
       vendorApprovalDocsUrl,
       create,
@@ -259,6 +270,45 @@ export function CreateOAuthAppForm({
                 disabled={isCreating}
               />
 
+              <div className="stg:space-y-1">
+                <label
+                  htmlFor={`${baseId}-token-auth-method`}
+                  className="stg:text-xs stg:font-medium stg:text-foreground"
+                >
+                  Token endpoint auth method
+                </label>
+                <select
+                  id={`${baseId}-token-auth-method`}
+                  value={tokenEndpointAuthMethod}
+                  onChange={(e) =>
+                    setTokenEndpointAuthMethod(
+                      e.target.value as typeof tokenEndpointAuthMethod,
+                    )
+                  }
+                  disabled={isCreating}
+                  className={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:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
+                    "stg:disabled:pointer-events-none stg:disabled:opacity-50",
+                  )}
+                >
+                  <option value="unspecified">
+                    Unspecified (treated as HTTP Basic)
+                  </option>
+                  <option value="client_secret_basic">
+                    client_secret_basic (HTTP Basic header)
+                  </option>
+                  <option value="client_secret_post">
+                    client_secret_post (form body)
+                  </option>
+                </select>
+                <p className="stg:text-[0.65rem] stg:text-muted-foreground">
+                  How the client secret is sent to the vendor&apos;s token
+                  endpoint. Most vendors accept HTTP Basic; some (e.g.
+                  HubSpot) require client_secret_post.
+                </p>
+              </div>
+
               <div className="stg:space-y-1">
                 <label
                   htmlFor={`${baseId}-approval-status`}
@@ -354,6 +404,11 @@ const APPROVAL_STATUS_MAP = {
   rejected: VendorApprovalStatus.REJECTED,
 } as const;
 
+const TOKEN_AUTH_METHOD_MAP = {
+  client_secret_basic: TokenEndpointAuthMethod.CLIENT_SECRET_BASIC,
+  client_secret_post: TokenEndpointAuthMethod.CLIENT_SECRET_POST,
+} as const;
+
 // ---------------------------------------------------------------------------
 // FormField (internal)
 // ---------------------------------------------------------------------------

package/src/oauth-app/OAuthAppDetailPanel.tsx

@@ -2,9 +2,12 @@
 
 import { type FormEvent, useCallback, useId, useState } from "react";
 import { cn } from "@stigmer/theme";
-import { getUserMessage } from "@stigmer/sdk";
+import { getUserMessage, toOAuthAppUpdateInput } from "@stigmer/sdk";
 import type { OAuthApp } from "@stigmer/protos/ai/stigmer/iam/oauthapp/v1/api_pb";
-import { VendorApprovalStatus } from "@stigmer/protos/ai/stigmer/iam/oauthapp/v1/spec_pb";
+import {
+  TokenEndpointAuthMethod,
+  VendorApprovalStatus,
+} from "@stigmer/protos/ai/stigmer/iam/oauthapp/v1/spec_pb";
 import { timestampDate, type Timestamp } from "@bufbuild/protobuf/wkt";
 import { useUpdateOAuthApp } from "./useUpdateOAuthApp.js";
 import { useDeleteOAuthApp } from "./useDeleteOAuthApp.js";
@@ -87,6 +90,9 @@ export function OAuthAppDetailPanel({
   const [scopeParameterName, setScopeParameterName] = useState(
     spec?.scopeParameterName ?? "",
   );
+  const [tokenEndpointAuthMethod, setTokenEndpointAuthMethod] = useState(
+    tokenAuthMethodToKey(spec?.tokenEndpointAuthMethod),
+  );
   const [vendorApprovalStatus, setVendorApprovalStatus] = useState(
     approvalStatusToKey(spec?.vendorApprovalStatus),
   );
@@ -103,6 +109,7 @@ export function OAuthAppDetailPanel({
     setScopes(spec?.scopes.join(", ") ?? "");
     setUserinfoUrl(spec?.userinfoUrl ?? "");
     setScopeParameterName(spec?.scopeParameterName ?? "");
+    setTokenEndpointAuthMethod(tokenAuthMethodToKey(spec?.tokenEndpointAuthMethod));
     setVendorApprovalStatus(approvalStatusToKey(spec?.vendorApprovalStatus));
     setVendorApprovalDocsUrl(spec?.vendorApprovalDocsUrl ?? "");
     clearUpdateError();
@@ -125,26 +132,32 @@ export function OAuthAppDetailPanel({
         .filter(Boolean);
 
       try {
+        // Full-spec-replace safety: spread the complete mapped input and
+        // override every field this form owns, so a future spec field the
+        // form does not know about survives the save. An empty secret
+        // input keeps the fetched value — the redaction marker — which
+        // the server's update pipeline treats as "keep the stored
+        // secret"; a non-empty input replaces it.
+        const mapped = toOAuthAppUpdateInput(oauthApp);
         const updated = await update({
-          name: meta?.name ?? "",
-          slug: meta?.slug,
-          org: meta?.org ?? "",
+          ...mapped,
           provider: provider.trim(),
           clientId: clientId.trim(),
-          ...(clientSecret.trim() && { clientSecret: clientSecret.trim() }),
+          clientSecret: clientSecret.trim() || mapped.clientSecret,
           authorizationUrl: authorizationUrl.trim(),
           tokenUrl: tokenUrl.trim(),
-          ...(parsedScopes.length > 0 && { scopes: parsedScopes }),
-          ...(userinfoUrl.trim() && { userinfoUrl: userinfoUrl.trim() }),
-          ...(scopeParameterName.trim() && {
-            scopeParameterName: scopeParameterName.trim(),
-          }),
-          ...(vendorApprovalStatus !== "unspecified" && {
-            vendorApprovalStatus: APPROVAL_STATUS_MAP[vendorApprovalStatus],
-          }),
-          ...(vendorApprovalDocsUrl.trim() && {
-            vendorApprovalDocsUrl: vendorApprovalDocsUrl.trim(),
-          }),
+          scopes: parsedScopes.length > 0 ? parsedScopes : undefined,
+          userinfoUrl: userinfoUrl.trim() || undefined,
+          scopeParameterName: scopeParameterName.trim() || undefined,
+          tokenEndpointAuthMethod:
+            tokenEndpointAuthMethod !== "unspecified"
+              ? TOKEN_AUTH_METHOD_MAP[tokenEndpointAuthMethod]
+              : undefined,
+          vendorApprovalStatus:
+            vendorApprovalStatus !== "unspecified"
+              ? APPROVAL_STATUS_MAP[vendorApprovalStatus]
+              : undefined,
+          vendorApprovalDocsUrl: vendorApprovalDocsUrl.trim() || undefined,
         });
         setMode("view");
         onUpdated?.(updated);
@@ -153,9 +166,10 @@ export function OAuthAppDetailPanel({
       }
     },
     [
-      meta, provider, clientId, clientSecret, authorizationUrl, tokenUrl,
-      scopes, userinfoUrl, scopeParameterName, vendorApprovalStatus,
-      vendorApprovalDocsUrl, update, clearUpdateError, onUpdated,
+      oauthApp, provider, clientId, clientSecret, authorizationUrl, tokenUrl,
+      scopes, userinfoUrl, scopeParameterName, tokenEndpointAuthMethod,
+      vendorApprovalStatus, vendorApprovalDocsUrl, update, clearUpdateError,
+      onUpdated,
     ],
   );
 
@@ -372,6 +386,40 @@ export function OAuthAppDetailPanel({
             disabled={isUpdating}
           />
 
+          <div className="stg:space-y-1">
+            <label
+              htmlFor={`${baseId}-token-auth-method`}
+              className="stg:text-xs stg:font-medium stg:text-foreground"
+            >
+              Token endpoint auth method
+            </label>
+            <select
+              id={`${baseId}-token-auth-method`}
+              value={tokenEndpointAuthMethod}
+              onChange={(e) =>
+                setTokenEndpointAuthMethod(
+                  e.target.value as typeof tokenEndpointAuthMethod,
+                )
+              }
+              disabled={isUpdating}
+              className={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:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
+                "stg:disabled:pointer-events-none stg:disabled:opacity-50",
+              )}
+            >
+              <option value="unspecified">
+                Unspecified (treated as HTTP Basic)
+              </option>
+              <option value="client_secret_basic">
+                client_secret_basic (HTTP Basic header)
+              </option>
+              <option value="client_secret_post">
+                client_secret_post (form body)
+              </option>
+            </select>
+          </div>
+
           <div className="stg:space-y-1">
             <label
               htmlFor={`${baseId}-approval-status`}
@@ -481,6 +529,29 @@ function approvalStatusToKey(
   }
 }
 
+const TOKEN_AUTH_METHOD_MAP = {
+  client_secret_basic: TokenEndpointAuthMethod.CLIENT_SECRET_BASIC,
+  client_secret_post: TokenEndpointAuthMethod.CLIENT_SECRET_POST,
+} as const;
+
+const TOKEN_AUTH_METHOD_LABELS: Record<number, string> = {
+  [TokenEndpointAuthMethod.CLIENT_SECRET_BASIC]: "client_secret_basic",
+  [TokenEndpointAuthMethod.CLIENT_SECRET_POST]: "client_secret_post",
+};
+
+function tokenAuthMethodToKey(
+  method?: TokenEndpointAuthMethod,
+): "unspecified" | "client_secret_basic" | "client_secret_post" {
+  switch (method) {
+    case TokenEndpointAuthMethod.CLIENT_SECRET_BASIC:
+      return "client_secret_basic";
+    case TokenEndpointAuthMethod.CLIENT_SECRET_POST:
+      return "client_secret_post";
+    default:
+      return "unspecified";
+  }
+}
+
 // ---------------------------------------------------------------------------
 // View mode
 // ---------------------------------------------------------------------------
@@ -514,6 +585,18 @@ function ViewMode({
           mono
         />
       )}
+      {spec?.tokenEndpointAuthMethod !== undefined &&
+        spec.tokenEndpointAuthMethod !==
+          TokenEndpointAuthMethod.UNSPECIFIED && (
+          <Field
+            label="Token endpoint auth method"
+            value={
+              TOKEN_AUTH_METHOD_LABELS[spec.tokenEndpointAuthMethod] ??
+              "Unknown"
+            }
+            mono
+          />
+        )}
       {spec?.vendorApprovalStatus !== undefined &&
         spec.vendorApprovalStatus !== VendorApprovalStatus.UNSPECIFIED && (
           <Field

package/src/oauth-app/__tests__/OAuthAppDetailPanel.test.tsx

@@ -0,0 +1,94 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { create } from "@bufbuild/protobuf";
+import {
+  OAuthAppSchema,
+  type OAuthApp,
+} from "@stigmer/protos/ai/stigmer/iam/oauthapp/v1/api_pb";
+import { TokenEndpointAuthMethod } from "@stigmer/protos/ai/stigmer/iam/oauthapp/v1/spec_pb";
+import type { OAuthAppInput } from "@stigmer/sdk";
+import { StigmerContext } from "../../context";
+import { OAuthAppDetailPanel } from "../OAuthAppDetailPanel";
+
+/**
+ * Regression suite for the full-spec-replace wipe bug: the panel must
+ * spread `toOAuthAppUpdateInput` and override only what it edits, so a
+ * spec field the form does not know about survives the save. The secret
+ * has its own contract: an empty secret input sends the fetched value —
+ * the server's redaction marker — which the update pipeline treats as
+ * "keep the stored secret" (oss#395 pins the marker/ciphertext boundary).
+ */
+
+const REDACTED = "***REDACTED***";
+
+const APP: OAuthApp = create(OAuthAppSchema, {
+  metadata: {
+    id: "oa-1",
+    name: "GitHub OAuth",
+    slug: "github-oauth",
+    org: "acme",
+  },
+  spec: {
+    provider: "github",
+    clientId: "gh-client-1",
+    clientSecret: REDACTED,
+    authorizationUrl: "https://github.com/login/oauth/authorize",
+    tokenUrl: "https://github.com/login/oauth/access_token",
+    scopes: ["repo"],
+    tokenEndpointAuthMethod: TokenEndpointAuthMethod.CLIENT_SECRET_POST,
+  },
+});
+
+function renderPanel(update: ReturnType<typeof vi.fn>) {
+  const client = {
+    oauthapp: { update },
+  } as never;
+  return render(
+    <StigmerContext.Provider value={client}>
+      <OAuthAppDetailPanel oauthApp={APP} />
+    </StigmerContext.Provider>,
+  );
+}
+
+afterEach(cleanup);
+
+describe("OAuthAppDetailPanel save payload", () => {
+  it("keeps the stored secret (redaction marker) when the secret input is left empty", async () => {
+    const update = vi.fn(async (_input: OAuthAppInput) => APP);
+    renderPanel(update);
+
+    fireEvent.click(screen.getByRole("button", { name: "Edit" }));
+    const provider = await screen.findByLabelText("Provider");
+    fireEvent.change(provider, { target: { value: "github-enterprise" } });
+    fireEvent.click(screen.getByRole("button", { name: "Save changes" }));
+
+    await waitFor(() => expect(update).toHaveBeenCalledTimes(1));
+    const input = update.mock.calls[0]![0];
+
+    // Empty secret input → the redaction marker rides along → the server
+    // preserves the stored secret.
+    expect(input.clientSecret).toBe(REDACTED);
+    // The edited field.
+    expect(input.provider).toBe("github-enterprise");
+    // Unedited fields round-trip.
+    expect(input.tokenEndpointAuthMethod).toBe(
+      TokenEndpointAuthMethod.CLIENT_SECRET_POST,
+    );
+    expect(input.scopes).toEqual(["repo"]);
+    expect(input.org).toBe("acme");
+    expect(input.slug).toBe("github-oauth");
+  });
+
+  it("sends a newly entered secret instead of the marker", async () => {
+    const update = vi.fn(async (_input: OAuthAppInput) => APP);
+    renderPanel(update);
+
+    fireEvent.click(screen.getByRole("button", { name: "Edit" }));
+    const secret = await screen.findByLabelText("Client secret");
+    fireEvent.change(secret, { target: { value: "new-secret" } });
+    fireEvent.click(screen.getByRole("button", { name: "Save changes" }));
+
+    await waitFor(() => expect(update).toHaveBeenCalledTimes(1));
+    expect(update.mock.calls[0]![0].clientSecret).toBe("new-secret");
+  });
+});