@stigmer/react 3.12.3 → 3.12.5

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

@@ -0,0 +1,224 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { ReactNode } from "react";
+import { create } from "@bufbuild/protobuf";
+import {
+  ChannelSendOutcome,
+  SendChannelMessageOutputSchema,
+} from "@stigmer/protos/ai/stigmer/agentic/agentchannel/v1/message_io_pb";
+import { StigmerContext } from "../../context";
+import { FetchCacheContext } from "../../internal/FetchCacheProvider";
+import { ConversationTemplatePickerDialog } from "../ConversationTemplatePickerDialog";
+
+function makeTemplate(overrides?: Partial<Record<string, unknown>>) {
+  return {
+    name: "fee_reminder",
+    language: "en_US",
+    category: "UTILITY",
+    status: "APPROVED",
+    parameterFormat: "POSITIONAL",
+    parameterNames: ["1", "2"],
+    bodyText: "Hi {{1}}, your fee of {{2}} is due.",
+    headerFormat: "",
+    rejectionReason: "",
+    unsupportedReason: "",
+    ...overrides,
+  };
+}
+
+function output(outcome: ChannelSendOutcome, detail = "") {
+  return create(SendChannelMessageOutputSchema, {
+    outcome,
+    outboundMessageId: outcome === ChannelSendOutcome.refused ? "" : "obm_1",
+    detail,
+  });
+}
+
+function renderPicker(options?: {
+  templates?: unknown[];
+  onSend?: ReturnType<typeof vi.fn>;
+  onOpenChange?: ReturnType<typeof vi.fn>;
+  isSending?: boolean;
+}) {
+  const listTemplates = vi
+    .fn()
+    .mockResolvedValue({ entries: options?.templates ?? [makeTemplate()] });
+  const onSend =
+    options?.onSend ?? vi.fn().mockResolvedValue(output(ChannelSendOutcome.accepted));
+  const client = { agentChannel: { listTemplates } } as never;
+  function Wrapper({ children }: { children: ReactNode }) {
+    return (
+      <FetchCacheContext.Provider value={null}>
+        <StigmerContext.Provider value={client}>{children}</StigmerContext.Provider>
+      </FetchCacheContext.Provider>
+    );
+  }
+  const view = render(
+    <ConversationTemplatePickerDialog
+      open
+      onOpenChange={options?.onOpenChange ?? vi.fn()}
+      channelSlug="wa-main"
+      org="acme"
+      onSend={onSend}
+      isSending={options?.isSending ?? false}
+      modal={false}
+    />,
+    { wrapper: Wrapper },
+  );
+  return { view, listTemplates, onSend };
+}
+
+describe("ConversationTemplatePickerDialog", () => {
+  afterEach(() => cleanup());
+
+  it("lists approved templates and asks the wire for approved only", async () => {
+    const { listTemplates } = renderPicker();
+
+    await waitFor(() => expect(screen.getByText("fee_reminder")).toBeDefined());
+    expect(listTemplates).toHaveBeenCalledWith(
+      expect.objectContaining({ channel: "wa-main", org: "acme", approvedOnly: true }),
+    );
+  });
+
+  it("marks unsupported and image-header templates unsendable, with the reason", async () => {
+    renderPicker({
+      templates: [
+        makeTemplate({
+          name: "flow_template",
+          unsupportedReason: "FLOW buttons are not supported",
+        }),
+        makeTemplate({ name: "hero_image", headerFormat: "IMAGE" }),
+        makeTemplate(),
+      ],
+    });
+
+    await waitFor(() => expect(screen.getByText("fee_reminder")).toBeDefined());
+    const unsupported = screen
+      .getByText("flow_template")
+      .closest("button") as HTMLButtonElement;
+    expect(unsupported.disabled).toBe(true);
+    expect(screen.getByText(/FLOW buttons are not supported/)).toBeDefined();
+
+    // The v1 scope cut (cloud#260): the send payload's image link has no
+    // console-side source yet, so the template shows but cannot be picked.
+    const imageHeader = screen
+      .getByText("hero_image")
+      .closest("button") as HTMLButtonElement;
+    expect(imageHeader.disabled).toBe(true);
+    expect(screen.getByText(/image header needs a hosted image/)).toBeDefined();
+
+    const sendable = screen
+      .getByText("fee_reminder")
+      .closest("button") as HTMLButtonElement;
+    expect(sendable.disabled).toBe(false);
+  });
+
+  it("phrases an empty registry answer as none FOUND, never none exist", async () => {
+    renderPicker({ templates: [] });
+    await waitFor(() =>
+      expect(screen.getByText("No approved templates found")).toBeDefined(),
+    );
+  });
+
+  it("fills variables with a live preview and only then enables Send", async () => {
+    const user = userEvent.setup();
+    renderPicker();
+
+    await waitFor(() => expect(screen.getByText("fee_reminder")).toBeDefined());
+    await user.click(screen.getByText("fee_reminder"));
+
+    const send = screen.getByRole("button", { name: "Send template" }) as HTMLButtonElement;
+    expect(send.disabled).toBe(true);
+
+    await user.type(screen.getByLabelText("1"), "Noor");
+    await user.type(screen.getByLabelText("2"), "$40");
+
+    // The preview substitutes the filled values into the verbatim body —
+    // the exact message the customer receives. Segments render as
+    // separate spans, so assert on the whole paragraph.
+    const preview = screen.getByText("Preview").nextElementSibling;
+    expect(preview?.textContent).toBe("Hi Noor, your fee of $40 is due.");
+    expect(send.disabled).toBe(false);
+  });
+
+  it("sends the chosen entry's name, language, and trimmed parameters, and closes on accepted", async () => {
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    const { onSend } = renderPicker({ onOpenChange });
+
+    await waitFor(() => expect(screen.getByText("fee_reminder")).toBeDefined());
+    await user.click(screen.getByText("fee_reminder"));
+    await user.type(screen.getByLabelText("1"), " Noor ");
+    await user.type(screen.getByLabelText("2"), "$40");
+    await user.click(screen.getByRole("button", { name: "Send template" }));
+
+    await waitFor(() =>
+      expect(onSend).toHaveBeenCalledWith({
+        kind: "template",
+        name: "fee_reminder",
+        language: "en_US",
+        parameters: { "1": "Noor", "2": "$40" },
+      }),
+    );
+    await waitFor(() => expect(onOpenChange).toHaveBeenCalledWith(false));
+  });
+
+  it("keeps the dialog open with every value intact and shows the detail verbatim on refusal", async () => {
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    const onSend = vi
+      .fn()
+      .mockResolvedValue(
+        output(ChannelSendOutcome.refused, "template 'fee_reminder' is PAUSED on WhatsApp"),
+      );
+    renderPicker({ onSend, onOpenChange });
+
+    await waitFor(() => expect(screen.getByText("fee_reminder")).toBeDefined());
+    await user.click(screen.getByText("fee_reminder"));
+    await user.type(screen.getByLabelText("1"), "Noor");
+    await user.type(screen.getByLabelText("2"), "$40");
+    await user.click(screen.getByRole("button", { name: "Send template" }));
+
+    await waitFor(() =>
+      expect(
+        screen.getByText("template 'fee_reminder' is PAUSED on WhatsApp"),
+      ).toBeDefined(),
+    );
+    // The words never left; the correction the detail asks for starts
+    // from the values already filled (the composer's draft contract).
+    expect(onOpenChange).not.toHaveBeenCalledWith(false);
+    expect((screen.getByLabelText("1") as HTMLInputElement).value).toBe("Noor");
+    expect((screen.getByLabelText("2") as HTMLInputElement).value).toBe("$40");
+  });
+
+  it("keeps the dialog open and renders a thrown failure", async () => {
+    const user = userEvent.setup();
+    const onSend = vi.fn().mockRejectedValue(new Error("transport exploded"));
+    renderPicker({ onSend });
+
+    await waitFor(() => expect(screen.getByText("fee_reminder")).toBeDefined());
+    await user.click(screen.getByText("fee_reminder"));
+    await user.type(screen.getByLabelText("1"), "Noor");
+    await user.type(screen.getByLabelText("2"), "$40");
+    await user.click(screen.getByRole("button", { name: "Send template" }));
+
+    await waitFor(() => expect(screen.getByText(/transport exploded/)).toBeDefined());
+    expect((screen.getByLabelText("1") as HTMLInputElement).value).toBe("Noor");
+  });
+
+  it("navigates back to the list, discarding the selection", async () => {
+    const user = userEvent.setup();
+    renderPicker({
+      templates: [makeTemplate(), makeTemplate({ name: "order_update" })],
+    });
+
+    await waitFor(() => expect(screen.getByText("fee_reminder")).toBeDefined());
+    await user.click(screen.getByText("fee_reminder"));
+    expect(screen.getByRole("button", { name: "Send template" })).toBeDefined();
+
+    await user.click(screen.getByRole("button", { name: "Back to the template list" }));
+    expect(screen.getByText("order_update")).toBeDefined();
+    expect(screen.queryByRole("button", { name: "Send template" })).toBeNull();
+  });
+});

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

