@stigmer/react 3.12.3 → 3.12.5

package/src/execution/tool-categories.ts

@@ -1,16 +1,22 @@
 import type { ToolCall } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
 import { ToolCallStatus } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
 import type { JsonObject } from "@bufbuild/protobuf";
-import { ToolKind, resolveToolKind, resolveToolKindByName } from "@stigmer/sdk";
+import {
+  ToolKind,
+  resolveToolKind,
+  resolveToolKindByName,
+  shellIntentFromArgs,
+} from "@stigmer/sdk";
 
 /**
  * Discriminated tool categories for type-aware rendering.
  *
  * This is the presentation taxonomy. Classification (name -> kind) lives in
  * `@stigmer/sdk`'s `resolveToolKind` (single source of truth, shared with the
- * runner and Go CLI); this file maps each {@link ToolKind} to its presentation
- * metadata (label, primary argument). `"mcp"` covers tools originating from an
- * MCP server, whose names are dynamic.
+ * runner, @stigmer/ink, and the CLI's headless renderers); this file maps each
+ * {@link ToolKind} to its presentation metadata (label, primary argument).
+ * `"mcp"` covers tools originating from an MCP server, whose names are
+ * dynamic.
  */
 export type ToolCategory =
   | "shell"
@@ -497,42 +503,12 @@ export function extractIntentFromPreview(
   }
 }
 
