@telemetryos/cli 1.4.4 → 1.5.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @telemetryos/cli
 
+## 1.5.1
+
+### Patch Changes
+
+- Update cli enforce correct qs params
+- Updated dependencies
+  - @telemetryos/development-application-host-ui@1.5.1
+
+## 1.5.0
+
+### Minor Changes
+
+- Add message interceptors for root applications.
+
+  This allows root applications to listen for messages from their descendant
+  applications, and implement custom functionality those applications
+  can use, or allow for interop.
+
+### Patch Changes
+
+- Updated dependencies
+  - @telemetryos/development-application-host-ui@1.5.0
+
 ## 1.4.4
 
 ### Patch Changes

package/dist/commands/auth.d.ts

@@ -0,0 +1,2 @@
+import { Command } from 'commander';
+export declare const authCommand: Command;

package/dist/commands/auth.js

@@ -0,0 +1,67 @@
+import { Command } from 'commander';
+import inquirer from 'inquirer';
+import { loadConfig, saveConfig } from '../services/config.js';
+export const authCommand = new Command('auth')
+    .description('Authenticate with TelemetryOS by saving your API token')
+    .option('-t, --token <string>', 'API token (skip interactive prompt)')
+    .option('-f, --force', 'Replace existing token without confirmation')
+    .action(handleAuthCommand);
+function maskToken(token) {
+    if (token.length <= 8)
+        return '****';
+    return `${token.slice(0, 4)}...${token.slice(-4)}`;
+}
+function validateToken(input) {
+    if (!input || input.trim().length === 0) {
+        return 'Token cannot be empty';
+    }
+    const trimmed = input.trim();
+    if (!/^[a-f0-9-]+$/i.test(trimmed)) {
+        return 'Token must be a valid string';
+    }
+    if (trimmed.length < 24) {
+        return 'Token must be at least 24 characters';
+    }
+    return true;
+}
+async function handleAuthCommand(options) {
+    let token = options.token;
+    const existingConfig = await loadConfig();
+    const existingToken = existingConfig === null || existingConfig === void 0 ? void 0 : existingConfig.apiToken;
+    if (existingToken && !options.force) {
+        const { confirm } = await inquirer.prompt([
+            {
+                type: 'confirm',
+                name: 'confirm',
+                message: `A token already exists (${maskToken(existingToken)}). Do you want to replace it?`,
+                default: false,
+            },
+        ]);
+        if (!confirm) {
+            console.log('Authentication cancelled.');
+            return;
+        }
+    }
+    if (token) {
+        const validation = validateToken(token);
+        if (validation !== true) {
+            console.error(validation);
+            process.exit(1);
+        }
+        token = token.trim();
+    }
+    else {
+        console.log('In Studio, go to Settings > API Tokens to get your API token.\n');
+        const answers = await inquirer.prompt([
+            {
+                type: 'input',
+                name: 'token',
+                message: 'Paste your API token:',
+                validate: validateToken,
+            },
+        ]);
+        token = answers.token.trim();
+    }
+    await saveConfig({ ...existingConfig, apiToken: token });
+    console.log('API token saved successfully!');
+}

package/dist/commands/init.js

@@ -1,5 +1,5 @@
 import { Command } from 'commander';
-import { generateApplication } from '../generate-application.js';
+import { generateApplication } from '../services/generate-application.js';
 import inquirer from 'inquirer';
 import path from 'path';
 export const initCommand = new Command('init')
@@ -22,21 +22,21 @@ async function handleInitCommand(projectName, options) {
             type: 'input',
             name: 'name',
             message: 'What is the name of your application?',
-            validate: (input) => input.length > 0 || 'Application name cannot be empty'
+            validate: (input) => input.length > 0 || 'Application name cannot be empty',
         });
     if (!description)
         questions.push({
             type: 'input',
             name: 'description',
             message: 'What is the description of your application?',
-            default: 'A telemetryOS application'
+            default: 'A telemetryOS application',
         });
     if (!author)
         questions.push({
             type: 'input',
             name: 'author',
             message: 'Who is the author of your application?',
-            default: ''
+            default: '',
         });
     if (!version)
         questions.push({
@@ -44,16 +44,14 @@ async function handleInitCommand(projectName, options) {
             name: 'version',
             message: 'What is the version of your application?',
             default: '0.1.0',
-            validate: (input) => /^\d+\.\d+\.\d+(-.+)?$/.test(input) || 'Version must be in semver format (e.g. 1.0.0)'
+            validate: (input) => /^\d+\.\d+\.\d+(-.+)?$/.test(input) || 'Version must be in semver format (e.g. 1.0.0)',
         });
     if (!template)
         questions.push({
             type: 'list',
             name: 'template',
             message: 'Which template would you like to use?',
-            choices: [
-                { name: 'Vite + React + TypeScript', value: 'vite-react-typescript' }
-            ]
+            choices: [{ name: 'Vite + React + TypeScript', value: 'vite-react-typescript' }],
         });
     if (questions.length !== 0) {
         const answers = await inquirer.prompt(questions);
@@ -78,6 +76,6 @@ async function handleInitCommand(projectName, options) {
         projectPath,
         progressFn: (createdFilePath) => {
             console.log(`.${path.sep}${path.relative(process.cwd(), createdFilePath)}`);
-        }
+        },
     });
 }

