PR_26175_ALFA_009-status-bar-single-row-rebuild

assets/theme-v2/css/layout.css

@@ -733,7 +733,7 @@ body.tool-focus-mode .tool-workspace--table-scroll-focus .tool-table-scroll-regi
 .footer {
   margin-top: var(--space-46);
   border-top: var(--border-standard);
-  padding: var(--space-24) var(--space-0);
+  padding: var(--space-0) var(--space-0) var(--space-24);
   color: var(--muted)
 }
 

assets/theme-v2/css/status.css

@@ -36,7 +36,10 @@
 }
 
 .toolbox-status-bar {
+  --toolbox-status-bar-height: var(--space-52);
+  --toolbox-status-game-max: 220px;
   width: 100%;
+  min-block-size: var(--toolbox-status-bar-height);
   border-block: var(--border-standard);
   background: var(--panel-overlay-strong);
   color: var(--text)
@@ -47,7 +50,7 @@
   margin: var(--space-0) auto;
   padding: var(--space-10) var(--space-0);
   display: grid;
-  grid-template-columns: minmax(var(--space-0), 1fr) minmax(var(--space-0), 2fr);
+  grid-template-columns: minmax(var(--space-0), max-content) minmax(var(--space-0), 1fr);
   gap: var(--space-16);
   align-items: center
 }
@@ -56,34 +59,18 @@
   min-width: var(--space-0);
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
-  gap: var(--space-14);
+  justify-content: flex-start;
   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);
-  font-weight: var(--font-weight-heavy);
-  letter-spacing: var(--letter-spacing-kicker);
-  text-transform: uppercase
-}
-
 .toolbox-status-bar__game-name {
   color: var(--text);
   font-size: var(--font-size-base);
-  overflow-wrap: anywhere
-}
-
-.toolbox-status-bar__purpose {
-  color: var(--muted);
-  font-size: var(--font-size-sm);
+  line-height: var(--line-height-tight);
+  max-width: min(30vw, var(--toolbox-status-game-max));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   overflow-wrap: anywhere
 }
 
@@ -92,25 +79,17 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-wrap: wrap;
-  gap: var(--space-10);
+  justify-self: center;
   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);
+  line-height: var(--line-height-copy);
   overflow-wrap: anywhere
 }
 
-.toolbox-status-bar__action {
-  flex: 0 0 auto
-}
-
 .toolbox-status-bar[data-selected-game-state="active"] {
   border-color: color-mix(in srgb, var(--green) 52%, var(--line))
 }
