@nuraly/lumenjs 0.1.4 → 0.2.0

package/dist/dev-server/server.js

@@ -117,8 +117,29 @@ export async function createDevServer(options) {
     setProjectDir(projectDir);
     process.env.LUMENJS_PROJECT_DIR = projectDir;
     const shared = getSharedViteConfig(projectDir, { integrations });
+    // Load user-defined Vite plugins from lumenjs.plugins.js (if present).
+    // This allows apps to add custom Vite plugins (e.g. proxy middleware)
+    // that run at the raw Connect level, before LumenJS's own middleware.
+    let userPlugins = [];
+    const pluginsPath = path.join(projectDir, 'lumenjs.plugins.js');
+    if (fs.existsSync(pluginsPath)) {
+        try {
+            // Use a temporary Vite server to load the TS file via ssrLoadModule
+            // would be circular, so we import it directly via dynamic import
+            // after Vite transforms it. Instead, read and eval the JS-compatible parts.
+            // Simplest: the file exports an array of plugin objects.
+            const pluginsMod = await import(pathToFileURL(pluginsPath).href);
+            const exported = pluginsMod.default || pluginsMod.plugins || pluginsMod;
+            if (Array.isArray(exported))
+                userPlugins = exported;
+        }
+        catch (err) {
+            console.warn(`[LumenJS] Failed to load lumenjs.plugins.js:`, err?.message);
+        }
+    }
     const server = await createViteServer({
         root: projectDir,
+        base,
         publicDir: fs.existsSync(publicDir) ? publicDir : undefined,
         server: {
             port,
@@ -126,13 +147,22 @@ export async function createDevServer(options) {
             strictPort: false,
             allowedHosts: true,
             cors: true,
-            hmr: process.env.HMR_CLIENT_PORT ? { clientPort: parseInt(process.env.HMR_CLIENT_PORT), protocol: process.env.HMR_PROTOCOL || 'wss', host: process.env.HMR_HOST || undefined } : true,
+            hmr: process.env.HMR_CLIENT_PORT ? {
+                clientPort: parseInt(process.env.HMR_CLIENT_PORT),
+                port: parseInt(process.env.HMR_CLIENT_PORT),
+                ...(process.env.HMR_PROTOCOL ? { protocol: process.env.HMR_PROTOCOL } : {}),
+                ...(process.env.HMR_HOST ? { host: process.env.HMR_HOST } : {}),
+            } : true,
             fs: {
                 allow: [projectDir, getLumenJSNodeModules(), path.resolve(getLumenJSNodeModules(), '..')],
             },
         },
         resolve: shared.resolve,
+        // 'custom' prevents Vite from adding SPA fallback and indexHtml middleware,
+        // which would interfere with LumenJS's own HTML handler (especially when base != '/')
+        appType: 'custom',
         plugins: [
+            ...userPlugins,
             ...(integrations.includes('auth') ? [authPlugin(projectDir)] : []),
             ...shared.plugins,
             ...(integrations.includes('communication') ? [communicationPlugin(projectDir)] : []),
@@ -142,6 +172,29 @@ export async function createDevServer(options) {
             ...(i18nConfig ? [i18nPlugin(projectDir, i18nConfig)] : []),
             ...(editorMode ? [sourceAnnotatorPlugin(projectDir), editorApiPlugin(projectDir)] : []),
             lumenSocketIOPlugin(pagesDir),
+            ...(base !== '/' ? [{
+                    // Fix HMR fetch URLs when Vite runs behind a base path.
+                    // Vite's import analysis injects createHotContext() with the full filesystem
+                    // path (e.g. /data/user-apps/.../bb2/pages/index.ts) instead of root-relative.
+                    // When @vite/client fetches the updated module it builds the URL as
+                    //   base + filesystemPath.slice(1) → /__app_dev/{id}/data/.../pages/index.ts
+                    // which 404s because transformMiddleware resolves relative to root, doubling
+                    // the path. This pre-hook middleware strips the projectDir prefix so
+                    // baseMiddleware sees the correct root-relative path.
+                    name: 'lumenjs-hmr-path-fix',
+                    configureServer(server) {
+                        const projSlash = projectDir.replace(/\\/g, '/');
+                        server.middlewares.use((req, _res, next) => {
+                            if (req.url) {
+                                const prefix = base + projSlash.slice(1) + '/';
+                                if (req.url.startsWith(prefix)) {
+                                    req.url = base + req.url.slice(prefix.length);
+                                }
+                            }
+                            next();
+                        });
+                    },
+                }] : []),
             {
                 // Clear SSR module cache on file changes so the next SSR request uses fresh code.
                 // Without this, HMR updates the client but SSR keeps serving stale modules.
@@ -183,103 +236,108 @@ export async function createDevServer(options) {
                     }
                 },
                 configureServer(server) {
-                    server.middlewares.use(async (req, res, next) => {
-                        const pathname = (req.url || '/').split('?')[0];
-                        if (pathname.startsWith('/@') || pathname.startsWith('/node_modules') || pathname.includes('.')) {
-                            return next();
-                        }
-                        const middlewareEntries = scanMiddleware(pagesDir);
-                        if (middlewareEntries.length === 0)
-                            return next();
-                        const matchingDirs = getMiddlewareDirsForPathname(pathname, middlewareEntries);
-                        if (matchingDirs.length === 0)
-                            return next();
-                        const allMw = [];
-                        for (const entry of matchingDirs) {
-                            try {
-                                const mod = await server.ssrLoadModule(entry.filePath);
-                                allMw.push(...extractMiddleware(mod));
+                    return () => {
+                        server.middlewares.use(async (req, res, next) => {
+                            const pathname = (req.url || '/').split('?')[0];
+                            if (pathname.startsWith('/@') || pathname.startsWith('/node_modules') || pathname.includes('.')) {
+                                return next();
                             }
-                            catch (err) {
-                                console.error(`[LumenJS] Failed to load _middleware.ts (${entry.dir || 'root'}):`, err);
+                            const middlewareEntries = scanMiddleware(pagesDir);
+                            if (middlewareEntries.length === 0)
+                                return next();
+                            const matchingDirs = getMiddlewareDirsForPathname(pathname, middlewareEntries);
+                            if (matchingDirs.length === 0)
+                                return next();
+                            const allMw = [];
+                            for (const entry of matchingDirs) {
+                                try {
+                                    const mod = await server.ssrLoadModule(entry.filePath);
+                                    allMw.push(...extractMiddleware(mod));
+                                }
+                                catch (err) {
+                                    console.error(`[LumenJS] Failed to load _middleware.ts (${entry.dir || 'root'}):`, err);
+                                }
                             }
-                        }
-                        if (allMw.length === 0)
-                            return next();
-                        runMiddlewareChain(allMw, req, res, next);
-                    });
+                            if (allMw.length === 0)
+                                return next();
+                            runMiddlewareChain(allMw, req, res, next);
+                        });
+                    };
                 }
             },
             {
                 name: 'lumenjs-index-html',
                 configureServer(server) {
-                    server.middlewares.use((req, res, next) => {
-                        // Guard against malformed percent-encoded URLs that crash Vite's transformIndexHtml
-                        if (req.url) {
-                            try {
-                                decodeURIComponent(req.url);
-                            }
-                            catch {
-                                res.statusCode = 400;
-                                res.end('Bad Request');
-                                return;
-                            }
-                        }
-                        if (req.url && !req.url.startsWith('/@') && !req.url.startsWith('/node_modules') &&
-                            !req.url.startsWith('/api/') && !req.url.startsWith('/__nk_loader/') &&
-                            !req.url.startsWith('/__nk_i18n/') &&
-                            !req.url.includes('.') && req.method === 'GET') {
-                            let pathname = req.url.split('?')[0];
-                            // Resolve locale from URL/cookie/header
-                            let locale;
-                            let translations;
-                            if (i18nConfig) {
-                                const localeResult = resolveLocale(pathname, i18nConfig, req.headers);
-                                locale = localeResult.locale;
-                                pathname = localeResult.pathname;
-                                translations = loadTranslationsFromDisk(projectDir, locale);
-                            }
-                            const SSR_PLACEHOLDER = '<!--__NK_SSR_CONTENT__-->';
-                            ssrRenderPage(server, pagesDir, pathname, req.headers, locale, req.nkAuth?.user ?? undefined).then(async (ssrResult) => {
-                                if (ssrResult?.redirect) {
-                                    res.writeHead(ssrResult.redirect.status, { Location: ssrResult.redirect.location });
-                                    res.end();
+                    return () => {
+                        server.middlewares.use((req, res, next) => {
+                            // Guard against malformed percent-encoded URLs that crash Vite's transformIndexHtml
+                            if (req.url) {
+                                try {
+                                    decodeURIComponent(req.url);
+                                }
+                                catch {
+                                    res.statusCode = 400;
+                                    res.end('Bad Request');
                                     return;
                                 }
-                                const shellHtml = generateIndexHtml({
-                                    title,
-                                    editorMode,
-                                    ssrContent: ssrResult ? SSR_PLACEHOLDER : undefined,
-                                    loaderData: ssrResult?.loaderData,
-                                    layoutsData: ssrResult?.layoutsData,
-                                    integrations,
-                                    locale,
-                                    i18nConfig: i18nConfig || undefined,
-                                    translations,
-                                    prefetch: prefetchStrategy,
-                                    authUser: ssrResult?.authUser ?? req.nkAuth?.user ?? undefined,
-                                    headContent,
-                                });
-                                const transformed = await server.transformIndexHtml(req.url, shellHtml);
-                                const finalHtml = ssrResult
-                                    ? transformed.replace(SSR_PLACEHOLDER, ssrResult.html)
-                                    : transformed;
-                                res.setHeader('Content-Type', 'text/html');
-                                res.setHeader('Cache-Control', 'no-store');
-                                res.end(finalHtml);
-                            }).catch(err => {
-                                console.error('[LumenJS] SSR/HTML generation error:', err);
-                                const html = generateIndexHtml({ title, editorMode, integrations, locale, i18nConfig: i18nConfig || undefined, translations, prefetch: prefetchStrategy, headContent });
-                                server.transformIndexHtml(req.url, html).then(transformed => {
+                            }
+                            if (req.url && !req.url.startsWith('/@') && !req.url.startsWith('/node_modules') &&
+                                !req.url.startsWith('/api/') && !req.url.startsWith('/__nk_loader/') &&
+                                !req.url.startsWith('/__nk_i18n/') &&
+                                !req.url.includes('.') && req.method === 'GET') {
+                                let pathname = req.url.split('?')[0];
+                                // Resolve locale from URL/cookie/header
+                                let locale;
+                                let translations;
+                                if (i18nConfig) {
+                                    const localeResult = resolveLocale(pathname, i18nConfig, req.headers);
+                                    locale = localeResult.locale;
+                                    pathname = localeResult.pathname;
+                                    translations = loadTranslationsFromDisk(projectDir, locale);
+                                }
+                                const SSR_PLACEHOLDER = '<!--__NK_SSR_CONTENT__-->';
+                                ssrRenderPage(server, pagesDir, pathname, req.headers, locale, req.nkAuth?.user ?? undefined).then(async (ssrResult) => {
+                                    if (ssrResult?.redirect) {
+                                        res.writeHead(ssrResult.redirect.status, { Location: ssrResult.redirect.location });
+                                        res.end();
+                                        return;
+                                    }
+                                    const shellHtml = generateIndexHtml({
+                                        title,
+                                        editorMode,
+                                        ssrContent: ssrResult ? SSR_PLACEHOLDER : undefined,
+                                        loaderData: ssrResult?.loaderData,
+                                        layoutsData: ssrResult?.layoutsData,
+                                        integrations,
+                                        locale,
+                                        i18nConfig: i18nConfig || undefined,
+                                        translations,
+                                        prefetch: prefetchStrategy,
+                                        authUser: ssrResult?.authUser ?? req.nkAuth?.user ?? undefined,
+                                        headContent,
+                                        base,
+                                    });
+                                    const transformed = await server.transformIndexHtml(req.url, shellHtml);
+                                    const finalHtml = ssrResult
+                                        ? transformed.replace(SSR_PLACEHOLDER, ssrResult.html)
+                                        : transformed;
                                     res.setHeader('Content-Type', 'text/html');
                                     res.setHeader('Cache-Control', 'no-store');
-                                    res.end(transformed);
-                                }).catch(next);
-                            });
-                            return;
-                        }
-                        next();
-                    });
+                                    res.end(finalHtml);
+                                }).catch(err => {
+                                    console.error('[LumenJS] SSR/HTML generation error:', err);
+                                    const html = generateIndexHtml({ title, editorMode, integrations, locale, i18nConfig: i18nConfig || undefined, translations, prefetch: prefetchStrategy, headContent, base });
+                                    server.transformIndexHtml(req.url, html).then(transformed => {
+                                        res.setHeader('Content-Type', 'text/html');
+                                        res.setHeader('Cache-Control', 'no-store');
+                                        res.end(transformed);
+                                    }).catch(next);
+                                });
+                                return;
+                            }
+                            next();
+                        });
+                    };
                 }
             }
         ],
@@ -299,7 +357,7 @@ export async function createDevServer(options) {
         },
         ssr: {
             noExternal: true,
-            external: ['node-domexception', 'socket.io-client', 'xmlhttprequest-ssl', 'engine.io-client', 'better-sqlite3', '@lumenjs/db', '@lumenjs/permissions'],
+            external: ['node-domexception', 'socket.io-client', 'xmlhttprequest-ssl', 'engine.io-client', 'better-sqlite3', '@lumenjs/db', '@lumenjs/permissions', 'amqplib'],
             resolve: {
                 conditions: ['node', 'import'],
             },

package/dist/dev-server/ssr-render.js

@@ -29,12 +29,19 @@ export async function ssrRenderPage(server, pagesDir, pathname, headers, locale,
         const g = globalThis;
         invalidateSsrModule(server, filePath);
         clearSsrCustomElement(g);
+        // Use root-relative paths for ssrLoadModule so the module graph entry
+        // gets url='/pages/index.ts' instead of the filesystem path. Vite's
+        // idToModuleMap is shared between SSR and client — if SSR creates the
+        // entry first with a filesystem-path URL, the client inherits it and
+        // HMR breaks (createHotContext gets the wrong path).
+        const projectRoot = path.resolve(pagesDir, '..');
+        const pageModuleUrl = '/' + path.relative(projectRoot, filePath).replace(/\\/g, '/');
         // Load the page module via Vite (registers the custom element, applies transforms)
         // Bypass get() so auto-define re-registers fresh classes
         const registry = g.customElements;
         if (registry)
             registry.__nk_bypass_get = true;
-        const mod = await server.ssrLoadModule(filePath);
+        const mod = await server.ssrLoadModule(pageModuleUrl);
         if (registry)
             registry.__nk_bypass_get = false;
         // Run loader if present
@@ -57,9 +64,10 @@ export async function ssrRenderPage(server, pagesDir, pathname, headers, locale,
             // Invalidate layout module cache and clear SSR element registry
             invalidateSsrModule(server, layout.filePath);
             clearSsrCustomElement(g);
+            const layoutModuleUrl = '/' + path.relative(projectRoot, layout.filePath).replace(/\\/g, '/');
             if (registry)
                 registry.__nk_bypass_get = true;
-            const layoutMod = await server.ssrLoadModule(layout.filePath);
+            const layoutMod = await server.ssrLoadModule(layoutModuleUrl);
             if (registry)
                 registry.__nk_bypass_get = false;
             let layoutLoaderData = undefined;

package/dist/editor/ai/backend.js

@@ -8,12 +8,18 @@ async function detectBackend() {
     if (resolvedBackend)
         return resolvedBackend;
     const explicit = process.env.AI_BACKEND;
-    if (explicit === 'claude-code' || explicit === 'opencode') {
+    if (explicit === 'claude-code' || explicit === 'opencode' || explicit === 'deepseek') {
         resolvedBackend = explicit;
         console.log(`[LumenJS] AI backend: ${explicit} (from AI_BACKEND env)`);
         return resolvedBackend;
     }
-    // Auto-detect: try Claude Code first (subscription-based, no server needed)
+    // Auto-detect: try DeepSeek if API key is set
+    if (process.env.DEEPSEEK_API_KEY) {
+        resolvedBackend = 'deepseek';
+        console.log('[LumenJS] AI backend: deepseek (auto-detected from DEEPSEEK_API_KEY)');
+        return resolvedBackend;
+    }
+    // Auto-detect: try Claude Code (subscription-based, no server needed)
     try {
         const cc = await import('./claude-code-client.js');
         const status = await cc.checkAiStatus();
@@ -36,6 +42,9 @@ async function getClient() {
     if (backend === 'claude-code') {
         return import('./claude-code-client.js');
     }
+    if (backend === 'deepseek') {
+        return import('./deepseek-client.js');
+    }
     return import('./opencode-client.js');
 }
 /**

package/dist/editor/ai/deepseek-client.d.ts

@@ -0,0 +1,7 @@
+/**
+ * DeepSeek AI client — uses the OpenAI-compatible chat completions API with SSE streaming.
+ * Configure via DEEPSEEK_API_KEY env var. Optionally set DEEPSEEK_BASE_URL and DEEPSEEK_MODEL.
+ */
+import type { AiChatOptions, AiChatResult, AiStatusResult } from './types.js';
+export declare function streamAiChat(projectDir: string, options: AiChatOptions): AiChatResult;
+export declare function checkAiStatus(): Promise<AiStatusResult>;

package/dist/editor/ai/deepseek-client.js

@@ -0,0 +1,113 @@
+/**
+ * DeepSeek AI client — uses the OpenAI-compatible chat completions API with SSE streaming.
+ * Configure via DEEPSEEK_API_KEY env var. Optionally set DEEPSEEK_BASE_URL and DEEPSEEK_MODEL.
+ */
+import { SYSTEM_PROMPT, buildPrompt } from './types.js';
+const DEEPSEEK_API_KEY = process.env.DEEPSEEK_API_KEY || '';
+const DEEPSEEK_BASE_URL = process.env.DEEPSEEK_BASE_URL || 'https://api.deepseek.com';
+const DEEPSEEK_MODEL = process.env.DEEPSEEK_MODEL || 'deepseek-chat';
+// Simple per-session message history
+const sessions = new Map();
+export function streamAiChat(projectDir, options) {
+    const tokenCallbacks = [];
+    const doneCallbacks = [];
+    const errorCallbacks = [];
+    const controller = new AbortController();
+    let sessionId = options.sessionId || `ds-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+    const enrichedPrompt = buildPrompt(options);
+    const run = async () => {
+        try {
+            // Build message history
+            if (!sessions.has(sessionId)) {
+                sessions.set(sessionId, [{ role: 'system', content: SYSTEM_PROMPT }]);
+            }
+            const messages = sessions.get(sessionId);
+            messages.push({ role: 'user', content: enrichedPrompt });
+            const res = await fetch(`${DEEPSEEK_BASE_URL}/v1/chat/completions`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${DEEPSEEK_API_KEY}`,
+                },
+                body: JSON.stringify({
+                    model: DEEPSEEK_MODEL,
+                    messages,
+                    stream: true,
+                }),
+                signal: controller.signal,
+            });
+            if (!res.ok) {
+                const errText = await res.text().catch(() => '');
+                throw new Error(`DeepSeek API error: ${res.status} ${errText}`);
+            }
+            // Parse SSE stream
+            const reader = res.body?.getReader();
+            if (!reader)
+                throw new Error('No response body');
+            const decoder = new TextDecoder();
+            let fullText = '';
+            let buffer = '';
+            while (true) {
+                const { done, value } = await reader.read();
+                if (done)
+                    break;
+                buffer += decoder.decode(value, { stream: true });
+                const lines = buffer.split('\n');
+                buffer = lines.pop() || '';
+                for (const line of lines) {
+                    const trimmed = line.trim();
+                    if (!trimmed || !trimmed.startsWith('data:'))
+                        continue;
+                    const data = trimmed.slice(5).trim();
+                    if (data === '[DONE]')
+                        continue;
+                    try {
+                        const parsed = JSON.parse(data);
+                        const delta = parsed.choices?.[0]?.delta?.content;
+                        if (delta) {
+                            fullText += delta;
+                            for (const cb of tokenCallbacks)
+                                cb(delta);
+                        }
+                    }
+                    catch {
+                        // Skip malformed SSE lines
+                    }
+                }
+            }
+            // Save assistant response to history
+            messages.push({ role: 'assistant', content: fullText });
+            for (const cb of doneCallbacks)
+                cb(fullText);
+        }
+        catch (err) {
+            if (err?.name === 'AbortError')
+                return;
+            for (const cb of errorCallbacks)
+                cb(err instanceof Error ? err : new Error(String(err)));
+        }
+    };
+    run();
+    return {
+        get sessionId() { return sessionId; },
+        onToken: (cb) => { tokenCallbacks.push(cb); },
+        onDone: (cb) => { doneCallbacks.push(cb); },
+        onError: (cb) => { errorCallbacks.push(cb); },
+        abort: () => controller.abort(),
+    };
+}
+export async function checkAiStatus() {
+    if (!DEEPSEEK_API_KEY) {
+        return { configured: false, backend: 'opencode' };
+    }
+    try {
+        const res = await fetch(`${DEEPSEEK_BASE_URL}/v1/models`, {
+            headers: { 'Authorization': `Bearer ${DEEPSEEK_API_KEY}` },
+            signal: AbortSignal.timeout(5000),
+        });
+        return { configured: res.ok, backend: 'opencode' };
+    }
+    catch {
+        return { configured: false, backend: 'opencode' };
+    }
+}

package/dist/editor/ai/opencode-client.d.ts

@@ -5,7 +5,7 @@
 import type { AiChatOptions, AiChatResult, AiStatusResult } from './types.js';
 /**
  * Stream an AI chat message via OpenCode's REST API.
- * Uses the /api/session and /api/message endpoints.
+ * Creates a session, sends message, and parses the response.
  */
 export declare function streamAiChat(projectDir: string, options: AiChatOptions): AiChatResult;
 /**

package/dist/editor/ai/opencode-client.js

@@ -2,8 +2,8 @@
  * OpenCode AI client — wraps the OpenCode REST API for AI coding agent integration.
  * Connects to an OpenCode server (`opencode serve`) that handles LLM calls and file editing.
  */
-import { SYSTEM_PROMPT, buildPrompt } from './types.js';
-const OPENCODE_URL = process.env.OPENCODE_URL || 'http://localhost:3500';
+import { buildPrompt } from './types.js';
+const OPENCODE_URL = process.env.OPENCODE_URL || 'http://localhost:4096';
 const OPENCODE_PASSWORD = process.env.OPENCODE_SERVER_PASSWORD || '';
 function buildHeaders() {
     const headers = { 'Content-Type': 'application/json' };
@@ -14,7 +14,7 @@ function buildHeaders() {
 }
 /**
  * Stream an AI chat message via OpenCode's REST API.
- * Uses the /api/session and /api/message endpoints.
+ * Creates a session, sends message, and parses the response.
  */
 export function streamAiChat(projectDir, options) {
     const tokenCallbacks = [];
@@ -27,10 +27,10 @@ export function streamAiChat(projectDir, options) {
         try {
             // Create a new session if we don't have one
             if (!sessionId) {
-                const createRes = await fetch(`${OPENCODE_URL}/api/session`, {
+                const createRes = await fetch(`${OPENCODE_URL}/session`, {
                     method: 'POST',
                     headers: buildHeaders(),
-                    body: JSON.stringify({ path: projectDir, system: SYSTEM_PROMPT }),
+                    body: JSON.stringify({ path: projectDir }),
                     signal: controller.signal,
                 });
                 if (!createRes.ok) {
@@ -39,53 +39,27 @@ export function streamAiChat(projectDir, options) {
                 const sessionData = await createRes.json();
                 sessionId = sessionData.id || sessionData.sessionId || '';
             }
-            // Send message and stream response
-            const msgRes = await fetch(`${OPENCODE_URL}/api/session/${sessionId}/message`, {
+            // Send message — OpenCode returns JSON with parts array
+            const msgRes = await fetch(`${OPENCODE_URL}/session/${sessionId}/message`, {
                 method: 'POST',
-                headers: { ...buildHeaders(), 'Accept': 'text/event-stream' },
-                body: JSON.stringify({ content: enrichedPrompt }),
+                headers: buildHeaders(),
+                body: JSON.stringify({ parts: [{ type: 'text', text: enrichedPrompt }] }),
                 signal: controller.signal,
             });
             if (!msgRes.ok) {
-                throw new Error(`OpenCode message failed: ${msgRes.status}`);
+                const errText = await msgRes.text().catch(() => '');
+                throw new Error(`OpenCode message failed: ${msgRes.status} ${errText}`);
             }
-            const reader = msgRes.body?.getReader();
-            if (!reader)
-                throw new Error('No response body from OpenCode');
-            const decoder = new TextDecoder();
+            // OpenCode returns JSON response with parts array
+            const data = await msgRes.json();
             let fullText = '';
-            let buffer = '';
-            while (true) {
-                const { done, value } = await reader.read();
-                if (done)
-                    break;
-                buffer += decoder.decode(value, { stream: true });
-                const lines = buffer.split('\n');
-                buffer = lines.pop() || '';
-                for (const line of lines) {
-                    if (line.startsWith('data: ')) {
-                        const data = line.slice(6).trim();
-                        if (data === '[DONE]')
-                            continue;
-                        try {
-                            const parsed = JSON.parse(data);
-                            // Handle different event formats from OpenCode
-                            const text = parsed.content || parsed.text || parsed.delta || '';
-                            if (text) {
-                                fullText += text;
-                                for (const cb of tokenCallbacks)
-                                    cb(text);
-                            }
-                        }
-                        catch {
-                            // Non-JSON data line, treat as raw text
-                            if (data) {
-                                fullText += data;
-                                for (const cb of tokenCallbacks)
-                                    cb(data);
-                            }
-                        }
-                    }
+            // Extract text from response parts
+            const parts = data.parts || [];
+            for (const part of parts) {
+                if (part.type === 'text' && part.text) {
+                    fullText += part.text;
+                    for (const cb of tokenCallbacks)
+                        cb(part.text);
                 }
             }
             for (const cb of doneCallbacks)
@@ -113,7 +87,7 @@ export function streamAiChat(projectDir, options) {
  */
 export async function checkAiStatus() {
     try {
-        const res = await fetch(`${OPENCODE_URL}/api/status`, {
+        const res = await fetch(`${OPENCODE_URL}/global/health`, {
             headers: buildHeaders(),
             signal: AbortSignal.timeout(3000),
         });

package/dist/editor/ai-chat-panel.js

@@ -304,6 +304,12 @@ function positionBubble(el) {
     if (wasDragged)
         return;
     const rect = el.getBoundingClientRect();
+    if (rect.width === 0 && rect.height === 0) {
+        // Element not laid out (shadow DOM, disconnected, or hidden) — park offscreen
+        panel.style.left = '-9999px';
+        panel.style.top = '-9999px';
+        return;
+    }
     const pw = 340; // panel width
     const ph = panel.offsetHeight || 420;
     const gap = 6;
@@ -353,7 +359,27 @@ export function showAiChatForElements(els) {
     }
     // Re-render quick actions based on current selection
     renderQuickActions(els);
-    // Position first, then make visible — prevents flash at default position
+    // Only show once we have a valid position — prevents flash at top-left
+    const rect = primary.getBoundingClientRect();
+    if (rect.width === 0 && rect.height === 0) {
+        // Element not yet laid out — retry positioning over next few frames
+        let retries = 0;
+        const tryPosition = () => {
+            if (currentTargets[0] !== primary || !primary.isConnected)
+                return;
+            const r = primary.getBoundingClientRect();
+            if (r.width > 0 || r.height > 0) {
+                positionBubble(primary);
+                panel.classList.add('open');
+            }
+            else if (retries < 3) {
+                retries++;
+                requestAnimationFrame(tryPosition);
+            }
+        };
+        requestAnimationFrame(tryPosition);
+        return;
+    }
     positionBubble(primary);
     panel.classList.add('open');
 }

package/dist/editor/editor-bridge.js

@@ -87,7 +87,8 @@ function handleHostMessage(event) {
     }
 }
 function initEditorBridge() {
-    if (window.self !== window.top) {
+    const forceStandalone = new URLSearchParams(window.location.search).has('_nk_standalone');
+    if (!forceStandalone && window.self !== window.top) {
         // Running inside Studio iframe — use postMessage bridge
         startAnnotator();
         setupClickToSelect();