@mgeri1993/claude-task-manager 1.0.0

package/js/BoardView.js

@@ -0,0 +1,205 @@
+import { Utils, COLUMNS, COLOR, ICONS } from "./Utils.js";
+import { I18n } from "./i18n.js";
+
+/**
+ * Renders the board: stats bar, agent chips (load bar), and the Kanban/Swimlane columns
+ * with cards. Writes into the #board, #stats, #agents elements.
+ */
+export class BoardView {
+  constructor(dom) {
+    this.dom = dom; // { board, stats, agents, agentsCount }
+    this.teamIndex = new Map(); // teamNo -> task (from the CURRENTLY loaded full task list, before filtering)
+  }
+
+  visibleTasks(allTasks, { q, agentFilter, quickFilter, moduleFilter }) {
+    const qq = (q || "").trim().toLowerCase();
+    const passQuick = t => !quickFilter || (quickFilter === "active" ? t.status !== "done" : t.status === quickFilter);
+    return allTasks.filter(t => !t.isArchived).filter(passQuick).filter(t => {
+      if (agentFilter && !agentFilter.has(Utils.agentKey(t))) return false;
+      if (moduleFilter && (t.module || "") !== moduleFilter) return false;
+      if (!qq) return true;
+      return [t.title, t.description, t.id, t.assignedAgentId, t.module, ...Utils.norm(t.notes)].join(" ").toLowerCase().includes(qq);
+    });
+  }
+
+  /** Activity feed: every visible task's note+history entries, in reverse chronological order. */
+  feedHTML(tasks) {
+    const items = Utils.activityFeed(tasks);
+    if (!items.length) return `<div class="empty">— ${Utils.esc(I18n.t("board.noActivity"))} —</div>`;
+    return items.slice(0, 300).map(it => {
+      const when = `<span class="fi-when js-rel" data-ts="${Utils.esc(it.at)}" title="${Utils.esc(Utils.absTime(it.at))}">${Utils.esc(Utils.relTime(it.at))}</span>`;
+      let head;
+      if (it.kindType === "history") {
+        const from = it.from ? `<span class="pill${Utils.pillClass(it.from)}" style="background:${COLOR[it.from] || "var(--muted)"}">${Utils.esc(it.from)}</span>` : "";
+        const to = it.to ? `<span class="pill${Utils.pillClass(it.to)}" style="background:${COLOR[it.to] || "var(--muted)"}">${Utils.esc(it.to)}</span>` : "";
+        head = `<span class="fi-type">${Utils.esc(it.type || "event")}</span> ${from}${(from && to) ? ` ${ICONS.arrow} ` : ""}${to}`;
+      } else {
+        head = it.kind ? `<span class="n-kind ${it.kind.cls}">${Utils.esc(it.kind.label)}</span>` : `<span class="n-kind k-other">note</span>`;
+      }
+      return `<div class="feed-item" data-id="${Utils.esc(it.taskId)}">
+        <div class="fi-top">${head}<span class="fi-task">${Utils.esc(it.taskTitle)}</span>${when}</div>
+        ${it.text ? `<div class="fi-text">${Utils.esc(it.text)}</div>` : ""}
+      </div>`;
+    }).join("");
+  }
+
+  sorter(sort) {
+    const dt = x => new Date(x || 0);
+    if (sort === "created") return (a, b) => dt(b.createdAt) - dt(a.createdAt);
+    if (sort === "title") return (a, b) => (a.title || "").localeCompare(b.title || "");
+    if (sort === "team") return (a, b) => (Utils.parseTeam(a) ?? 999) - (Utils.parseTeam(b) ?? 999);
+    return (a, b) => dt(b.lastActivityAt || b.updatedAt) - dt(a.lastActivityAt || a.updatedAt);
+  }
+
+  card(t, changeInfo) {
+    const ci = changeInfo.get(t.id);
+    const team = Utils.parseTeam(t);
+    const deps = Utils.parseDeps(t);
+    const chBadges = ci ? [
+      ci.isNew ? `<span class="badge ch">${Utils.esc(I18n.t("badge.new"))}</span>` : "",
+      ci.status ? `<span class="badge ch">⇄ ${Utils.esc(ci.status)}</span>` : "",
+      ci.notes ? `<span class="badge ch">${Utils.esc(I18n.t("badge.notes"))}</span>` : "",
+      ci.history ? `<span class="badge ch">${Utils.esc(I18n.t("badge.history"))}</span>` : "",
+      (ci.updated && !ci.status && !ci.notes && !ci.history) ? `<span class="badge ch">${Utils.esc(I18n.t("badge.updated"))}</span>` : "",
+    ].join("") : "";
+    const depBadges = deps.blockedBy.map(n => {
+      const blk = this.teamIndex.get(n);
+      const cls = deps.active ? "dep-active" : "dep-done";
+      return `<span class="badge ${cls}" data-team="${n}" title="${blk ? Utils.esc(blk.title) : "?"}">${deps.active ? "⛔" : "✅"} #${n}</span>`;
+    }).join("");
+    // #1 "Awaiting you" age badge on a review-status card (escalating emphasis).
+    let waitBadge = "";
+    if (t.status === "review") {
+      const since = Utils.statusSince(t);
+      const lvl = Utils.waitLevel(Utils.ageMs(since));
+      waitBadge = `<span class="badge await await-${lvl} js-wait" data-ts="${Utils.esc(since || "")}" title="${Utils.esc(I18n.t("board.waitingSince"))}">⏳ ${Utils.esc(Utils.relTime(since))}</span>`;
+    }
+    // #4 Latest-note phase badge (RESEARCH/PLAN/DECISION/IMPLEMENTATION), if recognized.
+    let kindBadge = "";
+    const lastNote = Utils.normDetailed(t.notes).slice(-1)[0];
+    const lk = lastNote ? Utils.noteKind(lastNote.text) : null;
+    if (lk) kindBadge = `<span class="kind-badge ${lk.cls}" title="latest note's phase">${Utils.esc(lk.label)}</span>`;
+    const moduleColor = t.module ? Utils.agentColor(t.module) : null;
+    const moduleBadge = t.module ? `<span class="badge module" style="border-color:${Utils.hexA(moduleColor, .4)};color:${moduleColor}">${Utils.esc(t.module)}</span>` : "";
+    const badges = (team ? `<span class="badge team">Team #${team}</span>` : "") + moduleBadge + waitBadge + kindBadge + chBadges + depBadges;
+    const upd = t.lastActivityAt || t.updatedAt;
+    const who = t.assignedAgentId || null;
+    const whoColor = Utils.agentColor(who);
+    const whoAvatar = `<span class="who-av" style="background:${Utils.hexA(whoColor, .16)};color:${whoColor}">${Utils.esc(Utils.agentShort(who))}</span>`;
+
+    // Done tasks: per the mockup, a slim row with a checkmark avatar — no description/badges, just the essentials.
+    if (t.status === "done") {
+      return `<div class="card card-done${ci ? " changed" : ""}" data-id="${Utils.esc(t.id)}">
+        <span class="done-check">${ICONS.check}</span>
+        <div class="card-done-main">
+          <div class="card-done-title">${badges ? `<span class="badges-inline">${badges}</span>` : ""}<span class="title-txt">${Utils.esc(t.title || t.id || "(untitled)")}</span></div>
+          <div class="card-done-meta">${whoAvatar}<span class="who-name">${Utils.esc(who || I18n.t("board.noOwner"))}</span>${upd ? `<span class="dot-sep"></span><span class="js-rel" data-ts="${Utils.esc(upd)}" title="${Utils.esc(Utils.absTime(upd))}">${Utils.esc(Utils.relTime(upd))}</span>` : ""}</div>
+        </div>
+      </div>`;
+    }
+
+    return `<div class="card${ci ? " changed" : ""}" data-id="${Utils.esc(t.id)}" style="border-left-color:${COLOR[t.status] || "var(--border)"}">
+      ${badges ? `<div class="badges">${badges}</div>` : ""}
+      <h3>${Utils.esc(t.title || t.id || "(untitled)")}</h3>
+      ${t.description ? `<p class="desc">${Utils.esc(t.description)}</p>` : ""}
+      <div class="meta">
+        ${who ? `<span class="tag agent">${whoAvatar}${Utils.esc(who)}</span>` : ""}
+        ${upd ? `<span class="tag" title="${Utils.esc(Utils.absTime(upd))}">${ICONS.clock} <span class="js-rel" data-ts="${Utils.esc(upd)}">${Utils.esc(Utils.relTime(upd))}</span></span>` : ""}
+      </div>
+      ${(t.status === "blocked" && Utils.norm(t.notes).length) ? `<div class="note">${ICONS.block} ${Utils.esc(Utils.norm(t.notes).slice(-1)[0])}</div>` : ""}
+    </div>`;
+  }
+
+  columnsHTML(tasks, { sort, collapsedCols, changeInfo }) {
+    const byStatus = {}; COLUMNS.forEach(c => byStatus[c.key] = []); const unknown = [];
+    tasks.forEach(t => (byStatus[t.status] || unknown).push(t));
+    const sf = this.sorter(sort);
+    let html = COLUMNS.map(c => {
+      const items = (byStatus[c.key] || []).sort(sf);
+      const col = collapsedCols.has(c.key);
+      return `<section class="col${col ? " collapsed" : ""}">
+        <div class="col-head" data-col="${c.key}">
+          <span class="swatch" style="background:${c.color}"></span>
+          <span class="col-title">${c.label}</span>
+          <span class="count">${items.length}</span>
+        </div>
+        <div class="col-body">${items.length ? items.map(t => this.card(t, changeInfo)).join("") : `<div class="empty">— ${Utils.esc(I18n.t("board.empty"))} —</div>`}</div>
+      </section>`;
+    }).join("");
+    if (unknown.length) html += `<section class="col"><div class="col-head"><span class="swatch" style="background:var(--border)"></span><span class="col-title">${Utils.esc(I18n.t("board.unknown"))}</span><span class="count">${unknown.length}</span></div><div class="col-body">${unknown.map(t => this.card(t, changeInfo)).join("")}</div></section>`;
+    return html;
+  }
+
+  /**
+   * @param allTasks - the full (unfiltered) task list from the last poll
+   * @param state - { q, agentFilter, moduleFilter, sort, view, compact, collapsedCols, changeInfo }
+   */
+  render(allTasks, state) {
+    const { sort, view, compact, collapsedCols, changeInfo } = state;
+    const tasks = this.visibleTasks(allTasks, state);
+
+    this.teamIndex = new Map();
+    allTasks.forEach(t => { const n = Utils.parseTeam(t); if (n != null) this.teamIndex.set(n, t); });
+
+    // Stats + cycle time
+    const counts = Object.fromEntries(COLUMNS.map(c => [c.key, 0]));
+    tasks.forEach(t => { if (counts[t.status] != null) counts[t.status]++; });
+    const total = tasks.length, done = counts.done || 0, pct = total ? Math.round(done / total * 100) : 0;
+    const cyc = tasks.map(Utils.cycle);
+    const leads = cyc.filter(c => c.leadMs != null).map(c => c.leadMs);
+    const ips = cyc.filter(c => c.inProgressMs > 0).map(c => c.inProgressMs);
+    const avg = a => a.length ? a.reduce((x, y) => x + y, 0) / a.length : null;
+    // Distribution bar: every status as its own colored segment, proportionally (the mockup's
+    // "dist" bar) instead of a plain "% done" bar — the whole status distribution is visible
+    // at a glance.
+    const distSegs = COLUMNS.filter(c => counts[c.key] > 0);
+    const distHTML = distSegs.map((c, i) => {
+      const isFirst = i === 0, isLast = i === distSegs.length - 1;
+      const r = isFirst && isLast ? "4px" : isFirst ? "4px 0 0 4px" : isLast ? "0 4px 4px 0" : "0";
+      return `<i style="flex:${counts[c.key]} 1 0;background:${c.color};border-radius:${r}"></i>`;
+    }).join("");
+    this.dom.stats.innerHTML =
+      `<span class="stat">${I18n.t("board.tasks", { n: `<b>${total}</b>` })}</span>` +
+      COLUMNS.map(c => `<span class="stat"><span class="swatch" style="background:${c.color}"></span>${c.label}: <b>${counts[c.key]}</b></span>`).join("") +
+      `<span class="sep"></span>` +
+      `<span class="stat">${ICONS.clock} ${Utils.esc(I18n.t("board.leadAvg"))}: <b>${Utils.dur(avg(leads))}</b></span>` +
+      `<span class="stat">${ICONS.activity} ${Utils.esc(I18n.t("board.inProgressAvg"))}: <b>${Utils.dur(avg(ips))}</b></span>` +
+      `<div class="progress" title="${done}/${total}">${distHTML}</div><span class="progress-label">${Utils.esc(I18n.t("board.percentDone", { p: pct }))}</span>`;
+
+    // Agent chips + load bar (stable, per-agent color + avatar abbreviation, per the mockup)
+    const totalBy = {}, activeBy = {};
+    allTasks.filter(t => !t.isArchived).forEach(t => { const a = Utils.agentKey(t); totalBy[a] = (totalBy[a] || 0) + 1; if (t.status !== "done") activeBy[a] = (activeBy[a] || 0) + 1; });
+    const agents = Object.keys(totalBy).sort();
+    const maxA = Math.max(1, ...agents.map(a => activeBy[a] || 0));
+    if (this.dom.agentsCount) this.dom.agentsCount.textContent = I18n.t("agents.active", { n: agents.filter(a => activeBy[a] > 0).length });
+    this.dom.agents.innerHTML = agents.map(a => {
+      const on = !state.agentFilter || state.agentFilter.has(a); const act = activeBy[a] || 0;
+      const c = Utils.agentColor(a);
+      const borderA = on ? (act ? .4 : .15) : .07;
+      return `<button class="agent-chip${on ? " on" : ""}" data-agent="${Utils.esc(a)}" style="border-color:${Utils.hexA(c, borderA)}">
+        <span class="ac-avatar" style="background:${Utils.hexA(c, .16)};color:${c}">${Utils.esc(Utils.agentShort(a))}</span>
+        <span class="ac-info">
+          <span class="ac-top">${Utils.esc(a)}<span class="ac-count">${act}/${totalBy[a]}</span></span>
+          <span class="ac-bar"><i style="width:${Math.round(act / maxA * 100)}%;background:${c}"></i></span>
+        </span>
+      </button>`;
+    }).join("") + (state.agentFilter ? `<button class="agent-chip" data-agent="__all__"><span class="ac-avatar">•</span><span class="ac-info"><span class="ac-top">${Utils.esc(I18n.t("agents.all"))}</span></span></button>` : "");
+
+    // Board / Swimlane / Feed
+    if (view === "feed") {
+      this.dom.board.className = "board feed";
+      this.dom.board.innerHTML = this.feedHTML(tasks);
+    } else if (view === "swim") {
+      this.dom.board.className = "board swim" + (compact ? " compact" : "");
+      const laneAgents = [...new Set(tasks.map(Utils.agentKey))].sort();
+      this.dom.board.innerHTML = laneAgents.map(a => {
+        const lt = tasks.filter(t => Utils.agentKey(t) === a);
+        const act = lt.filter(t => t.status !== "done").length;
+        return `<div class="lane"><div class="lane-head">${ICONS.user} ${Utils.esc(a)} <span class="mut">· ${Utils.esc(I18n.t("board.tasks", { n: lt.length }))} · ${act} ${Utils.esc(I18n.t("ctrl.quick.active")).toLowerCase()}</span></div><div class="lane-cols">${this.columnsHTML(lt, state)}</div></div>`;
+      }).join("") || `<div class="empty">— ${Utils.esc(I18n.t("board.noTasks"))} —</div>`;
+    } else {
+      this.dom.board.className = "board" + (compact ? " compact" : "");
+      this.dom.board.innerHTML = this.columnsHTML(tasks, state);
+    }
+  }
+}

