nntrivi2001
794b240156
Internal SmartGift build of a Claude Code monitoring dashboard. Lanes: a durable unit of parallel agent work, one per working directory, tracked across session restarts. Managed lanes are git worktrees the dashboard provisions and can reset or remove behind a three-check destroy guard and a counted preflight; adopted lanes are directories you already own and are never destroyable. Pipelines: a lane moves through pipeline stages. A stage the agent declares with evidence renders green; a stage inferred from the tool-event stream renders dashed amber and never counts as done. Detection is forward-only within a 30-minute window, and never writes the declared stage. Workspace: one page at /run with a lane grid, the selected lane's pipeline, and a full Claude console behind a disclosure.
2124 lines
67 KiB
HTML
2124 lines
67 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Workflows Page — Wireframe</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
body {
|
|
font-family:
|
|
"Inter",
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
sans-serif;
|
|
background: #0a0a0f;
|
|
color: #e2e8f0;
|
|
line-height: 1.5;
|
|
padding: 24px;
|
|
}
|
|
|
|
/* Page header */
|
|
.page-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 24px;
|
|
padding-bottom: 16px;
|
|
border-bottom: 1px solid rgba(99, 102, 241, 0.15);
|
|
}
|
|
.page-header h1 {
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
color: #f1f5f9;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.page-header h1 .icon {
|
|
color: #818cf8;
|
|
font-size: 24px;
|
|
}
|
|
.page-header .controls {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
.filter-pill {
|
|
padding: 6px 14px;
|
|
border-radius: 8px;
|
|
background: rgba(99, 102, 241, 0.1);
|
|
border: 1px solid rgba(99, 102, 241, 0.2);
|
|
color: #a5b4fc;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
}
|
|
.filter-pill.active {
|
|
background: rgba(99, 102, 241, 0.25);
|
|
border-color: #6366f1;
|
|
color: #e0e7ff;
|
|
}
|
|
.session-selector {
|
|
padding: 6px 14px;
|
|
border-radius: 8px;
|
|
background: rgba(30, 30, 45, 0.8);
|
|
border: 1px solid rgba(99, 102, 241, 0.2);
|
|
color: #94a3b8;
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* Stats row */
|
|
.stats-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
gap: 12px;
|
|
margin-bottom: 24px;
|
|
}
|
|
.stat-card {
|
|
background: rgba(15, 15, 25, 0.8);
|
|
border: 1px solid rgba(99, 102, 241, 0.1);
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
text-align: center;
|
|
}
|
|
.stat-card .value {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: #f1f5f9;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.stat-card .label {
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: #64748b;
|
|
margin-top: 4px;
|
|
}
|
|
.stat-card .trend {
|
|
font-size: 11px;
|
|
color: #34d399;
|
|
margin-top: 2px;
|
|
}
|
|
.stat-card .trend.down {
|
|
color: #f87171;
|
|
}
|
|
|
|
/* Section containers */
|
|
.section {
|
|
margin-bottom: 24px;
|
|
}
|
|
.section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 12px;
|
|
}
|
|
.section-header h2 {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: #e2e8f0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.section-header h2 .num {
|
|
background: rgba(99, 102, 241, 0.2);
|
|
color: #a5b4fc;
|
|
font-size: 11px;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 700;
|
|
}
|
|
.section-header .subtitle {
|
|
font-size: 12px;
|
|
color: #64748b;
|
|
}
|
|
.card {
|
|
background: rgba(15, 15, 25, 0.8);
|
|
border: 1px solid rgba(99, 102, 241, 0.1);
|
|
border-radius: 14px;
|
|
padding: 20px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Two-column layout */
|
|
.two-col {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16px;
|
|
}
|
|
.three-col {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 16px;
|
|
}
|
|
|
|
/* ===== SECTION 1: Agent Orchestration DAG ===== */
|
|
.dag-container {
|
|
position: relative;
|
|
min-height: 320px;
|
|
overflow-x: auto;
|
|
}
|
|
.dag-layer {
|
|
position: absolute;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
.dag-node {
|
|
padding: 10px 16px;
|
|
border-radius: 10px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
position: relative;
|
|
white-space: nowrap;
|
|
transition: all 0.2s;
|
|
border: 1px solid transparent;
|
|
}
|
|
.dag-node:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
|
|
}
|
|
.dag-node.root {
|
|
background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.3));
|
|
border-color: rgba(99, 102, 241, 0.4);
|
|
color: #e0e7ff;
|
|
}
|
|
.dag-node.main {
|
|
background: rgba(59, 130, 246, 0.2);
|
|
border-color: rgba(59, 130, 246, 0.3);
|
|
color: #93c5fd;
|
|
}
|
|
.dag-node.agent {
|
|
background: rgba(34, 197, 94, 0.15);
|
|
border-color: rgba(34, 197, 94, 0.25);
|
|
color: #86efac;
|
|
}
|
|
.dag-node.outcome-ok {
|
|
background: rgba(34, 197, 94, 0.2);
|
|
border-color: rgba(34, 197, 94, 0.3);
|
|
color: #86efac;
|
|
}
|
|
.dag-node.outcome-err {
|
|
background: rgba(239, 68, 68, 0.2);
|
|
border-color: rgba(239, 68, 68, 0.3);
|
|
color: #fca5a5;
|
|
}
|
|
.dag-node .count {
|
|
font-size: 10px;
|
|
opacity: 0.7;
|
|
margin-left: 6px;
|
|
}
|
|
.dag-edge {
|
|
position: absolute;
|
|
height: 2px;
|
|
background: rgba(99, 102, 241, 0.2);
|
|
transform-origin: left center;
|
|
}
|
|
.dag-edge.thick {
|
|
height: 4px;
|
|
background: rgba(99, 102, 241, 0.35);
|
|
}
|
|
.dag-edge.thin {
|
|
height: 1px;
|
|
background: rgba(99, 102, 241, 0.12);
|
|
}
|
|
|
|
/* Wireframe DAG mockup using flexbox */
|
|
.dag-wireframe {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 40px;
|
|
padding: 20px 0;
|
|
overflow-x: auto;
|
|
min-height: 300px;
|
|
}
|
|
.dag-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
.dag-column .layer-label {
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: #475569;
|
|
margin-bottom: 8px;
|
|
}
|
|
.dag-connector {
|
|
width: 40px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
.dag-line {
|
|
width: 100%;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, rgba(99, 102, 241, 0.3), rgba(99, 102, 241, 0.15));
|
|
position: relative;
|
|
}
|
|
.dag-line::after {
|
|
content: "";
|
|
position: absolute;
|
|
right: -4px;
|
|
top: -3px;
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 6px solid rgba(99, 102, 241, 0.3);
|
|
border-top: 4px solid transparent;
|
|
border-bottom: 4px solid transparent;
|
|
}
|
|
|
|
/* ===== SECTION 2: Tool Execution Sankey ===== */
|
|
.sankey-mock {
|
|
min-height: 240px;
|
|
position: relative;
|
|
padding: 20px 0;
|
|
}
|
|
.sankey-column {
|
|
position: absolute;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
.sankey-node {
|
|
padding: 8px 14px;
|
|
border-radius: 8px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
font-family: "JetBrains Mono", monospace;
|
|
position: relative;
|
|
}
|
|
.sankey-node.tool-read {
|
|
background: rgba(59, 130, 246, 0.2);
|
|
color: #93c5fd;
|
|
border-left: 3px solid #3b82f6;
|
|
}
|
|
.sankey-node.tool-write {
|
|
background: rgba(34, 197, 94, 0.2);
|
|
color: #86efac;
|
|
border-left: 3px solid #22c55e;
|
|
}
|
|
.sankey-node.tool-edit {
|
|
background: rgba(234, 179, 8, 0.2);
|
|
color: #fde047;
|
|
border-left: 3px solid #eab308;
|
|
}
|
|
.sankey-node.tool-bash {
|
|
background: rgba(239, 68, 68, 0.2);
|
|
color: #fca5a5;
|
|
border-left: 3px solid #ef4444;
|
|
}
|
|
.sankey-node.tool-grep {
|
|
background: rgba(168, 85, 247, 0.2);
|
|
color: #d8b4fe;
|
|
border-left: 3px solid #a855f7;
|
|
}
|
|
.sankey-node.tool-glob {
|
|
background: rgba(236, 72, 153, 0.2);
|
|
color: #f9a8d4;
|
|
border-left: 3px solid #ec4899;
|
|
}
|
|
.sankey-node.tool-agent {
|
|
background: rgba(99, 102, 241, 0.2);
|
|
color: #a5b4fc;
|
|
border-left: 3px solid #6366f1;
|
|
}
|
|
|
|
.flow-band {
|
|
position: absolute;
|
|
border-radius: 12px;
|
|
opacity: 0.08;
|
|
}
|
|
|
|
/* ===== SECTION 3: Subagent Effectiveness ===== */
|
|
.effectiveness-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
gap: 12px;
|
|
}
|
|
.agent-score-card {
|
|
background: rgba(20, 20, 35, 0.6);
|
|
border: 1px solid rgba(99, 102, 241, 0.08);
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
.agent-score-card .agent-name {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #e2e8f0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.agent-score-card .agent-name .dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
}
|
|
.agent-score-card .metrics {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 8px;
|
|
}
|
|
.agent-score-card .metric {
|
|
text-align: center;
|
|
}
|
|
.agent-score-card .metric .val {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: #f1f5f9;
|
|
}
|
|
.agent-score-card .metric .lbl {
|
|
font-size: 10px;
|
|
color: #64748b;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
.success-ring {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
position: relative;
|
|
margin: 0 auto;
|
|
}
|
|
.success-ring svg {
|
|
width: 48px;
|
|
height: 48px;
|
|
transform: rotate(-90deg);
|
|
}
|
|
.success-ring .ring-text {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: #f1f5f9;
|
|
}
|
|
.sparkline-mock {
|
|
height: 24px;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 2px;
|
|
}
|
|
.sparkline-mock .bar {
|
|
flex: 1;
|
|
background: rgba(99, 102, 241, 0.3);
|
|
border-radius: 2px 2px 0 0;
|
|
min-width: 3px;
|
|
}
|
|
|
|
/* ===== SECTION 4: Workflow Patterns ===== */
|
|
.pattern-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
.pattern-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px 16px;
|
|
background: rgba(20, 20, 35, 0.5);
|
|
border-radius: 10px;
|
|
border: 1px solid rgba(99, 102, 241, 0.06);
|
|
}
|
|
.pattern-flow {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
flex: 1;
|
|
}
|
|
.pattern-step {
|
|
padding: 4px 10px;
|
|
border-radius: 6px;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
background: rgba(99, 102, 241, 0.12);
|
|
color: #a5b4fc;
|
|
white-space: nowrap;
|
|
}
|
|
.pattern-arrow {
|
|
color: #475569;
|
|
font-size: 12px;
|
|
}
|
|
.pattern-meta {
|
|
text-align: right;
|
|
min-width: 80px;
|
|
}
|
|
.pattern-meta .freq {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
color: #f1f5f9;
|
|
}
|
|
.pattern-meta .pct {
|
|
font-size: 10px;
|
|
color: #64748b;
|
|
}
|
|
|
|
/* ===== SECTION 5: Model Delegation ===== */
|
|
.model-flow-mock {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 60px;
|
|
padding: 20px 0;
|
|
min-height: 180px;
|
|
}
|
|
.model-node {
|
|
padding: 14px 20px;
|
|
border-radius: 12px;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
.model-node.opus {
|
|
background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(99, 102, 241, 0.25));
|
|
border: 1px solid rgba(139, 92, 246, 0.3);
|
|
}
|
|
.model-node.sonnet {
|
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(6, 182, 212, 0.25));
|
|
border: 1px solid rgba(59, 130, 246, 0.3);
|
|
}
|
|
.model-node.haiku {
|
|
background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(16, 185, 129, 0.25));
|
|
border: 1px solid rgba(34, 197, 94, 0.3);
|
|
}
|
|
.model-node .model-name {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #f1f5f9;
|
|
}
|
|
.model-node .model-stat {
|
|
font-size: 11px;
|
|
color: #94a3b8;
|
|
margin-top: 4px;
|
|
}
|
|
.model-edge {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 2px;
|
|
color: #475569;
|
|
font-size: 10px;
|
|
}
|
|
.model-edge .edge-line {
|
|
width: 60px;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, rgba(139, 92, 246, 0.3), rgba(59, 130, 246, 0.3));
|
|
position: relative;
|
|
}
|
|
|
|
/* ===== SECTION 6: Error Propagation ===== */
|
|
.error-depth-chart {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 16px;
|
|
padding: 20px 0;
|
|
min-height: 160px;
|
|
}
|
|
.depth-bar-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 6px;
|
|
flex: 1;
|
|
}
|
|
.depth-bar {
|
|
width: 100%;
|
|
border-radius: 6px 6px 0 0;
|
|
min-width: 40px;
|
|
position: relative;
|
|
}
|
|
.depth-bar .bar-val {
|
|
position: absolute;
|
|
top: -20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: #f1f5f9;
|
|
}
|
|
.depth-bar-label {
|
|
font-size: 11px;
|
|
color: #64748b;
|
|
text-align: center;
|
|
}
|
|
|
|
/* ===== SECTION 7: Session Timeline ===== */
|
|
.timeline-container {
|
|
min-height: 200px;
|
|
position: relative;
|
|
overflow-x: auto;
|
|
}
|
|
.swim-lane {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0;
|
|
margin-bottom: 6px;
|
|
height: 32px;
|
|
position: relative;
|
|
}
|
|
.swim-label {
|
|
width: 120px;
|
|
font-size: 11px;
|
|
color: #94a3b8;
|
|
text-align: right;
|
|
padding-right: 12px;
|
|
flex-shrink: 0;
|
|
font-weight: 500;
|
|
}
|
|
.swim-track {
|
|
flex: 1;
|
|
height: 24px;
|
|
background: rgba(20, 20, 35, 0.4);
|
|
border-radius: 6px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.swim-segment {
|
|
position: absolute;
|
|
height: 100%;
|
|
border-radius: 4px;
|
|
opacity: 0.7;
|
|
}
|
|
.swim-segment.working {
|
|
background: linear-gradient(90deg, #6366f1, #818cf8);
|
|
}
|
|
.swim-segment.idle {
|
|
background: rgba(100, 116, 139, 0.3);
|
|
}
|
|
.swim-segment.error {
|
|
background: linear-gradient(90deg, #ef4444, #f87171);
|
|
}
|
|
.swim-segment.completed {
|
|
background: linear-gradient(90deg, #22c55e, #4ade80);
|
|
}
|
|
.timeline-axis {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-left: 120px;
|
|
margin-top: 8px;
|
|
}
|
|
.timeline-tick {
|
|
font-size: 10px;
|
|
color: #475569;
|
|
}
|
|
|
|
/* ===== SECTION 8: Session Complexity Scatter ===== */
|
|
.scatter-container {
|
|
min-height: 220px;
|
|
position: relative;
|
|
padding: 20px;
|
|
}
|
|
.scatter-axis-y {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 20px;
|
|
bottom: 40px;
|
|
width: 1px;
|
|
background: rgba(99, 102, 241, 0.15);
|
|
}
|
|
.scatter-axis-x {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 40px;
|
|
height: 1px;
|
|
background: rgba(99, 102, 241, 0.15);
|
|
}
|
|
.scatter-axis-label {
|
|
font-size: 10px;
|
|
color: #475569;
|
|
position: absolute;
|
|
}
|
|
.scatter-dot {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
opacity: 0.7;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
border: 2px solid transparent;
|
|
}
|
|
.scatter-dot:hover {
|
|
opacity: 1;
|
|
transform: scale(1.2);
|
|
border-color: rgba(255, 255, 255, 0.3);
|
|
}
|
|
.scatter-dot.completed {
|
|
background: #22c55e;
|
|
}
|
|
.scatter-dot.error {
|
|
background: #ef4444;
|
|
}
|
|
.scatter-dot.active {
|
|
background: #6366f1;
|
|
}
|
|
.scatter-dot.abandoned {
|
|
background: #eab308;
|
|
}
|
|
|
|
/* ===== SECTION 9: Compaction Impact ===== */
|
|
.compaction-timeline-mock {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 16px 0;
|
|
min-height: 100px;
|
|
}
|
|
.token-bar {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
.token-bar .bar {
|
|
width: 100%;
|
|
border-radius: 4px 4px 0 0;
|
|
min-width: 8px;
|
|
transition: height 0.3s;
|
|
}
|
|
.token-bar .bar.active {
|
|
background: linear-gradient(to top, rgba(99, 102, 241, 0.4), rgba(99, 102, 241, 0.15));
|
|
}
|
|
.token-bar .bar.baseline {
|
|
background: linear-gradient(to top, rgba(234, 179, 8, 0.3), rgba(234, 179, 8, 0.1));
|
|
}
|
|
.compaction-marker {
|
|
width: 2px;
|
|
background: #f87171;
|
|
position: relative;
|
|
}
|
|
.compaction-marker::before {
|
|
content: "C";
|
|
position: absolute;
|
|
top: -18px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-size: 9px;
|
|
font-weight: 700;
|
|
color: #f87171;
|
|
background: rgba(239, 68, 68, 0.15);
|
|
border-radius: 4px;
|
|
padding: 1px 4px;
|
|
}
|
|
|
|
/* Legend */
|
|
.legend {
|
|
display: flex;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
margin-top: 12px;
|
|
}
|
|
.legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 11px;
|
|
color: #94a3b8;
|
|
}
|
|
.legend-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
}
|
|
.legend-line {
|
|
width: 16px;
|
|
height: 3px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* Info tooltip */
|
|
.info-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
background: rgba(99, 102, 241, 0.15);
|
|
color: #818cf8;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
cursor: help;
|
|
margin-left: 6px;
|
|
}
|
|
|
|
/* Section annotation labels */
|
|
.wireframe-label {
|
|
position: absolute;
|
|
top: -10px;
|
|
right: 12px;
|
|
font-size: 9px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.15em;
|
|
color: #818cf8;
|
|
background: #0a0a0f;
|
|
padding: 0 8px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Tab bar for section */
|
|
.tab-bar {
|
|
display: flex;
|
|
gap: 2px;
|
|
margin-bottom: 16px;
|
|
background: rgba(15, 15, 25, 0.5);
|
|
border-radius: 10px;
|
|
padding: 3px;
|
|
width: fit-content;
|
|
}
|
|
.tab {
|
|
padding: 6px 16px;
|
|
border-radius: 8px;
|
|
font-size: 12px;
|
|
color: #64748b;
|
|
cursor: pointer;
|
|
}
|
|
.tab.active {
|
|
background: rgba(99, 102, 241, 0.2);
|
|
color: #e0e7ff;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Annotation overlay */
|
|
.annotation {
|
|
background: rgba(234, 179, 8, 0.1);
|
|
border: 1px dashed rgba(234, 179, 8, 0.3);
|
|
border-radius: 8px;
|
|
padding: 8px 12px;
|
|
font-size: 11px;
|
|
color: #fde047;
|
|
margin-top: 8px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 6px;
|
|
}
|
|
.annotation .ann-icon {
|
|
flex-shrink: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- ===================== PAGE HEADER ===================== -->
|
|
<div class="page-header">
|
|
<h1>
|
|
<span class="icon">◆</span>
|
|
Workflows
|
|
<span style="font-size: 12px; color: #64748b; font-weight: 400; margin-left: 8px"
|
|
>Agent orchestration intelligence</span
|
|
>
|
|
</h1>
|
|
<div class="controls">
|
|
<div class="tab-bar" style="margin: 0">
|
|
<div class="tab active">All Sessions</div>
|
|
<div class="tab">Active Only</div>
|
|
<div class="tab">Completed</div>
|
|
</div>
|
|
<div class="session-selector">▼ Select Session to Drill In</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===================== STATS ROW ===================== -->
|
|
<div class="stats-row">
|
|
<div class="stat-card">
|
|
<div class="value">3.2</div>
|
|
<div class="label">Avg Agent Depth</div>
|
|
<div class="trend">▲ 0.4 this week</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="value">5.8</div>
|
|
<div class="label">Avg Subagents / Session</div>
|
|
<div class="trend">▲ 1.2 this week</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="value">87%</div>
|
|
<div class="label">Agent Success Rate</div>
|
|
<div class="trend down">▼ 2% this week</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="value">R→E→B</div>
|
|
<div class="label">Most Common Flow</div>
|
|
<div class="trend" style="color: #818cf8">Read → Edit → Bash</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="value">2.1</div>
|
|
<div class="label">Avg Compactions</div>
|
|
<div class="trend">▲ 0.3 this week</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="value">4m 32s</div>
|
|
<div class="label">Avg Session Duration</div>
|
|
<div class="trend down">▼ 18s this week</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===================== SECTION 1: AGENT ORCHESTRATION DAG ===================== -->
|
|
<div class="section">
|
|
<div class="section-header">
|
|
<h2>
|
|
<span class="num">1</span> Agent Orchestration Graph <span class="info-badge">?</span>
|
|
</h2>
|
|
<div class="subtitle">
|
|
Aggregate spawning patterns across all sessions · Click a node to filter page
|
|
</div>
|
|
</div>
|
|
<div class="card" style="position: relative">
|
|
<div class="dag-wireframe">
|
|
<!-- Layer 0: Session Start -->
|
|
<div class="dag-column">
|
|
<div class="layer-label">Origin</div>
|
|
<div class="dag-node root">● Session Start <span class="count">(142)</span></div>
|
|
</div>
|
|
|
|
<div class="dag-connector">
|
|
<div class="dag-line"></div>
|
|
</div>
|
|
|
|
<!-- Layer 1: Main Agent -->
|
|
<div class="dag-column">
|
|
<div class="layer-label">Main Agent</div>
|
|
<div class="dag-node main">■ Main Agent <span class="count">(142)</span></div>
|
|
</div>
|
|
|
|
<div class="dag-connector">
|
|
<div class="dag-line"></div>
|
|
<div class="dag-line"></div>
|
|
<div class="dag-line"></div>
|
|
<div class="dag-line"></div>
|
|
<div class="dag-line"></div>
|
|
</div>
|
|
|
|
<!-- Layer 2: Subagent Types -->
|
|
<div class="dag-column">
|
|
<div class="layer-label">Subagent Types</div>
|
|
<div class="dag-node agent">◆ Explore <span class="count">(89)</span></div>
|
|
<div class="dag-node agent">◆ code-reviewer <span class="count">(67)</span></div>
|
|
<div class="dag-node agent">
|
|
◆ general-purpose <span class="count">(54)</span>
|
|
</div>
|
|
<div class="dag-node agent">◆ Plan <span class="count">(43)</span></div>
|
|
<div class="dag-node agent">◆ tdd-assistant <span class="count">(38)</span></div>
|
|
<div class="dag-node agent" style="opacity: 0.5">◆ +5 more...</div>
|
|
</div>
|
|
|
|
<div class="dag-connector">
|
|
<div class="dag-line"></div>
|
|
<div class="dag-line"></div>
|
|
</div>
|
|
|
|
<!-- Layer 3: Nested Subagents -->
|
|
<div class="dag-column">
|
|
<div class="layer-label">Nested (Depth 2+)</div>
|
|
<div class="dag-node agent" style="font-size: 11px">
|
|
◆ debugger <span class="count">(12)</span>
|
|
</div>
|
|
<div class="dag-node agent" style="font-size: 11px">
|
|
◆ security-auditor <span class="count">(8)</span>
|
|
</div>
|
|
<div class="dag-node agent" style="font-size: 11px">
|
|
◆ compaction <span class="count">(23)</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dag-connector">
|
|
<div class="dag-line"></div>
|
|
<div class="dag-line"></div>
|
|
</div>
|
|
|
|
<!-- Layer 4: Outcomes -->
|
|
<div class="dag-column">
|
|
<div class="layer-label">Outcomes</div>
|
|
<div class="dag-node outcome-ok">
|
|
✓ Completed <span class="count">(298)</span>
|
|
</div>
|
|
<div class="dag-node outcome-err">✗ Error <span class="count">(18)</span></div>
|
|
<div
|
|
class="dag-node"
|
|
style="
|
|
background: rgba(234, 179, 8, 0.15);
|
|
border-color: rgba(234, 179, 8, 0.25);
|
|
color: #fde047;
|
|
"
|
|
>
|
|
⚠ Abandoned <span class="count">(7)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="legend">
|
|
<div class="legend-item">
|
|
<div class="legend-dot" style="background: #818cf8"></div>
|
|
Session root
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-dot" style="background: #3b82f6"></div>
|
|
Main agent
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-dot" style="background: #22c55e"></div>
|
|
Subagent type
|
|
</div>
|
|
<div class="legend-item">
|
|
<div
|
|
class="legend-line"
|
|
style="background: rgba(99, 102, 241, 0.35); height: 4px"
|
|
></div>
|
|
High frequency
|
|
</div>
|
|
<div class="legend-item">
|
|
<div
|
|
class="legend-line"
|
|
style="background: rgba(99, 102, 241, 0.12); height: 1px"
|
|
></div>
|
|
Low frequency
|
|
</div>
|
|
</div>
|
|
|
|
<div class="annotation">
|
|
<span class="ann-icon">💡</span>
|
|
Interactive: Nodes are clickable. Selecting a node filters Sections 2-5 to only show data
|
|
involving that agent type. Edge thickness represents spawn frequency. Hover shows detailed
|
|
metrics.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===================== SECTION 2: TOOL EXECUTION FLOW ===================== -->
|
|
<div class="section">
|
|
<div class="section-header">
|
|
<h2><span class="num">2</span> Tool Execution Flow <span class="info-badge">?</span></h2>
|
|
<div class="subtitle">How tools chain together · Sankey-style directed flow</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="tab-bar">
|
|
<div class="tab active">All Agents</div>
|
|
<div class="tab">Explore</div>
|
|
<div class="tab">code-reviewer</div>
|
|
<div class="tab">general-purpose</div>
|
|
</div>
|
|
|
|
<div
|
|
style="display: flex; align-items: center; gap: 24px; padding: 24px 0; overflow-x: auto"
|
|
>
|
|
<!-- Source column -->
|
|
<div style="display: flex; flex-direction: column; gap: 6px; min-width: 90px">
|
|
<div
|
|
class="sankey-node tool-read"
|
|
style="height: 60px; display: flex; align-items: center"
|
|
>
|
|
Read <span class="count" style="margin-left: 4px; opacity: 0.6">42%</span>
|
|
</div>
|
|
<div
|
|
class="sankey-node tool-bash"
|
|
style="height: 36px; display: flex; align-items: center"
|
|
>
|
|
Bash <span class="count" style="margin-left: 4px; opacity: 0.6">18%</span>
|
|
</div>
|
|
<div
|
|
class="sankey-node tool-grep"
|
|
style="height: 30px; display: flex; align-items: center"
|
|
>
|
|
Grep <span class="count" style="margin-left: 4px; opacity: 0.6">14%</span>
|
|
</div>
|
|
<div
|
|
class="sankey-node tool-glob"
|
|
style="height: 24px; display: flex; align-items: center"
|
|
>
|
|
Glob <span class="count" style="margin-left: 4px; opacity: 0.6">10%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Flow area (simplified bands) -->
|
|
<div style="flex: 1; min-width: 120px; position: relative; height: 180px">
|
|
<div
|
|
class="flow-band"
|
|
style="background: #3b82f6; top: 0; left: 0; right: 0; height: 50px"
|
|
></div>
|
|
<div
|
|
class="flow-band"
|
|
style="background: #22c55e; top: 30px; left: 10%; right: 10%; height: 40px"
|
|
></div>
|
|
<div
|
|
class="flow-band"
|
|
style="background: #eab308; top: 60px; left: 20%; right: 5%; height: 35px"
|
|
></div>
|
|
<div
|
|
class="flow-band"
|
|
style="background: #a855f7; top: 100px; left: 5%; right: 15%; height: 30px"
|
|
></div>
|
|
<div
|
|
class="flow-band"
|
|
style="background: #ef4444; top: 130px; left: 15%; right: 20%; height: 25px"
|
|
></div>
|
|
<div
|
|
style="
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 11px;
|
|
color: #64748b;
|
|
text-align: center;
|
|
"
|
|
>
|
|
Flow bands connect<br />source → target tools<br /><span
|
|
style="font-size: 10px; opacity: 0.7"
|
|
>Band width = transition frequency</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Target column -->
|
|
<div style="display: flex; flex-direction: column; gap: 6px; min-width: 90px">
|
|
<div
|
|
class="sankey-node tool-edit"
|
|
style="height: 48px; display: flex; align-items: center"
|
|
>
|
|
Edit <span class="count" style="margin-left: 4px; opacity: 0.6">28%</span>
|
|
</div>
|
|
<div
|
|
class="sankey-node tool-write"
|
|
style="height: 40px; display: flex; align-items: center"
|
|
>
|
|
Write <span class="count" style="margin-left: 4px; opacity: 0.6">22%</span>
|
|
</div>
|
|
<div
|
|
class="sankey-node tool-bash"
|
|
style="height: 36px; display: flex; align-items: center"
|
|
>
|
|
Bash <span class="count" style="margin-left: 4px; opacity: 0.6">18%</span>
|
|
</div>
|
|
<div
|
|
class="sankey-node tool-read"
|
|
style="height: 30px; display: flex; align-items: center"
|
|
>
|
|
Read <span class="count" style="margin-left: 4px; opacity: 0.6">16%</span>
|
|
</div>
|
|
<div
|
|
class="sankey-node tool-agent"
|
|
style="height: 24px; display: flex; align-items: center"
|
|
>
|
|
Agent <span class="count" style="margin-left: 4px; opacity: 0.6">10%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="annotation">
|
|
<span class="ann-icon">💡</span>
|
|
Sankey diagram: left column = source tool, right column = next tool in sequence. Band
|
|
width shows how often one tool follows another. Filterable by agent type tabs above.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===================== SECTION 3 + 4: TWO COLUMN ROW ===================== -->
|
|
<div class="two-col section">
|
|
<!-- SECTION 3: Subagent Effectiveness -->
|
|
<div>
|
|
<div class="section-header">
|
|
<h2><span class="num">3</span> Subagent Effectiveness</h2>
|
|
<div class="subtitle">Performance per agent type</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="effectiveness-grid">
|
|
<!-- Card 1 -->
|
|
<div class="agent-score-card">
|
|
<div class="agent-name">
|
|
<div class="dot" style="background: #22c55e"></div>
|
|
Explore
|
|
</div>
|
|
<div class="success-ring">
|
|
<svg viewBox="0 0 48 48">
|
|
<circle
|
|
cx="24"
|
|
cy="24"
|
|
r="20"
|
|
fill="none"
|
|
stroke="rgba(99,102,241,0.1)"
|
|
stroke-width="4"
|
|
/>
|
|
<circle
|
|
cx="24"
|
|
cy="24"
|
|
r="20"
|
|
fill="none"
|
|
stroke="#22c55e"
|
|
stroke-width="4"
|
|
stroke-dasharray="113"
|
|
stroke-dashoffset="11"
|
|
stroke-linecap="round"
|
|
/>
|
|
</svg>
|
|
<div class="ring-text">92%</div>
|
|
</div>
|
|
<div class="metrics">
|
|
<div class="metric">
|
|
<div class="val">89</div>
|
|
<div class="lbl">Sessions</div>
|
|
</div>
|
|
<div class="metric">
|
|
<div class="val">1.2m</div>
|
|
<div class="lbl">Avg Tokens</div>
|
|
</div>
|
|
</div>
|
|
<div class="sparkline-mock">
|
|
<div class="bar" style="height: 60%"></div>
|
|
<div class="bar" style="height: 80%"></div>
|
|
<div class="bar" style="height: 45%"></div>
|
|
<div class="bar" style="height: 90%"></div>
|
|
<div class="bar" style="height: 70%"></div>
|
|
<div class="bar" style="height: 100%"></div>
|
|
<div class="bar" style="height: 85%"></div>
|
|
<div class="bar" style="height: 55%"></div>
|
|
<div class="bar" style="height: 75%"></div>
|
|
<div class="bar" style="height: 95%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 2 -->
|
|
<div class="agent-score-card">
|
|
<div class="agent-name">
|
|
<div class="dot" style="background: #3b82f6"></div>
|
|
code-reviewer
|
|
</div>
|
|
<div class="success-ring">
|
|
<svg viewBox="0 0 48 48">
|
|
<circle
|
|
cx="24"
|
|
cy="24"
|
|
r="20"
|
|
fill="none"
|
|
stroke="rgba(99,102,241,0.1)"
|
|
stroke-width="4"
|
|
/>
|
|
<circle
|
|
cx="24"
|
|
cy="24"
|
|
r="20"
|
|
fill="none"
|
|
stroke="#3b82f6"
|
|
stroke-width="4"
|
|
stroke-dasharray="113"
|
|
stroke-dashoffset="17"
|
|
stroke-linecap="round"
|
|
/>
|
|
</svg>
|
|
<div class="ring-text">85%</div>
|
|
</div>
|
|
<div class="metrics">
|
|
<div class="metric">
|
|
<div class="val">67</div>
|
|
<div class="lbl">Sessions</div>
|
|
</div>
|
|
<div class="metric">
|
|
<div class="val">2.8m</div>
|
|
<div class="lbl">Avg Tokens</div>
|
|
</div>
|
|
</div>
|
|
<div class="sparkline-mock">
|
|
<div class="bar" style="height: 50%"></div>
|
|
<div class="bar" style="height: 70%"></div>
|
|
<div class="bar" style="height: 85%"></div>
|
|
<div class="bar" style="height: 60%"></div>
|
|
<div class="bar" style="height: 95%"></div>
|
|
<div class="bar" style="height: 80%"></div>
|
|
<div class="bar" style="height: 45%"></div>
|
|
<div class="bar" style="height: 75%"></div>
|
|
<div class="bar" style="height: 90%"></div>
|
|
<div class="bar" style="height: 65%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 3 -->
|
|
<div class="agent-score-card">
|
|
<div class="agent-name">
|
|
<div class="dot" style="background: #a855f7"></div>
|
|
general-purpose
|
|
</div>
|
|
<div class="success-ring">
|
|
<svg viewBox="0 0 48 48">
|
|
<circle
|
|
cx="24"
|
|
cy="24"
|
|
r="20"
|
|
fill="none"
|
|
stroke="rgba(99,102,241,0.1)"
|
|
stroke-width="4"
|
|
/>
|
|
<circle
|
|
cx="24"
|
|
cy="24"
|
|
r="20"
|
|
fill="none"
|
|
stroke="#a855f7"
|
|
stroke-width="4"
|
|
stroke-dasharray="113"
|
|
stroke-dashoffset="23"
|
|
stroke-linecap="round"
|
|
/>
|
|
</svg>
|
|
<div class="ring-text">80%</div>
|
|
</div>
|
|
<div class="metrics">
|
|
<div class="metric">
|
|
<div class="val">54</div>
|
|
<div class="lbl">Sessions</div>
|
|
</div>
|
|
<div class="metric">
|
|
<div class="val">3.4m</div>
|
|
<div class="lbl">Avg Tokens</div>
|
|
</div>
|
|
</div>
|
|
<div class="sparkline-mock">
|
|
<div class="bar" style="height: 70%"></div>
|
|
<div class="bar" style="height: 55%"></div>
|
|
<div class="bar" style="height: 40%"></div>
|
|
<div class="bar" style="height: 80%"></div>
|
|
<div class="bar" style="height: 65%"></div>
|
|
<div class="bar" style="height: 90%"></div>
|
|
<div class="bar" style="height: 50%"></div>
|
|
<div class="bar" style="height: 85%"></div>
|
|
<div class="bar" style="height: 60%"></div>
|
|
<div class="bar" style="height: 75%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 4 -->
|
|
<div class="agent-score-card">
|
|
<div class="agent-name">
|
|
<div class="dot" style="background: #eab308"></div>
|
|
tdd-assistant
|
|
</div>
|
|
<div class="success-ring">
|
|
<svg viewBox="0 0 48 48">
|
|
<circle
|
|
cx="24"
|
|
cy="24"
|
|
r="20"
|
|
fill="none"
|
|
stroke="rgba(99,102,241,0.1)"
|
|
stroke-width="4"
|
|
/>
|
|
<circle
|
|
cx="24"
|
|
cy="24"
|
|
r="20"
|
|
fill="none"
|
|
stroke="#eab308"
|
|
stroke-width="4"
|
|
stroke-dasharray="113"
|
|
stroke-dashoffset="28"
|
|
stroke-linecap="round"
|
|
/>
|
|
</svg>
|
|
<div class="ring-text">75%</div>
|
|
</div>
|
|
<div class="metrics">
|
|
<div class="metric">
|
|
<div class="val">38</div>
|
|
<div class="lbl">Sessions</div>
|
|
</div>
|
|
<div class="metric">
|
|
<div class="val">1.8m</div>
|
|
<div class="lbl">Avg Tokens</div>
|
|
</div>
|
|
</div>
|
|
<div class="sparkline-mock">
|
|
<div class="bar" style="height: 40%"></div>
|
|
<div class="bar" style="height: 65%"></div>
|
|
<div class="bar" style="height: 80%"></div>
|
|
<div class="bar" style="height: 50%"></div>
|
|
<div class="bar" style="height: 70%"></div>
|
|
<div class="bar" style="height: 55%"></div>
|
|
<div class="bar" style="height: 90%"></div>
|
|
<div class="bar" style="height: 45%"></div>
|
|
<div class="bar" style="height: 75%"></div>
|
|
<div class="bar" style="height: 60%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SECTION 4: Workflow Patterns -->
|
|
<div>
|
|
<div class="section-header">
|
|
<h2><span class="num">4</span> Detected Workflow Patterns</h2>
|
|
<div class="subtitle">Common agent orchestration sequences</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="pattern-list">
|
|
<div class="pattern-item">
|
|
<div style="font-size: 16px">🚀</div>
|
|
<div class="pattern-flow">
|
|
<div class="pattern-step">Explore</div>
|
|
<div class="pattern-arrow">→</div>
|
|
<div class="pattern-step">Plan</div>
|
|
<div class="pattern-arrow">→</div>
|
|
<div class="pattern-step">code-reviewer</div>
|
|
</div>
|
|
<div class="pattern-meta">
|
|
<div class="freq">34x</div>
|
|
<div class="pct">24% of sessions</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pattern-item">
|
|
<div style="font-size: 16px">🔧</div>
|
|
<div class="pattern-flow">
|
|
<div class="pattern-step">Explore</div>
|
|
<div class="pattern-arrow">→</div>
|
|
<div class="pattern-step">general-purpose</div>
|
|
<div class="pattern-arrow">→</div>
|
|
<div class="pattern-step">tdd-assistant</div>
|
|
</div>
|
|
<div class="pattern-meta">
|
|
<div class="freq">28x</div>
|
|
<div class="pct">20% of sessions</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pattern-item">
|
|
<div style="font-size: 16px">🛡</div>
|
|
<div class="pattern-flow">
|
|
<div class="pattern-step">code-reviewer</div>
|
|
<div class="pattern-arrow">→</div>
|
|
<div class="pattern-step">security-auditor</div>
|
|
</div>
|
|
<div class="pattern-meta">
|
|
<div class="freq">19x</div>
|
|
<div class="pct">13% of sessions</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pattern-item">
|
|
<div style="font-size: 16px">🐞</div>
|
|
<div class="pattern-flow">
|
|
<div class="pattern-step">Explore</div>
|
|
<div class="pattern-arrow">→</div>
|
|
<div class="pattern-step">debugger</div>
|
|
<div class="pattern-arrow">→</div>
|
|
<div class="pattern-step">tdd-assistant</div>
|
|
</div>
|
|
<div class="pattern-meta">
|
|
<div class="freq">15x</div>
|
|
<div class="pct">11% of sessions</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pattern-item">
|
|
<div style="font-size: 16px">📑</div>
|
|
<div class="pattern-flow">
|
|
<div
|
|
class="pattern-step"
|
|
style="background: rgba(234, 179, 8, 0.15); color: #fde047"
|
|
>
|
|
Solo main
|
|
</div>
|
|
<div class="pattern-arrow">→</div>
|
|
<div
|
|
class="pattern-step"
|
|
style="background: rgba(234, 179, 8, 0.15); color: #fde047"
|
|
>
|
|
No subagents
|
|
</div>
|
|
</div>
|
|
<div class="pattern-meta">
|
|
<div class="freq">22x</div>
|
|
<div class="pct">15% of sessions</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="annotation">
|
|
<span class="ann-icon">💡</span>
|
|
Patterns detected by analyzing subagent spawn sequences within sessions. Click a pattern
|
|
to highlight it in the DAG above.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===================== SECTION 5 + 6: TWO COLUMN ROW ===================== -->
|
|
<div class="two-col section">
|
|
<!-- SECTION 5: Model Delegation Flow -->
|
|
<div>
|
|
<div class="section-header">
|
|
<h2><span class="num">5</span> Model Delegation Flow</h2>
|
|
<div class="subtitle">How models route through agent hierarchies</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="model-flow-mock">
|
|
<div class="model-node opus">
|
|
<div class="model-name">Opus 4.6</div>
|
|
<div class="model-stat">78% of main agents</div>
|
|
<div class="model-stat" style="font-size: 10px; color: #c4b5fd">$4.82 avg cost</div>
|
|
</div>
|
|
<div class="model-edge">
|
|
<div style="font-size: 11px; color: #94a3b8; margin-bottom: 4px">delegates to</div>
|
|
<div class="edge-line"></div>
|
|
<div style="font-size: 10px; margin-top: 2px">62%</div>
|
|
</div>
|
|
<div style="display: flex; flex-direction: column; gap: 10px">
|
|
<div class="model-node sonnet">
|
|
<div class="model-name">Sonnet 4.6</div>
|
|
<div class="model-stat">48% of subagents</div>
|
|
<div class="model-stat" style="font-size: 10px; color: #93c5fd">$1.24 avg cost</div>
|
|
</div>
|
|
<div class="model-node haiku">
|
|
<div class="model-name">Haiku 4.5</div>
|
|
<div class="model-stat">14% of subagents</div>
|
|
<div class="model-stat" style="font-size: 10px; color: #86efac">$0.18 avg cost</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SECTION 6: Error Propagation -->
|
|
<div>
|
|
<div class="section-header">
|
|
<h2><span class="num">6</span> Error Propagation Map</h2>
|
|
<div class="subtitle">Where errors cluster in agent hierarchy depth</div>
|
|
</div>
|
|
<div class="card">
|
|
<div
|
|
class="error-depth-chart"
|
|
style="align-items: flex-end; height: 180px; padding-bottom: 0"
|
|
>
|
|
<div class="depth-bar-group">
|
|
<div
|
|
class="depth-bar"
|
|
style="
|
|
height: 30px;
|
|
background: linear-gradient(
|
|
to top,
|
|
rgba(239, 68, 68, 0.4),
|
|
rgba(239, 68, 68, 0.15)
|
|
);
|
|
"
|
|
>
|
|
<div class="bar-val">3</div>
|
|
</div>
|
|
<div class="depth-bar-label">
|
|
Depth 0<br /><span style="font-size: 9px; color: #475569">Main agent</span>
|
|
</div>
|
|
</div>
|
|
<div class="depth-bar-group">
|
|
<div
|
|
class="depth-bar"
|
|
style="
|
|
height: 100px;
|
|
background: linear-gradient(
|
|
to top,
|
|
rgba(239, 68, 68, 0.5),
|
|
rgba(239, 68, 68, 0.2)
|
|
);
|
|
"
|
|
>
|
|
<div class="bar-val">11</div>
|
|
</div>
|
|
<div class="depth-bar-label">
|
|
Depth 1<br /><span style="font-size: 9px; color: #475569">Direct subagent</span>
|
|
</div>
|
|
</div>
|
|
<div class="depth-bar-group">
|
|
<div
|
|
class="depth-bar"
|
|
style="
|
|
height: 45px;
|
|
background: linear-gradient(
|
|
to top,
|
|
rgba(239, 68, 68, 0.4),
|
|
rgba(239, 68, 68, 0.15)
|
|
);
|
|
"
|
|
>
|
|
<div class="bar-val">4</div>
|
|
</div>
|
|
<div class="depth-bar-label">
|
|
Depth 2<br /><span style="font-size: 9px; color: #475569">Nested</span>
|
|
</div>
|
|
</div>
|
|
<div class="depth-bar-group">
|
|
<div
|
|
class="depth-bar"
|
|
style="
|
|
height: 15px;
|
|
background: linear-gradient(
|
|
to top,
|
|
rgba(239, 68, 68, 0.3),
|
|
rgba(239, 68, 68, 0.1)
|
|
);
|
|
"
|
|
>
|
|
<div class="bar-val">1</div>
|
|
</div>
|
|
<div class="depth-bar-label">
|
|
Depth 3+<br /><span style="font-size: 9px; color: #475569">Deep nested</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
style="
|
|
margin-top: 12px;
|
|
padding: 10px;
|
|
background: rgba(239, 68, 68, 0.05);
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(239, 68, 68, 0.1);
|
|
"
|
|
>
|
|
<div style="font-size: 11px; color: #fca5a5; font-weight: 500">
|
|
Top error-prone types:
|
|
</div>
|
|
<div style="font-size: 12px; color: #94a3b8; margin-top: 4px">
|
|
<span style="color: #fca5a5">general-purpose</span> (6) ·
|
|
<span style="color: #fca5a5">tdd-assistant</span> (5) ·
|
|
<span style="color: #fca5a5">debugger</span> (4)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===================== SECTION 7: AGENT CONCURRENCY TIMELINE ===================== -->
|
|
<div class="section">
|
|
<div class="section-header">
|
|
<h2>
|
|
<span class="num">7</span> Agent Concurrency Timeline <span class="info-badge">?</span>
|
|
</h2>
|
|
<div class="subtitle">
|
|
Parallel agent execution patterns · Shows how agents overlap in time
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="tab-bar">
|
|
<div class="tab active">Aggregate (avg across sessions)</div>
|
|
<div class="tab">Selected Session</div>
|
|
</div>
|
|
|
|
<div class="timeline-container" style="padding: 12px 0">
|
|
<div class="swim-lane">
|
|
<div class="swim-label">Main Agent</div>
|
|
<div class="swim-track">
|
|
<div class="swim-segment working" style="left: 0%; width: 100%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="swim-lane">
|
|
<div class="swim-label">Explore</div>
|
|
<div class="swim-track">
|
|
<div class="swim-segment working" style="left: 5%; width: 18%"></div>
|
|
<div class="swim-segment working" style="left: 55%; width: 12%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="swim-lane">
|
|
<div class="swim-label">Plan</div>
|
|
<div class="swim-track">
|
|
<div class="swim-segment working" style="left: 25%; width: 15%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="swim-lane">
|
|
<div class="swim-label">code-reviewer</div>
|
|
<div class="swim-track">
|
|
<div class="swim-segment working" style="left: 60%; width: 22%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="swim-lane">
|
|
<div class="swim-label">tdd-assistant</div>
|
|
<div class="swim-track">
|
|
<div class="swim-segment working" style="left: 42%; width: 20%"></div>
|
|
<div class="swim-segment error" style="left: 63%; width: 4%"></div>
|
|
<div class="swim-segment working" style="left: 68%; width: 10%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="swim-lane">
|
|
<div class="swim-label">security-auditor</div>
|
|
<div class="swim-track">
|
|
<div class="swim-segment working" style="left: 82%; width: 14%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="swim-lane">
|
|
<div class="swim-label" style="color: #fca5a5">compaction</div>
|
|
<div class="swim-track">
|
|
<div class="swim-segment" style="left: 38%; width: 1%; background: #f87171"></div>
|
|
<div class="swim-segment" style="left: 72%; width: 1%; background: #f87171"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timeline-axis">
|
|
<div class="timeline-tick">0% — Start</div>
|
|
<div class="timeline-tick">25%</div>
|
|
<div class="timeline-tick">50%</div>
|
|
<div class="timeline-tick">75%</div>
|
|
<div class="timeline-tick">100% — End</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="legend" style="margin-top: 8px">
|
|
<div class="legend-item">
|
|
<div
|
|
class="legend-line"
|
|
style="background: linear-gradient(90deg, #6366f1, #818cf8)"
|
|
></div>
|
|
Working
|
|
</div>
|
|
<div class="legend-item">
|
|
<div
|
|
class="legend-line"
|
|
style="background: linear-gradient(90deg, #ef4444, #f87171)"
|
|
></div>
|
|
Error
|
|
</div>
|
|
<div class="legend-item">
|
|
<div
|
|
class="legend-line"
|
|
style="background: #f87171; width: 4px; height: 12px; border-radius: 2px"
|
|
></div>
|
|
Compaction event
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===================== SECTION 8 + 9: TWO COLUMN ROW ===================== -->
|
|
<div class="two-col section">
|
|
<!-- SECTION 8: Session Complexity Scatter -->
|
|
<div>
|
|
<div class="section-header">
|
|
<h2><span class="num">8</span> Session Complexity Scatter</h2>
|
|
<div class="subtitle">
|
|
Duration vs agent count vs tokens · Bubble size = token usage
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="scatter-container" style="min-height: 240px">
|
|
<div class="scatter-axis-y"></div>
|
|
<div class="scatter-axis-x"></div>
|
|
<div
|
|
class="scatter-axis-label"
|
|
style="left: -4px; top: 8px; writing-mode: vertical-lr; transform: rotate(180deg)"
|
|
>
|
|
Agent Count ↑
|
|
</div>
|
|
<div class="scatter-axis-label" style="bottom: 20px; right: 8px">Duration →</div>
|
|
|
|
<!-- Scattered dots -->
|
|
<div
|
|
class="scatter-dot completed"
|
|
style="width: 16px; height: 16px; left: 15%; bottom: 55px"
|
|
></div>
|
|
<div
|
|
class="scatter-dot completed"
|
|
style="width: 28px; height: 28px; left: 25%; bottom: 95px"
|
|
></div>
|
|
<div
|
|
class="scatter-dot completed"
|
|
style="width: 12px; height: 12px; left: 35%; bottom: 65px"
|
|
></div>
|
|
<div
|
|
class="scatter-dot error"
|
|
style="width: 22px; height: 22px; left: 40%; bottom: 130px"
|
|
></div>
|
|
<div
|
|
class="scatter-dot completed"
|
|
style="width: 34px; height: 34px; left: 50%; bottom: 140px"
|
|
></div>
|
|
<div
|
|
class="scatter-dot completed"
|
|
style="width: 20px; height: 20px; left: 55%; bottom: 80px"
|
|
></div>
|
|
<div
|
|
class="scatter-dot active"
|
|
style="width: 30px; height: 30px; left: 60%; bottom: 160px"
|
|
></div>
|
|
<div
|
|
class="scatter-dot completed"
|
|
style="width: 10px; height: 10px; left: 18%; bottom: 50px"
|
|
></div>
|
|
<div
|
|
class="scatter-dot abandoned"
|
|
style="width: 18px; height: 18px; left: 70%; bottom: 70px"
|
|
></div>
|
|
<div
|
|
class="scatter-dot completed"
|
|
style="width: 24px; height: 24px; left: 75%; bottom: 120px"
|
|
></div>
|
|
<div
|
|
class="scatter-dot error"
|
|
style="width: 14px; height: 14px; left: 82%; bottom: 100px"
|
|
></div>
|
|
<div
|
|
class="scatter-dot completed"
|
|
style="width: 40px; height: 40px; left: 85%; bottom: 180px"
|
|
></div>
|
|
<div
|
|
class="scatter-dot completed"
|
|
style="width: 8px; height: 8px; left: 10%; bottom: 48px"
|
|
></div>
|
|
<div
|
|
class="scatter-dot completed"
|
|
style="width: 18px; height: 18px; left: 45%; bottom: 75px"
|
|
></div>
|
|
</div>
|
|
<div class="legend">
|
|
<div class="legend-item">
|
|
<div class="legend-dot" style="background: #22c55e"></div>
|
|
Completed
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-dot" style="background: #ef4444"></div>
|
|
Error
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-dot" style="background: #6366f1"></div>
|
|
Active
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-dot" style="background: #eab308"></div>
|
|
Abandoned
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SECTION 9: Compaction Impact -->
|
|
<div>
|
|
<div class="section-header">
|
|
<h2><span class="num">9</span> Compaction Impact Analysis</h2>
|
|
<div class="subtitle">Context compression events and token recovery</div>
|
|
</div>
|
|
<div class="card">
|
|
<div
|
|
style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px"
|
|
>
|
|
<div
|
|
style="
|
|
background: rgba(20, 20, 35, 0.5);
|
|
border-radius: 10px;
|
|
padding: 12px;
|
|
text-align: center;
|
|
"
|
|
>
|
|
<div style="font-size: 22px; font-weight: 700; color: #f1f5f9">47</div>
|
|
<div
|
|
style="
|
|
font-size: 10px;
|
|
color: #64748b;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
"
|
|
>
|
|
Total Compactions
|
|
</div>
|
|
</div>
|
|
<div
|
|
style="
|
|
background: rgba(20, 20, 35, 0.5);
|
|
border-radius: 10px;
|
|
padding: 12px;
|
|
text-align: center;
|
|
"
|
|
>
|
|
<div style="font-size: 22px; font-weight: 700; color: #fde047">38.2M</div>
|
|
<div
|
|
style="
|
|
font-size: 10px;
|
|
color: #64748b;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
"
|
|
>
|
|
Tokens Recovered
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mini token chart showing compaction resets -->
|
|
<div
|
|
style="display: flex; align-items: flex-end; gap: 2px; height: 100px; padding: 0 4px"
|
|
>
|
|
<div
|
|
style="
|
|
flex: 1;
|
|
height: 20%;
|
|
background: rgba(99, 102, 241, 0.3);
|
|
border-radius: 2px 2px 0 0;
|
|
"
|
|
></div>
|
|
<div
|
|
style="
|
|
flex: 1;
|
|
height: 35%;
|
|
background: rgba(99, 102, 241, 0.3);
|
|
border-radius: 2px 2px 0 0;
|
|
"
|
|
></div>
|
|
<div
|
|
style="
|
|
flex: 1;
|
|
height: 50%;
|
|
background: rgba(99, 102, 241, 0.3);
|
|
border-radius: 2px 2px 0 0;
|
|
"
|
|
></div>
|
|
<div
|
|
style="
|
|
flex: 1;
|
|
height: 65%;
|
|
background: rgba(99, 102, 241, 0.4);
|
|
border-radius: 2px 2px 0 0;
|
|
"
|
|
></div>
|
|
<div
|
|
style="
|
|
flex: 1;
|
|
height: 80%;
|
|
background: rgba(99, 102, 241, 0.4);
|
|
border-radius: 2px 2px 0 0;
|
|
"
|
|
></div>
|
|
<div
|
|
style="
|
|
flex: 1;
|
|
height: 92%;
|
|
background: rgba(239, 68, 68, 0.4);
|
|
border-radius: 2px 2px 0 0;
|
|
border-top: 2px solid #f87171;
|
|
"
|
|
></div>
|
|
<!-- compaction drop -->
|
|
<div
|
|
style="
|
|
flex: 1;
|
|
height: 25%;
|
|
background: rgba(234, 179, 8, 0.3);
|
|
border-radius: 2px 2px 0 0;
|
|
"
|
|
></div>
|
|
<div
|
|
style="
|
|
flex: 1;
|
|
height: 40%;
|
|
background: rgba(99, 102, 241, 0.3);
|
|
border-radius: 2px 2px 0 0;
|
|
"
|
|
></div>
|
|
<div
|
|
style="
|
|
flex: 1;
|
|
height: 55%;
|
|
background: rgba(99, 102, 241, 0.3);
|
|
border-radius: 2px 2px 0 0;
|
|
"
|
|
></div>
|
|
<div
|
|
style="
|
|
flex: 1;
|
|
height: 70%;
|
|
background: rgba(99, 102, 241, 0.4);
|
|
border-radius: 2px 2px 0 0;
|
|
"
|
|
></div>
|
|
<div
|
|
style="
|
|
flex: 1;
|
|
height: 88%;
|
|
background: rgba(99, 102, 241, 0.4);
|
|
border-radius: 2px 2px 0 0;
|
|
"
|
|
></div>
|
|
<div
|
|
style="
|
|
flex: 1;
|
|
height: 95%;
|
|
background: rgba(239, 68, 68, 0.4);
|
|
border-radius: 2px 2px 0 0;
|
|
border-top: 2px solid #f87171;
|
|
"
|
|
></div>
|
|
<!-- compaction drop -->
|
|
<div
|
|
style="
|
|
flex: 1;
|
|
height: 30%;
|
|
background: rgba(234, 179, 8, 0.3);
|
|
border-radius: 2px 2px 0 0;
|
|
"
|
|
></div>
|
|
<div
|
|
style="
|
|
flex: 1;
|
|
height: 45%;
|
|
background: rgba(99, 102, 241, 0.3);
|
|
border-radius: 2px 2px 0 0;
|
|
"
|
|
></div>
|
|
<div
|
|
style="
|
|
flex: 1;
|
|
height: 60%;
|
|
background: rgba(99, 102, 241, 0.3);
|
|
border-radius: 2px 2px 0 0;
|
|
"
|
|
></div>
|
|
<div
|
|
style="
|
|
flex: 1;
|
|
height: 75%;
|
|
background: rgba(99, 102, 241, 0.4);
|
|
border-radius: 2px 2px 0 0;
|
|
"
|
|
></div>
|
|
</div>
|
|
<div
|
|
style="display: flex; justify-content: space-between; padding: 0 4px; margin-top: 4px"
|
|
>
|
|
<span style="font-size: 10px; color: #475569">Session start</span>
|
|
<span style="font-size: 10px; color: #475569">Session end</span>
|
|
</div>
|
|
|
|
<div class="legend" style="margin-top: 10px">
|
|
<div class="legend-item">
|
|
<div class="legend-line" style="background: rgba(99, 102, 241, 0.4)"></div>
|
|
Token growth
|
|
</div>
|
|
<div class="legend-item">
|
|
<div
|
|
class="legend-line"
|
|
style="background: #f87171; width: 4px; height: 10px; border-radius: 1px"
|
|
></div>
|
|
Compaction trigger
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-line" style="background: rgba(234, 179, 8, 0.3)"></div>
|
|
Post-compaction baseline
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===================== SECTION 10: SESSION DRILL-IN PANEL ===================== -->
|
|
<div class="section">
|
|
<div class="section-header">
|
|
<h2><span class="num">10</span> Session Drill-In <span class="info-badge">?</span></h2>
|
|
<div class="subtitle">
|
|
Select a session from the dropdown above or click a scatter dot to see its full execution
|
|
graph
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="card"
|
|
style="border: 1px dashed rgba(99, 102, 241, 0.2); background: rgba(10, 10, 18, 0.6)"
|
|
>
|
|
<div
|
|
style="
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 200px;
|
|
gap: 12px;
|
|
"
|
|
>
|
|
<div style="font-size: 36px; opacity: 0.3">◆</div>
|
|
<div style="font-size: 14px; color: #64748b">No session selected</div>
|
|
<div style="font-size: 12px; color: #475569; max-width: 400px; text-align: center">
|
|
Select a session to see its specific agent hierarchy tree, tool call timeline, and
|
|
execution flow as a horizontal node graph.
|
|
</div>
|
|
<div style="display: flex; gap: 8px; margin-top: 8px">
|
|
<div class="filter-pill">◆ Agent Tree</div>
|
|
<div class="filter-pill">⚙ Tool Timeline</div>
|
|
<div class="filter-pill">☰ Event Sequence</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="annotation">
|
|
<span class="ann-icon">💡</span>
|
|
When a session is selected: shows the actual horizontal agent spawn tree for that session
|
|
(like the DAG above but for one session), a tool-call swim-lane timeline, and a scrollable
|
|
event sequence. All three sub-views in tabs.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===================== DESIGN NOTES FOOTER ===================== -->
|
|
<div
|
|
style="
|
|
margin-top: 40px;
|
|
padding: 24px;
|
|
background: rgba(15, 15, 25, 0.5);
|
|
border-radius: 14px;
|
|
border: 1px solid rgba(99, 102, 241, 0.08);
|
|
"
|
|
>
|
|
<h3 style="font-size: 14px; color: #818cf8; margin-bottom: 12px">✍ Design Notes</h3>
|
|
<div
|
|
style="
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16px;
|
|
font-size: 12px;
|
|
color: #94a3b8;
|
|
"
|
|
>
|
|
<div>
|
|
<strong style="color: #e2e8f0">UX Principles</strong>
|
|
<ul
|
|
style="
|
|
margin-top: 6px;
|
|
padding-left: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
"
|
|
>
|
|
<li>Cross-filtering: clicking nodes in DAG filters all other sections</li>
|
|
<li>Progressive disclosure: aggregate by default, drill into specifics</li>
|
|
<li>Consistent dark theme matching existing app (Tailwind surface levels)</li>
|
|
<li>Responsive: 2-col layouts collapse to single column on narrow screens</li>
|
|
<li>Tooltips on every metric for raw values and context</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<strong style="color: #e2e8f0">Technical Approach</strong>
|
|
<ul
|
|
style="
|
|
margin-top: 6px;
|
|
padding-left: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
"
|
|
>
|
|
<li>New <code>/api/workflows</code> endpoint with aggregation queries</li>
|
|
<li>D3.js or React Flow for DAG and Sankey rendering</li>
|
|
<li>WebSocket updates for real-time active session changes</li>
|
|
<li>No new database tables — all derived from existing schema</li>
|
|
<li>Server-side computation for patterns and aggregates</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|