From dacefed44b0d57a592dab876c8d373bf720078a0 Mon Sep 17 00:00:00 2001 From: Michael Chihlas Date: Sun, 15 Mar 2026 04:03:38 -0400 Subject: [PATCH 01/20] docs: add 5 sidebar icon color concepts for UX review Co-Authored-By: Claude Opus 4.6 (1M context) --- .../plans/Frontend/sidebar-icon-concepts.html | 803 ++++++++++++++++++ 1 file changed, 803 insertions(+) create mode 100644 docs/plans/Frontend/sidebar-icon-concepts.html diff --git a/docs/plans/Frontend/sidebar-icon-concepts.html b/docs/plans/Frontend/sidebar-icon-concepts.html new file mode 100644 index 00000000..d087c2ad --- /dev/null +++ b/docs/plans/Frontend/sidebar-icon-concepts.html @@ -0,0 +1,803 @@ + + + + + +ResolutionFlow — Sidebar Icon Concepts + + + + + +

Sidebar Icon Concepts

+

+ 5 distinct approaches to make the ResolutionFlow sidebar navigation feel alive with color. + Each concept adds visual personality while maintaining the Slate & Ice design system. + Hover and active states are interactive — try them out. +

+ +
+ + +
+
+
Concept 01
+
Semantic Color Icons
+
Every icon gets a permanent, meaningful color. Dashboard = cyan, Sessions = emerald, AI = fuchsia. Always-on color creates instant visual landmarks.
+
+
+
Navigation
+
+
+ Dashboard +
+
+
+ All Flows + 12 +
+
+
+ Flow Editor +
+
+
+ Sessions + 3 +
+
+
+ Exports +
+
+
+ AI Assistant +
+
+
+ Step Library +
+
+
+ Script Library +
+
+
+ KB Accelerator +
+
+
+ Analytics +
+
+
+ + +
+
+
Concept 02
+
Tinted Pill Backgrounds
+
Each icon sits inside a rounded-square with a soft tinted background matching its color. Creates visual weight and makes icons feel like objects, not just strokes.
+
+
+
Navigation
+
+
+ Dashboard +
+
+
+ All Flows + 12 +
+
+
+ Flow Editor +
+
+
+ Sessions + 3 +
+
+
+ Exports +
+
+
+ AI Assistant +
+
+
+ Step Library +
+
+
+ Script Library +
+
+
+ KB Accelerator +
+
+
+ Analytics +
+
+
+ + +
+
+
Concept 03
+
Reveal on Active
+
Icons stay monochrome (subtle, professional) until active — then they bloom into their signature color with a matching tinted row background and accent bar. Quiet→loud transition.
+
+
+
Navigation
+
+
+ Dashboard +
+
+
+ All Flows + 12 +
+
+
+ Flow Editor +
+
+
+ Sessions + 3 +
+
+
+ Exports +
+
+
+ AI Assistant +
+
+
+ Step Library +
+
+
+ Script Library +
+
+
+ KB Accelerator +
+
+
+ Analytics +
+
+
+ + +
+
+
Concept 04
+
Color Dot Markers
+
Clean monochrome icons paired with a small colored dot to the left. Minimal but adds color variety without overwhelming the sidebar. Active dots pulse gently.
+
+
+
Navigation
+
+
+
+ Dashboard +
+
+
+
+ All Flows + 12 +
+
+
+
+ Flow Editor +
+
+
+
+ Sessions + 3 +
+
+
+
+ Exports +
+
+
+
+ AI Assistant +
+
+
+
+ Step Library +
+
+
+
+ Script Library +
+
+
+
+ KB Accelerator +
+
+
+
+ Analytics +
+
+
+ + +
+
+
Concept 05
+
Vivid + Micro-bounce
+
Always-colored icons at reduced opacity. On hover they bounce up slightly and go full vivid. Active items get a glowing underline beneath the icon. Playful but controlled energy.
+
+
+
Navigation
+
+
+ Dashboard +
+
+
+ All Flows + 12 +
+
+
+ Flow Editor +
+
+
+ Sessions + 3 +
+
+
+ Exports +
+
+
+ AI Assistant +
+
+
+ Step Library +
+
+
+ Script Library +
+
+
+ KB Accelerator +
+
+
+ Analytics +
+
+
+ +
+ +
+

Implementation Notes

+
    +
  • Concept 1 (Semantic Colors) — Simplest to implement. Just add a color class per NavItem. Lowest risk, highest impact. The always-on color creates wayfinding landmarks engineers use subconsciously.
    • +
  • Concept 2 (Tinted Pills) — More visual weight. The pill backgrounds make icons feel substantial, like app icons. Creates a premium "dock" feeling. Slightly more complex (28px wrapper with bg).
    • +
  • Concept 3 (Reveal on Active) — Most restrained. Keeps the sidebar quiet until you interact. The color "reward" on active creates a satisfying click moment. The tinted row bg per-color is the key differentiator from current.
    • +
  • Concept 4 (Dot Markers) — Minimal color addition. The dots add variety without changing icon rendering. The pulsing active dot adds a subtle "alive" feeling. Easiest to A/B test since it's purely additive.
    • +
  • Concept 5 (Vivid + Micro-bounce) — Most playful. The bounce micro-interaction adds personality. The glowing underline on active is a unique touch. Best for making the app feel "alive" and responsive to the engineer.
    • +
+
+ + + + + -- 2.49.1 From 967b094a9e34d1a247471345a39143f41a2dcb9d Mon Sep 17 00:00:00 2001 From: Michael Chihlas Date: Sun, 15 Mar 2026 10:42:04 -0400 Subject: [PATCH 02/20] 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) --- .../plans/Frontend/sidebar-icon-concepts.html | 1011 ++++++++--------- frontend/src/components/layout/NavItem.tsx | 7 +- frontend/src/components/layout/Sidebar.tsx | 67 +- 3 files changed, 517 insertions(+), 568 deletions(-) diff --git a/docs/plans/Frontend/sidebar-icon-concepts.html b/docs/plans/Frontend/sidebar-icon-concepts.html index d087c2ad..46559529 100644 --- a/docs/plans/Frontend/sidebar-icon-concepts.html +++ b/docs/plans/Frontend/sidebar-icon-concepts.html @@ -3,16 +3,14 @@ -ResolutionFlow — Sidebar Icon Concepts +ResolutionFlow — Sidebar Icon Concepts (Refined) -

Sidebar Icon Concepts

+

Sidebar Icons — Style × Shape Matrix

- 5 distinct approaches to make the ResolutionFlow sidebar navigation feel alive with color. - Each concept adds visual personality while maintaining the Slate & Ice design system. - Hover and active states are interactive — try them out. + Concept 1 (Semantic Colors) and Concept 2 (Tinted Pills) shown with 3 different icon sets each. + Current = existing Lucide icons, Set A = more descriptive/metaphorical icons, + Set B = minimal/geometric alternatives. Click any nav item to toggle active state.

-
+ +
+

Concept 1 — Semantic Colored Icons

+

Always-on color per icon. No pill background — just the stroke color creates landmarks.

