@agent-native/toolkit 0.228.0-nightly-20261111212500 → 0.228.0

package/src/app/agentkit/react/roving-focus.ts

@@ -0,0 +1,82 @@
+import { useEffect, type RefObject } from "react";
+
+const ROVING_CANDIDATES = "button, a[href]";
+
+function rovingItems(container: HTMLElement): HTMLElement[] {
+  return Array.from(
+    container.querySelectorAll<HTMLElement>(ROVING_CANDIDATES),
+  ).filter(
+    (item) =>
+      !(item instanceof HTMLButtonElement && item.disabled) &&
+      // An inert subtree takes no focus, so it gets no tab stop either.
+      !item.closest("[inert]"),
+  );
+}
+
+/** One tab stop for `container`, landing on the last-used item; arrows move. */
+export function useRovingFocus(
+  containerRef: RefObject<HTMLElement | null>,
+  enabled = true,
+): void {
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container || !enabled) return;
+    let current: HTMLElement | null = null;
+    const sync = () => {
+      const items = rovingItems(container);
+      if (!current || !items.includes(current)) current = items[0] ?? null;
+      // Every candidate, so a newly enabled item joins at -1, not as a stop.
+      for (const item of container.querySelectorAll<HTMLElement>(
+        ROVING_CANDIDATES,
+      ))
+        item.tabIndex = item === current ? 0 : -1;
+    };
+    const onFocusIn = (event: FocusEvent) => {
+      const target = event.target;
+      if (!(target instanceof HTMLElement)) return;
+      if (!rovingItems(container).includes(target)) return;
+      current = target;
+      sync();
+    };
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.altKey || event.ctrlKey || event.metaKey) return;
+      const items = rovingItems(container);
+      const index = items.indexOf(document.activeElement as HTMLElement);
+      if (index < 0) return;
+      const rtl =
+        getComputedStyle(container).direction === "rtl" ||
+        container.closest("[dir]")?.getAttribute("dir") === "rtl";
+      const forward = rtl ? "ArrowLeft" : "ArrowRight";
+      const backward = rtl ? "ArrowRight" : "ArrowLeft";
+      const next =
+        event.key === forward
+          ? items[(index + 1) % items.length]
+          : event.key === backward
+            ? items[(index - 1 + items.length) % items.length]
+            : event.key === "Home"
+              ? items[0]
+              : event.key === "End"
+                ? items[items.length - 1]
+                : undefined;
+      if (!next) return;
+      event.preventDefault();
+      next.focus();
+    };
+    sync();
+    // Items and their disabled/inert state change without a re-render.
+    const observer = new MutationObserver(sync);
+    observer.observe(container, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      attributeFilter: ["disabled", "inert"],
+    });
+    container.addEventListener("focusin", onFocusIn);
+    container.addEventListener("keydown", onKeyDown);
+    return () => {
+      observer.disconnect();
+      container.removeEventListener("focusin", onFocusIn);
+      container.removeEventListener("keydown", onKeyDown);
+    };
+  }, [containerRef, enabled]);
+}

package/src/app/agentkit/react/stack-trace.spec.tsx

