ALFA 003 toolbox status bar single row polish

Author: ToolboxAid

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 {
+  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(--space-20));
+  max-height: calc(100vh - var(--toolbox-status-bar-height) - var(--space-20))
+}
+
+body.tool-focus-mode .tool-center-panel {
+  box-sizing: border-box;
+  margin-block-end: var(--toolbox-status-bar-height);
+  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,40 +1,48 @@
-# PR_26175_ALFA_002-toolbox-status-bar-context-polish
+# PR_26175_ALFA_003-toolbox-status-bar-single-row-polish
 
 ## Purpose
-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.
+Update the shared toolbox status bar to a single-row creator context bar.
 
 ## Source Of Truth
-This `BUILD_PR.md` is the source of truth for `PR_26175_ALFA_002-toolbox-status-bar-context-polish`.
+This `BUILD_PR.md` is the source of truth for `PR_26175_ALFA_003-toolbox-status-bar-single-row-polish`.
 
 ## Exact Scope
-- 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.
+- Display only the selected Game Hub game name on the left side.
+- Display only the current status message in the center.
+- 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.
+- Keep the game name and status message on the same row at desktop/toolbox widths.
 - Preserve normal placement above the footer.
 - Preserve fullscreen/tool display mode bottom anchoring.
+- Ensure fullscreen center tool content and its scrollbar stop above the fixed status bar.
+- Add bottom reserve equal to the status bar height for the fullscreen center tool area.
 - 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.
+- Keep creator-facing language simple.
+- Do not add environment/server details to the UI.
+- Update targeted Playwright coverage for the single-row layout and fullscreen bottom reserve.
 
 ## Exact Targets
 - `docs_build/dev/BUILD_PR.md`
 - `assets/theme-v2/js/toolbox-status-bar.js`
 - `assets/theme-v2/css/status.css`
 - `tests/playwright/tools/ToolboxSelectedGameStatusBar.spec.mjs`
-- `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/PR_26175_ALFA_003-toolbox-status-bar-single-row-polish_report.md`
+- `docs_build/dev/reports/PR_26175_ALFA_003-toolbox-status-bar-single-row-polish_validation-lane.md`
+- `docs_build/dev/reports/PR_26175_ALFA_003-toolbox-status-bar-single-row-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 modal messages or modal-style status messages.
+- No row highlights.
+- No selected game purpose in the visible status bar.
+- No visible status category labels in the status bar.
 - No API/service contract changes.
+- No inline styles, style blocks, or page-local CSS.
 - No engine core changes.
 - No `start_of_day` folder changes.
 
@@ -55,5 +63,5 @@ rg -n "<style|style=" assets/theme-v2/js/toolbox-status-bar.js assets/theme-v2/c
 Create repo-structured delta ZIP:
 
 ```text
-tmp/PR_26175_ALFA_002-toolbox-status-bar-context-polish_delta.zip
+tmp/PR_26175_ALFA_003-toolbox-status-bar-single-row-polish_delta.zip
 ```

docs_build/dev/reports/PR_26175_ALFA_003-toolbox-status-bar-single-row-polish_report.md

@@ -0,0 +1,18 @@
+# PR_26175_ALFA_003-toolbox-status-bar-single-row-polish Report
+
+## Summary
+Updated the shared toolbox status bar to a single-row creator context bar.
+
+## Changes
+- Removed visible selected-game labels, selected-game purpose, status category pills, and status action links from the status bar.
+- Kept the visible status bar contract to selected game name on the left and current status message in the center.
+- Preserved Game Hub ownership of selected-game context and Idea Board selected-game filtering exclusion.
+- Preserved normal placement above the footer.
+- Preserved fullscreen bottom anchoring and reserved the status-bar height for the fullscreen center tool area.
+- Updated targeted Playwright coverage for removed labels, visible game/message text, same-row layout, and fullscreen center-panel bounds.
+
+## Contract Notes
+- No API/service contract changes were made.
+- No browser-owned product data is used as selected-game source of truth.
+- Environment/server details remain outside the status bar.
+- Theme V2 shared CSS/classes remain the styling surface.

docs_build/dev/reports/PR_26175_ALFA_003-toolbox-status-bar-single-row-polish_requirements-checklist.md

@@ -0,0 +1,18 @@
+# PR_26175_ALFA_003-toolbox-status-bar-single-row-polish Requirements Checklist
+
+- PASS: Status bar displays only selected game name and status message.
+- PASS: Selected game name is left anchored.
+- PASS: Status message is center anchored.
+- PASS: Visible labels were removed.
+- PASS: Selected game purpose was removed from the visible status bar.
+- PASS: Game name and status message are on the same row.
+- PASS: Fullscreen status bar remains fixed at the bottom.
+- PASS: Fullscreen center panel stops above the status bar.
+- PASS: Fullscreen center panel has bottom reserve equal to the status bar height.
+- 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 or modal messages were added.
+- PASS: No inline styles, style blocks, or page-local CSS were added.
+- PASS: Theme V2 shared CSS/classes are used.
+- PASS: Targeted Playwright coverage was updated and passed.