@zq-silk/yui 2.3.0 → 2.4.0

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

@@ -0,0 +1,215 @@
+export const CATALOG_SCRIPT = String.raw `
+// The Task catalog: the refresh loop over the dashboard read, the sidebar
+// (attention, status tabs, search, paged list), its filters from the URL and
+// the explicit Session read of the current catalog page. This module is the
+// only writer of the catalog fields of state. Only the newest request may
+// apply its result.
+import { fill, formatClock } from "/assets/js/lib/format.js";
+import { h } from "/assets/js/lib/dom.js";
+import { loadingBlock } from "/assets/js/ui/primitives.js";
+import { renderAttentionBar, renderFilters, renderTasks, STATUS_FILTERS, ATTENTION_KINDS } from "/assets/js/views/sidebar.js";
+import { syncUrl } from "/assets/js/layout/router.js";
+
+// deps: { el, state, t, locale, api, toast, selectTask, showOverview, reloadSelected }
+//   el     the sidebar elements, the sync state and the refresh button
+//   state  writes the catalog fields; reads state.selected
+//   selectTask(taskId)  a task row was chosen (app/selection)
+//   showOverview()      redraw the center overview while nothing is selected
+//   reloadSelected()    re-read the selected Task; rejects when the read fails
+export function createCatalog(deps) {
+  // progress: whether a refresh is in flight and the newest request number.
+  const progress = { refreshing: false, request: 0 };
+  const catalog = {
+    refresh: function (options) { return refresh(deps, progress, options); },
+    reset: function () { reset(deps, progress); },
+    renderSidebar: function () { renderSidebar(deps, progress); },
+    renderTaskList: function () { renderTaskList(deps); },
+    pickAttention: function (kind) { pickAttention(deps, progress, kind); },
+    readPageSessions: function () { return readPageSessions(deps); },
+    applyFilters: function (params) { applyFilters(deps, params); }
+  };
+  bindCatalogControls(deps.el, deps.state, catalog);
+  return catalog;
+}
+
+function reset(deps, progress) {
+  deps.state.catalogCursor = null;
+  deps.state.nextCursor = null;
+  refresh(deps, progress);
+}
+
+async function refresh(deps, progress, options) {
+  const el = deps.el;
+  const state = deps.state;
+  const quiet = options && options.quiet;
+  if (progress.refreshing && quiet) return;
+  const request = ++progress.request;
+  progress.refreshing = true;
+  beginRefresh(el, state, deps.t, quiet);
+  const previousInputs = state.counts ? state.counts.openInputs : null;
+  try {
+    const query = catalogQuery(state);
+    const dashboard = await deps.api.dashboard(query);
+    if (request !== progress.request) return;
+    applyDashboard(state, dashboard, query);
+    showDashboard(deps, progress, previousInputs);
+    // A selected Task may live on another page or outside current filters;
+    // only its own read can establish that it no longer exists.
+    if (state.selected) {
+      try { await deps.reloadSelected(); }
+      catch { deps.toast(deps.t("errors.disconnected")); }
+    }
+  } catch {
+    if (request !== progress.request) return;
+    dashboardFailed(deps, quiet);
+  } finally {
+    if (request === progress.request) {
+      progress.refreshing = false;
+      el.refresh.disabled = false;
+      el.catalogNext.disabled = !state.nextCursor;
+    }
+  }
+}
+
+function showDashboard(deps, progress, previousInputs) {
+  deps.el.sync.dataset.state = "ok";
+  renderSidebar(deps, progress);
+  if (!deps.state.selected) deps.showOverview();
+  if (previousInputs !== null && deps.state.counts.openInputs > previousInputs) deps.toast(deps.t("input.new"));
+}
+
+function dashboardFailed(deps, quiet) {
+  deps.el.sync.dataset.state = "error";
+  if (quiet) return;
+  deps.el.tasks.replaceChildren(h("div.list-empty.is-error", null, h("p", null, deps.t("errors.dashboard"))));
+  deps.toast(deps.t("errors.dashboard"));
+}
+
+function renderSidebar(deps, progress) {
+  const el = deps.el;
+  const state = deps.state;
+  const t = deps.t;
+  renderAttentionBar(el.attention, state, t, function (kind) { pickAttention(deps, progress, kind); });
+  renderFilters(el.filters, state, t, function (filter) {
+    state.filter = filter;
+    state.attentionFilter = null;
+    state.catalogAll = false;
+    syncUrl(state, false);
+    reset(deps, progress);
+  });
+  el.catalogCount.textContent = fill(t("catalog.count"), { shown: state.tasks.length, total: state.catalogTotal });
+  el.catalogReset.hidden = !state.catalogCursor;
+  el.catalogNext.hidden = !state.nextCursor && !state.catalogCursor;
+  el.catalogAttentionReset.hidden = !state.attentionFilter;
+  renderTaskList(deps);
+  el.lastSync.textContent = state.generatedAt ? formatClock(state.generatedAt, deps.locale()) : "—";
+}
+
+// Redraw the list in place, keeping its scroll position.
+function renderTaskList(deps) {
+  const scroll = deps.el.tasks.scrollTop;
+  renderTasks(deps.el.tasks, deps.state, deps.t, deps.locale(), deps.selectTask);
+  deps.el.tasks.scrollTop = scroll;
+}
+
+function pickAttention(deps, progress, kind) {
+  const state = deps.state;
+  state.attentionFilter = kind;
+  state.catalogAll = !!kind && !!state.catalogScope && state.catalogScope.archived === "included";
+  state.filter = "all";
+  state.query = "";
+  deps.el.search.value = "";
+  syncUrl(state, false);
+  reset(deps, progress);
+}
+
+function beginRefresh(el, state, t, quiet) {
+  el.catalogNext.disabled = true;
+  el.sync.dataset.state = "syncing";
+  if (quiet) return;
+  el.refresh.disabled = true;
+  if (!state.tasks.length) el.tasks.replaceChildren(loadingBlock(t("loading.dashboard")));
+}
+
+function catalogQuery(state) {
+  const query = new URLSearchParams();
+  if (state.catalogAll) query.set("all", "true");
+  if (state.filter !== "all") query.set("status", state.filter);
+  if (state.query.trim()) query.set("search", state.query.trim());
+  if (state.attentionFilter) query.set("attention", state.attentionFilter);
+  if (state.catalogCursor) query.set("cursor", state.catalogCursor);
+  return query.toString();
+}
+
+function taskIds(tasks, key) {
+  return JSON.stringify(tasks.map(function (task) { return task[key]; }));
+}
+
+function applyDashboard(state, dashboard, query) {
+  state.tasks = dashboard.tasks;
+  // A Session read describes exactly one catalog page.
+  if (state.catalogQuery !== query || (state.sessionOverview
+    && taskIds(state.sessionOverview.tasks, "taskId") !== taskIds(dashboard.tasks, "id"))) {
+    state.sessionOverview = null;
+  }
+  state.catalogQuery = query;
+  state.counts = { ...dashboard.counts, openInputs: dashboard.attention.openInputs.count };
+  state.catalogAttention = dashboard.attention;
+  state.catalogScope = dashboard.scope;
+  state.catalogTotal = dashboard.total;
+  state.nextCursor = dashboard.nextCursor;
+  state.attention = dashboard.attention.openInputs.refs.map(function (ref) {
+    const task = state.tasks.find(function (entry) { return entry.id === ref.taskId; });
+    return { taskId: ref.taskId, taskTitle: task ? task.title : ref.taskId };
+  });
+  state.generatedAt = new Date().toISOString();
+}
+
+async function readPageSessions(deps) {
+  const state = deps.state;
+  if (state.sessionLoading) return;
+  const query = state.catalogQuery;
+  state.sessionLoading = true;
+  deps.showOverview();
+  try {
+    const result = await deps.api.pageSessions(query);
+    if (query !== state.catalogQuery) return;
+    if (taskIds(result.tasks, "taskId") !== taskIds(state.tasks, "id")) throw new Error(deps.t("overview.sessionsPageChanged"));
+    state.sessionOverview = result;
+    state.sessionError = null;
+  } catch (error) { state.sessionError = error.message; }
+  finally {
+    state.sessionLoading = false;
+    if (!state.selected) deps.showOverview();
+  }
+}
+
+// Filters from the URL, on load and on back/forward.
+function applyFilters(deps, params) {
+  const state = deps.state;
+  const filter = params.get("filter");
+  state.filter = STATUS_FILTERS.includes(filter) ? filter : "all";
+  state.query = params.get("q") || "";
+  state.attentionFilter = ATTENTION_KINDS.includes(params.get("attention")) ? params.get("attention") : null;
+  state.catalogAll = params.get("all") === "true";
+  deps.el.search.value = state.query;
+}
+
+function bindCatalogControls(el, state, catalog) {
+  let searchTimer = null;
+  el.search.addEventListener("input", function () {
+    state.query = el.search.value;
+    syncUrl(state, true);
+    window.clearTimeout(searchTimer);
+    searchTimer = window.setTimeout(catalog.reset, 200);
+  });
+  el.catalogNext.addEventListener("click", function () {
+    if (!state.nextCursor) return;
+    state.catalogCursor = state.nextCursor;
+    catalog.refresh();
+  });
+  el.catalogReset.addEventListener("click", catalog.reset);
+  el.catalogAttentionReset.addEventListener("click", function () { catalog.pickAttention(null); });
+  el.refresh.addEventListener("click", function () { catalog.refresh(); });
+}
+`;

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

