@chenlongapps/opencode-token-usage 0.4.6 → 0.4.8
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 +15 -9
- package/README.zh-CN.md +15 -9
- package/ROADMAP.md +9 -1
- package/dist/context-capture.d.ts +5 -3
- package/dist/context-capture.js +31 -14
- package/dist/controller.d.ts +4 -2
- package/dist/controller.js +15 -7
- package/dist/performance.js +5 -3
- package/dist/runtime.d.ts +15 -0
- package/dist/runtime.js +72 -0
- package/dist/tui.js +279 -237
- package/dist/usage.d.ts +16 -5
- package/dist/usage.js +63 -10
- package/docs/verification.md +97 -0
- package/package.json +1 -1
package/dist/tui.js
CHANGED
|
@@ -14,10 +14,10 @@ import { UsageController } from "./controller.js";
|
|
|
14
14
|
import { PerformanceMonitor } from "./performance.js";
|
|
15
15
|
import { breakdownRows } from "./context-sources.js";
|
|
16
16
|
import { createSource } from "./source.js";
|
|
17
|
-
import { bar, countLabel, formatCompact, formatEstimatedCost, formatRateTier, formatTokens, rateRows, requestRows, summaryRows, usageRows } from "./usage.js";
|
|
17
|
+
import { bar, countLabel, fitUsageSummary, formatCompact, formatEstimatedCost, formatRateTier, formatRunTime, formatTokens, rateRows, requestRows, summaryRows, usageRows } from "./usage.js";
|
|
18
18
|
function UsageView(props) {
|
|
19
|
-
const rows = createMemo(() => usageRows(props.state().summary, props.state().context, props.state().performance));
|
|
20
|
-
const performanceStart = createMemo(() => rows().findIndex(([label]) => label === "TPS" || label === "TTFT"));
|
|
19
|
+
const rows = createMemo(() => usageRows(props.state().summary, props.state().context, props.state().performance, props.state().runtime));
|
|
20
|
+
const performanceStart = createMemo(() => rows().findIndex(([label]) => label === "Run Time" || label === "TPS" || label === "TTFT"));
|
|
21
21
|
const status = () => ({
|
|
22
22
|
loading: "Loading…",
|
|
23
23
|
ready: "",
|
|
@@ -207,6 +207,7 @@ function ChildUsageLauncher(props) {
|
|
|
207
207
|
controller.dispose();
|
|
208
208
|
unregister();
|
|
209
209
|
});
|
|
210
|
+
const dimensions = useTerminalDimensions();
|
|
210
211
|
const summary = createMemo(() => {
|
|
211
212
|
const current = state();
|
|
212
213
|
if (!current.summary) return `Token Usage · ${{
|
|
@@ -218,8 +219,7 @@ function ChildUsageLauncher(props) {
|
|
|
218
219
|
const context = current.context ? `${formatTokens(current.context.used)} / ${formatTokens(current.context.limit)} (${current.context.percent.toFixed(1)}%)` : "—";
|
|
219
220
|
const cost = formatEstimatedCost(current.summary.cost, current.summary.costStatus) ?? "—";
|
|
220
221
|
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
|
-
|
|
222
|
-
return `Token Usage · Context ${context} · Total ${formatTokens(current.summary.total)} · Cost ${cost} · TPS ${tps}${stale}`;
|
|
222
|
+
return fitUsageSummary([["Context", context], ["Total", formatTokens(current.summary.total)], ["Cost", cost], ["Time", formatRunTime(current.runtime, true)], ["TPS", tps]], Math.max(20, dimensions().width - 8), current.status === "stale");
|
|
223
223
|
});
|
|
224
224
|
return (() => {
|
|
225
225
|
var _el$17 = _$createElement("box"),
|
|
@@ -297,7 +297,12 @@ function UsageDialog(props) {
|
|
|
297
297
|
}]
|
|
298
298
|
}));
|
|
299
299
|
const theme = () => props.context.theme.text;
|
|
300
|
-
const context = createMemo(() => state().
|
|
300
|
+
const context = createMemo(() => state().context);
|
|
301
|
+
const request = createMemo(() => state().details?.request);
|
|
302
|
+
const requestTime = createMemo(() => {
|
|
303
|
+
const time = request()?.time;
|
|
304
|
+
return time === undefined ? undefined : new Date(time).toLocaleTimeString();
|
|
305
|
+
});
|
|
301
306
|
const models = createMemo(() => state().details?.models ?? []);
|
|
302
307
|
const sources = createMemo(() => state().details?.sources);
|
|
303
308
|
// The host gives this dialog a fixed width; keep every row inside that content box.
|
|
@@ -400,12 +405,12 @@ function UsageDialog(props) {
|
|
|
400
405
|
_el$30 = _$createElement("text"),
|
|
401
406
|
_el$31 = _$createElement("b"),
|
|
402
407
|
_el$33 = _$createElement("text"),
|
|
403
|
-
_el$
|
|
404
|
-
_el$
|
|
405
|
-
_el$
|
|
406
|
-
_el$
|
|
408
|
+
_el$67 = _$createElement("box"),
|
|
409
|
+
_el$68 = _$createElement("text"),
|
|
410
|
+
_el$70 = _$createElement("text"),
|
|
411
|
+
_el$72 = _$createElement("text");
|
|
407
412
|
_$insertNode(_el$28, _el$29);
|
|
408
|
-
_$insertNode(_el$28, _el$
|
|
413
|
+
_$insertNode(_el$28, _el$67);
|
|
409
414
|
_$setProp(_el$28, "paddingLeft", 2);
|
|
410
415
|
_$setProp(_el$28, "paddingRight", 2);
|
|
411
416
|
_$setProp(_el$28, "paddingBottom", 1);
|
|
@@ -430,7 +435,7 @@ function UsageDialog(props) {
|
|
|
430
435
|
_$effect(_$p => _$setProp(_el$35, "fg", theme().muted, _$p));
|
|
431
436
|
return _el$35;
|
|
432
437
|
}
|
|
433
|
-
}), _el$
|
|
438
|
+
}), _el$67);
|
|
434
439
|
_$insert(_el$28, _$createComponent(Show, {
|
|
435
440
|
get when() {
|
|
436
441
|
return state().status !== "ready";
|
|
@@ -441,7 +446,7 @@ function UsageDialog(props) {
|
|
|
441
446
|
_$effect(_$p => _$setProp(_el$36, "fg", theme().muted, _$p));
|
|
442
447
|
return _el$36;
|
|
443
448
|
}
|
|
444
|
-
}), _el$
|
|
449
|
+
}), _el$67);
|
|
445
450
|
_$insert(_el$28, _$createComponent(Show, {
|
|
446
451
|
get when() {
|
|
447
452
|
return state().summary;
|
|
@@ -457,14 +462,18 @@ function UsageDialog(props) {
|
|
|
457
462
|
_el$45 = _$createElement("text"),
|
|
458
463
|
_el$46 = _$createElement("b"),
|
|
459
464
|
_el$48 = _$createElement("box"),
|
|
460
|
-
_el$49 = _$createElement("
|
|
461
|
-
_el$50 = _$createElement("
|
|
462
|
-
_el$
|
|
463
|
-
_el$53 = _$createElement("
|
|
464
|
-
_el$54 = _$createElement("
|
|
465
|
-
_el$
|
|
466
|
-
_el$57 = _$createElement("
|
|
467
|
-
_el$58 = _$createElement("
|
|
465
|
+
_el$49 = _$createElement("box"),
|
|
466
|
+
_el$50 = _$createElement("text"),
|
|
467
|
+
_el$51 = _$createElement("b"),
|
|
468
|
+
_el$53 = _$createElement("box"),
|
|
469
|
+
_el$54 = _$createElement("text"),
|
|
470
|
+
_el$55 = _$createElement("b"),
|
|
471
|
+
_el$57 = _$createElement("box"),
|
|
472
|
+
_el$58 = _$createElement("text"),
|
|
473
|
+
_el$60 = _$createElement("text"),
|
|
474
|
+
_el$61 = _$createElement("box"),
|
|
475
|
+
_el$62 = _$createElement("text"),
|
|
476
|
+
_el$63 = _$createElement("b");
|
|
468
477
|
_$insertNode(_el$37, _el$38);
|
|
469
478
|
_$use(value => {
|
|
470
479
|
scroll = value;
|
|
@@ -478,8 +487,8 @@ function UsageDialog(props) {
|
|
|
478
487
|
_$insertNode(_el$38, _el$39);
|
|
479
488
|
_$insertNode(_el$38, _el$43);
|
|
480
489
|
_$insertNode(_el$38, _el$48);
|
|
481
|
-
_$insertNode(_el$38, _el$
|
|
482
|
-
_$insertNode(_el$38, _el$
|
|
490
|
+
_$insertNode(_el$38, _el$53);
|
|
491
|
+
_$insertNode(_el$38, _el$61);
|
|
483
492
|
_$setProp(_el$38, "gap", 1);
|
|
484
493
|
_$insertNode(_el$39, _el$40);
|
|
485
494
|
_$insertNode(_el$40, _el$41);
|
|
@@ -490,48 +499,48 @@ function UsageDialog(props) {
|
|
|
490
499
|
},
|
|
491
500
|
get fallback() {
|
|
492
501
|
return (() => {
|
|
493
|
-
var _el$
|
|
494
|
-
_$insertNode(_el$
|
|
495
|
-
_$effect(_$p => _$setProp(_el$
|
|
496
|
-
return _el$
|
|
502
|
+
var _el$74 = _$createElement("text");
|
|
503
|
+
_$insertNode(_el$74, _$createTextNode(`Context usage unavailable`));
|
|
504
|
+
_$effect(_$p => _$setProp(_el$74, "fg", theme().muted, _$p));
|
|
505
|
+
return _el$74;
|
|
497
506
|
})();
|
|
498
507
|
},
|
|
499
508
|
children: details => (() => {
|
|
500
|
-
var _el$
|
|
501
|
-
_el$
|
|
502
|
-
_el$
|
|
503
|
-
_el$
|
|
504
|
-
_el$
|
|
505
|
-
_el$
|
|
506
|
-
_el$
|
|
507
|
-
_$insertNode(_el$
|
|
508
|
-
_$insertNode(_el$
|
|
509
|
-
_$insertNode(_el$
|
|
510
|
-
_$setProp(_el$
|
|
511
|
-
_$setProp(_el$
|
|
512
|
-
_$setProp(_el$
|
|
513
|
-
_$insertNode(_el$
|
|
514
|
-
_$setProp(_el$
|
|
515
|
-
_$insertNode(_el$
|
|
516
|
-
_$insertNode(_el$
|
|
517
|
-
_$insertNode(_el$
|
|
518
|
-
_$setProp(_el$
|
|
519
|
-
_$setProp(_el$
|
|
520
|
-
_$insert(_el$
|
|
521
|
-
_$insert(_el$
|
|
522
|
-
_$insert(_el$
|
|
523
|
-
_$insert(_el$
|
|
509
|
+
var _el$76 = _$createElement("box"),
|
|
510
|
+
_el$77 = _$createElement("box"),
|
|
511
|
+
_el$78 = _$createElement("text"),
|
|
512
|
+
_el$80 = _$createElement("text"),
|
|
513
|
+
_el$81 = _$createTextNode(` / `),
|
|
514
|
+
_el$82 = _$createTextNode(` (`),
|
|
515
|
+
_el$83 = _$createTextNode(`%)`);
|
|
516
|
+
_$insertNode(_el$76, _el$77);
|
|
517
|
+
_$insertNode(_el$77, _el$78);
|
|
518
|
+
_$insertNode(_el$77, _el$80);
|
|
519
|
+
_$setProp(_el$77, "flexDirection", "row");
|
|
520
|
+
_$setProp(_el$77, "justifyContent", "space-between");
|
|
521
|
+
_$setProp(_el$77, "gap", 2);
|
|
522
|
+
_$insertNode(_el$78, _$createTextNode(`Used / Limit`));
|
|
523
|
+
_$setProp(_el$78, "flexShrink", 0);
|
|
524
|
+
_$insertNode(_el$80, _el$81);
|
|
525
|
+
_$insertNode(_el$80, _el$82);
|
|
526
|
+
_$insertNode(_el$80, _el$83);
|
|
527
|
+
_$setProp(_el$80, "wrapMode", "word");
|
|
528
|
+
_$setProp(_el$80, "minWidth", 0);
|
|
529
|
+
_$insert(_el$80, () => number(details().used), _el$81);
|
|
530
|
+
_$insert(_el$80, () => number(details().limit), _el$82);
|
|
531
|
+
_$insert(_el$80, () => details().percent.toFixed(1), _el$83);
|
|
532
|
+
_$insert(_el$76, () => barRow(details().percent, windowBar()), null);
|
|
524
533
|
_$effect(_p$ => {
|
|
525
|
-
var _v$
|
|
526
|
-
_v$
|
|
527
|
-
_v$
|
|
528
|
-
_v$
|
|
534
|
+
var _v$23 = theme().muted,
|
|
535
|
+
_v$24 = theme().base;
|
|
536
|
+
_v$23 !== _p$.e && (_p$.e = _$setProp(_el$78, "fg", _v$23, _p$.e));
|
|
537
|
+
_v$24 !== _p$.t && (_p$.t = _$setProp(_el$80, "fg", _v$24, _p$.t));
|
|
529
538
|
return _p$;
|
|
530
539
|
}, {
|
|
531
540
|
e: undefined,
|
|
532
541
|
t: undefined
|
|
533
542
|
});
|
|
534
|
-
return _el$
|
|
543
|
+
return _el$76;
|
|
535
544
|
})()
|
|
536
545
|
}), null);
|
|
537
546
|
_$insertNode(_el$43, _el$44);
|
|
@@ -543,46 +552,61 @@ function UsageDialog(props) {
|
|
|
543
552
|
_$insertNode(_el$46, _$createTextNode(`Last Request`));
|
|
544
553
|
_$insert(_el$44, _$createComponent(Show, {
|
|
545
554
|
get when() {
|
|
546
|
-
return
|
|
555
|
+
return requestTime();
|
|
547
556
|
},
|
|
548
|
-
children:
|
|
549
|
-
var _el$
|
|
550
|
-
_$insert(_el$
|
|
551
|
-
_$effect(_$p => _$setProp(_el$
|
|
552
|
-
return _el$
|
|
557
|
+
children: time => (() => {
|
|
558
|
+
var _el$84 = _$createElement("text");
|
|
559
|
+
_$insert(_el$84, time);
|
|
560
|
+
_$effect(_$p => _$setProp(_el$84, "fg", theme().muted, _$p));
|
|
561
|
+
return _el$84;
|
|
553
562
|
})()
|
|
554
563
|
}), null);
|
|
555
564
|
_$insert(_el$43, _$createComponent(Show, {
|
|
556
565
|
get when() {
|
|
557
|
-
return
|
|
566
|
+
return request();
|
|
558
567
|
},
|
|
559
568
|
get fallback() {
|
|
560
569
|
return (() => {
|
|
561
|
-
var _el$
|
|
562
|
-
_$insertNode(_el$
|
|
563
|
-
_$effect(_$p => _$setProp(_el$
|
|
564
|
-
return _el$
|
|
570
|
+
var _el$85 = _$createElement("text");
|
|
571
|
+
_$insertNode(_el$85, _$createTextNode(`Request usage unavailable`));
|
|
572
|
+
_$effect(_$p => _$setProp(_el$85, "fg", theme().muted, _$p));
|
|
573
|
+
return _el$85;
|
|
565
574
|
})();
|
|
566
575
|
},
|
|
567
576
|
children: details => (() => {
|
|
568
|
-
var _el$
|
|
569
|
-
_$insert(_el$
|
|
570
|
-
return _el$
|
|
577
|
+
var _el$87 = _$createElement("box");
|
|
578
|
+
_$insert(_el$87, () => requestRowsList(requestRows(details(), compact())));
|
|
579
|
+
return _el$87;
|
|
571
580
|
})()
|
|
572
581
|
}), null);
|
|
573
582
|
_$insertNode(_el$48, _el$49);
|
|
574
583
|
_$insertNode(_el$49, _el$50);
|
|
575
|
-
_$
|
|
584
|
+
_$setProp(_el$49, "flexDirection", "row");
|
|
585
|
+
_$setProp(_el$49, "justifyContent", "space-between");
|
|
586
|
+
_$setProp(_el$49, "gap", 2);
|
|
587
|
+
_$insertNode(_el$50, _el$51);
|
|
588
|
+
_$insertNode(_el$51, _$createTextNode(`Context Breakdown`));
|
|
589
|
+
_$insert(_el$49, _$createComponent(Show, {
|
|
590
|
+
get when() {
|
|
591
|
+
return sources();
|
|
592
|
+
},
|
|
593
|
+
children: captured => (() => {
|
|
594
|
+
var _el$88 = _$createElement("text");
|
|
595
|
+
_$insert(_el$88, () => new Date(captured().capturedAt).toLocaleTimeString());
|
|
596
|
+
_$effect(_$p => _$setProp(_el$88, "fg", theme().muted, _$p));
|
|
597
|
+
return _el$88;
|
|
598
|
+
})()
|
|
599
|
+
}), null);
|
|
576
600
|
_$insert(_el$48, _$createComponent(Show, {
|
|
577
601
|
get when() {
|
|
578
602
|
return sources();
|
|
579
603
|
},
|
|
580
604
|
get fallback() {
|
|
581
605
|
return (() => {
|
|
582
|
-
var _el$
|
|
583
|
-
_$insertNode(_el$
|
|
584
|
-
_$effect(_$p => _$setProp(_el$
|
|
585
|
-
return _el$
|
|
606
|
+
var _el$89 = _$createElement("text");
|
|
607
|
+
_$insertNode(_el$89, _$createTextNode(`Source estimates unavailable (no request snapshot or RPC)`));
|
|
608
|
+
_$effect(_$p => _$setProp(_el$89, "fg", theme().muted, _$p));
|
|
609
|
+
return _el$89;
|
|
586
610
|
})();
|
|
587
611
|
},
|
|
588
612
|
children: captured => _$createComponent(For, {
|
|
@@ -590,39 +614,39 @@ function UsageDialog(props) {
|
|
|
590
614
|
return breakdownRows(captured(), detailed());
|
|
591
615
|
},
|
|
592
616
|
children: row => (() => {
|
|
593
|
-
var _el$
|
|
594
|
-
_el$
|
|
595
|
-
_el$
|
|
596
|
-
_el$
|
|
597
|
-
_el$
|
|
598
|
-
_el$
|
|
599
|
-
_el$
|
|
600
|
-
_$insertNode(_el$
|
|
601
|
-
_$insertNode(_el$
|
|
602
|
-
_$insertNode(_el$
|
|
603
|
-
_$insertNode(_el$
|
|
604
|
-
_$setProp(_el$
|
|
605
|
-
_$setProp(_el$
|
|
606
|
-
_$insertNode(_el$
|
|
607
|
-
_$setProp(_el$
|
|
608
|
-
_$setProp(_el$
|
|
609
|
-
_$insert(_el$
|
|
610
|
-
_$setProp(_el$
|
|
611
|
-
_$insert(_el$
|
|
612
|
-
_$setProp(_el$
|
|
613
|
-
_$insert(_el$
|
|
614
|
-
_$insertNode(_el$
|
|
615
|
-
_$setProp(_el$
|
|
616
|
-
_$insert(_el$
|
|
617
|
+
var _el$91 = _$createElement("box"),
|
|
618
|
+
_el$92 = _$createElement("box"),
|
|
619
|
+
_el$93 = _$createElement("text"),
|
|
620
|
+
_el$94 = _$createElement("box"),
|
|
621
|
+
_el$95 = _$createElement("text"),
|
|
622
|
+
_el$96 = _$createElement("text"),
|
|
623
|
+
_el$97 = _$createTextNode(`%`);
|
|
624
|
+
_$insertNode(_el$91, _el$92);
|
|
625
|
+
_$insertNode(_el$91, _el$94);
|
|
626
|
+
_$insertNode(_el$91, _el$95);
|
|
627
|
+
_$insertNode(_el$91, _el$96);
|
|
628
|
+
_$setProp(_el$91, "flexDirection", "row");
|
|
629
|
+
_$setProp(_el$91, "gap", 1);
|
|
630
|
+
_$insertNode(_el$92, _el$93);
|
|
631
|
+
_$setProp(_el$92, "width", 14);
|
|
632
|
+
_$setProp(_el$92, "flexShrink", 0);
|
|
633
|
+
_$insert(_el$93, () => row.label);
|
|
634
|
+
_$setProp(_el$94, "flexShrink", 0);
|
|
635
|
+
_$insert(_el$94, () => barRow(row.percent, breakdownBar()));
|
|
636
|
+
_$setProp(_el$95, "flexShrink", 0);
|
|
637
|
+
_$insert(_el$95, () => number(row.tokens));
|
|
638
|
+
_$insertNode(_el$96, _el$97);
|
|
639
|
+
_$setProp(_el$96, "flexShrink", 0);
|
|
640
|
+
_$insert(_el$96, () => row.percent.toFixed(1), _el$97);
|
|
617
641
|
_$effect(_p$ => {
|
|
618
|
-
var _v$
|
|
619
|
-
_v$
|
|
620
|
-
_v$
|
|
621
|
-
_v$
|
|
622
|
-
_v$
|
|
623
|
-
_v$
|
|
624
|
-
_v$
|
|
625
|
-
_v$
|
|
642
|
+
var _v$25 = theme().muted,
|
|
643
|
+
_v$26 = breakdownBar(),
|
|
644
|
+
_v$27 = theme().base,
|
|
645
|
+
_v$28 = theme().muted;
|
|
646
|
+
_v$25 !== _p$.e && (_p$.e = _$setProp(_el$93, "fg", _v$25, _p$.e));
|
|
647
|
+
_v$26 !== _p$.t && (_p$.t = _$setProp(_el$94, "width", _v$26, _p$.t));
|
|
648
|
+
_v$27 !== _p$.a && (_p$.a = _$setProp(_el$95, "fg", _v$27, _p$.a));
|
|
649
|
+
_v$28 !== _p$.o && (_p$.o = _$setProp(_el$96, "fg", _v$28, _p$.o));
|
|
626
650
|
return _p$;
|
|
627
651
|
}, {
|
|
628
652
|
e: undefined,
|
|
@@ -630,23 +654,24 @@ function UsageDialog(props) {
|
|
|
630
654
|
a: undefined,
|
|
631
655
|
o: undefined
|
|
632
656
|
});
|
|
633
|
-
return _el$
|
|
657
|
+
return _el$91;
|
|
634
658
|
})()
|
|
635
659
|
})
|
|
636
660
|
}), null);
|
|
637
|
-
_$insertNode(_el$52, _el$53);
|
|
638
661
|
_$insertNode(_el$53, _el$54);
|
|
639
|
-
_$insertNode(_el$
|
|
640
|
-
_$
|
|
662
|
+
_$insertNode(_el$53, _el$57);
|
|
663
|
+
_$insertNode(_el$54, _el$55);
|
|
664
|
+
_$insertNode(_el$55, _$createTextNode(`Session`));
|
|
665
|
+
_$insert(_el$53, _$createComponent(Show, {
|
|
641
666
|
get when() {
|
|
642
667
|
return state().summary;
|
|
643
668
|
},
|
|
644
669
|
get fallback() {
|
|
645
670
|
return (() => {
|
|
646
|
-
var _el$
|
|
647
|
-
_$insertNode(_el$
|
|
648
|
-
_$effect(_$p => _$setProp(_el$
|
|
649
|
-
return _el$
|
|
671
|
+
var _el$98 = _$createElement("text");
|
|
672
|
+
_$insertNode(_el$98, _$createTextNode(`Session usage unavailable`));
|
|
673
|
+
_$effect(_$p => _$setProp(_el$98, "fg", theme().muted, _$p));
|
|
674
|
+
return _el$98;
|
|
650
675
|
})();
|
|
651
676
|
},
|
|
652
677
|
children: summary => _$createComponent(Show, {
|
|
@@ -655,26 +680,26 @@ function UsageDialog(props) {
|
|
|
655
680
|
},
|
|
656
681
|
get fallback() {
|
|
657
682
|
return (() => {
|
|
658
|
-
var _el$
|
|
659
|
-
_el$
|
|
660
|
-
_el$
|
|
661
|
-
_el$
|
|
662
|
-
_el$
|
|
663
|
-
_$insertNode(_el$
|
|
664
|
-
_$insertNode(_el$
|
|
665
|
-
_$insertNode(_el$
|
|
666
|
-
_$insertNode(_el$
|
|
667
|
-
_$setProp(_el$
|
|
668
|
-
_$insert(_el$
|
|
669
|
-
_$insert(_el$
|
|
670
|
-
_$insert(_el$
|
|
671
|
-
_$insert(_el$
|
|
672
|
-
_$insert(_el$
|
|
683
|
+
var _el$100 = _$createElement("text"),
|
|
684
|
+
_el$101 = _$createTextNode(` · `),
|
|
685
|
+
_el$102 = _$createTextNode(` · `),
|
|
686
|
+
_el$103 = _$createTextNode(` tokens · `),
|
|
687
|
+
_el$104 = _$createTextNode(`% cached`);
|
|
688
|
+
_$insertNode(_el$100, _el$101);
|
|
689
|
+
_$insertNode(_el$100, _el$102);
|
|
690
|
+
_$insertNode(_el$100, _el$103);
|
|
691
|
+
_$insertNode(_el$100, _el$104);
|
|
692
|
+
_$setProp(_el$100, "wrapMode", "word");
|
|
693
|
+
_$insert(_el$100, () => countLabel(summary().steps, "step"), _el$101);
|
|
694
|
+
_$insert(_el$100, () => countLabel(summary().calls, "call"), _el$102);
|
|
695
|
+
_$insert(_el$100, () => formatCompact(summary().total), _el$103);
|
|
696
|
+
_$insert(_el$100, () => (summary().cacheRate * 100).toFixed(1), _el$104);
|
|
697
|
+
_$insert(_el$100, (() => {
|
|
673
698
|
var _c$ = _$memo(() => !!formatEstimatedCost(summary().cost, summary().costStatus));
|
|
674
699
|
return () => _c$() ? ` · ${formatEstimatedCost(summary().cost, summary().costStatus)}` : "";
|
|
675
700
|
})(), null);
|
|
676
|
-
_$effect(_$p => _$setProp(_el$
|
|
677
|
-
return _el$
|
|
701
|
+
_$effect(_$p => _$setProp(_el$100, "fg", theme().base, _$p));
|
|
702
|
+
return _el$100;
|
|
678
703
|
})();
|
|
679
704
|
},
|
|
680
705
|
get children() {
|
|
@@ -683,58 +708,69 @@ function UsageDialog(props) {
|
|
|
683
708
|
return summaryRows(summary());
|
|
684
709
|
},
|
|
685
710
|
children: ([label, value]) => (() => {
|
|
686
|
-
var _el$
|
|
687
|
-
_el$
|
|
688
|
-
_el$
|
|
689
|
-
_$insertNode(_el$
|
|
690
|
-
_$insertNode(_el$
|
|
691
|
-
_$setProp(_el$
|
|
692
|
-
_$setProp(_el$
|
|
693
|
-
_$setProp(_el$
|
|
694
|
-
_$setProp(_el$
|
|
695
|
-
_$insert(_el$
|
|
696
|
-
_$insert(_el$
|
|
711
|
+
var _el$105 = _$createElement("box"),
|
|
712
|
+
_el$106 = _$createElement("text"),
|
|
713
|
+
_el$107 = _$createElement("text");
|
|
714
|
+
_$insertNode(_el$105, _el$106);
|
|
715
|
+
_$insertNode(_el$105, _el$107);
|
|
716
|
+
_$setProp(_el$105, "flexDirection", "row");
|
|
717
|
+
_$setProp(_el$105, "justifyContent", "space-between");
|
|
718
|
+
_$setProp(_el$105, "gap", 2);
|
|
719
|
+
_$setProp(_el$106, "flexShrink", 0);
|
|
720
|
+
_$insert(_el$106, label);
|
|
721
|
+
_$insert(_el$107, value);
|
|
697
722
|
_$effect(_p$ => {
|
|
698
|
-
var _v$
|
|
699
|
-
_v$
|
|
700
|
-
_v$
|
|
701
|
-
_v$
|
|
723
|
+
var _v$29 = theme().muted,
|
|
724
|
+
_v$30 = theme().base;
|
|
725
|
+
_v$29 !== _p$.e && (_p$.e = _$setProp(_el$106, "fg", _v$29, _p$.e));
|
|
726
|
+
_v$30 !== _p$.t && (_p$.t = _$setProp(_el$107, "fg", _v$30, _p$.t));
|
|
702
727
|
return _p$;
|
|
703
728
|
}, {
|
|
704
729
|
e: undefined,
|
|
705
730
|
t: undefined
|
|
706
731
|
});
|
|
707
|
-
return _el$
|
|
732
|
+
return _el$105;
|
|
708
733
|
})()
|
|
709
734
|
});
|
|
710
735
|
}
|
|
711
736
|
})
|
|
712
|
-
}),
|
|
713
|
-
_$insertNode(_el$56, _el$57);
|
|
737
|
+
}), _el$57);
|
|
714
738
|
_$insertNode(_el$57, _el$58);
|
|
715
|
-
_$insertNode(_el$
|
|
716
|
-
_$
|
|
739
|
+
_$insertNode(_el$57, _el$60);
|
|
740
|
+
_$setProp(_el$57, "flexDirection", "row");
|
|
741
|
+
_$setProp(_el$57, "justifyContent", "space-between");
|
|
742
|
+
_$setProp(_el$57, "gap", 2);
|
|
743
|
+
_$insertNode(_el$58, _$createTextNode(`Run Time (this session)`));
|
|
744
|
+
_$setProp(_el$58, "wrapMode", "word");
|
|
745
|
+
_$setProp(_el$58, "minWidth", 0);
|
|
746
|
+
_$setProp(_el$60, "wrapMode", "word");
|
|
747
|
+
_$setProp(_el$60, "minWidth", 0);
|
|
748
|
+
_$insert(_el$60, () => formatRunTime(state().runtime));
|
|
749
|
+
_$insertNode(_el$61, _el$62);
|
|
750
|
+
_$insertNode(_el$62, _el$63);
|
|
751
|
+
_$insertNode(_el$63, _$createTextNode(`By Model`));
|
|
752
|
+
_$insert(_el$61, _$createComponent(Show, {
|
|
717
753
|
get when() {
|
|
718
754
|
return _$memo(() => !!detailed())() && models().length;
|
|
719
755
|
},
|
|
720
756
|
get children() {
|
|
721
|
-
var _el$
|
|
722
|
-
_$insertNode(_el$
|
|
723
|
-
_$setProp(_el$
|
|
724
|
-
_$effect(_$p => _$setProp(_el$
|
|
725
|
-
return _el$
|
|
757
|
+
var _el$65 = _$createElement("text");
|
|
758
|
+
_$insertNode(_el$65, _$createTextNode(`Rates used for Est. Cost · USD / 1M text tokens · incoming = Input + Cache Read + Cache Write`));
|
|
759
|
+
_$setProp(_el$65, "wrapMode", "word");
|
|
760
|
+
_$effect(_$p => _$setProp(_el$65, "fg", theme().muted, _$p));
|
|
761
|
+
return _el$65;
|
|
726
762
|
}
|
|
727
763
|
}), null);
|
|
728
|
-
_$insert(_el$
|
|
764
|
+
_$insert(_el$61, _$createComponent(Show, {
|
|
729
765
|
get when() {
|
|
730
766
|
return models().length;
|
|
731
767
|
},
|
|
732
768
|
get fallback() {
|
|
733
769
|
return (() => {
|
|
734
|
-
var _el$
|
|
735
|
-
_$insertNode(_el$
|
|
736
|
-
_$effect(_$p => _$setProp(_el$
|
|
737
|
-
return _el$
|
|
770
|
+
var _el$108 = _$createElement("text");
|
|
771
|
+
_$insertNode(_el$108, _$createTextNode(`No model usage yet`));
|
|
772
|
+
_$effect(_$p => _$setProp(_el$108, "fg", theme().muted, _$p));
|
|
773
|
+
return _el$108;
|
|
738
774
|
})();
|
|
739
775
|
},
|
|
740
776
|
get children() {
|
|
@@ -743,29 +779,29 @@ function UsageDialog(props) {
|
|
|
743
779
|
return models();
|
|
744
780
|
},
|
|
745
781
|
children: model => (() => {
|
|
746
|
-
var _el$
|
|
747
|
-
_el$
|
|
748
|
-
_el$
|
|
749
|
-
_el$
|
|
750
|
-
_el$
|
|
751
|
-
_el$
|
|
752
|
-
_$insertNode(_el$
|
|
753
|
-
_$insertNode(_el$
|
|
754
|
-
_$insertNode(_el$
|
|
755
|
-
_$insertNode(_el$
|
|
756
|
-
_$setProp(_el$
|
|
757
|
-
_$setProp(_el$
|
|
758
|
-
_$setProp(_el$
|
|
759
|
-
_$setProp(_el$
|
|
760
|
-
_$setProp(_el$
|
|
761
|
-
_$setProp(_el$
|
|
762
|
-
_$insert(_el$
|
|
763
|
-
_$setProp(_el$
|
|
764
|
-
_$insert(_el$
|
|
765
|
-
_$insertNode(_el$
|
|
766
|
-
_$insert(_el$
|
|
767
|
-
_$insert(_el$
|
|
768
|
-
_$insert(_el$
|
|
782
|
+
var _el$110 = _$createElement("box"),
|
|
783
|
+
_el$111 = _$createElement("box"),
|
|
784
|
+
_el$112 = _$createElement("text"),
|
|
785
|
+
_el$113 = _$createElement("text"),
|
|
786
|
+
_el$114 = _$createElement("text"),
|
|
787
|
+
_el$115 = _$createTextNode(` tokens · `);
|
|
788
|
+
_$insertNode(_el$110, _el$111);
|
|
789
|
+
_$insertNode(_el$110, _el$114);
|
|
790
|
+
_$insertNode(_el$111, _el$112);
|
|
791
|
+
_$insertNode(_el$111, _el$113);
|
|
792
|
+
_$setProp(_el$111, "flexDirection", "row");
|
|
793
|
+
_$setProp(_el$111, "justifyContent", "space-between");
|
|
794
|
+
_$setProp(_el$111, "gap", 2);
|
|
795
|
+
_$setProp(_el$112, "wrapMode", "word");
|
|
796
|
+
_$setProp(_el$112, "minWidth", 0);
|
|
797
|
+
_$setProp(_el$112, "flexGrow", 1);
|
|
798
|
+
_$insert(_el$112, () => model.model);
|
|
799
|
+
_$setProp(_el$113, "flexShrink", 0);
|
|
800
|
+
_$insert(_el$113, () => formatEstimatedCost(model.cost, model.costStatus) ?? "");
|
|
801
|
+
_$insertNode(_el$114, _el$115);
|
|
802
|
+
_$insert(_el$114, () => number(model.tokens), _el$115);
|
|
803
|
+
_$insert(_el$114, () => countLabel(model.calls, "call"), null);
|
|
804
|
+
_$insert(_el$110, _$createComponent(Show, {
|
|
769
805
|
get when() {
|
|
770
806
|
return detailed();
|
|
771
807
|
},
|
|
@@ -775,52 +811,52 @@ function UsageDialog(props) {
|
|
|
775
811
|
return model.appliedRates;
|
|
776
812
|
},
|
|
777
813
|
children: rates => (() => {
|
|
778
|
-
var _el$
|
|
779
|
-
_el$
|
|
780
|
-
_el$
|
|
781
|
-
_el$
|
|
782
|
-
_$insertNode(_el$
|
|
783
|
-
_$setProp(_el$
|
|
784
|
-
_$insertNode(_el$
|
|
785
|
-
_$insertNode(_el$
|
|
786
|
-
_$setProp(_el$
|
|
787
|
-
_$insert(_el$
|
|
788
|
-
_$insert(_el$
|
|
789
|
-
_$insert(_el$
|
|
790
|
-
_$insert(_el$
|
|
791
|
-
_$effect(_$p => _$setProp(_el$
|
|
792
|
-
return _el$
|
|
814
|
+
var _el$118 = _$createElement("box"),
|
|
815
|
+
_el$119 = _$createElement("text"),
|
|
816
|
+
_el$120 = _$createTextNode(` · `),
|
|
817
|
+
_el$121 = _$createTextNode(` · `);
|
|
818
|
+
_$insertNode(_el$118, _el$119);
|
|
819
|
+
_$setProp(_el$118, "marginTop", 1);
|
|
820
|
+
_$insertNode(_el$119, _el$120);
|
|
821
|
+
_$insertNode(_el$119, _el$121);
|
|
822
|
+
_$setProp(_el$119, "wrapMode", "word");
|
|
823
|
+
_$insert(_el$119, () => rates.source, _el$120);
|
|
824
|
+
_$insert(_el$119, () => formatRateTier(rates), _el$121);
|
|
825
|
+
_$insert(_el$119, () => countLabel(rates.calls, "call"), null);
|
|
826
|
+
_$insert(_el$118, () => requestRowsList(rateRows(rates)), null);
|
|
827
|
+
_$effect(_$p => _$setProp(_el$119, "fg", theme().muted, _$p));
|
|
828
|
+
return _el$118;
|
|
793
829
|
})()
|
|
794
830
|
}), _$createComponent(Show, {
|
|
795
831
|
get when() {
|
|
796
832
|
return model.unpricedCalls > 0;
|
|
797
833
|
},
|
|
798
834
|
get children() {
|
|
799
|
-
var _el$
|
|
800
|
-
_el$
|
|
801
|
-
_$insertNode(_el$
|
|
802
|
-
_$setProp(_el$
|
|
803
|
-
_$insert(_el$
|
|
804
|
-
_$effect(_$p => _$setProp(_el$
|
|
805
|
-
return _el$
|
|
835
|
+
var _el$116 = _$createElement("text"),
|
|
836
|
+
_el$117 = _$createTextNode(`Pricing unavailable for `);
|
|
837
|
+
_$insertNode(_el$116, _el$117);
|
|
838
|
+
_$setProp(_el$116, "wrapMode", "word");
|
|
839
|
+
_$insert(_el$116, () => countLabel(model.unpricedCalls, "call"), null);
|
|
840
|
+
_$effect(_$p => _$setProp(_el$116, "fg", theme().muted, _$p));
|
|
841
|
+
return _el$116;
|
|
806
842
|
}
|
|
807
843
|
})];
|
|
808
844
|
}
|
|
809
845
|
}), null);
|
|
810
846
|
_$effect(_p$ => {
|
|
811
|
-
var _v$
|
|
812
|
-
_v$
|
|
813
|
-
_v$
|
|
814
|
-
_v$
|
|
815
|
-
_v$
|
|
816
|
-
_v$
|
|
847
|
+
var _v$31 = theme().base,
|
|
848
|
+
_v$32 = theme().base,
|
|
849
|
+
_v$33 = theme().muted;
|
|
850
|
+
_v$31 !== _p$.e && (_p$.e = _$setProp(_el$112, "fg", _v$31, _p$.e));
|
|
851
|
+
_v$32 !== _p$.t && (_p$.t = _$setProp(_el$113, "fg", _v$32, _p$.t));
|
|
852
|
+
_v$33 !== _p$.a && (_p$.a = _$setProp(_el$114, "fg", _v$33, _p$.a));
|
|
817
853
|
return _p$;
|
|
818
854
|
}, {
|
|
819
855
|
e: undefined,
|
|
820
856
|
t: undefined,
|
|
821
857
|
a: undefined
|
|
822
858
|
});
|
|
823
|
-
return _el$
|
|
859
|
+
return _el$110;
|
|
824
860
|
})()
|
|
825
861
|
});
|
|
826
862
|
}
|
|
@@ -831,13 +867,17 @@ function UsageDialog(props) {
|
|
|
831
867
|
_v$12 = theme().base,
|
|
832
868
|
_v$13 = theme().base,
|
|
833
869
|
_v$14 = theme().base,
|
|
834
|
-
_v$15 = theme().
|
|
870
|
+
_v$15 = theme().muted,
|
|
871
|
+
_v$16 = theme().base,
|
|
872
|
+
_v$17 = theme().base;
|
|
835
873
|
_v$10 !== _p$.e && (_p$.e = _$setProp(_el$37, "maxHeight", _v$10, _p$.e));
|
|
836
874
|
_v$11 !== _p$.t && (_p$.t = _$setProp(_el$40, "fg", _v$11, _p$.t));
|
|
837
875
|
_v$12 !== _p$.a && (_p$.a = _$setProp(_el$45, "fg", _v$12, _p$.a));
|
|
838
|
-
_v$13 !== _p$.o && (_p$.o = _$setProp(_el$
|
|
839
|
-
_v$14 !== _p$.i && (_p$.i = _$setProp(_el$
|
|
840
|
-
_v$15 !== _p$.n && (_p$.n = _$setProp(_el$
|
|
876
|
+
_v$13 !== _p$.o && (_p$.o = _$setProp(_el$50, "fg", _v$13, _p$.o));
|
|
877
|
+
_v$14 !== _p$.i && (_p$.i = _$setProp(_el$54, "fg", _v$14, _p$.i));
|
|
878
|
+
_v$15 !== _p$.n && (_p$.n = _$setProp(_el$58, "fg", _v$15, _p$.n));
|
|
879
|
+
_v$16 !== _p$.s && (_p$.s = _$setProp(_el$60, "fg", _v$16, _p$.s));
|
|
880
|
+
_v$17 !== _p$.h && (_p$.h = _$setProp(_el$62, "fg", _v$17, _p$.h));
|
|
841
881
|
return _p$;
|
|
842
882
|
}, {
|
|
843
883
|
e: undefined,
|
|
@@ -845,32 +885,34 @@ function UsageDialog(props) {
|
|
|
845
885
|
a: undefined,
|
|
846
886
|
o: undefined,
|
|
847
887
|
i: undefined,
|
|
848
|
-
n: undefined
|
|
888
|
+
n: undefined,
|
|
889
|
+
s: undefined,
|
|
890
|
+
h: undefined
|
|
849
891
|
});
|
|
850
892
|
return _el$37;
|
|
851
893
|
}
|
|
852
|
-
}), _el$
|
|
853
|
-
_$insertNode(_el$
|
|
854
|
-
_$insertNode(_el$
|
|
855
|
-
_$insertNode(_el$
|
|
856
|
-
_$setProp(_el$
|
|
857
|
-
_$insertNode(_el$
|
|
858
|
-
_$insertNode(_el$
|
|
859
|
-
_$setProp(_el$
|
|
894
|
+
}), _el$67);
|
|
895
|
+
_$insertNode(_el$67, _el$68);
|
|
896
|
+
_$insertNode(_el$67, _el$70);
|
|
897
|
+
_$insertNode(_el$67, _el$72);
|
|
898
|
+
_$setProp(_el$67, "flexDirection", "row");
|
|
899
|
+
_$insertNode(_el$68, _$createTextNode(`↑/↓ scroll · `));
|
|
900
|
+
_$insertNode(_el$70, _$createTextNode(`d details`));
|
|
901
|
+
_$setProp(_el$70, "onMouseUp", event => {
|
|
860
902
|
if (event.button === 0) toggleDetails();
|
|
861
903
|
});
|
|
862
|
-
_$insertNode(_el$
|
|
904
|
+
_$insertNode(_el$72, _$createTextNode(` · esc close`));
|
|
863
905
|
_$effect(_p$ => {
|
|
864
|
-
var _v$
|
|
865
|
-
_v$17 = theme().muted,
|
|
866
|
-
_v$18 = theme().muted,
|
|
906
|
+
var _v$18 = theme().base,
|
|
867
907
|
_v$19 = theme().muted,
|
|
868
|
-
_v$20 = theme().muted
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
_v$18 !== _p$.
|
|
872
|
-
_v$19 !== _p$.
|
|
873
|
-
_v$20 !== _p$.
|
|
908
|
+
_v$20 = theme().muted,
|
|
909
|
+
_v$21 = theme().muted,
|
|
910
|
+
_v$22 = theme().muted;
|
|
911
|
+
_v$18 !== _p$.e && (_p$.e = _$setProp(_el$30, "fg", _v$18, _p$.e));
|
|
912
|
+
_v$19 !== _p$.t && (_p$.t = _$setProp(_el$33, "fg", _v$19, _p$.t));
|
|
913
|
+
_v$20 !== _p$.a && (_p$.a = _$setProp(_el$68, "fg", _v$20, _p$.a));
|
|
914
|
+
_v$21 !== _p$.o && (_p$.o = _$setProp(_el$70, "fg", _v$21, _p$.o));
|
|
915
|
+
_v$22 !== _p$.i && (_p$.i = _$setProp(_el$72, "fg", _v$22, _p$.i));
|
|
874
916
|
return _p$;
|
|
875
917
|
}, {
|
|
876
918
|
e: undefined,
|