codebee 0.1.96 → 0.1.98

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.
Files changed (35) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/README.md +4 -2
  3. package/app/core/agent_context.py +21 -3
  4. package/app/core/board.py +39 -2
  5. package/app/core/builtin_agent.py +409 -34
  6. package/app/core/checkpoints.py +505 -0
  7. package/app/core/jobs.py +8 -1
  8. package/app/core/manager.py +109 -11
  9. package/app/core/mcp_client.py +200 -29
  10. package/app/core/pipeline.py +289 -40
  11. package/app/core/policy.py +36 -4
  12. package/app/core/project_memory.py +139 -0
  13. package/app/core/publish/auto.py +80 -19
  14. package/app/core/publish/browser.py +39 -0
  15. package/app/core/publish/fanqie.py +2 -0
  16. package/app/core/publish/flow.py +96 -17
  17. package/app/core/publish/flows-fanqie-calibrated.json +23 -11
  18. package/app/core/publish/ledger.py +38 -1
  19. package/app/core/runner.py +21 -11
  20. package/app/core/settings.py +13 -5
  21. package/app/core/settings_schema.py +14 -3
  22. package/app/core/store.py +21 -6
  23. package/app/core/tool_outputs.py +107 -0
  24. package/app/core/wxdigest.py +8 -1
  25. package/app/main.py +76 -2
  26. package/app/ui/app.js +356 -82
  27. package/app/ui/assets/workbench-reference.png +0 -0
  28. package/app/ui/board.css +451 -666
  29. package/app/ui/board.html +97 -94
  30. package/app/ui/board.js +316 -112
  31. package/app/ui/hive3d.js +242 -0
  32. package/app/ui/i18n.js +93 -10
  33. package/app/ui/index.html +31 -3
  34. package/app/ui/style.css +97 -111
  35. package/package.json +3 -2
package/app/ui/board.css CHANGED
@@ -1,711 +1,496 @@
1
- /* CodeBee Mission Control
2
- 方向：工业感任务指挥中心。深海底色承载信息，琥珀色代表蜂群，冰蓝色代表实时数据。
3
- v2 修订：旧版装饰密度高于信息密度。保留现有 DOM 与动态行为，
4
- 调色板重置为更温暖的石墨蓝，强调色收敛、字号层级拉清（原 v1 值已并入本块）。 */
1
+ /* CodeBee 任务驾驶舱（/board.html）—— 工业感指挥中心，单层样式。
2
+ *
3
+ * 换肤架构（两层 token，布局规则只引用第二层）：
4
+ * 1) 主应用同款 token：--bg/--sidebar/--panel/--panel2/--border/--border-strong/
5
+ * --text/--muted/--accent/--ok/--warn/--bad/--log-bg/--log-text/--shadow，
6
+ * 由 html[data-skin][data-theme] 取值，值与 style.css:33-297 同源。
7
+ * 2) 大屏语义别名：--live（活动/蜂群=琥珀）、--data（数据/时间=主强调）、
8
+ * --t1/t2/t3 文字层级、--sunk/--term 终端、--card 卡面、--track 空槽。
9
+ * 新增皮肤只需补第 1 层块，本文件布局规则一行不用改；两套值的同步由
10
+ * tests/test_board_tokens.py 守住（抄写不靠自觉）。
11
+ *
12
+ * 历史包袱已清：v1 的网格底纹/暗角/辉光/水印/轨道动画属装饰高于信息密度，
13
+ * v2/v3 是靠后写覆盖前写的三层叠加，均已删除。 */
5
14
 
