ALFA 002 toolbox status bar context polish

Author: ToolboxAid

assets/theme-v2/css/status.css

@@ -54,11 +54,19 @@
 
 .toolbox-status-bar__game {
   min-width: var(--space-0);
-  display: grid;
-  gap: var(--space-3);
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--space-14);
   text-align: left
 }
 
+.toolbox-status-bar__field {
+  min-width: var(--space-0);
+  display: grid;
+  gap: var(--space-3)
+}
+
 .toolbox-status-bar__label {
   color: var(--muted);
   font-size: var(--font-size-xs);
@@ -73,7 +81,7 @@
   overflow-wrap: anywhere
 }
 
-.toolbox-status-bar__meta {
+.toolbox-status-bar__purpose {
   color: var(--muted);
   font-size: var(--font-size-sm);
   overflow-wrap: anywhere
@@ -89,6 +97,10 @@
   text-align: center
 }
 
+.toolbox-status-bar__context-type {
+  flex: 0 0 auto
+}
+
 .toolbox-status-bar__message {
   margin: var(--space-0);
   max-width: var(--measure-lg);
@@ -104,13 +116,27 @@
 }
 
 .toolbox-status-bar[data-selected-game-state="missing"] {
-  border-color: var(--gold-border-muted);
-  background: var(--gold-soft)
+  border-color: var(--gold-border-muted)
 }
 
 .toolbox-status-bar[data-selected-game-state="error"] {
-  border-color: color-mix(in srgb, var(--red) 52%, var(--line));
-  background: color-mix(in srgb, var(--red) 14%, var(--panel))
+  border-color: color-mix(in srgb, var(--red) 52%, var(--line))
+}
+
+.toolbox-status-bar[data-toolbox-status-context-kind="error"] .toolbox-status-bar__context-type {
+  border-color: color-mix(in srgb, var(--red) 62%, var(--line));
+  color: var(--red)
+}
+
+.toolbox-status-bar[data-toolbox-status-context-kind="warning"] .toolbox-status-bar__context-type,
+.toolbox-status-bar[data-toolbox-status-context-kind="validation"] .toolbox-status-bar__context-type {
+  border-color: var(--gold-border-muted);
+  color: var(--gold)
+}
+
+.toolbox-status-bar[data-toolbox-status-context-kind="save"] .toolbox-status-bar__context-type {
+  border-color: color-mix(in srgb, var(--green) 62%, var(--line));
+  color: var(--green)
 }
 
 body.tool-focus-mode .toolbox-status-bar {
@@ -240,6 +266,7 @@ body.tool-focus-mode .toolbox-status-bar {
   }
 
   .toolbox-status-bar__game {
+    justify-content: center;
     text-align: center
   }
 }

assets/theme-v2/js/toolbox-status-bar.js

@@ -7,6 +7,7 @@ let repository = null;
 let messageObserver = null;
 let listenersInstalled = false;
 let latestToolMessage = "";
+let pendingToolMessageRefresh = 0;
 let mountOptions = {
   gameHubHref: "toolbox/game-hub/index.html",
   pagePath: "",
@@ -89,24 +90,37 @@ function createStatusBar() {
   game.className = "toolbox-status-bar__game";
   game.dataset.toolboxSelectedGame = "";
 
-  const label = createText("span", "toolbox-status-bar__label", "toolboxSelectedGameLabel");
-  label.textContent = "Selected Game";
+  const nameField = document.createElement("div");
+  nameField.className = "toolbox-status-bar__field";
+  nameField.dataset.toolboxSelectedGameNameField = "";
+  const nameLabel = createText("span", "toolbox-status-bar__label", "toolboxSelectedGameNameLabel");
+  nameLabel.textContent = "Selected Game Name";
   const name = createText("strong", "toolbox-status-bar__game-name", "toolboxSelectedGameName");
-  const meta = createText("span", "toolbox-status-bar__meta", "toolboxSelectedGameMeta");
-  game.append(label, name, meta);
+  nameField.append(nameLabel, name);
+
+  const purposeField = document.createElement("div");
+  purposeField.className = "toolbox-status-bar__field";
+  purposeField.dataset.toolboxSelectedGamePurposeField = "";
+  const purposeLabel = createText("span", "toolbox-status-bar__label", "toolboxSelectedGamePurposeLabel");
+  purposeLabel.textContent = "Selected Game Purpose";
+  const purpose = createText("span", "toolbox-status-bar__purpose", "toolboxSelectedGamePurpose");
+  purpose.dataset.toolboxSelectedGameMeta = "";
+  purposeField.append(purposeLabel, purpose);
+  game.append(nameField, purposeField);
 
   const center = document.createElement("div");
   center.className = "toolbox-status-bar__center";
   center.dataset.toolboxStatusCenter = "";
 
+  const contextType = createText("span", "pill toolbox-status-bar__context-type", "toolboxStatusContextType");
   const message = createText("p", "toolbox-status-bar__message status", "toolboxStatusMessage");
   message.setAttribute("role", "status");
   const action = document.createElement("a");
   action.className = "btn btn--compact toolbox-status-bar__action";
   action.dataset.toolboxStatusAction = "";
   action.href = mountOptions.gameHubHref;
   action.textContent = "Open Game Hub";
-  center.append(message, action);
+  center.append(contextType, message, action);
 
   inner.append(game, center);
   bar.append(inner);
@@ -172,6 +186,12 @@ function updateLatestToolMessage() {
   }
 }
 
+function scheduleToolMessageRefresh() {
+  window.clearTimeout(pendingToolMessageRefresh);
+  pendingToolMessageRefresh = window.setTimeout(updateLatestToolMessage, 0);
+  window.setTimeout(updateLatestToolMessage, 120);
+}
+
 function observeToolMessages() {
   messageObserver?.disconnect();
   const main = document.querySelector("main");
@@ -211,51 +231,76 @@ function publishSelectedGameContext(selectedGame, state) {
   }));
 }
 
