feat: allow multiple terminal tabs per connection

docs/superpowers/plans/2026-03-26-terminal-multi-tabs.md

@@ -0,0 +1,101 @@
+# Terminal Multi Tabs Implementation Plan
+
+> **For agentic workers:** REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Allow the connection list to open multiple terminal tabs for the same connection, with each click creating a fresh terminal session.
+
+**Architecture:** Keep the existing `/terminal` workspace and Pinia-driven tab model, but change terminal tab creation from connection-deduplicated to always-new. Add lightweight title numbering so repeated tabs for the same connection remain distinguishable without changing routing or terminal widget lifecycle.
+
+**Tech Stack:** Vue 3, TypeScript, Pinia, Vue Router, xterm.js, Vite, vue-tsc
+
+---
+
+## File Structure
+
+- Modify: `frontend/src/stores/terminalTabs.ts`
+  - Change tab creation semantics and add repeated-title numbering.
+- Modify: `frontend/src/views/ConnectionsView.vue`
+  - Use the new always-open terminal action from the connection list.
+- Verify: `frontend/src/views/TerminalWorkspaceView.vue`
+  - Confirm current per-tab widget mounting already supports independent sessions.
+- Verify: `frontend/src/layouts/MainLayout.vue`
+  - Confirm terminal sidebar tab rendering needs no structure change beyond new titles.
+- Reference: `docs/superpowers/specs/2026-03-26-terminal-multi-tabs-design.md`
+  - Source of truth for behavior and acceptance criteria.
+
+### Task 1: Change Terminal Tabs Store to Always Create New Tabs
+
+**Files:**
+- Modify: `frontend/src/stores/terminalTabs.ts`
+- Reference: `frontend/src/stores/sftpTabs.ts`
+
+- [ ] **Step 1: Inspect current tab store behavior**
+
+Read `frontend/src/stores/terminalTabs.ts` and confirm the existing dedup-by-connection behavior.
+
+- [ ] **Step 2: Add repeated-title generation**
+
+Add a helper that counts currently open tabs for the same `connectionId` and returns:
+
+```ts
+function getTabTitle(connection: Connection) {
+  const sameConnectionCount = tabs.value.filter(t => t.connectionId === connection.id).length
+
+  if (sameConnectionCount === 0) {
+    return connection.name
+  }
+
+  return `${connection.name} (${sameConnectionCount + 1})`
+}
+```
+
+- [ ] **Step 3: Replace dedup open logic with always-new creation**
+
+Change the open action so it always creates a new `TerminalTab` and activates it immediately.
+
+- [ ] **Step 4: Keep activate/close behavior unchanged**
+
+Do not change tab activation and close-neighbor behavior except what is necessary to support the new open logic.
+
+### Task 2: Wire the Connection List to the New Behavior
+
+**Files:**
+- Modify: `frontend/src/views/ConnectionsView.vue`
+- Use: `frontend/src/stores/terminalTabs.ts`
+
+- [ ] **Step 1: Rename the method usage to match semantics**
+
+Update `openTerminal(conn)` to call the new always-open store action.
+
+- [ ] **Step 2: Preserve routing behavior**
+
+Keep `router.push('/terminal')` unchanged after opening the tab.
+
+### Task 3: Verify Integration and Build
+
+**Files:**
+- Verify: `frontend/src/layouts/MainLayout.vue`
+- Verify: `frontend/src/views/TerminalWorkspaceView.vue`
+
+- [ ] **Step 1: Confirm sidebar rendering already keys by `tab.id`**
+
+No structural code changes should be required if repeated tabs render correctly with distinct titles.
+
+- [ ] **Step 2: Run final frontend build**
+
+Run in `frontend/`:
+
+```bash
+npm run build
+```
+
+Expected: `vue-tsc -b` and `vite build` both pass.
+
+- [ ] **Step 3: Manual runtime verification**
+
+Check:
+
+1. Same connection opens multiple terminal tabs.
+2. Repeated tabs are titled distinctly.
+3. Each tab remains an independent terminal session.
+4. Close/switch behavior still works.