@@ -0,0 +1,177 @@
+// @vitest-environment happy-dom
+
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { parseStackTrace, StackTrace, type StackFrame } from "./stack-trace.js";
+
+const NODE_CRASH = [
+  "stdout:",
+  "starting",
+  "",
+  "stderr:",
+  "file:///tmp/run/sandbox.mjs:1",
+  "function f(){ return x.y }",
+  "              ^",
+  "",
+  "ReferenceError: x is not defined",
+  "    at f (file:///tmp/run/sandbox.mjs:1:15)",
+  "    at file:///tmp/run/sandbox.mjs:2:1",
+  "    at ModuleJob.run (node:internal/modules/esm/module_job:569:25)",
+  "    at async node:internal/modules/esm/loader:650:26",
+  "    at async asyncRunEntryPointWithESMLoader (node:internal/modules/run_main:105:5)",
+  "",
+  "Node.js v26.12.1",
+].join("\n");
+
+const PYTHON_CRASH = [
+  "Traceback (most recent call last):",
+  '  File "/work/app.py", line 4, in <module>',
+  "    main()",
+  '  File "/usr/lib/python3.12/json/__init__.py", line 346, in loads',
+  "    return _default_decoder.decode(s)",
+  "json.decoder.JSONDecodeError: Expecting value: line 1 column 1 (char 0)",
+].join("\n");
+
+describe("parseStackTrace", () => {
+  it("finds a Node stack inside other output", () => {
+    const trace = parseStackTrace(NODE_CRASH)!;
+    expect(trace.error).toBe("ReferenceError: x is not defined");
+    expect(trace.whole).toBe(false);
+    expect(trace.text.split("\n")).toHaveLength(6);
+    expect(trace.frames[0]).toEqual({
+      text: "at f (file:///tmp/run/sandbox.mjs:1:15)",
+      name: "f",
+      file: "file:///tmp/run/sandbox.mjs",
+      line: 1,
+      column: 15,
+      internal: false,
+    });
+    expect(trace.frames[1]).toMatchObject({
+      file: "file:///tmp/run/sandbox.mjs",
+      line: 2,
+      internal: false,
+    });
+    expect(trace.frames[1]?.name).toBeUndefined();
+    expect(trace.frames.slice(2).map((frame) => frame.internal)).toEqual([
+      true,
+      true,
+      true,
+    ]);
+    expect(trace.frames[4]?.name).toBe("asyncRunEntryPointWithESMLoader");
+  });
+
+  it("reads a Python traceback, marking the standard library", () => {
+    const trace = parseStackTrace(PYTHON_CRASH)!;
+    expect(trace.error).toBe(
+      "json.decoder.JSONDecodeError: Expecting value: line 1 column 1 (char 0)",
+    );
+    expect(trace.whole).toBe(true);
+    expect(
+      trace.frames.map((frame) => [frame.file, frame.line, frame.internal]),
+    ).toEqual([
+      ["/work/app.py", 4, false],
+      ["/usr/lib/python3.12/json/__init__.py", 346, true],
+    ]);
+  });
+
+  it("finds nothing in output without frames", () => {
+    expect(parseStackTrace("stdout:\nok\n\nstderr:\ndone")).toBeUndefined();
+    expect(parseStackTrace("Unhandled error: boom")).toBeUndefined();
+  });
+});
+
+let root: Root;
+let container: HTMLDivElement;
+
+beforeEach(() => {
+  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+  container = document.createElement("div");
+  document.body.append(container);
+  root = createRoot(container);
+});
+
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+  vi.unstubAllGlobals();
+});
+
+describe("StackTrace", () => {
+  it("titles the error and folds the framework frames after the caller's", async () => {
+    const opened: StackFrame[] = [];
+    await act(async () =>
+      root.render(
+        <StackTrace
+          trace={NODE_CRASH}
+          defaultOpen
+          onFilePathClick={(frame) => opened.push(frame)}
+        />,
+      ),
+    );
+    const trigger = container.querySelector<HTMLButtonElement>(
+      "button.agentkit-disclosure-summary",
+    )!;
+    expect(trigger.textContent).toBe("ReferenceError: x is not defined");
+    expect(trigger.getAttribute("aria-expanded")).toBe("true");
+    expect(
+      container
+        .querySelector('[data-slot="trace-line"]')
+        ?.getAttribute("data-trace-status"),
+    ).toBe("error");
+
+    const own = Array.from(
+      container.querySelectorAll(
+        ".agentkit-stack-trace-body > ol > .agentkit-stack-frame",
+      ),
+      (frame) => frame.textContent,
+    );
+    expect(own).toEqual(["fsandbox.mjs:1:15", "sandbox.mjs:2:1"]);
+    expect(
+      container
+        .querySelector(".agentkit-stack-frame-location")
+        ?.getAttribute("title"),
+    ).toBe("file:///tmp/run/sandbox.mjs:1:15");
+    const folded = container.querySelector(".agentkit-stack-frames-folded");
+    expect(folded?.querySelector("button")?.textContent).toBe(
+      "3 framework frames",
+    );
+    // Folded frames stay findable in the page.
+    expect(
+      folded
+        ?.querySelector('[data-slot="trace-collapsible-content"]')
+        ?.getAttribute("hidden"),
+    ).toBe("until-found");
+
+    await act(async () =>
+      container
+        .querySelector<HTMLButtonElement>(
+          "button.agentkit-stack-frame-location",
+        )
+        ?.click(),
+    );
+    expect(opened.map((frame) => frame.line)).toEqual([1]);
+  });
+
+  it("copies only the trace", async () => {
+    const writeText = vi.fn(async () => undefined);
+    vi.stubGlobal("navigator", { ...navigator, clipboard: { writeText } });
+    await act(async () => root.render(<StackTrace trace={NODE_CRASH} />));
+    const copy = container.querySelector<HTMLButtonElement>(
+      ".agentkit-stack-trace-actions button",
+    )!;
+    expect(copy.getAttribute("aria-label")).toBe("Copy stack trace");
+    await act(async () => {
+      copy.click();
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+    expect(writeText).toHaveBeenCalledWith(parseStackTrace(NODE_CRASH)!.text);
+  });
+
+  it("renders nothing for text without a stack", async () => {
+    await act(async () => root.render(<StackTrace trace="all good" />));
+    expect(container.innerHTML).toBe("");
+  });
+});

package/src/app/agentkit/react/stack-trace.tsx

@@ -0,0 +1,281 @@
+import { IconAlertTriangle } from "@tabler/icons-react";
+
+import { CodeBlockCopyButton } from "./code-block.js";
+import { useAgentKitLabels } from "./context.js";
+import {
+  Trace,
+  TraceCollapsible,
+  TraceCollapsibleContent,
+  TraceCollapsibleTrigger,
+  TraceIcon,
+  TraceLine,
+  TraceTitle,
+  type TraceCollapsibleOpenProps,
+} from "./trace.js";
+
+export interface StackFrame {
+  text: string;
+  name?: string;
+  /** Without the line and column. */
+  file?: string;
+  line?: number;
+  column?: number;
+  /** Runtime, dependency, or standard library code rather than the caller's. */
+  internal: boolean;
+}
+
+export interface ParsedStackTrace {
+  error: string;
+  frames: StackFrame[];
+  /** The trace exactly as printed, for copying. */
+  text: string;
+  /** Whether the text holds nothing but the trace. */
+  whole: boolean;
+}
+
+const V8_FRAME = /^\s+at\s+(.+)$/;
+const PYTHON_HEADER = /^Traceback \(most recent call last\):\s*$/;
+const PYTHON_FRAME = /^\s+File "([^"]+)", line (\d+)(?:, in (.+))?$/;
+const INTERNAL_FILE =
+  /(?:^|[/\\])node_modules[/\\]|^node:|^internal[/\\]|[/\\]site-packages[/\\]|[/\\]lib[/\\]python\d|^<frozen /;
+
+/** The first V8 or Python trace in `text`, without the output around it. */
+export function parseStackTrace(text: string): ParsedStackTrace | undefined {
+  const lines = text.split("\n");
+  return parseV8(lines) ?? parsePython(lines);
+}
+
+function parseV8(lines: string[]): ParsedStackTrace | undefined {
+  const first = lines.findIndex((line) => V8_FRAME.test(line));
+  const error = lines[first - 1]?.trim();
+  if (first < 1 || !error) return undefined;
+  const frames: StackFrame[] = [];
+  for (const line of lines.slice(first)) {
+    const body = V8_FRAME.exec(line)?.[1];
+    if (body === undefined) break;
+    frames.push(v8Frame(body.trim()));
+  }
+  return result(lines, first - 1, first + frames.length, error, frames);
+}
+
+function v8Frame(body: string): StackFrame {
+  const named = /^(.*?) \((.+)\)$/.exec(body);
+  const name = group(named, 1)?.replace(/^async /, "") || undefined;
+  const location = group(named, 2) ?? body.replace(/^async /, "");
+  const position = /^(.*?):(\d+):(\d+)$/.exec(location);
+  const file = group(position, 1) ?? location;
+  const line = group(position, 2);
+  const column = group(position, 3);
+  return {
+    text: `at ${body}`,
+    ...(name ? { name } : {}),
+    file,
+    ...(line && column ? { line: Number(line), column: Number(column) } : {}),
+    internal: INTERNAL_FILE.test(file),
+  };
+}
+
+function group(
+  match: RegExpExecArray | null,
+  index: number,
+): string | undefined {
+  return match?.[index];
+}
+
+function parsePython(lines: string[]): ParsedStackTrace | undefined {
+  const start = lines.findIndex((line) => PYTHON_HEADER.test(line));
+  if (start < 0) return undefined;
+  const frames: StackFrame[] = [];
+  let index = start + 1;
+  for (const line of lines.slice(start + 1)) {
+    const [, file, number, name] = PYTHON_FRAME.exec(line) ?? [];
+    if (file && number) {
+      frames.push({
+        text: line.trim(),
+        ...(name ? { name } : {}),
+        file,
+        line: Number(number),
+        internal: INTERNAL_FILE.test(file),
+      });
+    } else if (!/^\s/.test(line)) {
+      break;
+    }
+    index++;
+  }
+  const error = lines[index]?.trim();
+  if (!error || !frames.length) return undefined;
+  return result(lines, start, index + 1, error, frames);
+}
+
+function result(
+  lines: string[],
+  start: number,
+  end: number,
+  error: string,
+  frames: StackFrame[],
+): ParsedStackTrace {
+  const outside = [...lines.slice(0, start), ...lines.slice(end)];
+  return {
+    error,
+    frames,
+    text: lines.slice(start, end).join("\n"),
+    whole: outside.every((line) => !line.trim()),
+  };
+}
+
+/** Copy sits beside the trigger: a button cannot nest in the trigger. */
+export function StackTrace({
+  trace,
+  defaultOpen,
+  onFilePathClick,
+  className,
+  ...openProps
+}: TraceCollapsibleOpenProps & {
+  trace: string | ParsedStackTrace;
+  defaultOpen?: boolean;
+  /** Makes the caller's frames links to their file and line. */
+  onFilePathClick?: (frame: StackFrame) => void;
+  className?: string;
+}) {
+  const labels = useAgentKitLabels();
+  const parsed = typeof trace === "string" ? parseStackTrace(trace) : trace;
+  if (!parsed) return null;
+  return (
+    <Trace
+      data-slot="stack-trace"
+      className={
+        className ? `agentkit-stack-trace ${className}` : "agentkit-stack-trace"
+      }
+    >
+      <TraceCollapsible {...openProps} defaultOpen={defaultOpen}>
+        <div className="agentkit-stack-trace-row">
+          <TraceCollapsibleTrigger>
+            <TraceLine status="error">
+              <TraceIcon>
+                <IconAlertTriangle
+                  aria-hidden="true"
+                  className="agentkit-icon"
+                />
+              </TraceIcon>
+              <TraceTitle>{parsed.error}</TraceTitle>
+            </TraceLine>
+          </TraceCollapsibleTrigger>
+          <span className="agentkit-stack-trace-actions">
+            <CodeBlockCopyButton
+              value={parsed.text}
+              label={labels.workStepCopyStackTrace}
+            />
+          </span>
+        </div>
+        <TraceCollapsibleContent
+          keepMounted
+          className="agentkit-stack-trace-body"
+        >
+          {/* The title truncates, so the full error leads the frames. */}
+          <p className="agentkit-stack-trace-error">{parsed.error}</p>
+          <StackTraceFrames
+            frames={parsed.frames}
+            onFilePathClick={onFilePathClick}
+          />
+        </TraceCollapsibleContent>
+      </TraceCollapsible>
+    </Trace>
+  );
+}
+
+export function StackTraceFrames({
+  frames,
+  onFilePathClick,
+}: {
+  frames: StackFrame[];
+  onFilePathClick?: ((frame: StackFrame) => void) | undefined;
+}) {
+  const labels = useAgentKitLabels();
+  const runs: Array<{
+    start: number;
+    internal: boolean;
+    frames: StackFrame[];
+  }> = [];
+  frames.forEach((frame, index) => {
+    const last = runs.at(-1);
+    if (last?.internal && frame.internal) last.frames.push(frame);
+    else runs.push({ start: index, internal: frame.internal, frames: [frame] });
+  });
+  const items = runs.map(({ start, frames: run }) => {
+    if (run.length < 2) {
+      return run.map((frame) => (
+        <StackTraceFrame
+          key={start}
+          frame={frame}
+          onFilePathClick={onFilePathClick}
+        />
+      ));
+    }
+    return (
+      <li key={start} className="agentkit-stack-frames-folded">
+        <TraceCollapsible>
+          <TraceCollapsibleTrigger>
+            <TraceLine>
+              <span className="agentkit-disclosure-label">
+                {labels.workStepFrameworkFrames.replace(
+                  "{{count}}",
+                  () => `${run.length}`,
+                )}
+              </span>
+            </TraceLine>
+          </TraceCollapsibleTrigger>
+          <TraceCollapsibleContent keepMounted>
+            <ol className="agentkit-stack-frames">
+              {run.map((frame, offset) => (
+                <StackTraceFrame key={start + offset} frame={frame} />
+              ))}
+            </ol>
+          </TraceCollapsibleContent>
+        </TraceCollapsible>
+      </li>
+    );
+  });
+  return <ol className="agentkit-stack-frames">{items}</ol>;
+}
+
+function StackTraceFrame({
+  frame,
+  onFilePathClick,
+}: {
+  frame: StackFrame;
+  onFilePathClick?: ((frame: StackFrame) => void) | undefined;
+}) {
+  const position =
+    frame.line !== undefined
+      ? `:${frame.line}${frame.column !== undefined ? `:${frame.column}` : ""}`
+      : "";
+  // The file name only, so a long path never hides the line number.
+  const location = frame.file
+    ? `${frame.file.split(/[/\\]/).at(-1) || frame.file}${position}`
+    : frame.text;
+  const fullLocation = frame.file ? `${frame.file}${position}` : frame.text;
+  return (
+    <li
+      className="agentkit-stack-frame"
+      data-internal={frame.internal ? "true" : undefined}
+    >
+      {frame.name ? (
+        <span className="agentkit-stack-frame-name">{frame.name}</span>
+      ) : null}
+      {onFilePathClick && frame.file && !frame.internal ? (
+        <button
+          type="button"
+          className="agentkit-stack-frame-location"
+          title={fullLocation}
+          onClick={() => onFilePathClick(frame)}
+        >
+          {location}
+        </button>
+      ) : (
+        <span className="agentkit-stack-frame-location" title={fullLocation}>
+          {location}
+        </span>
+      )}
+    </li>
+  );
+}

