ot-cli 0.2.1__py3-none-any.whl

openterminal/web/frontend/static/style.css

@@ -0,0 +1,915 @@
+/* OpenTerminal Web 前端样式：深色专业风（参考阿里云 Workbench CLI Agent 终端）。
+   单管线架构：唯一全屏 xterm（PTY 字节直写），AI 以「锚定在终端行上的装饰卡」
+   叠加——分析卡（.ablock）、总结卡（.scard）、审批卡（.acard）。锚定用 xterm
+   原生 registerDecoration（一卡一钉），滚动/resize/trim 由 xterm 管。 */
+
+:root {
+  --bg: #10141a;          /* 应用底色：深炭蓝 */
+  --panel: #161b22;       /* 侧栏 */
+  --panel2: #1c2128;      /* pane 头部 / 输入条 */
+  --border: #262c33;
+  --text: #e6e8ea;
+  --muted: #9aa0a6;
+  --accent: #ff6a00;      /* 强调色：阿里云橙，用于活跃态 */
+  --accent-soft: rgba(255, 106, 0, 0.15);
+  --term-bg: #0d1117;
+  --ok: #3fb950;
+  --warn: #d29922;
+  --danger: #f85149;
+  --violet: #bc8cff;     /* 编辑态（与红/橙/绿/灰区分） */
+  --cyan: #39c5cf;        /* 用户输入文本 / 块状光标（workbench 青） */
+  --ap-blue: #2f6feb;     /* 普通审批蓝框 / Agent 蓝点 */
+  --mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
+  --sans: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+}
+
+* { box-sizing: border-box; }
+[hidden] { display: none !important; }   /* author display 不覆盖 hidden 语义 */
+html, body { height: 100%; margin: 0; }
+body {
+  display: flex;
+  background: var(--bg);
+  color: var(--text);
+  font: 13px/1.5 var(--sans);
+}
+button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
+input { font: inherit; color: var(--text); background: var(--panel2); border: 1px solid var(--border); border-radius: 4px; }
+input:focus { outline: none; border-color: var(--accent); }
+
+/* --- 侧栏 --- */
+#sidebar {
+  width: 264px; flex-shrink: 0;
+  display: flex; flex-direction: column;
+  background: var(--panel); border-right: 1px solid var(--border);
+}
+body.sidebar-collapsed #sidebar { display: none; }
+
+#sidebar-head {
+  display: flex; align-items: center; gap: 6px;
+  padding: 8px 10px; border-bottom: 1px solid var(--border);
+}
+#sidebar-head .title { font-weight: 600; flex: 1; }
+#sidebar-head button { color: var(--muted); padding: 2px 6px; border-radius: 4px; }
+#sidebar-head button:hover { background: var(--panel2); color: var(--text); }
+
+#sidebar-search { margin: 8px 10px; padding: 5px 8px; width: auto; }
+
+#targets { flex: 1; overflow-y: auto; padding-bottom: 12px; }
+
+.sep {
+  display: flex; align-items: center; gap: 4px;
+  padding: 10px 12px 4px; color: var(--muted);
+  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
+}
+.sep .sep-caret { font-size: 9px; }
+
+.target {
+  display: flex; align-items: center; gap: 8px;
+  width: 100%; text-align: left;
+  padding: 6px 12px 6px 16px; color: var(--text);
+}
+.target:hover { background: var(--panel2); }
+.target .t-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
+.target .t-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.target .t-sub {
+  color: var(--muted); font-size: 10.5px;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.target .t-actions { display: none; gap: 2px; flex: none; }
+.target:hover .t-actions { display: flex; }
+.target .t-actions button {
+  background: none; border: none; color: var(--muted); cursor: pointer;
+  font-size: 12px; padding: 0 4px; border-radius: 4px; line-height: 1.6;
+}
+.target .t-actions button:hover {
+  color: var(--text); background: var(--bg);
+}
+
+.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+.dot.idle { background: #454c54; }
+.dot.connecting { background: var(--warn); animation: blink 1s infinite; }
+.dot.connected { background: var(--ok); }
+.dot.closed { background: var(--danger); }
+.dot.error { background: var(--danger); }
+/* tab 标签页上的连接状态点：略小，垂直居中于单行标签 */
+.tab .dot { width: 7px; height: 7px; }
+@keyframes blink { 50% { opacity: 0.35; } }
+
+/* --- 主区 --- */
+#main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+
+#tabbar { display: flex; flex: none; min-width: 0; background: var(--panel); }
+#btn-show-sidebar {
+  display: none; flex: none; align-self: center; margin: 0 4px;
+  padding: 4px 8px; border-radius: 4px; color: var(--muted); white-space: nowrap;
+}
+body.sidebar-collapsed #btn-show-sidebar { display: block; }
+#btn-show-sidebar:hover { background: var(--panel2); color: var(--text); }
+
+#tabs {
+  flex: 1; min-width: 0;
+  display: flex; align-items: stretch; gap: 2px;
+  padding: 6px 8px 0; background: var(--panel);
+  border-bottom: 1px solid var(--border);
+  overflow-x: auto; min-height: 34px;
+}
+.tab {
+  display: flex; align-items: center; gap: 6px;
+  padding: 5px 8px 5px 12px; border-radius: 6px 6px 0 0;
+  color: var(--muted); border: 1px solid transparent; border-bottom: 0;
+  max-width: 200px;
+}
+.tab:hover { background: var(--panel2); color: var(--text); }
+.tab.active { background: var(--bg); color: var(--text); border-color: var(--border); }
+.tab .tab-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tab .tab-x { color: var(--muted); padding: 0 2px; border-radius: 3px; }
+.tab .tab-x:hover { background: var(--border); color: var(--text); }
+
+#panes { flex: 1; position: relative; min-height: 0; }
+.pane { position: absolute; inset: 0; display: none; flex-direction: column; }
+.pane.active { display: flex; }
+
+.pane-head {
+  display: flex; align-items: center; gap: 10px;
+  padding: 6px 10px; background: var(--panel2); border-bottom: 1px solid var(--border);
+}
+.seg { display: flex; border: 1px solid var(--border); border-radius: 5px; overflow: hidden; }
+.seg button { padding: 3px 12px; color: var(--muted); background: var(--bg); }
+.seg button + button { border-left: 1px solid var(--border); }
+.seg button:hover { color: var(--text); }
+.seg button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
+.pane-host { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* --- 唯一渲染管线：全屏连续 xterm（SSH/Agent 共用，不再切换显示） --- */
+.term {
+  flex: 1; min-height: 0; padding: 4px 6px;
+  background: var(--term-bg); overflow: hidden;
+  position: relative;   /* 连接中浮层（.connect-overlay）的定位上下文 */
+}
+.term .xterm { height: 100%; }
+
+/* 连接中浮层：盖住终端区居中显示，两阶段文案（连接中 → 初始化 Agent），
+   ready 即撤；SSH 弹窗须压在连接浮层和文件抽屉之上 */
+.connect-overlay {
+  position: absolute; inset: 0; z-index: 40;
+  display: flex; align-items: center; justify-content: center; gap: 12px;
+  background: color-mix(in srgb, var(--term-bg) 72%, transparent);
+  color: var(--muted); font-size: 15px; letter-spacing: 1px;
+}
+.connect-overlay[hidden] { display: none; }
+.connect-overlay .cspin {
+  width: 18px; height: 18px; flex: none; border-radius: 50%;
+  border: 2.5px solid var(--border); border-top-color: var(--text);
+  animation: spin 0.8s linear infinite;
+}
+.connect-overlay .cdots::after {
+  content: ""; display: inline-block; width: 1.2em; text-align: left;
+  animation: tdots 1.2s steps(1) infinite;
+}
+
+/* --- 装饰卡层：锚定终端行的 HTML 卡（样式参照 docs/prototype/deco-demo.html）--- */
+
+/* 分析卡（.ablock）：蓝边 / 呼吸点 / 「分析」标签 / sans 字体（配色对齐
+   main 分支 .ablock：ap-blue 系边框与底色）。宿主宽度由 app.js 设为全宽
+   calc(100% - 12px)，左缘与提示符列对齐 */
+.ablock {
+  position: relative; margin: 0 0 2px 0; padding: 7px 12px 8px;
+  border: 1px solid rgba(47, 111, 235, 0.32);
+  border-left: 3px solid var(--ap-blue);
+  border-radius: 4px; background: #101827;
+  font: 13px/1.75 var(--sans);
+  max-width: calc(100% - 12px);
+}
+.ablock .ahead {
+  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
+  font-family: var(--sans); font-size: 11px; font-weight: 650;
+  letter-spacing: 0.06em; color: #7aa7ff;
+}
+.ablock .adot {
+  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
+  background: var(--ap-blue); box-shadow: 0 0 0 3px rgba(47, 111, 235, 0.16);
+  animation: blink 1.2s infinite;
+}
+.ablock.done .adot { animation: none; }   /* 定格后圆点静止 */
+.ablock.failed .alabel { color: var(--muted); }
+.ablock .alabel { color: #7aa7ff; }
+.ablock .atext {
+  white-space: pre-wrap; word-break: break-word; color: #c3cedd;
+  font-family: var(--sans); font-size: 13px; line-height: 1.75;
+}
+/* 「AI 正在思考」占位（task_start → 首个 token）：与流式态同壳（蓝边/表头常显），
+   仅正文位放 spinner 文案——换态只换正文，不重挂不重占位，消切换闪 */
+.ablock.think .atext.think {
+  display: flex; align-items: center; gap: 8px;
+  color: var(--muted); font-size: 12px; line-height: 1.4; font-style: normal;
+}
+.atext.think::before {
+  content: ""; width: 12px; height: 12px; flex: none;
+  border: 2px solid #2a3138; border-top-color: var(--cyan);
+  border-radius: 50%; animation: spin 0.8s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* 总结卡（.scard）：青系（--cyan #39c5cf 同族，沉稳不刺眼）——青左边框 +
+   青点 + 「总结」标签、底色青调深色；mdLite 渲染 markdown 表格（v4：echarts 移除）。
+   宿主宽度由 app.js 设为全宽 calc(100% - 12px) */
+.scard {
+  margin-left: 0; padding: 7px 12px 8px;
+  border: 1px solid rgba(57, 197, 207, 0.35);
+  border-left: 3px solid var(--cyan);
+  border-radius: 4px; background: #0e1618;
+  max-width: calc(100% - 12px);
+  font: 13px/1.75 var(--sans);
+}
+.scard .ahead {
+  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
+  font-family: var(--sans); font-size: 11px; font-weight: 650;
+  letter-spacing: 0.06em; color: var(--cyan);
+}
+.scard .adot {
+  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
+  background: var(--cyan); box-shadow: 0 0 0 3px rgba(57, 197, 207, 0.15);
+}
+/* mdLite 表格：整表圆角外框 + 蓝色渐变表头（对齐 main .atext .mtable） */
+.scard .mtable {
+  overflow-x: auto; margin: 6px 0 10px;
+  border: 1px solid var(--border); border-radius: 8px;
+  background: rgba(255, 255, 255, 0.015);
+}
+.scard .mtable table, .scard table {
+  border-collapse: separate; border-spacing: 0;
+  font-size: 12.5px; width: 100%; margin: 0;
+}
+.scard th, .scard td {
+  padding: 5px 14px; word-break: break-word; text-align: left;
+  border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+.scard th {
+  background: linear-gradient(180deg, rgba(47, 111, 235, 0.60), rgba(47, 111, 235, 0.38));
+  color: #eaf1ff; font-weight: 600; white-space: nowrap;
+  border-bottom: 2px solid rgba(47, 111, 235, 0.65);
+}
+.scard tbody tr:last-child td { border-bottom: 0; }
+.scard tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
+.scard tbody tr:hover { background: rgba(47, 111, 235, 0.10); }
+.scard .a-center { text-align: center; }
+.scard .a-right { text-align: right; }
+.scard .mh { font-weight: 650; margin: 12px 0 6px; color: var(--text); }
+.scard .mh1 { font-size: 15px; }
+.scard .mh2 { font-size: 14px; }
+.scard .mh3, .scard .mh4 { font-size: 13px; color: #c3cedd; }
+.scard .mline { margin: 2px 0; word-break: break-word; }
+.scard .mgap { height: 10px; }
+.scard ol, .scard ul { margin: 3px 0; padding-left: 22px; }
+.scard li { margin: 2px 0; }
+.scard code {
+  padding: 1px 5px; border-radius: 4px; background: #1b2129;
+  color: #c9d1d9; font-family: var(--mono); font-size: 12px;
+}
+.scard strong { color: #fff; font-weight: 650; }
+
+/* 审批卡（.acard）：现有审批框样式沿用（.aprobe），宿主全宽 */
+.acard { max-width: calc(100% - 12px); }
+
+/* 决策摘要行：审批决策后由思考占位卡原地变成的一行 DOM 摘要（锚在提示符
+   上方，写网格会被 readline 的 \x1b[A\x1b[K 清理擦掉，故必须是 DOM） */
+.dline {
+  display: flex; align-items: center; gap: 8px;
+  margin: 0 0 2px 0; padding: 2px 10px;
+  border: 1px solid var(--border); border-left: 3px solid var(--ok);
+  border-radius: 6px; background: #101a13;
+  font: 12px/1.5 var(--sans);
+  max-width: calc(100% - 12px);
+  white-space: nowrap; overflow: hidden;
+}
+.dline.fail { border-left-color: var(--danger); background: rgba(248, 81, 73, .06); }
+.dline.edit { border-left-color: var(--warn); background: rgba(210, 153, 34, .06); }
+.dline .dstate { font-weight: 650; color: var(--ok); flex-shrink: 0; }
+.dline.fail .dstate { color: var(--danger); }
+.dline.edit .dstate { color: var(--warn); }
+.dline .dcmd {
+  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
+  overflow: hidden; text-overflow: ellipsis;
+}
+
+/* 决策后折叠为一行摘要：结果 + 命令（用户拍板，省空间且待办一眼可见） */
+.aprobe.apfolded {
+  display: flex; align-items: center; gap: 8px;
+  padding: 3px 10px; opacity: .8;
+  white-space: nowrap; overflow: hidden;
+}
+.aprobe.apfolded .apstate { font-size: 12px; font-weight: 650; flex-shrink: 0; }
+.aprobe.apfolded .apfold-cmd {
+  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
+  overflow: hidden; text-overflow: ellipsis;
+}
+
+/* --- 审批框本体（蓝框 / 高危红框） --- */
+.aprobe {
+  border: 1px solid var(--ap-blue); border-radius: 4px;
+  background: #0d1420; overflow: hidden;
+  font-family: var(--sans);
+}
+.aprobe.high { border-color: var(--danger); background: #1c1113; }
+.aprobe.ok { border-color: var(--border); background: var(--panel); }   /* 决策后转静态中性框 */
+
+/* 工具调用小卡：橙色系（区别审批蓝/高危红） */
+.aprobe.tcard { border-color: #c66a1e; background: #181207; }
+.aprobe.tcard .aphead { background: rgba(230, 145, 56, 0.13); }
+.aprobe.tcard .aphead .apq { color: #e8933a; }
+
+.aphead {
+  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
+  padding: 8px 12px; background: rgba(47, 111, 235, 0.12);
+}
+.aprobe.high .aphead { background: rgba(248, 81, 73, 0.14); }
+.aphead .apq { font-size: 12.5px; font-weight: 650; color: var(--text); }
+.aphead .apbtns { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-left: auto; }
+/* 高危执行二次确认:确认条浮在「执行」按钮正下方(卡头内绝对定位,不占流内
+   高度——卡体高度走 pad 账目,流内弹入会把卡撑高再缩回) */
+.apexec { position: relative; display: inline-flex; }
+.apconfirm {
+  position: absolute; right: 0; top: calc(100% + 5px); z-index: 30;
+  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
+  padding: 6px 9px; border: 1px solid var(--danger); border-radius: 6px;
+  background: #1c1113; box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
+}
+.apconfirm-q { font-size: 12px; font-weight: 650; color: var(--text); }
+.apconfirm button {
+  padding: 3px 10px; border: 1px solid var(--border); border-radius: 5px;
+  background: var(--panel2); color: var(--text); font-size: 12px;
+}
+.apconfirm button:hover { border-color: var(--muted); }
+.apconfirm button.primary {
+  background: #da3633; border-color: #da3633; color: #fff; font-weight: 600;
+}
+.apconfirm button.primary:hover { filter: brightness(1.1); }
+.apbtns button {
+  display: inline-flex; align-items: center; gap: 2px;
+  padding: 4px 11px; border: 1px solid var(--border); border-radius: 5px;
+  background: var(--panel2); color: var(--text); font-size: 12px;
+}
+.apbtns button:hover { border-color: var(--muted); background: #232931; }
+.apbtns button.primary {
+  background: var(--ap-blue); border-color: var(--ap-blue); color: #fff; font-weight: 600;
+}
+.aprobe.high .apbtns button.primary { background: #da3633; border-color: #da3633; }
+.apbtns button.primary:hover { filter: brightness(1.1); }
+.apbtns button.ghost { color: var(--muted); border-color: transparent; background: none; }
+.apbtns button.ghost:hover { color: var(--text); border-color: var(--border); }
+.aprobe kbd {
+  margin-left: 5px; padding: 0 4px; font-size: 10.5px; line-height: 15px;
+  color: var(--muted); background: rgba(255, 255, 255, 0.06);
+  border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 3px;
+  font-family: var(--mono);
+}
+.apbtns button.primary kbd {
+  color: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.35);
+  background: rgba(255, 255, 255, 0.12);
+}
+.aprobe .apcode {
+  margin: 0; padding: 9px 12px; background: #0d1117; color: var(--text);
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  font-family: var(--mono); font-size: 12.5px;
+  white-space: pre-wrap; word-break: break-all;
+}
+.aprobe .apreasons { padding: 7px 12px; color: var(--muted); font-size: 12px; }
+.aprobe .apreasons[hidden] { display: none; }
+.apedit { padding: 9px 12px; }
+.apedit[hidden] { display: none; }
+/* 编辑框下拉浮层：绝对定位在卡体下方、不撑卡高——否则 pad 会为编辑框预留
+   空行，保存后卡缩回而预留空行无法回收＝真机「修改保存后卡上下大白空」；
+   浮层伸出 host 盒由 EditorCard 临时把宿主置 overflow visible */
+.acard { position: relative; }
+/* 编辑框＝pane 级底部浮层（cards.jsx 经 portal 挂到 .pane）：卡内流内渲染会
+   溢出宿主预留行、落到缓冲末行之下，滚动到不了（真机「编辑框溢底部看不到」）；
+   浮层与终端流无关，不碰 pad 账目、关闭不留白空 */
+.pane > .apedit {
+  position: absolute; left: 12px; right: 12px; bottom: 42px; z-index: 30;
+  background: var(--panel2, #161b22);
+  border: 1px solid var(--border); border-radius: 10px;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
+}
+.apedit textarea {
+  width: 100%; padding: 7px 9px; resize: vertical; min-height: 44px;
+  background: #0d1117; color: var(--text);
+  border: 1px solid var(--ap-blue); border-radius: 6px; outline: none;
+  font-family: var(--mono); font-size: 12.5px;
+}
+.apedit-btns { display: flex; gap: 7px; margin-top: 7px; }
+.apedit-btns button {
+  padding: 3px 11px; border: 1px solid var(--border); border-radius: 5px;
+  background: var(--panel2); font-size: 12px;
+}
+.apedit-btns button.primary {
+  background: var(--ap-blue); border-color: var(--ap-blue); color: #fff; font-weight: 600;
+}
+.apstate { font-size: 12px; font-weight: 650; padding: 2px 0; margin-left: auto; }
+/* 决策后徽标接管问句槽（aphead 首位）：不再右推，字号字重对齐问句观感 */
+.aphead > .apstate { margin-left: 0; font-size: 12.5px; }
+.apstate.ok { color: var(--ok); }
+.apstate.edit { color: var(--warn); }
+.apstate.fail { color: var(--danger); }
+/* 已同意：命令置灰＝已定稿不可更改的观感（拒绝/编辑态保留原色） */
+.aprobe .apcode.locked { color: var(--muted); }
+
+/* --- Phase 2 命令卡（execute 工具卡+审批卡二合一） ---
+   四行全定高（name/命令/状态/操作），挂载后高度/行不再变化（红线④）：
+   状态行/操作行/理由槽渲染出即占位（空态也渲染定高元素），
+   按钮簇替换为回执不改变行高。*/
+.cmdcode {
+  height: 2.6em;          /* 定高 2 行 */
+  overflow: hidden;
+}
+.aprobe .cmdcode { color: var(--cyan); }
+.cmdstat {
+  display: flex; align-items: center; gap: 10px;
+  height: 1.9em;          /* 定高 1 行：理由槽+状态文案 */
+  overflow: hidden;
+}
+.cmdreason {
+  flex: 1; min-width: 0; font-size: 12px; color: var(--muted);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.cmdacts {
+  display: flex; align-items: center; gap: 7px;
+  height: 1.9em;          /* 定高 1 行：按钮簇→回执同高替换 */
+  overflow: hidden;
+  /* 还原原版布局：按钮簇在卡头右侧（aphead 内 margin-left:auto 右推） */
+  margin-left: auto;
+}
+/* 卡头不换行：按钮簇超宽由 .cmdacts 裁剪，不得挤到第二行撑高卡体 */
+.cmdhead { flex-wrap: nowrap; min-width: 0; }
+.cmdhead .alabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cmdacts .apbtns {
+  display: flex; align-items: center; gap: 7px;
+  flex-wrap: nowrap;      /* 定高槽内不换行（换行被裁＝按钮失踪） */
+  margin-left: 0;
+}
+.cmdacts .apexec { position: relative; display: flex; gap: 7px; }
+
+/* 命令卡状态配色（真机约定，盖过 .aprobe.high 的统一红框）：
+   等待审批红 / 编辑紫 / 拒绝灰 / 完成绿 / 失败橙 */
+.cmdcard.waiting { border-color: var(--danger); background: #1c1113; }
+.cmdcard.waiting .aphead { background: rgba(248, 81, 73, 0.14); }
+.cmdcard.editing { border-color: var(--violet); background: #181028; }
+.cmdcard.editing .aphead { background: rgba(188, 140, 255, 0.13); }
+.cmdcard.rejected { border-color: var(--muted); background: var(--panel); }
+.cmdcard.rejected .aphead { background: rgba(154, 160, 166, 0.12); }
+.cmdcard.done { border-color: var(--ok); background: #101a13; }
+.cmdcard.done .aphead { background: rgba(63, 185, 80, 0.13); }
+.cmdcard.failed { border-color: var(--warn); background: #1c1608; }
+.cmdcard.failed .aphead { background: rgba(210, 153, 34, 0.14); }
+/* 状态徽标配色：等待红 / 拒绝灰 / 失败橙 / 编辑紫（ok 沿用绿） */
+.apstate.waiting { color: var(--danger); }
+/* 红色警告卡：配置错误/系统异常（模型超时、工具超时等） */
+.alertcard { border-color: var(--danger); background: #1c1113; }
+.alertcard .aphead { background: rgba(248, 81, 73, 0.14); }
+.alertcard .aphead .apq { color: var(--danger); }
+.apstate.rejected { color: var(--muted); }
+.apstate.fail { color: var(--warn); }
+.apstate.edit, .apreceipt.edit { color: var(--violet); }
+.apreceipt {
+  font-size: 12px; font-weight: 650;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  max-width: 100%;
+}
+.apreceipt.ok { color: var(--ok); }
+.apreceipt.edit { color: var(--warn); }
+.apreceipt.fail { color: var(--danger); }
+
+/* --- 开启新会话（唯一入口，状态栏；此前内嵌每张审批卡已删） --- */
+.statusbar .status-newtask {
+  padding: 2px 9px; font-size: 12px; font-family: var(--sans);
+  color: var(--muted); border: 1px solid var(--border); border-radius: 5px;
+  background: var(--panel2);
+}
+.statusbar .status-newtask:hover { color: var(--text); border-color: var(--muted); }
+
+/* --- 状态栏 --- */
+.statusbar {
+  display: flex; align-items: center; gap: 12px;
+  padding: 3px 10px; background: var(--panel2); border-top: 1px solid var(--border);
+  color: var(--muted); font-size: 12px;
+}
+.statusbar .status-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.statusbar .status-meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
+/* ⏹ 中断按钮：任务条右侧常驻（任务全程可点），圆形红框醒目态 */
+.statusbar .status-stop {
+  font-size: 13px; line-height: 1; width: 26px; height: 26px;
+  display: inline-flex; align-items: center; justify-content: center;
+  padding: 0; cursor: pointer; flex-shrink: 0;
+  background: var(--panel); color: var(--danger);
+  border: 1px solid var(--border); border-radius: 50%;
+}
+.statusbar.task-on .status-stop {
+  border-color: rgba(248, 81, 73, 0.55);
+  box-shadow: 0 0 0 1px rgba(248, 81, 73, 0.15);
+}
+.statusbar .status-stop:hover { background: rgba(248, 81, 73, 0.12); border-color: var(--danger); }
+.statusbar .status-stop[hidden] { display: none; }
+/* 「AI正在思考」任务条：任务全程常显于状态栏左侧（思考/流式卡/执行/审批），
+   配色对齐分析卡蓝（#7aa7ff），spinner 复用 spin 关键帧，尾部动画省略号 */
+.statusbar .status-think {
+  display: inline-flex; align-items: center; gap: 8px; flex: 1;
+  min-width: 0; overflow: hidden;
+  color: #7aa7ff; font-size: 12px; white-space: nowrap;
+}
+.statusbar .status-think .ttext { letter-spacing: 0.5px; }
+.statusbar .status-think .tdots::after {
+  content: ""; display: inline-block; width: 1.2em; text-align: left;
+  animation: tdots 1.2s steps(1) infinite;
+}
+@keyframes tdots {
+  0% { content: ""; } 25% { content: "."; }
+  50% { content: ".."; } 75% { content: "..."; }
+}
+.statusbar.task-on {
+  background: rgba(122, 167, 255, 0.06);
+}
+/* 「连接中」徽标：建连期（含 local shell 启动、SSH 握手）常显于状态栏左侧，
+   spinner + 循环滚动省略号；ready/closed/error 即撤。样式对齐 status-think */
+.statusbar .status-connect {
+  display: inline-flex; align-items: center; gap: 8px; flex: 1;
+  min-width: 0; overflow: hidden;
+  color: var(--muted); font-size: 12px; white-space: nowrap;
+}
+.statusbar .status-connect[hidden] { display: none; }
+.statusbar .status-connect .cspin {
+  width: 12px; height: 12px; flex: none; border-radius: 50%;
+  border: 2px solid var(--border); border-top-color: var(--muted);
+  animation: spin 0.8s linear infinite;
+}
+.statusbar .status-connect .cdots::after {
+  content: ""; display: inline-block; width: 1.2em; text-align: left;
+  animation: tdots 1.2s steps(1) infinite;
+}
+.statusbar .status-think[hidden] { display: none; }
+.statusbar .status-think .tspin {
+  width: 12px; height: 12px; flex: none; border-radius: 50%;
+  border: 2px solid rgba(122, 167, 255, 0.25); border-top-color: #7aa7ff;
+  animation: spin 0.8s linear infinite;
+}
+.statusbar .status-tokens,
+.statusbar .status-cmdset,
+.statusbar .status-time { font-family: var(--mono); font-size: 11px; white-space: nowrap; }
+.statusbar .status-cmdset { opacity: 0.75; }
+
+/* Agent 空提示符占位提示（幽灵文本）：叠在光标行 prompt 之后，纯装饰 */
+.ot-ghost {
+  color: var(--muted); opacity: .55; font-style: italic;
+  pointer-events: none; user-select: none; white-space: pre;
+  overflow: hidden; height: 100%;
+}
+.statusbar .status-cmdset-resume {
+  background: var(--panel); color: var(--text);
+  border: 1px solid var(--border); border-radius: 4px;
+  font-size: 11px; padding: 0 6px; cursor: pointer;
+}
+.statusbar .status-cmdset-resume:hover { border-color: var(--accent); }
+.statusbar .status-model {
+  font-family: var(--mono); font-size: 11px;
+  background: var(--panel); color: var(--text);
+  border: 1px solid var(--border); border-radius: 4px; padding: 1px 4px;
+  max-width: 160px;
+}
+.statusbar .status-model[hidden] { display: none; }
+.statusbar .status-size { flex-shrink: 0; }
+
+/* --- 模式切换分段控件（快捷键 kbd 胶囊；seg 仅作后端 hook 开关） --- */
+.seg button { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; font-size: 12px; }
+.seg button kbd {
+  padding: 0 4px; font-size: 10px; line-height: 15px; color: var(--muted);
+  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border);
+  border-radius: 3px; font-family: var(--mono);
+}
+.seg button.on kbd { color: var(--accent); border-color: rgba(255, 106, 0, 0.35); }
+
+/* --- 模态框 --- */
+#modal-root { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); z-index: 1100; }
+#modal-root:empty { display: none; }
+.modal { width: min(440px, 92vw); max-height: 85vh; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; box-shadow: 0 8px 30px rgba(0,0,0,0.5); }
+.modal h3 { margin: 0 0 8px; font-size: 14px; }
+.modal-body { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
+.modal-body p { margin: 0 0 8px; color: var(--text); white-space: pre-wrap; }
+.modal-body input { width: 100%; padding: 6px 10px; }
+.modal-check { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
+.modal-check input { width: auto; padding: 0; }
+.modal-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; flex-shrink: 0; }
+.modal-btns button { padding: 4px 14px; border: 1px solid var(--border); border-radius: 4px; }
+.modal-btns button:hover { background: var(--panel2); }
+.modal-btns button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
+
+/* --- 连接表单弹窗（添加/编辑远程机器）--- */
+.form-grid {
+  display: grid; grid-template-columns: 76px 1fr;
+  gap: 9px 10px; align-items: center;
+}
+.form-grid label { color: var(--muted); font-size: 12.5px; text-align: right; }
+.form-grid input, .form-grid select, .form-grid textarea {
+  background: var(--bg); color: var(--text);
+  border: 1px solid var(--border); border-radius: 6px;
+  padding: 6px 9px; font-size: 13px; width: 100%; box-sizing: border-box;
+}
+.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus {
+  outline: none; border-color: var(--accent);
+}
+.form-grid input.invalid { border-color: var(--danger); }
+.form-grid textarea { font-family: var(--mono); resize: vertical; }
+
+/* --- 右键菜单：复制 / 粘贴 --- */
+.ctxmenu {
+  position: fixed; z-index: 1000; min-width: 110px;
+  background: var(--panel2); border: 1px solid var(--border); border-radius: 6px;
+  padding: 4px; box-shadow: 0 4px 16px rgba(0, 0, 0, .45);
+}
+.ctxmenu button {
+  display: block; width: 100%; text-align: left;
+  padding: 5px 10px; border: none; background: none; color: var(--text);
+  font-size: 12px; border-radius: 4px; cursor: pointer;
+}
+.ctxmenu button:hover:not(:disabled) { background: var(--border); }
+.ctxmenu button:disabled { opacity: .4; cursor: default; }
+
+/* --- 复制成功小提示：出现 1s 后淡出（复用同一节点，连按不叠影）--- */
+.copy-toast {
+  position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%);
+  z-index: 900; padding: 5px 14px; border-radius: 999px;
+  background: var(--panel2); border: 1px solid var(--border);
+  color: var(--text); font-size: 12px; pointer-events: none;
+  opacity: 0; transition: opacity .3s ease;
+}
+.copy-toast.show { opacity: .92; }
+
+/* --- 文件面板（远程文件浏览/上传/下载，仅 SSH 会话）---
+   抽屉式覆盖在 pane 右侧；top/bottom 由 JS 按 pane-head/statusbar 实际
+   高度设置，不改 .term 布局（避开 xterm fit 敏感链路）。 */
+.files-toggle {
+  margin-left: auto; padding: 3px 10px; font-size: 12px;
+  color: var(--muted); background: var(--bg);
+  border: 1px solid var(--border); border-radius: 5px; cursor: pointer;
+}
+.files-toggle:hover { color: var(--text); border-color: var(--accent); }
+
+.files-panel {
+  position: absolute; right: 0; top: 0; bottom: 0; width: 340px; max-width: 90%;
+  z-index: 700; display: flex; flex-direction: column;
+  background: var(--panel); border-left: 1px solid var(--border);
+  box-shadow: -6px 0 18px rgba(0, 0, 0, 0.35);
+}
+.files-panel[hidden] { display: none; }
+/* 面板打开时整个块流区让位（历史卡片与活动终端一起收缩）；面板仍是
+   absolute 覆盖层不改 DOM 结构，只靠 .ot-stage 的 margin 让位。min() 与面板
+   width/max-width 对齐——窄窗口面板压到 90% 时终端同样只留 10%。
+   列宽同步走 fit()（fitAddon → onResize → 后端 resize），与窗口 resize
+   同一条链路，卡片重贴不旁路。 */
+.pane.fp-open > .ot-stage { margin-right: min(340px, 90%); }
+/* 头部两行：标题+来源徽标一行，操作按钮一行并允许换行——按钮一多塞单行
+   会把标题挤成三行、右侧按钮溢出面板（真机截图） */
+.fp-head {
+  display: flex; flex-direction: column; gap: 6px;
+  padding: 6px 10px; border-bottom: 1px solid var(--border);
+}
+.fp-head-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.fp-head-acts { display: flex; flex-wrap: wrap; gap: 6px; }
+/* 关闭键常驻标题行右端：塞进操作行会让它单独掉到第二行（真机量尺寸） */
+.fp-head-top .fp-x { flex: none; padding: 2px 7px; }
+.fp-title { flex: 1; min-width: 0; font-size: 12px; font-weight: 600;
+  color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+/* 来源徽标：本机（会话直连）/ 级联目标主机 */
+.fp-badge {
+  flex-shrink: 0; max-width: 40%; overflow: hidden;
+  text-overflow: ellipsis; white-space: nowrap;
+  padding: 1px 7px; font-size: 10px; border-radius: 999px;
+  color: var(--muted); background: var(--bg); border: 1px solid var(--border);
+}
+.fp-badge.cascade { color: #39c5cf; border-color: #2a6f75; }
+.fp-connect-hint { padding: 2px 12px 0; font-size: 11px; color: var(--muted); }
+.fp-btn {
+  padding: 2px 8px; font-size: 12px; color: var(--muted);
+  background: var(--bg); border: 1px solid var(--border);
+  border-radius: 4px; cursor: pointer; white-space: nowrap;
+}
+.fp-btn:hover { color: var(--text); border-color: var(--accent); }
+/* 工具栏图标按钮：文字按钮换图标后收紧内边距，与 tab 关闭 × 同构 */
+.fp-btn.fp-icon { padding: 2px 7px; line-height: 1.4; font-size: 13px; }
+.fp-path {
+  padding: 5px 10px; font-size: 11px; color: var(--muted);
+  border-bottom: 1px solid var(--border);
+  overflow-x: auto; white-space: nowrap; flex: none;
+}
+.fp-path a { color: var(--cyan); cursor: pointer; }
+.fp-muted { color: var(--muted); }
+.fp-empty .fp-retry { margin-top: 10px; }
+.fp-path a:hover { text-decoration: underline; }
+.fp-list {
+  flex: 1; min-height: 0; overflow-y: auto; padding: 4px 0;
+}
+.fp-list.drop { outline: 2px dashed var(--accent); outline-offset: -4px; }
+.fp-row {
+  display: flex; align-items: center; gap: 6px;
+  padding: 4px 10px; font-size: 12px; color: var(--text); cursor: pointer;
+}
+/* 选中态不能只靠 accent-soft——那与 :hover 同色，看不出选中。
+   用左侧竖条把「选中」与「鼠标掠过」分开。 */
+.fp-row:hover { background: var(--accent-soft); }
+.fp-row.active {
+  background: var(--accent-soft);
+  box-shadow: inset 2px 0 0 var(--accent);
+}
+.fp-row.active:hover { background: var(--accent-soft); }
+.fp-row .fp-icon { flex: none; }
+.fp-row .fp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fp-row .fp-meta { flex: none; font-size: 11px; color: var(--muted); }
+.fp-empty { padding: 18px 10px; text-align: center; font-size: 12px; color: var(--muted); }
+.fp-progress {
+  height: 3px; background: var(--bg); flex: none;
+}
+.fp-progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .15s; }
+.fp-foot {
+  display: flex; align-items: center; gap: 8px;
+  padding: 8px 10px; border-top: 1px solid var(--border); flex: none;
+}
+.fp-hint { font-size: 10px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* 面板操作结果提示：复用 copy-toast 的浮层样式 */
+.fp-toast {
+  position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%);
+  z-index: 901; padding: 5px 14px; border-radius: 999px;
+  background: var(--panel2); border: 1px solid var(--border);
+  color: var(--text); font-size: 12px; pointer-events: none;
+  opacity: 0; transition: opacity .3s ease; max-width: 80%;
+}
+.fp-toast.show { opacity: .92; }
+.fp-toast.bad { border-color: var(--danger); color: var(--danger); }
+
+/* --- 文件面板管理操作（新建/编辑/删除）--- */
+.fp-acts { display: none; gap: 2px; flex: none; }
+/* 悬浮出现；选中行也常驻——否则选中后鼠标移开就找不到下载按钮 */
+.fp-row:hover .fp-acts,
+.fp-row.active .fp-acts { display: flex; }
+.fp-act {
+  padding: 0 4px; font-size: 11px; line-height: 1.5;
+  color: var(--muted); border-radius: 3px; cursor: pointer;
+}
+.fp-act:hover { color: var(--text); background: var(--border); }
+.fp-name-input { width: 100%; }
+.fp-name-input + .fp-name-input { margin-top: 8px; }
+/* 级联连接弹窗：密码框间距 + 记住密码勾选 + 说明行 */
+.fp-remember {
+  display: flex; align-items: center; gap: 6px;
+  margin: 6px 0 0; font-size: 12px; color: var(--text); cursor: pointer;
+}
+.fp-hint2 { margin: 8px 0 0; font-size: 11px; color: var(--muted); }
+.fp-edit {
+  width: 100%; height: 55vh; resize: vertical;
+  background: var(--term-bg); color: var(--text);
+  border: 1px solid var(--border); border-radius: 4px; padding: 8px;
+  font: 12px/1.5 var(--mono); white-space: pre; overflow: auto;
+}
+.fp-edit:focus { outline: none; border-color: var(--accent); }
+.fp-edit-hint { margin: 6px 0 0; font-size: 11px; color: var(--muted); }
+
+/* --- 响应式：不同显示器宽度 / 系统缩放下布局收敛 ---
+   此前本文件没有任何 @media：264px 侧栏在小屏常驻会把终端挤成一条缝，
+   状态栏的次要元数据（token/尺寸/耗时）在窄窗口里把操作按钮挤出可视区。
+   原则是「终端优先」：先收侧栏宽度，再收浮层化，最后裁状态栏次要项；
+   任何档位都不改变卡片几何（卡宽恒 calc(100% - 12px)，量高由 JS 按实测）。 */
+@media (max-width: 1280px) {
+  #sidebar { width: 218px; }
+  .tab { max-width: 168px; }
+}
+@media (max-width: 1024px) {
+  #sidebar { width: 188px; }
+  .tab { max-width: 148px; }
+  .statusbar { gap: 8px; }
+  .statusbar .status-meta { gap: 8px; }
+}
+@media (max-width: 860px) {
+  /* 侧栏转浮层：终端拿满宽度，仍可从顶栏按钮唤出（配套 JS 在窄屏启动时
+     自动收起、跨过阈值变窄时也收起，只收不弹——不与用户手动展开抢状态） */
+  #sidebar {
+    position: fixed; inset: 0 auto 0 0; z-index: 600;
+    width: min(78vw, 264px);
+    box-shadow: 0 0 28px rgba(0, 0, 0, 0.5);
+  }
+  /* 次要元数据让位给状态文案与操作钮 */
+  .statusbar .status-meta .status-tokens,
+  .statusbar .status-meta .status-size,
+  .statusbar .status-meta .status-time { display: none; }
+}
+@media (max-width: 640px) {
+  .statusbar { gap: 6px; padding: 3px 6px; }
+  .statusbar .status-text { display: none; }
+  .pane-head { gap: 6px; padding: 5px 8px; }
+  .seg button { padding: 3px 8px; }
+  #tabs { padding: 4px 6px 0; }
+  .tab { max-width: 118px; padding: 5px 6px 5px 8px; }
+}
+
+/* --- 块流布局（Phase 1）：卡片块与文本块是平级兄弟节点，不再贴在 xterm 网格行上 ---
+   这样三条硬约束同时消失：不遮挡（兄弟节点不重叠）、不裁切（没有 clamp）、
+   无大空白（没有 pad，也就没有「不可回吐的垫行」）。 */
+/* 单一滚动面：块区与活动终端是同一个流，不能各滚各的——两套滚动条会让
+   卡片滚出可视区却被当「在屏内」量几何（真机 C2 按钮 hit=null/DIV 的根因） */
+.ot-stage {
+  flex: 1; min-height: 0; display: flex; flex-direction: column;
+  position: relative; background: var(--term-bg);
+  overflow-y: auto; overflow-x: hidden;
+}
+/* 冻结块区：历史文本块 + 卡片块。空时不占位 */
+.ot-blocks {
+  flex: 0 0 auto; overflow: visible;
+  background: var(--term-bg);
+}
+.ot-blocks:empty { display: none; }
+.ot-stage .term { flex: 0 0 auto; position: relative; }
+
+/* 文本块 / 过渡段 / 横幅 */
+.ot-blk { position: relative; }
+.ot-blk-body {
+  font-family: var(--mono); font-size: 13px; line-height: 1.5;
+  color: var(--text); white-space: pre-wrap; word-break: break-word;
+  padding: 2px 12px;
+}
+.ot-blk-banner .ot-blk-body { color: var(--muted); }
+/* 过渡段（sudo su - / ssh 跳板）：紫色左边线标注，内容照常显示 */
+.ot-blk-transition { border-left: 2px solid rgba(188, 140, 255, 0.55); margin: 4px 0; }
+.ot-blk-transition .ot-blk-body { color: var(--muted); }
+
+/* 卡片块：高度由内容自撑——这是「不裁切」的结构来源 */
+.ot-blk-card { padding: 0 0 2px; }
+.ot-flow-host {
+  overflow: visible !important;   /* 覆盖 island.css 的 overflow:hidden */
+  height: auto !important;
+  max-height: none !important;
+  margin: 6px 12px 4px;
+}
+.ot-flow-host > * { margin-top: 0; }
+
+/* 块流里卡片高度自撑，不再需要「裁进网格行」。island.css 给 .acard/.ablock
+   的 overflow:hidden 原本是防卡片越过预留行盖住下方文本——块布局下兄弟节点
+   本就不重叠，留着它只会把高危两步确认的弹层、编辑浮层裁到看不见（真机
+   「点执行按钮没反应」的直接成因：弹层在按钮下方，被卡体裁掉）。 */
+.ot-flow-host .acard,
+.ot-flow-host .ablock,
+.ot-flow-host .scard,
+.ot-flow-host .aprobe,
+.ot-flow-host .dline {
+  overflow: visible;
+}
+/* 确认弹层压在卡体之上。**层级必须显式钉死**：.apcode/.cmdstat 是不透明底
+   （#0d1117）且 DOM 顺序在 .aphead 之后，一旦叠到弹层上面就把「高危命令，
+   确认执行？」整块盖住——真机 elementFromPoint 打到 PRE.apcode，用户看到的
+   就是「点执行按钮没反应」。卡头 z 3 > 正文 z 1，弹层再 z 10。 */
+.ot-flow-host .aphead { position: relative; z-index: 3; }
+.ot-flow-host .apcode,
+.ot-flow-host .cmdstat,
+.ot-flow-host .apreasons,
+.ot-flow-host .atext,
+.ot-flow-host .areason { position: relative; z-index: 1; }
+.ot-flow-host .apconfirm { position: absolute; z-index: 10; }
+/* 整条卡头链不许裁切：确认弹层挂在 .apexec 下方，一半落在 .aphead 盒外，
+   被裁掉后命中测试打到 .aphead 自己（Playwright：「.aphead intercepts
+   pointer events」）——真机「点执行按钮没反应」的最终成因。块布局下卡片
+   高度自撑，本来就没有任何裁切的必要。 */
+.ot-flow-host .aphead,
+.ot-flow-host .cmdhead,
+.ot-flow-host .cmdacts,
+.ot-flow-host .apbtns,
+.ot-flow-host .apexec,
+.ot-flow-host .adot,
+.ot-flow-host .alabel,
+.ot-flow-host .apstate {
+  overflow: visible;
+}
+
+/* 块流不受网格预留行限制：完整展示命令，操作区自然换行并撑高卡头。
+   仅覆盖 flow host，保留 decoration 回退路径原有的量高/裁切约定。 */
+.ot-flow-host .cmdcode { height: auto; overflow: visible; }
+.ot-flow-host .cmdhead { flex-wrap: wrap; }
+.ot-flow-host .cmdhead .alabel {
+  max-width: 100%; white-space: normal; overflow-wrap: anywhere;
+}
+.ot-flow-host .cmdhead .apstate { flex: none; white-space: nowrap; }
+.ot-flow-host .cmdacts { height: auto; min-width: 0; max-width: 100%; }
+.ot-flow-host .cmdacts .apbtns { flex-wrap: wrap; min-width: 0; }
+.ot-flow-host .cmdacts button { flex: none; white-space: nowrap; }
+/* 保留原来的小确认框：以执行按钮为锚点，边缘避让由组件实测平移。 */
+.ot-flow-host .cmdhead .apexec { position: relative; flex: none; }
+.ot-flow-host .cmdhead .apconfirm {
+  left: auto; right: 0; top: calc(100% + 5px);
+  width: max-content; flex-wrap: wrap; white-space: normal;
+}
+
+/* 工具卡状态配色：完成绿 / 失败橙——与命令卡口径统一（真机反馈：
+   read_file 这类非 execute 工具卡一直是橙色，和「已完成」的语义对不上） */
+.tcard.done {
+  border-color: var(--ok);
+  border-left-color: var(--p-warn);
+  background: #101a13;
+}
+.tcard.done .aphead { background: rgba(63, 185, 80, 0.13); }
+.tcard.failed { border-color: var(--warn); background: #1c1608; }
+.tcard.failed .aphead { background: rgba(210, 153, 34, 0.14); }