@nklisch/pi-agile-workflow 0.15.3

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

@@ -0,0 +1,259 @@
+import { createBoardStore } from "/assets/state.js";
+import { openDetail, closeDetail, syncDetail } from "/assets/detail.js";
+import { renderCard } from "/assets/card.js";
+import { renderFilterBar } from "/assets/filters.js";
+import { mountCurrentView } from "/assets/views.js";
+
+const root = document.documentElement;
+const accentPicker = document.getElementById("theme-accent");
+const modeButtons = Array.from(document.querySelectorAll("[data-mode]"));
+const viewTabs = Array.from(document.querySelectorAll("[data-view]"));
+const statusRegion = document.getElementById("status-region");
+const statusText = statusRegion?.querySelector(".status-text");
+const statusSpinner = statusRegion?.querySelector(".spinner");
+const diagnosticsSummary = document.getElementById("diagnostics-summary");
+const diagnosticsRegion = document.getElementById("diagnostics-region");
+const viewRoot = document.getElementById("view-root");
+const refreshButton = document.getElementById("refresh-button");
+const filterRoot = document.getElementById("global-filter-container");
+
+const store = createBoardStore({ storage: window.localStorage, root: document });
+const context = {
+  ...store,
+  renderCard: (item, options = {}) => renderCard(item, { ...options, context }),
+  openDetail: (id) => openDetail(id, context),
+  closeDetail: () => closeDetail(context),
+};
+const filtersUi = filterRoot ? renderFilterBar(filterRoot, context) : null;
+window.boardContext = context;
+
+let mountedSnapshot = null;
+let mountedView = null;
+let mountedFilters = "";
+
+function replaceChildren(node, children) {
+  if (!node) {
+    return;
+  }
+  node.replaceChildren(...children);
+}
+
+function textElement(tag, className, text) {
+  const element = document.createElement(tag);
+  if (className) {
+    element.className = className;
+  }
+  element.textContent = text;
+  return element;
+}
+
+function emptyState(glyph, title, body) {
+  const wrapper = document.createElement("div");
+  wrapper.className = "view-placeholder empty";
+  wrapper.append(
+    textElement("span", "glyph", glyph),
+    textElement("h1", "", title),
+    textElement("p", "", body),
+  );
+  return wrapper;
+}
+
+function alertNode(kind, title, detail) {
+  const alert = document.createElement("div");
+  alert.className = `alert alert--${kind}`;
+  const icon = textElement("span", "ico", kind === "danger" ? "!" : kind === "warning" ? "?" : "i");
+  icon.setAttribute("aria-hidden", "true");
+  const body = document.createElement("span");
+  body.className = "body";
+  body.append(textElement("strong", "", title));
+  if (detail) {
+    body.append(textElement("small", "", detail));
+  }
+  alert.append(icon, body);
+  return alert;
+}
+
+function diagnosticsFor(snapshot) {
+  const diagnostics = snapshot?.diagnostics || {};
+  const entries = [];
+  for (const error of diagnostics.parse_errors || []) {
+    entries.push({
+      kind: "danger",
+      title: "Parse error",
+      detail: [error.rel_path, error.reason].filter(Boolean).join(" - "),
+    });
+  }
+  for (const warning of diagnostics.validation_warnings || []) {
+    entries.push({
+      kind: "warning",
+      title: warning.id ? `Validation warning: ${warning.id}` : "Validation warning",
+      detail: [warning.rel_path, warning.field, warning.reason].filter(Boolean).join(" - "),
+    });
+  }
+  for (const duplicate of diagnostics.duplicate_ids || []) {
+    entries.push({
+      kind: "warning",
+      title: duplicate.id ? `Duplicate id: ${duplicate.id}` : "Duplicate id",
+      detail: [duplicate.rel_path, duplicate.reason].filter(Boolean).join(" - "),
+    });
+  }
+  for (const id of diagnostics.client_duplicate_ids || []) {
+    entries.push({
+      kind: "warning",
+      title: `Duplicate id in feed: ${id}`,
+      detail: "The browser snapshot contains more than one item with this id.",
+    });
+  }
+  return entries;
+}
+
+function applyTheme(theme) {
+  root.dataset.accent = theme.accent;
+  if (theme.mode === "system") {
+    root.removeAttribute("data-theme");
+  } else {
+    root.dataset.theme = theme.mode;
+  }
+  if (accentPicker) {
+    accentPicker.value = theme.accent;
+  }
+  for (const button of modeButtons) {
+    button.setAttribute("aria-pressed", String(button.dataset.mode === theme.mode));
+  }
+}
+
+function applyView(view) {
+  for (const tab of viewTabs) {
+    tab.setAttribute("aria-selected", String(tab.dataset.view === view));
+  }
+}
+
+function updateStatus(state, visibleCount) {
+  if (statusSpinner) {
+    statusSpinner.hidden = !state.loading;
+  }
+  if (refreshButton) {
+    refreshButton.disabled = state.loading;
+  }
+  if (!statusText) {
+    return;
+  }
+  if (state.loading && !state.snapshot) {
+    statusText.textContent = "Loading substrate data";
+    return;
+  }
+  if (state.error && !state.snapshot) {
+    statusText.textContent = "Substrate feed unavailable";
+    return;
+  }
+  if (state.snapshot) {
+    const total = state.snapshot.items.length;
+    const project = state.snapshot.project || "substrate";
+    const version = state.snapshot.work_view_version || "unknown";
+    statusText.textContent = `${project} / ${version} / ${visibleCount}/${total} visible`;
+    return;
+  }
+  statusText.textContent = "Waiting for substrate data";
+}
+
+function filterSignature(filters) {
+  const setValues = (set) => Array.from(set).sort().join("\u0000");
+  return [
+    filters.search,
+    setValues(filters.kinds),
+    setValues(filters.stages),
+    setValues(filters.parents),
+    setValues(filters.tags),
+    String(filters.autoHideReleased),
+  ].join("\u0001");
+}
+
+function resetMountedView() {
+  mountedSnapshot = null;
+  mountedView = null;
+  mountedFilters = "";
+}
+
+function renderDiagnostics(state) {
+  const diagnostics = diagnosticsFor(state.snapshot);
+  diagnosticsSummary?.replaceChildren(textElement("span", "count", `${diagnostics.length} diagnostics`));
+  const nodes = diagnostics.map((entry) => alertNode(entry.kind, entry.title, entry.detail));
+  if (state.error) {
+    nodes.unshift(alertNode("danger", "Feed request failed", state.error));
+  }
+  replaceChildren(diagnosticsRegion, nodes);
+}
+
+function renderView(state) {
+  if (!viewRoot) {
+    return;
+  }
+  if (state.loading && !state.snapshot) {
+    resetMountedView();
+    viewRoot.replaceChildren(emptyState("::", "Loading substrate data", "Fetching /api/substrate from the local board host."));
+    return;
+  }
+  if (state.error && !state.snapshot) {
+    resetMountedView();
+    viewRoot.replaceChildren(emptyState("!", "Feed unavailable", "The board shell is still usable; refresh when the substrate feed is available."));
+    return;
+  }
+  if (!state.snapshot) {
+    resetMountedView();
+    viewRoot.replaceChildren(emptyState("::", "Board shell ready", "Kanban, dependency, and table views mount here as their stories land."));
+    return;
+  }
+
+  const visible = context.visibleItems();
+  if (state.snapshot.items.length === 0) {
+    resetMountedView();
+    viewRoot.replaceChildren(emptyState("0", "No substrate items", "The feed loaded successfully, but it did not contain any items."));
+    return;
+  }
+  if (visible.length === 0) {
+    resetMountedView();
+    viewRoot.replaceChildren(emptyState("0", "No matching items", "Adjust filters or show released and archived items to widen the view."));
+    return;
+  }
+
+  const filters = filterSignature(state.filters);
+  // Detail selection intentionally does not remount views; otherwise opening a
+  // card destroys the trigger element before focus can be restored on close.
+  if (mountedSnapshot !== state.snapshot || mountedView !== state.view || mountedFilters !== filters) {
+    mountedSnapshot = state.snapshot;
+    mountedView = state.view;
+    mountedFilters = filters;
+    mountCurrentView(viewRoot, context);
+  }
+}
+
+function render(state) {
+  const visibleCount = context.visibleItems().length;
+  applyTheme(state.theme);
+  applyView(state.view);
+  filtersUi?.sync(state);
+  updateStatus(state, visibleCount);
+  renderDiagnostics(state);
+  renderView(state);
+  syncDetail(context);
+}
+
+accentPicker?.addEventListener("change", (event) => {
+  context.setTheme({ accent: event.target.value });
+});
+
+for (const button of modeButtons) {
+  button.addEventListener("click", () => context.setTheme({ mode: button.dataset.mode || "system" }));
+}
+
+for (const tab of viewTabs) {
+  tab.addEventListener("click", () => context.setView(tab.dataset.view || "kanban"));
+}
+
+refreshButton?.addEventListener("click", () => {
+  void context.refresh();
+});
+
+context.subscribe(render);
+render(context.getState());
+void context.refresh();

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

