Add Preview Generator V2 Repo Destination control to Workspace Manager V2 top-left column without runtime behavior changes - PR_26128_005-workspace-repo-destination-control

Author: DavidQ

docs/dev/reports/workspace_repo_destination_control.md

@@ -0,0 +1,27 @@
+# PR_26128_005 Workspace Repo Destination Control
+
+## Changes
+- Copied the Preview Generator V2 Repo Destination control UI into the top-left Workspace Manager V2 column.
+- Added `tools/workspace-manager-v2/js/controls/RepoDestinationControl.js` with the same display/visibility/pick-handler control pattern used by Preview Generator V2.
+- Wired the Workspace Manager V2 control locally through `bootstrap.js` and `WorkspaceManagerV2App.js`.
+- The Workspace Manager V2 picker updates only the visible Repo selected value and status log.
+
+## Guardrails
+- No sessionStorage, toolState, launch payload, schema, or runtime contract behavior was changed.
+- No cross-tool communication was added.
+- No repo write behavior was added or changed.
+- No sample JSON was modified.
+- No roadmap content was modified.
+
+## Validation
+- `npm run test:workspace-v2` -> PASS, 10 tests.
+- Targeted Workspace Manager V2 launch validation -> PASS.
+- Verified Repo Destination is the first accordion in the Workspace Manager V2 left column.
+- Verified Workspace Manager V2 Repo Destination pick updates only the local display value.
+- Verified Workspace Manager V2 Workspace JSON and sessionStorage remain unchanged after Repo Destination pick.
+- Verified no `toolState` session keys are created by the Repo Destination pick.
+- Verified existing Preview Generator V2 Repo Destination picker still updates the Preview Generator V2 selected repo display.
+- Verified no direct-write/tool-communication endpoint identifiers were introduced in Workspace Manager V2 or Preview Generator V2 runtime files.
+
+## Skipped
+- Full samples smoke test was skipped by request. This PR changes only the Workspace Manager V2 Repo Destination UI/control surface, and the targeted Workspace Manager V2 plus Preview Generator V2 checks cover the affected behavior.

tools/workspace-manager-v2/index.html

@@ -42,6 +42,27 @@ <h2 class="tools-platform-frame__eyebrow">Games-only launch context</h2>
 
     <main class="workspace-manager-v2 app-shell" data-tool-id="workspace-manager-v2">
       <aside class="workspace-manager-v2__panel workspace-manager-v2__panel--left" aria-label="Workspace setup">
+        <section class="accordion-v2 workspace-manager-v2__accordion workspace-manager-v2__accordion--repo-destination is-open" data-accordion-v2-open="true">
+          <button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="repoDestinationContent">
+            <span>Repo Destination</span>
+            <span class="accordion-v2__icon" aria-hidden="true">+</span>
+          </button>
+          <div id="repoDestinationContent" class="accordion-v2__content workspace-manager-v2__stack">
+            <div class="workspace-manager-v2__controls">
+              <button id="pickRepoBtn" type="button">Pick Repo Folder</button>
+            </div>
+
+            <div class="workspace-manager-v2__field workspace-manager-v2__repo-selected-field">
+              <span>Repo selected</span>
+              <div id="repoSelectedValue" class="workspace-manager-v2__value">not selected</div>
+            </div>
+
+            <p class="workspace-manager-v2__note">
+              Pick the repo root folder, for example <code>HTML-JavaScript-Gaming</code>.
+            </p>
+          </div>
+        </section>
+
         <section class="accordion-v2 workspace-manager-v2__accordion is-open" data-accordion-v2-open="true">
           <button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="activeGameContent">
             <span>Active Game</span>

tools/workspace-manager-v2/js/WorkspaceManagerV2App.js

@@ -4,6 +4,7 @@ export class WorkspaceManagerV2App {
     contextService,
     gameSelector,
     menu,
+    repoDestination,
     statusLog,
     summary,
     toolTiles
@@ -12,6 +13,7 @@ export class WorkspaceManagerV2App {
     this.contextService = contextService;
     this.gameSelector = gameSelector;
     this.menu = menu;
+    this.repoDestination = repoDestination;
     this.statusLog = statusLog;
     this.summary = summary;
     this.toolTiles = toolTiles;
@@ -42,6 +44,11 @@ export class WorkspaceManagerV2App {
         void this.seedTemporaryUatManifest();
       }
     });
