@chenlongapps/opencode-token-usage 0.4.0 → 0.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +12 -6
- package/README.zh-CN.md +12 -6
- package/ROADMAP.md +8 -3
- package/dist/aliases.d.ts +6 -0
- package/dist/aliases.js +32 -0
- package/dist/overrides.d.ts +22 -0
- package/dist/overrides.js +181 -0
- package/dist/prices.generated.d.ts +3341 -0
- package/dist/prices.generated.js +289 -0
- package/dist/pricing.d.ts +14 -189
- package/dist/pricing.js +86 -580
- package/dist/tui.js +515 -348
- package/dist/usage.d.ts +2 -0
- package/dist/usage.js +3 -3
- package/docs/pricing.md +23 -290
- package/docs/verification.md +30 -9
- package/package.json +2 -1
package/dist/tui.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { memo as _$memo } from "@opentui/solid";
|
|
2
2
|
import { use as _$use } from "@opentui/solid";
|
|
3
|
+
import { insert as _$insert } from "@opentui/solid";
|
|
3
4
|
import { createComponent as _$createComponent } from "@opentui/solid";
|
|
4
5
|
import { effect as _$effect } from "@opentui/solid";
|
|
5
|
-
import { insert as _$insert } from "@opentui/solid";
|
|
6
6
|
import { createTextNode as _$createTextNode } from "@opentui/solid";
|
|
7
7
|
import { insertNode as _$insertNode } from "@opentui/solid";
|
|
8
8
|
import { setProp as _$setProp } from "@opentui/solid";
|
|
@@ -15,40 +15,35 @@ import { PerformanceMonitor } from "./performance.js";
|
|
|
15
15
|
import { breakdownRows } from "./context-sources.js";
|
|
16
16
|
import { createSource } from "./source.js";
|
|
17
17
|
import { bar, countLabel, formatCompact, formatEstimatedCost, formatTokens, requestRows, summaryRows, usageRows } from "./usage.js";
|
|
18
|
-
function
|
|
19
|
-
const
|
|
20
|
-
status: "loading"
|
|
21
|
-
});
|
|
22
|
-
const controller = new UsageController(createSource(props.context.client), listener => props.context.data.listen(({
|
|
23
|
-
details
|
|
24
|
-
}) => listener(details)), setState, 80, 3_000, 100, props.performance);
|
|
25
|
-
const unregister = props.register(controller);
|
|
26
|
-
createEffect(() => controller.select(props.sessionID));
|
|
27
|
-
onCleanup(() => {
|
|
28
|
-
controller.dispose();
|
|
29
|
-
unregister();
|
|
30
|
-
});
|
|
31
|
-
const rows = createMemo(() => usageRows(state().summary, state().context, state().performance));
|
|
18
|
+
function UsageView(props) {
|
|
19
|
+
const rows = createMemo(() => usageRows(props.state().summary, props.state().context, props.state().performance));
|
|
32
20
|
const performanceStart = createMemo(() => rows().findIndex(([label]) => label === "TPS" || label === "TTFT"));
|
|
33
21
|
const status = () => ({
|
|
34
22
|
loading: "Loading…",
|
|
35
23
|
ready: "",
|
|
36
24
|
stale: "Not updated · retrying…",
|
|
37
25
|
unavailable: "Unavailable · retrying…"
|
|
38
|
-
})[state().status];
|
|
26
|
+
})[props.state().status];
|
|
39
27
|
return (() => {
|
|
40
|
-
var _el$ = _$createElement("box")
|
|
41
|
-
_el$2 = _$createElement("text"),
|
|
42
|
-
_el$3 = _$createElement("b");
|
|
43
|
-
_$insertNode(_el$, _el$2);
|
|
28
|
+
var _el$ = _$createElement("box");
|
|
44
29
|
_$setProp(_el$, "flexDirection", "column");
|
|
45
|
-
_$setProp(_el$, "marginTop", 1);
|
|
46
30
|
_$setProp(_el$, "flexShrink", 0);
|
|
47
|
-
_$insertNode(_el$2, _el$3);
|
|
48
|
-
_$insertNode(_el$3, _$createTextNode(`Token Usage`));
|
|
49
31
|
_$insert(_el$, _$createComponent(Show, {
|
|
50
32
|
get when() {
|
|
51
|
-
return
|
|
33
|
+
return !props.hideTitle;
|
|
34
|
+
},
|
|
35
|
+
get children() {
|
|
36
|
+
var _el$2 = _$createElement("text"),
|
|
37
|
+
_el$3 = _$createElement("b");
|
|
38
|
+
_$insertNode(_el$2, _el$3);
|
|
39
|
+
_$insertNode(_el$3, _$createTextNode(`Token Usage`));
|
|
40
|
+
_$effect(_$p => _$setProp(_el$2, "fg", props.context.theme.text.base, _$p));
|
|
41
|
+
return _el$2;
|
|
42
|
+
}
|
|
43
|
+
}), null);
|
|
44
|
+
_$insert(_el$, _$createComponent(Show, {
|
|
45
|
+
get when() {
|
|
46
|
+
return props.state().status !== "ready";
|
|
52
47
|
},
|
|
53
48
|
get children() {
|
|
54
49
|
var _el$5 = _$createElement("text");
|
|
@@ -87,10 +82,162 @@ function UsagePanel(props) {
|
|
|
87
82
|
return _el$6;
|
|
88
83
|
})()
|
|
89
84
|
}), null);
|
|
90
|
-
_$effect(_$p => _$setProp(_el
|
|
85
|
+
_$effect(_$p => _$setProp(_el$, "marginTop", props.hideTitle ? 0 : 1, _$p));
|
|
91
86
|
return _el$;
|
|
92
87
|
})();
|
|
93
88
|
}
|
|
89
|
+
function UsagePanel(props) {
|
|
90
|
+
const [state, setState] = createSignal({
|
|
91
|
+
status: "loading"
|
|
92
|
+
});
|
|
93
|
+
const controller = new UsageController(createSource(props.context.client), listener => props.context.data.listen(({
|
|
94
|
+
details
|
|
95
|
+
}) => listener(details)), setState, 80, 3_000, 100, props.performance);
|
|
96
|
+
const unregister = props.register(controller);
|
|
97
|
+
createEffect(() => controller.select(props.sessionID));
|
|
98
|
+
onCleanup(() => {
|
|
99
|
+
controller.dispose();
|
|
100
|
+
unregister();
|
|
101
|
+
});
|
|
102
|
+
return _$createComponent(UsageView, {
|
|
103
|
+
get context() {
|
|
104
|
+
return props.context;
|
|
105
|
+
},
|
|
106
|
+
state: state
|
|
107
|
+
});
|
|
108
|
+
}
|
|
109
|
+
function ChildUsageDialog(props) {
|
|
110
|
+
const dimensions = useTerminalDimensions();
|
|
111
|
+
let scroll;
|
|
112
|
+
props.context.keymap.layer(() => ({
|
|
113
|
+
mode: "modal",
|
|
114
|
+
commands: [{
|
|
115
|
+
bind: "up",
|
|
116
|
+
title: "Scroll usage up",
|
|
117
|
+
group: "Dialog",
|
|
118
|
+
run: () => scroll?.scrollBy(-1)
|
|
119
|
+
}, {
|
|
120
|
+
bind: "down",
|
|
121
|
+
title: "Scroll usage down",
|
|
122
|
+
group: "Dialog",
|
|
123
|
+
run: () => scroll?.scrollBy(1)
|
|
124
|
+
}, {
|
|
125
|
+
bind: "pageup",
|
|
126
|
+
title: "Previous usage page",
|
|
127
|
+
group: "Dialog",
|
|
128
|
+
run: () => scroll?.scrollBy(-10)
|
|
129
|
+
}, {
|
|
130
|
+
bind: "pagedown",
|
|
131
|
+
title: "Next usage page",
|
|
132
|
+
group: "Dialog",
|
|
133
|
+
run: () => scroll?.scrollBy(10)
|
|
134
|
+
}]
|
|
135
|
+
}));
|
|
136
|
+
return (() => {
|
|
137
|
+
var _el$9 = _$createElement("box"),
|
|
138
|
+
_el$0 = _$createElement("box"),
|
|
139
|
+
_el$1 = _$createElement("text"),
|
|
140
|
+
_el$10 = _$createElement("b"),
|
|
141
|
+
_el$12 = _$createElement("text"),
|
|
142
|
+
_el$14 = _$createElement("scrollbox"),
|
|
143
|
+
_el$15 = _$createElement("text");
|
|
144
|
+
_$insertNode(_el$9, _el$0);
|
|
145
|
+
_$insertNode(_el$9, _el$14);
|
|
146
|
+
_$insertNode(_el$9, _el$15);
|
|
147
|
+
_$setProp(_el$9, "paddingLeft", 2);
|
|
148
|
+
_$setProp(_el$9, "paddingRight", 2);
|
|
149
|
+
_$setProp(_el$9, "paddingBottom", 1);
|
|
150
|
+
_$setProp(_el$9, "gap", 1);
|
|
151
|
+
_$insertNode(_el$0, _el$1);
|
|
152
|
+
_$insertNode(_el$0, _el$12);
|
|
153
|
+
_$setProp(_el$0, "flexDirection", "row");
|
|
154
|
+
_$setProp(_el$0, "justifyContent", "space-between");
|
|
155
|
+
_$insertNode(_el$1, _el$10);
|
|
156
|
+
_$insertNode(_el$10, _$createTextNode(`Token Usage`));
|
|
157
|
+
_$insertNode(_el$12, _$createTextNode(`esc`));
|
|
158
|
+
_$setProp(_el$12, "onMouseUp", () => props.context.ui.dialog.clear());
|
|
159
|
+
_$use(value => {
|
|
160
|
+
scroll = value;
|
|
161
|
+
}, _el$14);
|
|
162
|
+
_$setProp(_el$14, "contentOptions", {
|
|
163
|
+
minHeight: 0
|
|
164
|
+
});
|
|
165
|
+
_$setProp(_el$14, "scrollbarOptions", {
|
|
166
|
+
visible: false
|
|
167
|
+
});
|
|
168
|
+
_$insert(_el$14, _$createComponent(UsageView, {
|
|
169
|
+
get context() {
|
|
170
|
+
return props.context;
|
|
171
|
+
},
|
|
172
|
+
get state() {
|
|
173
|
+
return props.state;
|
|
174
|
+
},
|
|
175
|
+
hideTitle: true
|
|
176
|
+
}));
|
|
177
|
+
_$insertNode(_el$15, _$createTextNode(`↑/↓ scroll · esc close`));
|
|
178
|
+
_$effect(_p$ => {
|
|
179
|
+
var _v$4 = props.context.theme.text.base,
|
|
180
|
+
_v$5 = props.context.theme.text.muted,
|
|
181
|
+
_v$6 = Math.max(3, dimensions().height - 8),
|
|
182
|
+
_v$7 = props.context.theme.text.muted;
|
|
183
|
+
_v$4 !== _p$.e && (_p$.e = _$setProp(_el$1, "fg", _v$4, _p$.e));
|
|
184
|
+
_v$5 !== _p$.t && (_p$.t = _$setProp(_el$12, "fg", _v$5, _p$.t));
|
|
185
|
+
_v$6 !== _p$.a && (_p$.a = _$setProp(_el$14, "maxHeight", _v$6, _p$.a));
|
|
186
|
+
_v$7 !== _p$.o && (_p$.o = _$setProp(_el$15, "fg", _v$7, _p$.o));
|
|
187
|
+
return _p$;
|
|
188
|
+
}, {
|
|
189
|
+
e: undefined,
|
|
190
|
+
t: undefined,
|
|
191
|
+
a: undefined,
|
|
192
|
+
o: undefined
|
|
193
|
+
});
|
|
194
|
+
return _el$9;
|
|
195
|
+
})();
|
|
196
|
+
}
|
|
197
|
+
function ChildUsageLauncher(props) {
|
|
198
|
+
const [state, setState] = createSignal({
|
|
199
|
+
status: "loading"
|
|
200
|
+
});
|
|
201
|
+
const controller = new UsageController(createSource(props.context.client), listener => props.context.data.listen(({
|
|
202
|
+
details
|
|
203
|
+
}) => listener(details)), setState, 80, 3_000, 100, props.performance);
|
|
204
|
+
const unregister = props.register(controller);
|
|
205
|
+
createEffect(() => controller.select(props.sessionID));
|
|
206
|
+
onCleanup(() => {
|
|
207
|
+
controller.dispose();
|
|
208
|
+
unregister();
|
|
209
|
+
});
|
|
210
|
+
const summary = createMemo(() => {
|
|
211
|
+
const current = state();
|
|
212
|
+
if (!current.summary) return `Token Usage · ${{
|
|
213
|
+
loading: "Loading…",
|
|
214
|
+
ready: "Loading…",
|
|
215
|
+
stale: "Unavailable",
|
|
216
|
+
unavailable: "Unavailable · retrying…"
|
|
217
|
+
}[current.status]}`;
|
|
218
|
+
const context = current.context ? `${formatTokens(current.context.used)} / ${formatTokens(current.context.limit)} (${current.context.percent.toFixed(1)}%)` : "—";
|
|
219
|
+
const cost = formatEstimatedCost(current.summary.cost, current.summary.costStatus) ?? "—";
|
|
220
|
+
const tps = current.performance?.tps !== undefined && Number.isFinite(current.performance.tps) ? `${current.performance.tpsEstimated ? "~" : ""}${Math.max(0, current.performance.tps).toFixed(1)} tok/s` : "—";
|
|
221
|
+
const stale = current.status === "stale" ? " · Not updated" : "";
|
|
222
|
+
return `Token Usage · Context ${context} · Total ${formatTokens(current.summary.total)} · Cost ${cost} · TPS ${tps}${stale}`;
|
|
223
|
+
});
|
|
224
|
+
return (() => {
|
|
225
|
+
var _el$17 = _$createElement("box"),
|
|
226
|
+
_el$18 = _$createElement("text");
|
|
227
|
+
_$insertNode(_el$17, _el$18);
|
|
228
|
+
_$setProp(_el$17, "flexDirection", "row");
|
|
229
|
+
_$setProp(_el$17, "justifyContent", "flex-end");
|
|
230
|
+
_$setProp(_el$17, "paddingRight", 2);
|
|
231
|
+
_$setProp(_el$17, "flexShrink", 0);
|
|
232
|
+
_$setProp(_el$18, "wrapMode", "none");
|
|
233
|
+
_$setProp(_el$18, "onMouseUp", event => {
|
|
234
|
+
if (event.button === 0) props.open(props.sessionID, state);
|
|
235
|
+
});
|
|
236
|
+
_$insert(_el$18, summary);
|
|
237
|
+
_$effect(_$p => _$setProp(_el$18, "fg", props.context.theme.text.muted, _$p));
|
|
238
|
+
return _el$17;
|
|
239
|
+
})();
|
|
240
|
+
}
|
|
94
241
|
function UsageDialog(props) {
|
|
95
242
|
const [state, setState] = createSignal({
|
|
96
243
|
status: "loading"
|
|
@@ -107,6 +254,9 @@ function UsageDialog(props) {
|
|
|
107
254
|
unregister();
|
|
108
255
|
});
|
|
109
256
|
let scroll;
|
|
257
|
+
const toggleDetails = () => {
|
|
258
|
+
setDetailed(value => !value);
|
|
259
|
+
};
|
|
110
260
|
props.context.keymap.layer(() => ({
|
|
111
261
|
mode: "modal",
|
|
112
262
|
commands: [{
|
|
@@ -143,9 +293,7 @@ function UsageDialog(props) {
|
|
|
143
293
|
bind: "d",
|
|
144
294
|
title: "Toggle usage details",
|
|
145
295
|
group: "Dialog",
|
|
146
|
-
run:
|
|
147
|
-
setDetailed(value => !value);
|
|
148
|
-
}
|
|
296
|
+
run: toggleDetails
|
|
149
297
|
}]
|
|
150
298
|
}));
|
|
151
299
|
const theme = () => props.context.theme.text;
|
|
@@ -175,259 +323,264 @@ function UsageDialog(props) {
|
|
|
175
323
|
const half = Math.ceil(rows.length / 2);
|
|
176
324
|
const columns = [rows.slice(0, half), rows.slice(half)];
|
|
177
325
|
const cell = ([label, value]) => (() => {
|
|
178
|
-
var _el$
|
|
179
|
-
_el$
|
|
180
|
-
_el$
|
|
181
|
-
_$insertNode(_el$
|
|
182
|
-
_$insertNode(_el$
|
|
183
|
-
_$setProp(_el$
|
|
184
|
-
_$setProp(_el$
|
|
185
|
-
_$setProp(_el$
|
|
186
|
-
_$setProp(_el$
|
|
187
|
-
_$insert(_el$
|
|
188
|
-
_$insert(_el$
|
|
326
|
+
var _el$19 = _$createElement("box"),
|
|
327
|
+
_el$20 = _$createElement("text"),
|
|
328
|
+
_el$21 = _$createElement("text");
|
|
329
|
+
_$insertNode(_el$19, _el$20);
|
|
330
|
+
_$insertNode(_el$19, _el$21);
|
|
331
|
+
_$setProp(_el$19, "flexDirection", "row");
|
|
332
|
+
_$setProp(_el$19, "justifyContent", "space-between");
|
|
333
|
+
_$setProp(_el$19, "gap", 2);
|
|
334
|
+
_$setProp(_el$20, "flexShrink", 0);
|
|
335
|
+
_$insert(_el$20, label);
|
|
336
|
+
_$insert(_el$21, value);
|
|
189
337
|
_$effect(_p$ => {
|
|
190
|
-
var _v$
|
|
191
|
-
_v$
|
|
192
|
-
_v$
|
|
193
|
-
_v$
|
|
338
|
+
var _v$8 = theme().muted,
|
|
339
|
+
_v$9 = theme().base;
|
|
340
|
+
_v$8 !== _p$.e && (_p$.e = _$setProp(_el$20, "fg", _v$8, _p$.e));
|
|
341
|
+
_v$9 !== _p$.t && (_p$.t = _$setProp(_el$21, "fg", _v$9, _p$.t));
|
|
194
342
|
return _p$;
|
|
195
343
|
}, {
|
|
196
344
|
e: undefined,
|
|
197
345
|
t: undefined
|
|
198
346
|
});
|
|
199
|
-
return _el$
|
|
347
|
+
return _el$19;
|
|
200
348
|
})();
|
|
201
349
|
return pairColumns() ? (() => {
|
|
202
|
-
var _el$
|
|
203
|
-
_$setProp(_el$
|
|
204
|
-
_$setProp(_el$
|
|
205
|
-
_$insert(_el$
|
|
206
|
-
var _el$
|
|
207
|
-
_$setProp(_el$
|
|
208
|
-
_$setProp(_el$
|
|
209
|
-
_$setProp(_el$
|
|
210
|
-
_$insert(_el$
|
|
211
|
-
return _el$
|
|
350
|
+
var _el$22 = _$createElement("box");
|
|
351
|
+
_$setProp(_el$22, "flexDirection", "row");
|
|
352
|
+
_$setProp(_el$22, "gap", 2);
|
|
353
|
+
_$insert(_el$22, () => columns.map(column => (() => {
|
|
354
|
+
var _el$23 = _$createElement("box");
|
|
355
|
+
_$setProp(_el$23, "flexDirection", "column");
|
|
356
|
+
_$setProp(_el$23, "flexGrow", 1);
|
|
357
|
+
_$setProp(_el$23, "minWidth", 0);
|
|
358
|
+
_$insert(_el$23, () => column.map(cell));
|
|
359
|
+
return _el$23;
|
|
212
360
|
})()));
|
|
213
|
-
return _el$
|
|
361
|
+
return _el$22;
|
|
214
362
|
})() : (() => {
|
|
215
|
-
var _el$
|
|
216
|
-
_$setProp(_el$
|
|
217
|
-
_$insert(_el$
|
|
218
|
-
return _el$
|
|
363
|
+
var _el$24 = _$createElement("box");
|
|
364
|
+
_$setProp(_el$24, "flexDirection", "column");
|
|
365
|
+
_$insert(_el$24, () => rows.map(cell));
|
|
366
|
+
return _el$24;
|
|
219
367
|
})();
|
|
220
368
|
};
|
|
221
369
|
const barRow = (percent, size) => {
|
|
222
370
|
const cells = bar(percent, size);
|
|
223
371
|
return (() => {
|
|
224
|
-
var _el$
|
|
225
|
-
_el$
|
|
226
|
-
_el$
|
|
227
|
-
_$insertNode(_el$
|
|
228
|
-
_$insertNode(_el$
|
|
229
|
-
_$setProp(_el$
|
|
230
|
-
_$
|
|
231
|
-
_$insert(_el$
|
|
372
|
+
var _el$25 = _$createElement("box"),
|
|
373
|
+
_el$26 = _$createElement("text"),
|
|
374
|
+
_el$27 = _$createElement("text");
|
|
375
|
+
_$insertNode(_el$25, _el$26);
|
|
376
|
+
_$insertNode(_el$25, _el$27);
|
|
377
|
+
_$setProp(_el$25, "flexDirection", "row");
|
|
378
|
+
_$setProp(_el$26, "wrapMode", "none");
|
|
379
|
+
_$insert(_el$26, () => "█".repeat(cells.filled));
|
|
380
|
+
_$setProp(_el$27, "wrapMode", "none");
|
|
381
|
+
_$insert(_el$27, () => "░".repeat(cells.empty));
|
|
232
382
|
_$effect(_p$ => {
|
|
233
|
-
var _v$
|
|
234
|
-
_v$
|
|
235
|
-
_v$
|
|
236
|
-
_v$
|
|
383
|
+
var _v$0 = theme().base,
|
|
384
|
+
_v$1 = theme().muted;
|
|
385
|
+
_v$0 !== _p$.e && (_p$.e = _$setProp(_el$26, "fg", _v$0, _p$.e));
|
|
386
|
+
_v$1 !== _p$.t && (_p$.t = _$setProp(_el$27, "fg", _v$1, _p$.t));
|
|
237
387
|
return _p$;
|
|
238
388
|
}, {
|
|
239
389
|
e: undefined,
|
|
240
390
|
t: undefined
|
|
241
391
|
});
|
|
242
|
-
return _el$
|
|
392
|
+
return _el$25;
|
|
243
393
|
})();
|
|
244
394
|
};
|
|
245
395
|
return (() => {
|
|
246
|
-
var _el$
|
|
247
|
-
_el$
|
|
248
|
-
_el$
|
|
249
|
-
_el$
|
|
250
|
-
_el$
|
|
251
|
-
_el$
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
_$
|
|
256
|
-
_$
|
|
257
|
-
_$setProp(_el$
|
|
258
|
-
_$
|
|
259
|
-
_$
|
|
260
|
-
_$setProp(_el$
|
|
261
|
-
_$
|
|
262
|
-
_$
|
|
263
|
-
_$
|
|
264
|
-
_$
|
|
265
|
-
_$
|
|
266
|
-
_$
|
|
267
|
-
_$
|
|
396
|
+
var _el$28 = _$createElement("box"),
|
|
397
|
+
_el$29 = _$createElement("box"),
|
|
398
|
+
_el$30 = _$createElement("text"),
|
|
399
|
+
_el$31 = _$createElement("b"),
|
|
400
|
+
_el$33 = _$createElement("text"),
|
|
401
|
+
_el$60 = _$createElement("box"),
|
|
402
|
+
_el$61 = _$createElement("text"),
|
|
403
|
+
_el$63 = _$createElement("text"),
|
|
404
|
+
_el$65 = _$createElement("text");
|
|
405
|
+
_$insertNode(_el$28, _el$29);
|
|
406
|
+
_$insertNode(_el$28, _el$60);
|
|
407
|
+
_$setProp(_el$28, "paddingLeft", 2);
|
|
408
|
+
_$setProp(_el$28, "paddingRight", 2);
|
|
409
|
+
_$setProp(_el$28, "paddingBottom", 1);
|
|
410
|
+
_$setProp(_el$28, "gap", 1);
|
|
411
|
+
_$insertNode(_el$29, _el$30);
|
|
412
|
+
_$insertNode(_el$29, _el$33);
|
|
413
|
+
_$setProp(_el$29, "flexDirection", "row");
|
|
414
|
+
_$setProp(_el$29, "justifyContent", "space-between");
|
|
415
|
+
_$setProp(_el$29, "gap", 2);
|
|
416
|
+
_$insertNode(_el$30, _el$31);
|
|
417
|
+
_$insertNode(_el$31, _$createTextNode(`Token Usage`));
|
|
418
|
+
_$insertNode(_el$33, _$createTextNode(`esc`));
|
|
419
|
+
_$setProp(_el$33, "onMouseUp", () => props.context.ui.dialog.clear());
|
|
420
|
+
_$insert(_el$28, _$createComponent(Show, {
|
|
268
421
|
get when() {
|
|
269
422
|
return identity();
|
|
270
423
|
},
|
|
271
424
|
get children() {
|
|
272
|
-
var _el$
|
|
273
|
-
_$setProp(_el$
|
|
274
|
-
_$insert(_el$
|
|
275
|
-
_$effect(_$p => _$setProp(_el$
|
|
276
|
-
return _el$
|
|
425
|
+
var _el$35 = _$createElement("text");
|
|
426
|
+
_$setProp(_el$35, "wrapMode", "word");
|
|
427
|
+
_$insert(_el$35, identity);
|
|
428
|
+
_$effect(_$p => _$setProp(_el$35, "fg", theme().muted, _$p));
|
|
429
|
+
return _el$35;
|
|
277
430
|
}
|
|
278
|
-
}), _el$
|
|
279
|
-
_$insert(_el$
|
|
431
|
+
}), _el$60);
|
|
432
|
+
_$insert(_el$28, _$createComponent(Show, {
|
|
280
433
|
get when() {
|
|
281
434
|
return state().status !== "ready";
|
|
282
435
|
},
|
|
283
436
|
get children() {
|
|
284
|
-
var _el$
|
|
285
|
-
_$insert(_el$
|
|
286
|
-
_$effect(_$p => _$setProp(_el$
|
|
287
|
-
return _el$
|
|
437
|
+
var _el$36 = _$createElement("text");
|
|
438
|
+
_$insert(_el$36, status);
|
|
439
|
+
_$effect(_$p => _$setProp(_el$36, "fg", theme().muted, _$p));
|
|
440
|
+
return _el$36;
|
|
288
441
|
}
|
|
289
|
-
}), _el$
|
|
290
|
-
_$insert(_el$
|
|
442
|
+
}), _el$60);
|
|
443
|
+
_$insert(_el$28, _$createComponent(Show, {
|
|
291
444
|
get when() {
|
|
292
445
|
return state().summary;
|
|
293
446
|
},
|
|
294
447
|
get children() {
|
|
295
|
-
var _el$
|
|
296
|
-
_el$
|
|
297
|
-
_el$
|
|
298
|
-
_el$
|
|
299
|
-
_el$
|
|
300
|
-
_el$
|
|
301
|
-
_el$32 = _$createElement("box"),
|
|
302
|
-
_el$33 = _$createElement("text"),
|
|
303
|
-
_el$34 = _$createElement("b"),
|
|
304
|
-
_el$36 = _$createElement("box"),
|
|
305
|
-
_el$37 = _$createElement("text"),
|
|
306
|
-
_el$38 = _$createElement("b"),
|
|
307
|
-
_el$40 = _$createElement("box"),
|
|
308
|
-
_el$41 = _$createElement("text"),
|
|
309
|
-
_el$42 = _$createElement("b"),
|
|
448
|
+
var _el$37 = _$createElement("scrollbox"),
|
|
449
|
+
_el$38 = _$createElement("box"),
|
|
450
|
+
_el$39 = _$createElement("box"),
|
|
451
|
+
_el$40 = _$createElement("text"),
|
|
452
|
+
_el$41 = _$createElement("b"),
|
|
453
|
+
_el$43 = _$createElement("box"),
|
|
310
454
|
_el$44 = _$createElement("box"),
|
|
311
455
|
_el$45 = _$createElement("text"),
|
|
312
|
-
_el$46 = _$createElement("b")
|
|
313
|
-
|
|
456
|
+
_el$46 = _$createElement("b"),
|
|
457
|
+
_el$48 = _$createElement("box"),
|
|
458
|
+
_el$49 = _$createElement("text"),
|
|
459
|
+
_el$50 = _$createElement("b"),
|
|
460
|
+
_el$52 = _$createElement("box"),
|
|
461
|
+
_el$53 = _$createElement("text"),
|
|
462
|
+
_el$54 = _$createElement("b"),
|
|
463
|
+
_el$56 = _$createElement("box"),
|
|
464
|
+
_el$57 = _$createElement("text"),
|
|
465
|
+
_el$58 = _$createElement("b");
|
|
466
|
+
_$insertNode(_el$37, _el$38);
|
|
314
467
|
_$use(value => {
|
|
315
468
|
scroll = value;
|
|
316
|
-
}, _el$
|
|
317
|
-
_$setProp(_el$
|
|
469
|
+
}, _el$37);
|
|
470
|
+
_$setProp(_el$37, "contentOptions", {
|
|
318
471
|
minHeight: 0
|
|
319
472
|
});
|
|
320
|
-
_$setProp(_el$
|
|
473
|
+
_$setProp(_el$37, "scrollbarOptions", {
|
|
321
474
|
visible: false
|
|
322
475
|
});
|
|
323
|
-
_$insertNode(_el$
|
|
324
|
-
_$insertNode(_el$
|
|
325
|
-
_$insertNode(_el$
|
|
326
|
-
_$insertNode(_el$
|
|
327
|
-
_$insertNode(_el$
|
|
328
|
-
_$setProp(_el$
|
|
329
|
-
_$insertNode(_el$
|
|
330
|
-
_$insertNode(_el$
|
|
331
|
-
_$insertNode(_el$
|
|
332
|
-
_$insert(_el$
|
|
476
|
+
_$insertNode(_el$38, _el$39);
|
|
477
|
+
_$insertNode(_el$38, _el$43);
|
|
478
|
+
_$insertNode(_el$38, _el$48);
|
|
479
|
+
_$insertNode(_el$38, _el$52);
|
|
480
|
+
_$insertNode(_el$38, _el$56);
|
|
481
|
+
_$setProp(_el$38, "gap", 1);
|
|
482
|
+
_$insertNode(_el$39, _el$40);
|
|
483
|
+
_$insertNode(_el$40, _el$41);
|
|
484
|
+
_$insertNode(_el$41, _$createTextNode(`Context Window`));
|
|
485
|
+
_$insert(_el$39, _$createComponent(Show, {
|
|
333
486
|
get when() {
|
|
334
487
|
return context();
|
|
335
488
|
},
|
|
336
489
|
get fallback() {
|
|
337
490
|
return (() => {
|
|
338
|
-
var _el$
|
|
339
|
-
_$insertNode(_el$
|
|
340
|
-
_$effect(_$p => _$setProp(_el$
|
|
341
|
-
return _el$
|
|
491
|
+
var _el$67 = _$createElement("text");
|
|
492
|
+
_$insertNode(_el$67, _$createTextNode(`Context usage unavailable`));
|
|
493
|
+
_$effect(_$p => _$setProp(_el$67, "fg", theme().muted, _$p));
|
|
494
|
+
return _el$67;
|
|
342
495
|
})();
|
|
343
496
|
},
|
|
344
497
|
children: details => (() => {
|
|
345
|
-
var _el$
|
|
346
|
-
_el$
|
|
347
|
-
_el$
|
|
348
|
-
_el$
|
|
349
|
-
_el$
|
|
350
|
-
_el$
|
|
351
|
-
_el$
|
|
352
|
-
_$insertNode(_el$
|
|
353
|
-
_$insertNode(_el$
|
|
354
|
-
_$insertNode(_el$
|
|
355
|
-
_$setProp(_el$
|
|
356
|
-
_$setProp(_el$
|
|
357
|
-
_$setProp(_el$
|
|
358
|
-
_$insertNode(_el$
|
|
359
|
-
_$setProp(_el$
|
|
360
|
-
_$insertNode(_el$
|
|
361
|
-
_$insertNode(_el$
|
|
362
|
-
_$insertNode(_el$
|
|
363
|
-
_$setProp(_el$
|
|
364
|
-
_$setProp(_el$
|
|
365
|
-
_$insert(_el$
|
|
366
|
-
_$insert(_el$
|
|
367
|
-
_$insert(_el$
|
|
368
|
-
_$insert(_el$
|
|
498
|
+
var _el$69 = _$createElement("box"),
|
|
499
|
+
_el$70 = _$createElement("box"),
|
|
500
|
+
_el$71 = _$createElement("text"),
|
|
501
|
+
_el$73 = _$createElement("text"),
|
|
502
|
+
_el$74 = _$createTextNode(` / `),
|
|
503
|
+
_el$75 = _$createTextNode(` (`),
|
|
504
|
+
_el$76 = _$createTextNode(`%)`);
|
|
505
|
+
_$insertNode(_el$69, _el$70);
|
|
506
|
+
_$insertNode(_el$70, _el$71);
|
|
507
|
+
_$insertNode(_el$70, _el$73);
|
|
508
|
+
_$setProp(_el$70, "flexDirection", "row");
|
|
509
|
+
_$setProp(_el$70, "justifyContent", "space-between");
|
|
510
|
+
_$setProp(_el$70, "gap", 2);
|
|
511
|
+
_$insertNode(_el$71, _$createTextNode(`Used / Limit`));
|
|
512
|
+
_$setProp(_el$71, "flexShrink", 0);
|
|
513
|
+
_$insertNode(_el$73, _el$74);
|
|
514
|
+
_$insertNode(_el$73, _el$75);
|
|
515
|
+
_$insertNode(_el$73, _el$76);
|
|
516
|
+
_$setProp(_el$73, "wrapMode", "word");
|
|
517
|
+
_$setProp(_el$73, "minWidth", 0);
|
|
518
|
+
_$insert(_el$73, () => number(details().usage.used), _el$74);
|
|
519
|
+
_$insert(_el$73, () => number(details().usage.limit), _el$75);
|
|
520
|
+
_$insert(_el$73, () => details().usage.percent.toFixed(1), _el$76);
|
|
521
|
+
_$insert(_el$69, () => barRow(details().usage.percent, windowBar()), null);
|
|
369
522
|
_$effect(_p$ => {
|
|
370
|
-
var _v$
|
|
371
|
-
_v$
|
|
372
|
-
_v$
|
|
373
|
-
_v$
|
|
523
|
+
var _v$21 = theme().muted,
|
|
524
|
+
_v$22 = theme().base;
|
|
525
|
+
_v$21 !== _p$.e && (_p$.e = _$setProp(_el$71, "fg", _v$21, _p$.e));
|
|
526
|
+
_v$22 !== _p$.t && (_p$.t = _$setProp(_el$73, "fg", _v$22, _p$.t));
|
|
374
527
|
return _p$;
|
|
375
528
|
}, {
|
|
376
529
|
e: undefined,
|
|
377
530
|
t: undefined
|
|
378
531
|
});
|
|
379
|
-
return _el$
|
|
532
|
+
return _el$69;
|
|
380
533
|
})()
|
|
381
534
|
}), null);
|
|
382
|
-
_$insertNode(_el$
|
|
383
|
-
_$insertNode(_el$
|
|
384
|
-
_$setProp(_el$
|
|
385
|
-
_$setProp(_el$
|
|
386
|
-
_$setProp(_el$
|
|
387
|
-
_$insertNode(_el$
|
|
388
|
-
_$insertNode(_el$
|
|
389
|
-
_$insert(_el$
|
|
535
|
+
_$insertNode(_el$43, _el$44);
|
|
536
|
+
_$insertNode(_el$44, _el$45);
|
|
537
|
+
_$setProp(_el$44, "flexDirection", "row");
|
|
538
|
+
_$setProp(_el$44, "justifyContent", "space-between");
|
|
539
|
+
_$setProp(_el$44, "gap", 2);
|
|
540
|
+
_$insertNode(_el$45, _el$46);
|
|
541
|
+
_$insertNode(_el$46, _$createTextNode(`Last Request`));
|
|
542
|
+
_$insert(_el$44, _$createComponent(Show, {
|
|
390
543
|
get when() {
|
|
391
544
|
return sources();
|
|
392
545
|
},
|
|
393
546
|
children: captured => (() => {
|
|
394
|
-
var _el$
|
|
395
|
-
_$insert(_el$
|
|
396
|
-
_$effect(_$p => _$setProp(_el$
|
|
397
|
-
return _el$
|
|
547
|
+
var _el$77 = _$createElement("text");
|
|
548
|
+
_$insert(_el$77, () => new Date(captured().capturedAt).toLocaleTimeString());
|
|
549
|
+
_$effect(_$p => _$setProp(_el$77, "fg", theme().muted, _$p));
|
|
550
|
+
return _el$77;
|
|
398
551
|
})()
|
|
399
552
|
}), null);
|
|
400
|
-
_$insert(_el$
|
|
553
|
+
_$insert(_el$43, _$createComponent(Show, {
|
|
401
554
|
get when() {
|
|
402
555
|
return context();
|
|
403
556
|
},
|
|
404
557
|
get fallback() {
|
|
405
558
|
return (() => {
|
|
406
|
-
var _el$
|
|
407
|
-
_$insertNode(_el$
|
|
408
|
-
_$effect(_$p => _$setProp(_el$
|
|
409
|
-
return _el$
|
|
559
|
+
var _el$78 = _$createElement("text");
|
|
560
|
+
_$insertNode(_el$78, _$createTextNode(`Request composition unavailable`));
|
|
561
|
+
_$effect(_$p => _$setProp(_el$78, "fg", theme().muted, _$p));
|
|
562
|
+
return _el$78;
|
|
410
563
|
})();
|
|
411
564
|
},
|
|
412
565
|
children: details => (() => {
|
|
413
|
-
var _el$
|
|
414
|
-
_$insert(_el$
|
|
415
|
-
return _el$
|
|
566
|
+
var _el$80 = _$createElement("box");
|
|
567
|
+
_$insert(_el$80, () => requestRowsList(requestRows(details(), compact())));
|
|
568
|
+
return _el$80;
|
|
416
569
|
})()
|
|
417
570
|
}), null);
|
|
418
|
-
_$insertNode(_el$
|
|
419
|
-
_$insertNode(_el$
|
|
420
|
-
_$insertNode(_el$
|
|
421
|
-
_$insert(_el$
|
|
571
|
+
_$insertNode(_el$48, _el$49);
|
|
572
|
+
_$insertNode(_el$49, _el$50);
|
|
573
|
+
_$insertNode(_el$50, _$createTextNode(`Context Breakdown`));
|
|
574
|
+
_$insert(_el$48, _$createComponent(Show, {
|
|
422
575
|
get when() {
|
|
423
576
|
return sources();
|
|
424
577
|
},
|
|
425
578
|
get fallback() {
|
|
426
579
|
return (() => {
|
|
427
|
-
var _el$
|
|
428
|
-
_$insertNode(_el$
|
|
429
|
-
_$effect(_$p => _$setProp(_el$
|
|
430
|
-
return _el$
|
|
580
|
+
var _el$81 = _$createElement("text");
|
|
581
|
+
_$insertNode(_el$81, _$createTextNode(`Source estimates unavailable (no request snapshot or RPC)`));
|
|
582
|
+
_$effect(_$p => _$setProp(_el$81, "fg", theme().muted, _$p));
|
|
583
|
+
return _el$81;
|
|
431
584
|
})();
|
|
432
585
|
},
|
|
433
586
|
children: captured => _$createComponent(For, {
|
|
@@ -435,39 +588,39 @@ function UsageDialog(props) {
|
|
|
435
588
|
return breakdownRows(captured(), detailed());
|
|
436
589
|
},
|
|
437
590
|
children: row => (() => {
|
|
438
|
-
var _el$
|
|
439
|
-
_el$
|
|
440
|
-
_el$
|
|
441
|
-
_el$
|
|
442
|
-
_el$
|
|
443
|
-
_el$
|
|
444
|
-
_el$
|
|
445
|
-
_$insertNode(_el$
|
|
446
|
-
_$insertNode(_el$
|
|
447
|
-
_$insertNode(_el$
|
|
448
|
-
_$insertNode(_el$
|
|
449
|
-
_$setProp(_el$
|
|
450
|
-
_$setProp(_el$
|
|
451
|
-
_$insertNode(_el$
|
|
452
|
-
_$setProp(_el$
|
|
453
|
-
_$setProp(_el$
|
|
454
|
-
_$insert(_el$
|
|
455
|
-
_$setProp(_el$
|
|
456
|
-
_$insert(_el$
|
|
457
|
-
_$setProp(_el$
|
|
458
|
-
_$insert(_el$
|
|
459
|
-
_$insertNode(_el$
|
|
460
|
-
_$setProp(_el$
|
|
461
|
-
_$insert(_el$
|
|
591
|
+
var _el$83 = _$createElement("box"),
|
|
592
|
+
_el$84 = _$createElement("box"),
|
|
593
|
+
_el$85 = _$createElement("text"),
|
|
594
|
+
_el$86 = _$createElement("box"),
|
|
595
|
+
_el$87 = _$createElement("text"),
|
|
596
|
+
_el$88 = _$createElement("text"),
|
|
597
|
+
_el$89 = _$createTextNode(`%`);
|
|
598
|
+
_$insertNode(_el$83, _el$84);
|
|
599
|
+
_$insertNode(_el$83, _el$86);
|
|
600
|
+
_$insertNode(_el$83, _el$87);
|
|
601
|
+
_$insertNode(_el$83, _el$88);
|
|
602
|
+
_$setProp(_el$83, "flexDirection", "row");
|
|
603
|
+
_$setProp(_el$83, "gap", 1);
|
|
604
|
+
_$insertNode(_el$84, _el$85);
|
|
605
|
+
_$setProp(_el$84, "width", 14);
|
|
606
|
+
_$setProp(_el$84, "flexShrink", 0);
|
|
607
|
+
_$insert(_el$85, () => row.label);
|
|
608
|
+
_$setProp(_el$86, "flexShrink", 0);
|
|
609
|
+
_$insert(_el$86, () => barRow(row.percent, breakdownBar()));
|
|
610
|
+
_$setProp(_el$87, "flexShrink", 0);
|
|
611
|
+
_$insert(_el$87, () => number(row.tokens));
|
|
612
|
+
_$insertNode(_el$88, _el$89);
|
|
613
|
+
_$setProp(_el$88, "flexShrink", 0);
|
|
614
|
+
_$insert(_el$88, () => row.percent.toFixed(1), _el$89);
|
|
462
615
|
_$effect(_p$ => {
|
|
463
|
-
var _v$
|
|
464
|
-
_v$
|
|
465
|
-
_v$
|
|
466
|
-
_v$
|
|
467
|
-
_v$
|
|
468
|
-
_v$
|
|
469
|
-
_v$
|
|
470
|
-
_v$
|
|
616
|
+
var _v$23 = theme().muted,
|
|
617
|
+
_v$24 = breakdownBar(),
|
|
618
|
+
_v$25 = theme().base,
|
|
619
|
+
_v$26 = theme().muted;
|
|
620
|
+
_v$23 !== _p$.e && (_p$.e = _$setProp(_el$85, "fg", _v$23, _p$.e));
|
|
621
|
+
_v$24 !== _p$.t && (_p$.t = _$setProp(_el$86, "width", _v$24, _p$.t));
|
|
622
|
+
_v$25 !== _p$.a && (_p$.a = _$setProp(_el$87, "fg", _v$25, _p$.a));
|
|
623
|
+
_v$26 !== _p$.o && (_p$.o = _$setProp(_el$88, "fg", _v$26, _p$.o));
|
|
471
624
|
return _p$;
|
|
472
625
|
}, {
|
|
473
626
|
e: undefined,
|
|
@@ -475,23 +628,23 @@ function UsageDialog(props) {
|
|
|
475
628
|
a: undefined,
|
|
476
629
|
o: undefined
|
|
477
630
|
});
|
|
478
|
-
return _el$
|
|
631
|
+
return _el$83;
|
|
479
632
|
})()
|
|
480
633
|
})
|
|
481
634
|
}), null);
|
|
482
|
-
_$insertNode(_el$
|
|
483
|
-
_$insertNode(_el$
|
|
484
|
-
_$insertNode(_el$
|
|
485
|
-
_$insert(_el$
|
|
635
|
+
_$insertNode(_el$52, _el$53);
|
|
636
|
+
_$insertNode(_el$53, _el$54);
|
|
637
|
+
_$insertNode(_el$54, _$createTextNode(`Session`));
|
|
638
|
+
_$insert(_el$52, _$createComponent(Show, {
|
|
486
639
|
get when() {
|
|
487
640
|
return state().summary;
|
|
488
641
|
},
|
|
489
642
|
get fallback() {
|
|
490
643
|
return (() => {
|
|
491
|
-
var _el$
|
|
492
|
-
_$insertNode(_el$
|
|
493
|
-
_$effect(_$p => _$setProp(_el$
|
|
494
|
-
return _el$
|
|
644
|
+
var _el$90 = _$createElement("text");
|
|
645
|
+
_$insertNode(_el$90, _$createTextNode(`Session usage unavailable`));
|
|
646
|
+
_$effect(_$p => _$setProp(_el$90, "fg", theme().muted, _$p));
|
|
647
|
+
return _el$90;
|
|
495
648
|
})();
|
|
496
649
|
},
|
|
497
650
|
children: summary => _$createComponent(Show, {
|
|
@@ -500,26 +653,26 @@ function UsageDialog(props) {
|
|
|
500
653
|
},
|
|
501
654
|
get fallback() {
|
|
502
655
|
return (() => {
|
|
503
|
-
var _el$
|
|
504
|
-
_el$
|
|
505
|
-
_el$
|
|
506
|
-
_el$
|
|
507
|
-
_el$
|
|
508
|
-
_$insertNode(_el$
|
|
509
|
-
_$insertNode(_el$
|
|
510
|
-
_$insertNode(_el$
|
|
511
|
-
_$insertNode(_el$
|
|
512
|
-
_$setProp(_el$
|
|
513
|
-
_$insert(_el$
|
|
514
|
-
_$insert(_el$
|
|
515
|
-
_$insert(_el$
|
|
516
|
-
_$insert(_el$
|
|
517
|
-
_$insert(_el$
|
|
656
|
+
var _el$92 = _$createElement("text"),
|
|
657
|
+
_el$93 = _$createTextNode(` · `),
|
|
658
|
+
_el$94 = _$createTextNode(` · `),
|
|
659
|
+
_el$95 = _$createTextNode(` tokens · `),
|
|
660
|
+
_el$96 = _$createTextNode(`% cached`);
|
|
661
|
+
_$insertNode(_el$92, _el$93);
|
|
662
|
+
_$insertNode(_el$92, _el$94);
|
|
663
|
+
_$insertNode(_el$92, _el$95);
|
|
664
|
+
_$insertNode(_el$92, _el$96);
|
|
665
|
+
_$setProp(_el$92, "wrapMode", "word");
|
|
666
|
+
_$insert(_el$92, () => countLabel(summary().steps, "step"), _el$93);
|
|
667
|
+
_$insert(_el$92, () => countLabel(summary().calls, "call"), _el$94);
|
|
668
|
+
_$insert(_el$92, () => formatCompact(summary().total), _el$95);
|
|
669
|
+
_$insert(_el$92, () => (summary().cacheRate * 100).toFixed(1), _el$96);
|
|
670
|
+
_$insert(_el$92, (() => {
|
|
518
671
|
var _c$ = _$memo(() => !!formatEstimatedCost(summary().cost, summary().costStatus));
|
|
519
672
|
return () => _c$() ? ` · ${formatEstimatedCost(summary().cost, summary().costStatus)}` : "";
|
|
520
673
|
})(), null);
|
|
521
|
-
_$effect(_$p => _$setProp(_el$
|
|
522
|
-
return _el$
|
|
674
|
+
_$effect(_$p => _$setProp(_el$92, "fg", theme().base, _$p));
|
|
675
|
+
return _el$92;
|
|
523
676
|
})();
|
|
524
677
|
},
|
|
525
678
|
get children() {
|
|
@@ -528,46 +681,46 @@ function UsageDialog(props) {
|
|
|
528
681
|
return summaryRows(summary());
|
|
529
682
|
},
|
|
530
683
|
children: ([label, value]) => (() => {
|
|
531
|
-
var _el$
|
|
532
|
-
_el$
|
|
533
|
-
_el$
|
|
534
|
-
_$insertNode(_el$
|
|
535
|
-
_$insertNode(_el$
|
|
536
|
-
_$setProp(_el$
|
|
537
|
-
_$setProp(_el$
|
|
538
|
-
_$setProp(_el$
|
|
539
|
-
_$setProp(_el$
|
|
540
|
-
_$insert(_el$
|
|
541
|
-
_$insert(_el$
|
|
684
|
+
var _el$97 = _$createElement("box"),
|
|
685
|
+
_el$98 = _$createElement("text"),
|
|
686
|
+
_el$99 = _$createElement("text");
|
|
687
|
+
_$insertNode(_el$97, _el$98);
|
|
688
|
+
_$insertNode(_el$97, _el$99);
|
|
689
|
+
_$setProp(_el$97, "flexDirection", "row");
|
|
690
|
+
_$setProp(_el$97, "justifyContent", "space-between");
|
|
691
|
+
_$setProp(_el$97, "gap", 2);
|
|
692
|
+
_$setProp(_el$98, "flexShrink", 0);
|
|
693
|
+
_$insert(_el$98, label);
|
|
694
|
+
_$insert(_el$99, value);
|
|
542
695
|
_$effect(_p$ => {
|
|
543
|
-
var _v$
|
|
544
|
-
_v$
|
|
545
|
-
_v$
|
|
546
|
-
_v$
|
|
696
|
+
var _v$27 = theme().muted,
|
|
697
|
+
_v$28 = theme().base;
|
|
698
|
+
_v$27 !== _p$.e && (_p$.e = _$setProp(_el$98, "fg", _v$27, _p$.e));
|
|
699
|
+
_v$28 !== _p$.t && (_p$.t = _$setProp(_el$99, "fg", _v$28, _p$.t));
|
|
547
700
|
return _p$;
|
|
548
701
|
}, {
|
|
549
702
|
e: undefined,
|
|
550
703
|
t: undefined
|
|
551
704
|
});
|
|
552
|
-
return _el$
|
|
705
|
+
return _el$97;
|
|
553
706
|
})()
|
|
554
707
|
});
|
|
555
708
|
}
|
|
556
709
|
})
|
|
557
710
|
}), null);
|
|
558
|
-
_$insertNode(_el$
|
|
559
|
-
_$insertNode(_el$
|
|
560
|
-
_$insertNode(_el$
|
|
561
|
-
_$insert(_el$
|
|
711
|
+
_$insertNode(_el$56, _el$57);
|
|
712
|
+
_$insertNode(_el$57, _el$58);
|
|
713
|
+
_$insertNode(_el$58, _$createTextNode(`By Model`));
|
|
714
|
+
_$insert(_el$56, _$createComponent(Show, {
|
|
562
715
|
get when() {
|
|
563
716
|
return models().length;
|
|
564
717
|
},
|
|
565
718
|
get fallback() {
|
|
566
719
|
return (() => {
|
|
567
|
-
var _el$
|
|
568
|
-
_$insertNode(_el$
|
|
569
|
-
_$effect(_$p => _$setProp(_el$
|
|
570
|
-
return _el$
|
|
720
|
+
var _el$100 = _$createElement("text");
|
|
721
|
+
_$insertNode(_el$100, _$createTextNode(`No model usage yet`));
|
|
722
|
+
_$effect(_$p => _$setProp(_el$100, "fg", theme().muted, _$p));
|
|
723
|
+
return _el$100;
|
|
571
724
|
})();
|
|
572
725
|
},
|
|
573
726
|
get children() {
|
|
@@ -576,59 +729,59 @@ function UsageDialog(props) {
|
|
|
576
729
|
return models();
|
|
577
730
|
},
|
|
578
731
|
children: model => (() => {
|
|
579
|
-
var _el$
|
|
580
|
-
_el$
|
|
581
|
-
_el$
|
|
582
|
-
_el$
|
|
583
|
-
_el$
|
|
584
|
-
_el$
|
|
585
|
-
_$insertNode(_el$
|
|
586
|
-
_$insertNode(_el$
|
|
587
|
-
_$insertNode(_el$
|
|
588
|
-
_$insertNode(_el$
|
|
589
|
-
_$setProp(_el$
|
|
590
|
-
_$setProp(_el$
|
|
591
|
-
_$setProp(_el$
|
|
592
|
-
_$setProp(_el$
|
|
593
|
-
_$setProp(_el$
|
|
594
|
-
_$setProp(_el$
|
|
595
|
-
_$insert(_el$
|
|
596
|
-
_$setProp(_el$
|
|
597
|
-
_$insert(_el$
|
|
598
|
-
_$insertNode(_el$
|
|
599
|
-
_$insert(_el$
|
|
600
|
-
_$insert(_el$
|
|
732
|
+
var _el$102 = _$createElement("box"),
|
|
733
|
+
_el$103 = _$createElement("box"),
|
|
734
|
+
_el$104 = _$createElement("text"),
|
|
735
|
+
_el$105 = _$createElement("text"),
|
|
736
|
+
_el$106 = _$createElement("text"),
|
|
737
|
+
_el$107 = _$createTextNode(` tokens · `);
|
|
738
|
+
_$insertNode(_el$102, _el$103);
|
|
739
|
+
_$insertNode(_el$102, _el$106);
|
|
740
|
+
_$insertNode(_el$103, _el$104);
|
|
741
|
+
_$insertNode(_el$103, _el$105);
|
|
742
|
+
_$setProp(_el$103, "flexDirection", "row");
|
|
743
|
+
_$setProp(_el$103, "justifyContent", "space-between");
|
|
744
|
+
_$setProp(_el$103, "gap", 2);
|
|
745
|
+
_$setProp(_el$104, "wrapMode", "word");
|
|
746
|
+
_$setProp(_el$104, "minWidth", 0);
|
|
747
|
+
_$setProp(_el$104, "flexGrow", 1);
|
|
748
|
+
_$insert(_el$104, () => model.model);
|
|
749
|
+
_$setProp(_el$105, "flexShrink", 0);
|
|
750
|
+
_$insert(_el$105, () => formatEstimatedCost(model.cost, model.costStatus) ?? "");
|
|
751
|
+
_$insertNode(_el$106, _el$107);
|
|
752
|
+
_$insert(_el$106, () => number(model.tokens), _el$107);
|
|
753
|
+
_$insert(_el$106, () => countLabel(model.calls, "call"), null);
|
|
601
754
|
_$effect(_p$ => {
|
|
602
|
-
var _v$
|
|
603
|
-
_v$
|
|
604
|
-
_v$
|
|
605
|
-
_v$
|
|
606
|
-
_v$
|
|
607
|
-
_v$
|
|
755
|
+
var _v$29 = theme().base,
|
|
756
|
+
_v$30 = theme().base,
|
|
757
|
+
_v$31 = theme().muted;
|
|
758
|
+
_v$29 !== _p$.e && (_p$.e = _$setProp(_el$104, "fg", _v$29, _p$.e));
|
|
759
|
+
_v$30 !== _p$.t && (_p$.t = _$setProp(_el$105, "fg", _v$30, _p$.t));
|
|
760
|
+
_v$31 !== _p$.a && (_p$.a = _$setProp(_el$106, "fg", _v$31, _p$.a));
|
|
608
761
|
return _p$;
|
|
609
762
|
}, {
|
|
610
763
|
e: undefined,
|
|
611
764
|
t: undefined,
|
|
612
765
|
a: undefined
|
|
613
766
|
});
|
|
614
|
-
return _el$
|
|
767
|
+
return _el$102;
|
|
615
768
|
})()
|
|
616
769
|
});
|
|
617
770
|
}
|
|
618
771
|
}), null);
|
|
619
772
|
_$effect(_p$ => {
|
|
620
|
-
var _v$
|
|
621
|
-
_v$
|
|
622
|
-
_v$
|
|
623
|
-
_v$
|
|
624
|
-
_v$
|
|
625
|
-
_v$
|
|
626
|
-
_v$
|
|
627
|
-
_v$
|
|
628
|
-
_v$
|
|
629
|
-
_v$
|
|
630
|
-
_v$
|
|
631
|
-
_v$
|
|
773
|
+
var _v$10 = Math.max(3, dimensions().height - Math.floor(dimensions().height / 4) - 8),
|
|
774
|
+
_v$11 = theme().base,
|
|
775
|
+
_v$12 = theme().base,
|
|
776
|
+
_v$13 = theme().base,
|
|
777
|
+
_v$14 = theme().base,
|
|
778
|
+
_v$15 = theme().base;
|
|
779
|
+
_v$10 !== _p$.e && (_p$.e = _$setProp(_el$37, "maxHeight", _v$10, _p$.e));
|
|
780
|
+
_v$11 !== _p$.t && (_p$.t = _$setProp(_el$40, "fg", _v$11, _p$.t));
|
|
781
|
+
_v$12 !== _p$.a && (_p$.a = _$setProp(_el$45, "fg", _v$12, _p$.a));
|
|
782
|
+
_v$13 !== _p$.o && (_p$.o = _$setProp(_el$49, "fg", _v$13, _p$.o));
|
|
783
|
+
_v$14 !== _p$.i && (_p$.i = _$setProp(_el$53, "fg", _v$14, _p$.i));
|
|
784
|
+
_v$15 !== _p$.n && (_p$.n = _$setProp(_el$57, "fg", _v$15, _p$.n));
|
|
632
785
|
return _p$;
|
|
633
786
|
}, {
|
|
634
787
|
e: undefined,
|
|
@@ -638,24 +791,39 @@ function UsageDialog(props) {
|
|
|
638
791
|
i: undefined,
|
|
639
792
|
n: undefined
|
|
640
793
|
});
|
|
641
|
-
return _el$
|
|
794
|
+
return _el$37;
|
|
642
795
|
}
|
|
643
|
-
}), _el$
|
|
644
|
-
_$insertNode(_el$
|
|
796
|
+
}), _el$60);
|
|
797
|
+
_$insertNode(_el$60, _el$61);
|
|
798
|
+
_$insertNode(_el$60, _el$63);
|
|
799
|
+
_$insertNode(_el$60, _el$65);
|
|
800
|
+
_$setProp(_el$60, "flexDirection", "row");
|
|
801
|
+
_$insertNode(_el$61, _$createTextNode(`↑/↓ scroll · `));
|
|
802
|
+
_$insertNode(_el$63, _$createTextNode(`d details`));
|
|
803
|
+
_$setProp(_el$63, "onMouseUp", event => {
|
|
804
|
+
if (event.button === 0) toggleDetails();
|
|
805
|
+
});
|
|
806
|
+
_$insertNode(_el$65, _$createTextNode(` · esc close`));
|
|
645
807
|
_$effect(_p$ => {
|
|
646
|
-
var _v$
|
|
647
|
-
_v$
|
|
648
|
-
_v$
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
_v$
|
|
808
|
+
var _v$16 = theme().base,
|
|
809
|
+
_v$17 = theme().muted,
|
|
810
|
+
_v$18 = theme().muted,
|
|
811
|
+
_v$19 = theme().muted,
|
|
812
|
+
_v$20 = theme().muted;
|
|
813
|
+
_v$16 !== _p$.e && (_p$.e = _$setProp(_el$30, "fg", _v$16, _p$.e));
|
|
814
|
+
_v$17 !== _p$.t && (_p$.t = _$setProp(_el$33, "fg", _v$17, _p$.t));
|
|
815
|
+
_v$18 !== _p$.a && (_p$.a = _$setProp(_el$61, "fg", _v$18, _p$.a));
|
|
816
|
+
_v$19 !== _p$.o && (_p$.o = _$setProp(_el$63, "fg", _v$19, _p$.o));
|
|
817
|
+
_v$20 !== _p$.i && (_p$.i = _$setProp(_el$65, "fg", _v$20, _p$.i));
|
|
652
818
|
return _p$;
|
|
653
819
|
}, {
|
|
654
820
|
e: undefined,
|
|
655
821
|
t: undefined,
|
|
656
|
-
a: undefined
|
|
822
|
+
a: undefined,
|
|
823
|
+
o: undefined,
|
|
824
|
+
i: undefined
|
|
657
825
|
});
|
|
658
|
-
return _el$
|
|
826
|
+
return _el$28;
|
|
659
827
|
})();
|
|
660
828
|
}
|
|
661
829
|
export default Plugin.define({
|
|
@@ -682,8 +850,17 @@ export default Plugin.define({
|
|
|
682
850
|
register: register
|
|
683
851
|
})
|
|
684
852
|
});
|
|
685
|
-
|
|
686
|
-
|
|
853
|
+
const openChildUsage = (sessionID, state) => {
|
|
854
|
+
context.ui.dialog.show(() => _$createComponent(ChildUsageDialog, {
|
|
855
|
+
context: context,
|
|
856
|
+
state: state
|
|
857
|
+
}));
|
|
858
|
+
context.ui.dialog.set({
|
|
859
|
+
size: "medium",
|
|
860
|
+
centered: true
|
|
861
|
+
});
|
|
862
|
+
};
|
|
863
|
+
// Child sessions do not mount the sidebar; keep one live summary above the composer.
|
|
687
864
|
const removeChild = context.ui.slot({
|
|
688
865
|
append: "session.composer.top",
|
|
689
866
|
render: props => _$createComponent(Show, {
|
|
@@ -691,25 +868,15 @@ export default Plugin.define({
|
|
|
691
868
|
return context.data.session.get(props.sessionID)?.parentID;
|
|
692
869
|
},
|
|
693
870
|
get children() {
|
|
694
|
-
|
|
695
|
-
_el$92 = _$createElement("box");
|
|
696
|
-
_$insertNode(_el$91, _el$92);
|
|
697
|
-
_$setProp(_el$91, "flexDirection", "row");
|
|
698
|
-
_$setProp(_el$91, "justifyContent", "flex-end");
|
|
699
|
-
_$setProp(_el$91, "paddingRight", 2);
|
|
700
|
-
_$setProp(_el$91, "flexShrink", 0);
|
|
701
|
-
_$setProp(_el$92, "width", 36);
|
|
702
|
-
_$setProp(_el$92, "maxWidth", "100%");
|
|
703
|
-
_$setProp(_el$92, "flexDirection", "column");
|
|
704
|
-
_$insert(_el$92, _$createComponent(UsagePanel, {
|
|
871
|
+
return _$createComponent(ChildUsageLauncher, {
|
|
705
872
|
context: context,
|
|
706
873
|
get sessionID() {
|
|
707
874
|
return props.sessionID;
|
|
708
875
|
},
|
|
709
876
|
performance: performance,
|
|
710
|
-
register: register
|
|
711
|
-
|
|
712
|
-
|
|
877
|
+
register: register,
|
|
878
|
+
open: openChildUsage
|
|
879
|
+
});
|
|
713
880
|
}
|
|
714
881
|
})
|
|
715
882
|
});
|