refactor: full codebase restructure for maintainability

Split oversized monolith files into focused, single-responsibility modules:

- services.go (1354 lines) → 9 per-service files with shared helpers
- model.go (1167 lines) → 5 files (model, keyhandler, mousehandler, msghandler, actions)
- tray.go handleClicks: replace 20 copy-paste blocks with loop-based goroutines
- agent.go: decompose runAgentAttach into focused helper functions
- Extract magic numbers to named constants in process.go and manager.go
- GUI: extract usePanelResize hook and agentStatusEqual utility

Behavior-preserving — no API changes, no new features.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: nunocoracao

gui/src/renderer/src/hooks/usePanelResize.ts

@@ -0,0 +1,59 @@
+import { useState, useCallback, useRef, useEffect } from 'react'
+
+interface PanelResizeOptions {
+  storageKey: string
+  defaultWidth?: number
+  minWidth?: number
+  maxWidth?: number
+}
+
+/**
+ * Hook for drag-resizable panels with localStorage persistence.
+ */
+export function usePanelResize({
+  storageKey,
+  defaultWidth = 520,
+  minWidth = 350,
+  maxWidth = 800
+}: PanelResizeOptions) {
+  const [width, setWidth] = useState(() => {
+    const saved = localStorage.getItem(storageKey)
+    return saved ? Number(saved) : defaultWidth
+  })
+  const isDragging = useRef(false)
+
+  const handleDragStart = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault()
+      isDragging.current = true
+      const startX = e.clientX
+      const startWidth = width
+
+      const onMouseMove = (ev: MouseEvent) => {
+        const delta = startX - ev.clientX
+        const newWidth = Math.min(maxWidth, Math.max(minWidth, startWidth + delta))
+        setWidth(newWidth)
+      }
+
+      const onMouseUp = () => {
+        isDragging.current = false
+        document.removeEventListener('mousemove', onMouseMove)
+        document.removeEventListener('mouseup', onMouseUp)
+        document.body.style.cursor = ''
+        document.body.style.userSelect = ''
+      }
+
+      document.body.style.cursor = 'col-resize'
+      document.body.style.userSelect = 'none'
+      document.addEventListener('mousemove', onMouseMove)
+      document.addEventListener('mouseup', onMouseUp)
+    },
+    [width, minWidth, maxWidth]
+  )
+
+  useEffect(() => {
+    localStorage.setItem(storageKey, String(width))
+  }, [width, storageKey])
+
+  return { width, handleDragStart, isDragging }
+}

gui/src/renderer/src/lib/agent-utils.ts

@@ -0,0 +1,16 @@
+import type { AgentStatus } from '../generated/watchfire_pb'
+
+/**
+ * Returns true if two agent statuses are equivalent (no meaningful change).
+ * Used to skip redundant state updates in stores.
+ */
+export function agentStatusEqual(a: AgentStatus | undefined, b: AgentStatus): boolean {
+  if (!a) return false
+  return (
+    a.isRunning === b.isRunning &&
+    a.mode === b.mode &&
+    a.taskNumber === b.taskNumber &&
+    a.taskTitle === b.taskTitle &&
+    a.wildfirePhase === b.wildfirePhase
+  )
+}

gui/src/renderer/src/stores/agent-store.ts

@@ -1,6 +1,7 @@
 import { create } from 'zustand'
 import type { AgentStatus, AgentIssue } from '../generated/watchfire_pb'
 import { getAgentClient } from '../lib/grpc-client'
