dot-studio 0.0.1

package/dist/server/terminal.js

@@ -0,0 +1,282 @@
+// Terminal WebSocket handler — proxies PTY sessions via OpenCode SDK v2 PTY API
+import { WebSocketServer, WebSocket } from 'ws';
+import { OPENCODE_URL } from './lib/config.js';
+const MAX_BUFFER = 500;
+const sessions = new Map();
+let sessionCounter = 0;
+async function opencodePtyRequest(path, init, directory) {
+    const url = new URL(path, OPENCODE_URL);
+    if (directory) {
+        url.searchParams.set('directory', directory);
+    }
+    const res = await fetch(url, {
+        ...init,
+        headers: {
+            'Content-Type': 'application/json',
+            ...(init.headers || {}),
+        },
+    });
+    const raw = await res.text();
+    const payload = raw ? JSON.parse(raw) : null;
+    if (!res.ok) {
+        const message = payload?.error?.message
+            || payload?.error
+            || payload?.data?.message
+            || payload?.message
+            || raw
+            || `OpenCode PTY request failed (${res.status})`;
+        throw new Error(String(message));
+    }
+    return payload;
+}
+export function setupTerminalWs(server, defaultCwd) {
+    const wss = new WebSocketServer({ noServer: true });
+    const resolveDefaultCwd = () => typeof defaultCwd === 'function' ? defaultCwd() : defaultCwd;
+    server.on('upgrade', (req, socket, head) => {
+        if (req.url?.startsWith('/ws/terminal')) {
+            wss.handleUpgrade(req, socket, head, (ws) => {
+                wss.emit('connection', ws, req);
+            });
+        }
+    });
+    wss.on('connection', (ws, req) => {
+        const url = new URL(req.url || '', 'http://localhost');
+        const action = url.searchParams.get('action') || 'create';
+        const targetId = url.searchParams.get('id') || '';
+        const cwd = url.searchParams.get('cwd') || resolveDefaultCwd();
+        const targetSession = targetId ? sessions.get(targetId) : null;
+        if (action === 'attach' && targetSession && targetSession.cwd === cwd) {
+            attachSession(ws, targetId);
+        }
+        else {
+            createSession(ws, cwd);
+        }
+    });
+    async function createSession(ws, cwd) {
+        sessionCounter++;
+        const id = `term-${sessionCounter}`;
+        const shell = process.env.SHELL || '/bin/zsh';
+        const title = `Terminal ${sessionCounter}`;
+        try {
+            const ptyData = await opencodePtyRequest('/pty', {
+                method: 'POST',
+                body: JSON.stringify({
+                    command: shell,
+                    args: ['-l'],
+                    cwd,
+                    title,
+                    env: {
+                        TERM: 'xterm-256color',
+                        COLORTERM: 'truecolor',
+                    },
+                }),
+            }, cwd);
+            const ptyID = ptyData?.id;
+            if (!ptyID) {
+                throw new Error('Failed to create PTY session: no ID returned');
+            }
+            const session = { id, ptyID, ws, title, buffer: [], cwd, ptyWs: null, initialized: false };
+            sessions.set(id, session);
+            // Connect to OpenCode PTY WebSocket for real-time I/O
+            connectPtyWebSocket(session);
+            ws.send(JSON.stringify({
+                type: 'connected',
+                id, title, shell, cwd,
+                sessions: getSessionList(cwd),
+            }));
+            setupWsHandlers(ws, session);
+            broadcastSessionList(session.cwd);
+        }
+        catch (err) {
+            console.error('Failed to create PTY via OpenCode:', err.message);
+            ws.send(JSON.stringify({ type: 'error', message: `Failed: ${err.message}` }));
+            ws.close();
+        }
+    }
+    function connectPtyWebSocket(session) {
+        // Build OpenCode PTY WebSocket URL
+        const baseUrl = OPENCODE_URL.replace(/^http/, 'ws');
+        const ptyUrl = new URL(`/pty/${session.ptyID}/connect`, baseUrl);
+        if (session.cwd) {
+            ptyUrl.searchParams.set('directory', session.cwd);
+        }
+        const ptyWsUrl = ptyUrl.toString();
+        const ptyWs = new WebSocket(ptyWsUrl);
+        session.ptyWs = ptyWs;
+        ptyWs.on('message', (rawData) => {
+            const data = rawData.toString();
+            // Filter initial noise like {"cursor":0}% that zsh/bash emit before the first prompt.
+            // The data may arrive in multiple small chunks with ANSI sequences mixed in.
+            if (!session.initialized) {
+                // Strip ALL ANSI escape sequences (CSI, OSC, etc.)
+                const stripped = data
+                    .replace(/\x1b\][^\x07]*(\x07|\x1b\\)/g, '') // OSC sequences
+                    .replace(/\x1b\[[^a-zA-Z]*[a-zA-Z]/g, '') // CSI sequences
+                    .replace(/\x1b[^[\]].?/g, '') // Other escapes
+                    .replace(/[\r\n]/g, '')
+                    .trim();
+                // Skip if it's cursor control noise, percent signs, or empty after stripping
+                if (!stripped || /\{"cursor":\d+\}/.test(stripped) || /^%+$/.test(stripped)) {
+                    return;
+                }
+                session.initialized = true;
+            }
+            addToBuffer(session, data);
+            if (session.ws?.readyState === WebSocket.OPEN) {
+                session.ws.send(JSON.stringify({ type: 'output', data }));
+            }
+        });
+        // Poll PTY status to detect exit (OpenCode PTY WS may not close immediately)
+        const statusInterval = setInterval(async () => {
+            if (!sessions.has(session.id)) {
+                clearInterval(statusInterval);
+                return;
+            }
+            try {
+                const info = await opencodePtyRequest(`/pty/${session.ptyID}`, {
+                    method: 'GET',
+                }, session.cwd);
+                if (info?.status === 'exited') {
+                    clearInterval(statusInterval);
+                    handleSessionExit(session);
+                }
+            }
+            catch {
+                // PTY not found (404) means it already exited
+                clearInterval(statusInterval);
+                handleSessionExit(session);
+            }
+        }, 2000);
+        ptyWs.on('close', () => {
+            clearInterval(statusInterval);
+            session.ptyWs = null;
+            handleSessionExit(session);
+        });
+        ptyWs.on('error', (err) => {
+            console.error(`PTY WebSocket error for ${session.id}:`, err.message);
+        });
+    }
+    function handleSessionExit(session) {
+        if (!sessions.has(session.id))
+            return; // Already handled
+        // Notify client that the session has exited
+        if (session.ws?.readyState === WebSocket.OPEN) {
+            session.ws.send(JSON.stringify({ type: 'exit', id: session.id }));
+        }
+        session.ptyWs?.close();
+        session.ptyWs = null;
+        sessions.delete(session.id);
+        broadcastSessionList(session.cwd);
+    }
+    function attachSession(ws, targetId) {
+        const session = sessions.get(targetId);
+        if (!session)
+            return;
+        if (session.ws && session.ws !== ws && session.ws.readyState === WebSocket.OPEN) {
+            session.ws.close();
+        }
+        session.ws = ws;
+        // Replay buffer
+        if (session.buffer.length > 0) {
+            ws.send(JSON.stringify({ type: 'output', data: session.buffer.join('') }));
+        }
+        ws.send(JSON.stringify({
+            type: 'attached',
+            id: session.id,
+            title: session.title,
+            sessions: getSessionList(session.cwd),
+        }));
+        setupWsHandlers(ws, session);
+    }
+    function setupWsHandlers(ws, session) {
+        ws.on('message', async (msg) => {
+            try {
+                const parsed = JSON.parse(msg.toString());
+                switch (parsed.type) {
+                    case 'input':
+                        // Forward input to OpenCode PTY WebSocket
+                        if (session.ptyWs?.readyState === WebSocket.OPEN) {
+                            session.ptyWs.send(parsed.data);
+                        }
+                        break;
+                    case 'resize':
+                        try {
+                            await opencodePtyRequest(`/pty/${session.ptyID}`, {
+                                method: 'PUT',
+                                body: JSON.stringify({
+                                    size: { rows: parsed.rows, cols: parsed.cols },
+                                }),
+                            }, session.cwd);
+                        }
+                        catch (e) {
+                            console.error('PTY resize failed:', e.message);
+                        }
+                        break;
+                    case 'create':
+                        createSession(ws, parsed.cwd || session.cwd || resolveDefaultCwd());
+                        break;
+                    case 'kill': {
+                        const target = sessions.get(parsed.id);
+                        if (target && target.cwd === session.cwd) {
+                            try {
+                                await opencodePtyRequest(`/pty/${target.ptyID}`, {
+                                    method: 'DELETE',
+                                }, target.cwd);
+                            }
+                            catch { /* ignore */ }
+                            target.ptyWs?.close();
+                            sessions.delete(parsed.id);
+                            broadcastSessionList(session.cwd);
+                        }
+                        break;
+                    }
+                    case 'rename': {
+                        const target = sessions.get(parsed.id);
+                        if (target && target.cwd === session.cwd && parsed.title) {
+                            target.title = parsed.title;
+                            broadcastSessionList(session.cwd);
+                        }
+                        break;
+                    }
+                    case 'list':
+                        ws.send(JSON.stringify({ type: 'sessions', sessions: getSessionList(session.cwd) }));
+                        break;
+                }
+            }
+            catch {
+                // Raw input fallback
+                if (session.ptyWs?.readyState === WebSocket.OPEN) {
+                    session.ptyWs.send(msg.toString());
+                }
+            }
+        });
+        ws.on('close', () => {
+            if (session.ws === ws)
+                session.ws = null;
+        });
+    }
+    function addToBuffer(session, data) {
+        session.buffer.push(data);
+        if (session.buffer.length > MAX_BUFFER) {
+            session.buffer.splice(0, session.buffer.length - MAX_BUFFER);
+        }
+    }
+    function getSessionList(cwd) {
+        return Array.from(sessions.values())
+            .filter((session) => session.cwd === cwd)
+            .map(s => ({
+            id: s.id,
+            title: s.title,
+            connected: s.ws !== null && s.ws.readyState === WebSocket.OPEN,
+        }));
+    }
+    function broadcastSessionList(cwd) {
+        const list = getSessionList(cwd);
+        for (const s of sessions.values()) {
+            if (s.cwd === cwd && s.ws?.readyState === WebSocket.OPEN) {
+                s.ws.send(JSON.stringify({ type: 'sessions', sessions: list }));
+            }
+        }
+    }
+    console.log('   Terminal: WebSocket on /ws/terminal (via OpenCode PTY)');
+}

