dsh-context 0.4.0 → 0.6.0
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/LICENSE +201 -21
- package/README.md +9 -5
- package/lib/client.js +243 -40
- package/lib/index.js +41 -9
- package/package.json +7 -4
package/LICENSE
CHANGED
|
@@ -1,21 +1,201 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
1
|
+
Apache License
|
|
2
|
+
Version 2.0, January 2004
|
|
3
|
+
http://www.apache.org/licenses/
|
|
4
|
+
|
|
5
|
+
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
|
6
|
+
|
|
7
|
+
1. Definitions.
|
|
8
|
+
|
|
9
|
+
"License" shall mean the terms and conditions for use, reproduction,
|
|
10
|
+
and distribution as defined by Sections 1 through 9 of this document.
|
|
11
|
+
|
|
12
|
+
"Licensor" shall mean the copyright owner or entity authorized by
|
|
13
|
+
the copyright owner that is granting the License.
|
|
14
|
+
|
|
15
|
+
"Legal Entity" shall mean the union of the acting entity and all
|
|
16
|
+
other entities that control, are controlled by, or are under common
|
|
17
|
+
control with that entity. For the purposes of this definition,
|
|
18
|
+
"control" means (i) the power, direct or indirect, to cause the
|
|
19
|
+
direction or management of such entity, whether by contract or
|
|
20
|
+
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
|
21
|
+
outstanding shares, or (iii) beneficial ownership of such entity.
|
|
22
|
+
|
|
23
|
+
"You" (or "Your") shall mean an individual or Legal Entity
|
|
24
|
+
exercising permissions granted by this License.
|
|
25
|
+
|
|
26
|
+
"Source" form shall mean the preferred form for making modifications,
|
|
27
|
+
including but not limited to software source code, documentation
|
|
28
|
+
source, and configuration files.
|
|
29
|
+
|
|
30
|
+
"Object" form shall mean any form resulting from mechanical
|
|
31
|
+
transformation or translation of a Source form, including but
|
|
32
|
+
not limited to compiled object code, generated documentation,
|
|
33
|
+
and conversions to other media types.
|
|
34
|
+
|
|
35
|
+
"Work" shall mean the work of authorship, whether in Source or
|
|
36
|
+
Object form, made available under the License, as indicated by a
|
|
37
|
+
copyright notice that is included in or attached to the work
|
|
38
|
+
(an example is provided in the Appendix below).
|
|
39
|
+
|
|
40
|
+
"Derivative Works" shall mean any work, whether in Source or Object
|
|
41
|
+
form, that is based on (or derived from) the Work and for which the
|
|
42
|
+
editorial revisions, annotations, elaborations, or other modifications
|
|
43
|
+
represent, as a whole, an original work of authorship. For the purposes
|
|
44
|
+
of this License, Derivative Works shall not include works that remain
|
|
45
|
+
separable from, or merely link (or bind by name) to the interfaces of,
|
|
46
|
+
the Work and Derivative Works thereof.
|
|
47
|
+
|
|
48
|
+
"Contribution" shall mean any work of authorship, including
|
|
49
|
+
the original version of the Work and any modifications or additions
|
|
50
|
+
to that Work or Derivative Works thereof, that is intentionally
|
|
51
|
+
submitted to Licensor for inclusion in the Work by the copyright owner
|
|
52
|
+
or by an individual or Legal Entity authorized to submit on behalf of
|
|
53
|
+
the copyright owner. For the purposes of this definition, "submitted"
|
|
54
|
+
means any form of electronic, verbal, or written communication sent
|
|
55
|
+
to the Licensor or its representatives, including but not limited to
|
|
56
|
+
communication on electronic mailing lists, source code control systems,
|
|
57
|
+
and issue tracking systems that are managed by, or on behalf of, the
|
|
58
|
+
Licensor for the purpose of discussing and improving the Work, but
|
|
59
|
+
excluding communication that is conspicuously marked or otherwise
|
|
60
|
+
designated in writing by the copyright owner as "Not a Contribution."
|
|
61
|
+
|
|
62
|
+
"Contributor" shall mean Licensor and any individual or Legal Entity
|
|
63
|
+
on behalf of whom a Contribution has been received by Licensor and
|
|
64
|
+
subsequently incorporated within the Work.
|
|
65
|
+
|
|
66
|
+
2. Grant of Copyright License. Subject to the terms and conditions of
|
|
67
|
+
this License, each Contributor hereby grants to You a perpetual,
|
|
68
|
+
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
|
69
|
+
copyright license to reproduce, prepare Derivative Works of,
|
|
70
|
+
publicly display, publicly perform, sublicense, and distribute the
|
|
71
|
+
Work and such Derivative Works in Source or Object form.
|
|
72
|
+
|
|
73
|
+
3. Grant of Patent License. Subject to the terms and conditions of
|
|
74
|
+
this License, each Contributor hereby grants to You a perpetual,
|
|
75
|
+
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
|
76
|
+
(except as stated in this section) patent license to make, have made,
|
|
77
|
+
use, offer to sell, sell, import, and otherwise transfer the Work,
|
|
78
|
+
where such license applies only to those patent claims licensable
|
|
79
|
+
by such Contributor that are necessarily infringed by their
|
|
80
|
+
Contribution(s) alone or by combination of their Contribution(s)
|
|
81
|
+
with the Work to which such Contribution(s) was submitted. If You
|
|
82
|
+
institute patent litigation against any entity (including a
|
|
83
|
+
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
|
84
|
+
or a Contribution incorporated within the Work constitutes direct
|
|
85
|
+
or contributory patent infringement, then any patent licenses
|
|
86
|
+
granted to You under this License for that Work shall terminate
|
|
87
|
+
as of the date such litigation is filed.
|
|
88
|
+
|
|
89
|
+
4. Redistribution. You may reproduce and distribute copies of the
|
|
90
|
+
Work or Derivative Works thereof in any medium, with or without
|
|
91
|
+
modifications, and in Source or Object form, provided that You
|
|
92
|
+
meet the following conditions:
|
|
93
|
+
|
|
94
|
+
(a) You must give any other recipients of the Work or
|
|
95
|
+
Derivative Works a copy of this License; and
|
|
96
|
+
|
|
97
|
+
(b) You must cause any modified files to carry prominent notices
|
|
98
|
+
stating that You changed the files; and
|
|
99
|
+
|
|
100
|
+
(c) You must retain, in the Source form of any Derivative Works
|
|
101
|
+
that You distribute, all copyright, patent, trademark, and
|
|
102
|
+
attribution notices from the Source form of the Work,
|
|
103
|
+
excluding those notices that do not pertain to any part of
|
|
104
|
+
the Derivative Works; and
|
|
105
|
+
|
|
106
|
+
(d) If the Work includes a "NOTICE" text file as part of its
|
|
107
|
+
distribution, then any Derivative Works that You distribute must
|
|
108
|
+
include a readable copy of the attribution notices contained
|
|
109
|
+
within such NOTICE file, excluding those notices that do not
|
|
110
|
+
pertain to any part of the Derivative Works, in at least one
|
|
111
|
+
of the following places: within a NOTICE text file distributed
|
|
112
|
+
as part of the Derivative Works; within the Source form or
|
|
113
|
+
documentation, if provided along with the Derivative Works; or,
|
|
114
|
+
within a display generated by the Derivative Works, if and
|
|
115
|
+
wherever such third-party notices normally appear. The contents
|
|
116
|
+
of the NOTICE file are for informational purposes only and
|
|
117
|
+
do not modify the License. You may add Your own attribution
|
|
118
|
+
notices within Derivative Works that You distribute, alongside
|
|
119
|
+
or as an addendum to the NOTICE text from the Work, provided
|
|
120
|
+
that such additional attribution notices cannot be construed
|
|
121
|
+
as modifying the License.
|
|
122
|
+
|
|
123
|
+
You may add Your own copyright statement to Your modifications and
|
|
124
|
+
may provide additional or different license terms and conditions
|
|
125
|
+
for use, reproduction, or distribution of Your modifications, or
|
|
126
|
+
for any such Derivative Works as a whole, provided Your use,
|
|
127
|
+
reproduction, and distribution of the Work otherwise complies with
|
|
128
|
+
the conditions stated in this License.
|
|
129
|
+
|
|
130
|
+
5. Submission of Contributions. Unless You explicitly state otherwise,
|
|
131
|
+
any Contribution intentionally submitted for inclusion in the Work
|
|
132
|
+
by You to the Licensor shall be under the terms and conditions of
|
|
133
|
+
this License, without any additional terms or conditions.
|
|
134
|
+
Notwithstanding the above, nothing herein shall supersede or modify
|
|
135
|
+
the terms of any separate license agreement you may have executed
|
|
136
|
+
with Licensor regarding such Contributions.
|
|
137
|
+
|
|
138
|
+
6. Trademarks. This License does not grant permission to use the trade
|
|
139
|
+
names, trademarks, service marks, or product names of the Licensor,
|
|
140
|
+
except as required for reasonable and customary use in describing the
|
|
141
|
+
origin of the Work and reproducing the content of the NOTICE file.
|
|
142
|
+
|
|
143
|
+
7. Disclaimer of Warranty. Unless required by applicable law or
|
|
144
|
+
agreed to in writing, Licensor provides the Work (and each
|
|
145
|
+
Contributor provides its Contributions) on an "AS IS" BASIS,
|
|
146
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
|
147
|
+
implied, including, without limitation, any warranties or conditions
|
|
148
|
+
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
|
149
|
+
PARTICULAR PURPOSE. You are solely responsible for determining the
|
|
150
|
+
appropriateness of using or redistributing the Work and assume any
|
|
151
|
+
risks associated with Your exercise of permissions under this License.
|
|
152
|
+
|
|
153
|
+
8. Limitation of Liability. In no event and under no legal theory,
|
|
154
|
+
whether in tort (including negligence), contract, or otherwise,
|
|
155
|
+
unless required by applicable law (such as deliberate and grossly
|
|
156
|
+
negligent acts) or agreed to in writing, shall any Contributor be
|
|
157
|
+
liable to You for damages, including any direct, indirect, special,
|
|
158
|
+
incidental, or consequential damages of any character arising as a
|
|
159
|
+
result of this License or out of the use or inability to use the
|
|
160
|
+
Work (including but not limited to damages for loss of goodwill,
|
|
161
|
+
work stoppage, computer failure or malfunction, or any and all
|
|
162
|
+
other commercial damages or losses), even if such Contributor
|
|
163
|
+
has been advised of the possibility of such damages.
|
|
164
|
+
|
|
165
|
+
9. Accepting Warranty or Additional Liability. While redistributing
|
|
166
|
+
the Work or Derivative Works thereof, You may choose to offer,
|
|
167
|
+
and charge a fee for, acceptance of support, warranty, indemnity,
|
|
168
|
+
or other liability obligations and/or rights consistent with this
|
|
169
|
+
License. However, in accepting such obligations, You may act only
|
|
170
|
+
on Your own behalf and on Your sole responsibility, not on behalf
|
|
171
|
+
of any other Contributor, and only if You agree to indemnify,
|
|
172
|
+
defend, and hold each Contributor harmless for any liability
|
|
173
|
+
incurred by, or claims asserted against, such Contributor by reason
|
|
174
|
+
of your accepting any such warranty or additional liability.
|
|
175
|
+
|
|
176
|
+
END OF TERMS AND CONDITIONS
|
|
177
|
+
|
|
178
|
+
APPENDIX: How to apply the Apache License to your work.
|
|
179
|
+
|
|
180
|
+
To apply the Apache License to your work, attach the following
|
|
181
|
+
boilerplate notice, with the fields enclosed by brackets "[]"
|
|
182
|
+
replaced with your own identifying information. (Don't include
|
|
183
|
+
the brackets!) The text should be enclosed in the appropriate
|
|
184
|
+
comment syntax for the file format. We also recommend that a
|
|
185
|
+
file or class name and description of purpose be included on the
|
|
186
|
+
same "printed page" as the copyright notice for easier
|
|
187
|
+
identification within third-party archives.
|
|
188
|
+
|
|
189
|
+
Copyright 2025 bowenliang123
|
|
190
|
+
|
|
191
|
+
Licensed under the Apache License, Version 2.0 (the "License");
|
|
192
|
+
you may not use this file except in compliance with the License.
|
|
193
|
+
You may obtain a copy of the License at
|
|
194
|
+
|
|
195
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
196
|
+
|
|
197
|
+
Unless required by applicable law or agreed to in writing, software
|
|
198
|
+
distributed under the License is distributed on an "AS IS" BASIS,
|
|
199
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
200
|
+
See the License for the specific language governing permissions and
|
|
201
|
+
limitations under the License.
|
package/README.md
CHANGED
|
@@ -61,15 +61,19 @@ Open any session and click **上下文 / Context** (to the right of Chat and Tra
|
|
|
61
61
|
|
|
62
62
|
## Development
|
|
63
63
|
|
|
64
|
+
The project is a pnpm workspace root (`pnpm-workspace.yaml`), so `pnpm install` never walks up into a parent workspace.
|
|
65
|
+
|
|
64
66
|
```sh
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
67
|
+
pnpm install # devDependencies only — the plugin itself stays dependency-free
|
|
68
|
+
pnpm run typecheck # tsc --noEmit (strict)
|
|
69
|
+
pnpm run build # esbuild: lib/index.js (host) + lib/client.js (client bundle)
|
|
70
|
+
pnpm test # typecheck + functional tests for both halves
|
|
69
71
|
```
|
|
70
72
|
|
|
71
73
|
`build.mjs` also smoke-checks the outputs (both halves must parse; the host half must import with the `name`/`inject`/`apply` plugin shape).
|
|
72
74
|
|
|
75
|
+
Commits are guarded by a [husky](https://typicode.github.io/husky/) pre-commit hook that runs `pnpm run typecheck` (`tsc --noEmit`, strict).
|
|
76
|
+
|
|
73
77
|
## Files
|
|
74
78
|
|
|
75
79
|
| File | Role |
|
|
@@ -84,4 +88,4 @@ npm test # typecheck + functional tests for both halves
|
|
|
84
88
|
|
|
85
89
|
## License
|
|
86
90
|
|
|
87
|
-
|
|
91
|
+
[Apache-2.0](https://www.apache.org/licenses/LICENSE-2.0)
|
package/lib/client.js
CHANGED
|
@@ -18,12 +18,17 @@ const DICT_ZH = {
|
|
|
18
18
|
"overview.title": "\u5F53\u524D\u6784\u6210",
|
|
19
19
|
"overview.ofWindow": "tokens\uFF08\u7EA6 {p}%\uFF09",
|
|
20
20
|
"overview.estimate": "tokens\uFF08\u4F30\u7B97\uFF09",
|
|
21
|
+
"overview.actual": "\xB7 \u4E0A\u6B21\u5B9E\u9645 prompt {n}",
|
|
21
22
|
"tools.top": "\u5DE5\u5177\u5B9A\u4E49 Top\uFF1A",
|
|
22
23
|
"tools.more": "\u7B49 {n} \u4E2A",
|
|
23
24
|
"trend.title": "\u5386\u53F2\u8D8B\u52BF",
|
|
24
|
-
"
|
|
25
|
+
"gran.step": "\u6B65\u9AA4",
|
|
26
|
+
"gran.turn": "\u8F6E\u6B21",
|
|
27
|
+
"trend.hint": "\u6BCF\u6B21\u6A21\u578B\u8BF7\u6C42\u4E00\u6BB5\uFF1B\u70B9\u51FB\u67F1\u5B50\u67E5\u770B\u8BE6\u60C5\uFF0C\u2702 \u8868\u793A\u538B\u7F29/\u526A\u679D\uFF1B\u5DE6\u53F3\u6ED1\u52A8\u53EF\u56DE\u770B\u66F4\u65E9",
|
|
25
28
|
"trend.empty": "\u53D1\u8D77\u4E00\u8F6E\u5BF9\u8BDD\u540E\uFF0C\u8FD9\u91CC\u4F1A\u5C55\u793A\u6BCF\u6B21\u6A21\u578B\u8BF7\u6C42\u7684\u4E0A\u4E0B\u6587\u6784\u6210",
|
|
26
29
|
"detail.step": "T{t} \xB7 \u7B2C {s} \u6B65",
|
|
30
|
+
"detail.turn": "T{t} \xB7 \u5171 {n} \u6B65",
|
|
31
|
+
"detail.lastStep": "\u672B\u6B65",
|
|
27
32
|
"detail.estTotal": "\u4F30\u7B97\u5408\u8BA1 \u2248 {n}",
|
|
28
33
|
"detail.actual": "\u5B9E\u9645 prompt {n}",
|
|
29
34
|
"detail.output": "\u8F93\u51FA {n}",
|
|
@@ -37,6 +42,7 @@ const DICT_ZH = {
|
|
|
37
42
|
"error": "\u4E0A\u4E0B\u6587\u6570\u636E\u8BFB\u53D6\u5931\u8D25\uFF1A",
|
|
38
43
|
"footer": "\u4F30\u7B97\u53E3\u5F84\uFF1A\u4E0E dsh \u5185\u7F6E tokenMeter \u76F8\u540C\u7684\u56FA\u5B9A\u5BC6\u5EA6\u542F\u53D1\u5F0F\uFF08\u7EA6 4 \u5B57\u7B26 \u2248 1 token\uFF09\uFF1B\u300C\u5B9E\u9645\u300D\u4E3A\u4F9B\u5E94\u5546\u4E0A\u62A5\u7528\u91CF\u3002",
|
|
39
44
|
"tip.step": "T{t} \xB7 \u7B2C{s}\u6B65",
|
|
45
|
+
"tip.turn": "T{t} \xB7 \u5171 {n} \u6B65",
|
|
40
46
|
"tip.total": "\u5408\u8BA1 \u2248 {n}",
|
|
41
47
|
"tip.actual": "\uFF08\u5B9E\u9645 {n}\uFF09",
|
|
42
48
|
"ev.compaction": "\u538B\u7F29\u4E0A\u4E0B\u6587\uFF08\u6458\u8981\u66FF\u6362 {n} \u6761\u6D88\u606F\uFF09",
|
|
@@ -67,12 +73,17 @@ const DICT_EN = {
|
|
|
67
73
|
"overview.title": "Current composition",
|
|
68
74
|
"overview.ofWindow": "tokens (~{p}%)",
|
|
69
75
|
"overview.estimate": "tokens (estimated)",
|
|
76
|
+
"overview.actual": "\xB7 last actual prompt {n}",
|
|
70
77
|
"tools.top": "Top tool schemas:",
|
|
71
78
|
"tools.more": "of {n}",
|
|
72
79
|
"trend.title": "History",
|
|
73
|
-
"
|
|
80
|
+
"gran.step": "Step",
|
|
81
|
+
"gran.turn": "Turn",
|
|
82
|
+
"trend.hint": "one bar per model request; click a bar for details, \u2702 marks compaction/prune; scroll sideways to see earlier",
|
|
74
83
|
"trend.empty": "Send a message and each model request\u2019s context makeup shows up here",
|
|
75
84
|
"detail.step": "T{t} \xB7 step {s}",
|
|
85
|
+
"detail.turn": "T{t} \xB7 {n} steps",
|
|
86
|
+
"detail.lastStep": "last step",
|
|
76
87
|
"detail.estTotal": "estimated \u2248 {n}",
|
|
77
88
|
"detail.actual": "actual prompt {n}",
|
|
78
89
|
"detail.output": "output {n}",
|
|
@@ -86,6 +97,7 @@ const DICT_EN = {
|
|
|
86
97
|
"error": "Failed to read context data: ",
|
|
87
98
|
"footer": "Estimate: same fixed-density heuristic as dsh\u2019s built-in tokenMeter (~4 chars \u2248 1 token); \u201Cactual\u201D is provider-reported usage.",
|
|
88
99
|
"tip.step": "T{t} \xB7 step {s}",
|
|
100
|
+
"tip.turn": "T{t} \xB7 {n} steps",
|
|
89
101
|
"tip.total": "total \u2248 {n}",
|
|
90
102
|
"tip.actual": " (actual {n})",
|
|
91
103
|
"ev.compaction": "Context compacted (summary replaced {n} messages)",
|
|
@@ -118,6 +130,21 @@ function fmtTime(t) {
|
|
|
118
130
|
}
|
|
119
131
|
return p(d.getHours()) + ":" + p(d.getMinutes()) + ":" + p(d.getSeconds());
|
|
120
132
|
}
|
|
133
|
+
function aggregateByTurn(requests) {
|
|
134
|
+
const out = [];
|
|
135
|
+
let runSteps = 0;
|
|
136
|
+
for (const req of requests) {
|
|
137
|
+
const last = out.length > 0 ? out[out.length - 1] : null;
|
|
138
|
+
if (last !== null && (last.turn ?? 0) === (req.turn ?? 0)) {
|
|
139
|
+
runSteps++;
|
|
140
|
+
out[out.length - 1] = { ...req, stepCount: runSteps };
|
|
141
|
+
} else {
|
|
142
|
+
runSteps = 1;
|
|
143
|
+
out.push({ ...req, stepCount: 1 });
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
return out;
|
|
147
|
+
}
|
|
121
148
|
function makeView(ctx, t) {
|
|
122
149
|
function tr(key, vars) {
|
|
123
150
|
return t(key, vars);
|
|
@@ -159,17 +186,51 @@ function makeView(ctx, t) {
|
|
|
159
186
|
let total = 0;
|
|
160
187
|
for (const p of props.parts) total += p.value;
|
|
161
188
|
const scale = props.max !== void 0 && props.max > total ? props.max : total;
|
|
189
|
+
const wrapRef = React.useRef(null);
|
|
190
|
+
const [tip, setTip] = React.useState(null);
|
|
191
|
+
const showTip = (e, p) => {
|
|
192
|
+
const rect = wrapRef.current?.getBoundingClientRect();
|
|
193
|
+
const left = rect ? e.clientX - rect.left : 50;
|
|
194
|
+
const width = rect?.width ?? 200;
|
|
195
|
+
setTip({
|
|
196
|
+
key: p.key,
|
|
197
|
+
text: catLabel(p.key) + " " + fmt(p.value) + " (" + Math.round(p.value / total * 100) + "%)",
|
|
198
|
+
left: Math.max(48, Math.min(left, width - 48))
|
|
199
|
+
});
|
|
200
|
+
if (props.onHoverKey !== void 0) props.onHoverKey(p.key);
|
|
201
|
+
};
|
|
202
|
+
const clearHover = () => {
|
|
203
|
+
setTip(null);
|
|
204
|
+
if (props.onHoverKey !== void 0) props.onHoverKey(null);
|
|
205
|
+
};
|
|
162
206
|
return h(
|
|
163
207
|
"div",
|
|
164
|
-
{ className: "lc-stacked"
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
208
|
+
{ className: "lc-stacked-wrap" },
|
|
209
|
+
h(
|
|
210
|
+
"div",
|
|
211
|
+
{
|
|
212
|
+
className: "lc-stacked",
|
|
213
|
+
style: { height: (props.height || 14) + "px" },
|
|
214
|
+
ref: wrapRef,
|
|
215
|
+
onMouseLeave: clearHover
|
|
216
|
+
},
|
|
217
|
+
total <= 0 ? null : props.parts.map((p) => {
|
|
218
|
+
if (!p.value) return null;
|
|
219
|
+
const on = props.hoverKey !== void 0 && props.hoverKey === p.key;
|
|
220
|
+
return h("div", {
|
|
221
|
+
key: p.key,
|
|
222
|
+
className: "lc-stacked-seg" + (on ? " lc-stacked-seg-on" : ""),
|
|
223
|
+
style: { width: p.value / scale * 100 + "%", background: p.color },
|
|
224
|
+
onMouseEnter: (e) => {
|
|
225
|
+
showTip(e, p);
|
|
226
|
+
},
|
|
227
|
+
onMouseMove: (e) => {
|
|
228
|
+
showTip(e, p);
|
|
229
|
+
}
|
|
230
|
+
});
|
|
231
|
+
})
|
|
232
|
+
),
|
|
233
|
+
tip ? h("div", { className: "lc-bar-tip", style: { left: tip.left + "px" } }, tip.text) : null
|
|
173
234
|
);
|
|
174
235
|
}
|
|
175
236
|
function Legend(props) {
|
|
@@ -179,9 +240,19 @@ function makeView(ctx, t) {
|
|
|
179
240
|
"div",
|
|
180
241
|
{ className: "lc-legend" },
|
|
181
242
|
props.parts.map((p) => {
|
|
243
|
+
const on = props.hoverKey !== void 0 && props.hoverKey === p.key;
|
|
182
244
|
return h(
|
|
183
245
|
"span",
|
|
184
|
-
{
|
|
246
|
+
{
|
|
247
|
+
key: p.key,
|
|
248
|
+
className: "lc-chip" + (on ? " lc-chip-on" : ""),
|
|
249
|
+
onMouseEnter: () => {
|
|
250
|
+
if (props.onHoverKey !== void 0) props.onHoverKey(p.key);
|
|
251
|
+
},
|
|
252
|
+
onMouseLeave: () => {
|
|
253
|
+
if (props.onHoverKey !== void 0) props.onHoverKey(null);
|
|
254
|
+
}
|
|
255
|
+
},
|
|
185
256
|
h("i", { style: { background: p.color } }),
|
|
186
257
|
catLabel(p.key) + " " + fmt(p.value),
|
|
187
258
|
total > 0 ? h("em", null, Math.round(p.value / total * 100) + "%") : null
|
|
@@ -197,6 +268,7 @@ function makeView(ctx, t) {
|
|
|
197
268
|
const CHART_H = 112;
|
|
198
269
|
const BAR_W = 14;
|
|
199
270
|
const BAR_GAP = 2;
|
|
271
|
+
const TURN_COLORS = ["#6366f1", "#f59e0b", "#22c55e", "#a855f7", "#3b82f6", "#14b8a6", "#ef4444", "#ec4899"];
|
|
200
272
|
function TrendChart(props) {
|
|
201
273
|
const requests = props.requests;
|
|
202
274
|
let maxTotal = 1;
|
|
@@ -214,17 +286,31 @@ function makeView(ctx, t) {
|
|
|
214
286
|
const groups = [];
|
|
215
287
|
for (const req of requests) {
|
|
216
288
|
let grp = groups.length > 0 ? groups[groups.length - 1] : null;
|
|
217
|
-
if (grp === null || grp.turn !== req.turn) {
|
|
218
|
-
grp = { turn: req.turn ?? 0, count: 0 };
|
|
289
|
+
if (grp === null || grp.turn !== (req.turn ?? 0)) {
|
|
290
|
+
grp = { turn: req.turn ?? 0, count: 0, span: 0, agg: req.stepCount !== void 0 };
|
|
219
291
|
groups.push(grp);
|
|
220
292
|
}
|
|
221
293
|
grp.count++;
|
|
294
|
+
grp.span += req.stepCount ?? 1;
|
|
222
295
|
}
|
|
223
296
|
const scrollRef = React.useRef(null);
|
|
224
|
-
React.
|
|
297
|
+
const scrolledOnce = React.useRef(false);
|
|
298
|
+
const [edges, setEdges] = React.useState({ left: false, right: false });
|
|
299
|
+
const updateEdges = (el) => {
|
|
300
|
+
const left = el.scrollLeft > 4;
|
|
301
|
+
const right = el.scrollLeft + el.clientWidth < el.scrollWidth - 4;
|
|
302
|
+
setEdges((prev) => prev.left === left && prev.right === right ? prev : { left, right });
|
|
303
|
+
};
|
|
304
|
+
React.useLayoutEffect(() => {
|
|
225
305
|
const el = scrollRef.current;
|
|
226
306
|
if (el === null) return;
|
|
227
|
-
if (
|
|
307
|
+
if (!scrolledOnce.current) {
|
|
308
|
+
scrolledOnce.current = true;
|
|
309
|
+
el.scrollLeft = el.scrollWidth;
|
|
310
|
+
} else if (el.scrollLeft + el.clientWidth >= el.scrollWidth - 24) {
|
|
311
|
+
el.scrollLeft = el.scrollWidth;
|
|
312
|
+
}
|
|
313
|
+
updateEdges(el);
|
|
228
314
|
});
|
|
229
315
|
return h(
|
|
230
316
|
"div",
|
|
@@ -238,23 +324,44 @@ function makeView(ctx, t) {
|
|
|
238
324
|
),
|
|
239
325
|
h(
|
|
240
326
|
"div",
|
|
241
|
-
{
|
|
327
|
+
{
|
|
328
|
+
className: "lc-chart-scroll",
|
|
329
|
+
ref: scrollRef,
|
|
330
|
+
onScroll: (e) => {
|
|
331
|
+
updateEdges(e.currentTarget);
|
|
332
|
+
}
|
|
333
|
+
},
|
|
334
|
+
// Edge fades: visible whenever more history sits beyond the viewport,
|
|
335
|
+
// so the horizontal scroll affordance is obvious.
|
|
336
|
+
edges.left ? h("div", { className: "lc-chart-fade lc-chart-fade-l" }) : null,
|
|
337
|
+
// Hovering a bar previews it in the detail below; leaving the plot
|
|
338
|
+
// clears the preview (a pinned selection, if any, takes over again).
|
|
242
339
|
h(
|
|
243
340
|
"div",
|
|
244
|
-
{ className: "lc-chart"
|
|
341
|
+
{ className: "lc-chart", onMouseLeave: () => {
|
|
342
|
+
props.onHover(null);
|
|
343
|
+
} },
|
|
245
344
|
h("div", { className: "lc-grid lc-grid-top" }),
|
|
246
345
|
h("div", { className: "lc-grid lc-grid-mid" }),
|
|
247
346
|
requests.map((req, i) => {
|
|
248
347
|
const selected = props.selectedSeq === req.seq;
|
|
249
|
-
const
|
|
348
|
+
const hovered = props.hoveredSeq === req.seq;
|
|
349
|
+
const inTurn = props.activeTurn !== null && (req.turn ?? 0) === props.activeTurn;
|
|
350
|
+
const tip = (req.stepCount !== void 0 && req.stepCount > 1 ? tr("tip.turn", { t: req.turn ?? 0, n: req.stepCount }) : tr("tip.step", { t: req.turn ?? 0, s: req.step ?? 0 })) + " \xB7 " + fmtTime(req.time) + "\n" + tr("tip.total", { n: fmt(req.total) }) + (req.prompt !== void 0 ? tr("tip.actual", { n: fmt(req.prompt) }) : "") + "\n" + CATS.map((c) => catLabel(c.key) + " " + fmt(req[c.key] || 0)).join(" / ");
|
|
250
351
|
return h(
|
|
251
352
|
"div",
|
|
252
353
|
{
|
|
253
354
|
key: req.seq,
|
|
254
|
-
|
|
355
|
+
// Uniform column width in BOTH granularities: turn aggregates
|
|
356
|
+
// keep the same fixed width as step bars.
|
|
357
|
+
className: "lc-bar" + (selected ? " lc-bar-selected" : "") + (hovered ? " lc-bar-hovered" : "") + (inTurn ? " lc-bar-in-turn" : ""),
|
|
358
|
+
style: { width: BAR_W + "px" },
|
|
255
359
|
title: tip,
|
|
256
360
|
onClick: () => {
|
|
257
361
|
props.onSelect(selected ? null : req.seq);
|
|
362
|
+
},
|
|
363
|
+
onMouseEnter: () => {
|
|
364
|
+
props.onHover(req.seq);
|
|
258
365
|
}
|
|
259
366
|
},
|
|
260
367
|
markers[i] ? h("span", { className: "lc-bar-marker", title: eventLabel(markers[i]) }, "\u2702") : null,
|
|
@@ -270,30 +377,50 @@ function makeView(ctx, t) {
|
|
|
270
377
|
);
|
|
271
378
|
})
|
|
272
379
|
),
|
|
380
|
+
// Turn strip: one COLOR BLOCK per turn, spanning exactly its bars'
|
|
381
|
+
// columns, so the partition reads at a glance and lines up with the
|
|
382
|
+
// steps above. Hovering a block highlights that turn's bars in the
|
|
383
|
+
// chart (and hovering a bar highlights its block — the active turn
|
|
384
|
+
// is shared hover-only state).
|
|
273
385
|
h(
|
|
274
386
|
"div",
|
|
275
|
-
{ className: "lc-turns"
|
|
387
|
+
{ className: "lc-turns", onMouseLeave: () => {
|
|
388
|
+
props.onHoverTurn(null);
|
|
389
|
+
} },
|
|
276
390
|
groups.map((grp, gi) => {
|
|
391
|
+
const on = props.activeTurn === grp.turn;
|
|
392
|
+
const blockW = grp.agg ? BAR_W : grp.span * (BAR_W + BAR_GAP) - BAR_GAP;
|
|
277
393
|
return h("span", {
|
|
278
394
|
key: "turn-" + gi,
|
|
279
|
-
className: "lc-turn",
|
|
280
|
-
style: {
|
|
395
|
+
className: "lc-turn" + (on ? " lc-turn-on" : ""),
|
|
396
|
+
style: {
|
|
397
|
+
width: blockW + "px",
|
|
398
|
+
background: TURN_COLORS[gi % TURN_COLORS.length]
|
|
399
|
+
},
|
|
400
|
+
title: "T" + grp.turn,
|
|
401
|
+
onMouseEnter: () => {
|
|
402
|
+
props.onHoverTurn(grp.turn);
|
|
403
|
+
}
|
|
281
404
|
}, "T" + grp.turn);
|
|
282
405
|
})
|
|
283
|
-
)
|
|
406
|
+
),
|
|
407
|
+
edges.right ? h("div", { className: "lc-chart-fade lc-chart-fade-r" }) : null
|
|
284
408
|
)
|
|
285
409
|
);
|
|
286
410
|
}
|
|
287
411
|
function RequestDetail(props) {
|
|
288
412
|
const req = props.request;
|
|
289
413
|
if (!req) return null;
|
|
414
|
+
const isTurn = req.stepCount !== void 0 && req.stepCount > 1;
|
|
415
|
+
const head = isTurn ? tr("detail.turn", { t: req.turn ?? 0, n: req.stepCount ?? 0 }) : tr("detail.step", { t: req.turn ?? 0, s: req.step ?? 0 });
|
|
290
416
|
return h(
|
|
291
417
|
"div",
|
|
292
418
|
{ className: "lc-detail" },
|
|
293
419
|
h(
|
|
294
420
|
"div",
|
|
295
421
|
{ className: "lc-detail-head" },
|
|
296
|
-
h("b", null,
|
|
422
|
+
h("b", null, head),
|
|
423
|
+
isTurn ? h("span", { className: "lc-detail-tag" }, t("detail.lastStep")) : null,
|
|
297
424
|
h("span", null, fmtTime(req.time)),
|
|
298
425
|
h("span", null, tr("detail.estTotal", { n: fmt(req.total) })),
|
|
299
426
|
req.prompt !== void 0 ? h("span", { className: "lc-actual" }, tr("detail.actual", { n: fmt(req.prompt) })) : null,
|
|
@@ -365,6 +492,8 @@ function makeView(ctx, t) {
|
|
|
365
492
|
{ key: n.seq, className: "lc-node" },
|
|
366
493
|
h("i", { style: { background: catColor[n.cat] || "#999" } }),
|
|
367
494
|
h("span", { className: "lc-node-preview", title: text }, text),
|
|
495
|
+
// Timestamp when the host event carried one.
|
|
496
|
+
typeof n.time === "number" ? h("span", { className: "lc-node-time" }, fmtTime(n.time)) : null,
|
|
368
497
|
h("span", { className: "lc-node-tokens" }, fmt(n.tokens))
|
|
369
498
|
);
|
|
370
499
|
})
|
|
@@ -375,7 +504,11 @@ function makeView(ctx, t) {
|
|
|
375
504
|
const [data, setData] = React.useState(null);
|
|
376
505
|
const [error, setError] = React.useState(null);
|
|
377
506
|
const [selectedSeq, setSelectedSeq] = React.useState(null);
|
|
507
|
+
const [hoveredSeq, setHoveredSeq] = React.useState(null);
|
|
508
|
+
const [hoverTurn, setHoverTurn] = React.useState(null);
|
|
378
509
|
const [tick, setTick] = React.useState(0);
|
|
510
|
+
const [granularity, setGranularity] = React.useState("step");
|
|
511
|
+
const [hoverCat, setHoverCat] = React.useState(null);
|
|
379
512
|
React.useEffect(() => {
|
|
380
513
|
if (typeof sessionId !== "string" || sessionId === "") return void 0;
|
|
381
514
|
let alive = true;
|
|
@@ -413,9 +546,22 @@ function makeView(ctx, t) {
|
|
|
413
546
|
const requests = data.requests || [];
|
|
414
547
|
const events = data.events || [];
|
|
415
548
|
const nodes = data.nodes || [];
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
549
|
+
const displayRequests = granularity === "turn" ? aggregateByTurn(requests) : requests;
|
|
550
|
+
let pinnedReq = null;
|
|
551
|
+
for (const req of displayRequests) if (req.seq === selectedSeq) pinnedReq = req;
|
|
552
|
+
let activeReq = null;
|
|
553
|
+
if (hoveredSeq !== null) {
|
|
554
|
+
for (const req of displayRequests) if (req.seq === hoveredSeq) activeReq = req;
|
|
555
|
+
}
|
|
556
|
+
if (activeReq === null) activeReq = pinnedReq;
|
|
557
|
+
if (activeReq === null && displayRequests.length > 0) activeReq = displayRequests[displayRequests.length - 1];
|
|
558
|
+
let activeTurn = hoverTurn;
|
|
559
|
+
if (activeTurn === null && hoveredSeq !== null) {
|
|
560
|
+
for (const req of displayRequests) if (req.seq === hoveredSeq) {
|
|
561
|
+
activeTurn = req.turn ?? null;
|
|
562
|
+
break;
|
|
563
|
+
}
|
|
564
|
+
}
|
|
419
565
|
const windowPct = data.contextWindow ? Math.min(100, Math.round(current.total / data.contextWindow * 100)) : null;
|
|
420
566
|
return h(
|
|
421
567
|
"div",
|
|
@@ -438,10 +584,19 @@ function makeView(ctx, t) {
|
|
|
438
584
|
"div",
|
|
439
585
|
{ className: "lc-overview-num" },
|
|
440
586
|
h("b", null, fmt(current.total)),
|
|
441
|
-
h("span", null, data.contextWindow ? " / " + fmt(data.contextWindow) + " " + tr("overview.ofWindow", { p: windowPct ?? 0 }) : " " + t("overview.estimate"))
|
|
587
|
+
h("span", null, data.contextWindow ? " / " + fmt(data.contextWindow) + " " + tr("overview.ofWindow", { p: windowPct ?? 0 }) : " " + t("overview.estimate")),
|
|
588
|
+
// The provider-reported prompt of the last request is the best
|
|
589
|
+
// ground truth for what the model actually received; the fixed
|
|
590
|
+
// density heuristic can undercount CJK-heavy content, so show the
|
|
591
|
+
// real number alongside the estimate.
|
|
592
|
+
displayRequests.length > 0 && displayRequests[displayRequests.length - 1].prompt !== void 0 ? h(
|
|
593
|
+
"span",
|
|
594
|
+
{ className: "lc-actual" },
|
|
595
|
+
tr("overview.actual", { n: fmt(displayRequests[displayRequests.length - 1].prompt ?? 0) })
|
|
596
|
+
) : null
|
|
442
597
|
),
|
|
443
|
-
h(StackedBar, { parts: partsOf(current), height: 16, max: data.contextWindow }),
|
|
444
|
-
h(Legend, { parts: partsOf(current) }),
|
|
598
|
+
h(StackedBar, { parts: partsOf(current), height: 16, max: data.contextWindow, hoverKey: hoverCat, onHoverKey: setHoverCat }),
|
|
599
|
+
h(Legend, { parts: partsOf(current), hoverKey: hoverCat, onHoverKey: setHoverCat }),
|
|
445
600
|
data.toolList && data.toolList.length > 0 ? h(
|
|
446
601
|
"div",
|
|
447
602
|
{ className: "lc-tools" },
|
|
@@ -460,13 +615,43 @@ function makeView(ctx, t) {
|
|
|
460
615
|
"div",
|
|
461
616
|
{ className: "lc-card-title" },
|
|
462
617
|
t("trend.title"),
|
|
463
|
-
h("span", { className: "lc-card-sub" }, t("trend.hint"))
|
|
618
|
+
h("span", { className: "lc-card-sub" }, t("trend.hint")),
|
|
619
|
+
h(
|
|
620
|
+
"div",
|
|
621
|
+
{ className: "lc-gran" },
|
|
622
|
+
h("button", {
|
|
623
|
+
className: "lc-gran-btn" + (granularity === "step" ? " lc-gran-on" : ""),
|
|
624
|
+
onClick: () => {
|
|
625
|
+
setGranularity("step");
|
|
626
|
+
}
|
|
627
|
+
}, t("gran.step")),
|
|
628
|
+
h("button", {
|
|
629
|
+
className: "lc-gran-btn" + (granularity === "turn" ? " lc-gran-on" : ""),
|
|
630
|
+
onClick: () => {
|
|
631
|
+
setGranularity("turn");
|
|
632
|
+
}
|
|
633
|
+
}, t("gran.turn"))
|
|
634
|
+
)
|
|
464
635
|
),
|
|
465
|
-
|
|
636
|
+
displayRequests.length === 0 ? h("div", { className: "lc-empty" }, t("trend.empty")) : h(
|
|
466
637
|
"div",
|
|
467
638
|
null,
|
|
468
|
-
h(TrendChart, {
|
|
469
|
-
|
|
639
|
+
h(TrendChart, {
|
|
640
|
+
// Remount per session: switching sessions re-anchors the chart
|
|
641
|
+
// at the newest bars instead of inheriting stale scroll state.
|
|
642
|
+
key: sessionId,
|
|
643
|
+
// The host caps the log at 160 requests; render them ALL so
|
|
644
|
+
// earlier turns/steps stay reachable via horizontal scroll.
|
|
645
|
+
requests: displayRequests,
|
|
646
|
+
events,
|
|
647
|
+
selectedSeq: pinnedReq ? pinnedReq.seq : null,
|
|
648
|
+
hoveredSeq,
|
|
649
|
+
activeTurn,
|
|
650
|
+
onSelect: setSelectedSeq,
|
|
651
|
+
onHover: setHoveredSeq,
|
|
652
|
+
onHoverTurn: setHoverTurn
|
|
653
|
+
}),
|
|
654
|
+
h(RequestDetail, { request: activeReq })
|
|
470
655
|
)
|
|
471
656
|
),
|
|
472
657
|
// ---- events + messages ----
|
|
@@ -501,15 +686,24 @@ const STYLES = [
|
|
|
501
686
|
".lc-card { background: var(--dsw-alias-bg-layer-1); border: 1px solid var(--dsw-alias-border-l1); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }",
|
|
502
687
|
".lc-card-title { font-weight: 600; margin-bottom: 10px; display: flex; align-items: baseline; gap: 8px; }",
|
|
503
688
|
".lc-card-sub { font-weight: 400; color: var(--dsw-alias-label-secondary); font-size: 12px; }",
|
|
689
|
+
".lc-gran { margin-left: auto; display: flex; gap: 2px; background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 6px; padding: 1px; }",
|
|
690
|
+
".lc-gran-btn { border: 0; background: transparent; color: var(--dsw-alias-label-secondary); font-size: 11px; line-height: 1; padding: 3px 8px; border-radius: 5px; cursor: pointer; font-family: inherit; }",
|
|
691
|
+
".lc-gran-btn:hover { color: var(--dsw-alias-label-primary); }",
|
|
692
|
+
".lc-gran-on, .lc-gran-on:hover { background: var(--dsw-alias-brand-primary); color: #fff; }",
|
|
504
693
|
".lc-overview-num { margin-bottom: 8px; }",
|
|
505
694
|
".lc-overview-num b { font-size: 20px; }",
|
|
506
695
|
".lc-overview-num span { color: var(--dsw-alias-label-secondary); }",
|
|
696
|
+
".lc-stacked-wrap { position: relative; width: 100%; }",
|
|
507
697
|
".lc-stacked { display: flex; width: 100%; border-radius: 5px; overflow: hidden; background: rgba(128,128,128,0.18); }",
|
|
698
|
+
".lc-bar-tip { position: absolute; bottom: calc(100% + 6px); transform: translateX(-50%); z-index: 5; white-space: nowrap; background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 6px; padding: 3px 8px; font-size: 12px; color: var(--dsw-alias-label-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.18); pointer-events: none; }",
|
|
508
699
|
".lc-stacked > div { height: 100%; }",
|
|
700
|
+
".lc-stacked-seg-on { filter: brightness(1.18); }",
|
|
509
701
|
".lc-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }",
|
|
510
702
|
".lc-chip { display: inline-flex; align-items: center; gap: 5px; color: var(--dsw-alias-label-primary); }",
|
|
511
703
|
".lc-chip i, .lc-detail-row i, .lc-node i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }",
|
|
512
704
|
".lc-chip em { font-style: normal; color: var(--dsw-alias-label-secondary); }",
|
|
705
|
+
".lc-chip-on { font-weight: 600; }",
|
|
706
|
+
".lc-chip-on i { box-shadow: 0 0 0 1px var(--dsw-alias-brand-primary); }",
|
|
513
707
|
".lc-tools { margin-top: 10px; color: var(--dsw-alias-label-secondary); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }",
|
|
514
708
|
".lc-tool-chip { background: var(--dsw-alias-bg-layer-2); border-radius: 4px; padding: 1px 7px; font-size: 12px; color: var(--dsw-alias-label-primary); }",
|
|
515
709
|
".lc-chartrow { display: flex; gap: 6px; align-items: stretch; }",
|
|
@@ -518,10 +712,14 @@ const STYLES = [
|
|
|
518
712
|
".lc-axis-top { top: 13px; }",
|
|
519
713
|
".lc-axis-mid { top: 69px; }",
|
|
520
714
|
".lc-axis-bot { top: 125px; }",
|
|
521
|
-
".lc-chart-scroll { flex: 1; overflow-x: auto; overflow-y: hidden; min-width: 0; scrollbar-width: thin; }",
|
|
522
|
-
".lc-chart-scroll::-webkit-scrollbar { height:
|
|
523
|
-
".lc-chart-scroll::-webkit-scrollbar-thumb { background: var(--dsw-alias-
|
|
715
|
+
".lc-chart-scroll { position: relative; flex: 1; overflow-x: auto; overflow-y: hidden; min-width: 0; scrollbar-width: thin; }",
|
|
716
|
+
".lc-chart-scroll::-webkit-scrollbar { height: 8px; }",
|
|
717
|
+
".lc-chart-scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--dsw-alias-label-secondary) 45%, transparent); border-radius: 4px; }",
|
|
718
|
+
".lc-chart-scroll::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--dsw-alias-label-secondary) 70%, transparent); }",
|
|
524
719
|
".lc-chart-scroll::-webkit-scrollbar-track { background: transparent; }",
|
|
720
|
+
".lc-chart-fade { position: absolute; top: 0; bottom: 0; width: 26px; pointer-events: none; z-index: 2; }",
|
|
721
|
+
".lc-chart-fade-l { left: 0; background: linear-gradient(to right, var(--dsw-alias-bg-layer-1), transparent); }",
|
|
722
|
+
".lc-chart-fade-r { right: 0; background: linear-gradient(to left, var(--dsw-alias-bg-layer-1), transparent); }",
|
|
525
723
|
".lc-chart { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 130px; padding-top: 18px; box-sizing: border-box; width: max-content; min-width: 100%; }",
|
|
526
724
|
".lc-grid { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--dsw-alias-border-l1); pointer-events: none; }",
|
|
527
725
|
".lc-grid-top { top: 18px; }",
|
|
@@ -529,15 +727,19 @@ const STYLES = [
|
|
|
529
727
|
".lc-bar { position: relative; width: 14px; flex: none; height: 100%; display: flex; align-items: flex-end; cursor: pointer; border-radius: 2px; }",
|
|
530
728
|
".lc-bar:hover { background: var(--dsw-alias-bg-layer-2); }",
|
|
531
729
|
".lc-bar-selected { outline: 2px solid var(--dsw-alias-brand-primary); outline-offset: 1px; }",
|
|
730
|
+
".lc-bar-hovered { outline: 1px dashed var(--dsw-alias-brand-primary); outline-offset: 1px; }",
|
|
731
|
+
".lc-bar-in-turn { background: rgba(99,102,241,0.14); }",
|
|
532
732
|
".lc-bar-stack { display: flex; flex-direction: column-reverse; width: 100%; }",
|
|
533
733
|
".lc-bar-stack > div { width: 100%; }",
|
|
534
734
|
".lc-bar-marker { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--dsw-alias-state-warn-primary); }",
|
|
535
|
-
".lc-turns { display: flex; gap: 2px; width: max-content; min-width: 100%; }",
|
|
536
|
-
".lc-turn { flex: none;
|
|
735
|
+
".lc-turns { display: flex; gap: 2px; width: max-content; min-width: 100%; margin-top: 4px; }",
|
|
736
|
+
".lc-turn { flex: none; box-sizing: border-box; text-align: center; font-size: 10px; line-height: 14px; font-weight: 600; color: #fff; border-radius: 3px; height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; transition: filter 120ms; }",
|
|
737
|
+
".lc-turn-on { filter: brightness(1.35); box-shadow: 0 0 0 1px rgba(255,255,255,0.4); }",
|
|
537
738
|
".lc-detail { margin-top: 12px; border-top: 1px solid var(--dsw-alias-border-l1); padding-top: 12px; }",
|
|
538
739
|
".lc-detail-head { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 8px; color: var(--dsw-alias-label-secondary); }",
|
|
539
740
|
".lc-detail-head b { color: var(--dsw-alias-label-primary); }",
|
|
540
741
|
".lc-detail-head .lc-actual { color: var(--dsw-alias-state-success-primary); }",
|
|
742
|
+
".lc-detail-tag { background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 4px; padding: 0 6px; font-size: 11px; color: var(--dsw-alias-label-secondary); }",
|
|
541
743
|
".lc-detail-rows { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }",
|
|
542
744
|
".lc-detail-row { display: flex; align-items: center; gap: 8px; }",
|
|
543
745
|
".lc-detail-label { min-width: 70px; white-space: nowrap; color: var(--dsw-alias-label-secondary); }",
|
|
@@ -558,6 +760,7 @@ const STYLES = [
|
|
|
558
760
|
".lc-event-time { color: var(--dsw-alias-label-secondary); font-size: 12px; }",
|
|
559
761
|
".lc-node { display: flex; align-items: center; gap: 8px; padding: 3px 0; }",
|
|
560
762
|
".lc-node-preview { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dsw-alias-label-primary); }",
|
|
763
|
+
".lc-node-time { color: var(--dsw-alias-label-secondary); font-size: 12px; min-width: 54px; text-align: right; }",
|
|
561
764
|
".lc-node-tokens { color: var(--dsw-alias-label-secondary); }",
|
|
562
765
|
".lc-nodes-more { color: var(--dsw-alias-label-secondary); padding: 3px 0; }",
|
|
563
766
|
".lc-empty { color: var(--dsw-alias-label-secondary); padding: 18px 0; text-align: center; }",
|
package/lib/index.js
CHANGED
|
@@ -25,7 +25,10 @@ function estimateBlocks(blocks) {
|
|
|
25
25
|
}
|
|
26
26
|
return tokens;
|
|
27
27
|
}
|
|
28
|
-
function estimateMessage(message) {
|
|
28
|
+
function estimateMessage(message, emptyIsZero = false) {
|
|
29
|
+
if (emptyIsZero && (message === null || message === void 0 || !Array.isArray(message.content) || message.content.length === 0)) {
|
|
30
|
+
return 0;
|
|
31
|
+
}
|
|
29
32
|
return estimateBlocks(message?.content) + ROLE_OVERHEAD;
|
|
30
33
|
}
|
|
31
34
|
function estimateSystem(text) {
|
|
@@ -55,6 +58,23 @@ function toolCallNames(blocks) {
|
|
|
55
58
|
function isInjection(source) {
|
|
56
59
|
return source !== null && typeof source === "object" && (source.kind === "plugin" || source.kind === "skill-invocation" || typeof source.form === "string");
|
|
57
60
|
}
|
|
61
|
+
const MAX_REQUEST_STEPS = 1500;
|
|
62
|
+
const MAX_KEPT_TURNS = 300;
|
|
63
|
+
function trimToLastTurns(requests, maxTurns) {
|
|
64
|
+
let runs = 0;
|
|
65
|
+
let start = requests.length;
|
|
66
|
+
let prevTurn;
|
|
67
|
+
for (let i = requests.length - 1; i >= 0; i--) {
|
|
68
|
+
const turn = requests[i].turn;
|
|
69
|
+
if (turn !== prevTurn) {
|
|
70
|
+
if (runs >= maxTurns) break;
|
|
71
|
+
runs++;
|
|
72
|
+
prevTurn = turn;
|
|
73
|
+
}
|
|
74
|
+
start = i;
|
|
75
|
+
}
|
|
76
|
+
return requests.slice(start);
|
|
77
|
+
}
|
|
58
78
|
function createFold() {
|
|
59
79
|
return {
|
|
60
80
|
n: 0,
|
|
@@ -86,7 +106,14 @@ function categoryOf(type, message) {
|
|
|
86
106
|
}
|
|
87
107
|
function applySurface(st, ev, type, data, message) {
|
|
88
108
|
const cat = categoryOf(type, message);
|
|
89
|
-
const node = {
|
|
109
|
+
const node = {
|
|
110
|
+
seq: ev.seq,
|
|
111
|
+
time: ev.time,
|
|
112
|
+
cat,
|
|
113
|
+
// Empty assistant messages project to no model message (usage-only), so
|
|
114
|
+
// they price 0 — mirroring dsh's deriveEventMessage/estimate.
|
|
115
|
+
tokens: estimateMessage(message, type === "assistant/message")
|
|
116
|
+
};
|
|
90
117
|
const source = message?.source;
|
|
91
118
|
const form = source?.form;
|
|
92
119
|
if (typeof form === "string") node.form = form;
|
|
@@ -151,8 +178,7 @@ function foldInto(st, events) {
|
|
|
151
178
|
name: typeof t.name === "string" ? t.name : "?",
|
|
152
179
|
tokens: estimateToolSchema(t)
|
|
153
180
|
}));
|
|
154
|
-
st.toolsTokens =
|
|
155
|
-
if (tools.length > 0) st.toolsTokens += BLOCK_OVERHEAD;
|
|
181
|
+
st.toolsTokens = tools.length > 0 ? Math.ceil(JSON.stringify(tools).length / CHARS_PER_TOKEN) + BLOCK_OVERHEAD : 0;
|
|
156
182
|
st.systemTokens = estimateSystem(header.system);
|
|
157
183
|
if (header.config && typeof header.config.model === "string") st.model = header.config.model;
|
|
158
184
|
if (header.config && typeof header.config.provider === "string") st.provider = header.config.provider;
|
|
@@ -192,9 +218,11 @@ function foldInto(st, events) {
|
|
|
192
218
|
}
|
|
193
219
|
break;
|
|
194
220
|
}
|
|
195
|
-
case "tool/result":
|
|
196
|
-
|
|
221
|
+
case "tool/result": {
|
|
222
|
+
const toolMsg = data?.message ?? null;
|
|
223
|
+
applySurface(st, ev, ev.type, data, toolMsg);
|
|
197
224
|
break;
|
|
225
|
+
}
|
|
198
226
|
case "assistant/message": {
|
|
199
227
|
const usage = data?.usage;
|
|
200
228
|
const total = st.systemTokens + st.toolsTokens + st.sums.user + st.sums.inject + st.sums.assistant + st.sums.tool;
|
|
@@ -216,7 +244,8 @@ function foldInto(st, events) {
|
|
|
216
244
|
if (typeof usage.outputTokens === "number") record.output = usage.outputTokens;
|
|
217
245
|
}
|
|
218
246
|
st.requests.push(record);
|
|
219
|
-
|
|
247
|
+
const asstMsg = data?.message ?? null;
|
|
248
|
+
applySurface(st, ev, ev.type, data, asstMsg);
|
|
220
249
|
break;
|
|
221
250
|
}
|
|
222
251
|
case "compaction/summary":
|
|
@@ -241,8 +270,11 @@ function foldInto(st, events) {
|
|
|
241
270
|
}
|
|
242
271
|
}
|
|
243
272
|
st.n = events.length;
|
|
244
|
-
if (st.requests.length >
|
|
245
|
-
|
|
273
|
+
if (st.requests.length > MAX_REQUEST_STEPS) {
|
|
274
|
+
st.requests = trimToLastTurns(st.requests, MAX_KEPT_TURNS);
|
|
275
|
+
if (st.requests.length > MAX_REQUEST_STEPS) st.requests = st.requests.slice(-MAX_REQUEST_STEPS);
|
|
276
|
+
}
|
|
277
|
+
if (st.events.length > 400) st.events = st.events.slice(-400);
|
|
246
278
|
}
|
|
247
279
|
function buildResult(st) {
|
|
248
280
|
const surfaceTotal = st.sums.user + st.sums.inject + st.sums.assistant + st.sums.tool;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "dsh-context",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.0",
|
|
4
4
|
"description": "Context insight panel for DeepSeek Harness: a Context tab (beside Chat/Trajectory) showing what the model's context window is made of and how it evolves — composition, per-request history, compactions, injections, and model switches.",
|
|
5
5
|
"author": "bowenliang123",
|
|
6
6
|
"repository": {
|
|
@@ -28,7 +28,8 @@
|
|
|
28
28
|
"build": "node scripts/build.mjs",
|
|
29
29
|
"typecheck": "tsc --noEmit",
|
|
30
30
|
"test": "npm run typecheck && node scripts/test-host.mjs && node scripts/test-client.mjs",
|
|
31
|
-
"release": "bash scripts/publish.sh"
|
|
31
|
+
"release": "bash scripts/publish.sh",
|
|
32
|
+
"prepare": "husky"
|
|
32
33
|
},
|
|
33
34
|
"dsh": {
|
|
34
35
|
"bundle": {
|
|
@@ -53,11 +54,13 @@
|
|
|
53
54
|
"token",
|
|
54
55
|
"ui"
|
|
55
56
|
],
|
|
56
|
-
"license": "
|
|
57
|
+
"license": "Apache-2.0",
|
|
57
58
|
"devDependencies": {
|
|
58
59
|
"@deepseek-ai/cordis": "^4.0.1",
|
|
59
60
|
"@types/react": "^18.3.31",
|
|
60
61
|
"esbuild": "^0.28.2",
|
|
62
|
+
"husky": "^9.1.7",
|
|
61
63
|
"typescript": "^7.0.2"
|
|
62
|
-
}
|
|
64
|
+
},
|
|
65
|
+
"packageManager": "pnpm@11.9.0"
|
|
63
66
|
}
|