refactor(process): extract shared timeline list pane for desktop and mobile

- add ProcessTimelineListPane to centralize NodeTimelineList props/events/defaults
- migrate ProcessDesktopPane to use the shared timeline pane
- migrate ProcessMobilePane to use the shared timeline pane with mobile-specific overrides

Author: Windsland52

src/views/process/components/ProcessDesktopPane.vue

@@ -3,7 +3,7 @@ import ProcessDesktopLayoutShell from './ProcessDesktopLayoutShell.vue'
 import TaskListPanel from './TaskListPanel.vue'
 import ProcessTimelineToolbar from './ProcessTimelineToolbar.vue'
 import NodeNavPanel from './NodeNavPanel.vue'
-import NodeTimelineList from './NodeTimelineList.vue'
+import ProcessTimelineListPane from './ProcessTimelineListPane.vue'
 import type { NodeInfo, TaskInfo } from '../../../types'
 import type { NodeNavViewItem } from '../composables/useNodeNavSearch'
 import type { VNodeChild } from 'vue'
@@ -124,17 +124,13 @@ const emit = defineEmits<{
     </template>
 
     <template #timeline-list>
-      <node-timeline-list
-        :nodes="currentNodes"
+      <process-timeline-list-pane
+        :current-nodes="currentNodes"
         :selected-task-key="selectedTaskKey"
         :display-mode="displayMode"
         :is-vscode-launch-embed="isVscodeLaunchEmbed"
         :bridge-request-task-doc="bridgeRequestTaskDoc"
         :bridge-reveal-task="bridgeRevealTask"
-        item-padding="12px"
-        scroller-style="height: 100%"
-        wrapper-style="height: 100%; display: flex; flex-direction: column; position: relative"
-        :capture-wheel-up="true"
         @manual-scroll-up="emit('manual-scroll-up')"
         @scroller-mounted="emit('scroller-mounted', $event)"
         @select-node="emit('select-node', $event)"

src/views/process/components/ProcessMobilePane.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import NodeTimelineList from './NodeTimelineList.vue'
+import ProcessTimelineListPane from './ProcessTimelineListPane.vue'
 import type { NodeInfo } from '../../../types'
 
 type NodeTimelineItem = NodeInfo & { _uniqueKey: string }
@@ -24,17 +24,15 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <node-timeline-list
-    :nodes="props.currentNodes"
+  <process-timeline-list-pane
+    :current-nodes="props.currentNodes"
     :selected-task-key="props.selectedTaskKey"
     :display-mode="props.displayMode"
     :is-vscode-launch-embed="props.isVscodeLaunchEmbed"
     :bridge-request-task-doc="props.bridgeRequestTaskDoc"
     :bridge-reveal-task="props.bridgeRevealTask"
     item-padding="8px 4px"
-    scroller-style="height: 100%"
     wrapper-style="flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative"
-    :capture-wheel-up="true"
     @scroller-mounted="emit('scroller-mounted', $event)"
     @manual-scroll-up="emit('manual-scroll-up')"
     @select-node="emit('select-node', $event)"

src/views/process/components/ProcessTimelineListPane.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import NodeTimelineList from './NodeTimelineList.vue'
+import type { NodeInfo } from '../../../types'
+
+type NodeTimelineItem = NodeInfo & { _uniqueKey: string }
+
+const props = withDefaults(defineProps<{
+  currentNodes: NodeTimelineItem[]
+  selectedTaskKey?: string | null
+  displayMode: string
+  isVscodeLaunchEmbed?: boolean
+  bridgeRequestTaskDoc?: ((task: string) => Promise<string | null>) | null
+  bridgeRevealTask?: ((task: string) => Promise<void>) | null
+  itemPadding?: string
+  scrollerStyle?: string
+  wrapperStyle?: string
+  captureWheelUp?: boolean
+}>(), {
+  selectedTaskKey: null,
+  isVscodeLaunchEmbed: false,
+  bridgeRequestTaskDoc: null,
+  bridgeRevealTask: null,
+  itemPadding: '12px',
+  scrollerStyle: 'height: 100%',
+  wrapperStyle: 'height: 100%; display: flex; flex-direction: column; position: relative',
+  captureWheelUp: true,
+})
+
+const emit = defineEmits<{
+  'scroller-mounted': [scroller: object | null]
+  'manual-scroll-up': []
+  'select-node': [node: NodeInfo]
+  'select-action': [node: NodeInfo]
+  'select-recognition': [node: NodeInfo, attemptIndex: number]
+  'select-flow-item': [node: NodeInfo, flowItemId: string]
+}>()
+</script>
+
+<template>
+  <node-timeline-list
+    :nodes="props.currentNodes"
+    :selected-task-key="props.selectedTaskKey"
+    :display-mode="props.displayMode"
+    :is-vscode-launch-embed="props.isVscodeLaunchEmbed"
+    :bridge-request-task-doc="props.bridgeRequestTaskDoc"
+    :bridge-reveal-task="props.bridgeRevealTask"
+    :item-padding="props.itemPadding"
+    :scroller-style="props.scrollerStyle"
+    :wrapper-style="props.wrapperStyle"
+    :capture-wheel-up="props.captureWheelUp"
+    @scroller-mounted="emit('scroller-mounted', $event)"
+    @manual-scroll-up="emit('manual-scroll-up')"
+    @select-node="emit('select-node', $event)"
+    @select-action="emit('select-action', $event)"
+    @select-recognition="(node, attemptIndex) => emit('select-recognition', node, attemptIndex)"
+    @select-flow-item="(node, flowItemId) => emit('select-flow-item', node, flowItemId)"
+  />
+</template>