+    this.repoDestination.mount({
+      onPickRepo: () => {
+        void this.pickRepoDestination();
+      }
+    });
     this.toolTiles.mount({
       onLaunchTool: (toolId) => {
         void this.launchTool(toolId);
@@ -60,6 +67,21 @@ export class WorkspaceManagerV2App {
     void this.restoreWorkspaceFromSession();
   }
 
+  async pickRepoDestination() {
+    if (typeof window.showDirectoryPicker !== "function") {
+      this.statusLog.info("Repo folder picker is unavailable in this browser.");
+      return;
+    }
+    try {
+      const selectedRepoHandle = await window.showDirectoryPicker();
+      const displayName = selectedRepoHandle?.name || "selected";
+      this.repoDestination.setRepoDestinationDisplayName(displayName);
+      this.statusLog.ok(`Repo destination selected: ${displayName}.`);
+    } catch (error) {
+      this.statusLog.info(`Repo folder selection canceled or failed: ${error.message}`);
+    }
+  }
+
   async selectGame(gameId) {
     this.activeContext = null;
     this.activeGame = null;

tools/workspace-manager-v2/js/bootstrap.js

@@ -2,6 +2,7 @@ import { WorkspaceManagerV2App } from "./WorkspaceManagerV2App.js";
 import { AccordionSection } from "./controls/AccordionSection.js";
 import { GameSelectorControl } from "./controls/GameSelectorControl.js";
 import { ManifestMenuControl } from "./controls/ManifestMenuControl.js";
+import { RepoDestinationControl } from "./controls/RepoDestinationControl.js";
 import { StatusLogControl } from "./controls/StatusLogControl.js";
 import { ToolTilesControl } from "./controls/ToolTilesControl.js";
 import { WorkspaceSummaryControl } from "./controls/WorkspaceSummaryControl.js";
@@ -29,6 +30,10 @@ window.addEventListener("DOMContentLoaded", () => {
       importInput: requireElement("#importManifestInput"),
       uatButton: requireElement("#seedUatManifestButton")
     }),
+    repoDestination: new RepoDestinationControl({
+      pickRepoButton: requireElement("#pickRepoBtn"),
+      repoSelectedValue: requireElement("#repoSelectedValue")
+    }),
     statusLog: new StatusLogControl({
       clearButton: requireElement("#clearStatusButton"),
       log: requireElement("#statusLog")

tools/workspace-manager-v2/js/controls/RepoDestinationControl.js

@@ -0,0 +1,26 @@
+export class RepoDestinationControl {
+  constructor({ pickRepoButton, repoSelectedValue }) {
+    this.pickRepoButton = pickRepoButton;
+    this.repoSelectedValue = repoSelectedValue;
+  }
+
+  mount({ onPickRepo } = {}) {
+    this.setRepoDestinationDisplayName("not selected");
+    if (typeof onPickRepo === "function") {
+      this.onPickRepo(onPickRepo);
+    }
+  }
+
+  setRepoDestinationDisplayName(displayName) {
+    this.repoSelectedValue.textContent = displayName;
+    this.repoSelectedValue.setAttribute("title", displayName);
+  }
+
+  setPickRepoVisible(isVisible) {
+    this.pickRepoButton.hidden = !isVisible;
+  }
+
+  onPickRepo(handler) {
+    this.pickRepoButton.addEventListener("click", handler);
+  }
+}

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

@@ -205,6 +205,10 @@ textarea:hover {
   flex: 0 0 auto;
 }
 
+.workspace-manager-v2__accordion--repo-destination.is-open {
+  flex: 0 0 auto;
+}
+
 .workspace-manager-v2__accordion--json.is-open {
   flex: 0 0 auto;
 }
@@ -283,12 +287,40 @@ textarea:hover {
   padding: 6px 8px;
 }
 
+.workspace-manager-v2__stack,
+.workspace-manager-v2__controls,
+.workspace-manager-v2__repo-selected-field {
+  min-width: 0;
+  display: grid;
+  gap: 12px;
+}
+
+.workspace-manager-v2__value {
+  min-height: 36px;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  overflow-wrap: anywhere;
+  border: 1px solid var(--workspace-manager-v2-line);
+  border-radius: 8px;
+  background: var(--workspace-manager-v2-input);
+  color: var(--workspace-manager-v2-text);
+  padding: 7px 9px;
+}
+
 .workspace-manager-v2__hint {
   margin: 0;
   color: var(--workspace-manager-v2-muted);
   line-height: 1.45;
 }
 
+.workspace-manager-v2__note {
+  margin: 0;
+  color: var(--workspace-manager-v2-muted);
+  font-size: 0.9rem;
+  line-height: 1.45;
+}
+
 .workspace-manager-v2__tool-groups {
   display: grid;
   gap: 12px;