-function selectedGameMeta(selectedGame) {
-  return [selectedGame.purpose, selectedGame.status]
-    .map((value) => String(value || "").trim())
-    .filter(Boolean)
-    .join(" - ");
+function classifyToolContext(messageText, state, required) {
+  const text = String(messageText || "").trim();
+  if (state === "error") {
+    return { kind: "error", label: "Error" };
+  }
+  if (required && state === "missing") {
+    return { kind: "action", label: "Tool Action" };
+  }
+  if (/\b(error|failed|malformed|unavailable|could not)\b/i.test(text)) {
+    return { kind: "error", label: "Error" };
+  }
+  if (/\b(sign in|refresh|try again|temporarily|blocked)\b/i.test(text)) {
+    return { kind: "warning", label: "Warning" };
+  }
+  if (/\b(validation|requirement|requirements|missing|required|open or seed)\b/i.test(text)) {
+    return { kind: "validation", label: "Validation" };
+  }
+  if (/\b(saved|created|deleted|updated|loaded|save changes)\b/i.test(text)) {
+    return { kind: "save", label: "Save State" };
+  }
+  return { kind: "action", label: "Tool Action" };
 }
 
 function renderSelectedGame(bar, selectedGame, state, messageText) {
   const required = pageRequiresSelectedGame();
   const name = bar.querySelector("[data-toolbox-selected-game-name]");
-  const meta = bar.querySelector("[data-toolbox-selected-game-meta]");
+  const purpose = bar.querySelector("[data-toolbox-selected-game-purpose]");
+  const contextType = bar.querySelector("[data-toolbox-status-context-type]");
   const message = bar.querySelector("[data-toolbox-status-message]");
   const action = bar.querySelector("[data-toolbox-status-action]");
+  const nextMessage = messageText || latestToolMessage || (selectedGame
+    ? `Tool context is filtered to ${selectedGame.name}.`
+    : required
+      ? "Select or create a game in Game Hub before using this toolbox page."
+      : "Idea Board can capture ideas before a Game Hub game exists.");
+  const context = classifyToolContext(nextMessage, state, required);
 
   bar.dataset.selectedGameState = state;
   bar.dataset.selectedGameRequired = String(required);
+  bar.dataset.toolboxStatusContextKind = context.kind;
+  contextType.textContent = context.label;
   action.hidden = false;
   action.href = mountOptions.gameHubHref;
 
   if (selectedGame) {
     name.textContent = selectedGame.name;
-    meta.textContent = selectedGameMeta(selectedGame) || "Game Hub selected game";
-    message.textContent = messageText || latestToolMessage || `Data filtered to ${selectedGame.name}.`;
+    purpose.textContent = selectedGame.purpose || "Game";
+    message.textContent = nextMessage;
     action.textContent = "Open Game Hub";
     return;
   }
 
   if (!required) {
-    name.textContent = "Optional";
-    meta.textContent = "Idea Board can start before Game Hub creation";
-    message.textContent = latestToolMessage || "Idea Board can capture ideas before a Game Hub game exists.";
+    name.textContent = "No game selected";
+    purpose.textContent = "Idea Board optional";
+    message.textContent = nextMessage;
     action.textContent = "Open Game Hub";
     return;
   }
 
   if (state === "error") {
     name.textContent = "Unavailable";
-    meta.textContent = "Game Hub selected game could not be read";
-    message.textContent = messageText || "Game Hub selected game is unavailable. Refresh or restore the Local API.";
+    purpose.textContent = "Game Hub selected game could not be read";
+    message.textContent = nextMessage;
     action.textContent = "Open Game Hub";
     return;
   }
 
   name.textContent = "No game selected";
-  meta.textContent = "Game Hub owns game selection";
+  purpose.textContent = "Game Hub owns game selection";
   message.textContent = "Select or create a game in Game Hub before using this toolbox page.";
   action.textContent = "Select or Create in Game Hub";
 }
@@ -284,6 +329,9 @@ function installEventListeners() {
     return;
   }
   listenersInstalled = true;
+  document.addEventListener("click", scheduleToolMessageRefresh, true);
+  document.addEventListener("submit", scheduleToolMessageRefresh, true);
+  document.addEventListener("change", scheduleToolMessageRefresh, true);
   window.addEventListener("gamefoundry:toolbox-selected-game-changed", refreshToolboxStatusBar);
   window.addEventListener("gamefoundry:data-changed", refreshToolboxStatusBar);
 }

