@zq-silk/yui 2.15.0 → 2.16.0

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

@@ -51,8 +51,21 @@ async function refresh(deps, progress, options) {
     const query = catalogQuery(state);
     const dashboard = await deps.api.dashboard(query);
     if (request !== progress.request) return;
-    applyDashboard(state, dashboard, query);
-    showDashboard(deps, progress, previousInputs);
+    // An unchanged quiet poll leaves the list and overview alone: rebuilding
+    // them every few seconds would interrupt scrolling and animations. They
+    // still redraw once a minute so relative times stay true.
+    const signature = query + "|" + JSON.stringify(dashboard);
+    const now = Date.now();
+    if (quiet && signature === progress.signature && now - progress.drawnAt < 60000) {
+      state.generatedAt = new Date().toISOString();
+      el.sync.dataset.state = "ok";
+      el.lastSync.textContent = formatClock(state.generatedAt, deps.locale());
+    } else {
+      progress.signature = signature;
+      progress.drawnAt = now;
+      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) {
@@ -98,18 +111,10 @@ function renderSidebar(deps, progress) {
     reset(deps, progress);
   });
   el.catalogCount.textContent = fill(t("catalog.count"), { shown: state.tasks.length, total: state.catalogTotal });
-  let source = el.filters.querySelector("select");
-  if (!source) {
-    source = h("select", { "aria-label": t("jobs.taskCategory") });
-    source.addEventListener("change", function () {
-      state.source = source.value; state.attentionFilter = null; state.query = ""; el.search.value = "";
-      syncUrl(state, false); reset(deps, progress);
-    });
-    el.filters.append(source);
-  }
-  source.replaceChildren(...["ordinary", "job", "all"].map(value =>
-    h("option", { value }, t("jobs.category." + value))));
-  source.value = state.query.trim() || state.attentionFilter ? "all" : state.source || "ordinary";
+  renderSource(el.source, state, t, function (value) {
+    state.source = value; state.attentionFilter = null; state.query = ""; el.search.value = "";
+    syncUrl(state, false); reset(deps, progress);
+  });
   el.catalogReset.hidden = !state.catalogCursor;
   el.catalogNext.hidden = !state.nextCursor && !state.catalogCursor;
   el.catalogAttentionReset.hidden = !state.attentionFilter;
@@ -117,6 +122,27 @@ function renderSidebar(deps, progress) {
   el.lastSync.textContent = state.generatedAt ? formatClock(state.generatedAt, deps.locale()) : "—";
 }
 
+// Task category: search and attention are cross-category, so they show "all";
+// picking a category clears them, as the server filter then applies again.
+function renderSource(container, state, t, onPick) {
+  const current = state.query.trim() || state.attentionFilter ? "all" : state.source || "ordinary";
+  // Bound once; the handler reads the live state, not this render's snapshot.
+  if (!container.childElementCount) {
+    ["ordinary", "job", "all"].forEach(function (value) {
+      container.append(h("button.seg-btn", { type: "button", role: "radio", dataset: { source: value },
+        onclick: function () {
+          if (value !== (state.source || "ordinary") || state.query.trim() || state.attentionFilter) onPick(value);
+        } }));
+    });
+  }
+  container.querySelectorAll("[data-source]").forEach(function (button) {
+    const value = button.dataset.source;
+    button.textContent = t("jobs.categoryShort." + value);
+    button.title = t("jobs.category." + value);
+    button.setAttribute("aria-checked", String(value === current));
+  });
+}
+
 // Redraw the list in place, keeping its scroll position.
 function renderTaskList(deps) {
   const scroll = deps.el.tasks.scrollTop;

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

@@ -17,7 +17,7 @@ export const APP_SCRIPT = String.raw `
 //   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
+//   leave    rail Workbench 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";
@@ -31,7 +31,9 @@ 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 { rememberPlace, linkPlaces } from "/assets/js/lib/prefs.js";
 import { createWorkspace } from "/assets/js/layout/workspace.js";
+import { createSidebarNav } from "/assets/js/layout/sidebarNav.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";
@@ -39,12 +41,14 @@ 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"),
+  sidebar: $(".sidebar"), rail: $(".app-rail"), railWorkbench: $("#rail-workbench"),
+  sidebarScrim: $("#sidebar-scrim"), sidebarCollapse: $("#sidebar-collapse"), sidebarDivider: $("#sidebar-divider"), center: $("#center"), detail: $("#detail"),
+  search: $("#search"), source: $("#catalog-source"), 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"),
+  dockTarget: $("#dock-target"), dockTargetLabel: $("#dock-target-label"), dockTargetIcon: $("#dock-target-icon"),
+  dockTargetOptions: $("#dock-target-options"), globalInputOpen: $("#global-input-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"),
@@ -52,7 +56,7 @@ const el = {
   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")
+  sessionTargets: $("#session-targets"), settingsOpen: $("#settings-open"), terminalCli: $("#terminal-cli")
 };
 
 // View state. Each group has exactly one writer.
@@ -86,13 +90,18 @@ let taskView = null;
 let selection = null;
 let catalog = null;
 const workspace = createWorkspace({
-  el: el, state: state, terminal: terminal, conversation: conversation, preview: preview,
+  el: el, state: state, t: t, terminal: terminal, conversation: conversation, preview: preview,
   sessionOpened: function () { taskView.updateSessionTargets(); }
 });
+const sidebarNav = createSidebarNav({
+  el: { sidebar: el.sidebar, rail: el.rail, scrim: el.sidebarScrim, collapse: el.sidebarCollapse },
+  relayout: function () { workspace.updateLayout(); }
+});
 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(); },
+  revealSidebar: function () { sidebarNav.reveal(); },
   pickAttention: function (kind) { catalog.pickAttention(kind); },
   readPageSessions: function () { return catalog.readPageSessions(); },
   refreshCatalog: function () { return catalog.refresh({ quiet: true }); }
@@ -114,10 +123,24 @@ 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,
+  el: el, state: state, globalInput: globalInput, workspace: workspace, sidebarNav: sidebarNav,
   selection: selection, catalog: catalog, taskView: taskView
 });
-el.settingsOpen.addEventListener("click", function () { window.location.assign("/settings"); });
+// Workbench <-> Models/Settings: each side remembers where the user was, so a
+// round trip returns to the same filters, Task and management section.
+function rememberWorkbench() { rememberPlace("workbench", window.location.pathname + window.location.search); }
+el.rail.querySelectorAll("a[data-nav-area]").forEach(function (link) { link.addEventListener("click", rememberWorkbench); });
+// The rail's Workbench entry on the workbench itself returns to the overview.
+el.railWorkbench.addEventListener("click", function (event) {
+  if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+  event.preventDefault();
+  sidebarNav.closeDrawer();
+  selection.clearSelection();
+});
+window.addEventListener("pagehide", rememberWorkbench);
+function linkAll() { linkPlaces(el.rail); linkPlaces(el.sidebar); }
+window.addEventListener("pageshow", linkAll);
+linkAll();
 
 // The URL names the catalog filters and the selected Task (with its section).
 function applyStateFromUrl() {
@@ -140,9 +163,10 @@ i18n.subscribe(function () {
 
 workspace.updateLayout();
 taskView.showOverview();
+// The panel starts closed: name its owner without polling until it opens.
 conversation.open({ scope: "global", roleName: "operator" });
+conversation.close();
 applyStateFromUrl();
-workspace.restoreDefaultMode();
 catalog.refresh();
 window.setInterval(function () { catalog.refresh({ quiet: true }); }, 5000);
 `;

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

@@ -2,5 +2,23 @@ export const MANAGE_SCRIPT = String.raw `
 import "/assets/js/app/settings.js";
 import "/assets/js/app/models.js";
 import { startManagement } from "/assets/js/layout/manageShell.js";
+import { createSidebarNav } from "/assets/js/layout/sidebarNav.js";
+import { isEditing } from "/assets/js/lib/dom.js";
+
+// The section list behaves like the workbench task list: collapsible beside
+// the content, a drawer (with the global rail) on narrow screens.
+const sidebarNav = createSidebarNav({
+  el: { sidebar: document.querySelector(".manage-rail"), rail: document.querySelector(".app-rail"), scrim: document.querySelector("#sidebar-scrim"),
+    collapse: document.querySelector("#sidebar-collapse") },
+  relayout: function () {}
+});
+document.querySelectorAll("[data-sidebar-toggle]").forEach(function (button) {
+  button.addEventListener("click", sidebarNav.reveal);
+});
+document.addEventListener("keydown", function (event) {
+  if (document.querySelector("dialog[open]") || event.metaKey || event.ctrlKey || event.altKey) return;
+  if (event.key === "Escape" && sidebarNav.drawerOpen()) { sidebarNav.closeDrawer(); return; }
+  if (event.key === "[" && !isEditing(document.activeElement)) sidebarNav.toggle();
+});
 startManagement();
 `;

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

@@ -74,6 +74,7 @@ function clearSelection(deps) {
   syncUrl(deps.state, !urlTaskId());
   deps.workspace.updateLayout();
   deps.taskView.showOverview();
+  deps.taskView.revealPage();
   deps.renderTaskList();
   deps.taskView.updateSessionTargets();
 }
@@ -96,9 +97,11 @@ function followUrl(deps, params) {
     return;
   }
   if (state.selected && !canLeave(deps)) { syncUrl(state, true); return; }
+  const leaving = !!state.selected;
   dropSelection(deps);
   deps.workspace.updateLayout();
   deps.taskView.showOverview();
+  if (leaving) deps.taskView.revealPage();
 }
 
 async function load(deps, taskId, navigate) {
@@ -120,7 +123,7 @@ async function load(deps, taskId, navigate) {
   state.detail = detail;
   state.detailKey = fingerprint(core);
   deps.taskView.render(navigate);
-  if (navigate) deps.taskView.applySection(readQuery().get("section"));
+  if (navigate) { deps.taskView.applySection(readQuery().get("section")); deps.taskView.revealPage(); }
   observe(deps, taskId, detail);
 }
 

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

@@ -14,6 +14,7 @@ import { updateObservation } from "/assets/js/views/task/observation.js";
 import { renderDiscussion, discussionHasUnsent } from "/assets/js/views/dock/discussion.js";
 import { sameTarget } from "/assets/js/views/dock/terminal.js";
 import { setSectionParam } from "/assets/js/layout/router.js";
+import { enter } from "/assets/js/lib/motion.js";
 
 // Only the observed identity participates: observation timestamps advance on
 // every poll and would otherwise re-render continuously.
@@ -29,7 +30,7 @@ function runtimeSignature(detail) {
 }
 
 // deps: { el, state, t, locale, api, toast, terminal, workspace,
-//         selectTask, clearSelection, pickAttention, readPageSessions, refreshCatalog }
+//         selectTask, clearSelection, revealSidebar, pickAttention, readPageSessions, refreshCatalog }
 //   el         #detail, #center and the dock discussion
 //   state      reads selected, detail, detailKey and the catalog fields the
 //              overview shows; writes activeTab
@@ -37,7 +38,8 @@ function runtimeSignature(detail) {
 //   terminal   the dock's native Session (views/dock/terminal)
 //   workspace  layout/workspace: dock toggles and opening Sessions
 //   selectTask(taskId)  an overview row was chosen (app/selection)
-//   clearSelection()    the Task page's back button (app/selection)
+//   clearSelection()    the Task page's "Tasks" crumb (app/selection)
+//   revealSidebar()     the page header's task-list switch (layout/sidebarNav)
 //   pickAttention(kind), readPageSessions()  overview actions (app/catalog)
 //   refreshCatalog()    quiet catalog refresh after a write; resolves when done
 export function createTaskView(deps) {
@@ -59,7 +61,10 @@ export function createTaskView(deps) {
     showOverview: function () { showOverview(deps); },
     updateSessionTargets: function () { updateSessionTargets(deps); },
     switchTab: function (tab, options) { switchTab(deps, tab, options); },
-    applySection: function (section) { applySection(deps, section); }
+    applySection: function (section) { applySection(deps, section); },
+    // The page content after an explicit navigation (a Task opened, back to
+    // the overview) rises in; polling redraws never call this.
+    revealPage: function () { reveal(deps.el.detail.querySelector(":scope > .page")); }
   };
   return view.controller;
 }
@@ -143,9 +148,15 @@ function detailContext(view) {
   const api = deps.api;
   return {
     activeTab: deps.state.activeTab,
-    onTab: view.controller.switchTab,
+    onTab: function (tab, options) {
+      const changed = tab !== deps.state.activeTab;
+      switchTab(deps, tab, options);
+      if (changed) reveal(deps.el.detail.querySelector(".tab-panel:not([hidden])"));
+    },
     onBack: deps.clearSelection,
+    revealSidebar: deps.revealSidebar,
     showDock: deps.workspace.toggleDock,
+    toggleOperator: deps.workspace.toggleOperator,
     openConversation: function (materials) {
       deps.workspace.openConversation({ scope: "task", taskId: deps.state.selected, roleName: "leader" }, materials);
     },
@@ -253,8 +264,14 @@ function showOverview(deps) {
     select: deps.selectTask,
     filterAttention: deps.pickAttention,
     readSessions: deps.readPageSessions,
-    openOperator: deps.workspace.openOperator
+    toggleOperator: deps.workspace.toggleOperator,
+    revealSidebar: deps.revealSidebar
   });
+  deps.workspace.syncDockButtons();
+}
+
+function reveal(element) {
+  if (element && typeof enter === "function") enter(element, "rise");
 }
 
 function switchTab(deps, tab, options) {

package/dist/web/assets/client/i18n/en.js

@@ -66,6 +66,9 @@ export const EN = {
     "jobs.category.ordinary": "Ordinary Tasks",
     "jobs.category.job": "Job execution Tasks",
     "jobs.category.all": "All Tasks",
+    "jobs.categoryShort.ordinary": "Ordinary",
+    "jobs.categoryShort.job": "Jobs",
+    "jobs.categoryShort.all": "All",
     "jobs.recentSuccess": "Most recent successful Run",
     "jobs.diagnostics": "Execution diagnostics",
     "jobs.artifacts": "Registered fixed artifacts",
@@ -146,6 +149,9 @@ export const EN = {
     "models.window.monthly": "Monthly",
     "manage.nav": "Main navigation",
     "manage.workbench": "Workbench",
+    "manage.sections": "Sections",
+    "manage.collapseSections": "Collapse sections",
+    "manage.showSections": "Show sections",
     "settings.section.preferences": "Preferences",
     "settings.section.skills": "Skills",
     "settings.section.server": "Agents & server",
@@ -444,6 +450,8 @@ export const EN = {
     "sidebar.workItems": "Work items",
     "sidebar.resize": "Resize task list",
     "sidebar.resizeHint": "Drag to resize · double-click to reset",
+    "sidebar.collapse": "Collapse task list",
+    "sidebar.show": "Show task list",
     "search.label": "Search tasks",
     "bodySearch.title": "Search task contents",
     "bodySearch.query": "Text to find",
@@ -505,7 +513,6 @@ export const EN = {
     "catalog.help.executionSignals": "Live runs, open work and recovery signals to inspect; not failures",
     "actions.refresh": "Refresh",
     "actions.operator": "Operator",
-    "actions.back": "Back to tasks",
     "actions.close": "Close",
     "actions.answer": "Answer",
     "actions.save": "Save",
@@ -558,6 +565,7 @@ export const EN = {
     "shortcut.refresh": "Refresh",
     "shortcut.dock": "Show or hide the session panel",
     "shortcut.operator": "Operator session",
+    "shortcut.sidebar": "Show or hide the task list",
     "shortcut.tabs": "Switch task sections",
     "shortcut.escape": "Close panel / leave task",
     "loading.dashboard": "Reading local state…",
@@ -572,7 +580,6 @@ export const EN = {
     "common.notReported": "not reported",
     "detail.unobserved": "unknown",
     "detail.partial": "partial",
-    "overview.kicker": "Workspace",
     "overview.title": "Overview",
     "overview.sub": "{total} tasks · {active} active",
     "overview.inbox": "Waiting on you",
@@ -604,7 +611,6 @@ export const EN = {
     "metrics.completed": "Completed",
     "metrics.total": "Total",
     "crumbs.label": "Breadcrumb",
-    "crumbs.tasks": "Tasks",
     "task.updated": "Updated",
     "tabs.label": "Task sections",
     "tabs.overview": "Overview",
@@ -1000,6 +1006,7 @@ export const EN = {
     "terminal.cliHint": "Full terminal",
     "terminal.historyLimited": "This Role has a {current}-line tmux history. Exit and re-enter it to use {target} lines.",
     "global.open": "Global input",
+    "global.openRole": "Message another Role…",
     "global.title": "Global Role input",
     "global.help": "Queue is the default. A cancel request does not prove the Turn stopped.",
     "global.role": "Role",

package/dist/web/assets/client/i18n/zh-CN.js

@@ -64,6 +64,9 @@ export const ZH_CN = {
     "jobs.category.ordinary": "普通任务",
     "jobs.category.job": "Job 执行任务",
     "jobs.category.all": "全部任务",
+    "jobs.categoryShort.ordinary": "普通",
+    "jobs.categoryShort.job": "Job",
+    "jobs.categoryShort.all": "全部",
     "jobs.recentSuccess": "最近成功的 Run",
     "jobs.diagnostics": "执行诊断",
     "jobs.artifacts": "已登记固定产物",
@@ -144,6 +147,9 @@ export const ZH_CN = {
     "models.window.monthly": "每月",
     "manage.nav": "主导航",
     "manage.workbench": "工作台",
+    "manage.sections": "分区",
+    "manage.collapseSections": "收起分区列表",
+    "manage.showSections": "展开分区列表",
     "settings.section.preferences": "偏好设置",
     "settings.section.skills": "Skill",
     "settings.section.server": "Agent 与服务",
@@ -440,6 +446,8 @@ export const ZH_CN = {
     "sidebar.workItems": "工作项",
     "sidebar.resize": "调整任务列表宽度",
     "sidebar.resizeHint": "拖拽调整宽度 · 双击恢复默认",
+    "sidebar.collapse": "收起任务列表",
+    "sidebar.show": "展开任务列表",
     "search.label": "搜索任务",
     "bodySearch.title": "搜索任务正文",
     "bodySearch.query": "查找正文",
@@ -501,7 +509,6 @@ export const ZH_CN = {
     "catalog.help.executionSignals": "需要检查的运行、未完成工作和恢复信号；不代表失败",
     "actions.refresh": "刷新",
     "actions.operator": "Operator",
-    "actions.back": "返回任务列表",
     "actions.close": "关闭",
     "actions.answer": "回答",
     "actions.save": "保存",
@@ -554,6 +561,7 @@ export const ZH_CN = {
     "shortcut.refresh": "刷新",
     "shortcut.dock": "显示或隐藏会话面板",
     "shortcut.operator": "Operator 会话",
+    "shortcut.sidebar": "显示或隐藏任务列表",
     "shortcut.tabs": "切换任务分区",
     "shortcut.escape": "关闭面板／离开任务",
     "loading.dashboard": "正在读取本地状态…",
@@ -568,7 +576,6 @@ export const ZH_CN = {
     "common.notReported": "未上报",
     "detail.unobserved": "未知",
     "detail.partial": "部分",
-    "overview.kicker": "工作区",
     "overview.title": "总览",
     "overview.sub": "{total} 个任务 · {active} 个进行中",
     "overview.inbox": "等待你回答",
@@ -600,7 +607,6 @@ export const ZH_CN = {
     "metrics.completed": "已完成",
     "metrics.total": "总数",
     "crumbs.label": "路径",
-    "crumbs.tasks": "任务",
     "task.updated": "更新于",
     "tabs.label": "任务分区",
     "tabs.overview": "概览",
@@ -996,6 +1002,7 @@ export const ZH_CN = {
     "terminal.cliHint": "完整终端",
     "terminal.historyLimited": "这个 Role 的 tmux 历史只有 {current} 行；退出并重新进入后可使用 {target} 行。",
     "global.open": "全局消息",
+    "global.openRole": "给其他 Role 发消息…",
     "global.title": "全局 Role 消息",
     "global.help": "默认排队；取消请求不代表执行已停止。",
     "global.role": "Role",

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

@@ -16,6 +16,7 @@ import { DOM_SCRIPT } from "./lib/dom.js";
 import { FORMAT_SCRIPT } from "./lib/format.js";
 import { I18N_SCRIPT } from "./lib/i18n.js";
 import { MARKDOWN_SCRIPT } from "./lib/markdown.js";
+import { MOTION_SCRIPT } from "./lib/motion.js";
 import { PREFS_SCRIPT } from "./lib/prefs.js";
 import { SESSION_SCRIPT } from "./lib/session.js";
 import { THEME_SCRIPT } from "./lib/theme.js";
@@ -55,6 +56,7 @@ import { RESIZER_SCRIPT } from "./layout/resizer.js";
 import { ROUTER_SCRIPT } from "./layout/router.js";
 import { SHORTCUTS_SCRIPT } from "./layout/shortcuts.js";
 import { SIZING_SCRIPT } from "./layout/sizing.js";
+import { SIDEBAR_NAV_SCRIPT } from "./layout/sidebarNav.js";
 import { WORKSPACE_SCRIPT } from "./layout/workspace.js";
 import { CATALOG_SCRIPT } from "./app/catalog.js";
 import { SELECTION_SCRIPT } from "./app/selection.js";
@@ -77,6 +79,7 @@ export const CLIENT_MODULES = Object.freeze({
     "lib/dom": DOM_SCRIPT,
     "lib/format": FORMAT_SCRIPT,
     "lib/prefs": PREFS_SCRIPT,
+    "lib/motion": MOTION_SCRIPT,
     "lib/i18n": I18N_SCRIPT,
     "lib/theme": THEME_SCRIPT,
     "lib/api": API_SCRIPT,
@@ -116,6 +119,7 @@ export const CLIENT_MODULES = Object.freeze({
     "views/task/files": TASK_FILES_SCRIPT,
     "layout/resizer": RESIZER_SCRIPT,
     "layout/sizing": SIZING_SCRIPT,
+    "layout/sidebarNav": SIDEBAR_NAV_SCRIPT,
     "layout/workspace": WORKSPACE_SCRIPT,
     "layout/router": ROUTER_SCRIPT,
     "layout/shortcuts": SHORTCUTS_SCRIPT,

package/dist/web/assets/client/layout/manageShell.js

@@ -1,6 +1,8 @@
 import { MANAGE_SECTIONS } from "../../shared/manageNav.js";
 export const MANAGE_SHELL_SCRIPT = String.raw `
 import { createI18n } from "/assets/js/lib/i18n.js";
+import { rememberPlace, linkPlaces } from "/assets/js/lib/prefs.js";
+import { enter } from "/assets/js/lib/motion.js";
 const SECTIONS = ${JSON.stringify(MANAGE_SECTIONS)};
 export const i18n = createI18n([document.querySelector("#locale-select"), document.querySelector("#settings-locale")]);
 const pages = new Map();
@@ -34,6 +36,8 @@ export function manageHref(next) {
   return "/" + manageArea(next.page, next.section) + "/" + next.section +
     (next.section === "quota" && next.source === "command-code" ? "?source=command-code" : "");
 }
+// The center column scrolls, not the document (the frame is the workbench's).
+function scroller() { return document.querySelector("#manage-scroll"); }
 function render() {
   if (!started) return;
   const rail = document.querySelector(".manage-rail");
@@ -43,29 +47,45 @@ function render() {
     if (active) link.setAttribute("aria-current", "page"); else link.removeAttribute("aria-current");
     if (dirty[link.dataset.page]?.[link.dataset.section]) link.dataset.dirty = "true"; else delete link.dataset.dirty;
   });
-  rail.querySelectorAll("a[data-area]").forEach(link => {
-    if (link.dataset.area === area) link.setAttribute("aria-current", "true"); else link.removeAttribute("aria-current");
+  // The global rail marks the current area.
+  const app = document.querySelector(".manage-app");
+  app.querySelectorAll("a[data-area]").forEach(link => {
+    if (link.dataset.area === area) link.setAttribute("aria-current", "page"); else link.removeAttribute("aria-current");
   });
+  // The list head and the top bar name where the reader is.
+  const areaTitle = i18n.t(area + ".title");
+  const sectionTitle = i18n.t((route.page === "models" ? "models" : "settings") + ".section." + route.section);
+  document.querySelector("#manage-area-title").textContent = areaTitle;
+  document.querySelector("#manage-crumb-area").textContent = areaTitle;
+  document.querySelector("#manage-crumb-section").textContent = sectionTitle;
   rail.querySelectorAll("[data-area-group]").forEach(group => {
     if (group.dataset.areaGroup === area) group.dataset.active = "true"; else delete group.dataset.active;
   });
-  document.title = i18n.t((route.page === "models" ? "models" : "settings") + ".section." + route.section) +
-    " · " + i18n.t(area + ".title") + " · Yui";
+  linkPlaces(app);
+  document.title = sectionTitle + " · " + areaTitle + " · Yui";
 }
 function apply(next) {
   route = next;
+  rememberPlace(manageArea(next.page, next.section), manageHref(next));
+  rememberPlace("manage", manageHref(next));
   document.querySelector("#models-root").hidden = next.page !== "models";
   document.querySelector("#settings-root").hidden = next.page !== "settings";
   pages.get(next.page).show(next);
   render();
 }
+// A section the reader switched to rises in (never on the first paint).
+function revealSection() {
+  if (typeof enter !== "function") return;
+  enter(document.querySelector("#models-root:not([hidden]), #settings-root:not([hidden])"), "rise");
+}
 export function navigateManage(next) {
   const normalized = readManageRoute(new URL(manageHref(next), location.origin));
   if (manageHref(normalized) === location.pathname + location.search) return;
-  history.replaceState({ ...history.state, scroll: window.scrollY }, "");
+  history.replaceState({ ...history.state, scroll: scroller().scrollTop }, "");
   history.pushState({ scroll: 0 }, "", manageHref(normalized));
   apply(normalized);
-  window.scrollTo(0, 0);
+  scroller().scrollTop = 0;
+  revealSection();
 }
 export function createManageShell(options) {
   return {
@@ -79,7 +99,7 @@ export function registerManagePage(name, controller) { pages.set(name, controlle
 export function startManagement() {
   started = true;
   route = readManageRoute(new URL(location.href));
-  history.replaceState({ ...history.state, scroll: window.scrollY }, "", manageHref(route));
+  history.replaceState({ ...history.state, scroll: scroller().scrollTop }, "", manageHref(route));
   history.scrollRestoration = "manual";
   apply(route);
   document.querySelector(".manage-app").hidden = false;
@@ -96,8 +116,10 @@ export function startManagement() {
   });
   window.addEventListener("popstate", () => {
     apply(readManageRoute(new URL(location.href)));
-    window.scrollTo(0, history.state?.scroll || 0);
+    scroller().scrollTop = history.state?.scroll || 0;
+    revealSection();
   });
+  window.addEventListener("pageshow", render);
   i18n.subscribe(render);
 }
 `;

package/dist/web/assets/client/layout/shortcuts.js

@@ -6,11 +6,12 @@ import { isEditing } from "/assets/js/lib/dom.js";
 
 const TABS = ${JSON.stringify(TASK_TABS)};
 
-// deps: { el, state, globalInput, workspace, selection, catalog, taskView }
+// deps: { el, state, globalInput, workspace, sidebarNav, selection, catalog, taskView }
 //   el           #search, #settings-dialog and #terminal-host
 //   state        read-only here: state.selected, state.detail
 //   globalInput  views/globalInput (its dialog blocks shortcuts while open)
 //   workspace    layout/workspace: the dock and the operator Session
+//   sidebarNav   layout/sidebarNav: "[" shows or hides the task list
 //   selection    app/selection: Escape leaves the Task
 //   catalog      app/catalog: "r" refreshes
 //   taskView     app/taskView: 1–4 switch tabs
@@ -26,10 +27,12 @@ export function bindShortcuts(deps) {
   });
 }
 
-// Escape unwinds one level: leave a field, close the dock, leave the Task.
+// Escape unwinds one level: leave a field, close the task-list drawer, close
+// the dock, leave the Task.
 function escape(deps, active, typing, inTerminal) {
   if (inTerminal) return;
   if (typing) { active.blur(); return; }
+  if (deps.sidebarNav.drawerOpen()) { deps.sidebarNav.closeDrawer(); return; }
   if (deps.workspace.dockVisible()) { deps.workspace.setDockOpen(false); return; }
   if (deps.state.selected) deps.selection.clearSelection();
 }
@@ -37,8 +40,9 @@ function escape(deps, active, typing, inTerminal) {
 function shortcut(deps, event) {
   const key = event.key.toLowerCase();
   if (key === "/") { event.preventDefault(); deps.el.search.focus(); deps.el.search.select(); }
+  else if (key === "[") deps.sidebarNav.toggle();
   else if (key === "r") deps.catalog.refresh();
-  else if (key === "o") deps.workspace.openOperator();
+  else if (key === "o") deps.workspace.toggleOperator();
   else if (key === "d") deps.workspace.toggleDock();
   else if (/^[1-9]$/.test(key) && Number(key) <= TABS.length && deps.state.detail) deps.taskView.switchTab(TABS[Number(key) - 1]);
 }