From e8639e552e4540817d3d5a906180ff37e393a8a1 Mon Sep 17 00:00:00 2001
From: Bryan Helmkamp <19+brynary@users.noreply.github.com>
Date: Sun, 24 May 2026 00:50:14 -0400
Subject: [PATCH] Quiet stage insights sidebar polish (#381)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Three small UX tweaks to the agent stage insights sidebar so it reads as
informational rather than alarming.

- **Permission badge stays neutral.** Removed `text-coral` (red) from
Full and `text-amber` (orange) from Read/write — every level now sits in
the foreground palette (`fg-2` / `fg-3`). Icon shape (lock / pencil /
bolt) carries the level distinction and the badge label spells it out.
- **Collapsed footer always uses the muted lock icon.** The footer is a
static affordance, not a danger signal, so a Full-access stage no longer
splashes a colored icon in the corner of the page.
- **Hide the Todos section when there are zero todos.** No header row,
no `0/0` count, no "No todos." line — saves vertical space on stages
where the agent never used TodoWrite.

## Test plan

- [x] `bun run typecheck` (apps/fabro-web)
- [x] `bun test app/components/stage-insights-sidebar.test.tsx` (8/8
pass)
- [ ] Visually confirm in a browser: Full-access agent stage shows a
neutral bolt + "Full access" label (no red); collapsed sidebar footer
shows a single muted lock regardless of level; stage with zero todos has
no Todos section.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../app/components/stage-insights-sidebar.tsx | 34 ++++++++++++-------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/apps/fabro-web/app/components/stage-insights-sidebar.tsx b/apps/fabro-web/app/components/stage-insights-sidebar.tsx
index 91ad60cd1..71ffa5094 100644
--- a/apps/fabro-web/app/components/stage-insights-sidebar.tsx
+++ b/apps/fabro-web/app/components/stage-insights-sidebar.tsx
@@ -104,16 +104,18 @@ export function StageInsightsSidebar({ stage, contextWindow }: StageInsightsSide
       </div>
 
       <div className="mt-3 flex flex-col gap-4">
-        <CollapsibleSection
-          sectionKey="todos"
-          title="Todos"
-          icon={ListBulletIcon}
-          collapsed={collapsed}
-          count={`${todoStats.done}/${todoStats.total}`}
-          empty={todoStats.total === 0}
-        >
-          <TodoSection todos={todos} />
-        </CollapsibleSection>
+        {todoStats.total > 0 && (
+          <CollapsibleSection
+            sectionKey="todos"
+            title="Todos"
+            icon={ListBulletIcon}
+            collapsed={collapsed}
+            count={`${todoStats.done}/${todoStats.total}`}
+            empty={false}
+          >
+            <TodoSection todos={todos} />
+          </CollapsibleSection>
+        )}
 
         <ContextWindowSection collapsed={collapsed} snapshot={contextWindow ?? null} />
 
@@ -535,9 +537,12 @@ function McpSection({ servers }: { servers: McpServerProjection[] }) {
 function PermissionBadge({ level, collapsed }: { level: PermissionLevel | null; collapsed: boolean }) {
   const { Icon, label, color, title } = permissionVisual(level);
   if (collapsed) {
+    // Collapsed footer is a static affordance, not a danger signal —
+    // always use the neutral lock so a "Full access" stage doesn't
+    // splash red in the corner of the page.
     return (
       <div className="flex flex-col items-center gap-0.5" title={title}>
-        <Icon className={`size-4 shrink-0 ${color}`} aria-label={label} />
+        <LockClosedIcon className="size-4 shrink-0 text-fg-muted" aria-label={label} />
       </div>
     );
   }
@@ -559,12 +564,15 @@ function permissionVisual(level: PermissionLevel | null): {
   title: string;
 } {
   switch (level) {
+    // Permission badges are informational, not warning signals. The icon
+    // shape (lock / pencil / bolt) carries the level distinction; colors
+    // stay in the neutral foreground palette so no level looks alarming.
     case PermissionLevel.READ_ONLY:
       return { Icon: LockClosedIcon, color: "text-fg-3", label: "Read-only", title: "Agent can read but not modify files or run commands" };
     case PermissionLevel.READ_WRITE:
-      return { Icon: PencilSquareIcon, color: "text-amber", label: "Read/write", title: "Agent can read and modify files" };
+      return { Icon: PencilSquareIcon, color: "text-fg-2", label: "Read/write", title: "Agent can read and modify files" };
     case PermissionLevel.FULL:
-      return { Icon: BoltIcon, color: "text-coral", label: "Full access", title: "Agent can read, modify files, and run commands" };
+      return { Icon: BoltIcon, color: "text-fg-2", label: "Full access", title: "Agent can read, modify files, and run commands" };
     case null:
     default:
       return { Icon: LockClosedIcon, color: "text-fg-muted", label: "Unknown", title: "Permission level not yet reported" };