Skip to content

Commit 80c408b

Browse files
ryanbas21ryanbas21
committed
fix(devtools): correct error source attribution in Learn tab
- Pulse ring now targets the actual error source (SERVER for HTTP 4xx/5xx, BROWSER for CORS, SDK for SDK-only errors) - Arrow colors show error propagation direction (red only after error source) - SDK card distinguishes "received server error" vs "SDK error" - Richer expanded panels: color-coded status, error messages, URL in server detail - Browser card does not turn red on server errors (request was fine)
1 parent 443286d commit 80c408b

29 files changed

Lines changed: 4547 additions & 415 deletions

‎.superpowers/brainstorm/694753-1778353306/content/learn-error-states.html‎

Lines changed: 530 additions & 0 deletions
Large diffs are not rendered by default.

‎.superpowers/brainstorm/694753-1778353306/content/learn-icons-v2.html‎

Lines changed: 635 additions & 0 deletions
Large diffs are not rendered by default.

‎.superpowers/brainstorm/694753-1778353306/content/learn-layout.html‎

Lines changed: 326 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,326 @@
1+
<h2>Learn Tab — Layout Direction</h2>
2+
<p class="subtitle">
3+
How should the flow diagram be oriented? Consider that auth flows can have 3-15+ steps.
4+
</p>
5+
6+
<div class="cards">
7+
<div class="card" data-choice="horizontal" onclick="toggleSelect(this)">
8+
<div class="card-image" style="padding: 24px; background: #1a1a2e">
9+
<svg width="100%" height="180" viewBox="0 0 500 180">
10+
<!-- Horizontal flow: left to right -->
11+
<defs>
12+
<marker id="ah1" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto">
13+
<polygon points="0 0, 8 3, 0 6" fill="#30363d" />
14+
</marker>
15+
</defs>
16+
<!-- Nodes -->
17+
<circle cx="60" cy="60" r="24" fill="#58a6ff" opacity="0.9" />
18+
<text x="60" y="64" text-anchor="middle" fill="white" font-size="10" font-weight="600">
19+
Start
20+
</text>
21+
<text x="60" y="95" text-anchor="middle" fill="#8b949e" font-size="9">SDK Init</text>
22+
23+
<line
24+
x1="84"
25+
y1="60"
26+
x2="146"
27+
y2="60"
28+
stroke="#30363d"
29+
stroke-width="2"
30+
marker-end="url(#ah1)"
31+
/>
32+
33+
<circle cx="170" cy="60" r="24" fill="#58a6ff" opacity="0.9" />
34+
<text x="170" y="64" text-anchor="middle" fill="white" font-size="10" font-weight="600">
35+
Node 1
36+
</text>
37+
<text x="170" y="95" text-anchor="middle" fill="#8b949e" font-size="9">Username</text>
38+
39+
<line
40+
x1="194"
41+
y1="60"
42+
x2="256"
43+
y2="60"
44+
stroke="#30363d"
45+
stroke-width="2"
46+
marker-end="url(#ah1)"
47+
/>
48+
49+
<circle cx="280" cy="60" r="24" fill="#58a6ff" opacity="0.9" />
50+
<text x="280" y="64" text-anchor="middle" fill="white" font-size="10" font-weight="600">
51+
Node 2
52+
</text>
53+
<text x="280" y="95" text-anchor="middle" fill="#8b949e" font-size="9">Password</text>
54+
55+
<line
56+
x1="304"
57+
y1="60"
58+
x2="366"
59+
y2="60"
60+
stroke="#30363d"
61+
stroke-width="2"
62+
marker-end="url(#ah1)"
63+
/>
64+
65+
<circle cx="390" cy="60" r="24" fill="#3fb950" opacity="0.9" />
66+
<text x="390" y="64" text-anchor="middle" fill="white" font-size="10" font-weight="600">
67+
Done
68+
</text>
69+
<text x="390" y="95" text-anchor="middle" fill="#8b949e" font-size="9">Success</text>
70+
71+
<!-- Detail preview below -->
72+
<rect x="140" y="120" rx="4" width="200" height="50" fill="#161b22" stroke="#30363d" />
73+
<text x="160" y="140" fill="#8b949e" font-size="9">▼ Detail panel appears below</text>
74+
<text x="160" y="155" fill="#58a6ff" font-size="9">
75+
POST /davinci/flow → 200 → collectors
76+
</text>
77+
</svg>
78+
</div>
79+
<div class="card-body">
80+
<h3>A. Horizontal (Left → Right)</h3>
81+
<p>
82+
Natural reading direction. Flow overview scrolls horizontally. Detail panel below selected
83+
node. Works well with pan/zoom for long flows.
84+
</p>
85+
</div>
86+
</div>
87+
88+
<div class="card" data-choice="vertical" onclick="toggleSelect(this)">
89+
<div class="card-image" style="padding: 24px; background: #1a1a2e">
90+
<svg width="100%" height="180" viewBox="0 0 500 180">
91+
<defs>
92+
<marker id="ah2" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto">
93+
<polygon points="0 0, 8 3, 0 6" fill="#30363d" />
94+
</marker>
95+
</defs>
96+
<!-- Vertical flow: top to bottom, with detail on the right -->
97+
<circle cx="80" cy="30" r="18" fill="#58a6ff" opacity="0.9" />
98+
<text x="80" y="34" text-anchor="middle" fill="white" font-size="9" font-weight="600">
99+
Start
100+
</text>
101+
102+
<line
103+
x1="80"
104+
y1="48"
105+
x2="80"
106+
y2="62"
107+
stroke="#30363d"
108+
stroke-width="2"
109+
marker-end="url(#ah2)"
110+
/>
111+
112+
<circle cx="80" cy="80" r="18" fill="#58a6ff" opacity="0.9" />
113+
<text x="80" y="84" text-anchor="middle" fill="white" font-size="9" font-weight="600">
114+
Node 1
115+
</text>
116+
117+
<line
118+
x1="80"
119+
y1="98"
120+
x2="80"
121+
y2="112"
122+
stroke="#30363d"
123+
stroke-width="2"
124+
marker-end="url(#ah2)"
125+
/>
126+
127+
<circle cx="80" cy="130" r="18" fill="#58a6ff" opacity="0.9" />
128+
<text x="80" y="134" text-anchor="middle" fill="white" font-size="9" font-weight="600">
129+
Node 2
130+
</text>
131+
132+
<line
133+
x1="80"
134+
y1="148"
135+
x2="80"
136+
y2="162"
137+
stroke="#30363d"
138+
stroke-width="2"
139+
marker-end="url(#ah2)"
140+
/>
141+
142+
<circle cx="80" cy="174" r="14" fill="#3fb950" opacity="0.9" />
143+
<text x="80" y="178" text-anchor="middle" fill="white" font-size="8" font-weight="600">
144+
✓
145+
</text>
146+
147+
<!-- Detail panel to the right -->
148+
<rect x="160" y="10" rx="4" width="300" height="160" fill="#161b22" stroke="#30363d" />
149+
<text x="180" y="35" fill="#e6edf3" font-size="11" font-weight="600">
150+
Node 1 — Username
151+
</text>
152+
<rect x="180" y="45" rx="3" width="260" height="30" fill="#0d1117" stroke="#30363d" />
153+
<text x="195" y="64" fill="#58a6ff" font-size="9">POST</text>
154+
<text x="220" y="64" fill="#8b949e" font-size="9">/davinci/connections/flow → 200</text>
155+
<rect x="180" y="85" rx="3" width="260" height="30" fill="#0d1117" stroke="#30363d" />
156+
<text x="195" y="104" fill="#3fb950" font-size="9">NODE</text>
157+
<text x="225" y="104" fill="#8b949e" font-size="9">continue — 2 collectors</text>
158+
<rect x="180" y="125" rx="3" width="260" height="30" fill="#0d1117" stroke="#30363d" />
159+
<text x="195" y="144" fill="#ffa657" font-size="9">RESP</text>
160+
<text x="225" y="144" fill="#8b949e" font-size="9">interactionId: abc-123...</text>
161+
</svg>
162+
</div>
163+
<div class="card-body">
164+
<h3>B. Vertical (Top → Bottom)</h3>
165+
<p>
166+
Like the existing Graph panel but expanded. Flow scrolls vertically. Detail panel to the
167+
right of selected node. Familiar pattern from current UI.
168+
</p>
169+
</div>
170+
</div>
171+
172+
<div class="card" data-choice="hybrid" onclick="toggleSelect(this)">
173+
<div class="card-image" style="padding: 24px; background: #1a1a2e">
174+
<svg width="100%" height="180" viewBox="0 0 500 180">
175+
<defs>
176+
<marker id="ah3" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto">
177+
<polygon points="0 0, 8 3, 0 6" fill="#30363d" />
178+
</marker>
179+
</defs>
180+
<!-- Top rail: horizontal overview -->
181+
<rect x="10" y="5" rx="4" width="480" height="55" fill="#161b22" stroke="#30363d" />
182+
<circle cx="60" cy="32" r="14" fill="#58a6ff" opacity="0.9" />
183+
<text x="60" y="36" text-anchor="middle" fill="white" font-size="8">1</text>
184+
<line
185+
x1="74"
186+
y1="32"
187+
x2="146"
188+
y2="32"
189+
stroke="#30363d"
190+
stroke-width="1.5"
191+
marker-end="url(#ah3)"
192+
/>
193+
<circle
194+
cx="160"
195+
cy="32"
196+
r="14"
197+
fill="#58a6ff"
198+
opacity="0.9"
199+
stroke="#e6edf3"
200+
stroke-width="2"
201+
/>
202+
<text x="160" y="36" text-anchor="middle" fill="white" font-size="8">2</text>
203+
<line
204+
x1="174"
205+
y1="32"
206+
x2="246"
207+
y2="32"
208+
stroke="#30363d"
209+
stroke-width="1.5"
210+
marker-end="url(#ah3)"
211+
/>
212+
<circle cx="260" cy="32" r="14" fill="#58a6ff" opacity="0.9" />
213+
<text x="260" y="36" text-anchor="middle" fill="white" font-size="8">3</text>
214+
<line
215+
x1="274"
216+
y1="32"
217+
x2="346"
218+
y2="32"
219+
stroke="#30363d"
220+
stroke-width="1.5"
221+
marker-end="url(#ah3)"
222+
/>
223+
<circle cx="360" cy="32" r="14" fill="#3fb950" opacity="0.9" />
224+
<text x="360" y="36" text-anchor="middle" fill="white" font-size="8">✓</text>
225+
226+
<!-- Expanded detail below: the lifecycle of selected node 2 -->
227+
<rect x="10" y="70" rx="4" width="480" height="100" fill="#0d1117" stroke="#30363d" />
228+
<text x="30" y="90" fill="#e6edf3" font-size="11" font-weight="600">Step 2 — Password</text>
229+
230+
<!-- Mini lifecycle: Request → Server → Response → Node → Collectors -->
231+
<rect x="30" y="100" rx="8" width="56" height="28" fill="#161b22" stroke="#58a6ff" />
232+
<text x="58" y="118" text-anchor="middle" fill="#58a6ff" font-size="8" font-weight="700">
233+
REQUEST
234+
</text>
235+
236+
<line
237+
x1="86"
238+
y1="114"
239+
x2="108"
240+
y2="114"
241+
stroke="#30363d"
242+
stroke-width="1.5"
243+
marker-end="url(#ah3)"
244+
/>
245+
246+
<rect x="112" y="100" rx="8" width="56" height="28" fill="#161b22" stroke="#8b949e" />
247+
<text x="140" y="112" text-anchor="middle" fill="#8b949e" font-size="7">☁</text>
248+
<text x="140" y="122" text-anchor="middle" fill="#8b949e" font-size="7" font-weight="700">
249+
SERVER
250+
</text>
251+
252+
<line
253+
x1="168"
254+
y1="114"
255+
x2="190"
256+
y2="114"
257+
stroke="#30363d"
258+
stroke-width="1.5"
259+
marker-end="url(#ah3)"
260+
/>
261+
262+
<rect x="194" y="100" rx="8" width="56" height="28" fill="#161b22" stroke="#3fb950" />
263+
<text x="222" y="118" text-anchor="middle" fill="#3fb950" font-size="8" font-weight="700">
264+
200 OK
265+
</text>
266+
267+
<line
268+
x1="250"
269+
y1="114"
270+
x2="272"
271+
y2="114"
272+
stroke="#30363d"
273+
stroke-width="1.5"
274+
marker-end="url(#ah3)"
275+
/>
276+
277+
<rect x="276" y="100" rx="8" width="56" height="28" fill="#161b22" stroke="#ffa657" />
278+
<text x="304" y="118" text-anchor="middle" fill="#ffa657" font-size="8" font-weight="700">
279+
NODE
280+
</text>
281+
282+
<line
283+
x1="332"
284+
y1="114"
285+
x2="354"
286+
y2="114"
287+
stroke="#30363d"
288+
stroke-width="1.5"
289+
marker-end="url(#ah3)"
290+
/>
291+
292+
<rect x="358" y="100" rx="8" width="70" height="28" fill="#161b22" stroke="#bc8cff" />
293+
<text x="393" y="118" text-anchor="middle" fill="#bc8cff" font-size="8" font-weight="700">
294+
COLLECTORS
295+
</text>
296+
297+
<!-- Labels below lifecycle -->
298+
<text x="58" y="145" text-anchor="middle" fill="#484f58" font-size="7">POST /flow</text>
299+
<text x="140" y="145" text-anchor="middle" fill="#484f58" font-size="7">DaVinci</text>
300+
<text x="222" y="145" text-anchor="middle" fill="#484f58" font-size="7">continue</text>
301+
<text x="304" y="145" text-anchor="middle" fill="#484f58" font-size="7">Password</text>
302+
<text x="393" y="145" text-anchor="middle" fill="#484f58" font-size="7">2 inputs</text>
303+
304+
<!-- Selection indicator -->
305+
<line
306+
x1="160"
307+
y1="46"
308+
x2="160"
309+
y2="70"
310+
stroke="#58a6ff"
311+
stroke-width="1"
312+
stroke-dasharray="3 3"
313+
/>
314+
</svg>
315+
</div>
316+
<div class="card-body">
317+
<h3>C. Hybrid — Rail Overview + Step Detail</h3>
318+
<p>
319+
Horizontal rail at the top (like existing FlowView) for the full flow overview. Below, an
320+
expanded step-detail section shows the internal lifecycle: Request → Server → Response →
321+
Node → Collectors. Click a node in the rail to drill in. Keeps context while showing detail.
322+
The detail section is the draggable canvas.
323+
</p>
324+
</div>
325+
</div>
326+
</div>

‎.superpowers/brainstorm/694753-1778353306/content/waiting-2.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div style="display: flex; align-items: center; justify-content: center; min-height: 60vh">
2+
<p class="subtitle">Continuing in terminal...</p>
3+
</div>

‎.superpowers/brainstorm/694753-1778353306/content/waiting.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div style="display: flex; align-items: center; justify-content: center; min-height: 60vh">
2+
<p class="subtitle">Continuing in terminal...</p>
3+
</div>

‎.superpowers/brainstorm/694753-1778353306/state/server-stopped‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"reason":"idle timeout","timestamp":1778356250698}

0 commit comments

Comments
 (0)