@@ -0,0 +1,139 @@
+import { markdownSummary, renderInlineMarkdown } from "/assets/markdown.js";
+
+function text(tag, className, value) {
+  const node = document.createElement(tag);
+  if (className) {
+    node.className = className;
+  }
+  node.textContent = value;
+  return node;
+}
+
+function valueOrNone(value) {
+  return value == null || value === "" ? "—" : String(value);
+}
+
+function countOf(value) {
+  return Array.isArray(value) ? value.length : 0;
+}
+
+function kindClass(kind) {
+  const normalized = valueOrNone(kind).toLowerCase();
+  return ["epic", "feature", "story", "release", "backlog"].includes(normalized)
+    ? normalized
+    : "backlog";
+}
+
+function badge(label, className) {
+  return text("span", `badge ${className}`, label);
+}
+
+function meta(label, value, className = "") {
+  const node = text("span", className, `${label}: ${valueOrNone(value)}`);
+  node.dataset.label = label;
+  return node;
+}
+
+function dependencyMeta(item) {
+  const deps = countOf(item.depends_on);
+  const unmet = countOf(item.unmet_deps);
+  const dependents = countOf(item.dependents);
+  const children = countOf(item.children);
+  const node = document.createElement("span");
+  node.className = "dep";
+  node.append(
+    text("span", "arrow", "deps"),
+    document.createTextNode(` ${deps}`),
+    document.createTextNode(` / unmet ${unmet}`),
+    document.createTextNode(` / unblocks ${dependents}`),
+    document.createTextNode(` / children ${children}`),
+  );
+  return node;
+}
+
+function resolveOpen(options) {
+  if (typeof options.onOpen === "function") {
+    return options.onOpen;
+  }
+  const context = options.context || options.ctx;
+  if (context && typeof context.openDetail === "function") {
+    return (id) => context.openDetail(id);
+  }
+  return null;
+}
+
+function activateCard(item, options) {
+  const open = resolveOpen(options);
+  if (open && item?.id) {
+    open(item.id);
+  }
+}
+
+export function renderCard(item, options = {}) {
+  const kind = kindClass(item?.kind);
+  const card = document.createElement("article");
+  card.className = [
+    "item-card",
+    `item-card--${kind}`,
+    options.compact ? "item-card--compact" : "",
+    item?.blocked ? "is-blocked" : "",
+    options.selected ? "is-selected" : "",
+  ].filter(Boolean).join(" ");
+  card.tabIndex = 0;
+  card.setAttribute("role", "button");
+  card.setAttribute("aria-label", `Open ${valueOrNone(item?.id)}`);
+  if (item?.id) {
+    card.dataset.id = String(item.id);
+  }
+
+  const head = document.createElement("div");
+  head.className = "ic-head";
+  head.append(
+    text("span", `chip chip--${kind}`, valueOrNone(item?.kind)),
+    text("span", "ic-id", valueOrNone(item?.id)),
+  );
+  if (item?.ready) {
+    head.append(badge("ready", "badge--ready"));
+  }
+  if (item?.blocked) {
+    head.append(badge("blocked", "badge--blocked"));
+  }
+  if (item?.is_terminal || item?.stage === "done" || item?.stage === "released") {
+    head.append(badge("done", "badge--done"));
+  }
+
+  const summary = document.createElement("div");
+  summary.className = "ic-body";
+  const summaryText = markdownSummary(item?.body || "", options.compact ? 120 : 220);
+  if (summaryText) {
+    summary.append(renderInlineMarkdown(summaryText, { allowLinks: false }));
+  } else {
+    summary.textContent = "No body summary.";
+    summary.classList.add("is-empty");
+  }
+
+  const metaRow = document.createElement("div");
+  metaRow.className = "ic-meta";
+  metaRow.append(
+    meta("stage", item?.stage, "ic-stage"),
+    meta("parent", item?.parent, "ic-parent"),
+    dependencyMeta(item || {}),
+  );
+
+  const tags = Array.isArray(item?.tags) ? item.tags : [];
+  if (tags.length > 0) {
+    metaRow.append(meta("tags", tags.join(", "), "ic-tags"));
+  }
+
+  card.append(head, summary, metaRow);
+
+  card.addEventListener("click", () => activateCard(item, options));
+  card.addEventListener("keydown", (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      activateCard(item, options);
+    }
+  });
+
+  return card;
+}