@stigmer/react 1.0.3 → 2.0.0

package/src/iam-policy/useShareFlow.ts

@@ -0,0 +1,182 @@
+"use client";
+
+import { useCallback, useMemo, useRef, useState } from "react";
+import { create } from "@bufbuild/protobuf";
+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 type { PrincipalAccess } from "@stigmer/protos/ai/stigmer/iam/iampolicy/v1/io_pb";
+import {
+  IamPolicySpecSchema,
+  ApiResourceRefSchema,
+} from "@stigmer/protos/ai/stigmer/iam/iampolicy/v1/spec_pb";
+import { iamRoleToString } from "@stigmer/sdk";
+import { useResourceAccess, type ResourceAccessRef } from "./useResourceAccess";
+import { useCreateIamPolicy } from "./useCreateIamPolicy";
+import { useDeleteIamPolicy } from "./useDeleteIamPolicy";
+import { useGrantableRoles } from "./useGrantableRoles";
+
+/** Identifies a resource for the share flow. */
+export interface ShareFlowResource {
+  /** Resource kind string (e.g. "agent", "session"). */
+  readonly kind: string;
+  /** Resource ID. */
+  readonly id: string;
+  /** ApiResourceKind enum value for grantable-role lookup. */
+  readonly resourceKind?: ApiResourceKind;
+}
+
+/** Return value of {@link useShareFlow}. */
+export interface UseShareFlowReturn {
+  /** Principals with their role grants on the resource. */
+  readonly accessList: readonly PrincipalAccess[];
+  /** Whether the initial access list is loading. */
+  readonly isLoading: boolean;
+  /** Whether a background refetch of the access list is in flight. */
+  readonly isRefetching: boolean;
+  /** Error from the last access list fetch, or `null`. */
+  readonly fetchError: Error | null;
+  /** Roles that can be granted on this resource kind. */
+  readonly grantableRoles: readonly IamRole[];
+  /** Whether the resource kind supports role grants. */
+  readonly hasGrantableRoles: boolean;
+  /** Grant a principal access with the specified role. */
+  readonly grantAccess: (principalId: string, role: string) => Promise<void>;
+  /** Whether a grant operation is in flight. */
+  readonly isGranting: boolean;
+  /** Error from the last grant attempt, or `null`. */
+  readonly grantError: Error | null;
+  /** Revoke a principal's role on this resource. */
+  readonly revokeAccess: (principalId: string, role: string) => Promise<void>;
+  /** Whether a revoke operation is in flight. */
+  readonly isRevoking: boolean;
+  /** Error from the last revoke attempt, or `null`. */
+  readonly revokeError: Error | null;
+  /** Re-fetch the access list from the server. */
+  readonly refetch: () => void;
+  /** Clear all errors. */
+  readonly clearErrors: () => void;
+}
+
+/**
+ * Behavior hook that orchestrates the share flow for any resource.
+ *
+ * Composes {@link useResourceAccess}, {@link useCreateIamPolicy}, and
+ * {@link useDeleteIamPolicy} into a single cohesive API suitable for
+ * powering a share dialog.
+ *
+ * Pass `null` as `resource` to produce a stable no-op (useful while
+ * the resource hasn't loaded yet).
+ *
+ * @param resource - The resource to share, or `null` to skip.
+ *
+ * @example
+ * ```tsx
+ * const share = useShareFlow({
+ *   kind: "session",
+ *   id: sessionId,
+ *   resourceKind: ApiResourceKind.session,
+ * });
+ *
+ * // Render access list
+ * share.accessList.map(entry => ...);
+ *
+ * // Grant viewer access
+ * await share.grantAccess(userId, "viewer");
+ * ```
+ */
+export function useShareFlow(
+  resource: ShareFlowResource | null,
+): UseShareFlowReturn {
+  const accessRef: ResourceAccessRef | null = useMemo(
+    () => (resource ? { kind: resource.kind, id: resource.id } : null),
+    [resource?.kind, resource?.id],
+  );
+
+  const {
+    members: accessList,
+    isLoading,
+    isRefetching,
+    error: fetchError,
+    refetch,
+  } = useResourceAccess(accessRef);
+
+  const { roles: grantableRoles, hasRoles: hasGrantableRoles } =
+    useGrantableRoles(resource?.resourceKind ?? null);
+
+  const { create: createPolicy, isCreating: isGranting, error: grantError, clearError: clearGrantError } =
+    useCreateIamPolicy();
+
+  const { remove: removePolicy, isDeleting: isRevoking, error: revokeError, clearError: clearRevokeError } =
+    useDeleteIamPolicy();
+
+  const resourceRef = useRef(resource);
+  resourceRef.current = resource;
+
+  const grantAccess = useCallback(
+    async (principalId: string, role: string) => {
+      const res = resourceRef.current;
+      if (!res) return;
+
+      const spec = create(IamPolicySpecSchema, {
+        principal: create(ApiResourceRefSchema, {
+          kind: "identity_account",
+          id: principalId,
+        }),
+        resource: create(ApiResourceRefSchema, {
+          kind: res.kind,
+          id: res.id,
+        }),
+        relation: role,
+      });
+
+      await createPolicy(spec);
+      refetch();
+    },
+    [createPolicy, refetch],
+  );
+
+  const revokeAccess = useCallback(
+    async (principalId: string, role: string) => {
+      const res = resourceRef.current;
+      if (!res) return;
+
+      const spec = create(IamPolicySpecSchema, {
+        principal: create(ApiResourceRefSchema, {
+          kind: "identity_account",
+          id: principalId,
+        }),
+        resource: create(ApiResourceRefSchema, {
+          kind: res.kind,
+          id: res.id,
+        }),
+        relation: role,
+      });
+
+      await removePolicy(spec);
+      refetch();
+    },
+    [removePolicy, refetch],
+  );
+
+  const clearErrors = useCallback(() => {
+    clearGrantError();
+    clearRevokeError();
+  }, [clearGrantError, clearRevokeError]);
+
+  return {
+    accessList,
+    isLoading,
+    isRefetching,
+    fetchError,
+    grantableRoles,
+    hasGrantableRoles,
+    grantAccess,
+    isGranting,
+    grantError,
+    revokeAccess,
+    isRevoking,
+    revokeError,
+    refetch,
+    clearErrors,
+  };
+}

