@tomorrowos/sdk 0.1.9 → 0.2.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { TomorrowOS } from "./tomorrowos.js";
-export type { ListenOptions, TomorrowOSBrand, TomorrowOSOptions } from "./tomorrowos.js";
+export type { DeviceListItem, ListenOptions, TomorrowOSBrand, TomorrowOSOptions } from "./tomorrowos.js";
 export type { PairedDeviceRecord, PendingCodeRecord, TomorrowOSStore } from "./store/types.js";
 export { MemoryStore } from "./store/memory-store.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzF,YAAY,EACV,kBAAkB,EAClB,iBAAiB,EACjB,eAAe,EAChB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,YAAY,EACV,cAAc,EACd,aAAa,EACb,eAAe,EACf,iBAAiB,EAClB,MAAM,iBAAiB,CAAC;AAEzB,YAAY,EACV,kBAAkB,EAClB,iBAAiB,EACjB,eAAe,EAChB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/store/memory-store.d.ts

@@ -1,4 +1,4 @@
-import type { PairedDeviceRecord, PendingCodeRecord, TomorrowOSStore } from "./types.js";
+import type { PairedDeviceEntry, PairedDeviceRecord, PendingCodeRecord, TomorrowOSStore } from "./types.js";
 /**
  * Default store for development / single-node demos.
  * Data is lost on process restart — not for multi-instance production.
@@ -11,5 +11,7 @@ export declare class MemoryStore implements TomorrowOSStore {
     deletePendingCode(code: string): Promise<void>;
     setPairedDevice(deviceId: string, record: PairedDeviceRecord): Promise<void>;
     getPairedDevice(deviceId: string): Promise<PairedDeviceRecord | undefined>;
+    deletePairedDevice(deviceId: string): Promise<void>;
+    listPairedDevices(): Promise<PairedDeviceEntry[]>;
 }
 //# sourceMappingURL=memory-store.d.ts.map

package/dist/store/memory-store.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"memory-store.d.ts","sourceRoot":"","sources":["../../src/store/memory-store.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,kBAAkB,EAClB,iBAAiB,EACjB,eAAe,EAChB,MAAM,YAAY,CAAC;AAEpB;;;GAGG;AACH,qBAAa,WAAY,YAAW,eAAe;IACjD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAwC;IACrE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAyC;IAEjE,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,iBAAiB,GAAG,OAAO,CAAC,IAAI,CAAC;IAItE,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,iBAAiB,GAAG,SAAS,CAAC;IAIpE,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAI9C,eAAe,CACnB,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,kBAAkB,GACzB,OAAO,CAAC,IAAI,CAAC;IAIV,eAAe,CACnB,QAAQ,EAAE,MAAM,GACf,OAAO,CAAC,kBAAkB,GAAG,SAAS,CAAC;CAG3C"}
+{"version":3,"file":"memory-store.d.ts","sourceRoot":"","sources":["../../src/store/memory-store.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,eAAe,EAChB,MAAM,YAAY,CAAC;AAEpB;;;GAGG;AACH,qBAAa,WAAY,YAAW,eAAe;IACjD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAwC;IACrE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAyC;IAEjE,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,iBAAiB,GAAG,OAAO,CAAC,IAAI,CAAC;IAItE,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,iBAAiB,GAAG,SAAS,CAAC;IAIpE,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAI9C,eAAe,CACnB,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,kBAAkB,GACzB,OAAO,CAAC,IAAI,CAAC;IAIV,eAAe,CACnB,QAAQ,EAAE,MAAM,GACf,OAAO,CAAC,kBAAkB,GAAG,SAAS,CAAC;IAIpC,kBAAkB,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAInD,iBAAiB,IAAI,OAAO,CAAC,iBAAiB,EAAE,CAAC;CAMxD"}

package/dist/store/memory-store.js

@@ -20,4 +20,13 @@ export class MemoryStore {
     async getPairedDevice(deviceId) {
         return this.pairedDevices.get(deviceId);
     }
+    async deletePairedDevice(deviceId) {
+        this.pairedDevices.delete(deviceId);
+    }
+    async listPairedDevices() {
+        return [...this.pairedDevices.entries()].map(([deviceId, record]) => ({
+            deviceId,
+            record
+        }));
+    }
 }

package/dist/store/types.d.ts

@@ -9,6 +9,17 @@ export interface PendingCodeRecord {
 export interface PairedDeviceRecord {
     pairingToken: string;
     pairedAt: string;
+    deviceName?: string;
+    platform?: string;
+    system?: string;
+    lastBootAt?: string;
+    lastOnlineAt?: string;
+    lastOfflineAt?: string;
+    lastPolicyPushAt?: string;
+}
+export interface PairedDeviceEntry {
+    deviceId: string;
+    record: PairedDeviceRecord;
 }
 /**
  * Implement with Postgres, Redis, etc. Defaults to MemoryStore (Map).
@@ -20,5 +31,7 @@ export interface TomorrowOSStore {
     deletePendingCode(code: string): Promise<void>;
     setPairedDevice(deviceId: string, record: PairedDeviceRecord): Promise<void>;
     getPairedDevice(deviceId: string): Promise<PairedDeviceRecord | undefined>;
+    deletePairedDevice(deviceId: string): Promise<void>;
+    listPairedDevices(): Promise<PairedDeviceEntry[]>;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/store/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/store/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,kBAAkB;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,iBAAiB,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvE,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,iBAAiB,GAAG,SAAS,CAAC,CAAC;IACrE,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/C,eAAe,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,kBAAkB,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7E,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,kBAAkB,GAAG,SAAS,CAAC,CAAC;CAC5E"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/store/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,kBAAkB;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,kBAAkB,CAAC;CAC5B;AAED;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,iBAAiB,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvE,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,iBAAiB,GAAG,SAAS,CAAC,CAAC;IACrE,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/C,eAAe,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,kBAAkB,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7E,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,kBAAkB,GAAG,SAAS,CAAC,CAAC;IAC3E,kBAAkB,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACpD,iBAAiB,IAAI,OAAO,CAAC,iBAAiB,EAAE,CAAC,CAAC;CACnD"}

package/dist/tomorrowos.d.ts

@@ -27,10 +27,25 @@ export interface ListenOptions {
      */
     staticIndex?: string;
 }
