openclacky 1.5.12 → 1.5.13

data/lib/clacky/default_extensions/time_machine/panels/time_machine/view.js

@@ -1,11 +1,11 @@
 // ── Official panel: time_machine ──────────────────────────────────────────
 //
 // Vertical timeline of the session's tasks (mounted in session.aside tab slot).
-// Clicking a past row opens a right-side drawer with the diff details — the
-// 288px aside is too narrow to host both a file list and a unified diff, so
-// the drawer escapes to ~720px / 90vw and overlays everything.
-//
-// Backed by:
+// Clicking a past row expands an inline card (top files + actions). "View
+// details" swaps the whole panel to a two-pane detail view - file list on the
+// left, unified diff on the right - mirroring the Git tab layout inside the
+// aside (the aside widens to fit the diff, same as the Files/Git tabs).
+//// Backed by:
 //   GET  /api/sessions/:id/time_machine                  — task list
 //   GET  /api/sessions/:id/time_machine/:tid/diff        — files this task touched
 //   GET  /api/sessions/:id/time_machine/:tid/diff?path=… — unified diff for one file
@@ -43,6 +43,11 @@
     return (v && v !== k) ? v : fallback;
   };
 
+  const DIFF_ASIDE_WIDTH = 860;
+  const MAX_DIFF_LINES = 3000;
+  const ICON_BACK = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/></svg>';
+  const ICON_CLOSE = '<svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>';
+
   if (!document.getElementById("tm-panel-style")) {
     const style = document.createElement("style");
     style.id = "tm-panel-style";
@@ -109,7 +114,7 @@
       .tm-mini-btn { padding: 4px 10px; font-size: 11px; line-height: 16px; cursor: pointer; border: 1px solid var(--color-border-primary); border-radius: var(--radius-sm); background: var(--color-bg-primary); color: var(--color-text-secondary); }
       .tm-mini-btn:hover { background: var(--color-bg-hover); }
       .tm-mini-btn.primary { background: var(--color-accent-primary); color: var(--color-text-inverse); border-color: var(--color-accent-primary); }
-      .tm-mini-btn.primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
+      .tm-mini-btn.primary:hover { background: var(--color-button-primary-hover); border-color: var(--color-button-primary-hover); }
       .tm-mini-btn:disabled { opacity: 0.5; cursor: default; }
 
       .tm-mini-confirm {
@@ -126,44 +131,33 @@
 
       .tm-foot { flex: none; padding: 8px 14px; font-size: 11px; color: var(--color-text-tertiary); border-top: 1px solid var(--color-border-secondary); }
 
-      /* ── Drawer ───────────────────────────────────────────────────────── */
-      .tm-drawer-mask {
-        position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4);
-        z-index: 1000; opacity: 0; transition: opacity 0.2s;
-      }
-      .tm-drawer-mask.open { opacity: 1; }
-      .tm-drawer {
-        position: fixed; top: 0; right: 0; bottom: 0;
-        width: min(720px, 90vw);
-        background: var(--color-bg-primary);
-        border-left: 1px solid var(--color-border-primary);
-        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
-        z-index: 1001;
-        display: flex; flex-direction: column;
-        transform: translateX(100%);
-        transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
-      }
-      .tm-drawer.open { transform: translateX(0); }
-
-      .tm-drawer-head { flex: none; padding: 14px 18px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--color-border-secondary); }
-      .tm-drawer-title-wrap { flex: 1; min-width: 0; }
-      .tm-drawer-title { font-size: 14px; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
-      .tm-drawer-time { font-size: 11px; color: var(--color-text-tertiary); margin-top: 2px; }
-      .tm-drawer-close { flex: none; padding: 4px 10px; font-size: 12px; cursor: pointer; border: 1px solid var(--color-border-primary); border-radius: var(--radius-sm); background: var(--color-bg-secondary); color: var(--color-text-secondary); }
-      .tm-drawer-close:hover { background: var(--color-bg-hover); }
-      .tm-restore-btn { flex: none; padding: 5px 14px; font-size: 12px; cursor: pointer; border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--color-accent-primary); color: var(--color-text-inverse); }
-      .tm-restore-btn:hover { background: var(--color-accent-hover); }
-      .tm-restore-btn:disabled { opacity: 0.5; cursor: default; }
-
-      .tm-confirm-row { flex: none; display: flex; gap: 8px; padding: 10px 18px; align-items: center; background: var(--color-bg-secondary); border-bottom: 1px solid var(--color-border-secondary); }
-      .tm-confirm-msg { flex: 1; font-size: 12px; color: var(--color-text-secondary); }
-      .tm-confirm-btn { padding: 4px 12px; cursor: pointer; border: 1px solid var(--color-border-primary); border-radius: var(--radius-sm); background: var(--color-bg-secondary); font-size: 12px; }
-      .tm-confirm-btn.go { background: var(--color-accent-primary); color: var(--color-text-inverse); border-color: transparent; }
-      .tm-confirm-btn:disabled { opacity: 0.5; cursor: default; }
-
-      .tm-drawer-body { flex: 1; min-height: 0; display: flex; }
-      .tm-files { flex: 0 0 220px; overflow: auto; border-right: 1px solid var(--color-border-secondary); padding: 6px 0; }
-      .tm-file { padding: 7px 14px; font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 8px; }
+      /* ── Detail view (in-aside, mirrors the Git tab layout) ───────────── */
+      .tm-detail { display: none; flex: 1; min-height: 0; flex-direction: column; }
+      .tm-panel.in-detail .tm-list { display: none; }
+      .tm-panel.in-detail .tm-detail { display: flex; }
+
+      .tm-detail-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 6px; border-bottom: 1px solid var(--color-border-secondary); }
+      .tm-detail-back { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-secondary); cursor: pointer; }
+      .tm-detail-back:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
+      .tm-detail-title-wrap { flex: 1; min-width: 0; }
+      .tm-detail-title { font-size: 13px; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
+      .tm-detail-time { font-size: 11px; color: var(--color-text-tertiary); margin-top: 2px; }
+      .tm-detail-restore { flex: none; padding: 5px 12px; font-size: 12px; cursor: pointer; border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--color-accent-primary); color: var(--color-text-inverse); white-space: nowrap; }
+      .tm-detail-restore:hover { background: var(--color-button-primary-hover); }
+      .tm-detail-restore:disabled { opacity: 0.5; cursor: default; }
+      .tm-detail-restore.armed { background: var(--color-error, #b03a3a); }
+
+      .tm-detail-body { flex: 1; min-height: 0; display: flex; }
+      .tm-detail-files { flex: 1; min-width: 0; overflow: auto; padding: 6px 6px; }
+      .tm-panel.has-detail-diff .tm-detail-files { flex: 0 0 232px; border-right: 1px solid var(--color-border-primary); }
+      .tm-detail-diff { display: none; flex: 1; min-width: 0; min-height: 0; flex-direction: column; }
+      .tm-panel.has-detail-diff .tm-detail-diff { display: flex; }
+
+      .tm-detail-diff-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--color-border-secondary); }
+      .tm-detail-diff-path { flex: 1; min-width: 0; font-family: ui-monospace, monospace; font-size: 11.5px; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .tm-detail-diff-close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-tertiary); cursor: pointer; }
+      .tm-detail-diff-close:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
+      .tm-file { padding: 6px 8px; font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 8px; border-radius: var(--radius-sm); }
       .tm-file:hover { background: var(--color-bg-hover); }
       .tm-file.active { background: var(--color-accent-soft); }
       .tm-file-tag { flex: none; font-size: 9px; padding: 1px 6px; border-radius: var(--radius-sm); }
