@bytespell/shella 0.1.18 → 0.2.1

package/bundled-plugins/terminal/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@shella/terminal",
+  "private": true,
+  "version": "0.2.1",
+  "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"
+  },
+  "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,169 @@
+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
+
+// 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('*', (_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>()
+
+  // Buffer recent output for new clients (scrollback)
+  const outputBuffer: string[] = []
+  const MAX_BUFFER_LINES = 1000
+
+  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()
+      }
+
+      // 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 buffered output to new client so they see history (if PTY already running)
+    if (ptyProcess && outputBuffer.length > 0) {
+      ws.send(JSON.stringify({ type: 'output', data: outputBuffer.join('') }))
+    }
+
+    // Client -> PTY
+    ws.on('message', (message: Buffer) => {
+      try {
+        const msg = JSON.parse(message.toString())
+
+        switch (msg.type) {
+          case 'input':
+            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)
+              } else {
+                ptyProcess.resize(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)' : ''}`)
+  })
+
+  // Graceful shutdown - kill PTY when instance stops
+  process.on('SIGTERM', () => {
+    console.log('[terminal] SIGTERM received, shutting down')
+    ptyProcess?.kill()
+    wss.clients.forEach((client) => client.close())
+    server.close(() => process.exit(0))
+  })
+}
+
+startServer()

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

@@ -0,0 +1,168 @@
+import { useEffect, useRef, useState } 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'
+
+type ConnectionStatus = 'connecting' | 'connected' | 'disconnected' | 'error'
+
+export default function App() {
+  const terminalRef = useRef<HTMLDivElement>(null)
+  const termRef = useRef<Terminal | null>(null)
+  const wsRef = useRef<WebSocket | null>(null)
+  const fitAddonRef = useRef<FitAddon | null>(null)
+  const [status, setStatus] = useState<ConnectionStatus>('connecting')
+
+  useEffect(() => {
+    if (!terminalRef.current) return
+
+    // Create terminal
+    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 fitAddon = new FitAddon()
+    const webLinksAddon = new WebLinksAddon()
+    term.loadAddon(fitAddon)
+    term.loadAddon(webLinksAddon)
+
+    // Open terminal in container
+    term.open(terminalRef.current)
+    fitAddon.fit()
+
+    termRef.current = term
+    fitAddonRef.current = fitAddon
+
+    // Connect WebSocket
+    const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
+    const ws = new WebSocket(`${wsProtocol}//${window.location.host}/ws`)
+    wsRef.current = ws
+
+    ws.onopen = () => {
+      setStatus('connected')
+      // Send initial size
+      const dims = fitAddon.proposeDimensions()
+      if (dims) {
+        ws.send(JSON.stringify({ type: 'resize', cols: dims.cols, rows: dims.rows }))
+      }
+    }
+
+    ws.onmessage = (event) => {
+      try {
+        const msg = JSON.parse(event.data)
+        switch (msg.type) {
+          case 'output':
+            term.write(msg.data)
+            break
+          case 'exit':
+            term.write(`\r\n\x1b[31m[Process exited with code ${msg.exitCode}]\x1b[0m\r\n`)
+            setStatus('disconnected')
+            break
+        }
+      } catch {
+        // Raw data fallback
+        term.write(event.data)
+      }
+    }
+
+    ws.onerror = () => {
+      setStatus('error')
+    }
+
+    ws.onclose = () => {
+      if (status !== 'error') {
+        setStatus('disconnected')
+      }
+    }
+
+    // Terminal input -> WebSocket
+    term.onData((data) => {
+      if (ws.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify({ type: 'input', data }))
+      }
+    })
+
+    // Handle resize
+    const handleResize = () => {
+      fitAddon.fit()
+      const dims = fitAddon.proposeDimensions()
+      if (dims && ws.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify({ type: 'resize', cols: dims.cols, rows: dims.rows }))
+      }
+    }
+
+    window.addEventListener('resize', handleResize)
+
+    // Also observe container size changes (for panel resizes)
+    const resizeObserver = new ResizeObserver(handleResize)
+    resizeObserver.observe(terminalRef.current)
+
+    // Cleanup
+    return () => {
+      window.removeEventListener('resize', handleResize)
+      resizeObserver.disconnect()
+      ws.close()
+      term.dispose()
+    }
+  }, [])
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        backgroundColor: '#1a1a1a',
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      {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
+        ref={terminalRef}
+        style={{
+          flex: 1,
+          padding: '4px',
+        }}
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,9 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+)

package/bundled-plugins/terminal/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "esModuleInterop": true
+  },
+  "include": ["src", "server.ts"]
+}

package/bundled-plugins/terminal/vite.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    outDir: 'dist',
+    emptyDirBeforeWrite: true,
+  },
+})

package/dist/bin/shella-daemon.d.ts

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+export {};
+//# sourceMappingURL=shella-daemon.d.ts.map