-/**
- * The tool-call argument that carries a model-authored intent phrase for
- * SHELL tools (stigmer#276) — a short human description of what the command
- * does and why, rendered as the row title with the command as secondary text.
- *
- * Two writers populate it, converged on one wire key by design: the native
- * harness's tool-intent middleware (`backend/services/runner/src/middleware/
- * tool-intent.ts`, `INTENT_ARG`) extends the shell tool's bind-time schema
- * with it, and the Cursor harness's built-in Shell tool carries it natively.
- * The shared, machine-checked contract is
- * `test/fixtures/tool-view/intent-title.json` — keep all three in lockstep.
- */
-export const SHELL_INTENT_ARG_FIELD = "description";
-
-/**
- * The intent-title extraction core: SHELL-kind-scoped on purpose, because
- * `description` means other things on other tools (a task tool's description
- * is the sub-agent subject, never a row title). Blank and non-string values
- * degrade to null — the caller falls back to the category label.
- */
-function extractIntentFromArgs(kind: ToolKind, args: JsonObject | undefined): string | null {
-  if (kind !== ToolKind.SHELL || !args) return null;
-  const value = args[SHELL_INTENT_ARG_FIELD];
-  if (typeof value !== "string") return null;
-  const trimmed = value.trim();
-  return trimmed.length > 0 ? trimmed : null;
-}
-
-/**
- * Extracts the model-authored intent phrase from a SHELL tool call, or null
- * when absent (legacy executions, models that skipped the optional arg, and
- * every non-shell kind). See {@link SHELL_INTENT_ARG_FIELD}.
- */
-export function extractShellIntent(toolCall: ToolCall): string | null {
-  return extractIntentFromArgs(resolveToolKind(toolCall), toolCall.args);
-}
+// Intent-title extraction lives in @stigmer/sdk's tool-view module — the
+// cross-surface single source of truth the intent-title.json fixture pins —
+// so React, Ink, and the CLI's headless renderers share one implementation.
+// Re-exported here because this module is where React's public tool-view API
+// surfaced them first (#677).
+export { SHELL_INTENT_ARG_FIELD, extractShellIntent } from "@stigmer/sdk";
 
 /**
  * Preview-string twin of {@link extractShellIntent} for surfaces that carry a
@@ -556,7 +532,7 @@ export function extractShellIntentFromPreview(
   try {
     const parsed = JSON.parse(argsPreview);
     if (typeof parsed !== "object" || parsed === null) return null;
-    return extractIntentFromArgs(kind, parsed as JsonObject);
+    return shellIntentFromArgs(kind, parsed as JsonObject);
   } catch {
     return null;
   }

package/src/iam-policy/PeopleWithAccess.tsx

@@ -4,6 +4,7 @@ import { useCallback, useState } from "react";
 import type { ApiResourceKind } from "@stigmer/protos/ai/stigmer/commons/apiresource/apiresourcekind/api_resource_kind_pb";
 import type { PrincipalAccess } from "@stigmer/protos/ai/stigmer/iam/iampolicy/v1/io_pb";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_LIST } from "../internal/element-resets.js";
 import { getUserMessage } from "@stigmer/sdk";
 import { useShareFlow, type ShareFlowResource } from "./useShareFlow.js";
 import { GrantAccessForm } from "./GrantAccessForm.js";
@@ -83,7 +84,7 @@ export function PeopleWithAccess({
         )}
 
         {!isLoading && accessList.length > 0 && (
-          <ul className="stg:space-y-1 stg:mt-2" aria-label="People with access">
+          <ul className={cn(UNSTYLED_LIST, "stg:space-y-1 stg:mt-2")} aria-label="People with access">
             {accessList.map((entry) => (
               <AccessEntry
                 key={entry.principal?.id ?? "unknown"}

package/src/iam-policy/PrincipalPicker.tsx

@@ -3,6 +3,7 @@
 import { useCallback, useId, useMemo, useRef, useState } from "react";
 import type { ApiResourceRefView } from "@stigmer/protos/ai/stigmer/iam/iampolicy/v1/io_pb";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_LIST } from "../internal/element-resets.js";
 import { getUserMessage } from "@stigmer/sdk";
 import { useResourceAccess } from "./useResourceAccess.js";
 import { ProviderBadge, providerLabel } from "./ProviderBadge.js";
@@ -238,6 +239,7 @@ export function PrincipalPicker({
             role="listbox"
             aria-label="Organization members"
             className={cn(
+              UNSTYLED_LIST,
               "stg:absolute stg:z-10 stg:mt-1 stg:max-h-56 stg:w-full stg:overflow-auto stg:rounded-md stg:border stg:border-border stg:bg-popover stg:py-1 stg:shadow-md",
             )}
           >

package/src/iam-policy/RoleSelector.tsx

@@ -4,6 +4,7 @@ import { useId } from "react";
 import type { ApiResourceKind } from "@stigmer/protos/ai/stigmer/commons/apiresource/apiresourcekind/api_resource_kind_pb";
 import type { IamRole } from "@stigmer/protos/ai/stigmer/iam/v1/enum_pb";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_FIELDSET } from "../internal/element-resets.js";
 import { useRoleSelector } from "./useRoleSelector.js";
 
 /** Props for {@link RoleSelector}. */
