openclacky 1.3.2 → 1.3.3

data/lib/clacky/web/features/workspace/view.js

@@ -0,0 +1,305 @@
+// ── Workspace · view — Files tab (download artifacts) ─────────────────────
+//
+// Renders the working-directory file tree as the "Files" tab in the session
+// aside. The tab is product-positioned as "see what the AI produced and
+// download it": clicking a file downloads it; directories expand lazily;
+// right-click reveals in the OS file manager (desktop only).
+//
+// Registered as a host-owned (built-in) tab via Clacky.ext.ui.mountBuiltin so
+// it shows for every session regardless of agent profile. All I/O goes through
+// WorkspaceStore.
+//
+// Depends on: WorkspaceStore, Clacky.ext, I18n, Modal.
+// ───────────────────────────────────────────────────────────────────────────
+"use strict";
+
+const WorkspaceView = (() => {
+  const t = (key) => (typeof I18n !== "undefined" ? I18n.t(key) : key);
+
+  const ICON_FOLDER = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>';
+  const ICON_FILE   = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>';
+  const ICON_CARET  = '<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>';
+
+  function formatSize(bytes) {
+    if (bytes == null) return "";
+    if (bytes < 1024) return `${bytes} B`;
+    const units = ["KB", "MB", "GB", "TB"];
+    let n = bytes / 1024, i = 0;
+    while (n >= 1024 && i < units.length - 1) { n /= 1024; i++; }
+    return `${n < 10 ? n.toFixed(1) : Math.round(n)} ${units[i]}`;
+  }
+
+  function renderEntries(entries) {
+    const frag = document.createDocumentFragment();
+    if (!entries.length) {
+      const empty = document.createElement("div");
+      empty.className = "wt-empty";
+      empty.textContent = t("workspace.empty");
+      frag.appendChild(empty);
+      return frag;
+    }
+    for (const entry of entries) frag.appendChild(buildNode(entry));
+    return frag;
+  }
+
+  function buildNode(entry) {
+    const node = document.createElement("div");
+    node.className = "wt-node";
+
+    const row = document.createElement("div");
+    row.className = "wt-row";
+    row.title = entry.name;
+
+    const caret = document.createElement("span");
+    caret.className = "wt-caret" + (entry.type === "dir" ? "" : " leaf");
+    if (entry.type === "dir") caret.innerHTML = ICON_CARET;
+
+    const icon = document.createElement("span");
+    icon.className = "wt-icon";
+    icon.innerHTML = entry.type === "dir" ? ICON_FOLDER : ICON_FILE;
+
+    const name = document.createElement("span");
+    name.className = "wt-name";
+    name.textContent = entry.name;
+
+    row.appendChild(caret);
+    row.appendChild(icon);
+    row.appendChild(name);
+
+    if (entry.type === "file") {
+      const size = document.createElement("span");
+      size.className = "wt-size";
+      size.textContent = formatSize(entry.size);
+      row.appendChild(size);
+    }
+
+    node.appendChild(row);
+
+    if (entry.type === "dir") {
+      const children = document.createElement("div");
+      children.className = "wt-children";
+      children.style.display = "none";
+      node.appendChild(children);
+      row.addEventListener("click", () => toggleDir(entry, caret, children));
+    } else {
+      row.addEventListener("click", () => openFile(entry));
+    }
+
+    row.addEventListener("contextmenu", (e) => {
+      e.preventDefault();
+      showContextMenu(e, entry);
+    });
+
+    return node;
+  }
+
+  function showContextMenu(e, entry) {
+    closeContextMenu();
+
+    const iconFolder   = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>';
+    const iconDownload = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12"/><path d="M7.5 11l4.5 4.5 4.5-4.5"/><path d="M5 20h14"/></svg>';
+    const iconCopy     = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
+    const iconRelPath  = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/><path d="M12 19l3-3"/></svg>';
+
+    const downloadItem = entry.type === "file" ? `
+      <div class="session-actions-menu-item" data-action="download">
+        <span class="session-actions-menu-icon">${iconDownload}</span>
+        <span class="session-actions-menu-label">${t("workspace.download")}</span>
+      </div>` : "";
+
+    const menu = document.createElement("div");
+    menu.className = "wt-context-menu session-context-menu";
+    menu.innerHTML = `
+      <div class="session-actions-menu-item" data-action="reveal">
+        <span class="session-actions-menu-icon">${iconFolder}</span>
+        <span class="session-actions-menu-label">${t("workspace.revealInFinder")}</span>
+      </div>
+      <div class="session-actions-menu-item" data-action="copypath">
+        <span class="session-actions-menu-icon">${iconCopy}</span>
+        <span class="session-actions-menu-label">${t("workspace.copyPath")}</span>
+      </div>
+      <div class="session-actions-menu-item" data-action="copyrelpath">
+        <span class="session-actions-menu-icon">${iconRelPath}</span>
+        <span class="session-actions-menu-label">${t("workspace.copyRelPath")}</span>
+      </div>
+      ${downloadItem}
+    `;
+
+    document.body.appendChild(menu);
+    menu.addEventListener("contextmenu", (ev) => ev.preventDefault());
+    menu.style.position = "fixed";
+    menu.style.top = e.clientY + "px";
+    menu.style.left = e.clientX + "px";
+    requestAnimationFrame(() => {
+      const r = menu.getBoundingClientRect();
+      if (r.right > window.innerWidth)   menu.style.left = (window.innerWidth - r.width - 8) + "px";
+      if (r.bottom > window.innerHeight) menu.style.top  = (window.innerHeight - r.height - 8) + "px";
+    });
+
+    menu.addEventListener("click", async (ev) => {
+      const item = ev.target.closest(".session-actions-menu-item");
+      if (!item) return;
+      closeContextMenu();
+      if (item.dataset.action === "reveal")    await revealFile(entry);
+      if (item.dataset.action === "download")  await downloadFile(entry);
+      if (item.dataset.action === "copypath")    copyPath(entry);
+      if (item.dataset.action === "copyrelpath") copyRelPath(entry);
+    });
+
+    setTimeout(() => {
+      document.addEventListener("click", closeContextMenu, { once: true });
+    }, 0);
+  }
+
+  function closeContextMenu() {
+    const existing = document.querySelector(".wt-context-menu");
+    if (existing) existing.remove();
+  }
+
+  function copyPath(entry) {
+    const absPath = Workspace.state.workingDir.replace(/\/+$/, "") + "/" + entry.path.replace(/^\/+/, "");
+    navigator.clipboard.writeText(absPath).then(() => {
+      Modal.toast(absPath, "info");
+    });
+  }
+
+  function copyRelPath(entry) {
+    navigator.clipboard.writeText(entry.path).then(() => {
+      Modal.toast(entry.path, "info");
+    });
+  }
+
+  async function revealFile(entry) {
+    try {
+      await Workspace.revealFile(entry);
+    } catch (err) {
+      console.error("reveal failed:", err);
+      if (typeof Modal !== "undefined") Modal.toast(t("workspace.revealFailed"), "error");
+    }
+  }
+
+  async function toggleDir(entry, caret, children) {
+    const isOpen = caret.classList.contains("open");
+    if (isOpen) {
+      caret.classList.remove("open");
+      children.style.display = "none";
+      return;
+    }
+    caret.classList.add("open");
+    children.style.display = "";
+    if (children.dataset.loaded === "1") return;
+
+    children.innerHTML = `<div class="wt-loading">${t("workspace.loading")}</div>`;
+    try {
+      const entries = await Workspace.fetchEntries(entry.path);
+      children.innerHTML = "";
+      children.appendChild(renderEntries(entries));
+      children.dataset.loaded = "1";
+    } catch (err) {
+      console.error("workspace load failed:", err);
+      children.innerHTML = `<div class="wt-error">${t("workspace.error")}</div>`;
+    }
+  }
+
+  async function openFile(entry) {
+    const kind = CodeEditor.fileKind(entry.name);
+    if (kind === "binary") {
+      Modal.toast(t("workspace.previewUnsupported"), "info");
+      return;
+    }
+    if (kind === "image") {
+      try {
+        const blob = await Workspace.fetchFileBlob(entry);
+        const url = URL.createObjectURL(blob);
+        CodeEditor.open({ filename: entry.name, title: entry.name, kind: "image", imageUrl: url, onClose: () => URL.revokeObjectURL(url) });
+      } catch (err) {
+        console.error("preview failed:", err);
+        Modal.toast(t("workspace.previewFailed"), "error");
+      }
+      return;
+    }
+    try {
+      const text = await Workspace.fetchFileText(entry);
+      CodeEditor.open({ filename: entry.name, title: entry.name, content: text, readOnly: true });
+    } catch (err) {
+      console.error("preview failed:", err);
+      Modal.toast(t("workspace.previewFailed"), "error");
+    }
+  }
+
+  async function downloadFile(entry) {
+    try {
+      const blob = await Workspace.fetchFileBlob(entry);
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = entry.name;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      URL.revokeObjectURL(url);
+    } catch (err) {
+      console.error("download failed:", err);
+      if (typeof Modal !== "undefined") Modal.toast(t("workspace.downloadFailed"), "error");
+    }
+  }
+
+  async function loadRoot(tree) {
+    if (!tree || !Workspace.state.hasSession()) return;
+    tree.innerHTML = `<div class="wt-loading">${t("workspace.loading")}</div>`;
+    try {
+      const entries = await Workspace.fetchEntries("");
+      tree.innerHTML = "";
+      tree.appendChild(renderEntries(entries));
+    } catch (err) {
+      console.error("workspace load failed:", err);
+      tree.innerHTML = `<div class="wt-error">${t("workspace.error")}</div>`;
+    }
+  }
+
+  // Build the Files tab body for the current session.
+  function renderFilesTab(_ctx) {
+    const wrap = document.createElement("div");
+    wrap.className = "wt-panel";
+
+    const bar = document.createElement("div");
+    bar.className = "wt-bar";
+    const hint = document.createElement("span");
+    hint.className = "wt-bar-hint";
+    hint.textContent = t("workspace.contextMenuHint");
+    const refresh = document.createElement("button");
+    refresh.type = "button";
+    refresh.className = "wt-bar-btn";
+    refresh.textContent = t("workspace.refresh");
+    bar.appendChild(hint);
+    bar.appendChild(refresh);
+
+    const tree = document.createElement("div");
+    tree.className = "wt-tree";
+    tree.setAttribute("role", "tree");
+
+    refresh.addEventListener("click", () => loadRoot(tree));
+
+    wrap.appendChild(bar);
+    wrap.appendChild(tree);
+    loadRoot(tree);
+    return wrap;
+  }
+
+  return { renderFilesTab };
+})();
+
+// Files is a built-in tab: visible for every session, after the agent-scoped
+// panels (git/time-machine use orders 10/20).
+if (window.Clacky && Clacky.ext) {
+  Clacky.ext.ui.mountBuiltin("session.aside", (ctx) => WorkspaceView.renderFilesTab(ctx), {
+    order: 40,
+    tab: { id: "files", label: (typeof I18n !== "undefined" ? I18n.t("workspace.title") : "Files") },
+  });
+}
+
+// Keep the store's session context in sync (sessions.js still calls
+// Workspace.onSession on every session switch). Rendering is driven by the
+// slot re-render, so this only updates state.
+Workspace.onSession = (session) => { Workspace.setSession(session); };
+window.Workspace = Workspace;

