refactor app draft status controls into input area

packages/app/e2e/global-draft-create-status-controls.spec.ts

@@ -0,0 +1,47 @@
+import { test, expect } from './fixtures'
+import { createTempGitRepo } from './helpers/workspace'
+import { ensureHostSelected, gotoHome, setWorkingDirectory } from './helpers/app'
+
+function escapeRegex(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+test('global draft create uses input status controls and preserves optimistic flow', async ({ page }) => {
+  const repo = await createTempGitRepo('paseo-e2e-global-draft-')
+  const prompt = `global draft prompt ${Date.now()}`
+
+  try {
+    await gotoHome(page)
+    await ensureHostSelected(page)
+    await setWorkingDirectory(page, repo.path)
+
+    await expect(page.getByTestId('working-directory-select').first()).toBeVisible({ timeout: 30_000 })
+
+    const providerSelector = page.getByTestId('agent-provider-selector').first()
+    const modeSelector = page.getByTestId('agent-mode-selector').first()
+    const modelSelector = page.getByTestId('agent-model-selector').first()
+    const thinkingSelector = page.getByTestId('agent-thinking-selector').first()
+
+    await expect(providerSelector).toBeVisible({ timeout: 30_000 })
+    await expect(modeSelector).toBeVisible({ timeout: 30_000 })
+    await expect(modelSelector).toBeVisible({ timeout: 30_000 })
+    await expect(thinkingSelector).toBeVisible({ timeout: 30_000 })
+
+    const selectedMode = ((await modeSelector.innerText()) ?? '').trim()
+    const selectedModel = ((await modelSelector.innerText()) ?? '').trim()
+    const selectedThinking = ((await thinkingSelector.innerText()) ?? '').trim()
+
+    const composer = page.getByRole('textbox', { name: 'Message agent...' }).first()
+    await composer.fill(prompt)
+    await composer.press('Enter')
+
+    await expect(page.getByText(prompt, { exact: true }).first()).toBeVisible({ timeout: 5_000 })
+    await expect(page).toHaveURL(/\/workspace\//, { timeout: 30_000 })
+
+    await expect(modelSelector).toContainText(new RegExp(escapeRegex(selectedModel), 'i'))
+    await expect(modeSelector).toContainText(new RegExp(escapeRegex(selectedMode), 'i'))
+    await expect(thinkingSelector).toContainText(new RegExp(escapeRegex(selectedThinking), 'i'))
+  } finally {
+    await repo.cleanup()
+  }
+})

packages/app/e2e/helpers/app.ts

@@ -379,7 +379,9 @@ export const createAgent = async (page: Page, message: string) => {
 };
 
 async function preferFastThinkingOption(page: Page): Promise<void> {
-  const providerTrigger = page.getByTestId('draft-provider-select').first();
+  const providerTrigger = page
+    .locator('[data-testid="agent-provider-selector"]:visible, [data-testid="draft-provider-select"]:visible')
+    .first();
   if (await providerTrigger.isVisible().catch(() => false)) {
     const providerText = ((await providerTrigger.innerText().catch(() => '')) ?? '').trim();
     if (!/codex/i.test(providerText)) {
@@ -458,7 +460,9 @@ export const selectProvider = async (page: Page, provider: string) => {
     throw new Error('Provider must be a non-empty string.');
   }
 
-  const providerTrigger = page.getByTestId('draft-provider-select').first();
+  const providerTrigger = page
+    .locator('[data-testid="agent-provider-selector"]:visible, [data-testid="draft-provider-select"]:visible')
+    .first();
   if (
     await providerTrigger
       .getByText(new RegExp(`^${escapeRegex(normalizedProvider)}$`, 'i'))
@@ -496,7 +500,9 @@ export const selectModel = async (page: Page, model: string) => {
     throw new Error('Model must be a non-empty string.');
   }
 
-  const modelTrigger = page.getByTestId('draft-model-select').first();
+  const modelTrigger = page
+    .locator('[data-testid="agent-model-selector"]:visible, [data-testid="draft-model-select"]:visible')
+    .first();
   if (
     await modelTrigger
       .getByText(new RegExp(`^${escapeRegex(normalizedModel)}$`, 'i'))
@@ -543,7 +549,9 @@ export const selectModel = async (page: Page, model: string) => {
 };
 
 export const selectMode = async (page: Page, mode: string) => {
-  const modeTrigger = page.getByTestId('draft-mode-select').first();
+  const modeTrigger = page
+    .locator('[data-testid="agent-mode-selector"]:visible, [data-testid="draft-mode-select"]:visible')
+    .first();
   if (await modeTrigger.isVisible().catch(() => false)) {
     await modeTrigger.click();
   } else {

packages/app/e2e/workspace-draft-create-status-controls.spec.ts

@@ -0,0 +1,107 @@
+import { test, expect } from './fixtures'
+import { ensureHostSelected, gotoHome, setWorkingDirectory } from './helpers/app'
+import { createTempGitRepo } from './helpers/workspace'
+import {
+  ensureWorkspaceAgentPaneVisible,
+  getWorkspaceTabTestIds,
+  waitForWorkspaceTabsVisible,
+} from './helpers/workspace-tabs'
+import { switchWorkspaceViaSidebar } from './helpers/workspace-ui'
+
+function escapeRegex(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+test('workspace draft tab uses input status controls with optimistic create and in-place transition', async ({
+  page,
+}) => {
+  const serverId = process.env.E2E_SERVER_ID
+  if (!serverId) {
+    throw new Error('E2E_SERVER_ID is not set.')
+  }
+
+  const repo = await createTempGitRepo('paseo-e2e-workspace-draft-')
+  const seedPrompt = `seed workspace ${Date.now()}`
+  const createPrompt = `workspace draft prompt ${Date.now()}`
+
+  try {
+    await gotoHome(page)
+    await ensureHostSelected(page)
+
+    // Force the setup onto the global draft surface. In slow runs the app can
+    // still be on a previously opened agent/workspace view where the placement
+    // form is not rendered.
+    await page.goto(`/h/${serverId}/new-agent`)
+    await expect(page.locator('[data-testid="working-directory-select"]:visible').first()).toBeVisible({
+      timeout: 30_000,
+    })
+
+    await setWorkingDirectory(page, repo.path)
+    const seedComposer = page.getByRole('textbox', { name: 'Message agent...' }).first()
+    await seedComposer.fill(seedPrompt)
+    await page.getByRole('button', { name: /send message/i }).first().click()
+    await expect(page.getByText(seedPrompt, { exact: true }).first()).toBeVisible({
+      timeout: 30_000,
+    })
+    await expect(page).toHaveURL(/\/workspace\//, { timeout: 60_000 })
+
+    await switchWorkspaceViaSidebar({ page, serverId, targetWorkspacePath: repo.path })
+    const workspaceRouteToken = page.url().match(/\/workspace\/([^/?#]+)/)?.[1] ?? null
+    expect(workspaceRouteToken).toBeTruthy()
+    await waitForWorkspaceTabsVisible(page)
+    await ensureWorkspaceAgentPaneVisible(page)
+
+    const beforeDraftIds = await getWorkspaceTabTestIds(page)
+    await page.getByTestId('workspace-new-agent-tab').first().click()
+    await ensureWorkspaceAgentPaneVisible(page)
+
+    const withDraftIds = await getWorkspaceTabTestIds(page)
+    const draftTabTestId = withDraftIds.find((id) => !beforeDraftIds.includes(id))
+    if (!draftTabTestId) {
+      throw new Error('Expected a draft workspace tab to be created.')
+    }
+
+    const draftId = draftTabTestId.replace('workspace-tab-', '')
+    const draftCloseButton = page.getByTestId(`workspace-draft-close-${draftId}`).first()
+    await expect(draftCloseButton).toBeVisible({ timeout: 30_000 })
+
+    await expect(page.getByTestId('working-directory-select').first()).not.toBeVisible()
+    await expect(page.getByTestId('worktree-select-trigger').first()).not.toBeVisible()
+
+    const providerSelector = page.getByTestId('agent-provider-selector').first()
+    const modeSelector = page.getByTestId('agent-mode-selector').first()
+    const modelSelector = page.getByTestId('agent-model-selector').first()
+    const thinkingSelector = page.getByTestId('agent-thinking-selector').first()
+
+    await expect(providerSelector).toBeVisible({ timeout: 30_000 })
+    await expect(modeSelector).toBeVisible({ timeout: 30_000 })
+    await expect(modelSelector).toBeVisible({ timeout: 30_000 })
+    await expect(thinkingSelector).toBeVisible({ timeout: 30_000 })
+
+    const selectedMode = ((await modeSelector.innerText()) ?? '').trim()
+    const selectedModel = ((await modelSelector.innerText()) ?? '').trim()
+    const selectedThinking = ((await thinkingSelector.innerText()) ?? '').trim()
+
+    const composer = page.getByRole('textbox', { name: 'Message agent...' }).first()
+    await composer.fill(createPrompt)
+    await composer.press('Enter')
+
+    await expect(page.getByText(createPrompt, { exact: true }).first()).toBeVisible({ timeout: 5_000 })
+    await expect(draftCloseButton).not.toBeVisible({ timeout: 30_000 })
+
+    const finalIds = await getWorkspaceTabTestIds(page)
+    expect(finalIds).toContain(draftTabTestId)
+
+    await expect(modelSelector).toContainText(new RegExp(escapeRegex(selectedModel), 'i'))
+    await expect(modeSelector).toContainText(new RegExp(escapeRegex(selectedMode), 'i'))
+    await expect(thinkingSelector).toContainText(new RegExp(escapeRegex(selectedThinking), 'i'))
+
+    const currentUrl = page.url()
+    if (!workspaceRouteToken) {
+      throw new Error('Expected workspace route token to be present.')
+    }
+    expect(currentUrl).toContain(`/workspace/${workspaceRouteToken}`)
+  } finally {
+    await repo.cleanup()
+  }
+})