@zq-silk/yui 0.2.0 → 0.4.2

package/dist/web/assets/client/app.js

@@ -0,0 +1,631 @@
+export const APP_SCRIPT = `
+import { Terminal } from "/assets/vendor/xterm.mjs";
+import { FitAddon } from "/assets/vendor/addon-fit.mjs";
+import { createI18n } from "/assets/js/i18n.js";
+import { createThemeController } from "/assets/js/theme.js";
+import {
+  renderError,
+  renderFilters,
+  renderLoading,
+  renderOverview,
+  renderTaskDetail,
+  renderTasks
+} from "/assets/js/view.js";
+
+const elements = {
+  locale: document.querySelector("#locale-select"),
+  theme: document.querySelector("#theme-select"),
+  refresh: document.querySelector("#refresh"),
+  operatorTerminal: document.querySelector("#operator-terminal"),
+  search: document.querySelector("#search"),
+  filters: document.querySelector("#status-filters"),
+  tasks: document.querySelector("#task-list"),
+  detail: document.querySelector("#detail"),
+  mainCol: document.querySelector(".main-col"),
+  topbar: document.querySelector(".topbar"),
+  detailBack: document.querySelector("#detail-back"),
+  detailTabs: document.querySelector("#detail-tabs"),
+  pageTitle: document.querySelector("#page-title"),
+  toast: document.querySelector("#toast"),
+  lastSync: document.querySelector("#last-sync"),
+  terminalPanel: document.querySelector("#terminal-panel"),
+  terminalHost: document.querySelector("#terminal-host"),
+  terminalTitle: document.querySelector("#terminal-title"),
+  terminalState: document.querySelector("#terminal-state span"),
+  terminalClose: document.querySelector("#terminal-close")
+};
+
+const token = document.querySelector('meta[name="yui-web-token"]').content;
+const state = {
+  tasks: [],
+  counts: null,
+  attention: [],
+  generatedAt: null,
+  filter: "all",
+  query: "",
+  selected: null,
+  detail: null,
+  detailKey: null
+};
+const VALID_FILTERS = ["all", "active", "draft", "completed", "archived"];
+let terminalSession = null;
+let terminalStateKey = "terminal.closed";
+
+const i18n = createI18n(elements.locale);
+createThemeController(elements.theme);
+
+// --- URL / history ---------------------------------------------------------
+// Reflect the current view (selected task, status filter, search query) in the
+// query string so the browser back/forward buttons work and the page can be
+// deep-linked / refreshed without losing context.
+function readQuery() {
+  return new URLSearchParams(window.location.search);
+}
+
+function buildSearch(params) {
+  const entries = Array.from(params.entries()).filter(function (entry) {
+    return entry[1] !== "" && entry[1] !== null && entry[1] !== undefined;
+  });
+  if (!entries.length) return "";
+  return "?" + entries.map(function (entry) {
+    return encodeURIComponent(entry[0]) + "=" + encodeURIComponent(entry[1]);
+  }).join("&");
+}
+
+function applyUrl(params, options) {
+  const replace = options && options.replace;
+  const search = buildSearch(params);
+  const url = window.location.pathname + search + window.location.hash;
+  if (replace) {
+    history.replaceState({ task: params.get("task") || null }, "", url);
+  } else {
+    history.pushState({ task: params.get("task") || null }, "", url);
+  }
+}
+
+function urlTaskId() {
+  return readQuery().get("task") || null;
+}
+
+// The visible detail section is part of the URL (?task=X&section=runs) so a
+// refresh or a shared link lands on the same section. Writes always replace —
+// section moves are not history entries.
+function setSectionParam(targetId) {
+  if (!state.detail) return;
+  const params = readQuery();
+  const section = String(targetId).replace(/^detail-/, "");
+  if (params.get("section") === section) return;
+  params.set("section", section);
+  applyUrl(params, { replace: true });
+}
+
+let sectionParamTimer = null;
+function queueSectionParamSync(targetId) {
+  if (sectionParamTimer !== null) window.clearTimeout(sectionParamTimer);
+  sectionParamTimer = window.setTimeout(function () {
+    sectionParamTimer = null;
+    setSectionParam(targetId);
+  }, 250);
+}
+
+function syncUrlFromState(options) {
+  const params = readQuery();
+  if (state.selected) params.set("task", state.selected);
+  else {
+    params.delete("task");
+    params.delete("section");
+  }
+  if (state.filter && state.filter !== "all") params.set("filter", state.filter);
+  else params.delete("filter");
+  if (state.query) params.set("q", state.query);
+  else params.delete("q");
+  applyUrl(params, options);
+}
+
+function detailActions() {
+  return {
+    answerInput: answerInput,
+    openTerminal: openTerminal
+  };
+}
+
+function updateMetrics() {
+  elements.lastSync.textContent = state.generatedAt
+    ? new Intl.DateTimeFormat(i18n.getLocale(), { hour: "2-digit", minute: "2-digit", second: "2-digit" }).format(new Date(state.generatedAt))
+    : "—";
+}
+
+function setDetailActive(active) {
+  document.body.classList.toggle("detail-active", active);
+  elements.detailBack.hidden = !active;
+  if (elements.detailTabs) elements.detailTabs.hidden = !active;
+  if (elements.pageTitle) {
+    if (active) {
+      elements.pageTitle.textContent = state.detail
+        ? state.detail.task.title
+        : (state.tasks.find(function (task) { return task.id === state.selected; }) || { title: "…" }).title;
+      elements.pageTitle.dataset.i18n = "";
+    } else {
+      elements.pageTitle.textContent = i18n.t("page.title");
+      elements.pageTitle.dataset.i18n = "page.title";
+    }
+  }
+}
+
+function showOverview() {
+  renderOverview(elements.detail, state, i18n.t, i18n.getLocale(), selectTask);
+  elements.mainCol.scrollTop = 0;
+}
+
+// Fingerprint of the rendered detail payload. Quiet polling re-renders the
+// whole detail on every tick; skipping identical payloads keeps local UI state
+// (expanded blocks, list pages) alive and avoids DOM churn.
+let renderedDetailKey = null;
+
+function detailKeyOf(detail) {
+  const text = JSON.stringify(detail);
+  let hash = 0;
+  for (let i = 0; i < text.length; i += 1) {
+    hash = (hash * 31 + text.charCodeAt(i)) | 0;
+  }
+  return text.length + ":" + hash;
+}
+
+function renderCurrentDetail(force) {
+  if (state.detail) {
+    const key = i18n.getLocale() + "|" + state.detailKey;
+    if (!force && key === renderedDetailKey) return;
+    renderTaskDetail(
+      elements.detail,
+      state.detail,
+      i18n.t,
+      i18n.getLocale(),
+      detailActions()
+    );
+    renderedDetailKey = key;
+  } else if (!state.selected) {
+    renderedDetailKey = null;
+    showOverview();
+  }
+}
+
+function renderDynamicContent() {
+  renderFilters(elements.filters, state, i18n.t, function (filter) {
+    state.filter = filter;
+    syncUrlFromState({ replace: false });
+    renderDynamicContent();
+  });
+  const savedTaskScroll = elements.tasks.scrollTop;
+  renderTasks(elements.tasks, state, i18n.t, i18n.getLocale(), selectTask);
+  elements.tasks.scrollTop = savedTaskScroll;
+  const preserveScroll = state.detail !== null && elements.mainCol.scrollTop > 0;
+  const savedScrollTop = elements.mainCol.scrollTop;
+  renderCurrentDetail();
+  if (preserveScroll) elements.mainCol.scrollTop = savedScrollTop;
+  syncTabHighlight();
+  updateMetrics();
+  updateStickyOffsets();
+}
+
+function updateStickyOffsets() {
+  const root = document.documentElement;
+  if (elements.topbar) {
+    root.style.setProperty("--topbar-h", elements.topbar.offsetHeight + "px");
+  }
+  if (elements.detailTabs && !elements.detailTabs.hidden) {
+    root.style.setProperty("--tabs-h", elements.detailTabs.offsetHeight + "px");
+  }
+}
+
+function updateActiveTabFromScroll() {
+  if (!state.detail || !elements.detailTabs) return;
+  const tabs = Array.from(elements.detailTabs.querySelectorAll(".tab"));
+  if (!tabs.length) return;
+  const root = elements.mainCol;
+  const rootTop = root.getBoundingClientRect().top;
+  // Sections sit below the sticky topbar + tab bar (see .anchor scroll-margin),
+  // so "current" means the last section whose top crossed that stacked offset.
+  const stickyH = (elements.topbar ? elements.topbar.offsetHeight : 0)
+    + (elements.detailTabs.hidden ? 0 : elements.detailTabs.offsetHeight);
+  const threshold = stickyH + 8;
+  let activeId = tabs[0].dataset.target;
+  let bestTop = -Infinity;
+  tabs.forEach(function (tab) {
+    const id = tab.dataset.target;
+    if (!id) return;
+    const el = root.querySelector("#" + id);
+    if (!el) return;
+    const top = el.getBoundingClientRect().top - rootTop;
+    if (top <= threshold && top > bestTop) {
+      bestTop = top;
+      activeId = id;
+    }
+  });
+  tabs.forEach(function (tab) {
+    tab.classList.toggle("is-active", tab.dataset.target === activeId);
+  });
+  if (state.detail) queueSectionParamSync(activeId);
+}
+
+function syncTabHighlight() {
+  // Compute the active tab from the current scroll position. The module-level
+  // scroll listener keeps it in sync afterwards.
+  updateActiveTabFromScroll();
+}
+
+function showToast(message) {
+  elements.toast.textContent = message;
+  elements.toast.classList.add("show");
+  window.setTimeout(function () { elements.toast.classList.remove("show"); }, 3200);
+}
+
+function clearSelection() {
+  state.selected = null;
+  state.detail = null;
+  setDetailActive(false);
+  syncUrlFromState({ replace: !urlTaskId() });
+  showOverview();
+  const savedTaskScroll = elements.tasks.scrollTop;
+  renderTasks(elements.tasks, state, i18n.t, i18n.getLocale(), selectTask);
+  elements.tasks.scrollTop = savedTaskScroll;
+}
+
+async function requestJson(path, options) {
+  const response = await fetch(path, {
+    ...options,
+    headers: {
+      accept: "application/json",
+      ...(options && options.headers ? options.headers : {})
+    }
+  });
+  if (!response.ok) {
+    let message = "HTTP " + response.status;
+    try {
+      const body = await response.json();
+      if (body && body.error) message = body.error;
+    } catch {}
+    throw new Error(message);
+  }
+  return response.json();
+}
+
+async function loadTaskDetail(taskId, showLoading) {
+  if (showLoading) {
+    renderLoading(elements.detail, i18n.t, "loading.detail");
+    elements.mainCol.scrollTop = 0;
+  }
+  const savedScrollTop = showLoading ? 0 : elements.mainCol.scrollTop;
+  const detail = await requestJson("/api/tasks/" + encodeURIComponent(taskId));
+  if (state.selected !== taskId) return;
+  state.detail = detail;
+  state.detailKey = detailKeyOf(detail);
+  renderCurrentDetail(true);
+  // Reveal the tab bar before measuring/scroll so anchors land correctly.
+  setDetailActive(true);
+  updateStickyOffsets();
+  // A section in the URL wins over the preserved scroll offset.
+  const section = readQuery().get("section");
+  const anchor = section ? elements.detail.querySelector("#detail-" + section) : null;
+  if (anchor) {
+    anchor.scrollIntoView({ block: "start" });
+  } else {
+    elements.mainCol.scrollTop = savedScrollTop;
+  }
+  syncTabHighlight();
+}
+
+async function selectTask(taskId) {
+  // Switching tasks drops the previous section; staying on the same task
+  // (URL-driven loads, popstate) keeps it.
+  if (urlTaskId() !== taskId) {
+    const params = readQuery();
+    params.delete("section");
+    applyUrl(params, { replace: true });
+  }
+  state.selected = taskId;
+  state.detail = null;
+  renderedDetailKey = null;
+  // When the selection is driven by the URL (initial load or popstate), the
+  // URL already reflects the task id, so replace instead of pushing a
+  // duplicate history entry.
+  syncUrlFromState({ replace: state.selected === urlTaskId() });
+  setDetailActive(true);
+  const savedTaskScroll = elements.tasks.scrollTop;
+  renderTasks(elements.tasks, state, i18n.t, i18n.getLocale(), selectTask);
+  elements.tasks.scrollTop = savedTaskScroll;
+  try {
+    await loadTaskDetail(taskId, true);
+  } catch {
+    if (state.selected !== taskId) return;
+    renderError(elements.detail, i18n.t("errors.detail"));
+    showToast(i18n.t("errors.detail"));
+  }
+}
+
+async function answerInput(input, answer) {
+  if (!state.detail) return;
+  const taskId = state.detail.task.id;
+  try {
+    await requestJson(
+      "/api/tasks/" + encodeURIComponent(taskId)
+        + "/inputs/" + encodeURIComponent(input.id) + "/answer",
+      {
+        method: "POST",
+        headers: {
+          "content-type": "application/json",
+          "x-yui-web-token": token
+        },
+        body: JSON.stringify(answer)
+      }
+    );
+    showToast(i18n.t("input.answered"));
+    await refreshDashboard({ quiet: true });
+  } catch {
+    showToast(i18n.t("errors.answer"));
+  }
+}
+
+async function refreshDashboard(options) {
+  const quiet = options && options.quiet;
+  if (!quiet) {
+    elements.refresh.disabled = true;
+    if (!state.tasks.length) renderLoading(elements.tasks, i18n.t, "loading.dashboard");
+  }
+  const previousInputs = state.counts ? state.counts.openInputs : null;
+  try {
+    const dashboard = await requestJson("/api/dashboard");
+    state.tasks = dashboard.tasks;
+    state.counts = dashboard.counts;
+    state.attention = dashboard.attention || [];
+    state.generatedAt = dashboard.generatedAt;
+    if (state.selected && !state.tasks.some(function (task) { return task.id === state.selected; })) {
+      clearSelection();
+    } else {
+      renderDynamicContent();
+    }
+    if (previousInputs !== null && dashboard.counts.openInputs > previousInputs) {
+      showToast(i18n.t("input.new"));
+    }
+    if (state.selected && !quiet) {
+      try { await loadTaskDetail(state.selected, false); } catch {}
+    }
+  } catch {
+    if (!quiet) {
+      renderError(elements.tasks, i18n.t("errors.dashboard"));
+      showToast(i18n.t("errors.dashboard"));
+    }
+  } finally {
+    if (!quiet) elements.refresh.disabled = false;
+  }
+}
+
+function terminalUrl(target, columns, rows) {
+  const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+  const parameters = new URLSearchParams({
+    scope: target.scope,
+    role: target.roleName,
+    cols: String(columns),
+    rows: String(rows),
+    token: token
+  });
+  if (target.scope === "task") parameters.set("task", target.taskId);
+  return protocol + "//" + window.location.host + "/api/terminal?" + parameters.toString();
+}
+
+function setTerminalState(key) {
+  terminalStateKey = key;
+  elements.terminalState.textContent = i18n.t(key);
+}
+
+function terminalPanelOpen() {
+  return !elements.terminalPanel.hidden;
+}
+
+function openTerminalPanel() {
+  elements.terminalPanel.hidden = false;
+  elements.terminalPanel.setAttribute("aria-hidden", "false");
+  document.body.classList.add("terminal-active");
+}
+
+function closeTerminalPanel() {
+  disposeTerminal();
+  document.body.classList.remove("terminal-active");
+  elements.terminalPanel.setAttribute("aria-hidden", "true");
+  elements.terminalPanel.hidden = true;
+}
+
+function disposeTerminal() {
+  if (!terminalSession) return;
+  const current = terminalSession;
+  terminalSession = null;
+  current.resizeObserver.disconnect();
+  current.input.dispose();
+  current.socket.close();
+  current.terminal.dispose();
+  elements.terminalHost.replaceChildren();
+}
+
+function openTerminal(target) {
+  disposeTerminal();
+  elements.terminalTitle.textContent = target.scope === "task"
+    ? target.taskId + " / " + target.roleName
+    : target.roleName;
+  setTerminalState("terminal.connecting");
+  openTerminalPanel();
+
+  const terminal = new Terminal({
+    cursorBlink: true,
+    scrollback: 0,
+    convertEol: false,
+    fontFamily: '"IBM Plex Mono","JetBrains Mono","SFMono-Regular",Consolas,monospace',
+    fontSize: 13,
+    theme: {
+      background: "#080b11",
+      foreground: "#e8eef6",
+      cursor: "#49d6ff",
+      selectionBackground: "#264b5d"
+    }
+  });
+  const fit = new FitAddon();
+  terminal.loadAddon(fit);
+  terminal.open(elements.terminalHost);
+  fit.fit();
+
+  let writable = false;
+  const socket = new WebSocket(terminalUrl(target, terminal.cols, terminal.rows));
+  const input = terminal.onData(function (data) {
+    if (writable && socket.readyState === WebSocket.OPEN) {
+      socket.send(JSON.stringify({ type: "input", data: data }));
+    }
+  });
+  const resizeObserver = new ResizeObserver(function () {
+    if (!terminalSession || terminalSession.terminal !== terminal) return;
+    fit.fit();
+    if (socket.readyState === WebSocket.OPEN) {
+      socket.send(JSON.stringify({
+        type: "resize",
+        columns: terminal.cols,
+        rows: terminal.rows
+      }));
+    }
+  });
+  resizeObserver.observe(elements.terminalHost);
+
+  socket.addEventListener("message", function (event) {
+    let message;
+    try {
+      message = JSON.parse(event.data);
+    } catch {
+      return;
+    }
+    if (message.type === "ready") {
+      writable = !message.readOnly;
+      setTerminalState(writable ? "terminal.writable" : "terminal.readOnly");
+      if (message.history && message.history.limit < message.history.target) {
+        const number = new Intl.NumberFormat(i18n.getLocale());
+        showToast(
+          i18n.t("terminal.historyLimited")
+            .replace("{current}", number.format(message.history.limit))
+            .replace("{target}", number.format(message.history.target))
+        );
+      }
+      terminal.focus();
+    } else if (message.type === "data") {
+      terminal.write(message.data);
+    } else if (message.type === "exit") {
+      setTerminalState("terminal.closed");
+    } else if (message.type === "error") {
+      setTerminalState("terminal.error");
+      terminal.writeln("\\r\\n" + message.message);
+    }
+  });
+  socket.addEventListener("close", function () {
+    writable = false;
+    setTerminalState("terminal.closed");
+  });
+  socket.addEventListener("error", function () {
+    writable = false;
+    setTerminalState("terminal.error");
+  });
+
+  terminalSession = { terminal, socket, input, resizeObserver };
+}
+
+if (elements.detailTabs) {
+  elements.detailTabs.addEventListener("click", function (event) {
+    const tab = event.target && event.target.closest ? event.target.closest(".tab") : null;
+    if (!tab) return;
+    const targetId = tab.dataset.target;
+    if (!targetId || !elements.detail) return;
+    const section = elements.detail.querySelector("#" + targetId);
+    if (!section) return;
+    section.scrollIntoView({ behavior: "smooth", block: "start" });
+    setSectionParam(targetId);
+    elements.detailTabs.querySelectorAll(".tab").forEach(function (other) {
+      other.classList.toggle("is-active", other === tab);
+    });
+  });
+}
+
+elements.search.addEventListener("input", function () {
+  state.query = elements.search.value;
+  syncUrlFromState({ replace: true });
+  const savedTaskScroll = elements.tasks.scrollTop;
+  renderTasks(elements.tasks, state, i18n.t, i18n.getLocale(), selectTask);
+  elements.tasks.scrollTop = savedTaskScroll;
+});
+elements.refresh.addEventListener("click", function () { refreshDashboard(); });
+elements.operatorTerminal.addEventListener("click", function () {
+  openTerminal({ scope: "global", roleName: "operator" });
+});
+elements.detailBack.addEventListener("click", clearSelection);
+elements.terminalClose.addEventListener("click", closeTerminalPanel);
+document.addEventListener("keydown", function (event) {
+  const active = document.activeElement;
+  const typing = active && ["INPUT", "SELECT", "TEXTAREA"].includes(active.tagName);
+  if (event.key === "Escape" && terminalPanelOpen()) {
+    closeTerminalPanel();
+    return;
+  }
+  if (event.key === "Escape" && state.selected) {
+    clearSelection();
+    return;
+  }
+  if (typing) return;
+  if (event.key === "/") {
+    event.preventDefault();
+    elements.search.focus();
+    return;
+  }
+  if (event.key.toLowerCase() === "o" && !event.metaKey && !event.ctrlKey && !event.altKey) {
+    openTerminal({ scope: "global", roleName: "operator" });
+    return;
+  }
+  if (event.key.toLowerCase() === "r" && !event.metaKey && !event.ctrlKey && !event.altKey && !terminalPanelOpen()) {
+    refreshDashboard();
+  }
+});
+
+// Restore view state from the URL on load and on browser back/forward.
+function applyStateFromUrl() {
+  const params = readQuery();
+  const filter = params.get("filter");
+  if (filter && VALID_FILTERS.indexOf(filter) !== -1) {
+    state.filter = filter;
+  } else {
+    state.filter = "all";
+  }
+  const query = params.get("q");
+  state.query = query || "";
+  if (elements.search) elements.search.value = state.query;
+  const taskId = params.get("task");
+  if (taskId) {
+    selectTask(taskId);
+  } else {
+    state.selected = null;
+    state.detail = null;
+    setDetailActive(false);
+    showOverview();
+  }
+}
+
+window.addEventListener("popstate", function () {
+  applyStateFromUrl();
+});
+
+i18n.subscribe(function () {
+  renderDynamicContent();
+  if (terminalSession) setTerminalState(terminalStateKey);
+  if (!state.selected && elements.pageTitle) elements.pageTitle.textContent = i18n.t("page.title");
+});
+showOverview();
+
+// Scroll-spy: keep the detail tab bar in sync with the visible section.
+// Bound once on the scroll container; it reads tabs/sections from the live DOM
+// so it survives detail re-renders.
+elements.mainCol.addEventListener("scroll", updateActiveTabFromScroll, { passive: true });
+
+applyStateFromUrl();
+refreshDashboard();
+window.setInterval(function () { refreshDashboard({ quiet: true }); }, 5000);
+`;