@nklisch/pi-agile-workflow 0.15.3

package/work-view/crates/cli/src/board/assets/state.js

@@ -0,0 +1,245 @@
+import {
+  cloneFilters,
+  matchesFilters,
+  normalizeFilterValue,
+  normalizeFilters,
+  serializeFilters,
+} from "/assets/filters.js";
+
+const STORAGE_KEY = "agile-workflow-board:v1";
+const VIEWS = new Set(["kanban", "dependency", "table"]);
+const ACCENTS = new Set(["teal", "amber", "violet", "azure", "lime", "candy"]);
+const MODES = new Set(["system", "light", "dark"]);
+
+function defaultTheme() {
+  return {
+    accent: "teal",
+    mode: "system",
+  };
+}
+
+function loadPersisted(storage) {
+  if (!storage) {
+    return {};
+  }
+  try {
+    const raw = storage.getItem(STORAGE_KEY);
+    if (!raw) {
+      return {};
+    }
+    const parsed = JSON.parse(raw);
+    if (!parsed || typeof parsed !== "object") {
+      return {};
+    }
+    return parsed;
+  } catch (_error) {
+    return {};
+  }
+}
+
+function validateView(view) {
+  return VIEWS.has(view) ? view : "kanban";
+}
+
+function validateTheme(raw) {
+  const theme = defaultTheme();
+  if (!raw || typeof raw !== "object") {
+    return theme;
+  }
+  if (ACCENTS.has(raw.accent)) {
+    theme.accent = raw.accent;
+  }
+  if (MODES.has(raw.mode)) {
+    theme.mode = raw.mode;
+  }
+  return theme;
+}
+
+function normalizeSnapshot(snapshot) {
+  if (!snapshot || typeof snapshot !== "object") {
+    throw new Error("Substrate feed was not a JSON object");
+  }
+  if (!Array.isArray(snapshot.items)) {
+    throw new Error("Substrate feed did not include an items array");
+  }
+
+  const items = snapshot.items.map((item) => (item && typeof item === "object" ? item : {}));
+  const diagnostics = snapshot.diagnostics && typeof snapshot.diagnostics === "object"
+    ? snapshot.diagnostics
+    : {};
+  const clientDuplicateIds = duplicateIds(items);
+
+  return {
+    ...snapshot,
+    items,
+    diagnostics: {
+      parse_errors: Array.isArray(diagnostics.parse_errors) ? diagnostics.parse_errors : [],
+      validation_warnings: Array.isArray(diagnostics.validation_warnings) ? diagnostics.validation_warnings : [],
+      duplicate_ids: Array.isArray(diagnostics.duplicate_ids) ? diagnostics.duplicate_ids : [],
+      client_duplicate_ids: clientDuplicateIds,
+    },
+  };
+}
+
+function duplicateIds(items) {
+  const seen = new Set();
+  const duplicates = new Set();
+  for (const item of items) {
+    if (typeof item.id !== "string" || item.id === "") {
+      continue;
+    }
+    if (seen.has(item.id)) {
+      duplicates.add(item.id);
+    }
+    seen.add(item.id);
+  }
+  return Array.from(duplicates).sort();
+}
+
+export function createBoardStore({ storage = globalThis.localStorage, fetchJson, root = document } = {}) {
+  const persisted = loadPersisted(storage);
+  const listeners = new Set();
+  const requestJson = fetchJson || ((url) => fetch(url).then((response) => {
+    if (!response.ok) {
+      throw new Error(`GET ${url} failed with ${response.status}`);
+    }
+    return response.json();
+  }));
+
+  let state = {
+    snapshot: null,
+    loading: false,
+    error: null,
+    view: validateView(persisted.view),
+    selectedItemId: null,
+    filters: normalizeFilters(persisted.filters),
+    theme: validateTheme(persisted.theme),
+  };
+
+  function getState() {
+    return {
+      ...state,
+      filters: cloneFilters(state.filters),
+      theme: { ...state.theme },
+    };
+  }
+
+  function notify() {
+    const publicState = getState();
+    for (const listener of listeners) {
+      listener(publicState);
+    }
+  }
+
+  function persist() {
+    if (!storage) {
+      return;
+    }
+    try {
+      storage.setItem(STORAGE_KEY, JSON.stringify({
+        view: state.view,
+        filters: serializeFilters(state.filters),
+        theme: state.theme,
+      }));
+    } catch (_error) {
+      // Storage can be unavailable in private browsing; the board still works.
+    }
+  }
+
+  function subscribe(fn) {
+    listeners.add(fn);
+    return () => listeners.delete(fn);
+  }
+
+  async function refresh() {
+    state = { ...state, loading: true, error: null };
+    notify();
+    try {
+      const snapshot = normalizeSnapshot(await requestJson("/api/substrate"));
+      const selectedItemId = state.selectedItemId && snapshot.items.some((item) => item.id === state.selectedItemId)
+        ? state.selectedItemId
+        : null;
+      state = { ...state, snapshot, selectedItemId, loading: false, error: null };
+    } catch (error) {
+      state = {
+        ...state,
+        loading: false,
+        error: error instanceof Error ? error.message : String(error),
+      };
+    }
+    notify();
+  }
+
+  function setView(id) {
+    const view = validateView(id);
+    if (state.view === view) {
+      return;
+    }
+    state = { ...state, view };
+    persist();
+    notify();
+  }
+
+  function setTheme(partial) {
+    const next = validateTheme({ ...state.theme, ...(partial || {}) });
+    if (state.theme.accent === next.accent && state.theme.mode === next.mode) {
+      return;
+    }
+    state = { ...state, theme: next };
+    persist();
+    notify();
+  }
+
+  function setFilter(key, value) {
+    const filters = cloneFilters(state.filters);
+    filters[key] = normalizeFilterValue(key, value);
+    state = { ...state, filters };
+    persist();
+    notify();
+  }
+
+  function setSelectedItem(id) {
+    const selectedItemId = id && state.snapshot?.items.some((item) => item.id === id)
+      ? String(id)
+      : null;
+    if (state.selectedItemId === selectedItemId) {
+      return;
+    }
+    state = { ...state, selectedItemId };
+    notify();
+  }
+
+  function matches(item) {
+    return matchesFilters(item, state.filters, state.snapshot);
+  }
+
+  function visibleItems() {
+    return state.snapshot ? state.snapshot.items.filter(matches) : [];
+  }
+
+  function getItemById(id) {
+    if (!state.snapshot) {
+      return null;
+    }
+    return state.snapshot.items.find((item) => item.id === id) || null;
+  }
+
+  root?.addEventListener?.("visibilitychange", () => {
+    if (root.visibilityState === "visible" && !state.snapshot && !state.loading) {
+      void refresh();
+    }
+  });
+
+  return {
+    getState,
+    subscribe,
+    refresh,
+    setView,
+    setTheme,
+    setFilter,
+    setSelectedItem,
+    visibleItems,
+    matches,
+    getItemById,
+  };
+}

