@telemetryos/cli 1.12.0 → 1.13.0

package/templates/{vite-react-typescript → claude-code}/_claude/skills/tos-architecture/SKILL.md

@@ -1,15 +1,15 @@
 ---
 name: tos-architecture
-description: Understand TelemetryOS two-mount-point architecture (Render vs Settings). Use when debugging mount-point issues or understanding how Settings and Render communicate.
+description: Understand TelemetryOS mount point architecture (Render, Settings, and optional Web). Use when debugging mount-point issues or understanding how mount points communicate through the store.
 ---
 
 # TelemetryOS Architecture
 
 TelemetryOS applications run on digital signage devices (TVs, kiosks, displays). Understanding the architecture is key to building effective apps.
 
-## Two Mount Points
+## Mount Points
 
-Every standard TOS app has two entry points:
+Every TOS app has at least two entry points (Render and Settings). Apps that need a browser-accessible interface add a third: the Web mount point.
 
 ### /render - Device Display
 
@@ -19,7 +19,7 @@ Every standard TOS app has two entry points:
 │   (TV, Kiosk, Digital Sign)     │
 │                                 │
 │  ┌───────────────────────────┐  │
-│  │     Chrome Browser        │  │
+│  │  TelemetryOS Electron App  │  │
 │  │  ┌─────────────────────┐  │  │
 │  │  │    Your App         │  │  │
 │  │  │   /render route     │  │  │
@@ -33,7 +33,7 @@ Every standard TOS app has two entry points:
 
 **Characteristics:**
 - Runs on physical device (TelemetryOS player)
-- Chrome browser in iframe sandbox
+- Iframe sandbox in Electron app
 - Has access to `store().device` (device-local storage)
 - Displays content to viewers/customers
 - Full screen, optimized for viewing from distance
@@ -66,6 +66,38 @@ Every standard TOS app has two entry points:
 - Side panel in Studio editor
 - Form-based controls for settings
 
+### /web - Browser-Accessible Interface (Optional)
+
+```
+┌─────────────────────────────────┐
+│   Any Browser (Phone/Tablet/    │
+│   Desktop — Staff or Public)    │
+│                                 │
+│  ┌───────────────────────────┐  │
+│  │   TelemetryOS Web Host    │  │
+│  │  ┌─────────────────────┐  │  │
+│  │  │    Your App         │  │  │
+│  │  │   /app-name route   │  │  │
+│  │  │                     │  │  │
+│  │  │  Operator desk,     │  │  │
+│  │  │  public form, staff │  │  │
+│  │  │  dashboard          │  │  │
+│  │  └─────────────────────┘  │  │
+│  └───────────────────────────┘  │
+└─────────────────────────────────┘
+```
+
+**Characteristics:**
+- Runs in any browser, accessible via URL
+- Can be staff-facing (private) or public-facing
+- Application and dynamic namespace store scopes only
+- **NO access to `store().instance` or `store().device`**
+- Multi-level navigation with React Router
+- Standard HTML/CSS (no SDK settings components, no UI scaling)
+- Always pairs with multi-mode architecture and entity-driven routing
+
+See `tos-web-ui-design` for full design patterns.
+
 ## Communication Flow
 
 ```
@@ -78,10 +110,31 @@ Every standard TOS app has two entry points:
 └─────────────┘         └─────────────────┘         └─────────────┘
 ```
 