+
- -
-
-
Concept 01
-
Semantic Color Icons
-
Every icon gets a permanent, meaningful color. Dashboard = cyan, Sessions = emerald, AI = fuchsia. Always-on color creates instant visual landmarks.
+
+ + +
+
+
Concept 1 × Current Icons
+
Original Lucide Set
+
LayoutGrid, Box, PenLine, Clock, FileText, BotMessageSquare, Bookmark, Terminal, Sparkles, BarChart3
+
Navigation
+ +
+
+ Dashboard +
+ +
+
+ All Flows + 12 +
+ +
+
+ Flow Editor +
+ +
+
+ Sessions + 3 +
+ +
+
+ Exports +
+ +
+
+ AI Assistant +
+ +
+
+ Step Library +
+ +
+
+ Script Library +
+ +
+
+ KB Accelerator +
+ +
+
+ Analytics +
+
+
+ + +
+
+
Concept 1 × Icon Set A
+
Descriptive / Metaphorical
+
Gauge, GitFork, Wrench, Zap, Share2, Brain, Layers, Code2, Rocket, TrendingUp
+
+
+
Navigation
+ +
+
+ Dashboard +
+ +
+
+ All Flows + 12 +
+ +
+
+ Flow Editor +
+ +
+
+ Sessions + 3 +
+ +
+
+ Exports +
+ +
+
+ AI Assistant +
+ +
+
+ Step Library +
+ +
+
+ Script Library +
+ +
+
+ KB Accelerator +
+ +
+
+ Analytics +
+
+
+ + +
+
+
Concept 1 × Icon Set B
+
Minimal / Geometric
+
Compass, Network, PenTool, Radio, FileOutput, Wand2, Library, ScrollText, Lightbulb, PieChart
+
+
+
Navigation
+ +
+
+ Dashboard +
+ +
+
+ All Flows + 12 +
+ +
+
+ Flow Editor +
+ +
+
+ Sessions + 3 +
+ +
+
+ Exports +
+ +
+
+ AI Assistant +
+ +
+
+ Step Library +
+ +
+
+ Script Library +
+ +
+
+ KB Accelerator +
+ +
+
+ Analytics +
+
+
+ +
+ + +
+

Concept 2 — Tinted Pill Backgrounds

+

Colored icon inside a soft tinted rounded-square. Creates visual weight — feels like an app dock.

+
+ +
+ + +
+
+
Concept 2 × Current Icons
+
Original Lucide Set
+
LayoutGrid, Box, PenLine, Clock, FileText, BotMessageSquare, Bookmark, Terminal, Sparkles, BarChart3
+
+
Navigation
@@ -549,227 +524,109 @@
- -
-
-
Concept 02
-
Tinted Pill Backgrounds
-
Each icon sits inside a rounded-square with a soft tinted background matching its color. Creates visual weight and makes icons feel like objects, not just strokes.
+ +
+
+
Concept 2 × Icon Set A
+
Descriptive / Metaphorical
+
Gauge, GitFork, Wrench, Zap, Share2, Brain, Layers, Code2, Rocket, TrendingUp
Navigation
-
+
Dashboard
-
+
All Flows 12
-
+
Flow Editor
-
-
+
+
Sessions 3
-
+
Exports
-
+
AI Assistant
-
+
Step Library
-
+
Script Library
-
+
KB Accelerator
-
+
Analytics
- -
-
-
Concept 03
-
Reveal on Active
-
Icons stay monochrome (subtle, professional) until active — then they bloom into their signature color with a matching tinted row background and accent bar. Quiet→loud transition.
+ +
+
+
Concept 2 × Icon Set B
+
Minimal / Geometric
+
Compass, Network, PenTool, Radio, FileOutput, Wand2, Library, ScrollText, Lightbulb, PieChart
-
+
Navigation
-
+
Dashboard
-
+
All Flows 12
-
+
Flow Editor
-
-
+
+
Sessions 3
-
+
Exports
-
+
AI Assistant
-
+
Step Library
-
+
Script Library
-
+
KB Accelerator
-
- Analytics -
-
-
- - -
-
-
Concept 04
-
Color Dot Markers
-
Clean monochrome icons paired with a small colored dot to the left. Minimal but adds color variety without overwhelming the sidebar. Active dots pulse gently.
-
-
-
Navigation
-
-
-
- Dashboard -
-
-
-
- All Flows - 12 -
-
-
-
- Flow Editor -
-
-
-
- Sessions - 3 -
-
-
-
- Exports -
-
-
-
- AI Assistant -
-
-
-
- Step Library -
-
-
-
- Script Library -
-
-
-
- KB Accelerator -
-
-
-
- Analytics -
-
-
- - -
-
-
Concept 05
-
Vivid + Micro-bounce
-
Always-colored icons at reduced opacity. On hover they bounce up slightly and go full vivid. Active items get a glowing underline beneath the icon. Playful but controlled energy.
-
-
-
Navigation
-
-
- Dashboard -
-
-
- All Flows - 12 -
-
-
- Flow Editor -
-
-
- Sessions - 3 -
-
-
- Exports -
-
-
- AI Assistant -
-
-
- Step Library -
-
-
- Script Library -
-
-
- KB Accelerator -
-
-
+
Analytics
@@ -777,25 +634,99 @@
-
-

Implementation Notes

-
    -
  • Concept 1 (Semantic Colors) — Simplest to implement. Just add a color class per NavItem. Lowest risk, highest impact. The always-on color creates wayfinding landmarks engineers use subconsciously.
    • -
  • Concept 2 (Tinted Pills) — More visual weight. The pill backgrounds make icons feel substantial, like app icons. Creates a premium "dock" feeling. Slightly more complex (28px wrapper with bg).
    • -
  • Concept 3 (Reveal on Active) — Most restrained. Keeps the sidebar quiet until you interact. The color "reward" on active creates a satisfying click moment. The tinted row bg per-color is the key differentiator from current.
    • -
  • Concept 4 (Dot Markers) — Minimal color addition. The dots add variety without changing icon rendering. The pulsing active dot adds a subtle "alive" feeling. Easiest to A/B test since it's purely additive.
    • -
  • Concept 5 (Vivid + Micro-bounce) — Most playful. The bounce micro-interaction adds personality. The glowing underline on active is a unique touch. Best for making the app feel "alive" and responsive to the engineer.
    • -
+ +
+

