cool-workflow 0.2.4 → 0.2.6

package/ui/workbench/app.js

@@ -15,7 +15,52 @@ const PANEL_GROUPS = [
   { key: "collaboration", label: "Review & collaboration", panels: ["review", "comments"] }
 ];
 
-const state = { activeRunId: null, activeTab: "graph" };
+const NAV = globalThis.CWWorkbenchNavigation;
+if (!NAV) throw new Error("Workbench navigation helper is not available");
+const INSPECTION = globalThis.CWWorkbenchInspection;
+if (!INSPECTION) throw new Error("Workbench inspection helper is not available");
+
+// `indexSeq` is a request sequence number: the debounced filter input can
+// start a second /api/index fetch while an older one is still in flight, and
+// only the NEWEST request may render (an old slow response must not
+// overwrite a new fast one). `viewFetchedAt` is when the active run's view
+// was fetched, shown as "as of HH:MM:SS" in the detail header.
+const state = {
+  activeRunId: null,
+  activeTab: NAV.DEFAULT_TAB,
+  currentView: null,
+  detailSeq: 0,
+  indexSeq: 0,
+  viewFetchedAt: null
+};
+
+// The host's auth token, read ONCE at startup from the page URL. When
+// CW_WORKBENCH_TOKEN is set on the host, every /api/* request must carry it;
+// the static UI files themselves are served without it, so the page loads
+// and can explain what to do instead of rendering broken.
+const TOKEN = new URLSearchParams(location.search).get("token") || "";
+
+function routeUrl(runId, tab) {
+  return `${location.pathname}${location.search}${NAV.formatFragment(runId, tab)}`;
+}
+
+function writeRoute(runId, tab, mode = "push") {
+  const fragment = NAV.formatFragment(runId, tab);
+  if (location.hash === fragment && mode === "push") return;
+  history[mode === "replace" ? "replaceState" : "pushState"](null, "", routeUrl(runId, tab));
+}
+
+// Build a request URL with URLSearchParams so the token composes with any
+// other query params (e.g. the index filter's ?text=).
+function apiUrl(pathname, params = {}) {
+  const search = new URLSearchParams();
+  for (const [key, value] of Object.entries(params)) {
+    if (value) search.set(key, value);
+  }
+  if (TOKEN) search.set("token", TOKEN);
+  const query = search.toString();
+  return query ? `${pathname}?${query}` : pathname;
+}
 
 async function getJson(url) {
   const res = await fetch(url, { headers: { Accept: "application/json" } });
@@ -24,7 +69,10 @@ async function getJson(url) {
   try {
     body = JSON.parse(text);
   } catch {
-    throw new Error(`non-JSON response (${res.status})`);
+    throw new Error(`non-JSON response (${res.status}): ${text.slice(0, 120)}`);
+  }
+  if (res.status === 401) {
+    throw new Error("unauthorized — reopen as /?token=<your CW_WORKBENCH_TOKEN value>");
   }
   if (!res.ok) throw new Error(body && body.error ? body.error : `HTTP ${res.status}`);
   return body;
@@ -43,34 +91,71 @@ function el(tag, attrs = {}, children = []) {
   return node;
 }
 
-function freshnessBadge(value) {
+function freshnessBadge(value, title) {
   const v = String(value || "").toLowerCase();
-  return el("span", { class: `badge ${v || "absent"}`, text: value || "unknown" });
+  const attrs = { class: `badge ${v || "absent"}`, text: value || "unknown" };
+  if (title) attrs.title = title;
+  return el("span", attrs);
 }
 
 async function loadIndex() {
+  const seq = ++state.indexSeq;
   const filter = document.getElementById("filter").value.trim();
   const list = document.getElementById("run-list");
+  // A loading placeholder, not a bare wipe: the same pattern the detail
+  // pane uses, so the sidebar never flashes empty while the fetch runs.
   list.innerHTML = "";
+  list.appendChild(el("li", { class: "muted", text: "loading runs…", role: "status" }));
   let view;
   try {
-    view = await getJson(`/api/index${filter ? `?text=${encodeURIComponent(filter)}` : ""}`);
+    view = await getJson(apiUrl("/api/index", { text: filter }));
   } catch (error) {
-    list.appendChild(el("li", { class: "err", text: `failed to load index: ${error.message}` }));
+    if (seq !== state.indexSeq) return;
+    list.innerHTML = "";
+    list.appendChild(el("li", { class: "err", text: `failed to load index: ${error.message}`, role: "alert" }));
+    // Clear the stale "registry valid · scope …" line — leaving the last
+    // successful freshness next to a load error is itself a stale badge on
+    // the one panel whose whole point is freshness.
+    const fresh = document.getElementById("registry-freshness");
+    fresh.innerHTML = "";
+    fresh.append("registry ", freshnessBadge("unavailable"), " · index unreachable");
     return;
   }
+  // Only the newest request may render (see state.indexSeq).
+  if (seq !== state.indexSeq) return;
+  list.innerHTML = "";
   const reg = view.registry || {};
   const fresh = document.getElementById("registry-freshness");
   fresh.innerHTML = "";
-  fresh.append("registry ", freshnessBadge(reg.freshness && reg.freshness.status), ` · scope ${view.scope}`);
-  const records = (view.runs && view.runs.records) || [];
+  const regStatus = reg.freshness && reg.freshness.status;
+  const regTitle = String(regStatus || "").toLowerCase() === "absent"
+    ? "no home registry data yet — runs made in this repo still show; `cw registry refresh` builds it"
+    : undefined;
+  fresh.append("registry ", freshnessBadge(regStatus, regTitle), ` · scope ${view.scope}`);
+  const runs = view.runs || {};
+  const records = runs.records || [];
   if (!records.length) {
-    list.appendChild(el("li", { class: "muted", text: "no runs indexed in this scope" }));
+    list.appendChild(el("li", { class: "muted" }, [
+      el("div", { text: "no runs indexed in this scope" }),
+      el("div", { class: "hint", text: 'create one with: cw quickstart <app> --repo <path> --question "..."' })
+    ]));
     return;
   }
-  for (const record of records) {
+  // Tell the user when the page is only part of the run set (the server
+  // returns the newest page but caps it) — otherwise a scope with more runs
+  // than the page size silently hides the rest, and someone checking "did my
+  // run get created" is misled into thinking it doesn't exist.
+  if (typeof runs.total === "number" && runs.total > records.length) {
+    list.appendChild(el("li", { class: "muted hint", text: `showing latest ${records.length} of ${runs.total} runs` }));
+  }
+  // The server returns the page sorted oldest-first; show newest at the top.
+  for (const record of [...records].reverse()) {
     const lifecycle = record.lifecycle || record.status || "";
-    const li = el("li", { class: state.activeRunId === record.runId ? "active" : "" }, [
+    // A real <button>, not a bare <li> with a click listener: Tab reaches
+    // it, Enter/Space activate it, and it gets a focus ring for free — no
+    // extra ARIA needed. Same CSS classes as before so the row/card look
+    // is unchanged (see app.css .run-list button rules).
+    const btn = el("button", { type: "button", "data-runid": record.runId, class: state.activeRunId === record.runId ? "active" : "" }, [
       el("div", { class: "rid" }, [
         el("span", { class: `status-dot ${lifecycle}`, title: lifecycle || "unknown" }),
         document.createTextNode(record.runId)
@@ -80,44 +165,115 @@ async function loadIndex() {
         text: [record.appId || record.workflowId, lifecycle, record.repo].filter(Boolean).join(" · ")
       })
     ]);
-    li.addEventListener("click", () => selectRun(record.runId));
-    list.appendChild(li);
+    btn.addEventListener("click", () => selectRun(record.runId));
+    list.appendChild(el("li", { class: "run-entry" }, [btn]));
+  }
+}
+
+// Move the "active" highlight to the chosen run's button WITHOUT rebuilding
+// the list. Rebuilding (the old `loadIndex()` call in selectRun) removed the
+// very <button> the user had just clicked/Entered, dropping keyboard focus to
+// <body> and flashing the whole sidebar on every selection.
+function markActiveRow(runId) {
+  const list = document.getElementById("run-list");
+  for (const btn of list.querySelectorAll("button[data-runid]")) {
+    const active = btn.getAttribute("data-runid") === runId;
+    btn.classList.toggle("active", active);
+    if (active) btn.setAttribute("aria-current", "true");
+    else btn.removeAttribute("aria-current");
   }
 }
 
-async function selectRun(runId) {
+function selectRun(runId, options = {}) {
   state.activeRunId = runId;
-  loadIndex();
+  if (!state.currentView || state.currentView.runId !== runId) state.currentView = null;
+  markActiveRow(runId);
+  if (options.history !== false) writeRoute(runId, state.activeTab);
+  return loadRunDetail(runId);
+}
+
+async function loadRunDetail(runId) {
+  const seq = ++state.detailSeq;
   const detail = document.getElementById("run-panel");
   detail.innerHTML = "";
-  detail.appendChild(el("p", { class: "muted", text: `loading ${runId}…` }));
+  detail.appendChild(el("p", { class: "muted", text: `loading ${runId}…`, role: "status" }));
   let view;
   try {
-    view = await getJson(`/api/run/${encodeURIComponent(runId)}`);
+    view = await getJson(apiUrl(`/api/run/${encodeURIComponent(runId)}`));
   } catch (error) {
+    if (state.activeRunId !== runId || seq !== state.detailSeq) return;
     detail.innerHTML = "";
-    detail.appendChild(el("p", { class: "err", text: `failed to load run: ${error.message}` }));
+    detail.appendChild(el("p", { class: "err", text: `failed to load run: ${error.message}`, role: "alert" }));
     return;
   }
+  // The user may have clicked another run while this fetch was in flight;
+  // a stale response must not overwrite the newer selection's render.
+  if (state.activeRunId !== runId || seq !== state.detailSeq) return;
+  state.viewFetchedAt = new Date();
+  state.currentView = view;
   renderRun(view);
 }
 
-function renderRun(view) {
+// The refresh button re-derives BOTH panes from disk: the sidebar index AND
+// the currently-open run's detail. Refreshing only the index (the old
+// behavior) left the detail header's lifecycle badge showing stale state
+// while the sidebar dot next to it had already changed.
+function refreshAll() {
+  loadIndex();
+  if (state.activeRunId) loadRunDetail(state.activeRunId);
+}
+
+function formatClock(date) {
+  return date ? date.toTimeString().slice(0, 8) : "";
+}
+
+function selectTab(tab, options = {}) {
+  state.activeTab = NAV.TAB_KEYS.includes(tab) ? tab : NAV.DEFAULT_TAB;
+  if (options.history !== false && state.activeRunId) writeRoute(state.activeRunId, state.activeTab);
+  if (state.currentView) renderRun(state.currentView, { focusTab: options.focus === true });
+}
+
+function renderRun(view, options = {}) {
   const detail = document.getElementById("run-panel");
   detail.innerHTML = "";
   const header = el("div", { class: "kv" }, [
     el("span", {}, [el("b", { text: "run " }), document.createTextNode(view.runId)]),
     el("span", {}, [document.createTextNode("resolved "), freshnessBadge(view.resolved ? "valid" : "missing")])
   ]);
+  if (view.lifecycle) {
+    header.appendChild(el("span", {}, [document.createTextNode("lifecycle "), freshnessBadge(view.lifecycle)]));
+  }
+  if (state.viewFetchedAt) {
+    header.appendChild(el("span", { class: "muted", text: `as of ${formatClock(state.viewFetchedAt)}` }));
+  }
   if (view.error) header.appendChild(el("span", { class: "err", text: view.error }));
   detail.appendChild(header);
+  if (view.lifecycle === "blocked" || view.lifecycle === "failed") {
+    detail.appendChild(
+      el("p", { class: "recovery-hint", text: `${view.lifecycle} — run 'cw run status ${view.runId}' or 'cw doctor' for next steps` })
+    );
+  }
 
-  const tabs = el("div", { class: "tabs" });
+  const tabs = el("div", { class: "tabs", role: "tablist" });
   for (const group of PANEL_GROUPS) {
-    const btn = el("button", { class: `tab ${state.activeTab === group.key ? "active" : ""}`, text: group.label });
-    btn.addEventListener("click", () => {
-      state.activeTab = group.key;
-      renderRun(view);
+    const active = state.activeTab === group.key;
+    const btn = el("button", {
+      id: `workbench-tab-${group.key}`,
+      class: `tab ${active ? "active" : ""}`,
+      text: group.label,
+      role: "tab",
+      "aria-controls": `workbench-panel-${group.key}`,
+      "aria-selected": active ? "true" : "false",
+      tabindex: active ? "0" : "-1"
+    });
+    btn.addEventListener("click", (event) => {
+      selectTab(group.key, { focus: event.detail === 0 });
+    });
+    btn.addEventListener("keydown", (event) => {
+      const next = NAV.moveTab(state.activeTab, event.key);
+      if (next === state.activeTab && !["Home", "End", "ArrowLeft", "ArrowRight"].includes(event.key)) return;
+      event.preventDefault();
+      selectTab(next, { focus: true });
     });
     tabs.appendChild(btn);
   }
@@ -125,10 +281,29 @@ function renderRun(view) {
 
   const group = PANEL_GROUPS.find((g) => g.key === state.activeTab) || PANEL_GROUPS[0];
   const panels = (view.panels && view.panels[group.key]) || {};
+  const tabPanel = el("section", {
+    id: `workbench-panel-${group.key}`,
+    role: "tabpanel",
+    "aria-labelledby": `workbench-tab-${group.key}`
+  });
+  // Some groups declare two panel names that map to the same capability on
+  // the server (e.g. graph's compact/criticalPath both come from
+  // summary.show), so they carry byte-identical payloads. Render such a pair
+  // ONCE under a merged label instead of showing the same JSON twice under
+  // two names that promise distinct views.
+  const rendered = [];
   for (const name of group.panels) {
     const panel = panels[name];
-    if (panel) detail.appendChild(renderPanel(name, panel));
+    if (!panel) continue;
+    const twin = rendered.find((entry) => JSON.stringify(entry.panel) === JSON.stringify(panel));
+    if (twin) twin.names.push(name);
+    else rendered.push({ names: [name], panel });
+  }
+  for (const entry of rendered) {
+    tabPanel.appendChild(renderPanel(entry.names.join(" / "), entry.panel));
   }
+  detail.appendChild(tabPanel);
+  if (options.focusTab) document.getElementById(`workbench-tab-${group.key}`).focus();
 }
 
 function renderPanel(name, panel) {
@@ -140,6 +315,8 @@ function renderPanel(name, panel) {
   card.appendChild(head);
   card.appendChild(el("div", { class: "kv" }, [el("span", { class: "src", text: panel.cli }), el("span", { class: "src", text: panel.mcp })]));
   if (panel.status === "present") {
+    const actionSummary = renderActionSummary(panel.data);
+    if (actionSummary) card.appendChild(actionSummary);
     card.appendChild(renderStructured(panel.data) || el("pre", { class: "json", text: JSON.stringify(panel.data, null, 2) }));
   } else {
     card.appendChild(el("div", { class: "absent-note", text: `absent — ${panel.error || "source unreadable"}` }));
@@ -147,6 +324,23 @@ function renderPanel(name, panel) {
   return card;
 }
 
+function renderActionSummary(data) {
+  const facts = INSPECTION.actionFacts(data);
+  if (facts.length === 0) return null;
+  const summary = el("section", { class: "what-matters", "aria-label": "What matters" }, [
+    el("h3", { class: "what-matters-title", text: "What matters" })
+  ]);
+  for (const fact of facts) {
+    summary.appendChild(
+      el("div", { class: `action-fact ${fact.key}` }, [
+        el("div", { class: "action-label", text: fact.label }),
+        el("ul", { class: "action-items" }, fact.items.map((item) => el("li", { text: item })))
+      ])
+    );
+  }
+  return summary;
+}
+
 // Purely presentational shape-detection: recognizes the two payload shapes
 // that recur across several capabilities (a nodes/edges graph, and one or
 // more TrustAuditEvent[] arrays) and tables them instead of dumping raw
@@ -173,17 +367,27 @@ function renderStructured(data) {
   return null;
 }
 
+// A semantically-correct data table: header cells in a <thead> with
+// scope="col", body rows in a <tbody> — screen readers can then associate
+// each cell with its column header.
+function structTable(headers) {
+  const table = el("table", { class: "struct-table" }, [
+    el("thead", {}, [el("tr", {}, headers.map((h) => el("th", { scope: "col", text: h })))])
+  ]);
+  const tbody = el("tbody");
+  table.appendChild(tbody);
+  return { table, tbody };
+}
+
 function renderGraph(data) {
   const wrap = el("div");
   const nodesBlock = el("div", { class: "struct-block" }, [el("div", { class: "struct-title", text: `nodes (${data.nodes.length})` })]);
   if (data.nodes.length === 0) {
     nodesBlock.appendChild(el("div", { class: "struct-empty", text: "none" }));
   } else {
-    const table = el("table", { class: "struct-table" }, [
-      el("tr", {}, ["id", "kind", "status", "label"].map((h) => el("th", { text: h })))
-    ]);
+    const { table, tbody } = structTable(["id", "kind", "status", "label"]);
     for (const node of data.nodes) {
-      table.appendChild(
+      tbody.appendChild(
         el("tr", {}, [
           el("td", { text: node.id }),
           el("td", { text: node.kind }),
@@ -235,11 +439,9 @@ function renderEventGroups(data, confirmedEventKeys) {
   for (const key of eventKeys) {
     const events = [...data[key]].sort((a, b) => String(a.createdAt || "").localeCompare(String(b.createdAt || "")));
     const block = el("div", { class: "struct-block" }, [el("div", { class: "struct-title", text: `${humanizeKey(key)} (${events.length})` })]);
-    const table = el("table", { class: "struct-table" }, [
-      el("tr", {}, ["time", "kind", "decision", "source", "actor"].map((h) => el("th", { text: h })))
-    ]);
+    const { table, tbody } = structTable(["time", "kind", "decision", "source", "actor"]);
     for (const event of events) {
-      table.appendChild(
+      tbody.appendChild(
         el("tr", {}, [
           el("td", { text: event.createdAt || "" }),
           el("td", { text: event.kind || "" }),
@@ -263,8 +465,40 @@ function renderEventGroups(data, confirmedEventKeys) {
   return wrap;
 }
 
-document.getElementById("refresh").addEventListener("click", loadIndex);
+function showIndexOnly() {
+  ++state.detailSeq;
+  state.currentView = null;
+  const detail = document.getElementById("run-panel");
+  detail.innerHTML = "";
+  detail.appendChild(
+    el("p", {
+      class: "empty",
+      text: "Select a run to inspect its graph, blackboard, worker logs, candidate compare, and audit timeline."
+    })
+  );
+}
+
+function applyLocationRoute() {
+  const route = NAV.parseFragment(location.hash);
+  state.activeRunId = route.runId;
+  state.activeTab = route.tab;
+  if (route.replace) writeRoute(route.runId, route.tab, "replace");
+  markActiveRow(route.runId);
+  if (!route.runId) {
+    showIndexOnly();
+    return;
+  }
+  if (state.currentView && state.currentView.runId === route.runId) {
+    renderRun(state.currentView);
+    return;
+  }
+  state.currentView = null;
+  loadRunDetail(route.runId);
+}
+
+document.getElementById("refresh").addEventListener("click", refreshAll);
 document.getElementById("filter").addEventListener("input", debounce(loadIndex, 200));
+window.addEventListener("popstate", applyLocationRoute);
 
 function debounce(fn, ms) {
   let timer;
@@ -275,3 +509,4 @@ function debounce(fn, ms) {
 }
 
 loadIndex();
+applyLocationRoute();

package/ui/workbench/index.html

@@ -16,10 +16,10 @@
     <main>
       <section id="index-panel" class="sidebar">
         <div class="bar">
-          <strong>Runs</strong>
+          <h2>Runs</h2>
           <button id="refresh" title="Re-derive from disk">refresh</button>
         </div>
-        <input id="filter" type="search" placeholder="filter runs (app/status/text)" />
+        <input id="filter" type="search" placeholder="filter runs (app/status/text)" aria-label="filter runs" />
         <div id="registry-freshness" class="freshness"></div>
         <ul id="run-list" class="run-list"></ul>
       </section>
@@ -27,6 +27,8 @@
         <p class="empty">Select a run to inspect its graph, blackboard, worker logs, candidate compare, and audit timeline.</p>
       </section>
     </main>
+    <script src="/ui/navigation.js"></script>
+    <script src="/ui/inspection.js"></script>
     <script src="/ui/app.js"></script>
   </body>
 </html>

package/ui/workbench/inspection.js

@@ -0,0 +1,51 @@
+"use strict";
+// Pure action-first projection. It copies a small set of facts from one
+// capability payload for display; it makes no new state, rank, or action.
+
+(function expose(root, factory) {
+  const inspection = factory();
+  if (typeof module === "object" && module.exports) module.exports = inspection;
+  if (root) root.CWWorkbenchInspection = inspection;
+})(typeof globalThis === "object" ? globalThis : this, function buildInspection() {
+  function compactValue(value) {
+    if (typeof value === "string") return value;
+    const encoded = JSON.stringify(value);
+    return typeof encoded === "string" ? encoded : null;
+  }
+
+  function arrayFact(data, key, label, emptyMeansNone) {
+    if (!Array.isArray(data[key])) return null;
+    const items = data[key].map(compactValue).filter((item) => item !== null);
+    if (items.length === 0 && emptyMeansNone) items.push("none");
+    return items.length > 0 ? { key, label, items } : null;
+  }
+
+  function actionFacts(data) {
+    if (!data || typeof data !== "object" || Array.isArray(data)) return [];
+    const facts = [];
+    const integrity = data.integrity;
+    if (integrity && typeof integrity === "object" && !Array.isArray(integrity)) {
+      const items = [];
+      if (typeof integrity.verified === "boolean") items.push(`verified: ${integrity.verified}`);
+      if (typeof integrity.eventCount === "number" && Number.isFinite(integrity.eventCount)) items.push(`event count: ${integrity.eventCount}`);
+      if (typeof integrity.corruptLines === "number" && Number.isFinite(integrity.corruptLines)) items.push(`corrupt lines: ${integrity.corruptLines}`);
+      if (items.length > 0) facts.push({ key: "integrity", label: "integrity", items });
+    }
+
+    const problems = arrayFact(data, "problems", "problems", true);
+    if (problems) facts.push(problems);
+    const missing = arrayFact(data, "missingEvidence", "missing evidence", true);
+    if (missing) facts.push(missing);
+
+    if (typeof data.nextAction === "string" && data.nextAction.length > 0) {
+      facts.push({ key: "nextAction", label: "next action", items: [data.nextAction] });
+    }
+    if (Array.isArray(data.nextActions)) {
+      const items = data.nextActions.filter((item) => typeof item === "string" && item.length > 0);
+      if (items.length > 0) facts.push({ key: "nextActions", label: "next actions", items });
+    }
+    return facts;
+  }
+
+  return { actionFacts };
+});

package/ui/workbench/navigation.js

@@ -0,0 +1,44 @@
+"use strict";
+// Pure Workbench navigation policy. The browser page and Node unit test both
+// use this file; it holds no run data and does no file or network work.
+
+(function expose(root, factory) {
+  const navigation = factory();
+  if (typeof module === "object" && module.exports) module.exports = navigation;
+  if (root) root.CWWorkbenchNavigation = navigation;
+})(typeof globalThis === "object" ? globalThis : this, function buildNavigation() {
+  const TAB_KEYS = ["graph", "blackboard", "worker", "candidate", "audit", "metrics", "collaboration"];
+  const DEFAULT_TAB = TAB_KEYS[0];
+
+  function knownTab(value) {
+    return TAB_KEYS.includes(value) ? value : DEFAULT_TAB;
+  }
+
+  function parseFragment(fragment) {
+    const source = typeof fragment === "string" && fragment.startsWith("#") ? fragment.slice(1) : fragment || "";
+    const params = new URLSearchParams(source);
+    const run = params.get("run");
+    const requestedTab = params.get("tab");
+    return {
+      runId: run ? run : null,
+      tab: knownTab(requestedTab),
+      replace: requestedTab !== null && !TAB_KEYS.includes(requestedTab),
+    };
+  }
+
+  function formatFragment(runId, tab) {
+    if (!runId) return "";
+    return `#run=${encodeURIComponent(runId)}&tab=${encodeURIComponent(knownTab(tab))}`;
+  }
+
+  function moveTab(current, key) {
+    const index = Math.max(0, TAB_KEYS.indexOf(knownTab(current)));
+    if (key === "Home") return TAB_KEYS[0];
+    if (key === "End") return TAB_KEYS[TAB_KEYS.length - 1];
+    if (key === "ArrowLeft") return TAB_KEYS[(index - 1 + TAB_KEYS.length) % TAB_KEYS.length];
+    if (key === "ArrowRight") return TAB_KEYS[(index + 1) % TAB_KEYS.length];
+    return TAB_KEYS[index];
+  }
+
+  return { DEFAULT_TAB, TAB_KEYS, formatFragment, moveTab, parseFragment };
+});