@polderlabs/openkan 0.4.0

package/dist/web/command-palette.js

@@ -0,0 +1,381 @@
+// OpenKan — command palette (M13).
+// window.OpenKanCommandPalette = {
+//   open(), close(), isOpen(),
+//   registerAction(action),  // returns unregister
+//   registerTaskProvider(fn) // returns unregister
+// }
+//
+// Cmd/Ctrl+K opens a centered modal with a fuzzy-search input. The fuzzy
+// match is a simple case-insensitive substring score (spec'd below) — not a
+// true edit-distance fuzzy match.
+//
+// Result sources:
+//   1. Actions: registered via registerAction({ id, label, hint, run, keys? }).
+//      Shown when the query is empty OR starts with ">".
+//   2. Tasks: provided on demand by app.js via registerTaskProvider(fn). Shown
+//      when the query doesn't match "@" or ">" prefixes and the query matches
+//      a task's title/description/tags.
+//
+// Keyboard:
+//   ↑ / ↓ (or Ctrl+P / Ctrl+N)  move highlight
+//   Enter                        run the highlighted result
+//   Esc                          close (handled by keyboard.js Esc priority)
+
+(() => {
+  "use strict";
+
+  /** @type {Array<{id:string,label:string,hint?:string,keys?:string,run:Function,score?:number}>} */
+  const actions = [];
+  /** @type {Set<(query:string)=>Array<{id:string,title:string,subtitle?:string,run:Function}>>} */
+  const taskProviders = new Set();
+
+  /** @type {HTMLDivElement|null} */
+  let root = null;
+  /** @type {HTMLInputElement|null} */
+  let input = null;
+  /** @type {HTMLUListElement|null} */
+  let list = null;
+  /** @type {HTMLDivElement|null} */
+  let emptyEl = null;
+  /** @type {number} index of the highlighted result, or -1 */
+  let highlight = -1;
+  /** @type {Array<{label:string,hint?:string,run:Function}>} current rendered results */
+  let current = [];
+  /** @type {Element|null} previously focused element (restored on close) */
+  let prevFocus = null;
+
+  function el(tag, cls, props = {}) {
+    const e = document.createElement(tag);
+    if (cls) e.className = cls;
+    for (const [k, v] of Object.entries(props)) {
+      if (k === "text") e.textContent = v;
+      else if (k === "html") e.innerHTML = v;
+      else if (k.startsWith("on")) e.addEventListener(k.slice(2), v);
+      else e.setAttribute(k, v);
+    }
+    return e;
+  }
+
+  // ─── Fuzzy match — case-insensitive substring scoring ────────────────────
+  // score = startsWith ? 100 : includes ? 50 : 0
+  // Order by score desc, then alphabetical asc for ties.
+  function fuzzyScore(haystack, needle) {
+    if (!needle) return 1;          // empty query matches everything at base score
+    if (!haystack) return 0;
+    const h = String(haystack).toLowerCase();
+    const n = String(needle).toLowerCase();
+    if (!n) return 1;
+    if (h.startsWith(n)) return 100;
+    if (h.includes(n)) return 50;
+    return 0;
+  }
+
+  // Build score records for actions, sorted by (score desc, label asc).
+  function rankActions(query) {
+    const q = (query || "").replace(/^>\s*/, "");
+    const out = [];
+    for (const a of actions) {
+      const score = Math.max(
+        fuzzyScore(a.label, q),
+        fuzzyScore(a.id, q),
+        fuzzyScore(a.hint || "", q),
+      );
+      if (score <= 0 && q) continue;
+      out.push({ ...a, score: q ? score : 1 });
+    }
+    out.sort((a, b) => (b.score - a.score) || a.label.localeCompare(b.label));
+    return out;
+  }
+
+  function rankTasks(query) {
+    const q = (query || "").replace(/^@\s*/, "");
+    if (!q) return [];
+    /** @type {Array<{id:string,title:string,subtitle?:string,run:Function,score:number}>} */
+    const out = [];
+    for (const provider of taskProviders) {
+      let list = [];
+      try { list = provider(q) || []; } catch { list = []; }
+      for (const t of list) {
+        if (!t) continue;
+        const titleScore = fuzzyScore(t.title || "", q);
+        const descScore = fuzzyScore(t.subtitle || "", q);
+        const score = Math.max(titleScore, descScore);
+        if (score <= 0) continue;
+        out.push({ ...t, score });
+      }
+    }
+    out.sort((a, b) => (b.score - a.score) || (a.title || "").localeCompare(b.title || ""));
+    return out;
+  }
+
+  function isOpen() { return !!root && !root.hidden; }
+
+  function open() {
+    if (!root) build();
+    if (!root.hidden) return;
+    prevFocus = document.activeElement instanceof Element ? document.activeElement : null;
+    root.hidden = false;
+    input.value = "";
+    document.body.classList.add("palette-open");
+    setTimeout(() => {
+      try { input.focus({ preventScroll: true }); } catch { input.focus(); }
+      render("");
+    }, 0);
+  }
+
+  function close() {
+    if (!root || root.hidden) return;
+    root.hidden = true;
+    document.body.classList.remove("palette-open");
+    if (prevFocus && document.contains(prevFocus)) {
+      try { prevFocus.focus({ preventScroll: true }); } catch {}
+    }
+    prevFocus = null;
+  }
+
+  function render(query) {
+    if (!list) return;
+    list.innerHTML = "";
+    const trimmed = (query || "").trim();
+    // Mode selection:
+    //   - empty / ">" prefix   → actions only
+    //   - "@" prefix           → tasks only
+    //   - any other query      → actions then tasks (ranked independently,
+    //                            then concatenated — matches the spec's "any
+    //                            query that matches a task title" while still
+    //                            letting users discover actions by name).
+    const isActionMode = trimmed === "" || trimmed.startsWith(">");
+    const isTaskMode = !isActionMode && trimmed.startsWith("@");
+    const ranked = isActionMode
+      ? rankActions(query).map((r) => ({ ...r, kind: "action" }))
+      : isTaskMode
+        ? rankTasks(query).map((r) => ({ ...r, kind: "task" }))
+        : [
+            ...rankActions(query).map((r) => ({ ...r, kind: "action" })),
+            ...rankTasks(query).map((r) => ({ ...r, kind: "task" })),
+          ];
+    current = ranked.map((r) => ({
+      label: r.label || r.title,
+      hint: r.hint || r.subtitle,
+      run: r.run,
+      kind: r.kind,
+      id: r.id || r.label || r.title,
+    }));
+    highlight = current.length > 0 ? 0 : -1;
+
+    if (current.length === 0) {
+      emptyEl.textContent = trimmed
+        ? "No matching actions or tasks"
+        : "Type to search actions and tasks";
+      emptyEl.hidden = false;
+      list.hidden = true;
+      return;
+    }
+    emptyEl.hidden = true;
+    list.hidden = false;
+    const MAX_RENDER = 50;
+    for (let i = 0; i < Math.min(current.length, MAX_RENDER); i++) {
+      const r = current[i];
+      const li = el("li", "palette-item", {
+        role: "option",
+        "data-idx": String(i),
+        "aria-selected": i === highlight ? "true" : "false",
+        id: `palette-item-${i}`,
+      });
+      li.append(el("span", "palette-item-label", { text: r.label }));
+      if (r.hint) li.append(el("span", "palette-item-hint", { text: r.hint }));
+      if (r.kind === "task") li.append(el("span", "palette-item-kind", { text: "Task" }));
+      li.addEventListener("click", () => runAt(i));
+      li.addEventListener("mousemove", () => setHighlight(i));
+      if (i === highlight) li.classList.add("highlighted");
+      list.append(li);
+    }
+    if (current.length > MAX_RENDER) {
+      list.append(el("li", "palette-overflow", {
+        text: `${current.length - MAX_RENDER} more — refine your query`,
+      }));
+    }
+    setActiveDescendant();
+  }
+
+  function setHighlight(i) {
+    if (!list) return;
+    if (i < 0 || i >= current.length) return;
+    if (highlight === i) return;
+    const prev = list.querySelector(`[data-idx="${highlight}"]`);
+    if (prev) {
+      prev.classList.remove("highlighted");
+      prev.setAttribute("aria-selected", "false");
+    }
+    highlight = i;
+    const next = list.querySelector(`[data-idx="${i}"]`);
+    if (next) {
+      next.classList.add("highlighted");
+      next.setAttribute("aria-selected", "true");
+      // Keep highlighted item in view.
+      try { next.scrollIntoView({ block: "nearest" }); } catch {}
+    }
+    setActiveDescendant();
+  }
+
+  function setActiveDescendant() {
+    if (!input || !list) return;
+    if (highlight < 0) {
+      input.setAttribute("aria-activedescendant", "");
+    } else {
+      input.setAttribute("aria-activedescendant", `palette-item-${highlight}`);
+    }
+  }
+
+  function runAt(i) {
+    const r = current[i];
+    if (!r) return;
+    close();
+    try { r.run(); } catch (e) {
+      console.error("[palette] action threw:", e);
+    }
+  }
+
+  // ─── Input + keyboard wiring ─────────────────────────────────────────────
+  function onKeyDown(e) {
+    if (e.key === "ArrowDown" || (e.ctrlKey && e.key === "n") || (e.ctrlKey && e.key === "N")) {
+      e.preventDefault();
+      setHighlight(highlight + 1 >= current.length ? 0 : highlight + 1);
+      return;
+    }
+    if (e.key === "ArrowUp" || (e.ctrlKey && e.key === "p") || (e.ctrlKey && e.key === "P")) {
+      e.preventDefault();
+      setHighlight(highlight - 1 < 0 ? current.length - 1 : highlight - 1);
+      return;
+    }
+    if (e.key === "Enter") {
+      e.preventDefault();
+      if (highlight >= 0) runAt(highlight);
+      return;
+    }
+    if (e.key === "Home") {
+      e.preventDefault();
+      setHighlight(0);
+      return;
+    }
+    if (e.key === "End") {
+      e.preventDefault();
+      setHighlight(current.length - 1);
+      return;
+    }
+  }
+
+  function onInput() {
+    render(input.value);
+  }
+
+  // ─── Build + boot ────────────────────────────────────────────────────────
+  function build() {
+    root = el("div", "command-palette", {
+      id: "command-palette",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Command palette",
+      hidden: true,
+    });
+    root.tabIndex = -1;
+
+    const dialog = el("div", "command-palette-dialog");
+    const searchWrap = el("div", "command-palette-search");
+    input = el("input", null, {
+      type: "text",
+      autocomplete: "off",
+      spellcheck: "false",
+      placeholder: "Type a command or search…",
+      "aria-label": "Command palette search",
+      "aria-controls": "command-palette-list",
+      "aria-autocomplete": "list",
+    });
+    input.setAttribute("role", "combobox");
+    input.id = "command-palette-input";
+    searchWrap.append(input);
+    dialog.append(searchWrap);
+
+    list = el("ul", "command-palette-list", {
+      id: "command-palette-list",
+      role: "listbox",
+      "aria-labelledby": "command-palette-input",
+    });
+    dialog.append(list);
+
+    emptyEl = el("div", "command-palette-empty", {
+      text: "Type to search actions and tasks",
+    });
+    dialog.append(emptyEl);
+
+    const footer = el("div", "command-palette-footer");
+    footer.append(
+      el("span", null, { text: "↑/↓ navigate" }),
+      el("span", "dot", { "aria-hidden": "true", text: "·" }),
+      el("span", null, { text: "↵ select" }),
+      el("span", "dot", { "aria-hidden": "true", text: "·" }),
+      el("span", null, { text: "esc close" }),
+    );
+    dialog.append(footer);
+
+    root.append(dialog);
+
+    // Backdrop closes when clicking outside the dialog.
+    root.addEventListener("click", (e) => {
+      if (e.target === root) close();
+    });
+
+    input.addEventListener("input", onInput);
+    input.addEventListener("keydown", onKeyDown);
+
+    document.body.appendChild(root);
+  }
+
+  function init() {
+    if (!root) build();
+    // Wire to the keyboard module — palette.open / palette.close / palette.isOpen.
+    if (window.OpenKanKeyboard) {
+      window.OpenKanKeyboard.on("palette.open", () => open());
+      window.OpenKanKeyboard.on("palette.isOpen", (cb) => {
+        if (typeof cb === "function") cb(isOpen());
+      });
+      // The keyboard module asks isOpen via emit("palette.isOpen", cb).
+      // For Esc handling, it calls emit("palette.close") when palette is open.
+      window.OpenKanKeyboard.on("palette.close", () => close());
+    }
+  }
+
+  // ─── Public API ──────────────────────────────────────────────────────────
+  function registerAction(action) {
+    if (!action || !action.id || typeof action.run !== "function") return () => {};
+    const item = {
+      id: String(action.id),
+      label: String(action.label || action.id),
+      hint: action.hint ? String(action.hint) : undefined,
+      keys: action.keys ? String(action.keys) : undefined,
+      run: action.run,
+    };
+    actions.push(item);
+    return () => {
+      const idx = actions.indexOf(item);
+      if (idx >= 0) actions.splice(idx, 1);
+    };
+  }
+
+  function registerTaskProvider(fn) {
+    if (typeof fn !== "function") return () => {};
+    taskProviders.add(fn);
+    return () => taskProviders.delete(fn);
+  }
+
+  window.OpenKanCommandPalette = {
+    open, close, isOpen,
+    registerAction, registerTaskProvider,
+  };
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", init, { once: true });
+  } else {
+    init();
+  }
+})();

