@orangeworks/orangetree 0.4.0

package/dist/public/connection.js

@@ -0,0 +1,102 @@
+import { api, toast } from "./api.js";
+import { t } from "./i18n.js";
+import { pickFolder } from "./dirpicker.js";
+const esc = (s) => String(s ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+async function openConnectionSettings() {
+  let cfg;
+  try {
+    cfg = await api("GET", "/setup");
+  } catch {
+    return;
+  }
+  let workRoot = cfg.workRoot;
+  const o = document.createElement("div");
+  o.className = "ui-overlay";
+  const box = document.createElement("div");
+  box.className = "ui-modal";
+  box.style.width = "min(540px, 94vw)";
+  o.append(box);
+  document.body.append(o);
+  const close = () => {
+    o.remove();
+    document.removeEventListener("keydown", onKey);
+  };
+  const onKey = (e) => {
+    if (e.key === "Escape") close();
+  };
+  document.addEventListener("keydown", onKey);
+  o.onclick = (e) => {
+    if (e.target === o) close();
+  };
+  const workRootText = () => workRoot ?? t("setup.workRoot.default");
+  box.innerHTML = `<div class="ui-head"><b>${esc(t("setup.title"))}</b><button class="ui-x" type="button" aria-label="${esc(t("common.close"))}">\u2715</button></div>
+    <div class="ui-body">
+      <div class="ui-field">
+        <label class="ui-lbl">${esc(t("setup.workRoot"))}</label>
+        <div class="cs-row"><span class="cs-path">${esc(workRootText())}</span><button type="button" class="cs-pick">${esc(t("setup.workRoot.change"))}</button></div>
+        <div class="ui-hint">${esc(t("setup.workRoot.hint"))}</div>
+      </div>
+      <div class="ui-field">
+        <label class="ui-check"><input type="checkbox" id="cs-remote"${cfg.remoteEnabled ? " checked" : ""}> ${esc(t("setup.remoteEnabled"))}</label>
+        <div class="ui-hint">${esc(t("setup.remoteEnabled.hint"))}</div>
+      </div>
+      <div class="ui-field">
+        <label class="ui-check"><input type="checkbox" id="cs-openbrowser"${cfg.openBrowser ? " checked" : ""}> ${esc(t("setup.openBrowser"))}</label>
+      </div>
+      <details class="cs-adv">
+        <summary>${esc(t("setup.advanced"))}</summary>
+        <div class="ui-field">
+          <label class="ui-lbl" for="cs-cloud">${esc(t("setup.cloudApiBase"))}</label>
+          <input type="text" id="cs-cloud" value="${esc(cfg.cloudApiBase ?? "")}" placeholder="https://api.orangetree.dev">
+        </div>
+        <div class="ui-field">
+          <label class="ui-lbl" for="cs-port">${esc(t("setup.port"))}</label>
+          <input type="number" id="cs-port" value="${esc(cfg.port ?? "")}" placeholder="4100" min="1" max="65535">
+        </div>
+        <div class="ui-field">
+          <label class="ui-lbl" for="cs-auth">${esc(t("setup.remoteAuth"))}</label>
+          <select id="cs-auth"><option value="cloud"${cfg.remoteAuth === "cloud" ? " selected" : ""}>cloud (magic-link)</option><option value="token"${cfg.remoteAuth === "token" ? " selected" : ""}>token</option></select>
+        </div>
+        <div class="ui-field">
+          <label class="ui-lbl" for="cs-bind">${esc(t("setup.bindHost"))}</label>
+          <input type="text" id="cs-bind" value="${esc(cfg.bindHost ?? "")}" placeholder="127.0.0.1">
+        </div>
+        <div class="ui-hint">${esc(t("setup.restartHint"))}</div>
+      </details>
+    </div>
+    <div class="ui-foot"><button type="button" class="ui-cancel">${esc(t("common.cancel"))}</button>
+      <button type="button" class="ui-ok">${esc(t("common.save"))}</button></div>`;
+  const pathEl = box.querySelector(".cs-path");
+  box.querySelector(".cs-pick").onclick = async () => {
+    const picked = await pickFolder(api);
+    if (picked) {
+      workRoot = picked;
+      pathEl.textContent = workRootText();
+    }
+  };
+  const save = async () => {
+    const portStr = box.querySelector("#cs-port").value.trim();
+    const patch = {
+      workRoot,
+      remoteEnabled: box.querySelector("#cs-remote").checked,
+      openBrowser: box.querySelector("#cs-openbrowser").checked,
+      cloudApiBase: box.querySelector("#cs-cloud").value.trim() || null,
+      port: portStr ? Number(portStr) : null,
+      remoteAuth: box.querySelector("#cs-auth").value,
+      bindHost: box.querySelector("#cs-bind").value.trim() || null
+    };
+    try {
+      await api("PATCH", "/setup", patch);
+    } catch {
+      return;
+    }
+    toast(t("setup.saved"), "success");
+    close();
+  };
+  box.querySelector(".ui-x").onclick = close;
+  box.querySelector(".ui-cancel").onclick = close;
+  box.querySelector(".ui-ok").onclick = () => void save();
+}
+export {
+  openConnectionSettings
+};

package/dist/public/dirpicker.js

@@ -0,0 +1,93 @@
+import { esc } from "./md.js";
+import { t, applyDataI18n } from "./i18n.js";
+function pickFolder(api) {
+  return new Promise((resolve) => {
+    const overlay = document.createElement("div");
+    overlay.className = "dp-overlay";
+    overlay.innerHTML = `
+      <div class="dp-box">
+        <div class="dp-head"><span data-i18n="dp.title">\uC791\uC5C5 \uD3F4\uB354 \uC120\uD0DD</span><button type="button" class="dp-x" data-i18n-title="common.cancel" title="\uCDE8\uC18C">\u2715</button></div>
+        <div class="dp-path"></div>
+        <div class="dp-drives"></div>
+        <div class="dp-list"></div>
+        <div class="dp-foot">
+          <button type="button" class="dp-cancel" data-i18n="common.cancel">\uCDE8\uC18C</button>
+          <button type="button" class="dp-ok" data-i18n="dp.choose" disabled>\u{1F4C1} \uC774 \uD3F4\uB354 \uC120\uD0DD</button>
+        </div>
+      </div>`;
+    document.body.append(overlay);
+    applyDataI18n(overlay);
+    const $ = (s) => overlay.querySelector(s);
+    let current = null;
+    const close = (val) => {
+      overlay.remove();
+      document.removeEventListener("keydown", onKey);
+      resolve(val);
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") close(null);
+    };
+    document.addEventListener("keydown", onKey);
+    overlay.onclick = (e) => {
+      if (e.target === overlay) close(null);
+    };
+    $(".dp-x").onclick = () => close(null);
+    $(".dp-cancel").onclick = () => close(null);
+    $(".dp-ok").onclick = () => {
+      if (current) close(current);
+    };
+    const load = async (path) => {
+      let data;
+      try {
+        data = await api("GET", `/dirs${path ? `?path=${encodeURIComponent(path)}` : ""}`);
+      } catch {
+        if (current === null) {
+          const err = document.createElement("div");
+          err.className = "dp-empty";
+          err.textContent = t("dp.loadFail");
+          $(".dp-list").replaceChildren(err);
+        }
+        return;
+      }
+      current = data.path;
+      $(".dp-path").textContent = data.path;
+      $(".dp-ok").disabled = false;
+      $(".dp-drives").replaceChildren(
+        ...(data.drives ?? []).map((d) => {
+          const b = document.createElement("button");
+          b.type = "button";
+          b.className = "dp-drive";
+          b.textContent = d;
+          b.onclick = () => void load(d);
+          return b;
+        })
+      );
+      const rows = [];
+      if (data.parent) {
+        const up = document.createElement("div");
+        up.className = "dp-item dp-up";
+        up.innerHTML = `\u2B06 <span>${esc(t("dp.parentFolder"))}</span>`;
+        up.onclick = () => void load(data.parent);
+        rows.push(up);
+      }
+      for (const d of data.dirs) {
+        const row = document.createElement("div");
+        row.className = "dp-item";
+        row.innerHTML = `\u{1F4C1} <span>${esc(d.name)}</span>`;
+        row.onclick = () => void load(d.path);
+        rows.push(row);
+      }
+      if (!data.dirs.length) {
+        const empty = document.createElement("div");
+        empty.className = "dp-empty";
+        empty.textContent = data.parent ? t("dp.emptySelectable") : t("dp.empty");
+        rows.push(empty);
+      }
+      $(".dp-list").replaceChildren(...rows);
+    };
+    void load(null);
+  });
+}
+export {
+  pickFolder
+};

package/dist/public/explorer.js

@@ -0,0 +1,299 @@
+import { esc } from "./md.js";
+import { confirmModal } from "./ui.js";
+import { t } from "./i18n.js";
+import { isDoc } from "./insight.js";
+const VIEWABLE = /\.(md|txt|json|mjs|js|ts|jsx|tsx|css|html|py|sh|sql|ya?ml|png|jpe?g|gif|webp|svg|ico|bmp|mp4|webm|mov|ogg|mp3|wav|m4a)$/i;
+class Explorer {
+  api;
+  onOpen;
+  onLink;
+  hasSelection;
+  onSwitchWs;
+  onRemoveWs;
+  nodes;
+  onGoto;
+  query = "";
+  // live search filter (SCR-INSIGHT-006); empty = normal tree view
+  openState;
+  collapsed;
+  lastFolders = [];
+  locks = {};
+  // "folderId:rel" -> holder (turn-lifetime soft lock)
+  $tree;
+  $search;
+  $wsSelect;
+  $wsList;
+  constructor(pane, { api, onOpen, onLink, hasSelection, onSwitchWs, onAddWs, onRemoveWs, onSettings, nodes, onGoto }) {
+    this.api = api;
+    this.onOpen = onOpen;
+    this.onLink = onLink;
+    this.hasSelection = hasSelection;
+    this.onSwitchWs = onSwitchWs;
+    this.onRemoveWs = onRemoveWs;
+    this.nodes = nodes;
+    this.onGoto = onGoto;
+    pane.innerHTML = `
+      <div class="ws-bar">
+        <select id="ws-select" data-i18n-title="exp.project.title"></select>
+        <button id="ws-settings" type="button" data-i18n-title="exp.project.settings">\u2699</button>
+        <button id="ws-add" type="button" data-i18n-title="exp.project.add">\u2795</button>
+      </div>
+      <div id="ws-list"></div>
+      <div class="exp-search-bar">
+        <input id="exp-search" type="search" autocomplete="off" data-i18n-ph="search.placeholder" placeholder="\uAC80\uC0C9 (\uD30C\uC77C\xB7\uB178\uB4DC)">
+      </div>
+      <div class="pane-title"><span data-i18n="exp.title">\uD0D0\uC0C9\uAE30</span> <span id="exp-root"></span></div>
+      <div id="exp-tree"><div class="pane-empty" data-i18n="exp.loading">\uB85C\uB4DC \uC911\u2026</div></div>
+      <div class="exp-footer">
+        <span id="app-ver" class="app-ver"></span>
+        <span class="copyright">\xA9 2026 <a href="https://www.orangeworks.kr" target="_blank" rel="noopener noreferrer">ORANGEWORKS</a></span>
+      </div>`;
+    this.openState = this.loadJson("otree-exp-open");
+    this.collapsed = this.loadJson("otree-exp-collapsed");
+    this.$tree = pane.querySelector("#exp-tree");
+    this.$search = pane.querySelector("#exp-search");
+    this.$wsSelect = pane.querySelector("#ws-select");
+    this.$wsList = pane.querySelector("#ws-list");
+    this.$wsSelect.onchange = () => this.onSwitchWs(this.$wsSelect.value);
+    pane.querySelector("#ws-add").onclick = () => onAddWs();
+    pane.querySelector("#ws-settings").onclick = () => onSettings();
+    this.$search.oninput = () => {
+      this.query = this.$search.value;
+      this.paint();
+    };
+    void this.refresh();
+    void this.loadVersion();
+  }
+  async loadVersion() {
+    try {
+      const { version } = await this.api("GET", "/version");
+      const el = document.querySelector("#app-ver");
+      if (el && version) el.textContent = `v${version}`;
+    } catch {
+    }
+  }
+  // Project list/selection refresh (called when app receives the tree).
+  setProjects(workspaces, currentId) {
+    const none = document.createElement("option");
+    none.value = "none";
+    none.textContent = t("exp.project.none");
+    none.selected = !currentId;
+    this.$wsSelect.replaceChildren(none, ...workspaces.map((w) => {
+      const opt = document.createElement("option");
+      opt.value = w.id;
+      opt.textContent = w.name;
+      opt.title = (w.folders ?? []).map((f) => f.path).join("\n");
+      opt.selected = w.id === currentId;
+      return opt;
+    }));
+    if (!workspaces.length) {
+      const empty = document.createElement("div");
+      empty.className = "ws-empty";
+      empty.textContent = t("exp.project.empty");
+      this.$wsList.replaceChildren(empty);
+      return;
+    }
+    this.$wsList.replaceChildren(...workspaces.map((w) => {
+      const row = document.createElement("div");
+      row.className = "ws-item" + (w.id === currentId ? " active" : "");
+      row.innerHTML = `<span class="ws-name">\u{1F4C1} ${esc(w.name)}</span><button class="ws-rm" type="button" title="${t("exp.project.remove")}">\u{1F5D1}</button>`;
+      row.title = (w.folders ?? []).map((f) => f.path).join("\n");
+      row.querySelector(".ws-name").onclick = () => this.onSwitchWs(w.id);
+      row.querySelector(".ws-rm").onclick = (e) => {
+        e.stopPropagation();
+        this.onRemoveWs(w.id);
+      };
+      return row;
+    }));
+  }
+  loadJson(key) {
+    try {
+      return JSON.parse(localStorage.getItem(key) ?? "{}");
+    } catch {
+      return {};
+    }
+  }
+  saveJson(key, value) {
+    try {
+      localStorage.setItem(key, JSON.stringify(value));
+    } catch {
+    }
+  }
+  // Active soft file locks (DES-COLLAB-015), keyed "folderId:rel" — re-render to paint/clear 🔒.
+  setLocks(locks) {
+    this.locks = locks ?? {};
+    if (this.lastFolders.length) this.paint();
+  }
+  async refresh() {
+    try {
+      const { project, folders } = await this.api("GET", "/files");
+      this.lastFolders = folders;
+      const root = document.querySelector("#exp-root");
+      if (root) root.textContent = project;
+      this.paint();
+    } catch {
+      this.$tree.innerHTML = `<div class="pane-empty">${t("exp.loadFail")}</div>`;
+    }
+  }
+  // Tree view (no query) or flat search results (query present) — SCR-INSIGHT-006.
+  paint() {
+    if (this.query.trim()) this.renderSearch();
+    else this.renderRoots();
+  }
+  renderRoots() {
+    const folders = this.lastFolders;
+    this.$tree.replaceChildren(...folders.map((f) => this.renderRoot(f)));
+    if (!folders.length) this.$tree.innerHTML = `<div class="pane-empty">${t("exp.noFolder")}</div>`;
+  }
+  // Flatten every folder's tree to (folderId, path, name) file entries — for search matching.
+  collectFiles(items, folderId, acc) {
+    for (const item of items) {
+      if (item.type === "dir") this.collectFiles(item.children ?? [], folderId, acc);
+      else acc.push({ folderId, path: item.path, name: item.name });
+    }
+  }
+  // Client-side metadata filter (DES-INSIGHT-006): files (path/name) + nodes (title/decision/branchSummary).
+  // No full-text body search (v2 follow-up). Each result navigates to the viewer or the node.
+  renderSearch() {
+    const q = this.query.trim().toLowerCase();
+    const CAP = 50;
+    const files = [];
+    for (const f of this.lastFolders) this.collectFiles(f.tree, f.id, files);
+    const fileMatches = files.filter((x) => x.name.toLowerCase().includes(q) || x.path.toLowerCase().includes(q));
+    const fileHits = fileMatches.slice(0, CAP);
+    const nodeMatches = this.nodes().filter((n) => {
+      const hay = [n.title, n.decision?.summary, n.branchSummary].filter(Boolean).join(" ").toLowerCase();
+      return hay.includes(q);
+    });
+    const nodeHits = nodeMatches.slice(0, CAP);
+    if (!fileHits.length && !nodeHits.length) {
+      this.$tree.innerHTML = `<div class="pane-empty">${t("search.none")}</div>`;
+      return;
+    }
+    const count = (shown, total) => total > shown ? `${shown}/${total}` : `${shown}`;
+    const frag = document.createDocumentFragment();
+    if (fileHits.length) {
+      const h = document.createElement("div");
+      h.className = "srch-group";
+      h.textContent = `${t("search.files")} (${count(fileHits.length, fileMatches.length)})`;
+      frag.append(h);
+      for (const x of fileHits) {
+        const key = `${x.folderId}:${x.path}`;
+        const row = document.createElement("div");
+        row.className = "srch-hit";
+        row.title = x.path;
+        row.innerHTML = `<span class="srch-ic">${isDoc(x.name) ? "\u{1F4C4}" : "\xB7"}</span><span class="srch-name">${esc(x.name)}</span><span class="srch-sub">${esc(x.path)}</span>`;
+        if (VIEWABLE.test(x.name)) row.onclick = () => this.onOpen(key);
+        else row.classList.add("disabled");
+        frag.append(row);
+      }
+    }
+    if (nodeHits.length) {
+      const h = document.createElement("div");
+      h.className = "srch-group";
+      h.textContent = `${t("search.nodes")} (${count(nodeHits.length, nodeMatches.length)})`;
+      frag.append(h);
+      for (const n of nodeHits) {
+        const sub = n.decision?.summary || n.branchSummary || "";
+        const row = document.createElement("div");
+        row.className = "srch-hit";
+        row.title = `${n.id} \xB7 ${n.title}`;
+        row.innerHTML = `<span class="srch-ic">\u25C6</span><span class="srch-name">${esc(n.title)}</span><span class="srch-sub">${esc(sub)}</span>`;
+        row.onclick = () => this.onGoto(n.id);
+        frag.append(row);
+      }
+    }
+    this.$tree.replaceChildren(frag);
+  }
+  renderRoot(f) {
+    const wrap = document.createElement("div");
+    wrap.className = "exp-root-group";
+    const collapsed = !!this.collapsed[f.id];
+    const head = document.createElement("div");
+    head.className = "exp-folder-head" + (collapsed ? " collapsed" : "");
+    head.innerHTML = `<span class="erh-tw">${collapsed ? "\u25B6" : "\u25BC"}</span><span class="erh-name">\u{1F4C2} ${esc(f.name)}</span><span class="fmode ${f.mode}">${t(f.mode === "ro" ? "exp.mode.ro" : "exp.mode.rw")}</span>${f.role === "primary" ? `<span class="fprimary">${t("exp.primary")}</span>` : ""}<span class="erh-spacer"></span><button class="erh-btn erh-expand" type="button" title="${t("exp.expandAll")}">\u2295</button><button class="erh-btn erh-collapse" type="button" title="${t("exp.collapseAll")}">\u2296</button>`;
+    const body = document.createElement("div");
+    body.className = "exp-root-body";
+    body.hidden = collapsed;
+    body.append(...this.renderList(f.tree, f.id));
+    const name = head.querySelector(".erh-name");
+    const tw = head.querySelector(".erh-tw");
+    name.onclick = () => this.toggleRoot(f.id);
+    tw.onclick = () => this.toggleRoot(f.id);
+    head.querySelector(".erh-expand").onclick = (ev) => {
+      ev.stopPropagation();
+      if (this.collapsed[f.id]) this.toggleRoot(f.id);
+      else body.querySelectorAll("details").forEach((d) => {
+        d.open = true;
+      });
+    };
+    head.querySelector(".erh-collapse").onclick = (ev) => {
+      ev.stopPropagation();
+      body.querySelectorAll("details").forEach((d) => {
+        d.open = false;
+      });
+    };
+    wrap.append(head, body);
+    return wrap;
+  }
+  toggleRoot(id) {
+    this.collapsed[id] = !this.collapsed[id];
+    this.saveJson("otree-exp-collapsed", this.collapsed);
+    this.renderRoots();
+  }
+  renderList(items, folderId) {
+    return items.map((item) => {
+      if (item.type === "dir") {
+        const key2 = `${folderId}:${item.path}`;
+        const details = document.createElement("details");
+        details.open = key2 in this.openState ? this.openState[key2] : ["docs"].includes(item.name);
+        const summary = document.createElement("summary");
+        const setIcon = () => {
+          summary.textContent = `${details.open ? "\u{1F4C2}" : "\u{1F4C1}"} ${item.name}`;
+        };
+        details.addEventListener("toggle", () => {
+          this.openState[key2] = details.open;
+          this.saveJson("otree-exp-open", this.openState);
+          setIcon();
+        });
+        setIcon();
+        summary.title = item.name;
+        details.append(summary, ...this.renderList(item.children ?? [], folderId));
+        return details;
+      }
+      const row = document.createElement("div");
+      row.className = "exp-file";
+      const isMd = /\.md$/i.test(item.name);
+      const key = `${folderId}:${item.path}`;
+      row.title = item.name;
+      const lock = this.locks[key];
+      row.innerHTML = `<span class="fname">${isMd ? "\u{1F4C4}" : "\xB7"} ${esc(item.name)}${lock ? ` <span class="flock" title="${esc(t("exp.lock.title", { id: lock.nodeId }))}">\u{1F512}${esc(lock.nodeId)}</span>` : ""}</span><button class="flink" type="button" title="${esc(t("exp.link.title"))}">\u{1F4CE}</button>`;
+      const fname = row.querySelector(".fname");
+      fname.onclick = () => {
+        if (VIEWABLE.test(item.name)) this.onOpen(key);
+      };
+      const flock = row.querySelector(".flock");
+      if (flock) flock.onclick = async (e) => {
+        e.stopPropagation();
+        if (await confirmModal({ title: t("exp.lock.release.title"), message: t("exp.lock.release.msg", { path: item.path, id: this.locks[key]?.nodeId ?? "" }), okLabel: t("exp.lock.release.ok") })) {
+          await this.api("DELETE", `/locks?path=${encodeURIComponent(key)}`);
+        }
+      };
+      const linkBtn = row.querySelector(".flink");
+      linkBtn.onclick = (e) => {
+        e.stopPropagation();
+        this.onLink(key);
+      };
+      row.onmouseenter = () => {
+        linkBtn.style.visibility = this.hasSelection() ? "visible" : "hidden";
+      };
+      row.onmouseleave = () => {
+        linkBtn.style.visibility = "hidden";
+      };
+      return row;
+    });
+  }
+}
+export {
+  Explorer
+};

package/dist/public/guidelines.js

@@ -0,0 +1,35 @@
+import { render } from "./md.js";
+import { t } from "./i18n.js";
+async function showGuidelines(api) {
+  let text = "";
+  try {
+    text = (await api("GET", "/guidelines")).text || "";
+  } catch {
+    return;
+  }
+  const ov = document.createElement("div");
+  ov.className = "guide-modal";
+  ov.innerHTML = `
+    <div class="pj-box guide-box">
+      <div class="pj-head"><b>${t("guide.title")}</b><button class="guide-close" type="button" aria-label="${t("common.close")}">\u2715</button></div>
+      <div class="guide-body"></div>
+      <div class="guide-note">${t("guide.note")}</div>
+    </div>`;
+  ov.querySelector(".guide-body").innerHTML = render(text);
+  const close = () => {
+    ov.remove();
+    document.removeEventListener("keydown", onKey);
+  };
+  const onKey = (e) => {
+    if (e.key === "Escape") close();
+  };
+  document.addEventListener("keydown", onKey);
+  ov.onclick = (e) => {
+    if (e.target === ov) close();
+  };
+  ov.querySelector(".guide-close").onclick = close;
+  document.body.append(ov);
+}
+export {
+  showGuidelines
+};