feat: sidebar redesign — activity feed, grouped nav, AI split (#107)
* 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>
This commit was merged in pull request #107.
This commit is contained in:
chihlasm
630
docs/plans/Frontend/sidebar-grouping-concepts.html
Normal file
630
docs/plans/Frontend/sidebar-grouping-concepts.html
Normal file
@@ -0,0 +1,630 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>ResolutionFlow — Sidebar Grouping Concepts</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700&family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--bg: #101114;
|
||||
--card: #17191d;
|
||||
--fg: #f8fafc;
|
||||
--fg-muted: #8891a0;
|
||||
--fg-dim: #5a6170;
|
||||
--border: rgba(255,255,255,0.06);
|
||||
--border-hover: rgba(255,255,255,0.12);
|
||||
--cyan-500: #06b6d4;
|
||||
--cyan-400: #22d3ee;
|
||||
--sidebar-hover: #212329;
|
||||
--sidebar-active: rgba(6,182,212,0.10);
|
||||
--glass-bg: rgba(22,24,28,0.55);
|
||||
--glass-blur: blur(16px);
|
||||
--amber: #f59e0b;
|
||||
--emerald: #34d399;
|
||||
--violet: #a78bfa;
|
||||
--rose: #fb7185;
|
||||
--blue: #60a5fa;
|
||||
--orange: #fb923c;
|
||||
--teal: #2dd4bf;
|
||||
--sky: #38bdf8;
|
||||
--lime: #a3e635;
|
||||
--indigo: #818cf8;
|
||||
--fuchsia: #e879f9;
|
||||
--pink: #f472b6;
|
||||
--yellow: #facc15;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'IBM Plex Sans', system-ui, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
min-height: 100vh;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
h1 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 2rem; letter-spacing: -0.03em; margin-bottom: 6px; }
|
||||
h1 span { color: var(--cyan-400); }
|
||||
.subtitle { color: var(--fg-muted); font-size: 0.9375rem; margin-bottom: 48px; max-width: 820px; line-height: 1.6; }
|
||||
|
||||
.section-header {
|
||||
margin-bottom: 24px; margin-top: 56px;
|
||||
padding-bottom: 16px; border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.section-header:first-of-type { margin-top: 0; }
|
||||
.section-header h2 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; margin-bottom: 4px; }
|
||||
.section-header p { font-size: 0.8125rem; color: var(--fg-dim); line-height: 1.5; max-width: 700px; }
|
||||
|
||||
.variants-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 28px;
|
||||
max-width: 1400px;
|
||||
}
|
||||
|
||||
.variant {
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: var(--glass-blur);
|
||||
-webkit-backdrop-filter: var(--glass-blur);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
transition: border-color 300ms, box-shadow 300ms;
|
||||
}
|
||||
.variant:hover { border-color: var(--border-hover); box-shadow: 0 12px 40px rgba(0,0,0,0.4); }
|
||||
|
||||
.variant-header {
|
||||
padding: 16px 20px 12px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.variant-tag {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.5625rem; text-transform: uppercase;
|
||||
letter-spacing: 0.12em; color: var(--cyan-400); margin-bottom: 4px;
|
||||
}
|
||||
.variant-title {
|
||||
font-family: 'Bricolage Grotesque', sans-serif;
|
||||
font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; margin-bottom: 2px;
|
||||
}
|
||||
.variant-desc { font-size: 0.75rem; color: var(--fg-dim); line-height: 1.4; }
|
||||
|
||||
/* ── Sidebar simulation ── */
|
||||
.sidebar-sim { padding: 6px 12px 12px; }
|
||||
|
||||
.nav-group-label {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.5625rem; text-transform: uppercase;
|
||||
letter-spacing: 0.12em; color: var(--fg-dim);
|
||||
padding: 14px 12px 5px;
|
||||
}
|
||||
.nav-group-label:first-child { padding-top: 8px; }
|
||||
|
||||
.nav-divider {
|
||||
height: 1px;
|
||||
background: var(--border);
|
||||
margin: 6px 12px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
padding: 8px 12px; border-radius: 10px;
|
||||
font-size: 0.8125rem; font-weight: 500;
|
||||
color: var(--fg-muted); cursor: pointer;
|
||||
transition: all 150ms ease; position: relative;
|
||||
}
|
||||
.nav-item:hover { background: var(--sidebar-hover); color: var(--fg); }
|
||||
.nav-item.active { background: var(--sidebar-active); color: var(--fg); }
|
||||
.nav-item.active::before {
|
||||
content: ''; position: absolute; left: 0; top: 50%;
|
||||
transform: translateY(-50%); width: 3px; height: 24px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
background: linear-gradient(135deg, var(--cyan-500), var(--cyan-400));
|
||||
}
|
||||
.nav-item .badge {
|
||||
margin-left: auto;
|
||||
font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem;
|
||||
color: var(--fg-dim); background: var(--card);
|
||||
border: 1px solid var(--border); padding: 1px 8px; border-radius: 9999px;
|
||||
}
|
||||
|
||||
.icon-wrap {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
width: 20px; height: 20px; flex-shrink: 0;
|
||||
}
|
||||
.icon-wrap svg {
|
||||
width: 18px; height: 18px; stroke-width: 1.75;
|
||||
fill: none; stroke: currentColor;
|
||||
stroke-linecap: round; stroke-linejoin: round;
|
||||
}
|
||||
|
||||
/* Icon colors */
|
||||
.ic-dashboard svg { color: var(--cyan-400); }
|
||||
.ic-flows svg { color: var(--violet); }
|
||||
.ic-editor svg { color: var(--amber); }
|
||||
.ic-sessions svg { color: var(--emerald); }
|
||||
.ic-exports svg { color: var(--blue); }
|
||||
.ic-ai svg { color: var(--fuchsia); }
|
||||
.ic-ai-build svg { color: var(--pink); }
|
||||
.ic-ai-copilot svg { color: var(--fuchsia); }
|
||||
.ic-steplib svg { color: var(--orange); }
|
||||
.ic-scripts svg { color: var(--teal); }
|
||||
.ic-kb svg { color: var(--rose); }
|
||||
.ic-analytics svg { color: var(--sky); }
|
||||
.ic-guides svg { color: var(--lime); }
|
||||
.ic-feedback svg { color: var(--indigo); }
|
||||
.ic-settings svg { color: var(--fg-dim); }
|
||||
|
||||
/* ── Footer section styling ── */
|
||||
.footer-section {
|
||||
border-top: 1px solid var(--border);
|
||||
padding: 8px 12px 4px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* ── Callout box ── */
|
||||
.ai-naming {
|
||||
margin-top: 56px; max-width: 1000px;
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: var(--glass-blur);
|
||||
-webkit-backdrop-filter: var(--glass-blur);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
padding: 24px 28px;
|
||||
}
|
||||
.ai-naming h2 {
|
||||
font-family: 'Bricolage Grotesque', sans-serif;
|
||||
font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; margin-bottom: 16px;
|
||||
}
|
||||
.naming-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
@media (max-width: 700px) { .naming-grid { grid-template-columns: 1fr; } }
|
||||
.naming-card {
|
||||
background: rgba(255,255,255,0.02);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 16px 20px;
|
||||
}
|
||||
.naming-card h3 {
|
||||
font-family: 'Bricolage Grotesque', sans-serif;
|
||||
font-weight: 700; font-size: 0.9375rem; margin-bottom: 4px;
|
||||
}
|
||||
.naming-card .purpose {
|
||||
font-size: 0.75rem; color: var(--fg-dim); margin-bottom: 12px; line-height: 1.4;
|
||||
}
|
||||
.naming-option {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 6px 0;
|
||||
font-size: 0.8125rem; color: var(--fg-muted);
|
||||
}
|
||||
.naming-option .name { color: var(--fg); font-weight: 600; min-width: 140px; }
|
||||
.naming-option .desc { font-size: 0.75rem; color: var(--fg-dim); }
|
||||
.naming-option.recommended .name { color: var(--cyan-400); }
|
||||
.naming-option .icon-sm {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
width: 18px; height: 18px; flex-shrink: 0;
|
||||
}
|
||||
.naming-option .icon-sm svg {
|
||||
width: 16px; height: 16px; stroke-width: 1.75;
|
||||
fill: none; stroke: currentColor;
|
||||
stroke-linecap: round; stroke-linejoin: round;
|
||||
}
|
||||
|
||||
/* SVG icon templates — reused inline */
|
||||
/* Dashboard: LayoutGrid */
|
||||
/* Flows: Network */
|
||||
/* Editor: Wrench */
|
||||
/* Sessions: Clock */
|
||||
/* Exports: FileOutput */
|
||||
/* AI: BotMessageSquare */
|
||||
/* AI Build: Wand2 / Hammer / MessageSquareCode */
|
||||
/* AI Copilot: Brain / BotMessageSquare / Sparkles */
|
||||
/* StepLib: Library */
|
||||
/* Scripts: Code2 -->
|
||||
/* KB: Lightbulb */
|
||||
/* Analytics: BarChart3 */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Sidebar <span>Grouping Concepts</span></h1>
|
||||
<p class="subtitle">
|
||||
Reorganizing the navigation around workflow stages — what engineers do when they're <strong>working a ticket</strong> vs
|
||||
<strong>building flows</strong> vs <strong>reviewing results</strong>. Also explores splitting AI Assistant into two
|
||||
distinct tools with clearer purpose.
|
||||
</p>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════
|
||||
CONCEPT A — Three Groups (Resolve / Build / Insights)
|
||||
═══════════════════════════════════════════════════════ -->
|
||||
<div class="section-header">
|
||||
<h2>Concept A — Resolve / Build / Insights</h2>
|
||||
<p>Three clear workflow stages. "Resolve" is front and center because that's what engineers spend most time doing. AI is split: copilot lives in Resolve, builder lives in Build.</p>
|
||||
</div>
|
||||
|
||||
<div class="variants-grid">
|
||||
|
||||
<!-- A1: Clean section labels -->
|
||||
<div class="variant">
|
||||
<div class="variant-header">
|
||||
<div class="variant-tag">Concept A1</div>
|
||||
<div class="variant-title">With Section Labels</div>
|
||||
<div class="variant-desc">Explicit uppercase labels separate each group. Clear visual hierarchy.</div>
|
||||
</div>
|
||||
<div class="sidebar-sim">
|
||||
<div class="nav-group-label">Resolve</div>
|
||||
<div class="nav-item active ic-sessions">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div>
|
||||
<span>Sessions</span>
|
||||
<span class="badge">3</span>
|
||||
</div>
|
||||
<div class="nav-item ic-flows">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><rect x="16" y="16" width="6" height="6" rx="1"/><rect x="2" y="16" width="6" height="6" rx="1"/><rect x="9" y="2" width="6" height="6" rx="1"/><path d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3"/><path d="M12 12V8"/></svg></div>
|
||||
<span>All Flows</span>
|
||||
<span class="badge">32</span>
|
||||
</div>
|
||||
<div class="nav-item ic-ai-copilot">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"/><path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z"/><path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4"/><path d="M12 18v-5"/><path d="M12 5v1"/></svg></div>
|
||||
<span>FlowPilot</span>
|
||||
</div>
|
||||
<div class="nav-item ic-scripts">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg></div>
|
||||
<span>Script Library</span>
|
||||
</div>
|
||||
|
||||
<div class="nav-group-label">Build</div>
|
||||
<div class="nav-item ic-editor">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg></div>
|
||||
<span>Flow Editor</span>
|
||||
</div>
|
||||
<div class="nav-item ic-ai-build">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72Z"/><path d="m14 7 3 3"/><path d="M5 6v4"/><path d="M19 14v4"/><path d="M10 2v2"/><path d="M7 8H3"/><path d="M21 16h-4"/><path d="M11 3H9"/></svg></div>
|
||||
<span>Flow Assist</span>
|
||||
</div>
|
||||
<div class="nav-item ic-steplib">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m16 6 4 14"/><path d="M12 6v14"/><path d="M8 8v12"/><path d="M4 4v16"/></svg></div>
|
||||
<span>Step Library</span>
|
||||
</div>
|
||||
<div class="nav-item ic-kb">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg></div>
|
||||
<span>KB Accelerator</span>
|
||||
</div>
|
||||
|
||||
<div class="nav-group-label">Insights</div>
|
||||
<div class="nav-item ic-dashboard">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg></div>
|
||||
<span>Dashboard</span>
|
||||
</div>
|
||||
<div class="nav-item ic-exports">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M4 7V4a2 2 0 0 1 2-2 2 2 0 0 0-2 2"/><path d="M4.063 20.999a2 2 0 0 0 2 1L18 22a2 2 0 0 0 2-2V7l-5-5H6"/><path d="m10 18 3-3-3-3"/><path d="M4 15h9"/></svg></div>
|
||||
<span>Exports</span>
|
||||
</div>
|
||||
<div class="nav-item ic-analytics">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><line x1="12" x2="12" y1="20" y2="10"/><line x1="18" x2="18" y1="20" y2="4"/><line x1="6" x2="6" y1="20" y2="16"/></svg></div>
|
||||
<span>Analytics</span>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<div class="nav-item ic-guides">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg></div>
|
||||
<span>User Guides</span>
|
||||
</div>
|
||||
<div class="nav-item ic-feedback">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/></svg></div>
|
||||
<span>Feedback</span>
|
||||
</div>
|
||||
<div class="nav-item ic-settings">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg></div>
|
||||
<span>Account</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- A2: Dividers instead of labels -->
|
||||
<div class="variant">
|
||||
<div class="variant-header">
|
||||
<div class="variant-tag">Concept A2</div>
|
||||
<div class="variant-title">With Dividers Only</div>
|
||||
<div class="variant-desc">Same grouping but uses subtle divider lines instead of text labels. Cleaner, less visual noise. Groups are implied by proximity.</div>
|
||||
</div>
|
||||
<div class="sidebar-sim">
|
||||
<div class="nav-item active ic-sessions" style="margin-top: 6px">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div>
|
||||
<span>Sessions</span>
|
||||
<span class="badge">3</span>
|
||||
</div>
|
||||
<div class="nav-item ic-flows">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><rect x="16" y="16" width="6" height="6" rx="1"/><rect x="2" y="16" width="6" height="6" rx="1"/><rect x="9" y="2" width="6" height="6" rx="1"/><path d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3"/><path d="M12 12V8"/></svg></div>
|
||||
<span>All Flows</span>
|
||||
<span class="badge">32</span>
|
||||
</div>
|
||||
<div class="nav-item ic-ai-copilot">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"/><path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z"/><path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4"/><path d="M12 18v-5"/><path d="M12 5v1"/></svg></div>
|
||||
<span>FlowPilot</span>
|
||||
</div>
|
||||
<div class="nav-item ic-scripts">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg></div>
|
||||
<span>Script Library</span>
|
||||
</div>
|
||||
|
||||
<div class="nav-divider"></div>
|
||||
|
||||
<div class="nav-item ic-editor">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg></div>
|
||||
<span>Flow Editor</span>
|
||||
</div>
|
||||
<div class="nav-item ic-ai-build">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72Z"/><path d="m14 7 3 3"/><path d="M5 6v4"/><path d="M19 14v4"/><path d="M10 2v2"/><path d="M7 8H3"/><path d="M21 16h-4"/><path d="M11 3H9"/></svg></div>
|
||||
<span>Flow Assist</span>
|
||||
</div>
|
||||
<div class="nav-item ic-steplib">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m16 6 4 14"/><path d="M12 6v14"/><path d="M8 8v12"/><path d="M4 4v16"/></svg></div>
|
||||
<span>Step Library</span>
|
||||
</div>
|
||||
<div class="nav-item ic-kb">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg></div>
|
||||
<span>KB Accelerator</span>
|
||||
</div>
|
||||
|
||||
<div class="nav-divider"></div>
|
||||
|
||||
<div class="nav-item ic-dashboard">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg></div>
|
||||
<span>Dashboard</span>
|
||||
</div>
|
||||
<div class="nav-item ic-exports">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M4 7V4a2 2 0 0 1 2-2 2 2 0 0 0-2 2"/><path d="M4.063 20.999a2 2 0 0 0 2 1L18 22a2 2 0 0 0 2-2V7l-5-5H6"/><path d="m10 18 3-3-3-3"/><path d="M4 15h9"/></svg></div>
|
||||
<span>Exports</span>
|
||||
</div>
|
||||
<div class="nav-item ic-analytics">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><line x1="12" x2="12" y1="20" y2="10"/><line x1="18" x2="18" y1="20" y2="4"/><line x1="6" x2="6" y1="20" y2="16"/></svg></div>
|
||||
<span>Analytics</span>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<div class="nav-item ic-guides">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg></div>
|
||||
<span>User Guides</span>
|
||||
</div>
|
||||
<div class="nav-item ic-feedback">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/></svg></div>
|
||||
<span>Feedback</span>
|
||||
</div>
|
||||
<div class="nav-item ic-settings">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg></div>
|
||||
<span>Account</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- A3: Dashboard at top, then workflow groups -->
|
||||
<div class="variant">
|
||||
<div class="variant-header">
|
||||
<div class="variant-tag">Concept A3</div>
|
||||
<div class="variant-title">Dashboard First</div>
|
||||
<div class="variant-desc">Dashboard stays at the top as the "home" landing, then workflow groups follow. Some engineers want the overview first before diving into work.</div>
|
||||
</div>
|
||||
<div class="sidebar-sim">
|
||||
<div class="nav-item ic-dashboard" style="margin-top: 6px">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg></div>
|
||||
<span>Dashboard</span>
|
||||
</div>
|
||||
|
||||
<div class="nav-group-label">Resolve</div>
|
||||
<div class="nav-item active ic-sessions">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div>
|
||||
<span>Sessions</span>
|
||||
<span class="badge">3</span>
|
||||
</div>
|
||||
<div class="nav-item ic-flows">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><rect x="16" y="16" width="6" height="6" rx="1"/><rect x="2" y="16" width="6" height="6" rx="1"/><rect x="9" y="2" width="6" height="6" rx="1"/><path d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3"/><path d="M12 12V8"/></svg></div>
|
||||
<span>All Flows</span>
|
||||
<span class="badge">32</span>
|
||||
</div>
|
||||
<div class="nav-item ic-ai-copilot">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"/><path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z"/><path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4"/><path d="M12 18v-5"/><path d="M12 5v1"/></svg></div>
|
||||
<span>FlowPilot</span>
|
||||
</div>
|
||||
<div class="nav-item ic-scripts">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg></div>
|
||||
<span>Script Library</span>
|
||||
</div>
|
||||
|
||||
<div class="nav-group-label">Build</div>
|
||||
<div class="nav-item ic-editor">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg></div>
|
||||
<span>Flow Editor</span>
|
||||
</div>
|
||||
<div class="nav-item ic-ai-build">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72Z"/><path d="m14 7 3 3"/><path d="M5 6v4"/><path d="M19 14v4"/><path d="M10 2v2"/><path d="M7 8H3"/><path d="M21 16h-4"/><path d="M11 3H9"/></svg></div>
|
||||
<span>Flow Assist</span>
|
||||
</div>
|
||||
<div class="nav-item ic-steplib">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m16 6 4 14"/><path d="M12 6v14"/><path d="M8 8v12"/><path d="M4 4v16"/></svg></div>
|
||||
<span>Step Library</span>
|
||||
</div>
|
||||
<div class="nav-item ic-kb">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg></div>
|
||||
<span>KB Accelerator</span>
|
||||
</div>
|
||||
|
||||
<div class="nav-group-label">Insights</div>
|
||||
<div class="nav-item ic-exports">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M4 7V4a2 2 0 0 1 2-2 2 2 0 0 0-2 2"/><path d="M4.063 20.999a2 2 0 0 0 2 1L18 22a2 2 0 0 0 2-2V7l-5-5H6"/><path d="m10 18 3-3-3-3"/><path d="M4 15h9"/></svg></div>
|
||||
<span>Exports</span>
|
||||
</div>
|
||||
<div class="nav-item ic-analytics">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><line x1="12" x2="12" y1="20" y2="10"/><line x1="18" x2="18" y1="20" y2="4"/><line x1="6" x2="6" y1="20" y2="16"/></svg></div>
|
||||
<span>Analytics</span>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<div class="nav-item ic-guides">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg></div>
|
||||
<span>User Guides</span>
|
||||
</div>
|
||||
<div class="nav-item ic-feedback">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/></svg></div>
|
||||
<span>Feedback</span>
|
||||
</div>
|
||||
<div class="nav-item ic-settings">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg></div>
|
||||
<span>Account</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════
|
||||
CONCEPT B — Two Groups (Work / Build) + Dashboard
|
||||
═══════════════════════════════════════════════════════ -->
|
||||
<div class="section-header">
|
||||
<h2>Concept B — Work / Build (Simpler Split)</h2>
|
||||
<p>Only two groups instead of three. Dashboard top, then "Work" (active troubleshooting) and "Build" (authoring + review). Exports and Analytics move into Build since they're about improving process, not resolving tickets.</p>
|
||||
</div>
|
||||
|
||||
<div class="variants-grid">
|
||||
|
||||
<div class="variant">
|
||||
<div class="variant-header">
|
||||
<div class="variant-tag">Concept B1</div>
|
||||
<div class="variant-title">Two Groups + Dashboard</div>
|
||||
<div class="variant-desc">Fewer sections = less cognitive load. "Work" is what you do when tickets come in. "Build" is everything else.</div>
|
||||
</div>
|
||||
<div class="sidebar-sim">
|
||||
<div class="nav-item ic-dashboard" style="margin-top: 6px">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg></div>
|
||||
<span>Dashboard</span>
|
||||
</div>
|
||||
|
||||
<div class="nav-group-label">Work</div>
|
||||
<div class="nav-item active ic-sessions">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div>
|
||||
<span>Sessions</span>
|
||||
<span class="badge">3</span>
|
||||
</div>
|
||||
<div class="nav-item ic-flows">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><rect x="16" y="16" width="6" height="6" rx="1"/><rect x="2" y="16" width="6" height="6" rx="1"/><rect x="9" y="2" width="6" height="6" rx="1"/><path d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3"/><path d="M12 12V8"/></svg></div>
|
||||
<span>All Flows</span>
|
||||
<span class="badge">32</span>
|
||||
</div>
|
||||
<div class="nav-item ic-ai-copilot">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"/><path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z"/><path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4"/><path d="M12 18v-5"/><path d="M12 5v1"/></svg></div>
|
||||
<span>FlowPilot</span>
|
||||
</div>
|
||||
<div class="nav-item ic-scripts">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg></div>
|
||||
<span>Script Library</span>
|
||||
</div>
|
||||
<div class="nav-item ic-exports">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M4 7V4a2 2 0 0 1 2-2 2 2 0 0 0-2 2"/><path d="M4.063 20.999a2 2 0 0 0 2 1L18 22a2 2 0 0 0 2-2V7l-5-5H6"/><path d="m10 18 3-3-3-3"/><path d="M4 15h9"/></svg></div>
|
||||
<span>Exports</span>
|
||||
</div>
|
||||
|
||||
<div class="nav-group-label">Build</div>
|
||||
<div class="nav-item ic-editor">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg></div>
|
||||
<span>Flow Editor</span>
|
||||
</div>
|
||||
<div class="nav-item ic-ai-build">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72Z"/><path d="m14 7 3 3"/><path d="M5 6v4"/><path d="M19 14v4"/><path d="M10 2v2"/><path d="M7 8H3"/><path d="M21 16h-4"/><path d="M11 3H9"/></svg></div>
|
||||
<span>Flow Assist</span>
|
||||
</div>
|
||||
<div class="nav-item ic-steplib">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m16 6 4 14"/><path d="M12 6v14"/><path d="M8 8v12"/><path d="M4 4v16"/></svg></div>
|
||||
<span>Step Library</span>
|
||||
</div>
|
||||
<div class="nav-item ic-kb">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg></div>
|
||||
<span>KB Accelerator</span>
|
||||
</div>
|
||||
<div class="nav-item ic-analytics">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><line x1="12" x2="12" y1="20" y2="10"/><line x1="18" x2="18" y1="20" y2="4"/><line x1="6" x2="6" y1="20" y2="16"/></svg></div>
|
||||
<span>Analytics</span>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<div class="nav-item ic-guides">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg></div>
|
||||
<span>User Guides</span>
|
||||
</div>
|
||||
<div class="nav-item ic-feedback">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/></svg></div>
|
||||
<span>Feedback</span>
|
||||
</div>
|
||||
<div class="nav-item ic-settings">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg></div>
|
||||
<span>Account</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════
|
||||
AI NAMING OPTIONS
|
||||
═══════════════════════════════════════════════════════ -->
|
||||
<div class="ai-naming">
|
||||
<h2>AI Assistant Split — Naming Options</h2>
|
||||
<div class="naming-grid">
|
||||
|
||||
<div class="naming-card">
|
||||
<h3 style="color: var(--fuchsia)">Troubleshooting AI (Copilot)</h3>
|
||||
<p class="purpose">Used during active sessions. Suggests next steps, explains errors, provides context from ticket data and knowledge base.</p>
|
||||
<div class="naming-option recommended">
|
||||
<div class="icon-sm" style="color: var(--fuchsia)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"/><path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z"/><path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4"/><path d="M12 18v-5"/><path d="M12 5v1"/></svg></div>
|
||||
<span class="name">FlowPilot</span>
|
||||
<span class="desc">Brain icon — suggests intelligence guiding you. Already used in the copilot panel.</span>
|
||||
</div>
|
||||
<div class="naming-option">
|
||||
<div class="icon-sm" style="color: var(--fuchsia)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg></div>
|
||||
<span class="name">AI Copilot</span>
|
||||
<span class="desc">Current robot icon — generic but clear purpose</span>
|
||||
</div>
|
||||
<div class="naming-option">
|
||||
<div class="icon-sm" style="color: var(--fuchsia)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3Z"/></svg></div>
|
||||
<span class="name">Resolve AI</span>
|
||||
<span class="desc">Sparkle icon — ties to the "Resolve" section name</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="naming-card">
|
||||
<h3 style="color: var(--pink)">Flow Builder AI (Authoring)</h3>
|
||||
<p class="purpose">Used when building new flows from scratch. Conversational interface to generate decision trees, procedural steps, and intake forms.</p>
|
||||
<div class="naming-option recommended">
|
||||
<div class="icon-sm" style="color: var(--pink)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72Z"/><path d="m14 7 3 3"/><path d="M5 6v4"/><path d="M19 14v4"/><path d="M10 2v2"/><path d="M7 8H3"/><path d="M21 16h-4"/><path d="M11 3H9"/></svg></div>
|
||||
<span class="name">Flow Assist</span>
|
||||
<span class="desc">Wand icon — creation/magic. Already the name of the embedded editor AI.</span>
|
||||
</div>
|
||||
<div class="naming-option">
|
||||
<div class="icon-sm" style="color: var(--pink)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg></div>
|
||||
<span class="name">AI Builder</span>
|
||||
<span class="desc">Robot icon — explicit "builder" label</span>
|
||||
</div>
|
||||
<div class="naming-option">
|
||||
<div class="icon-sm" style="color: var(--pink)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg></div>
|
||||
<span class="name">Flow Forge</span>
|
||||
<span class="desc">Wrench icon — "forge" = crafting/building</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.querySelectorAll('.nav-item').forEach(item => {
|
||||
item.addEventListener('click', () => item.classList.toggle('active'));
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
734
docs/plans/Frontend/sidebar-icon-concepts.html
Normal file
734
docs/plans/Frontend/sidebar-icon-concepts.html
Normal file
@@ -0,0 +1,734 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>ResolutionFlow — Sidebar Icon Concepts (Refined)</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700&family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--bg: #101114;
|
||||
--card: #17191d;
|
||||
--fg: #f8fafc;
|
||||
--fg-muted: #8891a0;
|
||||
--fg-dim: #5a6170;
|
||||
--border: rgba(255,255,255,0.06);
|
||||
--border-hover: rgba(255,255,255,0.12);
|
||||
--cyan-500: #06b6d4;
|
||||
--cyan-400: #22d3ee;
|
||||
--sidebar-hover: #212329;
|
||||
--sidebar-active: rgba(6,182,212,0.10);
|
||||
--glass-bg: rgba(22,24,28,0.55);
|
||||
--glass-blur: blur(16px);
|
||||
--amber: #f59e0b; --amber-soft: rgba(245,158,11,0.12);
|
||||
--emerald: #34d399; --emerald-soft: rgba(52,211,153,0.12);
|
||||
--violet: #a78bfa; --violet-soft: rgba(167,139,250,0.12);
|
||||
--rose: #fb7185; --rose-soft: rgba(251,113,133,0.12);
|
||||
--blue: #60a5fa; --blue-soft: rgba(96,165,250,0.12);
|
||||
--orange: #fb923c; --orange-soft: rgba(251,146,60,0.12);
|
||||
--teal: #2dd4bf; --teal-soft: rgba(45,212,191,0.12);
|
||||
--sky: #38bdf8; --sky-soft: rgba(56,189,248,0.12);
|
||||
--lime: #a3e635; --lime-soft: rgba(163,230,53,0.12);
|
||||
--indigo: #818cf8; --indigo-soft: rgba(129,140,248,0.12);
|
||||
--fuchsia: #e879f9; --fuchsia-soft: rgba(232,121,249,0.12);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'IBM Plex Sans', system-ui, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
min-height: 100vh;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
h1 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 2rem; letter-spacing: -0.03em; margin-bottom: 6px; }
|
||||
h1 span { color: var(--cyan-400); }
|
||||
.subtitle { color: var(--fg-muted); font-size: 0.9375rem; margin-bottom: 48px; max-width: 780px; line-height: 1.6; }
|
||||
|
||||
/* ── Section headers ── */
|
||||
.section-header {
|
||||
margin-bottom: 24px;
|
||||
margin-top: 56px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.section-header:first-of-type { margin-top: 0; }
|
||||
.section-header h2 {
|
||||
font-family: 'Bricolage Grotesque', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.section-header p { font-size: 0.8125rem; color: var(--fg-dim); line-height: 1.5; }
|
||||
|
||||
/* ── Grid of variants ── */
|
||||
.variants-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
max-width: 1200px;
|
||||
}
|
||||
@media (max-width: 1000px) { .variants-grid { grid-template-columns: 1fr 1fr; } }
|
||||
@media (max-width: 680px) { .variants-grid { grid-template-columns: 1fr; } }
|
||||
|
||||
.variant {
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: var(--glass-blur);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
transition: border-color 300ms, box-shadow 300ms;
|
||||
}
|
||||
.variant:hover { border-color: var(--border-hover); box-shadow: 0 12px 40px rgba(0,0,0,0.4); }
|
||||
|
||||
.variant-header {
|
||||
padding: 16px 20px 12px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.variant-tag {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.5625rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--cyan-400);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.variant-title {
|
||||
font-family: 'Bricolage Grotesque', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.variant-desc { font-size: 0.75rem; color: var(--fg-dim); line-height: 1.4; }
|
||||
|
||||
/* ── Sidebar simulation ── */
|
||||
.sidebar-sim { padding: 8px 12px; }
|
||||
.nav-section-label {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.5625rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--fg-dim);
|
||||
padding: 10px 12px 4px;
|
||||
}
|
||||
.nav-item {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
padding: 8px 12px; border-radius: 10px;
|
||||
font-size: 0.8125rem; font-weight: 500;
|
||||
color: var(--fg-muted); cursor: pointer;
|
||||
transition: all 150ms ease; position: relative;
|
||||
}
|
||||
.nav-item:hover { background: var(--sidebar-hover); color: var(--fg); }
|
||||
.nav-item.active { background: var(--sidebar-active); color: var(--fg); }
|
||||
.nav-item .badge {
|
||||
margin-left: auto;
|
||||
font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem;
|
||||
color: var(--fg-dim); background: var(--card);
|
||||
border: 1px solid var(--border); padding: 1px 8px; border-radius: 9999px;
|
||||
}
|
||||
.nav-item.active::before {
|
||||
content: ''; position: absolute; left: 0; top: 50%;
|
||||
transform: translateY(-50%); width: 3px; height: 24px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
background: linear-gradient(135deg, var(--cyan-500), var(--cyan-400));
|
||||
}
|
||||
|
||||
/* ── Icon wrap ── */
|
||||
.icon-wrap {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
width: 20px; height: 20px; flex-shrink: 0; position: relative;
|
||||
}
|
||||
.icon-wrap svg {
|
||||
width: 18px; height: 18px; stroke-width: 1.75;
|
||||
fill: none; stroke: currentColor;
|
||||
stroke-linecap: round; stroke-linejoin: round;
|
||||
}
|
||||
|
||||
/* ── CONCEPT 1: Semantic Colored Icons ── */
|
||||
.c1 .icon-wrap { transition: transform 150ms ease; }
|
||||
.c1 .nav-item:hover .icon-wrap { transform: scale(1.1); }
|
||||
.c1 .ic-dashboard svg { stroke: var(--cyan-400); }
|
||||
.c1 .ic-flows svg { stroke: var(--violet); }
|
||||
.c1 .ic-editor svg { stroke: var(--amber); }
|
||||
.c1 .ic-sessions svg { stroke: var(--emerald); }
|
||||
.c1 .ic-exports svg { stroke: var(--blue); }
|
||||
.c1 .ic-ai svg { stroke: var(--fuchsia); }
|
||||
.c1 .ic-steplib svg { stroke: var(--orange); }
|
||||
.c1 .ic-scripts svg { stroke: var(--teal); }
|
||||
.c1 .ic-kb svg { stroke: var(--rose); }
|
||||
.c1 .ic-analytics svg{ stroke: var(--sky); }
|
||||
|
||||
/* ── CONCEPT 2: Tinted Pill Backgrounds ── */
|
||||
.c2 .icon-wrap {
|
||||
width: 28px; height: 28px; border-radius: 8px;
|
||||
transition: transform 150ms ease, box-shadow 200ms ease;
|
||||
}
|
||||
.c2 .nav-item:hover .icon-wrap { transform: scale(1.08); }
|
||||
.c2 .icon-wrap svg { width: 16px; height: 16px; }
|
||||
|
||||
.c2 .ic-dashboard .icon-wrap { background: rgba(6,182,212,0.12); }
|
||||
.c2 .ic-dashboard svg { stroke: var(--cyan-400); }
|
||||
.c2 .ic-flows .icon-wrap { background: var(--violet-soft); }
|
||||
.c2 .ic-flows svg { stroke: var(--violet); }
|
||||
.c2 .ic-editor .icon-wrap { background: var(--amber-soft); }
|
||||
.c2 .ic-editor svg { stroke: var(--amber); }
|
||||
.c2 .ic-sessions .icon-wrap { background: var(--emerald-soft); }
|
||||
.c2 .ic-sessions svg { stroke: var(--emerald); }
|
||||
.c2 .ic-exports .icon-wrap { background: var(--blue-soft); }
|
||||
.c2 .ic-exports svg { stroke: var(--blue); }
|
||||
.c2 .ic-ai .icon-wrap { background: var(--fuchsia-soft); }
|
||||
.c2 .ic-ai svg { stroke: var(--fuchsia); }
|
||||
.c2 .ic-steplib .icon-wrap { background: var(--orange-soft); }
|
||||
.c2 .ic-steplib svg { stroke: var(--orange); }
|
||||
.c2 .ic-scripts .icon-wrap { background: var(--teal-soft); }
|
||||
.c2 .ic-scripts svg { stroke: var(--teal); }
|
||||
.c2 .ic-kb .icon-wrap { background: var(--rose-soft); }
|
||||
.c2 .ic-kb svg { stroke: var(--rose); }
|
||||
.c2 .ic-analytics .icon-wrap { background: var(--sky-soft); }
|
||||
.c2 .ic-analytics svg { stroke: var(--sky); }
|
||||
|
||||
.c2 .nav-item.active.ic-dashboard .icon-wrap { box-shadow: 0 0 12px rgba(6,182,212,0.3); }
|
||||
.c2 .nav-item.active.ic-sessions .icon-wrap { box-shadow: 0 0 12px rgba(52,211,153,0.3); }
|
||||
.c2 .nav-item.active.ic-flows .icon-wrap { box-shadow: 0 0 12px rgba(167,139,250,0.3); }
|
||||
|
||||
/* ── Icon label under each nav section ── */
|
||||
.icon-label {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.5rem;
|
||||
color: var(--fg-dim);
|
||||
opacity: 0.5;
|
||||
margin-left: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.nav-item:hover .icon-label { opacity: 0.8; }
|
||||
|
||||
/* ── Comparison table ── */
|
||||
.comparison {
|
||||
margin-top: 56px;
|
||||
max-width: 1200px;
|
||||
}
|
||||
.comparison h2 {
|
||||
font-family: 'Bricolage Grotesque', sans-serif;
|
||||
font-weight: 700; font-size: 1.25rem;
|
||||
letter-spacing: -0.02em; margin-bottom: 16px;
|
||||
}
|
||||
.comp-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
.comp-table th {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.625rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--fg-dim);
|
||||
text-align: left;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.comp-table td {
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
color: var(--fg-muted);
|
||||
vertical-align: top;
|
||||
}
|
||||
.comp-table td:first-child {
|
||||
color: var(--fg);
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.comp-table .current { color: var(--fg-dim); }
|
||||
.comp-table .pick { color: var(--cyan-400); font-weight: 500; }
|
||||
.comp-table .alt { color: var(--fg-muted); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Sidebar Icons — <span>Style × Shape Matrix</span></h1>
|
||||
<p class="subtitle">
|
||||
Concept 1 (Semantic Colors) and Concept 2 (Tinted Pills) shown with 3 different icon sets each.
|
||||
<strong>Current</strong> = existing Lucide icons, <strong>Set A</strong> = more descriptive/metaphorical icons,
|
||||
<strong>Set B</strong> = minimal/geometric alternatives. Click any nav item to toggle active state.
|
||||
</p>
|
||||
|
||||
<!-- ════════════════════════════════════════════════════════
|
||||
CONCEPT 1 — SEMANTIC COLORED ICONS × 3 icon sets
|
||||
════════════════════════════════════════════════════════ -->
|
||||
<div class="section-header">
|
||||
<h2>Concept 1 — Semantic Colored Icons</h2>
|
||||
<p>Always-on color per icon. No pill background — just the stroke color creates landmarks.</p>
|
||||
</div>
|
||||
|
||||
<div class="variants-grid">
|
||||
|
||||
<!-- C1 × Current Icons -->
|
||||
<div class="variant">
|
||||
<div class="variant-header">
|
||||
<div class="variant-tag">Concept 1 × Current Icons</div>
|
||||
<div class="variant-title">Original Lucide Set</div>
|
||||
<div class="variant-desc">LayoutGrid, Box, PenLine, Clock, FileText, BotMessageSquare, Bookmark, Terminal, Sparkles, BarChart3</div>
|
||||
</div>
|
||||
<div class="sidebar-sim c1">
|
||||
<div class="nav-section-label">Navigation</div>
|
||||
<!-- Dashboard: LayoutGrid -->
|
||||
<div class="nav-item active ic-dashboard">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg></div>
|
||||
<span>Dashboard</span>
|
||||
</div>
|
||||
<!-- All Flows: Box -->
|
||||
<div class="nav-item ic-flows">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg></div>
|
||||
<span>All Flows</span>
|
||||
<span class="badge">12</span>
|
||||
</div>
|
||||
<!-- Flow Editor: PenLine -->
|
||||
<div class="nav-item ic-editor">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg></div>
|
||||
<span>Flow Editor</span>
|
||||
</div>
|
||||
<!-- Sessions: Clock -->
|
||||
<div class="nav-item ic-sessions">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div>
|
||||
<span>Sessions</span>
|
||||
<span class="badge">3</span>
|
||||
</div>
|
||||
<!-- Exports: FileText -->
|
||||
<div class="nav-item ic-exports">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg></div>
|
||||
<span>Exports</span>
|
||||
</div>
|
||||
<!-- AI Assistant: BotMessageSquare -->
|
||||
<div class="nav-item ic-ai">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg></div>
|
||||
<span>AI Assistant</span>
|
||||
</div>
|
||||
<!-- Step Library: Bookmark -->
|
||||
<div class="nav-item ic-steplib">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/></svg></div>
|
||||
<span>Step Library</span>
|
||||
</div>
|
||||
<!-- Script Library: Terminal -->
|
||||
<div class="nav-item ic-scripts">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><polyline points="4 17 10 11 4 5"/><line x1="12" x2="20" y1="19" y2="19"/></svg></div>
|
||||
<span>Script Library</span>
|
||||
</div>
|
||||
<!-- KB Accelerator: Sparkles -->
|
||||
<div class="nav-item ic-kb">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3Z"/></svg></div>
|
||||
<span>KB Accelerator</span>
|
||||
</div>
|
||||
<!-- Analytics: BarChart3 -->
|
||||
<div class="nav-item ic-analytics">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><line x1="12" x2="12" y1="20" y2="10"/><line x1="18" x2="18" y1="20" y2="4"/><line x1="6" x2="6" y1="20" y2="16"/></svg></div>
|
||||
<span>Analytics</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- C1 × Icon Set A — Descriptive/Metaphorical -->
|
||||
<div class="variant">
|
||||
<div class="variant-header">
|
||||
<div class="variant-tag">Concept 1 × Icon Set A</div>
|
||||
<div class="variant-title">Descriptive / Metaphorical</div>
|
||||
<div class="variant-desc">Gauge, GitFork, Wrench, Zap, Share2, Brain, Layers, Code2, Rocket, TrendingUp</div>
|
||||
</div>
|
||||
<div class="sidebar-sim c1">
|
||||
<div class="nav-section-label">Navigation</div>
|
||||
<!-- Dashboard: Gauge (speedometer) -->
|
||||
<div class="nav-item active ic-dashboard">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m12 14 4-4"/><path d="M3.34 19a10 10 0 1 1 17.32 0"/></svg></div>
|
||||
<span>Dashboard</span>
|
||||
</div>
|
||||
<!-- All Flows: GitFork (branching paths) -->
|
||||
<div class="nav-item ic-flows">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><circle cx="12" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><circle cx="18" cy="6" r="3"/><path d="M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9"/><path d="M12 12v3"/></svg></div>
|
||||
<span>All Flows</span>
|
||||
<span class="badge">12</span>
|
||||
</div>
|
||||
<!-- Flow Editor: Wrench (builder) -->
|
||||
<div class="nav-item ic-editor">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg></div>
|
||||
<span>Flow Editor</span>
|
||||
</div>
|
||||
<!-- Sessions: Zap (active/energy) -->
|
||||
<div class="nav-item ic-sessions">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg></div>
|
||||
<span>Sessions</span>
|
||||
<span class="badge">3</span>
|
||||
</div>
|
||||
<!-- Exports: Share2 (share network) -->
|
||||
<div class="nav-item ic-exports">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg></div>
|
||||
<span>Exports</span>
|
||||
</div>
|
||||
<!-- AI Assistant: Brain -->
|
||||
<div class="nav-item ic-ai">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"/><path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z"/><path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4"/><path d="M12 18v-5"/><path d="M12 5v1"/></svg></div>
|
||||
<span>AI Assistant</span>
|
||||
</div>
|
||||
<!-- Step Library: Layers (stacked) -->
|
||||
<div class="nav-item ic-steplib">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"/><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"/><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"/></svg></div>
|
||||
<span>Step Library</span>
|
||||
</div>
|
||||
<!-- Script Library: Code2 (code brackets) -->
|
||||
<div class="nav-item ic-scripts">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg></div>
|
||||
<span>Script Library</span>
|
||||
</div>
|
||||
<!-- KB Accelerator: Rocket -->
|
||||
<div class="nav-item ic-kb">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/></svg></div>
|
||||
<span>KB Accelerator</span>
|
||||
</div>
|
||||
<!-- Analytics: TrendingUp -->
|
||||
<div class="nav-item ic-analytics">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg></div>
|
||||
<span>Analytics</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- C1 × Icon Set B — Minimal/Geometric -->
|
||||
<div class="variant">
|
||||
<div class="variant-header">
|
||||
<div class="variant-tag">Concept 1 × Icon Set B</div>
|
||||
<div class="variant-title">Minimal / Geometric</div>
|
||||
<div class="variant-desc">Compass, Network, PenTool, Radio, FileOutput, Wand2, Library, ScrollText, Lightbulb, PieChart</div>
|
||||
</div>
|
||||
<div class="sidebar-sim c1">
|
||||
<div class="nav-section-label">Navigation</div>
|
||||
<!-- Dashboard: Compass (navigation hub) -->
|
||||
<div class="nav-item active ic-dashboard">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/></svg></div>
|
||||
<span>Dashboard</span>
|
||||
</div>
|
||||
<!-- All Flows: Network (connected nodes) -->
|
||||
<div class="nav-item ic-flows">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><rect x="16" y="16" width="6" height="6" rx="1"/><rect x="2" y="16" width="6" height="6" rx="1"/><rect x="9" y="2" width="6" height="6" rx="1"/><path d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3"/><path d="M12 12V8"/></svg></div>
|
||||
<span>All Flows</span>
|
||||
<span class="badge">12</span>
|
||||
</div>
|
||||
<!-- Flow Editor: PenTool (vector pen) -->
|
||||
<div class="nav-item ic-editor">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m12 19 7-7 3 3-7 7-3-3z"/><path d="m18 13-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/><path d="m2 2 7.586 7.586"/><circle cx="11" cy="11" r="2"/></svg></div>
|
||||
<span>Flow Editor</span>
|
||||
</div>
|
||||
<!-- Sessions: Radio (live/active) -->
|
||||
<div class="nav-item ic-sessions">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M4.9 19.1C1 15.2 1 8.8 4.9 4.9"/><path d="M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.4"/><path d="M16.2 7.8c2.3 2.3 2.3 6.1 0 8.4"/><path d="M19.1 4.9C23 8.8 23 15.1 19.1 19"/><circle cx="12" cy="12" r="2"/></svg></div>
|
||||
<span>Sessions</span>
|
||||
<span class="badge">3</span>
|
||||
</div>
|
||||
<!-- Exports: FileOutput (file with arrow) -->
|
||||
<div class="nav-item ic-exports">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M4 7V4a2 2 0 0 1 2-2 2 2 0 0 0-2 2"/><path d="M4.063 20.999a2 2 0 0 0 2 1L18 22a2 2 0 0 0 2-2V7l-5-5H6"/><path d="m10 18 3-3-3-3"/><path d="M4 15h9"/></svg></div>
|
||||
<span>Exports</span>
|
||||
</div>
|
||||
<!-- AI Assistant: Wand2 (magic wand) -->
|
||||
<div class="nav-item ic-ai">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72Z"/><path d="m14 7 3 3"/><path d="M5 6v4"/><path d="M19 14v4"/><path d="M10 2v2"/><path d="M7 8H3"/><path d="M21 16h-4"/><path d="M11 3H9"/></svg></div>
|
||||
<span>AI Assistant</span>
|
||||
</div>
|
||||
<!-- Step Library: Library -->
|
||||
<div class="nav-item ic-steplib">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m16 6 4 14"/><path d="M12 6v14"/><path d="M8 8v12"/><path d="M4 4v16"/></svg></div>
|
||||
<span>Step Library</span>
|
||||
</div>
|
||||
<!-- Script Library: ScrollText -->
|
||||
<div class="nav-item ic-scripts">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M8 21h12a2 2 0 0 0 2-2v-2H10v2a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v3h4"/><path d="M19 17V5a2 2 0 0 0-2-2H4"/><path d="M15 8h-5"/><path d="M15 12h-5"/></svg></div>
|
||||
<span>Script Library</span>
|
||||
</div>
|
||||
<!-- KB Accelerator: Lightbulb -->
|
||||
<div class="nav-item ic-kb">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg></div>
|
||||
<span>KB Accelerator</span>
|
||||
</div>
|
||||
<!-- Analytics: PieChart -->
|
||||
<div class="nav-item ic-analytics">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg></div>
|
||||
<span>Analytics</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ════════════════════════════════════════════════════════
|
||||
CONCEPT 2 — TINTED PILL BACKGROUNDS × 3 icon sets
|
||||
════════════════════════════════════════════════════════ -->
|
||||
<div class="section-header">
|
||||
<h2>Concept 2 — Tinted Pill Backgrounds</h2>
|
||||
<p>Colored icon inside a soft tinted rounded-square. Creates visual weight — feels like an app dock.</p>
|
||||
</div>
|
||||
|
||||
<div class="variants-grid">
|
||||
|
||||
<!-- C2 × Current Icons -->
|
||||
<div class="variant">
|
||||
<div class="variant-header">
|
||||
<div class="variant-tag">Concept 2 × Current Icons</div>
|
||||
<div class="variant-title">Original Lucide Set</div>
|
||||
<div class="variant-desc">LayoutGrid, Box, PenLine, Clock, FileText, BotMessageSquare, Bookmark, Terminal, Sparkles, BarChart3</div>
|
||||
</div>
|
||||
<div class="sidebar-sim c2">
|
||||
<div class="nav-section-label">Navigation</div>
|
||||
<div class="nav-item active ic-dashboard">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg></div>
|
||||
<span>Dashboard</span>
|
||||
</div>
|
||||
<div class="nav-item ic-flows">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg></div>
|
||||
<span>All Flows</span>
|
||||
<span class="badge">12</span>
|
||||
</div>
|
||||
<div class="nav-item ic-editor">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg></div>
|
||||
<span>Flow Editor</span>
|
||||
</div>
|
||||
<div class="nav-item ic-sessions">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div>
|
||||
<span>Sessions</span>
|
||||
<span class="badge">3</span>
|
||||
</div>
|
||||
<div class="nav-item ic-exports">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg></div>
|
||||
<span>Exports</span>
|
||||
</div>
|
||||
<div class="nav-item ic-ai">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg></div>
|
||||
<span>AI Assistant</span>
|
||||
</div>
|
||||
<div class="nav-item ic-steplib">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/></svg></div>
|
||||
<span>Step Library</span>
|
||||
</div>
|
||||
<div class="nav-item ic-scripts">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><polyline points="4 17 10 11 4 5"/><line x1="12" x2="20" y1="19" y2="19"/></svg></div>
|
||||
<span>Script Library</span>
|
||||
</div>
|
||||
<div class="nav-item ic-kb">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3Z"/></svg></div>
|
||||
<span>KB Accelerator</span>
|
||||
</div>
|
||||
<div class="nav-item ic-analytics">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><line x1="12" x2="12" y1="20" y2="10"/><line x1="18" x2="18" y1="20" y2="4"/><line x1="6" x2="6" y1="20" y2="16"/></svg></div>
|
||||
<span>Analytics</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- C2 × Icon Set A — Descriptive/Metaphorical -->
|
||||
<div class="variant">
|
||||
<div class="variant-header">
|
||||
<div class="variant-tag">Concept 2 × Icon Set A</div>
|
||||
<div class="variant-title">Descriptive / Metaphorical</div>
|
||||
<div class="variant-desc">Gauge, GitFork, Wrench, Zap, Share2, Brain, Layers, Code2, Rocket, TrendingUp</div>
|
||||
</div>
|
||||
<div class="sidebar-sim c2">
|
||||
<div class="nav-section-label">Navigation</div>
|
||||
<div class="nav-item active ic-dashboard">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m12 14 4-4"/><path d="M3.34 19a10 10 0 1 1 17.32 0"/></svg></div>
|
||||
<span>Dashboard</span>
|
||||
</div>
|
||||
<div class="nav-item ic-flows">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><circle cx="12" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><circle cx="18" cy="6" r="3"/><path d="M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9"/><path d="M12 12v3"/></svg></div>
|
||||
<span>All Flows</span>
|
||||
<span class="badge">12</span>
|
||||
</div>
|
||||
<div class="nav-item ic-editor">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg></div>
|
||||
<span>Flow Editor</span>
|
||||
</div>
|
||||
<div class="nav-item ic-sessions">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg></div>
|
||||
<span>Sessions</span>
|
||||
<span class="badge">3</span>
|
||||
</div>
|
||||
<div class="nav-item ic-exports">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg></div>
|
||||
<span>Exports</span>
|
||||
</div>
|
||||
<div class="nav-item ic-ai">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"/><path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z"/><path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4"/><path d="M12 18v-5"/><path d="M12 5v1"/></svg></div>
|
||||
<span>AI Assistant</span>
|
||||
</div>
|
||||
<div class="nav-item ic-steplib">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"/><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"/><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"/></svg></div>
|
||||
<span>Step Library</span>
|
||||
</div>
|
||||
<div class="nav-item ic-scripts">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg></div>
|
||||
<span>Script Library</span>
|
||||
</div>
|
||||
<div class="nav-item ic-kb">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/></svg></div>
|
||||
<span>KB Accelerator</span>
|
||||
</div>
|
||||
<div class="nav-item ic-analytics">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg></div>
|
||||
<span>Analytics</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- C2 × Icon Set B — Minimal/Geometric -->
|
||||
<div class="variant">
|
||||
<div class="variant-header">
|
||||
<div class="variant-tag">Concept 2 × Icon Set B</div>
|
||||
<div class="variant-title">Minimal / Geometric</div>
|
||||
<div class="variant-desc">Compass, Network, PenTool, Radio, FileOutput, Wand2, Library, ScrollText, Lightbulb, PieChart</div>
|
||||
</div>
|
||||
<div class="sidebar-sim c2">
|
||||
<div class="nav-section-label">Navigation</div>
|
||||
<div class="nav-item active ic-dashboard">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/></svg></div>
|
||||
<span>Dashboard</span>
|
||||
</div>
|
||||
<div class="nav-item ic-flows">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><rect x="16" y="16" width="6" height="6" rx="1"/><rect x="2" y="16" width="6" height="6" rx="1"/><rect x="9" y="2" width="6" height="6" rx="1"/><path d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3"/><path d="M12 12V8"/></svg></div>
|
||||
<span>All Flows</span>
|
||||
<span class="badge">12</span>
|
||||
</div>
|
||||
<div class="nav-item ic-editor">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m12 19 7-7 3 3-7 7-3-3z"/><path d="m18 13-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/><path d="m2 2 7.586 7.586"/><circle cx="11" cy="11" r="2"/></svg></div>
|
||||
<span>Flow Editor</span>
|
||||
</div>
|
||||
<div class="nav-item ic-sessions">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M4.9 19.1C1 15.2 1 8.8 4.9 4.9"/><path d="M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.4"/><path d="M16.2 7.8c2.3 2.3 2.3 6.1 0 8.4"/><path d="M19.1 4.9C23 8.8 23 15.1 19.1 19"/><circle cx="12" cy="12" r="2"/></svg></div>
|
||||
<span>Sessions</span>
|
||||
<span class="badge">3</span>
|
||||
</div>
|
||||
<div class="nav-item ic-exports">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M4 7V4a2 2 0 0 1 2-2 2 2 0 0 0-2 2"/><path d="M4.063 20.999a2 2 0 0 0 2 1L18 22a2 2 0 0 0 2-2V7l-5-5H6"/><path d="m10 18 3-3-3-3"/><path d="M4 15h9"/></svg></div>
|
||||
<span>Exports</span>
|
||||
</div>
|
||||
<div class="nav-item ic-ai">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72Z"/><path d="m14 7 3 3"/><path d="M5 6v4"/><path d="M19 14v4"/><path d="M10 2v2"/><path d="M7 8H3"/><path d="M21 16h-4"/><path d="M11 3H9"/></svg></div>
|
||||
<span>AI Assistant</span>
|
||||
</div>
|
||||
<div class="nav-item ic-steplib">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m16 6 4 14"/><path d="M12 6v14"/><path d="M8 8v12"/><path d="M4 4v16"/></svg></div>
|
||||
<span>Step Library</span>
|
||||
</div>
|
||||
<div class="nav-item ic-scripts">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M8 21h12a2 2 0 0 0 2-2v-2H10v2a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v3h4"/><path d="M19 17V5a2 2 0 0 0-2-2H4"/><path d="M15 8h-5"/><path d="M15 12h-5"/></svg></div>
|
||||
<span>Script Library</span>
|
||||
</div>
|
||||
<div class="nav-item ic-kb">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg></div>
|
||||
<span>KB Accelerator</span>
|
||||
</div>
|
||||
<div class="nav-item ic-analytics">
|
||||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg></div>
|
||||
<span>Analytics</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ════════════════════════════════════════════════════════
|
||||
ICON COMPARISON TABLE
|
||||
════════════════════════════════════════════════════════ -->
|
||||
<div class="comparison">
|
||||
<h2>Icon Comparison Reference</h2>
|
||||
<table class="comp-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nav Item</th>
|
||||
<th>Current</th>
|
||||
<th>Set A (Descriptive)</th>
|
||||
<th>Set B (Minimal)</th>
|
||||
<th>Color</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Dashboard</td>
|
||||
<td class="current">LayoutGrid — 4 squares</td>
|
||||
<td class="pick">Gauge — speedometer, "command center"</td>
|
||||
<td class="alt">Compass — navigation hub</td>
|
||||
<td style="color: var(--cyan-400)">Cyan</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>All Flows</td>
|
||||
<td class="current">Box — generic 3D cube</td>
|
||||
<td class="pick">GitFork — branching paths (literally what flows are)</td>
|
||||
<td class="alt">Network — connected nodes</td>
|
||||
<td style="color: var(--violet)">Violet</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Flow Editor</td>
|
||||
<td class="current">PenLine — pen tip</td>
|
||||
<td class="alt">Wrench — builder tool</td>
|
||||
<td class="alt">PenTool — vector/design pen</td>
|
||||
<td style="color: var(--amber)">Amber</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sessions</td>
|
||||
<td class="current">Clock — time-based</td>
|
||||
<td class="pick">Zap — active energy, live sessions</td>
|
||||
<td class="alt">Radio — broadcasting/live signal</td>
|
||||
<td style="color: var(--emerald)">Emerald</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Exports</td>
|
||||
<td class="current">FileText — generic doc</td>
|
||||
<td class="alt">Share2 — share network nodes</td>
|
||||
<td class="alt">FileOutput — file with arrow out</td>
|
||||
<td style="color: var(--blue)">Blue</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>AI Assistant</td>
|
||||
<td class="current">BotMessageSquare — robot chat</td>
|
||||
<td class="pick">Brain — intelligence, organic feel</td>
|
||||
<td class="alt">Wand2 — magic wand with sparkles</td>
|
||||
<td style="color: var(--fuchsia)">Fuchsia</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Step Library</td>
|
||||
<td class="current">Bookmark — generic ribbon</td>
|
||||
<td class="pick">Layers — stacked layers = reusable steps</td>
|
||||
<td class="alt">Library — book spines</td>
|
||||
<td style="color: var(--orange)">Orange</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Script Library</td>
|
||||
<td class="current">Terminal — prompt cursor</td>
|
||||
<td class="alt">Code2 — angle brackets with slash</td>
|
||||
<td class="alt">ScrollText — script/scroll with text</td>
|
||||
<td style="color: var(--teal)">Teal</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>KB Accelerator</td>
|
||||
<td class="current">Sparkles — magic star</td>
|
||||
<td class="pick">Rocket — acceleration/speed</td>
|
||||
<td class="alt">Lightbulb — ideas/insight</td>
|
||||
<td style="color: var(--rose)">Rose</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Analytics</td>
|
||||
<td class="current">BarChart3 — vertical bars</td>
|
||||
<td class="alt">TrendingUp — growth line with arrow</td>
|
||||
<td class="alt">PieChart — pie segments</td>
|
||||
<td style="color: var(--sky)">Sky</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.querySelectorAll('.nav-item').forEach(item => {
|
||||
item.addEventListener('click', () => item.classList.toggle('active'));
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
83
docs/plans/Frontend/sidebar-redesign-context.md
Normal file
83
docs/plans/Frontend/sidebar-redesign-context.md
Normal file
@@ -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
|
||||
1269
docs/superpowers/plans/2026-03-15-sidebar-redesign.md
Normal file
1269
docs/superpowers/plans/2026-03-15-sidebar-redesign.md
Normal file
File diff suppressed because it is too large
Load Diff
271
docs/superpowers/specs/2026-03-15-sidebar-redesign-design.md
Normal file
271
docs/superpowers/specs/2026-03-15-sidebar-redesign-design.md
Normal file
@@ -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 `<button>` elements (clickable to navigate to session) with descriptive `title` attributes
|
||||
Reference in New Issue
Block a user