@phenx-inc/ctlsurf 0.1.0

package/src/preload/index.ts

@@ -0,0 +1,114 @@
+import { contextBridge, ipcRenderer } from 'electron'
+
+export interface AgentConfig {
+  id: string
+  name: string
+  command: string
+  args: string[]
+  description: string
+}
+
+const api = {
+  // Pty operations
+  spawnAgent: (agent: AgentConfig, cwd: string) =>
+    ipcRenderer.invoke('pty:spawn', agent, cwd),
+  writePty: (data: string) =>
+    ipcRenderer.invoke('pty:write', data),
+  resizePty: (cols: number, rows: number) =>
+    ipcRenderer.invoke('pty:resize', cols, rows),
+  killPty: () =>
+    ipcRenderer.invoke('pty:kill'),
+
+  // Pty events
+  onPtyData: (callback: (data: string) => void) => {
+    const listener = (_event: Electron.IpcRendererEvent, data: string) => callback(data)
+    ipcRenderer.on('pty:data', listener)
+    return () => ipcRenderer.removeListener('pty:data', listener)
+  },
+  onPtyExit: (callback: (code: number) => void) => {
+    const listener = (_event: Electron.IpcRendererEvent, code: number) => callback(code)
+    ipcRenderer.on('pty:exit', listener)
+    return () => ipcRenderer.removeListener('pty:exit', listener)
+  },
+
+  // Agent management
+  listAgents: (): Promise<AgentConfig[]> =>
+    ipcRenderer.invoke('agents:list'),
+  getDefaultAgent: (): Promise<AgentConfig> =>
+    ipcRenderer.invoke('agents:default'),
+
+  // App info
+  getHomePath: (): Promise<string> =>
+    ipcRenderer.invoke('app:homePath'),
+  getCwd: (): Promise<string> =>
+    ipcRenderer.invoke('app:cwd'),
+  browseCwd: (): Promise<string | null> =>
+    ipcRenderer.invoke('app:browseCwd'),
+
+  // Settings (legacy)
+  getSetting: (key: string): Promise<string | null> =>
+    ipcRenderer.invoke('settings:get', key),
+  setSetting: (key: string, value: string): Promise<{ ok: boolean }> =>
+    ipcRenderer.invoke('settings:set', key, value),
+  getAllSettings: (): Promise<Record<string, string | null>> =>
+    ipcRenderer.invoke('settings:getAll'),
+
+  // Profiles
+  listProfiles: () =>
+    ipcRenderer.invoke('profiles:list'),
+  getProfile: (profileId: string) =>
+    ipcRenderer.invoke('profiles:get', profileId),
+  saveProfile: (profileId: string, data: { name: string; apiKey?: string; baseUrl: string; dataspacePageId: string }) =>
+    ipcRenderer.invoke('profiles:save', profileId, data),
+  switchProfile: (profileId: string) =>
+    ipcRenderer.invoke('profiles:switch', profileId),
+  deleteProfile: (profileId: string) =>
+    ipcRenderer.invoke('profiles:delete', profileId),
+
+  // Filesystem
+  readDir: (dirPath: string): Promise<Array<{ name: string; path: string; isDirectory: boolean }>> =>
+    ipcRenderer.invoke('fs:readDir', dirPath),
+  readFile: (filePath: string): Promise<{ ok: boolean; content?: string; error?: string }> =>
+    ipcRenderer.invoke('fs:readFile', filePath),
+  writeFile: (filePath: string, content: string): Promise<{ ok: boolean; error?: string }> =>
+    ipcRenderer.invoke('fs:writeFile', filePath, content),
+
+  // Worker connection
+  getWorkerStatus: (): Promise<string> =>
+    ipcRenderer.invoke('worker:getStatus'),
+  getWorkerId: (): Promise<string | null> =>
+    ipcRenderer.invoke('worker:getWorkerId'),
+  createProject: (): Promise<{ ok: boolean; folder_id?: string; error?: string }> =>
+    ipcRenderer.invoke('worker:createProject'),
+  getWebviewInfo: (): Promise<{
+    frontendUrl: string;
+    pageUrl?: string;
+    authenticated: boolean;
+  }> => ipcRenderer.invoke('worker:getWebviewInfo'),
+
+  onWorkerStatus: (callback: (status: string) => void) => {
+    const listener = (_event: Electron.IpcRendererEvent, status: string) => callback(status)
+    ipcRenderer.on('worker:status', listener)
+    return () => ipcRenderer.removeListener('worker:status', listener)
+  },
+  onWorkerMessage: (callback: (message: unknown) => void) => {
+    const listener = (_event: Electron.IpcRendererEvent, message: unknown) => callback(message)
+    ipcRenderer.on('worker:message', listener)
+    return () => ipcRenderer.removeListener('worker:message', listener)
+  },
+  onCwdChanged: (callback: () => void) => {
+    const listener = () => callback()
+    ipcRenderer.on('app:cwdChanged', listener)
+    return () => ipcRenderer.removeListener('app:cwdChanged', listener)
+  },
+
+  onWorkerRegistered: (callback: (data: unknown) => void) => {
+    const listener = (_event: Electron.IpcRendererEvent, data: unknown) => callback(data)
+    ipcRenderer.on('worker:registered', listener)
+    return () => ipcRenderer.removeListener('worker:registered', listener)
+  },
+}
+
+contextBridge.exposeInMainWorld('worker', api)
+
+export type WorkerAPI = typeof api

