feat(home-v2): draggable tabs and browser tab gestures (#351)

Adds reorder-tab / reorder-internal ProductActions (clamped final
index, same-state no-op, groups reorder independently so internal
pages stay ahead of app tabs) and a pointer-capture drag in TabStrip
mirroring v1: 5px start threshold, live reorder at sibling midpoints,
click suppression after a completed drag, close-button exempt from
capture. Gestures: middle-click (auxclick) closes app or internal
tabs, double-click on the empty strip opens the configured new tab,
and ArrowLeft/Right/Home/End move focus between tab buttons without
activating (Enter/Space still activates). Order persists via the
existing product serialization. Drag-out-to-detach is deferred: v2
windows share one persisted shell state and the existing
windows:openTabInNewWindow payload is v1-shaped.

Parity review P-4 (projects/qortium-home-2.1/parity-review-2026-08-24).

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

Author: QuickMythril

QORTIUM-HOME-CHANGELOG.md

@@ -34,6 +34,20 @@ both networks through explicit compatibility and security boundaries.
 
 ## Change Entries
 
+### 2026-08-24 - feat(home-v2): draggable tabs and browser tab gestures
+
+Tabs in Home 2 can now be dragged to reorder, the way they could in
+Home 1: hold and drag a tab sideways and the strip reorders live under
+the pointer. Home page tabs reorder among themselves and app tabs among
+themselves, so pages stay grouped ahead of apps. The strip also gained
+the familiar browser gestures: middle-click closes a tab,
+double-clicking the empty area of the strip opens a new tab, and with
+focus in the strip the Left/Right arrow keys (plus Home and End) move
+between tabs without switching to them. The new order is remembered
+across restarts. Dragging a tab out to detach it into its own window is
+not included yet — it needs a design for how separate windows share
+saved state.
+
 ### 2026-08-24 - feat(home-v2): allow multiple internal pages open as tabs
 
 Home 2 previously kept a single shared slot for its own pages, so

src/home-v2-live/HomeV2LiveApp.tsx

@@ -4882,6 +4882,12 @@ export function HomeV2LiveApp() {
         dispatchProduct({ type: 'close-tab', tabId })
       }}
       onCloseInternal={(page) => dispatchProduct({ type: 'close-internal', page })}
+      onReorderTab={(tabId, toIndex) =>
+        dispatchProduct({ type: 'reorder-tab', tabId, toIndex })
+      }
+      onReorderInternal={(page, toIndex) =>
+        dispatchProduct({ type: 'reorder-internal', page, toIndex })
+      }
       onAppNavigationChanged={handleAppNavigationChanged}
       onAppNavigationControllerChange={handleAppNavigationControllerChange}
       onAppTitleChanged={handleAppTitleChanged}

src/v2/home-v2-foundation.test.tsx

@@ -440,6 +440,64 @@ function testProductModelKeepsSourceQualifiedTabs(): void {
     'settings',
   ])
 
