@enruana/claude-orka 0.2.2 → 0.3.1

package/dist/electron/renderer/app.js

@@ -1,808 +0,0 @@
-/**
- * Claude Orka - Electron Renderer
- * GitKraken-inspired UI for managing Claude sessions
- */
-
-// ===== STATE =====
-const state = {
-  projectPath: '',
-  sessions: [],
-  currentSession: null,
-  currentFilter: 'all',
-  selectedNode: null, // {type: 'main'|'fork', data: {...}}
-  zoom: 1.0,
-}
-
-// ===== DOM ELEMENTS =====
-const $el = {
-  // Header
-  projectPath: document.getElementById('project-path'),
-  refreshBtn: document.getElementById('refresh-btn'),
-  newSessionBtn: document.getElementById('new-session-btn'),
-
-  // Left sidebar
-  sessionsList: document.getElementById('sessions-list'),
-  filterTabs: document.querySelectorAll('.filter-tab'),
-
-  // Center graph
-  graphCanvas: document.getElementById('graph-canvas'),
-  graphEmpty: document.getElementById('graph-empty'),
-  currentSessionTitle: document.getElementById('current-session-title'),
-  zoomInBtn: document.getElementById('zoom-in-btn'),
-  zoomOutBtn: document.getElementById('zoom-out-btn'),
-  zoomResetBtn: document.getElementById('zoom-reset-btn'),
-
-  // Right details panel
-  detailsEmpty: document.getElementById('details-empty'),
-  detailsMain: document.getElementById('details-main'),
-  detailsFork: document.getElementById('details-fork'),
-  detailsSession: document.getElementById('details-session'),
-
-  // Command modal
-  commandModal: document.getElementById('command-modal'),
-  commandInput: document.getElementById('command-input'),
-  commandTargetLabel: document.getElementById('command-target-label'),
-  commandSendBtn: document.getElementById('command-send-btn'),
-  commandCancelBtn: document.getElementById('command-cancel-btn'),
-
-  // Toast
-  toastContainer: document.getElementById('toast-container'),
-}
-
-// ===== CONSTANTS =====
-const COLORS = {
-  main: '#00d9ff', // Cyan vibrante como GitKraken
-  forks: ['#ff1b8d', '#af52de', '#00d26a', '#ffa500', '#5ac8fa'], // Colores vibrantes
-  active: '#00d26a',
-  saved: '#606060',
-  merged: '#af52de',
-}
-
-const NODE_RADIUS = 6
-const NODE_SPACING = 50
-const FORK_OFFSET = 150
-const COMMITS_PER_BRANCH = 4 // Número de commits a mostrar por branch
-
-// ===== UTILITIES =====
-function formatDate(dateStr) {
-  if (!dateStr) return 'N/A'
-  const date = new Date(dateStr)
-  return date.toLocaleString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })
-}
-
-function showToast(message, type = 'info') {
-  const toast = document.createElement('div')
-  toast.className = `toast ${type}`
-  toast.innerHTML = `
-    <div class="toast-icon">${type === 'success' ? '✓' : type === 'error' ? '✕' : 'ℹ'}</div>
-    <div class="toast-content">
-      <div class="toast-message">${message}</div>
-    </div>
-  `
-  $el.toastContainer.appendChild(toast)
-
-  setTimeout(() => toast.remove(), 4000)
-}
-
-function askUser(message, defaultValue = '') {
-  return new Promise((resolve) => {
-    const dialog = document.createElement('div')
-    dialog.style.cssText = `
-      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
-      background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
-      display: flex; align-items: center; justify-content: center; z-index: 10000;
-    `
-    dialog.innerHTML = `
-      <div style="background: #1e1e1e; padding: 24px; border-radius: 8px; min-width: 400px; border: 1px solid #363636;">
-        <h3 style="margin: 0 0 16px 0; color: #e8e8e8; font-size: 16px;">${message}</h3>
-        <input type="text" id="dialog-input" value="${defaultValue}"
-          style="width: 100%; padding: 8px 12px; background: #141414; border: 1px solid #363636; border-radius: 4px; color: #e8e8e8; font-size: 13px; margin-bottom: 16px;" />
-        <div style="display: flex; gap: 8px; justify-content: flex-end;">
-          <button id="dialog-cancel" style="padding: 6px 12px; background: #252525; color: #e8e8e8; border: 1px solid #363636; border-radius: 4px; cursor: pointer; font-size: 12px;">Cancel</button>
-          <button id="dialog-ok" style="padding: 6px 12px; background: #4a9eff; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px;">OK</button>
-        </div>
-      </div>
-    `
-    document.body.appendChild(dialog)
-
-    const input = dialog.querySelector('#dialog-input')
-    const okBtn = dialog.querySelector('#dialog-ok')
-    const cancelBtn = dialog.querySelector('#dialog-cancel')
-
-    input.focus()
-    input.select()
-
-    okBtn.onclick = () => { resolve(input.value); dialog.remove() }
-    cancelBtn.onclick = () => { resolve(''); dialog.remove() }
-    input.onkeydown = (e) => {
-      if (e.key === 'Enter') { resolve(input.value); dialog.remove() }
-      if (e.key === 'Escape') { resolve(''); dialog.remove() }
-    }
-  })
-}
-
-function confirmAction(message) {
-  return new Promise((resolve) => {
-    const dialog = document.createElement('div')
-    dialog.style.cssText = `
-      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
-      background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
-      display: flex; align-items: center; justify-content: center; z-index: 10000;
-    `
-    dialog.innerHTML = `
-      <div style="background: #1e1e1e; padding: 24px; border-radius: 8px; min-width: 400px; border: 1px solid #363636;">
-        <h3 style="margin: 0 0 16px 0; color: #e8e8e8; font-size: 16px;">${message}</h3>
-        <div style="display: flex; gap: 8px; justify-content: flex-end;">
-          <button id="dialog-no" style="padding: 6px 12px; background: #252525; color: #e8e8e8; border: 1px solid #363636; border-radius: 4px; cursor: pointer; font-size: 12px;">No</button>
-          <button id="dialog-yes" style="padding: 6px 12px; background: #ff5757; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px;">Yes</button>
-        </div>
-      </div>
-    `
-    document.body.appendChild(dialog)
-
-    const yesBtn = dialog.querySelector('#dialog-yes')
-    const noBtn = dialog.querySelector('#dialog-no')
-
-    yesBtn.onclick = () => { resolve(true); dialog.remove() }
-    noBtn.onclick = () => { resolve(false); dialog.remove() }
-  })
-}
-
-// ===== SESSIONS LIST (Left Sidebar) =====
-function renderSessionsList() {
-  const filtered = state.sessions.filter(s => {
-    if (state.currentFilter === 'all') return true
-    return s.status === state.currentFilter
-  })
-
-  if (filtered.length === 0) {
-    $el.sessionsList.innerHTML = '<div class="loading">No sessions found</div>'
-    return
-  }
-
-  $el.sessionsList.innerHTML = filtered.map((session, idx) => `
-    <div class="session-item ${state.currentSession?.id === session.id ? 'selected' : ''}"
-         data-session-id="${session.id}">
-      <div class="session-item-header">
-        <div class="session-item-icon">🌿</div>
-        <div class="session-item-name">${session.name}</div>
-        <div class="session-item-status status-${session.status}"></div>
-      </div>
-      <div class="session-item-meta">
-        <span>${session.forks.length} fork${session.forks.length !== 1 ? 's' : ''}</span>
-        <span>${formatDate(session.main.createdAt)}</span>
-      </div>
-    </div>
-  `).join('')
-
-  // Attach click listeners
-  $el.sessionsList.querySelectorAll('.session-item').forEach(item => {
-    item.addEventListener('click', () => {
-      const sessionId = item.dataset.sessionId
-      selectSession(sessionId)
-    })
-  })
-}
-
-function selectSession(sessionId) {
-  state.currentSession = state.sessions.find(s => s.id === sessionId)
-  state.selectedNode = null
-
-  renderSessionsList()
-  renderGraph()
-  showDetailsEmpty()
-
-  if (state.currentSession) {
-    $el.currentSessionTitle.textContent = state.currentSession.name
-    $el.graphEmpty.classList.add('hidden')
-  }
-}
-
-// ===== GRAPH VISUALIZATION (Center Canvas) =====
-function renderGraph() {
-  if (!state.currentSession) {
-    $el.graphEmpty.classList.remove('hidden')
-    return
-  }
-
-  $el.graphEmpty.classList.add('hidden')
-  const canvas = $el.graphCanvas
-  const ctx = canvas.getContext('2d')
-
-  // Set canvas size
-  canvas.width = canvas.offsetWidth
-  canvas.height = canvas.offsetHeight
-
-  // Clear canvas
-  ctx.clearRect(0, 0, canvas.width, canvas.height)
-
-  const session = state.currentSession
-  const centerX = canvas.width / 2
-  const startY = 80
-
-  // Calcular cuántos commits totales mostrar
-  const totalHeight = session.forks.length > 0
-    ? (session.forks.length + 1) * COMMITS_PER_BRANCH * NODE_SPACING
-    : COMMITS_PER_BRANCH * NODE_SPACING
-
-  // Array para almacenar todos los nodos clickeables
-  const allNodes = []
-
-  // ===== DIBUJAR MAIN BRANCH =====
-  const mainCommits = []
-  for (let i = 0; i < COMMITS_PER_BRANCH + session.forks.length; i++) {
-    const y = startY + i * NODE_SPACING
-    mainCommits.push({ x: centerX, y, type: 'main', data: session.main })
-  }
-
-  // Dibujar línea principal
-  ctx.strokeStyle = COLORS.main
-  ctx.lineWidth = 2 * state.zoom
-  ctx.beginPath()
-  ctx.moveTo(centerX, mainCommits[0].y)
-  ctx.lineTo(centerX, mainCommits[mainCommits.length - 1].y + NODE_SPACING)
-  ctx.stroke()
-
-  // Dibujar commits de main
-  mainCommits.forEach((commit, idx) => {
-    const isHead = idx === 0
-    drawNode(ctx, commit.x, commit.y, session.status, COLORS.main, isHead)
-    if (isHead) {
-      allNodes.push(commit)
-    }
-  })
-
-  // Label de Main
-  ctx.fillStyle = '#e8e8e8'
-  ctx.font = `bold ${11 * state.zoom}px -apple-system, sans-serif`
-  ctx.textAlign = 'left'
-  ctx.fillText('main', centerX + 15, mainCommits[0].y + 4)
-
-  // ===== DIBUJAR FORKS =====
-  session.forks.forEach((fork, idx) => {
-    const isLeft = idx % 2 === 0
-    const forkX = isLeft ? centerX - FORK_OFFSET : centerX + FORK_OFFSET
-    const color = COLORS.forks[idx % COLORS.forks.length]
-
-    // Punto de ramificación en main (después de algunos commits)
-    const branchPointIdx = Math.min(idx + 1, mainCommits.length - 1)
-    const branchPoint = mainCommits[branchPointIdx]
-
-    // Crear commits para el fork
-    const forkCommits = []
-    for (let i = 0; i < COMMITS_PER_BRANCH; i++) {
-      const y = branchPoint.y + i * NODE_SPACING
-      forkCommits.push({
-        x: forkX,
-        y,
-        type: 'fork',
-        data: fork,
-        color
-      })
-    }
-
-    // Dibujar curva de ramificación desde main hasta el primer commit del fork
-    ctx.strokeStyle = color
-    ctx.lineWidth = 2 * state.zoom
-    ctx.beginPath()
-    ctx.moveTo(branchPoint.x, branchPoint.y)
-
-    // Bezier curve para transición suave
-    const cp1x = branchPoint.x
-    const cp1y = branchPoint.y + NODE_SPACING / 3
-    const cp2x = forkCommits[0].x
-    const cp2y = branchPoint.y + NODE_SPACING * 0.7
-    ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, forkCommits[0].x, forkCommits[0].y)
-    ctx.stroke()
-
-    // Dibujar línea del fork
-    if (forkCommits.length > 1) {
-      ctx.beginPath()
-      ctx.moveTo(forkCommits[0].x, forkCommits[0].y)
-      ctx.lineTo(forkCommits[forkCommits.length - 1].x, forkCommits[forkCommits.length - 1].y)
-      ctx.stroke()
-    }
-
-    // Si el fork está merged, dibujar línea de vuelta a main
-    if (fork.mergedToMain) {
-      const lastForkCommit = forkCommits[forkCommits.length - 1]
-      const mergeTargetIdx = branchPointIdx + COMMITS_PER_BRANCH
-      const mergeTarget = mainCommits[Math.min(mergeTargetIdx, mainCommits.length - 1)]
-
-      ctx.strokeStyle = color
-      ctx.globalAlpha = 0.5
-      ctx.setLineDash([5, 5])
-      ctx.beginPath()
-      ctx.moveTo(lastForkCommit.x, lastForkCommit.y)
-
-      const mcp1x = lastForkCommit.x
-      const mcp1y = lastForkCommit.y + NODE_SPACING / 3
-      const mcp2x = mergeTarget.x
-      const mcp2y = mergeTarget.y - NODE_SPACING / 3
-      ctx.bezierCurveTo(mcp1x, mcp1y, mcp2x, mcp2y, mergeTarget.x, mergeTarget.y)
-      ctx.stroke()
-      ctx.setLineDash([])
-      ctx.globalAlpha = 1
-    }
-
-    // Dibujar commits del fork
-    forkCommits.forEach((commit, commitIdx) => {
-      const isHead = commitIdx === 0
-      drawNode(ctx, commit.x, commit.y, fork.status, color, isHead)
-      if (isHead) {
-        allNodes.push(commit)
-      }
-    })
-
-    // Label del fork
-    ctx.fillStyle = '#e8e8e8'
-    ctx.font = `bold ${11 * state.zoom}px -apple-system, sans-serif`
-    ctx.textAlign = isLeft ? 'right' : 'left'
-    const labelX = isLeft ? forkCommits[0].x - 15 : forkCommits[0].x + 15
-    ctx.fillText(fork.name, labelX, forkCommits[0].y + 4)
-  })
-
-  // Store nodes for click detection
-  canvas.nodes = allNodes
-}
-
-function drawNode(ctx, x, y, status, color, isHead = false) {
-  const radius = (isHead ? NODE_RADIUS * 1.3 : NODE_RADIUS) * state.zoom
-
-  // Outer circle (branch color)
-  ctx.beginPath()
-  ctx.arc(x, y, radius, 0, Math.PI * 2)
-  ctx.fillStyle = color
-  ctx.fill()
-
-  // Outline más grueso para HEAD
-  ctx.strokeStyle = '#141414'
-  ctx.lineWidth = isHead ? 3 : 2
-  ctx.stroke()
-
-  // Inner circle for status indicator (solo en HEAD)
-  if (isHead && (status === 'saved' || status === 'merged')) {
-    ctx.beginPath()
-    ctx.arc(x, y, radius / 2.5, 0, Math.PI * 2)
-    ctx.fillStyle = status === 'saved' ? COLORS.saved : COLORS.merged
-    ctx.fill()
-  }
-
-  // Highlight ring para HEAD activo
-  if (isHead && status === 'active') {
-    ctx.beginPath()
-    ctx.arc(x, y, radius + 3, 0, Math.PI * 2)
-    ctx.strokeStyle = color
-    ctx.lineWidth = 2
-    ctx.globalAlpha = 0.5
-    ctx.stroke()
-    ctx.globalAlpha = 1
-  }
-}
-
-// ===== DETAILS PANEL (Right Sidebar) =====
-function showDetailsEmpty() {
-  $el.detailsEmpty.classList.remove('hidden')
-  $el.detailsMain.classList.remove('active')
-  $el.detailsFork.classList.remove('active')
-  $el.detailsSession.classList.remove('active')
-}
-
-function showMainDetails() {
-  if (!state.currentSession) return
-
-  $el.detailsEmpty.classList.add('hidden')
-  $el.detailsMain.classList.add('active')
-  $el.detailsFork.classList.remove('active')
-  $el.detailsSession.classList.remove('active')
-
-  const session = state.currentSession
-  const main = session.main
-
-  // Update main details
-  document.getElementById('main-session-name').textContent = session.name
-  document.getElementById('main-created').textContent = formatDate(main.createdAt)
-  document.getElementById('main-tmux').textContent = session.tmuxSessionName
-  document.getElementById('main-status').className = `status-indicator status-${session.status}`
-
-  // Context (only if saved)
-  const contextRow = document.getElementById('main-context-row')
-  if (main.contextPath) {
-    contextRow.style.display = 'block'
-    document.getElementById('main-context').textContent = main.contextPath
-  } else {
-    contextRow.style.display = 'none'
-  }
-
-  // Button states
-  document.getElementById('main-resume-btn').disabled = session.status === 'active'
-  document.getElementById('main-close-btn').disabled = session.status === 'saved'
-}
-
-function showForkDetails(fork) {
-  if (!fork) return
-
-  $el.detailsEmpty.classList.add('hidden')
-  $el.detailsMain.classList.remove('active')
-  $el.detailsFork.classList.add('active')
-  $el.detailsSession.classList.remove('active')
-
-  // Update fork details
-  document.getElementById('fork-name').textContent = fork.name
-  document.getElementById('fork-id').textContent = fork.id
-  document.getElementById('fork-created').textContent = formatDate(fork.createdAt)
-  document.getElementById('fork-pane').textContent = fork.tmuxPaneId || 'N/A'
-  document.getElementById('fork-status').className = `status-indicator status-${fork.status}`
-
-  // Context (only if saved)
-  const contextRow = document.getElementById('fork-context-row')
-  if (fork.contextPath) {
-    contextRow.style.display = 'block'
-    document.getElementById('fork-context').textContent = fork.contextPath
-  } else {
-    contextRow.style.display = 'none'
-  }
-
-  // Merged info
-  const mergedRow = document.getElementById('fork-merged-row')
-  if (fork.mergedToMain) {
-    mergedRow.style.display = 'block'
-    document.getElementById('fork-merged').textContent = `Yes (${formatDate(fork.mergedAt)})`
-  } else {
-    mergedRow.style.display = 'none'
-  }
-
-  // Button states
-  document.getElementById('fork-export-btn').disabled = fork.status !== 'active'
-  document.getElementById('fork-merge-btn').disabled = fork.status !== 'active' || !fork.contextPath
-  document.getElementById('fork-resume-btn').disabled = fork.status === 'active'
-  document.getElementById('fork-close-btn').disabled = fork.status !== 'active'
-}
-
-// ===== EVENT HANDLERS =====
-
-// Canvas click - detect node clicks
-$el.graphCanvas.addEventListener('click', (e) => {
-  if (!$el.graphCanvas.nodes) return
-
-  const rect = $el.graphCanvas.getBoundingClientRect()
-  const x = e.clientX - rect.left
-  const y = e.clientY - rect.top
-
-  const clickedNode = $el.graphCanvas.nodes.find(node => {
-    const dx = x - node.x
-    const dy = y - node.y
-    const clickRadius = NODE_RADIUS * 1.5 * state.zoom + 5
-    return Math.sqrt(dx * dx + dy * dy) <= clickRadius
-  })
-
-  if (clickedNode) {
-    state.selectedNode = clickedNode
-    if (clickedNode.type === 'main') {
-      showMainDetails()
-    } else {
-      showForkDetails(clickedNode.data)
-    }
-  }
-})
-
-// Filter tabs
-$el.filterTabs.forEach(tab => {
-  tab.addEventListener('click', () => {
-    $el.filterTabs.forEach(t => t.classList.remove('active'))
-    tab.classList.add('active')
-    state.currentFilter = tab.dataset.filter
-    renderSessionsList()
-  })
-})
-
-// Zoom controls
-$el.zoomInBtn.addEventListener('click', () => {
-  state.zoom = Math.min(state.zoom + 0.1, 2.0)
-  renderGraph()
-})
-
-$el.zoomOutBtn.addEventListener('click', () => {
-  state.zoom = Math.max(state.zoom - 0.1, 0.5)
-  renderGraph()
-})
-
-$el.zoomResetBtn.addEventListener('click', () => {
-  state.zoom = 1.0
-  renderGraph()
-})
-
-// Header buttons
-$el.newSessionBtn.addEventListener('click', createSession)
-$el.refreshBtn.addEventListener('click', loadSessions)
-
-// Main branch actions
-document.getElementById('main-resume-btn').addEventListener('click', () => resumeSession(state.currentSession.id))
-document.getElementById('main-close-btn').addEventListener('click', () => closeSession(state.currentSession.id))
-document.getElementById('new-fork-btn').addEventListener('click', () => createFork(state.currentSession.id))
-document.getElementById('send-command-main-btn').addEventListener('click', () => openCommandModal('main'))
-
-// Fork actions
-document.getElementById('fork-export-btn').addEventListener('click', () => exportFork())
-document.getElementById('fork-merge-btn').addEventListener('click', () => mergeFork())
-document.getElementById('fork-resume-btn').addEventListener('click', () => resumeFork())
-document.getElementById('fork-close-btn').addEventListener('click', () => closeFork())
-document.getElementById('send-command-fork-btn').addEventListener('click', () => openCommandModal('fork'))
-document.getElementById('fork-delete-btn').addEventListener('click', () => deleteFork())
-
-// Session details actions
-document.getElementById('session-detail-resume-btn').addEventListener('click', () => resumeSession(state.currentSession.id))
-document.getElementById('session-detail-close-btn').addEventListener('click', () => closeSession(state.currentSession.id))
-document.getElementById('session-detail-delete-btn').addEventListener('click', () => deleteSession(state.currentSession.id))
-
-// Command modal
-document.querySelector('.modal-close').addEventListener('click', closeCommandModal)
-$el.commandCancelBtn.addEventListener('click', closeCommandModal)
-$el.commandSendBtn.addEventListener('click', sendCommand)
-
-// ===== API CALLS =====
-
-async function loadSessions() {
-  try {
-    const result = await window.orka.getSessions()
-    if (result.success) {
-      state.sessions = result.data
-      renderSessionsList()
-      if (state.currentSession) {
-        state.currentSession = state.sessions.find(s => s.id === state.currentSession.id)
-        renderGraph()
-      }
-    }
-  } catch (error) {
-    showToast(`Error loading sessions: ${error.message}`, 'error')
-  }
-}
-
-async function createSession() {
-  const name = await askUser('Enter session name (optional):', '')
-  try {
-    const result = await window.orka.createSession(name || undefined, true)
-    if (result.success) {
-      showToast('Session created!', 'success')
-      await loadSessions()
-      selectSession(result.data.id)
-    } else {
-      showToast(result.error, 'error')
-    }
-  } catch (error) {
-    showToast(`Error: ${error.message}`, 'error')
-  }
-}
-
-async function resumeSession(sessionId) {
-  try {
-    const result = await window.orka.resumeSession(sessionId, true)
-    if (result.success) {
-      showToast('Session resumed!', 'success')
-      await loadSessions()
-    } else {
-      showToast(result.error, 'error')
-    }
-  } catch (error) {
-    showToast(`Error: ${error.message}`, 'error')
-  }
-}
-
-async function closeSession(sessionId) {
-  const confirmed = await confirmAction('Close this session? Context will be saved.')
-  if (!confirmed) return
-
-  try {
-    const result = await window.orka.closeSession(sessionId)
-    if (result.success) {
-      showToast('Session closed and saved!', 'success')
-      await loadSessions()
-    } else {
-      showToast(result.error, 'error')
-    }
-  } catch (error) {
-    showToast(`Error: ${error.message}`, 'error')
-  }
-}
-
-async function deleteSession(sessionId) {
-  const confirmed = await confirmAction('Delete this session? This cannot be undone.')
-  if (!confirmed) return
-
-  try {
-    const result = await window.orka.deleteSession(sessionId)
-    if (result.success) {
-      showToast('Session deleted!', 'success')
-      state.currentSession = null
-      state.selectedNode = null
-      await loadSessions()
-      showDetailsEmpty()
-      $el.graphEmpty.classList.remove('hidden')
-    } else {
-      showToast(result.error, 'error')
-    }
-  } catch (error) {
-    showToast(`Error: ${error.message}`, 'error')
-  }
-}
-
-async function createFork(sessionId) {
-  const name = await askUser('Enter fork name (optional):', '')
-  try {
-    const result = await window.orka.createFork(sessionId, name || undefined)
-    if (result.success) {
-      showToast('Fork created!', 'success')
-      await loadSessions()
-      renderGraph()
-    } else {
-      showToast(result.error, 'error')
-    }
-  } catch (error) {
-    showToast(`Error: ${error.message}`, 'error')
-  }
-}
-
-async function exportFork() {
-  if (!state.selectedNode || state.selectedNode.type !== 'fork') return
-
-  try {
-    const result = await window.orka.export(state.currentSession.id, state.selectedNode.data.id)
-    if (result.success) {
-      showToast(`Context exported: ${result.data}`, 'success')
-      await loadSessions()
-      renderGraph()
-    } else {
-      showToast(result.error, 'error')
-    }
-  } catch (error) {
-    showToast(`Error: ${error.message}`, 'error')
-  }
-}
-
-async function mergeFork() {
-  if (!state.selectedNode || state.selectedNode.type !== 'fork') return
-
-  const confirmed = await confirmAction('Merge this fork to main?')
-  if (!confirmed) return
-
-  try {
-    const result = await window.orka.merge(state.currentSession.id, state.selectedNode.data.id)
-    if (result.success) {
-      showToast('Fork merged to main!', 'success')
-      await loadSessions()
-      renderGraph()
-    } else {
-      showToast(result.error, 'error')
-    }
-  } catch (error) {
-    showToast(`Error: ${error.message}`, 'error')
-  }
-}
-
-async function resumeFork() {
-  if (!state.selectedNode || state.selectedNode.type !== 'fork') return
-
-  try {
-    const result = await window.orka.resumeFork(state.currentSession.id, state.selectedNode.data.id)
-    if (result.success) {
-      showToast('Fork resumed!', 'success')
-      await loadSessions()
-      renderGraph()
-    } else {
-      showToast(result.error, 'error')
-    }
-  } catch (error) {
-    showToast(`Error: ${error.message}`, 'error')
-  }
-}
-
-async function closeFork() {
-  if (!state.selectedNode || state.selectedNode.type !== 'fork') return
-
-  const confirmed = await confirmAction('Close this fork? Context will be saved.')
-  if (!confirmed) return
-
-  try {
-    const result = await window.orka.closeFork(state.currentSession.id, state.selectedNode.data.id)
-    if (result.success) {
-      showToast('Fork closed and saved!', 'success')
-      await loadSessions()
-      renderGraph()
-    } else {
-      showToast(result.error, 'error')
-    }
-  } catch (error) {
-    showToast(`Error: ${error.message}`, 'error')
-  }
-}
-
-async function deleteFork() {
-  if (!state.selectedNode || state.selectedNode.type !== 'fork') return
-
-  const confirmed = await confirmAction('Delete this fork? This cannot be undone.')
-  if (!confirmed) return
-
-  try {
-    const result = await window.orka.deleteFork(state.currentSession.id, state.selectedNode.data.id)
-    if (result.success) {
-      showToast('Fork deleted!', 'success')
-      state.selectedNode = null
-      await loadSessions()
-      renderGraph()
-      showDetailsEmpty()
-    } else {
-      showToast(result.error, 'error')
-    }
-  } catch (error) {
-    showToast(`Error: ${error.message}`, 'error')
-  }
-}
-
-// Command modal
-let commandTarget = null
-
-function openCommandModal(target) {
-  commandTarget = target
-  if (target === 'main') {
-    $el.commandTargetLabel.textContent = 'Main Branch'
-  } else if (state.selectedNode) {
-    $el.commandTargetLabel.textContent = `Fork: ${state.selectedNode.data.name}`
-  }
-  $el.commandModal.classList.add('active')
-  $el.commandInput.value = ''
-  $el.commandInput.focus()
-}
-
-function closeCommandModal() {
-  $el.commandModal.classList.remove('active')
-  commandTarget = null
-}
-
-async function sendCommand() {
-  const command = $el.commandInput.value.trim()
-  if (!command) return
-
-  try {
-    let result
-    if (commandTarget === 'main') {
-      result = await window.orka.sendCommand(state.currentSession.id, '', command)
-    } else if (state.selectedNode) {
-      result = await window.orka.sendCommand(state.currentSession.id, state.selectedNode.data.id, command)
-    }
-
-    if (result.success) {
-      showToast('Command sent!', 'success')
-      closeCommandModal()
-    } else {
-      showToast(result.error, 'error')
-    }
-  } catch (error) {
-    showToast(`Error: ${error.message}`, 'error')
-  }
-}
-
-// ===== INITIALIZATION =====
-async function init() {
-  try {
-    const result = await window.orka.initialize()
-    if (result.success) {
-      state.projectPath = result.data
-      $el.projectPath.textContent = result.data
-      await loadSessions()
-    } else {
-      showToast('Failed to initialize: ' + result.error, 'error')
-    }
-  } catch (error) {
-    showToast('Error initializing: ' + error.message, 'error')
-  }
-}
-
-// Start the app
-init()
-
-// Handle window resize
-window.addEventListener('resize', () => {
-  if (state.currentSession) {
-    renderGraph()
-  }
-})