package/src/renderer/App.tsx

@@ -0,0 +1,275 @@
+import { useState, useEffect, useCallback, useRef } from 'react'
+import { TerminalPanel } from './components/TerminalPanel'
+import { CtlsurfPanel } from './components/CtlsurfPanel'
+import { EditorPanel } from './components/EditorPanel'
+import {
+  PaneLayout,
+  type LayoutNode,
+  type PaneContent,
+  removePane,
+  findPaneIds,
+} from './components/PaneLayout'
+import { StatusBar } from './components/StatusBar'
+import { SettingsDialog } from './components/SettingsDialog'
+
+interface AgentConfig {
+  id: string
+  name: string
+  command: string
+  args: string[]
+  description: string
+}
+
+declare global {
+  interface Window {
+    worker: {
+      spawnAgent: (agent: AgentConfig, cwd: string) => Promise<{ ok: boolean }>
+      writePty: (data: string) => Promise<void>
+      resizePty: (cols: number, rows: number) => Promise<void>
+      killPty: () => Promise<void>
+      onPtyData: (callback: (data: string) => void) => () => void
+      onPtyExit: (callback: (code: number) => void) => () => void
+      listAgents: () => Promise<AgentConfig[]>
+      getDefaultAgent: () => Promise<AgentConfig>
+      getHomePath: () => Promise<string>
+      getCwd: () => Promise<string>
+      browseCwd: () => Promise<string | null>
+      getSetting: (key: string) => Promise<string | null>
+      setSetting: (key: string, value: string) => Promise<{ ok: boolean }>
+      getAllSettings: () => Promise<Record<string, string | null>>
+      listProfiles: () => Promise<unknown>
+      getProfile: (profileId: string) => Promise<unknown>
+      saveProfile: (profileId: string, data: { name: string; apiKey?: string; baseUrl: string; dataspacePageId: string }) => Promise<{ ok: boolean }>
+      switchProfile: (profileId: string) => Promise<{ ok: boolean }>
+      deleteProfile: (profileId: string) => Promise<{ ok: boolean }>
+      createProject: () => Promise<{ ok: boolean; folder_id?: string; error?: string }>
+      getWebviewInfo: () => Promise<{
+        frontendUrl: string; pageUrl?: string; authenticated: boolean;
+      }>
+      getWorkerStatus: () => Promise<string>
+      getWorkerId: () => Promise<string | null>
+      onWorkerStatus: (callback: (status: string) => void) => () => void
+      onWorkerMessage: (callback: (message: unknown) => void) => () => void
+      onCwdChanged: (callback: () => void) => () => void
+      onWorkerRegistered: (callback: (data: unknown) => void) => () => void
+      readDir: (dirPath: string) => Promise<Array<{ name: string; path: string; isDirectory: boolean }>>
+      readFile: (filePath: string) => Promise<{ ok: boolean; content?: string; error?: string }>
+      writeFile: (filePath: string, content: string) => Promise<{ ok: boolean; error?: string }>
+    }
+  }
+}
+
+const DEFAULT_LAYOUT: LayoutNode = {
+  type: 'split',
+  direction: 'horizontal',
+  children: [
+    { type: 'leaf', paneId: 'editor' },
+    { type: 'leaf', paneId: 'terminal' },
+    { type: 'leaf', paneId: 'ctlsurf' },
+  ],
+  sizes: [33.33, 33.33, 33.34],
+}
+
+const ALL_PANE_IDS = ['editor', 'terminal', 'ctlsurf']
+
+export default function App() {
+  const [agents, setAgents] = useState<AgentConfig[]>([])
+  const [selectedAgent, setSelectedAgent] = useState<AgentConfig | null>(null)
+  const [agentStatus, setAgentStatus] = useState<'idle' | 'active' | 'exited'>('idle')
+  const [sessionStart, setSessionStart] = useState<Date | null>(null)
+  const [layout, setLayout] = useState<LayoutNode>(DEFAULT_LAYOUT)
+  const [hiddenPanes, setHiddenPanes] = useState<Set<string>>(new Set())
+  const [showSettings, setShowSettings] = useState(false)
+  const [wsStatus, setWsStatus] = useState('disconnected')
+  const [cwd, setCwd] = useState<string | null>(null)
+
+  // Track which panes are in the layout tree
+  const visiblePaneIds = findPaneIds(layout)
+
+  useEffect(() => {
+    async function init() {
+      const list = await window.worker.listAgents()
+      const defaultAgent = await window.worker.getDefaultAgent()
+      setAgents(list)
+      setSelectedAgent(defaultAgent)
+      const status = await window.worker.getWorkerStatus()
+      setWsStatus(status)
+    }
+    init()
+  }, [])
+
+  useEffect(() => {
+    const unsub = window.worker.onWorkerStatus((status) => setWsStatus(status))
+    return unsub
+  }, [])
+
+  useEffect(() => {
+    const unsub = window.worker.onWorkerMessage((message) => {
+      console.log('[worker] Received message:', message)
+    })
+    return unsub
+  }, [])
+
+  const spawnGenRef = useRef(0)
+  const cwdRef = useRef<string | null>(null)
+
+  const handleSpawn = useCallback(async (agent: AgentConfig) => {
+    spawnGenRef.current += 1
+    setAgentStatus('active')
+    setSessionStart(new Date())
+    const spawnCwd = cwdRef.current || await window.worker.getCwd().catch(() => window.worker.getHomePath())
+    setCwd(spawnCwd)
+    cwdRef.current = spawnCwd
+    await window.worker.spawnAgent(agent, spawnCwd)
+  }, [])
+
+  const handleAgentChange = useCallback(async (agentId: string) => {
+    const agent = agents.find(a => a.id === agentId)
+    if (agent) {
+      await window.worker.killPty()
+      setSelectedAgent(agent)
+    }
+  }, [agents])
+
+  const handleExit = useCallback(() => {
+    const gen = spawnGenRef.current
+    setTimeout(() => {
+      if (spawnGenRef.current === gen) setAgentStatus('exited')
+    }, 200)
+  }, [])
+
+  const handleChangeCwd = useCallback(async () => {
+    const newCwd = await window.worker.browseCwd()
+    if (!newCwd || !selectedAgent) return
+    cwdRef.current = newCwd
+    setCwd(newCwd)
+    await window.worker.killPty()
+    spawnGenRef.current += 1
+    setAgentStatus('active')
+    setSessionStart(new Date())
+    await window.worker.spawnAgent(selectedAgent, newCwd)
+  }, [selectedAgent])
+
+  // Toggle pane: hide removes from layout tree, show re-inserts
+  const togglePane = useCallback((id: string) => {
+    if (visiblePaneIds.includes(id)) {
+      // Hide: remove from tree
+      const newLayout = removePane(layout, id)
+      if (newLayout) {
+        setLayout(newLayout)
+      }
+      setHiddenPanes(prev => new Set([...prev, id]))
+    } else {
+      // Show: insert as a new right-side split at the root
+      setHiddenPanes(prev => {
+        const next = new Set(prev)
+        next.delete(id)
+        return next
+      })
+
+      setLayout(prev => {
+        // If only one leaf, create a horizontal split
+        if (prev.type === 'leaf') {
+          return {
+            type: 'split',
+            direction: 'horizontal',
+            children: [prev, { type: 'leaf', paneId: id }],
+            sizes: [50, 50],
+          }
+        }
+        // If it's a horizontal split at root, append
+        if (prev.type === 'split' && prev.direction === 'horizontal') {
+          const count = prev.children.length + 1
+          const equalSize = 100 / count
+          return {
+            ...prev,
+            children: [...prev.children, { type: 'leaf', paneId: id }],
+            sizes: Array(count).fill(equalSize),
+          }
+        }
+        // Otherwise wrap in a horizontal split
+        return {
+          type: 'split',
+          direction: 'horizontal',
+          children: [prev, { type: 'leaf', paneId: id }],
+          sizes: [66, 34],
+        }
+      })
+    }
+  }, [layout, visiblePaneIds])
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.ctrlKey && e.shiftKey) {
+        switch (e.key) {
+          case 'E': e.preventDefault(); togglePane('editor'); break
+          case 'T': e.preventDefault(); togglePane('terminal'); break
+          case 'P': e.preventDefault(); togglePane('ctlsurf'); break
+        }
+      }
+    }
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [togglePane])
+
+  // Build pane contents (always rendered, layout controls visibility)
+  const panes: PaneContent[] = [
+    { id: 'editor', label: 'Editor', content: <EditorPanel cwd={cwd} /> },
+    {
+      id: 'terminal',
+      label: 'Terminal',
+      content: <TerminalPanel agent={selectedAgent} onSpawn={handleSpawn} onExit={handleExit} />,
+    },
+    { id: 'ctlsurf', label: 'ctlsurf', content: <CtlsurfPanel /> },
+  ]
+
+  return (
+    <div className="app">
+      <div className="titlebar">
+        <span className="titlebar-title">ctlsurf-worker</span>
+        <div className="titlebar-controls">
+          <button className="titlebar-btn" onClick={() => setShowSettings(true)} title="Settings">
+            Settings
+          </button>
+          {ALL_PANE_IDS.map(id => (
+            <button
+              key={id}
+              className={`titlebar-btn ${visiblePaneIds.includes(id) ? 'active' : ''}`}
+              onClick={() => togglePane(id)}
+              title={`Toggle ${id}`}
+            >
+              {id === 'editor' ? 'Editor' : id === 'terminal' ? 'Terminal' : 'ctlsurf'}
+            </button>
+          ))}
+          <select
+            value={selectedAgent?.id || ''}
+            onChange={(e) => handleAgentChange(e.target.value)}
+          >
+            {agents.map(a => (
+              <option key={a.id} value={a.id}>{a.name}</option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      <div className="main-content">
+        {visiblePaneIds.length === 0 ? (
+          <div className="multi-split-empty">
+            <span>All panes hidden. Use the titlebar buttons to show a pane.</span>
+          </div>
+        ) : (
+          <PaneLayout
+            layout={layout}
+            panes={panes.filter(p => visiblePaneIds.includes(p.id))}
+            onLayoutChange={setLayout}
+            onToggle={togglePane}
+          />
+        )}
+      </div>
+
+      <StatusBar wsStatus={wsStatus} cwd={cwd} onChangeCwd={handleChangeCwd} />
+      <SettingsDialog open={showSettings} onClose={() => setShowSettings(false)} />
+    </div>
+  )
+}

package/src/renderer/components/CtlsurfPanel.tsx

@@ -0,0 +1,49 @@
+import { useRef, useEffect, useState } from 'react'
+
+export function CtlsurfPanel() {
+  const webviewRef = useRef<HTMLWebViewElement>(null)
+  const [url, setUrl] = useState<string | null>(null)
+  const [key, setKey] = useState(0) // force remount on cwd change
+
+  const loadUrl = async () => {
+    try {
+      const info = await window.worker.getWebviewInfo()
+      setUrl(info.pageUrl || info.frontendUrl)
+    } catch (err) {
+      console.error('[ctlsurf] Failed to get webview info:', err)
+      setUrl('https://app.ctlsurf.com')
+    }
+  }
+
+  useEffect(() => { loadUrl() }, [])
+
+  // Reload webview when cwd changes
+  useEffect(() => {
+    const unsub = window.worker.onCwdChanged(() => {
+      setUrl(null)
+      setKey(k => k + 1)
+      loadUrl()
+    })
+    return unsub
+  }, [])
+
+  if (!url) {
+    return (
+      <div className="ctlsurf-panel" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <span style={{ color: '#565f89', fontSize: '13px' }}>Loading ctlsurf...</span>
+      </div>
+    )
+  }
+
+  return (
+    <div className="ctlsurf-panel">
+      <webview
+        key={key}
+        ref={webviewRef as any}
+        src={url}
+        style={{ width: '100%', height: '100%' }}
+        allowpopups={'true' as any}
+      />
+    </div>
+  )
+}

package/src/renderer/components/EditorPanel.tsx

@@ -0,0 +1,232 @@
+import { useState, useEffect, useCallback, useRef } from 'react'
+import Editor, { loader } from '@monaco-editor/react'
+import * as monaco from 'monaco-editor'
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
+import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
+import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
+
+// Configure Monaco workers for Vite
+self.MonacoEnvironment = {
+  getWorker(_, label) {
+    if (label === 'json') return new jsonWorker()
+    if (label === 'css' || label === 'scss' || label === 'less') return new cssWorker()
+    if (label === 'html' || label === 'handlebars' || label === 'razor') return new htmlWorker()
+    if (label === 'typescript' || label === 'javascript') return new tsWorker()
+    return new editorWorker()
+  },
+}
+
+// Use local monaco instead of CDN
+loader.config({ monaco })
+
+interface FileEntry {
+  name: string
+  path: string
+  isDirectory: boolean
+}
+
+interface TreeNodeProps {
+  entry: FileEntry
+  depth: number
+  selectedPath: string | null
+  onSelect: (path: string) => void
+}
+
+function TreeNode({ entry, depth, selectedPath, onSelect }: TreeNodeProps) {
+  const [expanded, setExpanded] = useState(false)
+  const [children, setChildren] = useState<FileEntry[]>([])
+  const [loaded, setLoaded] = useState(false)
+
+  const toggle = async () => {
+    if (!entry.isDirectory) {
+      onSelect(entry.path)
+      return
+    }
+    if (!loaded) {
+      const entries = await window.worker.readDir(entry.path)
+      setChildren(entries)
+      setLoaded(true)
+    }
+    setExpanded(!expanded)
+  }
+
+  const isSelected = entry.path === selectedPath
+
+  return (
+    <div>
+      <div
+        className={`tree-node ${isSelected ? 'selected' : ''}`}
+        style={{ paddingLeft: `${depth * 16 + 8}px` }}
+        onClick={toggle}
+      >
+        {entry.isDirectory ? (
+          <span className="tree-icon">{expanded ? '\u25BE' : '\u25B8'}</span>
+        ) : (
+          <span className="tree-icon tree-file-icon">&nbsp;</span>
+        )}
+        <span className="tree-label">{entry.name}</span>
+      </div>
+      {expanded && children.map(child => (
+        <TreeNode
+          key={child.path}
+          entry={child}
+          depth={depth + 1}
+          selectedPath={selectedPath}
+          onSelect={onSelect}
+        />
+      ))}
+    </div>
+  )
+}
+
+interface EditorPanelProps {
+  cwd: string | null
+}
+
+export function EditorPanel({ cwd }: EditorPanelProps) {
+  const [rootEntries, setRootEntries] = useState<FileEntry[]>([])
+  const [openFile, setOpenFile] = useState<string | null>(null)
+  const [fileContent, setFileContent] = useState<string>('')
+  const [modified, setModified] = useState(false)
+  const [treePanelWidth, setTreePanelWidth] = useState(220)
+  const dragging = useRef(false)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  // Load root directory
+  useEffect(() => {
+    if (!cwd) return
+    window.worker.readDir(cwd).then(setRootEntries)
+  }, [cwd])
+
+  const handleFileSelect = useCallback(async (filePath: string) => {
+    const result = await window.worker.readFile(filePath)
+    if (result.ok && result.content !== undefined) {
+      setOpenFile(filePath)
+      setFileContent(result.content)
+      setModified(false)
+    }
+  }, [])
+
+  const handleSave = useCallback(async () => {
+    if (!openFile) return
+    const result = await window.worker.writeFile(openFile, fileContent)
+    if (result.ok) setModified(false)
+  }, [openFile, fileContent])
+
+  // Ctrl+S to save
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 's') {
+        // Only handle if focus is within our panel
+        if (containerRef.current?.contains(document.activeElement)) {
+          e.preventDefault()
+          handleSave()
+        }
+      }
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [handleSave])
+
+  // Tree panel resize
+  const handleDividerDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault()
+    dragging.current = true
+    document.body.style.cursor = 'col-resize'
+    document.body.style.userSelect = 'none'
+  }, [])
+
+  useEffect(() => {
+    const onMove = (e: MouseEvent) => {
+      if (!dragging.current || !containerRef.current) return
+      const rect = containerRef.current.getBoundingClientRect()
+      const newWidth = Math.max(120, Math.min(400, e.clientX - rect.left))
+      setTreePanelWidth(newWidth)
+    }
+    const onUp = () => {
+      if (dragging.current) {
+        dragging.current = false
+        document.body.style.cursor = ''
+        document.body.style.userSelect = ''
+      }
+    }
+    window.addEventListener('mousemove', onMove)
+    window.addEventListener('mouseup', onUp)
+    return () => {
+      window.removeEventListener('mousemove', onMove)
+      window.removeEventListener('mouseup', onUp)
+    }
+  }, [])
+
+  const fileName = openFile?.split('/').pop() || ''
+
+  // Infer language from file extension
+  const getLanguage = (path: string): string => {
+    const ext = path.split('.').pop()?.toLowerCase() || ''
+    const map: Record<string, string> = {
+      ts: 'typescript', tsx: 'typescriptreact', js: 'javascript', jsx: 'javascriptreact',
+      json: 'json', html: 'html', css: 'css', scss: 'scss', less: 'less',
+      md: 'markdown', py: 'python', rs: 'rust', go: 'go', java: 'java',
+      yaml: 'yaml', yml: 'yaml', toml: 'toml', sh: 'shell', bash: 'shell',
+      sql: 'sql', xml: 'xml', svg: 'xml', c: 'c', cpp: 'cpp', h: 'c',
+    }
+    return map[ext] || 'plaintext'
+  }
+
+  return (
+    <div className="editor-panel" ref={containerRef}>
+      <div className="editor-tree" style={{ width: `${treePanelWidth}px` }}>
+        <div className="editor-tree-header">FILES</div>
+        <div className="editor-tree-content">
+          {rootEntries.map(entry => (
+            <TreeNode
+              key={entry.path}
+              entry={entry}
+              depth={0}
+              selectedPath={openFile}
+              onSelect={handleFileSelect}
+            />
+          ))}
+        </div>
+      </div>
+      <div className="editor-tree-divider" onMouseDown={handleDividerDown} />
+      <div className="editor-main">
+        {openFile ? (
+          <>
+            <div className="editor-tab-bar">
+              <span className="editor-tab active">
+                {fileName}{modified ? ' *' : ''}
+              </span>
+              {modified && (
+                <button className="editor-save-btn" onClick={handleSave}>Save</button>
+              )}
+            </div>
+            <div className="editor-monaco-container">
+              <Editor
+                language={getLanguage(openFile)}
+                value={fileContent}
+                onChange={(val) => { setFileContent(val || ''); setModified(true) }}
+                theme="vs-dark"
+                options={{
+                  minimap: { enabled: false },
+                  fontSize: 13,
+                  fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace",
+                  scrollBeyondLastLine: false,
+                  automaticLayout: true,
+                  tabSize: 2,
+                  wordWrap: 'on',
+                }}
+              />
+            </div>
+          </>
+        ) : (
+          <div className="editor-placeholder">
+            <span>Select a file to edit</span>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}