@@ -0,0 +1,148 @@
+export const APP_SCRIPT = String.raw `
+// Composition root (served as /assets/app.js). It binds the static shell,
+// owns the view state object and is the only place where controllers are
+// wired to each other. Each controller receives one explicit deps object,
+// documented at its factory: services, controllers created before it, and
+// named callbacks into controllers created after it (bound here, late).
+// Everything kept in the browser is view state; Task facts always come from
+// the loopback API.
+//
+//   layout/workspace  sidebar | center | dock columns, dock modes, sizing
+//   app/taskView      draws the selected Task, the dock discussion, the overview
+//   app/selection     selected Task, its detail reads, URL-driven navigation
+//   app/catalog       refresh loop, sidebar, catalog paging and filters
+//   layout/shortcuts  keyboard shortcuts
+//
+// Flows:
+//   refresh  catalog.refresh → sidebar, then the overview (nothing selected)
+//            or selection.reload → taskView.render
+//   select   sidebar row / overview row / URL → selection.selectTask
+//   leave    back button or Escape → selection.clearSelection
+//   write    Task page or discussion afterWrite → quiet catalog refresh
+//   URL      load and back/forward → catalog.applyFilters + selection.followUrl
+import { createI18n } from "/assets/js/lib/i18n.js";
+import { createThemeController } from "/assets/js/lib/theme.js";
+import { api } from "/assets/js/lib/api.js";
+import { createToast } from "/assets/js/ui/toast.js";
+import { createTerminalController } from "/assets/js/views/dock/terminal.js";
+import { createConversationController } from "/assets/js/views/dock/conversation.js";
+import { createPreviewController } from "/assets/js/views/dock/preview.js";
+import { bindGlobalInput } from "/assets/js/views/globalInput.js";
+import { bindCreateTask } from "/assets/js/views/createTask.js";
+import { bindBodySearch } from "/assets/js/views/bodySearch.js";
+import { readQuery } from "/assets/js/layout/router.js";
+import { createWorkspace } from "/assets/js/layout/workspace.js";
+import { bindShortcuts } from "/assets/js/layout/shortcuts.js";
+import { createTaskView } from "/assets/js/app/taskView.js";
+import { createSelection } from "/assets/js/app/selection.js";
+import { createCatalog } from "/assets/js/app/catalog.js";
+
+const $ = function (selector) { return document.querySelector(selector); };
+const el = {
+  sidebar: $(".sidebar"), sidebarDivider: $("#sidebar-divider"), center: $("#center"), detail: $("#detail"),
+  search: $("#search"), filters: $("#status-filters"), attention: $("#attention-bar"), tasks: $("#task-list"),
+  catalogNext: $("#catalog-next"), catalogReset: $("#catalog-reset"), catalogCount: $("#catalog-count"),
+  catalogAttentionReset: $("#catalog-attention-reset"),
+  refresh: $("#refresh"), sync: $("#sync-state"), lastSync: $("#last-sync"), toast: $("#toast"),
+  operator: $("#operator-terminal"), settingsOpen: $("#settings-open"), settings: $("#settings-dialog"),
+  locale: $("#locale-select"), themeOptions: $("#theme-options"),
+  dock: $("#dock"), divider: $("#dock-divider"), dockSwap: $("#dock-swap"), dockClose: $("#dock-close"),
+  dockTabDiscussion: $("#dock-tab-discussion"), dockTabSession: $("#dock-tab-session"),
+  dockTabConversation: $("#dock-tab-conversation"), conversation: $("#dock-conversation"),
+  dockTabPreview: $("#dock-tab-preview"), preview: $("#dock-preview"),
+  discussion: $("#dock-discussion"), session: $("#dock-session"),
+  terminalHost: $("#terminal-host"), terminalEmpty: $("#terminal-empty"), terminalState: $("#terminal-state"),
+  sessionTargets: $("#session-targets"), terminalCli: $("#terminal-cli")
+};
+
+// View state. Each group has exactly one writer.
+const state = {
+  // app/catalog: the dashboard read, its filters and paging, the Session read.
+  tasks: [], counts: null, attention: [], catalogAttention: null, catalogScope: null, catalogQuery: "",
+  catalogAll: false, catalogTotal: 0, catalogCursor: null, nextCursor: null,
+  sessionOverview: null, sessionLoading: false, sessionError: null,
+  attentionFilter: null, generatedAt: null, filter: "all", query: "",
+  // app/selection: the selected Task and its loaded detail.
+  selected: null, detail: null, detailKey: null,
+  // app/taskView: the tab the reader is on.
+  activeTab: "overview"
+};
+
+const i18n = createI18n(el.locale);
+const t = i18n.t;
+const locale = i18n.getLocale;
+const theme = createThemeController(el.themeOptions, t);
+const toast = createToast(el.toast);
+const conversation = createConversationController(el.conversation, t, locale);
+const preview = createPreviewController(el.preview, t);
+const terminal = createTerminalController({
+  host: el.terminalHost, empty: el.terminalEmpty, state: el.terminalState, targets: el.sessionTargets, cli: el.terminalCli
+}, t, locale, toast);
+theme.subscribe(function () { terminal.retheme(); });
+
+// Controllers are created in dependency order; the arrow callbacks below are
+// the only edges pointing at controllers created later.
+let taskView = null;
+let selection = null;
+let catalog = null;
+const workspace = createWorkspace({
+  el: el, state: state, terminal: terminal, conversation: conversation, preview: preview,
+  sessionOpened: function () { taskView.updateSessionTargets(); }
+});
+taskView = createTaskView({
+  el: el, state: state, t: t, locale: locale, api: api, toast: toast, terminal: terminal, workspace: workspace,
+  selectTask: function (taskId) { return selection.selectTask(taskId); },
+  clearSelection: function () { selection.clearSelection(); },
+  pickAttention: function (kind) { catalog.pickAttention(kind); },
+  readPageSessions: function () { return catalog.readPageSessions(); },
+  refreshCatalog: function () { return catalog.refresh({ quiet: true }); }
+});
+selection = createSelection({
+  state: state, t: t, api: api, toast: toast, workspace: workspace, taskView: taskView,
+  renderTaskList: function () { catalog.renderTaskList(); }
+});
+catalog = createCatalog({
+  el: el, state: state, t: t, locale: locale, api: api, toast: toast,
+  selectTask: selection.selectTask,
+  showOverview: taskView.showOverview,
+  reloadSelected: selection.reload
+});
+const globalInput = bindGlobalInput({ t: t, api: api });
+bindCreateTask({ t: t, api: api, selectTask: selection.selectTask,
+  afterWrite: function () { catalog.refresh({ quiet: true }); } });
+bindBodySearch({ t: t, api: api, selectTask: selection.selectTask,
+  currentTask: function () { return state.selected; },
+  captureDraftTarget: conversation.captureDraftTarget, insertReference: conversation.insertReference });
+bindShortcuts({
+  el: el, state: state, globalInput: globalInput, workspace: workspace,
+  selection: selection, catalog: catalog, taskView: taskView
+});
+el.settingsOpen.addEventListener("click", function () { window.location.assign("/settings"); });
+
+// The URL names the catalog filters and the selected Task (with its section).
+function applyStateFromUrl() {
+  const params = readQuery();
+  catalog.applyFilters(params);
+  selection.followUrl(params);
+}
+window.addEventListener("popstate", function () {
+  applyStateFromUrl();
+  catalog.reset();
+});
+
+i18n.subscribe(function () {
+  theme.render();
+  terminal.relabel();
+  catalog.renderSidebar();
+  taskView.relabel();
+  workspace.updateLayout();
+});
+
+workspace.updateLayout();
+taskView.showOverview();
+conversation.open({ scope: "global", roleName: "operator" });
+applyStateFromUrl();
+workspace.restoreDefaultMode();
+catalog.refresh();
+window.setInterval(function () { catalog.refresh({ quiet: true }); }, 5000);
+`;

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

