@stigmer/react 3.12.3 → 3.12.5

package/src/mcp-server/useMcpServerOAuthConnect.ts

@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useRef, useState } from "react";
 import { create } from "@bufbuild/protobuf";
-import { getUserMessage } from "@stigmer/sdk";
+import { connectAndWait, getUserMessage } from "@stigmer/sdk";
 import type { McpServer } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/api_pb";
 import {
   InitiateOAuthConnectInputSchema,
@@ -248,7 +248,12 @@ export function useMcpServerOAuthConnect(): UseMcpServerOAuthConnectReturn {
             : {}),
         });
 
-        const server = await stigmer.mcpServer.connect(input);
+        // Async connect lane (stigmer/stigmer#425): startConnect + poll via
+        // the SDK's shared protocol, so the discovery wait can outlive the
+        // browser's ~300s no-bytes unary limit that used to fail this phase
+        // spuriously. Old backends without the lane fall back to the
+        // blocking RPC inside connectAndWait.
+        const server = await connectAndWait(stigmer.mcpServer, input);
 
         advancePhase("done");
         return server;

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

@@ -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 { 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();
@@ -139,6 +146,10 @@ export function OAuthAppDetailPanel({
           ...(scopeParameterName.trim() && {
             scopeParameterName: scopeParameterName.trim(),
           }),
+          ...(tokenEndpointAuthMethod !== "unspecified" && {
+            tokenEndpointAuthMethod:
+              TOKEN_AUTH_METHOD_MAP[tokenEndpointAuthMethod],
+          }),
           ...(vendorApprovalStatus !== "unspecified" && {
             vendorApprovalStatus: APPROVAL_STATUS_MAP[vendorApprovalStatus],
           }),
@@ -154,8 +165,9 @@ export function OAuthAppDetailPanel({
     },
     [
       meta, provider, clientId, clientSecret, authorizationUrl, tokenUrl,
-      scopes, userinfoUrl, scopeParameterName, vendorApprovalStatus,
-      vendorApprovalDocsUrl, update, clearUpdateError, onUpdated,
+      scopes, userinfoUrl, scopeParameterName, tokenEndpointAuthMethod,
+      vendorApprovalStatus, vendorApprovalDocsUrl, update, clearUpdateError,
+      onUpdated,
     ],
   );
 
@@ -372,6 +384,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 +527,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 +583,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/organization/OrgPreferencesPanel.tsx

@@ -0,0 +1,221 @@
+"use client";
+
+import { type FormEvent, useCallback, useEffect, useId, useMemo, useState } from "react";
+import { cn } from "@stigmer/theme";
+import { getUserMessage, toOrganizationUpdateInput } from "@stigmer/sdk";
+import type { Organization } from "@stigmer/protos/ai/stigmer/tenancy/organization/v1/api_pb";
+import { useOrganization } from "./useOrganization.js";
+import { useUpdateOrganization } from "./useUpdateOrganization.js";
+import { useCheckPermission } from "../iam-policy/useCheckPermission.js";
+import { StandingContextField } from "../internal/StandingContextField.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
+
+/** Props for {@link OrgPreferencesPanel}. */
+export interface OrgPreferencesPanelProps {
+  /** The ID of the organization whose preferences to display and edit. */
+  readonly orgId: string;
+  /** Fired with the updated resource after a successful save. */
+  readonly onUpdated?: (org: Organization) => void;
+  /** Additional CSS class names for the root container. */
+  readonly className?: string;
+}
+
+/**
+ * Self-contained editor for an {@link Organization}'s declared
+ * preferences (`spec.preferences.standing_context`).
+ *
+ * The declared text is snapshotted into every eligible agent execution
+ * run by the organization's members (first-party human operators only)
+ * and delivered to the agent as background context. Editing requires
+ * `can_edit` on the organization; viewers without it get a read-only
+ * rendering. On save, calls `organization.update()` with the complete
+ * mapped input (full-spec-replace safety) and fires `onUpdated`.
+ *
+ * All visual properties flow through `--stgm-*` design tokens. Zero
+ * dependencies on Console routing, auth context, or layout — platform
+ * builders can embed it directly:
+ *
+ * @example
+ * ```tsx
+ * <OrgPreferencesPanel orgId="org-id-123" />
+ * ```
+ */
+export function OrgPreferencesPanel({
+  orgId,
+  onUpdated,
+  className,
+}: OrgPreferencesPanelProps) {
+  const baseId = useId();
+  const {
+    organization,
+    isLoading: isFetching,
+    error: fetchError,
+    refetch,
+  } = useOrganization(orgId || null);
+
+  const {
+    update,
+    isUpdating,
+    error: updateError,
+    clearError,
+  } = useUpdateOrganization();
+
+  // Fail-open: OSS local mode has no IAM service, so editing stays
+  // available there; cloud gets a genuine server verdict.
+  const { allowed: canEdit } = useCheckPermission(
+    orgId ? { kind: "organization", id: orgId } : null,
+    "can_edit",
+  );
+
+  const [standingContext, setStandingContext] = useState("");
+
+  const serverStandingContext =
+    organization?.spec?.preferences?.standingContext ?? "";
+
+  // Sync the form field when server data changes.
+  useEffect(() => {
+    if (!organization) return;
+    setStandingContext(
+      organization.spec?.preferences?.standingContext ?? "",
+    );
+  }, [organization]);
+
+  const hasChanges = useMemo(
+    () => standingContext.trim() !== serverStandingContext,
+    [standingContext, serverStandingContext],
+  );
+
+  const canSubmit = canEdit && hasChanges && !isUpdating;
+
+  const handleDiscard = useCallback(() => {
+    setStandingContext(serverStandingContext);
+    clearError();
+  }, [serverStandingContext, clearError]);
+
+  const handleSubmit = useCallback(
+    async (e: FormEvent) => {
+      e.preventDefault();
+      if (!canSubmit || !organization) return;
+
+      clearError();
+      try {
+        // update() is a full-spec replace: spread the complete mapped input
+        // so unedited spec fields survive, and override only preferences.
+        const updated = await update({
+          ...toOrganizationUpdateInput(organization),
+          preferences: { standingContext: standingContext.trim() || undefined },
+        });
+        refetch();
+        onUpdated?.(updated);
+      } catch {
+        // error state is managed by useUpdateOrganization
+      }
+    },
+    [canSubmit, organization, standingContext, update, clearError, refetch, onUpdated],
+  );
+
+  // -----------------------------------------------------------------------
+  // Loading state
+  // -----------------------------------------------------------------------
+
+  if (isFetching && !organization) {
+    return (
+      <div
+        className={cn("stg:space-y-4", className)}
+        aria-busy="true"
+        aria-label="Loading organization preferences"
+      >
+        <div className="stg:bg-muted-subtle stg:h-28 stg:animate-pulse stg:rounded" />
+        <div className="stg:bg-muted-subtle stg:h-8 stg:w-32 stg:animate-pulse stg:rounded" />
+      </div>
+    );
+  }
+
+  // -----------------------------------------------------------------------
+  // Fetch error
+  // -----------------------------------------------------------------------
+
+  if (fetchError) {
+    return (
+      <div className={cn("stg:space-y-3", className)} role="alert">
+        <p className="stg:text-destructive stg:text-sm">
+          {getUserMessage(fetchError)}
+        </p>
+        <button
+          type="button"
+          onClick={refetch}
+          className={cn(
+            "stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium",
+            "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover",
+          )}
+        >
+          Retry
+        </button>
+      </div>
+    );
+  }
+
+  if (!organization) return null;
+
+  // -----------------------------------------------------------------------
+  // Render
+  // -----------------------------------------------------------------------
+
+  return (
+    <form onSubmit={handleSubmit} className={cn("stg:space-y-4", className)}>
+      <StandingContextField
+        id={`${baseId}-standing-context`}
+        value={standingContext}
+        onChange={setStandingContext}
+        disabled={isUpdating}
+        readOnly={!canEdit}
+        placeholder={
+          "e.g. We deploy to us-east-1. Our stack is Go and TypeScript. Prefer concise answers."
+        }
+        helperText="Shared with agents as background context — not instructions. Applies to executions started by signed-in members of this organization and is visible on their execution records."
+      />
+
+      {!canEdit && (
+        <p className="stg:text-[0.65rem] stg:text-muted-foreground">
+          Only organization admins can edit these preferences.
+        </p>
+      )}
+
+      {updateError && (
+        <p className="stg:text-destructive stg:text-[0.65rem]" role="alert">
+          {getUserMessage(updateError)}
+        </p>
+      )}
+
+      {canEdit && (
+        <div className="stg:flex stg:items-center stg:gap-2">
+          <button
+            type="submit"
+            disabled={!canSubmit}
+            className={cn(
+              "stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium",
+              "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-40",
+            )}
+          >
+            {isUpdating && <SpinnerIcon size={12} />}
+            Save changes
+          </button>
+
+          {hasChanges && !isUpdating && (
+            <button
+              type="button"
+              onClick={handleDiscard}
+              className={cn(
+                "stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs",
+                "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+              )}
+            >
+              Discard
+            </button>
+          )}
+        </div>
+      )}
+    </form>
+  );
+}

package/src/organization/OrgProfilePanel.tsx

@@ -2,7 +2,7 @@
 
 import { type FormEvent, useCallback, useEffect, useId, useMemo, useState } from "react";
 import { cn } from "@stigmer/theme";
-import { getUserMessage } from "@stigmer/sdk";
+import { getUserMessage, toOrganizationUpdateInput } from "@stigmer/sdk";
 import type { Organization } from "@stigmer/protos/ai/stigmer/tenancy/organization/v1/api_pb";
 import { useOrganization } from "./useOrganization.js";
 import { useUpdateOrganization } from "./useUpdateOrganization.js";
@@ -116,10 +116,12 @@ export function OrgProfilePanel({
 
       clearError();
       try {
+        // update() is a full-spec replace: spread the complete mapped input
+        // so unedited spec fields (e.g. preferences) survive the save, and
+        // override only the fields this form edits.
         const updated = await update({
+          ...toOrganizationUpdateInput(organization),
           name: name.trim(),
-          slug: serverSlug,
-          org: serverSlug,
           description: description.trim() || undefined,
           logoUrl: logoUrl.trim() || undefined,
         });
@@ -135,7 +137,6 @@ export function OrgProfilePanel({
       name,
       description,
       logoUrl,
-      serverSlug,
       update,
       clearError,
       refetch,

package/src/organization/__tests__/OrgPreferencesPanel.test.tsx

@@ -0,0 +1,145 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { create } from "@bufbuild/protobuf";
+import {
+  OrganizationSchema,
+  type Organization,
+} from "@stigmer/protos/ai/stigmer/tenancy/organization/v1/api_pb";
+import type { OrganizationInput } from "@stigmer/sdk";
+import { StigmerContext } from "../../context";
+import { DeploymentModeContext } from "../../deployment-mode";
+import { OrgPreferencesPanel } from "../OrgPreferencesPanel";
+
+const ORG: Organization = create(OrganizationSchema, {
+  metadata: { id: "acme", name: "Acme Corp", slug: "acme", org: "acme" },
+  spec: {
+    description: "We make everything.",
+    logoUrl: "https://acme.example/logo.png",
+    preferences: { standingContext: "We deploy to us-east-1." },
+  },
+});
+
+function createMockStigmer(overrides?: {
+  update?: ReturnType<typeof vi.fn>;
+  canEdit?: boolean;
+}) {
+  return {
+    organization: {
+      get: vi.fn(async () => ORG),
+      update: overrides?.update ?? vi.fn(async () => ORG),
+    },
+    iamPolicy: {
+      checkMyPermission: vi.fn(async () => ({
+        isAuthorized: overrides?.canEdit ?? true,
+      })),
+    },
+  } as never;
+}
+
+function renderPanel(client: unknown) {
+  return render(
+    <StigmerContext.Provider value={client as never}>
+      <DeploymentModeContext.Provider value="local">
+        <OrgPreferencesPanel orgId="acme" />
+      </DeploymentModeContext.Provider>
+    </StigmerContext.Provider>,
+  );
+}
+
+afterEach(cleanup);
+
+/**
+ * Waits until the form has synced from server data (the panel copies the
+ * fetched value into local state in a passive effect, one flush after the
+ * field first renders) — interacting earlier races the sync.
+ */
+async function findSyncedField(value: string) {
+  const field = await screen.findByLabelText("Standing context");
+  await waitFor(() => expect(field).toHaveProperty("value", value));
+  return field;
+}
+
+describe("OrgPreferencesPanel", () => {
+  it("loads and displays the declared standing context", async () => {
+    renderPanel(createMockStigmer());
+
+    await findSyncedField("We deploy to us-east-1.");
+  });
+
+  it("saves the full mapped input — unedited profile fields survive (wipe-bug guard)", async () => {
+    const update = vi.fn(async (_input: OrganizationInput) => ORG);
+    renderPanel(createMockStigmer({ update }));
+
+    const field = await findSyncedField("We deploy to us-east-1.");
+    fireEvent.change(field, { target: { value: "Prefer terse answers." } });
+    fireEvent.click(screen.getByRole("button", { name: "Save changes" }));
+
+    await waitFor(() => expect(update).toHaveBeenCalledTimes(1));
+    const input = update.mock.calls[0]![0];
+
+    expect(input.preferences).toEqual({
+      standingContext: "Prefer terse answers.",
+    });
+    // Fields this form never renders must round-trip untouched.
+    expect(input.name).toBe("Acme Corp");
+    expect(input.description).toBe("We make everything.");
+    expect(input.logoUrl).toBe("https://acme.example/logo.png");
+    expect(input.org).toBe("acme");
+    expect(input.slug).toBe("acme");
+  });
+
+  it("clears the standing context when the text is emptied", async () => {
+    const update = vi.fn(async (_input: OrganizationInput) => ORG);
+    renderPanel(createMockStigmer({ update }));
+
+    const field = await findSyncedField("We deploy to us-east-1.");
+    fireEvent.change(field, { target: { value: "" } });
+    fireEvent.click(screen.getByRole("button", { name: "Save changes" }));
+
+    await waitFor(() => expect(update).toHaveBeenCalledTimes(1));
+    expect(update.mock.calls[0]![0].preferences).toEqual({
+      standingContext: undefined,
+    });
+  });
+
+  it("discard resets the field to the server value", async () => {
+    renderPanel(createMockStigmer());
+
+    const field = await findSyncedField("We deploy to us-east-1.");
+    fireEvent.change(field, { target: { value: "Edited but regretted" } });
+    fireEvent.click(screen.getByRole("button", { name: "Discard" }));
+
+    expect(field).toHaveProperty("value", "We deploy to us-east-1.");
+  });
+
+  it("renders read-only with an explanation when the caller lacks can_edit", async () => {
+    renderPanel(createMockStigmer({ canEdit: false }));
+
+    const field = await screen.findByLabelText("Standing context");
+    await waitFor(() =>
+      expect(field).toHaveProperty("readOnly", true),
+    );
+    expect(
+      screen.getByText("Only organization admins can edit these preferences."),
+    ).toBeTruthy();
+    expect(screen.queryByRole("button", { name: "Save changes" })).toBeNull();
+  });
+
+  it("shows the fetch error with a retry action when loading fails", async () => {
+    const client = {
+      organization: {
+        get: vi.fn(async () => {
+          throw new Error("boom");
+        }),
+        update: vi.fn(),
+      },
+      iamPolicy: {
+        checkMyPermission: vi.fn(async () => ({ isAuthorized: true })),
+      },
+    } as never;
+    renderPanel(client);
+
+    expect(await screen.findByRole("alert")).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Retry" })).toBeTruthy();
+  });
+});