openclacky 1.2.4 → 1.2.6
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.
- checksums.yaml +4 -4
- data/CHANGELOG.md +32 -0
- data/lib/clacky/agent/cost_tracker.rb +17 -9
- data/lib/clacky/agent/llm_caller.rb +25 -3
- data/lib/clacky/agent/tool_executor.rb +14 -0
- data/lib/clacky/agent/tool_registry.rb +0 -7
- data/lib/clacky/agent.rb +0 -8
- data/lib/clacky/billing/billing_store.rb +62 -4
- data/lib/clacky/brand_config.rb +11 -0
- data/lib/clacky/cli.rb +74 -23
- data/lib/clacky/client.rb +36 -2
- data/lib/clacky/default_parsers/wps_parser.rb +82 -0
- data/lib/clacky/default_skills/browser-setup/SKILL.md +16 -90
- data/lib/clacky/message_format/anthropic.rb +13 -3
- data/lib/clacky/message_format/bedrock.rb +2 -2
- data/lib/clacky/platform_http_client.rb +28 -1
- data/lib/clacky/providers.rb +0 -27
- data/lib/clacky/server/http_server.rb +24 -4
- data/lib/clacky/tools/browser.rb +4 -13
- data/lib/clacky/tools/terminal.rb +18 -7
- data/lib/clacky/utils/file_processor.rb +3 -0
- data/lib/clacky/utils/parser_manager.rb +3 -0
- data/lib/clacky/utils/scripts_manager.rb +0 -1
- data/lib/clacky/version.rb +1 -1
- data/lib/clacky/web/app.css +422 -74
- data/lib/clacky/web/billing.js +371 -99
- data/lib/clacky/web/i18n.js +24 -2
- data/lib/clacky/web/index.html +1 -1
- data/lib/clacky/web/sessions.js +10 -68
- data/lib/clacky.rb +0 -3
- metadata +3 -6
- data/lib/clacky/tools/list_tasks.rb +0 -54
- data/lib/clacky/tools/redo_task.rb +0 -41
- data/lib/clacky/tools/undo_task.rb +0 -35
- data/scripts/wsl_network_doctor.ps1 +0 -196
data/lib/clacky/web/app.css
CHANGED
|
@@ -2704,7 +2704,7 @@ body {
|
|
|
2704
2704
|
display: flex;
|
|
2705
2705
|
flex-wrap: wrap;
|
|
2706
2706
|
gap: 0.5rem;
|
|
2707
|
-
padding: 0.5rem 1rem
|
|
2707
|
+
padding: 0.5rem 1rem;
|
|
2708
2708
|
}
|
|
2709
2709
|
.img-preview-item {
|
|
2710
2710
|
position: relative;
|
|
@@ -8494,148 +8494,496 @@ body.setup-mode[data-theme="dark"] {
|
|
|
8494
8494
|
.billing-error {
|
|
8495
8495
|
color: var(--color-error);
|
|
8496
8496
|
}
|
|
8497
|
-
|
|
8497
|
+
/* ── Dashboard Layout ─────────────────────────────────────────────────── */
|
|
8498
|
+
.billing-dashboard {
|
|
8499
|
+
display: flex;
|
|
8500
|
+
flex-direction: column;
|
|
8501
|
+
gap: 1.25rem;
|
|
8502
|
+
}
|
|
8503
|
+
.billing-top-bar {
|
|
8498
8504
|
display: flex;
|
|
8499
8505
|
justify-content: space-between;
|
|
8500
8506
|
align-items: center;
|
|
8501
|
-
|
|
8507
|
+
flex-wrap: wrap;
|
|
8508
|
+
gap: 1rem;
|
|
8509
|
+
}
|
|
8510
|
+
.billing-title-row {
|
|
8511
|
+
display: flex;
|
|
8512
|
+
align-items: baseline;
|
|
8513
|
+
gap: 0.75rem;
|
|
8502
8514
|
}
|
|
8503
|
-
.billing-
|
|
8515
|
+
.billing-title-row h2 {
|
|
8504
8516
|
font-size: 1.5rem;
|
|
8505
8517
|
font-weight: 600;
|
|
8506
8518
|
color: var(--color-text-primary);
|
|
8507
8519
|
margin: 0;
|
|
8508
8520
|
}
|
|
8509
|
-
.billing-
|
|
8510
|
-
|
|
8521
|
+
.billing-subtitle {
|
|
8522
|
+
font-size: 0.875rem;
|
|
8523
|
+
color: var(--color-text-secondary);
|
|
8524
|
+
}
|
|
8525
|
+
.billing-controls {
|
|
8526
|
+
display: flex;
|
|
8527
|
+
align-items: center;
|
|
8528
|
+
gap: 0.75rem;
|
|
8529
|
+
flex-wrap: wrap;
|
|
8530
|
+
}
|
|
8531
|
+
|
|
8532
|
+
/* ── Period Button Group ─────────────────────────────────────────────── */
|
|
8533
|
+
.billing-period-group {
|
|
8534
|
+
display: flex;
|
|
8535
|
+
background: var(--color-bg-secondary);
|
|
8536
|
+
border: 1px solid var(--color-border-primary);
|
|
8537
|
+
border-radius: 8px;
|
|
8538
|
+
overflow: hidden;
|
|
8539
|
+
}
|
|
8540
|
+
.billing-period-btn {
|
|
8541
|
+
padding: 0.5rem 0.875rem;
|
|
8542
|
+
border: none;
|
|
8543
|
+
background: transparent;
|
|
8544
|
+
color: var(--color-text-secondary);
|
|
8545
|
+
font-size: 0.8125rem;
|
|
8546
|
+
cursor: pointer;
|
|
8547
|
+
transition: all 0.15s ease;
|
|
8548
|
+
}
|
|
8549
|
+
.billing-period-btn:not(:last-child) {
|
|
8550
|
+
border-right: 1px solid var(--color-border-primary);
|
|
8551
|
+
}
|
|
8552
|
+
.billing-period-btn:hover {
|
|
8553
|
+
background: var(--color-bg-tertiary);
|
|
8554
|
+
color: var(--color-text-primary);
|
|
8555
|
+
}
|
|
8556
|
+
.billing-period-btn.active {
|
|
8557
|
+
background: #6366f1;
|
|
8558
|
+
color: #ffffff;
|
|
8559
|
+
font-weight: 500;
|
|
8560
|
+
}
|
|
8561
|
+
|
|
8562
|
+
/* ── Model Filter ────────────────────────────────────────────────────── */
|
|
8563
|
+
.billing-model-filter {
|
|
8564
|
+
padding: 0.5rem 0.875rem;
|
|
8511
8565
|
border: 1px solid var(--color-border-primary);
|
|
8512
8566
|
border-radius: 8px;
|
|
8513
8567
|
background: var(--color-bg-secondary);
|
|
8514
8568
|
color: var(--color-text-primary);
|
|
8569
|
+
font-size: 0.8125rem;
|
|
8570
|
+
cursor: pointer;
|
|
8571
|
+
min-width: 140px;
|
|
8572
|
+
}
|
|
8573
|
+
|
|
8574
|
+
/* ── Clear Button ────────────────────────────────────────────────────── */
|
|
8575
|
+
.billing-clear-container {
|
|
8576
|
+
position: relative;
|
|
8577
|
+
}
|
|
8578
|
+
.billing-clear-btn {
|
|
8579
|
+
padding: 0.5rem 0.625rem;
|
|
8580
|
+
border: 1px solid var(--color-border-primary);
|
|
8581
|
+
border-radius: 8px;
|
|
8582
|
+
background: var(--color-bg-secondary);
|
|
8583
|
+
color: var(--color-text-secondary);
|
|
8515
8584
|
font-size: 0.875rem;
|
|
8516
8585
|
cursor: pointer;
|
|
8586
|
+
transition: all 0.2s ease;
|
|
8587
|
+
}
|
|
8588
|
+
.billing-clear-btn:hover {
|
|
8589
|
+
background: var(--color-bg-tertiary);
|
|
8590
|
+
color: var(--color-text-primary);
|
|
8591
|
+
border-color: var(--color-error);
|
|
8517
8592
|
}
|
|
8518
|
-
.billing-
|
|
8593
|
+
.billing-clear-popup {
|
|
8594
|
+
position: absolute;
|
|
8595
|
+
top: 100%;
|
|
8596
|
+
right: 0;
|
|
8597
|
+
margin-top: 0.25rem;
|
|
8598
|
+
display: flex;
|
|
8599
|
+
flex-direction: column;
|
|
8600
|
+
gap: 0.25rem;
|
|
8601
|
+
background: var(--color-bg-secondary);
|
|
8602
|
+
border: 1px solid var(--color-border-primary);
|
|
8603
|
+
border-radius: 8px;
|
|
8604
|
+
padding: 0.5rem;
|
|
8605
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
8606
|
+
z-index: 100;
|
|
8607
|
+
min-width: 120px;
|
|
8608
|
+
}
|
|
8609
|
+
.billing-clear-option {
|
|
8610
|
+
padding: 0.5rem 0.75rem;
|
|
8611
|
+
border: none;
|
|
8612
|
+
border-radius: 6px;
|
|
8613
|
+
background: transparent;
|
|
8614
|
+
color: var(--color-text-primary);
|
|
8615
|
+
font-size: 0.8125rem;
|
|
8616
|
+
cursor: pointer;
|
|
8617
|
+
text-align: left;
|
|
8618
|
+
white-space: nowrap;
|
|
8619
|
+
transition: background 0.15s ease;
|
|
8620
|
+
}
|
|
8621
|
+
.billing-clear-option:hover {
|
|
8622
|
+
background: var(--color-bg-tertiary);
|
|
8623
|
+
}
|
|
8624
|
+
.billing-clear-danger {
|
|
8625
|
+
color: var(--color-error);
|
|
8626
|
+
}
|
|
8627
|
+
.billing-clear-danger:hover {
|
|
8628
|
+
background: rgba(239, 68, 68, 0.1);
|
|
8629
|
+
}
|
|
8630
|
+
|
|
8631
|
+
/* ── Stats Row ───────────────────────────────────────────────────────── */
|
|
8632
|
+
.billing-stats-row {
|
|
8519
8633
|
display: grid;
|
|
8520
|
-
grid-template-columns: repeat(
|
|
8634
|
+
grid-template-columns: repeat(4, 1fr);
|
|
8521
8635
|
gap: 1rem;
|
|
8522
|
-
margin-bottom: 2rem;
|
|
8523
8636
|
}
|
|
8524
|
-
|
|
8637
|
+
@media (max-width: 900px) {
|
|
8638
|
+
.billing-stats-row { grid-template-columns: repeat(2, 1fr); }
|
|
8639
|
+
}
|
|
8640
|
+
@media (max-width: 500px) {
|
|
8641
|
+
.billing-stats-row { grid-template-columns: 1fr; }
|
|
8642
|
+
}
|
|
8643
|
+
.billing-stat-card {
|
|
8644
|
+
display: flex;
|
|
8645
|
+
align-items: center;
|
|
8646
|
+
gap: 0.875rem;
|
|
8647
|
+
padding: 1rem 1.25rem;
|
|
8525
8648
|
background: var(--color-bg-secondary);
|
|
8526
8649
|
border: 1px solid var(--color-border-primary);
|
|
8527
8650
|
border-radius: 12px;
|
|
8528
|
-
padding: 1.25rem;
|
|
8529
|
-
text-align: center;
|
|
8530
8651
|
}
|
|
8531
|
-
.billing-
|
|
8532
|
-
background: linear-gradient(135deg, var(--color-accent-bg) 0%, var(--color-bg-secondary) 100%);
|
|
8652
|
+
.billing-stat-primary {
|
|
8653
|
+
background: linear-gradient(135deg, var(--color-accent-bg, rgba(99,102,241,0.1)) 0%, var(--color-bg-secondary) 100%);
|
|
8533
8654
|
border-color: var(--color-accent);
|
|
8534
8655
|
}
|
|
8535
|
-
.billing-
|
|
8656
|
+
.billing-stat-icon {
|
|
8657
|
+
font-size: 1.5rem;
|
|
8658
|
+
opacity: 0.8;
|
|
8659
|
+
}
|
|
8660
|
+
.billing-stat-content {
|
|
8661
|
+
display: flex;
|
|
8662
|
+
flex-direction: column;
|
|
8663
|
+
}
|
|
8664
|
+
.billing-stat-value {
|
|
8665
|
+
font-size: 1.25rem;
|
|
8666
|
+
font-weight: 700;
|
|
8667
|
+
color: var(--color-text-primary);
|
|
8668
|
+
line-height: 1.2;
|
|
8669
|
+
}
|
|
8670
|
+
.billing-stat-primary .billing-stat-value {
|
|
8671
|
+
color: var(--color-accent);
|
|
8672
|
+
}
|
|
8673
|
+
.billing-stat-label {
|
|
8536
8674
|
font-size: 0.75rem;
|
|
8537
8675
|
color: var(--color-text-secondary);
|
|
8538
8676
|
text-transform: uppercase;
|
|
8539
|
-
letter-spacing: 0.
|
|
8677
|
+
letter-spacing: 0.03em;
|
|
8678
|
+
}
|
|
8679
|
+
|
|
8680
|
+
/* ── Chart Row (Single Line) ─────────────────────────────────────────── */
|
|
8681
|
+
.billing-chart-row {
|
|
8682
|
+
width: 100%;
|
|
8683
|
+
}
|
|
8684
|
+
.billing-chart-card {
|
|
8685
|
+
background: var(--color-bg-secondary);
|
|
8686
|
+
border: 1px solid var(--color-border-primary);
|
|
8687
|
+
border-radius: 12px;
|
|
8688
|
+
padding: 1.25rem;
|
|
8689
|
+
min-height: 180px;
|
|
8690
|
+
display: flex;
|
|
8691
|
+
flex-direction: column;
|
|
8692
|
+
}
|
|
8693
|
+
.billing-chart-wide {
|
|
8694
|
+
width: 100%;
|
|
8695
|
+
}
|
|
8696
|
+
.billing-chart-header {
|
|
8697
|
+
display: flex;
|
|
8698
|
+
justify-content: space-between;
|
|
8699
|
+
align-items: center;
|
|
8700
|
+
margin-bottom: 1rem;
|
|
8701
|
+
}
|
|
8702
|
+
.billing-chart-header h4 {
|
|
8703
|
+
font-size: 0.9375rem;
|
|
8704
|
+
font-weight: 600;
|
|
8705
|
+
color: var(--color-text-primary);
|
|
8706
|
+
margin: 0;
|
|
8707
|
+
}
|
|
8708
|
+
.billing-chart-legends {
|
|
8709
|
+
display: flex;
|
|
8710
|
+
align-items: center;
|
|
8711
|
+
gap: 1rem;
|
|
8712
|
+
}
|
|
8713
|
+
.billing-chart-legend {
|
|
8714
|
+
display: flex;
|
|
8715
|
+
align-items: center;
|
|
8716
|
+
gap: 0.375rem;
|
|
8717
|
+
font-size: 0.75rem;
|
|
8718
|
+
color: var(--color-text-secondary);
|
|
8719
|
+
}
|
|
8720
|
+
.billing-legend-dot {
|
|
8721
|
+
width: 8px;
|
|
8722
|
+
height: 8px;
|
|
8723
|
+
border-radius: 50%;
|
|
8724
|
+
}
|
|
8725
|
+
.billing-legend-tokens {
|
|
8726
|
+
background: var(--color-accent);
|
|
8727
|
+
}
|
|
8728
|
+
.billing-legend-cost {
|
|
8729
|
+
background: #10b981;
|
|
8730
|
+
}
|
|
8731
|
+
.billing-chart-empty {
|
|
8732
|
+
flex: 1;
|
|
8733
|
+
display: flex;
|
|
8734
|
+
align-items: center;
|
|
8735
|
+
justify-content: center;
|
|
8736
|
+
color: var(--color-text-secondary);
|
|
8737
|
+
font-size: 0.875rem;
|
|
8738
|
+
}
|
|
8739
|
+
|
|
8740
|
+
/* ── Combined Chart ──────────────────────────────────────────────────── */
|
|
8741
|
+
.billing-combined-chart {
|
|
8742
|
+
display: flex;
|
|
8743
|
+
align-items: flex-end;
|
|
8744
|
+
gap: 4px;
|
|
8745
|
+
height: 140px;
|
|
8746
|
+
padding-bottom: 1.5rem;
|
|
8747
|
+
position: relative;
|
|
8748
|
+
}
|
|
8749
|
+
.billing-bar-group {
|
|
8750
|
+
flex: 1;
|
|
8751
|
+
display: flex;
|
|
8752
|
+
flex-direction: column;
|
|
8753
|
+
align-items: center;
|
|
8754
|
+
height: 100%;
|
|
8755
|
+
position: relative;
|
|
8756
|
+
min-width: 0;
|
|
8757
|
+
cursor: pointer;
|
|
8758
|
+
}
|
|
8759
|
+
.billing-bar-group:hover {
|
|
8760
|
+
background: var(--color-bg-tertiary);
|
|
8761
|
+
border-radius: 4px;
|
|
8762
|
+
}
|
|
8763
|
+
.billing-bar-pair {
|
|
8764
|
+
width: 100%;
|
|
8765
|
+
height: 100%;
|
|
8766
|
+
display: flex;
|
|
8767
|
+
align-items: flex-end;
|
|
8768
|
+
justify-content: center;
|
|
8769
|
+
gap: 3px;
|
|
8770
|
+
}
|
|
8771
|
+
.billing-input-stack {
|
|
8772
|
+
width: 12px;
|
|
8773
|
+
display: flex;
|
|
8774
|
+
flex-direction: column;
|
|
8775
|
+
justify-content: flex-end;
|
|
8776
|
+
align-items: stretch;
|
|
8777
|
+
}
|
|
8778
|
+
.billing-cache-hit {
|
|
8779
|
+
background: #93c5fd;
|
|
8780
|
+
width: 100%;
|
|
8781
|
+
border-radius: 2px 2px 0 0;
|
|
8782
|
+
transition: height 0.2s ease;
|
|
8783
|
+
}
|
|
8784
|
+
.billing-cache-miss {
|
|
8785
|
+
background: #3b82f6;
|
|
8786
|
+
width: 100%;
|
|
8787
|
+
transition: height 0.2s ease;
|
|
8788
|
+
}
|
|
8789
|
+
.billing-output-bar {
|
|
8790
|
+
width: 12px;
|
|
8791
|
+
background: #10b981;
|
|
8792
|
+
border-radius: 2px 2px 0 0;
|
|
8793
|
+
transition: height 0.2s ease;
|
|
8794
|
+
}
|
|
8795
|
+
.billing-bar-date {
|
|
8796
|
+
position: absolute;
|
|
8797
|
+
bottom: -1.25rem;
|
|
8798
|
+
font-size: 0.625rem;
|
|
8799
|
+
color: var(--color-text-secondary);
|
|
8800
|
+
white-space: nowrap;
|
|
8801
|
+
min-height: 0.75rem;
|
|
8802
|
+
}
|
|
8803
|
+
|
|
8804
|
+
/* Legend colors */
|
|
8805
|
+
.billing-legend-cache-hit { background: #93c5fd; }
|
|
8806
|
+
.billing-legend-cache-miss { background: #3b82f6; }
|
|
8807
|
+
.billing-legend-output { background: #10b981; }
|
|
8808
|
+
|
|
8809
|
+
/* ── Chart Tooltip ───────────────────────────────────────────────────── */
|
|
8810
|
+
.billing-chart-tooltip {
|
|
8811
|
+
display: none;
|
|
8812
|
+
position: fixed;
|
|
8813
|
+
background: var(--color-bg-primary);
|
|
8814
|
+
border: 1px solid var(--color-border-primary);
|
|
8815
|
+
border-radius: 8px;
|
|
8816
|
+
padding: 0.75rem;
|
|
8817
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
8818
|
+
z-index: 1000;
|
|
8819
|
+
min-width: 200px;
|
|
8820
|
+
pointer-events: none;
|
|
8821
|
+
}
|
|
8822
|
+
.tooltip-header {
|
|
8823
|
+
display: flex;
|
|
8824
|
+
justify-content: space-between;
|
|
8825
|
+
align-items: center;
|
|
8540
8826
|
margin-bottom: 0.5rem;
|
|
8827
|
+
padding-bottom: 0.5rem;
|
|
8828
|
+
border-bottom: 1px solid var(--color-border-primary);
|
|
8541
8829
|
}
|
|
8542
|
-
.
|
|
8543
|
-
font-
|
|
8544
|
-
font-weight: 700;
|
|
8830
|
+
.tooltip-date {
|
|
8831
|
+
font-weight: 600;
|
|
8545
8832
|
color: var(--color-text-primary);
|
|
8546
8833
|
}
|
|
8547
|
-
.
|
|
8834
|
+
.tooltip-total {
|
|
8835
|
+
font-size: 0.875rem;
|
|
8548
8836
|
color: var(--color-accent);
|
|
8837
|
+
font-weight: 500;
|
|
8838
|
+
}
|
|
8839
|
+
.tooltip-row {
|
|
8840
|
+
display: flex;
|
|
8841
|
+
align-items: center;
|
|
8842
|
+
gap: 0.5rem;
|
|
8843
|
+
padding: 0.25rem 0;
|
|
8844
|
+
font-size: 0.8125rem;
|
|
8845
|
+
}
|
|
8846
|
+
.tooltip-dot {
|
|
8847
|
+
width: 8px;
|
|
8848
|
+
height: 8px;
|
|
8849
|
+
border-radius: 50%;
|
|
8850
|
+
flex-shrink: 0;
|
|
8851
|
+
}
|
|
8852
|
+
.tooltip-cache-hit { background: #93c5fd; }
|
|
8853
|
+
.tooltip-cache-miss { background: #3b82f6; }
|
|
8854
|
+
.tooltip-output { background: #10b981; }
|
|
8855
|
+
.tooltip-label {
|
|
8856
|
+
flex: 1;
|
|
8857
|
+
color: var(--color-text-secondary);
|
|
8858
|
+
}
|
|
8859
|
+
.tooltip-value {
|
|
8860
|
+
font-weight: 500;
|
|
8861
|
+
color: var(--color-text-primary);
|
|
8862
|
+
}
|
|
8863
|
+
|
|
8864
|
+
/* ── Bottom Grid ─────────────────────────────────────────────────────── */
|
|
8865
|
+
.billing-bottom-grid {
|
|
8866
|
+
display: grid;
|
|
8867
|
+
grid-template-columns: repeat(2, 1fr);
|
|
8868
|
+
gap: 1rem;
|
|
8869
|
+
}
|
|
8870
|
+
@media (max-width: 768px) {
|
|
8871
|
+
.billing-bottom-grid { grid-template-columns: 1fr; }
|
|
8549
8872
|
}
|
|
8550
8873
|
.billing-section {
|
|
8551
8874
|
background: var(--color-bg-secondary);
|
|
8552
8875
|
border: 1px solid var(--color-border-primary);
|
|
8553
8876
|
border-radius: 12px;
|
|
8554
8877
|
padding: 1.25rem;
|
|
8555
|
-
margin-bottom: 1.25rem;
|
|
8556
8878
|
}
|
|
8557
8879
|
.billing-section h3 {
|
|
8558
|
-
font-size:
|
|
8880
|
+
font-size: 0.9375rem;
|
|
8559
8881
|
font-weight: 600;
|
|
8560
8882
|
color: var(--color-text-primary);
|
|
8561
8883
|
margin: 0 0 1rem 0;
|
|
8562
8884
|
}
|
|
8563
|
-
|
|
8564
|
-
|
|
8565
|
-
|
|
8566
|
-
|
|
8885
|
+
|
|
8886
|
+
/* ── Token Breakdown Bars ────────────────────────────────────────────── */
|
|
8887
|
+
.billing-token-bars {
|
|
8888
|
+
display: flex;
|
|
8889
|
+
flex-direction: column;
|
|
8890
|
+
gap: 0.875rem;
|
|
8891
|
+
}
|
|
8892
|
+
.billing-token-bar-item {
|
|
8893
|
+
display: flex;
|
|
8894
|
+
flex-direction: column;
|
|
8895
|
+
gap: 0.375rem;
|
|
8567
8896
|
}
|
|
8568
|
-
.billing-token-
|
|
8897
|
+
.billing-token-bar-header {
|
|
8569
8898
|
display: flex;
|
|
8570
8899
|
justify-content: space-between;
|
|
8571
8900
|
align-items: center;
|
|
8572
|
-
padding: 0.5rem 0.75rem;
|
|
8573
|
-
background: var(--color-bg-primary);
|
|
8574
|
-
border-radius: 8px;
|
|
8575
8901
|
}
|
|
8576
|
-
.billing-token-label {
|
|
8902
|
+
.billing-token-bar-label {
|
|
8577
8903
|
font-size: 0.8125rem;
|
|
8578
8904
|
color: var(--color-text-secondary);
|
|
8579
8905
|
}
|
|
8580
|
-
.billing-token-value {
|
|
8581
|
-
font-size: 0.
|
|
8906
|
+
.billing-token-bar-value {
|
|
8907
|
+
font-size: 0.8125rem;
|
|
8582
8908
|
font-weight: 600;
|
|
8583
8909
|
color: var(--color-text-primary);
|
|
8584
8910
|
}
|
|
8585
|
-
.billing-
|
|
8586
|
-
|
|
8587
|
-
|
|
8911
|
+
.billing-token-bar-track {
|
|
8912
|
+
height: 6px;
|
|
8913
|
+
background: var(--color-bg-tertiary);
|
|
8914
|
+
border-radius: 3px;
|
|
8915
|
+
overflow: hidden;
|
|
8588
8916
|
}
|
|
8589
|
-
.billing-
|
|
8590
|
-
|
|
8591
|
-
|
|
8592
|
-
|
|
8593
|
-
border-bottom: 1px solid var(--color-border-primary);
|
|
8917
|
+
.billing-token-bar-fill {
|
|
8918
|
+
height: 100%;
|
|
8919
|
+
border-radius: 3px;
|
|
8920
|
+
transition: width 0.3s ease;
|
|
8594
8921
|
}
|
|
8595
|
-
.billing-
|
|
8596
|
-
|
|
8597
|
-
font-weight: 600;
|
|
8598
|
-
color: var(--color-text-secondary);
|
|
8599
|
-
text-transform: uppercase;
|
|
8922
|
+
.billing-bar-prompt {
|
|
8923
|
+
background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
|
|
8600
8924
|
}
|
|
8601
|
-
.billing-
|
|
8602
|
-
|
|
8603
|
-
color: var(--color-text-primary);
|
|
8925
|
+
.billing-bar-completion {
|
|
8926
|
+
background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
|
|
8604
8927
|
}
|
|
8605
|
-
.billing-
|
|
8606
|
-
|
|
8928
|
+
.billing-bar-cache-read {
|
|
8929
|
+
background: linear-gradient(90deg, #93c5fd 0%, #bfdbfe 100%);
|
|
8607
8930
|
}
|
|
8608
|
-
.billing-
|
|
8609
|
-
|
|
8931
|
+
.billing-bar-cache-write {
|
|
8932
|
+
background: linear-gradient(90deg, #6366f1 0%, #818cf8 100%);
|
|
8610
8933
|
}
|
|
8611
|
-
|
|
8934
|
+
|
|
8935
|
+
/* ── Model List ──────────────────────────────────────────────────────── */
|
|
8936
|
+
.billing-model-list {
|
|
8612
8937
|
display: flex;
|
|
8613
|
-
|
|
8614
|
-
gap:
|
|
8615
|
-
height: 120px;
|
|
8616
|
-
padding-top: 1rem;
|
|
8938
|
+
flex-direction: column;
|
|
8939
|
+
gap: 0.75rem;
|
|
8617
8940
|
}
|
|
8618
|
-
.billing-
|
|
8619
|
-
|
|
8941
|
+
.billing-model-empty {
|
|
8942
|
+
color: var(--color-text-secondary);
|
|
8943
|
+
font-size: 0.875rem;
|
|
8944
|
+
padding: 1rem 0;
|
|
8945
|
+
}
|
|
8946
|
+
.billing-model-row {
|
|
8947
|
+
display: grid;
|
|
8948
|
+
grid-template-columns: 1fr 100px 70px;
|
|
8949
|
+
align-items: center;
|
|
8950
|
+
gap: 0.75rem;
|
|
8951
|
+
}
|
|
8952
|
+
.billing-model-info {
|
|
8620
8953
|
display: flex;
|
|
8621
8954
|
flex-direction: column;
|
|
8622
|
-
|
|
8623
|
-
|
|
8624
|
-
height: 100%;
|
|
8955
|
+
gap: 0.125rem;
|
|
8956
|
+
min-width: 0;
|
|
8625
8957
|
}
|
|
8626
|
-
.billing-
|
|
8627
|
-
|
|
8628
|
-
|
|
8629
|
-
|
|
8630
|
-
|
|
8631
|
-
|
|
8632
|
-
|
|
8958
|
+
.billing-model-name {
|
|
8959
|
+
font-size: 0.8125rem;
|
|
8960
|
+
font-weight: 500;
|
|
8961
|
+
color: var(--color-text-primary);
|
|
8962
|
+
white-space: nowrap;
|
|
8963
|
+
overflow: hidden;
|
|
8964
|
+
text-overflow: ellipsis;
|
|
8633
8965
|
}
|
|
8634
|
-
.billing-
|
|
8635
|
-
font-size: 0.
|
|
8966
|
+
.billing-model-meta {
|
|
8967
|
+
font-size: 0.6875rem;
|
|
8636
8968
|
color: var(--color-text-secondary);
|
|
8637
|
-
|
|
8638
|
-
|
|
8969
|
+
}
|
|
8970
|
+
.billing-model-bar-track {
|
|
8971
|
+
height: 6px;
|
|
8972
|
+
background: var(--color-bg-tertiary);
|
|
8973
|
+
border-radius: 3px;
|
|
8974
|
+
overflow: hidden;
|
|
8975
|
+
}
|
|
8976
|
+
.billing-model-bar-fill {
|
|
8977
|
+
height: 100%;
|
|
8978
|
+
background: linear-gradient(90deg, var(--color-accent) 0%, #818cf8 100%);
|
|
8979
|
+
border-radius: 3px;
|
|
8980
|
+
}
|
|
8981
|
+
.billing-model-cost {
|
|
8982
|
+
font-size: 0.8125rem;
|
|
8983
|
+
font-weight: 600;
|
|
8984
|
+
font-family: var(--font-mono);
|
|
8985
|
+
color: var(--color-text-primary);
|
|
8986
|
+
text-align: right;
|
|
8639
8987
|
}
|
|
8640
8988
|
|
|
8641
8989
|
/* ── MCP panel ───────────────────────────────────────────────────── */
|