-1. **Settings writes** to instance store via hooks
-2. **Render subscribes** to instance store via same hooks
-3. Changes sync automatically (real-time)
-4. Same hooks work in both mount points
+With a Web mount point, communication extends through shared namespaces:
+
+```
+┌─────────────┐         ┌─────────────────┐         ┌─────────────┐
+│  Settings   │  ───▶   │  store().       │  ◀───   │    Web      │
+│  /settings  │  WRITE  │  shared()       │  READ   │  /app-name  │
+│             │         │  namespace      │  +WRITE │             │
+│  Admin      │         │                 │         │  Operator   │
+│  configures │         │  { queues,      │         │  manages    │
+│  entities   │         │    counters }   │         │  live data  │
+└─────────────┘         └─────────────────┘         └─────────────┘
+                                │
+                                ▼  READ + SUB
+                        ┌─────────────┐
+                        │   Render    │
+                        │   /render   │
+                        │  Displays   │
+                        │  live data  │
+                        └─────────────┘
+```
+
+1. **Settings writes** configuration to instance and application store
+2. **Web reads and writes** entity-scoped data via dynamic namespace store
+3. **Render subscribes** and displays changes in real-time
+4. Same store hooks work across all mount points (scoped by what each can access)
 
 ## Project Structure
 
@@ -91,9 +144,12 @@ src/
 ├── App.tsx             # Router - directs to correct view
 ├── views/
 │   ├── Settings.tsx    # /settings mount point
-│   └── Render.tsx      # /render mount point
+│   ├── Render.tsx      # /render mount point
+│   ├── Render.css      # /render styles
+│   ├── Web.tsx         # /app-name mount point (if using web)
+│   └── Web.css         # Web view styles (if using web)
 ├── hooks/
-│   └── store.ts        # Shared store hooks (used in both views)
+│   └── store.ts        # Shared store hooks (used across all mount points)
 ├── components/         # Reusable UI components
 ├── types/              # TypeScript interfaces
 └── utils/              # Helper functions
@@ -103,29 +159,34 @@ src/
 
 ```typescript
 // App.tsx
+import { createBrowserRouter, RouterProvider } from 'react-router'
 import Settings from './views/Settings'
 import Render from './views/Render'
 
-export function App() {
-  const path = window.location.pathname
-
-  if (path === '/settings') return <Settings />
-  if (path === '/render') return <Render />
+const router = createBrowserRouter([
+  { path: '/render', element: <Render /> },
+  { path: '/settings', element: <Settings /> },
+])
 
-  return <div>Invalid mount point: {path}</div>
+export function App() {
+  return <RouterProvider router={router} />
 }
 ```
 
-Or with React Router:
+With a web mount point, add routes under the app name:
 
 ```typescript
 import { createBrowserRouter, RouterProvider } from 'react-router'
-import Settings from './views/Settings'
-import Render from './views/Render'
+import { Render } from './views/Render'
+import { Settings } from './views/Settings'
+import { WebEntities, WebDetail, WebOperator } from './views/Web'
 
 const router = createBrowserRouter([
-  { path: '/render', element: <Render /> },
-  { path: '/settings', element: <Settings /> },
+  { path: '/render', Component: Render },
+  { path: '/settings', Component: Settings },
+  { path: '/my-app', Component: WebEntities },
+  { path: '/my-app/locations/:locationName', Component: WebDetail },
+  { path: '/my-app/locations/:locationName/counters/:counterId', Component: WebOperator },
 ])
 
 export function App() {
@@ -157,6 +218,15 @@ export function App() {
 - Form-based interaction
 - Preview pane integration
 
+### Web Only
+
+- Standard HTML/CSS (no SDK settings components)
+- Runs in any browser (phone, tablet, desktop)
+- `store().application` and `store().shared(namespace)` only
+- NO access to `store().instance` or `store().device`
+- Multi-level React Router navigation
+- No UI scaling (`useUiScaleToSetRem` not used)
+
 ## telemetry.config.json
 
 ```json
