@stigmer/react 3.12.2 → 3.12.4

package/src/index.ts

@@ -196,6 +196,7 @@ export type {
   UseSessionFileChangesReturn,
   ModelCostEntry,
   UseSessionUsageReturn,
+  ExecutionUsageEntry,
   UseAgentRefFromSessionReturn,
   UseNewSessionFlowOptions,
   UseNewSessionFlowReturn,
@@ -296,6 +297,9 @@ export {
   toolKindToCategoryInfo,
   defaultDisclosureForCategory,
   extractPrimaryArg,
+  extractShellIntent,
+  extractShellIntentFromPreview,
+  SHELL_INTENT_ARG_FIELD,
   McpToolDetail,
   parseMcpResult,
   formatDuration,
@@ -1039,6 +1043,18 @@ export type {
   CursorAccountEditorProps,
 } from "./cursor-accounts/index.js";
 
+// Provider standing — read-only platform-operator view of the platform's
+// LLM provider account health (canary-probe verdicts, cloud#447)
+export {
+  useProviderStanding,
+  ProviderStandingConsole,
+  ProviderStandingAccessNotice,
+} from "./provider-standing/index.js";
+export type {
+  UseProviderStandingReturn,
+  ProviderStandingConsoleProps,
+} from "./provider-standing/index.js";
+
 // Settings — navigation structure + section components shared across app shells
 export {
   SETTINGS_NAV_GROUPS,

package/src/internal/DialogShell.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+import { useCallback, useEffect, useRef } from "react";
+import type { MouseEvent, ReactNode, SyntheticEvent } from "react";
+import { cn } from "@stigmer/theme";
+
+/**
+ * Width presets for {@link DialogShell}, mapping to Tailwind `max-w-*`
+ * utilities. Free-form sizes (e.g. a lightbox's `85vw`) ride `className`,
+ * which wins over the preset via `cn()`'s tailwind-merge.
+ */
+export type DialogShellWidth = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
+
+const WIDTH_CLASS: Record<DialogShellWidth, string> = {
+  sm: "stg:max-w-sm",
+  md: "stg:max-w-md",
+  lg: "stg:max-w-lg",
+  xl: "stg:max-w-xl",
+  "2xl": "stg:max-w-2xl",
+  "3xl": "stg:max-w-3xl",
+  "4xl": "stg:max-w-4xl",
+};
+
+/** Props for {@link DialogShell}. */
+export interface DialogShellProps {
+  /** Whether the dialog is open (controlled — the SDK dialog convention). */
+  readonly open: boolean;
+  /**
+   * Called with `false` when the dialog should close: Escape / the platform
+   * cancel gesture, or a native close the host did not drive (e.g. a
+   * `method="dialog"` form submit). The shell never closes itself — state
+   * stays authoritative, so a host that ignores the callback keeps the
+   * dialog open (matching the pre-extraction per-dialog behavior).
+   */
+  readonly onOpenChange: (open: boolean) => void;
+  /** Max-width preset (default `"md"`). See {@link DialogShellWidth}. */
+  readonly width?: DialogShellWidth;
+  /**
+   * Modal (default) renders in the top layer via `showModal()` — focus trap,
+   * Escape, and the token backdrop. `modal={false}` renders the dialog
+   * in-flow (`open` attribute, relative positioning, no backdrop, no focus
+   * trap) — the channel-dialog embedding mode.
+   */
+  readonly modal?: boolean;
+  /**
+   * Light dismiss: a click on the backdrop (the dialog element itself —
+   * clicks inside the content land on descendants) reports close intent.
+   * The house rule from the pre-extraction census: read-only viewers
+   * (diff/YAML/explain/lightbox/pickers) dismiss on backdrop, form dialogs
+   * do NOT — a stray click must never discard a half-filled form. Default
+   * `false`.
+   */
+  readonly dismissOnBackdrop?: boolean;
+  /**
+   * Merged after the shell's own chrome, so deliberate outliers (a
+   * lightbox's viewport sizing, a fullscreen graph's `h-[90vh]`, a
+   * `bg-background` surface) override the defaults per class.
+   */
+  readonly className?: string;
+  /** Dialog content. Lazy-mounting bodies (`{open && …}`) stay caller-owned. */
+  readonly children: ReactNode;
+  /** Accessible name, when no visible heading labels the dialog. */
+  readonly "aria-label"?: string;
+  /** Id of the visible heading that labels the dialog. */
+  readonly "aria-labelledby"?: string;
+}
+
+/**
+ * The one dialog shell (stigmer#653). Owns everything every modal dialog in
+ * the SDK used to re-transcribe by hand: the `<dialog>` element and its
+ * `showModal()`/`close()` lifecycle, cancel/Escape wiring, the token
+ * backdrop (`--stgm-backdrop`), the open animation, and the base
+ * positioning/chrome — parameterized by {@link DialogShellWidth}.
+ *
+ * Converged chrome: `rounded-xl` + `shadow-xl` on the `popover` token
+ * surface (the token family for top-layer content). Before the extraction
+ * the 24 hand-rolled shells had drifted across `rounded-lg/xl`,
+ * `shadow-lg/xl/2xl`, three background tokens, two hardcoded backdrops that
+ * escaped the #652 fence, and animation classes present on some dialogs and
+ * missing from others.
+ *
+ * Internal on purpose — not exported from the package until a host needs it.
+ * The `stigmer/no-handrolled-dialog` lint rule fences new `<dialog>`
+ * elements onto this shell.
+ *
+ * @example
+ * ```tsx
+ * <DialogShell open={open} onOpenChange={setOpen} width="lg" aria-labelledby={titleId}>
+ *   {open && <MyDialogBody titleId={titleId} onClose={() => setOpen(false)} />}
+ * </DialogShell>
+ * ```
+ */
+export function DialogShell({
+  open,
+  onOpenChange,
+  width = "md",
+  modal = true,
+  dismissOnBackdrop = false,
+  className,
+  children,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+}: DialogShellProps) {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
+  // Sync the native top-layer state to the controlled prop. Runs on mount
+  // too, so a shell mounted with `open` already true shows immediately.
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog || !modal) return;
+    if (open && !dialog.open) {
+      dialog.showModal();
+    } else if (!open && dialog.open) {
+      dialog.close();
+    }
+  }, [open, modal]);
+
+  // Escape / platform cancel: keep the native dialog open (preventDefault)
+  // and report the intent — the controlled `open` prop then drives the
+  // actual close through the effect above.
+  const handleCancel = useCallback(
+    (e: SyntheticEvent<HTMLDialogElement>) => {
+      e.preventDefault();
+      onOpenChange(false);
+    },
+    [onOpenChange],
+  );
+
+  // A native close the effect did not perform (e.g. a `method="dialog"`
+  // form submit) must not leave the controlled state stranded open.
+  const handleClose = useCallback(() => {
+    if (open) onOpenChange(false);
+  }, [open, onOpenChange]);
+
+  // Backdrop clicks hit the <dialog> element itself; clicks anywhere in the
+  // content land on a descendant, so the target check is exact.
+  const handleClick = useCallback(
+    (e: MouseEvent<HTMLDialogElement>) => {
+      if (e.target === e.currentTarget) onOpenChange(false);
+    },
+    [onOpenChange],
+  );
+
+  return (
+    <dialog
+      ref={dialogRef}
+      open={modal ? undefined : open || undefined}
+      onCancel={modal ? handleCancel : undefined}
+      onClose={modal ? handleClose : undefined}
+      onClick={modal && dismissOnBackdrop ? handleClick : undefined}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledby}
+      className={cn(
+        "stg:w-full stg:rounded-xl stg:border stg:border-border stg:bg-popover stg:p-0 stg:text-popover-foreground stg:shadow-xl",
+        modal
+          ? cn(
+              "stg:fixed stg:inset-0 stg:z-50 stg:m-auto",
+              "stg:backdrop:bg-backdrop",
+              "stg:open:animate-in stg:open:fade-in-0 stg:open:zoom-in-95",
+            )
+          : "stg:relative",
+        WIDTH_CLASS[width],
+        className,
+      )}
+    >
+      {children}
+    </dialog>
+  );
+}

