@tomorrowos/sdk 0.1.5 → 0.1.8

package/BUILD_GUARDRAILS.md

@@ -139,20 +139,22 @@ When the user enters a URL to deploy, the SDK call must wrap it as a content pol
 ```typescript
 await device.sendCommand('device.content.setPolicy', {
   policy: {
-    revision: Date.now(), // monotonic
     playlists: [{
-      playlistId: crypto.randomUUID(),
-      priority: 10,
+      id: 'default',
+      schedule: {
+        startDate: '2026-05-01', // YYYY-MM-DD, optional
+        endDate: '2026-05-31',
+        daysOfWeek: [1, 2, 3, 4, 5], // 0=Sun … 6=Sat, optional
+        start: '09:00', // HH:MM daily window, optional
+        end: '17:00',
+      },
       items: [{
-        contentId: crypto.randomUUID(),
         url: userProvidedUrl,
-        durationSec: 30,
-        transition: 'cut',
+        type: 'image',
+        durationMs: 30000,
       }],
-      loop: true,
-      schedule: { startDate: null, endDate: null },
     }],
-    priorityResolution: 'highest_wins',
+    fallback: { type: 'brand' },
   },
 });
 ```

package/README.md

@@ -63,6 +63,16 @@ TomorrowOS has no required cloud service. Your CMS talks to your screens over yo
 
 **Player branding:** `GET /brand.json` returns the `brand` object passed to `new TomorrowOS({ brand })` (same host/port as `listen`). TomorrowOS players can fetch it to apply `backgroundColor`, logos, etc., without a separate static file server.
 
+**Content policy (`device.content.setPolicy`):** POST `/device/{deviceId}/content/set-policy` with `{ "policy": { "playlists": [...], "fallback": { "type": "brand" } } }`. Each playlist may include optional `schedule` (device local time):
+
+| Field | Format | Notes |
+|-------|--------|--------|
+| `startDate` / `endDate` | `YYYY-MM-DD` | Inclusive calendar range; omit either for open-ended |
+| `daysOfWeek` | `[0–6]` | `0` = Sunday … `6` = Saturday |
+| `start` / `end` | `HH:MM` | Daily window; supports overnight (e.g. `22:00`–`06:00`) |
+
+All provided constraints must match for the playlist to play. See `templates/cms-starter/policy.example.json`.
+
 ---
 
 ## Supported platforms (roadmap)
@@ -87,6 +97,7 @@ See `PLAYER_INSTALL.md` for installation notes.
 | `brand.schema.json` | JSON Schema for `brand.json` |
 | `brand.example.json` | Full example `brand.json` |
 | `templates/cms-starter/` | Minimal Node + TypeScript server seed |
+| `templates/cms-starter/policy.example.json` | Example `setPolicy` payload with date schedule |
 | `templates/style-tokens/` | CSS tokens and UI pattern notes |
 
 ---

package/dist/tomorrowos.d.ts

@@ -55,6 +55,7 @@ export declare class TomorrowOS extends EventEmitter {
     };
     private sendCommandToSocket;
     listen(options: ListenOptions): http.Server;
+    private handleMediaUpload;
     private tryServeStatic;
     private handleHttp;
     private handleDeviceHttp;

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;AAmDD,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;YAgD7B,cAAc;YAmCd,UAAU;YAgDV,gBAAgB;IAgE9B,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,gBAAgB;CAgFzB"}
+{"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"}

package/dist/tomorrowos.js

@@ -8,12 +8,10 @@ import { MemoryStore } from "./store/memory-store.js";
 function createSixDigitCode() {
     return Math.floor(100000 + Math.random() * 900000).toString();
 }
