@stigmer/react 3.12.4 → 3.12.5

package/src/mcp-server/useMcpServerConnect.ts

@@ -4,7 +4,7 @@ import { useCallback, useState } from "react";
 import { create } from "@bufbuild/protobuf";
 import type { McpServer } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/api_pb";
 import { ConnectInputSchema } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/io_pb";
-import type { EnvVarInput } from "@stigmer/sdk";
+import { connectAndWait, type EnvVarInput } from "@stigmer/sdk";
 import { useStigmer } from "../hooks.js";
 import { resolveDeclaredSystemEnvVars } from "../environment/systemEnvVars.js";
 import { toError } from "../internal/toError.js";
@@ -15,9 +15,12 @@ export interface UseMcpServerConnectReturn {
    * Connect to an MCP server: discover its tools, resource templates,
    * and classify tool approval policies via a lightweight LLM call.
    *
-   * Calls the `connect` RPC which starts a Temporal workflow on the
-   * runner. The RPC blocks until the workflow completes
-   * (typically 5-15 seconds, ~30s timeout).
+   * Uses the async connect lane (`startConnect` + polling via the SDK's
+   * `connectAndWait`, stigmer/stigmer#425): the promise still resolves
+   * when the operation settles — legitimately tens of seconds to minutes
+   * for heavy servers — but no RPC stays open that long, so the wait
+   * survives browser transport limits. Backends without the lane fall
+   * back to the blocking `connect` RPC transparently.
    *
    * Platform system env vars (`STIGMER_SERVER_ADDRESS`,
    * `STIGMER_API_KEY`) are injected only when the MCP server
@@ -45,7 +48,7 @@ export interface UseMcpServerConnectReturn {
     runtimeEnv?: Record<string, EnvVarInput>,
     declaredEnvKeys?: readonly string[],
   ) => Promise<McpServer>;
-  /** `true` while the connect RPC is in flight. */
+  /** `true` while the connect operation is in flight (start through settle). */
   readonly isConnecting: boolean;
   /** Error from the most recent failed connect, or `null`. */
   readonly error: Error | null;
@@ -129,7 +132,7 @@ export function useMcpServerConnect(): UseMcpServerConnectReturn {
             : {}),
         });
 
-        return await stigmer.mcpServer.connect(input);
+        return await connectAndWait(stigmer.mcpServer, input);
       } catch (err) {
         const wrapped = toError(err);
         setError(wrapped);

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,