package/src/internal/__tests__/DialogShell.test.tsx

@@ -0,0 +1,223 @@
+/**
+ * DialogShell (stigmer#653): the one modal shell — showModal lifecycle,
+ * cancel/Escape wiring with state authority, native-close sync, the token
+ * backdrop + converged chrome, and the non-modal in-flow mode.
+ */
+
+import { describe, it, expect, vi, beforeAll, afterEach } from "vitest";
+import { render, cleanup, fireEvent } from "@testing-library/react";
+import { DialogShell } from "../DialogShell";
+
+// happy-dom does not implement the native dialog show/close methods.
+beforeAll(() => {
+  HTMLDialogElement.prototype.showModal = function showModal() {
+    this.open = true;
+  };
+  HTMLDialogElement.prototype.close = function close() {
+    this.open = false;
+  };
+});
+
+afterEach(cleanup);
+
+function dialogOf(container: HTMLElement): HTMLDialogElement {
+  return container.querySelector("dialog")!;
+}
+
+describe("DialogShell lifecycle", () => {
+  it("opens via showModal when the controlled prop flips true", () => {
+    const { container, rerender } = render(
+      <DialogShell open={false} onOpenChange={() => {}}>
+        <p>body</p>
+      </DialogShell>,
+    );
+    expect(dialogOf(container).open).toBe(false);
+
+    rerender(
+      <DialogShell open onOpenChange={() => {}}>
+        <p>body</p>
+      </DialogShell>,
+    );
+    expect(dialogOf(container).open).toBe(true);
+  });
+
+  it("shows immediately when mounted already open", () => {
+    const { container } = render(
+      <DialogShell open onOpenChange={() => {}}>
+        <p>body</p>
+      </DialogShell>,
+    );
+    expect(dialogOf(container).open).toBe(true);
+  });
+
+  it("closes the native dialog when the controlled prop flips false", () => {
+    const { container, rerender } = render(
+      <DialogShell open onOpenChange={() => {}}>
+        <p>body</p>
+      </DialogShell>,
+    );
+    rerender(
+      <DialogShell open={false} onOpenChange={() => {}}>
+        <p>body</p>
+      </DialogShell>,
+    );
+    expect(dialogOf(container).open).toBe(false);
+  });
+
+  it("Escape/cancel reports intent but never closes on its own — state stays authoritative", () => {
+    const onOpenChange = vi.fn();
+    const { container } = render(
+      <DialogShell open onOpenChange={onOpenChange}>
+        <p>body</p>
+      </DialogShell>,
+    );
+
+    fireEvent(dialogOf(container), new Event("cancel", { cancelable: true }));
+
+    expect(onOpenChange).toHaveBeenCalledExactlyOnceWith(false);
+    // The shell prevented the native close; the dialog stays open until the
+    // host flips the prop.
+    expect(dialogOf(container).open).toBe(true);
+  });
+
+  it("syncs the controlled state when something else closes the dialog natively", () => {
+    const onOpenChange = vi.fn();
+    const { container } = render(
+      <DialogShell open onOpenChange={onOpenChange}>
+        <p>body</p>
+      </DialogShell>,
+    );
+
+    // e.g. a method="dialog" form submit closes without going through props.
+    const dialog = dialogOf(container);
+    dialog.close();
+    fireEvent(dialog, new Event("close"));
+
+    expect(onOpenChange).toHaveBeenCalledExactlyOnceWith(false);
+  });
+
+  it("does not re-report a close the host itself drove", () => {
+    const onOpenChange = vi.fn();
+    const { container, rerender } = render(
+      <DialogShell open onOpenChange={onOpenChange}>
+        <p>body</p>
+      </DialogShell>,
+    );
+    rerender(
+      <DialogShell open={false} onOpenChange={onOpenChange}>
+        <p>body</p>
+      </DialogShell>,
+    );
+    // The effect's own dialog.close() fires a native close event in real
+    // browsers — replay it against the now-false prop.
+    fireEvent(dialogOf(container), new Event("close"));
+    expect(onOpenChange).not.toHaveBeenCalled();
+  });
+});
+
+describe("DialogShell chrome", () => {
+  it("carries the token backdrop, animation, positioning, and width preset", () => {
+    const { container } = render(
+      <DialogShell open onOpenChange={() => {}} width="3xl">
+        <p>body</p>
+      </DialogShell>,
+    );
+    const cls = dialogOf(container).className;
+
+    expect(cls).toContain("stg:backdrop:bg-backdrop");
+    expect(cls).toContain("stg:open:animate-in");
+    expect(cls).toContain("stg:fixed");
+    expect(cls).toContain("stg:m-auto");
+    expect(cls).toContain("stg:max-w-3xl");
+    expect(cls).toContain("stg:bg-popover");
+  });
+
+  it("className overrides the shell's own chrome per class (tailwind-merge)", () => {
+    const { container } = render(
+      <DialogShell
+        open
+        onOpenChange={() => {}}
+        className="stg:bg-background stg:max-w-[85vw]"
+      >
+        <p>body</p>
+      </DialogShell>,
+    );
+    const cls = dialogOf(container).className;
+
+    expect(cls).toContain("stg:bg-background");
+    expect(cls).not.toContain("stg:bg-popover");
+    expect(cls).toContain("stg:max-w-[85vw]");
+    expect(cls).not.toContain("stg:max-w-md");
+  });
+
+  it("labels the dialog for assistive tech", () => {
+    const { container } = render(
+      <DialogShell open onOpenChange={() => {}} aria-label="Confirm delete">
+        <p>body</p>
+      </DialogShell>,
+    );
+    expect(dialogOf(container).getAttribute("aria-label")).toBe("Confirm delete");
+  });
+});
+
+describe("DialogShell backdrop dismiss", () => {
+  it("dismissOnBackdrop: a click on the dialog element itself reports close intent", () => {
+    const onOpenChange = vi.fn();
+    const { container } = render(
+      <DialogShell open onOpenChange={onOpenChange} dismissOnBackdrop>
+        <p>body</p>
+      </DialogShell>,
+    );
+
+    fireEvent.click(dialogOf(container));
+    expect(onOpenChange).toHaveBeenCalledExactlyOnceWith(false);
+  });
+
+  it("dismissOnBackdrop: clicks on content descendants never dismiss", () => {
+    const onOpenChange = vi.fn();
+    const { container, getByText } = render(
+      <DialogShell open onOpenChange={onOpenChange} dismissOnBackdrop>
+        <p>body</p>
+      </DialogShell>,
+    );
+
+    fireEvent.click(getByText("body"));
+    expect(onOpenChange).not.toHaveBeenCalled();
+    expect(dialogOf(container).open).toBe(true);
+  });
+
+  it("default: backdrop clicks are inert (form dialogs)", () => {
+    const onOpenChange = vi.fn();
+    const { container } = render(
+      <DialogShell open onOpenChange={onOpenChange}>
+        <p>body</p>
+      </DialogShell>,
+    );
+
+    fireEvent.click(dialogOf(container));
+    expect(onOpenChange).not.toHaveBeenCalled();
+  });
+});
+
+describe("DialogShell non-modal mode", () => {
+  it("renders in-flow: open attribute, no backdrop, no fixed positioning", () => {
+    const { container, rerender } = render(
+      <DialogShell open modal={false} onOpenChange={() => {}}>
+        <p>body</p>
+      </DialogShell>,
+    );
+    const dialog = dialogOf(container);
+
+    expect(dialog.open).toBe(true);
+    expect(dialog.className).toContain("stg:relative");
+    expect(dialog.className).not.toContain("stg:backdrop:bg-backdrop");
+    expect(dialog.className).not.toContain("stg:fixed");
+
+    rerender(
+      <DialogShell open={false} modal={false} onOpenChange={() => {}}>
+        <p>body</p>
+      </DialogShell>,
+    );
+    expect(dialogOf(container).open).toBe(false);
+  });
+});

