llm-api-gateway-cli 1.0.0

package/public/task.css

@@ -0,0 +1,739 @@
+/* 模式五 · 任务模式专属样式（叠加在 styles.css 之上） */
+
+/* ---------- 侧边栏里的任务项 ---------- */
+
+/* 复用聊天页的 .session-item 结构，只把第二行换成「目录名 · 时间」 */
+.session-wd {
+  font-size: 11px;
+  color: var(--text-faint);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.session-item.active .session-wd { color: var(--text-dim); }
+
+/* ---------- 侧边栏按工作目录分组 ---------- */
+
+/* 一个工作目录就是一「堆」：标题行 + 该目录下的若干任务 */
+.task-group { margin-bottom: 6px; }
+
+.task-group-head {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 1px 4px;
+  border-radius: 8px;
+}
+
+.task-group-head:hover { background: var(--bg-soft); }
+
+.task-group-toggle {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  font: inherit;
+  font-size: 12px;
+  text-align: left;
+  padding: 4px 2px;
+  cursor: pointer;
+}
+
+.task-group-caret {
+  flex: none;
+  width: 9px;
+  font-size: 9px;
+  color: var(--text-faint);
+}
+
+.task-group-icon { flex: none; font-size: 12px; }
+
+.task-group-name {
+  flex: 1;
+  min-width: 0;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.task-group-count {
+  flex: none;
+  font-size: 10px;
+  line-height: 1.6;
+  color: var(--text-faint);
+  background: var(--bg-raised);
+  border-radius: 999px;
+  padding: 0 6px;
+}
+
+/* 「＋」平时不抢眼，悬停整行时才露出来 */
+.task-group-add { opacity: 0; }
+.task-group-head:hover .task-group-add,
+.task-group-add:focus-visible { opacity: 1; }
+
+/* 触屏没有 hover，藏起来就等于没有这个按钮 */
+@media (hover: none) {
+  .task-group-add { opacity: 1; }
+}
+
+/* 组内任务缩进一级，视觉上从属于目录 */
+.task-group-body { padding-left: 11px; }
+.task-group-body[hidden] { display: none; }
+
+/* 草稿（还没落盘的新任务）：只作提示，不可点 */
+.session-item.draft { cursor: default; opacity: .65; }
+.session-item.draft .session-title { font-style: italic; }
+
+/* ---------- 任务树：一条任务下的派生任务 ---------- */
+
+/* 子任务缩进一级，左侧再画一条细线，表明它是从上面那条派生出来的 */
+.session-item.child { position: relative; margin-left: 13px; }
+.session-item.child.depth-2 { margin-left: 26px; }
+.session-item.child.depth-3 { margin-left: 39px; }
+
+.session-item.child::before {
+  content: "";
+  position: absolute;
+  left: -7px;
+  top: 4px;
+  bottom: 4px;
+  width: 2px;
+  border-radius: 1px;
+  background: var(--border);
+  pointer-events: none;
+}
+
+/* 有子任务的那条：行首多一个展开/折叠箭头 */
+.task-caret {
+  flex: none;
+  width: 13px;
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--text-faint);
+  font-size: 9px;
+  line-height: 1;
+  text-align: center;
+  cursor: pointer;
+}
+
+.task-caret:hover { color: var(--text); }
+
+/* ---------- 存储位置展示 ---------- */
+
+/* 侧边栏最底下那行：告诉用户任务数据落在磁盘哪，hover 看完整路径 */
+.store-line {
+  padding: 6px 12px 10px;
+  font-size: 11px;
+  color: var(--text-faint);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border-top: 1px solid var(--border);
+}
+
+/* 设置面板里的完整路径：很长，允许换行并可选（左对齐，不靠右） */
+.info-row-wide { align-items: flex-start; }
+.path-code {
+  word-break: break-all;
+  white-space: normal;
+  user-select: all;
+  font-size: 11px;
+  line-height: 1.5;
+  text-align: left;
+}
+
+.settings-note {
+  margin: 10px 0 0;
+  font-size: 11px;
+  line-height: 1.6;
+  color: var(--text-faint);
+}
+
+.settings-note code {
+  font-size: 11px;
+  padding: 1px 4px;
+  border-radius: 3px;
+  background: var(--bg-soft);
+}
+
+/* ---------- 顶部工作目录 ---------- */
+
+.workdir-chip {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  max-width: 460px;
+  min-width: 0;
+  background: var(--bg-raised);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 5px 10px;
+  color: var(--text-dim);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+  transition: border-color .12s;
+}
+
+.workdir-chip:hover { border-color: var(--border-strong); color: var(--text); }
+.workdir-chip .wd-label { flex: none; color: var(--text-faint); font-size: 11px; }
+.workdir-chip code {
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--accent);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  direction: rtl;      /* 路径过长时优先显示末尾（更能看出是哪个目录） */
+  text-align: left;
+}
+
+.dot.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-ring); }
+
+/* ---------- 工具调用步骤 ---------- */
+
+.steps { margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; }
+
+.step {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg-code);
+  overflow: hidden;
+}
+
+.step > summary {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 11px;
+  font-size: 12.5px;
+  color: var(--text-dim);
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+}
+
+.step > summary::-webkit-details-marker { display: none; }
+
+.step-icon { flex: none; width: 14px; text-align: center; font-weight: 700; }
+.step.ok .step-icon { color: var(--ok); }
+.step.fail .step-icon { color: var(--danger); }
+.step.running .step-icon { color: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
+
+@keyframes pulse { 50% { opacity: .35; } }
+
+.step-label { flex: none; color: var(--text); }
+.step-brief {
+  flex: 1;
+  min-width: 0;
+  color: var(--text-faint);
+  font-size: 11.5px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 写入是「自动放行」还是「被计划模式挡下」，标在步骤行尾 */
+.step-note {
+  flex: none;
+  padding: 1px 6px;
+  border-radius: 999px;
+  font-size: 10.5px;
+  color: var(--warn);
+  border: 1px solid currentColor;
+  opacity: .85;
+}
+.step-note.bad { color: var(--danger); }
+
+.step-body {
+  margin: 0;
+  padding: 9px 11px;
+  border-top: 1px solid var(--border);
+  max-height: 340px;
+  overflow: auto;
+  font-family: var(--mono);
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--text-dim);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* ---------- 写入批准卡片 ---------- */
+
+.approval {
+  border: 1px solid var(--warn-border);
+  background: var(--warn-soft);
+  border-radius: 10px;
+  padding: 12px 13px;
+}
+
+.approval-head {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--warn);
+  margin-bottom: 8px;
+}
+
+.approval-head::before { content: "⚠ "; }
+
+.approval-meta {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  flex-wrap: wrap;
+  font-size: 12px;
+  color: var(--text-faint);
+  margin-bottom: 10px;
+}
+
+.approval-meta code {
+  font-family: var(--mono);
+  font-size: 12.5px;
+  color: var(--text);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  padding: 2px 7px;
+  word-break: break-all;
+}
+
+.approval-preview { margin-bottom: 11px; }
+
+.approval-preview > summary {
+  font-size: 12px;
+  color: var(--text-dim);
+  cursor: pointer;
+  list-style: none;
+  padding: 3px 0;
+}
+
+.approval-preview > summary::-webkit-details-marker { display: none; }
+.approval-preview > summary::before { content: "▸ "; color: var(--accent); }
+.approval-preview[open] > summary::before { content: "▾ "; }
+
+.approval-preview pre {
+  margin: 6px 0 0;
+  padding: 10px 11px;
+  background: var(--bg-deep);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  max-height: 300px;
+  overflow: auto;
+  font-family: var(--mono);
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--text-dim);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.approval-actions { display: flex; gap: 8px; justify-content: flex-end; }
+
+/* ---------- 目录选择器 ---------- */
+
+.modal {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background: var(--overlay);
+  display: grid;
+  place-items: center;
+  padding: 24px;
+}
+
+.modal[hidden] { display: none; }
+
+.modal-card {
+  width: min(880px, 100%);
+  height: min(640px, 100%);
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-soft);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  box-shadow: var(--shadow);
+  overflow: hidden;
+}
+
+.modal-head {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  padding: 15px 18px;
+  border-bottom: 1px solid var(--border);
+}
+
+.modal-head h2 { margin: 0; font-size: 15px; }
+.modal-sub { font-size: 12px; color: var(--text-faint); }
+
+.modal-path {
+  display: flex;
+  gap: 8px;
+  padding: 11px 18px;
+  border-bottom: 1px solid var(--border);
+}
+
+.modal-path input {
+  flex: 1;
+  min-width: 0;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: 12.5px;
+  padding: 6px 10px;
+  outline: none;
+}
+
+.modal-path input:focus { border-color: var(--border-focus); }
+
+.modal-body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+}
+
+.dir-roots {
+  width: 180px;
+  flex: none;
+  border-right: 1px solid var(--border);
+  padding: 10px;
+  overflow-y: auto;
+}
+
+.dir-root {
+  display: block;
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: none;
+  border-radius: 7px;
+  color: var(--text-dim);
+  font: inherit;
+  font-size: 12.5px;
+  padding: 7px 9px;
+  cursor: pointer;
+}
+
+.dir-root:hover { background: var(--bg-raised); color: var(--text); }
+
+.dir-list { flex: 1; min-width: 0; overflow-y: auto; padding: 8px; }
+
+.dir-row {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 6px 10px;
+  border-radius: 7px;
+  font-size: 13px;
+  cursor: default;
+  outline: none;
+}
+
+.dir-row.dir { cursor: pointer; color: var(--text); }
+.dir-row.dir:hover { background: var(--bg-raised); }
+.dir-row.dir:focus { box-shadow: inset 0 0 0 1px var(--border); }
+.dir-row.selected { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--border-strong); }
+.dir-row.file { color: var(--text-faint); font-size: 12.5px; }
+
+.dir-icon { flex: none; font-size: 13px; }
+.dir-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dir-size { flex: none; font-family: var(--mono); font-size: 11px; color: var(--text-faint); }
+
+.dir-empty { padding: 16px 12px; font-size: 12.5px; color: var(--text-faint); }
+
+.modal-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 18px;
+  border-top: 1px solid var(--border);
+}
+
+.modal-note { font-size: 12px; color: var(--text-faint); min-width: 0; }
+.modal-actions { display: flex; gap: 8px; flex: none; }
+
+/* ---------- 审批模式切换（手动 / 自动 / 计划） ---------- */
+
+.mode-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 10px 0;
+  flex-wrap: wrap;
+}
+
+.mode-label { font-size: 11.5px; color: var(--text-faint); flex: none; }
+
+.mode-switch {
+  display: inline-flex;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow: hidden;
+  flex: none;
+}
+
+.mode-btn {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: var(--text-dim);
+  font: inherit;
+  font-size: 12px;
+  padding: 4px 12px;
+  cursor: pointer;
+  border-right: 1px solid var(--border);
+}
+
+.mode-btn:last-child { border-right: 0; }
+.mode-btn:hover { background: var(--bg-soft); color: var(--text); }
+.mode-btn.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
+
+/* 自动模式是「不再问你」的状态，用告警色标出来，免得开完忘了 */
+.mode-switch[data-mode="auto"] .mode-btn.active { background: var(--warn-soft-strong); color: var(--warn); }
+.mode-switch[data-mode="plan"] .mode-btn.active { background: var(--plan-soft); color: var(--plan); }
+
+.mode-note { font-size: 11px; color: var(--text-faint); min-width: 0; }
+.mode-note.warn { color: var(--warn); }
+
+/* ---------- 计划模式的「按计划执行」 ---------- */
+
+.plan-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: 10px;
+  padding: 9px 11px;
+  border: 1px dashed var(--border-dashed);
+  border-radius: 8px;
+  background: var(--bg-code);
+}
+
+.plan-hint { font-size: 11.5px; color: var(--text-faint); min-width: 0; }
+
+@media (max-width: 720px) {
+  .dir-roots { width: 120px; }
+  .workdir-chip { max-width: 200px; }
+  .modal-foot { flex-direction: column; align-items: stretch; }
+  .modal-actions { justify-content: flex-end; }
+  .mode-note { display: none; }
+}
+
+/* ---------- 任务列表的状态点 ---------- */
+
+/* 只表达一件事：在进行中，还是已完成。不加文字，避免列表变吵 */
+.task-dot {
+  flex: none;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--border);
+}
+
+.task-dot.done { background: var(--ok); }
+
+.task-dot.running {
+  background: var(--warn);
+  animation: dot-breathe 1.3s ease-in-out infinite;
+}
+
+/* 正在跑的那条，左侧再亮一条竖线（inset 阴影，不造成 2px 抖动） */
+.session-item.running {
+  box-shadow: inset 2px 0 0 var(--warn);
+}
+
+@keyframes dot-breathe {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: .45; transform: scale(.72); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .task-dot.running { animation: none; }
+}
+
+/* ---------- 撞到轮次上限后的「继续执行」 ---------- */
+
+.resume-bar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px dashed var(--border-dashed);
+}
+
+/* ---------- 提示横幅与「正在工作」标记 ---------- */
+
+/* 「已达上限而停止」「上游没返回正文」这类提示。以前会被静默丢掉，
+   现在单独成条显示在正文之前，用户不会再有「查完就没下文」的感觉。 */
+.msg-notices {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin: 0 0 10px;
+}
+
+.msg-notice {
+  padding: 8px 11px;
+  border: 1px solid var(--warn-border);
+  border-radius: var(--radius-sm);
+  background: var(--warn-soft);
+  color: var(--warn);
+  font-size: 12.5px;
+  line-height: 1.6;
+}
+
+/* 模型正在生成时的呼吸动画：告诉用户「还在动，别关页面」 */
+.bubble.working .content::after {
+  content: "";
+  display: inline-block;
+  width: 7px;
+  height: 14px;
+  margin-left: 3px;
+  vertical-align: text-bottom;
+  background: var(--accent);
+  border-radius: 1px;
+  animation: caret 1s steps(2, start) infinite;
+}
+
+.bubble.working .content:empty::before {
+  content: "模型正在生成…";
+  color: var(--text-faint);
+  font-size: 12.5px;
+}
+
+@keyframes caret {
+  0%, 50% { opacity: 1; }
+  50.01%, 100% { opacity: 0; }
+}
+
+/* 状态栏圆点在忙的时候也呼吸，和大段静默区分开 */
+.dot.warn { animation: pulse 1.6s ease-in-out infinite; }
+
+@media (prefers-reduced-motion: reduce) {
+  .bubble.working .content::after, .dot.warn { animation: none; }
+}
+
+/* ---------- 细节打磨 ---------- */
+
+
+/* 模式切换、目录行、工作目录按钮都加上过渡，切换时不跳变 */
+.mode-btn,
+.dir-row,
+.workdir-chip {
+  transition: background-color var(--t), border-color var(--t), color var(--t), box-shadow var(--t);
+}
+
+/* 模式按钮按下时轻微内缩，像是真的按下去了 */
+.mode-btn:active { transform: translateY(1px); }
+.mode-switch { overflow: hidden; }
+
+/* 目录行：圆角 + 悬停更明显，长目录名不撑破布局 */
+.dir-row { border-radius: 6px; }
+.dir-row.dir:hover { box-shadow: inset 0 0 0 1px var(--border); }
+
+/* 计划执行条在浅色下也要有边界感 */
+.plan-bar { transition: background-color var(--t), border-color var(--t); }
+
+/* 待批准卡片顶部的强调边，深浅两套下都成立 */
+.approval { border-radius: var(--radius-sm); transition: background-color var(--t), border-color var(--t); }
+
+/* 步骤行悬停时略微提亮，方便在大段输出里定位（步骤是 details>summary） */
+.step > summary { transition: background-color var(--t); }
+.step > summary:hover { background: var(--bg-soft); }
+
+@media (prefers-reduced-motion: reduce) {
+  * { transition: none !important; animation: none !important; }
+}
+
+/* ---------- 斜杠指令（E 组） ----------
+ * 面板贴着输入框上沿浮起：拿 composer-box 当定位上下文（.composer 是布局容器，
+ * 在它上面加 position 会影响排版，所以选更内层的 .composer-box）。
+ */
+.composer-box { position: relative; }
+
+.slash-menu {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: calc(100% + 6px);
+  max-height: 280px;
+  overflow-y: auto;
+  padding: 6px 0;
+  background: var(--bg-raised);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  box-shadow: var(--shadow-strong);
+  z-index: 40;
+}
+
+.slash-menu-group {
+  padding: 6px 12px 2px;
+  font-size: 11px;
+  color: var(--text-dim);
+}
+
+.slash-menu-item {
+  display: flex;
+  gap: 10px;
+  align-items: baseline;
+  padding: 5px 12px;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.slash-menu-item.hl { background: var(--accent-soft); }
+
+.slash-name {
+  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  color: var(--accent);
+  white-space: nowrap;
+}
+
+.slash-desc {
+  color: var(--text-dim);
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.slash-menu-foot {
+  margin-top: 4px;
+  padding: 4px 12px 0;
+  border-top: 1px solid var(--border);
+  font-size: 11px;
+  color: var(--text-dim);
+}
+
+/* 指令输出：不进对白、不进模型上下文，样式上也与普通气泡区分开 */
+.slash-msg { justify-content: center; }
+
+.slash-out {
+  max-width: 92%;
+  padding: 8px 12px;
+  border: 1px dashed var(--border);
+  border-radius: 8px;
+  background: var(--bg-soft);
+  color: var(--text-dim);
+  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 12px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.slash-msg.error .slash-out { border-color: var(--danger); color: var(--danger); }
+.slash-msg.warn .slash-out { border-color: var(--warn, var(--danger)); }
+