From 7efa38c3845443c3c180ca8fd2ead15862cd80d9 Mon Sep 17 00:00:00 2001
From: Bryan Helmkamp <bryan@brynary.com>
Date: Sun, 24 May 2026 17:30:14 -0400
Subject: [PATCH] Add icons to Ask Fabro preset prompts

Gives each of the four empty-state suggestions a Heroicon to aid
scannability: warning triangle for "Surface errors", bolt for
"Analyze performance", map for "Review key decisions", and lightbulb
for "Suggest improvements".

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../app/components/chats/sidebar-welcome.tsx  | 26 +++++++++++++++----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/apps/fabro-web/app/components/chats/sidebar-welcome.tsx b/apps/fabro-web/app/components/chats/sidebar-welcome.tsx
index c8e9f1fa7..fecd7eabe 100644
--- a/apps/fabro-web/app/components/chats/sidebar-welcome.tsx
+++ b/apps/fabro-web/app/components/chats/sidebar-welcome.tsx
@@ -1,4 +1,10 @@
 import { ThreadPrimitive } from "@assistant-ui/react";
+import {
+  BoltIcon,
+  ExclamationTriangleIcon,
+  LightBulbIcon,
+  MapIcon,
+} from "@heroicons/react/16/solid";
 
 /**
  * Example prompts shown on the empty Ask-Fabro thread. Each `prompt` is sent
@@ -6,24 +12,28 @@ import { ThreadPrimitive } from "@assistant-ui/react";
  */
 const EXAMPLE_PROMPTS = [
   {
+    Icon: ExclamationTriangleIcon,
     heading: "Surface errors",
     description: "Find errors, warnings, and failed steps in this run.",
     prompt:
       "Analyze this workflow run for any errors, exceptions, failed operations, or unexpected behavior. Include details about what went wrong, when it occurred, and potential causes or fixes.",
   },
   {
+    Icon: BoltIcon,
     heading: "Analyze performance",
     description: "Spot the slowest stages and where time was spent.",
     prompt:
       "Analyze the performance of this workflow run, including tool execution times, API call latencies, timeouts, and any bottlenecks. Compare timing across similar operations and identify optimization opportunities.",
   },
   {
+    Icon: MapIcon,
     heading: "Review key decisions",
     description: "Recap the important choices the agent made.",
     prompt:
       "Trace the workflow run flow, including key decision points, branching logic, tool selection reasoning, and how the assistant responded to different inputs or contexts.",
   },
   {
+    Icon: LightBulbIcon,
     heading: "Suggest improvements",
     description: "Ideas to make this workflow faster and more reliable.",
     prompt:
@@ -47,12 +57,18 @@ export default function SidebarWelcome() {
               <ThreadPrimitive.Suggestion asChild prompt={example.prompt} send>
                 <button
                   type="button"
-                  className="flex w-full flex-col gap-1 rounded-xl bg-panel-alt/60 px-4 py-3.5 text-left ring-1 ring-line transition-colors hover:bg-panel-alt hover:ring-line-strong focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-500"
+                  className="flex w-full items-start gap-3 rounded-xl bg-panel-alt/60 px-4 py-3.5 text-left ring-1 ring-line transition-colors hover:bg-panel-alt hover:ring-line-strong focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-500"
                 >
-                  <p className="text-sm font-medium text-fg">
-                    {example.heading}
-                  </p>
-                  <p className="text-xs text-fg-3">{example.description}</p>
+                  <example.Icon
+                    aria-hidden="true"
+                    className="size-4 h-lh shrink-0 fill-fg-3"
+                  />
+                  <div className="flex flex-col gap-1">
+                    <p className="text-sm font-medium text-fg">
+                      {example.heading}
+                    </p>
+                    <p className="text-xs text-fg-3">{example.description}</p>
+                  </div>
                 </button>
               </ThreadPrimitive.Suggestion>
             </li>