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.
@@ -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>