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