@@ -0,0 +1,139 @@
+export const SELECTION_SCRIPT = String.raw `
+// Which Task is selected and its loaded detail: selecting one, leaving it,
+// following the URL, and reading the Context snapshot (the only input to core
+// rendering) plus the optional runtime observation. This module is the only
+// writer of state.selected, state.detail and state.detailKey; app/taskView
+// draws the result. Leaving a Task with an unsent draft asks first; the page
+// itself warns before unload.
+import { applyUrl, readQuery, syncUrl, urlTaskId } from "/assets/js/layout/router.js";
+
+// Fingerprint of the rendered payload. Quiet polling skips identical reads so
+// local view state (open blocks, list pages, drafts) survives.
+function fingerprint(value) {
+  const text = JSON.stringify(value);
+  let hash = 0;
+  for (let i = 0; i < text.length; i += 1) hash = (hash * 31 + text.charCodeAt(i)) | 0;
+  return text.length + ":" + hash;
+}
+
+// deps: { state, t, api, toast, workspace, taskView, renderTaskList }
+//   state      writes selected, detail, detailKey
+//   api        context, inspect and observation reads
+//   workspace  layout/workspace: layout and the dock on entering/leaving
+//   taskView   app/taskView: draws the selected Task and the overview
+//   renderTaskList()  redraw the sidebar list's selection (app/catalog)
+export function createSelection(deps) {
+  window.addEventListener("beforeunload", function (event) {
+    if (!deps.taskView.hasUnsent()) return;
+    event.preventDefault();
+    event.returnValue = "";
+  });
+  return {
+    selectTask: function (taskId) { return selectTask(deps, taskId); },
+    clearSelection: function () { clearSelection(deps); },
+    followUrl: function (params) { followUrl(deps, params); },
+    // Quietly re-read the selected Task; rejects when the read fails.
+    reload: function () { return load(deps, deps.state.selected, false); }
+  };
+}
+
+function canLeave(deps) {
+  return !deps.taskView.hasUnsent() || window.confirm(deps.t("confirm.leave"));
+}
+
+async function selectTask(deps, taskId) {
+  const state = deps.state;
+  // Re-selecting the visible Task is not navigation.
+  if (state.selected === taskId && state.detail) return;
+  if (state.selected !== taskId && !canLeave(deps)) { syncUrl(state, true); return; }
+  if (urlTaskId() !== taskId) {
+    const params = readQuery();
+    params.delete("section");
+    applyUrl(params, true);
+  }
+  // Show taskId as selected before its detail arrives.
+  state.selected = taskId;
+  state.detail = null;
+  deps.workspace.enterTask();
+  deps.taskView.enterTask();
+  syncUrl(state, state.selected === urlTaskId());
+  deps.workspace.updateLayout();
+  deps.renderTaskList();
+  try {
+    await load(deps, taskId, true);
+  } catch {
+    if (state.selected !== taskId) return;
+    deps.taskView.showDetailError();
+    deps.toast(deps.t("errors.detail"));
+  }
+}
+
+function clearSelection(deps) {
+  if (!canLeave(deps)) return;
+  dropSelection(deps);
+  syncUrl(deps.state, !urlTaskId());
+  deps.workspace.updateLayout();
+  deps.taskView.showOverview();
+  deps.renderTaskList();
+  deps.taskView.updateSessionTargets();
+}
+
+// Drop the selected Task and its dock discussion; callers redraw.
+function dropSelection(deps) {
+  deps.state.selected = null;
+  deps.state.detail = null;
+  deps.taskView.leaveTask();
+  deps.workspace.leaveTask();
+}
+
+// The Task and section named by the URL, on load and on back/forward.
+function followUrl(deps, params) {
+  const state = deps.state;
+  const taskId = params.get("task");
+  if (taskId) {
+    if (taskId === state.selected && state.detail) deps.taskView.applySection(params.get("section"));
+    else selectTask(deps, taskId);
+    return;
+  }
+  if (state.selected && !canLeave(deps)) { syncUrl(state, true); return; }
+  dropSelection(deps);
+  deps.workspace.updateLayout();
+  deps.taskView.showOverview();
+}
+
+async function load(deps, taskId, navigate) {
+  const state = deps.state;
+  if (navigate) deps.taskView.showLoading();
+  // Rendering consumes the current Context snapshot, not event pages.
+  const snapshot = await deps.api.workbench(taskId);
+  const core = snapshot.core;
+  const task = snapshot.task;
+  if (state.selected !== taskId) return;
+  const previous = state.detail && state.detail.task.id === taskId ? state.detail : null;
+  const detail = {
+    task: task, core: core, briefValue: snapshot.brief, evidenceSummary: snapshot.evidence,
+    viewState: previous ? previous.viewState : {},
+    runtime: previous ? previous.runtime : null,
+    runtimeStatus: previous ? previous.runtimeStatus : "waiting",
+    runtimeObservedAt: previous ? previous.runtimeObservedAt : new Date().toISOString()
+  };
+  state.detail = detail;
+  state.detailKey = fingerprint(core);
+  deps.taskView.render(navigate);
+  if (navigate) deps.taskView.applySection(readQuery().get("section"));
+  observe(deps, taskId, detail);
+}
+
+// The optional observation never participates in core readiness.
+function observe(deps, taskId, detail) {
+  function settle(runtime, status) {
+    if (deps.state.detail !== detail) return;
+    detail.runtime = runtime;
+    detail.runtimeStatus = status;
+    detail.runtimeObservedAt = new Date().toISOString();
+    deps.taskView.observationArrived(detail);
+  }
+  deps.api.observation(taskId).then(function (runtime) { settle(runtime, "available"); })
+    .catch(function () { settle(null, "unavailable"); });
+}
+`;