@bytespell/shella 0.2.4 → 0.2.6

package/bundled-plugins/terminal/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@shella/terminal",
+  "private": true,
+  "version": "0.2.6",
+  "type": "module",
+  "main": "server.ts",
+  "shella": {
+    "displayName": "Terminal",
+    "devCommand": "tsx server.ts"
+  },
+  "scripts": {
+    "dev": "tsx server.ts",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@xterm/addon-fit": "^0.10.0",
+    "@xterm/addon-web-links": "^0.11.0",
+    "@xterm/xterm": "^5.5.0",
+    "express": "^5.0.0",
+    "node-pty": "^1.2.0-beta.7",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "ws": "^8.18.0",
+    "zustand": "^5.0.10"
+  },
+  "devDependencies": {
+    "@types/express": "^5.0.0",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@types/ws": "^8.5.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "tsx": "^4.19.0",
+    "typescript": "^5.6.0",
+    "vite": "^6.0.0"
+  }
+}

package/bundled-plugins/terminal/server.ts

@@ -0,0 +1,265 @@
+import express from 'express'
+import { createServer } from 'http'
+import { WebSocketServer, WebSocket } from 'ws'
+import * as pty from 'node-pty'
+import path from 'path'
+import fs from 'fs'
+import { fileURLToPath } from 'url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const app = express()
+const PORT = process.env.PORT
+const INSTANCE_ID = process.env.INSTANCE_ID
+const HOME = process.env.HOME || '/tmp'
+
+// State persistence paths (following XDG spec)
+const XDG_STATE_HOME = process.env.XDG_STATE_HOME || path.join(HOME, '.local', 'state')
+const STATE_DIR = path.join(XDG_STATE_HOME, 'shella', 'plugins', 'terminal')
+const STATE_FILE = INSTANCE_ID ? path.join(STATE_DIR, `${INSTANCE_ID}.json`) : null
+
+interface PersistedState {
+  scrollback: string[]
+  cwd?: string
+}
+
+function loadPersistedState(): PersistedState | null {
+  if (!STATE_FILE) return null
+  try {
+    if (fs.existsSync(STATE_FILE)) {
+      const content = fs.readFileSync(STATE_FILE, 'utf-8')
+      const state = JSON.parse(content) as PersistedState
+      console.log(`[terminal] Loaded persisted state for instance ${INSTANCE_ID}`)
+      return state
+    }
+  } catch (err) {
+    console.error('[terminal] Failed to load persisted state:', err)
+  }
+  return null
+}
+
+function savePersistedState(state: PersistedState): void {
+  if (!STATE_FILE) return
+  try {
+    fs.mkdirSync(STATE_DIR, { recursive: true })
+    fs.writeFileSync(STATE_FILE, JSON.stringify(state), 'utf-8')
+    console.log(`[terminal] Saved state for instance ${INSTANCE_ID}`)
+  } catch (err) {
+    console.error('[terminal] Failed to save state:', err)
+  }
+}
+
+// Check if we're in dev mode (no dist folder)
+const isDev = !fs.existsSync(path.join(__dirname, 'dist', 'index.html'))
+
+// Allow embedding in iframes (for shella-web)
+app.use((_req, res, next) => {
+  res.removeHeader('X-Frame-Options')
+  res.setHeader('Content-Security-Policy', 'frame-ancestors *')
+  next()
+})
+
+app.use(express.json())
+
+// Health check
+app.get('/api/health', (_req, res) => {
+  res.json({ status: 'ok', shell: process.env.SHELL || '/bin/bash' })
+})
+
+async function startServer() {
+  if (isDev) {
+    // Dev mode: use Vite middleware for HMR
+    const { createServer: createViteServer } = await import('vite')
+    const vite = await createViteServer({
+      server: { middlewareMode: true, hmr: { port: Number(PORT) + 1000 } },
+      appType: 'spa',
+    })
+    app.use(vite.middlewares)
+  } else {
+    // Production: serve built files
+    app.use(express.static(path.join(__dirname, 'dist')))
+    app.get('/{*splat}', (_req, res) => {
+      res.sendFile(path.join(__dirname, 'dist', 'index.html'))
+    })
+  }
+
+  const server = createServer(app)
+
+  // PTY is spawned lazily on first client connection with correct size
+  const shell = process.env.SHELL || '/bin/bash'
+  const home = process.env.HOME || '/tmp'
+
+  let ptyProcess: pty.IPty | null = null
+
+  // Track connected clients
+  const clients = new Set<WebSocket>()
+
+  // Load persisted state if available (for daemon recovery)
+  const persistedState = loadPersistedState()
+
+  // Buffer recent output for new clients (scrollback)
+  // Initialize with persisted scrollback if recovering
+  const outputBuffer: string[] = persistedState?.scrollback ?? []
+  const MAX_BUFFER_LINES = 1000
+
+  // Track if we have unsaved changes
+  let hasUnsavedChanges = false
+
+  // Chunk size for sending buffered output (256KB - well under iOS's 1MB WebSocket limit)
+  const MAX_MESSAGE_SIZE = 256 * 1024
+
+  function sendChunked(ws: WebSocket, data: string) {
+    for (let i = 0; i < data.length; i += MAX_MESSAGE_SIZE) {
+      const chunk = data.slice(i, i + MAX_MESSAGE_SIZE)
+      ws.send(JSON.stringify({ type: 'output', data: chunk }))
+    }
+  }
+
+  // Broadcast master resize to all connected clients
+  function broadcastMasterResize(cols: number, rows: number) {
+    const message = JSON.stringify({ type: 'master_resize', cols, rows })
+    for (const client of clients) {
+      if (client.readyState === WebSocket.OPEN) {
+        client.send(message)
+      }
+    }
+  }
+
+  function spawnPty(cols: number, rows: number) {
+    if (ptyProcess) return // Already spawned
+
+    ptyProcess = pty.spawn(shell, [], {
+      name: 'xterm-256color',
+      cols,
+      rows,
+      cwd: home,
+      env: {
+        ...process.env as Record<string, string>,
+        // Suppress zsh's partial line marker (%) on fresh terminal
+        PROMPT_EOL_MARK: '',
+      },
+    })
+
+    console.log(`[terminal] PTY spawned: pid=${ptyProcess.pid}, shell=${shell}, size=${cols}x${rows}`)
+
+    // PTY -> all connected clients
+    ptyProcess.onData((data: string) => {
+      // Buffer output for new clients
+      outputBuffer.push(data)
+      if (outputBuffer.length > MAX_BUFFER_LINES) {
+        outputBuffer.shift()
+      }
+      hasUnsavedChanges = true
+
+      // Broadcast to all connected clients
+      const message = JSON.stringify({ type: 'output', data })
+      for (const client of clients) {
+        if (client.readyState === WebSocket.OPEN) {
+          client.send(message)
+        }
+      }
+    })
+
+    ptyProcess.onExit(({ exitCode, signal }) => {
+      console.log(`[terminal] PTY exited: code=${exitCode}, signal=${signal}`)
+      const message = JSON.stringify({ type: 'exit', exitCode, signal })
+      for (const client of clients) {
+        if (client.readyState === WebSocket.OPEN) {
+          client.send(message)
+          client.close()
+        }
+      }
+      // PTY died, shut down the instance
+      process.exit(exitCode ?? 0)
+    })
+  }
+
+  // WebSocket server for client connections
+  const wss = new WebSocketServer({ server, path: '/ws' })
+
+  wss.on('connection', (ws: WebSocket) => {
+    clients.add(ws)
+
+    // Send current master size if PTY exists
+    if (ptyProcess) {
+      ws.send(JSON.stringify({
+        type: 'master_resize',
+        cols: ptyProcess.cols,
+        rows: ptyProcess.rows
+      }))
+    }
+
+    // Send buffered output to new client so they see history
+    // This works for both active PTY output AND recovered scrollback from previous session
+    // Use chunked sending to avoid exceeding iOS's 1MB WebSocket message limit
+    if (outputBuffer.length > 0) {
+      sendChunked(ws, outputBuffer.join(''))
+    }
+
+    // Client -> PTY
+    ws.on('message', (message: Buffer) => {
+      try {
+        const msg = JSON.parse(message.toString())
+
+        switch (msg.type) {
+          case 'input':
+            // Only forward input - no resize from input messages
+            ptyProcess?.write(msg.data)
+            break
+          case 'resize':
+            if (msg.cols && msg.rows) {
+              if (!ptyProcess) {
+                // First resize spawns the PTY with correct size
+                spawnPty(msg.cols, msg.rows)
+                // Broadcast the initial master size to all clients (including the one that just connected)
+                broadcastMasterResize(msg.cols, msg.rows)
+              } else {
+                ptyProcess.resize(msg.cols, msg.rows)
+                // Broadcast the new master size to all clients
+                broadcastMasterResize(msg.cols, msg.rows)
+              }
+            }
+            break
+        }
+      } catch (err) {
+        console.error('[terminal] Invalid message:', err)
+      }
+    })
+
+    ws.on('close', () => {
+      clients.delete(ws)
+    })
+
+    ws.on('error', (err) => {
+      console.error('[terminal] WebSocket error:', err)
+      clients.delete(ws)
+    })
+  })
+
+  server.listen(PORT, () => {
+    console.log(`[terminal] Running on port ${PORT}${isDev ? ' (dev mode with HMR)' : ''}`)
+    if (persistedState) {
+      console.log(`[terminal] Restored ${persistedState.scrollback.length} lines of scrollback`)
+    }
+  })
+
+  // Periodic save (every 30 seconds if there are changes)
+  const saveInterval = setInterval(() => {
+    if (hasUnsavedChanges) {
+      savePersistedState({ scrollback: outputBuffer })
+      hasUnsavedChanges = false
+    }
+  }, 30000)
+
+  // Graceful shutdown - save state and kill PTY when instance stops
+  process.on('SIGTERM', () => {
+    console.log('[terminal] SIGTERM received, shutting down')
+    clearInterval(saveInterval)
+    // Save final state before exiting
+    savePersistedState({ scrollback: outputBuffer })
+    ptyProcess?.kill()
+    wss.clients.forEach((client) => client.close())
+    server.close(() => process.exit(0))
+  })
+}
+
+startServer()