docs_build/dev/BUILD_PR.md

@@ -1,41 +1,42 @@
-# PR_26175_ALFA_001-toolbox-selected-game-status-bar
+# PR_26175_ALFA_002-toolbox-status-bar-context-polish
 
 ## Purpose
-Add one shared Theme V2 toolbox status bar that surfaces the Game Hub selected game and current tool messages across toolbox pages.
+Polish the shared toolbox status bar context display so it shows only selected-game name/purpose on the left and categorized tool context in the center.
 
 ## Source Of Truth
-This `BUILD_PR.md` is the source of truth for `PR_26175_ALFA_001-toolbox-selected-game-status-bar`.
+This `BUILD_PR.md` is the source of truth for `PR_26175_ALFA_002-toolbox-status-bar-context-polish`.
 
 ## Exact Scope
-- Add a shared toolbox status bar renderer loaded through Theme V2 shared partial bootstrapping.
-- Render the status bar above the footer in normal page mode.
-- Anchor the status bar to the viewport bottom while `body.tool-focus-mode` is active.
-- Read the selected game only from the Game Hub repository through the existing Local API/service contract.
-- Display the selected Game Hub game on the left side of the status bar.
-- Display tool actions, warnings, errors, save state, validation messages, or the missing-game prompt in the center of the status bar.
-- Expose the selected Game Hub game as derived page context for toolbox pages without persisting browser-owned product data.
-- Require selected-game context on toolbox pages except Idea Board, which remains excluded because ideas can exist before game creation.
-- Show a creator-safe prompt to select or create a game in Game Hub when no selected game exists.
-- Notify the shared status bar when Game Hub changes the selected game.
-- Add targeted Playwright coverage for placement, fullscreen anchoring, selected-game display/update, missing-game prompt, and Idea Board exclusion.
+- Do not include environment text in the status bar because environment already appears in the platform banner.
+- On the left side, display the selected Game Hub game name and selected Game Hub game purpose.
+- On the center side, display tool context messages for tool actions, save state, validation messages, warnings, or errors.
+- Preserve normal placement above the footer.
+- Preserve fullscreen/tool display mode bottom anchoring.
+- Preserve Idea Board selected-game filtering exclusion.
+- Preserve Game Hub as selected-game owner through the existing repository contract.
+- Keep the shared Theme V2 toolbox component model.
+- Update targeted Playwright coverage for the polished left and center context.
 
 ## Exact Targets
-- `assets/theme-v2/js/gamefoundry-partials.js`
+- `docs_build/dev/BUILD_PR.md`
 - `assets/theme-v2/js/toolbox-status-bar.js`
 - `assets/theme-v2/css/status.css`
-- `toolbox/game-hub/game-hub.js`
 - `tests/playwright/tools/ToolboxSelectedGameStatusBar.spec.mjs`
