@stigmer/react 0.0.84 → 0.0.86

package/oauth-app/useOAuthAppList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOAuthAppList.d.ts","sourceRoot":"","sources":["../../src/oauth-app/useOAuthAppList.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mDAAmD,CAAC;AAIlF,+CAA+C;AAC/C,MAAM,WAAW,qBAAqB;IACpC,6EAA6E;IAC7E,QAAQ,CAAC,SAAS,EAAE,SAAS,QAAQ,EAAE,CAAC;IACxC,gEAAgE;IAChE,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,kEAAkE;IAClE,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IAC7B,iEAAiE;IACjE,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,eAAe,CAC7B,GAAG,EAAE,MAAM,GAAG,IAAI,GACjB,qBAAqB,CA0CvB"}

package/oauth-app/useOAuthAppList.js

@@ -0,0 +1,61 @@
+"use client";
+import { useCallback, useEffect, useState } from "react";
+import { create } from "@bufbuild/protobuf";
+import { ListOAuthAppsByOrgInputSchema } from "@stigmer/protos/ai/stigmer/iam/oauthapp/v1/io_pb";
+import { useStigmer } from "../hooks";
+import { toError } from "../internal/toError";
+/**
+ * Data hook that fetches all {@link OAuthApp} entries for an organization.
+ *
+ * Returns every OAuthApp whose `metadata.org` matches the input. In
+ * practice these are the BYOA OAuth apps created through the "Bring
+ * your own app" flow on MCP server detail pages.
+ *
+ * Pass `null` for `org` to skip fetching (stable no-op). Useful when
+ * the active organization has not been resolved yet.
+ *
+ * @example
+ * ```tsx
+ * const { oauthApps, isLoading, error } = useOAuthAppList(org);
+ *
+ * if (isLoading) return <Spinner />;
+ * oauthApps.map((app) => app.spec?.provider);
+ * ```
+ */
+export function useOAuthAppList(org) {
+    const stigmer = useStigmer();
+    const [oauthApps, setOauthApps] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [fetchKey, setFetchKey] = useState(0);
+    const refetch = useCallback(() => setFetchKey((k) => k + 1), []);
+    useEffect(() => {
+        if (!org) {
+            setOauthApps([]);
+            setIsLoading(false);
+            setError(null);
+            return;
+        }
+        const cancelled = { current: false };
+        setIsLoading(true);
+        setError(null);
+        stigmer.oauthapp
+            .listByOrg(create(ListOAuthAppsByOrgInputSchema, { org }))
+            .then((result) => {
+            if (cancelled.current)
+                return;
+            setOauthApps([...result.entries]);
+            setIsLoading(false);
+        }, (err) => {
+            if (cancelled.current)
+                return;
+            setError(toError(err));
+            setIsLoading(false);
+        });
+        return () => {
+            cancelled.current = true;
+        };
+    }, [org, stigmer, fetchKey]);
+    return { oauthApps, isLoading, error, refetch };
+}
+//# sourceMappingURL=useOAuthAppList.js.map

package/oauth-app/useOAuthAppList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOAuthAppList.js","sourceRoot":"","sources":["../../src/oauth-app/useOAuthAppList.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,6BAA6B,EAAE,MAAM,kDAAkD,CAAC;AAEjG,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAc9C;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,eAAe,CAC7B,GAAkB;IAElB,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAa,EAAE,CAAC,CAAC;IAC3D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAe,IAAI,CAAC,CAAC;IACvD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAE5C,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEjE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,GAAG,EAAE,CAAC;YACT,YAAY,CAAC,EAAE,CAAC,CAAC;YACjB,YAAY,CAAC,KAAK,CAAC,CAAC;YACpB,QAAQ,CAAC,IAAI,CAAC,CAAC;YACf,OAAO;QACT,CAAC;QAED,MAAM,SAAS,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;QACrC,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,QAAQ,CAAC,IAAI,CAAC,CAAC;QAEf,OAAO,CAAC,QAAQ;aACb,SAAS,CAAC,MAAM,CAAC,6BAA6B,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC;aACzD,IAAI,CACH,CAAC,MAAM,EAAE,EAAE;YACT,IAAI,SAAS,CAAC,OAAO;gBAAE,OAAO;YAC9B,YAAY,CAAC,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;YAClC,YAAY,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC,EACD,CAAC,GAAG,EAAE,EAAE;YACN,IAAI,SAAS,CAAC,OAAO;gBAAE,OAAO;YAC9B,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;YACvB,YAAY,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC,CACF,CAAC;QAEJ,OAAO,GAAG,EAAE;YACV,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;QAC3B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE7B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;AAClD,CAAC"}