@@ -172,10 +166,7 @@
       .tm-file-tag.deleted  { background: var(--color-error-soft, #b03a3a33);     color: var(--color-error); }
       .tm-file-path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-secondary); }
 
-      .tm-diff-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }
-      .tm-diff-path { flex: none; padding: 8px 16px; font-size: 11px; color: var(--color-text-tertiary); border-bottom: 1px solid var(--color-border-secondary); font-family: ui-monospace, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; }
-      .tm-diff-path:empty { display: none; }
-      .tm-diff { flex: 1; min-width: 0; overflow: auto; padding: 10px 0; font-family: ui-monospace, monospace; font-size: 12px; line-height: 1.55; }
+      .tm-diff { flex: 1; min-height: 0; overflow: auto; padding: 10px 0; font-family: ui-monospace, monospace; font-size: 12px; line-height: 1.55; }
       .tm-diff-stub, .tm-diff-loading { color: var(--color-text-tertiary); padding: 20px; text-align: center; }
       .tm-diff-line { white-space: pre; padding: 0 16px; min-width: max-content; }
       .tm-diff-line.add { background: var(--color-success-soft, #1f6e2c33); color: var(--color-success, #4eb965); }
@@ -217,6 +208,21 @@
     return dt.toLocaleString();
   }
 
+  // The diff pane needs horizontal room; widen the aside once when a diff is
+  // first opened (same trick as the Files/Git tabs, still user-resizable).
+  function ensureAsideWidth() {
+    const aside = document.getElementById("session-aside");
+    if (!aside) return;
+    let w = 0;
+    try {
+      w = parseFloat(getComputedStyle(aside).getPropertyValue("--session-aside-width")) || 0;
+    } catch (_e) { w = 0; }
+    if (w < DIFF_ASIDE_WIDTH) {
+      aside.style.setProperty("--session-aside-width", DIFF_ASIDE_WIDTH + "px");
+      try { localStorage.setItem("clacky.aside.width", String(DIFF_ASIDE_WIDTH)); } catch (_e) { /* non-fatal */ }
+    }
+  }
+
   function renderTimeline(state) {
     const { listEl, tasks } = state;
     listEl.replaceChildren();
@@ -277,7 +283,7 @@
     const actions = el("div", { class: "tm-mini-actions" }, detailsBtn, restoreBtn);
     const card = el("div", { class: `tm-mini ${isUndone ? "undone" : ""}` }, filesWrap, actions);
 
-    detailsBtn.addEventListener("click", (e) => { e.stopPropagation(); openDrawer(state, task); });
+    detailsBtn.addEventListener("click", (e) => { e.stopPropagation(); openDetail(state, task); });
     restoreBtn.addEventListener("click", (e) => {
       e.stopPropagation();
       openConfirm(state, task, actions);
@@ -396,6 +402,7 @@
       if (res.ok) {
         state.footEl.textContent = res.message || t("tm.restored", "已恢复");
         state.expanded = null;
+        closeDetail(state);
         await loadHistory(state);
       } else {
         state.footEl.textContent = res.error || t("tm.restoreFailed", "恢复失败");
@@ -411,72 +418,123 @@
       wrap.appendChild(el("div", { class: "tm-diff-stub", text: t("tm.diff.same", "这一步没有改动这个文件的内容。") }));
       return wrap;
     }
-    patch.split("\n").forEach((line) => {
+    const lines = patch.split("\n");
+    const shown = Math.min(lines.length, MAX_DIFF_LINES);
+    for (let i = 0; i < shown; i++) {
+      const line = lines[i];
       let cls = "tm-diff-line";
       if (line.startsWith("+++") || line.startsWith("---")) cls += " meta";
       else if (line.startsWith("@@"))                       cls += " hunk";
       else if (line.startsWith("+"))                        cls += " add";
       else if (line.startsWith("-"))                        cls += " del";
       wrap.appendChild(el("div", { class: cls, text: line || " " }));
-    });
+    }
+    if (lines.length > shown) {
+      wrap.appendChild(el("div", { class: "tm-diff-stub",
+        text: t("tm.diff.truncated", "差异过大，仅显示前 %d 行").replace("%d", String(shown)) }));
+    }
     return wrap;
   }
 
-  async function loadFileDiff(state, rel) {
-    state.diffEl.replaceChildren(el("div", { class: "tm-diff-loading", text: t("tm.diff.loading", "正在读取差异…") }));
+  async function loadFileDiff(state, taskId, rel) {
+    state.detailDiffEl.replaceChildren(el("div", { class: "tm-diff-loading", text: t("tm.diff.loading", "正在读取差异…") }));
     try {
-      const res = await api(state.sessionId, `/${state.selected}/diff?path=${encodeURIComponent(rel)}`);
+      const res = await api(state.sessionId, `/${taskId}/diff?path=${encodeURIComponent(rel)}`);
+      if (state.detailSelected !== rel) return;
       if (!res.ok) {
-        state.diffEl.replaceChildren(el("div", { class: "tm-diff-stub", text: res.error || t("tm.diff.fail", "读取差异失败") }));
+        state.detailDiffEl.replaceChildren(el("div", { class: "tm-diff-stub", text: res.error || t("tm.diff.fail", "读取差异失败") }));
         return;
       }
       if (res.binary) {
-        state.diffEl.replaceChildren(el("div", { class: "tm-diff-stub", text: t("tm.diff.binary", "二进制文件，跳过逐行对比。") }));
+        state.detailDiffEl.replaceChildren(el("div", { class: "tm-diff-stub", text: t("tm.diff.binary", "二进制文件，跳过逐行对比。") }));
         return;
       }
-      state.diffEl.replaceChildren(renderDiffText(res.patch));
+      state.detailDiffEl.replaceChildren(renderDiffText(res.patch));
     } catch (_e) {
-      state.diffEl.replaceChildren(el("div", { class: "tm-diff-stub", text: t("tm.diff.fail", "读取差异失败") }));
+      state.detailDiffEl.replaceChildren(el("div", { class: "tm-diff-stub", text: t("tm.diff.fail", "读取差异失败") }));
     }
   }
 
-  function openDrawer(state, task) {
-    state.selected = task.task_id;
-
-    state.drawerTitleEl.textContent = task.summary;
-    state.drawerTimeEl.textContent = task.started_at ? relTime(task.started_at) : "";
-    state.confirmRow.style.display = "none";
-    state.restoreBtn.disabled = false;
-    state.filesEl.replaceChildren(el("div", { class: "tm-diff-loading", text: t("tm.diff.loading", "正在读取改动…") }));
-    state.diffEl.replaceChildren();
-    state.diffPathEl.textContent = "";
-
-    state.maskEl.style.display = "block";
-    state.drawerEl.style.display = "flex";
-    requestAnimationFrame(() => {
-      state.maskEl.classList.add("open");
-      state.drawerEl.classList.add("open");
-    });
+  // ── Detail view (in-aside) ────────────────────────────────────────────────
+  // Mirrors the Git tab: file list on the left, diff on the right. The restore
+  // button uses the same two-step armed confirm as the Git tab's revert.
+
+  let detailRestoreTimer = null;
 
-    loadDrawerFiles(state, task.task_id);
+  function disarmDetailRestore(state) {
+    if (detailRestoreTimer) { clearTimeout(detailRestoreTimer); detailRestoreTimer = null; }
+    const btn = state.detailRestoreEl;
+    if (!btn) return;
+    btn.classList.remove("armed");
+    btn.textContent = t("tm.restore.go", "回到这里");
   }
 
-  async function loadDrawerFiles(state, taskId) {
+  function armDetailRestore(state) {
+    disarmDetailRestore(state);
+    state.detailRestoreEl.classList.add("armed");
+    state.detailRestoreEl.textContent = t("tm.restore.confirm", "确认回到这里");
+    detailRestoreTimer = setTimeout(() => disarmDetailRestore(state), 4000);
+  }
+
+  function onDetailRestoreClick(state) {
+    if (!state.detailTask) return;
+    if (state.detailRestoreEl.classList.contains("armed")) {
+      disarmDetailRestore(state);
+      performRestoreInline(state, state.detailTask.task_id);
+    } else {
+      armDetailRestore(state);
+    }
+  }
+
+  function openDetail(state, task) {
+    state.view = "detail";
+    state.detailTask = task;
+    state.detailSelected = null;
+    disarmDetailRestore(state);
+    state.panelEl.classList.add("in-detail");
+    state.panelEl.classList.remove("has-detail-diff");
+    state.detailTitleEl.textContent = task.summary;
+    state.detailTimeEl.textContent = task.started_at ? relTime(task.started_at) : "";
+    state.detailRestoreEl.disabled = false;
+    state.detailFilesEl.replaceChildren(el("div", { class: "tm-diff-loading", text: t("tm.diff.loading", "正在读取改动…") }));
+    state.detailDiffPathEl.textContent = "";
+    state.detailDiffEl.replaceChildren();
+    loadDetailFiles(state, task);
+  }
+
+  function closeDetail(state) {
+    state.view = "timeline";
+    state.detailTask = null;
+    state.detailSelected = null;
+    disarmDetailRestore(state);
+    state.panelEl.classList.remove("in-detail", "has-detail-diff");
+  }
+
+  function closeDetailDiff(state) {
+    state.detailSelected = null;
+    state.panelEl.classList.remove("has-detail-diff");
+    state.detailDiffPathEl.textContent = "";
+    state.detailDiffEl.replaceChildren();
+    state.detailFilesEl.querySelectorAll(".tm-file.active").forEach((n) => n.classList.remove("active"));
+  }
+
+  async function loadDetailFiles(state, task) {
+    const taskId = task.task_id;
     let res;
     try {
       res = await api(state.sessionId, `/${taskId}/diff`);
     } catch (_e) {
-      state.filesEl.replaceChildren(el("div", { class: "tm-diff-stub", text: t("tm.diff.fail", "读取改动失败") }));
+      state.detailFilesEl.replaceChildren(el("div", { class: "tm-diff-stub", text: t("tm.diff.fail", "读取改动失败") }));
       return;
     }
-    if (state.selected !== taskId) return;
+    if (state.view !== "detail" || !state.detailTask || state.detailTask.task_id !== taskId) return;
     if (!res.ok) {
-      state.filesEl.replaceChildren(el("div", { class: "tm-diff-stub", text: res.error || t("tm.diff.fail", "读取改动失败") }));
+      state.detailFilesEl.replaceChildren(el("div", { class: "tm-diff-stub", text: res.error || t("tm.diff.fail", "读取改动失败") }));
       return;
     }
     const files = res.files || [];
     if (files.length === 0) {
-      state.filesEl.replaceChildren(el("div", { class: "tm-diff-stub", text: t("tm.diff.noFiles", "没有文件改动。") }));
+      state.detailFilesEl.replaceChildren(el("div", { class: "tm-diff-stub", text: t("tm.diff.noFiles", "没有文件改动。") }));
       return;
     }
     const tagText = { added: t("tm.tag.added", "新增"), modified: t("tm.tag.modified", "修改"), deleted: t("tm.tag.deleted", "删除") };
@@ -486,52 +544,24 @@
         el("span", { class: `tm-file-tag ${f.status}`, text: tagText[f.status] || f.status }),
         el("span", { class: "tm-file-path", text: basename }),
       );
-      node.addEventListener("click", () => {
-        state.filesEl.querySelectorAll(".tm-file.active").forEach((n) => n.classList.remove("active"));
-        node.classList.add("active");
-        state.diffPathEl.textContent = f.path;
-        if (f.binary) {
-          state.diffEl.replaceChildren(el("div", { class: "tm-diff-stub", text: t("tm.diff.binary", "二进制文件，跳过逐行对比。") }));
-        } else {
-          loadFileDiff(state, f.path);
-        }
-      });
+      node.addEventListener("click", () => selectDetailFile(state, task, f, node));
       return node;
     });
-    state.filesEl.replaceChildren(...fileNodes);
-    fileNodes[0].click();
-  }
-
-  function closeDrawer(state) {
-    state.maskEl.classList.remove("open");
-    state.drawerEl.classList.remove("open");
-    setTimeout(() => {
-      state.maskEl.style.display = "none";
-      state.drawerEl.style.display = "none";
-    }, 250);
-    state.selected = null;
+    state.detailFilesEl.replaceChildren(...fileNodes);
+    selectDetailFile(state, task, files[0], fileNodes[0]);
   }
 
-  async function performRestore(state) {
-    state.restoreBtn.disabled = true;
-    state.footEl.textContent = t("tm.restoring", "正在恢复…");
-    try {
-      const res = await api(state.sessionId, "/switch", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ task_id: state.selected }),
-      });
-      if (res.ok) {
-        state.footEl.textContent = res.message || t("tm.restored", "已恢复");
-        closeDrawer(state);
-        await loadHistory(state);
-      } else {
-        state.footEl.textContent = res.error || t("tm.restoreFailed", "恢复失败");
-        state.restoreBtn.disabled = false;
-      }
-    } catch (_e) {
-      state.footEl.textContent = t("tm.restoreFailed", "恢复失败");
-      state.restoreBtn.disabled = false;
+  function selectDetailFile(state, task, f, node) {
+    state.detailSelected = f.path;
+    state.detailFilesEl.querySelectorAll(".tm-file.active").forEach((n) => n.classList.remove("active"));
+    node.classList.add("active");
+    state.panelEl.classList.add("has-detail-diff");
+    ensureAsideWidth();
+    state.detailDiffPathEl.textContent = f.path;
+    if (f.binary) {
+      state.detailDiffEl.replaceChildren(el("div", { class: "tm-diff-stub", text: t("tm.diff.binary", "二进制文件，跳过逐行对比。") }));
+    } else {
+      loadFileDiff(state, task.task_id, f.path);
     }
   }
 
@@ -552,99 +582,50 @@
     renderTimeline(state);
   }
 
-  // The drawer is global — only one can be open at a time across mounts, and
-  // it lives on document.body so it can escape the narrow aside column.
-  function buildDrawer() {
-    if (document.getElementById("tm-drawer-root")) {
-      return {
-        mask: document.querySelector(".tm-drawer-mask"),
-        drawer: document.getElementById("tm-drawer-root"),
-        title: document.querySelector(".tm-drawer-title"),
-        time: document.querySelector(".tm-drawer-time"),
-        restore: document.querySelector(".tm-restore-btn"),
-        close: document.querySelector(".tm-drawer-close"),
-        confirmRow: document.querySelector(".tm-confirm-row"),
-        confirmYes: document.querySelector(".tm-confirm-btn.go"),
-        confirmNo: document.querySelector(".tm-confirm-btn:not(.go)"),
-        files: document.querySelector(".tm-files"),
-        diff: document.querySelector(".tm-diff"),
-        diffPath: document.querySelector(".tm-diff-path"),
-      };
-    }
-
-    const mask = el("div", { class: "tm-drawer-mask" });
-    const titleEl = el("div", { class: "tm-drawer-title" });
-    const timeEl = el("div", { class: "tm-drawer-time" });
-    const restoreBtn = el("button", { class: "tm-restore-btn", type: "button", text: t("tm.restore.go", "回到这里") });
-    const closeBtn = el("button", { class: "tm-drawer-close", type: "button", text: t("tm.detail.close", "关闭") });
-    const head = el("div", { class: "tm-drawer-head" },
-      el("div", { class: "tm-drawer-title-wrap" }, titleEl, timeEl),
-      restoreBtn, closeBtn,
-    );
-
-    const confirmYes = el("button", { class: "tm-confirm-btn go", type: "button", text: t("tm.restore.confirm", "确认恢复") });
-    const confirmNo  = el("button", { class: "tm-confirm-btn", type: "button", text: t("tm.restore.cancel", "取消") });
-    const confirmRow = el("div", { class: "tm-confirm-row" },
-      el("span", { class: "tm-confirm-msg", text: t("tm.restore.msg", "回到这一步会把文件恢复到当时的状态。") }),
-      confirmYes, confirmNo,
-    );
-    confirmRow.style.display = "none";
-
-    const filesEl = el("div", { class: "tm-files" });
-    const diffPathEl = el("div", { class: "tm-diff-path" });
-    const diffEl  = el("div", { class: "tm-diff" });
-    const diffWrap = el("div", { class: "tm-diff-wrap" }, diffPathEl, diffEl);
-    const body = el("div", { class: "tm-drawer-body" }, filesEl, diffWrap);
-
-    const drawer = el("div", { id: "tm-drawer-root", class: "tm-drawer" }, head, confirmRow, body);
-    drawer.style.display = "none";
-    mask.style.display = "none";
-
-    document.body.appendChild(mask);
-    document.body.appendChild(drawer);
-
-    return { mask, drawer, title: titleEl, time: timeEl, restore: restoreBtn, close: closeBtn,
-             confirmRow, confirmYes, confirmNo, files: filesEl, diff: diffEl, diffPath: diffPathEl };
-  }
-
   Clacky.ext.ui.mount("session.aside", {
     create(ctx) {
       const list = el("div", { class: "tm-list" });
       const foot = el("div", { class: "tm-foot", text: t("tm.foot", "每完成一步会自动存档。点击想回到的版本即可恢复。") });
-      const root = el("div", { class: "tm-panel", "data-panel": "tm" }, list, foot);
 
-      const d = buildDrawer();
+      const backBtn = el("button", { class: "tm-detail-back", type: "button", title: t("tm.detail.back", "返回") });
+      backBtn.innerHTML = ICON_BACK;
+      const detailTitleEl = el("div", { class: "tm-detail-title" });
+      const detailTimeEl = el("div", { class: "tm-detail-time" });
+      const detailRestoreEl = el("button", { class: "tm-detail-restore", type: "button", text: t("tm.restore.go", "回到这里") });
+      const detailHead = el("div", { class: "tm-detail-head" },
+        backBtn,
+        el("div", { class: "tm-detail-title-wrap" }, detailTitleEl, detailTimeEl),
+        detailRestoreEl,
+      );
+
+      const detailFilesEl = el("div", { class: "tm-detail-files" });
+      const diffCloseBtn = el("button", { class: "tm-detail-diff-close", type: "button", title: t("tm.diff.close", "关闭") });
+      diffCloseBtn.innerHTML = ICON_CLOSE;
+      const detailDiffPathEl = el("span", { class: "tm-detail-diff-path" });
+      const detailDiffEl = el("div", { class: "tm-diff" });
+      const detailDiff = el("div", { class: "tm-detail-diff" },
+        el("div", { class: "tm-detail-diff-head" }, detailDiffPathEl, diffCloseBtn),
+        detailDiffEl,
+      );
+      const detailBody = el("div", { class: "tm-detail-body" }, detailFilesEl, detailDiff);
+      const detail = el("div", { class: "tm-detail" }, detailHead, detailBody);
+
+      const root = el("div", { class: "tm-panel", "data-panel": "tm" }, list, detail, foot);
 
       const state = {
         sessionId: ctx.sessionId,
         tasks: [],
-        selected: null,
         expanded: null,
+        view: "timeline",
+        detailTask: null,
+        detailSelected: null,
         panelEl: root, listEl: list, footEl: foot,
-        maskEl: d.mask, drawerEl: d.drawer,
-        drawerTitleEl: d.title, drawerTimeEl: d.time,
-        restoreBtn: d.restore, filesEl: d.files, diffEl: d.diff, diffPathEl: d.diffPath, confirmRow: d.confirmRow,
-      };
-
-      const onClose = () => closeDrawer(state);
-      const onRestoreClick = () => {
-        d.confirmRow.style.display = "flex";
-        d.restore.disabled = true;
-      };
-      const onCancelClick = () => {
-        d.confirmRow.style.display = "none";
-        d.restore.disabled = false;
+        detailTitleEl, detailTimeEl, detailRestoreEl, detailFilesEl, detailDiffPathEl, detailDiffEl,
       };
-      const onGoClick = () => performRestore(state);
-      const onMaskClick = () => closeDrawer(state);
-      const onKey = (e) => { if (e.key === "Escape" && d.drawer.classList.contains("open")) closeDrawer(state); };
 
-      d.close.onclick = onClose;
-      d.restore.onclick = onRestoreClick;
-      d.confirmNo.onclick = onCancelClick;
-      d.confirmYes.onclick = onGoClick;
-      d.mask.onclick = onMaskClick;
-      document.addEventListener("keydown", onKey);
+      backBtn.addEventListener("click", () => closeDetail(state));
+      detailRestoreEl.addEventListener("click", () => onDetailRestoreClick(state));
+      diffCloseBtn.addEventListener("click", () => closeDetailDiff(state));
 
       _activeState = state;
       _hookWs();
@@ -655,9 +636,7 @@
         state,
         root,
         dispose() {
-          document.removeEventListener("keydown", onKey);
-          try { d.mask.remove(); } catch (_) {}
-          try { d.drawer.remove(); } catch (_) {}
+          if (detailRestoreTimer) { clearTimeout(detailRestoreTimer); detailRestoreTimer = null; }
           if (_activeState === state) _activeState = null;
         },
       };
@@ -666,8 +645,7 @@
       container.appendChild(runtime.root);
       _activeState = runtime.state;
     },
-  }, {
-    order: 20,
+  }, {    order: 40,
     tab: { id: "tm", label: () => t("tm.tab") },
   });
 })();

