From c2d573c85f9aa60f716c19efc86c1263a92ffaa1 Mon Sep 17 00:00:00 2001
From: Jason Woltje <jason@diversecanvas.com>
Date: Sun, 15 Mar 2026 14:37:24 -0500
Subject: [PATCH] =?UTF-8?q?feat(cli):=20full=203=C3=973=20mosaic=20icon=20?=
 =?UTF-8?q?with=209=20colored=20tiles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Brand colors (blue, purple, teal, amber, pink) plus complementary
fills (indigo, sky, rose, green) arranged in a gradient flow:
  blue    indigo  purple
  sky     pink    rose
  amber   green   teal
---
 packages/cli/src/tui/components/top-bar.tsx | 31 ++++++++++++++-------
 1 file changed, 21 insertions(+), 10 deletions(-)

diff --git a/packages/cli/src/tui/components/top-bar.tsx b/packages/cli/src/tui/components/top-bar.tsx
index 7278f73..f8a5091 100644
--- a/packages/cli/src/tui/components/top-bar.tsx
+++ b/packages/cli/src/tui/components/top-bar.tsx
@@ -24,26 +24,37 @@ function formatContextWindow(n: number): string {
 }
 
 /**
- * Mosaic windmill icon — 4 colored tiles + pink center in 3×3 grid
- * Colors from the Mosaic brand:
- *   TL: blue (#2f80ff)  TR: purple (#8b5cf6)
- *   BL: amber (#f59e0b) BR: teal (#14b8a6)
- *   Center: pink (#ec4899)
+ * Mosaic 3×3 icon — full grid of colored tiles
+ *
+ * Brand colors:
+ *   blue (#2f80ff), purple (#8b5cf6), teal (#14b8a6),
+ *   amber (#f59e0b), pink (#ec4899)
+ *
+ * Complementary fills:
+ *   indigo (#6366f1), sky (#38bdf8), rose (#f472b6), green (#22c55e)
+ *
+ * Layout:
+ *   blue    indigo  purple
+ *   sky     pink    rose
+ *   amber   green   teal
  */
 function MosaicIcon() {
   return (
     <Box flexDirection="column" marginRight={1}>
       <Text>
-        <Text color="#2f80ff">▐█</Text>
-        <Text color="#8b5cf6">█▌</Text>
+        <Text color="#2f80ff">██</Text>
+        <Text color="#6366f1">██</Text>
+        <Text color="#8b5cf6">██</Text>
       </Text>
       <Text>
-        <Text> </Text>
+        <Text color="#38bdf8">██</Text>
         <Text color="#ec4899">██</Text>
+        <Text color="#f472b6">██</Text>
       </Text>
       <Text>
-        <Text color="#f59e0b">▐█</Text>
-        <Text color="#14b8a6">█▌</Text>
+        <Text color="#f59e0b">██</Text>
+        <Text color="#22c55e">██</Text>
+        <Text color="#14b8a6">██</Text>
       </Text>
     </Box>
   );