Smartgift-AI/AgentHub
14
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases 86 Wiki Activity

feat(workflows): drop the Tool Execution Flow sankey

Browse Source 
The d3-sankey tool-transition chart was the last of the deep harness-internals
visualizations issue #6 set out to remove: a wall of bands showing that Read
tends to precede Edit, with nothing a reader could act on. It goes, along with
its i18n keys in both locales and the now-orphaned d3-sankey dependency.

The workflows API response is untouched — `toolFlow` still ships in the
aggregate and still feeds the Dashboard's top-tools list. Remaining sections
renumber 4-9.
This commit is contained in:
nntrivi2001
2026-08-26 10:54:53 +07:00
parent 348c645ef3
commit 79e56c3221
9 changed files with 26 additions and 1014 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/pages/Workflows.tsx
+13 -25
View File
@@ -3,10 +3,10 @@
* @description Workflows page. Opens on this dashboard's OWN pipelines — per-node
* pass rates across every lane, and which skills/plugins actually get used — then
* the Claude Code orchestration analytics: headline stats, Workflow-tool runs, the
* spawning DAG, tool flow, patterns, model delegation, error propagation, session
* complexity, compaction impact and the per-session drill-in. Issue #6 dropped the
* agent collaboration network and the subagent effectiveness scorecards as too
* specialized to act on.
* spawning DAG, patterns, model delegation, error propagation, session complexity,
* compaction impact and the per-session drill-in. Issue #6 dropped the agent
* collaboration network and the subagent effectiveness scorecards as too
* specialized to act on; the tool-execution Sankey followed for the same reason.
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
*/
/* =============================================================================
@@ -35,7 +35,6 @@
* - `../components/workflows/SkillUsagePanel`
* - `../components/workflows/WorkflowRunsPanel`
* - `../components/workflows/OrchestrationDAG`
* - `../components/workflows/ToolExecutionFlow`
* - `../components/workflows/WorkflowPatterns`
* - `../components/workflows/ModelDelegationFlow`
* - `../components/workflows/ErrorPropagationMap`
@@ -82,7 +81,6 @@ 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 { WorkflowPatterns } from "../components/workflows/WorkflowPatterns";
import { ModelDelegationFlow } from "../components/workflows/ModelDelegationFlow";
import { ErrorPropagationMap } from "../components/workflows/ErrorPropagationMap";
@@ -267,19 +265,9 @@ export function Workflows() {
)}
</Section>
{/* Section 4: Tool Execution Flow */}
{/* Section 4: Workflow Patterns */}
<Section
number={4}
title={t("toolFlow.title")}
subtitle={t("toolFlow.subtitle")}
infoKey="toolFlow"
>
<ToolExecutionFlow data={data.toolFlow} filterAgentType={selectedNode} />
</Section>
{/* Section 5: Workflow Patterns */}
<Section
number={5}
title={t("patterns.title")}
subtitle={t("patterns.subtitle")}
infoKey="patterns"
@@ -287,10 +275,10 @@ export function Workflows() {
<WorkflowPatterns data={data.patterns} onPatternClick={() => {}} />
</Section>
{/* Section 6 + 7: Two Column */}
{/* Section 5 + 6: Two Column */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<Section
number={6}
number={5}
title={t("modelDelegation.title")}
subtitle={t("modelDelegation.subtitle")}
infoKey="modelDelegation"
@@ -299,7 +287,7 @@ export function Workflows() {
</Section>
<Section
number={7}
number={6}
title={t("errorPropagation.title")}
subtitle={t("errorPropagation.subtitle")}
infoKey="errorPropagation"
@@ -308,10 +296,10 @@ export function Workflows() {
</Section>
</div>
{/* Section 8 + 9: Two Column */}
{/* Section 7 + 8: Two Column */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<Section
number={8}
number={7}
title={t("complexity.title")}
subtitle={t("complexity.subtitle")}
infoKey="complexity"
@@ -320,7 +308,7 @@ export function Workflows() {
</Section>
<Section
number={9}
number={8}
title={t("compaction.title")}
subtitle={t("compaction.subtitle")}
infoKey="compaction"
@@ -329,9 +317,9 @@ export function Workflows() {
</Section>
</div>
{/* Section 10: Session Drill-In */}
{/* Section 9: Session Drill-In */}
<Section
number={10}
number={9}
title={t("drillIn.title")}
subtitle={t("drillIn.subtitle")}
infoKey="drillIn"
client/src/pages/__tests__/__snapshots__/screens.snapshot.test.tsx.snap
+5 -196
View File
@@ -10715,197 +10715,6 @@ exports[`screen snapshots > Workflows 1`] = `
>
4
</span>
<h2
class="text-sm font-semibold text-fg-primary"
>
Tool Execution 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 tools chain together - Sankey-style directed flow"
>
How tools chain together - Sankey-style directed flow
</span>
</div>
<div
class="card p-4 flex-1"
>
<div
class="relative"
>
<div
class="flex items-center justify-center"
style="height: 320px;"
>
<span
class="text-sm text-fg-muted"
>
No tool flow data
</span>
</div>
<div
class="flex flex-wrap gap-x-4 gap-y-1.5 mt-3 px-1"
>
<div
class="flex items-center gap-1.5"
>
<span
class="inline-block w-2.5 h-2.5 rounded-sm flex-shrink-0"
style="background: rgb(59, 130, 246); opacity: 0.9;"
/>
<span
class="text-xs text-fg-secondary"
>
Read
</span>
</div>
<div
class="flex items-center gap-1.5"
>
<span
class="inline-block w-2.5 h-2.5 rounded-sm flex-shrink-0"
style="background: rgb(34, 197, 94); opacity: 0.9;"
/>
<span
class="text-xs text-fg-secondary"
>
Write
</span>
</div>
<div
class="flex items-center gap-1.5"
>
<span
class="inline-block w-2.5 h-2.5 rounded-sm flex-shrink-0"
style="background: rgb(234, 179, 8); opacity: 0.9;"
/>
<span
class="text-xs text-fg-secondary"
>
Edit
</span>
</div>
<div
class="flex items-center gap-1.5"
>
<span
class="inline-block w-2.5 h-2.5 rounded-sm flex-shrink-0"
style="background: rgb(239, 68, 68); opacity: 0.9;"
/>
<span
class="text-xs text-fg-secondary"
>
Bash
</span>
</div>
<div
class="flex items-center gap-1.5"
>
<span
class="inline-block w-2.5 h-2.5 rounded-sm flex-shrink-0"
style="background: rgb(168, 85, 247); opacity: 0.9;"
/>
<span
class="text-xs text-fg-secondary"
>
Grep
</span>
</div>
<div
class="flex items-center gap-1.5"
>
<span
class="inline-block w-2.5 h-2.5 rounded-sm flex-shrink-0"
style="background: rgb(236, 72, 153); opacity: 0.9;"
/>
<span
class="text-xs text-fg-secondary"
>
Glob
</span>
</div>
<div
class="flex items-center gap-1.5"
>
<span
class="inline-block w-2.5 h-2.5 rounded-sm flex-shrink-0"
style="background: rgb(99, 102, 241); opacity: 0.9;"
/>
<span
class="text-xs text-fg-secondary"
>
Agent
</span>
</div>
<div
class="flex items-center gap-1.5"
>
<span
class="inline-block w-2.5 h-2.5 rounded-sm flex-shrink-0"
style="background: rgb(100, 116, 139); opacity: 0.9;"
/>
<span
class="text-xs text-fg-secondary"
>
Other
</span>
</div>
</div>
<div
aria-hidden="true"
class="fixed z-50 px-3 py-2 rounded-lg shadow-2xl pointer-events-none"
role="tooltip"
style="display: none; opacity: 0; left: 0px; top: 0px; background: rgb(18, 18, 31); border: 1px solid rgb(42, 42, 74); color: rgb(226, 232, 240); min-width: 240px; max-width: 320px; transition: opacity 120ms ease-out;"
/>
</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"
>
@@ -11013,7 +10822,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"
>
6
5
</span>
<h2
class="text-sm font-semibold text-fg-primary"
@@ -11103,7 +10912,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"
>
7
6
</span>
<h2
class="text-sm font-semibold text-fg-primary"
@@ -11205,7 +11014,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"
>
8
7
</span>
<h2
class="text-sm font-semibold text-fg-primary"
@@ -11309,7 +11118,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"
>
9
8
</span>
<h2
class="text-sm font-semibold text-fg-primary"
@@ -11404,7 +11213,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"
>
10
9
</span>
<h2
class="text-sm font-semibold text-fg-primary"