data/lib/clacky/extension/packager.rb

@@ -300,10 +300,12 @@ module Clacky
         ) do |io| # rubocop:disable Security/Open
           File.open(dest, "wb") { |out| out.write(io.read) }
         end
-      rescue OpenURI::HTTPError, SocketError => e
-        raise Error, "failed to download #{url}: #{e.message}"
       rescue Net::OpenTimeout, Net::ReadTimeout => e
         raise Error, "download timed out: #{e.message}"
+      # Catch-all so any transport-layer failure triggers download()'s
+      # secondary-host fallback instead of surfacing a raw error.
+      rescue StandardError => e
+        raise Error, "failed to download #{url}: #{e.message}"
       end
 
       private def extract_zip(zip_path, dest_root)

data/lib/clacky/extension/verifier.rb

@@ -16,7 +16,7 @@ module Clacky
   module ExtensionVerifier
     Issue = Struct.new(:ext, :unit, :level, :code, :message, :file, :hint, keyword_init: true)
 
-    KNOWN_TOP_KEYS    = %w[id name name_zh display_name display_name_zh title description description_zh emoji version origin author homepage license public license_required keywords contributes].freeze
+    KNOWN_TOP_KEYS    = %w[id name name_zh display_name display_name_zh title description description_zh emoji version origin author homepage license public license_required keywords config contributes].freeze
     KNOWN_CONTRIBUTES = %w[panels api skills agents channels patches hooks tools].freeze
 
     PANEL_KEYS   = %w[id title title_zh description description_zh view order attach entry_points].freeze