+export interface DeviceListItem {
+    deviceId: string;
+    connected: boolean;
+    deviceName: string | null;
+    platform: string | null;
+    system: string | null;
+    pairedAt: string;
+    lastBootAt: string | null;
+    lastOnlineAt: string | null;
+    lastOfflineAt: string | null;
+    lastPolicyPushAt: string | null;
+    screenOnlineActive: boolean;
+    screenOnlineLabel: string;
+}
 export declare class TomorrowOS extends EventEmitter {
     readonly brand: TomorrowOSBrand;
     private readonly store;
     private readonly devices;
+    private readonly pendingDeviceMeta;
     private httpServer;
     private wss;
     private staticRoot;
@@ -40,11 +55,29 @@ export declare class TomorrowOS extends EventEmitter {
     pairingVerify(code: string): Promise<{
         deviceId: string;
     }>;
+    /** Remove pairing for a device and notify it over WebSocket if connected. */
+    pairingUnpair(deviceId: string): Promise<{
+        deviceId: string;
+        notified: boolean;
+    }>;
     pairing: {
         verify: (code: string) => Promise<{
             deviceId: string;
         }>;
+        unpair: (deviceId: string) => Promise<{
+            deviceId: string;
+            notified: boolean;
+        }>;
     };
+    /** List paired devices with live connection + timing fields for the CMS panel. */
+    listDevices(): Promise<DeviceListItem[]>;
+    private isDeviceConnected;
+    private captureHelloMeta;
+    private mergePairedRecord;
+    private touchPairedOnline;
+    private touchPairedOffline;
+    private recordPolicyPush;
+    private refreshPairedDeviceInfo;
     device(deviceId: string): {
         sendCommand<T = unknown>(method: string, params?: Record<string, unknown>): Promise<{
             status: string;

package/dist/tomorrowos.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tomorrowos.d.ts","sourceRoot":"","sources":["../src/tomorrowos.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,IAAI,MAAM,MAAM,CAAC;AAKxB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGxD,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,eAAe,CAAC;IACvB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,eAAe,CAAC;CACzB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAwED,qBAAa,UAAW,SAAQ,YAAY;IAC1C,QAAQ,CAAC,KAAK,EAAE,eAAe,CAAC;IAChC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAkB;IACxC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAmC;IAC3D,OAAO,CAAC,UAAU,CAA4B;IAC9C,OAAO,CAAC,GAAG,CAAgC;IAC3C,OAAO,CAAC,UAAU,CAAuB;IACzC,OAAO,CAAC,eAAe,CAAgB;gBAE3B,OAAO,EAAE,iBAAiB;IAMtC,oEAAoE;IAC9D,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IAiChE,OAAO;uBACU,MAAM;sBAlCgC,MAAM;;MAmC3D;IAEF,MAAM,CAAC,QAAQ,EAAE,MAAM;oBAGD,CAAC,oBACT,MAAM,WACN,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAC9B,OAAO,CAAC;YAAE,MAAM,EAAE,MAAM,CAAC;YAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YAAC,KAAK,CAAC,EAAE,MAAM,CAAC;YAAC,KAAK,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;;IAU5E,OAAO,CAAC,mBAAmB;IA6D3B,MAAM,CAAC,OAAO,EAAE,aAAa,GAAG,IAAI,CAAC,MAAM;YAkD7B,iBAAiB;YAqCjB,cAAc;YAmCd,UAAU;YAqDV,gBAAgB;IAgE9B,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,gBAAgB;CAgFzB"}
+{"version":3,"file":"tomorrowos.d.ts","sourceRoot":"","sources":["../src/tomorrowos.ts"],"names":[],"mappings":"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"}

package/dist/tomorrowos.js

@@ -5,6 +5,25 @@ import http from "http";
 import path from "path";
 import { WebSocket, WebSocketServer } from "ws";
 import { MemoryStore } from "./store/memory-store.js";
+function formatDurationMs(ms) {
+    if (!Number.isFinite(ms) || ms < 0)
+        return "0s";
+    const totalSec = Math.floor(ms / 1000);
+    const days = Math.floor(totalSec / 86400);
+    const hours = Math.floor((totalSec % 86400) / 3600);
+    const minutes = Math.floor((totalSec % 3600) / 60);
+    const seconds = totalSec % 60;
+    const parts = [];
+    if (days > 0)
+        parts.push(`${days}d`);
+    if (hours > 0)
+        parts.push(`${hours}h`);
+    if (minutes > 0)
+        parts.push(`${minutes}m`);
+    if (parts.length === 0)
+        parts.push(`${seconds}s`);
+    return parts.join(" ");
+}
 function createSixDigitCode() {
     return Math.floor(100000 + Math.random() * 900000).toString();
 }
@@ -54,6 +73,7 @@ export class TomorrowOS extends EventEmitter {
     brand;
     store;
     devices = new Map();
+    pendingDeviceMeta = new Map();
     httpServer = null;
     wss = null;
     staticRoot = null;
@@ -73,9 +93,17 @@ export class TomorrowOS extends EventEmitter {
         }
         const pairingToken = randomBytes(32).toString("hex");
         const pairedAt = new Date().toISOString();
+        const meta = this.pendingDeviceMeta.get(record.deviceId);
+        const now = pairedAt;
         await this.store.setPairedDevice(record.deviceId, {
             pairingToken,
-            pairedAt
+            pairedAt,
+            deviceName: meta?.deviceName,
+            platform: meta?.platform,
+            system: meta?.system,
+            lastBootAt: meta?.bootedAt ?? now,
+            lastOnlineAt: this.isDeviceConnected(record.deviceId) ? now : undefined,
+            lastOfflineAt: this.isDeviceConnected(record.deviceId) ? undefined : now
         });
         await this.store.deletePendingCode(code);
         const ws = this.devices.get(record.deviceId);
@@ -86,13 +114,150 @@ export class TomorrowOS extends EventEmitter {
                 deviceId: record.deviceId,
                 pairingToken
             }));
+            void this.refreshPairedDeviceInfo(record.deviceId);
         }
         this.emit("device.paired", { deviceId: record.deviceId });
         return { deviceId: record.deviceId };
     }
+    /** Remove pairing for a device and notify it over WebSocket if connected. */
+    async pairingUnpair(deviceId) {
+        const id = String(deviceId || "").trim();
+        if (!id) {
+            const err = new Error("deviceId is required");
+            err.code = "PAIRING_INVALID";
+            throw err;
+        }
+        await this.store.deletePairedDevice(id);
+        this.pendingDeviceMeta.delete(id);
+        const ws = this.devices.get(id);
+        let notified = false;
+        if (ws && ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify({
+                type: "pairing.unpaired",
+                method: "tomorrowos.pairing.unpair",
+                deviceId: id
+            }));
+            notified = true;
+        }
+        this.emit("device.unpaired", { deviceId: id });
+        return { deviceId: id, notified };
+    }
     pairing = {
-        verify: (code) => this.pairingVerify(code)
+        verify: (code) => this.pairingVerify(code),
+        unpair: (deviceId) => this.pairingUnpair(deviceId)
     };
