[ENHANCEMENT] Add "New Tab" button beside "Start New Task" for parallel mode discoverability

[easonLiangWorldedtech]

[ENHANCEMENT] Improve parallel mode discoverability through UI redesign after task completion

Problem

PR #909 implemented per-view state isolation for parallel tabs, but the UI does not make it easy for users to discover and use parallel mode. When a task completes (completion_result state), only "Start New Task" is shown as the primary button. The "New Tab" functionality (which opens a separate parallel tab) exists in the API but has no visible entry point — users must know to use the command palette or context menu to open a new tab.

The goal is to redesign the post-completion UI flow so that parallel mode becomes an obvious, discoverable option rather than a hidden feature. This should address not just button placement, but the entire interaction model for transitioning between tasks in parallel mode.

Evidence (Code Locations)

• webview-ui/src/components/chat/ChatView.tsx:402-405 — On completion_result, primary button is set to "Start New Task" and secondary button is cleared (setSecondaryButtonText(undefined)):

  setClineAsk("completion_result")
  setEnableButtons(!isPartial)
  setPrimaryButtonText(t("chat:startNewTask.title"))
  setSecondaryButtonText(undefined)
  break

• webview-ui/src/components/chat/ChatView.tsx:715-718 — The startNewTask() function only sends { type: "clearTask" } to the extension. It does NOT use the newTab parameter:

  const startNewTask = useCallback(() => {
      setShowRetiredProviderWarning(false)
      vscode.postMessage({ type: "clearTask" })
  }, [])

• webview-ui/src/components/chat/ChatView.tsx:1730-1783 — Button rendering logic already supports a secondary button (lines 1762-1783). The layout is: primary button on the left (flex-[2] or flex-1 mr-[6px]), optional secondary button on the right (flex-1 ml-[6px]).

• src/extension/api.ts:170-190 — The extension API's startNewTask() method already accepts a newTab?: boolean parameter. When newTab is true, it calls openClineInNewTab():

  public async startNewTask({ configuration, text, images, newTab }) {
      if (newTab) {
          await vscode.commands.executeCommand("workbench.action.files.revert")
          await vscode.commands.executeCommand("workbench.action.closeAllEditors")
          provider = await openClineInNewTab({ context: this.context, outputChannel: this.outputChannel })
          this.registerListeners(provider)
      } else { ... }
  }

• src/core/webview/ClineProvider.ts:3611 — The clearTask() method handles the { type: "clearTask" } message but does not have a newTab option.

Root Cause Analysis