+import { agentStatusEqual } from '../lib/agent-utils'
 
 interface AgentState {
   statuses: Record<string, AgentStatus>
@@ -48,14 +49,7 @@ export const useAgentStore = create<AgentState>((set, get) => ({
       const client = getAgentClient()
       const status = await client.getAgentStatus({ projectId })
       const existing = get().statuses[projectId]
-      if (
-        existing &&
-        existing.isRunning === status.isRunning &&
-        existing.mode === status.mode &&
-        existing.taskNumber === status.taskNumber &&
-        existing.taskTitle === status.taskTitle &&
-        existing.wildfirePhase === status.wildfirePhase
-      ) return
+      if (agentStatusEqual(existing, status)) return
       set((s) => ({ statuses: { ...s.statuses, [projectId]: status } }))
     } catch {
       // not running — set explicit idle status so consumers know the fetch completed

gui/src/renderer/src/stores/projects-store.ts

@@ -1,6 +1,7 @@
 import { create } from 'zustand'
 import type { Project, AgentStatus } from '../generated/watchfire_pb'
 import { getProjectClient, getAgentClient } from '../lib/grpc-client'
+import { agentStatusEqual } from '../lib/agent-utils'
 
 interface ProjectsState {
   projects: Project[]
@@ -38,14 +39,7 @@ export const useProjectsStore = create<ProjectsState>((set, get) => ({
       const client = getAgentClient()
       const status = await client.getAgentStatus({ projectId })
       const existing = get().agentStatuses[projectId]
-      if (
-        existing &&
-        existing.isRunning === status.isRunning &&
-        existing.mode === status.mode &&
-        existing.taskNumber === status.taskNumber &&
-        existing.taskTitle === status.taskTitle &&
-        existing.wildfirePhase === status.wildfirePhase
-      ) return
+      if (agentStatusEqual(existing, status)) return
       set((s) => ({
         agentStatuses: { ...s.agentStatuses, [projectId]: status }
       }))

gui/src/renderer/src/views/ProjectView/ProjectView.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, useRef } from 'react'
+import { useState, useEffect } from 'react'
 import { ListTodo, FileText, Trash2, Settings, GitBranch, Globe, Circle, PanelRightClose, PanelRight, Square, Flame, Play, Sparkles, KeyRound } from 'lucide-react'
 import { useAppStore } from '../../stores/app-store'
 import { useProjectsStore } from '../../stores/projects-store'
@@ -10,6 +10,7 @@ import { AgentBadge } from '../../components/AgentBadge'
 import { Button } from '../../components/ui/Button'
 import { useToast } from '../../components/ui/Toast'
 import { cn } from '../../lib/utils'
+import { usePanelResize } from '../../hooks/usePanelResize'
 import { TasksTab } from './TasksTab/TasksTab'
 import { DefinitionTab } from './DefinitionTab'
 import { SecretsTab } from './SecretsTab'
@@ -41,41 +42,12 @@ export function ProjectView() {
 
   const [centerTab, setCenterTab] = useState<CenterTab>('tasks')
   const [rightPanelOpen, setRightPanelOpen] = useState(true)
-  const [rightPanelWidth, setRightPanelWidth] = useState(() => {
-    const saved = localStorage.getItem('wf-right-panel-width')
-    return saved ? Number(saved) : 520
+  const { width: rightPanelWidth, handleDragStart } = usePanelResize({
+    storageKey: 'wf-right-panel-width',
+    defaultWidth: 520,
+    minWidth: 350,
+    maxWidth: 800
   })
-  const isDragging = useRef(false)
-
-  const handleDragStart = useCallback((e: React.MouseEvent) => {
-    e.preventDefault()
-    isDragging.current = true
-    const startX = e.clientX
-    const startWidth = rightPanelWidth
-
-    const onMouseMove = (ev: MouseEvent) => {
-      const delta = startX - ev.clientX
-      const newWidth = Math.min(800, Math.max(350, startWidth + delta))
-      setRightPanelWidth(newWidth)
-    }
-
-    const onMouseUp = () => {
-      isDragging.current = false
-      document.removeEventListener('mousemove', onMouseMove)
-      document.removeEventListener('mouseup', onMouseUp)
-      document.body.style.cursor = ''
-      document.body.style.userSelect = ''
-    }
-
-    document.body.style.cursor = 'col-resize'
-    document.body.style.userSelect = 'none'
-    document.addEventListener('mousemove', onMouseMove)
-    document.addEventListener('mouseup', onMouseUp)
-  }, [rightPanelWidth])
-
-  useEffect(() => {
-    localStorage.setItem('wf-right-panel-width', String(rightPanelWidth))
-  }, [rightPanelWidth])
 
   const project = projects.find((p) => p.projectId === projectId)
   const isAgentRunning = agentStatus?.isRunning