@@ -174,12 +244,32 @@ export function App() {
 }
 ```
 
+With a web mount point:
+
+```json
+{
+  "name": "my-app",
+  "version": "1.0.0",
+  "useSpaRouting": true,
+  "mountPoints": {
+    "render": "/render",
+    "settings": "/settings",
+    "web": "/my-app"
+  },
+  "devServer": {
+    "runCommand": "vite --port 3000",
+    "url": "http://localhost:3000"
+  }
+}
+```
+
 ### Mount Point Configuration
 
-| Mount Point | Purpose | Route |
-|-------------|---------|-------|
-| render | Device display | /render |
-| settings | Admin config UI | /settings |
+| Mount Point | Purpose | Route | Store Access |
+|-------------|---------|-------|--------------|
+| render | Device display | /render | instance, application, device, shared |
+| settings | Admin config UI | /settings | instance, application, shared |
+| web (optional) | Browser interface | /app-name | application, shared |
 
 ### Optional: Workers
 
@@ -198,34 +288,32 @@ export function App() {
 
 ```
 ┌────────────────────────────────────────────────────────────────┐
-│                        Account                                  │
+│  Account                                                       │
+│                                                                │
 │  ┌──────────────────────────────────────────────────────────┐  │
-│  │  store().application                                     │  │
-│  │  Shared across ALL instances of this app                 │  │
-│  │  (API keys, account-wide settings)                       │  │
+│  │  store().shared('namespace')                              │  │
+│  │  Dynamic namespace — scoped by entity                     │  │
+│  │  Accessible from: Settings, Render, Web                   │  │
 │  └──────────────────────────────────────────────────────────┘  │
-│                                                                 │
-│  ┌─────────────────────┐  ┌─────────────────────┐             │
-│  │  App Instance 1     │  │  App Instance 2     │             │
-│  │  instance store     │  │  instance store     │             │
-│  │  (Settings↔Render)  │  │  (Settings↔Render)  │             │
-│  └─────────────────────┘  └─────────────────────┘             │
-└────────────────────────────────────────────────────────────────┘
-
-┌────────────────────────────────────────────────────────────────┐
-│  Physical Device                                               │
+│                                                                │
 │  ┌──────────────────────────────────────────────────────────┐  │
-│  │  store().device                                          │  │
-│  │  Local to this device only (Render only!)                │  │
-│  │  (Cache, calibration, device-specific data)              │  │
+│  │  Application                                              │  │
+│  │                                                           │  │
+│  │  ┌────────────────────────────────────────────────────┐   │  │
+│  │  │  store().application                               │   │  │
+│  │  │  Shared across ALL instances of this app            │   │  │
+│  │  │  (API keys, account-wide settings)                  │   │  │
+│  │  │  Accessible from: Settings, Render, Web             │   │  │
+│  │  └────────────────────────────────────────────────────┘   │  │
+│  │                                                           │  │
+│  │  ┌──────────────────────┐  ┌──────────────────────┐      │  │
+│  │  │  Device              │  │  Instance             │      │  │
+│  │  │  store().device      │  │  store().instance     │      │  │
+│  │  │  Render only!        │  │  Settings ↔ Render    │      │  │
+│  │  │  (Cache, calibration)│  │  NOT in Web           │      │  │
+│  │  └──────────────────────┘  └──────────────────────┘      │  │
 │  └──────────────────────────────────────────────────────────┘  │
 └────────────────────────────────────────────────────────────────┘
-
-┌────────────────────────────────────────────────────────────────┐
-│  store().shared('namespace')                                   │
-│  Inter-app communication (any app can read/write)              │
-│  (Weather data sharing, event broadcasting)                    │
-└────────────────────────────────────────────────────────────────┘
 ```
 
 ## Development Workflow
@@ -236,6 +324,7 @@ export function App() {
 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.
 
 
 ### Build & Deploy
@@ -243,10 +332,6 @@ The Settings mount point shows in the right sidebar.
 ```bash
 # Build production
 npm run build
-
-# Deploy via Git
-git add . && git commit -m "Update" && git push
-# GitHub integration auto-deploys
 ```
 
 ## Common Patterns
@@ -265,14 +350,6 @@ return <WeatherDisplay city={city} />
 
 ## Debugging
 
-### Check Current Path
-
-```typescript
-console.log('Current path:', window.location.pathname)
-console.log('Is Settings:', window.location.pathname === '/settings')
-console.log('Is Render:', window.location.pathname === '/render')
-```
-
 ### Verify SDK Configuration
 
 ```typescript