package/js/ContextPanel.js

@@ -0,0 +1,47 @@
+import { Utils } from "./Utils.js";
+import { I18n } from "./i18n.js";
+
+/**
+ * User context panel ("📌 Context"): renders context.json's contents (goal, focus, init
+ * prompt, constraints, decision timeline, open questions, notes), and badges the opening
+ * button with the decision count.
+ */
+export class ContextPanel {
+  constructor(dom) {
+    this.dom = dom; // { ctxBtn, ctxOverlay, ctxClose, ctxBody, ctxUpdated }
+  }
+
+  renderButton(context) {
+    const n = context && Array.isArray(context.decisions) ? context.decisions.length : 0;
+    this.dom.ctxBtn.classList.toggle("has", n > 0);
+    if (n > 0) this.dom.ctxBtn.dataset.n = n; else delete this.dom.ctxBtn.dataset.n;
+  }
+
+  renderBody(context) {
+    const c = context;
+    if (!c) {
+      this.dom.ctxUpdated.textContent = "";
+      this.dom.ctxBody.innerHTML = `<p class="mut">${I18n.t("ctx.none")}</p>`;
+      return;
+    }
+    this.dom.ctxUpdated.textContent = c.updatedAt ? I18n.t("ctx.updated", { t: Utils.relTime(c.updatedAt) }) : "";
+    const decisions = (Array.isArray(c.decisions) ? c.decisions : []).slice().sort((a, b) => new Date(b.at || 0) - new Date(a.at || 0));
+    const list = (arr, empty) => (Array.isArray(arr) && arr.length) ? `<ul class="ctx-list">${arr.map(x => `<li>${Utils.esc(x)}</li>`).join("")}</ul>` : `<p class="mut">${empty}</p>`;
+    this.dom.ctxBody.innerHTML =
+      (c.goal ? `<h4>${Utils.esc(I18n.t("ctx.goal"))}</h4><p>${Utils.esc(c.goal)}</p>` : "") +
+      (c.currentFocus ? `<h4>${Utils.esc(I18n.t("ctx.currentFocus"))}</h4><p>${Utils.esc(c.currentFocus)}</p>` : "") +
+      `<h4>${Utils.esc(I18n.t("ctx.initPrompt"))}</h4>` + (c.initPrompt ? `<div class="ctx-quote">${Utils.esc(c.initPrompt)}</div>` : `<p class="mut">—</p>`) +
+      `<h4>${Utils.esc(I18n.t("ctx.constraints"))}</h4>` + list(c.constraints, I18n.t("ctx.noConstraints")) +
+      `<h4>${Utils.esc(I18n.t("ctx.decisions", { n: decisions.length }))}</h4>` +
+      (decisions.length ? decisions.map(d => `<div class="decision">
+        <div class="d-top"><span class="d-topic">${Utils.esc(d.topic || "decision")}</span><span class="d-when" title="${Utils.esc(Utils.absTime(d.at))}">${Utils.esc(Utils.relTime(d.at))}</span></div>
+        <div>${Utils.esc(d.decision || "")}</div>
+        ${d.rationale ? `<div class="d-rat">↳ ${Utils.esc(d.rationale)}</div>` : ""}
+      </div>`).join("") : `<p class="mut">${Utils.esc(I18n.t("ctx.noDecisions"))}</p>`) +
+      `<h4>${Utils.esc(I18n.t("ctx.openQuestions"))}</h4>` + list(c.openQuestions, I18n.t("ctx.noOpenQuestions")) +
+      (c.notes ? `<h4>${Utils.esc(I18n.t("ctx.notes"))}</h4><p>${Utils.esc(c.notes)}</p>` : "");
+  }
+
+  show() { this.dom.ctxOverlay.classList.add("show"); }
+  hide() { this.dom.ctxOverlay.classList.remove("show"); }
+}

