@stigmer/react 0.2.2 → 0.3.0

package/src/identity-provider/IdentityProviderWizard.tsx

@@ -26,7 +26,7 @@ export interface IdentityProviderWizardProps {
   readonly className?: string;
 }
 
-type WizardStep = "pick" | "configure" | "review";
+type WizardStep = "pick" | "configure" | "review" | "success";
 
 /**
  * Multi-step wizard for creating a new identity provider.
@@ -88,6 +88,9 @@ export function IdentityProviderWizard({
   const [autoGrantRole, setAutoGrantRole] = useState<IamRole>(IamRole.iam_role_unspecified);
   const [tenantOrgClaim, setTenantOrgClaim] = useState("");
 
+  // Success step
+  const [createdIdp, setCreatedIdp] = useState<IdentityProvider | null>(null);
+
   // -- Step transitions ------------------------------------------------
 
   const handlePickProvider = useCallback((selected: ProviderPreset) => {
@@ -186,7 +189,8 @@ export function IdentityProviderWizard({
             }),
           }),
         });
-        onCreated?.(idp);
+        setCreatedIdp(idp);
+        setStep("success");
       } catch {
         // error state is managed by useCreateIdentityProvider
       }
@@ -194,7 +198,7 @@ export function IdentityProviderWizard({
     [
       name, org, jwksUri, issuers, audience, userinfoEndpoint,
       isSso, oidcClientId, autoProvision, autoGrant, autoGrantRole,
-      tenantOrgClaim, create, clearError, onCreated,
+      tenantOrgClaim, create, clearError,
     ],
   );
 
@@ -267,6 +271,18 @@ export function IdentityProviderWizard({
           onCancel={onCancel}
         />
       )}
+
+      {step === "success" && createdIdp && (
+        <SuccessStep
+          identityProvider={createdIdp}
+          org={org}
+          isSso={isSso}
+          autoProvision={autoProvision}
+          autoGrant={autoGrant}
+          autoGrantRole={autoGrantRole}
+          onDone={() => onCreated?.(createdIdp)}
+        />
+      )}
     </div>
   );
 }
@@ -279,6 +295,7 @@ const STEPS: { key: WizardStep; label: string }[] = [
   { key: "pick", label: "Provider" },
   { key: "configure", label: "Configure" },
   { key: "review", label: "Review" },
+  { key: "success", label: "Done" },
 ];
 
 function StepIndicator({ current }: { current: WizardStep }) {
@@ -608,6 +625,98 @@ function ReviewStep({
   );
 }
 
+// ---------------------------------------------------------------------------
+// Success step (step 4)
+// ---------------------------------------------------------------------------
+
+function SuccessStep({
+  identityProvider,
+  org,
+  isSso,
+  autoProvision,
+  autoGrant,
+  autoGrantRole,
+  onDone,
+}: {
+  identityProvider: IdentityProvider;
+  org: string;
+  isSso: boolean;
+  autoProvision: boolean;
+  autoGrant: boolean;
+  autoGrantRole: IamRole;
+  onDone: () => void;
+}) {
+  const displayName =
+    identityProvider.spec?.displayName ||
+    identityProvider.metadata?.name ||
+    "Identity provider";
+
+  const roleName =
+    autoGrantRole !== IamRole.iam_role_unspecified
+      ? IamRole[autoGrantRole]
+      : "viewer";
+
+  return (
+    <div className="space-y-4">
+      <div className="rounded-md border border-primary/30 bg-primary-subtle px-3 py-2.5">
+        <p className="text-xs font-medium text-foreground">
+          {displayName} created successfully
+        </p>
+      </div>
+
+      <div className="space-y-2">
+        <p className="text-xs font-medium text-foreground">What happens next</p>
+
+        {isSso ? (
+          <p className="text-[0.65rem] text-muted-foreground">
+            Users can sign in via SSO at{" "}
+            <span className="font-mono text-foreground">
+              /login?org={org}
+            </span>
+            . Accounts are auto-provisioned and granted the{" "}
+            <span className="font-medium text-foreground">viewer</span> role on
+            this organization.
+          </p>
+        ) : autoProvision && autoGrant ? (
+          <p className="text-[0.65rem] text-muted-foreground">
+            Users authenticating with JWTs from this provider will be
+            automatically provisioned and granted the{" "}
+            <span className="font-medium text-foreground">{roleName}</span> role
+            on this organization. No additional setup is required.
+          </p>
+        ) : autoProvision ? (
+          <p className="text-[0.65rem] text-muted-foreground">
+            Accounts are auto-provisioned on first authentication, but no
+            organization role is granted automatically. Use the Members page to
+            grant access.
+          </p>
+        ) : (
+          <p className="text-[0.65rem] text-muted-foreground">
+            The trust relationship is configured. Accounts must be created
+            manually before users can authenticate.
+          </p>
+        )}
+
+        <p className="text-[0.65rem] text-muted-foreground">
+          To verify the setup, have a user authenticate with a JWT from this
+          provider and confirm they can access the organization&apos;s resources.
+        </p>
+      </div>
+
+      <button
+        type="button"
+        onClick={onDone}
+        className={cn(
+          "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
+          "bg-primary text-primary-foreground hover:bg-primary-hover",
+        )}
+      >
+        Done
+      </button>
+    </div>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // Shared primitives
 // ---------------------------------------------------------------------------

package/src/index.ts

@@ -18,19 +18,32 @@ export {
 export { type DeploymentMode, isResourceAvailable, ApiResourceKind } from "@stigmer/sdk";
 export { CloudFeatureNotice, type CloudFeatureNoticeProps } from "./internal/CloudFeatureNotice";
 
-// Models — data hook, styled component, and registry data
+// Models — data hook, styled components, and registry data
 export {
   MODEL_REGISTRY,
   DEFAULT_MODEL_ID,
+  DEFAULT_CURSOR_MODEL_ID,
+  DISABLED_PROVIDERS,
+  modelKey,
+  parseModelKey,
   useModelRegistry,
   ModelSelector,
+  HarnessSelector,
+  DEFAULT_HARNESS,
+  HARNESS_LABELS,
+  toProtoHarness,
+  fromProtoHarness,
 } from "./models";
 export type {
   ModelInfo,
+  ParsedModelKey,
   Provider,
   CostTier,
   UseModelRegistryReturn,
+  UseModelRegistryOptions,
   ModelSelectorProps,
+  HarnessSelectorProps,
+  HarnessOption,
 } from "./models";
 
 // Workspace — behavior hooks and styled components
@@ -92,6 +105,7 @@ export type {
   UseNewSessionFlowReturn,
   UseSessionPageFlowOptions,
   UseSessionPageFlowReturn,
+  UsePersistedModelOptions,
   UsePersistedModelReturn,
   UseEditSessionPrepReturn,
   DraftResourceType,
@@ -315,6 +329,7 @@ export {
 export type {
   GitHubUser,
   GitHubConnectOptions,
+  UseGitHubConnectionConfig,
   UseGitHubConnectionReturn,
   GitHubRepo,
   GitHubBranch,

package/src/models/HarnessSelector.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { useCallback, useRef, type KeyboardEvent } from "react";
+import { HARNESS_LABELS, type HarnessOption } from "./harness";
+
+const OPTIONS: readonly HarnessOption[] = ["native", "cursor"];
+
+/** Props for {@link HarnessSelector}. */
+export interface HarnessSelectorProps {
+  /** Currently selected harness. */
+  readonly value: HarnessOption;
+  /** Called when the user picks a different harness. */
+  readonly onValueChange: (harness: HarnessOption) => void;
+  /** Additional CSS class names for the root container. */
+  readonly className?: string;
+  /** When true, disables the selector. */
+  readonly disabled?: boolean;
+}
+
+/**
+ * Compact segmented control for choosing the session execution engine.
+ *
+ * Renders two mutually exclusive options — "Stigmer" (native) and
+ * "Cursor" (premium) — as adjacent pill segments. The Cursor segment
+ * carries a subtle premium tier indicator.
+ *
+ * Built as a `radiogroup` with full arrow-key navigation and ARIA
+ * semantics. All visual properties flow through `--stgm-*` tokens.
+ *
+ * Platform builders who need different rendering use
+ * {@link HarnessOption} and {@link HARNESS_LABELS} directly.
+ *
+ * @deprecated Use {@link ModelSelector} in unified mode (without the
+ * `harness` prop) instead. The unified model picker embeds an engine
+ * tag on each model row, eliminating the need for a separate harness
+ * control. This component is kept for backward compatibility.
+ *
+ * @example
+ * ```tsx
+ * function LauncherToolbar() {
+ *   const [harness, setHarness] = useState<HarnessOption>("native");
+ *
+ *   return <HarnessSelector value={harness} onValueChange={setHarness} />;
+ * }
+ * ```
+ */
+export function HarnessSelector({
+  value,
+  onValueChange,
+  className,
+  disabled,
+}: HarnessSelectorProps) {
+  const groupRef = useRef<HTMLDivElement>(null);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLDivElement>) => {
+      if (disabled) return;
+
+      const idx = OPTIONS.indexOf(value);
+      let next: number | undefined;
+
+      if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+        next = (idx + 1) % OPTIONS.length;
+      } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+        next = (idx - 1 + OPTIONS.length) % OPTIONS.length;
+      }
+
+      if (next !== undefined) {
+        e.preventDefault();
+        onValueChange(OPTIONS[next]);
+        const buttons = groupRef.current?.querySelectorAll<HTMLButtonElement>("[role=radio]");
+        buttons?.[next]?.focus();
+      }
+    },
+    [value, onValueChange, disabled],
+  );
+
+  return (
+    <div
+      ref={groupRef}
+      role="radiogroup"
+      aria-label="Execution engine"
+      onKeyDown={handleKeyDown}
+      className={[
+        "inline-flex items-center rounded-md border border-border bg-background p-0.5",
+        disabled ? "pointer-events-none opacity-50" : undefined,
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      {OPTIONS.map((option) => {
+        const isActive = value === option;
+
+        return (
+          <button
+            key={option}
+            type="button"
+            role="radio"
+            aria-checked={isActive}
+            aria-label={HARNESS_LABELS[option]}
+            tabIndex={isActive ? 0 : -1}
+            disabled={disabled}
+            onClick={() => {
+              if (!isActive) onValueChange(option);
+            }}
+            className={[
+              "inline-flex items-center gap-1 rounded-[5px] px-2 py-1 text-xs transition-colors",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "disabled:pointer-events-none",
+              isActive
+                ? "bg-accent font-medium text-foreground shadow-sm"
+                : "text-muted-foreground hover:text-foreground",
+            ].join(" ")}
+          >
+            {HARNESS_LABELS[option]}
+            {option === "cursor" && (
+              <span
+                aria-label="premium"
+                className="text-[0.6rem] text-muted-foreground"
+              >
+                $$$
+              </span>
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}