graphlemon: merge a8ae4a00-b3eb-431c-99a5-5eb6d927c00d

graphlemon
2 parents 0e43e9bc ad58f67c
Showing 4 changed files with 414 additions and 7 deletions
frontend/app.js
frontend/index.html
frontend/style.css
frontend/test_nav_project_context_smoke.js
@@ -115,13 +115,36 @@ function registerRouteCleanup(fn) {
   currentRouteCleanup = fn;
 }
  
+// U-047: `#/tasks?status=done`-style query strings on hash routes -- a new
+// capability, not a bug fix (no route previously carried a query string).
+// Hand-rolled instead of `new URLSearchParams(...)` (which mountTaskBoard's
+// own outgoing-request building already uses) because this one also has to
+// run inside frontend/test_*_smoke.js's bare `vm.createContext` sandbox,
+// which has no WHATWG URL globals -- decodeURIComponent is a plain
+// ECMAScript global and works there unmodified.
+function parseHashQuery(hash) {
+  const qIndex = hash.indexOf("?");
+  if (qIndex === -1) return { path: hash, params: {} };
+  const path = hash.slice(0, qIndex);
+  const params = {};
+  for (const pair of hash.slice(qIndex + 1).split("&")) {
+    if (!pair) continue;
+    const eqIndex = pair.indexOf("=");
+    const key = eqIndex === -1 ? pair : pair.slice(0, eqIndex);
+    const value = eqIndex === -1 ? "" : pair.slice(eqIndex + 1);
+    params[decodeURIComponent(key)] = decodeURIComponent(value);
+  }
+  return { path, params };
+}
+
 function render() {
   if (currentRouteCleanup) {
     currentRouteCleanup();
     currentRouteCleanup = null;
   }
  
-  const hash = window.location.hash || "#/";
+  const rawHash = window.location.hash || "#/";
+  const { path: hash, params: queryParams } = parseHashQuery(rawHash);
   let route = routes[hash];
   let routeArgs = [];
   if (!route) {
@@ -154,16 +177,115 @@ function render() {
   if (!route) route = { render: () => "<h1>Not found</h1><p>" + hash + "</p>" };
  
   document.getElementById("app").innerHTML = route.render(...routeArgs);
-  if (route.mount) route.mount(...routeArgs);
-
-  for (const a of document.querySelectorAll("#nav a")) {
-    a.classList.toggle("active", a.getAttribute("href") === hash);
+  // queryParams always appended after any route-specific captures -- every
+  // mount() so far only declares the params it actually reads (e.g.
+  // mountTaskBoard(queryParams)), so this trailing arg is silently ignored
+  // by the rest (plain JS behavior, not a special case per route).
+  if (route.mount) route.mount(...routeArgs, queryParams);
+
+  // `#nav > a`, not `#nav a`: nav_project_context (U-048) nests its own
+  // <a> links (project name, status-bucket counts) directly inside #nav --
+  // those must never get the same "active" bolding as the fixed route
+  // links above them just because their target route happens to match.
+  for (const a of document.querySelectorAll("#nav > a")) {
+    a.classList.toggle("active", parseHashQuery(a.getAttribute("href")).path === hash);
   }
+  refreshNavProjectContext();
 }
  
 window.addEventListener("hashchange", render);
 window.addEventListener("DOMContentLoaded", render);
  
+// ---- nav bar "current project" context (U-048) ----
+// All pages share #nav (index.html), so this is wired into render() itself
+// (called once per hashchange/initial load, see above) rather than into any
+// one page's mount() -- "piggybacks on the existing hashchange listener, no
+// new event plumbing needed" per the approved SDD. Reuses
+// `GET /api/tasks?project_id=...` and reduces status counts client-side
+// (one fetch per refresh, not one per bucket) -- a dedicated aggregation
+// endpoint is a documented revisit if a single project ever reaches
+// ~1000-2000 tasks.
+
+// 10 raw task.status values (TASK_STATUSES below, v_task_board) collapsed
+// into the 4 buckets the nav bar shows. `statuses.length === 1` buckets
+// (pending/done) link to "#/tasks?status=<value>" -- v_task_board's status
+// filter is single-select, so multi-status buckets (running/attention) link
+// to the unfiltered "#/tasks" instead of picking one arbitrary status.
+const NAV_STATUS_BUCKETS = [
+  { key: "pending", label: "pending", statuses: ["queued"] },
+  { key: "running", label: "running", statuses: [
+    "planning_brd_prd_sdd", "coding", "validating", "routed_fast_lane", "routed_full_replan",
+  ] },
+  { key: "attention", label: "attention", statuses: [
+    "planning_failed", "coding_failed", "blocked_pending_human",
+  ] },
+  { key: "done", label: "done", statuses: ["done"] },
+];
+
+function navBucketHref(bucket) {
+  return bucket.statuses.length === 1 ? "#/tasks?status=" + bucket.statuses[0] : "#/tasks";
+}
+
+function computeNavStatusBucketCounts(tasks) {
+  const statusToBucketKey = {};
+  for (const bucket of NAV_STATUS_BUCKETS) {
+    for (const status of bucket.statuses) statusToBucketKey[status] = bucket.key;
+  }
+  const counts = {};
+  for (const bucket of NAV_STATUS_BUCKETS) counts[bucket.key] = 0;
+  for (const task of tasks) {
+    const bucketKey = statusToBucketKey[task.status];
+    if (bucketKey) counts[bucketKey]++;
+  }
+  return counts;
+}
+
+function renderNavProjectContextHtml(project, counts) {
+  if (!project) return "";
+  const countsHtml = NAV_STATUS_BUCKETS.map((bucket) =>
+    '<a class="nav-count nav-count-' + bucket.key + '" href="' + navBucketHref(bucket) + '">'
+    + escapeHtml(bucket.label) + " " + (counts[bucket.key] || 0) + "</a>"
+  ).join("");
+  return (
+    '<a id="nav_project_name" href="#/projects">' + escapeHtml(project.name) + "</a>"
+    + '<span class="nav-counts">' + countsHtml + "</span>"
+  );
+}
+
+// Guards against out-of-order responses: if the current project is switched
+// (or this fires again before an earlier fetch resolves), a stale response
+// landing after a newer one must not overwrite the nav with old data.
+let navProjectContextRequestId = 0;
+
+async function refreshNavProjectContext() {
+  const contextEl = document.getElementById("nav_project_context");
+  if (!contextEl) return;
+  const projectId = getCurrentProjectId();
+  const requestId = ++navProjectContextRequestId;
+  if (!projectId) {
+    // Requirement 1: no project selected -> render nothing, not a hint.
+    contextEl.innerHTML = "";
+    return;
+  }
+  try {
+    const [projectResp, tasksResp] = await Promise.all([
+      fetch("/api/projects/" + encodeURIComponent(projectId)),
+      fetch("/api/tasks?project_id=" + encodeURIComponent(projectId)),
+    ]);
+    if (requestId !== navProjectContextRequestId) return; // superseded by a newer refresh
+    if (projectResp.status !== 200) {
+      contextEl.innerHTML = "";
+      return;
+    }
+    const project = await projectResp.json();
+    const tasks = tasksResp.status === 200 ? await tasksResp.json() : [];
+    if (requestId !== navProjectContextRequestId) return;
+    contextEl.innerHTML = renderNavProjectContextHtml(project, computeNavStatusBucketCounts(tasks));
+  } catch (e) {
+    if (requestId === navProjectContextRequestId) contextEl.innerHTML = "";
+  }
+}
+
 // ---- v_project_list (2026-08-03): project list + CRUD ----
 // 02-V originally declared "不做完整多项目管理 UI（项目列表/切换）" as an
 // MVP non-goal -- this page is a deliberate, explicit scope expansion
@@ -885,7 +1007,21 @@ function renderTaskBoard() {
   `;
 }
  
-function mountTaskBoard() {
+// U-047/U-048: nav-bar status-bucket links land on #/tasks as
+// "?status=<value>" -- this picks the status to pre-select, on initial
+// mount only (same reasoning as v_task_board's other filters: it's a
+// starting value the user can then change, not re-applied on every route
+// re-render). An unrecognized/stale status value is ignored rather than
+// left in a select the <option> list doesn't actually have. Split out as
+// its own pure function so it's testable without a real <select> element.
+function pickInitialTaskBoardStatus(queryParams) {
+  if (queryParams && queryParams.status && TASK_STATUSES.includes(queryParams.status)) {
+    return queryParams.status;
+  }
+  return null;
+}
+
+function mountTaskBoard(queryParams) {
   const projectId = getCurrentProjectId();
   if (!projectId) return;
   const rowsEl = document.getElementById("tb_rows");
@@ -894,6 +1030,9 @@ function mountTaskBoard() {
   const orgNodeEl = document.getElementById("tb_org_node");
   const sortEl = document.getElementById("tb_sort");
  
+  const initialStatus = pickInitialTaskBoardStatus(queryParams);
+  if (initialStatus) statusEl.value = initialStatus;
+
   async function refresh() {
     const params = new URLSearchParams({ project_id: projectId });
     if (keywordEl.value.trim()) params.set("keyword", keywordEl.value.trim());
@@ -15,6 +15,7 @@
   <a href="#/skills">Skills</a>
   <a href="#/deployment">Deployment</a>
   <a href="#/settings/concurrency">Settings</a>
+  <span id="nav_project_context" class="nav-project-context"></span>
 </nav>
 <main id="app"></main>
 <script src="/app.js"></script>
 /* U-008: minimal shell styling, nothing to design-review yet -- real look
    and feel is PH3, starting from docs/wireframes/*.html. */
 body { font-family: system-ui, sans-serif; margin: 0; }
-#nav { display: flex; gap: 1rem; padding: 1rem; border-bottom: 1px solid #ddd; }
+#nav { display: flex; gap: 1rem; padding: 1rem; border-bottom: 1px solid #ddd; align-items: center; }
 #nav a { text-decoration: none; color: #333; }
 #nav a.active { font-weight: bold; }
 #app { padding: 1rem; }
  
+/* U-048: nav-bar "current project" context (name + task status summary) --
+   pinned to the right of the fixed route links via margin-left:auto, empty
+   (renders nothing) whenever no project is currently selected. Reuses the
+   --status-* tokens defined below rather than inventing new colors. */
+#nav_project_context { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; }
+#nav_project_name { font-weight: 600; color: #111827; }
+.nav-counts { display: flex; gap: 8px; }
+.nav-count { color: #4b5563; }
+.nav-count-pending { color: var(--status-pending); }
+.nav-count-running { color: var(--status-running); }
+.nav-count-attention { color: var(--status-blocked); }
+.nav-count-done { color: var(--status-done); }
+
 /* U-022/U-023: v_project_setup/v_goal_composer/v_bug_feedback -- class
    names match docs/wireframes/v_*.html */
 .top-back a { color: #6b7280; text-decoration: none; }
+// U-047/U-048 (2026-08-07 SDD) smoke test: nav-bar "current project" context.
+// Same no-framework/no-fixture convention as the other frontend/test_*_smoke.js
+// files (see .claude/agent-memory/validator/feedback_no_js_test_framework.md)
+// -- loads real app.js in a bare vm.Context and asserts on generated HTML
+// strings / regex matches / real async control flow, not mocks of the logic
+// under test.
+//
+// Covers:
+//   - U-047: parseHashQuery -- happy path, no-query hash, empty value,
+//     multiple params; and the regression this was explicitly designed not
+//     to break: TASK_DETAIL_RE must still match the *path* half of a hash
+//     that now carries a query string.
+//   - U-048 nav highlighting: a nav link whose href has no query string and
+//     the current hash's query-stripped path must be recognized as the same
+//     route (this is exactly what render()'s "#nav > a" active-toggling
+//     loop relies on).
+//   - U-048 bucket mapping: computeNavStatusBucketCounts groups all 10 raw
+//     task.status values into the 4 nav buckets (pending/running/attention/
+//     done), and navBucketHref only appends ?status=<value> for the two
+//     single-status buckets (pending/done) -- multi-status buckets
+//     (running/attention) link to the unfiltered #/tasks, since
+//     v_task_board's status filter is single-select.
+//   - U-048 DOM contract: renderNavProjectContextHtml emits #nav_project_name
+//     (linking to #/projects) and one .nav-count-<bucket> per bucket, and
+//     renders nothing at all when no project is given (unselected-project
+//     state, requirement 1).
+//   - U-048 refreshNavProjectContext (real async function, real Promise
+//     control, no reimplementation): single-fetch-per-refresh (one call to
+//     /api/projects/:id, one to /api/tasks?project_id=... -- not one fetch
+//     per bucket), stale/out-of-order response protection when the current
+//     project changes mid-flight, and the unselected-project case doing zero
+//     fetches.
+//   - mountTaskBoard: pre-selects tb_status from an initial ?status= query
+//     param, ignoring an unrecognized value instead of setting it blindly.
+//
+// Run: node frontend/test_nav_project_context_smoke.js
+
+"use strict";
+const fs = require("fs");
+const path = require("path");
+const vm = require("vm");
+const assert = require("assert");
+
+function makeFakeDiv() {
+  let text = "";
+  return {
+    set textContent(v) { text = v == null ? "" : String(v); },
+    get textContent() { return text; },
+    get innerHTML() {
+      return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+    },
+  };
+}
+
+// Unlike makeFakeDiv (models a text node via textContent -> escaped
+// innerHTML), nav_project_context needs a plain settable/gettable string --
+// app.js writes a real HTML string there, not text that gets escaped.
+function makeRawEl() {
+  let html = "";
+  return {
+    set innerHTML(v) { html = v; },
+    get innerHTML() { return html; },
+  };
+}
+
+let currentProjectId = null;
+let fetchCalls = [];
+let pendingFetches = [];
+function fakeFetch(url) {
+  fetchCalls.push(url);
+  return new Promise((resolve) => { pendingFetches.push({ url, resolve }); });
+}
+function resolveFetch(entry, status, body) {
+  entry.resolve({ status, json: async () => body });
+}
+
+const navContextEl = makeRawEl();
+const elementsById = {
+  nav_project_context: navContextEl,
+};
+
+const sandbox = {
+  document: {
+    createElement: () => makeFakeDiv(),
+    getElementById: (id) => elementsById[id] || null,
+    querySelectorAll: () => [],
+    addEventListener: () => {},
+  },
+  window: {
+    location: { protocol: "http:", host: "localhost", hash: "" },
+    addEventListener: () => {},
+  },
+  localStorage: { getItem: () => currentProjectId, setItem: (k, v) => { currentProjectId = v; } },
+  fetch: fakeFetch,
+  console,
+};
+vm.createContext(sandbox);
+
+const src = fs.readFileSync(path.join(__dirname, "app.js"), "utf8");
+// Top-level `const` regexes/arrays stay lexically scoped to the script and
+// never reach the sandbox object (same Annex B quirk the other smoke tests
+// already document) -- re-export what this test needs.
+const augmentedSrc = src + "\nglobalThis.TASK_DETAIL_RE = TASK_DETAIL_RE;\nglobalThis.NAV_STATUS_BUCKETS = NAV_STATUS_BUCKETS;\n";
+new vm.Script(augmentedSrc, { filename: "app.js" }).runInContext(sandbox);
+
+let assertionCount = 0;
+function check(condition, message) {
+  assertionCount++;
+  assert.ok(condition, message);
+}
+
+async function main() {
+  // ---- 1. parseHashQuery: happy / edge cases ----
+  {
+    const noQuery = sandbox.parseHashQuery("#/tasks");
+    check(noQuery.path === "#/tasks" && Object.keys(noQuery.params).length === 0, "no '?' -> whole string is the path, empty params");
+
+    const single = sandbox.parseHashQuery("#/tasks?status=done");
+    check(single.path === "#/tasks" && single.params.status === "done", "single key=value param parsed correctly");
+
+    const multi = sandbox.parseHashQuery("#/tasks?status=done&org_node=coder");
+    check(multi.path === "#/tasks" && multi.params.status === "done" && multi.params.org_node === "coder", "multiple params all parsed");
+
+    const trailing = sandbox.parseHashQuery("#/tasks?");
+    check(trailing.path === "#/tasks" && Object.keys(trailing.params).length === 0, "trailing '?' with nothing after it -> empty params, not a crash");
+
+    const emptyValue = sandbox.parseHashQuery("#/tasks?status=");
+    check(emptyValue.params.status === "", "key with empty value still produces a key, not dropped");
+
+    const encoded = sandbox.parseHashQuery("#/tasks?keyword=a%20b");
+    check(encoded.params.keyword === "a b", "percent-encoded values are decoded");
+  }
+
+  // ---- 2. Regression: TASK_DETAIL_RE must still match the query-stripped path ----
+  {
+    const withQuery = sandbox.parseHashQuery("#/tasks/abc-123?foo=bar");
+    const match = withQuery.path.match(sandbox.TASK_DETAIL_RE);
+    check(match && match[1] === "abc-123", "TASK_DETAIL_RE must match the path half of a hash carrying a query string");
+
+    const withoutQuery = sandbox.parseHashQuery("#/tasks/abc-123");
+    check(withoutQuery.path.match(sandbox.TASK_DETAIL_RE)[1] === "abc-123", "no-query case keeps working exactly as before (no regression)");
+  }
+
+  // ---- 3. Nav highlighting: query-stripped paths must compare equal ----
+  {
+    const currentHashPath = sandbox.parseHashQuery("#/tasks?status=queued").path;
+    const plainNavLinkPath = sandbox.parseHashQuery("#/tasks").path;
+    check(currentHashPath === plainNavLinkPath, "a plain '#/tasks' nav link must still be recognized as 'active' when the real hash carries a status query string");
+  }
+
+  // ---- 4. computeNavStatusBucketCounts: all 10 statuses land in exactly one of the 4 buckets ----
+  {
+    const allStatuses = [
+      "queued", "planning_brd_prd_sdd", "planning_failed", "coding", "coding_failed",
+      "validating", "routed_fast_lane", "routed_full_replan", "blocked_pending_human", "done",
+    ];
+    const tasks = allStatuses.map((status, i) => ({ task_id: "t" + i, status }));
+    const counts = sandbox.computeNavStatusBucketCounts(tasks);
+    const total = Object.values(counts).reduce((a, b) => a + b, 0);
+    check(total === allStatuses.length, "every raw status must be counted into exactly one bucket, none dropped/double-counted");
+    check(counts.pending === 1 && counts.done === 1, "pending/done are single-status buckets (queued/done respectively)");
+    check(counts.running === 5, "running bucket: planning_brd_prd_sdd, coding, validating, routed_fast_lane, routed_full_replan");
+    check(counts.attention === 3, "attention bucket: planning_failed, coding_failed, blocked_pending_human");
+
+    const empty = sandbox.computeNavStatusBucketCounts([]);
+    check(Object.values(empty).every((n) => n === 0), "zero tasks -> every bucket is 0, not undefined/NaN");
+  }
+
+  // ---- 5. navBucketHref: single-status buckets carry ?status=, multi-status ones don't ----
+  {
+    for (const bucket of sandbox.NAV_STATUS_BUCKETS) {
+      const href = sandbox.navBucketHref(bucket);
+      if (bucket.statuses.length === 1) {
+        check(href === "#/tasks?status=" + bucket.statuses[0], bucket.key + " (single-status) must link with its exact status filter");
+      } else {
+        check(href === "#/tasks", bucket.key + " (multi-status) must link to the unfiltered board, v_task_board's filter is single-select");
+      }
+    }
+  }
+
+  // ---- 6. renderNavProjectContextHtml: DOM contract + unselected-project state ----
+  {
+    const html = sandbox.renderNavProjectContextHtml(
+      { project_id: "p1", name: "My <Project>" },
+      { pending: 3, running: 2, attention: 1, done: 12 },
+    );
+    check(html.includes('id="nav_project_name"'), "must carry #nav_project_name");
+    check(html.includes('href="#/projects"'), "project name must link to #/projects (switch mechanism, no rebuild)");
+    check(html.includes("My &lt;Project&gt;"), "project name must be HTML-escaped");
+    check(html.includes('nav-count-pending') && html.includes("pending 3"), "pending bucket count rendered");
+    check(html.includes('nav-count-running') && html.includes("running 2"), "running bucket count rendered");
+    check(html.includes('nav-count-attention') && html.includes("attention 1"), "attention bucket count rendered");
+    check(html.includes('nav-count-done') && html.includes("done 12"), "done bucket count rendered");
+
+    check(sandbox.renderNavProjectContextHtml(null, {}) === "", "no project selected -> render nothing (requirement 1)");
+  }
+
+  // ---- 7. refreshNavProjectContext: unselected-project state does zero fetches ----
+  {
+    currentProjectId = null;
+    fetchCalls = [];
+    await sandbox.refreshNavProjectContext();
+    check(fetchCalls.length === 0, "no current project -> must not fetch anything");
+    check(navContextEl.innerHTML === "", "no current project -> nav context area must be empty");
+  }
+
+  // ---- 8. refreshNavProjectContext: single-fetch-per-refresh + stale/out-of-order protection ----
+  {
+    fetchCalls = [];
+    pendingFetches = [];
+
+    currentProjectId = "proj-A";
+    const promiseA = sandbox.refreshNavProjectContext();
+    currentProjectId = "proj-B";
+    const promiseB = sandbox.refreshNavProjectContext();
+
+    check(pendingFetches.length === 4, "two refreshes -> exactly 2 fetches each (project + tasks), never per-bucket (single-fetch-per-refresh)");
+    check(fetchCalls[0].includes("/api/projects/proj-A") && fetchCalls[1].includes("project_id=proj-A"), "call A fetches proj-A's project + tasks");
+    check(fetchCalls[2].includes("/api/projects/proj-B") && fetchCalls[3].includes("project_id=proj-B"), "call B fetches proj-B's project + tasks");
+
+    // Resolve B (the newer, current request) first...
+    resolveFetch(pendingFetches[2], 200, { project_id: "proj-B", name: "Project B" });
+    resolveFetch(pendingFetches[3], 200, [{ task_id: "t1", status: "done" }]);
+    await promiseB;
+    check(navContextEl.innerHTML.includes("Project B"), "current (B) response must be rendered");
+
+    // ...then resolve A's (older, now-superseded) response arriving late.
+    resolveFetch(pendingFetches[0], 200, { project_id: "proj-A", name: "Project A" });
+    resolveFetch(pendingFetches[1], 200, [{ task_id: "t2", status: "queued" }]);
+    await promiseA;
+    check(navContextEl.innerHTML.includes("Project B"), "a stale response for a since-superseded project must not overwrite the current (B) nav state");
+    check(!navContextEl.innerHTML.includes("Project A"), "project A's late response must be discarded entirely");
+  }
+
+  // ---- 9. pickInitialTaskBoardStatus: mountTaskBoard's ?status= pre-select logic ----
+  // (mountTaskBoard itself isn't called directly here -- it also wires up a
+  // real WebSocket + several other DOM elements this bare sandbox doesn't
+  // stub, same reasoning documented in feedback_no_js_test_framework.md for
+  // why mount* functions aren't exercised end-to-end elsewhere in this repo's
+  // frontend smoke tests either.)
+  {
+    check(sandbox.pickInitialTaskBoardStatus({ status: "coding" }) === "coding", "a recognized status query param is picked");
+    check(sandbox.pickInitialTaskBoardStatus({ status: "not_a_real_status" }) === null, "an unrecognized status value must be ignored, not blindly returned");
+    check(sandbox.pickInitialTaskBoardStatus({}) === null, "no status query param at all -> null (filter stays untouched)");
+    check(sandbox.pickInitialTaskBoardStatus(undefined) === null, "missing queryParams entirely (defensive) -> null, no throw");
+  }
+
+  console.log("frontend/test_nav_project_context_smoke.js: all " + assertionCount + " assertions passed");
+}
+
+main().catch((e) => {
+  console.error(e);
+  process.exit(1);
+});