package/oauth-app/useUpdateOAuthApp.d.ts

@@ -0,0 +1,38 @@
+import type { OAuthAppInput } from "@stigmer/sdk";
+import type { OAuthApp } from "@stigmer/protos/ai/stigmer/iam/oauthapp/v1/api_pb";
+/** Return value of {@link useUpdateOAuthApp}. */
+export interface UseUpdateOAuthAppReturn {
+    /** Submit an {@link OAuthAppInput} to update an existing OAuth app. Resolves with the updated resource. */
+    readonly update: (input: OAuthAppInput) => Promise<OAuthApp>;
+    /** `true` while the update request is in flight. */
+    readonly isUpdating: boolean;
+    /** Error from the last failed update, or `null` when healthy. */
+    readonly error: Error | null;
+    /** Reset `error` to `null`. */
+    readonly clearError: () => void;
+}
+/**
+ * Mutation hook that wraps `oauthapp.update()` with loading and error
+ * state.
+ *
+ * Updates an existing OAuth app. The input must include the `name` and
+ * `org` fields to identify the target resource, along with the updated
+ * spec fields. Omit `clientSecret` to leave the existing secret
+ * unchanged.
+ *
+ * @example
+ * ```tsx
+ * const { update, isUpdating, error } = useUpdateOAuthApp();
+ *
+ * await update({
+ *   name: "My Slack App",
+ *   org: "acme",
+ *   provider: "Slack",
+ *   clientId: "123456.789012",
+ *   authorizationUrl: "https://slack.com/oauth/v2/authorize",
+ *   tokenUrl: "https://slack.com/api/oauth.v2.access",
+ * });
+ * ```
+ */
+export declare function useUpdateOAuthApp(): UseUpdateOAuthAppReturn;
+//# sourceMappingURL=useUpdateOAuthApp.d.ts.map

package/oauth-app/useUpdateOAuthApp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUpdateOAuthApp.d.ts","sourceRoot":"","sources":["../../src/oauth-app/useUpdateOAuthApp.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mDAAmD,CAAC;AAIlF,iDAAiD;AACjD,MAAM,WAAW,uBAAuB;IACtC,2GAA2G;IAC3G,QAAQ,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC7D,oDAAoD;IACpD,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,iEAAiE;IACjE,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IAC7B,+BAA+B;IAC/B,QAAQ,CAAC,UAAU,EAAE,MAAM,IAAI,CAAC;CACjC;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,iBAAiB,IAAI,uBAAuB,CAyB3D"}

package/oauth-app/useUpdateOAuthApp.js

@@ -0,0 +1,49 @@
+"use client";
+import { useCallback, useState } from "react";
+import { useStigmer } from "../hooks";
+import { toError } from "../internal/toError";
+/**
+ * Mutation hook that wraps `oauthapp.update()` with loading and error
+ * state.
+ *
+ * Updates an existing OAuth app. The input must include the `name` and
+ * `org` fields to identify the target resource, along with the updated
+ * spec fields. Omit `clientSecret` to leave the existing secret
+ * unchanged.
+ *
+ * @example
+ * ```tsx
+ * const { update, isUpdating, error } = useUpdateOAuthApp();
+ *
+ * await update({
+ *   name: "My Slack App",
+ *   org: "acme",
+ *   provider: "Slack",
+ *   clientId: "123456.789012",
+ *   authorizationUrl: "https://slack.com/oauth/v2/authorize",
+ *   tokenUrl: "https://slack.com/api/oauth.v2.access",
+ * });
+ * ```
+ */
+export function useUpdateOAuthApp() {
+    const stigmer = useStigmer();
+    const [isUpdating, setIsUpdating] = useState(false);
+    const [error, setError] = useState(null);
+    const clearError = useCallback(() => setError(null), []);
+    const update = useCallback(async (input) => {
+        setIsUpdating(true);
+        setError(null);
+        try {
+            return await stigmer.oauthapp.update(input);
+        }
+        catch (err) {
+            setError(toError(err));
+            throw err;
+        }
+        finally {
+            setIsUpdating(false);
+        }
+    }, [stigmer]);
+    return { update, isUpdating, error, clearError };
+}
+//# sourceMappingURL=useUpdateOAuthApp.js.map

