@phenx-inc/ctlsurf 0.1.0

package/src/renderer/components/SettingsDialog.tsx

@@ -0,0 +1,204 @@
+import { useState, useEffect } from 'react'
+
+interface ProfileSummary {
+  id: string
+  name: string
+  baseUrl: string
+  hasApiKey: boolean
+  dataspacePageId: string | null
+}
+
+interface ProfileListResponse {
+  activeProfile: string
+  profiles: ProfileSummary[]
+}
+
+interface SettingsDialogProps {
+  open: boolean
+  onClose: () => void
+}
+
+export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
+  const [profileList, setProfileList] = useState<ProfileListResponse | null>(null)
+  const [activeProfileId, setActiveProfileId] = useState('production')
+  const [editingId, setEditingId] = useState<string | null>(null)
+
+  // Edit form state
+  const [name, setName] = useState('')
+  const [apiKey, setApiKey] = useState('')
+  const [baseUrl, setBaseUrl] = useState('')
+  const [dataspacePageId, setDataspacePageId] = useState('')
+  const [saved, setSaved] = useState(false)
+
+  const loadProfiles = async () => {
+    const data = await window.worker.listProfiles() as ProfileListResponse
+    setProfileList(data)
+    setActiveProfileId(data.activeProfile)
+  }
+
+  useEffect(() => {
+    if (open) {
+      loadProfiles()
+      setEditingId(null)
+      setSaved(false)
+    }
+  }, [open])
+
+  const startEditing = (profile: ProfileSummary) => {
+    setEditingId(profile.id)
+    setName(profile.name)
+    setApiKey('')
+    setBaseUrl(profile.baseUrl)
+    setDataspacePageId(profile.dataspacePageId || '')
+    setSaved(false)
+  }
+
+  const startNewProfile = () => {
+    const id = `custom_${Date.now()}`
+    setEditingId(id)
+    setName('')
+    setApiKey('')
+    setBaseUrl('http://localhost:8000')
+    setDataspacePageId('')
+    setSaved(false)
+  }
+
+  const handleSave = async () => {
+    if (!editingId || !name.trim()) return
+
+    const data: { name: string; apiKey?: string; baseUrl: string; dataspacePageId: string } = {
+      name: name.trim(),
+      baseUrl: baseUrl.trim() || 'https://app.ctlsurf.com',
+      dataspacePageId: dataspacePageId.trim(),
+    }
+    // Only send apiKey if user typed something new
+    if (apiKey.trim()) {
+      data.apiKey = apiKey.trim()
+    }
+
+    await window.worker.saveProfile(editingId, data)
+    setSaved(true)
+    setTimeout(async () => {
+      setSaved(false)
+      setEditingId(null)
+      await loadProfiles()
+    }, 600)
+  }
+
+  const handleSwitch = async (profileId: string) => {
+    await window.worker.switchProfile(profileId)
+    setActiveProfileId(profileId)
+    await loadProfiles()
+  }
+
+  const handleDelete = async (profileId: string) => {
+    await window.worker.deleteProfile(profileId)
+    await loadProfiles()
+    setEditingId(null)
+  }
+
+  if (!open) return null
+
+  const profiles = profileList?.profiles || []
+
+  return (
+    <div className="settings-overlay" onClick={onClose}>
+      <div className="settings-dialog" onClick={e => e.stopPropagation()}>
+        <h3>Settings</h3>
+
+        {editingId ? (
+          // ─── Profile Edit Form ─────────────────
+          <div className="settings-section">
+            <h4>{profiles.find(p => p.id === editingId) ? 'Edit Profile' : 'New Profile'}</h4>
+
+            <label>
+              Profile Name
+              <input
+                type="text"
+                value={name}
+                onChange={e => setName(e.target.value)}
+                placeholder="e.g. Local Dev"
+              />
+            </label>
+
+            <label>
+              Base URL
+              <input
+                type="text"
+                value={baseUrl}
+                onChange={e => setBaseUrl(e.target.value)}
+                placeholder="https://app.ctlsurf.com"
+              />
+              <span className="settings-hint">
+                Use http://localhost:8000 for local development.
+              </span>
+            </label>
+
+            <label>
+              API Key
+              <input
+                type="password"
+                value={apiKey}
+                onChange={e => setApiKey(e.target.value)}
+                placeholder={profiles.find(p => p.id === editingId)?.hasApiKey ? '***configured*** (leave blank to keep)' : 'cpk_...'}
+              />
+            </label>
+
+            <label>
+              Dataspace Page ID
+              <input
+                type="text"
+                value={dataspacePageId}
+                onChange={e => setDataspacePageId(e.target.value)}
+                placeholder="UUID (optional)"
+              />
+            </label>
+
+            <div className="settings-actions">
+              <button className="btn-secondary" onClick={() => setEditingId(null)}>Back</button>
+              <button className="btn-primary" onClick={handleSave}>
+                {saved ? 'Saved!' : 'Save'}
+              </button>
+            </div>
+          </div>
+        ) : (
+          // ─── Profile List ──────────────────────
+          <div className="settings-section">
+            <h4>Profiles</h4>
+            <p className="settings-hint">
+              Switch between production and custom environments.
+            </p>
+
+            <div className="profile-list">
+              {profiles.map(p => (
+                <div
+                  key={p.id}
+                  className={`profile-item ${p.id === activeProfileId ? 'active' : ''}`}
+                >
+                  <div className="profile-info" onClick={() => handleSwitch(p.id)}>
+                    <span className={`profile-dot ${p.id === activeProfileId ? 'active' : ''}`} />
+                    <div>
+                      <div className="profile-name">{p.name}</div>
+                      <div className="profile-url">{p.baseUrl}</div>
+                    </div>
+                  </div>
+                  <div className="profile-actions">
+                    <button className="btn-ghost" onClick={() => startEditing(p)}>Edit</button>
+                    {p.id !== 'production' && (
+                      <button className="btn-ghost btn-danger" onClick={() => handleDelete(p.id)}>×</button>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            <div className="settings-actions">
+              <button className="btn-secondary" onClick={startNewProfile}>+ New Profile</button>
+              <button className="btn-secondary" onClick={onClose}>Close</button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/renderer/components/SplitPane.tsx

@@ -0,0 +1,82 @@
+import { useState, useRef, useCallback, useEffect } from 'react'
+
+interface SplitPaneProps {
+  left: React.ReactNode
+  right: React.ReactNode
+  initialSplit?: number // 0-100 percentage for left panel
+  minLeft?: number      // minimum % for left
+  minRight?: number     // minimum % for right
+  onResize?: () => void
+}
+
+export function SplitPane({
+  left,
+  right,
+  initialSplit = 50,
+  minLeft = 20,
+  minRight = 20,
+  onResize
+}: SplitPaneProps) {
+  const [split, setSplit] = useState(initialSplit)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const dragging = useRef(false)
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault()
+    dragging.current = true
+    document.body.style.cursor = 'col-resize'
+    document.body.style.userSelect = 'none'
+  }, [])
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!dragging.current || !containerRef.current) return
+      const rect = containerRef.current.getBoundingClientRect()
+      const pct = ((e.clientX - rect.left) / rect.width) * 100
+      const clamped = Math.max(minLeft, Math.min(100 - minRight, pct))
+      setSplit(clamped)
+      onResize?.()
+    }
+
+    const handleMouseUp = () => {
+      if (dragging.current) {
+        dragging.current = false
+        document.body.style.cursor = ''
+        document.body.style.userSelect = ''
+        onResize?.()
+      }
+    }
+
+    window.addEventListener('mousemove', handleMouseMove)
+    window.addEventListener('mouseup', handleMouseUp)
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove)
+      window.removeEventListener('mouseup', handleMouseUp)
+    }
+  }, [minLeft, minRight, onResize])
+
+  return (
+    <div className="split-pane" ref={containerRef}>
+      <div className="split-pane-left" style={{ width: `${split}%` }}>
+        {left}
+      </div>
+      <div
+        className="split-pane-divider"
+        onMouseDown={handleMouseDown}
+        onDoubleClick={() => { setSplit(50); onResize?.() }}
+      />
+      <div className="split-pane-right" style={{ width: `${100 - split}%` }}>
+        {right}
+      </div>
+    </div>
+  )
+}
+
+// Expose preset setter for keyboard shortcuts
+export type SplitPreset = 'terminal' | 'balanced' | 'ctlsurf'
+
+export const presetValues: Record<SplitPreset, number> = {
+  terminal: 75,
+  balanced: 50,
+  ctlsurf: 25
+}