data/lib/clacky/web/i18n.js

@@ -69,6 +69,10 @@ const I18n = (() => {
       "chat.resetSessionConfirm": "Reset will start a brand-new session. The current conversation history stays in your sidebar but will no longer be active. Continue?",
       "chat.copy":           "Copy",
       "chat.copied":         "Copied",
+      "chat.continue":       "Continue",
+      "chat.edit":           "Edit",
+      "chat.cancel":         "Cancel",
+      "chat.send":           "Send",
       "chat.empty.title":    "Start the conversation",
       "chat.empty.subtitle": "Ask anything, or use a skill to get going.",
       "chat.empty.tip1":     "Type / to browse skills",
@@ -106,7 +110,7 @@ const I18n = (() => {
       "sib.dir.loadError":       "Failed to load",
       "sib.dir.confirm":         "Confirm",
       "sib.dir.cancel":          "Cancel",
-      "sib.dir.showHidden":      "Show hidden files",      "workspace.title":         "Workspace",
+      "sib.dir.showHidden":      "Show hidden files",      "workspace.title":         "Files",
       "workspace.expand":        "Open workspace",
       "workspace.collapse":      "Collapse workspace",
       "workspace.refresh":       "Refresh",
@@ -114,6 +118,14 @@ const I18n = (() => {
       "workspace.loading":       "Loading…",
       "workspace.error":         "Failed to load files",
       "workspace.downloadFailed": "Download failed",
+      "workspace.previewFailed": "Failed to preview file",
+      "workspace.previewUnsupported": "Cannot preview this file type",
+      "workspace.download": "Download",
+      "workspace.contextMenuHint": "Right-click for more options",
+      "workspace.copyPath": "Copy Path",
+      "workspace.copyRelPath": "Copy Relative Path",
+      "aside.collapse":          "Collapse panel",
+      "aside.expand":            "Open panel",
       "workspace.revealInFinder": "Reveal in Finder",
       "workspace.revealFailed":   "Failed to reveal file",
       "sib.model.tooltip":       "Click to switch model",
@@ -161,6 +173,9 @@ const I18n = (() => {
       "modal.no":  "No",
       "modal.ok": "OK",
       "modal.cancel": "Cancel",
+      "modal.close": "Close",
+      "modal.save": "Save",
+      "modal.saving": "Saving…",
 
       // ── Auth ──
       "auth.accessKeyRequired": "Access key required:",
@@ -342,8 +357,11 @@ const I18n = (() => {
       // Per-tab curate actions
       "profile.soul.curateHint": "Not quite right? Let the assistant curate this through a short conversation.",
       "profile.soul.curateBtn":  "Have the assistant curate this",
+      "profile.soul.editBtn":    "Edit directly",
       "profile.user.curateHint": "Changed jobs? Picked up new interests? Let the assistant update your profile.",
       "profile.user.curateBtn":  "Have the assistant update this",
+      "profile.user.editBtn":    "Edit directly",
+
       "profile.curateFail":      "Could not start the curation session",
       "profile.curateName.soul": "Curate soul",
       "profile.curateName.user": "Curate profile",
@@ -535,7 +553,7 @@ const I18n = (() => {
       "settings.models.badge.default": "Default",
       "settings.models.badge.lite":    "Lite",
       "settings.media.title":         "Secondary Models",
-      "settings.media.desc":          "Optional. Image / video / audio / vision models.",
+      "settings.media.desc":          "Image / video / audio / vision models (optional)",
       "settings.media.loading":       "Loading…",
       "settings.media.error":         "Failed to load: {{msg}}",
       "settings.media.kind.image":    "Image",
@@ -568,6 +586,13 @@ const I18n = (() => {
       "settings.media.apiKey.required":    "API key required",
       "settings.media.model.required":     "Model name required",
       "settings.media.baseUrl.required":   "Base URL required",
+      "settings.media.output_dir.desc":    "Where generated images, videos and audio are saved (optional)",
+      "settings.media.output_dir.browse":  "Browse…",
+      "settings.media.output_dir.picker":  "Select Media Output Directory",
+      "settings.media.output_dir.clear":   "Clear",
+      "settings.media.output_dir.saved":   "Saved",
+      "settings.media.output_dir.cleared": "Cleared",
+      "settings.media.output_dir.invalid": "Invalid directory",
       "settings.models.field.quicksetup": "Quick Setup",
       "settings.models.field.model":      "Model",
       "settings.models.field.baseurl":    "Base URL",
@@ -642,7 +667,7 @@ const I18n = (() => {
       "settings.backup.includeSessions":   "Include session history (larger archive)",
       "settings.backup.autoLabel":         "Automatic backup",
       "settings.backup.autoHint":          "Daily at 03:00, keeps the latest 7",
-      "settings.backup.runNow":            "Download backup",
+      "settings.backup.runNow":            "Download backup (full snapshot)",
       "settings.backup.running":           "Preparing backup…",
       "settings.backup.downloaded":        "Backup downloaded.",
       "settings.backup.lastOk":            "Last backup: {{time}}",
@@ -956,6 +981,10 @@ const I18n = (() => {
       "chat.retry":          "重试",
       "chat.copy":           "复制",
       "chat.copied":         "已复制",
+      "chat.continue":       "继续",
+      "chat.edit":           "编辑",
+      "chat.cancel":         "取消",
+      "chat.send":           "发送",
       "chat.empty.title":    "开始新会话",
       "chat.empty.subtitle": "直接提问，或用一个 Skill 启动。",
       "chat.empty.tip1":     "输入 / 浏览 Skill",
@@ -993,7 +1022,7 @@ const I18n = (() => {
       "sib.dir.loadError":       "加载失败",
       "sib.dir.confirm":         "确认",
       "sib.dir.cancel":          "取消",
-      "sib.dir.showHidden":      "显示隐藏文件",      "workspace.title":         "工作区",
+      "sib.dir.showHidden":      "显示隐藏文件",      "workspace.title":         "文件",
       "workspace.expand":        "打开工作区",
       "workspace.collapse":      "收起工作区",
       "workspace.refresh":       "刷新",
@@ -1001,6 +1030,14 @@ const I18n = (() => {
       "workspace.loading":       "加载中…",
       "workspace.error":         "加载文件失败",
       "workspace.downloadFailed": "下载失败",
+      "workspace.previewFailed": "文件预览失败",
+      "workspace.previewUnsupported": "无法预览此类型文件",
+      "workspace.download": "下载",
+      "workspace.contextMenuHint": "右键显示更多菜单",
+      "workspace.copyPath": "复制路径",
+      "workspace.copyRelPath": "复制相对路径",
+      "aside.collapse":          "收起面板",
+      "aside.expand":            "打开面板",
       "workspace.revealInFinder": "打开所在文件夹",
       "workspace.revealFailed":   "无法打开文件位置",
       "sib.model.tooltip":       "点击切换模型",
@@ -1046,6 +1083,9 @@ const I18n = (() => {
       "modal.no":  "取消",
       "modal.ok": "确定",
       "modal.cancel": "取消",
+      "modal.close": "关闭",
+      "modal.save": "保存",
+      "modal.saving": "保存中…",
 
       // ── Auth ──
       "auth.accessKeyRequired": "请输入访问密钥：",
@@ -1229,8 +1269,11 @@ const I18n = (() => {
       // Per-tab curate actions
       "profile.soul.curateHint": "感觉不太对？让助理通过一段简短对话帮你调整。",
       "profile.soul.curateBtn":  "让助理整理性格",
+      "profile.soul.editBtn":    "直接编辑",
       "profile.user.curateHint": "换工作了？有新兴趣了？让助理帮你更新主人档案。",
       "profile.user.curateBtn":  "让助理更新档案",
+      "profile.user.editBtn":    "直接编辑",
+
       "profile.curateFail":      "无法启动整理会话",
       "profile.curateName.soul": "整理性格",
       "profile.curateName.user": "整理主人档案",
@@ -1421,7 +1464,7 @@ const I18n = (() => {
       "settings.models.badge.default": "默认",
       "settings.models.badge.lite":    "轻量",
       "settings.media.title":         "配置副模型",
-      "settings.media.desc":          "可选。图片生成 / 视频生成 / 音频生成 / 视觉理解。",
+      "settings.media.desc":          "图片生成 / 视频生成 / 音频生成 / 视觉理解（可选）",
       "settings.media.loading":       "加载中…",
       "settings.media.error":         "加载失败：{{msg}}",
       "settings.media.kind.image":    "图片生成",
@@ -1454,6 +1497,13 @@ const I18n = (() => {
       "settings.media.apiKey.required":    "请填写 API Key",
       "settings.media.model.required":     "请填写模型名称",
       "settings.media.baseUrl.required":   "请填写 Base URL",
+      "settings.media.output_dir.desc":    "生成的图片、视频、音频文件保存位置（可选）",
+      "settings.media.output_dir.browse":  "选择目录…",
+      "settings.media.output_dir.picker":  "选择媒体输出目录",
+      "settings.media.output_dir.clear":   "清除",
+      "settings.media.output_dir.saved":   "已保存",
+      "settings.media.output_dir.cleared": "已清除",
+      "settings.media.output_dir.invalid": "目录无效",
       "settings.models.field.quicksetup": "快速配置",
       "settings.models.field.model":      "Model",
       "settings.models.field.baseurl":    "Base URL",
@@ -1528,7 +1578,7 @@ const I18n = (() => {
       "settings.backup.includeSessions":   "包含会话历史（归档更大）",
       "settings.backup.autoLabel":         "自动备份",
       "settings.backup.autoHint":          "每天 03:00 自动备份，保留最近 7 份",
-      "settings.backup.runNow":            "下载备份",
+      "settings.backup.runNow":            "下载备份（完整快照）",
       "settings.backup.running":           "正在准备备份…",
       "settings.backup.downloaded":        "备份已下载。",
       "settings.backup.lastOk":            "上次备份：{{time}}",