package/js/ContextStore.js

@@ -0,0 +1,39 @@
+/**
+ * Polls context.json (conditional GET, Last-Modified based) — the source of the user
+ * session context (goal, focus, decisions, open questions).
+ * context.json lives alongside tasks.json (derived by ctxUrl()).
+ */
+export class ContextStore {
+  constructor(getSrcUrl) {
+    this.getSrcUrl = getSrcUrl; // () => string – the tasks.json source URL (input#src value)
+    this.lastModified = null;
+    this.context = null;
+  }
+
+  reset() {
+    this.lastModified = null;
+    this.context = null;
+  }
+
+  ctxUrl() {
+    const s = this.getSrcUrl().trim();
+    if (/tasks\.json(\?.*)?$/.test(s)) return s.replace(/tasks\.json(\?.*)?$/, "context.json");
+    return s.replace(/[^\/?#]*([?#].*)?$/, "context.json");
+  }
+
+  /** The context is optional – silently swallows errors/404. Returns { changed }. */
+  async poll() {
+    try {
+      const headers = {}; if (this.lastModified) headers["If-Modified-Since"] = this.lastModified;
+      const res = await fetch(this.ctxUrl(), { cache: "no-store", headers });
+      if (res.status === 304) return { changed: false };
+      if (res.status === 404) { this.context = null; return { changed: true }; }
+      if (!res.ok) return { changed: false };
+      this.lastModified = res.headers.get("Last-Modified") || this.lastModified;
+      this.context = JSON.parse(await res.text());
+      return { changed: true };
+    } catch (e) {
+      return { changed: false };
+    }
+  }
+}

package/js/ProjectStore.js

@@ -0,0 +1,27 @@
+/**
+ * ProjectStore — a one-shot load and cache of data/projects.json (registered projects).
+ * Registration itself happens on the host, via `engine/projects.sh add`; the board only
+ * DISPLAYS the already-registered projects (Source selector + wrapper copying).
+ */
+export class ProjectStore {
+  constructor() {
+    this.projects = [];
+  }
+
+  /** Loads data/projects.json. Returns an empty list on error/absence (the board reports this). */
+  async load() {
+    try {
+      const res = await fetch("data/projects.json", { cache: "no-store" });
+      if (!res.ok) throw new Error("HTTP " + res.status);
+      const data = await res.json();
+      this.projects = Array.isArray(data) ? data : [];
+    } catch (e) {
+      this.projects = [];
+    }
+    return this.projects;
+  }
+
+  get(id) {
+    return this.projects.find(p => p.id === id) || null;
+  }
+}

package/js/TaskModal.js

@@ -0,0 +1,112 @@
+import { Utils, COLOR } from "./Utils.js";
+import { I18n } from "./i18n.js";
+
+/**
+ * Task detail modal: description, cycle-time metrics, dependencies (both directions),
+ * data (kv list), notes, and the history timeline.
+ */
+export class TaskModal {
+  constructor(dom) {
+    this.dom = dom; // { overlay, mTitle, mBody, mClose }
+  }
+
+  /**
+   * Interactive action bar: primary actions matching the task's status (on review:
+   * Approved / Changes needed / Block), quick status buttons, priority/module/assignment,
+   * and a feedback field. Markup only carries data attributes — clicks are handled by App,
+   * and task.sh writes the JSON via api/index.php (the browser never writes directly).
+   */
+  actionsHTML(t, opts) {
+    if (!opts || !opts.writeEnabled) return "";
+    const s = t.status;
+    const btn = (act, label, cls = "") => `<button type="button" class="act-btn ${cls}" data-act="${act}">${label}</button>`;
+    let primary = "";
+    if (s === "review") {
+      primary =
+        btn("approve", I18n.t("modal.approve"), "act-approve") +
+        btn("changes", I18n.t("modal.changes"), "act-changes") +
+        btn("block", I18n.t("modal.block"), "act-block");
+    } else if (s === "done") {
+      primary = btn("reopen", I18n.t("modal.reopen"), "act-reopen");
+    } else {
+      primary =
+        (s !== "in_progress" ? btn("start", I18n.t("modal.start")) : "") +
+        btn("review", I18n.t("modal.toReview")) +
+        btn("done", I18n.t("modal.done"), "act-approve") +
+        btn("block", I18n.t("modal.block"), "act-block");
+    }
+    const prios = ["low", "normal", "high", "urgent"];
+    const cur = t.priority || "normal";
+    const agents = (opts.agents || []).filter(a => a && a !== "—");
+    const agentOpts = agents.map(a => `<option value="${Utils.esc(a)}"></option>`).join("");
+    const modules = (opts.modules || []).filter(Boolean);
+    const moduleOpts = modules.map(m => `<option value="${Utils.esc(m)}"></option>`).join("");
+    return `<div class="actions" data-id="${Utils.esc(t.id)}">
+      <div class="act-row act-primary">${primary}</div>
+      <textarea class="act-note" id="actNote" rows="2" placeholder="${Utils.esc(I18n.t("modal.notePlaceholder"))}"></textarea>
+      <div class="act-row act-fields">
+        <button type="button" class="act-btn act-note-add" data-act="note">${Utils.esc(I18n.t("modal.addNote"))}</button>
+        <label class="act-field">${Utils.esc(I18n.t("modal.priority"))}
+          <select class="act-input" data-field="priority">${prios.map(p => `<option value="${p}"${p === cur ? " selected" : ""}>${p}</option>`).join("")}</select>
+        </label>
+        <label class="act-field">${Utils.esc(I18n.t("modal.module"))}
+          <input class="act-input" data-field="module" list="modalModuleList" value="${Utils.esc(t.module || "")}" placeholder="${Utils.esc(I18n.t("modal.modulePlaceholder"))}" spellcheck="false" autocomplete="off">
+          <datalist id="modalModuleList">${moduleOpts}</datalist>
+        </label>
+        <label class="act-field">${Utils.esc(I18n.t("modal.agent"))}
+          <input class="act-input" data-field="assign" list="modalAgentList" value="${Utils.esc(t.assignedAgentId || "")}" placeholder="${Utils.esc(I18n.t("modal.agentPlaceholder"))}" spellcheck="false" autocomplete="off">
+          <datalist id="modalAgentList">${agentOpts}</datalist>
+        </label>
+      </div>
+    </div>`;
+  }
+
+  /**
+   * @param t - the task to display
+   * @param teamIndex - Map<teamNo, task> (BoardView.teamIndex) for dep links
+   * @param allTasks - the full task list (to look up the "blocks this" relation)
+   * @param opts - { writeEnabled, agents, modules } : for the interactive action bar
+   */
+  render(t, teamIndex, allTasks, opts = {}) {
+    this.dom.mTitle.innerHTML = `${Utils.esc(t.title || t.id)} <span class="pill${Utils.pillClass(t.status)}" style="background:${COLOR[t.status] || "var(--muted)"}">${Utils.esc(t.status)}</span>`;
+    const notes = Utils.normDetailed(t.notes), c = Utils.cycle(t), team = Utils.parseTeam(t), deps = Utils.parseDeps(t);
+    const blocks = []; allTasks.forEach(x => { const d = Utils.parseDeps(x); if (team != null && d.blockedBy.includes(team)) blocks.push(x); });
+    const kv = [
+      [I18n.t("modal.kv.id"), t.id], [I18n.t("modal.kv.team"), team != null ? "#" + team : null],
+      [I18n.t("modal.kv.agent"), t.assignedAgentId], [I18n.t("modal.kv.module"), t.module],
+      [I18n.t("modal.kv.channel"), t.channel],
+      [I18n.t("modal.kv.source"), t.source], [I18n.t("modal.kv.thread"), t.externalThreadId],
+      [I18n.t("modal.kv.created"), t.createdAt ? `${Utils.absTime(t.createdAt)} (${Utils.relTime(t.createdAt)})` : null],
+      [I18n.t("modal.kv.updated"), t.updatedAt ? `${Utils.absTime(t.updatedAt)} (${Utils.relTime(t.updatedAt)})` : null],
+      [I18n.t("modal.kv.lastActivity"), t.lastActivityAt ? `${Utils.absTime(t.lastActivityAt)} (${Utils.relTime(t.lastActivityAt)})` : null],
+    ].filter(r => r[1] != null && r[1] !== "");
+    const depLink = n => { const b = teamIndex.get(n); return `<span class="badge dep-active deplink" data-team="${n}">#${n}${b ? " " + Utils.esc((b.title || "").slice(0, 28)) : ""}</span>`; };
+    const history = Array.isArray(t.history) ? t.history.slice().sort((a, b) => new Date(a.at) - new Date(b.at)) : [];
+
+    this.dom.mBody.innerHTML =
+      this.actionsHTML(t, opts) +
+      (t.description ? `<p class="desc-full">${Utils.esc(t.description)}</p>` : "") +
+      `<div class="metrics">
+        <div class="metric">⏱ ${Utils.esc(I18n.t("modal.metric.lead"))}<b>${Utils.dur(c.leadMs)}</b></div>
+        <div class="metric">🔧 ${Utils.esc(I18n.t("modal.metric.inProgress"))}<b>${Utils.dur(c.inProgressMs || null)}</b></div>
+        <div class="metric">📌 ${Utils.esc(I18n.t("modal.metric.status"))}<b>${Utils.esc(t.status)}</b></div>
+      </div>` +
+      ((deps.blockedBy.length || blocks.length) ? `<h4>${Utils.esc(I18n.t("modal.dependencies"))}</h4>` : "") +
+      (deps.blockedBy.length ? `<div class="row"><span class="lbl">${Utils.esc(deps.active ? I18n.t("modal.blockedBy") : I18n.t("modal.wasBlockedBy"))}</span> <span class="deplinks">${deps.blockedBy.map(depLink).join("")}</span></div>` : "") +
+      (blocks.length ? `<div class="row"><span class="lbl">${Utils.esc(I18n.t("modal.blocks"))}</span> <span class="deplinks">${blocks.map(b => `<span class="badge dep-active deplink" data-task="${Utils.esc(b.id)}">${Utils.esc(b.title.slice(0, 32))}</span>`).join("")}</span></div>` : "") +
+      `<h4>${Utils.esc(I18n.t("modal.data"))}</h4><dl class="kv">${kv.map(([k, v]) => `<dt>${Utils.esc(k)}</dt><dd>${Utils.esc(v)}${k === I18n.t("modal.kv.id") ? ` <button type="button" class="copy-id" data-copy="${Utils.esc(v)}" title="${Utils.esc(I18n.t("modal.copyIdTitle"))}">${Utils.esc(I18n.t("modal.copyId"))}</button>` : ""}</dd>`).join("")}</dl>` +
+      (notes.length ? `<h4>${Utils.esc(I18n.t("modal.notes", { n: notes.length }))}</h4><ul class="notes">${notes.map(n => {
+        const k = Utils.noteKind(n.text);
+        const top = (k || n.at) ? `<div class="n-top">${k ? `<span class="n-kind ${k.cls}">${Utils.esc(k.label)}</span>` : ""}${n.at ? `<span class="n-when" title="${Utils.esc(Utils.absTime(n.at))}">${Utils.esc(Utils.relTime(n.at))}</span>` : ""}</div>` : "";
+        return `<li class="note-item">${top}<div class="n-text">${Utils.esc(n.text)}</div></li>`;
+      }).join("")}</ul>` : "") +
+      (history.length ? `<h4>${Utils.esc(I18n.t("modal.history", { n: history.length }))}</h4><ul class="timeline">${history.map(h => {
+        const from = h.fromStatus ? `<span class="pill${Utils.pillClass(h.fromStatus)}" style="background:${COLOR[h.fromStatus] || "var(--muted)"}">${Utils.esc(h.fromStatus)}</span> → ` : "";
+        const to = h.toStatus ? `<span class="pill${Utils.pillClass(h.toStatus)}" style="background:${COLOR[h.toStatus] || "var(--muted)"}">${Utils.esc(h.toStatus)}</span>` : "";
+        return `<li><div class="when">${Utils.esc(Utils.absTime(h.at))} · ${Utils.esc(Utils.relTime(h.at))}</div><div class="trans">${Utils.esc(h.type || "")} ${from}${to}</div>${h.note ? `<div class="note2">${Utils.esc(h.note)}</div>` : ""}</li>`;
+      }).join("")}</ul>` : "");
+  }
+
+  show() { this.dom.overlay.classList.add("show"); }
+  hide() { this.dom.overlay.classList.remove("show"); }
+}

package/js/TaskStore.js

@@ -0,0 +1,73 @@
+import { Utils } from "./Utils.js";
+
+/**
+ * Polls tasks.json with conditional GET (ETag / Last-Modified), and computes the diff
+ * between two polls (status change / +note / +history / updated / new).
+ */
+export class TaskStore {
+  constructor(getUrl) {
+    this.getUrl = getUrl;           // () => string – the current source URL
+    this.etag = null;
+    this.lastModified = null;
+    this.currentTasks = [];
+    this.prevTasksById = new Map(); // full tasks from the previous poll (for diffing)
+    this.changeInfo = new Map();    // id -> {status,notes,history,updated,isNew}
+    this.renderedOnce = false;
+  }
+
+  reset() {
+    this.etag = null;
+    this.lastModified = null;
+    this.prevTasksById = new Map();
+    this.currentTasks = [];
+    this.renderedOnce = false;
+    this.changeInfo = new Map();
+  }
+
+  static diff(prev, cur) {
+    if (!prev) return { isNew: true };
+    const ch = {};
+    if (prev.status !== cur.status) ch.status = `${prev.status}→${cur.status}`;
+    if (Utils.norm(prev.notes).length !== Utils.norm(cur.notes).length) ch.notes = true;
+    if ((prev.history || []).length !== (cur.history || []).length) ch.history = true;
+    if (prev.updatedAt !== cur.updatedAt) ch.updated = true;
+    return Object.keys(ch).length ? ch : null;
+  }
+
+  /** One poll cycle. Returns { notModified } or { tasks, shouldRender, changeCount }. Throws on error. */
+  async poll() {
+    const url = this.getUrl();
+    const headers = {};
+    if (this.etag) headers["If-None-Match"] = this.etag;
+    if (this.lastModified) headers["If-Modified-Since"] = this.lastModified;
+
+    const res = await fetch(url, { cache: "no-store", headers });
+    if (res.status === 304) return { notModified: true };
+    if (!res.ok) throw new Error("HTTP " + res.status);
+
+    this.etag = res.headers.get("ETag") || this.etag;
+    this.lastModified = res.headers.get("Last-Modified") || this.lastModified;
+
+    const text = await res.text();
+    let data;
+    try { data = JSON.parse(text); } catch (e) { throw new Error("Invalid JSON in the file"); }
+
+    const tasks = Array.isArray(data.tasks) ? data.tasks : [];
+    this.changeInfo = new Map();
+    if (this.prevTasksById.size) {
+      tasks.forEach(t => {
+        const c = TaskStore.diff(this.prevTasksById.get(t.id), t);
+        if (c) this.changeInfo.set(t.id, c);
+      });
+    }
+    const countChanged = tasks.length !== this.currentTasks.length;
+    this.currentTasks = tasks;
+    this.prevTasksById = new Map(tasks.map(t => [t.id, JSON.parse(JSON.stringify(t))]));
+
+    const shouldRender = !this.renderedOnce || this.changeInfo.size > 0 || countChanged;
+    return { notModified: false, tasks, shouldRender, changeCount: this.changeInfo.size };
+  }
+
+  /** Marks that at least one render has happened, so subsequent diffs are computed against it. */
+  markRendered() { this.renderedOnce = true; }
+}

package/js/UrlState.js

@@ -0,0 +1,53 @@
+/**
+ * Reads/writes URL query-string + localStorage state.
+ * Deep-link parameters: ?project=&lang=&task=<id>&agent=&module=&q=&sort=&view=&compact=1
+ * project/lang make the board's URL directly shareable/bookmarkable to a specific project
+ * in a specific language — the initial state is read from the URL first, falling back to
+ * localStorage. localStorage keys preserve the view across sessions (tm.src, tm.project,
+ * tm.lang, tm.interval, tm.sort, tm.view, tm.compact, tm.collapsed).
+ */
+export class UrlState {
+  /** Reads the initial state from the URL + localStorage. */
+  static read() {
+    const p = new URL(location.href).searchParams;
+    return {
+      project: p.get("project") || null,
+      lang: p.get("lang") || null,
+      q: p.get("q") || "",
+      sort: p.get("sort") || localStorage.getItem("tm.sort") || "activity",
+      view: p.get("view") || localStorage.getItem("tm.view") || "board",
+      compact: p.get("compact") === "1" || (!p.has("compact") && localStorage.getItem("tm.compact") === "1"),
+      agentFilter: p.has("agent") ? new Set(p.get("agent").split(",").filter(Boolean)) : null,
+      moduleFilter: p.get("module") || null,
+      quickFilter: p.get("quick") || null,
+      pendingTask: p.get("task") || null,
+      collapsedCols: new Set(JSON.parse(localStorage.getItem("tm.collapsed") || "[]")),
+      src: localStorage.getItem("tm.src"),
+      interval: localStorage.getItem("tm.interval"),
+    };
+  }
+
+  /** Writes the current filter/view state back into the URL (history.replaceState). */
+  static sync({ q, agentFilter, moduleFilter, quickFilter, sort, view, compact, openTaskId, project, lang }) {
+    const p = new URLSearchParams();
+    if (project) p.set("project", project);
+    if (lang && lang !== "en") p.set("lang", lang);
+    if (q && q.trim()) p.set("q", q.trim());
+    if (agentFilter) p.set("agent", [...agentFilter].join(","));
+    if (moduleFilter) p.set("module", moduleFilter);
+    if (quickFilter) p.set("quick", quickFilter);
+    if (sort !== "activity") p.set("sort", sort);
+    if (view !== "board") p.set("view", view);
+    if (compact) p.set("compact", "1");
+    if (openTaskId) p.set("task", openTaskId);
+    const qs = p.toString();
+    history.replaceState(null, "", location.pathname + (qs ? "?" + qs : ""));
+  }
+
+  static setSrc(v) { localStorage.setItem("tm.src", v); }
+  static setInterval(v) { localStorage.setItem("tm.interval", v); }
+  static setSort(v) { localStorage.setItem("tm.sort", v); }
+  static setView(v) { localStorage.setItem("tm.view", v); }
+  static setCompact(v) { localStorage.setItem("tm.compact", v ? "1" : "0"); }
+  static setCollapsed(set) { localStorage.setItem("tm.collapsed", JSON.stringify([...set])); }
+}