package/oauth-app/useUpdateOAuthApp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUpdateOAuthApp.js","sourceRoot":"","sources":["../../src/oauth-app/useUpdateOAuthApp.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG9C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAc9C;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,UAAU,iBAAiB;IAC/B,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAe,IAAI,CAAC,CAAC;IAEvD,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;IAEzD,MAAM,MAAM,GAAG,WAAW,CACxB,KAAK,EAAE,KAAoB,EAAqB,EAAE;QAChD,aAAa,CAAC,IAAI,CAAC,CAAC;QACpB,QAAQ,CAAC,IAAI,CAAC,CAAC;QAEf,IAAI,CAAC;YACH,OAAO,MAAM,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC9C,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;YACvB,MAAM,GAAG,CAAC;QACZ,CAAC;gBAAS,CAAC;YACT,aAAa,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC;IACH,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC;AACnD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stigmer/react",
-  "version": "0.0.84",
+  "version": "0.0.86",
   "description": "React provider and client hook for the Stigmer platform SDK",
   "license": "Apache-2.0",
   "type": "module",
@@ -35,7 +35,7 @@
     }
   },
   "dependencies": {
-    "@stigmer/theme": "0.0.84",
+    "@stigmer/theme": "0.0.86",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
     "yaml": "^2.8.2"
@@ -43,8 +43,8 @@
   "peerDependencies": {
     "@base-ui/react": "^1.0.0",
     "@bufbuild/protobuf": "^2.0.0",
-    "@stigmer/protos": "0.0.84",
-    "@stigmer/sdk": "0.0.84",
+    "@stigmer/protos": "0.0.86",
+    "@stigmer/sdk": "0.0.86",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   }

package/src/demo/fixtures.ts

@@ -238,6 +238,14 @@ export const fixtures = {
     /** Hooks: `useUpdateVisibility` (when kind is McpServer) */
     updateVisibility: (handler: UnaryFixtureHandler): FixtureSpec =>
       unarySpec(McpServerCommandController, "updateVisibility", handler),
+
+    /** Hooks: `useOAuthGrantStatus` */
+    getOAuthGrantStatus: (handler: UnaryFixtureHandler): FixtureSpec =>
+      unarySpec(McpServerQueryController, "getOAuthGrantStatus", handler),
+
+    /** Hooks: `useOrgOAuthApp` */
+    getOrgOAuthApp: (handler: UnaryFixtureHandler): FixtureSpec =>
+      unarySpec(McpServerQueryController, "getOrgOAuthApp", handler),
   },
 
   // ---- Environment ----

package/src/demo/samples.ts

@@ -154,6 +154,7 @@ export interface SearchResultOverrides {
   readonly slug?: string;
   readonly kind?: ApiResourceKind;
   readonly description?: string;
+  readonly iconUrl?: string;
 }
 
 // ---------------------------------------------------------------------------
@@ -465,6 +466,7 @@ export const samples = {
       org: o?.org ?? "demo",
       description: o?.description ?? "A sample resource for demo purposes.",
       score: 1.0,
+      iconUrl: o?.iconUrl ?? "",
     });
   },
 } as const;

package/src/execution/ArtifactPreviewModal.tsx

