Skip to content

Commit 2ed4270

Browse files
committed
feat: DAG visualization for trajectory page with agent/terminal support
Replace flat timeline with top-to-bottom DAG using SVG bezier edges. Add parallel step bands, collapse/expand, hover path highlighting. New step types: agent_call and terminal with metadata display. Edge anchors connect from closest node edge, not center. Duration shown compactly in header row right corner.
1 parent c926df9 commit 2ed4270

File tree

3 files changed

+834
-175
lines changed

3 files changed

+834
-175
lines changed

packages/web/src/index.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,12 +50,18 @@
5050
--c-curve-hi: #94A3B8;
5151
--c-curve-lo: #E5E7EB;
5252

53+
/* DAG */
54+
--c-dag-bg: #FAFBFC;
55+
--c-dag-node-shadow: rgba(0,0,0,0.04);
56+
5357
/* Trajectory step types */
5458
--c-step-tool-bg: #EFF6FF; --c-step-tool-border: #BFDBFE; --c-step-tool-text: #1D4ED8;
5559
--c-step-decision-bg: #F5F3FF; --c-step-decision-border: #DDD6FE; --c-step-decision-text: #6D28D9;
5660
--c-step-observation-bg: #F8FAFC; --c-step-observation-border: #E2E8F0; --c-step-observation-text: #64748B;
5761
--c-step-error-bg: #FEF2F2; --c-step-error-border: #FECACA; --c-step-error-text: #B91C1C;
5862
--c-step-retry-bg: #FFFBEB; --c-step-retry-border: #FDE68A; --c-step-retry-text: #A16207;
63+
--c-step-agent-bg: #F0FDF4; --c-step-agent-border: #86EFAC; --c-step-agent-text: #15803D;
64+
--c-step-terminal-bg: #F8FAFC; --c-step-terminal-border: #CBD5E1; --c-step-terminal-text: #334155;
5965
}
6066

6167
.dark {
@@ -106,12 +112,18 @@
106112
--c-curve-hi: #636366;
107113
--c-curve-lo: #2C2C2E;
108114

115+
/* DAG */
116+
--c-dag-bg: #151516;
117+
--c-dag-node-shadow: rgba(0,0,0,0.3);
118+
109119
/* Trajectory step types */
110120
--c-step-tool-bg: #001933; --c-step-tool-border: #003A80; --c-step-tool-text: #0A84FF;
111121
--c-step-decision-bg: #1A0533; --c-step-decision-border: #3B0764; --c-step-decision-text: #A78BFA;
112122
--c-step-observation-bg: #1C1C1E; --c-step-observation-border: #3A3A3C; --c-step-observation-text: #98989E;
113123
--c-step-error-bg: #2B1C1C; --c-step-error-border: #6B2020; --c-step-error-text: #FF453A;
114124
--c-step-retry-bg: #2B2218; --c-step-retry-border: #6B4D10; --c-step-retry-text: #FF9F0A;
125+
--c-step-agent-bg: #1C2B22; --c-step-agent-border: #1D5C38; --c-step-agent-text: #30D158;
126+
--c-step-terminal-bg: #1C1C1E; --c-step-terminal-border: #3A3A3C; --c-step-terminal-text: #98989E;
115127
}
116128

117129
body {

0 commit comments

Comments
 (0)