dsh-any-agent 0.6.0 → 0.6.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +53 -0
- package/bin/dsh-any-agent.mjs +23 -1
- package/docs/en/reference.md +2 -0
- package/docs/en/security.md +1 -0
- package/docs/en/tests.md +4 -2
- package/docs/en/usage.md +23 -0
- package/docs/zh/live-view-design.md +193 -0
- package/docs/zh/reference.md +2 -0
- package/docs/zh/security.md +1 -0
- package/docs/zh/tests.md +4 -2
- package/docs/zh/usage.md +23 -0
- package/package.json +1 -1
- package/src/config.mjs +25 -0
- package/src/conversation.mjs +189 -7
- package/src/hub.mjs +7 -0
- package/src/live-cli.mjs +142 -0
- package/src/live-dashboard.html +847 -0
- package/src/live-dashboard.mjs +176 -0
- package/src/live-view.mjs +762 -0
- package/src/live.mjs +186 -0
- package/src/mcp.mjs +3 -0
- package/src/residue.mjs +7 -3
|
@@ -0,0 +1,847 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="zh-CN">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
+
<meta name="referrer" content="no-referrer">
|
|
7
|
+
<title>DSH Live</title>
|
|
8
|
+
<style>
|
|
9
|
+
:root {
|
|
10
|
+
--bg: #f7f7f8; --surface: #ffffff; --sunken: #f1f1f3; --line: #e6e6ea; --line-2: #d9d9df;
|
|
11
|
+
--text: #17171c; --text-2: #55555f; --text-3: #8a8a95;
|
|
12
|
+
--accent: #4f5bd5; --accent-soft: #eceefd;
|
|
13
|
+
--ok: #1a8f5a; --ok-soft: #e5f4ec; --bad: #c8414b; --bad-soft: #fbeaeb;
|
|
14
|
+
--warn: #a8660b; --warn-soft: #fbf1df; --run: #4f5bd5; --run-soft: #eceefd;
|
|
15
|
+
--bar: #c9cdf3; --bar-run: #4f5bd5; --bar-ok: #9fd4b8; --bar-bad: #eba3a8;
|
|
16
|
+
--mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
|
|
17
|
+
--sans: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
|
|
18
|
+
--r: 8px;
|
|
19
|
+
color-scheme: light;
|
|
20
|
+
}
|
|
21
|
+
@media (prefers-color-scheme: dark) {
|
|
22
|
+
:root:not([data-theme="light"]) {
|
|
23
|
+
--bg: #0e0e11; --surface: #16161a; --sunken: #1c1c21; --line: #26262d; --line-2: #33333c;
|
|
24
|
+
--text: #ececf1; --text-2: #a5a5b1; --text-3: #6f6f7c;
|
|
25
|
+
--accent: #8d96ff; --accent-soft: #1f2140;
|
|
26
|
+
--ok: #4fc58a; --ok-soft: #13271d; --bad: #f07a82; --bad-soft: #2d1619;
|
|
27
|
+
--warn: #e7ae4c; --warn-soft: #2a2112; --run: #8d96ff; --run-soft: #1f2140;
|
|
28
|
+
--bar: #2f3363; --bar-run: #8d96ff; --bar-ok: #24563d; --bar-bad: #6b2b31;
|
|
29
|
+
color-scheme: dark;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
:root[data-theme="dark"] {
|
|
33
|
+
--bg: #0e0e11; --surface: #16161a; --sunken: #1c1c21; --line: #26262d; --line-2: #33333c;
|
|
34
|
+
--text: #ececf1; --text-2: #a5a5b1; --text-3: #6f6f7c;
|
|
35
|
+
--accent: #8d96ff; --accent-soft: #1f2140;
|
|
36
|
+
--ok: #4fc58a; --ok-soft: #13271d; --bad: #f07a82; --bad-soft: #2d1619;
|
|
37
|
+
--warn: #e7ae4c; --warn-soft: #2a2112; --run: #8d96ff; --run-soft: #1f2140;
|
|
38
|
+
--bar: #2f3363; --bar-run: #8d96ff; --bar-ok: #24563d; --bar-bad: #6b2b31;
|
|
39
|
+
color-scheme: dark;
|
|
40
|
+
}
|
|
41
|
+
* { box-sizing: border-box; }
|
|
42
|
+
html, body { margin: 0; height: 100%; }
|
|
43
|
+
body { background: var(--bg); color: var(--text); font: 13.5px/1.5 var(--sans); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
|
|
44
|
+
button { font: inherit; color: inherit; }
|
|
45
|
+
.mono { font-family: var(--mono); font-size: 12px; }
|
|
46
|
+
|
|
47
|
+
/* ── 顶栏 ───────────────────────────────── */
|
|
48
|
+
.top { display: flex; align-items: center; gap: 20px; height: 52px; padding: 0 20px; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 3; }
|
|
49
|
+
.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 14px; letter-spacing: .1px; white-space: nowrap; }
|
|
50
|
+
.brand-mark { width: 22px; height: 22px; border-radius: 6px; background: var(--text); color: var(--surface); display: grid; place-items: center; font: 700 11px/1 var(--mono); }
|
|
51
|
+
.conn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); font-weight: 400; }
|
|
52
|
+
.conn i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
|
|
53
|
+
.conn.on i { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
|
|
54
|
+
.stats { display: flex; align-items: stretch; height: 100%; margin-left: 4px; }
|
|
55
|
+
.stat { display: flex; flex-direction: column; justify-content: center; padding: 0 16px; border-left: 1px solid var(--line); min-width: 74px; }
|
|
56
|
+
.stat b { font-size: 15px; font-weight: 650; line-height: 1.1; }
|
|
57
|
+
.stat span { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
58
|
+
.stat { min-width: 0; }
|
|
59
|
+
.stat.hot b { color: var(--run); }
|
|
60
|
+
.stat.warn b { color: var(--warn); }
|
|
61
|
+
.stat.zero b { color: var(--text-3); font-weight: 500; }
|
|
62
|
+
.grow { flex: 1; }
|
|
63
|
+
.search { position: relative; }
|
|
64
|
+
.search input { font: inherit; font-size: 12.5px; height: 30px; width: 240px; padding: 0 10px 0 28px; border: 1px solid var(--line); border-radius: 7px; background: var(--sunken); color: var(--text); outline: none; }
|
|
65
|
+
.search input:focus { border-color: var(--accent); background: var(--surface); }
|
|
66
|
+
.search svg { position: absolute; left: 9px; top: 9px; color: var(--text-3); }
|
|
67
|
+
|
|
68
|
+
/* ── 布局 ───────────────────────────────── */
|
|
69
|
+
.layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); height: calc(100% - 52px); }
|
|
70
|
+
.rail { border-right: 1px solid var(--line); overflow: auto; background: var(--surface); }
|
|
71
|
+
.main { overflow: auto; }
|
|
72
|
+
|
|
73
|
+
/* ── 左栏 ───────────────────────────────── */
|
|
74
|
+
.grp { padding: 14px 0 6px; }
|
|
75
|
+
.grp + .grp { border-top: 1px solid var(--line); }
|
|
76
|
+
.grp-h { display: flex; align-items: baseline; gap: 8px; padding: 0 16px 6px; }
|
|
77
|
+
.grp-h b { font-size: 12px; font-weight: 600; }
|
|
78
|
+
.grp-h span { font-size: 11px; color: var(--text-3); }
|
|
79
|
+
.grp-h .gone { color: var(--bad); }
|
|
80
|
+
.cv { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; column-gap: 10px; padding: 8px 16px; cursor: pointer; position: relative; outline: none; }
|
|
81
|
+
.cv:hover { background: var(--sunken); }
|
|
82
|
+
.cv:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
|
|
83
|
+
.cv.sel { background: var(--accent-soft); }
|
|
84
|
+
.cv.sel::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--accent); }
|
|
85
|
+
.cv .sd { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: var(--line-2); }
|
|
86
|
+
.cv .sd.running { background: var(--run); animation: pulse 1.6s ease-in-out infinite; }
|
|
87
|
+
.cv .sd.queued { background: var(--warn); }
|
|
88
|
+
.cv .ti { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
89
|
+
.cv .ago { font-size: 11px; color: var(--text-3); white-space: nowrap; }
|
|
90
|
+
.cv .sub { grid-column: 2 / 4; font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
91
|
+
.cv .sub .mono { color: var(--text-3); }
|
|
92
|
+
.cv .flag { color: var(--warn); }
|
|
93
|
+
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
|
|
94
|
+
|
|
95
|
+
/* ── 主区 ───────────────────────────────── */
|
|
96
|
+
/* 不再限制最大宽度:超宽屏上调用链和右栏一起铺满,右栏随窗口在 300–460px 之间伸缩。 */
|
|
97
|
+
.wrap { padding: 22px 28px 48px; }
|
|
98
|
+
.cols { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 460px); gap: 24px; align-items: start; }
|
|
99
|
+
.inspector { position: sticky; top: 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
|
|
100
|
+
.panel { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
|
|
101
|
+
.panel h3 { margin: 0 0 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--text-3); }
|
|
102
|
+
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
|
|
103
|
+
.kpi b { display: block; font-size: 17px; font-weight: 650; line-height: 1.15; }
|
|
104
|
+
.kpi span { font-size: 11px; color: var(--text-3); }
|
|
105
|
+
.kpi.bad b { color: var(--bad); }
|
|
106
|
+
.kpi.warn b { color: var(--warn); }
|
|
107
|
+
.kpi.zero b { color: var(--text-3); font-weight: 500; }
|
|
108
|
+
.dist { display: grid; gap: 7px; }
|
|
109
|
+
.dist-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; font-size: 12px; }
|
|
110
|
+
.dist-row .n { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
111
|
+
.dist-row .v { color: var(--text-3); white-space: nowrap; }
|
|
112
|
+
.dist-row .bar { grid-column: 1 / 3; height: 5px; border-radius: 3px; background: var(--sunken); overflow: hidden; }
|
|
113
|
+
.dist-row .bar b { display: block; height: 100%; border-radius: 3px; background: var(--bar-run); opacity: .75; }
|
|
114
|
+
.files { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
|
|
115
|
+
.files li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 6px; align-items: baseline; font-size: 12px; }
|
|
116
|
+
.files .op { font-size: 10.5px; font-weight: 600; text-align: center; border-radius: 4px; padding: 0 3px; background: var(--sunken); color: var(--text-2); }
|
|
117
|
+
.files .op.w { background: var(--ok-soft); color: var(--ok); }
|
|
118
|
+
.files .p { font-family: var(--mono); font-size: 11.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; }
|
|
119
|
+
.aps, .dist, .files { grid-template-columns: minmax(0, 1fr); }
|
|
120
|
+
.aps { display: grid; gap: 8px; }
|
|
121
|
+
.ap { min-width: 0; font-size: 12px; border-left: 2px solid var(--warn); padding: 2px 0 2px 8px; }
|
|
122
|
+
.ap .m { font-weight: 600; color: var(--warn); }
|
|
123
|
+
.ap .c { font-family: var(--mono); font-size: 11.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
124
|
+
.muted { font-size: 12px; color: var(--text-3); }
|
|
125
|
+
/* Token 面板 */
|
|
126
|
+
.tok-big { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
|
|
127
|
+
.tok-big b { display: block; font-size: 18px; font-weight: 650; line-height: 1.15; }
|
|
128
|
+
.tok-big span { font-size: 11px; color: var(--text-3); }
|
|
129
|
+
.stack { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--sunken); margin-bottom: 6px; }
|
|
130
|
+
.stack i { display: block; height: 100%; min-width: 2px; }
|
|
131
|
+
.c-unc { background: var(--accent); }
|
|
132
|
+
.c-read { background: var(--ok); opacity: .75; }
|
|
133
|
+
.c-write { background: var(--warn); opacity: .8; }
|
|
134
|
+
.c-out { background: var(--bad); opacity: .7; }
|
|
135
|
+
.legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 10px; font-size: 11.5px; color: var(--text-2); margin-bottom: 12px; }
|
|
136
|
+
.legend span { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
|
|
137
|
+
.legend i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
|
|
138
|
+
.legend em { font-style: normal; margin-left: auto; color: var(--text-3); }
|
|
139
|
+
.ctx-h { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-2); margin-bottom: 4px; }
|
|
140
|
+
.ctx-h span:last-child { color: var(--text-3); }
|
|
141
|
+
.ctx { height: 6px; border-radius: 3px; background: var(--sunken); overflow: hidden; margin-bottom: 12px; }
|
|
142
|
+
.ctx b { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
|
|
143
|
+
.ctx.hi b { background: var(--warn); }
|
|
144
|
+
.ctx.crit b { background: var(--bad); }
|
|
145
|
+
.spark-h { font-size: 11.5px; color: var(--text-2); margin-bottom: 6px; display: flex; justify-content: space-between; }
|
|
146
|
+
.spark-h span:last-child { color: var(--text-3); }
|
|
147
|
+
.spark { display: flex; align-items: flex-end; gap: 3px; height: 56px; }
|
|
148
|
+
.spark i { flex: 1; min-width: 4px; max-width: 26px; border-radius: 3px 3px 0 0; background: var(--bar); position: relative; }
|
|
149
|
+
.spark i.cur { background: var(--bar-run); }
|
|
150
|
+
.spark i:hover { background: var(--accent); }
|
|
151
|
+
.tok-run { font-family: var(--mono); font-size: 11.5px; }
|
|
152
|
+
@media (max-width: 1180px) {
|
|
153
|
+
.cols { grid-template-columns: minmax(0, 1fr); }
|
|
154
|
+
.inspector { position: static; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
|
|
155
|
+
}
|
|
156
|
+
.hd h1 { font-size: 19px; font-weight: 650; margin: 0 0 10px; letter-spacing: -.1px; word-break: break-word; }
|
|
157
|
+
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 24px; padding: 12px 16px; margin: 0 0 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
|
|
158
|
+
.fact { min-width: 0; }
|
|
159
|
+
.fact.wide { grid-column: span 2; }
|
|
160
|
+
.fact dt { font-size: 11px; color: var(--text-3); margin: 0 0 2px; }
|
|
161
|
+
.fact dd { margin: 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; }
|
|
162
|
+
.fact dd.path { direction: rtl; text-align: left; }
|
|
163
|
+
.sec-h { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; }
|
|
164
|
+
.sec-h h2 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--text-3); margin: 0; }
|
|
165
|
+
.sec-h span { font-size: 12px; color: var(--text-3); }
|
|
166
|
+
|
|
167
|
+
/* ── 调用链:回合 ───────────────────────── */
|
|
168
|
+
.turns { position: relative; }
|
|
169
|
+
.turn { position: relative; padding-left: 26px; padding-bottom: 14px; }
|
|
170
|
+
.turn::before { content: ""; position: absolute; left: 7px; top: 22px; bottom: 0; width: 1px; background: var(--line-2); }
|
|
171
|
+
.turn:last-child::before { display: none; }
|
|
172
|
+
.node { position: absolute; left: 1px; top: 13px; width: 13px; height: 13px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-2); }
|
|
173
|
+
.turn.running .node { border-color: var(--run); background: var(--run); box-shadow: 0 0 0 4px var(--run-soft); }
|
|
174
|
+
.turn.done .node { border-color: var(--ok); }
|
|
175
|
+
.turn.error .node, .turn.interrupted .node { border-color: var(--bad); background: var(--bad); }
|
|
176
|
+
.turn.queued .node { border-color: var(--warn); border-style: dashed; }
|
|
177
|
+
.turn.cancelled .node { border-color: var(--text-3); }
|
|
178
|
+
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
|
|
179
|
+
.turn.running .card { border-color: color-mix(in srgb, var(--run) 35%, var(--line)); }
|
|
180
|
+
.card-h { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; user-select: none; flex-wrap: wrap; }
|
|
181
|
+
.card-h:hover { background: var(--sunken); }
|
|
182
|
+
.chev { color: var(--text-3); transition: transform .15s ease; flex: none; }
|
|
183
|
+
.collapsed .chev { transform: rotate(-90deg); }
|
|
184
|
+
.tag { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 5px; background: var(--sunken); color: var(--text-2); white-space: nowrap; }
|
|
185
|
+
.tag.running { background: var(--run-soft); color: var(--run); }
|
|
186
|
+
.tag.done { background: var(--ok-soft); color: var(--ok); }
|
|
187
|
+
.tag.error, .tag.interrupted { background: var(--bad-soft); color: var(--bad); }
|
|
188
|
+
.tag.queued, .tag.warn { background: var(--warn-soft); color: var(--warn); }
|
|
189
|
+
.tag.ghost { background: transparent; border: 1px solid var(--line-2); color: var(--text-3); font-weight: 500; }
|
|
190
|
+
.card-h .rid { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); }
|
|
191
|
+
.card-h .right { margin-left: auto; display: flex; gap: 14px; align-items: center; font-size: 12px; color: var(--text-3); white-space: nowrap; }
|
|
192
|
+
.card-h .right b { color: var(--text-2); font-weight: 600; }
|
|
193
|
+
.prompt { margin: 0 12px 10px 34px; padding: 6px 10px; border-left: 2px solid var(--line-2); color: var(--text-2); font-size: 13px; word-break: break-word; }
|
|
194
|
+
.errline { margin: 0 12px 10px 34px; padding: 6px 10px; border-radius: 6px; background: var(--bad-soft); color: var(--bad); font: 12px/1.45 var(--mono); word-break: break-word; }
|
|
195
|
+
.collapsed .body { display: none; }
|
|
196
|
+
|
|
197
|
+
/* ── 调用链:工具 / 审批(带时间条) ─────── */
|
|
198
|
+
.spans-box { position: relative; border-top: 1px solid var(--line); }
|
|
199
|
+
/* 工具列表过长时在卡片内部滚动,滚动条隐藏;上下边缘用渐隐提示还有内容。 */
|
|
200
|
+
.spans { max-height: min(60vh, 520px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; }
|
|
201
|
+
.spans::-webkit-scrollbar, .rail::-webkit-scrollbar, .main::-webkit-scrollbar { width: 0; height: 0; display: none; }
|
|
202
|
+
.rail, .main { scrollbar-width: none; -ms-overflow-style: none; }
|
|
203
|
+
.spans-box::before, .spans-box::after { content: ""; position: absolute; left: 0; right: 0; height: 28px; pointer-events: none; opacity: 0; transition: opacity .15s ease; z-index: 1; }
|
|
204
|
+
.spans-box::before { top: 0; background: linear-gradient(var(--surface), transparent); }
|
|
205
|
+
.spans-box::after { bottom: 0; background: linear-gradient(transparent, var(--surface)); border-radius: 0 0 var(--r) var(--r); }
|
|
206
|
+
.spans-box.more-up::before, .spans-box.more-down::after { opacity: 1; }
|
|
207
|
+
.spans-count { position: absolute; right: 12px; bottom: 6px; z-index: 2; font-size: 11px; color: var(--text-3); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; opacity: 0; transition: opacity .15s ease; pointer-events: none; }
|
|
208
|
+
.spans-box.more-down .spans-count { opacity: 1; }
|
|
209
|
+
.span { display: grid; grid-template-columns: 22px 92px minmax(0, 1fr) minmax(120px, 26%) 62px; align-items: center; gap: 10px; padding: 0 12px; height: 32px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
|
|
210
|
+
.span:last-child { border-bottom: 0; }
|
|
211
|
+
.span:hover { background: var(--sunken); }
|
|
212
|
+
.span .st { display: grid; place-items: center; }
|
|
213
|
+
.span .st i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
|
|
214
|
+
.span.ok .st i { background: var(--ok); }
|
|
215
|
+
.span.fail .st i { background: var(--bad); }
|
|
216
|
+
.span.live .st i { background: var(--run); animation: pulse 1.6s ease-in-out infinite; }
|
|
217
|
+
.span .nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
218
|
+
.span .kd { font-weight: 400; color: var(--text-3); font-size: 11px; margin-left: 4px; }
|
|
219
|
+
.span .in { font-family: var(--mono); font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
220
|
+
.track { position: relative; height: 8px; border-radius: 4px; background: var(--sunken); overflow: hidden; }
|
|
221
|
+
.track b { position: absolute; top: 0; bottom: 0; min-width: 3px; border-radius: 4px; background: var(--bar); }
|
|
222
|
+
.span.ok .track b { background: var(--bar-ok); }
|
|
223
|
+
.span.fail .track b { background: var(--bar-bad); }
|
|
224
|
+
.span.live .track b { background: var(--bar-run); }
|
|
225
|
+
.span .tm { text-align: right; font-size: 12px; color: var(--text-3); white-space: nowrap; }
|
|
226
|
+
.span.flagged { background: var(--warn-soft); }
|
|
227
|
+
.span.flagged:hover { background: var(--warn-soft); }
|
|
228
|
+
.span.flagged .st { color: var(--warn); font-size: 12px; }
|
|
229
|
+
.span.flagged .nm { color: var(--warn); }
|
|
230
|
+
.span.flagged .tm { color: var(--warn); font-weight: 600; }
|
|
231
|
+
.span.note .st { color: var(--text-3); font-size: 12px; }
|
|
232
|
+
.span.note .nm { color: var(--text-2); font-weight: 500; }
|
|
233
|
+
.span.stop .st, .span.stop .nm { color: var(--bad); }
|
|
234
|
+
.span .esc { font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--warn); margin-right: 6px; }
|
|
235
|
+
.more { padding: 6px 12px 6px 44px; font-size: 12px; color: var(--text-3); border-bottom: 1px solid var(--line); }
|
|
236
|
+
|
|
237
|
+
/* ── 空状态 ─────────────────────────────── */
|
|
238
|
+
.empty { display: grid; place-items: center; text-align: center; color: var(--text-3); padding: 72px 24px; }
|
|
239
|
+
.empty h3 { margin: 0 0 6px; font-size: 14px; color: var(--text-2); font-weight: 600; }
|
|
240
|
+
.empty p { margin: 0; font-size: 12.5px; max-width: 360px; }
|
|
241
|
+
.empty code { font-family: var(--mono); font-size: 12px; background: var(--sunken); padding: 1px 6px; border-radius: 4px; color: var(--text-2); }
|
|
242
|
+
.rail .empty { padding: 40px 18px; }
|
|
243
|
+
.foot { margin-top: 18px; font-size: 11.5px; color: var(--text-3); }
|
|
244
|
+
|
|
245
|
+
/* ── 窄屏 ───────────────────────────────── */
|
|
246
|
+
@media (max-width: 820px) {
|
|
247
|
+
.top { height: auto; flex-wrap: wrap; gap: 10px 16px; padding: 10px 16px; position: static; }
|
|
248
|
+
.stats { height: 40px; margin-left: 0; order: 3; width: 100%; overflow: hidden; }
|
|
249
|
+
.stat { flex: 1; min-width: 0; padding: 0 10px; }
|
|
250
|
+
.stat span { white-space: nowrap; }
|
|
251
|
+
.stat:first-child { border-left: 0; padding-left: 0; }
|
|
252
|
+
.search { margin-left: auto; }
|
|
253
|
+
.search input { width: 180px; }
|
|
254
|
+
.layout { grid-template-columns: 1fr; height: auto; }
|
|
255
|
+
.rail { border-right: 0; border-bottom: 1px solid var(--line); max-height: 300px; }
|
|
256
|
+
.wrap { padding: 18px 16px 40px; }
|
|
257
|
+
.span { grid-template-columns: 18px minmax(0, 1fr) 56px; height: auto; padding: 7px 12px; row-gap: 3px; }
|
|
258
|
+
.span .st { grid-row: 1; grid-column: 1; }
|
|
259
|
+
.span .nm { grid-row: 1; grid-column: 2; }
|
|
260
|
+
.span .tm { grid-row: 1; grid-column: 3; }
|
|
261
|
+
.span .in { grid-row: 2; grid-column: 2 / 4; }
|
|
262
|
+
.span .track { grid-row: 3; grid-column: 2 / 4; height: 4px; }
|
|
263
|
+
.prompt, .errline { margin-left: 12px; }
|
|
264
|
+
.card-h .right { margin-left: 0; width: 100%; }
|
|
265
|
+
.fact dd { max-width: 240px; }
|
|
266
|
+
}
|
|
267
|
+
</style>
|
|
268
|
+
</head>
|
|
269
|
+
<body>
|
|
270
|
+
<header class="top">
|
|
271
|
+
<div class="brand"><span class="brand-mark">DS</span>DSH Live <span class="conn" id="conn"><i></i><span>连接中</span></span></div>
|
|
272
|
+
<div class="stats" id="stats"></div>
|
|
273
|
+
<div class="grow"></div>
|
|
274
|
+
<label class="search">
|
|
275
|
+
<svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="7" cy="7" r="5"/><path d="M11 11l4 4"/></svg>
|
|
276
|
+
<input type="search" id="q" placeholder="筛选标题、id、目录" aria-label="筛选会话">
|
|
277
|
+
</label>
|
|
278
|
+
</header>
|
|
279
|
+
<div class="layout">
|
|
280
|
+
<nav class="rail" id="rail" aria-label="会话"></nav>
|
|
281
|
+
<main class="main" id="main" aria-live="polite"></main>
|
|
282
|
+
</div>
|
|
283
|
+
<script>
|
|
284
|
+
(() => {
|
|
285
|
+
'use strict';
|
|
286
|
+
const token = new URLSearchParams(location.search).get('t') || '';
|
|
287
|
+
const $ = (id) => document.getElementById(id);
|
|
288
|
+
const store = {
|
|
289
|
+
get(k) { try { return localStorage.getItem(k); } catch { return null; } },
|
|
290
|
+
set(k, v) { try { localStorage.setItem(k, v); } catch {} },
|
|
291
|
+
};
|
|
292
|
+
let view = null;
|
|
293
|
+
let selected = store.get('dsh-live-sel');
|
|
294
|
+
const collapsed = new Set();
|
|
295
|
+
let q = '';
|
|
296
|
+
|
|
297
|
+
// 只用 textContent 建 DOM:事件内容来自磁盘文件,绝不当 HTML 解析。
|
|
298
|
+
function h(tag, cls, text) {
|
|
299
|
+
const n = document.createElement(tag);
|
|
300
|
+
if (cls) n.className = cls;
|
|
301
|
+
if (text !== undefined && text !== null && text !== '') n.textContent = String(text);
|
|
302
|
+
return n;
|
|
303
|
+
}
|
|
304
|
+
const short = (id) => String(id || '').slice(0, 8);
|
|
305
|
+
const base = (p) => String(p || '').split(/[\\/]/).filter(Boolean).pop() || p || '';
|
|
306
|
+
function dur(v) {
|
|
307
|
+
if (v === null || v === undefined || !isFinite(v)) return '';
|
|
308
|
+
if (v < 1000) return Math.round(v) + 'ms';
|
|
309
|
+
if (v < 60000) return (v / 1000).toFixed(v < 10000 ? 1 : 0) + 's';
|
|
310
|
+
const m = Math.floor(v / 60000);
|
|
311
|
+
return m + 'm' + String(Math.round((v % 60000) / 1000)).padStart(2, '0') + 's';
|
|
312
|
+
}
|
|
313
|
+
function ago(ts) {
|
|
314
|
+
if (!ts) return '';
|
|
315
|
+
const s = Math.max(0, (Date.now() - Date.parse(ts)) / 1000);
|
|
316
|
+
if (s < 45) return '刚刚';
|
|
317
|
+
if (s < 3600) return Math.round(s / 60) + ' 分钟前';
|
|
318
|
+
if (s < 86400) return Math.round(s / 3600) + ' 小时前';
|
|
319
|
+
return Math.round(s / 86400) + ' 天前';
|
|
320
|
+
}
|
|
321
|
+
const t = (ts) => (ts ? Date.parse(ts) : NaN);
|
|
322
|
+
function ftok(n) {
|
|
323
|
+
if (!isFinite(n)) return '';
|
|
324
|
+
if (n < 1000) return String(Math.round(n));
|
|
325
|
+
if (n < 1e6) return (n / 1000).toFixed(n < 10000 ? 1 : 0) + 'k';
|
|
326
|
+
return (n / 1e6).toFixed(n < 1e7 ? 2 : 1) + 'M';
|
|
327
|
+
}
|
|
328
|
+
const tin = (k) => (k ? k.input + k.cache_read + k.cache_write : 0);
|
|
329
|
+
const hit = (k) => { const a = tin(k); return a > 0 ? k.cache_read / a : null; };
|
|
330
|
+
const STATE = { running: '运行中', queued: '排队中', idle: '空闲', closed: '已释放' };
|
|
331
|
+
const RUN = { running: '运行中', queued: '排队', done: '完成', error: '出错', cancelled: '已取消', interrupted: '中断' };
|
|
332
|
+
const VIA = { send: '派活', queue: '排队', interject: '插话' };
|
|
333
|
+
const TOOL = { pending: '等待', in_progress: '进行中', unfinished: '未完成', completed: '完成', failed: '失败' };
|
|
334
|
+
const MODE = { 'auto-allow': '自动放行', 'auto-deny': '自动拒绝', 'read-only-deny': '只读拒绝', ask: '待人工裁决' };
|
|
335
|
+
|
|
336
|
+
function convs() {
|
|
337
|
+
const out = [];
|
|
338
|
+
for (const g of (view && view.groups) || []) for (const c of g.conversations) out.push(c);
|
|
339
|
+
return out;
|
|
340
|
+
}
|
|
341
|
+
const match = (c) => !q || [c.title, c.id, c.cwd, c.client].some((v) => v && String(v).toLowerCase().includes(q));
|
|
342
|
+
|
|
343
|
+
function renderStats() {
|
|
344
|
+
const s = view.totals;
|
|
345
|
+
const box = $('stats');
|
|
346
|
+
box.replaceChildren();
|
|
347
|
+
const stat = (n, label, cls) => {
|
|
348
|
+
const d = h('div', 'stat ' + (n ? cls || '' : 'zero'));
|
|
349
|
+
d.append(h('b', null, String(n)), h('span', null, label));
|
|
350
|
+
box.append(d);
|
|
351
|
+
};
|
|
352
|
+
stat(s.conversations, '会话', '');
|
|
353
|
+
stat(s.running, '运行中', 'hot');
|
|
354
|
+
stat(s.queued, '排队', 'warn');
|
|
355
|
+
stat(s.pending_approvals, '待审批', 'warn');
|
|
356
|
+
stat(s.escalations, '提权', 'warn');
|
|
357
|
+
if (s.tokens) {
|
|
358
|
+
const d = h('div', 'stat');
|
|
359
|
+
d.title = '全部会话 token:输入 ' + tin(s.tokens).toLocaleString() + '(缓存读 ' + s.tokens.cache_read.toLocaleString() + ')· 输出 ' + s.tokens.output.toLocaleString();
|
|
360
|
+
d.append(h('b', null, ftok(tin(s.tokens) + s.tokens.output)), h('span', null, 'token · 出 ' + ftok(s.tokens.output)));
|
|
361
|
+
box.append(d);
|
|
362
|
+
}
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
function renderRail() {
|
|
366
|
+
const rail = $('rail');
|
|
367
|
+
rail.replaceChildren();
|
|
368
|
+
let any = false;
|
|
369
|
+
for (const g of view.groups) {
|
|
370
|
+
const list = g.conversations.filter(match);
|
|
371
|
+
if (!list.length) continue;
|
|
372
|
+
any = true;
|
|
373
|
+
const grp = h('section', 'grp');
|
|
374
|
+
const gh = h('div', 'grp-h');
|
|
375
|
+
gh.append(h('b', null, g.client || '未知客户端'));
|
|
376
|
+
gh.append(h('span', 'mono', 'pid ' + (g.pid || '?')));
|
|
377
|
+
if (!g.alive) gh.append(h('span', 'gone', '已退出'));
|
|
378
|
+
grp.append(gh);
|
|
379
|
+
for (const c of list) {
|
|
380
|
+
const row = h('div', 'cv' + (c.id === selected ? ' sel' : ''));
|
|
381
|
+
row.tabIndex = 0;
|
|
382
|
+
row.setAttribute('role', 'button');
|
|
383
|
+
row.setAttribute('aria-pressed', String(c.id === selected));
|
|
384
|
+
row.append(h('i', 'sd ' + c.state));
|
|
385
|
+
row.append(h('div', 'ti', c.title || '无标题 · ' + short(c.id)));
|
|
386
|
+
row.append(h('div', 'ago', ago(c.last_ts)));
|
|
387
|
+
const sub = h('div', 'sub');
|
|
388
|
+
const active = c.runs.find((r) => r.status === 'running');
|
|
389
|
+
const pend = c.runs.reduce((n, r) => n + r.pending_approvals, 0);
|
|
390
|
+
sub.append(document.createTextNode(active && active.current_tool ? '▸ ' + active.current_tool : STATE[c.state] || c.state));
|
|
391
|
+
if (pend) sub.append(h('span', 'flag', ' · ' + pend + ' 待审批'));
|
|
392
|
+
sub.append(document.createTextNode(' · '));
|
|
393
|
+
const p = h('span', 'mono', base(c.cwd));
|
|
394
|
+
p.title = c.cwd || '';
|
|
395
|
+
sub.append(p);
|
|
396
|
+
row.append(sub);
|
|
397
|
+
const pick = () => { selected = c.id; store.set('dsh-live-sel', c.id); render(); };
|
|
398
|
+
row.addEventListener('click', pick);
|
|
399
|
+
row.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); pick(); } });
|
|
400
|
+
grp.append(row);
|
|
401
|
+
}
|
|
402
|
+
rail.append(grp);
|
|
403
|
+
}
|
|
404
|
+
if (!any) {
|
|
405
|
+
const e = h('div', 'empty');
|
|
406
|
+
if (q) e.append(h('h3', null, '没有匹配的会话'));
|
|
407
|
+
else {
|
|
408
|
+
e.append(h('h3', null, '还没有事件'));
|
|
409
|
+
const p = h('p');
|
|
410
|
+
p.append('用 ', h('code', null, 'dsh_send'), ' 派一次活,调用链会出现在这里。');
|
|
411
|
+
e.append(p);
|
|
412
|
+
}
|
|
413
|
+
rail.append(e);
|
|
414
|
+
}
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
/** 把会话目录前缀去掉,路径显示成相对路径(悬停仍能看到原文)。 */
|
|
418
|
+
function rel(txt, cwd) {
|
|
419
|
+
if (!txt || !cwd) return txt || '';
|
|
420
|
+
const root = String(cwd).replace(/[\\/]+$/, '');
|
|
421
|
+
let out = String(txt);
|
|
422
|
+
for (const sep of ['\\', '/']) out = out.split(root + sep).join('');
|
|
423
|
+
out = out.split(root).join('.');
|
|
424
|
+
return out;
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
function spanRow(it, run, t0, total, cwd) {
|
|
428
|
+
if (it.kind === 'tool') {
|
|
429
|
+
const st = it.status;
|
|
430
|
+
const cls = st === 'completed' ? 'ok' : st === 'failed' ? 'fail' : st === 'unfinished' ? '' : 'live';
|
|
431
|
+
const row = h('div', 'span ' + cls);
|
|
432
|
+
const s = h('span', 'st'); s.append(h('i')); row.append(s);
|
|
433
|
+
const label = it.name || it.title || 'tool';
|
|
434
|
+
const nm = h('span', 'nm', label);
|
|
435
|
+
if (it.tool_kind && it.tool_kind !== 'other' && it.tool_kind !== label) nm.append(h('span', 'kd', it.tool_kind));
|
|
436
|
+
row.append(nm);
|
|
437
|
+
const raw = it.input_preview || (it.title !== label ? it.title : '') || '';
|
|
438
|
+
const inp = h('span', 'in', rel(raw, cwd)); inp.title = raw; row.append(inp);
|
|
439
|
+
row.append(track(it, run, t0, total));
|
|
440
|
+
row.append(h('span', 'tm', it.elapsed_ms != null ? dur(it.elapsed_ms) : TOOL[st] || st || ''));
|
|
441
|
+
return row;
|
|
442
|
+
}
|
|
443
|
+
if (it.kind === 'approval') {
|
|
444
|
+
const row = h('div', 'span flagged');
|
|
445
|
+
row.append(h('span', 'st', '◆'));
|
|
446
|
+
row.append(h('span', 'nm', '审批'));
|
|
447
|
+
const inp = h('span', 'in');
|
|
448
|
+
if (it.escalation) inp.append(h('span', 'esc', '⚠ ' + it.escalation));
|
|
449
|
+
const txt = it.command_preview || it.title || it.tool || '';
|
|
450
|
+
inp.append(document.createTextNode(rel(txt, cwd)));
|
|
451
|
+
inp.title = (it.escalation ? it.escalation + ' ' : '') + txt;
|
|
452
|
+
row.append(inp);
|
|
453
|
+
const d = it.decided;
|
|
454
|
+
row.append(h('span', 'in', d ? '→ ' + (d.decision || d.effective || '') + (d.by ? '(' + d.by + ')' : '') : MODE[it.mode] || it.mode || ''));
|
|
455
|
+
row.append(h('span', 'tm', it.mode === 'ask' && !d ? '等待' : (MODE[it.mode] ? '' : '')));
|
|
456
|
+
return row;
|
|
457
|
+
}
|
|
458
|
+
const row = h('div', 'span note' + (it.kind === 'interrupt' ? ' stop' : ''));
|
|
459
|
+
row.append(h('span', 'st', it.kind === 'interrupt' ? '■' : '↪'));
|
|
460
|
+
row.append(h('span', 'nm', it.kind === 'interrupt' ? '中断' : '插话' + (it.mode ? ' · ' + it.mode : '')));
|
|
461
|
+
row.append(h('span', 'in', it.text_preview || ''));
|
|
462
|
+
row.append(h('span'));
|
|
463
|
+
row.append(h('span', 'tm', ''));
|
|
464
|
+
return row;
|
|
465
|
+
}
|
|
466
|
+
|
|
467
|
+
/** 时间条:工具在本轮里的起点与时长(类似 trace 瀑布图)。 */
|
|
468
|
+
function track(it, run, t0, total) {
|
|
469
|
+
const tr = h('span', 'track');
|
|
470
|
+
const start = t(it.at);
|
|
471
|
+
if (!isFinite(t0) || !isFinite(start) || !(total > 0)) return tr;
|
|
472
|
+
const end = it.elapsed_ms != null ? start + it.elapsed_ms : run.status === 'running' ? Date.now() : t(it.last_at) || start;
|
|
473
|
+
const left = Math.max(0, Math.min(100, ((start - t0) / total) * 100));
|
|
474
|
+
const width = Math.max(0.8, Math.min(100 - left, ((end - start) / total) * 100));
|
|
475
|
+
const b = h('b');
|
|
476
|
+
b.style.left = left + '%';
|
|
477
|
+
b.style.width = width + '%';
|
|
478
|
+
tr.title = dur(start - t0) + ' 起 · ' + dur(end - start);
|
|
479
|
+
tr.append(b);
|
|
480
|
+
return tr;
|
|
481
|
+
}
|
|
482
|
+
|
|
483
|
+
function chev() {
|
|
484
|
+
const s = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
|
485
|
+
s.setAttribute('width', '12'); s.setAttribute('height', '12'); s.setAttribute('viewBox', '0 0 16 16'); s.setAttribute('class', 'chev');
|
|
486
|
+
const p = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
|
487
|
+
p.setAttribute('d', 'M4 6l4 4 4-4'); p.setAttribute('fill', 'none'); p.setAttribute('stroke', 'currentColor'); p.setAttribute('stroke-width', '2');
|
|
488
|
+
s.append(p);
|
|
489
|
+
return s;
|
|
490
|
+
}
|
|
491
|
+
|
|
492
|
+
function renderMain() {
|
|
493
|
+
const main = $('main');
|
|
494
|
+
main.replaceChildren();
|
|
495
|
+
const all = convs();
|
|
496
|
+
let c = all.find((x) => x.id === selected);
|
|
497
|
+
if (!c) c = all.find((x) => x.state === 'running') || all[0];
|
|
498
|
+
if (!c) {
|
|
499
|
+
const e = h('div', 'empty');
|
|
500
|
+
e.append(h('h3', null, '等待第一条事件'));
|
|
501
|
+
const p = h('p');
|
|
502
|
+
p.append('这是只读视图。服务端写入 ', h('code', null, 'live/'), ' 事件流后,这里按 客户端 → 会话 → 回合 → 工具 展开调用链。');
|
|
503
|
+
e.append(p);
|
|
504
|
+
main.append(e);
|
|
505
|
+
return;
|
|
506
|
+
}
|
|
507
|
+
selected = c.id;
|
|
508
|
+
const wrap = h('div', 'wrap');
|
|
509
|
+
const hd = h('div', 'hd');
|
|
510
|
+
hd.append(h('h1', null, c.title || '无标题会话'));
|
|
511
|
+
const facts = h('dl', 'facts');
|
|
512
|
+
const fact = (k, v, cls, full) => {
|
|
513
|
+
if (!v) return;
|
|
514
|
+
const f = h('div', 'fact' + (cls && cls.includes('path') ? ' wide' : ''));
|
|
515
|
+
f.append(h('dt', null, k));
|
|
516
|
+
const dd = h('dd', cls || null);
|
|
517
|
+
// 路径过长时从左边截断(保留末尾的目录名);用 bdi 包住,避免 rtl 把标点甩到另一头。
|
|
518
|
+
const bdi = document.createElement('bdi');
|
|
519
|
+
bdi.textContent = v;
|
|
520
|
+
dd.append(bdi);
|
|
521
|
+
dd.title = full || v;
|
|
522
|
+
f.append(dd);
|
|
523
|
+
facts.append(f);
|
|
524
|
+
};
|
|
525
|
+
fact('状态', STATE[c.state] || c.state);
|
|
526
|
+
fact('客户端', (c.client || '未知') + ' · pid ' + (c.writer ? String(c.writer).split(':')[0] : '?') + (c.writer_alive ? '' : '(已退出)'));
|
|
527
|
+
fact('权限', [c.permission, c.on_approval].filter(Boolean).join(' · '));
|
|
528
|
+
fact('模型', c.model);
|
|
529
|
+
fact('会话 id', short(c.id), 'mono', c.id);
|
|
530
|
+
fact('目录', c.cwd, 'mono path');
|
|
531
|
+
hd.append(facts);
|
|
532
|
+
wrap.append(hd);
|
|
533
|
+
|
|
534
|
+
const cols = h('div', 'cols');
|
|
535
|
+
const left = h('div');
|
|
536
|
+
const sh = h('div', 'sec-h');
|
|
537
|
+
sh.append(h('h2', null, '调用链'), h('span', null, c.runs.length + ' 个回合 · 最新在上'));
|
|
538
|
+
left.append(sh);
|
|
539
|
+
|
|
540
|
+
const turns = h('div', 'turns');
|
|
541
|
+
const runs = [...c.runs].reverse();
|
|
542
|
+
if (!runs.length) {
|
|
543
|
+
const e = h('div', 'empty');
|
|
544
|
+
e.append(h('h3', null, '这个会话还没有派过活'));
|
|
545
|
+
turns.append(e);
|
|
546
|
+
}
|
|
547
|
+
for (const r of runs) {
|
|
548
|
+
const key = c.id + '/' + r.run;
|
|
549
|
+
const turn = h('div', 'turn ' + r.status + (collapsed.has(key) ? ' collapsed' : ''));
|
|
550
|
+
turn.append(h('span', 'node'));
|
|
551
|
+
const card = h('div', 'card');
|
|
552
|
+
const head = h('div', 'card-h');
|
|
553
|
+
head.setAttribute('role', 'button');
|
|
554
|
+
head.tabIndex = 0;
|
|
555
|
+
head.append(chev());
|
|
556
|
+
head.append(h('span', 'tag ' + r.status, RUN[r.status] || r.status));
|
|
557
|
+
if (r.via && !(r.status === 'queued' && r.via === 'queue')) head.append(h('span', 'tag ghost', VIA[r.via] || r.via));
|
|
558
|
+
head.append(h('span', 'rid', (r.turn ? '第 ' + r.turn + ' 轮 · ' : '') + r.run));
|
|
559
|
+
if (r.escalations) head.append(h('span', 'tag warn', '⚠ ' + r.escalations + ' 次提权'));
|
|
560
|
+
if (r.pending_approvals) head.append(h('span', 'tag warn', r.pending_approvals + ' 待审批'));
|
|
561
|
+
const right = h('span', 'right');
|
|
562
|
+
const tools = r.items.filter((x) => x.kind === 'tool').length;
|
|
563
|
+
const n = r.tool_count != null ? r.tool_count : tools;
|
|
564
|
+
const rb = h('span'); rb.append(h('b', null, String(n)), ' 个工具'); right.append(rb);
|
|
565
|
+
const t0 = t(r.started_at);
|
|
566
|
+
const total = r.duration_ms != null ? r.duration_ms : r.status === 'running' && isFinite(t0) ? Date.now() - t0 : null;
|
|
567
|
+
if (r.tokens) {
|
|
568
|
+
const tk = h('span', 'tok-run');
|
|
569
|
+
tk.title = '本回合 token:输入 ' + tin(r.tokens) + '(缓存读 ' + r.tokens.cache_read + ')· 输出 ' + r.tokens.output;
|
|
570
|
+
tk.append(h('b', null, ftok(tin(r.tokens))), '↑ ', h('b', null, ftok(r.tokens.output)), '↓');
|
|
571
|
+
right.append(tk);
|
|
572
|
+
}
|
|
573
|
+
if (total != null) { const d = h('span'); d.append(h('b', null, dur(total))); right.append(d); }
|
|
574
|
+
right.append(h('span', null, ago(r.ended_at || r.started_at || r.queued_at)));
|
|
575
|
+
head.append(right);
|
|
576
|
+
const toggle = () => { if (collapsed.has(key)) collapsed.delete(key); else collapsed.add(key); render(); };
|
|
577
|
+
head.addEventListener('click', toggle);
|
|
578
|
+
head.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(); } });
|
|
579
|
+
card.append(head);
|
|
580
|
+
const body = h('div', 'body');
|
|
581
|
+
if (r.prompt_preview) body.append(h('div', 'prompt', r.prompt_preview));
|
|
582
|
+
if (r.error) body.append(h('div', 'errline', r.error));
|
|
583
|
+
if (r.items.length) {
|
|
584
|
+
const boxEl = h('div', 'spans-box');
|
|
585
|
+
const spans = h('div', 'spans');
|
|
586
|
+
spans.dataset.key = key;
|
|
587
|
+
spans.tabIndex = 0; // 键盘也能滚(方向键 / PageDown)
|
|
588
|
+
spans.setAttribute('aria-label', '工具调用列表');
|
|
589
|
+
for (const it of r.items) spans.append(spanRow(it, r, t0, total, c.cwd));
|
|
590
|
+
boxEl.append(spans, h('span', 'spans-count'));
|
|
591
|
+
body.append(boxEl);
|
|
592
|
+
pendingScroll.push({ spans, box: boxEl, key, running: r.status === 'running' });
|
|
593
|
+
}
|
|
594
|
+
card.append(body);
|
|
595
|
+
turn.append(card);
|
|
596
|
+
turns.append(turn);
|
|
597
|
+
}
|
|
598
|
+
left.append(turns);
|
|
599
|
+
left.append(h('div', 'foot', '只读视图 · 数据来自本机 live 事件流 · 思考内容从不写入 · 点击回合标题折叠'));
|
|
600
|
+
cols.append(left, inspector(c));
|
|
601
|
+
wrap.append(cols);
|
|
602
|
+
main.append(wrap);
|
|
603
|
+
}
|
|
604
|
+
|
|
605
|
+
/** Token 面板:会话累计(DSH 记录)、构成、上下文窗口、每回合用量。 */
|
|
606
|
+
function tokenPanel(c) {
|
|
607
|
+
const p = h('section', 'panel');
|
|
608
|
+
p.append(h('h3', null, 'Token 消耗'));
|
|
609
|
+
const k = c.tokens;
|
|
610
|
+
if (!k) {
|
|
611
|
+
p.append(h('div', 'muted', '暂无数据:派一次活之后,这里会实时显示本会话的 token 用量。'));
|
|
612
|
+
return p;
|
|
613
|
+
}
|
|
614
|
+
const big = h('div', 'tok-big');
|
|
615
|
+
const cell = (v, label) => { const d = h('div'); d.append(h('b', null, v), h('span', null, label)); big.append(d); };
|
|
616
|
+
cell(ftok(tin(k)), '输入');
|
|
617
|
+
cell(ftok(k.output), '输出');
|
|
618
|
+
const hr = hit(k);
|
|
619
|
+
cell(hr == null ? '—' : Math.round(hr * 100) + '%', '缓存命中');
|
|
620
|
+
p.append(big);
|
|
621
|
+
|
|
622
|
+
// 构成:未命中缓存的输入 / 缓存读 / 缓存写 / 输出
|
|
623
|
+
const parts = [
|
|
624
|
+
['c-unc', '未缓存输入', k.input],
|
|
625
|
+
['c-read', '缓存读', k.cache_read],
|
|
626
|
+
['c-write', '缓存写', k.cache_write],
|
|
627
|
+
['c-out', '输出', k.output],
|
|
628
|
+
];
|
|
629
|
+
const sum = parts.reduce((n, x) => n + x[2], 0) || 1;
|
|
630
|
+
const stack = h('div', 'stack');
|
|
631
|
+
stack.setAttribute('role', 'img');
|
|
632
|
+
stack.setAttribute('aria-label', parts.map((x) => x[1] + ' ' + x[2]).join(','));
|
|
633
|
+
for (const [cls, label, v] of parts) {
|
|
634
|
+
if (!v) continue;
|
|
635
|
+
const i = h('i', cls);
|
|
636
|
+
i.style.width = (v / sum) * 100 + '%';
|
|
637
|
+
i.title = label + ' ' + v.toLocaleString();
|
|
638
|
+
stack.append(i);
|
|
639
|
+
}
|
|
640
|
+
p.append(stack);
|
|
641
|
+
const lg = h('div', 'legend');
|
|
642
|
+
for (const [cls, label, v] of parts) {
|
|
643
|
+
const s = h('span');
|
|
644
|
+
s.append(h('i', cls), label, h('em', null, ftok(v)));
|
|
645
|
+
lg.append(s);
|
|
646
|
+
}
|
|
647
|
+
p.append(lg);
|
|
648
|
+
|
|
649
|
+
if (c.context && c.context.window) {
|
|
650
|
+
const pct = Math.min(100, (c.context.used / c.context.window) * 100);
|
|
651
|
+
const hh = h('div', 'ctx-h');
|
|
652
|
+
hh.append(h('span', null, '上下文窗口'), h('span', null, ftok(c.context.used) + ' / ' + ftok(c.context.window) + '(' + (pct < 1 ? pct.toFixed(1) : Math.round(pct)) + '%)'));
|
|
653
|
+
p.append(hh);
|
|
654
|
+
const bar = h('div', 'ctx' + (pct > 85 ? ' crit' : pct > 60 ? ' hi' : ''));
|
|
655
|
+
const b = h('b'); b.style.width = Math.max(1, pct) + '%'; bar.append(b);
|
|
656
|
+
p.append(bar);
|
|
657
|
+
}
|
|
658
|
+
|
|
659
|
+
const runs = c.runs.filter((r) => r.tokens).slice(-16);
|
|
660
|
+
if (runs.length) {
|
|
661
|
+
const per = runs.map((r) => tin(r.tokens) + r.tokens.output);
|
|
662
|
+
const max = Math.max(...per) || 1;
|
|
663
|
+
const sh = h('div', 'spark-h');
|
|
664
|
+
sh.append(h('span', null, '每回合用量'), h('span', null, '最近 ' + runs.length + ' 轮 · 最高 ' + ftok(max)));
|
|
665
|
+
p.append(sh);
|
|
666
|
+
const sp = h('div', 'spark');
|
|
667
|
+
runs.forEach((r, i) => {
|
|
668
|
+
const bar = h('i', r.status === 'running' ? 'cur' : '');
|
|
669
|
+
bar.style.height = Math.max(6, (per[i] / max) * 100) + '%';
|
|
670
|
+
bar.title = (r.turn ? '第 ' + r.turn + ' 轮 · ' : '') + r.run + ':输入 ' + ftok(tin(r.tokens)) + ' · 输出 ' + ftok(r.tokens.output);
|
|
671
|
+
sp.append(bar);
|
|
672
|
+
});
|
|
673
|
+
p.append(sp);
|
|
674
|
+
}
|
|
675
|
+
p.append(h('div', 'foot', '数字来自 DSH 自己的会话记录(累计,含 live 之前的回合)。'));
|
|
676
|
+
return p;
|
|
677
|
+
}
|
|
678
|
+
|
|
679
|
+
/** 读写类工具:用来从输入预览里认出"涉及的文件"。 */
|
|
680
|
+
const READ_TOOLS = /^(read|view|cat|open|glob|grep|search|list|ls)/i;
|
|
681
|
+
const WRITE_TOOLS = /^(write|edit|create|patch|apply|replace|delete|move|rename|mkdir)/i;
|
|
682
|
+
const looksLikePath = (s) => !!s && !/\s/.test(s) && (/[\\/]/.test(s) || /\.[A-Za-z0-9]{1,8}$/.test(s));
|
|
683
|
+
|
|
684
|
+
/** 右侧检查器:这个会话的总量、工具分布、涉及文件、审批。 */
|
|
685
|
+
function inspector(c) {
|
|
686
|
+
const box = h('aside', 'inspector');
|
|
687
|
+
const tools = [];
|
|
688
|
+
const approvals = [];
|
|
689
|
+
for (const r of c.runs) for (const it of r.items) {
|
|
690
|
+
if (it.kind === 'tool') tools.push(it);
|
|
691
|
+
else if (it.kind === 'approval') approvals.push(it);
|
|
692
|
+
}
|
|
693
|
+
const failed = tools.filter((x) => x.status === 'failed').length;
|
|
694
|
+
const toolMs = tools.reduce((n, x) => n + (x.elapsed_ms || 0), 0);
|
|
695
|
+
const esc = approvals.filter((x) => x.escalation).length;
|
|
696
|
+
|
|
697
|
+
const ov = h('section', 'panel');
|
|
698
|
+
ov.append(h('h3', null, '概览'));
|
|
699
|
+
const kpis = h('div', 'kpis');
|
|
700
|
+
const kpi = (v, label, cls) => {
|
|
701
|
+
const k = h('div', 'kpi ' + (v && v !== '0' ? cls || '' : 'zero'));
|
|
702
|
+
k.append(h('b', null, String(v)), h('span', null, label));
|
|
703
|
+
kpis.append(k);
|
|
704
|
+
};
|
|
705
|
+
kpi(c.runs.length, '回合');
|
|
706
|
+
kpi(tools.length, '工具调用');
|
|
707
|
+
kpi(failed, '失败', 'bad');
|
|
708
|
+
kpi(toolMs ? dur(toolMs) : '0', '工具耗时');
|
|
709
|
+
kpi(approvals.length, '审批', 'warn');
|
|
710
|
+
kpi(esc, '提权', 'warn');
|
|
711
|
+
ov.append(kpis);
|
|
712
|
+
box.append(ov);
|
|
713
|
+
box.append(tokenPanel(c));
|
|
714
|
+
|
|
715
|
+
const byName = new Map();
|
|
716
|
+
for (const x of tools) {
|
|
717
|
+
const k = x.name || x.title || 'tool';
|
|
718
|
+
const e = byName.get(k) || { n: 0, ms: 0, fail: 0 };
|
|
719
|
+
e.n++; e.ms += x.elapsed_ms || 0; if (x.status === 'failed') e.fail++;
|
|
720
|
+
byName.set(k, e);
|
|
721
|
+
}
|
|
722
|
+
const dist = h('section', 'panel');
|
|
723
|
+
dist.append(h('h3', null, '工具分布'));
|
|
724
|
+
if (!byName.size) dist.append(h('div', 'muted', '还没有工具调用'));
|
|
725
|
+
else {
|
|
726
|
+
const rows = [...byName.entries()].sort((a, b) => b[1].n - a[1].n || b[1].ms - a[1].ms);
|
|
727
|
+
const max = rows[0][1].n;
|
|
728
|
+
const list = h('div', 'dist');
|
|
729
|
+
for (const [name, e] of rows.slice(0, 8)) {
|
|
730
|
+
const row = h('div', 'dist-row');
|
|
731
|
+
row.append(h('span', 'n', name));
|
|
732
|
+
row.append(h('span', 'v', '×' + e.n + (e.ms ? ' · ' + dur(e.ms) : '') + (e.fail ? ' · ' + e.fail + ' 失败' : '')));
|
|
733
|
+
const bar = h('span', 'bar'); const b = h('b'); b.style.width = Math.max(4, (e.n / max) * 100) + '%'; bar.append(b); row.append(bar);
|
|
734
|
+
list.append(row);
|
|
735
|
+
}
|
|
736
|
+
dist.append(list);
|
|
737
|
+
}
|
|
738
|
+
box.append(dist);
|
|
739
|
+
|
|
740
|
+
const files = new Map();
|
|
741
|
+
for (const x of tools) {
|
|
742
|
+
const name = x.name || x.title || '';
|
|
743
|
+
const p = x.input_preview && x.input_preview.split(' · ')[0];
|
|
744
|
+
if (!looksLikePath(p)) continue;
|
|
745
|
+
const op = WRITE_TOOLS.test(name) ? 'w' : READ_TOOLS.test(name) ? 'r' : null;
|
|
746
|
+
if (!op) continue;
|
|
747
|
+
const key = rel(p, c.cwd) || p;
|
|
748
|
+
const prev = files.get(key);
|
|
749
|
+
files.set(key, prev === 'w' || op === 'w' ? 'w' : 'r');
|
|
750
|
+
}
|
|
751
|
+
const fp = h('section', 'panel');
|
|
752
|
+
fp.append(h('h3', null, '涉及文件'));
|
|
753
|
+
if (!files.size) fp.append(h('div', 'muted', '还没有读写文件'));
|
|
754
|
+
else {
|
|
755
|
+
const ul = h('ul', 'files');
|
|
756
|
+
for (const [p, op] of [...files.entries()].slice(-14).reverse()) {
|
|
757
|
+
const li = h('li');
|
|
758
|
+
li.append(h('span', 'op ' + op, op === 'w' ? '写' : '读'));
|
|
759
|
+
const ps = h('span', 'p'); const bdi = document.createElement('bdi'); bdi.textContent = p; ps.append(bdi); ps.title = p;
|
|
760
|
+
li.append(ps);
|
|
761
|
+
ul.append(li);
|
|
762
|
+
}
|
|
763
|
+
fp.append(ul);
|
|
764
|
+
}
|
|
765
|
+
box.append(fp);
|
|
766
|
+
|
|
767
|
+
if (approvals.length) {
|
|
768
|
+
const ap = h('section', 'panel');
|
|
769
|
+
ap.append(h('h3', null, '审批'));
|
|
770
|
+
const list = h('div', 'aps');
|
|
771
|
+
for (const a of approvals.slice(-6).reverse()) {
|
|
772
|
+
const d = h('div', 'ap');
|
|
773
|
+
const m = h('div', 'm', (MODE[a.mode] || a.mode || '') + (a.escalation ? ' · ⚠ ' + a.escalation : ''));
|
|
774
|
+
d.append(m);
|
|
775
|
+
const cmd = rel(a.command_preview || a.title || a.tool || '', c.cwd);
|
|
776
|
+
if (cmd) { const cc = h('div', 'c', cmd); cc.title = cmd; d.append(cc); }
|
|
777
|
+
if (a.decided) d.append(h('div', 'muted', '→ ' + (a.decided.decision || a.decided.effective || '') + (a.decided.by ? '(' + a.decided.by + ')' : '')));
|
|
778
|
+
list.append(d);
|
|
779
|
+
}
|
|
780
|
+
ap.append(list);
|
|
781
|
+
box.append(ap);
|
|
782
|
+
}
|
|
783
|
+
return box;
|
|
784
|
+
}
|
|
785
|
+
|
|
786
|
+
/**
|
|
787
|
+
* 每个回合工具列表的滚动状态(按 会话/回合 记):整块重建 DOM 后恢复位置。
|
|
788
|
+
* 停在底部的(或从没滚过的运行中回合)跟随最新工具;用户往上翻过就停在原处。
|
|
789
|
+
*/
|
|
790
|
+
const scrollState = new Map();
|
|
791
|
+
let pendingScroll = [];
|
|
792
|
+
function updateEdges(spans, box) {
|
|
793
|
+
const max = spans.scrollHeight - spans.clientHeight;
|
|
794
|
+
box.classList.toggle('more-up', spans.scrollTop > 2);
|
|
795
|
+
box.classList.toggle('more-down', spans.scrollTop < max - 2);
|
|
796
|
+
const hiddenBelow = Math.max(0, Math.round((max - spans.scrollTop) / 32));
|
|
797
|
+
box.lastElementChild.textContent = hiddenBelow ? '↓ ' + hiddenBelow + ' 条' : '';
|
|
798
|
+
}
|
|
799
|
+
function restoreScroll() {
|
|
800
|
+
for (const { spans, box, key, running } of pendingScroll) {
|
|
801
|
+
const st = scrollState.get(key);
|
|
802
|
+
const max = spans.scrollHeight - spans.clientHeight;
|
|
803
|
+
if (st && !st.atBottom) spans.scrollTop = Math.min(st.top, max);
|
|
804
|
+
else if (st || running) spans.scrollTop = max;
|
|
805
|
+
updateEdges(spans, box);
|
|
806
|
+
spans.addEventListener('scroll', () => {
|
|
807
|
+
const m = spans.scrollHeight - spans.clientHeight;
|
|
808
|
+
scrollState.set(key, { top: spans.scrollTop, atBottom: spans.scrollTop >= m - 4 });
|
|
809
|
+
updateEdges(spans, box);
|
|
810
|
+
}, { passive: true });
|
|
811
|
+
}
|
|
812
|
+
pendingScroll = [];
|
|
813
|
+
}
|
|
814
|
+
|
|
815
|
+
function render() {
|
|
816
|
+
if (!view) return;
|
|
817
|
+
const rt = $('rail').scrollTop, mt = $('main').scrollTop, wt = window.scrollY;
|
|
818
|
+
// 先定下选中的会话(没选过 / 已消失时挑正在跑的),左栏高亮和右侧详情才一致。
|
|
819
|
+
const all = convs();
|
|
820
|
+
if (!all.some((x) => x.id === selected)) {
|
|
821
|
+
const pick = all.find((x) => x.state === 'running') || all[0];
|
|
822
|
+
selected = pick ? pick.id : null;
|
|
823
|
+
}
|
|
824
|
+
renderStats();
|
|
825
|
+
renderRail();
|
|
826
|
+
pendingScroll = [];
|
|
827
|
+
renderMain();
|
|
828
|
+
restoreScroll();
|
|
829
|
+
$('rail').scrollTop = rt; $('main').scrollTop = mt; window.scrollTo(0, wt);
|
|
830
|
+
}
|
|
831
|
+
|
|
832
|
+
$('q').addEventListener('input', (e) => { q = e.target.value.trim().toLowerCase(); render(); });
|
|
833
|
+
|
|
834
|
+
function setConn(on, text) {
|
|
835
|
+
const c = $('conn');
|
|
836
|
+
c.className = 'conn' + (on ? ' on' : '');
|
|
837
|
+
c.lastElementChild.textContent = text;
|
|
838
|
+
}
|
|
839
|
+
const es = new EventSource('/events?t=' + encodeURIComponent(token));
|
|
840
|
+
es.onopen = () => setConn(true, '实时');
|
|
841
|
+
es.onmessage = (e) => { try { view = JSON.parse(e.data); } catch { return; } render(); };
|
|
842
|
+
es.onerror = () => setConn(false, '重连中');
|
|
843
|
+
setInterval(render, 15000);
|
|
844
|
+
})();
|
|
845
|
+
</script>
|
|
846
|
+
</body>
|
|
847
|
+
</html>
|