package/templates/{vite-react-typescript → claude-code}/_claude/skills/tos-debugging/SKILL.md

@@ -39,10 +39,10 @@ ReactDOM.createRoot(document.getElementById('root')!).render(<App />)
 **Solution:**
 ```typescript
 // WRONG - in Settings.tsx
-const [, value, setValue] = useMyState() // using createUseDeviceStoreState
+const [isLoading, value, setValue] = useMyState() // using createUseDeviceStoreState
 
 // CORRECT - use instance scope
-const [, value, setValue] = useMyState() // using createUseInstanceStoreState
+const [isLoading, value, setValue] = useMyState() // using createUseInstanceStoreState
 ```
 
 **Scope guide:**

package/templates/{vite-react-typescript → claude-code}/_claude/skills/tos-media-api/SKILL.md

@@ -334,15 +334,15 @@ import { media } from '@telemetryos/sdk'
 import { useFolderIdState, useIntervalState } from '../hooks/store'
 
 export default function Render() {
-  const [, folderId] = useFolderIdState()
-  const [, interval] = useIntervalState() // seconds
+  const [isLoadingFolder, folderId] = useFolderIdState()
+  const [isLoadingInterval, interval] = useIntervalState() // seconds
 
   const [images, setImages] = useState<string[]>([])
   const [currentIndex, setCurrentIndex] = useState(0)
 
   // Load images
   useEffect(() => {
-    if (!folderId) return
+    if (isLoadingFolder || !folderId) return
 
     media().getAllByFolderId(folderId).then(content => {
       const urls = content

package/templates/{vite-react-typescript → claude-code}/_claude/skills/tos-multi-mode/SKILL.md

@@ -15,8 +15,10 @@ Listen for these indicators during requirements gathering:
 - "Kiosk and display" or "control panel and viewer"
 - "Different devices need different views of the same data"
 - Data that's organized by location, department, topic, or similar grouping
+- "Staff need to manage/control from their phone or browser"
+- "Public signup form" or "public status page" for the same data
 
-If ANY of these come up, this is a multi-mode app.
+If ANY of these come up, this is a multi-mode app. If staff or the public need browser access outside the device, it also needs a **web mount point**.
 
 ---
 
@@ -80,12 +82,26 @@ Multi-mode apps use a 3-tier store pattern:
 └─────────────────────────────────────────────────────────────┘
 ```
 
+With a web mount point, add a fourth access path:
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│  Web Mount Point (browser — staff or public)                 │
+│  Entity from URL params, NOT instance store                  │
+│  ┌──────────────┐ ┌──────────────┐ ┌─────────────────────┐  │
+│  │  Reads/writes │ │  Same        │ │  Same namespace     │  │
+│  │  namespace    │ │  store hooks │ │  helper function    │  │
+│  └──────────────┘ └──────────────┘ └─────────────────────┘  │
+└─────────────────────────────────────────────────────────────┘
+```
+
 **How it connects:**
 
-1. Admin creates locations in Settings (application scope)
-2. Each device selects a mode AND a location (instance scope)
-3. All devices on the same location share the same data (dynamic namespace scope)
+1. Admin creates entities in Settings (application scope)
+2. Each device selects a mode AND an entity (instance scope)
+3. All devices on the same entity share the same data (dynamic namespace scope)
 4. A kiosk at "Location A" and a display at "Location A" see the same queues
+5. Web views navigate to entities via URL and read/write the same namespace data
 
 ---
 
@@ -240,6 +256,75 @@ export function Render() {
 
 ---
 
+## Web Mount Point Integration
+
+When your multi-mode app needs a browser-accessible interface (operator desk, public form, staff dashboard), add a web mount point. The web view accesses the **same entity-scoped data** as Render, but gets the entity from URL params instead of instance store.
+
+### Entity from URL vs Instance Store
+
+```typescript
+// Render — entity from instance store (admin picks which entity this device shows)
+const [isLoading, selectedLocation] = useSelectedLocationStoreState()
+if (isLoading) return <div>Loading...</div>
+const ns = locationNamespace(selectedLocation || 'Location A')
+
+// Web — entity from URL params (user navigates via links)
+const { locationName } = useParams()
+const ns = locationNamespace(decodeURIComponent(locationName || ''))
+
+// Same namespace → same data → real-time sync
+```
+
+### Web Routing Maps to Entities
+
+Web routes use the app name as base path, with entity-driven sub-routes. Choose path segments that match your domain:
+
+```typescript
+// App.tsx — add web routes alongside render and settings
+const router = createBrowserRouter([
+  { path: '/render', Component: Render },
+  { path: '/settings', Component: Settings },
+  { path: '/my-app', Component: WebEntities },
+  { path: '/my-app/locations/:locationName', Component: WebDetail },
+  { path: '/my-app/locations/:locationName/counters/:counterId', Component: WebOperator },
+])
+```
+
+### Store Access in Web
+
+Web views can only use **application** and **dynamic namespace** store hooks. No instance or device store (there's no device/instance context in the browser):
+
+```typescript
+// ✅ Works in web
+const [isLoading, locations] = useLocationsStoreState()                     // application scope
+const [isLoadingCounters, counters, setCounters] = useCountersStoreState(ns, 250)   // dynamic namespace
+if (isLoading || isLoadingCounters) return <div>Loading...</div>
+
+// ❌ NOT available in web
+const [isLoading, mode] = useModeStoreState()              // instance scope — no context
+const [isLoading, uiScale] = useUiScaleStoreState()        // instance scope — no context
+```
+
+### Config
+
+Add the web mount point to `telemetry.config.json`:
+
+```json
+{
+  "name": "my-app",
+  "useSpaRouting": true,
+  "mountPoints": {
+    "render": "/render",
+    "settings": "/settings",
+    "web": "/my-app"
+  }
+}
+```
+
+See `tos-web-ui-design` for complete web view design patterns.
+
+---
+
 ## Settings Organization
 
 Order Settings sections intentionally:
@@ -357,3 +442,11 @@ Before implementing a multi-mode app, confirm:
 - [ ] Render view loads all hooks before branching on mode
 - [ ] Settings ordered: mode → entity selector → config → entity management
 - [ ] Entity management has add/rename/remove with at-least-one validation
+
+If using a web mount point, also confirm:
+
+- [ ] `telemetry.config.json` has `"web": "/app-name"` and `useSpaRouting: true`
+- [ ] Web routes registered in App.tsx under the app name
+- [ ] Web views get entity from URL params (not instance store)
+- [ ] Web views only use application and dynamic namespace store hooks
+- [ ] Entity names are URL-encoded in links and decoded in components

package/templates/{vite-react-typescript → claude-code}/_claude/skills/tos-requirements/SKILL.md

@@ -11,7 +11,7 @@ Use this skill at the START of any new TelemetryOS application project. Gather c
 
 **IMPORTANT: This is a conversation, not a survey.** Ask questions one phase at a time. Wait for answers before proceeding. Use earlier answers to skip irrelevant questions.
 
-**All TelemetryOS apps use `@telemetryos/sdk`** with `render` and `settings` mount points. The key distinction is whether the render view is display-only or includes interactive elements.
+**All TelemetryOS apps use `@telemetryos/sdk`** with `render` and `settings` mount points. Some apps add a third `web` mount point for browser-accessible interfaces. The key distinctions are: whether the render view is display-only or interactive, and whether a web interface is needed.
 
 ---
 
@@ -51,6 +51,14 @@ Wait for their answer. Their response will tell you:
 - "different devices need different views of the same data"
 - data organized by location, department, topic, or similar grouping
 
+**Web Interface Indicators** (browser-accessible, outside the device):
+- "staff manage from their phone" or "operator desk"
+- "public signup form", "public status page", "public display"
+- "access from any browser", "not on the device"
+- "management console" or "control panel in the browser"
+- **Result:** Add a web mount point alongside render and settings
+- Web mount point always pairs with multi-mode architecture
+
 ### Confirm Interaction Model
 
 Before proceeding to Phase 2, explicitly state your understanding:
@@ -64,6 +72,9 @@ Before proceeding to Phase 2, explicitly state your understanding:
 **For Multi-Mode App:**
 > "Got it — this is a multi-mode app. Different devices will show different views: [Mode A description] and [Mode B description]. They'll share data scoped to a [entity]. Let me gather requirements for each mode."
 
+**For Multi-Mode App with Web Interface:**
+> "Got it — this is a multi-mode app with a web interface. Devices will show [Mode A] and [Mode B] on screen, and [staff/the public] will access a [description] through a browser. All views share data scoped to a [entity]. Let me gather requirements for each interface."
+
 Wait for confirmation before proceeding.
 
 ---
@@ -111,6 +122,21 @@ Ask conversationally, one at a time, based on what you already know:
 **Rotation/Playlist:**
 - "Does content rotate between different views, or stay on one view?"
 
+#### For Web Interface Apps (if identified in Phase 1):
+
+**Audience:**
+- "Who uses the web interface? Staff, operators, the public?"
+
+**Workflow:**
+- "Walk me through what someone does in the web interface."
+- Listen for: navigation flow, what actions they perform, what data they see/modify
+
+**Navigation Depth:**
+- "How many levels of navigation? For example: select a location → select a counter → manage queue"
+
+**Actions:**
+- "What actions can users perform? Creating, updating, triggering events?"
+
 ### Capture User Stories
 
 Based on their answers, document user stories:
@@ -134,6 +160,16 @@ User Story: Render View
 - onClick handlers needed for: [list interactive elements]
 ```
 
+**For Web Interface:**
+```
+User Story: Web View
+- As a [staff member / public user], I open the web interface
+- I see [entity list / landing page]
+- I navigate to [entity] → [sub-item] → [detail view]
+- I can [list actions: call next, submit form, view status]
+- Changes I make are reflected on device displays in real-time
+```
+
 ### DO NOT Ask About Data Sources Yet
 
 At this phase:
@@ -309,6 +345,8 @@ For each setting identified, record:
 
 **Only if Phase 1 identified a multi-mode app.**
 
+If both multi-mode Render AND a web interface were identified, the web mount point provides the browser-accessible interface (operator desk, public form) while Render modes handle the device displays. Both share entity-scoped data through the same dynamic namespace.
+
 ### Step 1: Identify the Modes
 
 Confirm the distinct Render views:
@@ -348,6 +386,16 @@ For each content element from Phase 2, determine if it's:
 
 Ask: "Are there any settings that only apply to one mode? For example, audio chime only on the display, or touch feedback only on the kiosk?"
 
+### Step 5: Web Mount Point (If Applicable)
+
+If a web interface was identified in Phase 1:
+
+- Confirm the web view's purpose: "The web interface will be a [operator desk / public form / staff dashboard] — is that right?"
+- Confirm audience: "Is this for staff only, or publicly accessible?"
+- Map the navigation hierarchy to the organizing entity: "Users will select a [entity] first, then drill into [sub-items]?"
+- Confirm what actions the web view performs on the shared data
+- Note: Web views only access application and dynamic namespace store — no instance or device store
+
 ### Reference: Multi-Mode Store Pattern
 
 ```typescript
@@ -374,9 +422,9 @@ After gathering all requirements, provide a structured summary:
 # [App Name] Requirements
 
 ## Interaction Model
-**[Display-Only | Interactive | Multi-Mode]**
+**[Display-Only | Interactive | Multi-Mode | Multi-Mode + Web]**
 - SDK: `@telemetryos/sdk`
-- Mount Points: `render` (display), `settings` (config UI)
+- Mount Points: `render` (display), `settings` (config UI)[, `web` (browser interface)]
 - Interaction: [Display-only with subscriptions | Interactive with onClick handlers | Multi-mode with entity-scoped data]
 
 ## Vision
@@ -418,6 +466,14 @@ After gathering all requirements, provide a structured summary:
 **Entity-Scoped Data:** [list shared data keys that use dynamic namespace]
 **Mode-Specific Settings:** [list any settings that only apply to one mode]
 
+## Web Mount Point (if applicable)
+
+**Purpose:** [operator desk | public form | staff dashboard]
+**Audience:** [staff only | public]
+**Navigation:** [entity list] → [sub-item list] → [detail/action view]
+**Actions:** [list what users can do: call next, submit form, view status]
+**Store Access:** application scope (entity list), dynamic namespace (entity-scoped data)
+
 ## Store Keys (Settings Configuration)
 
 | Key | Category | Scope | Type | Default | UI Component | Required? |
@@ -455,7 +511,15 @@ After gathering all requirements, provide a structured summary:
    - Error handling
    - Refresh logic
 
-5. **Polish**
+5. **Web View** (views/Web.tsx) — if using web mount point
+   - Add `"web": "/app-name"` and `useSpaRouting: true` to telemetry.config.json
+   - Register web routes in App.tsx under app name
+   - Entity list view (application store)
+   - Entity detail view (dynamic namespace store)
+   - Action/operator view with store mutations
+   - Standard CSS styling (no UI scaling, no SDK settings components)
+
+6. **Polish**
    - Responsive scaling (rem units)
    - Loading states
    - [For Interactive] Touch feedback animations
@@ -499,7 +563,7 @@ If you need to clarify layout:
 - **Menu Board** → Display-only, media library, scheduled updates
 - **Wayfinding Kiosk** → Interactive, touch navigation, search functionality
 - **Data Dashboard** → Display-only, external API, refresh interval
-- **Queue Manager** → Multi-mode (kiosk + display), entity: location, shared queue data
+- **Queue Manager** → Multi-mode (kiosk + display) + web (operator desk), entity: location, shared queue data
 
 ### What to Infer vs What to Ask
 
@@ -527,6 +591,7 @@ After gathering requirements, use these skills to implement:
 - **`tos-render-ui-design`** - Design the Render view layout (foundation - always read first)
 - **`tos-render-signage-design`** - Display-only render patterns (if building digital signage)
 - **`tos-render-kiosk-design`** - Interactive render patterns (if building kiosk)
+- **`tos-web-ui-design`** - Web mount point design patterns (if building web interface)
 - **`tos-proxy-fetch`** - Implement external API calls (if needed)
 - **`tos-weather-api`** - Integrate weather data (if needed)
 - **`tos-media-api`** - Access media library (if needed)

package/templates/{vite-react-typescript → claude-code}/_claude/skills/tos-store-sync/SKILL.md

@@ -185,7 +185,7 @@ import { createUseSharedStoreState } from '@telemetryos/sdk/react'
 export const useTempStoreState = createUseSharedStoreState<string>('temp', '', 'weather-data')
 
 // Weather app publishes
-const [, , setTemp] = useTempStoreState()
+const [isLoading, , setTemp] = useTempStoreState()
 setTemp('72°F')
 
 // Other apps subscribe
@@ -421,7 +421,9 @@ return <WeatherDisplay city={city} />
 ### Conditional Rendering
 
 ```typescript
-const [, showForecast] = useShowForecastStoreState()
+const [isLoading, showForecast] = useShowForecastStoreState()
+
+if (isLoading) return <div>Loading...</div>
 
 return (
   <div>