package/dist/bin/shella-daemon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shella-daemon.d.ts","sourceRoot":"","sources":["../../bin/shella-daemon.ts"],"names":[],"mappings":""}

package/dist/bin/shella-daemon.js

@@ -0,0 +1,8 @@
+#!/usr/bin/env node
+import { start } from '../src/index.js';
+start().catch((err) => {
+    // eslint-disable-next-line no-console
+    console.error('Failed to start daemon:', err);
+    process.exit(1);
+});
+//# sourceMappingURL=shella-daemon.js.map

package/dist/bin/shella-daemon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shella-daemon.js","sourceRoot":"","sources":["../../bin/shella-daemon.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAExC,KAAK,EAAE,CAAC,KAAK,CAAC,CAAC,GAAY,EAAE,EAAE;IAC7B,sCAAsC;IACtC,OAAO,CAAC,KAAK,CAAC,yBAAyB,EAAE,GAAG,CAAC,CAAC;IAC9C,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AAClB,CAAC,CAAC,CAAC"}

package/dist/bin/shella-init.d.ts

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+export {};
+//# sourceMappingURL=shella-init.d.ts.map

package/dist/bin/shella-init.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shella-init.d.ts","sourceRoot":"","sources":["../../bin/shella-init.ts"],"names":[],"mappings":""}

package/dist/bin/shella-init.js