Icon Comparison Reference

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nav ItemCurrentSet A (Descriptive)Set B (Minimal)Color
DashboardLayoutGrid — 4 squaresGauge — speedometer, "command center"Compass — navigation hubCyan
All FlowsBox — generic 3D cubeGitFork — branching paths (literally what flows are)Network — connected nodesViolet
Flow EditorPenLine — pen tipWrench — builder toolPenTool — vector/design penAmber
SessionsClock — time-basedZap — active energy, live sessionsRadio — broadcasting/live signalEmerald
ExportsFileText — generic docShare2 — share network nodesFileOutput — file with arrow outBlue
AI AssistantBotMessageSquare — robot chatBrain — intelligence, organic feelWand2 — magic wand with sparklesFuchsia
Step LibraryBookmark — generic ribbonLayers — stacked layers = reusable stepsLibrary — book spinesOrange
Script LibraryTerminal — prompt cursorCode2 — angle brackets with slashScrollText — script/scroll with textTeal
KB AcceleratorSparkles — magic starRocket — acceleration/speedLightbulb — ideas/insightRose
AnalyticsBarChart3 — vertical barsTrendingUp — growth line with arrowPieChart — pie segmentsSky
diff --git a/frontend/src/components/layout/NavItem.tsx b/frontend/src/components/layout/NavItem.tsx index 10006b0c..cf05ee74 100644 --- a/frontend/src/components/layout/NavItem.tsx +++ b/frontend/src/components/layout/NavItem.tsx @@ -15,12 +15,13 @@ interface NavItemProps { icon: LucideIcon label: string badge?: number | 'dot' + iconColor?: string matchPaths?: string[] collapsed?: boolean children?: NavSubItem[] } -export function NavItem({ href, icon: Icon, label, badge, matchPaths, collapsed, children }: NavItemProps) { +export function NavItem({ href, icon: Icon, label, badge, iconColor, matchPaths, collapsed, children }: NavItemProps) { const location = useLocation() const fullPath = location.pathname + location.search const isActive = matchPaths @@ -49,7 +50,7 @@ export function NavItem({ href, icon: Icon, label, badge, matchPaths, collapsed, {isActive && (
)} - + {badge !== undefined && badge !== 0 && badge !== 'dot' && ( {badge} @@ -78,7 +79,7 @@ export function NavItem({ href, icon: Icon, label, badge, matchPaths, collapsed,
)} - + {label} {/* Badge */} diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx index bec2cce2..03ecb6da 100644 --- a/frontend/src/components/layout/Sidebar.tsx +++ b/frontend/src/components/layout/Sidebar.tsx @@ -1,5 +1,5 @@ import { useEffect, useState } from 'react' -import { LayoutGrid, Box, PenLine, Clock, FileText, Bookmark, BarChart3, Settings, PanelLeftClose, PanelLeftOpen, MessageSquareText, BotMessageSquare, BookOpen, Sparkles, Terminal } from 'lucide-react' +import { LayoutGrid, Network, Wrench, Clock, FileOutput, BarChart3, Settings, PanelLeftClose, PanelLeftOpen, MessageSquareText, BotMessageSquare, BookOpen, Lightbulb, Code2, Library } from 'lucide-react' import { cn } from '@/lib/utils' import { useUserPreferencesStore } from '@/store/userPreferencesStore' import { usePinnedFlowsStore } from '@/store/pinnedFlowsStore' @@ -7,6 +7,22 @@ import { PinnedFlowsSection } from '@/components/sidebar/PinnedFlowsSection' import { NavItem } from './NavItem' import { sessionsApi, treesApi } from '@/api' +// Semantic icon colors — each nav item gets a unique color for visual landmarks +const NAV_COLORS = { + dashboard: '#22d3ee', // cyan-400 + flows: '#a78bfa', // violet-400 + editor: '#f59e0b', // amber-500 + sessions: '#34d399', // emerald-400 + exports: '#60a5fa', // blue-400 + ai: '#e879f9', // fuchsia-400 + stepLib: '#fb923c', // orange-400 + scripts: '#2dd4bf', // teal-400 + kb: '#fb7185', // rose-400 + analytics: '#38bdf8', // sky-400 + guides: '#a3e635', // lime-400 + feedback: '#818cf8', // indigo-400 +} as const + export function Sidebar() { const sidebarCollapsed = useUserPreferencesStore(s => s.sidebarCollapsed) const toggleSidebar = useUserPreferencesStore(s => s.toggleSidebar) @@ -76,18 +92,18 @@ export function Sidebar() { <> {/* Collapsed: icon-only nav */}
- - - - - - - - - - - - + + + + + + + + + + + +
) : ( @@ -99,12 +115,13 @@ export function Sidebar() { {/* Primary Navigation */}
- + - - - - - - - - + + + + + + + +
)} @@ -137,8 +154,8 @@ export function Sidebar() { > {!sidebarCollapsed && ( <> - - + + )} -- 2.49.1 From 6afdb6d81dd849957000a8f538e85bc3863b1f52 Mon Sep 17 00:00:00 2001 From: Michael Chihlas Date: Sun, 15 Mar 2026 10:55:20 -0400 Subject: [PATCH 03/20] 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) --- frontend/src/pages/SessionHistoryPage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/SessionHistoryPage.tsx b/frontend/src/pages/SessionHistoryPage.tsx index 46708547..49f89560 100644 --- a/frontend/src/pages/SessionHistoryPage.tsx +++ b/frontend/src/pages/SessionHistoryPage.tsx @@ -21,7 +21,7 @@ export function SessionHistoryPage() { const [hasMore, setHasMore] = useState(false) const [trees, setTrees] = useState([]) const [isLoading, setIsLoading] = useState(true) - const [filter, setFilter] = useState<'all' | 'completed' | 'active' | 'prepared'>('all') + const [filter, setFilter] = useState<'all' | 'completed' | 'active' | 'prepared'>('active') // Close session popover state const [closingSessionId, setClosingSessionId] = useState(null) @@ -227,7 +227,7 @@ export function SessionHistoryPage() { {/* Filter Tabs */}
- {(['all', 'active', 'completed', 'prepared'] as const).map((tab) => ( + {(['active', 'prepared', 'completed', 'all'] as const).map((tab) => ( + ) +} +``` + +- [ ] **Step 14: Commit** + +```bash +git add frontend/src/components/sidebar/ActivityItem.tsx +git commit -m "feat: add ActivityItem component for sidebar activity feed" +``` + +--- + +### Task 6: SidebarStatsBar Component + +**Files:** +- Create: `frontend/src/components/sidebar/SidebarStatsBar.tsx` + +- [ ] **Step 15: Create the stats bar component** + +```typescript +interface SidebarStatsBarProps { + resolved: number + active: number + sessionMinutes: number +} + +function formatDuration(minutes: number): string { + if (minutes < 60) return `${minutes}m` + const h = Math.floor(minutes / 60) + const m = minutes % 60 + return m > 0 ? `${h}h ${m}m` : `${h}h` +} + +export function SidebarStatsBar({ resolved, active, sessionMinutes }: SidebarStatsBarProps) { + return ( +
+
+
+ {resolved} +
+
+ Resolved +
+
+
+
+ {active} +
+
+ Active +
+
+
+
+ {formatDuration(sessionMinutes)} +
+
+ In Session +
+
+
+ ) +} +``` + +- [ ] **Step 16: Commit** + +```bash +git add frontend/src/components/sidebar/SidebarStatsBar.tsx +git commit -m "feat: add SidebarStatsBar component" +``` + +--- + +### Task 7: SidebarActivityFeed Component + +**Files:** +- Create: `frontend/src/components/sidebar/SidebarActivityFeed.tsx` + +- [ ] **Step 17: Create the activity feed component** + +```typescript +import { Clock } from 'lucide-react' +import { useNavigate } from 'react-router-dom' +import { ActivityItem } from './ActivityItem' +import type { SidebarActiveSession, SidebarRecentSession } from '@/api/sidebar' + +interface SidebarActivityFeedProps { + activeSessions: SidebarActiveSession[] + recentCompletions: SidebarRecentSession[] + totalActive: number +} + +export function SidebarActivityFeed({ + activeSessions, + recentCompletions, + totalActive, +}: SidebarActivityFeedProps) { + const navigate = useNavigate() + const hasActivity = activeSessions.length > 0 || recentCompletions.length > 0 + + return ( +
+ {/* Header */} +
+ + + Activity + +
+ + {!hasActivity ? ( +

+ No activity today +

+ ) : ( +
+ {/* Active sessions */} + {activeSessions.map((session) => ( + + ))} + + {/* Overflow link */} + {totalActive > 5 && ( + + )} + + {/* Divider between active and recent */} + {activeSessions.length > 0 && recentCompletions.length > 0 && ( +
+ )} + + {/* Recent completions */} + {recentCompletions.map((session) => ( + + ))} +
+ )} +
+ ) +} +``` + +- [ ] **Step 18: Commit** + +```bash +git add frontend/src/components/sidebar/SidebarActivityFeed.tsx +git commit -m "feat: add SidebarActivityFeed component" +``` + +--- + +## Chunk 3: Frontend — Sidebar Restructure + +### Task 8: Add Pulse Dot CSS Animation + +**Files:** +- Modify: `frontend/src/index.css` + +- [ ] **Step 19: Add the pulse-dot keyframe animation** + +Add to `frontend/src/index.css` (in the global styles section, after existing keyframes): + +```css +@keyframes pulse-dot { + 0%, 100% { box-shadow: 0 0 4px rgba(52,211,153,0.4); } + 50% { box-shadow: 0 0 8px rgba(52,211,153,0.7); } +} +``` + +- [ ] **Step 20: Commit** + +```bash +git add frontend/src/index.css +git commit -m "feat: add pulse-dot animation for active session indicator" +``` + +--- + +### Task 9: Restructure Sidebar.tsx + +**Files:** +- Modify: `frontend/src/components/layout/Sidebar.tsx` + +This is the largest change. The sidebar is rewritten to use the new layout. + +- [ ] **Step 21: Rewrite Sidebar.tsx** + +Replace the entire file content. Key changes: +1. Remove `PinnedFlowsSection` import and `usePinnedFlowsStore` usage +2. Remove `sessionsApi` and `treesApi` data fetches (replaced by `sidebarApi.getStats`) +3. Add `SidebarStatsBar` and `SidebarActivityFeed` in expanded mode +4. Add `Brain` and `WandSparkles` icon imports +5. Reorganize nav items into Dashboard → Resolve → Build → Insights groups +6. Update collapsed view with all 13 items +7. Add `flowPilot` and `flowAssist` to `NAV_COLORS` + +The new `Sidebar.tsx` should: + +**Imports:** +```typescript +import { useEffect, useState } from 'react' +import { useLocation } from 'react-router-dom' +import { + LayoutGrid, Network, Wrench, Clock, FileOutput, BarChart3, + Settings, PanelLeftClose, PanelLeftOpen, MessageSquareText, + BookOpen, Lightbulb, Code2, Library, Brain, WandSparkles, +} from 'lucide-react' +import { cn } from '@/lib/utils' +import { useUserPreferencesStore } from '@/store/userPreferencesStore' +import { sidebarApi } from '@/api' +import type { SidebarStatsResponse } from '@/api/sidebar' +import { SidebarStatsBar } from '@/components/sidebar/SidebarStatsBar' +import { SidebarActivityFeed } from '@/components/sidebar/SidebarActivityFeed' +import { NavItem } from './NavItem' +``` + +**NAV_COLORS** — add two new entries, remove `ai`: +```typescript +const NAV_COLORS = { + dashboard: '#22d3ee', + flows: '#a78bfa', + editor: '#f59e0b', + sessions: '#34d399', + exports: '#60a5fa', + flowPilot: '#e879f9', + flowAssist:'#f472b6', + stepLib: '#fb923c', + scripts: '#2dd4bf', + kb: '#fb7185', + analytics: '#38bdf8', + guides: '#a3e635', + feedback: '#818cf8', +} as const +``` + +**Data fetch** — replace the two separate fetches with one `sidebarApi.getStats()` call. Use `location.pathname` as a dependency so stats refresh on navigation (the sidebar persists across pages and does NOT re-mount): +```typescript +const location = useLocation() +const [stats, setStats] = useState(null) + +useEffect(() => { + sidebarApi.getStats().then(setStats).catch(() => {}) +}, [location.pathname]) +``` + +**Expanded layout** (inside the `else` branch): +```tsx +{/* Stats Bar */} + + +{/* Activity Feed */} + + +
+ +{/* Dashboard (standalone) */} +
+ + + {/* Resolve group */} +
+ Resolve +
+ + + + + + {/* Build group */} +
+ Build +
+ + + + + + {/* Insights group */} +
+ Insights +
+ + +
+``` + +**Collapsed layout** — update to include all 13 items (add Brain/FlowPilot and WandSparkles/Flow Assist, remove BotMessageSquare/AI Assistant): +```tsx +
+ + + + + + + + + + + + + +
+``` + +- [ ] **Step 22: Verify the app builds** + +```bash +cd frontend && npm run build +``` + +Expected: Build succeeds. Fix any TypeScript or import errors. + +- [ ] **Step 23: Commit** + +```bash +git add frontend/src/components/layout/Sidebar.tsx +git commit -m "feat: restructure sidebar with stats bar, activity feed, and grouped nav" +``` + +--- + +### Task 10: Remove Pinned Flows Frontend Code + +**Files:** +- Delete: `frontend/src/components/sidebar/PinnedFlowsSection.tsx` +- Delete: `frontend/src/store/pinnedFlowsStore.ts` +- Delete: `frontend/src/api/pinnedFlows.ts` +- Modify: `frontend/src/pages/TreeLibraryPage.tsx` — remove pin integration +- Modify: `frontend/src/components/library/TreeGridView.tsx` — remove pin button +- Modify: `frontend/src/components/library/TreeListView.tsx` — remove pin button + +- [ ] **Step 24: Delete pinned flows files** + +```bash +rm frontend/src/components/sidebar/PinnedFlowsSection.tsx +rm frontend/src/store/pinnedFlowsStore.ts +rm frontend/src/api/pinnedFlows.ts +``` + +- [ ] **Step 25: Remove pin imports and props from TreeLibraryPage.tsx** + +Remove: +- `usePinnedFlowsStore` import and all related hooks (`pinnedItems`, `isMutatingByTreeId`, `pinnedTreeIds`, `pinLoadingTreeIds`, `togglePin`, `loadPinned`) +- The `useEffect` that calls `loadPinned()` +- The `pinnedTreeIds`, `onTogglePin`, `pinLoadingTreeIds` props passed to `TreeGridView`, `TreeListView`, and `TreeTableView` + +- [ ] **Step 26: Remove pin button from TreeGridView.tsx** + +Remove: +- `Star` icon import from lucide-react +- `pinnedTreeIds`, `onTogglePin`, `pinLoadingTreeIds` from component props interface +- The star/pin button JSX (lines ~67-86) + +- [ ] **Step 27: Remove pin button from TreeListView.tsx** + +Same pattern as TreeGridView — remove pin-related props and button. + +- [ ] **Step 27b: Remove pin button from TreeTableView.tsx** + +Same pattern as TreeGridView — remove pin-related props and button. + +- [ ] **Step 28: Remove pinnedFlows export from api/index.ts** + +Remove the `export { pinnedFlowsApi } from './pinnedFlows'` line (or similar). + +- [ ] **Step 29: Verify the app builds** + +```bash +cd frontend && npm run build +``` + +Expected: Build succeeds with no references to removed files. + +- [ ] **Step 30: Commit** + +```bash +git add frontend/src/components/sidebar/PinnedFlowsSection.tsx frontend/src/store/pinnedFlowsStore.ts frontend/src/api/pinnedFlows.ts frontend/src/pages/TreeLibraryPage.tsx frontend/src/components/library/TreeGridView.tsx frontend/src/components/library/TreeListView.tsx frontend/src/components/library/TreeTableView.tsx frontend/src/api/index.ts +git commit -m "refactor: remove pinned flows frontend (PinnedFlowsSection, store, API, pin buttons)" +``` + +Note: The deleted files will show as "deleted" in `git add` — that's expected. Use `git add -u` as a fallback if the explicit paths don't stage the deletions correctly. + +--- + +## Chunk 4: Frontend — Flow Assist Page & Route + +### Task 11: FlowAssistPage + +**Files:** +- Create: `frontend/src/pages/FlowAssistPage.tsx` +- Modify: `frontend/src/router.tsx` + +- [ ] **Step 31: Create FlowAssistPage** + +This is a standalone page for the conversational flow builder. For now, create a placeholder page that will be expanded when the AI split is fully implemented. The page should use the same glass-card layout pattern as other pages. + +```typescript +import { WandSparkles } from 'lucide-react' + +export default function FlowAssistPage() { + return ( +
+
+

+ + + Flow Assist + +

+

+ Build flows from natural language — describe what you need and Flow Assist will generate the decision tree or procedural steps. +

+
+ +
+ +

+ Coming Soon +

+

+ Flow Assist will be available here as a dedicated conversational flow builder. + In the meantime, use the AI panel in the Flow Editor to generate flows. +

+
+
+ ) +} +``` + +- [ ] **Step 32: Add the route in router.tsx** + +Add inside the protected route children (alongside other page routes like `/assistant`, `/scripts`, etc.): + +```typescript +{ + path: 'flow-assist', + lazy: () => import('./pages/FlowAssistPage').then(m => ({ Component: m.default })), +}, +``` + +If the router doesn't use lazy loading, use the direct import pattern matching the existing routes. + +- [ ] **Step 33: Verify the app builds** + +```bash +cd frontend && npm run build +``` + +- [ ] **Step 34: Commit** + +```bash +git add frontend/src/pages/FlowAssistPage.tsx frontend/src/router.tsx +git commit -m "feat: add FlowAssistPage placeholder and /flow-assist route" +``` + +--- + +## Chunk 5: Final Verification & Cleanup + +### Task 12: Full Test Suite & Build Verification + +- [ ] **Step 35: Run backend tests** + +```bash +cd backend && python -m pytest tests/test_sidebar_stats.py -v --override-ini="addopts=" +``` + +Expected: All sidebar tests pass. + +- [ ] **Step 36: Run full backend test suite** + +```bash +cd backend && python -m pytest --override-ini="addopts=" -x -q +``` + +Expected: No regressions. If any pinned-flows tests exist and fail (because we didn't touch backend), that's expected — they should still pass since backend is unchanged. + +- [ ] **Step 37: Run frontend build** + +```bash +cd frontend && npm run build +``` + +Expected: Clean build, no errors. + +- [ ] **Step 38: Manual smoke test** + +Start the dev servers and verify: +1. Sidebar loads with stats bar showing 0/0/0m on fresh state +2. Activity feed shows "No activity today" when empty +3. Nav is grouped: Dashboard → Resolve (Sessions, All Flows, FlowPilot, Script Library) → Build (Flow Editor, Flow Assist, Step Library, KB Accelerator) → Insights (Exports, Analytics) +4. FlowPilot link goes to `/assistant` +5. Flow Assist link goes to `/flow-assist` (placeholder page) +6. Collapsed sidebar shows all 13 icon-only items +7. Pin buttons are gone from tree library grid/list views +8. No console errors + +- [ ] **Step 39: Final commit with any cleanup** + +If there are any remaining changes from smoke test fixes, stage the specific files and commit: + +```bash +git add +git commit -m "chore: sidebar redesign cleanup and verification" +``` + +--- + +## Summary + +| Chunk | Tasks | What it delivers | +|-------|-------|-----------------| +| 1 | Tasks 1-3 | Backend endpoint with tests — `GET /sessions/sidebar-stats` | +| 2 | Tasks 4-7 | Frontend API client + ActivityItem, StatsBar, ActivityFeed components | +| 3 | Tasks 8-10 | Sidebar restructure + pinned flows removal | +| 4 | Task 11 | FlowAssistPage + `/flow-assist` route | +| 5 | Task 12 | Full verification and cleanup | diff --git a/docs/superpowers/specs/2026-03-15-sidebar-redesign-design.md b/docs/superpowers/specs/2026-03-15-sidebar-redesign-design.md new file mode 100644 index 00000000..a39a7cb8 --- /dev/null +++ b/docs/superpowers/specs/2026-03-15-sidebar-redesign-design.md @@ -0,0 +1,271 @@ +# Sidebar Redesign — Design Spec + +> **Date:** 2026-03-15 +> **Branch:** `design/sidebar-icon-concepts` +> **Status:** Approved for implementation + +--- + +## Overview + +Redesign the ResolutionFlow sidebar from a flat nav list with a pinned flows section into a structured, activity-aware navigation organized around engineer workflow stages. The sidebar becomes a "shift dashboard" — showing what you're working on, how your day is going, and organizing tools by what you do with them. + +## Goals + +1. **Surface active work** — engineers should see their in-progress sessions and CW ticket context without navigating away +2. **Organize by workflow** — group nav items into Resolve (working tickets) / Build (authoring flows) / Insights (reviewing results) +3. **Provide daily pulse** — lightweight stats (resolved today, active, time in session) visible at a glance +4. **Clarify AI tools** — split the single "AI Assistant" into two purpose-specific tools (FlowPilot for troubleshooting, Flow Assist for authoring) +5. **Remove low-value features** — pinned/quick access flows are too static for the dynamic MSP workflow + +## Full Sidebar Layout (top to bottom) + +``` +┌─────────────────────────┐ +│ Stats Bar │ ← 3 counters: Resolved / Active / In Session +│ [7 done] [2 open] [2h] │ +├─────────────────────────┤ +│ ● Activity │ ← "Activity" label with emerald clock icon +│ ● O365 Mail Flow #4829 │ ← green dot = active, blue ticket # +│ ● DHCP Scope #4828 │ ← amber dot = paused/idle +│ · · · · · · · · · · · │ ← subtle sub-divider +│ · DNS Resolution 2h │ ← muted dot + relative time +│ · Printer Spooler 5h │ +├─────────────────────────┤ ← glass-border divider +│ ▣ Dashboard │ ← standalone, no group label +│ │ +│ RESOLVE │ ← group label (JetBrains Mono, uppercase) +│ ◷ Sessions [3] │ +│ ⬡ All Flows [32] │ +│ ◉ FlowPilot │ +│ Script Library │ +│ │ +│ BUILD │ +│ 🔧 Flow Editor │ +│ ✦ Flow Assist │ +│ ⊞ Step Library │ +│ 💡 KB Accelerator │ +│ │ +│ INSIGHTS │ +│ 📄 Exports │ +│ 📊 Analytics │ +│ │ +│ ── flex spacer ── │ ← pushes footer to bottom +├─────────────────────────┤ ← glass-border divider +│ 📖 User Guides │ +│ 💬 Feedback │ +│ ⚙ Account │ +│ ◁ Collapse │ +└─────────────────────────┘ +``` + +No brand/logo section at top (unchanged from current). Dashboard sits below the divider with no group label — it's visually separated from the activity zone by the divider and from the "Resolve" label by standard spacing (same as current "first nav item before first group" pattern). + +## What Changes + +### Removed +- **Pinned Flows section** — the entire `PinnedFlowsSection` component, `pinnedFlowsStore`, and `pinnedFlows` API module. MSP engineers' work is too dynamic for static pinning; the activity feed replaces this. +- **Single "AI Assistant" nav item** — replaced by two distinct items + +### Added + +#### 1. Daily Stats Bar (top of sidebar) +Three compact counters in a horizontal row (`display: flex; gap: 2px`), each counter is a flex-1 cell. + +| Stat | Color | Source | +|------|-------|--------| +| Resolved | `#34d399` (emerald) | Count of sessions completed today with `outcome = 'resolved'` | +| Active | `#22d3ee` (cyan) | Count of sessions where `completed_at IS NULL` | +| In Session | `#8891a0` (muted) | Sum of time spent in active sessions today (new metric — snapshot, acceptable to be stale) | + +**Dimensions:** `padding: 8px 12px 4px` on the container. Each stat cell: `padding: 6px 4px`, `border-radius: 6px`, `background: rgba(255,255,255,0.02)`. Value: `JetBrains Mono, 14px, font-weight: 600`. Label: `JetBrains Mono, 7px, uppercase, letter-spacing: 0.1em, color: #3d4350`. + +Stats reset daily. "In Session" is a snapshot value computed server-side — it does not live-update as a timer. + +#### 2. Activity Feed (below stats bar) +Two sub-sections separated by a subtle divider (`1px solid rgba(255,255,255,0.03)`): + +**Active sessions (max 5):** +- Green pulsing dot — currently active session +- Amber dot (`#f59e0b`, design system amber) — paused/idle session (started but not interacted with recently) +- Flow name (truncated, `13px`, `color: #e2e8f0`) +- ConnectWise ticket number in blue (`#60a5fa`, `JetBrains Mono, 9px`) — only shown if the user's team has a PSA connection AND the session is linked to a ticket +- If more than 5 active sessions, show a "View all in Sessions →" link styled as `text-muted-foreground, 11px, hover:text-foreground` + +**Green pulsing dot animation:** +```css +.active-dot { + width: 7px; height: 7px; border-radius: 50%; + background: #34d399; + box-shadow: 0 0 6px rgba(52,211,153,0.5); + animation: pulse-dot 2s ease-in-out infinite; +} +@keyframes pulse-dot { + 0%, 100% { box-shadow: 0 0 4px rgba(52,211,153,0.4); } + 50% { box-shadow: 0 0 8px rgba(52,211,153,0.7); } +} +``` + +**Recent completions:** +- Small muted dot (`4px`, `#3d4350`) +- Flow name in muted text (`11.5px`, `color: #6b7280`) +- Relative timestamp (`JetBrains Mono, 9px`, `color: #5a6170`) +- Show last 3 completed sessions from today + +The activity section has an "Activity" header: `JetBrains Mono, 9px, uppercase, letter-spacing: 0.12em, color: #5a6170`, with a small emerald clock SVG icon (10px). + +**Activity feed height:** The zone scrolls with the rest of the sidebar — no independent scroll container. The overall sidebar already has `handleSidebarWheel` for scroll forwarding. With max 5 active + 3 recent, the zone is ~280px max which is acceptable. + +**Refresh:** Data fetches on mount (same as current). No polling. Navigating back to a page that renders the sidebar triggers a re-mount/re-fetch. A future enhancement could add polling or WebSocket updates but that's out of scope. + +#### 3. Nav Grouping (Concept A3) +Dashboard stands alone at the top (no group label, no special treatment — just a regular `NavItem` above the first group label). + +**Resolve** — what engineers do when working tickets: +- Sessions (Clock, emerald `#34d399`, badge: active count) +- All Flows (Network, violet `#a78bfa`, badge: total count, with type sub-items) +- FlowPilot (Brain, fuchsia `#e879f9`) — NEW: in-session AI copilot +- Script Library (Code2, teal `#2dd4bf`) + +**Build** — authoring and improving flows: +- Flow Editor (Wrench, amber `#f59e0b`) +- Flow Assist (WandSparkles, pink `#f472b6`) — NEW: conversational flow builder AI +- Step Library (Library, orange `#fb923c`) +- KB Accelerator (Lightbulb, rose `#fb7185`) + +**Insights** — reviewing results: +- Exports (FileOutput, blue `#60a5fa`) +- Analytics (BarChart3, sky `#38bdf8`) + +Group labels use `JetBrains Mono`, `0.5625rem`, uppercase, `letter-spacing: 0.12em`, `color: #5a6170`, `padding: 14px 12px 5px` (first group: `padding-top: 8px`). + +#### 4. AI Assistant Split + +| Nav Item | Group | Icon | Color | Purpose | Route | +|----------|-------|------|-------|---------|-------| +| FlowPilot | Resolve | Brain | `#e879f9` (fuchsia) | In-session AI copilot — suggests next steps, explains errors, provides ticket context during active troubleshooting | `/assistant` (existing route, rename label in UI only) | +| Flow Assist | Build | WandSparkles | `#f472b6` (pink) | Conversational flow builder — standalone page with a chat interface for generating flows from natural language. Renders a full-page chat UI (similar to `AssistantChatPage`) that creates flows via the AI chat service with `flow_type` selection. NOT a modal wrapper — it's a dedicated page. | `/flow-assist` (new route + new page component `FlowAssistPage`) | + +Both names are already in use internally (FlowPilot in the copilot panel, Flow Assist in the editor AI panel). This just promotes them to top-level navigation. + +**Note:** `Wand2` is an alias for `WandSparkles` in lucide-react@0.563.0. Use `WandSparkles` as the canonical import. + +### Footer (unchanged structure) +- User Guides (BookOpen, lime `#a3e635`) +- Feedback (MessageSquareText, indigo `#818cf8`) +- Account (Settings, no color) +- Collapse (PanelLeftClose, no color) + +### Collapsed Sidebar +When collapsed, the stats bar and activity feed are hidden. Icon-only nav items are shown in a flat list (no group labels). The collapsed view includes all 13 nav items including the two new AI items: + +- Dashboard (LayoutGrid, cyan) +- Sessions (Clock, emerald) +- All Flows (Network, violet) +- FlowPilot (Brain, fuchsia) +- Script Library (Code2, teal) +- Flow Editor (Wrench, amber) +- Flow Assist (WandSparkles, pink) +- Step Library (Library, orange) +- KB Accelerator (Lightbulb, rose) +- Exports (FileOutput, blue) +- Analytics (BarChart3, sky) +- User Guides (BookOpen, lime) +- Feedback (MessageSquareText, indigo) + +Account and Collapse remain in the footer section of the collapsed view (same as current). + +## Data Requirements + +### New Backend Endpoint + +**`GET /api/v1/sessions/sidebar-stats`** — lightweight endpoint for sidebar data, returns: + +```json +{ + "resolved_today": 7, + "active_count": 2, + "total_session_minutes_today": 134, + "active_sessions": [ + { + "session_id": "uuid", + "tree_name": "O365 Mail Flow", + "tree_id": "uuid", + "tree_type": "troubleshooting", + "started_at": "2026-03-15T14:30:00Z", + "ticket_number": "#48291" + } + ], + "recent_completions": [ + { + "session_id": "uuid", + "tree_name": "DNS Resolution", + "tree_id": "uuid", + "tree_type": "troubleshooting", + "completed_at": "2026-03-15T12:15:00Z" + } + ] +} +``` + +**Query parameters:** +- `tz_offset` (integer, required): Client's UTC offset in minutes (e.g., `-300` for EST). Used to compute "today" boundaries. Frontend sends `new Date().getTimezoneOffset()`. + +**Backend logic:** +- `resolved_today`: `SELECT COUNT(*) FROM sessions WHERE user_id = :uid AND completed_at >= :today_start AND outcome = 'resolved'` +- `active_count`: `SELECT COUNT(*) FROM sessions WHERE user_id = :uid AND completed_at IS NULL` +- `total_session_minutes_today`: Sum of `EXTRACT(EPOCH FROM (COALESCE(completed_at, now()) - started_at)) / 60` for all sessions where `started_at >= :today_start` +- `active_sessions`: Up to 5, ordered by `started_at DESC`, with joined tree name/type +- `recent_completions`: Up to 3 completed today, ordered by `completed_at DESC` +- `ticket_number`: Populated from PSA connection context if available (depends on CW integration state — nullable) +- `today_start`: Computed as midnight in the client's timezone, converted to UTC using `tz_offset` + +**Sessions spanning midnight:** A session started yesterday that is still active today counts toward `total_session_minutes_today` for its full duration (from `started_at`, not from midnight). It also appears in `active_sessions`. This matches user intuition — "I've been on this for 3 hours" regardless of when midnight fell. + +### Frontend Components + +**New components:** +- `SidebarStatsBar` — three-stat row component +- `SidebarActivityFeed` — active sessions + recents feed with "Activity" header +- `ActivityItem` — single activity row (dot + name + ticket/timestamp) +- `FlowAssistPage` — standalone page for conversational flow building + +**Modified components:** +- `Sidebar.tsx` — major restructure: remove PinnedFlowsSection, add stats bar + activity feed, reorganize nav into groups with labels, add FlowPilot + Flow Assist items, update collapsed view icon set +- `router.tsx` — add `/flow-assist` route +- `NavItem.tsx` — no changes needed (already supports `iconColor` prop) + +**Removed:** +- `PinnedFlowsSection.tsx` +- `pinnedFlowsStore.ts` +- `api/pinnedFlows.ts` (if it exists) +- Related pinning UI in flow cards/pages (pin buttons, pin actions) + +## Visual Reference + +Mockups created during brainstorming are in `.superpowers/brainstorm/` (HTML files, open in browser). The approved composite is `a3-full-sidebar.html` showing the "With AI Split" variant. + +## Out of Scope + +- ConnectWise ticket deep-linking (future — just display the number for now) +- Team activity feed (showing what other engineers are doing — potential future enhancement) +- Removing the pinned flows backend API/database tables (just remove frontend usage; backend cleanup is separate) +- Changes to the analytics pages themselves +- Mobile/responsive sidebar behavior (current behavior unchanged) +- Polling/WebSocket for live activity updates (fetch on mount only) + +## Edge Cases + +- **No active sessions:** Stats bar shows "0" for Active and "0m" for In Session. Activity section shows only recents (or "No activity today" placeholder if no recents either). +- **No CW integration:** Ticket numbers simply don't appear. Activity items show flow name only. +- **Many active sessions:** Activity feed caps at 5 active sessions with a "View all in Sessions →" link below. +- **Midnight rollover:** Stats reset based on client timezone offset passed to the API. Frontend sends `tz_offset` on each sidebar fetch. +- **Sessions spanning midnight:** Count full duration from `started_at`, not partial duration from midnight. +- **New user / no sessions ever:** Stats bar shows all zeros. Activity section shows an empty state: "No activity today". + +## Accessibility + +- Pulsing green dot: add `aria-label="Active session"` to the dot element +- Amber dot: `aria-label="Paused session"` +- Stats bar values: wrap in elements with `aria-label` combining value + label (e.g., "7 resolved today") +- Activity items: render as ` + ) +} diff --git a/frontend/src/components/sidebar/SidebarActivityFeed.tsx b/frontend/src/components/sidebar/SidebarActivityFeed.tsx new file mode 100644 index 00000000..ddfe6999 --- /dev/null +++ b/frontend/src/components/sidebar/SidebarActivityFeed.tsx @@ -0,0 +1,80 @@ +import { Clock } from 'lucide-react' +import { useNavigate } from 'react-router-dom' +import { ActivityItem } from './ActivityItem' +import type { SidebarActiveSession, SidebarRecentSession } from '@/api/sidebar' + +interface SidebarActivityFeedProps { + activeSessions: SidebarActiveSession[] + recentCompletions: SidebarRecentSession[] + totalActive: number +} + +export function SidebarActivityFeed({ + activeSessions, + recentCompletions, + totalActive, +}: SidebarActivityFeedProps) { + const navigate = useNavigate() + const hasActivity = activeSessions.length > 0 || recentCompletions.length > 0 + + return ( +
+ {/* Header */} +
+ + + Activity + +
+ + {!hasActivity ? ( +

+ No activity today +

+ ) : ( +
+ {/* Active sessions */} + {activeSessions.map((session) => ( + + ))} + + {/* Overflow link */} + {totalActive > 5 && ( + + )} + + {/* Divider between active and recent */} + {activeSessions.length > 0 && recentCompletions.length > 0 && ( +
+ )} + + {/* Recent completions */} + {recentCompletions.map((session) => ( + + ))} +
+ )} +
+ ) +} diff --git a/frontend/src/components/sidebar/SidebarStatsBar.tsx b/frontend/src/components/sidebar/SidebarStatsBar.tsx new file mode 100644 index 00000000..411e2703 --- /dev/null +++ b/frontend/src/components/sidebar/SidebarStatsBar.tsx @@ -0,0 +1,58 @@ +interface SidebarStatsBarProps { + resolved: number + active: number + sessionMinutes: number +} + +function formatDuration(minutes: number): string { + if (minutes < 60) return `${minutes}m` + const h = Math.floor(minutes / 60) + const m = minutes % 60 + return m > 0 ? `${h}h ${m}m` : `${h}h` +} + +export function SidebarStatsBar({ resolved, active, sessionMinutes }: SidebarStatsBarProps) { + return ( +
+
+
+ {resolved} +
+
+ Resolved +
+
+
+
+ {active} +
+
+ Active +
+
+
+
+ {formatDuration(sessionMinutes)} +
+
+ In Session +
+
+
+ ) +} diff --git a/frontend/src/index.css b/frontend/src/index.css index f5028a79..b40e3f7c 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -153,6 +153,11 @@ 100% { transform: rotate(0deg); } } + @keyframes pulse-dot { + 0%, 100% { box-shadow: 0 0 4px rgba(52,211,153,0.4); } + 50% { box-shadow: 0 0 8px rgba(52,211,153,0.7); } + } + @keyframes stagger-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } -- 2.49.1 From 9e4566cc1d2126fe7ddc46167cc1d208fb3ae086 Mon Sep 17 00:00:00 2001 From: chihlasm Date: Sun, 15 Mar 2026 15:15:56 -0400 Subject: [PATCH 11/20] 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) --- frontend/src/components/layout/Sidebar.tsx | 116 +++++++++++---------- 1 file changed, 63 insertions(+), 53 deletions(-) diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx index 03ecb6da..1bda0fb1 100644 --- a/frontend/src/components/layout/Sidebar.tsx +++ b/frontend/src/components/layout/Sidebar.tsx @@ -1,11 +1,17 @@ import { useEffect, useState } from 'react' -import { LayoutGrid, Network, Wrench, Clock, FileOutput, BarChart3, Settings, PanelLeftClose, PanelLeftOpen, MessageSquareText, BotMessageSquare, BookOpen, Lightbulb, Code2, Library } from 'lucide-react' +import { useLocation } from 'react-router-dom' +import { + LayoutGrid, Network, Wrench, Clock, FileOutput, BarChart3, + Settings, PanelLeftClose, PanelLeftOpen, MessageSquareText, + BookOpen, Lightbulb, Code2, Library, Brain, WandSparkles, +} from 'lucide-react' import { cn } from '@/lib/utils' import { useUserPreferencesStore } from '@/store/userPreferencesStore' -import { usePinnedFlowsStore } from '@/store/pinnedFlowsStore' -import { PinnedFlowsSection } from '@/components/sidebar/PinnedFlowsSection' +import { sidebarApi } from '@/api' +import type { SidebarStatsResponse } from '@/api/sidebar' +import { SidebarStatsBar } from '@/components/sidebar/SidebarStatsBar' +import { SidebarActivityFeed } from '@/components/sidebar/SidebarActivityFeed' import { NavItem } from './NavItem' -import { sessionsApi, treesApi } from '@/api' // Semantic icon colors — each nav item gets a unique color for visual landmarks const NAV_COLORS = { @@ -14,7 +20,8 @@ const NAV_COLORS = { editor: '#f59e0b', // amber-500 sessions: '#34d399', // emerald-400 exports: '#60a5fa', // blue-400 - ai: '#e879f9', // fuchsia-400 + flowPilot: '#e879f9', // fuchsia-400 + flowAssist:'#f472b6', // pink-400 stepLib: '#fb923c', // orange-400 scripts: '#2dd4bf', // teal-400 kb: '#fb7185', // rose-400 @@ -26,40 +33,14 @@ const NAV_COLORS = { export function Sidebar() { const sidebarCollapsed = useUserPreferencesStore(s => s.sidebarCollapsed) const toggleSidebar = useUserPreferencesStore(s => s.toggleSidebar) + const location = useLocation() - const pinnedItems = usePinnedFlowsStore((s) => s.items) - const loadPinned = usePinnedFlowsStore((s) => s.load) - const unpinFlow = usePinnedFlowsStore((s) => s.unpin) + const [stats, setStats] = useState(null) - const [activeSessionCount, setActiveSessionCount] = useState(0) - const [treeCounts, setTreeCounts] = useState({ total: 0, troubleshooting: 0, procedural: 0, maintenance: 0 }) - - // Load pinned flows on mount + // Fetch sidebar stats — refreshes on navigation useEffect(() => { - loadPinned() - }, [loadPinned]) - - // Fetch sidebar data on mount - useEffect(() => { - const fetchData = async () => { - try { - const [activeSessions, allTrees] = await Promise.all([ - sessionsApi.list({ completed: false, size: 50 }).catch(() => []), - treesApi.list({ sort_by: 'name' }).catch(() => []), - ]) - setActiveSessionCount(activeSessions.length) - - const total = allTrees.length - const troubleshooting = allTrees.filter(t => t.tree_type === 'troubleshooting').length - const procedural = allTrees.filter(t => t.tree_type === 'procedural').length - const maintenance = allTrees.filter(t => t.tree_type === 'maintenance').length - setTreeCounts({ total, troubleshooting, procedural, maintenance }) - } catch { - // Silently handle errors - } - } - fetchData() - }, []) + sidebarApi.getStats().then(setStats).catch(() => {}) + }, [location.pathname]) const handleSidebarWheel = (e: React.WheelEvent) => { const sidebar = e.currentTarget @@ -93,14 +74,15 @@ export function Sidebar() { {/* Collapsed: icon-only nav */}
+ - - - - - + + + + + @@ -108,34 +90,62 @@ export function Sidebar() { ) : ( <> - {/* Pinned Flows */} - + {/* Stats Bar */} + + + {/* Activity Feed */} +
- {/* Primary Navigation */} + {/* Navigation */}
+ {/* Dashboard (standalone) */} + + {/* Resolve */} +
+ Resolve +
+ - - - - - + + + {/* Build */} +
+ Build +
+ + + + + {/* Insights */} +
+ Insights +
+
-- 2.49.1 From ffac0f85030094a7d790f644728e0ea039444011 Mon Sep 17 00:00:00 2001 From: chihlasm Date: Sun, 15 Mar 2026 15:21:08 -0400 Subject: [PATCH 12/20] 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) --- frontend/src/api/index.ts | 1 - frontend/src/api/pinnedFlows.ts | 34 ------ .../src/components/library/TreeGridView.tsx | 28 +---- .../src/components/library/TreeListView.tsx | 28 +---- .../src/components/library/TreeTableView.tsx | 35 +----- .../components/sidebar/PinnedFlowsSection.tsx | 98 ----------------- frontend/src/pages/QuickStartPage.tsx | 95 +--------------- frontend/src/pages/TreeLibraryPage.tsx | 26 +---- frontend/src/store/pinnedFlowsStore.ts | 104 ------------------ 9 files changed, 8 insertions(+), 441 deletions(-) delete mode 100644 frontend/src/api/pinnedFlows.ts delete mode 100644 frontend/src/components/sidebar/PinnedFlowsSection.tsx delete mode 100644 frontend/src/store/pinnedFlowsStore.ts diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts index 87d45040..628cf68b 100644 --- a/frontend/src/api/index.ts +++ b/frontend/src/api/index.ts @@ -11,7 +11,6 @@ export { default as stepCategoriesApi } from './stepCategories' export { default as accountsApi } from './accounts' export { default as adminApi } from './admin' export { treeMarkdownApi } from './treeMarkdown' -export { default as pinnedFlowsApi } from './pinnedFlows' export { default as analyticsApi } from './analytics' export { targetListsApi } from './targetLists' export { maintenanceSchedulesApi, batchLaunchApi } from './maintenanceSchedules' diff --git a/frontend/src/api/pinnedFlows.ts b/frontend/src/api/pinnedFlows.ts deleted file mode 100644 index 517e81ed..00000000 --- a/frontend/src/api/pinnedFlows.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { apiClient } from './client' - -export interface PinnedFlow { - id: string - tree_id: string - tree_name: string - tree_type: 'troubleshooting' | 'procedural' | 'maintenance' - category_emoji?: string - category_name?: string - pinned_at: string - display_order: number -} - -export interface PinnedFlowsResponse { - items: PinnedFlow[] - count: number -} - -export const pinnedFlowsApi = { - list: async (): Promise => { - const { data } = await apiClient.get('/trees/pinned') - return data - }, - - unpin: async (treeId: string): Promise => { - await apiClient.delete(`/trees/${treeId}/pin`) - }, - - pin: async (treeId: string): Promise => { - await apiClient.post(`/trees/${treeId}/pin`) - }, -} - -export default pinnedFlowsApi diff --git a/frontend/src/components/library/TreeGridView.tsx b/frontend/src/components/library/TreeGridView.tsx index 1973b6ee..1b091c90 100644 --- a/frontend/src/components/library/TreeGridView.tsx +++ b/frontend/src/components/library/TreeGridView.tsx @@ -1,5 +1,5 @@ import { Link } from 'react-router-dom' -import { Pencil, Globe, Lock, Trash2, GitBranch, FileText, Wrench, Star, Download, ClipboardList } from 'lucide-react' +import { Pencil, Globe, Lock, Trash2, GitBranch, FileText, Wrench, Download, ClipboardList } from 'lucide-react' import type { TreeListItem } from '@/types' import { TagBadges } from '@/components/common/TagBadges' import { StaggerList } from '@/components/common/StaggerList' @@ -16,9 +16,6 @@ interface TreeGridViewProps { onDeleteTree: (tree: TreeListItem) => void onForkTree?: (treeId: string) => void onExportTree?: (treeId: string) => void - pinnedTreeIds?: Set - onTogglePin?: (treeId: string) => void - pinLoadingTreeIds?: Set } export function TreeGridView({ @@ -29,9 +26,6 @@ export function TreeGridView({ onDeleteTree, onForkTree, onExportTree, - pinnedTreeIds, - onTogglePin, - pinLoadingTreeIds, }: TreeGridViewProps) { const { canEditTree, canDeleteTree } = usePermissions() @@ -64,26 +58,6 @@ export function TreeGridView({ )}
- {onTogglePin && ( - - )} {tree.is_public ? ( diff --git a/frontend/src/components/library/TreeListView.tsx b/frontend/src/components/library/TreeListView.tsx index 43e02529..ebef1397 100644 --- a/frontend/src/components/library/TreeListView.tsx +++ b/frontend/src/components/library/TreeListView.tsx @@ -1,5 +1,5 @@ import { Link } from 'react-router-dom' -import { Pencil, Globe, Lock, GitBranch, FileText, Trash2, Wrench, Star, Download, ClipboardList } from 'lucide-react' +import { Pencil, Globe, Lock, GitBranch, FileText, Trash2, Wrench, Download, ClipboardList } from 'lucide-react' import type { TreeListItem } from '@/types' import { TagBadges } from '@/components/common/TagBadges' import { cn } from '@/lib/utils' @@ -15,9 +15,6 @@ interface TreeListViewProps { onDeleteTree: (tree: TreeListItem) => void onForkTree?: (treeId: string) => void onExportTree?: (treeId: string) => void - pinnedTreeIds?: Set - onTogglePin?: (treeId: string) => void - pinLoadingTreeIds?: Set } export function TreeListView({ @@ -28,9 +25,6 @@ export function TreeListView({ onDeleteTree, onForkTree, onExportTree, - pinnedTreeIds, - onTogglePin, - pinLoadingTreeIds, }: TreeListViewProps) { const { canEditTree } = usePermissions() @@ -99,26 +93,6 @@ export function TreeListView({
- {onTogglePin && ( - - )} {onExportTree && (