@telemetryos/cli 1.11.0 → 1.13.0

package/dist/services/run-server.js

@@ -3,11 +3,20 @@ import { readFile } from 'fs/promises';
 import { fileURLToPath } from 'url';
 import http from 'http';
 import path from 'path';
-import readable from 'readline/promises';
+import { createInterface } from 'readline/promises';
 import serveHandler from 'serve-handler';
 import pkg from '../../package.json' with { type: 'json' };
 import { loadProjectConfig } from './project-config.js';
-import { ansi } from '../utils/ansi.js';
+import { ansi, ansiRegex } from '../utils/ansi.js';
+// import { handlePublishCommand } from '../commands/publish.js'
+const IMAGE_MIME_TYPES = {
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.png': 'image/png',
+    '.gif': 'image/gif',
+    '.svg': 'image/svg+xml',
+    '.webp': 'image/webp',
+};
 export async function runServer(projectPath, flags) {
     printSplashScreen();
     projectPath = path.resolve(process.cwd(), projectPath);
@@ -21,6 +30,8 @@ export async function runServer(projectPath, flags) {
     }
     await serveDevelopmentApplicationHostUI(projectPath, flags.port, projectConfig);
     await serveTelemetryApplication(projectPath, projectConfig);
+    // Print ready message after Vite is confirmed ready
+    printServerInfo(flags.port);
 }
 async function serveDevelopmentApplicationHostUI(projectPath, port, projectConfig) {
     const hostUiPath = await import.meta.resolve('@telemetryos/development-application-host-ui/dist');
@@ -34,32 +45,12 @@ async function serveDevelopmentApplicationHostUI(projectPath, port, projectConfi
             res.end(JSON.stringify(projectConfig));
             return;
         }
+        if (url.pathname === '/__tos-logo__') {
+            await serveImageFile(res, projectPath, projectConfig.logoPath, 'logo');
+            return;
+        }
         if (url.pathname === '/__tos-thumbnail__') {
-            if (!projectConfig.thumbnailPath) {
-                res.statusCode = 404;
-                res.end('No thumbnail configured');
-                return;
-            }
-            const thumbnailFullPath = path.join(projectPath, projectConfig.thumbnailPath);
-            try {
-                const imageData = await readFile(thumbnailFullPath);
-                const ext = path.extname(projectConfig.thumbnailPath).toLowerCase();
-                const mimeTypes = {
-                    '.jpg': 'image/jpeg',
-                    '.jpeg': 'image/jpeg',
-                    '.png': 'image/png',
-                    '.gif': 'image/gif',
-                    '.svg': 'image/svg+xml',
-                    '.webp': 'image/webp',
-                };
-                const contentType = mimeTypes[ext] || 'application/octet-stream';
-                res.setHeader('Content-Type', contentType);
-                res.end(imageData);
-            }
-            catch {
-                res.statusCode = 404;
-                res.end('Thumbnail file not found');
-            }
+            await serveImageFile(res, projectPath, projectConfig.thumbnailPath, 'thumbnail');
             return;
         }
         if (url.pathname === '/__dev_proxy__' && req.method === 'POST' && res) {
@@ -122,49 +113,184 @@ async function serveDevelopmentApplicationHostUI(projectPath, port, projectConfi
             }
             return;
         }
+        // TODO: Publish endpoint disabled until auth is working
+        // if (url.pathname === '/__publish__') {
+        //   if (req.method !== 'GET') {
+        //     res.statusCode = 405
+        //     res.end('Method not allowed')
+        //     return
+        //   }
+        //
+        //   // Set SSE headers
+        //   res.setHeader('Content-Type', 'text/event-stream')
+        //   res.setHeader('Cache-Control', 'no-cache')
+        //   res.setHeader('Connection', 'keep-alive')
+        //
+        //   const sendEvent = (event: string, data: any) => {
+        //     res.write(`event: ${event}\n`)
+        //     res.write(`data: ${JSON.stringify(data)}\n\n`)
+        //   }
+        //
+        //   try {
+        //     sendEvent('state', { state: 'starting' })
+        //
+        //     await handlePublishCommand(
+        //       projectPath,
+        //       {},
+        //       {
+        //         onLog: (line: string) => {
+        //           sendEvent('log', { message: line })
+        //         },
+        //         onStateChange: (state: string) => {
+        //           sendEvent('state', { state })
+        //         },
+        //         onComplete: (data: { success: boolean; buildIndex?: number; duration?: string }) => {
+        //           sendEvent('complete', data)
+        //           res.end()
+        //         },
+        //         onError: (error: Error) => {
+        //           const isAuthError =
+        //             error.message.includes('authenticate') ||
+        //             error.message.includes('Not authenticated')
+        //           sendEvent('error', {
+        //             error: error.message,
+        //             code: isAuthError ? 'AUTH_REQUIRED' : 'PUBLISH_FAILED',
+        //             message: isAuthError
+        //               ? "Run 'tos auth' in the terminal to authenticate"
+        //               : error.message,
+        //           })
+        //           res.end()
+        //         },
+        //       },
+        //     )
+        //   } catch (error) {
+        //     sendEvent('error', {
+        //       error: (error as Error).message,
+        //       code: 'UNEXPECTED_ERROR',
+        //       message: (error as Error).message,
+        //     })
+        //     res.end()
+        //   }
+        //   return
+        // }
         serveHandler(req, res, serveConfig).catch((err) => {
             console.error('Error handling request:', err);
             res.statusCode = 500;
             res.end('Internal Server Error');
         });
     });