package/dist/shared/mcp-config.js

@@ -0,0 +1,19 @@
+function unique(values) {
+    return Array.from(new Set(values.filter(Boolean)));
+}
+export function extractMcpServerNamesFromConfig(value) {
+    if (!value || typeof value !== 'object') {
+        return [];
+    }
+    const record = value;
+    const nestedServers = record.servers;
+    if (Array.isArray(nestedServers)) {
+        return unique(nestedServers.filter((item) => typeof item === 'string'));
+    }
+    if (nestedServers && typeof nestedServers === 'object') {
+        return unique(Object.keys(nestedServers));
+    }
+    return unique(Object.entries(record)
+        .filter(([, config]) => config !== null && typeof config === 'object')
+        .map(([name]) => name));
+}

package/dist/shared/model-variants.js

@@ -0,0 +1,50 @@
+function flattenVariantOptions(value, prefix = '', acc = []) {
+    for (const [key, raw] of Object.entries(value)) {
+        const path = prefix ? `${prefix}.${key}` : key;
+        if (raw && typeof raw === 'object' && !Array.isArray(raw)) {
+            flattenVariantOptions(raw, path, acc);
+            continue;
+        }
+        if (Array.isArray(raw)) {
+            acc.push([path, raw.join(', ')]);
+            continue;
+        }
+        acc.push([path, String(raw)]);
+    }
+    return acc;
+}
+export function summarizeVariantOptions(options) {
+    const entries = flattenVariantOptions(options).slice(0, 4);
+    if (entries.length === 0) {
+        return 'Variant preset';
+    }
+    return entries.map(([key, value]) => `${key}=${value}`).join(' · ');
+}
+export function normalizeRuntimeVariants(raw) {
+    if (!raw || typeof raw !== 'object') {
+        return [];
+    }
+    return Object.entries(raw).map(([id, options]) => {
+        const normalizedOptions = options && typeof options === 'object' && !Array.isArray(options)
+            ? options
+            : {};
+        return {
+            id,
+            options: normalizedOptions,
+            summary: summarizeVariantOptions(normalizedOptions),
+        };
+    });
+}
+export function findRuntimeModel(models, provider, modelId) {
+    if (!provider || !modelId) {
+        return null;
+    }
+    return models.find((model) => model.provider === provider && model.id === modelId) || null;
+}
+export function findRuntimeModelVariant(models, provider, modelId, variantId) {
+    if (!variantId) {
+        return null;
+    }
+    const model = findRuntimeModel(models, provider, modelId);
+    return model?.variants.find((variant) => variant.id === variantId) || null;
+}