package/src/index.ts

@@ -2,6 +2,9 @@
 export { StigmerProvider, type StigmerProviderProps } from "./provider";
 export { StigmerContext } from "./context";
 
+// Runner adapter
+export { type RunnerAdapter, useRunnerAdapter } from "./runner-adapter";
+
 // Fetch cache
 export { FetchCacheProvider } from "./internal/FetchCacheProvider";
 export type { FetchCacheOptions } from "./internal/fetch-cache";
@@ -59,12 +62,22 @@ export type {
 // Workspace — behavior hooks and styled components
 export {
   useWorkspaceEntries,
+  useWorkspaceFiles,
+  useWorkspaceSources,
   WorkspaceEditor,
+  WorkspaceEntryFiles,
   WorkspaceSummary,
 } from "./workspace";
 export type {
   WorkspaceEntry,
+  WorkspaceFileEntry,
+  WorkspaceFileLister,
   UseWorkspaceEntriesReturn,
+  UseWorkspaceFilesOptions,
+  UseWorkspaceFilesReturn,
+  WorkspaceEntryFilesProps,
+  UseWorkspaceSourcesOptions,
+  UseWorkspaceSourcesReturn,
   WorkspaceEditorProps,
   WorkspaceSummaryProps,
 } from "./workspace";
@@ -93,6 +106,12 @@ export {
   useSessionSearch,
   PENDING_SUBJECT,
   resolvedSubject,
+  SessionViewer,
+  NewSessionViewer,
+  SessionInspector,
+  useSessionInspector,
+  buildVisibleTabs,
+  SetupTab,
 } from "./session";
 export type {
   SharedSessionFields,
@@ -126,6 +145,15 @@ export type {
   DraftParams,
   SessionGroup,
   SearchResultGroup,
+  SessionViewerProps,
+  NewSessionViewerProps,
+  SessionInspectorProps,
+  SessionInspectorTabId,
+  UseSessionInspectorOptions,
+  UseSessionInspectorReturn,
+  SetupTabProps,
+  SetupTabMutationCallbacks,
+  SelectedThreadItem,
 } from "./session";
 
 // Activity — unified recent activity (sessions + workflow executions)
@@ -276,6 +304,17 @@ export type {
   AttachmentChipListProps,
 } from "./attachment";
 
+// File Reference — workspace file-reference behavior hook and styled chip list
+export {
+  useFileReferences,
+  FileReferenceChipList,
+} from "./file-reference";
+export type {
+  UseFileReferencesReturn,
+  FileReferenceChipListProps,
+} from "./file-reference";
+export { FILE_REF_MIME } from "./internal/file-tree";
+
 // Composer — unified message input with model, workspace, and file attachments
 export {
   useComposer,
@@ -397,11 +436,13 @@ export type {
   SkillFileBrowserProps,
 } from "./skill";
 
-// GitHub — OAuth connection, repo picker, and hooks
+// GitHub — OAuth connection, repo picker, tree lister, and hooks
 export {
   useGitHubConnection,
   useGitHubRepos,
   useGitHubSearch,
+  useGitHubTreeLister,
+  parseGitUrl,
   GitHubRepoPicker,
   GITHUB_CALLBACK_MESSAGE_TYPE,
 } from "./github";
@@ -415,6 +456,7 @@ export type {
   UseGitHubReposReturn,
   UseGitHubSearchReturn,
   GitHubRepoPickerProps,
+  ParsedGitRepo,
 } from "./github";
 
 // Agent — data hook, count hook, list hook, search hook, picker, detail view, env form, setup orchestration, env diffing, default agent, creation wizard, update
@@ -482,6 +524,7 @@ export {
   buildSystemEnvVars,
   resolveSystemEnvVarValues,
   resolveDeclaredSystemEnvVars,
+  EnvironmentPicker,
 } from "./environment";
 export type {
   UseEnvironmentReturn,
@@ -503,6 +546,7 @@ export type {
   EnvVarFormSubmitOptions,
   SessionEnvPoolInput,
   UseSessionEnvPoolReturn,
+  EnvironmentPickerProps,
 } from "./environment";
 
 // Identity Account — gate hook for ensuring the caller's identity account exists before app render
@@ -524,9 +568,13 @@ export {
   useCreateIamPolicy,
   useDeleteIamPolicy,
   useRevokeOrgAccess,
+  useShareFlow,
+  useCheckPermission,
   RoleSelector,
   GrantAccessForm,
   OrgMembersPanel,
+  SharePanel,
+  PermissionGate,
 } from "./iam-policy";
 export type {
   UseGrantableRolesReturn,
@@ -540,9 +588,15 @@ export type {
   UseCreateIamPolicyReturn,
   UseDeleteIamPolicyReturn,
   UseRevokeOrgAccessReturn,
+  UseShareFlowReturn,
+  ShareFlowResource,
+  UseCheckPermissionReturn,
+  PermissionCheckResource,
   RoleSelectorProps,
   GrantAccessFormProps,
   OrgMembersPanelProps,
+  SharePanelProps,
+  PermissionGateProps,
 } from "./iam-policy";
 
 // Organization — context provider, hooks, data hooks, behavior hooks, styled form, profile panel, and org switcher
@@ -880,52 +934,6 @@ export type {
   UseCreateAgentInstanceReturn,
 } from "./agent-instance";
 
-// Runner — data hooks, action hooks, styled picker, admin list panel, detail view, and phase utilities
-export {
-  useRunner,
-  RunnerDetailView,
-  useRunnerList,
-  useLaunchLocalRunner,
-  useRunnerCredential,
-  useStopRunner,
-  useDeleteRunner,
-  useRunnerFileBrowser,
-  RunnerPicker,
-  RunnerFileBrowser,
-  RunnerListPanel,
-  RunnerIcon,
-  PhaseBadge,
-  formatRelativeTime,
-  phaseLabel,
-  phaseDotColor,
-  isActivePhase,
-  isTransitionalPhase,
-  PHASE_SORT_ORDER,
-} from "./runner";
-export type {
-  UseRunnerReturn,
-  UseRunnerOptions,
-  RunnerDetailViewProps,
-  UseRunnerListOptions,
-  UseRunnerListReturn,
-  UseLaunchLocalRunnerOptions,
-  UseLaunchLocalRunnerReturn,
-  LaunchLocalRunnerResult,
-  RunnerCredential,
-  UseRunnerCredentialReturn,
-  StopRunnerInput,
-  UseStopRunnerReturn,
-  UseDeleteRunnerReturn,
-  UseRunnerFileBrowserReturn,
-  PathSegment,
-  RunnerPickerProps,
-  RunnerFileBrowserProps,
-  RunnerListPanelProps,
-  RunnerSortKey,
-  RunnerIconProps,
-  PhaseBadgeProps,
-} from "./runner";
-
 // Tabs — accessible tabbed panel primitive
 export { Tabs } from "./tabs";
 export type { TabsProps, TabItem } from "./tabs";
@@ -969,6 +977,7 @@ export {
   TEMPLATE_CATEGORY_LABELS,
   AGENT_TEMPLATES,
   MCP_SERVER_TEMPLATES,
+  WORKFLOW_TEMPLATES,
 } from "./resource-creation";
 export type {
   EnvVarEntry,
@@ -1136,7 +1145,7 @@ export {
   useWorkflowValidation,
   useWorkflowTopology,
   WorkflowYamlEditor,
-  WorkflowTopologyGraph,
+  WorkflowCodePreviewGraph,
   useWorkflowEditor,
   WorkflowEditorView,
   useRunWorkflowFlow,
@@ -1175,6 +1184,35 @@ export {
   useDiagnoseExecutionFlow,
   WorkflowRepairCard,
   STARTER_WORKFLOW_YAML,
+  useElkLayoutEngine,
+  // T13: Execution history
+  deriveExecutionRow,
+  deriveExecutionRows,
+  sortExecutionRows,
+  filterExecutionRows,
+  deriveFailureAnalysis,
+  useExecutionHistoryData,
+  ExecutionHistoryTable,
+  ExecutionFilterBar,
+  HealthMetricsStrip,
+  FailureAnalysisPanel,
+  WorkflowExecutionHistory,
+  // Workflow Instance management
+  useWorkflowInstance,
+  useCreateWorkflowInstance,
+  useUpdateWorkflowInstance,
+  useDeleteWorkflowInstance,
+  WorkflowInstanceEmptyState,
+  WorkflowInstanceList,
+  CreateWorkflowInstanceDialog,
+  WorkflowInstanceDetailPanel,
+  // T15: Workflow Template Gallery
+  PATTERN_LABELS,
+  WORKFLOW_CATEGORY_LABELS,
+  deriveTemplateMeta,
+  WorkflowTemplateCard,
+  WorkflowTemplatePreview,
+  WorkflowTemplateGallery,
 } from "./workflow";
 export type {
   TaskKindDescriptor,
@@ -1217,7 +1255,7 @@ export type {
   TopologyEdge,
   TopologyNodeCategory,
   WorkflowYamlEditorProps,
-  WorkflowTopologyGraphProps,
+  WorkflowCodePreviewGraphProps,
   UseWorkflowEditorOptions,
   UseWorkflowEditorReturn,
   WorkflowEditorViewProps,
@@ -1242,6 +1280,7 @@ export type {
   WorkflowGraphEnvVar,
   WorkflowGraphBudget,
   CanvasSelection,
+  UseWorkflowCanvasOptions,
   UseWorkflowCanvasReturn,
   WorkflowCanvasEditorProps,
   WorkflowTaskPaletteProps,
@@ -1270,6 +1309,39 @@ export type {
   UseDiagnoseExecutionFlowOptions,
   UseDiagnoseExecutionFlowReturn,
   WorkflowRepairCardProps,
+  UseElkLayoutEngineOptions,
+  // T13: Execution history types
+  ExecutionRow,
+  ExecutionHistorySortField,
+  ExecutionHistorySortDirection,
+  ExecutionClientFilters,
+  FailureGroup,
+  FailureInstance,
+  UseExecutionHistoryDataOptions,
+  UseExecutionHistoryDataReturn,
+  ExecutionHistoryTableProps,
+  ExecutionFilterBarProps,
+  HealthMetricsStripProps,
+  FailureAnalysisPanelProps,
+  WorkflowExecutionHistoryProps,
+  // Workflow Instance management types
+  UseWorkflowInstanceReturn,
+  UseCreateWorkflowInstanceReturn,
+  UseUpdateWorkflowInstanceReturn,
+  UseDeleteWorkflowInstanceReturn,
+  WorkflowInstanceEmptyStateProps,
+  WorkflowInstanceListProps,
+  CreateWorkflowInstanceDialogProps,
+  WorkflowInstanceDetailPanelProps,
+  // T15: Workflow Template Gallery types
+  WorkflowTemplateData,
+  WorkflowTemplateCategory,
+  WorkflowTemplateMeta,
+  WorkflowPattern,
+  WorkflowTemplate,
+  WorkflowTemplateCardProps,
+  WorkflowTemplatePreviewProps,
+  WorkflowTemplateGalleryProps,
 } from "./workflow";
 
 // ─── Dashboard (Unified Platform) ──────────────────────────────────────────

package/src/internal/ResizableSplit.tsx

@@ -0,0 +1,221 @@
+"use client";
+
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import { cn } from "@stigmer/theme";
+
+/** Props for {@link ResizableSplit}. */
+export interface ResizableSplitProps {
+  /** Content rendered in the flexible (left) region. */
+  readonly primary: ReactNode;
+  /** Content rendered in the resizable (right) panel. */
+  readonly secondary: ReactNode;
+  /**
+   * Default width of the secondary panel in pixels.
+   * Overridden by a persisted value when `storageKey` is set.
+   * @default 384
+   */
+  readonly defaultSize?: number;
+  /** Minimum width of the secondary panel in pixels. @default 280 */
+  readonly minSize?: number;
+  /** Maximum width of the secondary panel in pixels. @default 800 */
+  readonly maxSize?: number;
+  /**
+   * `localStorage` key for persisting the panel width across sessions.
+   * When omitted, the panel width resets to `defaultSize` on remount.
+   */
+  readonly storageKey?: string;
+  /**
+   * Called whenever the secondary panel width changes (during drag
+   * and on initial mount from persisted state). Consumers use this
+   * to thread the width into layout-dependent calculations like
+   * `WorkflowExecutionGraph.panelOffsetPx`.
+   */
+  readonly onResize?: (widthPx: number) => void;
+  /** Additional CSS class names for the root flex container. */
+  readonly className?: string;
+}
+
+const KEYBOARD_STEP_PX = 20;
+
+/**
+ * Horizontal split layout with a drag-resizable right panel.
+ *
+ * The left region (`primary`) fills remaining space via `flex: 1`.
+ * The right region (`secondary`) has a pixel-based width controlled
+ * by a draggable divider.
+ *
+ * Design:
+ * - Pointer-based drag with `setPointerCapture` for reliable tracking
+ * - `requestAnimationFrame` coalescing during drag (DD-009 pattern)
+ * - Keyboard accessible: Left/Right arrows nudge by {@link KEYBOARD_STEP_PX}
+ * - Optional `localStorage` persistence via `storageKey`
+ * - Styled with `--stgm-*` tokens; no hardcoded colors
+ *
+ * @example
+ * ```tsx
+ * <ResizableSplit
+ *   primary={<WorkflowGraph />}
+ *   secondary={<InspectorPanel />}
+ *   defaultSize={384}
+ *   minSize={280}
+ *   maxSize={800}
+ *   storageKey="wf-exec-inspector-width"
+ *   onResize={setPanelWidth}
+ * />
+ * ```
+ */
+export function ResizableSplit({
+  primary,
+  secondary,
+  defaultSize = 384,
+  minSize = 280,
+  maxSize = 800,
+  storageKey,
+  onResize,
+  className,
+}: ResizableSplitProps) {
+  const [panelWidth, setPanelWidth] = useState(() => {
+    if (storageKey) {
+      try {
+        const stored = localStorage.getItem(storageKey);
+        if (stored) {
+          const parsed = Number(stored);
+          if (Number.isFinite(parsed) && parsed >= minSize && parsed <= maxSize) {
+            return parsed;
+          }
+        }
+      } catch { /* localStorage may be unavailable */ }
+    }
+    return defaultSize;
+  });
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const rafRef = useRef(0);
+  const isDraggingRef = useRef(false);
+
+  // Notify consumer of initial width on mount
+  const onResizeRef = useRef(onResize);
+  onResizeRef.current = onResize;
+  useEffect(() => {
+    onResizeRef.current?.(panelWidth);
+  }, [panelWidth]);
+
+  const clampWidth = useCallback(
+    (raw: number) => Math.round(Math.max(minSize, Math.min(maxSize, raw))),
+    [minSize, maxSize],
+  );
+
+  const persist = useCallback(
+    (width: number) => {
+      if (!storageKey) return;
+      try {
+        localStorage.setItem(storageKey, String(width));
+      } catch { /* quota or security error */ }
+    },
+    [storageKey],
+  );
+
+  const handlePointerDown = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      e.currentTarget.setPointerCapture(e.pointerId);
+      isDraggingRef.current = true;
+    },
+    [],
+  );
+
+  const handlePointerMove = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      if (!isDraggingRef.current || !containerRef.current) return;
+
+      const clientX = e.clientX;
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = requestAnimationFrame(() => {
+        const container = containerRef.current;
+        if (!container) return;
+        const rect = container.getBoundingClientRect();
+        const newWidth = clampWidth(rect.right - clientX);
+        setPanelWidth(newWidth);
+      });
+    },
+    [clampWidth],
+  );
+
+  const handlePointerUp = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      if (!isDraggingRef.current) return;
+      isDraggingRef.current = false;
+      e.currentTarget.releasePointerCapture(e.pointerId);
+      cancelAnimationFrame(rafRef.current);
+      persist(panelWidth);
+    },
+    [persist, panelWidth],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      let delta = 0;
+      if (e.key === "ArrowLeft") delta = KEYBOARD_STEP_PX;
+      else if (e.key === "ArrowRight") delta = -KEYBOARD_STEP_PX;
+      if (delta === 0) return;
+
+      e.preventDefault();
+      setPanelWidth((prev) => {
+        const next = clampWidth(prev + delta);
+        persist(next);
+        return next;
+      });
+    },
+    [clampWidth, persist],
+  );
+
+  // Cleanup rAF on unmount
+  useEffect(() => () => cancelAnimationFrame(rafRef.current), []);
+
+  return (
+    <div ref={containerRef} className={cn("flex min-h-0 flex-1", className)}>
+      {/* Primary region (flexible) */}
+      <div className="min-w-0 flex-1">{primary}</div>
+
+      {/* Drag handle */}
+      <div
+        role="separator"
+        aria-orientation="vertical"
+        aria-valuenow={panelWidth}
+        aria-valuemin={minSize}
+        aria-valuemax={maxSize}
+        aria-label="Resize inspector panel"
+        tabIndex={0}
+        onPointerDown={handlePointerDown}
+        onPointerMove={handlePointerMove}
+        onPointerUp={handlePointerUp}
+        onKeyDown={handleKeyDown}
+        className={cn(
+          "group relative z-10 w-1 shrink-0 cursor-col-resize touch-none select-none",
+          "bg-[var(--stgm-border,#e5e5e5)]",
+          "hover:bg-[var(--stgm-primary,#6366f1)]",
+          "focus-visible:bg-[var(--stgm-primary,#6366f1)] focus-visible:outline-none",
+          "active:bg-[var(--stgm-primary,#6366f1)]",
+          "transition-colors duration-100",
+        )}
+      >
+        {/* Wider invisible hit target (12px) for easier grabbing */}
+        <div className="absolute inset-y-0 -left-1.5 -right-1.5" />
+      </div>
+
+      {/* Secondary region (resizable, fixed width) */}
+      <div
+        className="shrink-0 overflow-hidden"
+        style={{ width: panelWidth }}
+      >
+        {secondary}
+      </div>
+    </div>
+  );
+}