fix(workspace): refresh dashboard input on switch

Author: lefarcen

apps/web/src/components/HomeView.tsx

@@ -472,6 +472,7 @@ export function HomeView({
   const [fallbackProjectMetadata, setFallbackProjectMetadata] =
     useState<ProjectMetadata | null>(null);
   const [active, setActive] = useState<ActivePlugin | null>(null);
+  const previousWorkspaceNameRef = useRef<string | null>(null);
   // A placeholder-carousel scenario the user submitted on an empty composer.
   // We seed the prompt + bind the template synchronously, then let an effect
   // fire submit() once both have committed (submit() reads state, not args).
@@ -962,6 +963,53 @@ export function HomeView({
     [designSystemId, designSystemPickerSystems, t],
   );
 
+  // A preset can bind while one Workspace is selected, then remain mounted as
+  // this tab switches to another Workspace. `usePlugin` seeds workspace_name
+  // at bind time, but that snapshot must not outlive the request-local
+  // Workspace context. Refresh only a missing value or the value previously
+  // supplied by context, preserving an explicit plugin input when one exists.
+  // This reads the exact context selected for this tab; it never consults or
+  // writes Vela/daemon account-level active-workspace state. That model cannot
+  // represent two clients of one account open in different Workspaces.
+  useEffect(() => {
+    const nextWorkspaceName = workspaceContext?.workspaceName?.trim() || null;
+    const previousWorkspaceName = previousWorkspaceNameRef.current;
+    previousWorkspaceNameRef.current = nextWorkspaceName;
+
+    setActive((currentActive) => {
+      if (!currentActive) return currentActive;
+      const workspaceField = currentActive.inputFields.find(
+        (field) => field.name === 'workspace_name',
+      );
+      if (!workspaceField || workspaceField.default !== undefined) return currentActive;
+
+      const currentValue = currentActive.inputs.workspace_name;
+      const currentWorkspaceName =
+        currentValue === undefined || currentValue === null
+          ? ''
+          : String(currentValue).trim();
+      const contextOwnsCurrentValue =
+        currentWorkspaceName.length === 0
+        || (previousWorkspaceName !== null
+          && currentWorkspaceName === previousWorkspaceName);
+      if (!contextOwnsCurrentValue || currentWorkspaceName === (nextWorkspaceName ?? '')) {
+        return currentActive;
+      }
+
+      const inputs = { ...currentActive.inputs };
+      if (nextWorkspaceName) inputs.workspace_name = nextWorkspaceName;
+      else delete inputs.workspace_name;
+      return {
+        ...currentActive,
+        inputs,
+        inputsValid: pluginInputsAreValid(currentActive.inputFields, inputs),
+        // The pinned apply snapshot belongs to the old inputs. Force submit to
+        // resolve a new snapshot for the newly selected Workspace.
+        result: null,
+      };
+    });
+  }, [workspaceContext?.workspaceName]);
+
   function focusPromptAtEnd() {
     requestAnimationFrame(() => {
       inputRef.current?.focusEnd();

apps/web/tests/components/HomeView.template-use-send-enabled.test.tsx

@@ -450,6 +450,72 @@ describe('community template Use lands a sendable composer', () => {
     });
     expect(screen.queryByRole('alert')).toBeNull();
   });
+
+  it('refreshes live-dashboard workspace_name after the tab switches Workspaces', async () => {
+    writeHomeGuideStage('done');
+    workspaceContextForTest = {
+      workspaceId: 'ws-personal',
+      workspaceType: 'personal',
+      workspaceMemberId: 'wm-personal',
+      role: 'owner',
+      memberStatus: 'active',
+      lifecycleState: 'active',
+      billingState: 'active',
+      planId: null,
+      providerMode: 'platform_credits',
+      seatSummary: {
+        seatLimit: 1,
+        usedSeats: 1,
+        availableSeats: 0,
+        isSeatFull: true,
+      },
+      permissions: {
+        canInviteMembers: false,
+        canManageMembers: true,
+        canManageBilling: true,
+        canManageAutoRecharge: true,
+        canShareProjects: true,
+        canWriteSyncedFiles: true,
+        canViewWorkspaceSettings: true,
+        canManageSharedResources: true,
+      },
+      workspaceName: 'Personal Workspace',
+    };
+    stubFetch();
+
+    const submittedPluginInputs: Record<string, unknown>[] = [];
+    const tree = () => (
+      <I18nProvider initial="en">
+        <HomeView
+          projects={[]}
+          onSubmit={(payload) => {
+            submittedPluginInputs.push(payload.pluginInputs ?? {});
+          }}
+          onOpenProject={() => undefined}
+          onViewAllProjects={() => undefined}
+          promptHandoff={createPluginUseHandoff(1, LIVE_DASHBOARD.id, { action: 'use-with-query' })}
+        />
+      </I18nProvider>
+    );
+    const view = render(tree());
+    const submit = await boundSubmit();
+
+    workspaceContextForTest = {
+      ...workspaceContextForTest,
+      workspaceId: 'ws-team',
+      workspaceType: 'team',
+      workspaceMemberId: 'wm-team',
+      workspaceName: 'Design Team',
+    };
+    view.rerender(tree());
+    fireEvent.click(submit);
+
+    await waitFor(() => {
+      expect(submittedPluginInputs).toContainEqual(
+        expect.objectContaining({ workspace_name: 'Design Team' }),
+      );
+    });
+  });
 });
 
 describe('required-input gate survives where the user can still fill it', () => {

e2e/ui/home-hero-rail.test.ts

@@ -1541,64 +1541,115 @@ test('[P1] home hero example presets update the composer input for prototype and
 });
 
 test('[P1] live dashboard preset sends the active workspace name to plugin apply', async ({ page }) => {
+  const personalWorkspace = {
+    workspaceId: 'ws-personal',
+    workspaceName: 'Personal Workspace',
+    workspaceType: 'personal',
+    workspaceMemberId: 'wm-personal',
+    role: 'owner',
+    memberStatus: 'active',
+    lifecycleState: 'active',
+  } as const;
+  const teamWorkspace = {
+    workspaceId: 'ws-qa',
+    workspaceName: 'QA Team',
+    workspaceType: 'team',
+    workspaceMemberId: 'wm-qa',
+    role: 'member',
+    memberStatus: 'active',
+    lifecycleState: 'active',
+  } as const;
+  const workspaceContext = (
+    selected: typeof personalWorkspace | typeof teamWorkspace,
+    includeWorkspaceName = false,
+  ) => ({
+    workspaceId: selected.workspaceId,
+    workspaceType: selected.workspaceType,
+    workspaceMemberId: selected.workspaceMemberId,
+    role: selected.role,
+    memberStatus: 'active' as const,
+    lifecycleState: 'active' as const,
+    billingState: 'active' as const,
+    planId: selected.workspaceType === 'team' ? 'team' : null,
+    providerMode: 'platform_credits' as const,
+    seatSummary: {
+      seatLimit: 10,
+      usedSeats: 1,
+      availableSeats: 9,
+      isSeatFull: false,
+    },
+    permissions: {
+      canInviteMembers: false,
+      canManageMembers: false,
+      canManageBilling: false,
+      canManageAutoRecharge: false,
+      canShareProjects: true,
+      canWriteSyncedFiles: true,
+      canViewWorkspaceSettings: true,
+      canManageSharedResources: false,
+    },
+    ...(includeWorkspaceName ? { workspaceName: selected.workspaceName } : {}),
+  });
   await page.route('**/api/workspace/directory', async (route) => {
     await route.fulfill({
       json: {
-        items: [{
-          workspaceId: 'ws-qa',
-          workspaceName: 'QA Team',
-          workspaceType: 'team',
-          workspaceMemberId: 'wm-qa',
-          role: 'member',
-          memberStatus: 'active',
-          lifecycleState: 'active',
-        }],
+        items: [personalWorkspace, teamWorkspace],
         activeWorkspaceId: null,
       },
     });
   });
   await page.route('**/api/workspace/context', async (route) => {
+    const workspaceId = route.request().headers()['x-od-workspace-id'];
+    const selected = workspaceId === teamWorkspace.workspaceId
+      ? teamWorkspace
+      : personalWorkspace;
     await route.fulfill({
       json: {
-        context: {
-          workspaceId: 'ws-qa',
-          workspaceType: 'team',
-          workspaceMemberId: 'wm-qa',
-          role: 'member',
-          memberStatus: 'active',
-          lifecycleState: 'active',
-          billingState: 'active',
-          planId: 'team',
-          providerMode: 'platform_credits',
-          seatSummary: {
-            seatLimit: 10,
-            usedSeats: 1,
-            availableSeats: 9,
-            isSeatFull: false,
-          },
-          permissions: {
-            canInviteMembers: false,
-            canManageMembers: false,
-            canManageBilling: false,
-            canManageAutoRecharge: false,
-            canShareProjects: true,
-            canWriteSyncedFiles: true,
-            canViewWorkspaceSettings: true,
-            canManageSharedResources: false,
-          },
-        },
+        context: workspaceContext(selected),
+      },
+    });
+  });
+  await page.route('**/api/workspace/active', async (route) => {
+    if (route.request().method() !== 'PUT') {
+      await route.fallback();
+      return;
+    }
+    const body = route.request().postDataJSON() as {
+      workspaceId?: unknown;
+      workspaceMemberId?: unknown;
+    };
+    const selected = [personalWorkspace, teamWorkspace].find(
+      (item) =>
+        item.workspaceId === body.workspaceId
+        && item.workspaceMemberId === body.workspaceMemberId,
+    );
+    if (!selected) {
+      await route.fulfill({ status: 400, json: { error: 'exact_workspace_scope_required' } });
+      return;
+    }
+    await route.fulfill({
+      json: {
+        activeWorkspaceId: selected.workspaceId,
+        context: workspaceContext(selected, true),
       },
     });
   });
 
   await gotoEntryHome(page);
   await page.getByTestId('workspace-home-rail-toggle').click();
-  await expect(page.getByText('QA Team', { exact: true })).toBeVisible();
+  await expect(page.getByTestId('workspace-switcher')).toContainText('Personal Workspace');
 
   await pickHomeTemplate(page, 'live-artifact');
   await usePreset(page, 'example-live-dashboard');
   await expect(page.getByTestId('home-hero-submit')).toBeEnabled();
 
+  // The preset is already bound to Personal. Switching the request-local tab
+  // context must replace that context-owned input and invalidate the old apply
+  // snapshot before Send — no account-level active Workspace participates.
+  await page.getByTestId('workspace-switcher').click();
+  await page.getByRole('menuitem', { name: 'QA Team' }).click();
+  await expect(page.getByTestId('workspace-switcher')).toContainText('QA Team');
+
   const applyRequestPromise = page.waitForRequest((request) =>
     request.method() === 'POST'
       && request.url().includes('/api/plugins/example-live-dashboard/apply'),