package/src/app/agentkit/react/stop-button.spec.tsx

@@ -14,9 +14,14 @@ const mocks = vi.hoisted(() => ({
   activeRunIds: [] as string[],
   runs: {} as Record<string, { status: string }>,
   cancel: vi.fn(async () => undefined),
+  requestComposerFocus: vi.fn(),
 }));
 
 vi.mock("./context.js", () => ({
+  useAgentKit: () => ({
+    requestComposerFocus: mocks.requestComposerFocus,
+    threadId: "thread-1",
+  }),
   useAgentThread: () => ({
     activeRunIds: mocks.activeRunIds,
     runs: mocks.runs,
@@ -48,6 +53,7 @@ describe("useAgentKitStopButton", () => {
     mocks.cancel.mockReset();
     mocks.cancel.mockResolvedValue(undefined);
     onError.mockClear();
+    mocks.requestComposerFocus.mockClear();
     beforeCancel = undefined;
   });
 
@@ -249,6 +255,40 @@ describe("useAgentKitStopButton", () => {
     await act(async () => cancelled.resolve(undefined));
   });
 
+  it.each([
+    ["keyboard", 0, 1],
+    ["pointer", 1, 0],
+  ] as const)(
+    "after a %s stop, hands focus to the composer only for the keyboard",
+    async (_input, detail, focusCalls) => {
+      mocks.activeRunIds = ["run-1"];
+      await render();
+      await act(async () => {
+        container
+          .querySelector('[data-agent-composer-slot="stop-button"]')
+          ?.dispatchEvent(new MouseEvent("click", { bubbles: true, detail }));
+      });
+      mocks.activeRunIds = [];
+      await act(async () => root.render(<Harness />));
+      expect(container.querySelector("button")).toBeNull();
+      expect(mocks.requestComposerFocus).toHaveBeenCalledTimes(focusCalls);
+    },
+  );
+
+  it("leaves focus alone when beforeCancel keeps the run going", async () => {
+    mocks.activeRunIds = ["run-1"];
+    beforeCancel = () => false;
+    await render();
+    await act(async () => {
+      container
+        .querySelector("button")
+        ?.dispatchEvent(new MouseEvent("click", { bubbles: true, detail: 0 }));
+    });
+    mocks.activeRunIds = [];
+    await act(async () => root.render(<Harness />));
+    expect(mocks.requestComposerFocus).not.toHaveBeenCalled();
+  });
+
   it("hides Stop once every retained run is terminal", async () => {
     mocks.activeRunIds = ["run-1"];
     mocks.runs = { "run-1": { status: "completed" } };

package/src/app/agentkit/react/stop-button.tsx

@@ -1,9 +1,10 @@
 import { hasActiveAgentRuns } from "@agent-native/agentkit";
 import { IconPlayerStopFilled } from "@tabler/icons-react";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import { Tooltip } from "../../../design-system/index.js";
 import {
+  useAgentKit,
   useAgentKitControl,
   useAgentKitSubmissionStarting,
   useAgentThread,
@@ -53,7 +54,17 @@ export function useAgentKitStopButton(options: {
   onErrorRef.current = options.onError;
   const beforeCancelRef = useRef(options.beforeCancel);
   beforeCancelRef.current = options.beforeCancel;
-  if (!running && !starting) return undefined;
+  const { requestComposerFocus, threadId: providerThreadId } = useAgentKit();
+  // Keyboard stops only: refocusing the composer on touch opens the keyboard.
+  const refocusComposerRef = useRef(false);
+  const visible = running || starting;
+  const focusThreadId = options.threadId ?? providerThreadId;
+  useEffect(() => {
+    if (visible || !refocusComposerRef.current) return;
+    refocusComposerRef.current = false;
+    requestComposerFocus(focusThreadId);
+  }, [focusThreadId, requestComposerFocus, visible]);
+  if (!visible) return undefined;
   const { label } = options;
   return (
     <Tooltip
@@ -61,8 +72,10 @@ export function useAgentKitStopButton(options: {
       trigger={
         <button
           type="button"
-          onClick={() => {
+          onClick={(event) => {
             if (stoppingRef.current === activeRunKey) return;
+            // Enter and Space fire a click with no pointer detail.
+            refocusComposerRef.current = event.detail === 0;
             const runKey = activeRunKey;
             stoppingRef.current = runKey;
             setStoppingRunKey(runKey);
@@ -74,11 +87,15 @@ export function useAgentKitStopButton(options: {
             const knownRunIds = running ? thread.activeRunIds : undefined;
             void (async () => {
               const beforeCancel = beforeCancelRef.current;
-              if (beforeCancel && (await beforeCancel()) === false) return;
+              if (beforeCancel && (await beforeCancel()) === false) {
+                refocusComposerRef.current = false;
+                return;
+              }
               const runIds = knownRunIds ?? (await control.runIdsOnceStarted());
               await Promise.all(runIds.map((runId) => control.cancel(runId)));
             })()
               .catch((error: unknown) => {
+                refocusComposerRef.current = false;
                 onErrorRef.current(
                   error instanceof Error ? error : new Error(String(error)),
                 );
@@ -89,7 +106,7 @@ export function useAgentKitStopButton(options: {
           aria-busy={stopping || undefined}
           disabled={stopping}
           data-agent-composer-slot="stop-button"
-          className={`flex size-[var(--agentkit-composer-primary-control-size,2rem)] shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground transition-[opacity,background-color,color] duration-150 hover:opacity-90 disabled:cursor-default disabled:opacity-35 ${STOP_BESIDE_PRIMARY}`}
+          className={`flex size-[var(--agentkit-composer-primary-control-size,2rem)] shrink-0 items-center justify-center rounded-[var(--agent-kit-radius-sm,0.5rem)] bg-primary text-primary-foreground transition-[opacity,background-color,color] duration-150 hover:opacity-90 disabled:cursor-default disabled:opacity-35 ${STOP_BESIDE_PRIMARY}`}
         >
           <IconPlayerStopFilled aria-hidden="true" className="size-4" />
         </button>