feat(web): add theme-owned semantic icon theming

Author: pallyoung

packages/web/src/components/ui/confirm-dialog/index.test.tsx

@@ -71,9 +71,12 @@ describe("ConfirmDialog", () => {
     );
 
     expect(screen.getByRole("button", { name: "Delete" })).toHaveClass("btn", "btn-danger");
-    expect(screen.getByText("Delete file").closest(".modal-title")).toContainElement(
-      document.querySelector("svg")
-    );
+    expect(
+      screen
+        .getByText("Delete file")
+        .closest(".modal-title")
+        ?.querySelector('[data-icon-semantic="state.warning"]')
+    ).toBeTruthy();
   });
 
   it("accepts rich ReactNode descriptions", () => {

packages/web/src/components/ui/confirm-dialog/index.tsx

@@ -1,9 +1,10 @@
 import clsx from "clsx";
-import { AlertTriangle, X } from "lucide-react";
+import { X } from "lucide-react";
 import type { ReactNode } from "react";
 import { Button, type ButtonProps } from "../button";
 import { IconButton } from "../icon-button";
 import { Modal, ModalBody, ModalFooter, ModalHeader, type ModalProps, ModalTitle } from "../modal";
+import { ThemedIcon } from "../themed-icon";
 import styles from "./index.module.css";
 
 export type ConfirmDialogTone = "default" | "danger";
@@ -65,7 +66,12 @@ export function ConfirmDialog({
       <ModalHeader>
         <ModalTitle className={clsx(tone === "danger" ? styles.titleDanger : undefined)}>
           {tone === "danger" ? (
-            <AlertTriangle aria-hidden="true" className={styles.iconDanger} size={16} />
+            <ThemedIcon
+              aria-hidden="true"
+              className={styles.iconDanger}
+              semantic="state.warning"
+              size={16}
+            />
           ) : null}
           <span>{title}</span>
         </ModalTitle>

packages/web/src/components/ui/index.ts

@@ -54,6 +54,8 @@ export type { TagColor, TagProps, TagSize } from "./tag";
 export { Tag } from "./tag";
 export type { TextareaProps, TextareaSize } from "./textarea";
 export { Textarea } from "./textarea";
+export type { ThemedIconProps } from "./themed-icon";
+export { ThemedIcon } from "./themed-icon";
 export type { ToastProps, ToastTone, ToastViewportProps } from "./toast";
 export { Toast, ToastViewport } from "./toast";
 export type { TooltipProps } from "./tooltip";

packages/web/src/components/ui/themed-icon/index.module.css

@@ -0,0 +1,12 @@
+.root {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  line-height: 0;
+  color: inherit;
+}
+
+.root svg {
+  display: block;
+}

packages/web/src/components/ui/themed-icon/index.test.tsx

@@ -0,0 +1,75 @@
+import { render, screen } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { describe, expect, it } from "vitest";
+import { themeAtom } from "../../../atoms/app-ui";
+import { ThemedIcon } from ".";
+
+describe("ThemedIcon", () => {
+  it("renders the resolved icon with stable tone and surface classes", () => {
+    const store = createStore();
+    store.set(themeAtom, "mint-dark");
+
+    render(
+      <Provider store={store}>
+        <ThemedIcon semantic="state.warning" size={16} />
+      </Provider>
+    );
+
+    const icon = screen.getByTestId("themed-icon");
+    expect(icon).toHaveAttribute("data-icon-semantic", "state.warning");
+    expect(icon).toHaveClass(
+      "themed-icon",
+      "themed-icon--tone-warning",
+      "themed-icon--surface-warning"
+    );
+    expect(icon.querySelector("svg")).toBeInTheDocument();
+  });
+
+  it("omits announcement for decorative icons", () => {
+    const store = createStore();
+    store.set(themeAtom, "mint-dark");
+
+    render(
+      <Provider store={store}>
+        <ThemedIcon semantic="nav.settings" />
+      </Provider>
+    );
+
+    expect(screen.getByTestId("themed-icon")).toHaveAttribute("aria-hidden", "true");
+  });
+
+  it("reads the active theme and applies theme-specific presentation overrides", () => {
+    const store = createStore();
+    store.set(themeAtom, "hc-dark");
+
+    render(
+      <Provider store={store}>
+        <ThemedIcon semantic="file.folder.closed" size={18} />
+      </Provider>
+    );
+
+    const icon = screen.getByTestId("themed-icon");
+    const svg = icon.querySelector("svg");
+
+    expect(icon).toHaveClass("themed-icon--tone-warning", "themed-icon--surface-none");
+    expect(svg).toHaveAttribute("stroke-width", "2.25");
+    expect(svg).toHaveAttribute("width", "18");
+    expect(svg).toHaveAttribute("height", "18");
+  });
+
+  it("allows semantic icons to participate in accessibility when decorative is false", () => {
+    const store = createStore();
+    store.set(themeAtom, "mint-dark");
+
+    render(
+      <Provider store={store}>
+        <ThemedIcon aria-label="Workspace warning" decorative={false} semantic="state.warning" />
+      </Provider>
+    );
+
+    const icon = screen.getByLabelText("Workspace warning");
+
+    expect(icon).toHaveAttribute("role", "img");
+    expect(icon).not.toHaveAttribute("aria-hidden");
+  });
+});

packages/web/src/components/ui/themed-icon/index.tsx

@@ -0,0 +1,44 @@
+import clsx from "clsx";
+import { useAtomValue } from "jotai";
+import type { ComponentPropsWithoutRef } from "react";
+import { themeAtom } from "../../../atoms/app-ui";
+import { getIconPresentation, type IconSemantic } from "../../../theme";
+import styles from "./index.module.css";
+
+export interface ThemedIconProps extends Omit<ComponentPropsWithoutRef<"span">, "children"> {
+  readonly decorative?: boolean;
+  readonly semantic: IconSemantic;
+  readonly size?: number;
+}
+
+export function ThemedIcon({
+  className,
+  decorative = true,
+  role,
+  semantic,
+  size = 14,
+  ...spanProps
+}: ThemedIconProps) {
+  const themeId = useAtomValue(themeAtom);
+  const presentation = getIconPresentation(themeId, semantic);
+  const Icon = presentation.Icon;
+
+  return (
+    <span
+      {...spanProps}
+      aria-hidden={decorative ? true : undefined}
+      className={clsx(
+        styles.root,
+        "themed-icon",
+        `themed-icon--tone-${presentation.tone}`,
+        `themed-icon--surface-${presentation.surface}`,
+        className
+      )}
+      data-icon-semantic={semantic}
+      data-testid={spanProps["data-testid"] ?? "themed-icon"}
+      role={decorative ? undefined : (role ?? "img")}
+    >
+      <Icon size={size} strokeWidth={presentation.strokeWidth} />
+    </span>
+  );
+}

packages/web/src/components/ui/toast/index.test.tsx

@@ -48,6 +48,8 @@ describe("Toast", () => {
       <Toast closeLabel="Close notification" onDismiss={onDismiss} title="Saved" tone="info" />
     );
 
+    expect(screen.getByTestId("themed-icon")).toHaveAttribute("data-icon-semantic", "state.info");
+
     const closeButton = screen.getByRole("button", { name: "Close notification" });
     expect(closeButton).toHaveClass("btn", "btn-ghost", "btn-sm", "toast__close");
 
@@ -80,6 +82,15 @@ describe("Toast", () => {
     expect(onClick).toHaveBeenCalledTimes(1);
   });
 
+  it("uses semantic default icons for toast tones when no custom icon is provided", () => {
+    render(<Toast onDismiss={vi.fn()} title="Saved" tone="success" />);
+
+    expect(screen.getByTestId("themed-icon")).toHaveAttribute(
+      "data-icon-semantic",
+      "state.success"
+    );
+  });
+
   it("does not make clickable alerts keyboard-focusable or route nested button key activation through the root click handler", async () => {
     const user = userEvent.setup();
     const onClick = vi.fn();

packages/web/src/components/ui/toast/index.tsx

@@ -2,6 +2,7 @@ import clsx from "clsx";
 import { X } from "lucide-react";
 import type { HTMLAttributes, ReactNode } from "react";
 import { IconButton } from "../icon-button";
+import { ThemedIcon } from "../themed-icon";
 import styles from "./index.module.css";
 
 export type ToastTone = "success" | "error" | "warning" | "info";
@@ -37,6 +38,13 @@ const legacyToneClassMap: Record<ToastTone, string> = {
   info: "toast--info",
 };
 
+const toastSemanticByTone = {
+  success: "state.success",
+  error: "state.error",
+  warning: "state.warning",
+  info: "state.info",
+} as const;
+
 export function ToastViewport({
   children,
   className,
@@ -74,6 +82,9 @@ export function Toast({
 }: ToastProps) {
   const clickable = typeof onClick === "function";
   const { ["aria-live"]: ariaLive, ...restProps } = props;
+  const resolvedIcon = icon ?? (
+    <ThemedIcon className="toast__icon-symbol" semantic={toastSemanticByTone[tone]} size={16} />
+  );
 
   return (
     <div
@@ -90,9 +101,9 @@ export function Toast({
       onClick={onClick}
       role="alert"
     >
-      {icon ? (
+      {resolvedIcon ? (
         <span aria-hidden="true" className={clsx(styles.icon, "toast__icon")}>
-          {icon}
+          {resolvedIcon}
         </span>
       ) : null}
 

packages/web/src/features/agent-panes/views/shared/draft-launcher.test.tsx

@@ -86,4 +86,23 @@ describe("DraftLauncher", () => {
     expect(onSplitPane).toHaveBeenNthCalledWith(2, "pane-1", "vertical");
     expect(onClosePane).toHaveBeenCalledWith("pane-1");
   });
+
+  it("renders provider cards with semantic business icons", () => {
+    const store = createStore();
+
+    store.set(localeAtom, "en");
+    store.set(wsClientAtom, {
+      sendCommand: vi.fn(),
+      subscribe: vi.fn(() => () => {}),
+    } as never);
+
+    const { container } = render(
+      <Provider store={store}>
+        <DraftLauncher workspaceId="ws-123" />
+      </Provider>
+    );
+
+    expect(container.querySelector('[data-icon-semantic="agent.provider.claude"]')).toBeTruthy();
+    expect(container.querySelector('[data-icon-semantic="agent.provider.codex"]')).toBeTruthy();
+  });
 });

packages/web/src/features/agent-panes/views/shared/draft-launcher.tsx

@@ -1,10 +1,10 @@
 import type { Session } from "@coder-studio/core";
 import { useAtomValue, useSetAtom } from "jotai";
-import { ArrowRight, Bot, FlipHorizontal, FlipVertical, Sparkles, X } from "lucide-react";
+import { ArrowRight, FlipHorizontal, FlipVertical, X } from "lucide-react";
 import type { FC } from "react";
 import { dispatchCommandAtom } from "../../../../atoms/connection";
 import { sessionsAtom } from "../../../../atoms/sessions";
-import { Button, IconButton, StatusDot, Tag, Tooltip } from "../../../../components/ui";
+import { Button, IconButton, StatusDot, Tag, ThemedIcon, Tooltip } from "../../../../components/ui";
 import { useTranslation } from "../../../../lib/i18n";
 import { type ProviderId, useProviderLauncher } from "../../actions/use-provider-launcher";
 
@@ -174,15 +174,15 @@ export const DraftLauncher: FC<DraftLauncherProps> = ({
                   id: "claude",
                   title: "Claude",
                   meta: "analysis",
-                  icon: <Sparkles size={18} />,
+                  icon: <ThemedIcon semantic="agent.provider.claude" size={18} />,
                   description: "更适合长上下文梳理、方案分析和代码审查。",
                   className: "agent-provider-card-claude",
                 },
                 {
                   id: "codex",
                   title: "Codex",
                   meta: "workspace",
-                  icon: <Bot size={18} />,
+                  icon: <ThemedIcon semantic="agent.provider.codex" size={18} />,
                   description: "更适合终端操作、直接改文件和逐步修复问题。",
                   className: "agent-provider-card-codex",
                 },