The parallel mode feature (PR #909, commit 3519c6777) focused on technical implementation of per-view state isolation but did not address interaction design for discoverability:

1. Single action paradigm: After completion, only one action is presented ("Start New Task") — users don't see parallel mode as an option
2. No contextual guidance: No visual indication that "you can open a new tab here" or "parallel tabs are available"
3. Missing transition affordance: The UI doesn't communicate the relationship between current task and potential new tasks (same view vs separate tab)
4. API mismatch: Webview's startNewTask() sends generic { type: "clearTask" } without newTab flag, so even if we add a button, the extension needs to handle it

Proposed Solutions (Ranked by Impact)

Solution 1: Contextual Action Menu (Recommended — Highest Impact)

Replace single primary button with two action buttons that appear after task completion:

┌─────────────────────────────────────────┐
│  ✅ Task completed!                     │
│                                         │
│  [ Start New Task ] [+ Open Tab]       │
│  (same view)    (parallel tab)         │
└─────────────────────────────────────────┘

Implementation:

1. After completion_result, show both buttons: primary "Start New Task" + secondary "+ New Tab"
2. Add new message type { type: "clearTask", openInNewTab: boolean } to extension API
3. Secondary button handler sends { type: "newTabFromCompletion" } which triggers openClineInNewTab()
4. Add i18n keys: chat:newTab.title, chat:newTab.tooltip, chat:taskCompleted.message

Pros:

• Minimal UI change, maximum discoverability
• Clear visual distinction between "same view" vs "new tab"
• Follows existing button pattern (primary + secondary)

Cons:

• Requires extension API changes to handle new message type

---

Solution 2: Smart Task Completion Banner with Quick Actions

Add a completion banner above the input area that provides contextual guidance and multiple paths forward:

┌─────────────────────────────────────────┐
│  ✅ Task completed!                     │
│                                         │
│  [ Start New Task ] [+ Open Tab]       │
│  [ Continue Here ] [ Fork This Task ]  │
└─────────────────────────────────────────┘

Implementation:

1. Add a completion banner component that renders only in completion_result state
2. Banner contains: success message + action buttons (Start New Task, Open Tab, Continue Here)
3. "Continue Here" = same as current behavior (start new task in same view)
4. "Open Tab" = opens parallel tab with same context/prompt
5. "Fork This Task" = creates a copy of the completed task in a new tab

Pros:

• More discoverable than button-only approach
• Provides multiple paths forward based on user intent
• Can include contextual messaging ("Great job! Want to try another approach?")

Cons:

• More complex UI changes
• Requires new message types for "fork" functionality
• May clutter the interface if not designed carefully

---

Solution 3: Command Palette Integration with Parallel Mode Hints

Enhance the command palette to surface parallel mode options when appropriate:

Command Palette:
├─ Roo Code: Start New Task (current view)
├─ Roo Code: Open New Tab (parallel mode) ← highlighted
├─ Roo Code: Fork Current Task
└─ ...

Implementation:

1. Register new commands in package.json for parallel mode actions
2. Add command palette hints when user is in a completed task state
3. Use VSCode's when clauses to show/hide commands based on context
4. Add keyboard shortcuts: Ctrl+Shift+N for "Open New Tab"

Pros:

• Leverages existing VSCode patterns users already know
• No webview UI changes needed initially
• Keyboard power users get immediate access

Cons:

• Less discoverable than in-UI buttons (users must know to open command palette)
• Doesn't solve the "I just finished a task, what now?" moment

---

Solution 4: Tab Header Enhancement with Parallel Mode Indicators

Add visual indicators to tab headers that communicate parallel mode capabilities:

┌─────────────────────────────────────────┐
│ [Tab 1] [Tab 2] [+ New Tab]            │
│                                         │
│ Current task completed!                 │
│ → Click "+ New Tab" to start parallel   │
│   work in a separate context            │
└─────────────────────────────────────────┘

Implementation:

1. Add "+" button next to tab headers (similar to browser tabs)
2. Show completion status indicator on completed task tabs
3. Add hover tooltip: "Click to open new parallel tab"
4. When in completion_result state, highlight the "+ New Tab" button

Pros:

• Follows familiar browser/tab patterns
• Makes parallel mode a first-class UI concept
• Scales well as users open more tabs

Cons:

• Requires changes to tab header component (not just ChatView)
• May be confusing if users don't understand "parallel" vs "sequential"

---

Solution 5: Progressive Disclosure with Onboarding Flow

Add a guided onboarding experience for first-time parallel mode users:

First time using parallel tabs?
┌─────────────────────────────────────────┐
│  🎯 Try parallel mode!                  │
│                                         │
│  Open a new tab to work on multiple     │
│  tasks simultaneously with isolated     │
│  contexts.                              │
│                                         │
│  [ Try It Now ] [ Show Me Later ]      │
└─────────────────────────────────────────┘

Implementation:

1. Track first-time parallel mode usage in extension storage
2. When user completes their first task, show onboarding banner
3. Banner explains parallel mode benefits with visual example
4. "Try It Now" button opens a new tab automatically
5. Dismissable with "Show Me Later" option

Pros:

• Educates users about the feature's value proposition
• Reduces cognitive load by guiding rather than overwhelming
• Can be personalized based on user behavior

Cons:

• Requires state tracking (first-time vs returning user)
• May become stale if not updated periodically
• Adds complexity to the completion flow

---

Recommended Implementation Strategy

Phase 1 (Quick Win): Implement Solution 1 (Contextual Action Menu) — adds secondary button with minimal changes, immediate discoverability improvement.

Phase 2 (Enhanced UX): Add Solution 4 (Tab Header Enhancement) to make parallel mode a first-class concept in the UI.

Phase 3 (Education): Implement Solution 5 (Progressive Disclosure) for onboarding new users to parallel mode.

---

Scope

• Files to modify:

  • webview-ui/src/components/chat/ChatView.tsx — Add secondary button state and handler for "New Tab" action
  • src/core/webview/ClineProvider.ts or src/extension/api.ts — Handle new message type for opening a tab from webview
  • webview-ui/src/i18n/locales/en/chat.json — Add i18n keys (newTab.title, newTab.tooltip)
  • All other locale files in webview-ui/src/i18n/locales/*/chat.json — Add translations

• Not in scope: Changes to the parallel mode state isolation logic (already implemented in PR fix(webview): isolate parallel provider view state #909)

Related Issues

• [UX] Multi-tab mode isolation — follow-up issues from PR #909 #913 — Context Management improvements tracking issue
• fix(webview): isolate parallel provider view state #909 — Per-view state isolation for parallel tabs (PR Clarify Zoo Code migration messaging in README #99, commit 3519c6777)

Testing Requirements

1. Completion flow: After a task completes, verify both "Start New Task" and "+ New Tab" buttons are visible
2. "Start New Task" button: Clicking starts a new task in the current view (existing behavior preserved)
3. "+ New Tab" button: Clicking opens a completely separate parallel tab with isolated state
4. i18n: Verify translations appear correctly in all supported locales
5. Edge cases:
   • Secondary button should NOT appear during streaming/active task
   • Secondary button should NOT appear for resume_task states (only completion_result)
   • Button layout should be correct on narrow viewports
6. Parallel mode isolation: Verify the new tab has its own isolated state (messages, settings) independent of the originating tab
7. Extension API: Verify { type: "clearTask", openInNewTab: true } message is handled correctly by ClineProvider