@@ -123,22 +102,6 @@
   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 {
   position: fixed;
   inset-block-end: var(--space-0);
@@ -148,6 +111,31 @@ body.tool-focus-mode .toolbox-status-bar {
   box-shadow: var(--shadow-md)
 }
 
+body.tool-focus-mode {
+  --toolbox-status-bar-height: var(--space-52);
+  --toolbox-status-top-reserve: var(--space-0)
+}
+
+body.tool-focus-mode:has(.platform-banner) {
+  --toolbox-status-top-reserve: var(--space-52)
+}
+
+body.tool-focus-mode .tool-workspace {
+  box-sizing: border-box;
+  height: calc(100vh - var(--toolbox-status-bar-height) - var(--toolbox-status-top-reserve));
+  max-height: calc(100vh - var(--toolbox-status-bar-height) - var(--toolbox-status-top-reserve))
+}
+
+body.tool-focus-mode .tool-column {
+  height: calc(100vh - var(--toolbox-status-bar-height) - var(--toolbox-status-top-reserve) - var(--space-20));
+  max-height: calc(100vh - var(--toolbox-status-bar-height) - var(--toolbox-status-top-reserve) - var(--space-20))
+}
+
+body.tool-focus-mode .tool-center-panel {
+  box-sizing: border-box;
+  scroll-padding-block-end: var(--toolbox-status-bar-height)
+}
+
 .platform-banner {
   width: 100%;
   border-bottom: var(--border-standard);
@@ -261,12 +249,16 @@ body.tool-focus-mode .toolbox-status-bar {
 @media (max-width: 720px) {
   .toolbox-status-bar__inner {
     width: var(--container-width);
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(var(--space-0), max-content) minmax(var(--space-0), 1fr);
+    gap: var(--space-10);
     text-align: center
   }
 
-  .toolbox-status-bar__game {
-    justify-content: center;
-    text-align: center
+  .toolbox-status-bar__game-name {
+    max-width: 34vw
+  }
+
+  .toolbox-status-bar__message {
+    font-size: var(--font-size-sm)
   }
 }

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

@@ -90,37 +90,16 @@ function createStatusBar() {
   game.className = "toolbox-status-bar__game";
   game.dataset.toolboxSelectedGame = "";
 
-  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");
-  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);
+  game.append(name);
 
   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(contextType, message, action);
+  center.append(message);
 
   inner.append(game, center);
   bar.append(inner);
@@ -234,33 +213,30 @@ function publishSelectedGameContext(selectedGame, state) {
 function classifyToolContext(messageText, state, required) {
   const text = String(messageText || "").trim();
   if (state === "error") {
-    return { kind: "error", label: "Error" };
+    return { kind: "error" };
   }
   if (required && state === "missing") {
-    return { kind: "action", label: "Tool Action" };
+    return { kind: "action" };
   }
   if (/\b(error|failed|malformed|unavailable|could not)\b/i.test(text)) {
-    return { kind: "error", label: "Error" };
+    return { kind: "error" };
   }
   if (/\b(sign in|refresh|try again|temporarily|blocked)\b/i.test(text)) {
-    return { kind: "warning", label: "Warning" };
+    return { kind: "warning" };
   }
   if (/\b(validation|requirement|requirements|missing|required|open or seed)\b/i.test(text)) {
-    return { kind: "validation", label: "Validation" };
+    return { kind: "validation" };
   }
   if (/\b(saved|created|deleted|updated|loaded|save changes)\b/i.test(text)) {
-    return { kind: "save", label: "Save State" };
+    return { kind: "save" };
   }
-  return { kind: "action", label: "Tool Action" };
+  return { kind: "action" };
 }
 
 function renderSelectedGame(bar, selectedGame, state, messageText) {
   const required = pageRequiresSelectedGame();
   const name = bar.querySelector("[data-toolbox-selected-game-name]");
-  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
@@ -271,38 +247,27 @@ function renderSelectedGame(bar, selectedGame, state, messageText) {
   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;
-    purpose.textContent = selectedGame.purpose || "Game";
     message.textContent = nextMessage;
-    action.textContent = "Open Game Hub";
     return;
   }
 
   if (!required) {
     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";
-    purpose.textContent = "Game Hub selected game could not be read";
     message.textContent = nextMessage;
-    action.textContent = "Open Game Hub";
     return;
   }
 
   name.textContent = "No game selected";
-  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";
 }
 
 export function refreshToolboxStatusBar() {

docs_build/dev/BUILD_PR.md

@@ -1,63 +1,70 @@
-# PR_26175_ALFA_008-game-hub-feature-matrix
+# PR_26175_ALFA_009-status-bar-single-row-rebuild
 
 ## Purpose
-Audit the current Game Hub workflow and publish a feature matrix that maps implemented creator-facing behavior to code and Playwright evidence.
+Rebuild the shared toolbox status bar on current `main` so it is a single-row creator context bar.
 
 ## Source Of Truth
-This `BUILD_PR.md` is the source of truth for `PR_26175_ALFA_008-game-hub-feature-matrix`.
+This `BUILD_PR.md` is the source of truth for `PR_26175_ALFA_009-status-bar-single-row-rebuild`.
 
 ## Exact Scope
-- Produce a Game Hub feature matrix only.
-- Audit Game Hub table workflow, selected/open game behavior, create/edit/delete actions, child tables, guest save gating, empty/error states, Theme V2 layout, and targeted Game Hub coverage.
-- Use current `main` behavior as evidence.
-- Preserve Game Hub UI/product behavior.
-- Preserve API/service/repository contracts.
-- Preserve previous ALFA Game Hub cleanup and create-validation behavior.
-- Do not implement product/UI changes unless validation exposes a requirement-critical defect.
+- Display only the selected Game Hub game name on the left side of the toolbox status bar.
+- Display only the current status message in the center of the toolbox status bar.
+- Remove visible status bar labels: `Selected Game Name`, `Selected Game Purpose`, `Save State`, `Tool Action`, `Warning`, and `Error`.
+- Remove selected-game purpose from the visible status bar.
+- Preserve normal status bar placement above the footer.
+- Remove extra status bar/footer spacing so the shared footer top padding resolves to `0px`.
+- Preserve fullscreen/tool display mode bottom anchoring.
+- Ensure fullscreen center scrollable content stops above the fixed status bar.
+- Ensure fullscreen tool content is not hidden behind the status bar.
+- Preserve Idea Board selected-game filtering exclusion.
+- Preserve Game Hub as selected-game owner through the existing repository contract.
+- Use shared Theme V2 CSS/classes only.
+- Update targeted Playwright coverage for the single-row status bar, footer spacing, and fullscreen bottom reserve.
 
 ## Exact Targets
 - `docs_build/dev/BUILD_PR.md`
-- `docs_build/dev/reports/PR_26175_ALFA_008-game-hub-feature-matrix_report.md`
-- `docs_build/dev/reports/PR_26175_ALFA_008-game-hub-feature-matrix_validation-lane.md`
-- `docs_build/dev/reports/PR_26175_ALFA_008-game-hub-feature-matrix_requirements-checklist.md`
+- `assets/theme-v2/js/toolbox-status-bar.js`
+- `assets/theme-v2/css/status.css`
+- `assets/theme-v2/css/layout.css`
+- `tests/playwright/tools/ToolboxSelectedGameStatusBar.spec.mjs`
+- `docs_build/dev/reports/PR_26175_ALFA_009-status-bar-single-row-rebuild_report.md`
+- `docs_build/dev/reports/PR_26175_ALFA_009-status-bar-single-row-rebuild_validation-lane.md`
+- `docs_build/dev/reports/PR_26175_ALFA_009-status-bar-single-row-rebuild_requirements-checklist.md`
 - `docs_build/dev/reports/codex_review.diff`
 - `docs_build/dev/reports/codex_changed_files.txt`
 
-## Evidence Sources
-- `toolbox/game-hub/index.html`
-- `toolbox/project-workspace/index.html`
-- `toolbox/game-hub/game-hub.js`
-- `toolbox/game-hub/game-hub-api-client.js`
-- `src/dev-runtime/persistence/tool-repositories/game-workspace-mock-repository.js`
-- `tests/playwright/tools/GameHubMockRepository.spec.mjs`
-
 ## Out Of Scope
-- No Game Hub product or UI changes.
-- No Game Journey changes.
-- No shared toolbox status bar changes.
-- No browser-owned product data as source of truth.
+- No merge of PR #120.
+- No reuse of stale ALFA_003 branch.
+- No environment/server details in the status bar.
+- No selected game purpose in the visible status bar.
+- No visible status category labels in the status bar.
+- No status action links in the visible status bar.
+- No large banners.
+- No modal messages or modal-style status messages.
+- No row highlights.
 - No API/service/repository contract changes.
+- No browser-owned product data as source of truth.
 - No inline styles, style blocks, or page-local CSS.
 - No engine core changes.
 - No `start_of_day` folder changes.
-- No ALFA_007 work.
 
 ## Validation
-Run targeted Game Hub validation:
+Run targeted Playwright coverage:
 
 ```powershell
-npx playwright test tests/playwright/tools/GameHubMockRepository.spec.mjs --workers=1
+npx playwright test tests/playwright/tools/ToolboxSelectedGameStatusBar.spec.mjs --workers=1
 ```
 
-Also verify changed docs/reports do not introduce inline styles or style blocks:
+Also verify changed source does not introduce inline styles or style blocks:
 
 ```powershell
-rg -n "<[s]tyle|[s]tyle=" docs_build/dev/BUILD_PR.md docs_build/dev/reports/PR_26175_ALFA_008-game-hub-feature-matrix_report.md docs_build/dev/reports/PR_26175_ALFA_008-game-hub-feature-matrix_validation-lane.md docs_build/dev/reports/PR_26175_ALFA_008-game-hub-feature-matrix_requirements-checklist.md
+rg -n "<[s]tyle|[s]tyle=" assets/theme-v2/js/toolbox-status-bar.js assets/theme-v2/css/status.css assets/theme-v2/css/layout.css tests/playwright/tools/ToolboxSelectedGameStatusBar.spec.mjs
 ```
 
 ## Artifact
 Create repo-structured delta ZIP:
 
 ```text
-tmp/PR_26175_ALFA_008-game-hub-feature-matrix_delta.zip
+tmp/PR_26175_ALFA_009-status-bar-single-row-rebuild_delta.zip
 ```