@@ -0,0 +1,234 @@
+#!/usr/bin/env node
+import * as fs from 'node:fs/promises';
+import * as path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import * as clack from '@clack/prompts';
+import { PLUGINS_DIR } from '../src/paths.js';
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+// Templates are at apps/daemon/templates (one level up from bin/)
+const TEMPLATES_DIR = path.join(__dirname, '..', 'templates');
+const TEMPLATES = [
+    { name: 'express', description: 'Express server with static file serving', needsInstall: false },
+    { name: 'vanilla', description: 'Basic Node.js http server (no dependencies)', needsInstall: false },
+    { name: 'shadcn', description: 'Vite + React + shadcn/ui', needsInstall: true },
+];
+async function copyDir(src, dest) {
+    const entries = await fs.readdir(src, { withFileTypes: true });
+    for (const entry of entries) {
+        const srcPath = path.join(src, entry.name);
+        const destPath = path.join(dest, entry.name);
+        if (entry.isDirectory()) {
+            await fs.mkdir(destPath, { recursive: true });
+            await copyDir(srcPath, destPath);
+        }
+        else {
+            await fs.copyFile(srcPath, destPath);
+        }
+    }
+}
+async function copyTemplate(templateName, pluginDir) {
+    const templateDir = path.join(TEMPLATES_DIR, templateName);
+    try {
+        await fs.access(templateDir);
+    }
+    catch {
+        throw new Error(`Template "${templateName}" not found`);
+    }
+    await fs.mkdir(pluginDir, { recursive: true });
+    await copyDir(templateDir, pluginDir);
+}
+async function updatePackageJson(pluginDir, pluginName) {
+    const packageJsonPath = path.join(pluginDir, 'package.json');
+    try {
+        const content = await fs.readFile(packageJsonPath, 'utf-8');
+        const pkg = JSON.parse(content);
+        pkg.name = pluginName;
+        pkg.shella = pkg.shella || {};
+        // Convert plugin-name to Title Case for display
+        const displayName = pluginName
+            .split('-')
+            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+            .join(' ');
+        pkg.shella.displayName = displayName;
+        await fs.writeFile(packageJsonPath, JSON.stringify(pkg, null, 2) + '\n');
+    }
+    catch {
+        // package.json might not exist yet for some templates
+    }
+}
+async function initPlugin(pluginName, template) {
+    const pluginsDir = PLUGINS_DIR;
+    const pluginDir = path.join(pluginsDir, pluginName);
+    const markerFile = path.join(pluginDir, '.shella-initializing');
+    // Ensure plugins directory exists
+    await fs.mkdir(pluginsDir, { recursive: true });
+    // Check if plugin dir already exists
+    try {
+        await fs.access(pluginDir);
+        throw new Error(`Plugin already exists: ${pluginDir}\nRemove it first or choose a different name.`);
+    }
+    catch (err) {
+        if (err.code !== 'ENOENT') {
+            throw err;
+        }
+    }
+    try {
+        // Create directory with marker first
+        await fs.mkdir(pluginDir, { recursive: true });
+        await fs.writeFile(markerFile, '');
+        // Copy template files
+        await copyTemplate(template.name, pluginDir);
+        await updatePackageJson(pluginDir, pluginName);
+    }
+    finally {
+        // Remove marker file - daemon can now start the plugin
+        try {
+            await fs.unlink(markerFile);
+            // Touch the directory to trigger the daemon's watcher
+            const now = new Date();
+            await fs.utimes(pluginDir, now, now);
+        }
+        catch {
+            // Ignore if marker doesn't exist or dir failed to create
+        }
+    }
+    return pluginDir;
+}
+async function interactiveMode() {
+    clack.intro('shella init');
+    const pluginName = await clack.text({
+        message: 'What do you want to name your plugin?',
+        placeholder: 'my-plugin',
+        validate: (value) => {
+            if (!value.trim()) {
+                return 'Plugin name is required';
+            }
+            if (!/^[a-z0-9-]+$/.test(value)) {
+                return 'Use lowercase letters, numbers, and hyphens only';
+            }
+            return undefined;
+        },
+    });
+    if (clack.isCancel(pluginName)) {
+        clack.cancel('Cancelled');
+        process.exit(0);
+    }
+    const templateName = await clack.select({
+        message: 'Select a template',
+        options: TEMPLATES.map((t) => ({
+            value: t.name,
+            label: t.name,
+            hint: t.description,
+        })),
+    });
+    if (clack.isCancel(templateName)) {
+        clack.cancel('Cancelled');
+        process.exit(0);
+    }
+    const template = TEMPLATES.find((t) => t.name === templateName);
+    if (!template) {
+        clack.log.error('Template not found');
+        process.exit(1);
+    }
+    const spinner = clack.spinner();
+    spinner.start(`Creating ${pluginName} with ${template.name} template...`);
+    try {
+        const pluginDir = await initPlugin(pluginName, template);
+        spinner.stop(`Created plugin at ${pluginDir}`);
+        if (template.needsInstall) {
+            clack.note(`Run npm install, then start editing:\n  cd ${pluginDir}\n  npm install\n\nDev mode runs automatically with HMR.`, 'Next steps');
+        }
+        else {
+            clack.note('Edit server.js and public/index.html to build your UI', 'Next steps');
+        }
+        clack.outro('Done! The daemon will auto-detect your plugin.');
+    }
+    catch (err) {
+        spinner.stop('Failed');
+        clack.log.error(String(err));
+        process.exit(1);
+    }
+}
+async function cliMode(args) {
+    let pluginName;
+    let templateName = 'express';
+    for (let i = 0; i < args.length; i++) {
+        const arg = args[i];
+        if (arg === '--template' || arg === '-t') {
+            templateName = args[++i] ?? 'express';
+        }
+        else if (arg && !arg.startsWith('-')) {
+            pluginName = arg;
+        }
+    }
+    if (!pluginName) {
+        console.error('Plugin name is required');
+        console.error('Usage: shella-init <plugin-name> [--template <name>]');
+        process.exit(1);
+    }
+    const template = TEMPLATES.find((t) => t.name === templateName);
+    if (!template) {
+        console.error(`Unknown template: ${templateName}`);
+        console.error(`Available templates: ${TEMPLATES.map((t) => t.name).join(', ')}`);
+        process.exit(1);
+    }
+    console.log(`Creating ${pluginName} with ${template.name} template...`);
+    try {
+        const pluginDir = await initPlugin(pluginName, template);
+        console.log(`\nCreated plugin at: ${pluginDir}`);
+        console.log('\nNext steps:');
+        if (template.needsInstall) {
+            console.log('  cd ' + pluginDir);
+            console.log('  npm install');
+            console.log('');
+            console.log('  Dev mode runs automatically with HMR.');
+        }
+        else {
+            console.log('  Edit server.js and public/index.html to build your UI');
+        }
+        console.log('\nThe daemon will auto-detect your plugin.');
+    }
+    catch (err) {
+        console.error('Error:', err);
+        process.exit(1);
+    }
+}
+async function main() {
+    const args = process.argv.slice(2);
+    if (args.includes('--help') || args.includes('-h')) {
+        const pluginsDir = PLUGINS_DIR;
+        console.log('Usage: shella-init <plugin-name> [--template <name>]');
+        console.log('');
+        console.log('Create a new shella plugin scaffold.');
+        console.log('Run without arguments for interactive mode.');
+        console.log('');
+        console.log(`Plugins directory: ${pluginsDir}`);
+        console.log('');
+        console.log('Options:');
+        console.log('  --template, -t <name>  Template to use (default: express)');
+        console.log('');
+        console.log('Templates:');
+        for (const t of TEMPLATES) {
+            console.log(`  ${t.name.padEnd(14)} ${t.description}`);
+        }
+        console.log('');
+        console.log('Examples:');
+        console.log('  shella-init                              # Interactive mode');
+        console.log('  shella-init my-ui                        # Create with express template');
+        console.log('  shella-init my-ui --template vanilla     # Use vanilla template');
+        console.log('  shella-init my-ui --template shadcn      # Use Vite + shadcn/ui');
+        process.exit(0);
+    }
+    // If no args, run interactive mode
+    if (args.length === 0) {
+        await interactiveMode();
+    }
+    else {
+        await cliMode(args);
+    }
+}
+main().catch((err) => {
+    console.error('Error:', err);
+    process.exit(1);
+});
+//# sourceMappingURL=shella-init.js.map