+const MAX_MEDIA_UPLOAD_BYTES = 100 * 1024 * 1024;
 async function readJsonBody(req) {
-    const chunks = [];
-    for await (const chunk of req) {
-        chunks.push(typeof chunk === "string" ? Buffer.from(chunk) : chunk);
-    }
-    const raw = Buffer.concat(chunks).toString("utf8");
+    const buf = await readRawBody(req, MAX_MEDIA_UPLOAD_BYTES);
+    const raw = buf.toString("utf8");
     if (!raw.trim())
         return {};
     try {
@@ -23,6 +21,23 @@ async function readJsonBody(req) {
         throw new Error("Invalid JSON body");
     }
 }
+async function readRawBody(req, maxBytes) {
+    const chunks = [];
+    let total = 0;
+    for await (const chunk of req) {
+        const buf = typeof chunk === "string" ? Buffer.from(chunk) : chunk;
+        total += buf.length;
+        if (total > maxBytes) {
+            throw new Error(`Body too large (max ${maxBytes} bytes)`);
+        }
+        chunks.push(buf);
+    }
+    return Buffer.concat(chunks);
+}
+function sanitizeUploadFilename(name) {
+    const base = path.basename(String(name || "upload")).replace(/[^\w.\-()+ ]/g, "_");
+    return base.slice(0, 180) || "upload";
+}
 function sendJson(res, status, body) {
     res.writeHead(status, { "Content-Type": "application/json" });
     res.end(JSON.stringify(body));
@@ -148,6 +163,8 @@ export class TomorrowOS extends EventEmitter {
                 throw new Error("staticIndex must not contain '..'");
             }
             this.staticIndexFile = idx;
+            const uploadsDir = path.join(path.resolve(this.staticRoot), "uploads");
+            void fs.mkdir(uploadsDir, { recursive: true });
         }
         else {
             this.staticIndexFile = "index.html";
@@ -182,6 +199,36 @@ export class TomorrowOS extends EventEmitter {
         this.wss = wss;
         return server;
     }
+    async handleMediaUpload(req, res, url) {
+        if (!this.staticRoot) {
+            sendJson(res, 400, { status: "failed", error: "staticRoot is not configured" });
+            return;
+        }
+        try {
+            const body = await readRawBody(req, MAX_MEDIA_UPLOAD_BYTES);
+            if (body.length === 0) {
+                sendJson(res, 400, { status: "failed", error: "Empty upload body" });
+                return;
+            }
+            const rawName = url.searchParams.get("filename") || "upload";
+            const safeName = sanitizeUploadFilename(rawName);
+            const storedName = `${randomUUID()}-${safeName}`;
+            const uploadsDir = path.join(path.resolve(this.staticRoot), "uploads");
+            await fs.mkdir(uploadsDir, { recursive: true });
+            const filePath = path.join(uploadsDir, storedName);
+            await fs.writeFile(filePath, body);
+            sendJson(res, 200, {
+                status: "success",
+                url: `/uploads/${storedName}`,
+                filename: storedName,
+                size: body.length
+            });
+        }
+        catch (e) {
+            const msg = e instanceof Error ? e.message : "Upload failed";
+            sendJson(res, 400, { status: "failed", error: msg });
+        }
+    }
     async tryServeStatic(pathname, res) {
         if (!this.staticRoot)
             return false;
@@ -222,6 +269,10 @@ export class TomorrowOS extends EventEmitter {
                 res.end(JSON.stringify(this.brand));
                 return;
             }
+            if (req.method === "POST" && pathname === "/media/upload") {
+                await this.handleMediaUpload(req, res, url);
+                return;
+            }
             if (req.method === "GET" && this.staticRoot) {
                 const served = await this.tryServeStatic(pathname, res);
                 if (served)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomorrowos/sdk",
-  "version": "0.1.5",
+  "version": "0.1.8",
   "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.5",
+  "version": "0.1.8",
   "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.5"
+    "@tomorrowos/sdk": "^0.1.8"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",

package/templates/cms-starter/policy.example.json

@@ -0,0 +1,30 @@
+{
+  "policy": {
+    "playlists": [
+      {
+        "id": "weekday-promo",
+        "name": "Weekday promo",
+        "schedule": {
+          "startDate": "2026-05-01",
+          "endDate": "2026-05-31",
+          "daysOfWeek": [1, 2, 3, 4, 5],
+          "start": "09:00",
+          "end": "17:00"
+        },
+        "items": [
+          {
+            "url": "https://example.com/hero.jpg",
+            "type": "image",
+            "durationMs": 10000
+          },
+          {
+            "url": "https://example.com/spot.mp4",
+            "type": "video",
+            "durationMs": 30000
+          }
+        ]
+      }
+    ],
+    "fallback": { "type": "brand" }
+  }
+}

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

@@ -1,57 +1,98 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>TomorrowOS SDK Smoke</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>TomorrowOS Control Panel</title>
+    <link rel="stylesheet" href="./panel.css" />
   </head>
-  <body style="font-family: sans-serif; padding: 40px;">
-    <h1>TomorrowOS SDK Smoke Panel</h1>
-    <p>Same-origin API as this server — open this page after <code>npm start</code>.</p>
+  <body>
+    <header class="app-header">
+      <h1>TomorrowOS Control Panel</h1>
+      <p>Build a playlist, set schedule, then publish to paired screens.</p>
+    </header>
 
-    <h2>Pair Device</h2>
-    <input id="code" maxlength="6" placeholder="Enter 6 digit code" />
-    <button onclick="verify()">Verify</button>
-    <input type="hidden" id="deviceId" />
+    <div class="layout">
+      <main class="panel-main">
+        <section class="card">
+          <h2>Pair device</h2>
+          <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>
 
-    <h2>Get Device Info</h2>
-    <button onclick="getInfo()">Get Info</button>
+        <section class="card">
+          <h2>When this playlist plays</h2>
+          <p style="margin: 0 0 0.75rem; font-size: 0.8rem; color: #666">
+            Leave blank for always on (device local time). All set fields must match.
+          </p>
+          <div class="schedule-grid">
+            <label>
+              Start date
+              <input type="date" id="scheduleStartDate" />
+            </label>
+            <label>
+              End date
+              <input type="date" id="scheduleEndDate" />
+            </label>
+            <label>
+              From
+              <input type="time" id="scheduleStartTime" />
+            </label>
+            <label>
+              Until
+              <input type="time" id="scheduleEndTime" />
+            </label>
+            <div class="days-row">
+              <span style="width: 100%; color: #444">Days</span>
+              <label><input type="checkbox" class="day-checkbox" value="0" /> Sun</label>
+              <label><input type="checkbox" class="day-checkbox" value="1" /> Mon</label>
+              <label><input type="checkbox" class="day-checkbox" value="2" /> Tue</label>
+              <label><input type="checkbox" class="day-checkbox" value="3" /> Wed</label>
+              <label><input type="checkbox" class="day-checkbox" value="4" /> Thu</label>
+              <label><input type="checkbox" class="day-checkbox" value="5" /> Fri</label>
+              <label><input type="checkbox" class="day-checkbox" value="6" /> Sat</label>
+            </div>
+          </div>
+        </section>
 
-    <h2>Get Capabilities</h2>
-    <button onclick="getCapabilities()">Get Capabilities</button>
+        <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>
 
-    <h2>Reboot Device</h2>
-    <button onclick="reboot()">Reboot</button>
+        <section class="publish-bar">
+          <button type="button" class="primary" style="width: 100%; padding: 0.75rem" onclick="publish()">
+            Publish playlist
+          </button>
+        </section>
 
-    <h2>Set Content</h2>
-    <button onclick="setContent()">Set</button>
+        <pre id="result" aria-live="polite"></pre>
+      </main>
 
-    <h3>Set Policy JSON (required)</h3>
-    <textarea
-      id="policyJson"
-      rows="16"
-      cols="100"
-      placeholder='{
-  "policy": {
-    "playlists": [
-      {
-        "id": "default",
-        "items": [
-          { "url": "https://example.com/a.jpg", "type": "image", "durationMs": 8000 },
-          { "url": "https://example.com/b.mp4", "type": "video", "durationMs": 30000 }
-        ]
-      }
-    ],
-    "fallback": { "type": "brand" }
-  }
-}'></textarea>
-
-    <h2>Clear Content</h2>
-    <button onclick="clearContent()">Clear</button>
-
-    <br />
-    <br />
-
-    <pre id="result"></pre>
+      <aside class="panel-playlist">
+        <div class="playlist-header">
+          <h2>Playlist</h2>
+          <button type="button" class="primary" id="addAssetBtn" title="Add image or video">+</button>
+        </div>
+        <input
+          type="file"
+          id="fileInput"
+          class="hidden"
+          accept="image/*,video/*,.wgt,.zip"
+        />
+        <ul id="playlistList" class="playlist-list">
+          <li class="playlist-empty" id="playlistEmpty">No assets yet. Tap + to upload.</li>
+        </ul>
+      </aside>
+    </div>
 
     <script src="./methods.js" defer></script>
   </body>

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

@@ -1,101 +1,278 @@
-async function verify() {
-  const code = document.getElementById("code").value;
+const PANEL_DEVICE_ID_KEY = "tomorrowos.panel.deviceId";
+const PANEL_PLAYLIST_KEY = "tomorrowos.panel.playlistDraft";
+const PANEL_SCHEDULE_KEY = "tomorrowos.panel.scheduleDraft";
 
-  const res = await fetch("/pairing/verify", {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ code })
-  });
+/** @type {{ id: string, url: string, name: string, type: string, durationMs: number }[]} */
+let playlistItems = [];
 
-  const data = await res.json();
+function getPanelDeviceId() {
+  return (
+    document.getElementById("deviceId")?.value?.trim() ||
+    localStorage.getItem(PANEL_DEVICE_ID_KEY) ||
+    ""
+  );
+}
+
+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 showResult(data) {
   document.getElementById("result").textContent = JSON.stringify(data, null, 2);
+}
 
-  if (data.deviceId) {
-    document.getElementById("deviceId").value = data.deviceId;
+function absoluteMediaUrl(path) {
+  const p = String(path || "").trim();
+  if (!p) return "";
+  if (/^https?:\/\//i.test(p)) return p;
+  return `${window.location.origin}${p.startsWith("/") ? p : `/${p}`}`;
+}
+
+function inferMediaType(filename, mime) {
+  const lower = String(filename || "").toLowerCase();
+  const m = String(mime || "").toLowerCase();
+  if (m.startsWith("video/")) return "video";
+  if (m.startsWith("image/")) return "image";
+  if (lower.endsWith(".wgt") || lower.endsWith(".zip")) return "widget";
+  if (/\.(mp4|webm|mov|m4v)$/.test(lower)) return "video";
+  if (/\.(jpg|jpeg|png|gif|webp|bmp|svg)$/.test(lower)) return "image";
+  return "image";
+}
+
+function defaultDurationMs(type) {
+  if (type === "video") return 30000;
+  if (type === "widget") return 20000;
+  return 10000;
+}
+
+function savePlaylistDraft() {
+  localStorage.setItem(PANEL_PLAYLIST_KEY, JSON.stringify(playlistItems));
+}
+
+function saveScheduleDraft() {
+  const draft = {
+    startDate: document.getElementById("scheduleStartDate")?.value || "",
+    endDate: document.getElementById("scheduleEndDate")?.value || "",
+    startTime: document.getElementById("scheduleStartTime")?.value || "",
+    endTime: document.getElementById("scheduleEndTime")?.value || "",
+    days: [...document.querySelectorAll(".day-checkbox:checked")].map((el) => Number(el.value))
+  };
+  localStorage.setItem(PANEL_SCHEDULE_KEY, JSON.stringify(draft));
+}
+
+function loadScheduleDraft() {
+  try {
+    const raw = localStorage.getItem(PANEL_SCHEDULE_KEY);
+    if (!raw) return;
+    const draft = JSON.parse(raw);
+    if (draft.startDate) document.getElementById("scheduleStartDate").value = draft.startDate;
+    if (draft.endDate) document.getElementById("scheduleEndDate").value = draft.endDate;
+    if (draft.startTime) document.getElementById("scheduleStartTime").value = draft.startTime;
+    if (draft.endTime) document.getElementById("scheduleEndTime").value = draft.endTime;
+    document.querySelectorAll(".day-checkbox").forEach((el) => {
+      el.checked = Array.isArray(draft.days) && draft.days.includes(Number(el.value));
+    });
+  } catch {
+    /* ignore */
   }
 }
 
-async function getInfo() {
-  const deviceId = document.getElementById("deviceId").value;
+function loadPlaylistDraft() {
+  try {
+    const raw = localStorage.getItem(PANEL_PLAYLIST_KEY);
+    if (!raw) return;
+    const parsed = JSON.parse(raw);
+    if (Array.isArray(parsed)) {
+      playlistItems = parsed;
+      renderPlaylist();
+    }
+  } catch {
+    playlistItems = [];
+  }
+}
 
-  if (!deviceId) {
-    alert("Please pair a device first.");
+function renderPlaylist() {
+  const list = document.getElementById("playlistList");
+  const empty = document.getElementById("playlistEmpty");
+  list.querySelectorAll(".playlist-item").forEach((el) => el.remove());
+
+  if (playlistItems.length === 0) {
+    empty.classList.remove("hidden");
     return;
   }
 
-  const res = await fetch("/device/" + deviceId + "/get-info", {
-    method: "POST"
-  });
+  empty.classList.add("hidden");
 
-  const data = await res.json();
+  for (const item of playlistItems) {
+    const li = document.createElement("li");
+    li.className = "playlist-item";
+    li.dataset.id = item.id;
 
-  document.getElementById("result").textContent = JSON.stringify(data, null, 2);
-}
+    if (item.type === "image" || item.type === "video") {
+      const thumb = document.createElement(item.type === "video" ? "video" : "img");
+      thumb.className = "playlist-item-thumb";
+      thumb.src = absoluteMediaUrl(item.url);
+      if (item.type === "video") {
+        thumb.muted = true;
+        thumb.playsInline = true;
+      } else {
+        thumb.alt = item.name;
+      }
+      li.appendChild(thumb);
+    }
 
-async function getCapabilities() {
-  const deviceId = document.getElementById("deviceId").value;
+    const name = document.createElement("div");
+    name.className = "playlist-item-name";
+    name.textContent = item.name;
 
-  if (!deviceId) {
-    alert("Please pair a device first.");
-    return;
+    const meta = document.createElement("div");
+    meta.className = "playlist-item-meta";
+    meta.textContent = `${item.type} · ${(item.durationMs / 1000).toFixed(0)}s`;
+
+    const actions = document.createElement("div");
+    actions.className = "playlist-item-actions";
+
+    const durLabel = document.createElement("label");
+    durLabel.style.fontSize = "0.75rem";
+    durLabel.textContent = "sec ";
+    const durInput = document.createElement("input");
+    durInput.type = "number";
+    durInput.min = "1";
+    durInput.max = "3600";
+    durInput.value = String(Math.round(item.durationMs / 1000));
+    durInput.addEventListener("change", () => {
+      item.durationMs = Math.max(1000, Number(durInput.value) || 10) * 1000;
+      savePlaylistDraft();
+      renderPlaylist();
+    });
+
+    const removeBtn = document.createElement("button");
+    removeBtn.type = "button";
+    removeBtn.className = "danger";
+    removeBtn.textContent = "Remove";
+    removeBtn.addEventListener("click", () => {
+      playlistItems = playlistItems.filter((x) => x.id !== item.id);
+      savePlaylistDraft();
+      renderPlaylist();
+    });
+
+    actions.appendChild(durLabel);
+    actions.appendChild(durInput);
+    actions.appendChild(removeBtn);
+
+    li.appendChild(name);
+    li.appendChild(meta);
+    li.appendChild(actions);
+    list.appendChild(li);
   }
+}
 
-  const res = await fetch(`/device/${deviceId}/get-capabilities`, {
-    method: "POST"
+async function uploadFile(file) {
+  const q = new URLSearchParams({ filename: file.name });
+  const res = await fetch(`/media/upload?${q.toString()}`, {
+    method: "POST",
+    headers: { "Content-Type": file.type || "application/octet-stream" },
+    body: file
   });
-
   const data = await res.json();
-  document.getElementById("result").textContent = JSON.stringify(data, null, 2);
+  if (!res.ok || data.status === "failed") {
+    throw new Error(data.error || `Upload failed (${res.status})`);
+  }
+  return data;
 }
 
-async function reboot() {
-  const deviceId = document.getElementById("deviceId").value;
+async function addAssetFromFile(file) {
+  showResult({ status: "uploading", filename: file.name });
+  const data = await uploadFile(file);
+  const type = inferMediaType(file.name, file.type);
+  playlistItems.push({
+    id: crypto.randomUUID(),
+    url: data.url,
+    name: file.name,
+    type,
+    durationMs: defaultDurationMs(type)
+  });
+  savePlaylistDraft();
+  renderPlaylist();
+  showResult({ status: "uploaded", ...data });
+}
 
-  if (!deviceId) {
-    alert("Please pair a device first.");
-    return;
-  }
+function buildSchedule() {
+  const schedule = {};
+  const startDate = document.getElementById("scheduleStartDate")?.value?.trim();
+  const endDate = document.getElementById("scheduleEndDate")?.value?.trim();
+  const startTime = document.getElementById("scheduleStartTime")?.value?.trim();
+  const endTime = document.getElementById("scheduleEndTime")?.value?.trim();
+  const days = [...document.querySelectorAll(".day-checkbox:checked")].map((el) =>
+    Number(el.value)
+  );
 
-  if (!confirm("Are you sure you want to reboot this device?")) {
-    return;
-  }
+  if (startDate) schedule.startDate = startDate;
+  if (endDate) schedule.endDate = endDate;
+  if (startTime) schedule.start = startTime;
+  if (endTime) schedule.end = endTime;
+  if (days.length > 0) schedule.daysOfWeek = days;
+
+  return Object.keys(schedule).length > 0 ? schedule : undefined;
+}
+
+function buildPolicyPayload() {
+  const schedule = buildSchedule();
+  const playlist = {
+    id: "main",
+    name: "Playlist",
+    items: playlistItems.map((item) => ({
+      url: absoluteMediaUrl(item.url),
+      type: item.type,
+      durationMs: item.durationMs
+    }))
+  };
+  if (schedule) playlist.schedule = schedule;
 
-  const res = await fetch("/device/" + deviceId + "/reboot", {
-    method: "POST"
+  return {
+    policy: {
+      playlists: [playlist],
+      fallback: { type: "brand" }
+    }
+  };
+}
+
+async function verify() {
+  const code = document.getElementById("code").value;
+
+  const res = await fetch("/pairing/verify", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ code })
   });
 
   const data = await res.json();
+  showResult(data);
 
-  document.getElementById("result").textContent = JSON.stringify(data, null, 2);
+  if (data.deviceId) {
+    setPanelDeviceId(data.deviceId);
+  }
 }
 
-async function setContent() {
-  const deviceId = document.getElementById("deviceId").value;
-  const policyJsonText = document.getElementById("policyJson")?.value?.trim();
+async function publish() {
+  const deviceId = getPanelDeviceId();
 
   if (!deviceId) {
-    alert("Please pair a device first.");
+    alert("Pair a device first (enter code and Verify).");
     return;
   }
 
-  if (!policyJsonText) {
-    alert("Please enter policy JSON object.");
+  if (playlistItems.length === 0) {
+    alert("Add at least one asset to the playlist.");
     return;
   }
 
-  let payload = null;
-  try {
-    payload = JSON.parse(policyJsonText);
-  } catch (err) {
-    alert("Policy JSON is invalid: " + err.message);
-    return;
-  }
-
-  if (!payload || typeof payload !== "object" || Array.isArray(payload)) {
-    alert("Policy payload must be a JSON object.");
-    return;
-  }
+  saveScheduleDraft();
+  const payload = buildPolicyPayload();
 
   const res = await fetch(`/device/${deviceId}/content/set-policy`, {
     method: "POST",
@@ -104,21 +281,86 @@ async function setContent() {
   });
 
   const data = await res.json();
-  document.getElementById("result").textContent = JSON.stringify(data, null, 2);
+  showResult({ publish: payload, response: data });
 }
 
-async function clearContent() {
-  const deviceId = document.getElementById("deviceId").value;
+async function getInfo() {
+  const deviceId = getPanelDeviceId();
+  if (!deviceId) {
+    alert("Please pair a device first.");
+    return;
+  }
+  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());
+}
 
-  const res = await fetch(`/device/${deviceId}/content/clear`, {
-    method: "POST"
-  });
+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());
+}
 
-  const data = await res.json();
-  document.getElementById("result").textContent = JSON.stringify(data, null, 2);
+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" });
+  showResult(await res.json());
 }
+
+document.addEventListener("DOMContentLoaded", () => {
+  const saved = localStorage.getItem(PANEL_DEVICE_ID_KEY);
+  if (saved) setPanelDeviceId(saved);
+
+  loadPlaylistDraft();
+  loadScheduleDraft();
+
+  document.getElementById("addAssetBtn").addEventListener("click", () => {
+    document.getElementById("fileInput").click();
+  });
+
+  document.getElementById("fileInput").addEventListener("change", async (ev) => {
+    const files = ev.target.files;
+    if (!files?.length) return;
+    try {
+      for (const file of files) {
+        await addAssetFromFile(file);
+      }
+    } catch (err) {
+      alert(err.message);
+      showResult({ status: "failed", error: err.message });
+    }
+    ev.target.value = "";
+  });
+
+  [
+    "scheduleStartDate",
+    "scheduleEndDate",
+    "scheduleStartTime",
+    "scheduleEndTime"
+  ].forEach((id) => {
+    document.getElementById(id)?.addEventListener("change", saveScheduleDraft);
+  });
+  document.querySelectorAll(".day-checkbox").forEach((el) => {
+    el.addEventListener("change", saveScheduleDraft);
+  });
+
+});

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

@@ -0,0 +1,232 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+  background: #f4f3f0;
+  color: #0a0908;
+}
+
+.app-header {
+  padding: 1rem 1.5rem;
+  background: #0a0908;
+  color: #fafaf9;
+}
+
+.app-header h1 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.app-header p {
+  margin: 0.35rem 0 0;
+  font-size: 0.875rem;
+  opacity: 0.8;
+}
+
+.layout {
+  display: flex;
+  gap: 0;
+  min-height: calc(100vh - 4.5rem);
+}
+
+.panel-main {
+  flex: 1;
+  padding: 1.25rem 1.5rem 2rem;
+  overflow: auto;
+}
+
+.panel-playlist {
+  width: 320px;
+  flex-shrink: 0;
+  background: #fff;
+  border-left: 1px solid #e4e1dc;
+  display: flex;
+  flex-direction: column;
+}
+
+.card {
+  background: #fff;
+  border: 1px solid #e4e1dc;
+  border-radius: 10px;
+  padding: 1rem 1.1rem;
+  margin-bottom: 1rem;
+}
+
+.card h2 {
+  margin: 0 0 0.75rem;
+  font-size: 0.95rem;
+  font-weight: 600;
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+input[type="text"],
+input[type="date"],
+input[type="time"],
+select {
+  font: inherit;
+  padding: 0.45rem 0.6rem;
+  border: 1px solid #d6d2cb;
+  border-radius: 6px;
+  background: #fff;
+}
+
+button {
+  font: inherit;
+  padding: 0.45rem 0.85rem;
+  border-radius: 6px;
+  border: 1px solid #d6d2cb;
+  background: #fff;
+  cursor: pointer;
+}
+
+button:hover {
+  background: #f5f3ef;
+}
+
+button.primary {
+  background: #ff8a3d;
+  border-color: #e67320;
+  color: #0a0908;
+  font-weight: 600;
+}
+
+button.primary:hover {
+  background: #ff9a57;
+}
+
+button.danger {
+  color: #b42318;
+  border-color: #fecdca;
+}
+
+.schedule-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.65rem 1rem;
+}
+
+.schedule-grid label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  font-size: 0.8rem;
+  color: #444;
+}
+
+.days-row {
+  grid-column: 1 / -1;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 0.75rem;
+  font-size: 0.8rem;
+}
+
+.days-row label {
+  flex-direction: row;
+  align-items: center;
+  gap: 0.35rem;
+  color: #0a0908;
+}
+
+.playlist-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1rem 0.75rem;
+  border-bottom: 1px solid #e4e1dc;
+}
+
+.playlist-header h2 {
+  margin: 0;
+  font-size: 0.95rem;
+}
+
+.playlist-list {
+  list-style: none;
+  margin: 0;
+  padding: 0.5rem;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.playlist-empty {
+  padding: 1.5rem 1rem;
+  text-align: center;
+  color: #888;
+  font-size: 0.875rem;
+}
+
+.playlist-item {
+  border: 1px solid #e4e1dc;
+  border-radius: 8px;
+  padding: 0.65rem;
+  margin-bottom: 0.5rem;
+  background: #fafaf9;
+}
+
+.playlist-item-thumb {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  object-fit: cover;
+  border-radius: 4px;
+  background: #e4e1dc;
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+.playlist-item-name {
+  font-size: 0.8rem;
+  font-weight: 600;
+  word-break: break-all;
+  margin-bottom: 0.35rem;
+}
+
+.playlist-item-meta {
+  font-size: 0.75rem;
+  color: #666;
+  margin-bottom: 0.45rem;
+}
+
+.playlist-item-actions {
+  display: flex;
+  gap: 0.35rem;
+  align-items: center;
+}
+
+.playlist-item-actions input[type="number"] {
+  width: 5rem;
+  font: inherit;
+  padding: 0.25rem 0.4rem;
+  border: 1px solid #d6d2cb;
+  border-radius: 4px;
+}
+
+.publish-bar {
+  padding: 1rem 0 0;
+}
+
+#result {
+  margin: 0;
+  padding: 0.75rem;
+  background: #0a0908;
+  color: #e8e6e3;
+  border-radius: 8px;
+  font-size: 0.75rem;
+  max-height: 10rem;
+  overflow: auto;
+  white-space: pre-wrap;
+}
+
+.hidden {
+  display: none !important;
+}