package/src/renderer/components/StatusBar.tsx

@@ -0,0 +1,73 @@
+import { useState } from 'react'
+
+interface StatusBarProps {
+  wsStatus: string
+  cwd: string | null
+  onChangeCwd: () => void
+}
+
+export function StatusBar({ wsStatus, cwd, onChangeCwd }: StatusBarProps) {
+  const [creating, setCreating] = useState(false)
+
+  const wsLabel = {
+    disconnected: 'Disconnected',
+    connecting: 'Connecting…',
+    connected: 'Connected',
+    pending_approval: 'Pending Approval',
+  }[wsStatus] || wsStatus
+
+  const wsDotClass = {
+    disconnected: 'inactive',
+    connecting: 'idle',
+    connected: 'active',
+    pending_approval: 'pending',
+    no_project: 'idle',
+  }[wsStatus] || 'inactive'
+
+  const isNoProject = wsStatus === 'no_project'
+
+  const handleCreate = async () => {
+    setCreating(true)
+    try {
+      const result = await window.worker.createProject()
+      if (!result.ok) {
+        console.error('[statusbar] Failed to create project:', result.error)
+      }
+    } catch (err) {
+      console.error('[statusbar] Create project error:', err)
+    } finally {
+      setCreating(false)
+    }
+  }
+
+  // Shorten home directory for display
+  const home = '/Users/' + (cwd?.split('/')[2] || '')
+  const displayPath = cwd?.replace(home, '~') || ''
+
+  return (
+    <div className="statusbar">
+      <div className="statusbar-section">
+        <span className="statusbar-path" onClick={onChangeCwd} title="Click to change directory">
+          {displayPath || 'No directory'}
+        </span>
+      </div>
+      <div className="statusbar-section">
+        <span className={`status-dot ${wsDotClass}`} />
+        {isNoProject ? (
+          <>
+            <span>Not linked to a ctlsurf project</span>
+            <button
+              className="statusbar-btn"
+              onClick={handleCreate}
+              disabled={creating}
+            >
+              {creating ? 'Creating…' : '+ Create Project'}
+            </button>
+          </>
+        ) : (
+          <span>ctlsurf: {wsLabel}</span>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/renderer/components/TerminalPanel.tsx

@@ -0,0 +1,140 @@
+import { useEffect, useRef } from 'react'
+import { Terminal } from '@xterm/xterm'
+import { FitAddon } from '@xterm/addon-fit'
+import { WebLinksAddon } from '@xterm/addon-web-links'
+import '@xterm/xterm/css/xterm.css'
+
+interface AgentConfig {
+  id: string
+  name: string
+  command: string
+  args: string[]
+  description: string
+}
+
+interface TerminalPanelProps {
+  agent: AgentConfig | null
+  onSpawn: (agent: AgentConfig) => Promise<void>
+  onExit: () => void
+}
+
+export function TerminalPanel({ agent, onSpawn, onExit }: TerminalPanelProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const terminalRef = useRef<Terminal | null>(null)
+  const fitAddonRef = useRef<FitAddon | null>(null)
+  const currentAgentRef = useRef<string | null>(null)
+
+  // Initialize terminal once
+  useEffect(() => {
+    if (!containerRef.current || terminalRef.current) return
+
+    const terminal = new Terminal({
+      cursorBlink: true,
+      fontSize: 14,
+      fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', monospace",
+      theme: {
+        background: '#1a1b26',
+        foreground: '#a9b1d6',
+        cursor: '#c0caf5',
+        selectionBackground: '#33467C',
+        black: '#15161e',
+        red: '#f7768e',
+        green: '#9ece6a',
+        yellow: '#e0af68',
+        blue: '#7aa2f7',
+        magenta: '#bb9af7',
+        cyan: '#7dcfff',
+        white: '#a9b1d6',
+        brightBlack: '#414868',
+        brightRed: '#f7768e',
+        brightGreen: '#9ece6a',
+        brightYellow: '#e0af68',
+        brightBlue: '#7aa2f7',
+        brightMagenta: '#bb9af7',
+        brightCyan: '#7dcfff',
+        brightWhite: '#c0caf5'
+      },
+      scrollback: 10000,
+      allowTransparency: false
+    })
+
+    const fitAddon = new FitAddon()
+    terminal.loadAddon(fitAddon)
+    terminal.loadAddon(new WebLinksAddon())
+
+    terminal.open(containerRef.current)
+    fitAddon.fit()
+
+    terminalRef.current = terminal
+    fitAddonRef.current = fitAddon
+
+    // Send keystrokes to pty
+    terminal.onData((data) => {
+      window.worker.writePty(data)
+    })
+
+    // Receive pty output
+    const unsubData = window.worker.onPtyData((data) => {
+      terminal.write(data)
+    })
+
+    // Handle pty exit
+    const unsubExit = window.worker.onPtyExit((code) => {
+      terminal.writeln(`\r\n\x1b[33m[Process exited with code ${code}]\x1b[0m`)
+      onExit()
+    })
+
+    // Resize handling
+    let resizeTimeout: ReturnType<typeof setTimeout>
+    const handleResize = () => {
+      clearTimeout(resizeTimeout)
+      resizeTimeout = setTimeout(() => {
+        if (fitAddonRef.current && terminalRef.current) {
+          fitAddonRef.current.fit()
+          const { cols, rows } = terminalRef.current
+          window.worker.resizePty(cols, rows)
+        }
+      }, 150)
+    }
+
+    window.addEventListener('resize', handleResize)
+    const observer = new ResizeObserver(handleResize)
+    observer.observe(containerRef.current)
+
+    return () => {
+      clearTimeout(resizeTimeout)
+      window.removeEventListener('resize', handleResize)
+      observer.disconnect()
+      unsubData()
+      unsubExit()
+      terminal.dispose()
+      terminalRef.current = null
+      fitAddonRef.current = null
+    }
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Spawn agent when it changes
+  useEffect(() => {
+    if (!agent || !terminalRef.current) return
+    if (currentAgentRef.current === agent.id) return
+
+    currentAgentRef.current = agent.id
+
+    // Clear terminal for new agent
+    terminalRef.current.clear()
+
+    onSpawn(agent).then(() => {
+      // Send initial resize after spawn
+      if (fitAddonRef.current && terminalRef.current) {
+        fitAddonRef.current.fit()
+        const { cols, rows } = terminalRef.current
+        window.worker.resizePty(cols, rows)
+      }
+      terminalRef.current?.focus()
+    })
+  }, [agent, onSpawn])
+
+  return (
+    <div className="terminal-container" ref={containerRef} />
+  )
+}

package/src/renderer/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>ctlsurf-worker</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="./main.tsx"></script>
+</body>
+</html>

package/src/renderer/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './styles.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)