357f8e2d08
* docs: add 5 sidebar icon color concepts for UX review Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat(ui): add semantic icon colors and updated icons to sidebar nav Swap generic icons for more descriptive alternatives (Network, Wrench, FileOutput, Library, Code2, Lightbulb) and assign each nav item a unique semantic color for instant visual landmarks. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix(ui): default Sessions page to Active tab, reorder tabs Active sessions are what engineers care about most. Tab order is now Active, Prepared, Completed, All. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * docs: add sidebar grouping and AI naming concept mockups Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * docs: add sidebar redesign context and decision summary Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * docs: add sidebar redesign spec and implementation plan Design spec covers: activity zone with daily stats + session feed, nav grouping (Resolve/Build/Insights), AI split (FlowPilot + Flow Assist), pinned flows removal. Implementation plan has 5 chunks, 12 tasks, 39 steps. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: add sidebar stats Pydantic schemas Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * test: add failing tests for sidebar stats endpoint Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: add sidebar stats endpoint with daily stats and activity feed Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: add sidebar API client, stats bar, activity feed components New components: SidebarStatsBar, SidebarActivityFeed, ActivityItem. New API client for sidebar stats endpoint. Pulse-dot CSS animation. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: restructure sidebar with stats bar, activity feed, and grouped nav Dashboard-first layout with Resolve/Build/Insights groups. AI split: FlowPilot (Resolve) + Flow Assist (Build). Stats bar: Resolved/Active/In Session daily counters. Activity feed: active sessions with CW ticket #, recent completions. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * refactor: remove pinned flows frontend (PinnedFlowsSection, store, API, pin buttons) Removed: PinnedFlowsSection component, pinnedFlowsStore, pinnedFlows API client. Cleaned: pin buttons from TreeGridView, TreeListView, TreeTableView. Cleaned: favorites section from QuickStartPage, pin props from TreeLibraryPage. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: add FlowAssistPage placeholder and /flow-assist route Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: real-time sidebar stats via session-changed events Sidebar now refreshes stats when sessions are created or completed, not just on page navigation. Uses window event bus pattern (same as folder-changed events in codebase). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: live-ticking In Session timer using active session start times SidebarStatsBar now computes active session elapsed time client-side from started_at timestamps, ticking every 60s. Backend only returns completed session minutes to avoid double-counting. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: sidebar In Session timer ticks every second and shows seconds Timer now uses 1s interval (not 60s) and displays seconds when under a minute so it matches the session timer in the flow UI. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * chore: trigger PR environment redeploy Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * debug: add console.log to SidebarStatsBar for timer investigation Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: parse sidebar timestamps as UTC (append Z suffix) Backend returns naive UTC timestamps without timezone indicator. JS Date() treats bare ISO strings as local time, causing the timer to compute negative elapsed time (future timestamps). Appending 'Z' forces UTC parsing. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: rename 'In Session' to 'Total Time' for clarity Makes it clear the timer is an aggregate of all sessions today, not just the current one. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2.9 KiB
2.9 KiB
Sidebar Redesign — Context & Decisions
Branch:
design/sidebar-icon-conceptsDate: 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(wasAll) - 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 constantfrontend/src/components/layout/NavItem.tsx— addediconColorpropfrontend/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