From cc2f59aa8580231777dcefa5b0e8b84943bad644 Mon Sep 17 00:00:00 2001
From: Michael Chihlas <michael@chihlas.com>
Date: Sun, 15 Mar 2026 11:31:41 -0400
Subject: [PATCH] docs: add sidebar redesign context and decision summary

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../Frontend/sidebar-redesign-context.md      | 83 +++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 docs/plans/Frontend/sidebar-redesign-context.md

diff --git a/docs/plans/Frontend/sidebar-redesign-context.md b/docs/plans/Frontend/sidebar-redesign-context.md
new file mode 100644
index 00000000..8346f8d6
--- /dev/null
+++ b/docs/plans/Frontend/sidebar-redesign-context.md
@@ -0,0 +1,83 @@
+# Sidebar Redesign — Context & Decisions
+
+> Branch: `design/sidebar-icon-concepts`
+> Date: 2026-03-15
+
+## What's Already Implemented
+
+### Icon Changes (committed)
+Swapped generic icons for more descriptive ones:
+- Dashboard: `LayoutGrid` (kept)
+- All Flows: `Box` → `Network`
+- Flow Editor: `PenLine` → `Wrench`
+- Sessions: `Clock` (kept)
+- Exports: `FileText` → `FileOutput`
+- AI Assistant: `BotMessageSquare` (kept)
+- Step Library: `Bookmark` → `Library`
+- Script Library: `Terminal` → `Code2`
+- KB Accelerator: `Sparkles` → `Lightbulb`
+- Analytics: `BarChart3` (kept)
+
+### Semantic Icon Colors (committed)
+Each nav icon now has a permanent color (Concept 1 style):
+| Item | Color | Hex |
+|------|-------|-----|
+| Dashboard | Cyan | `#22d3ee` |
+| All Flows | Violet | `#a78bfa` |
+| Flow Editor | Amber | `#f59e0b` |
+| Sessions | Emerald | `#34d399` |
+| Exports | Blue | `#60a5fa` |
+| AI Assistant | Fuchsia | `#e879f9` |
+| Step Library | Orange | `#fb923c` |
+| Script Library | Teal | `#2dd4bf` |
+| KB Accelerator | Rose | `#fb7185` |
+| Analytics | Sky | `#38bdf8` |
+| User Guides | Lime | `#a3e635` |
+| Feedback | Indigo | `#818cf8` |
+| Account/Collapse | No color (stays muted) |
+
+Colors defined in `NAV_COLORS` constant in `Sidebar.tsx`, applied via `iconColor` prop on `NavItem`.
+
+### Session History Tab Reorder (committed)
+- Default tab: `Active` (was `All`)
+- Tab order: Active → Prepared → Completed → All
+
+## Still Deciding
+
+### Nav Grouping
+Mockups in `sidebar-grouping-concepts.html`. Four options explored:
+
+**Concept A1 — Three labeled groups:**
+- Resolve: Sessions, All Flows, FlowPilot, Script Library
+- Build: Flow Editor, Flow Assist, Step Library, KB Accelerator
+- Insights: Dashboard, Exports, Analytics
+
+**Concept A2 — Same groups, divider lines only (no labels)**
+
+**Concept A3 — Dashboard first, then Resolve / Build / Insights**
+
+**Concept B1 — Two groups only (Work / Build) with Dashboard on top**
+
+### AI Assistant Split
+Currently one "AI Assistant" nav item does two jobs. Considering splitting into:
+
+**In-session copilot (Resolve group):**
+- Recommended name: **FlowPilot** (already used in copilot panel)
+- Icon: Brain (fuchsia)
+- Purpose: helps during active troubleshooting sessions
+
+**Flow builder (Build group):**
+- Recommended name: **Flow Assist** (already used in embedded editor AI)
+- Icon: Wand2 (pink)
+- Purpose: conversational flow creation/authoring
+
+Other naming options explored: AI Copilot, Resolve AI, AI Builder, Flow Forge
+
+## Files Changed
+- `frontend/src/components/layout/Sidebar.tsx` — new icons, colors, NAV_COLORS constant
+- `frontend/src/components/layout/NavItem.tsx` — added `iconColor` prop
+- `frontend/src/pages/SessionHistoryPage.tsx` — default tab + tab order
+
+## Mockup Files (open in browser)
+- `docs/plans/Frontend/sidebar-icon-concepts.html` — icon + color comparison (6 panels)
+- `docs/plans/Frontend/sidebar-grouping-concepts.html` — grouping + AI naming options