@stigmer/react 3.12.2 → 3.12.4

package/src/conversation/ConversationAttentionBanner.tsx

@@ -3,7 +3,10 @@
 import { TriangleAlert } from "lucide-react";
 import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
-import type { ChannelConversation } from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/conversation_io_pb";
+import {
+  ConversationControl,
+  type ChannelConversation,
+} from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/conversation_io_pb";
 import { Button } from "../button/Button.js";
 import type { UseConversationParticipationReturn } from "./useConversationParticipation.js";
 
@@ -13,28 +16,51 @@ export interface ConversationAttentionBannerProps {
   readonly conversation: ChannelConversation;
   /** The participation commands (from `useConversationParticipation`). */
   readonly participation: UseConversationParticipationReturn;
+  /**
+   * Whether the channel's provider has a staff send lane — the same
+   * fact `ConversationControlBanner` takes. When `false` the banner
+   * offers only Dismiss: a takeover would silence the agent with no way
+   * to reply, and the control banner beside this one already explains
+   * the missing lane, so a disabled Take over here would duplicate it.
+   * Defaults to `true` for hosts that only wire providers with staff
+   * lanes.
+   */
+  readonly supportsStaffReplies?: boolean;
   /** Additional classes for the banner container. */
   readonly className?: string;
 }
 
 /**
  * The needs-attention banner (channel-conversations DD-008): the
- * escalating agent's reason, verbatim, with the false-alarm dismissal.
+ * escalating agent's reason, verbatim, with the escalation's ANSWER
+ * beside its false-alarm dismissal.
+ *
+ * Take over is the primary action because the human arriving IS the
+ * answer to an escalation — taking over clears attention structurally
+ * (cloud#266 / F-20: the answer used to live one banner away in
+ * equal-weight chrome, so staff read the plea and missed the response).
+ * It renders only while the agent holds the conversation on a channel
+ * with a staff lane; a human already holding it IS the attention
+ * answered, so only Dismiss remains.
  *
  * Dismiss is `clearAttention` — attention clears in place and control
- * never moves (taking over also clears it, structurally, because the
- * human arriving IS the answer to an escalation). Renders nothing while
- * the conversation is unflagged.
+ * never moves. Renders nothing while the conversation is unflagged.
  */
 export function ConversationAttentionBanner({
   conversation,
   participation,
+  supportsStaffReplies = true,
   className,
 }: ConversationAttentionBannerProps) {
   if (!conversation.needsAttention) return null;
 
-  const { clearAttention, pendingCommands, commandErrors } = participation;
-  const error = commandErrors.get("clearAttention");
+  const { takeOver, clearAttention, pendingCommands, commandErrors } = participation;
+  // Take over's failure renders on the control banner too — same
+  // command, same truth; a rare failure showing twice on the stacked
+  // banners beats it hiding beside the button the staffer pressed.
+  const error = commandErrors.get("clearAttention") ?? commandErrors.get("takeOver");
+  const humanHeld = conversation.control === ConversationControl.control_human;
+  const offersTakeOver = !humanHeld && supportsStaffReplies;
 
   return (
     <div
@@ -56,18 +82,37 @@ export function ConversationAttentionBanner({
             )}
           </span>
         </p>
-        <Button
-          variant="outline"
-          size="xs"
-          onClick={() =>
-            void clearAttention().catch(() => {
-              // Recorded in commandErrors and rendered below.
-            })
-          }
-          disabled={pendingCommands.has("clearAttention")}
-        >
-          {pendingCommands.has("clearAttention") ? "Dismissing…" : "Dismiss"}
-        </Button>
+        {/* One shrink-proof group, right-aligned even after a wrap
+            (ml-auto): under a long reason the actions used to wrap to
+            the bottom-LEFT and read as part of the message (F-20). */}
+        <div className="stg:ml-auto stg:flex stg:shrink-0 stg:items-center stg:gap-2">
+          <Button
+            variant="outline"
+            size="xs"
+            onClick={() =>
+              void clearAttention().catch(() => {
+                // Recorded in commandErrors and rendered below.
+              })
+            }
+            disabled={pendingCommands.has("clearAttention")}
+          >
+            {pendingCommands.has("clearAttention") ? "Dismissing…" : "Dismiss"}
+          </Button>
+          {offersTakeOver && (
+            <Button
+              variant="primary"
+              size="xs"
+              onClick={() =>
+                void takeOver().catch(() => {
+                  // Recorded in commandErrors and rendered below.
+                })
+              }
+              disabled={pendingCommands.has("takeOver")}
+            >
+              {pendingCommands.has("takeOver") ? "Taking over…" : "Take over"}
+            </Button>
+          )}
+        </div>
       </div>
       {error && (
         <p className="stg:mt-1 stg:text-xs stg:text-destructive">{getUserMessage(error)}</p>

package/src/conversation/ConversationListPane.tsx

@@ -4,6 +4,7 @@ import { memo, useCallback, useId, useRef } from "react";
 import { timestampDate } from "@bufbuild/protobuf/wkt";
 import { MessageSquare, TriangleAlert, User } from "lucide-react";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_LIST } from "../internal/element-resets.js";
 import { getUserMessage } from "@stigmer/sdk";
 import type { AgentChannel } from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/api_pb";
 import {
@@ -193,7 +194,7 @@ export function ConversationListPane({
             {/* One context-only provider arms every row's attention
                 tooltip (the WorkspaceSidebar recents-list precedent). */}
             <TooltipProvider>
-              <ul className="stg:space-y-0.5">
+              <ul className={cn(UNSTYLED_LIST, "stg:space-y-0.5")}>
                 {conversations.map((conversation) => (
                   <ConversationRow
                     key={`${conversation.agentChannelId}:${conversation.conversationKey}`}
@@ -333,6 +334,20 @@ function ConversationFilterToggle({
   );
 }
 
+/**
+ * The awaiting dot's meaning, shared verbatim by its tooltip and its
+ * sr-only text — one string per strength so sighted-hover and
+ * screen-reader users hear the identical fact. The copy carries the
+ * DISTINCTION, not just the fact (cloud#266): who holds the
+ * conversation is exactly what the two strengths encode, and it names
+ * the stake without promising an outcome — a muted dot survives a dead
+ * agent turn on purpose (DD-011 D-b's recovery path).
+ */
+const AWAITING_COPY: Record<"strong" | "muted", string> = {
+  strong: "Customer awaiting reply — a human has this conversation; the agent will not answer",
+  muted: "Customer awaiting reply — the agent has this conversation",
+};
+
 const ConversationRow = memo(function ConversationRow({
   conversation,
   label,
@@ -425,22 +440,29 @@ const ConversationRow = memo(function ConversationRow({
               // carries a dot under its timestamp. Strength maps the
               // holder (DD-011 D-a): strong when a human holds it — the
               // agent will not answer, a person must — muted when the
-              // agent does. No tooltip and no tab stop (the F-18
-              // discipline); the sr-only text is the accessible meaning.
-              <span className="stg:flex">
-                <span
-                  aria-hidden="true"
-                  className={cn(
-                    "stg:size-2 stg:rounded-full",
-                    awaiting === "strong" ? "stg:bg-primary" : "stg:bg-muted-foreground",
-                  )}
-                />
-                <span className="stg:sr-only">
-                  {awaiting === "strong"
-                    ? "Customer awaiting reply — the conversation is human-held"
-                    : "Customer awaiting reply"}
-                </span>
-              </span>
+              // agent does. Strong is FILLED and muted is a hollow RING
+              // (cloud#266): fill-vs-outline reads as "act vs watching"
+              // without decoding color, and color alone inverted in dark
+              // mode, where the muted gray outshone the strong primary.
+              // The meaning rides the house tooltip (the attention
+              // icon's exact pattern above — span trigger inside the row
+              // button, out of the tab order, sr-only as the accessible
+              // name); a bare dot told a first-time viewer nothing.
+              <Tooltip>
+                <TooltipTrigger render={<span className="stg:flex" />}>
+                  <span
+                    aria-hidden="true"
+                    className={cn(
+                      "stg:size-2 stg:rounded-full",
+                      awaiting === "strong"
+                        ? "stg:bg-primary"
+                        : "stg:border-2 stg:border-muted-foreground",
+                    )}
+                  />
+                  <span className="stg:sr-only">{AWAITING_COPY[awaiting]}</span>
+                </TooltipTrigger>
+                <TooltipContent side="top">{AWAITING_COPY[awaiting]}</TooltipContent>
+              </Tooltip>
             )}
           </span>
         )}

package/src/conversation/ConversationTimelineView.tsx

@@ -4,6 +4,7 @@ import { memo, useMemo } from "react";
 import { timestampDate } from "@bufbuild/protobuf/wkt";
 import { Ban, Check, CheckCheck, Clock, Info, MessageSquare, TriangleAlert } from "lucide-react";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_LIST } from "../internal/element-resets.js";
 import { getUserMessage } from "@stigmer/sdk";
 import type { ConversationTimelineItem } from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/conversation_io_pb";
 import { channelProviderOf, type ChannelProviderId } from "../channel/providers.js";
@@ -165,7 +166,7 @@ export function ConversationTimelineView({
                   >
                     {day.label}
                   </div>
-                  <ul className="stg:space-y-1.5">
+                  <ul className={cn(UNSTYLED_LIST, "stg:space-y-1.5")}>
                     {day.items.map((item) => (
                       <TimelineItemRow
                         key={item.itemId}

package/src/conversation/ConversationsWorkbench.tsx

@@ -340,6 +340,7 @@ export function ConversationsWorkbench({
             <ConversationAttentionBanner
               conversation={detail.conversation}
               participation={participation}
+              supportsStaffReplies={descriptor?.supportsStaffReplies ?? true}
             />
           )}
           {detail.conversation && (

package/src/conversation/__tests__/ConversationAttentionBanner.test.tsx

@@ -2,7 +2,10 @@ import { describe, it, expect, vi, afterEach } from "vitest";
 import { cleanup, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { create } from "@bufbuild/protobuf";
-import { ChannelConversationSchema } from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/conversation_io_pb";
+import {
+  ChannelConversationSchema,
+  ConversationControl,
+} from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/conversation_io_pb";
 import { ConversationAttentionBanner } from "../ConversationAttentionBanner";
 import type {
   ConversationCommand,
@@ -23,7 +26,7 @@ function participation(
 ): UseConversationParticipationReturn {
   return {
     reply: vi.fn(),
-    takeOver: vi.fn(),
+    takeOver: vi.fn().mockResolvedValue(conversation()),
     handBack: vi.fn(),
     clearAttention: vi.fn().mockResolvedValue(conversation()),
     pendingCommands: new Set<ConversationCommand>(),
@@ -79,4 +82,75 @@ describe("ConversationAttentionBanner", () => {
     );
     expect(screen.getByText("agent channel ach_1 not found")).toBeDefined();
   });
+
+  it("offers Take over beside Dismiss while the agent holds it — the escalation's answer lives where the escalation speaks (cloud#266, F-20)", async () => {
+    const user = userEvent.setup();
+    const p = participation();
+    render(
+      <ConversationAttentionBanner
+        conversation={conversation({ needsAttention: true })}
+        participation={p}
+      />,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Take over" }));
+    expect(p.takeOver).toHaveBeenCalled();
+    // Dismiss stays — the false-alarm path never disappears.
+    expect(screen.getByRole("button", { name: "Dismiss" })).toBeDefined();
+  });
+
+  it("offers only Dismiss when a human already holds it — the human arriving IS the attention answered", () => {
+    render(
+      <ConversationAttentionBanner
+        conversation={conversation({
+          needsAttention: true,
+          control: ConversationControl.control_human,
+          controlledBy: "idt_staff",
+        })}
+        participation={participation()}
+      />,
+    );
+
+    expect(screen.queryByRole("button", { name: "Take over" })).toBeNull();
+    expect(screen.getByRole("button", { name: "Dismiss" })).toBeDefined();
+  });
+
+  it("offers only Dismiss on senderless providers — the control banner already explains the missing lane", () => {
+    render(
+      <ConversationAttentionBanner
+        conversation={conversation({ needsAttention: true })}
+        participation={participation()}
+        supportsStaffReplies={false}
+      />,
+    );
+
+    expect(screen.queryByRole("button", { name: "Take over" })).toBeNull();
+    expect(screen.getByRole("button", { name: "Dismiss" })).toBeDefined();
+  });
+
+  it("shows the takeover in flight and renders its failure verbatim", () => {
+    const { rerender } = render(
+      <ConversationAttentionBanner
+        conversation={conversation({ needsAttention: true })}
+        participation={participation({
+          pendingCommands: new Set<ConversationCommand>(["takeOver"]),
+        })}
+      />,
+    );
+    expect(screen.getByRole("button", { name: "Taking over…" })).toBeDefined();
+
+    rerender(
+      <ConversationAttentionBanner
+        conversation={conversation({ needsAttention: true })}
+        participation={participation({
+          commandErrors: new Map([
+            ["takeOver", new Error("this channel is disabled: set spec.enabled to resume messaging on it")],
+          ]),
+        })}
+      />,
+    );
+    expect(
+      screen.getByText("this channel is disabled: set spec.enabled to resume messaging on it"),
+    ).toBeDefined();
+  });
 });

package/src/conversation/__tests__/ConversationListPane.test.tsx

@@ -145,7 +145,7 @@ describe("ConversationListPane", () => {
     ).toBeDefined();
   });
 
-  it("uses the house tooltip for the attention badge and no native titles anywhere (F-18)", () => {
+  it("uses the house tooltip for the attention badge and awaiting dot, no native titles anywhere (F-18)", () => {
     const { container } = render(
       <ConversationListPane
         {...baseProps()}
@@ -154,6 +154,9 @@ describe("ConversationListPane", () => {
             displayName: "Pat with a very long name that will truncate",
             needsAttention: true,
             attentionReason: "refund I cannot process",
+            // The awaiting dot renders too, so its tooltip trigger is
+            // under the same no-title / no-tab-stop assertions below.
+            awaitingReply: true,
           }),
         ]}
       />,
@@ -204,8 +207,12 @@ describe("ConversationListPane", () => {
       />,
     );
 
+    // The copy names the stake, not just the fact (cloud#266): a
+    // human-held wait is one only a person can end.
     expect(
-      screen.getByText("Customer awaiting reply — the conversation is human-held"),
+      screen.getByText(
+        "Customer awaiting reply — a human has this conversation; the agent will not answer",
+      ),
     ).toBeDefined();
   });
 
@@ -217,9 +224,13 @@ describe("ConversationListPane", () => {
       />,
     );
 
-    expect(screen.getByText("Customer awaiting reply")).toBeDefined();
     expect(
-      screen.queryByText("Customer awaiting reply — the conversation is human-held"),
+      screen.getByText("Customer awaiting reply — the agent has this conversation"),
+    ).toBeDefined();
+    expect(
+      screen.queryByText(
+        "Customer awaiting reply — a human has this conversation; the agent will not answer",
+      ),
     ).toBeNull();
   });
 

package/src/cursor-accounts/CursorAccountsConsole.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback, useState } from "react";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_LIST } from "../internal/element-resets.js";
 import { getUserMessage, isPermissionDenied } from "@stigmer/sdk";
 import type { CursorAccount } from "@stigmer/protos/ai/stigmer/platform/cursoraccount/v1/cursor_account_pb";
 import type { CursorAccountSummary } from "@stigmer/protos/ai/stigmer/platform/cursoraccount/v1/io_pb";
@@ -145,7 +146,7 @@ export function CursorAccountsConsole({ className }: CursorAccountsConsoleProps)
             add member execution keys to make it routable.
           </p>
         ) : (
-          <ul role="list" aria-label="Cursor accounts" className="stg:m-0 stg:list-none stg:p-0">
+          <ul role="list" aria-label="Cursor accounts" className={UNSTYLED_LIST}>
             {accounts.map((summary) => (
               <AccountRow
                 key={summary.account?.accountId}

package/src/cursor-accounts/MemberKeysPanel.tsx

@@ -5,6 +5,7 @@ import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
 import type { CursorAccountView } from "@stigmer/protos/ai/stigmer/platform/cursoraccount/v1/io_pb";
 import { Button } from "../button/index.js";
+import { UNSTYLED_LIST } from "../internal/element-resets.js";
 import { INPUT_CLASSES } from "../internal/form-primitives.js";
 import { toError } from "../internal/toError.js";
 import type { CursorAccountCoverage } from "./cursor-account-coverage.js";
@@ -259,7 +260,7 @@ export function MemberKeysPanel({
             <ul
               role="list"
               aria-label="Import results"
-              className="stg:m-0 stg:list-none stg:space-y-0.5 stg:p-0 stg:text-[11px]"
+              className={cn(UNSTYLED_LIST, "stg:space-y-0.5 stg:text-[11px]")}
             >
               {importResults.map((result) => (
                 <li

package/src/dashboard/DashboardFailedRuns.tsx

@@ -2,6 +2,7 @@
 
 import { memo } from "react";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_LIST } from "../internal/element-resets.js";
 import type { DashboardFailedRun } from "./types.js";
 import { formatRelativeTime } from "../activity/format-relative-time.js";
 
@@ -54,7 +55,7 @@ export const DashboardFailedRuns = memo(function DashboardFailedRuns({
           No recent failures
         </p>
       ) : (
-        <ul className="stg:space-y-1.5" role="list">
+        <ul className={cn(UNSTYLED_LIST, "stg:space-y-1.5")} role="list">
           {failedRuns.map((run) => (
             <li
               key={run.id}

package/src/dependency-graph/DependencyGraph.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback, useRef, type KeyboardEvent } from "react";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_LIST } from "../internal/element-resets.js";
 import type { DependencyGraphProps } from "./types.js";
 import { DependencyTreeNode } from "./DependencyTreeNode.js";
 
@@ -114,7 +115,7 @@ export function DependencyGraph({
         role="tree"
         aria-label={`Dependencies of ${root.label}`}
         onKeyDown={handleKeyDown}
-        className="stg:rounded-lg stg:border stg:border-border stg:p-2"
+        className={cn(UNSTYLED_LIST, "stg:rounded-lg stg:border stg:border-border stg:p-2")}
       >
         <DependencyTreeNode
           node={root}

package/src/dependency-graph/DependencyTreeNode.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback, useState, type KeyboardEvent } from "react";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_LIST } from "../internal/element-resets.js";
 import type { DependencyNode, NodeKind } from "./types.js";
 
 interface DependencyTreeNodeProps {
@@ -152,7 +153,7 @@ export function DependencyTreeNode({
       {showChildren && (
         <ul
           role="group"
-          className="stg:relative stg:ml-[11px] stg:border-l stg:border-border stg:pl-3"
+          className={cn(UNSTYLED_LIST, "stg:relative stg:ml-[11px] stg:border-l stg:border-border stg:pl-3")}
         >
           {node.children.map((child) => (
             <DependencyTreeNode

package/src/environment/EnvironmentPicker.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback, useId, useMemo } from "react";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_LIST } from "../internal/element-resets.js";
 import type { Environment } from "@stigmer/protos/ai/stigmer/agentic/environment/v1/api_pb";
 import type { ResourceRef } from "@stigmer/sdk";
 import { useEnvironmentList } from "./useEnvironmentList.js";
@@ -217,7 +218,7 @@ function SelectedList({
   total,
 }: SelectedListProps) {
   return (
-    <ol className="stg:space-y-1.5" aria-label="Selected environments (merge order)">
+    <ol className={cn(UNSTYLED_LIST, "stg:space-y-1.5")} aria-label="Selected environments (merge order)">
       {value.map((ref, index) => (
         <li
           key={`${ref.org}-${ref.slug}-${index}`}

package/src/error/SecretFlowErrorGuide.tsx

@@ -3,6 +3,7 @@
 import { useMemo } from "react";
 import { StigmerError, getUserMessage } from "@stigmer/sdk";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_LIST } from "../internal/element-resets.js";
 
 /** Props for {@link SecretFlowErrorGuide}. */
 export interface SecretFlowErrorGuideProps {
@@ -113,7 +114,7 @@ export function SecretFlowErrorGuide({
                 <p className="stg:text-xs stg:text-amber-700 stg:dark:text-amber-300">
                   <span className="stg:font-medium">{server}</span> requires:
                 </p>
-                <ul className="stg:mt-0.5 stg:space-y-0.5">
+                <ul className={cn(UNSTYLED_LIST, "stg:mt-0.5 stg:space-y-0.5")}>
                   {vars.map((v) => (
                     <li
                       key={v}
@@ -131,7 +132,7 @@ export function SecretFlowErrorGuide({
             <p className="stg:text-xs stg:text-amber-700/90 stg:dark:text-amber-300/90">
               You can provide these values in two ways:
             </p>
-            <ul className="stg:mt-1 stg:space-y-0.5 stg:text-xs stg:text-amber-700/80 stg:dark:text-amber-300/80">
+            <ul className={cn(UNSTYLED_LIST, "stg:mt-1 stg:space-y-0.5 stg:text-xs stg:text-amber-700/80 stg:dark:text-amber-300/80")}>
               <li className="stg:flex stg:items-start stg:gap-1.5">
                 <span className="stg:mt-px stg:shrink-0">•</span>
                 <span>

package/src/execution/ApprovalCard.tsx

@@ -12,6 +12,7 @@ import {
 import {
   resolveToolCategoryFromKind,
   extractPrimaryArgFromPreview,
+  extractShellIntentFromPreview,
   extractWriteContentFromPreview,
   isFileCategory,
   type ToolCategory,
@@ -160,6 +161,26 @@ export function ApprovalCardHeader({
     ],
   );
 
+  // A shell gate whose call carries a model-authored intent phrase titles
+  // the header with it (stigmer#276) — supplementary context only: the
+  // command stays foregrounded in the body's terminal preview, which remains
+  // the content the user is approving.
+  const intent = useMemo(
+    () =>
+      extractShellIntentFromPreview(
+        pendingApproval.toolName,
+        pendingApproval.argsPreview,
+        pendingApproval.mcpServerSlug,
+        pendingApproval.toolKind,
+      ),
+    [
+      pendingApproval.toolName,
+      pendingApproval.argsPreview,
+      pendingApproval.mcpServerSlug,
+      pendingApproval.toolKind,
+    ],
+  );
+
   return (
     <div
       className={cn(
@@ -173,7 +194,7 @@ export function ApprovalCardHeader({
 
       <span className="stg:min-w-0 stg:flex-1 stg:flex stg:items-center stg:gap-1.5 stg:overflow-hidden">
         <span className="stg:shrink-0 stg:font-medium stg:text-foreground">
-          {categoryInfo.label}
+          {intent ?? categoryInfo.label}
         </span>
         {primaryArg &&
           categoryInfo.category !== "shell" &&
@@ -186,7 +207,7 @@ export function ApprovalCardHeader({
             />
           ) : (
             // Shell is the exception: its command is shown in the body's
-            // terminal session, so the header stays minimal (icon + label).
+            // terminal session, so the header stays minimal (icon + title).
             <span className="stg:min-w-0 stg:truncate stg:font-mono stg:text-muted-foreground">
               {primaryArg}
             </span>

package/src/execution/ArtifactContentBody.tsx

@@ -2,6 +2,7 @@
 
 import type { ExecutionArtifact } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/artifact_pb";
 import { ExecutionArtifactKind } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import { UNSTYLED_LIST } from "../internal/element-resets.js";
 import { ArtifactFileContent } from "./ArtifactFileContent.js";
 import type { SkillPackageDetection } from "../library/detect-skill-package.js";
 
@@ -103,7 +104,7 @@ function DirectoryContentView({
           <h3 className="stg:mb-2 stg:text-xs stg:font-medium stg:text-muted-foreground">
             Files ({entries.length})
           </h3>
-          <ul className="stg:space-y-0.5" role="list">
+          <ul className={`${UNSTYLED_LIST} stg:space-y-0.5`} role="list">
             {entries.map((entry) => (
               <li
                 key={entry}

package/src/execution/ArtifactPreviewModal.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback } from "react";
 import type { ExecutionArtifact } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/artifact_pb";
 import { cn } from "@stigmer/theme";
+import { DialogShell } from "../internal/DialogShell.js";
 import { useArtifactDownload } from "./useArtifactDownload.js";
 import { formatArtifactSize } from "./artifact-utils.js";
 import { ArtifactContentBody } from "./ArtifactContentBody.js";
@@ -253,37 +254,24 @@ export function ArtifactPreviewModal({
   onImplement,
   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();
+  const handleOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (!nextOpen) onClose();
     },
     [onClose],
   );
 
   return (
-    <dialog
-      ref={dialogRef}
-      onCancel={handleCancel}
+    <DialogShell
+      open={open}
+      onOpenChange={handleOpenChange}
+      width="3xl"
       aria-label={`Preview ${artifact.name}`}
-      className={cn(
-        "stg:fixed stg:inset-0 stg:m-auto stg:w-full stg:max-w-3xl stg:rounded-lg stg:border stg:border-border stg:bg-background stg:p-0 stg:text-foreground stg:shadow-lg stg:outline-none",
-        "stg:[&::backdrop]:bg-black/50",
-        className,
-      )}
+      // Background surface is deliberate for content previews. The
+      // previously hardcoded ::backdrop color (bg-black/50 — it escaped the
+      // #652 fence via the arbitrary-variant spelling) now rides the
+      // shell's token backdrop.
+      className={cn("stg:bg-background stg:text-foreground stg:outline-none", className)}
     >
       {open && (
         <ArtifactPreviewContent
@@ -296,7 +284,7 @@ export function ArtifactPreviewModal({
           onImplement={onImplement}
         />
       )}
-    </dialog>
+    </DialogShell>
   );
 }