@@ -100,7 +100,9 @@ describe("useConversationParticipation", () => {
       { wrapper: wrapper(client) },
     );
 
-    const output = await act(() => result.current.reply("on my way"));
+    const output = await act(() =>
+      result.current.reply({ kind: "text", body: "on my way" }),
+    );
 
     expect(output.outboundMessageId).toBe("obm_1");
     const agentChannel = (client as { agentChannel: Record<string, ReturnType<typeof vi.fn>> })
@@ -109,7 +111,10 @@ describe("useConversationParticipation", () => {
       expect.objectContaining({
         ...IDENTITY,
         payload: expect.objectContaining({
-          kind: expect.objectContaining({ case: "text" }),
+          kind: expect.objectContaining({
+            case: "text",
+            value: expect.objectContaining({ body: "on my way" }),
+          }),
         }),
       }),
     );
@@ -121,6 +126,40 @@ describe("useConversationParticipation", () => {
     );
   });
 
+  it("reply sends the template lane through the same command — name, language, and parameters verbatim", async () => {
+    const client = createMockStigmer();
+    const { result } = renderHook(() => useConversationParticipation(IDENTITY), {
+      wrapper: wrapper(client),
+    });
+
+    await act(() =>
+      result.current.reply({
+        kind: "template",
+        name: "order_update",
+        language: "en_US",
+        parameters: { "1": "Noor", "2": "tomorrow" },
+      }),
+    );
+
+    const agentChannel = (client as { agentChannel: Record<string, ReturnType<typeof vi.fn>> })
+      .agentChannel;
+    expect(agentChannel.reply).toHaveBeenCalledWith(
+      expect.objectContaining({
+        ...IDENTITY,
+        payload: expect.objectContaining({
+          kind: expect.objectContaining({
+            case: "template",
+            value: expect.objectContaining({
+              name: "order_update",
+              language: "en_US",
+              parameters: { "1": "Noor", "2": "tomorrow" },
+            }),
+          }),
+        }),
+      }),
+    );
+  });
+
   it("still resolves the reply when the follow-up row read fails — the send outcome is the answer", async () => {
     const client = createMockStigmer({
       getConversation: vi.fn().mockRejectedValue(new Error("blip")),
@@ -131,7 +170,9 @@ describe("useConversationParticipation", () => {
       { wrapper: wrapper(client) },
     );
 
-    const output = await act(() => result.current.reply("on my way"));
+    const output = await act(() =>
+      result.current.reply({ kind: "text", body: "on my way" }),
+    );
 
     expect(output.outboundMessageId).toBe("obm_1");
     expect(onConversation).not.toHaveBeenCalled();
@@ -144,7 +185,7 @@ describe("useConversationParticipation", () => {
       wrapper: wrapper(client),
     });
 
-    await act(() => result.current.reply("on my way"));
+    await act(() => result.current.reply({ kind: "text", body: "on my way" }));
 
     const agentChannel = (client as { agentChannel: Record<string, ReturnType<typeof vi.fn>> })
       .agentChannel;

package/src/conversation/index.ts

@@ -22,6 +22,9 @@ export type { ConversationAttentionBannerProps } from "./ConversationAttentionBa
 export { ConversationComposer } from "./ConversationComposer.js";
 export type { ConversationComposerProps } from "./ConversationComposer.js";
 
+export { ConversationTemplatePickerDialog } from "./ConversationTemplatePickerDialog.js";
+export type { ConversationTemplatePickerDialogProps } from "./ConversationTemplatePickerDialog.js";
+
 export { useConversation } from "./useConversation.js";
 export type {
   UseConversationOptions,
@@ -49,6 +52,7 @@ export type {
 export { useConversationParticipation } from "./useConversationParticipation.js";
 export type {
   ConversationCommand,
+  ConversationReplyPayload,
   UseConversationParticipationOptions,
   UseConversationParticipationReturn,
 } from "./useConversationParticipation.js";

package/src/conversation/useConversationParticipation.ts

@@ -17,6 +17,43 @@ import { useKeyedSubmission } from "../internal/useKeyedSubmission.js";
 /** The four staff-facing participation commands. */
 export type ConversationCommand = "reply" | "takeOver" | "handBack" | "clearAttention";
 
+/**
+ * A staff reply's payload — the client-side face of the wire's
+ * `ChannelOutboundPayload` oneof. Reply is ONE command with two lanes,
+ * never two commands: both lanes share the implicit takeover, the
+ * `"reply"` pending key, and the outcome contract.
+ *
+ * - `text` — free-form; requires an open 24-hour customer-service
+ *   window on providers that enforce one (WhatsApp).
+ * - `template` — a provider-approved message template, the only lane
+ *   for a closed window. `language` is always required here (the wire
+ *   allows omitting it for single-language names, but a caller that
+ *   picked a template knows its language — sending it structurally
+ *   avoids the ambiguity refusal). Image-header templates are not yet
+ *   sendable from the SDK: the wire's `header_image_link` needs a
+ *   public HTTPS asset no console surface can supply today.
+ */
+export type ConversationReplyPayload =
+  | {
+      readonly kind: "text";
+      /** The message body, as the customer will receive it. */
+      readonly body: string;
+    }
+  | {
+      readonly kind: "template";
+      /** Template name on the channel provider's registry. */
+      readonly name: string;
+      /** Template language code (e.g. `"en"`, `"en_US"`). */
+      readonly language: string;
+      /**
+       * Variable values: keyed by parameter name for NAMED templates,
+       * by position (`"1"`, `"2"`, …) for POSITIONAL ones — exactly the
+       * template's declared parameters, no more, no fewer (the server's
+       * pre-check refuses mismatches with a corrective detail).
+       */
+      readonly parameters: Readonly<Record<string, string>>;
+    };
+
 /** Options for {@link useConversationParticipation}. */
 export interface UseConversationParticipationOptions {
   /** AgentChannel the conversation belongs to. */
@@ -37,13 +74,16 @@ export interface UseConversationParticipationOptions {
 /** Return value of {@link useConversationParticipation}. */
 export interface UseConversationParticipationReturn {
   /**
-   * Send a staff text reply. Resolves with the truthful outcome of the
-   * inline attempt: `accepted` (with `outboundMessageId` — the item will
-   * appear on the timeline as `ob:<that id>`), `queued`, or `refused`.
+   * Send a staff reply — text or template (see
+   * {@link ConversationReplyPayload}). Resolves with the truthful
+   * outcome of the inline attempt: `accepted` (with
+   * `outboundMessageId` — the item will appear on the timeline as
+   * `ob:<that id>`), `queued`, or `refused` (template pre-check
+   * refusals land here too, with the server's corrective detail).
    * A `refused` outcome WITHOUT an `outboundMessageId` left no ledger
    * row and no timeline item will ever exist for it.
    */
-  readonly reply: (text: string) => Promise<SendChannelMessageOutput>;
+  readonly reply: (payload: ConversationReplyPayload) => Promise<SendChannelMessageOutput>;
   /**
    * Take the conversation over: the agent goes quiet until handBack.
    * Resolves with the fresh row — for the LOSER of a concurrent
@@ -120,13 +160,25 @@ export function useConversationParticipation(
   );
 
   const reply = useCallback(
-    (text: string) =>
+    (payload: ConversationReplyPayload) =>
       run("reply", async () => {
         const output = await stigmer.agentChannel.reply(
           create(ReplyToConversationInputSchema, {
             agentChannelId,
             conversationKey,
-            payload: { kind: { case: "text", value: { body: text } } },
+            payload: {
+              kind:
+                payload.kind === "text"
+                  ? { case: "text", value: { body: payload.body } }
+                  : {
+                      case: "template",
+                      value: {
+                        name: payload.name,
+                        language: payload.language,
+                        parameters: { ...payload.parameters },
+                      },
+                    },
+            },
           }),
         );
         // The implicit takeover flipped control BEFORE the send ran —

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/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/ArtifactsWidget.tsx

@@ -3,6 +3,7 @@
 import { useCallback, useMemo, useState } from "react";
 import type { AgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/api_pb";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_LIST } from "../internal/element-resets.js";
 import {
   useSessionArtifacts,
   artifactKey,
@@ -116,7 +117,7 @@ export function ArtifactsWidget({
         </span>
       </div>
 
-      <ul role="list" className="stg:flex stg:flex-col">
+      <ul role="list" className={cn(UNSTYLED_LIST, "stg:flex stg:flex-col")}>
         {artifacts.map((entry) => (
           <ArtifactRow
             key={artifactKey(entry.artifact)}

package/src/execution/FileChangeProgressBar.tsx

@@ -3,6 +3,7 @@
 import { memo, useState } from "react";
 import type { FileChangeProgress } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/filereview_pb";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_LIST } from "../internal/element-resets.js";
 import { FileKindBadge, FileLineStats } from "./FileReviewAtoms.js";
 import { FilePathLink } from "./FilePathLink.js";
 
@@ -91,7 +92,7 @@ export const FileChangeProgressBar = memo(function FileChangeProgressBar({
         <FileLineStats linesAdded={linesAdded} linesRemoved={linesRemoved} />
       </div>
       {expanded && (
-        <ul className="stg:mt-2 stg:max-h-[30vh] stg:space-y-1 stg:overflow-y-auto">
+        <ul className={cn(UNSTYLED_LIST, "stg:mt-2 stg:max-h-[30vh] stg:space-y-1 stg:overflow-y-auto")}>
           {entries.map((entry) => {
             const path = entry.pathAfter || entry.pathBefore;
             return (

package/src/execution/TodoList.tsx

@@ -4,6 +4,7 @@ import { useMemo, type ComponentType } from "react";
 import type { TodoItem } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/todo_pb";
 import { TodoStatus } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_LIST } from "../internal/element-resets.js";
 
 /** Props for {@link TodoList}. */
 export interface TodoListProps {
@@ -69,7 +70,7 @@ export function TodoList({
   return (
     <ul
       role="list"
-      className={cn("stg:flex stg:flex-col stg:gap-1", className)}
+      className={cn(UNSTYLED_LIST, "stg:flex stg:flex-col stg:gap-1", className)}
       aria-label="Tasks"
     >
       {sortedTodos.map((item) => (

package/src/execution/WriteBacksWidget.tsx

@@ -2,6 +2,7 @@
 
 import type { AgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/api_pb";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_LIST } from "../internal/element-resets.js";
 import { useSessionWriteBacks } from "../session/useSessionWriteBacks.js";
 import { WriteBackCard } from "./WriteBackCard.js";
 
@@ -71,7 +72,7 @@ export function WriteBacksWidget({
         </span>
       </div>
 
-      <ul role="list" className="stg:flex stg:flex-col stg:gap-3">
+      <ul role="list" className={cn(UNSTYLED_LIST, "stg:flex stg:flex-col stg:gap-3")}>
         {writeBacks.map((entry) => (
           <li key={entry.writeBack.workspaceEntryName}>
             <WriteBackCard writeBack={entry.writeBack} />