Fix Workspace Manager V2 theme parity and mark old Workspace V2 deprecated - PR_26126_112-workspace-manager-v2-theme-contract-fix

Author: DavidQ

docs/dev/reports/PR_26126_112_deprecated_workspace_v2_notes.md

@@ -0,0 +1,14 @@
+# PR_26126_112 Deprecated Workspace V2 Notes
+
+## Deprecated Surface
+- `tools/workspace-v2/` is treated as deprecated for this PR.
+- No files under `tools/workspace-v2/` were modified.
+- Workspace Manager V2 theme work stayed under `tools/workspace-manager-v2/` and its dedicated Playwright coverage.
+
+## Scope Guard
+- Command check: `git diff --name-only | rg "^tools/workspace-v2/"`
+- Result: no changed files under deprecated `tools/workspace-v2/`.
+
+## Integration Boundary
+- This PR does not add new Asset Manager V2 integration behavior.
+- Existing Workspace Manager V2 launch coverage remains in place so the workspace-v2 aggregate gate can continue to validate current launch guard behavior.

docs/dev/reports/PR_26126_112_manual_validation_notes.md

@@ -0,0 +1,23 @@
+# PR_26126_112 Manual Validation Notes
+
+## Automated Validation
+- `npm run test:workspace-v2` passed.
+- Result: 18 Playwright tests passed.
+
+## Manual Checks
+1. Open `tools/workspace-manager-v2/index.html`.
+   - Expected: Workspace Manager V2 uses the same purple shared tool theme as Tool Template V2, Palette Manager V2, Preview Generator V2, and Asset Manager V2.
+   - Expected: header, app shell, panels, accordions, select, status textarea, and summary surfaces use shared theme colors.
+2. Inspect Workspace Manager V2 source.
+   - Expected: stylesheet import order is `main.css`, `hubCommon.css`, `accordionV2.css`, then `workspaceManagerV2.css`.
+   - Expected: body has `tools-platform-tool-page`, `tools-platform-surface`, and `hub-page-tools`.
+3. Confirm deprecated Workspace V2 was not touched.
+   - Expected: no changed files under `tools/workspace-v2/`.
+4. Open `tools/asset-manager-v2/index.html?workspace=prod`.
+   - Expected: direct production launch remains blocked by the Asset Manager V2 launch guard.
+
+## Out Of Scope
+- No sample JSON validation was performed or required.
+- No sample JSON was modified.
+- No new Asset Manager V2 integration behavior was added.
+- Full samples smoke test was skipped because the change is scoped to Workspace Manager V2 theme parity and targeted Playwright coverage.

docs/dev/reports/PR_26126_112_theme_parity_notes.md

@@ -0,0 +1,33 @@
+# PR_26126_112 Theme Parity Notes
+
+## Workspace Manager V2 Theme Fix
+- `tools/workspace-manager-v2/styles/workspaceManagerV2.css` now maps its local surface variables to the shared First-Class Tool V2 theme tokens:
+  - `--bg-gradient`
+  - `--panel`
+  - `--surface-inline`
+  - `--surface-border`
+  - `--line`
+  - `--text`
+  - `--muted`
+  - `--accent`
+- Local green/teal hardcoded colors were removed from Workspace Manager V2 CSS.
+- The local CSS retains native browser button system colors, matching the existing `tools/templates-v2` pattern.
+- Workspace Manager V2 app shell, frame, panel, accordion, input, and status surfaces now resolve through the same token source used by Tool Template V2, Palette Manager V2, Preview Generator V2, and Asset Manager V2.
+
+## First-Class Tool V2 Contract Check
+- CSS import order remains:
+  1. `../../src/engine/theme/main.css`
+  2. `../../src/engine/ui/hubCommon.css`
+  3. `../../src/engine/theme/accordionV2/accordionV2.css`
+  4. `./styles/workspaceManagerV2.css`
+- Body classes remain:
+  - `tools-platform-tool-page`
+  - `tools-platform-surface`
+  - `hub-page-tools`
+- Playwright validates the import order, body class usage, absence of local hardcoded CSS color literals, and computed style parity against shared tokens.
+
+## Forward-Looking Theme Contract
+- New first-class tools should import the same theme sources in the same order before local tool CSS.
+- New first-class tools should use local CSS variables only as semantic aliases to approved shared theme tokens.
+- New first-class tools should not introduce local color palettes, local gradients, local rgba surfaces, or local text colors unless a future PR explicitly adds the token to the shared theme source.
+- Tool-local CSS may define layout, spacing, sizing, and component-specific structure, but color and surface values should resolve through shared theme tokens.

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -49,6 +49,81 @@ test.describe("Workspace Manager V2 bootstrap", () => {
     }
   });
 