package/dist/shared/project-mcp.js

@@ -0,0 +1,22 @@
+export function isProjectMcpCatalog(value) {
+    return !!value && typeof value === 'object' && !Array.isArray(value);
+}
+export function extractProjectMcpCatalog(config) {
+    if (!config || typeof config !== 'object') {
+        return {};
+    }
+    const record = config;
+    return isProjectMcpCatalog(record.mcp) ? record.mcp : {};
+}
+export function projectMcpServerNames(config) {
+    return Object.keys(extractProjectMcpCatalog(config));
+}
+export function projectMcpEntryEnabled(entry) {
+    return entry?.enabled !== false;
+}
+export function projectMcpEntryType(entry) {
+    if (entry && typeof entry === 'object' && 'type' in entry) {
+        return entry.type === 'remote' ? 'remote' : 'local';
+    }
+    return 'toggle';
+}

package/dist/shared/session-metadata.js

@@ -0,0 +1,26 @@
+const SESSION_TITLE_PREFIX = 'DOT Studio:';
+const SESSION_METADATA_PATTERN = /^DOT Studio:\s*(.*?)\s*\[studio:([^:\]]+):([^\]]+)\]\s*$/;
+export function buildStudioSessionTitle(performerId, performerName, configHash) {
+    return `${SESSION_TITLE_PREFIX} ${performerName} [studio:${performerId}:${configHash}]`;
+}
+export function parseStudioSessionTitle(title) {
+    if (!title || !title.startsWith(SESSION_TITLE_PREFIX)) {
+        return null;
+    }
+    const match = title.match(SESSION_METADATA_PATTERN);
+    if (!match) {
+        return null;
+    }
+    return {
+        label: match[1].trim(),
+        performerId: match[2],
+        configHash: match[3],
+    };
+}
+export function renameStudioSessionTitle(title, nextLabel) {
+    const parsed = parseStudioSessionTitle(title);
+    if (!parsed) {
+        return null;
+    }
+    return buildStudioSessionTitle(parsed.performerId, nextLabel.trim(), parsed.configHash);
+}