15
+ /* ---------- 第 1 层：主应用同款 token（兜底 = 经典·夜间） ---------- */
16
+ :root {
17
+ --bg: #091522;
18
+ --sidebar: #0b1c2c;
19
+ --panel: rgba(15, 34, 53, .88);
20
+ --panel2: #132c43;
21
+ --border: rgba(194, 223, 249, .12);
22
+ --border-strong: rgba(194, 223, 249, .24);
23
+ --text: #edf6ff;
24
+ --muted: #92a9bf;
25
+ --accent: #53b9f5;
26
+ --accent2: #a28af5;
27
+ --ok: #34c98e;
28
+ --warn: #f5b942;
29
+ --bad: #f0566a;
30
+ --log-bg: #161616;
31
+ --log-text: #c3c9d6;
32
+ --shadow: 0 22px 60px rgba(0, 0, 0, .30);
33
+ }
34
+ html[data-theme="light"] {
35
+ --bg: #f4f7fb; --sidebar: #eef3f8; --panel: rgba(255, 255, 255, .88); --panel2: #eaf0f6;
36
+ --border: rgba(21, 49, 78, .11); --border-strong: rgba(21, 49, 78, .24);
37
+ --text: #10253d; --muted: #63758b; --accent: #167dce; --accent2: #7858de;
38
+ --ok: #139878; --warn: #b07d18; --bad: #d63c55;
39
+ --log-bg: #f6f6f7; --log-text: #3a4050; --shadow: 0 18px 48px rgba(24, 54, 89, .10);
40
+ }
41
+ html[data-skin="ocean"] {
42
+ --bg: #0e1626; --sidebar: #0a111e; --panel: #17243a; --panel2: #21304a;
43
+ --border: rgba(255, 255, 255, .10); --border-strong: rgba(255, 255, 255, .20);
44
+ --text: #e7eefb; --muted: #93a6c4; --accent: #3ba9f5; --accent2: #6d6cf6;
45
+ --ok: #35c99b; --warn: #f0b429; --bad: #f2637a;
46
+ --log-bg: #08101c; --log-text: #bccbe4; --shadow: 0 10px 30px rgba(0, 0, 0, .45);
47
+ }
48
+ html[data-skin="ocean"][data-theme="light"] {
49
+ --bg: #ffffff; --sidebar: #eff5fd; --panel: #ffffff; --panel2: #f0f6fd;
50
+ --border: #d7e3f4; --border-strong: #b9cde8;
51
+ --text: #0c1a2c; --muted: #526983; --accent: #1f6fd0; --accent2: #5b4fe0;
52
+ --ok: #0d9a72; --warn: #a9761a; --bad: #d23c58;
53
+ --log-bg: #f4f8fe; --log-text: #33475f; --shadow: 0 16px 44px rgba(31, 43, 54, .08);
54
+ }
55
+ html[data-skin="forest"] {
56
+ --bg: #141d18; --sidebar: #0f1613; --panel: #1d2a23; --panel2: #26362d;
57
+ --border: rgba(255, 255, 255, .09); --border-strong: rgba(255, 255, 255, .18);
58
+ --text: #e6f1ea; --muted: #94ac9e; --accent: #35c98c; --accent2: #2bbfa8;
59
+ --ok: #35c98c; --warn: #e5b154; --bad: #ef6a6a;
60
+ --log-bg: #0b1310; --log-text: #b9cfc2; --shadow: 0 10px 30px rgba(0, 0, 0, .42);
61
+ }
62
+ html[data-skin="forest"][data-theme="light"] {
63
+ --bg: #ffffff; --sidebar: #eef6f1; --panel: #ffffff; --panel2: #eff7f2;
64
+ --border: #d6e7dd; --border-strong: #b9d4c5;
65
+ --text: #10201a; --muted: #5b7266; --accent: #0e8f61; --accent2: #0d8577;
66
+ --ok: #0e8f61; --warn: #9c6d12; --bad: #cc3f4d;
67
+ --log-bg: #f2f8f4; --log-text: #33463c; --shadow: 0 10px 30px rgba(0, 0, 0, .07);
68
+ }
69
+ html[data-skin="amber"] {
70
+ --bg: #1e1915; --sidebar: #171310; --panel: #2a231d; --panel2: #362c23;
71
+ --border: rgba(255, 255, 255, .09); --border-strong: rgba(255, 255, 255, .18);
72
+ --text: #f2e9dd; --muted: #b5a390; --accent: #e79a2b; --accent2: #e2703f;
73
+ --ok: #3fbf8a; --warn: #e8b44a; --bad: #ea6262;
74
+ --log-bg: #15110d; --log-text: #dccfbe; --shadow: 0 10px 30px rgba(0, 0, 0, .42);
75
+ }
76
+ html[data-skin="amber"][data-theme="light"] {
77
+ --bg: #ffffff; --sidebar: #faf3e9; --panel: #ffffff; --panel2: #fbf3e8;
78
+ --border: #ebdfcd; --border-strong: #d6c3a6;
79
+ --text: #241b12; --muted: #7c6952; --accent: #b96a12; --accent2: #b8542c;
80
+ --ok: #0e8f61; --warn: #96650c; --bad: #c93b45;
81
+ --log-bg: #fdf7ef; --log-text: #4a3c2e; --shadow: 0 10px 30px rgba(0, 0, 0, .07);
82
+ }
83
+ html[data-skin="violet"] {
84
+ --bg: #16121e; --sidebar: #110d18; --panel: #221b30; --panel2: #2e2440;
85
+ --border: rgba(255, 255, 255, .10); --border-strong: rgba(255, 255, 255, .20);
86
+ --text: #efe8fa; --muted: #a99cc2; --accent: #a86cf5; --accent2: #ec4f95;
87
+ --ok: #35c99b; --warn: #f0b429; --bad: #f2637a;
88
+ --log-bg: #0d0913; --log-text: #ccc0e2; --shadow: 0 10px 30px rgba(0, 0, 0, .46);
89
+ }
90
+ html[data-skin="violet"][data-theme="light"] {
91
+ --bg: #ffffff; --sidebar: #f5eefd; --panel: #ffffff; --panel2: #f6effd;
92
+ --border: #e5d9f6; --border-strong: #cdb9ea;
93
+ --text: #1c1230; --muted: #6d6090; --accent: #7b3ce0; --accent2: #c92c74;
94
+ --ok: #0d9a72; --warn: #9c6d12; --bad: #cc3f4d;
95
+ --log-bg: #f9f4fe; --log-text: #3d3352; --shadow: 0 10px 30px rgba(0, 0, 0, .07);
96
+ }
97
+ html[data-skin="contrast"] {
98
+ --bg: #000; --sidebar: #000; --panel: #0b0b0b; --panel2: #1c1c1c;
99
+ --border: #6f6f6f; --border-strong: #c9c9c9;
100
+ --text: #fff; --muted: #dcdcdc; --accent: #4da3ff; --accent2: #ff9d4d;
101
+ --ok: #23d18b; --warn: #ffc21a; --bad: #ff5d5d;
102
+ --log-bg: #000; --log-text: #f2f2f2; --shadow: none;
103
+ }
104
+ html[data-skin="contrast"][data-theme="light"] {
105
+ --bg: #fff; --sidebar: #fff; --panel: #fff; --panel2: #f0f0f0;
106
+ --border: #767676; --border-strong: #000;
107
+ --text: #000; --muted: #4a4a4a; --accent: #0b52c9; --accent2: #b03000;
108
+ --ok: #05703f; --warn: #7a5200; --bad: #b3001b;
109
+ --log-bg: #fff; --log-text: #000; --shadow: none;
110
+ }
111
+
112
+ /* ---------- 第 2 层：大屏语义别名 ---------- */
6
113
  :root {
7
- --bg: #081116;
8
- --bg-deep: #050b0e;
9
- --panel: #101b20;
10
- --panel-hi: #16252b;
11
- --panel-soft: #192a30;
12
- --line: #304249;
13
- --line-soft: #24353b;
14
- --text: #f4efe5;
15
- --muted: #98aaa9;
16
- --muted-2: #657a7d;
17
- --amber: #e8ad4d;
18
- --amber-hot: #ffd071;
19
- --cyan: #78c9c0;
20
- --blue: #9db9ad;
21
- --violet: #9aafa7;
22
- --green: #82d3a2;
23
- --red: #ea7e78;
24
114
  --mono: "Cascadia Mono", "SFMono-Regular", Consolas, ui-monospace, monospace;
25
- --display: "Bahnschrift", "DIN Alternate", "Segoe UI", "Microsoft YaHei", sans-serif;
115
+ --sans: "Bahnschrift", "Segoe UI", "Microsoft YaHei", sans-serif;
116
+
117
+ --hd-bg: var(--sidebar);
118
+ --line: var(--border);
119
+ --line-2: var(--border-strong);
120
+ --t1: var(--text);
121
+ --t2: var(--muted);
122
+ --t3: color-mix(in srgb, var(--muted) 62%, var(--bg));
123
+ --live: var(--warn);
124
+ --live-hi: color-mix(in srgb, var(--warn) 82%, var(--text));
125
+ --live-bg: color-mix(in srgb, var(--warn) 12%, transparent);
126
+ --live-bd: color-mix(in srgb, var(--warn) 40%, transparent);
127
+ --data: var(--accent);
128
+ --data-bg: color-mix(in srgb, var(--accent) 10%, transparent);
129
+ --data-bd: color-mix(in srgb, var(--accent) 36%, transparent);
130
+ --good: var(--ok);
131
+ --err: var(--bad);
132
+ --err-bd: color-mix(in srgb, var(--bad) 45%, transparent);
133
+ --sunk: var(--log-bg);
134
+ --term: var(--log-text);
135
+ --card: var(--panel2);
136
+ --track: color-mix(in srgb, var(--border-strong) 46%, transparent);
137
+ --raise: color-mix(in srgb, var(--text) 4%, transparent);
138
+ --scrim: color-mix(in srgb, var(--bg) 55%, #000);
26
139
  }
27
140
 
28
141
  * { margin: 0; padding: 0; box-sizing: border-box; }
29
- html, body { min-height: 100%; }
142
+ html, body { height: 100%; }
30
143
  body {
31
- min-height: 100vh;
32
144
  background:
33
- radial-gradient(900px 430px at 66% -12%, #17436a55, transparent 70%),
34
- radial-gradient(720px 480px at -12% 105%, #173b5844, transparent 72%),
35
- linear-gradient(135deg, #071321 0%, var(--bg) 50%, #071120 100%);
36
- color: var(--text);
37
- font: 14px/1.45 var(--display);
145
+ radial-gradient(1200px 560px at 14% -16%, var(--data-bg), transparent 62%),
146
+ radial-gradient(900px 520px at 94% 110%, var(--live-bg), transparent 66%),
147
+ var(--bg);
148
+ color: var(--t1);
149
+ font: 14px/1.5 var(--sans);
38
150
  overflow: hidden;
39
- position: relative;
40
- }
41
- body::before {
42
- content: "";
43
- position: fixed;
44
- inset: 0;
45
- pointer-events: none;
46
- opacity: .25;
47
- background-image:
48
- linear-gradient(#2d5a7d1c 1px, transparent 1px),
49
- linear-gradient(90deg, #2d5a7d1c 1px, transparent 1px);
50
- background-size: 44px 44px;
51
- mask-image: linear-gradient(180deg, #000, transparent 92%);
52
- }
53
- body::after {
54
- content: "";
55
- position: fixed;
56
- inset: 0;
57
- pointer-events: none;
58
- box-shadow: inset 0 0 140px #02070dcc;
59
151
  }
60
-
61
- button, input { font: inherit; }
62
152
  .hidden { display: none !important; }
63
- .panel {
64
- background:
65
- linear-gradient(145deg, #142b4512, transparent 45%),
66
- linear-gradient(180deg, var(--panel-hi), var(--panel));
67
- border: 1px solid #2c4b6877;
68
- box-shadow: 0 18px 45px #02070d38, inset 0 1px #ffffff08;
69
- position: relative;
70
- }
71
- .panel::after {
72
- content: "";
73
- position: absolute;
74
- right: 0;
75
- top: 0;
76
- width: 34px;
77
- height: 1px;
78
- background: linear-gradient(90deg, transparent, #64d7ff99);
79
- pointer-events: none;
80
- }
153
+ button { font: inherit; cursor: pointer; }
154
+ ::-webkit-scrollbar { width: 6px; height: 6px; }
155
+ ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; }
156
+ ::-webkit-scrollbar-track { background: transparent; }
81
157
 
82
158
  /* ---------------------------------------------------------------- 顶栏 */
83
159
  #hd {
84
- height: 66px;
85
- flex: none;
86
- display: flex;
87
- align-items: center;
88
- justify-content: space-between;
89
- padding: 0 30px;
90
- border-bottom: 1px solid #27445e99;
91
- background: #071321d9;
92
- position: relative;
93
- z-index: 2;
94
- }
95
- #hd::after {
96
- content: "";
97
- position: absolute;
98
- left: 30px;
99
- right: 30px;
100
- bottom: -1px;
101
- height: 1px;
102
- background: linear-gradient(90deg, var(--amber), #4ddcffaa 44%, transparent 82%);
103
- opacity: .65;
104
- }
105
- .hd-brand { display: flex; align-items: center; gap: 12px; min-width: 250px; }
106
- .brand-mark {
107
- width: 32px;
108
- height: 32px;
109
- position: relative;
110
- filter: drop-shadow(0 0 9px #f5b84e55);
111
- }
112
- .brand-mark::before,
113
- .brand-mark::after {
114
- content: "";
115
- position: absolute;
116
- top: 4px;
117
- width: 14px;
118
- height: 12px;
119
- border: 1px solid #f5b84e99;
120
- border-radius: 10px 10px 3px 10px;
121
- background: #f5b84e17;
122
- }
123
- .brand-mark::before { left: 0; transform: rotate(-24deg); }
124
- .brand-mark::after { right: 0; transform: scaleX(-1) rotate(-24deg); }
125
- .brand-mark i {
126
- position: absolute;
127
- z-index: 1;
128
- left: 9px;
129
- width: 14px;
130
- height: 19px;
131
- border-radius: 9px;
132
- background: linear-gradient(90deg, #f5b84e 0 28%, #18253a 28% 44%, #f5b84e 44% 70%, #18253a 70% 86%, #f5b84e 86%);
133
- transform: rotate(3deg);
134
- }
135
- .brand-mark i:nth-child(2) { left: 6px; top: 15px; width: 5px; height: 5px; border-radius: 50%; background: var(--amber-hot); box-shadow: 15px 0 var(--amber-hot); }
136
- .brand-mark i:nth-child(3) { display: none; }
137
- .brand-mark b { position: absolute; z-index: 2; left: 13px; top: 5px; width: 2px; height: 2px; border-radius: 50%; background: #071321; box-shadow: 6px 0 #071321; }
138
- .brand-copy { display: flex; flex-direction: column; gap: 0; }
139
- .brand-kicker { color: var(--amber); font: 600 9px/1 var(--mono); letter-spacing: 2px; opacity: .9; }
140
- .hd-name { font-size: 19px; font-weight: 700; letter-spacing: 1px; margin-top: 5px; }
141
- .hd-center { display: flex; align-items: center; gap: 9px; color: var(--muted); font: 11px var(--mono); letter-spacing: 1px; text-transform: uppercase; }
142
- .live-pip { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px #50dfa81c, 0 0 13px #50dfa8; animation: breathe 2s ease-in-out infinite; }
143
- .hd-sep { color: var(--muted-2); }
144
- .hd-updated { color: var(--cyan); }
145
- .hd-right { display: flex; align-items: center; gap: 10px; min-width: 390px; justify-content: flex-end; }
146
- .hd-pill { color: var(--muted); border: 1px solid #2d4a6577; border-radius: 999px; padding: 5px 11px; background: #ffffff05; font: 11px var(--mono); white-space: nowrap; }
147
- .hd-pill.warn { color: #ffd0d0; border-color: #ff707888; background: #ff707812; }
148
- .hd-pill.off { color: var(--red); border-color: #ff707888; }
149
- .hd-clock { color: var(--cyan); font: 600 23px var(--mono); letter-spacing: 1px; text-shadow: 0 0 18px #54d7ff55; }
150
- @keyframes breathe { 50% { opacity: .48; transform: scale(.75); } }
160
+ height: 58px; display: flex; align-items: center; gap: 26px;
161
+ padding: 0 24px; border-bottom: 1px solid var(--line); background: var(--hd-bg);
162
+ }
163
+ .hd-brand { display: flex; align-items: center; flex: none; }
164
+ .hd-name { font-size: 18px; font-weight: 700; letter-spacing: .3px; }
151
165
 
152
- /* ---------------------------------------------------------------- 页面骨架 */
153
- #board {
154
- height: calc(100vh - 66px);
155
- min-height: 0;
156
- max-width: 1920px;
157
- margin: 0 auto;
158
- padding: 20px 30px 24px;
159
- display: grid;
160
- grid-template-rows: 150px 88px minmax(0, 1fr);
161
- gap: 14px;
162
- position: relative;
163
- z-index: 1;
164
- }
165
- .eyebrow { display: flex; align-items: center; gap: 8px; color: var(--muted); font: 600 10px var(--mono); letter-spacing: 2px; text-transform: uppercase; }
166
- .eyebrow > span:first-child { display: block; width: 6px; height: 6px; background: var(--amber); box-shadow: 0 0 9px #f5b84e88; }
166
+ .hd-state { display: flex; align-items: center; gap: 10px; min-width: 0; }
167
+ .state-pip { width: 8px; height: 8px; border-radius: 50%; background: var(--t3); flex: none; }
168
+ .hd-state.live .state-pip { background: var(--live); animation: pulse 2s ease-in-out infinite; }
169
+ .state-text { font-size: 15px; font-weight: 650; letter-spacing: .3px; }
170
+ .hd-state.live .state-text { color: var(--live-hi); }
171
+ .hd-sep { width: 1px; height: 15px; background: var(--line-2); }
172
+ .hd-sync { color: var(--t3); font: 11px var(--mono); white-space: nowrap; }
167
173
 
168
- /* ---------------------------------------------------------------- 总态势 */
169
- .overview {
170
- min-height: 0;
171
- border-radius: 16px;
172
- display: grid;
173
- grid-template-columns: minmax(0, 1fr) 260px 240px;
174
- overflow: hidden;
174
+ .hd-right { margin-left: auto; display: flex; align-items: center; gap: 16px; flex: none; }
175
+ .hd-metric { display: flex; align-items: baseline; gap: 5px; font: 11px var(--mono); color: var(--t3); }
176
+ .hd-metric b { color: var(--t1); font-size: 14px; font-weight: 600; }
177
+ .hd-metric span { color: var(--t3); }
178
+ .hd-svc { display: flex; align-items: center; gap: 6px; font: 11px var(--mono); color: var(--t2); }
179
+ .hd-svc i { width: 6px; height: 6px; border-radius: 50%; background: var(--good); }
180
+ .hd-svc.bad { color: var(--err); }
181
+ .hd-svc.bad i { background: var(--err); }
182
+ .hd-off { font: 11px var(--mono); color: var(--err); border: 1px solid var(--err-bd); border-radius: 4px; padding: 2px 8px; }
183
+ .hd-clock { font: 600 20px var(--mono); color: var(--data); letter-spacing: .5px; min-width: 104px; text-align: right; }
184
+ @keyframes pulse { 50% { opacity: .35; transform: scale(.8); } }
185
+
186
+ .hd-swap { display: flex; align-items: center; gap: 4px; }
187
+ .sw-btn {
188
+ height: 28px; min-width: 28px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 6px;
189
+ background: transparent; color: var(--t2); font: 11px var(--mono);
175
190
  }
176
- .overview::before {
177
- content: "01 / HIVE STATUS";
178
- position: absolute;
179
- right: 22px;
180
- top: 15px;
181
- color: #7f9bb733;
182
- font: 10px var(--mono);
183
- letter-spacing: 1.8px;
184
- }
185
- .overview-copy { padding: 22px 24px 18px; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
186
- .overview-line { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; min-width: 0; }
187
- .overview-line h1 { font-size: clamp(25px, 2.4vw, 38px); line-height: 1; letter-spacing: -1px; font-weight: 700; }
188
- .overview-line p { color: var(--muted); font-size: 12px; margin-top: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 560px; }
189
- .hero-count { flex: none; padding-right: 6px; text-align: right; }
190
- .hero-count strong { display: block; color: var(--amber-hot); font: 700 42px/.9 var(--mono); text-shadow: 0 0 25px #f5b84e44; }
191
- .hero-count span { display: block; color: var(--muted); font: 10px var(--mono); letter-spacing: 1px; margin-top: 7px; }
192
- .overview-foot { display: flex; align-items: center; gap: 18px; }
193
- .signal-chip { display: inline-flex; align-items: center; gap: 7px; color: var(--green); font-size: 11px; }
194
- .signal-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px var(--green); }
195
- .overview.has-alert .signal-chip { color: var(--red); }
196
- .overview.has-alert .signal-chip i { background: var(--red); box-shadow: 0 0 9px var(--red); }
197
- .overview-note { color: var(--muted-2); font: 10px var(--mono); }
198
- .overview-visual { position: relative; overflow: hidden; border-left: 1px solid #2b496344; border-right: 1px solid #2b496344; background: radial-gradient(circle at center, #1c4d6a33, transparent 58%); }
199
- .overview-visual::before { content: ""; position: absolute; inset: 15px; background: repeating-linear-gradient(0deg, transparent 0 17px, #61d9ff0a 18px), repeating-linear-gradient(90deg, transparent 0 17px, #61d9ff0a 18px); transform: perspective(500px) rotateX(58deg) scale(1.6); transform-origin: center bottom; opacity: .7; }
200
- .orbit { position: absolute; border: 1px solid #59d7ff55; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); }
201
- .orbit-a { width: 140px; height: 64px; rotate: -14deg; animation: orbit-rotate 9s linear infinite; }
202
- .orbit-b { width: 182px; height: 88px; rotate: 22deg; border-color: #f5b84e44; animation: orbit-rotate 13s linear infinite reverse; }
203
- .orbit-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
204
- .dot-a { left: 27%; top: 28%; }
205
- .dot-b { right: 21%; top: 62%; background: var(--amber); box-shadow: 0 0 12px var(--amber); }
206
- .dot-c { left: 67%; top: 24%; width: 4px; height: 4px; background: var(--violet); box-shadow: 0 0 10px var(--violet); }
207
- .core-glow { position: absolute; width: 92px; height: 92px; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #54d7ff15; filter: blur(10px); }
208
- .overview-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; border: 1px solid #54d7ff99; border-radius: 50%; background: #071827e8; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: inset 0 0 20px #54d7ff18, 0 0 20px #54d7ff22; }
209
- .overview-core strong { color: var(--cyan); font: 700 27px/.9 var(--mono); }
210
- .overview-core span { color: var(--muted); font: 8px var(--mono); letter-spacing: 1px; margin-top: 6px; }
211
- @keyframes orbit-rotate { to { rotate: 382deg; } }
212
- .overview-aside { padding: 25px 20px 18px; display: flex; flex-direction: column; justify-content: center; background: #07132140; }
213
- .aside-label { color: var(--muted); font: 10px var(--mono); letter-spacing: 2px; text-transform: uppercase; }
214
- .pool-meter { height: 5px; background: #25415b; border-radius: 99px; overflow: hidden; margin-top: 11px; }
215
- .pool-meter i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--violet)); box-shadow: 0 0 12px #54d7ff88; transition: width .5s ease; }
216
- .pool-readout { display: flex; align-items: baseline; gap: 6px; margin-top: 9px; color: var(--muted); font: 12px var(--mono); }
217
- .pool-readout strong { color: var(--text); font-size: 23px; }
218
- .pool-readout em { font: 10px var(--display); color: var(--muted-2); margin-left: auto; font-style: normal; }
219
- .aside-divider { height: 1px; background: #2a486333; margin: 14px 0 9px; }
220
- .aside-row { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 11px; padding: 3px 0; }
221
- .aside-row b { color: var(--text); font: 600 12px var(--mono); }
191
+ .sw-btn:hover { border-color: var(--data-bd); color: var(--data); }
192
+ .sw-btn b { color: var(--t1); font-weight: 600; }
222
193
 
223
- /* ---------------------------------------------------------------- KPI */
224
- #kpis { min-height: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
225
- .kpi { --kc: var(--cyan); min-width: 0; padding: 12px 16px 10px; border: 1px solid #2c4b6877; border-radius: 12px; background: linear-gradient(145deg, #142b4512, transparent 50%), linear-gradient(180deg, #11243a, #0b182a); position: relative; overflow: hidden; box-shadow: inset 0 1px #ffffff07; }
226
- .kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--kc); box-shadow: 0 0 16px color-mix(in srgb, var(--kc) 60%, transparent); }
227
- .k-run { --kc: var(--amber); } .k-queue { --kc: var(--cyan); } .k-done { --kc: var(--green); } .k-fail { --kc: var(--red); } .k-tok { --kc: var(--violet); } .k-cost { --kc: #64c9ff; }
228
- .kpi-head { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font: 10px var(--mono); letter-spacing: 1px; text-transform: uppercase; }
229
- .kpi-icon { display: block; width: 7px; height: 7px; border: 1px solid var(--kc); transform: rotate(45deg); opacity: .9; }
230
- .k-num { margin-top: 6px; color: var(--text); font: 700 25px/1 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
231
- .k-run .k-num { color: var(--amber-hot); } .k-fail .k-num { color: var(--red); } .k-tok .k-num { color: #c6b9ff; }
232
- .kpi-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; color: var(--muted-2); font-size: 10px; }
233
- .kpi-foot b { color: var(--kc); font: 9px var(--mono); letter-spacing: 1px; }
194
+ /* ---------------------------------------------------------------- 骨架 */
195
+ #board {
196
+ height: calc(100vh - 58px); display: grid; gap: 12px;
197
+ grid-template-rows: 78px minmax(0, 1fr); padding: 14px 24px 18px;
198
+ }
199
+ .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
234
200
 
235
- /* ---------------------------------------------------------------- 主工作区 */
236
- #main { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 404px; gap: 14px; }
237
- #wall { min-height: 0; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; }
238
- .panel-head { flex: none; display: flex; align-items: flex-end; justify-content: space-between; padding: 19px 22px 16px; border-bottom: 1px solid #29476355; }
239
- .panel-head h2, .rail-head h3 { margin-top: 5px; font-size: 16px; font-weight: 650; letter-spacing: .3px; }
240
- .panel-head-right { display: flex; align-items: center; gap: 12px; }
241
- .live-count { color: var(--amber); border: 1px solid #f5b84e66; background: #f5b84e12; border-radius: 999px; padding: 5px 9px; font: 10px var(--mono); letter-spacing: 1px; }
242
- .mode-label { color: var(--muted-2); font: 10px var(--mono); letter-spacing: 1px; }
243
- #wall-cards { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 12px; padding: 16px 17px 14px; }
244
- #wall-cards::-webkit-scrollbar, #recent::-webkit-scrollbar { width: 5px; }
245
- #wall-cards::-webkit-scrollbar-thumb, #recent::-webkit-scrollbar-thumb { background: #39608188; border-radius: 99px; }
201
+ /* ---------------------------------------------------------------- 指标条 */
202
+ #kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; min-height: 0; }
203
+ .kpi {
204
+ position: relative; overflow: hidden; padding: 11px 16px;
205
+ background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
206
+ display: flex; flex-direction: column; justify-content: space-between;
207
+ }
208
+ .k-lab { font-size: 11px; color: var(--t3); letter-spacing: .8px; }
209
+ .k-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
210
+ .k-num { font: 700 27px/1 var(--mono); }
211
+ .k-sub { font: 11px var(--mono); color: var(--t2); white-space: nowrap; }
212
+ .k-run .k-num { color: var(--live-hi); }
213
+ .k-queue .k-num { color: var(--data); }
214
+ .k-done .k-num { color: var(--good); }
215
+ .k-fail .k-num { color: var(--err); }
216
+ .k-fail.zero .k-num, .k-queue.zero .k-num { color: var(--t3); }
217
+ .k-ratio { display: block; height: 3px; margin-top: 8px; border-radius: 99px; background: var(--track); overflow: hidden; }
218
+ .k-ratio i { display: block; height: 100%; width: 0; background: var(--good); border-radius: inherit; transition: width .5s; }
246
219
 
247
- /* 运行任务卡 */
248
- .card { min-width: 0; background: linear-gradient(145deg, #18324e33, transparent 46%), #0a1728; border: 1px solid #31536e99; border-radius: 12px; padding: 14px 15px 13px 18px; position: relative; overflow: hidden; box-shadow: 0 10px 24px #02070d2b; }
249
- .card::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--amber); box-shadow: 0 0 13px #f5b84e99; animation: breathe 2.2s ease-in-out infinite; }
250
- .card::after { content: "LIVE"; position: absolute; right: 13px; top: 12px; color: #f5b84e77; font: 9px var(--mono); letter-spacing: 1px; }
251
- .card-top { display: flex; align-items: baseline; gap: 8px; padding-right: 36px; }
252
- .c-type { flex: none; color: var(--amber); border: 1px solid #f5b84e55; border-radius: 3px; padding: 2px 6px; background: #f5b84e12; font: 10px var(--mono); }
253
- .c-title { min-width: 0; color: var(--text); font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
254
- .c-elapsed { flex: none; margin-left: auto; color: var(--cyan); font: 600 12px var(--mono); }
255
- .c-steps { display: flex; align-items: center; gap: 4px; margin-top: 13px; }
256
- .c-steps i { flex: 1; min-width: 5px; height: 4px; border-radius: 99px; background: #23405a; }
257
- .c-steps i.d { background: var(--green); box-shadow: 0 0 7px #50dfa866; }
258
- .c-steps i.r { background: var(--amber); box-shadow: 0 0 8px #f5b84e77; animation: breathe 1.2s ease-in-out infinite; }
259
- .c-stepinfo { min-width: 0; display: flex; align-items: baseline; gap: 8px; margin-top: 8px; white-space: nowrap; overflow: hidden; }
260
- .c-stepinfo .no { color: var(--amber); font: 600 11px var(--mono); flex: none; }
261
- .c-stepinfo .ag { color: var(--muted); font: 11px var(--mono); flex: none; }
262
- .c-stepinfo .sm { min-width: 0; overflow: hidden; color: #b7c9dc; font-size: 11px; text-overflow: ellipsis; }
263
- .c-meta { display: flex; align-items: center; gap: 5px; min-width: 0; margin-top: 11px; overflow: hidden; }
264
- .b { flex: none; max-width: 155px; padding: 3px 6px; overflow: hidden; color: var(--muted); border: 1px solid #42627d77; border-radius: 3px; background: #ffffff05; font: 10px var(--mono); white-space: nowrap; text-overflow: ellipsis; }
265
- .b-model { color: #9fd8ff; border-color: #54d7ff55; background: #54d7ff0d; }
266
- .b-prov { color: #c5baff; border-color: #a58bff55; background: #a58bff0d; }
267
- .b-agent { color: #b8c8d9; }
268
- .b.dim { color: var(--muted-2); border-style: dashed; }
269
- .c-run-tok { min-width: 0; margin-left: auto; color: #69c99e; font: 10px var(--mono); white-space: nowrap; }
270
- .c-live { position: relative; margin-top: 11px; padding: 8px 10px; border: 1px solid #284a6577; border-radius: 6px; background: #06101ddd; }
271
- .c-live-tag { position: absolute; right: 8px; top: 6px; color: var(--cyan); font: 9px var(--mono); letter-spacing: 1px; }
272
- .c-live-text { max-height: 4.6em; overflow: hidden; color: #8fb9d7; font: 10px/1.55 var(--mono); white-space: pre; }
273
- .c-pct { margin-top: 9px; color: var(--muted-2); font: 10px var(--mono); }
220
+ /* ---------------------------------------------------------------- 主区 */
221
+ #main { display: grid; grid-template-columns: minmax(0, 1fr) 356px; gap: 12px; min-height: 0; }
222
+ #wall { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
223
+ .p-head {
224
+ flex: none; display: flex; align-items: center; justify-content: space-between;
225
+ padding: 13px 18px; border-bottom: 1px solid var(--line);
226
+ }
227
+ .p-head h2 { font-size: 15px; font-weight: 650; letter-spacing: .3px; }
228
+ .p-head-right { display: flex; align-items: center; gap: 12px; }
229
+ .p-badge { font: 600 11px var(--mono); color: var(--live-hi); border: 1px solid var(--live-bd); border-radius: 4px; padding: 3px 8px; background: var(--live-bg); }
230
+ .p-note { font: 11px var(--mono); color: var(--t3); }
274
231
 
275
- /* 空态 / 排队 */
276
- .wall-empty { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; }
277
- .wall-empty::before { content: "NO ACTIVE RUNS"; position: absolute; top: 14%; color: #7f9bb71a; font: 10px var(--mono); letter-spacing: 3px; }
278
- .empty-orbit { width: 136px; height: 86px; position: relative; margin-bottom: 2px; }
279
- .empty-orbit::before, .empty-orbit::after { content: ""; position: absolute; left: 50%; top: 50%; border: 1px solid #54d7ff44; border-radius: 50%; transform: translate(-50%, -50%) rotate(-16deg); }
280
- .empty-orbit::before { width: 130px; height: 54px; }
281
- .empty-orbit::after { width: 92px; height: 38px; border-color: #f5b84e44; transform: translate(-50%, -50%) rotate(24deg); }
282
- .empty-orbit i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
283
- .empty-orbit i:nth-child(1) { left: 10px; top: 38px; }
284
- .empty-orbit i:nth-child(2) { right: 12px; top: 19px; background: var(--amber); box-shadow: 0 0 10px var(--amber); }
285
- .empty-orbit i:nth-child(3) { left: 64px; bottom: 3px; background: var(--violet); box-shadow: 0 0 10px var(--violet); }
286
- .empty-orbit b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--cyan); font: 700 30px var(--mono); }
287
- .idle-t1 { color: var(--text); font-size: 20px; font-weight: 650; letter-spacing: 1px; }
288
- .idle-t2 { color: var(--muted); font-size: 12px; }
289
- .empty-meta { display: flex; gap: 15px; margin-top: 12px; color: var(--muted-2); font: 10px var(--mono); }
290
- .empty-meta span { display: inline-flex; align-items: center; gap: 6px; }
291
- .empty-meta i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
292
- .queue-row { flex: none; display: flex; align-items: center; gap: 15px; min-height: 49px; padding: 0 18px; border-top: 1px solid #29476355; background: #07132155; }
293
- .q-label { flex: none; display: inline-flex; align-items: center; gap: 7px; color: var(--cyan); font: 11px var(--mono); }
294
- .q-label b { display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 5px; border: 1px solid #54d7ff55; border-radius: 99px; background: #54d7ff12; font-size: 10px; }
295
- .q-mark { width: 6px; height: 6px; border: 1px solid var(--cyan); transform: rotate(45deg); }
296
- #queue-chips { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; overflow-x: auto; padding: 3px 2px; }
297
- #queue-chips::-webkit-scrollbar { height: 4px; }
298
- #queue-chips .chip { flex: none; max-width: 250px; padding: 5px 10px; overflow: hidden; border: 1px solid #3c648388; border-radius: 4px; background: #54d7ff0b; color: #b9d8ed; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
232
+ /* 运行卡容器：按任务数切密度，避免少任务时留大片死黑 */
233
+ .wall-grid { flex: 1; min-height: 0; overflow: auto; padding: 12px; display: grid; gap: 12px; align-content: start; }
234
+ .wall-grid.d-solo, .wall-grid.d-few { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr); }
235
+ .wall-grid.d-many { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(238px, 1fr); }
299
236
 
300
- /* ---------------------------------------------------------------- 右侧监控轨 */
301
- #rail { min-height: 0; display: flex; flex-direction: column; gap: 14px; }
302
- .rail-card { min-height: 0; border-radius: 14px; padding: 15px 17px; }
303
- .rail-trend { flex: 0 0 166px; }
304
- .rail-models { flex: 0 0 178px; }
305
- .rail-recent { flex: 1; display: flex; flex-direction: column; }
306
- .rail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
307
- .rail-head h3 { font-size: 14px; }
308
- .rail-badge { flex: none; padding: 4px 7px; border: 1px solid #41627b66; border-radius: 3px; color: var(--muted); font: 9px var(--mono); letter-spacing: 1px; }
309
- .trend { display: flex; align-items: flex-end; gap: 8px; height: 94px; padding-top: 16px; }
310
- .trend .bar { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 7px; }
311
- .trend .bar i { width: 100%; min-height: 3px; border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, var(--cyan), var(--blue) 55%, #a58bffcc); box-shadow: 0 0 12px #54d7ff22; transition: height .45s ease; }
312
- .trend .bar.zero i { background: #27425c; box-shadow: none; }
313
- .trend .bar b { color: var(--muted-2); font: 9px var(--mono); font-weight: 400; }
314
- .models { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
315
- .model-row { display: grid; grid-template-columns: 116px minmax(0, 1fr) 51px; gap: 8px; align-items: center; }
316
- .model-row .nm { min-width: 0; color: #cbd9e8; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
317
- .model-row .tk { height: 6px; overflow: hidden; border-radius: 99px; background: #223c57; }
318
- .model-row .tk i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--violet)); box-shadow: 0 0 8px #54d7ff55; }
319
- .model-row .vl { color: var(--muted); font: 9px var(--mono); text-align: right; }
320
- .models .empty, .recent .empty { color: var(--muted-2); font-size: 11px; padding: 12px 0; }
321
- #recent { flex: 1; min-height: 0; margin-top: 14px; overflow-y: auto; }
322
- .r-row { display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 8px 0; border-bottom: 1px solid #29476333; }
323
- .r-row:last-child { border-bottom: none; }
324
- .r-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; margin-top: 3px; }
325
- .r-dot.done { background: var(--green); box-shadow: 0 0 7px #50dfa8aa; }
326
- .r-dot.failed { background: var(--red); box-shadow: 0 0 7px #ff7078aa; }
327
- .r-dot.cancelled { background: var(--muted-2); }
328
- .r-t { min-width: 0; flex: 1; overflow: hidden; color: #c8d8e9; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
329
- .r-t.failed { color: #ffb7bb; }
330
- .r-d { flex: none; color: var(--muted-2); font: 9px var(--mono); }
237
+ .card {
238
+ position: relative; min-width: 0; min-height: 0; padding: 15px 17px 14px;
239
+ background: var(--card); border: 1px solid var(--line-2); border-radius: 9px;
240
+ display: flex; flex-direction: column; gap: 12px; cursor: pointer;
241
+ transition: border-color .15s, background .15s;
242
+ }
243
+ .card:hover { border-color: var(--live-bd); background: color-mix(in srgb, var(--text) 4%, var(--card)); }
244
+ .card.sel { border-color: var(--live); }
245
+ .card::before {
246
+ content: ""; position: absolute; left: 0; top: 13px; bottom: 13px; width: 2px;
247
+ border-radius: 0 2px 2px 0; background: var(--live);
248
+ }
249
+ .c-head { display: flex; align-items: center; gap: 10px; min-width: 0; flex: none; }
250
+ .c-type {
251
+ flex: none; font: 10px var(--mono); color: var(--live-hi);
252
+ border: 1px solid var(--live-bd); border-radius: 3px; padding: 2px 6px; background: var(--live-bg);
253
+ }
254
+ .c-title { min-width: 0; font-size: 15px; font-weight: 650; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
255
+ .c-elapsed { margin-left: auto; flex: none; font: 600 13px var(--mono); color: var(--data); }
331
256
 
332
- /* ---------------------------------------------------------------- 令牌门 */
333
- .gate { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: #040b14ed; backdrop-filter: blur(10px); }
334
- .gate-box { width: min(360px, calc(100vw - 40px)); padding: 35px 30px 30px; border: 1px solid #31556f99; border-radius: 18px; background: linear-gradient(145deg, #17324d, #0b1728); box-shadow: 0 24px 80px #0009; text-align: center; }
335
- .gate-mark { display: flex; align-items: center; justify-content: center; gap: 5px; margin-bottom: 18px; }
336
- .gate-mark span { width: 10px; height: 10px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px #f5b84e88; }
337
- .gate-mark span:nth-child(2) { width: 16px; height: 16px; background: var(--cyan); box-shadow: 0 0 15px #54d7ff88; }
338
- .gate-title { font-size: 21px; font-weight: 700; }
339
- .gate-sub { color: var(--muted); font-size: 12px; margin: 7px 0 18px; }
340
- #gate-token { display: block; width: 100%; padding: 11px 13px; border: 1px solid #3c607b; border-radius: 8px; outline: none; background: #06101c; color: var(--text); text-align: center; }
341
- #gate-token:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px #54d7ff17; }
342
- #gate-ok { margin-top: 12px; padding: 10px 26px; border: 1px solid #f5b84e66; border-radius: 7px; background: var(--amber); color: #0a1420; font-weight: 700; cursor: pointer; }
343
- #gate-ok:hover { background: var(--amber-hot); }
344
- .gate-err { min-height: 18px; margin-top: 11px; color: var(--red); font-size: 12px; }
257
+ .c-main { flex: none; min-width: 0; display: flex; flex-direction: column; gap: 11px; }
258
+ .c-goal {
259
+ font-size: 12px; line-height: 1.6; color: var(--t2); min-height: 2.4em;
260
+ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
261
+ }
262
+ .c-steps { display: flex; gap: 4px; }
263
+ .c-steps i { flex: 1; min-width: 4px; height: 4px; border-radius: 99px; background: var(--track); }
264
+ .c-steps i.d { background: var(--good); }
265
+ .c-steps i.r { background: var(--live); animation: pulse 1.6s ease-in-out infinite; }
266
+ .c-step-line { display: flex; align-items: baseline; gap: 9px; min-width: 0; font-size: 12px; }
267
+ .c-step-line b { flex: none; font: 600 12px var(--mono); color: var(--live-hi); }
268
+ .c-step-line .ag { flex: none; color: var(--t2); font: 11px var(--mono); }
269
+ .c-step-line .sm { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--t1); }
270
+ .c-badges { display: flex; gap: 6px; flex-wrap: wrap; }
271
+ .b {
272
+ max-width: 168px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
273
+ font: 10px var(--mono); color: var(--t2);
274
+ border: 1px solid var(--line-2); border-radius: 3px; padding: 3px 6px; background: var(--raise);
275
+ }
276
+ .b-model { color: var(--data); border-color: var(--data-bd); }
345
277
 
346
- /* ---------------------------------------------------------------- 响应式 */
347
- @media (max-width: 1280px) {
348
- #board { padding-left: 20px; padding-right: 20px; }
349
- #hd { padding-left: 20px; padding-right: 20px; }
350
- #hd::after { left: 20px; right: 20px; }
351
- .overview { grid-template-columns: minmax(0, 1fr) 220px 205px; }
352
- #main { grid-template-columns: minmax(0, 1fr) 350px; }
353
- .hd-brand { min-width: 220px; }
354
- .hd-right { min-width: 330px; }
355
- }
356
- @media (max-width: 1050px) {
357
- body { overflow: auto; }
358
- #board { height: auto; min-height: calc(100vh - 66px); grid-template-rows: 150px auto auto; }
359
- #main { grid-template-columns: minmax(0, 1fr); }
360
- #rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
361
- .rail-recent { grid-column: 1 / -1; min-height: 280px; }
362
- .hd-center { display: none; }
363
- }
364
- @media (max-width: 720px) {
365
- #hd { height: 60px; padding: 0 14px; }
366
- #hd::after { left: 14px; right: 14px; }
367
- #board { height: auto; min-height: calc(100vh - 60px); padding: 14px; grid-template-rows: 260px auto auto; gap: 12px; }
368
- .brand-kicker { display: none; }
369
- .hd-name { font-size: 16px; }
370
- .hd-right { min-width: 0; gap: 6px; }
371
- #hd-pool, #hd-health { display: none; }
372
- .hd-clock { font-size: 17px; }
373
- .overview-note { display: none; }
374
- .signal-chip { white-space: nowrap; }
375
- .overview { grid-template-columns: 1fr 130px; grid-template-rows: 1fr 86px; }
376
- .overview-copy { grid-row: 1 / 3; padding: 20px 17px; }
377
- .overview-line { display: block; }
378
- .hero-count { text-align: left; margin-top: 22px; }
379
- .overview-visual { border-right: none; }
380
- .overview-aside { grid-column: 2; grid-row: 2; padding: 14px; }
381
- .overview-aside .aside-divider, .overview-aside .aside-row:nth-last-child(-n+2) { display: none; }
382
- #kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
383
- #main { display: block; }
384
- #wall { min-height: 560px; }
385
- #wall-cards { grid-template-columns: 1fr; }
386
- #rail { margin-top: 12px; display: flex; }
387
- .rail-trend, .rail-models { flex-basis: auto; min-height: 166px; }
388
- .rail-recent { min-height: 300px; }
389
- }
390
- @media (prefers-reduced-motion: reduce) {
391
- *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
392
- }
278
+ /* 实时流：底部对齐，像终端一样只盯最新几行 */
279
+ .c-live { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--sunk); border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
280
+ .c-live-head {
281
+ flex: none; display: flex; align-items: center; justify-content: space-between;
282
+ padding: 6px 10px; border-bottom: 1px solid var(--line);
283
+ font: 10px var(--mono); color: var(--t3); letter-spacing: .6px;
284
+ }
285
+ .c-live-head .tag { color: var(--data); }
286
+ .caret { width: 6px; height: 11px; background: var(--live); animation: blink 1.1s steps(1) infinite; }
287
+ @keyframes blink { 50% { opacity: 0; } }
288
+ .c-live-body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
289
+ .c-live-text { flex: none; min-height: 0; overflow: hidden; padding: 9px 11px; font: 11px/1.75 var(--mono); color: var(--term); white-space: pre-wrap; word-break: break-word; }
290
+ .c-live-text.dim { color: var(--t3); }
393
291
 
394
- body {
395
- background:
396
- radial-gradient(900px 460px at 84% -18%, #31545a26, transparent 68%),
397
- radial-gradient(720px 520px at -14% 108%, #6b4c2420, transparent 72%),
398
- linear-gradient(145deg, #09151a, var(--bg) 54%, #0a1418);
399
- }
400
- body::before {
401
- opacity: .07;
402
- background-size: 72px 72px;
403
- }
404
- body::after { box-shadow: inset 0 0 100px #020708aa; }
292
+ .c-foot { flex: none; display: flex; align-items: center; gap: 12px; font: 11px var(--mono); color: var(--t3); }
293
+ .c-est { display: flex; align-items: center; gap: 8px; min-width: 0; }
294
+ .est-track { width: 74px; height: 3px; border-radius: 99px; background: var(--track); overflow: hidden; flex: none; }
295
+ .est-track i { display: block; height: 100%; background: var(--data); border-radius: inherit; }
296
+ .c-tok { margin-left: auto; flex: none; color: var(--good); }
405
297
 
406
- .panel {
407
- background: linear-gradient(145deg, #1a2c3214, transparent 44%), var(--panel);
408
- border-color: #385058;
409
- border-radius: 11px;
410
- box-shadow: 0 12px 28px #02070845, inset 0 1px #ffffff07;
411
- }
412
- .panel::after { display: none; }
298
+ /* 满负荷：卡片收紧，终端只留几行 */
299
+ .d-many .card { padding: 13px 15px 12px; gap: 10px; }
300
+ .d-many .c-goal { -webkit-line-clamp: 1; min-height: 0; }
301
+ .d-many .c-live-text { font-size: 10.5px; line-height: 1.6; }
413
302
 
414
- #hd {
415
- height: 64px;
416
- padding: 0 28px;
417
- border-bottom-color: #26383e;
418
- background: #081217e8;
419
- }
420
- #hd::after {
421
- left: 28px;
422
- right: 28px;
423
- background: linear-gradient(90deg, var(--amber), #78c9c055 48%, transparent 80%);
424
- opacity: .5;
425
- }
426
- .hd-brand { min-width: 270px; }
427
- .brand-mark { filter: none; }
428
- .brand-mark::before, .brand-mark::after { border-color: #e8ad4d88; background: #e8ad4d12; }
429
- .brand-mark i { background: linear-gradient(90deg, #e8ad4d 0 28%, #17252a 28% 44%, #e8ad4d 44% 70%, #17252a 70% 86%, #e8ad4d 86%); }
430
- .brand-mark i:nth-child(2) { background: var(--amber-hot); box-shadow: 15px 0 var(--amber-hot); }
431
- .brand-kicker { color: var(--amber-hot); letter-spacing: 2.2px; }
432
- .hd-name { color: var(--text); font-size: 20px; letter-spacing: .5px; }
433
- .hd-center { color: var(--muted); font-size: 11px; letter-spacing: .6px; }
434
- .live-pip { background: var(--green); box-shadow: 0 0 0 4px #82d3a214, 0 0 10px #82d3a266; }
435
- .hd-updated { color: var(--cyan); }
436
- .hd-pill { color: var(--muted); border-color: #344950; background: #ffffff04; }
437
- .hd-clock { color: var(--cyan); text-shadow: none; font-size: 22px; white-space: nowrap; }
303
+ /* 单任务：字号与终端行数同时放大，用满整屏 */
304
+ .d-solo .card { padding: 20px 24px 18px; gap: 16px; }
305
+ .d-solo .c-title { font-size: 18px; }
306
+ .d-solo .c-type { font-size: 11px; padding: 3px 8px; }
307
+ .d-solo .c-elapsed { font-size: 16px; }
308
+ .d-solo .c-main { gap: 16px; }
309
+ .d-solo .c-goal { -webkit-line-clamp: 3; min-height: 0; font-size: 13px; line-height: 1.7; }
310
+ .d-solo .c-steps { max-width: 620px; }
311
+ .d-solo .c-steps i { height: 6px; }
312
+ .d-solo .c-step-line { font-size: 13.5px; }
313
+ .d-solo .c-live-text { font-size: 12.5px; line-height: 1.9; }
314
+ .d-solo .c-foot { font-size: 12px; }
315
+ .d-solo .est-track { width: 120px; height: 4px; }
438
316
 
439
- #board {
440
- height: calc(100vh - 64px);
441
- padding: 18px 28px 22px;
442
- grid-template-rows: 164px 96px minmax(0, 1fr);
443
- gap: 12px;
444
- }
445
- .eyebrow { color: var(--muted); font-size: 10px; letter-spacing: 1.5px; }
446
- .eyebrow > span:first-child { width: 5px; height: 5px; box-shadow: none; }
317
+ /* 空闲：整块面板改画今日运行表，不留死区 */
318
+ .wall-empty { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
319
+ .idle-head { flex: none; display: flex; align-items: center; gap: 16px; padding: 20px 18px 6px; }
320
+ .idle-ring { position: relative; width: 34px; height: 34px; flex: none; }
321
+ .idle-ring i { position: absolute; inset: 0; border: 1px solid var(--line-2); border-radius: 50%; }
322
+ .idle-ring::after { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: var(--t3); }
323
+ .idle-t1 { font-size: 16px; font-weight: 650; color: var(--t2); }
324
+ .idle-t2 { font-size: 12px; color: var(--t3); }
325
+ .idle-list { flex: 1; min-height: 0; overflow: auto; padding: 0 18px 14px; display: flex; flex-direction: column; }
326
+ .idle-cap { flex: none; padding: 14px 0 2px; font: 11px var(--mono); color: var(--t3); letter-spacing: .6px; }
327
+ .h-row {
328
+ flex: none; display: grid; grid-template-columns: 62px minmax(0, 1fr) 78px 62px;
329
+ gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line);
330
+ }
331
+ .h-row:last-child { border-bottom: none; }
332
+ .h-st { font: 10px var(--mono); letter-spacing: .5px; color: var(--t3); }
333
+ .h-st.done { color: var(--good); }
334
+ .h-st.failed { color: var(--err); }
335
+ .h-t { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
336
+ .h-e { grid-column: 2 / -1; font: 11px var(--mono); color: var(--err); opacity: .78; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
337
+ .h-meta { font: 11px var(--mono); color: var(--t2); text-align: right; }
338
+ .h-time { font: 11px var(--mono); color: var(--t3); text-align: right; }
447
339
 
448
- .overview {
449
- grid-template-columns: minmax(0, 1fr) 300px 230px;
450
- border-radius: 11px;
451
- background: linear-gradient(110deg, #17282e, #13232a 58%, #101e23);
452
- }
453
- .overview::before { content: "OPERATIONS / STATUS"; right: 20px; top: 14px; color: #98aaa91e; letter-spacing: 1.4px; }
454
- .overview-copy { padding: 24px 26px 20px; }
455
- .overview-line { align-items: center; gap: 28px; }
456
- .overview-line h1 { color: var(--text); font-size: clamp(28px, 2.4vw, 39px); letter-spacing: -.8px; }
457
- .overview-line p { max-width: 610px; margin-top: 11px; color: var(--muted); font-size: 13px; }
458
- .hero-count { padding-right: 0; }
459
- .hero-count strong { color: var(--amber-hot); font-size: 48px; text-shadow: none; }
460
- .hero-count span { color: var(--muted); font-size: 10px; letter-spacing: .7px; }
461
- .overview-foot { gap: 20px; }
462
- .signal-chip { color: var(--green); font-size: 12px; }
463
- .signal-chip i { width: 6px; height: 6px; box-shadow: none; }
464
- .overview-note { color: var(--muted-2); font-size: 10px; }
465
- .overview-visual {
466
- border-left-color: #304249;
467
- border-right-color: #304249;
468
- background: radial-gradient(circle at center, #78c9c014, transparent 63%);
469
- }
470
- .overview-visual::before { opacity: .25; }
471
- .orbit { border-color: #78c9c070; }
472
- .orbit-b { border-color: #e8ad4d66; }
473
- .orbit-dot { box-shadow: none; }
474
- .dot-b { box-shadow: none; }
475
- .dot-c { background: var(--violet); box-shadow: none; }
476
- .core-glow { background: #78c9c010; filter: blur(12px); }
477
- .overview-core {
478
- width: 82px;
479
- height: 82px;
480
- border-color: #78c9c0aa;
481
- background: #0c191de8;
482
- box-shadow: inset 0 0 20px #78c9c010;
483
- }
484
- .overview-core strong { color: var(--cyan); font-size: 29px; }
485
- .overview-core span { color: var(--muted); letter-spacing: .8px; }
486
- .overview-aside { padding: 24px 20px 18px; background: #0b171b44; }
487
- .aside-label { color: var(--muted); letter-spacing: 1.5px; }
488
- .pool-meter { height: 6px; background: #294048; margin-top: 12px; }
489
- .pool-meter i { background: linear-gradient(90deg, var(--cyan), var(--green)); box-shadow: none; }
490
- .pool-readout { color: var(--muted); }
491
- .pool-readout strong { color: var(--text); font-size: 25px; }
492
- .aside-divider { background: #304249; margin: 16px 0 10px; }
493
- .aside-row { color: var(--muted); font-size: 12px; padding: 4px 0; }
494
- .aside-row b { color: var(--text); font-size: 13px; }
340
+ /* 排队条 */
341
+ .queue-row {
342
+ flex: none; display: flex; align-items: center; gap: 14px; min-height: 44px;
343
+ padding: 8px 18px; border-top: 1px solid var(--line); background: var(--card);
344
+ }
345
+ .q-label { flex: none; display: flex; align-items: center; gap: 8px; font: 11px var(--mono); color: var(--data); }
346
+ .q-label b {
347
+ display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
348
+ padding: 0 5px; border-radius: 99px; background: var(--data-bg); font-size: 10px;
349
+ }
350
+ #queue-chips { flex: 1; min-width: 0; display: flex; gap: 7px; overflow-x: auto; }
351
+ #queue-chips .chip {
352
+ flex: none; max-width: 300px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
353
+ font-size: 11.5px; color: var(--t2); border: 1px solid var(--line-2);
354
+ border-radius: 4px; padding: 4px 9px; background: var(--raise);
355
+ }
356
+ #queue-chips .chip em { font: 10px var(--mono); color: var(--t3); font-style: normal; margin-left: 6px; }
495
357
 
496
- #kpis { gap: 10px; }
497
- .kpi {
498
- padding: 14px 17px 12px;
499
- border-color: #30464c;
500
- border-radius: 9px;
501
- background: #122128;
502
- box-shadow: inset 0 1px #ffffff08;
503
- }
504
- .kpi::before { width: 3px; box-shadow: none; }
505
- .kpi-head { color: var(--muted); font-size: 11px; letter-spacing: .6px; }
506
- .kpi-icon { width: 6px; height: 6px; opacity: .8; }
507
- .k-num { margin-top: 8px; color: var(--text); font-size: 28px; }
508
- .k-run .k-num { color: var(--amber-hot); }
509
- .k-fail .k-num { color: var(--red); }
510
- .k-tok .k-num { color: #d3e0d7; }
511
- .kpi-foot { margin-top: 9px; color: var(--muted-2); font-size: 11px; }
512
- .kpi-foot b { color: var(--kc); font-size: 9px; letter-spacing: 1px; }
358
+ /* ---------------------------------------------------------------- 右栏 */
359
+ #rail { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); gap: 12px; min-height: 0; }
360
+ .rc { padding: 13px 15px; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
361
+ .rc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex: none; }
362
+ .rc-head h3 { font-size: 13px; font-weight: 650; color: var(--t1); }
363
+ .rc-badge { font: 10px var(--mono); color: var(--t3); border: 1px solid var(--line-2); border-radius: 3px; padding: 2px 6px; }
513
364
 
514
- #main { grid-template-columns: minmax(0, 1fr) 360px; gap: 12px; }
515
- #wall { border-radius: 11px; }
516
- .panel-head { padding: 18px 20px 15px; border-bottom-color: #304249; }
517
- .panel-head h2, .rail-head h3 { color: var(--text); font-size: 18px; letter-spacing: 0; }
518
- .panel-head h2 { margin-top: 6px; }
519
- .panel-head-right { gap: 12px; }
520
- .live-count { color: var(--amber-hot); border-color: #e8ad4d80; background: #e8ad4d12; border-radius: 5px; padding: 5px 9px; font-size: 10px; letter-spacing: .8px; }
521
- .mode-label { color: var(--muted-2); font-size: 10px; letter-spacing: .5px; }
522
- #wall-cards {
523
- gap: 14px;
524
- padding: 17px 18px 16px;
525
- background: linear-gradient(180deg, #0e1b20, #0c181d);
526
- }
527
- #wall-cards::-webkit-scrollbar, #recent::-webkit-scrollbar { width: 6px; }
528
- #wall-cards::-webkit-scrollbar-thumb, #recent::-webkit-scrollbar-thumb { background: #4d656b66; }
529
- .card {
530
- min-height: 145px;
531
- padding: 16px 17px 15px 19px;
532
- border-color: #3a565c;
533
- border-radius: 9px;
534
- background: #0b181d;
535
- box-shadow: 0 8px 18px #02070826;
536
- }
537
- .card::before { top: 16px; bottom: 16px; width: 3px; box-shadow: none; }
538
- .card::after { color: #e8ad4d88; top: 15px; right: 16px; }
539
- .card-top { gap: 9px; padding-right: 42px; }
540
- .c-type { color: var(--amber-hot); border-color: #e8ad4d66; background: #e8ad4d12; font-size: 10px; }
541
- .c-title { color: var(--text); font-size: 15px; font-weight: 650; }
542
- .c-elapsed { color: var(--cyan); font-size: 12px; }
543
- .c-meta { gap: 6px; margin-top: 13px; }
544
- .b { max-width: 170px; padding: 4px 7px; border-color: #3b555b; background: #ffffff04; color: var(--muted); font-size: 10px; }
545
- .b-model { color: #a8d6d0; border-color: #78c9c066; background: #78c9c00c; }
546
- .b-prov { color: #c2d0c8; border-color: #9aafa766; background: #9aafa70b; }
547
- .b-agent { color: #b1c3c2; }
548
- .c-run-tok { color: var(--green); }
549
- .c-steps { gap: 5px; margin-top: 15px; }
550
- .c-steps i { height: 5px; background: #294148; }
551
- .c-steps i.d { background: var(--green); box-shadow: none; }
552
- .c-steps i.r { background: var(--amber); box-shadow: none; }
553
- .c-stepinfo { gap: 9px; margin-top: 9px; }
554
- .c-stepinfo .no { color: var(--amber); }
555
- .c-stepinfo .ag { color: var(--muted); }
556
- .c-stepinfo .sm { color: #c2d0ce; font-size: 12px; }
557
- .c-live { margin-top: 12px; padding: 9px 11px; border-color: #2d454a; background: #071216; }
558
- .c-live-tag { color: var(--cyan); }
559
- .c-live-text { color: #9ab8b4; font-size: 10px; }
560
- .c-pct { margin-top: 10px; color: var(--muted-2); font-size: 10px; }
365
+ .meter { margin-bottom: 11px; }
366
+ .meter-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 11.5px; color: var(--t2); }
367
+ .meter-top b { font: 12px var(--mono); color: var(--t2); }
368
+ .meter-top b i { font-style: normal; font-size: 15px; color: var(--t1); font-weight: 600; }
369
+ .meter-bar { height: 4px; margin-top: 7px; border-radius: 99px; background: var(--track); overflow: hidden; }
370
+ .meter-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--live); transition: width .5s; }
371
+ .meter-bar.cool i { background: var(--data); }
372
+ .pool-foot { display: flex; justify-content: space-between; margin-top: 2px; font: 11px var(--mono); color: var(--t3); }
373
+ .pool-foot b { color: var(--t2); }
561
374
 
562
- .wall-empty::before { color: #98aaa914; letter-spacing: 2px; }
563
- .empty-orbit::before, .empty-orbit::after { border-color: #78c9c060; }
564
- .empty-orbit::after { border-color: #e8ad4d55; }
565
- .empty-orbit i { box-shadow: none; }
566
- .empty-orbit i:nth-child(2) { box-shadow: none; }
567
- .idle-t1 { color: var(--text); font-size: 21px; }
568
- .idle-t2 { color: var(--muted); font-size: 13px; }
569
- .empty-meta { color: var(--muted-2); font-size: 10px; }
570
- .empty-meta i { box-shadow: none; }
571
- .queue-row { min-height: 51px; padding: 0 18px; border-top-color: #304249; background: #0c191d; }
572
- .q-label { color: var(--cyan); font-size: 11px; }
573
- .q-label b { border-color: #78c9c066; background: #78c9c010; }
574
- #queue-chips .chip { border-color: #3b5a5f; background: #78c9c008; color: #b9d1cd; }
375
+ .trend { display: flex; align-items: flex-end; gap: 7px; height: 74px; }
376
+ .trend .bar { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; }
377
+ .trend .bar i { width: 100%; min-height: 2px; border-radius: 2px 2px 0 0; background: var(--track); }
378
+ .trend .bar.on i { background: linear-gradient(180deg, var(--data), color-mix(in srgb, var(--data) 42%, var(--bg))); }
379
+ .trend .bar.today i { background: linear-gradient(180deg, var(--live), color-mix(in srgb, var(--live) 42%, var(--bg))); }
380
+ .trend .bar b { font: 9px var(--mono); font-weight: 400; color: var(--t3); }
381
+ .trend .bar.today b { color: var(--live-hi); }
575
382
 
576
- #rail { gap: 12px; }
577
- .rail-card { border-radius: 11px; padding: 16px 17px; }
578
- .rail-trend { flex: 0 0 153px; }
579
- .rail-models { flex: 0 0 174px; }
580
- .rail-head h3 { margin-top: 6px; font-size: 15px; }
581
- .rail-badge { border-color: #3a555b; color: var(--muted); border-radius: 4px; }
582
- .trend { height: 84px; gap: 9px; padding-top: 13px; }
583
- .trend .bar i { background: linear-gradient(180deg, var(--cyan), #6aa9a2); box-shadow: none; }
584
- .trend .bar.zero i { background: #294148; }
585
- .trend .bar b { color: var(--muted-2); }
586
- .models { gap: 10px; margin-top: 15px; }
587
- .model-row { grid-template-columns: 108px minmax(0, 1fr) 50px; gap: 8px; }
588
- .model-row .nm { color: #c5d5d2; font-size: 11px; }
589
- .model-row .tk { height: 6px; background: #294148; }
590
- .model-row .tk i { background: linear-gradient(90deg, var(--cyan), var(--blue)); box-shadow: none; }
591
- .model-row .vl { color: var(--muted); }
592
- #recent { margin-top: 14px; }
593
- .r-row { padding: 9px 0; border-bottom-color: #2d424733; }
594
- .r-dot.done { box-shadow: none; }
595
- .r-dot.failed { box-shadow: none; }
596
- .r-t { color: #cad8d5; font-size: 12px; }
597
- .r-d { color: var(--muted-2); }
383
+ .models { display: flex; flex-direction: column; gap: 9px; }
384
+ .model-row { display: grid; grid-template-columns: minmax(0, 1fr) 62px; gap: 8px; align-items: center; }
385
+ .model-row .l { min-width: 0; }
386
+ .model-row .nm { font-size: 11.5px; color: var(--t1); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
387
+ .model-row .tk { height: 3px; margin-top: 5px; border-radius: 99px; background: var(--track); overflow: hidden; }
388
+ .model-row .tk i { display: block; height: 100%; border-radius: inherit; background: var(--data); }
389
+ .model-row .vl { font: 10px var(--mono); color: var(--t2); text-align: right; white-space: nowrap; }
390
+ .model-row .vl em { display: block; font-style: normal; color: var(--t3); font-size: 9px; }
391
+
392
+ .recent { flex: 1; min-height: 0; overflow-y: auto; margin: -2px -4px -2px 0; padding-right: 4px; }
393
+ .r-row { display: grid; grid-template-columns: 7px minmax(0, 1fr) auto; gap: 9px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); }
394
+ .r-row:last-child { border-bottom: none; }
395
+ .r-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--t3); }
396
+ .r-dot.done { background: var(--good); }
397
+ .r-dot.failed { background: var(--err); }
398
+ .r-t { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; color: var(--t1); }
399
+ .r-meta { font: 10px var(--mono); color: var(--t3); white-space: nowrap; }
400
+ .r-err { grid-column: 2 / -1; font-size: 10.5px; line-height: 1.5; color: var(--err); opacity: .8; }
401
+ .empty { font-size: 11.5px; color: var(--t3); padding: 10px 0; }
402
+
403
+ /* ---------------------------------------------------------------- 任务详情抽屉 */
404
+ #scrim { position: fixed; inset: 0; z-index: 20; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity .2s; }
405
+ #scrim.on { opacity: 1; pointer-events: auto; }
406
+ #drawer {
407
+ position: fixed; top: 0; right: 0; bottom: 0; z-index: 21; width: min(660px, 92vw);
408
+ background: var(--panel); border-left: 1px solid var(--line-2); box-shadow: var(--shadow);
409
+ transform: translateX(100%); transition: transform .24s cubic-bezier(.3, .7, .3, 1);
410
+ display: flex; flex-direction: column;
411
+ }
412
+ #drawer.on { transform: none; }
413
+ .dw-head { flex: none; padding: 18px 22px 16px; border-bottom: 1px solid var(--line); }
414
+ .dw-top { display: flex; align-items: center; gap: 10px; }
415
+ .dw-top h4 { min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; font-weight: 650; }
416
+ .dw-close { flex: none; width: 26px; height: 26px; border: 1px solid var(--line-2); border-radius: 5px; background: transparent; color: var(--t2); font: 14px/1 var(--mono); }
417
+ .dw-close:hover { border-color: var(--live); color: var(--live-hi); }
418
+ .dw-goal { margin-top: 10px; font-size: 12.5px; line-height: 1.7; color: var(--t2); }
419
+ .dw-meta { margin-top: 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; }
420
+ .dw-meta div { min-width: 0; }
421
+ .dw-meta span { display: block; font: 10px var(--mono); color: var(--t3); letter-spacing: .4px; }
422
+ .dw-meta b { display: block; margin-top: 3px; font: 12px var(--mono); color: var(--t1); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
423
+ .dw-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
424
+ .dw-steps { flex: none; max-height: 44%; overflow-y: auto; padding: 6px 22px 10px; }
425
+ .s-row {
426
+ display: grid; grid-template-columns: 22px minmax(0, 1fr) 92px 68px 44px;
427
+ gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line);
428
+ font-size: 12.5px; cursor: pointer;
429
+ }
430
+ .s-row:hover { background: var(--raise); }
431
+ .s-row.act { background: var(--data-bg); }
432
+ .s-i { font: 11px var(--mono); color: var(--t3); text-align: right; }
433
+ .s-n { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
434
+ .s-a { font: 11px var(--mono); color: var(--t2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
435
+ .s-d { font: 11px var(--mono); color: var(--t3); text-align: right; }
436
+ .s-s { font: 10px var(--mono); text-align: right; color: var(--t3); }
437
+ .s-s.done { color: var(--good); }
438
+ .s-s.running { color: var(--live-hi); }
439
+ .s-s.failed { color: var(--err); }
440
+ .s-m { display: block; height: 3px; margin-top: 5px; border-radius: 99px; background: var(--track); overflow: hidden; }
441
+ .s-m i { display: block; height: 100%; width: 0; background: var(--live); animation: grow 2.4s linear infinite; }
442
+ @keyframes grow { 0% { width: 4%; } 60% { width: 96%; } 100% { width: 4%; } }
443
+ .dw-log { flex: 1; min-height: 0; margin: 0 22px 18px; display: flex; flex-direction: column; background: var(--sunk); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
444
+ .dw-log-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--line); font: 10px var(--mono); color: var(--t3); letter-spacing: .6px; }
445
+ .dw-log-head .tag { color: var(--data); }
446
+ .dw-log-body { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px; font: 11.5px/1.8 var(--mono); color: var(--term); white-space: pre-wrap; word-break: break-word; }
447
+
448
+ /* ---------------------------------------------------------------- 令牌门 */
449
+ .gate { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: var(--scrim); backdrop-filter: blur(10px); }
450
+ .gate-box {
451
+ width: min(360px, calc(100vw - 40px)); padding: 32px 30px 28px; text-align: center;
452
+ border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow);
453
+ }
454
+ .gate-title { font-size: 20px; font-weight: 700; }
455
+ .gate-sub { color: var(--t2); font-size: 12px; margin: 7px 0 18px; }
456
+ #gate-token {
457
+ display: block; width: 100%; padding: 11px 13px; text-align: center; outline: none;
458
+ border: 1px solid var(--line-2); border-radius: 8px; background: var(--sunk); color: var(--t1);
459
+ }
460
+ #gate-token:focus { border-color: var(--data); box-shadow: 0 0 0 3px var(--data-bg); }
461
+ #gate-ok { margin-top: 12px; padding: 10px 26px; border: 1px solid var(--live-bd); border-radius: 7px; background: var(--live); color: var(--bg); font-weight: 700; }
462
+ #gate-ok:hover { background: var(--live-hi); }
463
+ .gate-err { min-height: 18px; margin-top: 11px; color: var(--err); font-size: 12px; }
598
464
 
599
- @media (max-width: 1280px) {
600
- #board { padding-left: 20px; padding-right: 20px; }
601
- #hd { padding-left: 20px; padding-right: 20px; }
602
- #hd::after { left: 20px; right: 20px; }
603
- .overview { grid-template-columns: minmax(0, 1fr) 230px 205px; }
604
- #main { grid-template-columns: minmax(0, 1fr) 330px; }
465
+ /* ---------------------------------------------------------------- 响应式 */
466
+ @media (max-width: 1500px) {
467
+ #main { grid-template-columns: minmax(0, 1fr) 318px; }
468
+ }
469
+ @media (max-width: 1240px) {
470
+ #kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
471
+ #board { grid-template-rows: 156px minmax(0, 1fr); }
605
472
  }
606
473
  @media (max-width: 1050px) {
607
- #board { grid-template-rows: 164px auto minmax(520px, auto); }
474
+ body { overflow: auto; }
475
+ #board { height: auto; }
608
476
  #main { grid-template-columns: minmax(0, 1fr); }
609
- #rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
477
+ #rail { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
478
+ .rc-recent { grid-column: 1 / -1; min-height: 240px; }
479
+ .hd-state .hd-sep, .hd-sync { display: none; }
610
480
  }
611
481
  @media (max-width: 720px) {
612
- #hd { height: 60px; padding: 0 14px; }
613
- #hd::after { left: 14px; right: 14px; }
614
- .hd-right { min-width: 0; width: auto; flex-shrink: 0; }
615
- #board { height: auto; min-height: calc(100vh - 60px); padding: 14px; grid-template-rows: 260px auto auto; gap: 12px; }
616
- .overview { grid-template-columns: 1fr 130px; grid-template-rows: 1fr 86px; }
617
- .overview-copy { padding: 20px 17px; }
618
- .overview-line h1 { font-size: 28px; }
619
- .hero-count strong { font-size: 40px; }
620
- .overview-visual { border-right: none; }
621
- .overview-aside { padding: 14px; }
482
+ #hd { height: 54px; padding: 0 14px; gap: 14px; }
483
+ #board { height: auto; padding: 12px; grid-template-rows: auto auto; }
622
484
  #kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
623
485
  #main { display: block; }
624
486
  #wall { min-height: 560px; }
625
- #wall-cards { grid-template-columns: 1fr; }
487
+ .wall-grid.d-many { grid-template-columns: minmax(0, 1fr); }
626
488
  #rail { margin-top: 12px; display: flex; }
627
- .rail-trend, .rail-models { flex-basis: auto; min-height: 166px; }
628
- .rail-recent { min-height: 300px; }
629
- }
630
-
631
- /* ---------------------------------------------------------------- v3：稳定桌面密度与侧栏边界 */
632
- @media (min-width: 1051px) {
633
- #board {
634
- padding-top: 16px;
635
- padding-bottom: 18px;
636
- grid-template-rows: 154px 90px minmax(0, 1fr);
637
- gap: 12px;
638
- }
639
- .overview-copy { padding: 20px 24px 16px; }
640
- .overview-foot {
641
- gap: 14px;
642
- flex-wrap: wrap;
643
- padding-top: 9px;
644
- border-top: 1px solid #304249;
645
- }
646
- .signal-chip {
647
- min-width: 0;
648
- padding: 4px 8px;
649
- border: 1px solid #82d3a233;
650
- border-radius: 4px;
651
- background: #82d3a20a;
652
- white-space: nowrap;
653
- }
654
- .overview.has-alert .signal-chip {
655
- border-color: #ea7e783b;
656
- background: #ea7e780b;
657
- }
658
- .overview-note { white-space: nowrap; }
659
- .overview-aside { padding: 18px 22px; }
660
- .aside-divider { margin: 11px 0 7px; }
661
- .aside-row { gap: 12px; padding: 3px 0; }
662
- .aside-row span { min-width: 0; }
663
- .aside-row b { flex: none; }
664
-
665
- #rail {
666
- display: grid;
667
- grid-template-rows: minmax(142px, .85fr) minmax(188px, 1.15fr) minmax(180px, 1.25fr);
668
- gap: 10px;
669
- }
670
- .rail-card {
671
- min-height: 0;
672
- overflow: hidden;
673
- padding: 14px 16px;
674
- border-radius: 9px;
675
- }
676
- .rail-trend, .rail-models { flex: initial; }
677
- .rail-head { align-items: center; }
678
- .rail-head h3 { margin-top: 4px; }
679
- .trend { height: 72px; gap: 8px; padding-top: 10px; }
680
- .models { gap: 7px; margin-top: 11px; }
681
- .model-row { grid-template-columns: minmax(84px, 1fr) minmax(34px, 1.2fr) 46px; gap: 8px; }
682
- .model-row .nm { font-size: 10.5px; }
683
- .model-row .vl { white-space: nowrap; }
684
- #recent { margin-top: 10px; }
685
- .r-row { padding: 7px 0; }
489
+ .rc { min-height: 168px; }
490
+ .hd-metric, .hd-swap { display: none; }
491
+ .hd-clock { font-size: 16px; min-width: 0; }
492
+ #drawer { width: 100vw; }
686
493
  }
687
-
688
- @media (min-width: 1051px) and (max-height: 820px) {
689
- body { overflow: auto; }
690
- #board {
691
- height: auto;
692
- min-height: calc(100vh - 64px);
693
- grid-template-rows: 150px 88px minmax(470px, 1fr);
694
- }
695
- }
696
-
697
- @media (max-width: 1050px) {
698
- #rail {
699
- display: grid;
700
- grid-template-columns: repeat(2, minmax(0, 1fr));
701
- grid-template-rows: auto minmax(190px, 1fr);
702
- gap: 12px;
703
- }
704
- .rail-trend, .rail-models { min-height: 180px; }
705
- .rail-recent { grid-column: 1 / -1; min-height: 280px; }
706
- }
707
-
708
- @media (max-width: 720px) {
709
- #rail { display: flex; }
710
- .rail-trend, .rail-models { min-height: 166px; }
494
+ @media (prefers-reduced-motion: reduce) {
495
+ *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
711
496
  }