package/dist/commands/serve.js

@@ -1,5 +1,5 @@
 import { Command } from 'commander';
-import { runServer } from '../run-server.js';
+import { runServer } from '../services/run-server.js';
 export const serveCommand = new Command('serve')
     .description('Serves a telemetryOS application locally for development')
     .option('-p, --port <number>', 'Port to run the development ui on', '6969')

package/dist/generate-application.js

@@ -1,63 +1,27 @@
-import { spawn } from 'child_process';
-import fs from 'fs/promises';
-import path from 'path';
-const ignoredTemplateFiles = ['.DS_Store', 'thumbs.db', 'node_modules', '.git', 'dist'];
+import fs from "fs/promises";
+import path from "path";
+const ignoredTelemplateFiles = [
+    '.DS_Store',
+    'thumbs.db',
+    'node_modules',
+    '.git',
+    'dist'
+];
 const templatesDir = path.join(import.meta.dirname, '../templates');
 export async function generateApplication(options) {
     const { name, description, author, version, template, projectPath, progressFn } = options;
     await fs.mkdir(projectPath, { recursive: true });
     await copyDir(path.join(templatesDir, template), projectPath, {
         name,
-        version,
         description,
         author,
+        version
     }, progressFn);
-    // Install latest versions of @telemetryos/sdk and @telemetryos/cli
-    console.log('\nInstalling dependencies...');
-    await installPackages(projectPath);
-}
-async function installPackages(projectPath) {
-    // Install SDK as a regular dependency
-    await new Promise((resolve, reject) => {
-        const sdkInstall = spawn('npm', ['install', '@telemetryos/sdk'], {
-            cwd: projectPath,
-            stdio: 'inherit',
-        });
-        sdkInstall.on('close', (code) => {
-            if (code === 0) {
-                resolve();
-            }
-            else {
-                reject(new Error(`npm install @telemetryos/sdk failed with code ${code}`));
-            }
-        });
-        sdkInstall.on('error', (error) => {
-            reject(error);
-        });
-    });
-    // Install CLI as a dev dependency
-    await new Promise((resolve, reject) => {
-        const cliInstall = spawn('npm', ['install', '-D', '@telemetryos/cli'], {
-            cwd: projectPath,
-            stdio: 'inherit',
-        });
-        cliInstall.on('close', (code) => {
-            if (code === 0) {
-                resolve();
-            }
-            else {
-                reject(new Error(`npm install -D @telemetryos/cli failed with code ${code}`));
-            }
-        });
-        cliInstall.on('error', (error) => {
-            reject(error);
-        });
-    });
 }
 async function copyDir(source, destination, replacements, progressFn) {
     const dirListing = await fs.readdir(source);
     for (const dirEntry of dirListing) {
-        if (ignoredTemplateFiles.includes(dirEntry))
+        if (ignoredTelemplateFiles.includes(dirEntry))
             continue;
         const sourcePath = path.join(source, dirEntry);
         const destinationPath = path.join(destination, dirEntry);

package/dist/index.js

@@ -1,7 +1,9 @@
 #!/usr/bin/env node
+import { authCommand } from './commands/auth.js';
 import { initCommand } from './commands/init.js';
 import { rootCommand } from './commands/root.js';
 import { serveCommand } from './commands/serve.js';
+rootCommand.addCommand(authCommand);
 rootCommand.addCommand(serveCommand);
 rootCommand.addCommand(initCommand);
 rootCommand.parse(process.argv);

package/dist/run-server.js

@@ -4,35 +4,10 @@ import http from 'http';
 import path from 'path';
 import readable from 'readline/promises';
 import serveHandler from 'serve-handler';
-import z from 'zod';
-const ansiWhite = '\u001b[37m';
 const ansiYellow = '\u001b[33m';
 const ansiCyan = '\u001b[36m';
 const ansiBold = '\u001b[1m';
 const ansiReset = '\u001b[0m';
-const mountPointSchema = z.object({
-    path: z.string(),
-});
-const workerScriptSchema = z.object({
-    path: z.string(),
-});
-const containerSchema = z.object({
-    image: z.string(),
-});
-const configSchema = z.object({
-    name: z.string().optional(),
-    version: z.string().optional(),
-    thumbnailPath: z.string().optional(),
-    mountPoints: z.record(z.string(), z.union([mountPointSchema, z.string()])).optional(),
-    workerScripts: z.record(z.string(), z.union([workerScriptSchema, z.string()])).optional(),
-    containers: z.record(z.string(), z.union([containerSchema, z.string()])).optional(),
-    devServer: z
-        .object({
-        runCommand: z.string().optional(),
-        url: z.string(),
-    })
-        .optional(),
-});
 export async function runServer(projectPath, flags) {
     printSplashScreen();
     projectPath = path.resolve(process.cwd(), projectPath);
@@ -41,17 +16,8 @@ export async function runServer(projectPath, flags) {
         console.error('No telemetry configuration found. Are you in the right directory?');
         process.exit(1);
     }
-    const validationResult = configSchema.safeParse(telemetryConfig);
-    if (!validationResult.success) {
-        console.error('Invalid telemetry.config.json:');
-        validationResult.error.issues.forEach((issue) => {
-            console.error(`  ${issue.path.join('.')}: ${issue.message}`);
-        });
-        console.error('\n');
-        process.exit(1);
-    }
-    await serveDevelopmentApplicationHostUI(flags.port, validationResult.data);
-    await serveTelemetryApplication(projectPath, validationResult.data);
+    await serveDevelopmentApplicationHostUI(flags.port, telemetryConfig);
+    await serveTelemetryApplication(projectPath, telemetryConfig);
 }
 async function serveDevelopmentApplicationHostUI(port, telemetryConfig) {
     const hostUiPath = await import.meta.resolve('@telemetryos/development-application-host-ui/dist');
@@ -75,10 +41,8 @@ async function serveDevelopmentApplicationHostUI(port, telemetryConfig) {
 }
 async function serveTelemetryApplication(rootPath, telemetryConfig) {
     var _a;
-    if (!((_a = telemetryConfig === null || telemetryConfig === void 0 ? void 0 : telemetryConfig.devServer) === null || _a === void 0 ? void 0 : _a.runCommand)) {
-        console.log('No value in config at devServer.runCommand');
+    if (!((_a = telemetryConfig === null || telemetryConfig === void 0 ? void 0 : telemetryConfig.devServer) === null || _a === void 0 ? void 0 : _a.runCommand))
         return;
-    }
     const runCommand = telemetryConfig.devServer.runCommand;
     const binPath = path.join(rootPath, 'node_modules', '.bin');
     const childProcess = spawn(runCommand, {
@@ -117,14 +81,19 @@ async function loadConfigFile(rootPath) {
     }
 }
 function printSplashScreen() {
-    console.log(`
-
-     ${ansiWhite} █       █                  █          ${ansiYellow}▄▀▀▀▄ ▄▀▀▀▄
-     ${ansiWhite} █       █                  █          ${ansiYellow}█   █ █
-     ${ansiWhite}▀█▀ ▄▀▀▄ █ ▄▀▀▄ █▀▄▀▄ ▄▀▀▄ ▀█▀ █▄▀ █ █ ${ansiYellow}█   █  ▀▀▀▄
-     ${ansiWhite} █  █▀▀▀ █ █▀▀▀ █ █ █ █▀▀▀  █  █   █ █ ${ansiYellow}█   █     █
-     ${ansiWhite} ▀▄ ▀▄▄▀ █ ▀▄▄▀ █ █ █ ▀▄▄▀  ▀▄ █    █  ${ansiYellow}▀▄▄▄▀ ▀▄▄▄▀
-     ${ansiWhite}                                   ▄▀  ${ansiReset}`);
+    console.log(`${ansiYellow}
+                                            ▄             ▄
+                                            █ █         ▄▀▐
+                                            █ █ █     ▄▀  ▐
+  █       █                  █              █ █ █ █  ▀   ▄▀
+  █       █                  █                █ ▛ ▄ █   ▀  
+ ▀█▀ ▄▀▀▄ █ ▄▀▀▄ █▀▄▀▄ ▄▀▀▄ ▀█▀ █▄▀ █ █         ▄▀  █ █    
+  █  █▀▀▀ █ █▀▀▀ █ █ █ █▀▀▀  █  █   █ █       ▄▀    █ █ █  
+  ▀▄ ▀▄▄▀ █ ▀▄▄▀ █ █ █ ▀▄▄▀  ▀▄ █    █      ▄▀   ▄▀ ▀ █ █ █
+                                    ▄▀      ▌  ▄▀     ▀ █ █
+                                            ▌▄▀         ▀ █
+                                            ▀             ▀
+${ansiReset}`);
 }
 function printServerInfo(port) {
     console.log(`

package/dist/services/config.d.ts

@@ -0,0 +1,6 @@
+export declare const configPath: string;
+export type Config = {
+    apiToken?: string;
+};
+export declare function loadConfig(): Promise<Config | null>;
+export declare function saveConfig(config: Config): Promise<void>;

package/dist/services/config.js

@@ -0,0 +1,16 @@
+import { readFile, writeFile } from 'fs/promises';
+import { homedir } from 'os';
+import path from 'path';
+export const configPath = path.join(homedir(), '.telemetryos-cli.json');
+export async function loadConfig() {
+    try {
+        const content = await readFile(configPath, 'utf-8');
+        return JSON.parse(content);
+    }
+    catch {
+        return null;
+    }
+}
+export async function saveConfig(config) {
+    await writeFile(configPath, JSON.stringify(config, null, 2));
+}

package/dist/services/generate-application.d.ts

@@ -0,0 +1,10 @@
+export type GenerateApplicationOptions = {
+    name: string;
+    description: string;
+    author: string;
+    version: string;
+    template: string;
+    projectPath: string;
+    progressFn: (createdFilePath: string) => void;
+};
+export declare function generateApplication(options: GenerateApplicationOptions): Promise<void>;

package/dist/services/generate-application.js

@@ -0,0 +1,82 @@
+import { spawn } from 'child_process';
+import fs from 'fs/promises';
+import path from 'path';
+const ignoredTemplateFiles = ['.DS_Store', 'thumbs.db', 'node_modules', '.git', 'dist'];
+const templatesDir = path.join(import.meta.dirname, '../templates');
+const dotfileNames = ['gitignore', 'npmrc', 'npmignore', 'env.example'];
+export async function generateApplication(options) {
+    const { name, description, author, version, template, projectPath, progressFn } = options;
+    await fs.mkdir(projectPath, { recursive: true });
+    await copyDir(path.join(templatesDir, template), projectPath, {
+        name,
+        version,
+        description,
+        author,
+    }, progressFn);
+    // Install latest versions of @telemetryos/sdk and @telemetryos/cli
+    console.log('\nInstalling dependencies...');
+    await installPackages(projectPath);
+}
+async function installPackages(projectPath) {
+    // Install SDK as a regular dependency
+    await new Promise((resolve, reject) => {
+        const sdkInstall = spawn('npm', ['install', '@telemetryos/sdk'], {
+            cwd: projectPath,
+            stdio: 'inherit',
+        });
+        sdkInstall.on('close', (code) => {
+            if (code === 0) {
+                resolve();
+            }
+            else {
+                reject(new Error(`npm install @telemetryos/sdk failed with code ${code}`));
+            }
+        });
+        sdkInstall.on('error', (error) => {
+            reject(error);
+        });
+    });
+    // Install CLI as a dev dependency
+    await new Promise((resolve, reject) => {
+        const cliInstall = spawn('npm', ['install', '-D', '@telemetryos/cli'], {
+            cwd: projectPath,
+            stdio: 'inherit',
+        });
+        cliInstall.on('close', (code) => {
+            if (code === 0) {
+                resolve();
+            }
+            else {
+                reject(new Error(`npm install -D @telemetryos/cli failed with code ${code}`));
+            }
+        });
+        cliInstall.on('error', (error) => {
+            reject(error);
+        });
+    });
+}
+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}` : 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/dist/services/run-server.d.ts

@@ -0,0 +1,5 @@
+type Flags = {
+    port: number;
+};
+export declare function runServer(projectPath: string, flags: Flags): Promise<void>;
+export {};

package/dist/services/run-server.js

@@ -0,0 +1,226 @@
+import { spawn } from 'child_process';
+import { readFile } from 'fs/promises';
+import http from 'http';
+import path from 'path';
+import readable from 'readline/promises';
+import serveHandler from 'serve-handler';
+import z from 'zod';
+import pkg from '../../package.json' with { type: 'json' };
+const ansiWhite = '\u001b[37m';
+const ansiYellow = '\u001b[33m';
+const ansiCyan = '\u001b[36m';
+const ansiBold = '\u001b[1m';
+const ansiReset = '\u001b[0m';
+const mountPointSchema = z.object({
+    path: z.string(),
+});
+const workerScriptSchema = z.object({
+    path: z.string(),
+});
+const containerSchema = z.object({
+    image: z.string(),
+});
+const configSchema = z.object({
+    name: z.string().optional(),
+    version: z.string().optional(),
+    thumbnailPath: z.string().optional(),
+    mountPoints: z.record(z.string(), z.union([mountPointSchema, z.string()])).optional(),
+    workerScripts: z.record(z.string(), z.union([workerScriptSchema, z.string()])).optional(),
+    containers: z.record(z.string(), z.union([containerSchema, z.string()])).optional(),
+    devServer: z
+        .object({
+        runCommand: z.string().optional(),
+        url: z.string(),
+    })
+        .optional(),
+});
+export async function runServer(projectPath, flags) {
+    printSplashScreen();
+    projectPath = path.resolve(process.cwd(), projectPath);
+    const telemetryConfig = await loadConfigFile(projectPath);
+    if (!telemetryConfig) {
+        console.error('No telemetry configuration found. Are you in the right directory?');
+        process.exit(1);
+    }
+    const validationResult = configSchema.safeParse(telemetryConfig);
+    if (!validationResult.success) {
+        console.error('Invalid telemetry.config.json:');
+        validationResult.error.issues.forEach((issue) => {
+            console.error(`  ${issue.path.join('.')}: ${issue.message}`);
+        });
+        console.error('\n');
+        process.exit(1);
+    }
+    await serveDevelopmentApplicationHostUI(projectPath, flags.port, validationResult.data);
+    await serveTelemetryApplication(projectPath, validationResult.data);
+}
+async function serveDevelopmentApplicationHostUI(projectPath, port, telemetryConfig) {
+    const hostUiPath = await import.meta.resolve('@telemetryos/development-application-host-ui/dist');
+    const serveConfig = { public: hostUiPath.replace('file://', '') };
+    const server = http.createServer();
+    server.on('request', async (req, res) => {
+        var _a, _b;
+        const url = new URL(req.url, `http://${req.headers.origin}`);
+        if (url.pathname === '/__tos-config__') {
+            res.setHeader('Content-Type', 'application/json');
+            res.end(JSON.stringify(telemetryConfig));
+            return;
+        }
+        if (url.pathname === '/__tos-thumbnail__') {
+            if (!telemetryConfig.thumbnailPath) {
+                res.statusCode = 404;
+                res.end('No thumbnail configured');
+                return;
+            }
+            const thumbnailFullPath = path.join(projectPath, telemetryConfig.thumbnailPath);
+            try {
+                const imageData = await readFile(thumbnailFullPath);
+                const ext = path.extname(telemetryConfig.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');
+            }
+            return;
+        }
+        if (url.pathname === '/__dev_proxy__' && req.method === 'POST' && res) {
+            let body = '';
+            for await (const chunk of req) {
+                body += chunk;
+            }
+            try {
+                const { url, method, headers, body: requestBody } = JSON.parse(body);
+                const response = await fetch(url, {
+                    method,
+                    headers,
+                    body: requestBody !== null && requestBody !== void 0 ? requestBody : undefined,
+                });
+                const contentType = response.headers.get('content-type') || '';
+                const isJson = contentType.includes('application/json');
+                const isText = contentType.includes('text/') ||
+                    contentType.includes('application/javascript') ||
+                    contentType.includes('application/xml');
+                let responseBody;
+                let bodyType;
+                if (isJson) {
+                    const text = await response.text();
+                    responseBody = text ? JSON.parse(text) : null;
+                    bodyType = 'json';
+                }
+                else if (isText) {
+                    responseBody = await response.text();
+                    bodyType = 'text';
+                }
+                else {
+                    // Binary data - convert to base64 for JSON transport
+                    const arrayBuffer = await response.arrayBuffer();
+                    responseBody = Buffer.from(arrayBuffer).toString('base64');
+                    bodyType = 'binary';
+                }
+                const responseHeaders = {};
+                response.headers.forEach((value, key) => {
+                    responseHeaders[key] = value;
+                });
+                res.writeHead(200, { 'Content-Type': 'application/json' });
+                res.end(JSON.stringify({
+                    success: true,
+                    status: response.status,
+                    statusText: response.statusText,
+                    headers: responseHeaders,
+                    body: responseBody,
+                    bodyType,
+                    ok: response.ok,
+                    url: response.url,
+                }));
+            }
+            catch (error) {
+                res.writeHead(200, { 'Content-Type': 'application/json' });
+                res.end(JSON.stringify({
+                    success: false,
+                    errorMessage: `Proxy fetch failed: ${String(error)}`,
+                    errorCause: error.cause ? String((_b = (_a = error.cause) === null || _a === void 0 ? void 0 : _a.message) !== null && _b !== void 0 ? _b : error.cause) : undefined,
+                }));
+            }
+            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, telemetryConfig) {
+    var _a;
+    if (!((_a = telemetryConfig === null || telemetryConfig === void 0 ? void 0 : telemetryConfig.devServer) === null || _a === void 0 ? void 0 : _a.runCommand)) {
+        console.log('No value in config at devServer.runCommand');
+        return;
+    }
+    const runCommand = telemetryConfig.devServer.runCommand;
+    const binPath = path.join(rootPath, 'node_modules', '.bin');
+    const childProcess = spawn(runCommand, {
+        shell: true,
+        env: { ...process.env, FORCE_COLOR: '1', PATH: `${binPath}:${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();
+    });
+}
+async function loadConfigFile(rootPath) {
+    const configFilePath = path.join(rootPath, 'telemetry.config.json');
+    try {
+        const fileContent = await readFile(configFilePath, 'utf-8');
+        const config = JSON.parse(fileContent);
+        return config;
+    }
+    catch {
+        return null;
+    }
+}
+function printSplashScreen() {
+    console.log(`
+
+     ${ansiWhite} █       █                  █          ${ansiYellow}▄▀▀▀▄ ▄▀▀▀▄
+     ${ansiWhite} █       █                  █          ${ansiYellow}█   █ █
+     ${ansiWhite}▀█▀ ▄▀▀▄ █ ▄▀▀▄ █▀▄▀▄ ▄▀▀▄ ▀█▀ █▄▀ █ █ ${ansiYellow}█   █  ▀▀▀▄
+     ${ansiWhite} █  █▀▀▀ █ █▀▀▀ █ █ █ █▀▀▀  █  █   █ █ ${ansiYellow}█   █     █
+     ${ansiWhite} ▀▄ ▀▄▄▀ █ ▀▄▄▀ █ █ █ ▀▄▄▀  ▀▄ █    █  ${ansiYellow}▀▄▄▄▀ ▀▄▄▄▀
+     ${ansiWhite}                                   ▄▀  ${ansiReset}
+     v${pkg.version}`);
+}
+function printServerInfo(port) {
+    console.log(`
+╔═══════════════════════════════════════════════════════════╗
+║ ${ansiBold}Development environment running at: ${ansiCyan}http://localhost:${port}${ansiReset} ║
+╚═══════════════════════════════════════════════════════════╝
+`);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telemetryos/cli",
-  "version": "1.4.4",
+  "version": "1.5.1",
   "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.4.4",
+    "@telemetryos/development-application-host-ui": "^1.5.1",
     "@types/serve-handler": "^6.1.4",
     "commander": "^14.0.0",
     "inquirer": "^12.9.6",
@@ -42,6 +42,9 @@
     "eslint": "^9.26.0",
     "eslint-config-prettier": "^10.1.2",
     "eslint-plugin-prettier": "^5.4.0",
+    "globals": "^16.0.0",
+    "prettier": "^3.5.3",
+    "typescript-eslint": "^8.32.0",
     "typescript": "^5.8.3"
   },
   "scripts": {

package/templates/vite-react-typescript/assets/tos-app.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="258pt" height="258pt" viewBox="0 0 258 258" style="" preserveAspectRatio="xMidYMid meet">
+<g fill="#000000FF">
+<path d="M 50.000 2.594 C 26.451 7.639 7.292 27.262 2.532 51.208 C 0.208 62.898 0.258 195.123 2.591 206.643 C 6.873 227.792 21.909 245.496 41.686 252.675 C 52.935 256.758 62.175 257.162 135.500 256.771 C 197.509 256.441 205.104 256.227 210.465 254.658 C 232.534 248.202 248.346 232.415 254.695 210.500 C 256.258 205.103 256.466 197.335 256.760 133.195 C 257.134 51.729 257.005 49.878 249.920 35.226 C 242.061 18.972 225.455 6.257 207.185 2.503 C 196.815 0.372 59.999 0.451 50.000 2.594 M 218.171 67.655 C 219.177 68.565 220.000 70.360 220.000 71.644 C 220.000 74.019 217.097 85.638 214.346 94.269 C 212.009 101.603 210.642 102.000 187.705 102.000 C 170.049 102.000 168.159 102.167 166.622 103.865 C 165.656 104.932 160.251 123.192 153.980 146.574 C 146.078 176.037 142.457 187.988 140.988 189.460 C 139.175 191.274 137.454 191.536 125.419 191.829 C 105.566 192.311 104.849 191.534 109.420 174.500 C 110.748 169.550 115.247 152.778 119.417 137.229 C 123.588 121.680 127.000 107.932 127.000 106.679 C 127.000 102.305 125.651 102.000 106.300 102.000 C 89.333 102.000 87.854 101.854 86.000 100.000 C 84.900 98.900 84.000 97.434 84.000 96.742 C 84.000 96.050 85.538 89.872 87.417 83.012 C 90.090 73.257 91.409 70.045 93.473 68.270 L 96.112 66.000 156.227 66.000 C 210.762 66.000 216.512 66.154 218.171 67.655 M 113.171 112.655 C 114.177 113.565 115.000 115.215 115.000 116.322 C 115.000 119.129 109.072 140.911 107.719 143.079 C 105.740 146.247 102.139 147.000 88.953 147.000 C 77.333 147.000 75.794 146.794 74.000 145.000 C 72.900 143.900 72.001 142.438 72.002 141.750 C 72.004 139.717 77.964 117.689 79.145 115.352 C 80.934 111.808 83.867 111.139 97.921 111.068 C 109.071 111.011 111.652 111.280 113.171 112.655 M 77.495 66.636 C 80.995 67.979 80.987 71.343 77.456 84.594 C 75.311 92.642 73.282 98.164 71.996 99.451 C 70.173 101.276 68.473 101.536 56.419 101.829 C 36.114 102.322 35.816 101.938 41.058 82.083 C 45.310 65.978 45.281 66.000 62.474 66.000 C 69.823 66.000 76.583 66.286 77.495 66.636 "/></g>
+<g fill="#F7B435FF">
+<path d="M 93.473 68.270 C 91.409 70.045 90.090 73.257 87.417 83.012 C 85.538 89.872 84.000 96.050 84.000 96.742 C 84.000 97.434 84.900 98.900 86.000 100.000 C 87.854 101.854 89.333 102.000 106.300 102.000 C 125.651 102.000 127.000 102.305 127.000 106.679 C 127.000 107.932 123.588 121.680 119.417 137.229 C 115.247 152.778 110.748 169.550 109.420 174.500 C 104.849 191.534 105.566 192.311 125.419 191.829 C 137.454 191.536 139.175 191.274 140.988 189.460 C 142.457 187.988 146.078 176.037 153.980 146.574 C 160.251 123.192 165.656 104.932 166.622 103.865 C 168.159 102.167 170.049 102.000 187.705 102.000 C 210.642 102.000 212.009 101.603 214.346 94.269 C 217.097 85.638 220.000 74.019 220.000 71.644 C 220.000 70.360 219.177 68.565 218.171 67.655 C 216.512 66.154 210.762 66.000 156.227 66.000 L 96.112 66.000 93.473 68.270 "/></g>
+<g fill="#F7B435FF">
+<path d="M 82.365 112.169 C 79.454 113.579 78.540 115.677 75.032 129.000 C 71.441 142.634 71.453 142.453 74.000 145.000 C 75.794 146.794 77.333 147.000 88.953 147.000 C 102.139 147.000 105.740 146.247 107.719 143.079 C 109.072 140.911 115.000 119.129 115.000 116.322 C 115.000 111.825 112.301 110.995 97.921 111.068 C 90.540 111.105 83.539 111.601 82.365 112.169 "/></g>
+<g fill="#F7B435FF">
+<path d="M 46.614 68.250 C 44.748 69.931 43.343 73.430 41.058 82.083 C 35.816 101.938 36.114 102.322 56.419 101.829 C 68.473 101.536 70.173 101.276 71.996 99.451 C 73.282 98.164 75.311 92.642 77.456 84.594 C 80.987 71.343 80.995 67.979 77.495 66.636 C 76.583 66.286 69.823 66.000 62.474 66.000 C 50.023 66.000 48.941 66.154 46.614 68.250 "/></g>
+</svg>

package/templates/vite-react-typescript/gitignore

@@ -0,0 +1,26 @@
+# Dependencies
+node_modules
+
+# Build output
+dist
+
+# Environment variables
+.env
+.env.local
+
+# IDE
+.vscode
+.idea
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+npm-debug.log*
+pnpm-debug.log*
+yarn-debug.log*
+yarn-error.log*

package/templates/vite-react-typescript/src/views/Render.tsx

@@ -6,13 +6,16 @@ import wordMarkPath from '../../assets/telemetryos-wordmark.svg'
 export function Render() {
   const [subtitle, setSubtitle] = useState('')
 
-  const subscribeSubtitleEffect = () => {
-    store().instance.subscribe<string>('subtitle', (value) => {
-      const fallbackSubtitle = "Change this line in settings ⚙️ ↗️"
+  useEffect(() => {
+    const handler = (value?: string) => {
+      const fallbackSubtitle = 'Change this line in settings ⚙️ ↗️'
       setSubtitle(value ?? fallbackSubtitle)
-    }).catch(console.error)
-  }
-  useEffect(subscribeSubtitleEffect, [])
+    }
+    store().instance.subscribe<string>('subtitle', handler).catch(console.error)
+    return () => {
+      store().instance.unsubscribe('subtitle', handler).catch(console.error)
+    }
+  }, [])
 
   return (
     <div className="render">
@@ -22,7 +25,9 @@ export function Render() {
         <div className="render__hero-subtitle">{subtitle}</div>
       </div>
       <div className="render__docs-information">
-        <div className="render__docs-information-title">To get started, edit the Render.tsx and Settings.tsx files</div>
+        <div className="render__docs-information-title">
+          To get started, edit the Render.tsx and Settings.tsx files
+        </div>
         <div className="render__docs-information-text">
           Visit our documentation on building applications to learn more
         </div>

package/templates/vite-react-typescript/src/views/Settings.css

@@ -1,34 +1,36 @@
 .settings {
-  padding: 1.4rem;
+  padding: 16px;
+  font-family: 'Rubik', sans-serif;
+  font-feature-settings: "rlig" 1, "calt" 1;
 }
 
 .form-field {
   display: flex;
   flex-direction: column;
-  margin-bottom: 1.4rem;
+  margin-bottom: 12px;
 }
 
 .form-field-label {
-  font-size: 1.225rem;
-  margin-bottom: 0.4rem;
+  font-size: 12px;
+  margin-bottom: 6px;
   font-weight: 500;
 }
 
 .form-field-frame {
   display: flex;
-  border: 0.1rem solid rgb(100, 100, 100);
-  border-radius: 0.4rem;
-  background: rgb(30, 37, 43);
-  color: rgb(212, 212, 212);
+  border: 1px solid hsl(212 24% 19%);
+  border-radius: 6px;
+  background: hsl(212 28% 10%);
+  color: hsl(210 40% 88%);
 }
 
 .form-field-input {
   flex: 1;
-  font-size: 1.4rem;
+  font-size: 13px;
   line-height: 1em;
-  padding: 0.8rem;
+  padding: 8px 12px;
   border: none;
-  border-radius: 0.4rem;
+  border-radius: 6px;
   background: transparent;
-  color: rgb(212, 212, 212);
-}
+  color: hsl(210 40% 88%);
+}

package/templates/vite-react-typescript/src/views/Settings.tsx

@@ -2,38 +2,46 @@ import './Settings.css'
 
 import { useEffect, useState } from 'react'
 import { store } from '@telemetryos/sdk'
+import { useLayoutHeightSync } from '../hooks/useLayoutHeightSync'
 
 export function Settings() {
+  const containerRef = useLayoutHeightSync()
   const [subtitleText, setSubtitleText] = useState('')
   const [isLoadingValue, setIsLoadingValue] = useState(true)
 
-  const fetchSubtitleEffect = () => {
-    (async () => {
-      let subtitle = await store().instance.get<string>('subtitle')
-      if (subtitle !== undefined) {
-        setSubtitleText(subtitle)
-      } else {
-        const defaultSubtitle = "Change this line in settings ⚙️ ↗️"
-        await store().instance.set('subtitle', defaultSubtitle)
-        setSubtitleText(defaultSubtitle)
-      }
-      setIsLoadingValue(false)
-    })().catch(console.error)
-  }
-
-  useEffect(fetchSubtitleEffect, [])
+  useEffect(() => {
+    store()
+      .instance.get<string>('subtitle')
+      .then((subtitle) => {
+        if (subtitle !== undefined) {
+          setSubtitleText(subtitle)
+        } else {
+          const defaultSubtitle = 'Change this line in settings ⚙️ ↗️'
+          store().instance.set('subtitle', defaultSubtitle).catch(console.error)
+          setSubtitleText(defaultSubtitle)
+        }
+        setIsLoadingValue(false)
+      })
+      .catch(console.error)
+  }, [])
 
-  const handleSubtitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setSubtitleText(event.target.value)
-    store().instance.set('subtitle', event.target.value).catch(console.error)
+  const handleSubtitleChange = (subtitle: string) => {
+    setSubtitleText(subtitle)
+    store().instance.set('subtitle', subtitle).catch(console.error)
   }
 
   return (
-    <div className="settings">
+    <div ref={containerRef} className="settings">
       <div className="form-field">
         <div className="form-field-label">Subtitle Text</div>
         <div className="form-field-frame">
-          <input className="form-field-input" type="text" value={subtitleText} onChange={handleSubtitleChange} disabled={isLoadingValue} />
+          <input
+            className="form-field-input"
+            type="text"
+            value={subtitleText}
+            onChange={(e) => handleSubtitleChange(e.target.value)}
+            disabled={isLoadingValue}
+          />
         </div>
       </div>
     </div>

package/templates/vite-react-typescript/telemetry.config.json

@@ -1,5 +1,6 @@
 {
   "name": "{{name}}",
+  "thumbnailPath": "assets/tos-app.svg",
   "version": "{{version}}",
   "mountPoints": {
     "render": "/render",