@@ -73,7 +74,7 @@ export function RoleSelector({
   }
 
   return (
-    <fieldset className={cn("stg:space-y-1.5", className)}>
+    <fieldset className={cn(UNSTYLED_FIELDSET, "stg:space-y-1.5", className)}>
       <legend className="stg:text-xs stg:font-medium stg:text-foreground">Role</legend>
       <div className="stg:flex stg:flex-wrap stg:gap-2">
         {options.map((opt) => {

package/src/identity-account/AccountPreferencesPanel.tsx

@@ -0,0 +1,446 @@
+"use client";
+
+import { type FormEvent, useCallback, useEffect, useId, useMemo, useState } from "react";
+import { cn } from "@stigmer/theme";
+import { getUserMessage, toIdentityAccountUpdateInput } from "@stigmer/sdk";
+import type { IdentityAccount } from "@stigmer/protos/ai/stigmer/iam/identityaccount/v1/api_pb";
+import { useMyIdentityAccount } from "./useMyIdentityAccount.js";
+import { useUpdateIdentityAccount } from "./useUpdateIdentityAccount.js";
+import { useResourceAvailable, ApiResourceKind } from "../deployment-mode.js";
+import { useModelRegistry } from "../models/index.js";
+import { HARNESS_META, type HarnessOption } from "../models/harness.js";
+import { CloudFeatureNotice } from "../internal/CloudFeatureNotice.js";
+import { StandingContextField } from "../internal/StandingContextField.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
+
+/** Props for {@link AccountPreferencesPanel}. */
+export interface AccountPreferencesPanelProps {
+  /** Fired with the updated resource after a successful save. */
+  readonly onUpdated?: (account: IdentityAccount) => void;
+  /** Additional CSS class names for the root container. */
+  readonly className?: string;
+}
+
+/**
+ * Self-contained editor for the current user's declared preferences
+ * (`IdentityAccountSpec.preferences.standing_context`).
+ *
+ * The declared text is snapshotted into the user's own eligible agent
+ * executions and delivered to the agent as background context.
+ * Self-service: the account is resolved via `whoAmI()` and updated
+ * through the caller's self-ownership permission — no explicit
+ * permission check is needed. On save, calls `identityAccount.update()`
+ * with the complete mapped input (full-spec-replace safety) and fires
+ * `onUpdated`.
+ *
+ * Cloud-only: the OSS local server has no IdentityAccount (local mode
+ * is single-user, so the organization's preferences cover it). In local
+ * mode the panel renders a {@link CloudFeatureNotice} instead.
+ *
+ * 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
+ * <AccountPreferencesPanel />
+ * ```
+ */
+export function AccountPreferencesPanel({
+  onUpdated,
+  className,
+}: AccountPreferencesPanelProps) {
+  const baseId = useId();
+  const available = useResourceAvailable(ApiResourceKind.identity_account);
+
+  if (!available) {
+    return (
+      <CloudFeatureNotice className={className}>
+        Personal preferences require Stigmer Cloud. Local mode is
+        single-user, so the organization&apos;s preferences apply to every
+        execution — set standing context there instead.
+      </CloudFeatureNotice>
+    );
+  }
+
+  return (
+    <AccountPreferencesForm
+      baseId={baseId}
+      onUpdated={onUpdated}
+      className={className}
+    />
+  );
+}
+
+/**
+ * Inner form, mounted only when IdentityAccount is available — keeps the
+ * data hooks from issuing doomed RPCs against a local server.
+ */
+function AccountPreferencesForm({
+  baseId,
+  onUpdated,
+  className,
+}: {
+  readonly baseId: string;
+  readonly onUpdated?: (account: IdentityAccount) => void;
+  readonly className?: string;
+}) {
+  const {
+    account,
+    isLoading: isFetching,
+    error: fetchError,
+    refetch,
+  } = useMyIdentityAccount();
+
+  const {
+    update,
+    isUpdating,
+    error: updateError,
+    clearError,
+  } = useUpdateIdentityAccount();
+
+  const [standingContext, setStandingContext] = useState("");
+  const [defaultHarness, setDefaultHarness] = useState("");
+  const [defaultNativeModel, setDefaultNativeModel] = useState("");
+  const [defaultCursorModel, setDefaultCursorModel] = useState("");
+
+  const serverPreferences = account?.spec?.preferences;
+  const serverStandingContext = serverPreferences?.standingContext ?? "";
+  const serverDefaultHarness = serverPreferences?.defaultHarness ?? "";
+  const serverDefaultNativeModel = serverPreferences?.defaultNativeModel ?? "";
+  const serverDefaultCursorModel = serverPreferences?.defaultCursorModel ?? "";
+
+  // Sync the form fields when server data changes.
+  useEffect(() => {
+    if (!account) return;
+    const prefs = account.spec?.preferences;
+    setStandingContext(prefs?.standingContext ?? "");
+    setDefaultHarness(prefs?.defaultHarness ?? "");
+    setDefaultNativeModel(prefs?.defaultNativeModel ?? "");
+    setDefaultCursorModel(prefs?.defaultCursorModel ?? "");
+  }, [account]);
+
+  const hasChanges = useMemo(
+    () =>
+      standingContext.trim() !== serverStandingContext ||
+      defaultHarness !== serverDefaultHarness ||
+      defaultNativeModel !== serverDefaultNativeModel ||
+      defaultCursorModel !== serverDefaultCursorModel,
+    [
+      standingContext,
+      defaultHarness,
+      defaultNativeModel,
+      defaultCursorModel,
+      serverStandingContext,
+      serverDefaultHarness,
+      serverDefaultNativeModel,
+      serverDefaultCursorModel,
+    ],
+  );
+
+  const canSubmit = hasChanges && !isUpdating;
+
+  const handleDiscard = useCallback(() => {
+    setStandingContext(serverStandingContext);
+    setDefaultHarness(serverDefaultHarness);
+    setDefaultNativeModel(serverDefaultNativeModel);
+    setDefaultCursorModel(serverDefaultCursorModel);
+    clearError();
+  }, [
+    serverStandingContext,
+    serverDefaultHarness,
+    serverDefaultNativeModel,
+    serverDefaultCursorModel,
+    clearError,
+  ]);
+
+  const handleSubmit = useCallback(
+    async (e: FormEvent) => {
+      e.preventDefault();
+      if (!canSubmit || !account) return;
+
+      clearError();
+      try {
+        // update() is a full-spec replace: spread the complete mapped input
+        // so unedited spec fields survive. `preferences` is a nested message,
+        // so the override spreads the mapper's COMPLETE preferences too —
+        // fields this form does not own (added by later phases) survive.
+        const mapped = toIdentityAccountUpdateInput(account);
+        const updated = await update({
+          ...mapped,
+          preferences: {
+            ...mapped.preferences,
+            standingContext: standingContext.trim() || undefined,
+            defaultHarness: defaultHarness || undefined,
+            defaultNativeModel: defaultNativeModel || undefined,
+            defaultCursorModel: defaultCursorModel || undefined,
+          },
+        });
+        refetch();
+        onUpdated?.(updated);
+      } catch {
+        // error state is managed by useUpdateIdentityAccount
+      }
+    },
+    [
+      canSubmit,
+      account,
+      standingContext,
+      defaultHarness,
+      defaultNativeModel,
+      defaultCursorModel,
+      update,
+      clearError,
+      refetch,
+      onUpdated,
+    ],
+  );
+
+  // -----------------------------------------------------------------------
+  // Loading state
+  // -----------------------------------------------------------------------
+
+  if (isFetching && !account) {
+    return (
+      <div
+        className={cn("stg:space-y-4", className)}
+        aria-busy="true"
+        aria-label="Loading account 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 (!account) 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}
+        placeholder={
+          "e.g. Keep answers terse. I prefer TypeScript examples. My timezone is IST."
+        }
+        helperText="Shared with agents as background context — not instructions. Applies only to executions you start and is visible on those execution records."
+      />
+
+      <div className="stg:space-y-3">
+        <div>
+          <h3 className="stg:text-xs stg:font-medium stg:text-foreground">
+            Execution defaults
+          </h3>
+          <p className="stg:text-[0.65rem] stg:text-muted-foreground">
+            Seed new sessions across your devices and the CLI. An explicit
+            pick in the composer always wins for that device.
+          </p>
+        </div>
+
+        <DefaultHarnessRadioGroup
+          baseId={baseId}
+          value={defaultHarness}
+          onChange={setDefaultHarness}
+          disabled={isUpdating}
+        />
+
+        <div className="stg:grid stg:gap-3 stg:sm:grid-cols-2">
+          <DefaultModelSelect
+            id={`${baseId}-default-native-model`}
+            harness="native"
+            label={`Default model — ${HARNESS_META.native.label}`}
+            value={defaultNativeModel}
+            onChange={setDefaultNativeModel}
+            disabled={isUpdating}
+          />
+          <DefaultModelSelect
+            id={`${baseId}-default-cursor-model`}
+            harness="cursor"
+            label={`Default model — ${HARNESS_META.cursor.label}`}
+            value={defaultCursorModel}
+            onChange={setDefaultCursorModel}
+            disabled={isUpdating}
+          />
+        </div>
+      </div>
+
+      {updateError && (
+        <p className="stg:text-destructive stg:text-[0.65rem]" role="alert">
+          {getUserMessage(updateError)}
+        </p>
+      )}
+
+      <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>
+  );
+}
+
+/**
+ * Only harnesses with a shipped runtime are offerable as a default — must
+ * stay in lockstep with the proto's `default_harness` in-list validation.
+ */
+const OFFERABLE_HARNESSES: readonly HarnessOption[] = ["native", "cursor"];
+
+/**
+ * Default-harness choice: Platform default plus each shipped harness.
+ * A mutually exclusive, always-visible set — radio group, not a select.
+ */
+function DefaultHarnessRadioGroup({
+  baseId,
+  value,
+  onChange,
+  disabled,
+}: {
+  readonly baseId: string;
+  readonly value: string;
+  readonly onChange: (value: string) => void;
+  readonly disabled: boolean;
+}) {
+  const name = `${baseId}-default-harness`;
+  const options: readonly { value: string; label: string }[] = [
+    { value: "", label: "Platform default" },
+    ...OFFERABLE_HARNESSES.map((h) => ({ value: h, label: HARNESS_META[h].label })),
+  ];
+
+  return (
+    <fieldset className="stg:space-y-1" disabled={disabled}>
+      <legend className="stg:text-xs stg:font-medium stg:text-foreground">
+        Default harness
+      </legend>
+      <div className="stg:flex stg:flex-wrap stg:gap-x-4 stg:gap-y-1">
+        {options.map((option) => (
+          <label
+            key={option.value}
+            className={cn(
+              "stg:inline-flex stg:cursor-pointer stg:items-center stg:gap-1.5 stg:text-xs stg:text-foreground",
+              disabled && "stg:cursor-default stg:opacity-50",
+            )}
+          >
+            <input
+              type="radio"
+              name={name}
+              value={option.value}
+              checked={value === option.value}
+              onChange={() => onChange(option.value)}
+              disabled={disabled}
+              className="stg:accent-primary stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring"
+            />
+            {option.label}
+          </label>
+        ))}
+      </div>
+    </fieldset>
+  );
+}
+
+/**
+ * Per-harness default model select, fed by the harness-filtered registry.
+ *
+ * A saved model that the registry no longer lists is rendered as its own
+ * "(unavailable)" option so the select never lies about the stored value;
+ * composers self-heal such a preference to the platform default on read.
+ */
+function DefaultModelSelect({
+  id,
+  harness,
+  label,
+  value,
+  onChange,
+  disabled,
+}: {
+  readonly id: string;
+  readonly harness: HarnessOption;
+  readonly label: string;
+  readonly value: string;
+  readonly onChange: (value: string) => void;
+  readonly disabled: boolean;
+}) {
+  const { models, isLoading } = useModelRegistry({ harness });
+  const isStale = value !== "" && !isLoading && !models.some((m) => m.modelId === value);
+
+  return (
+    <div className="stg:space-y-1">
+      <label
+        htmlFor={id}
+        className="stg:text-xs stg:font-medium stg:text-foreground"
+      >
+        {label}
+      </label>
+      <select
+        id={id}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        disabled={disabled || isLoading}
+        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="">Platform default</option>
+        {isStale && <option value={value}>{value} (unavailable)</option>}
+        {models.map((model) => (
+          <option key={model.modelId} value={model.modelId}>
+            {model.displayName || model.modelId}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}