@stigmer/react 0.2.2 → 0.3.0

package/src/organization/OrgProfilePanel.tsx

@@ -12,6 +12,8 @@ import { getUserMessage } from "@stigmer/sdk";
 import type { Organization } from "@stigmer/protos/ai/stigmer/tenancy/organization/v1/api_pb";
 import { useOrganization } from "./useOrganization";
 import { useUpdateOrganization } from "./useUpdateOrganization";
+import { useIdentityProviderList } from "../identity-provider/useIdentityProviderList";
+import { useResourceAvailable, ApiResourceKind } from "../deployment-mode";
 
 // ---------------------------------------------------------------------------
 // Constants
@@ -338,10 +340,106 @@ export function OrgProfilePanel({
           </button>
         )}
       </div>
+
+      {/* -- Identity Providers summary -- */}
+      <IdentityProvidersSummary orgSlug={serverSlug} />
     </form>
   );
 }
 
+// ---------------------------------------------------------------------------
+// IdentityProvidersSummary — shows linked IDPs on the org profile
+// ---------------------------------------------------------------------------
+
+function IdentityProvidersSummary({ orgSlug }: { orgSlug: string }) {
+  const idpAvailable = useResourceAvailable(ApiResourceKind.identity_provider);
+  const { identityProviders, isLoading } = useIdentityProviderList(
+    idpAvailable && orgSlug ? orgSlug : null,
+  );
+
+  if (!idpAvailable || !orgSlug) return null;
+
+  return (
+    <>
+      <hr className="border-border" />
+      <div className="space-y-2">
+        <p className="text-[0.65rem] font-medium text-muted-foreground uppercase tracking-wider">
+          Identity Providers
+        </p>
+
+        {isLoading ? (
+          <div className="bg-muted-subtle h-8 animate-pulse rounded" />
+        ) : identityProviders.length === 0 ? (
+          <p className="text-xs text-muted-foreground">
+            No identity providers configured.{" "}
+            <a
+              href="/settings/identity-providers"
+              className="text-primary hover:text-primary-hover underline underline-offset-2"
+            >
+              Set up federated authentication
+            </a>
+          </p>
+        ) : (
+          <div className="space-y-1.5">
+            {identityProviders.map((idp) => {
+              const spec = idp.spec;
+              const displayName =
+                spec?.displayName || idp.metadata?.name || "Unnamed";
+              const isSso = spec?.isSsoProvider;
+              const isJit = !isSso && spec?.autoProvisionAccounts;
+
+              return (
+                <div
+                  key={idp.metadata?.id}
+                  className="flex items-center gap-2 text-xs"
+                >
+                  <ShieldSmallIcon />
+                  <span className="text-foreground truncate">{displayName}</span>
+                  {isSso && (
+                    <span className="rounded-full border border-primary/30 bg-primary-subtle px-1.5 py-px text-[0.6rem] font-medium text-primary">
+                      SSO
+                    </span>
+                  )}
+                  {isJit && (
+                    <span className="rounded-full border border-primary/30 bg-primary-subtle px-1.5 py-px text-[0.6rem] font-medium text-primary">
+                      JIT
+                    </span>
+                  )}
+                </div>
+              );
+            })}
+            <a
+              href="/settings/identity-providers"
+              className="inline-block text-[0.65rem] text-primary hover:text-primary-hover underline underline-offset-2"
+            >
+              Manage
+            </a>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
+
+function ShieldSmallIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      className="shrink-0 text-muted-foreground"
+    >
+      <path d="M8 1.5L2 4v4c0 3.5 2.5 5.5 6 7 3.5-1.5 6-3.5 6-7V4L8 1.5z" />
+    </svg>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // ReadOnlyField — copiable label/value pair
 // ---------------------------------------------------------------------------

package/src/runner/RunnerFileBrowser.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import { useMemo } from "react";
+import { useCallback, useMemo, useState, useRef, type KeyboardEvent } from "react";
 import { getUserMessage } from "@stigmer/sdk";
 import { useRunnerFileBrowser } from "./useRunnerFileBrowser";
+import { useRecentWorkspaces, type RecentWorkspace } from "../workspace/useRecentWorkspaces";
 
 /** Props for {@link RunnerFileBrowser}. */
 export interface RunnerFileBrowserProps {
@@ -14,6 +15,16 @@ export interface RunnerFileBrowserProps {
   readonly onCancel: () => void;
   /** Additional CSS class names for the root container. */
   readonly className?: string;
+  /**
+   * Display name of the runner (e.g. "dev-macbook").
+   * Shown in the context header so users know which machine they're browsing.
+   */
+  readonly runnerName?: string;
+  /**
+   * Hostname of the runner's machine (e.g. "Alice's MacBook Pro").
+   * Shown alongside the runner name in the context header.
+   */
+  readonly runnerHostname?: string;
 }
 
 /**
@@ -41,8 +52,54 @@ export function RunnerFileBrowser({
   onSelect,
   onCancel,
   className,
+  runnerName,
+  runnerHostname,
 }: RunnerFileBrowserProps) {
   const browser = useRunnerFileBrowser(runnerId);
+  const recents = useRecentWorkspaces(runnerId);
+
+  const handleSelect = useCallback(
+    (path: string) => {
+      recents.recordSelection(path);
+      onSelect(path);
+    },
+    [recents, onSelect],
+  );
+
+  const [isEditingPath, setIsEditingPath] = useState(false);
+  const [editPathValue, setEditPathValue] = useState("");
+  const pathInputRef = useRef<HTMLInputElement>(null);
+
+  const startEditingPath = useCallback(() => {
+    setEditPathValue(browser.currentPath);
+    setIsEditingPath(true);
+    requestAnimationFrame(() => pathInputRef.current?.select());
+  }, [browser.currentPath]);
+
+  const commitPath = useCallback(() => {
+    const trimmed = editPathValue.trim();
+    if (trimmed && trimmed !== browser.currentPath) {
+      browser.navigateToPath(trimmed);
+    }
+    setIsEditingPath(false);
+  }, [editPathValue, browser]);
+
+  const cancelEditing = useCallback(() => {
+    setIsEditingPath(false);
+  }, []);
+
+  const handlePathKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        commitPath();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        cancelEditing();
+      }
+    },
+    [commitPath, cancelEditing],
+  );
 
   const visibleEntries = useMemo(
     () =>
@@ -77,6 +134,33 @@ export function RunnerFileBrowser({
 
   return (
     <div className={["space-y-2", className].filter(Boolean).join(" ")}>
+      {/* Runner context header */}
+      {(runnerName || runnerHostname) && (
+        <div className="flex items-center gap-1.5 text-[0.65rem] text-muted-foreground">
+          <ServerIcon />
+          <span className="truncate">
+            {runnerName ?? runnerHostname}
+            {runnerName && runnerHostname && (
+              <span className="text-border"> &middot; {runnerHostname}</span>
+            )}
+          </span>
+        </div>
+      )}
+
+      {/* Recent / favorite paths */}
+      {recents.entries.length > 0 && (
+        <RecentPathsList
+          entries={recents.entries}
+          onSelect={(path) => {
+            recents.recordSelection(path);
+            onSelect(path);
+          }}
+          onTogglePin={recents.togglePin}
+          onRemove={recents.remove}
+          onNavigate={browser.navigateToPath}
+        />
+      )}
+
       {/* Navigation bar: shortcuts + breadcrumb */}
       <div className="space-y-1.5">
         {/* Shortcut buttons */}
@@ -121,16 +205,26 @@ export function RunnerFileBrowser({
           </div>
         </div>
 
-        {/* Breadcrumb path bar */}
-        {browser.segments.length > 0 && (
+        {/* Path bar — editable input or clickable breadcrumb */}
+        {isEditingPath ? (
+          <input
+            ref={pathInputRef}
+            type="text"
+            value={editPathValue}
+            onChange={(e) => setEditPathValue(e.target.value)}
+            onKeyDown={handlePathKeyDown}
+            onBlur={commitPath}
+            className="w-full rounded-md border border-input bg-background px-2 py-1 text-[0.65rem] text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            placeholder="/path/to/directory or ~/relative"
+            autoFocus
+          />
+        ) : browser.segments.length > 0 ? (
           <div className="flex items-center gap-0.5 overflow-x-auto text-[0.65rem] scrollbar-none">
             {browser.segments.map((seg, i) => {
               const isLast = i === browser.segments.length - 1;
               return (
                 <span key={seg.path} className="flex shrink-0 items-center gap-0.5">
-                  {i > 0 && (
-                    <ChevronRightIcon />
-                  )}
+                  {i > 0 && <ChevronRightIcon />}
                   {isLast ? (
                     <span className="rounded px-1 py-0.5 font-medium text-foreground">
                       {seg.name}
@@ -148,8 +242,17 @@ export function RunnerFileBrowser({
                 </span>
               );
             })}
+            <button
+              type="button"
+              onClick={startEditingPath}
+              className="ml-1 shrink-0 rounded p-0.5 text-muted-foreground hover:text-foreground hover:bg-accent-hover transition-colors"
+              title="Type a path directly"
+              aria-label="Edit path"
+            >
+              <EditIcon />
+            </button>
           </div>
-        )}
+        ) : null}
       </div>
 
       {/* Inline error banner (when we already have a current path) */}
@@ -226,7 +329,7 @@ export function RunnerFileBrowser({
           </button>
           <button
             type="button"
-            onClick={() => onSelect(browser.currentPath)}
+            onClick={() => handleSelect(browser.currentPath)}
             disabled={!browser.currentPath || browser.isLoading}
             className="rounded-md bg-primary px-2.5 py-1 text-xs text-primary-foreground hover:bg-primary-hover transition-colors disabled:opacity-40"
           >
@@ -281,6 +384,87 @@ function ErrorDisplay({
   );
 }
 
+// ---------------------------------------------------------------------------
+// Recent paths list
+// ---------------------------------------------------------------------------
+
+function RecentPathsList({
+  entries,
+  onSelect,
+  onTogglePin,
+  onRemove,
+  onNavigate,
+}: {
+  entries: readonly RecentWorkspace[];
+  onSelect: (path: string) => void;
+  onTogglePin: (path: string) => void;
+  onRemove: (path: string) => void;
+  onNavigate: (path: string) => void;
+}) {
+  return (
+    <div className="space-y-1">
+      <span className="text-[0.6rem] font-medium text-muted-foreground">
+        Recent
+      </span>
+      <div className="max-h-24 overflow-y-auto rounded-md border border-border">
+        {entries.map((entry) => {
+          const dirName = entry.path.split("/").filter(Boolean).pop() ?? entry.path;
+          return (
+            <div
+              key={entry.path}
+              className="group flex items-center gap-1.5 px-2 py-1 text-xs transition-colors hover:bg-accent-hover"
+            >
+              <button
+                type="button"
+                onClick={() => onTogglePin(entry.path)}
+                className={[
+                  "shrink-0 transition-colors",
+                  entry.pinned
+                    ? "text-foreground"
+                    : "text-transparent group-hover:text-muted-foreground",
+                ].join(" ")}
+                title={entry.pinned ? "Unpin" : "Pin"}
+                aria-label={entry.pinned ? `Unpin ${dirName}` : `Pin ${dirName}`}
+              >
+                <PinIcon />
+              </button>
+              <button
+                type="button"
+                onClick={() => onSelect(entry.path)}
+                className="flex min-w-0 flex-1 items-center gap-1.5 text-left text-foreground"
+                title={`Select ${entry.path}`}
+              >
+                <FolderIcon />
+                <span className="truncate [direction:rtl] text-left">
+                  <bdi>{entry.path}</bdi>
+                </span>
+              </button>
+              <button
+                type="button"
+                onClick={() => onNavigate(entry.path)}
+                className="shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 hover:text-foreground"
+                title="Browse this directory"
+                aria-label={`Browse ${dirName}`}
+              >
+                <ChevronRightIcon />
+              </button>
+              <button
+                type="button"
+                onClick={() => onRemove(entry.path)}
+                className="shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 hover:text-destructive"
+                title="Remove from recent"
+                aria-label={`Remove ${dirName} from recent`}
+              >
+                <XSmallIcon />
+              </button>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // Shortcut button
 // ---------------------------------------------------------------------------
@@ -334,6 +518,41 @@ function LoadingSkeleton() {
 // Icons (inline SVG, consistent with existing SDK icon patterns)
 // ---------------------------------------------------------------------------
 
+function EditIcon() {
+  return (
+    <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M8.5 1.5L10.5 3.5L4 10H2V8L8.5 1.5Z" />
+    </svg>
+  );
+}
+
+function PinIcon() {
+  return (
+    <svg width="10" height="10" viewBox="0 0 12 12" fill="currentColor" stroke="none">
+      <path d="M7.5 1.5L10.5 4.5L8 7L9 10L6 7L2 11L5 3L4.5 1.5L7.5 1.5Z" />
+    </svg>
+  );
+}
+
+function XSmallIcon() {
+  return (
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M2.5 2.5L7.5 7.5M7.5 2.5L2.5 7.5" />
+    </svg>
+  );
+}
+
+function ServerIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="shrink-0">
+      <rect x="1.5" y="1.5" width="9" height="3.5" rx="0.5" />
+      <rect x="1.5" y="7" width="9" height="3.5" rx="0.5" />
+      <circle cx="3.5" cy="3.25" r="0.5" fill="currentColor" stroke="none" />
+      <circle cx="3.5" cy="8.75" r="0.5" fill="currentColor" stroke="none" />
+    </svg>
+  );
+}
+
 function HomeIcon() {
   return (
     <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">

package/src/runner/RunnerListPanel.tsx

@@ -576,13 +576,21 @@ function ActionMenu({
 // ---------------------------------------------------------------------------
 
 function PhaseBadge({ phase }: { phase: RunnerPhase }) {
+  const starting = phase === RunnerPhase.STARTING;
   return (
     <span className="inline-flex shrink-0 items-center gap-1">
-      <span
-        className={`inline-block h-1.5 w-1.5 rounded-full ${phaseDotColor(phase)}`}
-        aria-hidden="true"
-      />
-      <span className="text-[0.65rem] text-muted-foreground">
+      {starting ? (
+        <span
+          className="inline-block h-2.5 w-2.5 animate-spin rounded-full border border-primary border-t-transparent"
+          aria-hidden="true"
+        />
+      ) : (
+        <span
+          className={`inline-block h-1.5 w-1.5 rounded-full ${phaseDotColor(phase)}`}
+          aria-hidden="true"
+        />
+      )}
+      <span className={cn("text-[0.65rem]", starting ? "text-primary" : "text-muted-foreground")}>
         {phaseLabel(phase)}
       </span>
     </span>

package/src/runner/WorkspaceRunnerSelector.tsx

@@ -0,0 +1,180 @@
+"use client";
+
+import { useMemo } from "react";
+import { cn } from "@stigmer/theme";
+import type { Runner } from "@stigmer/protos/ai/stigmer/agentic/runner/v1/api_pb";
+import { RunnerPhase } from "@stigmer/protos/ai/stigmer/agentic/runner/v1/enum_pb";
+import { useRunnerList } from "./useRunnerList";
+import { isActivePhase, phaseDotColor, PHASE_SORT_ORDER } from "./phase";
+
+/** Props for {@link WorkspaceRunnerSelector}. */
+export interface WorkspaceRunnerSelectorProps {
+  /** Organization slug to scope the runner list. */
+  readonly org: string;
+  /** Currently selected runner ID, or `null` for "Auto". */
+  readonly value: string | null;
+  /** Called when the user selects a runner. `null` means "Auto". */
+  readonly onChange: (runnerId: string | null) => void;
+  /** Disables all interactions. */
+  readonly disabled?: boolean;
+  /**
+   * Set of runner IDs that are known to be running on the local machine.
+   *
+   * When provided, matching runners are labeled "This machine" instead
+   * of their name/hostname. This is a host-provided signal — the desktop
+   * app determines local runners from `~/.stigmer/runners/` state files;
+   * the web console does not pass this prop.
+   */
+  readonly localRunnerIds?: ReadonlySet<string>;
+}
+
+/**
+ * Cursor-inspired "Run On" section for the workspace popover.
+ *
+ * Renders a compact, sectioned list of available runners so users can
+ * pick where their session runs without leaving the workspace context.
+ * Designed to be composed alongside {@link WorkspaceEditor} inside the
+ * workspace popover — NOT as a standalone picker.
+ *
+ * Label strategy (SDK-agnostic, no platform branding):
+ * - "Auto" for null selection (platform assigns a runner)
+ * - "Cloud" for system-managed runners
+ * - "This machine" when the host provides `localRunnerIds`
+ * - Runner name / hostname for everything else
+ */
+export function WorkspaceRunnerSelector({
+  org,
+  value,
+  onChange,
+  disabled,
+  localRunnerIds,
+}: WorkspaceRunnerSelectorProps) {
+  const { runners, isLoading } = useRunnerList(org);
+
+  const active = useMemo(() => {
+    return runners
+      .filter((r) => isActivePhase(r.status?.phase ?? RunnerPhase.UNSPECIFIED))
+      .sort((a, b) => {
+        const pa = a.status?.phase ?? RunnerPhase.UNSPECIFIED;
+        const pb = b.status?.phase ?? RunnerPhase.UNSPECIFIED;
+        const po = PHASE_SORT_ORDER[pa] - PHASE_SORT_ORDER[pb];
+        if (po !== 0) return po;
+        return (a.metadata?.name ?? "").localeCompare(b.metadata?.name ?? "");
+      });
+  }, [runners]);
+
+  return (
+    <div className="space-y-1" role="listbox" aria-label="Run on">
+      <div className="px-1 text-[0.6rem] font-medium uppercase tracking-wider text-muted-foreground">
+        Run On
+      </div>
+
+      {/* Auto option */}
+      <RunOnOption
+        selected={value === null}
+        onClick={() => onChange(null)}
+        disabled={disabled}
+        label="Auto"
+        hint="platform assigns"
+        dotClass="bg-primary"
+      />
+
+      {/* Available runners */}
+      {active.map((r) => {
+        const id = r.metadata!.id;
+        return (
+          <RunOnOption
+            key={id}
+            selected={value === id}
+            onClick={() => onChange(id)}
+            disabled={disabled}
+            label={runnerLabel(r, localRunnerIds)}
+            hint={runnerHint(r, localRunnerIds)}
+            dotClass={phaseDotColor(r.status?.phase ?? RunnerPhase.UNSPECIFIED)}
+          />
+        );
+      })}
+
+      {/* Loading */}
+      {isLoading && active.length === 0 && (
+        <div className="px-1 py-2 text-[0.65rem] text-muted-foreground">
+          Loading runners...
+        </div>
+      )}
+
+      {/* Empty */}
+      {!isLoading && active.length === 0 && (
+        <div className="px-1 py-2 text-[0.65rem] text-muted-foreground">
+          No runners available
+        </div>
+      )}
+    </div>
+  );
+}
+
+function RunOnOption({
+  selected,
+  onClick,
+  disabled,
+  label,
+  hint,
+  dotClass,
+}: {
+  selected: boolean;
+  onClick: () => void;
+  disabled?: boolean;
+  label: string;
+  hint?: string;
+  dotClass: string;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      className={cn(
+        "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs transition-colors",
+        "disabled:pointer-events-none disabled:opacity-50",
+        selected
+          ? "bg-accent font-medium text-foreground"
+          : "text-foreground hover:bg-accent-hover",
+      )}
+      role="option"
+      aria-selected={selected}
+    >
+      <span
+        className={cn("inline-block h-1.5 w-1.5 shrink-0 rounded-full", dotClass)}
+        aria-hidden="true"
+      />
+      <span className="min-w-0 flex-1 truncate">{label}</span>
+      {hint && (
+        <span className="shrink-0 text-[0.6rem] text-muted-foreground">
+          {hint}
+        </span>
+      )}
+    </button>
+  );
+}
+
+function runnerLabel(
+  runner: Runner,
+  localRunnerIds?: ReadonlySet<string>,
+): string {
+  const id = runner.metadata?.id ?? "";
+  if (localRunnerIds?.has(id)) return "This machine";
+  return runner.metadata?.name ?? runner.status?.connectionInfo?.hostname ?? "Unnamed";
+}
+
+function runnerHint(
+  runner: Runner,
+  localRunnerIds?: ReadonlySet<string>,
+): string | undefined {
+  const id = runner.metadata?.id ?? "";
+  if (localRunnerIds?.has(id)) {
+    return runner.status?.connectionInfo?.hostname;
+  }
+  const name = runner.metadata?.name;
+  const hostname = runner.status?.connectionInfo?.hostname;
+  if (name && hostname && name !== hostname) return hostname;
+  return undefined;
+}

package/src/runner/__tests__/phase.test.ts

@@ -3,8 +3,11 @@ import { RunnerPhase } from "@stigmer/protos/ai/stigmer/agentic/runner/v1/enum_p
 import { isTransitionalPhase, isActivePhase } from "../phase";
 
 describe("isTransitionalPhase", () => {
-  it("returns true for PENDING", () => {
-    expect(isTransitionalPhase(RunnerPhase.PENDING)).toBe(true);
+  it.each([
+    ["PENDING", RunnerPhase.PENDING],
+    ["STARTING", RunnerPhase.STARTING],
+  ] as const)("returns true for %s", (_label, phase) => {
+    expect(isTransitionalPhase(phase)).toBe(true);
   });
 
   it.each([
@@ -21,6 +24,7 @@ describe("isTransitionalPhase", () => {
     const allPhases = [
       RunnerPhase.READY,
       RunnerPhase.BUSY,
+      RunnerPhase.STARTING,
       RunnerPhase.PENDING,
       RunnerPhase.STOPPED,
       RunnerPhase.FAILED,

package/src/runner/index.ts

@@ -41,6 +41,9 @@ export type {
 export { RunnerListPanel } from "./RunnerListPanel";
 export type { RunnerListPanelProps } from "./RunnerListPanel";
 
+export { WorkspaceRunnerSelector } from "./WorkspaceRunnerSelector";
+export type { WorkspaceRunnerSelectorProps } from "./WorkspaceRunnerSelector";
+
 export {
   phaseLabel,
   phaseDotColor,