package/src/internal/element-resets.ts

@@ -0,0 +1,33 @@
+// ---------------------------------------------------------------------------
+// Per-element UA-default resets for preflight-less hosts (#695).
+// Internal — never exported from the package barrel.
+//
+// Why these are per-component classes and NOT stylesheet rules: the #374
+// scoped form-control preflight in `styles.css` could reset every button
+// under `.stgm` because UA control chrome is never wanted. Lists are
+// different — "UI list" vs "content list" is a semantic distinction CSS
+// scoping cannot express. The documented quickstart wraps the host's whole
+// app in `StigmerProvider`, so a `.stgm ul { list-style: none }` rule would
+// strip the bullets off the HOST's own content. Every SDK-rendered UI list
+// therefore declares its own reset (enforced by the `stigmer/require-list-reset`
+// lint rule); markdown-rendered content lists instead declare their bullets
+// explicitly (`stg:list-disc stg:pl-5 ...` in markdown-components.tsx).
+// ---------------------------------------------------------------------------
+
+/**
+ * UA-default reset for a UI `<ul>`/`<ol>` (no bullets, no indent, no
+ * margins). Without it, a host that ships no global CSS reset renders list
+ * markers and ~40px of `padding-inline-start` on every SDK list — invisible
+ * on first-party surfaces (console, desktop, docs tours all ship global
+ * resets), broken in exactly the third-party embeds the SDK exists for.
+ * Spacing utilities (`stg:space-y-*`, `stg:p-*`) compose on top.
+ */
+export const UNSTYLED_LIST = "stg:m-0 stg:list-none stg:p-0";
+
+/**
+ * UA-default reset for `<fieldset>` (margin-inline, padding, and
+ * `min-inline-size: min-content` — the last one silently breaks flex/grid
+ * shrinking). The UA border is already cleared by the `.stgm *` border reset
+ * in `styles.css`, so it is not repeated here.
+ */
+export const UNSTYLED_FIELDSET = "stg:m-0 stg:min-w-0 stg:p-0";