@@ -17,8 +17,12 @@ import {
 
 const COPIED_FEEDBACK_MS = 2000;
 
-/** Props for {@link ArtifactPreviewModal}. */
-export interface ArtifactPreviewModalProps {
+// ---------------------------------------------------------------------------
+// ArtifactPreviewContent — standalone content component
+// ---------------------------------------------------------------------------
+
+/** Props for {@link ArtifactPreviewContent}. */
+export interface ArtifactPreviewContentProps {
   /** The execution artifact to preview. */
   readonly artifact: ExecutionArtifact;
   /** ID of the execution that produced this artifact. */
@@ -33,9 +37,7 @@ export interface ArtifactPreviewModalProps {
    * - `false` — CTA renders as a disabled secondary button
    */
   readonly isTerminal: boolean;
-  /** Controls modal visibility. `true` opens the dialog via `showModal()`. */
-  readonly open: boolean;
-  /** Called when the modal should close (Escape key or close button). */
+  /** Called when the close button is clicked. */
   readonly onClose: () => void;
   /**
    * Called after a resource is successfully applied or a skill package
@@ -43,19 +45,20 @@ export interface ArtifactPreviewModalProps {
    * as showing a toast or navigating to the Library.
    */
   readonly onApplied?: (result: ApplyResourceResult) => void;
-  /** Additional CSS classes for the dialog element. */
+  /** Additional CSS classes for the root container. */
   readonly className?: string;
 }
 
 /**
- * Full preview modal for execution artifacts with content display,
- * Stigmer resource detection, and Apply/Push CTA.
+ * Artifact preview content with detection pipeline and Apply/Push CTA.
  *
- * Uses the native `<dialog>` element for zero-dependency modal behavior:
- * focus trap via `showModal()`, top-layer promotion, Escape key handling,
- * and `::backdrop` overlay — with no dependency on `@base-ui/react`.
+ * Renders the header (name, size, detection badge, close button),
+ * content body (file content or directory listing), and action bar
+ * (copy, download, Apply/Push). The parent is responsible for rendering
+ * it inside a `<dialog>`, modal, sheet, overlay, or inline context as
+ * needed.
  *
- * Internally orchestrates the same detection pipeline as {@link ArtifactCard}:
+ * Orchestrates the same detection pipeline as {@link ArtifactCard}:
  *
  * - **FILE artifacts**: Fetches text content via {@link useArtifactContent},
  *   renders via {@link ArtifactContentRenderer} (markdown, YAML, JSON, or
@@ -66,75 +69,47 @@ export interface ArtifactPreviewModalProps {
  *   `artifact.entries` and detects skill packages via
  *   {@link useDetectSkillPackage}.
  *
- * Actions: Copy content to clipboard (file artifacts only), Download
- * artifact, and Apply/Push (when a Stigmer resource is detected).
+ * Content fetching begins immediately on mount. Unmounting the component
+ * resets all internal state (detection, apply result, clipboard). For
+ * gated rendering (e.g. only when a dialog is open), conditionally
+ * mount this component rather than passing an `active` flag.
  *
  * @example
  * ```tsx
- * const [previewArtifact, setPreviewArtifact] =
- *   useState<ExecutionArtifact | null>(null);
- *
- * {previewArtifact && (
- *   <ArtifactPreviewModal
- *     artifact={previewArtifact}
- *     executionId={execution.id}
- *     org={activeOrg}
- *     isTerminal={isTerminalPhase(execution.status?.phase)}
- *     open
- *     onClose={() => setPreviewArtifact(null)}
- *     onApplied={(result) => toast(`${result.kind} applied`)}
- *   />
- * )}
+ * // Inside a dialog, modal, or overlay:
+ * <ArtifactPreviewContent
+ *   artifact={artifact}
+ *   executionId={execution.id}
+ *   org={activeOrg}
+ *   isTerminal={isTerminalPhase(execution.status?.phase)}
+ *   onClose={() => setOpen(false)}
+ *   onApplied={(result) => toast(`${result.kind} applied`)}
+ * />
  * ```
  *
+ * @see {@link ArtifactPreviewModal} — wraps this component in a native `<dialog>`
  * @see {@link ArtifactCard} — compact card that triggers preview via `onPreview`
  * @see {@link useArtifactContent} — content-fetching hook (headless alternative)
  * @see {@link useDetectStigmerResource} — YAML resource detection (headless)
  * @see {@link useDetectSkillPackage} — skill package detection (headless)
  * @see {@link useApplyResource} — apply/push behavior hook (headless)
  */
-export function ArtifactPreviewModal({
+export function ArtifactPreviewContent({
   artifact,
   executionId,
   org,
   isTerminal,
-  open,
   onClose,
   onApplied,
   className,
-}: ArtifactPreviewModalProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
-
-  // ---------------------------------------------------------------------------
-  // Native <dialog> lifecycle
-  // ---------------------------------------------------------------------------
-
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-
-    if (open && !dialog.open) {
-      dialog.showModal();
-    } else if (!open && dialog.open) {
-      dialog.close();
-    }
-  }, [open]);
-
-  const handleCancel = useCallback(
-    (e: React.SyntheticEvent) => {
-      e.preventDefault();
-      onClose();
-    },
-    [onClose],
-  );
+}: ArtifactPreviewContentProps) {
+  const isDirectory = artifact.kind === ExecutionArtifactKind.DIRECTORY;
+  const canFetchContent = !isDirectory && isTextArtifact(artifact);
 
   // ---------------------------------------------------------------------------
-  // Detection orchestration (gated on `open` to skip fetching when hidden)
+  // Detection orchestration
   // ---------------------------------------------------------------------------
 
-  const isDirectory = artifact.kind === ExecutionArtifactKind.DIRECTORY;
-  const canFetchContent = open && !isDirectory && isTextArtifact(artifact);
-
   const {
     content,
     contentType,
@@ -154,8 +129,8 @@ export function ArtifactPreviewModal({
 
   const { detection: skillDetection, isLoading: isSkillLoading } =
     useDetectSkillPackage(
-      isDirectory && open ? artifact : null,
-      isDirectory && open ? executionId : null,
+      isDirectory ? artifact : null,
+      isDirectory ? executionId : null,
     );
 
   // ---------------------------------------------------------------------------
@@ -223,13 +198,6 @@ export function ArtifactPreviewModal({
     onApplied,
   ]);
 
-  useEffect(() => {
-    if (!open) {
-      setApplyResult(null);
-      clearError();
-    }
-  }, [open, clearError]);
-
   // ---------------------------------------------------------------------------
   // Copy to clipboard
   // ---------------------------------------------------------------------------
@@ -244,10 +212,6 @@ export function ArtifactPreviewModal({
     });
   }, [content]);
 
-  useEffect(() => {
-    if (!open) setCopied(false);
-  }, [open]);
-
   let ctaLabel: string | null = null;
   if (yamlDetection.detected) {
     ctaLabel = `Apply to ${org}`;
@@ -259,6 +223,159 @@ export function ArtifactPreviewModal({
   // Render
   // ---------------------------------------------------------------------------
 
+  return (
+    <div className={cn("flex max-h-[80vh] flex-col", className)}>
+      <ContentHeader
+        artifact={artifact}
+        isDirectory={isDirectory}
+        detectionLabel={detectionLabel}
+        isDetecting={isDetecting}
+        onClose={onClose}
+      />
+
+      <div className="min-h-0 flex-1 overflow-y-auto border-t border-border">
+        {isDirectory ? (
+          <DirectoryContentView
+            artifact={artifact}
+            skillDetection={skillDetection}
+          />
+        ) : (
+          <FileContentStateView
+            artifact={artifact}
+            content={content}
+            contentType={contentType}
+            isLoading={isContentLoading}
+            error={contentError}
+            isTruncated={isTruncated}
+          />
+        )}
+      </div>
+
+      <ActionBar
+        artifact={artifact}
+        isDirectory={isDirectory}
+        hasContent={content !== null}
+        copied={copied}
+        onCopy={handleCopy}
+        isDetected={isDetected}
+        ctaLabel={ctaLabel}
+        isTerminal={isTerminal}
+        isApplying={isApplying}
+        applyResult={applyResult}
+        applyError={applyError}
+        onApply={handleApply}
+      />
+
+      <div
+        role="status"
+        aria-live="polite"
+        aria-atomic="true"
+        className="sr-only"
+      >
+        {copied && "Content copied to clipboard"}
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ArtifactPreviewModal — thin <dialog> shell
+// ---------------------------------------------------------------------------
+
+/** Props for {@link ArtifactPreviewModal}. */
+export interface ArtifactPreviewModalProps {
+  /** The execution artifact to preview. */
+  readonly artifact: ExecutionArtifact;
+  /** ID of the execution that produced this artifact. */
+  readonly executionId: string;
+  /** Organization slug for the "Apply to [org]" / "Push Skill to [org]" CTA. */
+  readonly org: string;
+  /**
+   * Whether the execution is in a terminal phase (completed, failed,
+   * cancelled, terminated). Controls Apply/Push CTA availability:
+   *
+   * - `true` — CTA renders as an enabled primary button
+   * - `false` — CTA renders as a disabled secondary button
+   */
+  readonly isTerminal: boolean;
+  /** Controls modal visibility. `true` opens the dialog via `showModal()`. */
+  readonly open: boolean;
+  /** Called when the modal should close (Escape key or close button). */
+  readonly onClose: () => void;
+  /**
+   * Called after a resource is successfully applied or a skill package
+   * is pushed. The consumer can use this for post-apply behavior such
+   * as showing a toast or navigating to the Library.
+   */
+  readonly onApplied?: (result: ApplyResourceResult) => void;
+  /** Additional CSS classes for the dialog element. */
+  readonly className?: string;
+}
+
+/**
+ * Full preview modal for execution artifacts using a native `<dialog>`.
+ *
+ * Thin shell around {@link ArtifactPreviewContent} that adds
+ * `showModal()` / `close()` lifecycle, `::backdrop` overlay, focus
+ * trap, and Escape key handling — with no dependency on
+ * `@base-ui/react`.
+ *
+ * The content component is conditionally mounted when `open` is true,
+ * so all internal state (detection, apply result, clipboard) resets
+ * automatically when the dialog closes.
+ *
+ * @example
+ * ```tsx
+ * const [previewArtifact, setPreviewArtifact] =
+ *   useState<ExecutionArtifact | null>(null);
+ *
+ * {previewArtifact && (
+ *   <ArtifactPreviewModal
+ *     artifact={previewArtifact}
+ *     executionId={execution.id}
+ *     org={activeOrg}
+ *     isTerminal={isTerminalPhase(execution.status?.phase)}
+ *     open
+ *     onClose={() => setPreviewArtifact(null)}
+ *     onApplied={(result) => toast(`${result.kind} applied`)}
+ *   />
+ * )}
+ * ```
+ *
+ * @see {@link ArtifactPreviewContent} — the content component (use directly for non-dialog contexts)
+ * @see {@link ArtifactCard} — compact card that triggers preview via `onPreview`
+ */
+export function ArtifactPreviewModal({
+  artifact,
+  executionId,
+  org,
+  isTerminal,
+  open,
+  onClose,
+  onApplied,
+  className,
+}: ArtifactPreviewModalProps) {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+
+    if (open && !dialog.open) {
+      dialog.showModal();
+    } else if (!open && dialog.open) {
+      dialog.close();
+    }
+  }, [open]);
+
+  const handleCancel = useCallback(
+    (e: React.SyntheticEvent) => {
+      e.preventDefault();
+      onClose();
+    },
+    [onClose],
+  );
+
   return (
     <dialog
       ref={dialogRef}
@@ -270,57 +387,16 @@ export function ArtifactPreviewModal({
         className,
       )}
     >
-      <div className="flex max-h-[80vh] flex-col">
-        <ModalHeader
-          artifact={artifact}
-          isDirectory={isDirectory}
-          detectionLabel={detectionLabel}
-          isDetecting={isDetecting}
-          onClose={onClose}
-        />
-
-        <div className="min-h-0 flex-1 overflow-y-auto border-t border-border">
-          {isDirectory ? (
-            <DirectoryContentView
-              artifact={artifact}
-              skillDetection={skillDetection}
-            />
-          ) : (
-            <FileContentStateView
-              artifact={artifact}
-              content={content}
-              contentType={contentType}
-              isLoading={isContentLoading}
-              error={contentError}
-              isTruncated={isTruncated}
-            />
-          )}
-        </div>
-
-        <ActionBar
+      {open && (
+        <ArtifactPreviewContent
           artifact={artifact}
-          isDirectory={isDirectory}
-          hasContent={content !== null}
-          copied={copied}
-          onCopy={handleCopy}
-          isDetected={isDetected}
-          ctaLabel={ctaLabel}
+          executionId={executionId}
+          org={org}
           isTerminal={isTerminal}
-          isApplying={isApplying}
-          applyResult={applyResult}
-          applyError={applyError}
-          onApply={handleApply}
+          onClose={onClose}
+          onApplied={onApplied}
         />
-
-        <div
-          role="status"
-          aria-live="polite"
-          aria-atomic="true"
-          className="sr-only"
-        >
-          {copied && "Content copied to clipboard"}
-        </div>
-      </div>
+      )}
     </dialog>
   );
 }
@@ -333,10 +409,10 @@ const FOCUS_RING_CLASSES =
   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-sm";
 
 // ---------------------------------------------------------------------------
-// ModalHeader (internal)
+// ContentHeader (internal)
 // ---------------------------------------------------------------------------
 
-function ModalHeader({
+function ContentHeader({
   artifact,
   isDirectory,
   detectionLabel,
@@ -603,12 +679,14 @@ function ActionBar({
             </button>
           </span>
         ) : isDetected && ctaLabel ? (
-          <ApplyButton
-            label={ctaLabel}
-            isTerminal={isTerminal}
-            isApplying={isApplying}
-            onApply={onApply}
-          />
+          <span data-cursor-target="apply-resource-button">
+            <ApplyButton
+              label={ctaLabel}
+              isTerminal={isTerminal}
+              isApplying={isApplying}
+              onApply={onApply}
+            />
+          </span>
         ) : null}
       </div>
     </div>