feat(apps): render tool.icons on ToolListItem and ToolDetailPanel (#1264) (#1293)

* feat(apps): render tool.icons on ToolListItem (#1264)

Add icon rendering to ToolListItem so the Tools sidebar matches the
Apps sidebar treatment. Falls back gracefully when tool.icons is absent.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(stories): use #228be6 in ToolListItem WithIcon data URL

The source SVG had %23228be6 pre-encoded, but encodeURIComponent then
re-escaped the % to %25, leaving fill="%23228be6" in the decoded SVG
and making the icon render black instead of Mantine blue.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* feat(apps): render tool.icons on ToolDetailPanel (#1264)

Show the tool icon next to the title in the detail panel, matching the
header icon size used in AppsScreen (24x24, fit: contain). Adds a
WithIcon story and tests for icon-present/icon-absent states.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

clients/web/src/components/groups/ToolDetailPanel/ToolDetailPanel.stories.tsx

@@ -71,6 +71,26 @@ const longQueryTool: Tool = {
   },
 };
 
+const ICON_DATA_URL =
+  "data:image/svg+xml;utf8," +
+  encodeURIComponent(
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#228be6"><circle cx="12" cy="12" r="10"/></svg>',
+  );
+
+const iconedTool: Tool = {
+  name: "send_message",
+  title: "Send Message",
+  description: "Sends a message to the recipient",
+  icons: [{ src: ICON_DATA_URL }],
+  inputSchema: {
+    type: "object",
+    properties: {
+      message: { type: "string", description: "The message to send" },
+    },
+    required: ["message"],
+  },
+};
+
 const batchProcessTool: Tool = {
   name: "batch_process",
   description: "Processes items in batch",
@@ -94,6 +114,12 @@ export const MultipleParams: Story = {
   },
 };
 
+export const WithIcon: Story = {
+  args: {
+    tool: iconedTool,
+  },
+};
+
 export const WithAnnotations: Story = {
   args: {
     tool: deleteRecordsTool,

clients/web/src/components/groups/ToolDetailPanel/ToolDetailPanel.test.tsx

@@ -27,6 +27,18 @@ const titledTool: Tool = {
   },
 };
 
+const ICON_SRC = "data:image/svg+xml,%3Csvg/%3E";
+
+const iconedTool: Tool = {
+  name: "send_message",
+  title: "Send Message",
+  icons: [{ src: ICON_SRC }],
+  inputSchema: {
+    type: "object",
+    properties: {},
+  },
+};
+
 const annotatedTool: Tool = {
   name: "delete_records",
   description: "Deletes records",
@@ -66,6 +78,17 @@ describe("ToolDetailPanel", () => {
     ).toBeInTheDocument();
   });
 
+  it("renders the first icon when tool.icons is present", () => {
+    renderWithMantine(<ToolDetailPanel {...baseProps} tool={iconedTool} />);
+    const img = screen.getByRole("presentation");
+    expect(img).toHaveAttribute("src", ICON_SRC);
+  });
+
+  it("does not render an icon when tool.icons is missing", () => {
+    renderWithMantine(<ToolDetailPanel {...baseProps} tool={simpleTool} />);
+    expect(screen.queryByRole("presentation")).not.toBeInTheDocument();
+  });
+
   it("does not render the description when none is provided", () => {
     renderWithMantine(<ToolDetailPanel {...baseProps} tool={simpleTool} />);
     expect(

clients/web/src/components/groups/ToolDetailPanel/ToolDetailPanel.tsx

@@ -1,4 +1,4 @@
-import { Button, Divider, Group, Stack, Text } from "@mantine/core";
+import { Button, Divider, Group, Image, Stack, Text } from "@mantine/core";
 import type {
   ProgressNotification,
   Tool,
@@ -24,6 +24,19 @@ export interface ToolDetailPanelProps {
   onCancel: () => void;
 }
 
+const TitleRow = Group.withProps({
+  gap: "sm",
+  wrap: "nowrap",
+  align: "center",
+  miw: 0,
+});
+
+const ToolIcon = Image.withProps({
+  w: 24,
+  h: 24,
+  fit: "contain",
+});
+
 const ToolTitle = Text.withProps({
   fw: 700,
   size: "lg",
@@ -59,11 +72,15 @@ export function ToolDetailPanel({
   onExecute,
   onCancel,
 }: ToolDetailPanelProps) {
-  const { name, title, description, annotations, inputSchema } = tool;
+  const { name, title, description, icons, annotations, inputSchema } = tool;
+  const iconSrc = icons?.[0]?.src;
 
   return (
     <Stack gap="md" miw={0}>
-      <ToolTitle>{resolveDisplayLabel(name, title)}</ToolTitle>
+      <TitleRow>
+        {iconSrc && <ToolIcon src={iconSrc} alt="" />}
+        <ToolTitle>{resolveDisplayLabel(name, title)}</ToolTitle>
+      </TitleRow>
       {hasAnyAnnotation(annotations) && annotations && (
         <Group gap="xs">
           {annotations.readOnlyHint && (