package/bundled-plugins/terminal/src/App.tsx

@@ -0,0 +1,153 @@
+import { useEffect, useRef, useCallback } from 'react'
+import { Terminal } from '@xterm/xterm'
+import { WebLinksAddon } from '@xterm/addon-web-links'
+import { FitAddon } from '@xterm/addon-fit'
+import '@xterm/xterm/css/xterm.css'
+import { useTerminalStore } from './store'
+
+export default function App() {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const terminalRef = useRef<HTMLDivElement>(null)
+  const fitAddonRef = useRef<FitAddon | null>(null)
+  const initialResizeSentRef = useRef(false)
+
+  const { status, connect, setTerminal, sendInput, sendResize } = useTerminalStore()
+
+  // Calculate optimal size for current viewport (used only for initial resize)
+  const calculateOptimalSize = useCallback(() => {
+    const container = containerRef.current
+    const terminal = useTerminalStore.getState().terminal
+    if (!container || !terminal) return null
+
+    const core = (terminal as unknown as { _core?: { _renderService?: { dimensions?: { css?: { cell?: { width: number; height: number } } } } } })._core
+    const cellDims = core?._renderService?.dimensions?.css?.cell
+    if (!cellDims) return null
+
+    const padding = 4
+    const availableWidth = container.clientWidth - padding * 2
+    const availableHeight = container.clientHeight - padding * 2
+
+    const cols = Math.floor(availableWidth / cellDims.width)
+    const rows = Math.floor(availableHeight / cellDims.height)
+
+    if (cols <= 0 || rows <= 0) return null
+    return { cols, rows }
+  }, [])
+
+  // Send initial resize to spawn PTY (only once)
+  const sendInitialResize = useCallback(() => {
+    if (initialResizeSentRef.current) return
+
+    const optimal = calculateOptimalSize()
+    if (!optimal) return
+
+    initialResizeSentRef.current = true
+    sendResize(optimal.cols, optimal.rows)
+  }, [calculateOptimalSize, sendResize])
+
+  // Initialize terminal (once)
+  useEffect(() => {
+    if (!terminalRef.current) return
+
+    // Check if already initialized
+    const existingTerminal = useTerminalStore.getState().terminal
+    if (existingTerminal) return
+
+    const term = new Terminal({
+      cursorBlink: true,
+      fontSize: 14,
+      fontFamily: 'Menlo, Monaco, "Courier New", monospace',
+      theme: {
+        background: '#1a1a1a',
+        foreground: '#e0e0e0',
+        cursor: '#e0e0e0',
+        cursorAccent: '#1a1a1a',
+        selectionBackground: '#4a4a4a',
+        black: '#1a1a1a',
+        red: '#ff5555',
+        green: '#50fa7b',
+        yellow: '#f1fa8c',
+        blue: '#6272a4',
+        magenta: '#ff79c6',
+        cyan: '#8be9fd',
+        white: '#e0e0e0',
+        brightBlack: '#4a4a4a',
+        brightRed: '#ff6e6e',
+        brightGreen: '#69ff94',
+        brightYellow: '#ffffa5',
+        brightBlue: '#d6acff',
+        brightMagenta: '#ff92df',
+        brightCyan: '#a4ffff',
+        brightWhite: '#ffffff',
+      },
+    })
+
+    // Add addons
+    const webLinksAddon = new WebLinksAddon()
+    const fitAddon = new FitAddon()
+    term.loadAddon(webLinksAddon)
+    term.loadAddon(fitAddon)
+    fitAddonRef.current = fitAddon
+
+    // Open terminal
+    term.open(terminalRef.current)
+
+    // Set up input handler
+    term.onData((data) => {
+      sendInput(data)
+    })
+
+    // Store terminal and connect
+    setTerminal(term)
+    connect()
+
+    // Initial resize after a tick (to let xterm measure)
+    setTimeout(() => {
+      sendInitialResize()
+    }, 50)
+
+    // No cleanup - terminal persists in store
+  }, [connect, setTerminal, sendInput, sendInitialResize])
+
+  return (
+    <div
+      ref={containerRef}
+      style={{
+        width: '100%',
+        height: '100%',
+        backgroundColor: '#1a1a1a',
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+        position: 'relative',
+      }}
+    >
+      {status !== 'connected' && (
+        <div
+          style={{
+            padding: '8px 12px',
+            backgroundColor: status === 'error' ? '#ff5555' : '#4a4a4a',
+            color: '#fff',
+            fontSize: '12px',
+          }}
+        >
+          {status === 'connecting' && 'Connecting...'}
+          {status === 'disconnected' && 'Disconnected'}
+          {status === 'error' && 'Connection error'}
+        </div>
+      )}
+      <div
+        style={{
+          flex: 1,
+          display: 'flex',
+          alignItems: 'flex-start',
+          justifyContent: 'flex-start',
+          padding: '4px',
+          overflow: 'hidden',
+        }}
+      >
+        <div ref={terminalRef} />
+      </div>
+    </div>
+  )
+}