package/work-view/crates/cli/src/board/assets/table.js

@@ -0,0 +1,304 @@
+import { deriveFilterOptions } from "/assets/filters.js";
+
+const COLUMNS = [
+  { id: "id", label: "id", className: "mono" },
+  { id: "kind", label: "kind" },
+  { id: "stage", label: "stage" },
+  { id: "status", label: "status" },
+  { id: "parent", label: "parent", className: "mono" },
+  { id: "depends_on", label: "depends_on", className: "mono" },
+  { id: "updated", label: "updated", className: "mono" },
+];
+const STATUS_ORDER = ["blocked", "ready", "active", "done"];
+
+let sortState = null;
+let pendingHeaderFocus = null;
+let pendingFilterFocus = null;
+const columnFilters = new Map();
+
+function textElement(tag, className, text) {
+  const element = document.createElement(tag);
+  if (className) {
+    element.className = className;
+  }
+  element.textContent = text;
+  return element;
+}
+
+function arrayCount(value) {
+  return Array.isArray(value) ? value.length : 0;
+}
+
+function statusFor(item) {
+  if (item?.blocked) {
+    return "blocked";
+  }
+  if (item?.ready) {
+    return "ready";
+  }
+  if (item?.is_terminal || item?.stage === "done" || item?.stage === "released") {
+    return "done";
+  }
+  return "active";
+}
+
+function compareText(left, right) {
+  return String(left || "").localeCompare(String(right || ""));
+}
+
+function compareNumber(left, right) {
+  return left === right ? 0 : left < right ? -1 : 1;
+}
+
+function updatedTime(item) {
+  const time = Date.parse(item?.updated || "");
+  return Number.isNaN(time) ? 0 : time;
+}
+
+function dependencySortValue(item) {
+  return arrayCount(item?.unmet_deps) * 10000 + arrayCount(item?.depends_on);
+}
+
+function stageIndex(snapshot, stage) {
+  const stages = deriveFilterOptions(snapshot).stages;
+  const index = stages.indexOf(stage || "");
+  return index === -1 ? stages.length : index;
+}
+
+export function tableValue(item, columnId) {
+  switch (columnId) {
+    case "id":
+      return item?.id || "";
+    case "kind":
+      return item?.kind || "";
+    case "stage":
+      return item?.stage || "";
+    case "status":
+      return statusFor(item);
+    case "parent":
+      return item?.parent || "—";
+    case "depends_on": {
+      const total = arrayCount(item?.depends_on);
+      const unmet = arrayCount(item?.unmet_deps);
+      return unmet > 0 ? `${unmet}/${total} unmet` : String(total);
+    }
+    case "updated":
+      return item?.updated || "";
+    default:
+      return "";
+  }
+}
+
+export function compareRows(left, right, columnId, snapshot) {
+  switch (columnId) {
+    case "status":
+      return compareNumber(STATUS_ORDER.indexOf(statusFor(left)), STATUS_ORDER.indexOf(statusFor(right)));
+    case "stage":
+      return compareNumber(stageIndex(snapshot, left?.stage), stageIndex(snapshot, right?.stage));
+    case "depends_on":
+      return compareNumber(dependencySortValue(left), dependencySortValue(right));
+    case "updated":
+      return compareNumber(updatedTime(left), updatedTime(right));
+    default:
+      return compareText(tableValue(left, columnId), tableValue(right, columnId));
+  }
+}
+
+function defaultCompare(left, right, snapshot) {
+  return compareRows(left, right, "status", snapshot)
+    || compareRows(left, right, "stage", snapshot)
+    || -compareRows(left, right, "updated", snapshot)
+    || compareRows(left, right, "id", snapshot);
+}
+
+export function sortedItems(items, snapshot) {
+  const indexed = items.map((item, index) => ({ item, index }));
+  indexed.sort((left, right) => {
+    if (!sortState) {
+      return defaultCompare(left.item, right.item, snapshot) || compareNumber(left.index, right.index);
+    }
+    const direction = sortState.dir === "desc" ? -1 : 1;
+    return direction * compareRows(left.item, right.item, sortState.column, snapshot)
+      || compareRows(left.item, right.item, "id", snapshot)
+      || compareNumber(left.index, right.index);
+  });
+  return indexed.map(({ item }) => item);
+}
+
+function filterItems(items) {
+  const filters = Array.from(columnFilters.entries()).filter(([, value]) => value.trim() !== "");
+  if (filters.length === 0) {
+    return items;
+  }
+  return items.filter((item) => filters.every(([columnId, needle]) => (
+    tableValue(item, columnId).toLowerCase().includes(needle.trim().toLowerCase())
+  )));
+}
+
+function toggleSort(columnId) {
+  if (sortState?.column === columnId) {
+    sortState = { column: columnId, dir: sortState.dir === "asc" ? "desc" : "asc" };
+  } else {
+    sortState = { column: columnId, dir: "asc" };
+  }
+}
+
+function renderFilterRow(root, ctx) {
+  const row = document.createElement("tr");
+  row.className = "table-filter-row";
+  for (const column of COLUMNS) {
+    const th = document.createElement("th");
+    const input = document.createElement("input");
+    input.type = "search";
+    input.value = columnFilters.get(column.id) || "";
+    input.placeholder = column.label;
+    input.dataset.column = column.id;
+    input.setAttribute("aria-label", `Filter ${column.label}`);
+    input.addEventListener("input", () => {
+      if (input.value.trim() === "") {
+        columnFilters.delete(column.id);
+      } else {
+        columnFilters.set(column.id, input.value);
+      }
+      pendingFilterFocus = column.id;
+      tableView.mount(root, ctx);
+    });
+    th.append(input);
+    row.append(th);
+  }
+  return row;
+}
+
+function renderHeader(root, ctx) {
+  const thead = document.createElement("thead");
+  const row = document.createElement("tr");
+  for (const column of COLUMNS) {
+    const th = document.createElement("th");
+    const active = sortState?.column === column.id;
+    th.setAttribute("aria-sort", active ? (sortState.dir === "asc" ? "ascending" : "descending") : "none");
+    const button = document.createElement("button");
+    button.className = "table-sort-button";
+    button.type = "button";
+    button.dataset.column = column.id;
+    button.textContent = column.label;
+    button.addEventListener("click", () => {
+      toggleSort(column.id);
+      pendingHeaderFocus = column.id;
+      tableView.mount(root, ctx);
+    });
+    th.append(button);
+    if (active) {
+      th.append(textElement("span", "sort", sortState.dir === "asc" ? "↑" : "↓"));
+    }
+    row.append(th);
+  }
+  thead.append(row, renderFilterRow(root, ctx));
+  return thead;
+}
+
+function renderStatusCell(item) {
+  const status = statusFor(item);
+  const td = document.createElement("td");
+  if (status === "active") {
+    td.textContent = status;
+    return td;
+  }
+  td.append(textElement("span", `badge badge--${status}`, status));
+  return td;
+}
+
+function openItemDetail(item, ctx) {
+  if (item?.id) {
+    ctx.openDetail(item.id);
+  }
+}
+
+function renderRow(item, ctx) {
+  const row = document.createElement("tr");
+  row.tabIndex = 0;
+  row.dataset.itemId = item?.id || "";
+  row.setAttribute("role", "button");
+  row.setAttribute("aria-label", `Open ${item?.id || "item"} detail`);
+  row.addEventListener("click", () => openItemDetail(item, ctx));
+  row.addEventListener("keydown", (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      openItemDetail(item, ctx);
+    }
+  });
+
+  for (const column of COLUMNS) {
+    if (column.id === "status") {
+      row.append(renderStatusCell(item));
+      continue;
+    }
+    row.append(textElement("td", column.className || "", tableValue(item, column.id)));
+  }
+  return row;
+}
+
+function renderTable(items, ctx, root) {
+  const table = document.createElement("table");
+  table.className = "table board-table";
+  const tbody = document.createElement("tbody");
+  for (const item of items) {
+    tbody.append(renderRow(item, ctx));
+  }
+  table.append(renderHeader(root, ctx), tbody);
+  return table;
+}
+
+function restoreHeaderFocus(root) {
+  if (!pendingHeaderFocus) {
+    return;
+  }
+  const focusColumn = pendingHeaderFocus;
+  pendingHeaderFocus = null;
+  for (const button of root.querySelectorAll(".table-sort-button")) {
+    if (button.dataset.column === focusColumn) {
+      button.focus({ preventScroll: true });
+      return;
+    }
+  }
+}
+
+function restoreFilterFocus(root) {
+  if (!pendingFilterFocus) {
+    return;
+  }
+  const focusColumn = pendingFilterFocus;
+  pendingFilterFocus = null;
+  for (const input of root.querySelectorAll(".table-filter-row input")) {
+    if (input.dataset.column === focusColumn) {
+      input.focus({ preventScroll: true });
+      if (typeof input.setSelectionRange === "function") {
+        input.setSelectionRange(input.value.length, input.value.length);
+      }
+      return;
+    }
+  }
+}
+
+export const tableView = {
+  id: "table",
+  label: "Table",
+  mount(root, ctx) {
+    const state = ctx.getState();
+    const items = sortedItems(filterItems(ctx.visibleItems()), state.snapshot);
+    const view = document.createElement("div");
+    view.className = "table-view";
+    const header = document.createElement("header");
+    header.className = "table-view__header";
+    header.append(
+      textElement("h1", "", "Table"),
+      textElement("p", "view-digest", `${items.length} filtered items in a dense table.`),
+    );
+    const tableWrap = document.createElement("div");
+    tableWrap.className = "table-wrap";
+    tableWrap.append(renderTable(items, ctx, root));
+    view.append(header, tableWrap);
+    root.replaceChildren(view);
+    restoreHeaderFocus(root);
+    restoreFilterFocus(root);
+  },
+};