+    /** List paired devices with live connection + timing fields for the CMS panel. */
+    async listDevices() {
+        const entries = await this.store.listPairedDevices();
+        const now = Date.now();
+        return entries.map(({ deviceId, record }) => {
+            const connected = this.isDeviceConnected(deviceId);
+            let screenOnlineActive = false;
+            let screenOnlineLabel = "Not active";
+            if (connected && record.lastOnlineAt) {
+                const since = new Date(record.lastOnlineAt).getTime();
+                if (!Number.isNaN(since)) {
+                    screenOnlineActive = true;
+                    screenOnlineLabel = formatDurationMs(now - since);
+                }
+            }
+            return {
+                deviceId,
+                connected,
+                deviceName: record.deviceName ?? null,
+                platform: record.platform ?? null,
+                system: record.system ?? null,
+                pairedAt: record.pairedAt,
+                lastBootAt: record.lastBootAt ?? null,
+                lastOnlineAt: record.lastOnlineAt ?? null,
+                lastOfflineAt: record.lastOfflineAt ?? null,
+                lastPolicyPushAt: record.lastPolicyPushAt ?? null,
+                screenOnlineActive,
+                screenOnlineLabel
+            };
+        });
+    }
+    isDeviceConnected(deviceId) {
+        const ws = this.devices.get(deviceId);
+        return !!ws && ws.readyState === WebSocket.OPEN;
+    }
+    captureHelloMeta(deviceId, msg) {
+        this.pendingDeviceMeta.set(deviceId, {
+            platform: typeof msg.platform === "string" ? msg.platform : undefined,
+            deviceName: typeof msg.deviceName === "string" ? msg.deviceName : undefined,
+            system: typeof msg.system === "string" ? msg.system : undefined,
+            bootedAt: typeof msg.bootedAt === "string" ? msg.bootedAt : undefined,
+            playerVersion: typeof msg.playerVersion === "string" ? msg.playerVersion : undefined
+        });
+    }
+    async mergePairedRecord(deviceId, patch) {
+        const existing = await this.store.getPairedDevice(deviceId);
+        if (!existing)
+            return;
+        await this.store.setPairedDevice(deviceId, { ...existing, ...patch });
+    }
+    async touchPairedOnline(deviceId, msg) {
+        this.captureHelloMeta(deviceId, msg);
+        const now = new Date().toISOString();
+        const bootedAt = typeof msg.bootedAt === "string" ? msg.bootedAt : undefined;
+        const existing = await this.store.getPairedDevice(deviceId);
+        if (!existing)
+            return;
+        await this.store.setPairedDevice(deviceId, {
+            ...existing,
+            deviceName: (typeof msg.deviceName === "string" ? msg.deviceName : undefined) ??
+                existing.deviceName,
+            platform: (typeof msg.platform === "string" ? msg.platform : undefined) ??
+                existing.platform,
+            system: (typeof msg.system === "string" ? msg.system : undefined) ??
+                existing.system,
+            lastBootAt: bootedAt ?? existing.lastBootAt ?? now,
+            lastOnlineAt: now,
+            lastOfflineAt: existing.lastOfflineAt
+        });
+    }
+    async touchPairedOffline(deviceId) {
+        const existing = await this.store.getPairedDevice(deviceId);
+        if (!existing)
+            return;
+        await this.store.setPairedDevice(deviceId, {
+            ...existing,
+            lastOfflineAt: new Date().toISOString()
+        });
+    }
+    async recordPolicyPush(deviceId) {
+        await this.mergePairedRecord(deviceId, {
+            lastPolicyPushAt: new Date().toISOString()
+        });
+    }
+    async refreshPairedDeviceInfo(deviceId) {
+        const ws = this.devices.get(deviceId);
+        if (!ws || ws.readyState !== WebSocket.OPEN)
+            return;
+        const existing = await this.store.getPairedDevice(deviceId);
+        if (!existing)
+            return;
+        try {
+            const result = await this.sendCommandToSocket(ws, deviceId, "device.info.get", {}, 15_000);
+            if (result.status !== "success" || !result.data)
+                return;
+            const model = typeof result.data.model === "string" ? result.data.model : undefined;
+            const firmware = typeof result.data.firmware === "string"
+                ? result.data.firmware
+                : undefined;
+            await this.store.setPairedDevice(deviceId, {
+                ...existing,
+                deviceName: model ?? existing.deviceName,
+                system: firmware
+                    ? `Tizen (${firmware})`
+                    : existing.system,
+                platform: existing.platform ?? "tizen"
+            });
+        }
+        catch {
+            /* ignore — panel still shows hello metadata */
+        }
+    }
     device(deviceId) {
         const self = this;
         return {
@@ -291,6 +456,24 @@ export class TomorrowOS extends EventEmitter {
                 }
                 return;
             }
+            if (req.method === "POST" && pathname === "/pairing/unpair") {
+                const body = (await readJsonBody(req));
+                const deviceId = typeof body.deviceId === "string" ? body.deviceId : "";
+                try {
+                    const result = await this.pairingUnpair(deviceId);
+                    sendJson(res, 200, { status: "success", ...result });
+                }
+                catch (e) {
+                    const msg = e instanceof Error ? e.message : "Unpair failed";
+                    sendJson(res, 400, { status: "failed", error: msg });
+                }
+                return;
+            }
+            if (req.method === "GET" && pathname === "/devices") {
+                const devices = await this.listDevices();
+                sendJson(res, 200, { status: "success", devices });
+                return;
+            }
             if (req.method === "POST") {
                 const parsed = parseDevicePath(pathname);
                 if (parsed) {
@@ -354,6 +537,9 @@ export class TomorrowOS extends EventEmitter {
                 });
                 return;
             }
+            if (action === "content/set-policy" && result.status === "success") {
+                await this.recordPolicyPush(deviceId);
+            }
             sendJson(res, 200, { status: result.status, data: result.data });
         }
         catch (e) {
@@ -385,6 +571,7 @@ export class TomorrowOS extends EventEmitter {
                     ? msg.deviceId
                     : randomUUID();
                 const code = createSixDigitCode();
+                this.captureHelloMeta(deviceId, msg);
                 this.devices.set(deviceId, ws);
                 void this.store.setPendingCode(code, {
                     deviceId,
@@ -413,27 +600,33 @@ export class TomorrowOS extends EventEmitter {
                         }));
                         return;
                     }
+                    this.captureHelloMeta(deviceId, msg);
                     this.devices.set(deviceId, ws);
                     ws.deviceId = deviceId;
+                    await this.touchPairedOnline(deviceId, msg);
                     ws.send(JSON.stringify({
                         type: "device.resumed",
                         method: "tomorrowos.pairing.resume",
                         deviceId
                     }));
                     this.sendBrandSnapshot(ws);
+                    void this.refreshPairedDeviceInfo(deviceId);
                     this.emit("device.online", { deviceId });
                 })();
             }
         });
         ws.on("close", () => {
             const id = ws.deviceId;
-            if (id) {
-                this.devices.delete(id);
-                this.emit("device.offline", {
-                    deviceId: id,
-                    lastSeen: new Date().toISOString()
-                });
-            }
+            if (!id)
+                return;
+            if (this.devices.get(id) !== ws)
+                return;
+            this.devices.delete(id);
+            void this.touchPairedOffline(id);
+            this.emit("device.offline", {
+                deviceId: id,
+                lastSeen: new Date().toISOString()
+            });
         });
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomorrowos/sdk",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "description": "TomorrowOS CMS server SDK — WebSocket transport, pairing, device commands, optional static CMS UI. Includes CLI (tomorrowos init / build) and starter templates.",
   "type": "module",
   "main": "./dist/index.js",