@@ -29,6 +29,7 @@ module Clacky
     TOOL_KEYS    = %w[id file].freeze
 
     ATTACH_TOKEN_RE = /\A(\*|[\w\-]+)\z/.freeze
+    VERSION_RE      = /\A[0-9]+\.[0-9]+\.[0-9]+\z/.freeze
 
     class << self
       # Run all checks against a fully-loaded ExtensionLoader::Result. Returns
@@ -43,6 +44,10 @@ module Clacky
         issues
       end
 
+      def valid_version?(version)
+        version.to_s.match?(VERSION_RE)
+      end
+
       private def loader_errors_as_issues(result)
         Array(result.errors).map do |err|
           Issue.new(
@@ -78,6 +83,14 @@ module Clacky
             )
           end
 
+          if manifest.key?("version") && !valid_version?(manifest["version"])
+            issues << Issue.new(
+              ext: ext_id, unit: nil, level: :error, code: "schema.invalid_version",
+              message: "version must contain exactly three numeric segments (for example, 1.0.0)",
+              file: File.join(dir, "ext.yml"), hint: "Use the format x.x.x with digits only."
+            )
+          end
+
           contributes = manifest["contributes"]
           next unless contributes.is_a?(Hash)
 

data/lib/clacky/message_format/open_ai.rb

@@ -215,7 +215,11 @@ module Clacky
       #
       # Zero side-effects: when reasoning_effort is nil/empty the body is
       # unchanged, preserving the provider default for all models.
-      private_class_method def self.apply_reasoning_params(body, model, reasoning_effort)
+      #
+      # Single source of truth for reasoning param mapping — shared with
+      # MessageFormat::OpenAIResponses (the Responses API accepts the same
+      # top-level fields).
+      def self.apply_reasoning_params(body, model, reasoning_effort)
         effort_str = reasoning_effort.to_s
 
         if model.to_s.match?(/\Aglm-5[-.]3/i)