fix(stories): inline SVG for WithIcon stories so they render reliably

The Wikipedia-hosted PNG used in the AppListItem and AppDetailPanel
WithIcon stories returned a broken image in Storybook (rate-limited /
hot-link blocked). Replace it with an inline SVG sun icon as a data
URI so the stories render offline, in Chromatic, and on any network.

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

Author: cliffhall

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

@@ -53,17 +53,15 @@ const multiParamTool: Tool = {
   },
 };
 
+// Inline SVG so stories render offline and in Chromatic without external fetches.
+const SUN_ICON_SVG =
+  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='gold'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cg stroke='gold' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='12' y1='2' x2='12' y2='5'/%3E%3Cline x1='12' y1='19' x2='12' y2='22'/%3E%3Cline x1='2' y1='12' x2='5' y2='12'/%3E%3Cline x1='19' y1='12' x2='22' y2='12'/%3E%3Cline x1='4.93' y1='4.93' x2='7.05' y2='7.05'/%3E%3Cline x1='16.95' y1='16.95' x2='19.07' y2='19.07'/%3E%3Cline x1='4.93' y1='19.07' x2='7.05' y2='16.95'/%3E%3Cline x1='16.95' y1='7.05' x2='19.07' y2='4.93'/%3E%3C/g%3E%3C/svg%3E";
+
 const iconTool: Tool = {
   name: "weather_widget",
   title: "Weather Widget",
   description: "Displays the current weather for a given city.",
-  icons: [
-    {
-      src: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Sun_in_X-Ray.png/120px-Sun_in_X-Ray.png",
-      mimeType: "image/png",
-      sizes: ["120x120"],
-    },
-  ],
+  icons: [{ src: SUN_ICON_SVG, mimeType: "image/svg+xml" }],
   inputSchema: {
     type: "object",
     properties: {

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

@@ -27,18 +27,16 @@ const noDescriptionTool: Tool = {
   inputSchema: { type: "object" },
 };
 
+// Inline SVG so stories render offline and in Chromatic without external fetches.
+const SUN_ICON_SVG =
+  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='gold'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cg stroke='gold' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='12' y1='2' x2='12' y2='5'/%3E%3Cline x1='12' y1='19' x2='12' y2='22'/%3E%3Cline x1='2' y1='12' x2='5' y2='12'/%3E%3Cline x1='19' y1='12' x2='22' y2='12'/%3E%3Cline x1='4.93' y1='4.93' x2='7.05' y2='7.05'/%3E%3Cline x1='16.95' y1='16.95' x2='19.07' y2='19.07'/%3E%3Cline x1='4.93' y1='19.07' x2='7.05' y2='16.95'/%3E%3Cline x1='16.95' y1='7.05' x2='19.07' y2='4.93'/%3E%3C/g%3E%3C/svg%3E";
+
 const withIconTool: Tool = {
   name: "weather_widget",
   title: "Weather Widget",
   description:
     "Displays the current weather and a five-day forecast for any city.",
-  icons: [
-    {
-      src: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Sun_in_X-Ray.png/120px-Sun_in_X-Ray.png",
-      mimeType: "image/png",
-      sizes: ["120x120"],
-    },
-  ],
+  icons: [{ src: SUN_ICON_SVG, mimeType: "image/svg+xml" }],
   inputSchema: { type: "object" },
 };