package/templates/cms-starter/package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-cms",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "description": "CMS server on @tomorrowos/sdk. Add your UI (React, static files, etc.) alongside this server.",
   "private": true,
   "type": "module",
@@ -10,7 +10,7 @@
     "build-player": "tomorrowos build --platform tizen"
   },
   "dependencies": {
-    "@tomorrowos/sdk": "^0.1.9"
+    "@tomorrowos/sdk": "^0.2.0"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",

package/templates/cms-starter/public/index.html

@@ -9,25 +9,32 @@
   <body>
     <header class="app-header">
       <h1>TomorrowOS Control Panel</h1>
-      <p>Build a playlist, set schedule, then publish to paired screens.</p>
+      <p>Pair multiple screens, build a playlist, then publish per device.</p>
     </header>
 
     <div class="layout">
       <main class="panel-main">
         <section class="card">
           <h2>Pair device</h2>
+          <p class="hint">Enter the 6-digit code shown on a screen. Each verified device gets its own card below.</p>
           <div class="row">
             <input id="code" maxlength="6" placeholder="6-digit code" />
             <button type="button" onclick="verify()">Verify</button>
           </div>
-          <input type="hidden" id="deviceId" />
+        </section>
+
+        <section class="card" id="pairedDevicesSection">
+          <h2>Paired devices</h2>
+          <div id="devicesGrid" class="devices-grid">
+            <p class="devices-empty" id="devicesEmpty">No paired devices yet. Enter a code above.</p>
+          </div>
         </section>
 
         <section class="card">
           <h2>CMS URL for screens</h2>
-          <p style="margin: 0 0 0.5rem; font-size: 0.8rem; color: #666">
-            HTTP(S) base URL your TV uses to download uploads (same host as <code>ws://</code> on the
-            device, not <code>localhost</code>).
+          <p class="hint">
+            HTTP(S) base URL your TVs use to download uploads (same host as <code>ws://</code>, not
+            <code>localhost</code>).
           </p>
           <div class="row">
             <input
@@ -42,7 +49,7 @@
 
         <section class="card">
           <h2>When this playlist plays</h2>
-          <p style="margin: 0 0 0.75rem; font-size: 0.8rem; color: #666">
+          <p class="hint">
             Leave blank for always on (device local time). All set fields must match.
           </p>
           <div class="schedule-grid">
@@ -75,22 +82,6 @@
           </div>
         </section>
 
-        <section class="card">
-          <h2>Device actions</h2>
-          <div class="row">
-            <button type="button" onclick="getInfo()">Get info</button>
-            <button type="button" onclick="getCapabilities()">Capabilities</button>
-            <button type="button" onclick="reboot()">Reboot</button>
-            <button type="button" class="danger" onclick="clearContent()">Clear content</button>
-          </div>
-        </section>
-
-        <section class="publish-bar">
-          <button type="button" class="primary" style="width: 100%; padding: 0.75rem" onclick="publish()">
-            Publish playlist
-          </button>
-        </section>
-
         <pre id="result" aria-live="polite"></pre>
       </main>
 

package/templates/cms-starter/public/methods.js

@@ -1,4 +1,3 @@
-const PANEL_DEVICE_ID_KEY = "tomorrowos.panel.deviceId";
 const PANEL_PLAYLIST_KEY = "tomorrowos.panel.playlistDraft";
 const PANEL_SCHEDULE_KEY = "tomorrowos.panel.scheduleDraft";
 const PANEL_MEDIA_BASE_KEY = "tomorrowos.panel.mediaBaseUrl";
@@ -6,20 +5,191 @@ const PANEL_MEDIA_BASE_KEY = "tomorrowos.panel.mediaBaseUrl";
 /** @type {{ id: string, url: string, name: string, type: string, durationMs: number }[]} */
 let playlistItems = [];
 
-function getPanelDeviceId() {
-  return (
-    document.getElementById("deviceId")?.value?.trim() ||
-    localStorage.getItem(PANEL_DEVICE_ID_KEY) ||
-    ""
-  );
+/** @type {Array<Record<string, unknown>>} */
+let devicesCache = [];
+
+let devicePollTimer = null;
+let deviceUptimeTimer = null;
+
+function escapeHtml(value) {
+  return String(value ?? "")
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+function formatDurationMs(ms) {
+  if (!Number.isFinite(ms) || ms < 0) return "0s";
+  const totalSec = Math.floor(ms / 1000);
+  const days = Math.floor(totalSec / 86400);
+  const hours = Math.floor((totalSec % 86400) / 3600);
+  const minutes = Math.floor((totalSec % 3600) / 60);
+  const seconds = totalSec % 60;
+  const parts = [];
+  if (days > 0) parts.push(`${days}d`);
+  if (hours > 0) parts.push(`${hours}h`);
+  if (minutes > 0) parts.push(`${minutes}m`);
+  if (parts.length === 0) parts.push(`${seconds}s`);
+  return parts.join(" ");
+}
+
+function formatDateTimeSeconds(iso) {
+  if (!iso) return "—";
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return "—";
+  return d.toLocaleString(undefined, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  });
+}
+
+function formatScreenOnlineLabel(device) {
+  if (!device.connected || !device.lastOnlineAt) return "Not active";
+  const since = new Date(device.lastOnlineAt).getTime();
+  if (Number.isNaN(since)) return "Not active";
+  return formatDurationMs(Date.now() - since);
 }
 
-function setPanelDeviceId(deviceId) {
-  const id = String(deviceId || "").trim();
-  const el = document.getElementById("deviceId");
-  if (el) el.value = id;
-  if (id) localStorage.setItem(PANEL_DEVICE_ID_KEY, id);
-  else localStorage.removeItem(PANEL_DEVICE_ID_KEY);
+function updateDeviceUptimeLabels() {
+  document.querySelectorAll(".device-card[data-device-id]").forEach((card) => {
+    const deviceId = card.dataset.deviceId;
+    const device = devicesCache.find((d) => d.deviceId === deviceId);
+    if (!device) return;
+    const el = card.querySelector(".device-online-time");
+    if (el) el.textContent = formatScreenOnlineLabel(device);
+  });
+}
+
+async function fetchDevices() {
+  try {
+    const res = await fetch("/devices");
+    const data = await res.json();
+    if (Array.isArray(data.devices)) {
+      devicesCache = data.devices;
+      renderDeviceCards();
+    }
+  } catch (err) {
+    showResult({ status: "failed", error: err.message });
+  }
+}
+
+function renderDeviceCards() {
+  const grid = document.getElementById("devicesGrid");
+  if (!grid) return;
+
+  grid.innerHTML = "";
+
+  if (devicesCache.length === 0) {
+    const empty = document.createElement("p");
+    empty.className = "devices-empty";
+    empty.textContent = "No paired devices yet. Enter a code above.";
+    grid.appendChild(empty);
+    return;
+  }
+
+  for (const device of devicesCache) {
+    const card = document.createElement("article");
+    card.className = "device-card";
+    card.dataset.deviceId = device.deviceId;
+
+    const header = document.createElement("div");
+    header.className = "device-card-header";
+
+    const led = document.createElement("span");
+    led.className = `status-led ${device.connected ? "status-led--online" : "status-led--offline"}`;
+    led.title = device.connected ? "Connected" : "Disconnected";
+
+    const title = document.createElement("h3");
+    title.className = "device-card-title";
+    title.textContent = device.deviceName || "Screen";
+
+    header.appendChild(led);
+    header.appendChild(title);
+
+    const meta = document.createElement("dl");
+    meta.className = "device-meta";
+
+    const rows = [
+      ["Device ID", device.deviceId],
+      ["System", device.system || device.platform || "—"],
+      ["Screen online", formatScreenOnlineLabel(device)],
+      ["Last boot", formatDateTimeSeconds(device.lastBootAt)],
+      ["Latest content push", formatDateTimeSeconds(device.lastPolicyPushAt)]
+    ];
+
+    for (const [label, value] of rows) {
+      const row = document.createElement("div");
+      row.className = "device-meta-row";
+      const dt = document.createElement("dt");
+      dt.textContent = label;
+      const dd = document.createElement("dd");
+      if (label === "Screen online") {
+        dd.className = "device-online-time";
+      }
+      dd.textContent = value;
+      row.appendChild(dt);
+      row.appendChild(dd);
+      meta.appendChild(row);
+    }
+
+    const actions = document.createElement("div");
+    actions.className = "device-card-actions";
+
+    const publishBtn = document.createElement("button");
+    publishBtn.type = "button";
+    publishBtn.className = "primary";
+    publishBtn.textContent = "Publish";
+    publishBtn.addEventListener("click", () => publishToDevice(device.deviceId));
+
+    const infoBtn = document.createElement("button");
+    infoBtn.type = "button";
+    infoBtn.textContent = "Info";
+    infoBtn.addEventListener("click", () => deviceAction(device.deviceId, "get-info"));
+
+    const rebootBtn = document.createElement("button");
+    rebootBtn.type = "button";
+    rebootBtn.textContent = "Reboot";
+    rebootBtn.addEventListener("click", () => deviceAction(device.deviceId, "reboot"));
+
+    const clearBtn = document.createElement("button");
+    clearBtn.type = "button";
+    clearBtn.textContent = "Clear";
+    clearBtn.addEventListener("click", () => deviceAction(device.deviceId, "content/clear"));
+
+    const unpairBtn = document.createElement("button");
+    unpairBtn.type = "button";
+    unpairBtn.className = "danger";
+    unpairBtn.textContent = "Unpair";
+    unpairBtn.addEventListener("click", () => unpairDevice(device.deviceId));
+
+    actions.appendChild(publishBtn);
+    actions.appendChild(infoBtn);
+    actions.appendChild(rebootBtn);
+    actions.appendChild(clearBtn);
+    actions.appendChild(unpairBtn);
+
+    card.appendChild(header);
+    card.appendChild(meta);
+    card.appendChild(actions);
+    grid.appendChild(card);
+  }
+}
+
+function startDevicePolling() {
+  if (devicePollTimer) clearInterval(devicePollTimer);
+  if (deviceUptimeTimer) clearInterval(deviceUptimeTimer);
+
+  void fetchDevices();
+  devicePollTimer = setInterval(() => {
+    void fetchDevices();
+  }, 8000);
+
+  deviceUptimeTimer = setInterval(updateDeviceUptimeLabels, 60_000);
 }
 
 function showResult(data) {
@@ -104,6 +274,19 @@ function defaultDurationMs(type) {
   return 10000;
 }
 
+function normalizeDurationMs(item) {
+  const maxMs = 3600 * 1000;
+  const minMs = 1000;
+  let ms = Number(item?.durationMs);
+  if (!Number.isFinite(ms) || ms < minMs) {
+    return defaultDurationMs(item?.type);
+  }
+  if (ms === 1000000) {
+    return defaultDurationMs(item?.type);
+  }
+  return Math.min(maxMs, ms);
+}
+
 function savePlaylistDraft() {
   localStorage.setItem(PANEL_PLAYLIST_KEY, JSON.stringify(playlistItems));
 }
@@ -142,7 +325,11 @@ function loadPlaylistDraft() {
     if (!raw) return;
     const parsed = JSON.parse(raw);
     if (Array.isArray(parsed)) {
-      playlistItems = parsed;
+      playlistItems = parsed.map((item) => ({
+        ...item,
+        durationMs: normalizeDurationMs(item)
+      }));
+      savePlaylistDraft();
       renderPlaylist();
     }
   } catch {
@@ -200,9 +387,10 @@ function renderPlaylist() {
     durInput.max = "3600";
     durInput.value = String(Math.round(item.durationMs / 1000));
     durInput.addEventListener("change", () => {
-      item.durationMs = Math.max(1000, Number(durInput.value) || 10) * 1000;
+      const seconds = Math.min(3600, Math.max(1, Number(durInput.value) || 10));
+      item.durationMs = seconds * 1000;
+      meta.textContent = `${item.type} · ${seconds}s`;
       savePlaylistDraft();
-      renderPlaylist();
     });
 
     const removeBtn = document.createElement("button");
@@ -309,15 +497,40 @@ async function verify() {
   showResult(data);
 
   if (data.deviceId) {
-    setPanelDeviceId(data.deviceId);
+    const codeInput = document.getElementById("code");
+    if (codeInput) codeInput.value = "";
+    await fetchDevices();
   }
 }
 
-async function publish() {
-  const deviceId = getPanelDeviceId();
+async function unpairDevice(deviceId) {
+  if (
+    !confirm(
+      "Unpair this device? Its card will be removed and the screen will show a new pairing code."
+    )
+  ) {
+    return;
+  }
+
+  const res = await fetch("/pairing/unpair", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ deviceId })
+  });
+
+  const data = await res.json();
+  showResult(data);
 
+  if (res.ok) {
+    await fetchDevices();
+  } else {
+    alert(data.error || "Unpair failed");
+  }
+}
+
+async function publishToDevice(deviceId) {
   if (!deviceId) {
-    alert("Pair a device first (enter code and Verify).");
+    alert("Unknown device.");
     return;
   }
 
@@ -356,55 +569,26 @@ async function publish() {
   });
 
   const data = await res.json();
-  showResult({ publish: payload, response: data });
-}
+  showResult({ deviceId, publish: payload, response: data });
 
-async function getInfo() {
-  const deviceId = getPanelDeviceId();
-  if (!deviceId) {
-    alert("Please pair a device first.");
-    return;
+  if (res.ok) {
+    await fetchDevices();
   }
-  const res = await fetch(`/device/${deviceId}/get-info`, { method: "POST" });
-  showResult(await res.json());
 }
 
-async function getCapabilities() {
-  const deviceId = getPanelDeviceId();
-  if (!deviceId) {
-    alert("Please pair a device first.");
-    return;
-  }
-  const res = await fetch(`/device/${deviceId}/get-capabilities`, { method: "POST" });
-  showResult(await res.json());
-}
+async function deviceAction(deviceId, action) {
+  if (!deviceId) return;
 
-async function reboot() {
-  const deviceId = getPanelDeviceId();
-  if (!deviceId) {
-    alert("Please pair a device first.");
-    return;
-  }
-  if (!confirm("Reboot this device?")) return;
-  const res = await fetch(`/device/${deviceId}/reboot`, { method: "POST" });
-  showResult(await res.json());
-}
+  if (action === "reboot" && !confirm("Reboot this device?")) return;
+  if (action === "content/clear" && !confirm("Clear content on this device?")) return;
 
-async function clearContent() {
-  const deviceId = getPanelDeviceId();
-  if (!deviceId) {
-    alert("Please pair a device first.");
-    return;
-  }
-  if (!confirm("Clear content on this device?")) return;
-  const res = await fetch(`/device/${deviceId}/content/clear`, { method: "POST" });
+  const res = await fetch(`/device/${encodeURIComponent(deviceId)}/${action}`, {
+    method: "POST"
+  });
   showResult(await res.json());
 }
 
 document.addEventListener("DOMContentLoaded", () => {
-  const saved = localStorage.getItem(PANEL_DEVICE_ID_KEY);
-  if (saved) setPanelDeviceId(saved);
-
   const savedMediaBase = localStorage.getItem(PANEL_MEDIA_BASE_KEY);
   const cmsBaseInput = document.getElementById("cmsDeviceBaseUrl");
   if (savedMediaBase && cmsBaseInput) {
@@ -415,6 +599,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
   loadPlaylistDraft();
   loadScheduleDraft();
+  startDevicePolling();
 
   document.getElementById("addAssetBtn").addEventListener("click", () => {
     document.getElementById("fileInput").click();

package/templates/cms-starter/public/panel.css

@@ -62,6 +62,103 @@ body {
   font-weight: 600;
 }
 
+.hint {
+  margin: 0 0 0.75rem;
+  font-size: 0.8rem;
+  color: #666;
+}
+
+.devices-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 0.85rem;
+}
+
+.devices-empty {
+  margin: 0;
+  color: #666;
+  font-size: 0.875rem;
+  grid-column: 1 / -1;
+}
+
+.device-card {
+  border: 1px solid #e4e1dc;
+  border-radius: 8px;
+  padding: 0.85rem 0.95rem;
+  background: #fafaf9;
+}
+
+.device-card-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.65rem;
+}
+
+.device-card-title {
+  margin: 0;
+  font-size: 0.95rem;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.status-led {
+  width: 11px;
+  height: 11px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06);
+}
+
+.status-led--online {
+  background: #12b76a;
+  box-shadow: 0 0 8px rgba(18, 183, 106, 0.55);
+}
+
+.status-led--offline {
+  background: #f04438;
+  box-shadow: 0 0 8px rgba(240, 68, 56, 0.45);
+}
+
+.device-meta {
+  display: grid;
+  gap: 0.35rem;
+  font-size: 0.78rem;
+  color: #444;
+  margin-bottom: 0.75rem;
+}
+
+.device-meta dt {
+  font-weight: 600;
+  color: #666;
+  display: inline;
+}
+
+.device-meta dt::after {
+  content: ": ";
+}
+
+.device-meta dd {
+  display: inline;
+  margin: 0;
+  word-break: break-all;
+}
+
+.device-meta-row {
+  display: block;
+}
+
+.device-card-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+}
+
+.device-card-actions button {
+  font-size: 0.78rem;
+  padding: 0.35rem 0.6rem;
+}
+
 .row {
   display: flex;
   flex-wrap: wrap;