package/src/internal/file-tree/FileTreeNode.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback, useState, type DragEvent } from "react";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_LIST } from "../element-resets.js";
 import { FileTypeIcon, FolderTypeIcon } from "../file-icons/index.js";
 import type { TreeNode } from "./tree-node.js";
 
@@ -151,7 +152,7 @@ export function FileTreeNode({
       {isFolder && expanded && node.children && (
         <ul
           role="group"
-          className={cn(indentGuides && "stg:ml-3 stg:border-l stg:border-border")}
+          className={cn(UNSTYLED_LIST, indentGuides && "stg:ml-3 stg:border-l stg:border-border")}
         >
           {node.children.map((child) => (
             <FileTreeNode

package/src/internal/markdown-components.tsx

@@ -152,12 +152,19 @@ function extractMermaidSource(children: ReactNode): string | null {
  * ensuring correct rendering in both the Stigmer Console and third-party
  * host applications with custom themes.
  *
+ * Margin-bearing elements (`p`, `ul`, `ol`, `pre`, `blockquote`) declare
+ * their top margin (`stg:mt-0`) and blockquote its inline margins
+ * explicitly: the spacing rhythm here is authored via `mb-*` on the
+ * assumption that UA base margins are zero, which is only true when the
+ * host ships a global reset — preflight-less embeds otherwise stack
+ * `margin-top: 1em` (and 40px blockquote indents) on top (#695).
+ *
  * Used by `MessageEntry` (chat messages) and `SkillDetailView` (SKILL.md).
  */
 export const MARKDOWN_COMPONENTS: Components = {
   p({ children, ...props }: MdProps<"p">) {
     return (
-      <p className="stg:text-sm stg:text-foreground stg:mb-3 stg:last:mb-0 stg:leading-relaxed stg:break-words" {...props}>
+      <p className="stg:text-sm stg:text-foreground stg:mt-0 stg:mb-3 stg:last:mb-0 stg:leading-relaxed stg:break-words" {...props}>
         {children}
       </p>
     );
@@ -211,7 +218,7 @@ export const MARKDOWN_COMPONENTS: Components = {
 
   ul({ children, ...props }: MdProps<"ul">) {
     return (
-      <ul className="stg:list-disc stg:pl-5 stg:mb-3 stg:last:mb-0 stg:space-y-1 stg:text-sm stg:text-foreground" {...props}>
+      <ul className="stg:list-disc stg:pl-5 stg:mt-0 stg:mb-3 stg:last:mb-0 stg:space-y-1 stg:text-sm stg:text-foreground" {...props}>
         {children}
       </ul>
     );
@@ -219,7 +226,7 @@ export const MARKDOWN_COMPONENTS: Components = {
 
   ol({ children, ...props }: MdProps<"ol">) {
     return (
-      <ol className="stg:list-decimal stg:pl-5 stg:mb-3 stg:last:mb-0 stg:space-y-1 stg:text-sm stg:text-foreground" {...props}>
+      <ol className="stg:list-decimal stg:pl-5 stg:mt-0 stg:mb-3 stg:last:mb-0 stg:space-y-1 stg:text-sm stg:text-foreground" {...props}>
         {children}
       </ol>
     );
@@ -245,7 +252,7 @@ export const MARKDOWN_COMPONENTS: Components = {
 
     return (
       <pre
-        className="stg:mb-3 stg:last:mb-0 stg:overflow-x-auto stg:rounded-md stg:bg-muted stg:p-3"
+        className="stg:mt-0 stg:mb-3 stg:last:mb-0 stg:overflow-x-auto stg:rounded-md stg:bg-muted stg:p-3"
         {...props}
       >
         {children}
@@ -293,9 +300,12 @@ export const MARKDOWN_COMPONENTS: Components = {
   },
 
   blockquote({ children, ...props }: MdProps<"blockquote">) {
+    // mx-0 matters as much as mt-0 here: UA blockquote margin is `1em 40px`,
+    // so a preflight-less host renders a double indent on BOTH sides on top
+    // of the border-l + pl-4 treatment.
     return (
       <blockquote
-        className="stg:border-l-2 stg:border-border stg:pl-4 stg:mb-3 stg:last:mb-0 stg:text-muted-foreground stg:italic"
+        className="stg:border-l-2 stg:border-border stg:mx-0 stg:mt-0 stg:mb-3 stg:pl-4 stg:last:mb-0 stg:text-muted-foreground stg:italic"
         {...props}
       >
         {children}

package/src/invitation/InvitationManager.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback, useId, useState, type FormEvent } from "react";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_FIELDSET } from "../internal/element-resets.js";
 import {
   getUserMessage,
   iamRoleDisplayName,
@@ -302,7 +303,7 @@ function CreateInvitationForm({
       />
 
       {/* Expiry */}
-      <fieldset className="stg:space-y-1.5">
+      <fieldset className={cn(UNSTYLED_FIELDSET, "stg:space-y-1.5")}>
         <legend className="stg:text-xs stg:font-medium stg:text-foreground">
           Expires in
         </legend>
@@ -324,7 +325,7 @@ function CreateInvitationForm({
       </fieldset>
 
       {/* Redemption mode */}
-      <fieldset className="stg:space-y-1.5">
+      <fieldset className={cn(UNSTYLED_FIELDSET, "stg:space-y-1.5")}>
         <legend className="stg:text-xs stg:font-medium stg:text-foreground">
           Usage limit
         </legend>

package/src/manifest/ApplyManifestDialog.tsx

@@ -2,6 +2,8 @@
 
 import { lazy, Suspense, useCallback, useEffect, useRef } from "react";
 import { cn } from "@stigmer/theme";
+import { DialogShell } from "../internal/DialogShell.js";
+import { UNSTYLED_LIST } from "../internal/element-resets.js";
 import { toast } from "../feedback/toast.js";
 import { RedactedSecretsNotice } from "./RedactedSecretsNotice.js";
 import {
@@ -71,22 +73,10 @@ export function ApplyManifestDialog({
   org,
   onApplied,
 }: ApplyManifestDialogProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const manifest = useApplyManifest(org);
   const { reset } = manifest;
 
-  // Sync dialog open state with the native <dialog> element.
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    if (open && !dialog.open) {
-      dialog.showModal();
-    } else if (!open && dialog.open) {
-      dialog.close();
-    }
-  }, [open]);
-
   // Start each session clean.
   useEffect(() => {
     if (open) {
@@ -109,10 +99,11 @@ export function ApplyManifestDialog({
     if (applied.length > 0) onApplied?.(applied);
   }, [onOpenChange, manifest.entries, onApplied]);
 
-  const handleCancel = useCallback(
-    (e: React.SyntheticEvent) => {
-      e.preventDefault();
-      closeAndMaybeRefresh();
+  // Escape/cancel routes through the same dismiss-after-partial path as the
+  // Close button, via the shell's single close-intent callback.
+  const handleShellOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (!nextOpen) closeAndMaybeRefresh();
     },
     [closeAndMaybeRefresh],
   );
@@ -151,15 +142,7 @@ export function ApplyManifestDialog({
     !manifest.isApplying;
 
   return (
-    <dialog
-      ref={dialogRef}
-      onCancel={handleCancel}
-      className={cn(
-        "stg:fixed stg:inset-0 stg:z-50 stg:m-auto stg:w-full stg:max-w-3xl stg:rounded-lg stg:border stg:border-border stg:bg-popover stg:p-0 stg:text-popover-foreground stg:shadow-lg",
-        "stg:backdrop:bg-backdrop",
-        "stg:open:animate-in stg:open:fade-in-0 stg:open:zoom-in-95",
-      )}
-    >
+    <DialogShell open={open} onOpenChange={handleShellOpenChange} width="3xl" aria-label="Apply YAML">
       <div className="stg:flex stg:flex-col stg:gap-4 stg:p-6">
         {/* Header */}
         <div className="stg:flex stg:flex-col stg:gap-1">
@@ -207,7 +190,7 @@ export function ApplyManifestDialog({
 
         {/* Per-document preview */}
         {manifest.entries && manifest.entries.length > 0 && (
-          <ul className="stg:flex stg:max-h-48 stg:flex-col stg:gap-2 stg:overflow-y-auto" aria-label="Resources to apply">
+          <ul className={cn(UNSTYLED_LIST, "stg:flex stg:max-h-48 stg:flex-col stg:gap-2 stg:overflow-y-auto")} aria-label="Resources to apply">
             {manifest.entries.map((entry, index) => (
               <PreviewRow key={`${entry.document.handler.yamlKind}/${entry.document.org}/${entry.document.slug}/${index}`} entry={entry} />
             ))}
@@ -252,7 +235,7 @@ export function ApplyManifestDialog({
           </div>
         </div>
       </div>
-    </dialog>
+    </DialogShell>
   );
 }