+  // Tab drag reorder (P-4): tabs reorder within their own group only.
+  const [firstTab, secondTab] = dashboard.tabs
+  const swappedTabs = reduceProductState(dashboard, {
+    type: 'reorder-tab',
+    tabId: firstTab.id,
+    toIndex: 1,
+  })
+  assert.deepEqual(
+    swappedTabs.tabs.map((tab) => tab.id),
+    [secondTab.id, firstTab.id],
+  )
+  assert.equal(swappedTabs.destination, dashboard.destination)
+  assert.equal(
+    reduceProductState(dashboard, {
+      type: 'reorder-tab',
+      tabId: firstTab.id,
+      toIndex: 0,
+    }),
+    dashboard,
+  )
+  const clampedReorder = reduceProductState(dashboard, {
+    type: 'reorder-tab',
+    tabId: firstTab.id,
+    toIndex: 99,
+  })
+  assert.deepEqual(
+    clampedReorder.tabs.map((tab) => tab.id),
+    [secondTab.id, firstTab.id],
+  )
+  assert.throws(
+    () =>
+      reduceProductState(dashboard, {
+        type: 'reorder-tab',
+        tabId: fixtureIds.tab,
+        toIndex: 0,
+      }),
+    (error) => {
+      assert.ok(error instanceof ProductModelError)
+      assert.equal(error.code, 'TAB_NOT_FOUND')
+      return true
+    },
+  )
+  const swappedPages = reduceProductState(settingsOpen, {
+    type: 'reorder-internal',
+    page: 'settings',
+    toIndex: 0,
+  })
+  assert.deepEqual(swappedPages.internalPages, ['settings', 'dashboard'])
+  assert.equal(swappedPages.destination, 'settings')
+  assert.equal(
+    reduceProductState(settingsOpen, {
+      type: 'reorder-internal',
+      page: 'settings',
+      toIndex: 5,
+    }),
+    settingsOpen,
+  )
+
   assert.throws(
     () =>
       reduceProductState(empty, {

src/v2/product-model.ts

@@ -58,6 +58,16 @@ export type ProductAction =
       readonly destination: Exclude<ShellDestination, 'tab'>
     }
   | { readonly type: 'close-internal'; readonly page: InternalPageId }
+  | {
+      readonly type: 'reorder-tab'
+      readonly tabId: TabId
+      readonly toIndex: number
+    }
+  | {
+      readonly type: 'reorder-internal'
+      readonly page: InternalPageId
+      readonly toIndex: number
+    }
   | { readonly type: 'restore'; readonly state: ProductState }
 
 export class ProductModelError extends Error {
@@ -429,6 +439,59 @@ function setTabTitle(
   })
 }
 
+// toIndex is the tab's desired final index within its own group (clamped).
+// Reordering never changes which surface is active.
+function reorderAppTab(
+  state: ProductState,
+  tabId: TabId,
+  toIndex: number,
+): ProductState {
+  const fromIndex = state.tabs.findIndex((tab) => tab.id === tabId)
+  if (fromIndex < 0) {
+    throw new ProductModelError('TAB_NOT_FOUND', `Tab ${tabId} was not found.`)
+  }
+  const clamped = Math.max(
+    0,
+    Math.min(state.tabs.length - 1, Math.trunc(toIndex)),
+  )
+  if (clamped === fromIndex) return state
+  const tabs = [...state.tabs]
+  const [moved] = tabs.splice(fromIndex, 1)
+  tabs.splice(clamped, 0, moved)
+  return freezeProductState({
+    ...state,
+    tabs,
+    revision: state.revision + 1,
+  })
+}
+
+function reorderInternalPage(
+  state: ProductState,
+  page: InternalPageId,
+  toIndex: number,
+): ProductState {
+  const fromIndex = state.internalPages.indexOf(page)
+  if (fromIndex < 0) {
+    throw new ProductModelError(
+      'TAB_NOT_FOUND',
+      `Internal page ${page} is not open.`,
+    )
+  }
+  const clamped = Math.max(
+    0,
+    Math.min(state.internalPages.length - 1, Math.trunc(toIndex)),
+  )
+  if (clamped === fromIndex) return state
+  const internalPages = [...state.internalPages]
+  const [moved] = internalPages.splice(fromIndex, 1)
+  internalPages.splice(clamped, 0, moved)
+  return freezeProductState({
+    ...state,
+    internalPages,
+    revision: state.revision + 1,
+  })
+}
+
 export function reduceProductState(
   state: ProductState,
   action: ProductAction,
@@ -454,6 +517,10 @@ export function reduceProductState(
       })
     case 'close-internal':
       return closeInternalPage(state, action.page)
+    case 'reorder-tab':
+      return reorderAppTab(state, action.tabId, action.toIndex)
+    case 'reorder-internal':
+      return reorderInternalPage(state, action.page, action.toIndex)
     case 'restore':
       return freezeProductState(action.state)
   }

src/v2/shell/BrowserChrome.tsx

@@ -32,6 +32,11 @@ export interface BrowserChromeProps {
   readonly onActivateTab?: (tabId: ProductState['tabs'][number]['id']) => void
   readonly onCloseTab?: (tabId: ProductState['tabs'][number]['id']) => void
   readonly onCloseInternal?: (page: InternalPageId) => void
+  readonly onReorderTab?: (
+    tabId: ProductState['tabs'][number]['id'],
+    toIndex: number,
+  ) => void
+  readonly onReorderInternal?: (page: InternalPageId, toIndex: number) => void
   readonly onNavigate?: (
     destination: Exclude<ShellDestination, 'tab'>,
   ) => void
@@ -113,6 +118,8 @@ export function BrowserChrome({
   onActivateTab,
   onCloseTab,
   onCloseInternal,
+  onReorderTab,
+  onReorderInternal,
   onNavigate,
   onOpenAddress,
   onOpenAsWidget,
@@ -269,6 +276,8 @@ export function BrowserChrome({
           onActivateTab={onActivateTab}
           onCloseTab={onCloseTab}
           onCloseInternal={onCloseInternal}
+          onReorderTab={onReorderTab}
+          onReorderInternal={onReorderInternal}
           onNavigate={onNavigate}
           onNewTab={openNewTab}
           newTabDisabled={navigationDisabled}

src/v2/shell/HomeV2Prototype.tsx

@@ -164,6 +164,11 @@ export interface HomeV2PrototypeProps {
   readonly onActivateTab?: (tabId: ProductState['tabs'][number]['id']) => void
   readonly onCloseTab?: (tabId: ProductState['tabs'][number]['id']) => void
   readonly onCloseInternal?: (page: InternalPageId) => void
+  readonly onReorderTab?: (
+    tabId: ProductState['tabs'][number]['id'],
+    toIndex: number,
+  ) => void
+  readonly onReorderInternal?: (page: InternalPageId, toIndex: number) => void
   readonly onNavigate?: (
     destination: Exclude<ShellDestination, 'tab'>,
   ) => void
@@ -1001,6 +1006,8 @@ export function HomeV2Prototype(props: HomeV2PrototypeProps) {
     onActivateTab,
     onCloseTab,
     onCloseInternal,
+    onReorderTab,
+    onReorderInternal,
     onNavigate,
     onResolvePermission,
   } = props
@@ -1121,6 +1128,8 @@ export function HomeV2Prototype(props: HomeV2PrototypeProps) {
         onActivateTab={guardedActivateTab}
         onCloseTab={onCloseTab}
         onCloseInternal={guardedCloseInternal}
+        onReorderTab={onReorderTab}
+        onReorderInternal={onReorderInternal}
         onNavigate={guardedNavigate}
         onOpenAddress={props.onOpenAddress}
         onOpenAsWidget={props.onOpenAsWidget}