@telemetryos/cli 1.10.0 → 1.12.0

package/dist/services/run-server.js

@@ -3,11 +3,11 @@ 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';
 export async function runServer(projectPath, flags) {
     printSplashScreen();
     projectPath = path.resolve(process.cwd(), projectPath);
@@ -21,6 +21,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');
@@ -122,49 +124,150 @@ 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');
-        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();
+    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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telemetryos/cli",
-  "version": "1.10.0",
+  "version": "1.12.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.10.0",
+    "@telemetryos/development-application-host-ui": "^1.12.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.md

@@ -15,7 +15,9 @@ tos serve          # Start dev server (or: npm run dev)
 **Development Host:** http://localhost:2026
 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 settings tab of the right sidebar.
+The Settings mount point shows in the right sidebar.
+
+**The development host is already running!** The user has already started it and the agent doesn't need to run it
 
 ## Architecture
 
@@ -100,12 +102,17 @@ const response = await proxy().fetch('https://api.example.com/data')
 
 **IMPORTANT:** You MUST invoke the relevant skill BEFORE writing code for these tasks:
 
+**For Render views:** ALWAYS read `tos-render-ui-design` first, then the appropriate specialized skill.
+
 | Task | Required Skill | Why |
 |------|----------------|-----|
 | Starting new project | `tos-requirements` | Gather requirements before coding MUST USE |
-| Building Render views | `tos-render-design` | Digital signage constraints, UI scaling, no hover/scroll |
+| Building ANY Render view | `tos-render-ui-design` | UI scaling foundation - ALWAYS read first |
+| Building digital signage | `tos-render-signage-design` | Display-only patterns (no interaction) |
+| Building interactive kiosk | `tos-render-kiosk-design` | Touch interaction, idle timeout, navigation |
 | 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 |
 | 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 |

package/templates/vite-react-typescript/_claude/skills/tos-architecture/SKILL.md

@@ -232,15 +232,11 @@ export function App() {
 
 ### Local Development
 
-```bash
-# Start dev server
-tos serve
-# Or: npm run dev
+**Development Host:** http://localhost:2026
+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.
 
-# Access locally:
-# Settings: http://localhost:3000/settings
-# Render:   http://localhost:3000/render
-```
 
 ### Build & Deploy
 
@@ -255,26 +251,6 @@ git add . && git commit -m "Update" && git push
 
 ## Common Patterns
 
-### Check Mount Point
-
-```typescript
-const isSettings = window.location.pathname === '/settings'
-const isRender = window.location.pathname === '/render'
-```
-
-### Conditional Features
-
-```typescript
-// In a shared component
-const isRender = window.location.pathname === '/render'
-
-// Only fetch external data in Render
-useEffect(() => {
-  if (!isRender) return
-  fetchExternalData()
-}, [isRender])
-```
-
 ### Handle Missing Config
 
 ```typescript

package/templates/vite-react-typescript/_claude/skills/tos-media-api/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: tos-media-api
-description: Access TelemetryOS Media Library for images, videos, and files. Use when building apps that display user-uploaded media content.
+description: Access TelemetryOS Media Library for images, videos, and files. Use when building apps that display or select user-uploaded media content.
 ---
 
 # TelemetryOS Media API
@@ -23,6 +23,10 @@ const tagged = await media().getAllByTag('banner')
 
 // Get single item by ID
 const item = await media().getById('content-id')
+
+// Open media picker (user selects from full-screen dialog)
+const selection = await media().openPicker()
+const imagesOnly = await media().openPicker({ accept: ['image/*'] })
 ```
 
 ## Response Types
@@ -61,6 +65,29 @@ interface MediaContent {
 }
 ```
 
+### MediaSelection
+
+Returned by `openPicker()` and used by `SettingsMediaSelect`.
+
+```typescript
+interface MediaSelection {
+  id: string
+  name: string
+  thumbnailUrl: string  // Thumbnail for preview
+  url: string           // Full content URL
+  contentType: string   // MIME type
+}
+```
+
+### MediaPickerOptions
+
+```typescript
+interface MediaPickerOptions {
+  accept?: string[]            // Content type filters: ['image/*', 'video/*']
+  currentValue?: MediaSelection // Pre-select current value in picker
+}
+```
+
 ## Common Patterns
 
 ### Folder Picker in Settings
@@ -123,6 +150,64 @@ export default function Settings() {
 }
 ```
 
+### Media Picker in Settings (SettingsMediaSelect)
+
+Use the built-in `SettingsMediaSelect` component to let users pick a media item. Opens a full-screen picker dialog in the host window.
+
+```typescript
+// hooks/store.ts
+import { createUseInstanceStoreState } from '@telemetryos/sdk/react'
+import type { MediaSelection } from '@telemetryos/sdk/react'
+
+export const useMediaState = createUseInstanceStoreState<MediaSelection | null>('selectedMedia', null)
+```
+
+```typescript
+// views/Settings.tsx
+import {
+  SettingsContainer,
+  SettingsField,
+  SettingsLabel,
+  SettingsMediaSelect,
+} from '@telemetryos/sdk/react'
+import { useMediaState } from '../hooks/store'
+
+export default function Settings() {
+  const [isLoading, selectedMedia, setSelectedMedia] = useMediaState()
+
+  return (
+    <SettingsContainer>
+      <SettingsField>
+        <SettingsLabel>Background Image</SettingsLabel>
+        <SettingsMediaSelect
+          value={selectedMedia}
+          onChange={setSelectedMedia}
+          accept={['image/*']}
+          disabled={isLoading}
+        />
+      </SettingsField>
+    </SettingsContainer>
+  )
+}
+```
+
+### Using openPicker() Directly
+
+For custom UI, call `media().openPicker()` directly instead of using the component.
+
+```typescript
+import { media } from '@telemetryos/sdk'
+
+const handleSelectMedia = async () => {
+  const selection = await media().openPicker({ accept: ['image/*'] })
+  if (selection) {
+    // selection has: id, name, thumbnailUrl, url, contentType
+    console.log('Selected:', selection.name, selection.url)
+  }
+  // selection is null if user cancelled
+}
+```
+
 ### Image Gallery in Render
 
 ```typescript
@@ -327,9 +412,11 @@ const activeContent = content.filter(item => {
 
 ## Tips
 
-1. **Use publicUrls[0]** - First URL is the primary CDN URL
-2. **Use thumbnailUrl for previews** - Smaller, faster loading
-3. **Filter by contentType** - Ensure you're displaying compatible content
-4. **Handle empty folders** - Show appropriate message when no content
-5. **Lazy load images** - Use `loading="lazy"` for galleries
-6. **Respect hidden flag** - Filter out hidden items unless intentional
+1. **Use `SettingsMediaSelect` for settings** - Preferred way to let users pick media in Settings views
+2. **Use `openPicker()` for custom UI** - When you need full control over the selection flow
+3. **Use publicUrls[0]** - First URL is the primary CDN URL
+4. **Use thumbnailUrl for previews** - Smaller, faster loading
+5. **Filter by contentType** - Ensure you're displaying compatible content
+6. **Handle empty folders** - Show appropriate message when no content
+7. **Lazy load images** - Use `loading="lazy"` for galleries
+8. **Respect hidden flag** - Filter out hidden items unless intentional