feat(workflows): show lane pipelines, drop the deep analytics charts
The Workflows page rendered eleven charts of Claude Code harness internals (collaboration network, subagent effectiveness, patterns, model delegation, error propagation, concurrency, complexity, compaction). Too specialized to read and nothing to act on, so they are gone along with their i18n keys. What is left is what a reader can act on: headline stats, Workflow-tool runs, the spawning DAG, the tool flow and the per-session drill-in — plus a new first section for this dashboard's OWN pipelines. LanePipelinePanel renders a horizontally scrolling lane strip and the selected lane's PipelineMap, reusing the Workspace components so a stage looks identical on both pages. The panel is read-only: the console-never-writes-a-stage boundary applies here too, so every lane action stays on the Workspace page. The workflows API response shape is untouched. Closes #6
This commit is contained in:
+21
-104
@@ -1,6 +1,11 @@
|
||||
/**
|
||||
* @file Workflows.tsx
|
||||
* @description Displays comprehensive analytics on agent orchestration patterns, including DAGs of agent spawning, tool usage flows, collaboration networks, and session complexity metrics, with real-time updates and interactive filtering.
|
||||
* @description Workflows page: this dashboard's own lane pipelines first, then the
|
||||
* few Claude Code orchestration views that stay readable and interactive — headline
|
||||
* stats, Workflow-tool runs, the spawning DAG, the tool flow, and the per-session
|
||||
* drill-in. The deeper analytics (collaboration network, subagent effectiveness,
|
||||
* patterns, model delegation, error propagation, concurrency, complexity,
|
||||
* compaction) were dropped in issue #6 as too specialized to act on.
|
||||
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
|
||||
*/
|
||||
/* =============================================================================
|
||||
@@ -25,14 +30,11 @@
|
||||
* - `../lib/eventBus`
|
||||
* - `../lib/types`
|
||||
* - `../components/workflows/WorkflowStats`
|
||||
* - `../components/workflows/LanePipelinePanel`
|
||||
* - `../components/workflows/WorkflowRunsPanel`
|
||||
* - `../components/workflows/OrchestrationDAG`
|
||||
* - `../components/workflows/ToolExecutionFlow`
|
||||
* - `../components/workflows/AgentCollaborationNetwork`
|
||||
* - `../components/workflows/SubagentEffectiveness`
|
||||
* - `../components/workflows/WorkflowPatterns`
|
||||
* - `../components/workflows/ModelDelegationFlow`
|
||||
* - `../components/workflows/ErrorPropagationMap`
|
||||
* - `../components/workflows/ConcurrencyTimeline`
|
||||
* - `../components/workflows/SessionDrillIn`
|
||||
*
|
||||
* ## Public surface
|
||||
* - `Workflows` — exported API; see TSDoc on the symbol for behavior.
|
||||
@@ -74,16 +76,9 @@ import type { WorkflowData, WSMessage } from "../lib/types";
|
||||
import { WorkflowStats } from "../components/workflows/WorkflowStats";
|
||||
import { OrchestrationDAG } from "../components/workflows/OrchestrationDAG";
|
||||
import { ToolExecutionFlow } from "../components/workflows/ToolExecutionFlow";
|
||||
import { AgentCollaborationNetwork } from "../components/workflows/AgentCollaborationNetwork";
|
||||
import { SubagentEffectiveness } from "../components/workflows/SubagentEffectiveness";
|
||||
import { WorkflowPatterns } from "../components/workflows/WorkflowPatterns";
|
||||
import { ModelDelegationFlow } from "../components/workflows/ModelDelegationFlow";
|
||||
import { ErrorPropagationMap } from "../components/workflows/ErrorPropagationMap";
|
||||
import { ConcurrencyTimeline } from "../components/workflows/ConcurrencyTimeline";
|
||||
import { SessionComplexityScatter } from "../components/workflows/SessionComplexityScatter";
|
||||
import { CompactionImpact } from "../components/workflows/CompactionImpact";
|
||||
import { SessionDrillIn } from "../components/workflows/SessionDrillIn";
|
||||
import { WorkflowRunsPanel } from "../components/workflows/WorkflowRunsPanel";
|
||||
import { LanePipelinePanel } from "../components/workflows/LanePipelinePanel";
|
||||
|
||||
type StatusFilter = "all" | "active" | "completed";
|
||||
|
||||
@@ -203,6 +198,11 @@ export function Workflows() {
|
||||
{/* Stats Row */}
|
||||
<WorkflowStats stats={data.stats} />
|
||||
|
||||
{/* This dashboard's own pipelines - lane strip + the selected lane's map */}
|
||||
<Section number={1} title={t("lanes.title")} subtitle={t("lanes.subtitle")} infoKey="lanes">
|
||||
<LanePipelinePanel />
|
||||
</Section>
|
||||
|
||||
{/* Workflow-tool runs (issue #167) - fleets ingested from on-disk journals */}
|
||||
<div className="card p-4 space-y-3">
|
||||
<div>
|
||||
@@ -215,9 +215,9 @@ export function Workflows() {
|
||||
<WorkflowRunsPanel statusFilter={statusFilter} />
|
||||
</div>
|
||||
|
||||
{/* Section 1: Agent Orchestration DAG */}
|
||||
{/* Section 2: Agent Orchestration DAG */}
|
||||
<Section
|
||||
number={1}
|
||||
number={2}
|
||||
title={t("orchestration.title")}
|
||||
subtitle={t("orchestration.subtitle")}
|
||||
infoKey="orchestration"
|
||||
@@ -243,9 +243,9 @@ export function Workflows() {
|
||||
)}
|
||||
</Section>
|
||||
|
||||
{/* Section 2: Tool Execution Flow */}
|
||||
{/* Section 3: Tool Execution Flow */}
|
||||
<Section
|
||||
number={2}
|
||||
number={3}
|
||||
title={t("toolFlow.title")}
|
||||
subtitle={t("toolFlow.subtitle")}
|
||||
infoKey="toolFlow"
|
||||
@@ -253,92 +253,9 @@ export function Workflows() {
|
||||
<ToolExecutionFlow data={data.toolFlow} filterAgentType={selectedNode} />
|
||||
</Section>
|
||||
|
||||
{/* Section 3: Agent Collaboration Network */}
|
||||
{/* Section 4: Session Drill-In */}
|
||||
<Section
|
||||
number={3}
|
||||
title={t("pipeline.title")}
|
||||
subtitle={t("pipeline.subtitle")}
|
||||
infoKey="pipeline"
|
||||
>
|
||||
<AgentCollaborationNetwork effectiveness={data.effectiveness} edges={data.cooccurrence} />
|
||||
</Section>
|
||||
|
||||
{/* Section 4 + 5: Two Column */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<Section
|
||||
number={4}
|
||||
title={t("effectiveness.title")}
|
||||
subtitle={t("effectiveness.subtitle")}
|
||||
infoKey="effectiveness"
|
||||
>
|
||||
<SubagentEffectiveness data={data.effectiveness} />
|
||||
</Section>
|
||||
|
||||
<Section
|
||||
number={5}
|
||||
title={t("patterns.title")}
|
||||
subtitle={t("patterns.subtitle")}
|
||||
infoKey="patterns"
|
||||
>
|
||||
<WorkflowPatterns data={data.patterns} onPatternClick={() => {}} />
|
||||
</Section>
|
||||
</div>
|
||||
|
||||
{/* Section 6 + 7: Two Column */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<Section
|
||||
number={6}
|
||||
title={t("modelDelegation.title")}
|
||||
subtitle={t("modelDelegation.subtitle")}
|
||||
infoKey="modelDelegation"
|
||||
>
|
||||
<ModelDelegationFlow data={data.modelDelegation} />
|
||||
</Section>
|
||||
|
||||
<Section
|
||||
number={7}
|
||||
title={t("errorPropagation.title")}
|
||||
subtitle={t("errorPropagation.subtitle")}
|
||||
infoKey="errorPropagation"
|
||||
>
|
||||
<ErrorPropagationMap data={data.errorPropagation} />
|
||||
</Section>
|
||||
</div>
|
||||
|
||||
{/* Section 8: Agent Concurrency Timeline */}
|
||||
<Section
|
||||
number={8}
|
||||
title={t("concurrency.title")}
|
||||
subtitle={t("concurrency.subtitle")}
|
||||
infoKey="concurrency"
|
||||
>
|
||||
<ConcurrencyTimeline data={data.concurrency} />
|
||||
</Section>
|
||||
|
||||
{/* Section 9 + 10: Two Column */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<Section
|
||||
number={9}
|
||||
title={t("complexity.title")}
|
||||
subtitle={t("complexity.subtitle")}
|
||||
infoKey="complexity"
|
||||
>
|
||||
<SessionComplexityScatter data={data.complexity} onSessionClick={setSelectedSessionId} />
|
||||
</Section>
|
||||
|
||||
<Section
|
||||
number={10}
|
||||
title={t("compaction.title")}
|
||||
subtitle={t("compaction.subtitle")}
|
||||
infoKey="compaction"
|
||||
>
|
||||
<CompactionImpact data={data.compaction} />
|
||||
</Section>
|
||||
</div>
|
||||
|
||||
{/* Section 11: Session Drill-In */}
|
||||
<Section
|
||||
number={11}
|
||||
number={4}
|
||||
title={t("drillIn.title")}
|
||||
subtitle={t("drillIn.subtitle")}
|
||||
infoKey="drillIn"
|
||||
|
||||
@@ -10264,6 +10264,78 @@ exports[`screen snapshots > Workflows 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col h-full"
|
||||
>
|
||||
<div
|
||||
class="flex items-center justify-between gap-4 mb-3"
|
||||
>
|
||||
<div
|
||||
class="flex items-center gap-2.5 min-w-0"
|
||||
>
|
||||
<span
|
||||
class="w-5 h-5 rounded-md bg-accent/15 text-accent text-[11px] font-bold flex items-center justify-center flex-shrink-0"
|
||||
>
|
||||
1
|
||||
</span>
|
||||
<h2
|
||||
class="text-sm font-semibold text-fg-primary"
|
||||
>
|
||||
Lane Pipelines
|
||||
</h2>
|
||||
<button
|
||||
aria-expanded="false"
|
||||
aria-label="What this shows"
|
||||
class="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-fg-muted hover:text-fg-secondary transition-colors focus:outline-none focus:ring-1 focus:ring-accent/40"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
class="lucide lucide-info w-3.5 h-3.5"
|
||||
fill="none"
|
||||
height="24"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
/>
|
||||
<path
|
||||
d="M12 16v-4"
|
||||
/>
|
||||
<path
|
||||
d="M12 8h.01"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<span
|
||||
class="hidden lg:block flex-shrink-0 max-w-[20rem] xl:max-w-sm truncate text-right text-[11px] text-fg-muted"
|
||||
title="Your own lanes and the stage each one has reached"
|
||||
>
|
||||
Your own lanes and the stage each one has reached
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="card p-4 flex-1"
|
||||
>
|
||||
<p
|
||||
class="text-sm text-fg-muted"
|
||||
>
|
||||
No lanes yet. Create one from a working directory:
|
||||
|
||||
<code>
|
||||
ccam lanes add --cwd $(pwd)
|
||||
</code>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="card p-4 space-y-3"
|
||||
>
|
||||
@@ -10453,7 +10525,7 @@ exports[`screen snapshots > Workflows 1`] = `
|
||||
<span
|
||||
class="w-5 h-5 rounded-md bg-accent/15 text-accent text-[11px] font-bold flex items-center justify-center flex-shrink-0"
|
||||
>
|
||||
1
|
||||
2
|
||||
</span>
|
||||
<h2
|
||||
class="text-sm font-semibold text-fg-primary"
|
||||
@@ -10569,7 +10641,7 @@ exports[`screen snapshots > Workflows 1`] = `
|
||||
<span
|
||||
class="w-5 h-5 rounded-md bg-accent/15 text-accent text-[11px] font-bold flex items-center justify-center flex-shrink-0"
|
||||
>
|
||||
2
|
||||
3
|
||||
</span>
|
||||
<h2
|
||||
class="text-sm font-semibold text-fg-primary"
|
||||
@@ -10760,766 +10832,7 @@ exports[`screen snapshots > Workflows 1`] = `
|
||||
<span
|
||||
class="w-5 h-5 rounded-md bg-accent/15 text-accent text-[11px] font-bold flex items-center justify-center flex-shrink-0"
|
||||
>
|
||||
3
|
||||
</span>
|
||||
<h2
|
||||
class="text-sm font-semibold text-fg-primary"
|
||||
>
|
||||
Agent Pipeline Graph
|
||||
</h2>
|
||||
<button
|
||||
aria-expanded="false"
|
||||
aria-label="What this shows"
|
||||
class="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-fg-muted hover:text-fg-secondary transition-colors focus:outline-none focus:ring-1 focus:ring-accent/40"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
class="lucide lucide-info w-3.5 h-3.5"
|
||||
fill="none"
|
||||
height="24"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
/>
|
||||
<path
|
||||
d="M12 16v-4"
|
||||
/>
|
||||
<path
|
||||
d="M12 8h.01"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<span
|
||||
class="hidden lg:block flex-shrink-0 max-w-[20rem] xl:max-w-sm truncate text-right text-[11px] text-fg-muted"
|
||||
title="Directed workflow - which agent types run after which, with frequency labels"
|
||||
>
|
||||
Directed workflow - which agent types run after which, with frequency labels
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="card p-4 flex-1"
|
||||
>
|
||||
<div
|
||||
class="flex flex-col items-center justify-center py-16 text-center"
|
||||
>
|
||||
<p
|
||||
class="text-sm font-medium text-fg-secondary"
|
||||
>
|
||||
No pipeline data yet
|
||||
</p>
|
||||
<p
|
||||
class="text-xs text-fg-muted mt-1"
|
||||
>
|
||||
Directed workflow edges appear once agent types run sequentially across multiple sessions.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="grid grid-cols-1 lg:grid-cols-2 gap-6"
|
||||
>
|
||||
<div
|
||||
class="flex flex-col h-full"
|
||||
>
|
||||
<div
|
||||
class="flex items-center justify-between gap-4 mb-3"
|
||||
>
|
||||
<div
|
||||
class="flex items-center gap-2.5 min-w-0"
|
||||
>
|
||||
<span
|
||||
class="w-5 h-5 rounded-md bg-accent/15 text-accent text-[11px] font-bold flex items-center justify-center flex-shrink-0"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
<h2
|
||||
class="text-sm font-semibold text-fg-primary"
|
||||
>
|
||||
Subagent Effectiveness
|
||||
</h2>
|
||||
<button
|
||||
aria-expanded="false"
|
||||
aria-label="What this shows"
|
||||
class="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-fg-muted hover:text-fg-secondary transition-colors focus:outline-none focus:ring-1 focus:ring-accent/40"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
class="lucide lucide-info w-3.5 h-3.5"
|
||||
fill="none"
|
||||
height="24"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
/>
|
||||
<path
|
||||
d="M12 16v-4"
|
||||
/>
|
||||
<path
|
||||
d="M12 8h.01"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<span
|
||||
class="hidden lg:block flex-shrink-0 max-w-[20rem] xl:max-w-sm truncate text-right text-[11px] text-fg-muted"
|
||||
title="Performance metrics per agent type"
|
||||
>
|
||||
Performance metrics per agent type
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="card p-4 flex-1"
|
||||
>
|
||||
<div
|
||||
class="flex items-center justify-center py-16 text-fg-muted text-sm"
|
||||
>
|
||||
No subagent data available
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col h-full"
|
||||
>
|
||||
<div
|
||||
class="flex items-center justify-between gap-4 mb-3"
|
||||
>
|
||||
<div
|
||||
class="flex items-center gap-2.5 min-w-0"
|
||||
>
|
||||
<span
|
||||
class="w-5 h-5 rounded-md bg-accent/15 text-accent text-[11px] font-bold flex items-center justify-center flex-shrink-0"
|
||||
>
|
||||
5
|
||||
</span>
|
||||
<h2
|
||||
class="text-sm font-semibold text-fg-primary"
|
||||
>
|
||||
Detected Workflow Patterns
|
||||
</h2>
|
||||
<button
|
||||
aria-expanded="false"
|
||||
aria-label="What this shows"
|
||||
class="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-fg-muted hover:text-fg-secondary transition-colors focus:outline-none focus:ring-1 focus:ring-accent/40"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
class="lucide lucide-info w-3.5 h-3.5"
|
||||
fill="none"
|
||||
height="24"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
/>
|
||||
<path
|
||||
d="M12 16v-4"
|
||||
/>
|
||||
<path
|
||||
d="M12 8h.01"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<span
|
||||
class="hidden lg:block flex-shrink-0 max-w-[20rem] xl:max-w-sm truncate text-right text-[11px] text-fg-muted"
|
||||
title="Common agent orchestration sequences"
|
||||
>
|
||||
Common agent orchestration sequences
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="card p-4 flex-1"
|
||||
>
|
||||
<div
|
||||
class="card p-5"
|
||||
>
|
||||
<h2
|
||||
class="text-sm font-semibold text-fg-secondary uppercase tracking-wider mb-4"
|
||||
>
|
||||
Workflow Patterns
|
||||
</h2>
|
||||
<div
|
||||
class="flex flex-col items-center justify-center py-12 text-center"
|
||||
>
|
||||
<div
|
||||
class="w-10 h-10 rounded-xl bg-surface-4 flex items-center justify-center mb-3"
|
||||
>
|
||||
<svg
|
||||
class="lucide lucide-zap w-5 h-5 text-fg-muted"
|
||||
fill="none"
|
||||
height="24"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<p
|
||||
class="text-sm font-medium text-fg-secondary"
|
||||
>
|
||||
No patterns detected yet
|
||||
</p>
|
||||
<p
|
||||
class="text-xs text-fg-muted mt-1"
|
||||
>
|
||||
Patterns appear once multiple sessions share the same agent sequence.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="grid grid-cols-1 lg:grid-cols-2 gap-6"
|
||||
>
|
||||
<div
|
||||
class="flex flex-col h-full"
|
||||
>
|
||||
<div
|
||||
class="flex items-center justify-between gap-4 mb-3"
|
||||
>
|
||||
<div
|
||||
class="flex items-center gap-2.5 min-w-0"
|
||||
>
|
||||
<span
|
||||
class="w-5 h-5 rounded-md bg-accent/15 text-accent text-[11px] font-bold flex items-center justify-center flex-shrink-0"
|
||||
>
|
||||
6
|
||||
</span>
|
||||
<h2
|
||||
class="text-sm font-semibold text-fg-primary"
|
||||
>
|
||||
Model Delegation Flow
|
||||
</h2>
|
||||
<button
|
||||
aria-expanded="false"
|
||||
aria-label="What this shows"
|
||||
class="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-fg-muted hover:text-fg-secondary transition-colors focus:outline-none focus:ring-1 focus:ring-accent/40"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
class="lucide lucide-info w-3.5 h-3.5"
|
||||
fill="none"
|
||||
height="24"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
/>
|
||||
<path
|
||||
d="M12 16v-4"
|
||||
/>
|
||||
<path
|
||||
d="M12 8h.01"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<span
|
||||
class="hidden lg:block flex-shrink-0 max-w-[20rem] xl:max-w-sm truncate text-right text-[11px] text-fg-muted"
|
||||
title="How models route through agent hierarchies"
|
||||
>
|
||||
How models route through agent hierarchies
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="card p-4 flex-1"
|
||||
>
|
||||
<div
|
||||
class="flex flex-col items-center justify-center py-16 gap-3 text-fg-muted"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
height="40"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
viewBox="0 0 24 24"
|
||||
width="40"
|
||||
>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
/>
|
||||
<path
|
||||
d="M12 8v4M12 16h.01"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="text-sm"
|
||||
>
|
||||
No model delegation data available
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col h-full"
|
||||
>
|
||||
<div
|
||||
class="flex items-center justify-between gap-4 mb-3"
|
||||
>
|
||||
<div
|
||||
class="flex items-center gap-2.5 min-w-0"
|
||||
>
|
||||
<span
|
||||
class="w-5 h-5 rounded-md bg-accent/15 text-accent text-[11px] font-bold flex items-center justify-center flex-shrink-0"
|
||||
>
|
||||
7
|
||||
</span>
|
||||
<h2
|
||||
class="text-sm font-semibold text-fg-primary"
|
||||
>
|
||||
Error Propagation Map
|
||||
</h2>
|
||||
<button
|
||||
aria-expanded="false"
|
||||
aria-label="What this shows"
|
||||
class="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-fg-muted hover:text-fg-secondary transition-colors focus:outline-none focus:ring-1 focus:ring-accent/40"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
class="lucide lucide-info w-3.5 h-3.5"
|
||||
fill="none"
|
||||
height="24"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
/>
|
||||
<path
|
||||
d="M12 16v-4"
|
||||
/>
|
||||
<path
|
||||
d="M12 8h.01"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<span
|
||||
class="hidden lg:block flex-shrink-0 max-w-[20rem] xl:max-w-sm truncate text-right text-[11px] text-fg-muted"
|
||||
title="Where errors cluster in agent hierarchy depth"
|
||||
>
|
||||
Where errors cluster in agent hierarchy depth
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="card p-4 flex-1"
|
||||
>
|
||||
<div
|
||||
class="flex flex-col items-center justify-center py-16 gap-3"
|
||||
>
|
||||
<div
|
||||
class="w-12 h-12 rounded-full bg-status-success/10 border border-status-success/20 flex items-center justify-center"
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
height="24"
|
||||
stroke="#10b981"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
>
|
||||
<path
|
||||
d="M22 11.08V12a10 10 0 1 1-5.93-9.14"
|
||||
/>
|
||||
<polyline
|
||||
points="22 4 12 14.01 9 11.01"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<span
|
||||
class="text-sm text-status-success font-medium"
|
||||
>
|
||||
No errors recorded
|
||||
</span>
|
||||
<span
|
||||
class="text-xs text-fg-muted"
|
||||
>
|
||||
All sessions completed successfully
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col h-full"
|
||||
>
|
||||
<div
|
||||
class="flex items-center justify-between gap-4 mb-3"
|
||||
>
|
||||
<div
|
||||
class="flex items-center gap-2.5 min-w-0"
|
||||
>
|
||||
<span
|
||||
class="w-5 h-5 rounded-md bg-accent/15 text-accent text-[11px] font-bold flex items-center justify-center flex-shrink-0"
|
||||
>
|
||||
8
|
||||
</span>
|
||||
<h2
|
||||
class="text-sm font-semibold text-fg-primary"
|
||||
>
|
||||
Agent Concurrency Timeline
|
||||
</h2>
|
||||
<button
|
||||
aria-expanded="false"
|
||||
aria-label="What this shows"
|
||||
class="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-fg-muted hover:text-fg-secondary transition-colors focus:outline-none focus:ring-1 focus:ring-accent/40"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
class="lucide lucide-info w-3.5 h-3.5"
|
||||
fill="none"
|
||||
height="24"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
/>
|
||||
<path
|
||||
d="M12 16v-4"
|
||||
/>
|
||||
<path
|
||||
d="M12 8h.01"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<span
|
||||
class="hidden lg:block flex-shrink-0 max-w-[20rem] xl:max-w-sm truncate text-right text-[11px] text-fg-muted"
|
||||
title="Parallel agent execution patterns - Shows how agents overlap in time"
|
||||
>
|
||||
Parallel agent execution patterns - Shows how agents overlap in time
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="card p-4 flex-1"
|
||||
>
|
||||
<div
|
||||
class="flex flex-col items-center justify-center py-12 text-center"
|
||||
>
|
||||
<div
|
||||
class="w-10 h-10 rounded-xl bg-surface-4 flex items-center justify-center mb-3"
|
||||
>
|
||||
<svg
|
||||
class="w-5 h-5 text-fg-muted"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<rect
|
||||
height="4"
|
||||
rx="1"
|
||||
width="18"
|
||||
x="3"
|
||||
y="4"
|
||||
/>
|
||||
<rect
|
||||
height="4"
|
||||
rx="1"
|
||||
width="12"
|
||||
x="3"
|
||||
y="10"
|
||||
/>
|
||||
<rect
|
||||
height="4"
|
||||
rx="1"
|
||||
width="15"
|
||||
x="3"
|
||||
y="16"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<p
|
||||
class="text-sm font-medium text-fg-secondary"
|
||||
>
|
||||
No concurrency data
|
||||
</p>
|
||||
<p
|
||||
class="text-xs text-fg-muted mt-1"
|
||||
>
|
||||
Concurrency data appears once sessions with subagents have been recorded.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="grid grid-cols-1 lg:grid-cols-2 gap-6"
|
||||
>
|
||||
<div
|
||||
class="flex flex-col h-full"
|
||||
>
|
||||
<div
|
||||
class="flex items-center justify-between gap-4 mb-3"
|
||||
>
|
||||
<div
|
||||
class="flex items-center gap-2.5 min-w-0"
|
||||
>
|
||||
<span
|
||||
class="w-5 h-5 rounded-md bg-accent/15 text-accent text-[11px] font-bold flex items-center justify-center flex-shrink-0"
|
||||
>
|
||||
9
|
||||
</span>
|
||||
<h2
|
||||
class="text-sm font-semibold text-fg-primary"
|
||||
>
|
||||
Session Complexity Scatter
|
||||
</h2>
|
||||
<button
|
||||
aria-expanded="false"
|
||||
aria-label="What this shows"
|
||||
class="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-fg-muted hover:text-fg-secondary transition-colors focus:outline-none focus:ring-1 focus:ring-accent/40"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
class="lucide lucide-info w-3.5 h-3.5"
|
||||
fill="none"
|
||||
height="24"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
/>
|
||||
<path
|
||||
d="M12 16v-4"
|
||||
/>
|
||||
<path
|
||||
d="M12 8h.01"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<span
|
||||
class="hidden lg:block flex-shrink-0 max-w-[20rem] xl:max-w-sm truncate text-right text-[11px] text-fg-muted"
|
||||
title="Duration vs agent count vs tokens - Bubble size = token usage"
|
||||
>
|
||||
Duration vs agent count vs tokens - Bubble size = token usage
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="card p-4 flex-1"
|
||||
>
|
||||
<div
|
||||
class="flex flex-col items-center justify-center py-16 text-center"
|
||||
>
|
||||
<div
|
||||
class="w-10 h-10 rounded-xl bg-surface-4 flex items-center justify-center mb-3"
|
||||
>
|
||||
<svg
|
||||
class="w-5 h-5 text-fg-muted"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
cx="7"
|
||||
cy="12"
|
||||
r="3"
|
||||
/>
|
||||
<circle
|
||||
cx="17"
|
||||
cy="8"
|
||||
r="2"
|
||||
/>
|
||||
<circle
|
||||
cx="14"
|
||||
cy="17"
|
||||
r="4"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<p
|
||||
class="text-sm font-medium text-fg-secondary"
|
||||
>
|
||||
No session complexity data
|
||||
</p>
|
||||
<p
|
||||
class="text-xs text-fg-muted mt-1"
|
||||
>
|
||||
Sessions will appear here once they complete with agent activity.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col h-full"
|
||||
>
|
||||
<div
|
||||
class="flex items-center justify-between gap-4 mb-3"
|
||||
>
|
||||
<div
|
||||
class="flex items-center gap-2.5 min-w-0"
|
||||
>
|
||||
<span
|
||||
class="w-5 h-5 rounded-md bg-accent/15 text-accent text-[11px] font-bold flex items-center justify-center flex-shrink-0"
|
||||
>
|
||||
10
|
||||
</span>
|
||||
<h2
|
||||
class="text-sm font-semibold text-fg-primary"
|
||||
>
|
||||
Compaction Impact Analysis
|
||||
</h2>
|
||||
<button
|
||||
aria-expanded="false"
|
||||
aria-label="What this shows"
|
||||
class="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-fg-muted hover:text-fg-secondary transition-colors focus:outline-none focus:ring-1 focus:ring-accent/40"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
class="lucide lucide-info w-3.5 h-3.5"
|
||||
fill="none"
|
||||
height="24"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
/>
|
||||
<path
|
||||
d="M12 16v-4"
|
||||
/>
|
||||
<path
|
||||
d="M12 8h.01"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<span
|
||||
class="hidden lg:block flex-shrink-0 max-w-[20rem] xl:max-w-sm truncate text-right text-[11px] text-fg-muted"
|
||||
title="How context compression is spread across your sessions"
|
||||
>
|
||||
How context compression is spread across your sessions
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="card p-4 flex-1"
|
||||
>
|
||||
<div
|
||||
class="flex flex-col items-center justify-center py-16 gap-3 text-fg-muted"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
height="40"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
viewBox="0 0 24 24"
|
||||
width="40"
|
||||
>
|
||||
<path
|
||||
d="M9 17H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v3"
|
||||
/>
|
||||
<path
|
||||
d="M13 21l2-2 4 4"
|
||||
/>
|
||||
<path
|
||||
d="M17 21v-6"
|
||||
/>
|
||||
<path
|
||||
d="M21 17h-6"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="text-sm"
|
||||
>
|
||||
No compactions recorded
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col h-full"
|
||||
>
|
||||
<div
|
||||
class="flex items-center justify-between gap-4 mb-3"
|
||||
>
|
||||
<div
|
||||
class="flex items-center gap-2.5 min-w-0"
|
||||
>
|
||||
<span
|
||||
class="w-5 h-5 rounded-md bg-accent/15 text-accent text-[11px] font-bold flex items-center justify-center flex-shrink-0"
|
||||
>
|
||||
11
|
||||
4
|
||||
</span>
|
||||
<h2
|
||||
class="text-sm font-semibold text-fg-primary"
|
||||
|
||||
Reference in New Issue
Block a user