-- `docs_build/dev/reports/PR_26175_ALFA_001-toolbox-selected-game-status-bar_report.md`
-- `docs_build/dev/reports/PR_26175_ALFA_001-toolbox-selected-game-status-bar_validation-lane.md`
-- `docs_build/dev/reports/PR_26175_ALFA_001-toolbox-selected-game-status-bar_requirements-checklist.md`
+- `docs_build/dev/reports/PR_26175_ALFA_002-toolbox-status-bar-context-polish_report.md`
+- `docs_build/dev/reports/PR_26175_ALFA_002-toolbox-status-bar-context-polish_validation-lane.md`
+- `docs_build/dev/reports/PR_26175_ALFA_002-toolbox-status-bar-context-polish_requirements-checklist.md`
+- `docs_build/dev/reports/codex_review.diff`
+- `docs_build/dev/reports/codex_changed_files.txt`
 
 ## Out Of Scope
+- No environment status in the toolbox status bar.
+- No row highlights.
+- No large banners.
+- No modal-style status messages.
+- No inline styles, style blocks, or page-local CSS.
+- No API/service contract changes.
 - No engine core changes.
 - No `start_of_day` folder changes.
-- No API/service contract changes.
-- No page-local CSS, inline styles, or style blocks.
-- No browser storage or browser-owned product data as selected-game source of truth.
-- No Idea Board selected-game filtering.
 
 ## Validation
 Run:
@@ -47,12 +48,12 @@ npx playwright test tests/playwright/tools/ToolboxSelectedGameStatusBar.spec.mjs
 Also verify the changed source does not introduce inline styles or style blocks:
 
 ```powershell
-rg -n "<style|style=" assets/theme-v2/js/gamefoundry-partials.js assets/theme-v2/js/toolbox-status-bar.js assets/theme-v2/css/status.css toolbox/game-hub/game-hub.js tests/playwright/tools/ToolboxSelectedGameStatusBar.spec.mjs
+rg -n "<style|style=" assets/theme-v2/js/toolbox-status-bar.js assets/theme-v2/css/status.css tests/playwright/tools/ToolboxSelectedGameStatusBar.spec.mjs
 ```
 
 ## Artifact
 Create repo-structured delta ZIP:
 
 ```text
-tmp/PR_26175_ALFA_001-toolbox-selected-game-status-bar_delta.zip
+tmp/PR_26175_ALFA_002-toolbox-status-bar-context-polish_delta.zip
 ```

docs_build/dev/reports/PR_26175_ALFA_002-toolbox-status-bar-context-polish_report.md

@@ -0,0 +1,24 @@
+# PR_26175_ALFA_002-toolbox-status-bar-context-polish Report
+
+## Summary
+Polished the shared toolbox status bar context display without changing ownership or placement behavior.
+
+## Changes
+- Updated the left side to show `Selected Game Name` and `Selected Game Purpose`.
+- Removed selected-game status from the left-side display so environment/status context stays outside the bar.
+- Added a compact center context label for `Tool Action`, `Save State`, `Validation`, `Warning`, and `Error`.
+- Kept the status bar as a compact shared Theme V2 component, not a large banner or modal-style message.
+- Preserved normal placement above the footer and fullscreen bottom anchoring.
+- Preserved Idea Board selected-game filtering exclusion.
+
+## Contract Notes
+- Game Hub remains the selected-game owner through the existing repository contract.
+- No API/service contract changes were made.
+- No browser-owned product data is used as selected-game source of truth.
+- Environment text is not displayed in the status bar.
+
+## EOD Review
+- Reviewed all ALFA_002 modified files before commit.
+- Re-ran the targeted Playwright status bar coverage.
+- Re-ran the inline style/style block guardrail.
+- Updated the Codex review diff and changed-file report for closeout.

docs_build/dev/reports/PR_26175_ALFA_002-toolbox-status-bar-context-polish_requirements-checklist.md

@@ -0,0 +1,18 @@
+# PR_26175_ALFA_002-toolbox-status-bar-context-polish Requirements Checklist
+
+- PASS: Active `BUILD_PR.md` is the source of truth for ALFA_002.
+- PASS: Environment is not included in the status bar.
+- PASS: Left side displays selected game name.
+- PASS: Left side displays selected game purpose.
+- PASS: Center displays tool action context.
+- PASS: Center displays save state context.
+- PASS: Center supports validation, warning, and error context categories.
+- PASS: Fullscreen bottom anchoring is preserved.
+- PASS: Normal placement above the footer is preserved.
+- PASS: Idea Board exclusion is preserved.
+- PASS: Game Hub remains selected-game owner.
+- PASS: No large banners were added.
+- PASS: No modal-style status messages were added.
+- PASS: No inline styles or style blocks were added.
+- PASS: Theme V2 shared CSS/classes are used.
+- PASS: Targeted Playwright coverage was updated and passed.