# 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