Quiet stage insights sidebar polish (#381)

## 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>

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" };