+  test("uses First-Class Tool V2 theme contract", async ({ page }) => {
+    const server = await openWorkspaceManagerV2(page);
+    const pageErrors = [];
+
+    page.on("pageerror", (error) => {
+      pageErrors.push(error.message);
+    });
+
+    try {
+      await expect(page.locator("body")).toHaveClass(/tools-platform-tool-page/);
+      await expect(page.locator("body")).toHaveClass(/tools-platform-surface/);
+      await expect(page.locator("body")).toHaveClass(/hub-page-tools/);
+      const themeContract = await page.evaluate(async () => {
+        const stylesheetPaths = Array.from(document.querySelectorAll('link[rel="stylesheet"]'))
+          .map((link) => new URL(link.href).pathname);
+        const css = await fetch("/tools/workspace-manager-v2/styles/workspaceManagerV2.css", { cache: "no-store" }).then((response) => response.text());
+        const probeStyle = (property, value) => {
+          const probe = document.createElement("div");
+          probe.style[property] = value;
+          document.body.append(probe);
+          const computed = getComputedStyle(probe)[property];
+          probe.remove();
+          return computed;
+        };
+        const bodyStyle = getComputedStyle(document.body);
+        const shellStyle = getComputedStyle(document.querySelector(".workspace-manager-v2.app-shell"));
+        const panelStyle = getComputedStyle(document.querySelector(".workspace-manager-v2__panel"));
+        const summaryStyle = getComputedStyle(document.querySelector(".tools-platform-frame__accordion-summary"));
+        const textareaStyle = getComputedStyle(document.querySelector("#statusLog"));
+        return {
+          bodyBackground: bodyStyle.backgroundImage,
+          bodyColor: bodyStyle.color,
+          cssHasHardcodedColors: /#[0-9a-f]{3,8}|rgba?\(|linear-gradient/i.test(css),
+          cssUsesThemeTokens: [
+            "--workspace-manager-v2-bg: var(--bg-gradient);",
+            "--workspace-manager-v2-panel: var(--panel);",
+            "--workspace-manager-v2-surface: var(--surface-inline);",
+            "--workspace-manager-v2-line: var(--line);",
+            "--workspace-manager-v2-text: var(--text);",
+            "--workspace-manager-v2-muted: var(--muted);",
+            "--workspace-manager-v2-accent: var(--accent);"
+          ].every((snippet) => css.includes(snippet)),
+          expectedBackground: probeStyle("backgroundImage", "var(--bg-gradient)"),
+          expectedInputBackground: probeStyle("backgroundColor", "var(--surface-inline)"),
+          expectedLine: probeStyle("borderColor", "var(--line)"),
+          expectedPanel: probeStyle("backgroundColor", "var(--panel)"),
+          expectedText: probeStyle("color", "var(--text)"),
+          panelBackground: panelStyle.backgroundColor,
+          shellBorder: shellStyle.borderTopColor,
+          stylesheetPaths,
+          summaryBackground: summaryStyle.backgroundColor,
+          textareaBackground: textareaStyle.backgroundColor
+        };
+      });
+      expect(themeContract.stylesheetPaths).toEqual([
+        "/src/engine/theme/main.css",
+        "/src/engine/ui/hubCommon.css",
+        "/src/engine/theme/accordionV2/accordionV2.css",
+        "/tools/workspace-manager-v2/styles/workspaceManagerV2.css"
+      ]);
+      expect(themeContract.cssHasHardcodedColors).toBe(false);
+      expect(themeContract.cssUsesThemeTokens).toBe(true);
+      expect(themeContract.bodyColor).toBe(themeContract.expectedText);
+      expect(themeContract.bodyBackground).toBe(themeContract.expectedBackground);
+      expect(themeContract.shellBorder).toBe(themeContract.expectedLine);
+      expect(themeContract.panelBackground).toBe(themeContract.expectedPanel);
+      expect(themeContract.summaryBackground).toBe(themeContract.expectedPanel);
+      expect(themeContract.textareaBackground).toBe(themeContract.expectedInputBackground);
+      expect(pageErrors).toEqual([]);
+    } finally {
+      await coverageReporter.stop(page);
+      await server.close();
+    }
+  });
+
   test("launches Asset Manager V2 through Workspace Manager V2 session context", async ({ page }) => {
     const server = await openWorkspaceManagerV2(page);
     const pageErrors = [];

tools/workspace-manager-v2/styles/workspaceManagerV2.css

@@ -1,15 +1,16 @@
 :root {
-  --workspace-manager-v2-bg: linear-gradient(180deg, #1f2937 0%, #365314 52%, #0f766e 100%);
-  --workspace-manager-v2-panel: rgba(17, 24, 39, 0.94);
-  --workspace-manager-v2-surface: rgba(8, 47, 73, 0.72);
-  --workspace-manager-v2-line: rgba(209, 250, 229, 0.24);
-  --workspace-manager-v2-input: rgba(6, 78, 59, 0.9);
-  --workspace-manager-v2-text: #f8fafc;
-  --workspace-manager-v2-muted: #d1fae5;
-  --workspace-manager-v2-accent: #86efac;
-  --workspace-manager-v2-warning: #fde68a;
-  --workspace-manager-v2-danger: #fecaca;
-  --workspace-manager-v2-shadow: 0 18px 38px rgba(0, 0, 0, 0.24);
+  --workspace-manager-v2-bg: var(--bg-gradient);
+  --workspace-manager-v2-panel: var(--panel);
+  --workspace-manager-v2-surface: var(--surface-inline);
+  --workspace-manager-v2-input: var(--surface-inline);
+  --workspace-manager-v2-line: var(--line);
+  --workspace-manager-v2-surface-border: var(--surface-border);
+  --workspace-manager-v2-text: var(--text);
+  --workspace-manager-v2-muted: var(--muted);
+  --workspace-manager-v2-accent: var(--accent);
+  --workspace-manager-v2-header-surface: var(--tools-shell-glass, var(--panel));
+  --workspace-manager-v2-shadow: var(--tools-shell-shadow, none);
+  --workspace-manager-v2-shadow-strong: var(--tools-shell-shadow-strong, none);
   color-scheme: dark;
   font-family: Inter, Segoe UI, system-ui, sans-serif;
 }
@@ -56,12 +57,17 @@ textarea:focus-visible {
 
 select,
 textarea {
-  border: 1px solid var(--workspace-manager-v2-line);
-  border-radius: 8px !important;
+  border: 1px solid var(--workspace-manager-v2-surface-border);
+  border-radius: 10px !important;
   background: var(--workspace-manager-v2-input);
   color: var(--workspace-manager-v2-text);
 }
 
+select:hover,
+textarea:hover {
+  border-color: var(--card-hover-border);
+}
+
 .is-collapsible {
   border-bottom: 1px solid var(--workspace-manager-v2-line);
   background: transparent;
@@ -95,12 +101,15 @@ textarea {
   --tools-platform-frame-surface: var(--workspace-manager-v2-panel);
   --tools-platform-frame-line: var(--workspace-manager-v2-line);
   border: 1px solid var(--workspace-manager-v2-line);
-  border-radius: 8px;
-  background: var(--workspace-manager-v2-panel);
+  border-radius: 18px;
+  background: var(--workspace-manager-v2-bg);
   box-shadow: var(--workspace-manager-v2-shadow);
+  color: var(--workspace-manager-v2-text);
 }
 
 .workspace-manager-v2__local-shell-frame .tools-platform-frame__accordion-content {
+  display: grid;
+  gap: 10px;
   padding: 12px 14px;
 }
 
@@ -109,18 +118,22 @@ textarea {
   align-items: center;
   justify-content: space-between;
   gap: 12px;
-  border-radius: 8px;
-  background: rgba(20, 83, 45, 0.86);
+  border-radius: 12px;
+  background: var(--workspace-manager-v2-header-surface);
   padding: 12px 14px;
 }
 
-.workspace-manager-v2__local-shell-frame h1,
-.workspace-manager-v2__local-shell-frame h2,
+.workspace-manager-v2__local-shell-frame .tools-platform-frame__title,
+.workspace-manager-v2__local-shell-frame .tools-platform-frame__eyebrow,
 .workspace-manager-v2__local-shell-frame .tools-platform-frame__meta {
   margin: 0;
 }
 
-.workspace-manager-v2__local-shell-frame h2,
+.workspace-manager-v2__local-shell-frame .tools-platform-frame__title {
+  color: var(--workspace-manager-v2-text);
+}
+
+.workspace-manager-v2__local-shell-frame .tools-platform-frame__eyebrow,
 .workspace-manager-v2__local-shell-frame .tools-platform-frame__meta {
   color: var(--workspace-manager-v2-muted);
 }
@@ -140,13 +153,16 @@ textarea {
 .workspace-manager-v2.app-shell {
   height: calc(100vh - 137px);
   min-height: 0;
-  width: min(1500px, calc(100% - 32px));
+  width: min(1600px, calc(100% - 32px));
   display: grid;
-  grid-template-columns: 300px minmax(0, 1fr) 360px;
+  grid-template-columns: 340px minmax(0, 1fr) 360px;
   gap: 14px;
   margin: 0 auto 16px;
+  border: 1px solid var(--workspace-manager-v2-line);
+  border-radius: 20px;
+  box-shadow: var(--workspace-manager-v2-shadow-strong);
   overflow: hidden;
-  padding: 16px 0 0;
+  padding: 16px;
 }
 
 .workspace-manager-v2__panel {
@@ -173,6 +189,7 @@ textarea {
   border: 1px solid var(--workspace-manager-v2-line);
   border-radius: 8px;
   background: var(--workspace-manager-v2-surface);
+  box-shadow: var(--workspace-manager-v2-shadow);
   overflow: hidden;
 }
 
@@ -261,7 +278,7 @@ textarea {
   min-width: 0;
   border: 1px solid var(--workspace-manager-v2-line);
   border-radius: 8px;
-  background: rgba(17, 24, 39, 0.52);
+  background: var(--workspace-manager-v2-surface);
   padding: 12px;
 }