package/dist/web/contributors-view.js

@@ -0,0 +1,317 @@
+// OpenKan — Contributors tab (M10).
+// window.OpenKanContributors = { mount(rootEl), unmount() }
+//
+// Pulls from /api/contributors, /api/tasks-index, /api/changelog.
+// Each row is expandable; inside the row we list attributed tasks + last
+// 10 events by that author.
+
+(() => {
+  "use strict";
+
+  const { api } = window.OpenKanAPI;
+
+  // State per-mount
+  let state = null;
+
+  function el(tag, cls, props = {}) {
+    const e = document.createElement(tag);
+    if (cls) e.className = cls;
+    for (const [k, v] of Object.entries(props)) {
+      if (k === "text") e.textContent = v;
+      else if (k === "html") e.innerHTML = v;
+      else if (k.startsWith("on")) e.addEventListener(k.slice(2), v);
+      else e.setAttribute(k, v);
+    }
+    return e;
+  }
+
+  function initialsFor(name) {
+    if (!name) return "?";
+    const parts = String(name).trim().split(/[\s@]+/).filter(Boolean);
+    if (parts.length === 0) return "?";
+    if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+  }
+
+  function colorFor(seed) {
+    let h = 0;
+    for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) | 0;
+    const hue = Math.abs(h) % 360;
+    return `hsl(${hue} 60% 45%)`;
+  }
+
+  function relativeTime(iso) {
+    if (!iso) return "";
+    const t = new Date(iso).getTime();
+    if (isNaN(t)) return "";
+    const delta = Date.now() - t;
+    const sec = Math.floor(delta / 1000);
+    if (sec < 60) return `${sec}s ago`;
+    const min = Math.floor(sec / 60);
+    if (min < 60) return `${min}m ago`;
+    const hr = Math.floor(min / 60);
+    if (hr < 24) return `${hr}h ago`;
+    const day = Math.floor(hr / 24);
+    if (day < 30) return `${day}d ago`;
+    return new Date(iso).toLocaleDateString();
+  }
+
+  function buildHeader() {
+    const header = el("div", "contributors-header");
+
+    header.append(el("span", "filter-bar-label", { text: "Sort" }));
+    const sort = el("select", null, { "aria-label": "Sort contributors" });
+    for (const opt of [
+      { v: "commits", t: "most commits" },
+      { v: "recent",  t: "most recent" },
+      { v: "name",    t: "by name" },
+    ]) {
+      const o = el("option", null, { value: opt.v, text: opt.t });
+      if (state.sort === opt.v) o.selected = true;
+      sort.append(o);
+    }
+    sort.addEventListener("change", () => {
+      state.sort = sort.value;
+      renderList();
+    });
+    header.append(sort);
+
+    const me = state.contributors.find((c) => c.isCurrentUser || c.currentUser);
+    if (me) {
+      header.append(el("span", "current-user-badge", {
+        text: `@me is ${me.name || me.email || "current user"}`,
+      }));
+    }
+
+    return header;
+  }
+
+  function buildViewHero() {
+    const hero = el("header", "view-hero");
+    const copy = el("div");
+    copy.append(
+      el("span", "view-eyebrow", { text: "Project collaboration" }),
+      el("h2", null, { text: "Contributors" }),
+      el("p", null, { text: "See ownership, recent activity, and the tasks each contributor touches." }),
+    );
+    hero.append(copy);
+    return hero;
+  }
+
+  function sortContributors(list) {
+    const sorted = list.slice();
+    if (state.sort === "commits") {
+      sorted.sort((a, b) => (b.commits || 0) - (a.commits || 0));
+    } else if (state.sort === "recent") {
+      sorted.sort((a, b) => String(b.lastSeen || "").localeCompare(String(a.lastSeen || "")));
+    } else {
+      sorted.sort((a, b) => String(a.name || a.email || "").localeCompare(String(b.name || b.email || "")));
+    }
+    return sorted;
+  }
+
+  function renderList() {
+    if (!state) return;
+    state.listEl.innerHTML = "";
+    const sorted = sortContributors(state.contributors);
+    if (sorted.length === 0) {
+      state.listEl.append(el("div", "contributors-empty", { text: "No contributors yet (no git commits found)." }));
+      return;
+    }
+    for (const c of sorted) {
+      state.listEl.append(renderRow(c));
+    }
+  }
+
+  function renderRow(c) {
+    const row = el("article", "contributor-row" + (c.isCurrentUser || c.currentUser ? " is-me" : ""));
+    row.dataset.email = c.email || "";
+
+    // Summary line
+    const summary = el("div", "contributor-summary");
+    const av = el("div", "avatar-circle avatar-lg");
+    av.style.setProperty("--avatar-bg", colorFor(c.email || c.name || ""));
+    av.textContent = initialsFor(c.name || c.email);
+    summary.append(av);
+
+    const meta = el("div", "contributor-meta");
+    const nameRow = el("div", "contributor-name");
+    nameRow.append(c.name || c.email || "(unknown)");
+    if (c.isCurrentUser || c.currentUser) {
+      nameRow.append(el("span", "tag-chip", {
+        text: "@me",
+        title: "current git user",
+      }));
+    }
+    meta.append(nameRow);
+    if (c.email && c.name) meta.append(el("div", "contributor-email", { text: c.email }));
+
+    const stats = el("div", "contributor-stats");
+    stats.append(
+      el("span", null, { text: `${c.commits ?? 0} commit${c.commits === 1 ? "" : "s"}` }),
+      el("span", null, { text: `last seen ${relativeTime(c.lastSeen)}` }),
+      el("span", null, { text: `${c.activeTasks ?? 0} task${c.activeTasks === 1 ? "" : "s"} active` }),
+    );
+    meta.append(stats);
+
+    summary.append(meta);
+
+    const expand = el("button", "contributor-expand-btn", { type: "button", text: "show tasks ▾" });
+    summary.append(expand);
+
+    row.append(summary);
+
+    // Detail (expanded on click)
+    const detail = el("div", "contributor-detail");
+    row.append(detail);
+
+    expand.addEventListener("click", async () => {
+      const isOpen = row.classList.toggle("expanded");
+      expand.textContent = isOpen ? "hide ▴" : "show tasks ▾";
+      if (isOpen && !detail.dataset.loaded) {
+        detail.dataset.loaded = "1";
+        await populateDetail(detail, c);
+      }
+    });
+
+    return row;
+  }
+
+  async function populateDetail(detail, c) {
+    detail.innerHTML = '<div class="contributors-empty">Loading…</div>';
+
+    // Tasks attributed to this contributor
+    let tasks = [];
+    try {
+      const idx = await api("GET", "/api/tasks-index");
+      const list = Array.isArray(idx?.tasks) ? idx.tasks : Array.isArray(idx) ? idx : [];
+      tasks = list.filter((t) => Array.isArray(t.contributors) && t.contributors.some((cc) => sameContributor(cc, c)));
+    } catch {
+      tasks = [];
+    }
+
+    const tasksWrap = el("div");
+    tasksWrap.append(el("h4", null, { text: `Tasks (${tasks.length})` }));
+    if (tasks.length === 0) {
+      tasksWrap.append(el("div", "contributors-empty", { text: "No attributed tasks." }));
+    } else {
+      const list = el("div", "contributor-tasks");
+      for (const t of tasks) {
+        const item = el("div", "contributor-task", { "data-id": t.id });
+        const dot = el("span", `task-status-dot state-${t.state ?? t.status ?? "idle"}`);
+        item.append(dot);
+        item.append(el("span", "task-title-text", { text: t.title || "(untitled)" }));
+        item.append(el("span", "task-column-text", { text: t.column || "" }));
+        item.addEventListener("click", () => {
+          if (window.OpenKanTabs) window.OpenKanTabs.activate("tasks");
+          setTimeout(() => window.OpenKanTaskView?.open(t.id), 30);
+        });
+        list.append(item);
+      }
+      tasksWrap.append(list);
+    }
+    detail.append(tasksWrap);
+
+    // Mini-timeline of last 10 events
+    let events = [];
+    try {
+      const author = c.email || c.name;
+      const params = new URLSearchParams();
+      params.set("author", author);
+      params.set("limit", "10");
+      const data = await api("GET", `/api/changelog?${params.toString()}`);
+      events = Array.isArray(data?.events) ? data.events : Array.isArray(data) ? data : [];
+    } catch {
+      events = [];
+    }
+
+    const tlWrap = el("div");
+    tlWrap.append(el("h4", null, { text: `Recent activity (${events.length})` }));
+    if (events.length === 0) {
+      tlWrap.append(el("div", "contributors-empty", { text: "No recent events." }));
+    } else {
+      const tl = el("div", "contributor-timeline");
+      for (const e of events) {
+        const row = el("div", "contributor-timeline-entry");
+        row.append(
+          el("span", "entry-time", { text: relativeTime(e.ts), title: e.ts }),
+          el("span", "entry-summary", { text: `${e.kind} — ${e.summary || ""}` }),
+        );
+        tl.append(row);
+      }
+      tlWrap.append(tl);
+    }
+    detail.append(tlWrap);
+
+    detail.innerHTML = "";
+    detail.append(tasksWrap, tlWrap);
+  }
+
+  function sameContributor(cc, c) {
+    if (!cc || !c) return false;
+    if (c.email && cc.email && String(cc.email).toLowerCase() === String(c.email).toLowerCase()) return true;
+    if (c.name && cc.name && cc.name === c.name) return true;
+    return false;
+  }
+
+  async function mount(rootEl) {
+    if (!rootEl) throw new Error("contributors-view: rootEl is required");
+    unmount();
+    state = {
+      rootEl,
+      contributors: [],
+      sort: "commits",
+      listEl: null,
+    };
+
+    rootEl.innerHTML = '<div class="contributors-empty">Loading…</div>';
+
+    let contributors = [];
+    let currentUser = null;
+    try {
+      const data = await api("GET", "/api/contributors");
+      contributors = Array.isArray(data?.contributors) ? data.contributors : Array.isArray(data) ? data : [];
+      currentUser = data?.currentUser || null;
+    } catch (err) {
+      rootEl.innerHTML = "";
+      rootEl.append(el("div", "contributors-empty", {
+        text: `Contributors unavailable: ${err.message}`,
+      }));
+      return;
+    }
+
+    if (currentUser) {
+      const email = (currentUser.email || "").toLowerCase();
+      for (const c of contributors) {
+        if (email && (c.email || "").toLowerCase() === email) {
+          c.isCurrentUser = true;
+        }
+      }
+      // If we have a current user but no match, surface a synthetic row.
+      if (!contributors.some((c) => c.isCurrentUser)) {
+        contributors.unshift({
+          name: currentUser.name || currentUser.email || "you",
+          email: currentUser.email || "",
+          commits: 0,
+          lastSeen: null,
+          activeTasks: 0,
+          isCurrentUser: true,
+        });
+      }
+    }
+
+    state.contributors = contributors;
+    rootEl.innerHTML = "";
+    rootEl.append(buildViewHero());
+    rootEl.append(buildHeader());
+    state.listEl = el("div", "contributors-list");
+    rootEl.append(state.listEl);
+    renderList();
+  }
+
+  function unmount() {
+    state = null;
+  }
+
+  window.OpenKanContributors = { mount, unmount };
+})();