@pixelbyte-software/pixcode 1.39.2 → 1.40.1

package/scripts/smoke/live-view-integration.mjs

@@ -0,0 +1,137 @@
+import { mkdtemp, writeFile } from 'node:fs/promises';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import assert from 'node:assert/strict';
+
+const repoRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../..');
+const read = async (relativePath) => {
+  const { readFile } = await import('node:fs/promises');
+  return readFile(path.join(repoRoot, relativePath), 'utf8');
+};
+
+const appTypes = await read('src/types/app.ts');
+assert.ok(
+  appTypes.includes("'liveView'"),
+  'AppTab should include the Live View tab.',
+);
+
+const projectsState = await read('src/hooks/useProjectsState.ts');
+assert.ok(
+  projectsState.includes("'liveView'"),
+  'Persisted tab validation should allow Live View.',
+);
+
+const tabSwitcher = await read('src/components/main-content/view/subcomponents/MainContentTabSwitcher.tsx');
+assert.ok(
+  /id:\s*'liveView'/.test(tabSwitcher),
+  'Main tab switcher should render Live View after Changes.',
+);
+assert.ok(
+  tabSwitcher.indexOf("id: 'changes'") < tabSwitcher.indexOf("id: 'liveView'"),
+  'Live View should be placed after Changes.',
+);
+assert.ok(
+  /sidePanelTabs\s*=\s*new Set<AppTab>\(\[[^\]]*'liveView'/.test(tabSwitcher),
+  'Live View should use the same split/full side-panel behavior as Files, Source Control, and Changes.',
+);
+
+const mainContent = await read('src/components/main-content/view/MainContent.tsx');
+assert.ok(
+  mainContent.includes('LiveViewPanel'),
+  'MainContent should render the Live View panel.',
+);
+assert.ok(
+  /sidePanelTabs\s*=\s*new Set<AppTab>\(\[[^\]]*'liveView'/.test(mainContent),
+  'MainContent should classify Live View as a side panel instead of a full main tab.',
+);
+assert.ok(
+  /renderSidePanel\s*=\s*\(tab:[^)]*'liveView'/.test(mainContent),
+  'MainContent should render Live View from renderSidePanel.',
+);
+assert.ok(
+  !mainContent.includes("activeTab === 'liveView' && ("),
+  'Live View must not render as a full-width primary tab.',
+);
+
+const liveViewPanel = await read('src/components/live-view/LiveViewPanel.tsx');
+assert.ok(
+  liveViewPanel.includes("action === 'stop'"),
+  'Live View stop should clear the active iframe session instead of keeping the stopped /live share path.',
+);
+assert.ok(
+  liveViewPanel.includes("setStatus({"),
+  'Live View stop should write a fresh stopped state.',
+);
+assert.ok(
+  liveViewPanel.includes('VIEWPORT_PRESETS'),
+  'Live View should expose desktop, tablet, mobile, and custom viewport presets.',
+);
+assert.ok(
+  liveViewPanel.includes("type=\"number\""),
+  'Live View should let users edit the preview resolution width and height.',
+);
+assert.ok(
+  liveViewPanel.includes('viewportSize.width') && liveViewPanel.includes('viewportSize.height'),
+  'Live View iframe should use the selected preview resolution.',
+);
+
+const serverIndex = await read('server/index.js');
+assert.ok(
+  serverIndex.includes("app.use('/api/live-view', authenticateToken, liveViewRoutes)"),
+  'Live View protected API should be mounted.',
+);
+assert.ok(
+  serverIndex.includes("app.use('/live', createLiveViewPublicRouter())"),
+  'Live View public share proxy should be mounted.',
+);
+assert.ok(
+  serverIndex.indexOf("app.use('/live', createLiveViewPublicRouter())") < serverIndex.indexOf("express.static(path.join(APP_ROOT, 'dist')"),
+  'Live View public proxy must be mounted before static app fallback.',
+);
+
+const {
+  detectLiveViewTarget,
+  getLiveViewState,
+  startLiveView,
+  stopLiveView,
+} = await import('../../server/services/live-view.js');
+const workspace = await mkdtemp(path.join(tmpdir(), 'pixcode-live-view-smoke-'));
+const staticProject = path.join(workspace, 'static');
+const viteProject = path.join(workspace, 'vite');
+const djangoProject = path.join(workspace, 'django');
+await writeFile(path.join(staticProject, 'index.html'), '<main>hello</main>', { recursive: true }).catch(async (error) => {
+  if (error.code !== 'ENOENT') throw error;
+  const { mkdir } = await import('node:fs/promises');
+  await mkdir(staticProject, { recursive: true });
+  await writeFile(path.join(staticProject, 'index.html'), '<main>hello</main>');
+});
+const { mkdir } = await import('node:fs/promises');
+await mkdir(viteProject, { recursive: true });
+await writeFile(path.join(viteProject, 'package.json'), JSON.stringify({
+  scripts: { dev: 'vite --host 0.0.0.0' },
+  dependencies: { vite: '^7.0.0' },
+}, null, 2));
+await mkdir(djangoProject, { recursive: true });
+await writeFile(path.join(djangoProject, 'manage.py'), '#!/usr/bin/env python\n');
+
+const staticTarget = await detectLiveViewTarget(staticProject);
+assert.equal(staticTarget.available, true, 'Static HTML projects should be available.');
+assert.equal(staticTarget.kind, 'static', 'Static HTML projects should use direct static serving.');
+
+const viteTarget = await detectLiveViewTarget(viteProject);
+assert.equal(viteTarget.available, true, 'Vite projects should be detected.');
+assert.equal(viteTarget.command?.id, 'npm-dev-vite', 'Vite projects should get a Vite-aware command.');
+
+const djangoTarget = await detectLiveViewTarget(djangoProject);
+assert.equal(djangoTarget.available, true, 'Django projects should be detected from manage.py.');
+assert.equal(djangoTarget.command?.id, 'python-django', 'Django projects should get a runserver command.');
+
+const staticSession = await startLiveView('static-smoke', staticProject);
+assert.equal(staticSession.status, 'running', 'Static Live View should start without a child process.');
+assert.match(staticSession.sharePath, /^\/live\/[a-f0-9]{24}\/$/, 'Live View should expose a random public share path.');
+const staticState = await getLiveViewState('static-smoke', staticProject);
+assert.equal(staticState.session?.shareId, staticSession.shareId, 'Live View state should retain the active share session.');
+await stopLiveView('static-smoke');
+
+console.log('live view integration smoke passed');

package/server/index.js

@@ -78,6 +78,7 @@ import messagesRoutes from './routes/messages.js';
 import diagnosticsRoutes from './routes/diagnostics.js';
 import remoteRoutes from './routes/remote.js';
 import publicApiRoutes from './routes/public-api.js';
+import liveViewRoutes, { createLiveViewPublicRouter } from './routes/live-view.js';
 import providerRoutes from './modules/providers/provider.routes.js';
 import {
   createA2ARouter,
@@ -405,6 +406,9 @@ app.use('/api/remote', authenticateToken, remoteRoutes);
 // Public automation manifest (protected so private host details only go to signed-in clients)
 app.use('/api/public', authenticateToken, publicApiRoutes);
 
+// Project Live View (protected control API + public share proxy)
+app.use('/api/live-view', authenticateToken, liveViewRoutes);
+
 // Unified provider MCP routes (protected)
 app.use('/api/providers', authenticateToken, providerRoutes);
 
@@ -419,6 +423,7 @@ app.use('/a2a', createA2ARouter());
 app.use('/preview', authenticateToken, createPreviewProxyRouter());
 app.use('/api/orchestration', authenticateToken, createOrchestrationTaskRouter());
 app.use('/api/orchestration', authenticateToken, createWorkflowRouter());
+app.use('/live', createLiveViewPublicRouter());
 
 // Network discovery / QR endpoints (protected)
 app.use('/api/network', authenticateToken, networkRoutes);

package/server/routes/live-view.js

@@ -0,0 +1,189 @@
+import { promises as fs } from 'node:fs';
+import path from 'node:path';
+
+import express from 'express';
+
+import { extractProjectDirectory } from '../projects.js';
+import { getTunnelState } from '../services/external-access.js';
+import {
+  getLiveViewSessionByShareId,
+  getLiveViewState,
+  restartLiveView,
+  startLiveView,
+  stopLiveView,
+} from '../services/live-view.js';
+
+const router = express.Router();
+
+function requestBaseUrl(req) {
+  return `${req.protocol}://${req.get('host')}`;
+}
+
+function buildUrls(req, session) {
+  if (!session?.sharePath) return { local: null, external: null, preferred: null };
+  const local = `${requestBaseUrl(req)}${session.sharePath}`;
+  const tunnel = getTunnelState();
+  const external = tunnel?.running && tunnel.url ? `${tunnel.url}${session.sharePath}` : null;
+  return {
+    local,
+    external,
+    preferred: external || local,
+  };
+}
+
+async function resolveProjectPath(projectName) {
+  const projectPath = await extractProjectDirectory(projectName);
+  if (!projectPath || typeof projectPath !== 'string') {
+    const error = new Error('Project path could not be resolved.');
+    error.statusCode = 404;
+    throw error;
+  }
+  return projectPath;
+}
+
+router.get('/:projectName/status', async (req, res) => {
+  try {
+    const { projectName } = req.params;
+    const projectPath = await resolveProjectPath(projectName);
+    const state = await getLiveViewState(projectName, projectPath);
+    res.json({
+      ...state,
+      urls: buildUrls(req, state.session),
+      tunnel: getTunnelState(),
+    });
+  } catch (error) {
+    res.status(error.statusCode || 500).json({ error: error.message || 'Failed to read Live View state' });
+  }
+});
+
+router.post('/:projectName/start', async (req, res) => {
+  try {
+    const { projectName } = req.params;
+    const projectPath = await resolveProjectPath(projectName);
+    const session = await startLiveView(projectName, projectPath, req.body || {});
+    res.json({
+      success: true,
+      session,
+      urls: buildUrls(req, session),
+      tunnel: getTunnelState(),
+    });
+  } catch (error) {
+    const status = error.code === 'LIVE_VIEW_NOT_AVAILABLE' ? 422 : 500;
+    res.status(status).json({ error: error.message || 'Failed to start Live View' });
+  }
+});
+
+router.post('/:projectName/restart', async (req, res) => {
+  try {
+    const { projectName } = req.params;
+    const projectPath = await resolveProjectPath(projectName);
+    const session = await restartLiveView(projectName, projectPath, req.body || {});
+    res.json({
+      success: true,
+      session,
+      urls: buildUrls(req, session),
+      tunnel: getTunnelState(),
+    });
+  } catch (error) {
+    res.status(500).json({ error: error.message || 'Failed to restart Live View' });
+  }
+});
+
+router.post('/:projectName/stop', async (req, res) => {
+  try {
+    const session = await stopLiveView(req.params.projectName);
+    res.json({
+      success: true,
+      session,
+      urls: buildUrls(req, session),
+      tunnel: getTunnelState(),
+    });
+  } catch (error) {
+    res.status(500).json({ error: error.message || 'Failed to stop Live View' });
+  }
+});
+
+function resolveStaticFile(staticRoot, requestUrl) {
+  const parsed = new URL(requestUrl, 'http://pixcode.local');
+  const rawPath = decodeURIComponent(parsed.pathname || '/');
+  const relativePath = rawPath.replace(/^\/+/, '') || 'index.html';
+  const root = path.resolve(staticRoot);
+  const candidate = path.resolve(root, relativePath);
+  const relative = path.relative(root, candidate);
+
+  if (relative.startsWith('..') || path.isAbsolute(relative)) {
+    const error = new Error('Live View path is outside the static root.');
+    error.statusCode = 403;
+    throw error;
+  }
+
+  return candidate;
+}
+
+async function sendStaticLiveView(req, res, session) {
+  const root = session.staticRoot;
+  let filePath = resolveStaticFile(root, req.url);
+  try {
+    const stats = await fs.stat(filePath);
+    if (stats.isDirectory()) {
+      filePath = path.join(filePath, 'index.html');
+    }
+    await fs.access(filePath);
+  } catch {
+    filePath = path.join(root, 'index.html');
+  }
+
+  res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
+  res.sendFile(filePath);
+}
+
+async function proxyLiveView(req, res, session) {
+  if (!session.upstreamUrl) {
+    res.status(503).json({ error: 'Live View upstream is not ready yet.' });
+    return;
+  }
+
+  const targetUrl = new URL(req.url || '/', session.upstreamUrl);
+  try {
+    const upstream = await fetch(targetUrl, {
+      method: req.method,
+      headers: {
+        accept: req.header('accept') || '*/*',
+        'user-agent': req.header('user-agent') || 'pixcode-live-view',
+      },
+    });
+    res.status(upstream.status);
+    upstream.headers.forEach((value, key) => {
+      const lower = key.toLowerCase();
+      if (lower === 'content-encoding' || lower === 'content-length') return;
+      if (lower === 'x-frame-options' || lower === 'content-security-policy') return;
+      res.setHeader(key, value);
+    });
+    res.send(Buffer.from(await upstream.arrayBuffer()));
+  } catch (error) {
+    res.status(502).json({ error: error.message || 'Live View proxy failed' });
+  }
+}
+
+export function createLiveViewPublicRouter() {
+  const publicRouter = express.Router();
+
+  publicRouter.use('/:shareId', async (req, res) => {
+    const session = getLiveViewSessionByShareId(req.params.shareId);
+    if (!session || session.status === 'stopped' || session.status === 'error') {
+      res.status(404).json({ error: 'Live View session not found.' });
+      return;
+    }
+
+    if (session.kind === 'static') {
+      await sendStaticLiveView(req, res, session);
+      return;
+    }
+
+    await proxyLiveView(req, res, session);
+  });
+
+  return publicRouter;
+}
+
+export default router;