refactor: streamline flow board interactions

frontend/src/views/Dashboard/FlowBoard.vue

@@ -12,7 +12,7 @@
  *
  * Polling startet bei Mount, stoppt bei Unmount.
  */
-import { ref, onMounted, onUnmounted } from 'vue'
+import { onMounted, onUnmounted } from 'vue'
 import { useAgentStore } from '../../stores/agents'
 import { useChatStore } from '../../stores/chat'
 import { useTaskStore } from '../../stores/tasks'
@@ -21,65 +21,29 @@ import FlowCanvas from '../../components/dashboard/v2/FlowCanvas.vue'
 import IrisChat from '../../components/dashboard/v2/IrisChat.vue'
 import TaskStrip from '../../components/dashboard/v2/TaskStrip.vue'
 import AgentDetailModal from '../../components/dashboard/v2/AgentDetailModal.vue'
-import type { AgentNodeData } from '../../composables/useFlowLayout'
-import { extraAgentPool } from '../../composables/useFlowLayout'
+import { useFlowBoardState } from '../../composables/useFlowBoardState'
 
 /* ── Stores ──────────────────────────────────────── */
 const agentStore = useAgentStore()
 const chatStore = useChatStore()
 const taskStore = useTaskStore()
 
-/* ── Agent Layout State ───────────────────────────── */
-const agentPositions = ref<Record<string, { x: number; y: number }>>({})
-const enteringIds = ref<string[]>([])
-const localAgentPool = ref<AgentNodeData[]>([...extraAgentPool])
-
-/* ── Event Handlers ───────────────────────────────── */
-
-function handleSelect(id: string) {
-  agentStore.selectAgent(id)
-}
-
-function handleCloseModal() {
-  agentStore.selectAgent(null)
-}
-
-function handleChangeModel(agentId: string, modelAlias: string) {
-  // Modal emits the alias (display name); resolve to model ID for the API
-  const model = agentStore.models.find(m => m.alias === modelAlias)
-  const modelId = model?.id ?? modelAlias
-  agentStore.changeModel(agentId, modelId)
-}
-
-function handleAdd() {
-  const pool = localAgentPool.value
-  if (pool.length === 0) return
-  const next = pool.shift()!
-  enteringIds.value.push(next.id)
-  agentStore.agents.push(next)
-
-  setTimeout(() => {
-    const idx = enteringIds.value.indexOf(next.id)
-    if (idx !== -1) enteringIds.value.splice(idx, 1)
-  }, 600)
-}
-
-function handleResetLayout() {
-  agentPositions.value = {}
-}
-
-function handleUpdatePositions(pos: Record<string, { x: number; y: number }>) {
-  agentPositions.value = { ...pos }
-}
+const {
+  addAgent,
+  agentPositions,
+  changeModel,
+  closeAgent,
+  enteringIds,
+  resetLayout,
+  selectAgent,
+  sendChatMessage,
+  updatePositions,
+} = useFlowBoardState(agentStore, chatStore)
 
 function handleBlockerClick() {
   console.log('[FlowBoard] blocker clicked')
 }
 
-function handleChatSend(text: string) {
-  chatStore.sendMessage(text)
-}
-
 /* ── Lifecycle ────────────────────────────────────── */
 onMounted(() => {
   agentStore.startPolling()
@@ -114,10 +78,10 @@ onUnmounted(() => {
           :agents="agentStore.agentList"
           :positions="agentPositions"
           :entering-ids="enteringIds"
-          @select="handleSelect"
-          @add="handleAdd"
-          @reset-layout="handleResetLayout"
-          @update-positions="handleUpdatePositions"
+          @select="selectAgent"
+          @add="addAgent"
+          @reset-layout="resetLayout"
+          @update-positions="updatePositions"
         />
 
         <TaskStrip :tasks="taskStore.taskList" :loading="taskStore.loading" :error="taskStore.error" />
@@ -128,7 +92,7 @@ onUnmounted(() => {
         :messages="chatStore.messageList"
         :is-thinking="chatStore.isThinking"
         :error="chatStore.error"
-        @send="handleChatSend"
+        @send="sendChatMessage"
       />
     </div>
 
@@ -137,9 +101,9 @@ onUnmounted(() => {
       v-if="agentStore.modalOpen && agentStore.selectedAgent"
       :agent="agentStore.selectedAgent"
       :agent-order="agentStore.agentOrder"
-      @close="handleCloseModal"
-      @select="handleSelect"
-      @change-model="handleChangeModel"
+      @close="closeAgent"
+      @select="selectAgent"
+      @change-model="changeModel"
     />
   </div>
 </template>