package/package.json

@@ -0,0 +1,103 @@
+{
+  "name": "dot-studio",
+  "version": "0.0.1",
+  "description": "DOT Studio visual workspace for composing and running Dance of Tal performers and acts on top of OpenCode.",
+  "license": "MIT",
+  "author": "monarchjuno",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dance-of-tal/dance-of-tal.git"
+  },
+  "homepage": "https://github.com/dance-of-tal/dance-of-tal",
+  "bugs": {
+    "url": "https://github.com/dance-of-tal/dance-of-tal/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "dance-of-tal",
+    "dot",
+    "studio",
+    "opencode",
+    "agentic-ai",
+    "visual-editor"
+  ],
+  "engines": {
+    "node": ">=20.19.0"
+  },
+  "type": "module",
+  "scripts": {
+    "start": "tsx server/start.ts",
+    "dev": "vite",
+    "kill-ports": "lsof -ti:5173,3001,4096 | xargs kill -9 2>/dev/null || true",
+    "dev:all": "npm run kill-ports && concurrently -k -n vite,server,opencode -c cyan,yellow,magenta \"vite\" \"tsx --watch server/index.ts\" \"opencode --port 4096 .\"",
+    "server": "tsx server/index.ts",
+    "server:dev": "tsx --watch server/index.ts",
+    "clean": "node -e \"require('fs').rmSync('dist', { recursive: true, force: true }); require('fs').rmSync('client', { recursive: true, force: true })\"",
+    "build": "npm run build:all",
+    "build:client": "vite build --outDir client",
+    "build:server": "tsc -p tsconfig.server.json",
+    "build:all": "npm run clean && npm run build:client && npm run build:server",
+    "pack:check": "npm run build:all && npm pack --dry-run",
+    "type-check": "tsc -b --noEmit && tsc -p tsconfig.server.json --noEmit",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "opencode": "opencode --port 4096 .",
+    "prepublishOnly": "npm run build:all"
+  },
+  "bin": {
+    "dot-studio": "./dist/cli.js"
+  },
+  "files": [
+    "dist/",
+    "client/",
+    "README.md",
+    "LICENSE"
+  ],
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@hono/node-server": "^1.19.11",
+    "@opencode-ai/sdk": "^1.2.17",
+    "@tanstack/react-query": "^5.90.21",
+    "@xterm/addon-fit": "^0.11.0",
+    "@xterm/addon-webgl": "^0.19.0",
+    "@xterm/xterm": "^6.0.0",
+    "@xyflow/react": "^12.10.1",
+    "dance-of-tal": "^3.2.3",
+    "elkjs": "^0.11.1",
+    "highlight.js": "^11.11.1",
+    "hono": "^4.12.5",
+    "lucide-react": "^0.577.0",
+    "material-file-icons": "^2.4.0",
+    "open": "^10.0.0",
+    "opencode-ai": "1.2.24",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-markdown": "^10.1.0",
+    "rehype-highlight": "^7.0.2",
+    "remark-gfm": "^4.0.1",
+    "tsx": "^4.21.0",
+    "ws": "^8.19.0",
+    "xstate": "^5.28.0",
+    "zustand": "^5.0.11"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@types/ws": "^8.18.1",
+    "@vitejs/plugin-react": "^4.7.0",
+    "concurrently": "^9.2.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.48.0",
+    "vite": "^6.4.1"
+  }
+}