-    printServerInfo(port);
     server.listen(port);
 }
-async function serveTelemetryApplication(rootPath, projectConfig) {
-    var _a;
-    if (!((_a = projectConfig === null || projectConfig === void 0 ? void 0 : projectConfig.devServer) === null || _a === void 0 ? void 0 : _a.runCommand)) {
-        console.log('No value in config at devServer.runCommand');
+async function serveImageFile(res, projectPath, filePath, label) {
+    if (!filePath) {
+        res.statusCode = 404;
+        res.setHeader('Content-Type', 'text/plain; charset=utf-8');
+        res.end(`No ${label} configured`);
         return;
     }
-    const runCommand = projectConfig.devServer.runCommand;
-    const binPath = path.join(rootPath, 'node_modules', '.bin');
-    const childProcess = spawn(runCommand, {
-        shell: true,
-        env: {
-            ...process.env,
-            FORCE_COLOR: '1',
-            PATH: `${binPath}${path.delimiter}${process.env.PATH}`,
-        },
-        stdio: ['ignore', 'pipe', 'pipe'],
-        cwd: rootPath,
-    });
-    const stdoutReadline = readable.createInterface({
-        input: childProcess.stdout,
-        crlfDelay: Infinity,
-    });
-    const stderrReadline = readable.createInterface({
-        input: childProcess.stderr,
-        crlfDelay: Infinity,
-    });
-    stdoutReadline.on('line', (line) => {
-        console.log(`[application]: ${line}`);
-    });
-    stderrReadline.on('line', (line) => {
-        console.error(`[application]: ${line}`);
-    });
-    process.on('exit', () => {
-        childProcess.kill();
+    try {
+        const fullPath = path.resolve(projectPath, filePath);
+        if (!fullPath.startsWith(path.resolve(projectPath) + path.sep) &&
+            fullPath !== path.resolve(projectPath)) {
+            res.statusCode = 403;
+            res.setHeader('Content-Type', 'text/plain; charset=utf-8');
+            res.end('Forbidden: path escapes project root');
+            return;
+        }
+        const imageData = await readFile(fullPath);
+        const ext = path.extname(filePath).toLowerCase();
+        const contentType = IMAGE_MIME_TYPES[ext] || 'application/octet-stream';
+        res.setHeader('Content-Type', contentType);
+        res.end(imageData);
+    }
+    catch (error) {
+        res.setHeader('Content-Type', 'text/plain; charset=utf-8');
+        if ((error === null || error === void 0 ? void 0 : error.code) === 'ENOENT') {
+            res.statusCode = 404;
+            res.end(`${label.charAt(0).toUpperCase() + label.slice(1)} file not found`);
+        }
+        else {
+            res.statusCode = 500;
+            res.end(`Error reading ${label}: ${(error === null || error === void 0 ? void 0 : error.message) || 'unknown error'}`);
+        }
+    }
+}
+async function serveTelemetryApplication(rootPath, projectConfig) {
+    return new Promise((resolve, reject) => {
+        var _a;
+        if (!((_a = projectConfig === null || projectConfig === void 0 ? void 0 : projectConfig.devServer) === null || _a === void 0 ? void 0 : _a.runCommand)) {
+            console.log('No value in config at devServer.runCommand');
+            resolve();
+            return;
+        }
+        const runCommand = projectConfig.devServer.runCommand;
+        const binPath = path.join(rootPath, 'node_modules', '.bin');
+        const childProcess = spawn(runCommand, {
+            shell: true,
+            env: {
+                ...process.env,
+                FORCE_COLOR: '1',
+                PATH: `${binPath}${path.delimiter}${process.env.PATH}`,
+            },
+            stdio: ['ignore', 'pipe', 'pipe'],
+            cwd: rootPath,
+        });
+        const stdoutReadline = createInterface({
+            input: childProcess.stdout,
+            crlfDelay: Infinity,
+        });
+        const stderrReadline = createInterface({
+            input: childProcess.stderr,
+            crlfDelay: Infinity,
+        });
+        let cleaned = false;
+        const cleanup = () => {
+            if (cleaned)
+                return;
+            cleaned = true;
+            process.removeListener('exit', onParentExit);
+            clearTimeout(timeoutHandle);
+            childProcess.kill();
+            stdoutReadline.close();
+            stderrReadline.close();
+        };
+        const onParentExit = () => {
+            console.log('Shutting down development server...');
+            cleanup();
+        };
+        process.on('exit', onParentExit);
+        const timeoutHandle = setTimeout(() => {
+            cleanup();
+            reject(new Error('Vite dev server did not start within 30 seconds'));
+        }, 30000);
+        let viteReady = false;
+        stdoutReadline.on('line', (line) => {
+            console.log(`[application]: ${line}`);
+            // Detect Vite ready signal
+            if (!viteReady) {
+                const cleanLine = line.replace(ansiRegex, '');
+                if (cleanLine.includes('VITE') && cleanLine.includes('ready in')) {
+                    viteReady = true;
+                    clearTimeout(timeoutHandle);
+                    resolve();
+                }
+            }
+        });
+        stderrReadline.on('line', (line) => {
+            console.error(`[application]: ${line}`);
+        });
+        childProcess.on('error', (error) => {
+            if (!viteReady) {
+                cleanup();
+                reject(error);
+            }
+        });
+        childProcess.on('close', (code) => {
+            if (!viteReady) {
+                cleanup();
+                reject(new Error(`Dev server process exited with code ${code} before becoming ready`));
+            }
+        });
     });
 }
 function printSplashScreen() {

package/dist/utils/ansi.d.ts

@@ -8,3 +8,4 @@ export declare const ansi: {
     readonly dim: "\u001B[2m";
     readonly reset: "\u001B[0m";
 };
+export declare const ansiRegex: RegExp;

package/dist/utils/ansi.js

@@ -8,3 +8,4 @@ export const ansi = {
     dim: '\u001b[2m',
     reset: '\u001b[0m',
 };
+export const ansiRegex = new RegExp(String.fromCharCode(27) + '\\[[0-9;]*m', 'g');

package/dist/utils/template.d.ts

@@ -0,0 +1,2 @@
+export declare const templatesDir: string;
+export declare function copyDir(source: string, destination: string, replacements: Record<string, string>, progressFn: (createdFilePath: string) => void): Promise<void>;

package/dist/utils/template.js

@@ -0,0 +1,30 @@
+import fs from 'fs/promises';
+import path from 'path';
+export const templatesDir = path.join(import.meta.dirname, '../../templates');
+const ignoredTemplateFiles = ['.DS_Store', 'thumbs.db', 'node_modules', '.git', 'dist'];
+const dotfileNames = ['_gitignore', '_claude'];
+export async function copyDir(source, destination, replacements, progressFn) {
+    const dirListing = await fs.readdir(source);
+    for (const dirEntry of dirListing) {
+        if (ignoredTemplateFiles.includes(dirEntry))
+            continue;
+        const sourcePath = path.join(source, dirEntry);
+        const destinationPath = path.join(destination, dotfileNames.includes(dirEntry) ? `.${dirEntry.slice(1)}` : dirEntry);
+        const stats = await fs.stat(sourcePath);
+        if (stats.isDirectory()) {
+            await fs.mkdir(destinationPath, { recursive: true });
+            await copyDir(sourcePath, destinationPath, replacements, progressFn);
+        }
+        else if (stats.isFile()) {
+            await copyFile(sourcePath, destinationPath, replacements, progressFn);
+        }
+    }
+}
+async function copyFile(source, destination, replacements, progressFn) {
+    let contents = await fs.readFile(source, 'utf-8');
+    for (const [key, value] of Object.entries(replacements)) {
+        contents = contents.replace(new RegExp(`{{${key}}}`, 'g'), value);
+    }
+    await fs.writeFile(destination, contents, 'utf-8');
+    progressFn(destination);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telemetryos/cli",
-  "version": "1.11.0",
+  "version": "1.13.0",
   "description": "The official TelemetryOS application CLI package. Use it to build applications that run on the TelemetryOS platform",
   "type": "module",
   "bin": {
@@ -25,7 +25,7 @@
   "license": "",
   "repository": "github:TelemetryTV/Application-API",
   "dependencies": {
-    "@telemetryos/development-application-host-ui": "^1.11.0",
+    "@telemetryos/development-application-host-ui": "^1.13.0",
     "@types/serve-handler": "^6.1.4",
     "commander": "^14.0.0",
     "ignore": "^6.0.2",
@@ -43,8 +43,8 @@
     "eslint-plugin-prettier": "^5.4.0",
     "globals": "^16.0.0",
     "prettier": "^3.5.3",
-    "typescript-eslint": "^8.49.0",
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.49.0"
   },
   "scripts": {
     "tos": "pnpm build && node dist/index.js",

package/templates/{vite-react-typescript → claude-code}/CLAUDE.md

@@ -16,19 +16,21 @@ tos serve          # Start dev server (or: npm run dev)
 Both the render and settings mounts points are visible in the development host.
 The Render mount point is presented in a resizable pane.
 The Settings mount point shows in the right sidebar.
+The Web mount point (if configured) appears as a tab in the development host, displayed in the same area as the other mount points.
 
 **The development host is already running!** The user has already started it and the agent doesn't need to run it
 
 ## Architecture
 
-TelemetryOS apps have two mount points:
+TelemetryOS apps have at least two mount points. Apps that need a browser-accessible interface add a third: the Web mount point.
 
 | Mount | Purpose | Runs On |
 |-------|---------|---------|
 | `/render` | Content displayed on devices | Physical device (TV, kiosk) |
 | `/settings` | Configuration UI | Studio admin portal |
+| `/web` (optional) | Browser-accessible interface | Any browser (phone, tablet, desktop) |
 
-Settings and Render communicate via instance store hooks.
+Instance store hooks sync Settings ↔ Render. Application store hooks are accessible from Settings, Render, and Web. Web views typically use application and dynamic namespace store hooks for their data.
 
 ## Project Structure
 
@@ -38,7 +40,10 @@ src/
 ├── App.tsx          # Mount point routing
 ├── views/
 │   ├── Settings.tsx # Configuration UI
-│   └── Render.tsx   # Display content
+│   ├── Render.tsx   # Display content
+│   ├── Render.css   # Render styles
+│   ├── Web.tsx      # Browser interface (if using web)
+│   └── Web.css      # Web view styles (if using web)
 └── hooks/
     └── store.ts     # Store state hooks
 ```
@@ -60,6 +65,7 @@ export const useUnitsState = createUseInstanceStoreState<'imperial' | 'metric'>(
 import { useCityState } from '../hooks/store'
 
 const [isLoading, city, setCity] = useCityState()
+if (isLoading) return <div>Loading...</div>
 ```
 
 ### Settings Components
@@ -113,6 +119,7 @@ const response = await proxy().fetch('https://api.example.com/data')
 | Adding ANY Settings UI | `tos-settings-ui` | SDK components are required - raw HTML won't work |
 | Adding store keys | `tos-store-sync` | Hook patterns ensure Settings↔Render sync |
 | Building multi-mode apps | `tos-multi-mode` | Entity-scoped data, mode switching, namespace patterns |
+| Building web views | `tos-web-ui-design` | Web mount point routing, styling, store access |
 | Calling external APIs | `tos-proxy-fetch` | Proxy patterns prevent CORS errors |
 | Media library access | `tos-media-api` | SDK media methods and types |
 | Weather integration | `tos-weather-api` | API-specific patterns and credentials |