@stigmer/react 3.1.13 → 3.1.15

package/sharing/useSaveAgentShare.js

@@ -17,36 +17,65 @@ function sharingAudienceToProto(audience) {
         : AgentShareAudience.public;
 }
 /**
- * Behavior hook that persists an agent's canonical share configuration.
+ * 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) {
+    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,
+        })),
+    };
+}
+/**
+ * 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
  * ```
  */
@@ -58,7 +87,7 @@ export function useSaveAgentShare(agent, shareOrg) {
     const agentSlug = agent?.metadata?.slug ?? "";
     const agentName = agent?.metadata?.name ?? "";
     const resolvedShareOrg = shareOrg || agentOrg;
-    const save = useCallback(async (draft, current) => {
+    const save = useCallback(async (draft, current, createIdentity) => {
         if (!agentOrg || !agentSlug)
             return undefined;
         setIsPending(true);
@@ -66,13 +95,17 @@ export function useSaveAgentShare(agent, shareOrg) {
         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/sharing/useSaveAgentShare.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSaveAgentShare.js","sourceRoot":"","sources":["../../src/sharing/useSaveAgentShare.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useSaveAgentShare.js","sourceRoot":"","sources":["../../src/sharing/useSaveAgentShare.ts"],"names":[],"mappings":"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"}

package/src/agent/AgentDetailView.tsx

@@ -17,8 +17,7 @@ import { agentToInput } from "./internal/agentToInput.js";
 import { ErrorMessage } from "../error/ErrorMessage.js";
 import { VisibilityBadge } from "../library/VisibilitySelector.js";
 import { useManageAccess } from "../access/useManageAccess.js";
-import { useShareAgent } from "../sharing/useShareAgent.js";
-import { useCreateExternalShareLink } from "../sharing/useCreateExternalShareLink.js";
+import { AgentShareList } from "../sharing/AgentShareList.js";
 import { ResourceDetailShell } from "../resource-detail/ResourceDetailShell.js";
 import { Section } from "../resource-detail/Section.js";
 import { useDetailTabs } from "../resource-detail/useDetailTabs.js";
@@ -38,6 +37,7 @@ const INSTRUCTIONS_COLLAPSED_HEIGHT = "12rem";
 
 const OVERVIEW_TAB: TabItem = { id: "overview", label: "Overview" };
 const INSTANCES_TAB: TabItem = { id: "instances", label: "Instances" };
+const SHARES_TAB: TabItem = { id: "shares", label: "Shares" };
 const DEPENDENCIES_TAB: TabItem = { id: "dependencies", label: "Dependencies" };
 
 /** Props for {@link AgentDetailView}. */
@@ -130,21 +130,21 @@ export interface AgentDetailViewProps {
    */
   readonly onCreateInstanceClick?: () => void;
   /**
-   * Builds the absolute public chat URL shown in the Share dialog.
+   * Builds the absolute public chat URL for shares in the Shares tab.
    * The host application owns URL construction — its configured public
    * origin may differ from the rendering origin (e.g. the desktop app).
-   * When omitted, the dialog falls back to the relative
+   * When omitted, share links fall back to the relative
    * `/chat/<org>/<slug>` path.
    */
   readonly buildShareUrl?: (org: string, slug: string) => string;
   /**
-   * The viewer's active organization slug. When it differs from the
-   * agent's org and the agent is marketplace-public, the kebab gains a
-   * "Create share link" action — the viewer org's own share of this
-   * agent (decision 013): its URL, billing, and credentials, against the
-   * agent org's live blueprint. Omit to disable the cross-org entry
-   * (the same-org Share action is unaffected — it gates on agent
-   * `can_edit`, not on this prop).
+   * The viewer's active organization slug, feeding the Shares and
+   * Instances tabs. It scopes both lists to this org's rows (a member
+   * of several orgs sees the current org context only), and a share
+   * created in the Shares tab lands in this org — its URL, billing,
+   * and credentials — which for another org's marketplace-public agent
+   * is a **cross-org share** (decision 013). Omit to default to the
+   * agent's own org.
    */
   readonly viewerOrg?: string;
   /**
@@ -265,8 +265,8 @@ export function AgentDetailView({
   const builtInTabs = useMemo<readonly TabItem[]>(
     () =>
       noDeps
-        ? [OVERVIEW_TAB, INSTANCES_TAB]
-        : [OVERVIEW_TAB, INSTANCES_TAB, DEPENDENCIES_TAB],
+        ? [OVERVIEW_TAB, INSTANCES_TAB, SHARES_TAB]
+        : [OVERVIEW_TAB, INSTANCES_TAB, SHARES_TAB, DEPENDENCIES_TAB],
     [noDeps],
   );
 
@@ -328,27 +328,6 @@ export function AgentDetailView({
       : undefined,
   });
 
-  // Share — the sibling consent to Manage access: visibility governs who
-  // can read the blueprint; sharing governs who can chat with the running
-  // agent (billed to the owning org). Same null-until-ready contract.
-  const share = useShareAgent({
-    agent,
-    buildShareUrl,
-    onSharingChanged: refetch,
-  });
-
-  // Cross-org "Create share link" (decision 013) — the marketplace entry
-  // for another org's public agent. Mutually exclusive with the Share
-  // action above by construction (same-org gates on can_edit; this one
-  // requires viewerOrg != agent org), so both fold into the actions
-  // array unconditionally.
-  const externalShare = useCreateExternalShareLink({
-    agent,
-    viewerOrg: viewerOrg ?? "",
-    buildShareUrl,
-    onSharingChanged: refetch,
-  });
-
   if (isLoading) return <LoadingSkeleton className={className} />;
   if (error)
     return <ErrorMessage error={error} retry={refetch} className={className} />;
@@ -387,15 +366,23 @@ export function AgentDetailView({
     <VisibilityBadge visibility={meta.visibility} />
   ) : undefined;
 
-  // Share (or its cross-org sibling) precedes Manage access within the
-  // "sharing" group.
-  const injectedActions = [share.action, externalShare.action, access.action].filter(
+  // Share — the sibling consent to Manage access: visibility governs who
+  // can read the blueprint; sharing governs who can chat with the running
+  // agent (billed to the org that owns each share). Pure navigation to
+  // the Shares tab, so it renders unconditionally (like the tab itself);
+  // all capability gating lives in the tab, next to its affordances.
+  const shareAction: DetailAction = {
+    id: "share",
+    label: "Share",
+    group: "sharing",
+    onAction: () => effectiveOnTabChange(SHARES_TAB.id),
+  };
+
+  // Share precedes Manage access within the "sharing" group.
+  const injectedActions = [shareAction, access.action].filter(
     (a): a is NonNullable<typeof a> => a != null,
   );
-  const mergedActions =
-    injectedActions.length > 0
-      ? [...(actions ?? []), ...injectedActions]
-      : actions;
+  const mergedActions = [...(actions ?? []), ...injectedActions];
 
   let tabContent: React.ReactNode;
   if (activeAdditionalTab) {
@@ -406,6 +393,7 @@ export function AgentDetailView({
         agentId={meta?.id ?? ""}
         defaultInstanceId={agent.status?.defaultInstanceId}
         org={org}
+        viewerOrg={viewerOrg}
         onCreateClick={onCreateInstanceClick}
         onInstanceClick={onInstanceClick}
         onStartSessionClick={onInstanceStartSessionClick}
@@ -413,6 +401,14 @@ export function AgentDetailView({
         refreshKey={instancesRefreshKey}
       />
     );
+  } else if (effectiveActiveTab === "shares") {
+    tabContent = (
+      <AgentShareList
+        agent={agent}
+        viewerOrg={viewerOrg}
+        buildShareUrl={buildShareUrl}
+      />
+    );
   } else if (effectiveActiveTab === "dependencies" && tree) {
     tabContent = (
       <DependencyGraph
@@ -451,8 +447,6 @@ export function AgentDetailView({
         {tabContent}
       </ResourceDetailShell>
       {access.dialog}
-      {share.dialog}
-      {externalShare.dialog}
     </>
   );
 }

package/src/agent-instance/AgentInstanceEmptyState.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { cn } from "@stigmer/theme";
+import { EmptyState } from "../empty-state/EmptyState.js";
 
 /** Props for {@link AgentInstanceEmptyState}. */
 export interface AgentInstanceEmptyStateProps {
-  /** Called when the user clicks "Create Instance". */
+  /** Called when the user clicks "Create instance". */
   readonly onCreateClick?: () => void;
   /** Additional CSS class names. */
   readonly className?: string;
@@ -17,62 +17,43 @@ export interface AgentInstanceEmptyStateProps {
  * the platform-managed default instance (an implementation detail). For
  * agents, an instance is a reusable, environment-bound deployment you can
  * start sessions against — and share with your team.
+ *
+ * A thin composition over the shared {@link EmptyState} primitive: only the
+ * icon and copy are specific to agent instances.
  */
 export function AgentInstanceEmptyState({
   onCreateClick,
   className,
 }: AgentInstanceEmptyStateProps) {
   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 start sessions with this agent using different
-        credentials and settings. Each instance binds environments (secrets,
-        configuration) and can be shared with your team 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 start sessions with this agent using different " +
+        "credentials and settings. Each instance binds environments (secrets, " +
+        "configuration) and can be shared with your team 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>
   );
@@ -80,8 +61,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/agent-instance/AgentInstanceList.tsx

@@ -5,6 +5,7 @@ import { cn } from "@stigmer/theme";
 import type { AgentInstance } from "@stigmer/protos/ai/stigmer/agentic/agentinstance/v1/api_pb";
 import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
 import { useAgentInstances } from "./useAgentInstances.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";
@@ -19,8 +20,19 @@ export interface AgentInstanceListProps {
   readonly agentId: string;
   /** The default instance ID (from agent.status.defaultInstanceId) — filtered out of the list. */
   readonly defaultInstanceId?: string;
-  /** Organization slug (needed for environment resolution and create flow). */
+  /**
+   * The AGENT'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 agent.
+   */
   readonly org: string;
+  /**
+   * The viewer's active organization slug. Scopes the list to this
+   * org's instances of the agent, so a member of several orgs sees
+   * exactly the current org context's instances. Omit to default to
+   * the agent'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 (opens detail). */
@@ -53,6 +65,7 @@ export function AgentInstanceList({
   agentId,
   defaultInstanceId,
   org,
+  viewerOrg,
   onCreateClick,
   onInstanceClick,
   onStartSessionClick,
@@ -60,7 +73,13 @@ export function AgentInstanceList({
   refreshKey,
   className,
 }: AgentInstanceListProps) {
-  const { instances, isLoading, error, refetch } = useAgentInstances(agentId);
+  // Scope the list to the org whose context the viewer is in; when the
+  // host passes no viewerOrg the scope falls back to the agent's own org
+  // (the same-org owner flow).
+  const { instances, isLoading, error, refetch } = useAgentInstances(
+    agentId,
+    viewerOrg || org,
+  );
   const { environments } = useEnvironmentList(org);
 
   // Refetch when refreshKey changes (signals external mutation like create/delete)
@@ -108,27 +127,21 @@ export function AgentInstanceList({
           {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>
@@ -289,7 +302,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/agent-instance/__tests__/agent-instance-hooks.test.tsx

@@ -200,6 +200,25 @@ describe("useAgentInstances", () => {
     expect(result.current.instances).toHaveLength(2);
     expect(result.current.instances[0]?.metadata?.id).toBe("ain-1");
     expect(mockGetByAgent).toHaveBeenCalledTimes(1);
+    expect(mockGetByAgent).toHaveBeenCalledWith(
+      expect.objectContaining({ agentId: "agent-001", org: "" }),
+    );
+  });
+
+  it("threads the org scope into the request", async () => {
+    // The org scope belongs in the RPC, never client-side filtering: the
+    // server narrows a multi-org member's view to one org's instances.
+    mockGetByAgent.mockResolvedValueOnce({ items: [], totalCount: 0 });
+
+    const { result } = renderHook(
+      () => useAgentInstances("agent-001", "acme"),
+      { wrapper: createWrapper(makeMockClient()) },
+    );
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+    expect(mockGetByAgent).toHaveBeenCalledWith(
+      expect.objectContaining({ agentId: "agent-001", org: "acme" }),
+    );
   });
 
   it("does not fetch when agentId is null", async () => {

package/src/agent-instance/useAgentInstances.ts

@@ -21,12 +21,19 @@ export interface UseAgentInstancesReturn {
 }
 
 /**
- * Data hook that fetches all instances for a specific agent.
+ * Data hook that fetches instances for a specific agent.
  *
  * Wraps `stigmer.agentInstance.getByAgent()` with loading and error
  * state management. Used on the Agent detail page "Instances" tab to
  * show environment-bound deployments of the agent blueprint.
  *
+ * Pass `org` to scope the list to one organization's instances — the
+ * org-context view a console tab needs. Permissions alone cannot provide
+ * this scope: a member of several orgs can view all of their orgs'
+ * instances of the agent, so the unscoped list merges them. The server
+ * applies the scope (it only ever narrows the permission-bounded view);
+ * omit `org` for the full permission-bounded list.
+ *
  * Pass `null` as `agentId` to skip fetching (stable no-op).
  *
  * Note: the `getByAgent` RPC returns an `AgentInstanceList` whose
@@ -35,11 +42,12 @@ export interface UseAgentInstancesReturn {
  *
  * @example
  * ```tsx
- * const { instances, isLoading } = useAgentInstances(agent.metadata?.id);
+ * const { instances, isLoading } = useAgentInstances(agent.metadata?.id, viewerOrg);
  * ```
  */
 export function useAgentInstances(
   agentId: string | null | undefined,
+  org?: string,
 ): UseAgentInstancesReturn {
   const stigmer = useStigmer();
 
@@ -48,6 +56,7 @@ export function useAgentInstances(
         const resp = await stigmer.agentInstance.getByAgent(
           create(GetAgentInstancesByAgentRequestSchema, {
             agentId,
+            org: org ?? "",
           }),
         );
         return resp.items ? [...resp.items] : [];
@@ -60,7 +69,7 @@ export function useAgentInstances(
     isRefetching,
     error,
     refetch,
-  } = useFetch<readonly AgentInstance[]>(fetchFn, [agentId, stigmer], []);
+  } = useFetch<readonly AgentInstance[]>(fetchFn, [agentId, org, stigmer], []);
 
   return { instances, isLoading, isRefetching, error, refetch };
 }

package/src/button/Button.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import { cn } from "@stigmer/theme";
+
+/**
+ * Visual weight of a {@link Button}, from most to least prominent.
+ *
+ * - `primary` — filled call to action (one per view: empty-state CTAs,
+ *   dialog confirms).
+ * - `outline` — bordered pill for secondary actions that share a row
+ *   with content (list-header actions like "Create share").
+ * - `ghost` — borderless, hover-surfaced; for repeated inline actions
+ *   (table row actions) where borders would add noise.
+ * - `destructive` — filled danger action (dialog confirms for deletes).
+ *   For inline destructive row actions prefer `ghost` with destructive
+ *   text styling via `className`.
+ */
+export type ButtonVariant = "primary" | "outline" | "ghost" | "destructive";
+
+/**
+ * Size of a {@link Button}.
+ *
+ * - `xs` — compact pill (list headers, table rows).
+ * - `sm` — standard (empty-state CTAs, dialog actions).
+ */
+export type ButtonSize = "xs" | "sm";
+
+/** Props for {@link Button}. Extends the native button attributes. */
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Visual weight. @default "primary" */
+  readonly variant?: ButtonVariant;
+  /** Size. @default "sm" */
+  readonly size?: ButtonSize;
+  /** Optional leading icon, rendered before the label. */
+  readonly icon?: ReactNode;
+}
+
+// One source of truth for each tier's classes: every mapping below is the
+// established idiom already used across the SDK (list-header pills,
+// EmptyState CTAs, ConfirmDialog actions) — collected here so surfaces
+// can stop hand-rolling drifting copies of the same button.
+const VARIANT_CLASSES: Record<ButtonVariant, string> = {
+  primary: "bg-primary text-primary-foreground hover:bg-primary-hover",
+  outline: "border border-border text-foreground hover:bg-accent-hover",
+  ghost: "text-foreground hover:bg-accent-hover",
+  destructive:
+    "bg-destructive text-destructive-foreground hover:bg-destructive-hover",
+};
+
+const SIZE_CLASSES: Record<ButtonSize, string> = {
+  xs: "px-2.5 py-1 text-xs",
+  sm: "px-3 py-1.5 text-xs",
+};
+
+/**
+ * The SDK's shared button primitive.
+ *
+ * A thin, token-compliant wrapper over the native `<button>`: variants
+ * and sizes cover the console's established action tiers, everything
+ * else (handlers, ARIA, `disabled`, `form`) passes through natively.
+ * `type` defaults to `"button"` so a button inside a form never submits
+ * it accidentally.
+ *
+ * All visual properties flow through `--stgm-*` design tokens (DD-005);
+ * hover states use dedicated hover tokens, never opacity modifiers.
+ *
+ * This is an SDK component (DD-001) — embeddable by platform builders.
+ *
+ * @example
+ * ```tsx
+ * <Button variant="outline" size="xs" icon={<PlusIcon />} onClick={onCreate}>
+ *   Create share
+ * </Button>
+ * ```
+ */
+export function Button({
+  variant = "primary",
+  size = "sm",
+  icon,
+  type = "button",
+  className,
+  children,
+  ...rest
+}: ButtonProps) {
+  return (
+    <button
+      type={type}
+      className={cn(
+        "inline-flex items-center gap-1 rounded-md font-medium transition-colors",
+        "motion-reduce:transition-none",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "disabled:pointer-events-none disabled:opacity-50",
+        SIZE_CLASSES[size],
+        VARIANT_CLASSES[variant],
+        className,
+      )}
+      {...rest}
+    >
+      {icon}
+      {children}
+    </button>
+  );
+}