@stigmer/react 3.1.13 → 3.1.15

package/src/sharing/useSaveAgentShare.ts

@@ -76,6 +76,48 @@ function sharingAudienceToProto(audience: SharingAudience): AgentShareAudience {
     : AgentShareAudience.public;
 }
 
+/**
+ * Projects a share into the editable {@link AgentShareDraft} — the
+ * single constructor for the full-spec drafts every save requires.
+ * `null` (no share yet) seeds the same defaults the server would apply
+ * on first create.
+ *
+ * Shared by the Share dialog (draft seeding) and the share list's
+ * pause/resume toggle, so a toggle rebuilds the complete spec with only
+ * `enabled` flipped and can never wipe origins, messages, or credential
+ * bindings — the fails-closed posture {@link AgentShareDraft} exists to
+ * enforce.
+ */
+export function draftFromShare(share: AgentShare | null): AgentShareDraft {
+  const spec = share?.spec;
+  return {
+    enabled: spec?.enabled ?? false,
+    audience: sharingAudienceFromProto(spec?.audience),
+    allowedOrigins: spec?.allowedOrigins ?? [],
+    messages: {
+      rateLimited: spec?.messages?.rateLimited ?? "",
+      unavailable: spec?.messages?.unavailable ?? "",
+      conversationEnded: spec?.messages?.conversationEnded ?? "",
+    },
+    environmentRefs: (spec?.environmentRefs ?? []).map((ref) => ({
+      org: ref.org,
+      slug: ref.slug,
+    })),
+  };
+}
+
+/**
+ * Identity for a share being created: its display name and URL slug in
+ * the sharing org's namespace. Only consulted when `current` is `null`
+ * — an existing share's identity is immutable (decision 011 D2).
+ */
+export interface AgentShareCreateIdentity {
+  /** Display name for the new share. */
+  readonly name: string;
+  /** URL slug for the new share — appears in `/chat/<org>/<slug>`. */
+  readonly slug: string;
+}
+
 /** Return value of {@link useSaveAgentShare}. */
 export interface UseSaveAgentShareReturn {
   /**
@@ -83,12 +125,14 @@ export interface UseSaveAgentShareReturn {
    * persisted {@link AgentShare} — adopt it as the new baseline (its
    * `status.shareLinkToken` carries the live link token).
    *
-   * `current` is the share being edited, or `null` when the agent has
-   * never been shared — the save then creates the canonical share.
+   * `current` is the share being edited, or `null` to create one —
+   * named by `createIdentity` when given, else the server's defaults
+   * (the agent's own name and slug).
    */
   readonly save: (
     draft: AgentShareDraft,
     current: AgentShare | null,
+    createIdentity?: AgentShareCreateIdentity,
   ) => Promise<AgentShare | undefined>;
   /** `true` while the RPC is in flight. */
   readonly isPending: boolean;
@@ -97,36 +141,36 @@ export interface UseSaveAgentShareReturn {
 }
 
 /**
- * Behavior hook that persists an agent's canonical share configuration.
+ * Behavior hook that persists an agent share's configuration.
  *
  * Commits via `stigmer.agentShare.apply()` — an idempotent upsert keyed
  * on the share's `(org, slug)` identity — so one code path serves both
- * the first enable (creates the share; the server authorizes on the
- * referenced agent's `can_edit`) and every later edit. There is
- * deliberately no create/update branching: the share slug is unique per
- * org and defaults to the agent's slug, which makes apply-by-identity
- * exact, and the generated `AgentShareInput` carries no `metadata.id`
- * for an update to route by anyway.
+ * creation (the server authorizes on the referenced agent's `can_edit`)
+ * and every later edit. There is deliberately no create/update
+ * branching: the share slug is unique per org, which makes
+ * apply-by-identity exact, and the generated `AgentShareInput` carries
+ * no `metadata.id` for an update to route by anyway. A create that
+ * collides on `(org, slug)` rejects with an already-exists error rather
+ * than touching the existing share.
  *
  * Disabling is a save with `enabled: false` — a config-preserving pause
  * (decision 011 D1). Deleting the share is a separate, destructive
- * operation this hook does not perform.
+ * operation ({@link useDeleteAgentShare}).
  *
- * `shareOrg` selects which org's channel a first save creates and
- * defaults to the agent's own org. Pass the viewer's org to create a
- * **cross-org share** (decision 013) — the server then authorizes on the
- * public agent's `can_execute` plus `can_create_agent_share` in the
- * sharing org, and bills that org.
+ * `shareOrg` selects which org owns a created share and defaults to the
+ * agent's own org. Pass the viewer's org to create a **cross-org
+ * share** (decision 013) — the server then authorizes on the public
+ * agent's `can_execute` plus `can_create_agent_share` in the sharing
+ * org, and bills that org.
  *
  * Pass `null` for `agent` to produce a stable no-op (useful while the
  * agent is still loading).
  *
  * @example
  * ```tsx
- * const { share } = useAgentShare(agent);
  * const { save, isPending } = useSaveAgentShare(agent);
  *
- * const persisted = await save({ ...draft, enabled: true }, share);
+ * const persisted = await save({ ...draftFromShare(share), enabled: true }, share);
  * // persisted.status.shareLinkToken is the live link token
  * ```
  */
@@ -147,6 +191,7 @@ export function useSaveAgentShare(
     async (
       draft: AgentShareDraft,
       current: AgentShare | null,
+      createIdentity?: AgentShareCreateIdentity,
     ): Promise<AgentShare | undefined> => {
       if (!agentOrg || !agentSlug) return undefined;
 
@@ -156,13 +201,18 @@ export function useSaveAgentShare(
       try {
         return await stigmer.agentShare.apply({
           // Identity: the existing share's org/slug when editing (a
-          // manifest-created share may carry a non-default slug — apply
-          // with the agent's slug would create a SECOND share), the
-          // sharing org + the agent's slug when creating (the server's
-          // own D2 default, made explicit).
+          // share may carry a non-default slug — apply with the agent's
+          // slug would create a SECOND share); when creating, the
+          // sharing org + the caller-chosen identity, falling back to
+          // the agent's own slug/name (the server's D2 default, made
+          // explicit).
           org: current?.metadata?.org || resolvedShareOrg,
-          slug: current?.metadata?.slug || agentSlug,
-          name: current?.metadata?.name || agentName || agentSlug,
+          slug: current?.metadata?.slug || createIdentity?.slug || agentSlug,
+          name:
+            current?.metadata?.name ||
+            createIdentity?.name ||
+            agentName ||
+            agentSlug,
           agentRef: { org: agentOrg, slug: agentSlug },
           enabled: draft.enabled,
           // Written as the explicit enum value, never left unspecified —

package/src/workflow/WorkflowDetailView.tsx

@@ -76,6 +76,13 @@ export interface WorkflowDetailViewProps {
    * Receives the execution ID — use for navigation to the execution viewer.
    */
   readonly onExecutionClick?: (executionId: string) => void;
+  /**
+   * The viewer's active organization slug, feeding the Instances tab:
+   * it scopes the list to this org's instances of the workflow, so a
+   * member of several orgs sees the current org context only. Omit to
+   * default to the workflow's own org.
+   */
+  readonly viewerOrg?: string;
   /**
    * Called when the user clicks "Create Instance" in the Instances tab.
    * Opens the create instance dialog.
@@ -157,6 +164,7 @@ export function WorkflowDetailView({
   onTabChange,
   defaultTab,
   onExecutionClick,
+  viewerOrg,
   onCreateInstanceClick,
   onInstanceClick,
   onInstanceRunClick,
@@ -300,6 +308,7 @@ export function WorkflowDetailView({
         workflowId={meta?.id ?? ""}
         defaultInstanceId={workflow?.status?.defaultInstanceId}
         org={org}
+        viewerOrg={viewerOrg}
         onCreateClick={onCreateInstanceClick}
         onInstanceClick={onInstanceClick}
         onRunClick={onInstanceRunClick}

package/src/workflow/instance/WorkflowInstanceEmptyState.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { cn } from "@stigmer/theme";
+import { EmptyState } from "../../empty-state/EmptyState.js";
 
 /** Props for {@link WorkflowInstanceEmptyState}. */
 export interface WorkflowInstanceEmptyStateProps {
-  /** Called when the user clicks "Create Instance". */
+  /** Called when the user clicks "Create instance". */
   readonly onCreateClick?: () => void;
   /** Additional CSS class names. */
   readonly className?: string;
@@ -15,62 +15,43 @@ export interface WorkflowInstanceEmptyStateProps {
  *
  * Communicates the value proposition of workflow instances without
  * mentioning the platform-managed default instance (implementation detail).
+ *
+ * A thin composition over the shared {@link EmptyState} primitive: only the
+ * icon and copy are specific to workflow instances.
  */
 export function WorkflowInstanceEmptyState({
   onCreateClick,
   className,
 }: WorkflowInstanceEmptyStateProps) {
   return (
-    <div
-      className={cn(
-        "flex flex-col items-center justify-center py-12 px-6 text-center",
-        className,
-      )}
-    >
-      <div className="mb-4 rounded-full bg-muted p-3">
-        <LayersIcon />
-      </div>
-
-      <h3 className="text-sm font-semibold text-foreground mb-1">
-        No instances yet
-      </h3>
-
-      <p className="text-sm text-muted-foreground max-w-sm mb-6">
-        Create instances to run this workflow with different configurations
-        and access controls. Each instance binds environments (credentials,
-        secrets, settings) and can be shared independently.
-      </p>
-
-      {onCreateClick && (
-        <button
-          type="button"
-          onClick={onCreateClick}
-          className={cn(
-            "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5",
-            "text-sm font-medium",
-            "bg-primary text-primary-foreground",
-            "hover:bg-primary/90",
-            "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-          )}
-        >
-          <PlusIcon />
-          Create Instance
-        </button>
-      )}
-    </div>
+    <EmptyState
+      variant="first-use"
+      icon={<LayersIcon />}
+      title="No instances yet"
+      description={
+        "Create instances to run this workflow with different configurations " +
+        "and access controls. Each instance binds environments (credentials, " +
+        "secrets, settings) and can be shared independently."
+      }
+      action={
+        onCreateClick
+          ? { label: "Create instance", onClick: onCreateClick, icon: <PlusIcon /> }
+          : undefined
+      }
+      className={className}
+    />
   );
 }
 
 function LayersIcon() {
   return (
-    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+    <svg width="24" height="24" viewBox="0 0 20 20" fill="none" aria-hidden="true">
       <path
         d="M10 2L2 6l8 4 8-4-8-4zM2 10l8 4 8-4M2 14l8 4 8-4"
         stroke="currentColor"
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
-        className="text-muted-foreground"
       />
     </svg>
   );
@@ -78,8 +59,8 @@ function LayersIcon() {
 
 function PlusIcon() {
   return (
-    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
-      <path d="M7 2v10M2 7h10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+      <path d="M6 2v8M2 6h8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
     </svg>
   );
 }

package/src/workflow/instance/WorkflowInstanceList.tsx

@@ -5,6 +5,7 @@ import { cn } from "@stigmer/theme";
 import type { WorkflowInstance } from "@stigmer/protos/ai/stigmer/agentic/workflowinstance/v1/api_pb";
 import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
 import { useWorkflowInstances } from "../useWorkflowInstances.js";
+import { Button } from "../../button/Button.js";
 import { useEnvironmentList } from "../../environment/useEnvironmentList.js";
 import { ResourceVisibilityControl } from "../../library/ResourceVisibilityControl.js";
 import { PermissionGate } from "../../iam-policy/PermissionGate.js";
@@ -16,8 +17,19 @@ export interface WorkflowInstanceListProps {
   readonly workflowId: string;
   /** The default instance ID (from workflow.status.defaultInstanceId) — filtered out of the list. */
   readonly defaultInstanceId?: string;
-  /** Organization slug (needed for environment resolution and create flow). */
+  /**
+   * The WORKFLOW's organization slug (needed for environment resolution
+   * and the create flow). Not the list scope — that is `viewerOrg`,
+   * which differs from `org` when viewing another org's workflow.
+   */
   readonly org: string;
+  /**
+   * The viewer's active organization slug. Scopes the list to this
+   * org's instances of the workflow, so a member of several orgs sees
+   * exactly the current org context's instances. Omit to default to
+   * the workflow's own org.
+   */
+  readonly viewerOrg?: string;
   /** Called when the user wants to create a new instance. */
   readonly onCreateClick?: () => void;
   /** Called when the user clicks an instance row. */
@@ -45,6 +57,7 @@ export function WorkflowInstanceList({
   workflowId,
   defaultInstanceId,
   org,
+  viewerOrg,
   onCreateClick,
   onInstanceClick,
   onRunClick,
@@ -52,7 +65,13 @@ export function WorkflowInstanceList({
   refreshKey,
   className,
 }: WorkflowInstanceListProps) {
-  const { instances, isLoading, error, refetch } = useWorkflowInstances(workflowId);
+  // Scope the list to the org whose context the viewer is in; when the
+  // host passes no viewerOrg the scope falls back to the workflow's own
+  // org (the same-org owner flow).
+  const { instances, isLoading, error, refetch } = useWorkflowInstances(
+    workflowId,
+    viewerOrg || org,
+  );
   const { environments } = useEnvironmentList(org);
 
   // Refetch when refreshKey changes (signals external mutation like create/delete)
@@ -100,27 +119,21 @@ export function WorkflowInstanceList({
           {userInstances.length} {userInstances.length === 1 ? "instance" : "instances"}
         </h3>
         {onCreateClick && (
-          <button
-            type="button"
+          <Button
+            variant="outline"
+            size="xs"
+            icon={<PlusIcon />}
             onClick={onCreateClick}
-            className={cn(
-              "inline-flex items-center gap-1 rounded-md px-2.5 py-1",
-              "text-xs font-medium",
-              "border border-border text-foreground",
-              "hover:bg-accent-hover",
-              "focus:outline-none focus:ring-2 focus:ring-ring",
-            )}
           >
-            <PlusIcon />
-            Create
-          </button>
+            Create instance
+          </Button>
         )}
       </div>
 
       <div className="overflow-hidden rounded-lg border border-border">
         <table className="w-full text-sm">
           <thead>
-            <tr className="border-b border-border bg-muted/50">
+            <tr className="border-b border-border bg-muted-subtle">
               <th className="px-4 py-2 text-left font-medium text-muted-foreground">Name</th>
               <th className="px-4 py-2 text-left font-medium text-muted-foreground">Environments</th>
               <th className="px-4 py-2 text-left font-medium text-muted-foreground">Visibility</th>
@@ -267,7 +280,7 @@ function LoadingSkeleton() {
   return (
     <div className="space-y-2 py-4">
       {[1, 2, 3].map((i) => (
-        <div key={i} className="h-12 rounded-md bg-muted/50 animate-pulse" />
+        <div key={i} className="h-12 animate-pulse rounded-md bg-muted-faint" />
       ))}
     </div>
   );

package/src/workflow/useWorkflowInstances.ts

@@ -21,21 +21,27 @@ export interface UseWorkflowInstancesReturn {
 }
 
 /**
- * Data hook that fetches all instances for a specific workflow.
+ * Data hook that fetches instances for a specific workflow.
  *
  * Wraps `stigmer.workflowInstance.getByWorkflow()` with loading
  * and error state management. Used on the Workflow detail page
  * "Instances" tab to show environment-bound deployments.
  *
+ * Pass `org` to scope the list to one organization's instances — the
+ * org-context view a console tab needs. The server applies the scope
+ * (it only ever narrows the permission-bounded view); omit `org` for
+ * the full permission-bounded list.
+ *
  * Pass `null` as `workflowId` to skip fetching (stable no-op).
  *
  * @example
  * ```tsx
- * const { instances, isLoading } = useWorkflowInstances(workflow.metadata?.id);
+ * const { instances, isLoading } = useWorkflowInstances(workflow.metadata?.id, viewerOrg);
  * ```
  */
 export function useWorkflowInstances(
   workflowId: string | null | undefined,
+  org?: string,
 ): UseWorkflowInstancesReturn {
   const stigmer = useStigmer();
 
@@ -44,6 +50,7 @@ export function useWorkflowInstances(
         const resp = await stigmer.workflowInstance.getByWorkflow(
           create(GetWorkflowInstancesByWorkflowRequestSchema, {
             workflowId,
+            org: org ?? "",
           }),
         );
         return resp.entries ? [...resp.entries] : [];
@@ -56,7 +63,7 @@ export function useWorkflowInstances(
     isRefetching,
     error,
     refetch,
-  } = useFetch<readonly WorkflowInstance[]>(fetchFn, [workflowId, stigmer], []);
+  } = useFetch<readonly WorkflowInstance[]>(fetchFn, [workflowId, org, stigmer], []);
 
   return { instances, isLoading, isRefetching, error, refetch };
 }