docs: add sidebar grouping and AI naming concept mockups
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
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>
|
||||
Reference in New Issue
Block a user