@tomorrowos/sdk 0.2.5 → 0.3.1

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

@@ -1,13 +1,23 @@
-const PANEL_PLAYLIST_KEY = "tomorrowos.panel.playlistDraft";
-const PANEL_SCHEDULE_KEY = "tomorrowos.panel.scheduleDraft";
 const PANEL_MEDIA_BASE_KEY = "tomorrowos.panel.mediaBaseUrl";
 
-/** @type {{ id: string, url: string, name: string, type: string, durationMs: number }[]} */
-let playlistItems = [];
+/** @type {Array<Record<string, unknown>>} */
+let playlistsCatalog = [];
 
 /** @type {Array<Record<string, unknown>>} */
 let devicesCache = [];
 
+/** @type {string|null} */
+let selectedPlaylistId = null;
+
+/** True while creating a new playlist locally (assets allowed before Save). */
+let playlistDraftActive = false;
+
+/** @type {{ id: string, url: string, name: string, type: string, durationMs: number }[]} */
+let editorItems = [];
+
+/** @type {string|null} */
+let publishModalDeviceId = null;
+
 let devicePollTimer = null;
 
 function escapeHtml(value) {
@@ -37,17 +47,9 @@ 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"
-  });
+  return d.toLocaleString();
 }
 
-/** TV uptime: now minus last boot time (device.lastBootAt). Not active when app is offline. */
 function formatDeviceOnlineLabel(device) {
   if (!device.connected) return "Not active";
   const bootIso = device.lastBootAt;
@@ -57,142 +59,6 @@ function formatDeviceOnlineLabel(device) {
   return formatDurationMs(Date.now() - bootMs);
 }
 
-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 || "—"],
-      [
-        "Device online",
-        formatDeviceOnlineLabel(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 === "Device online") {
-        dd.className = "device-online-time";
-        dd.title = "Current time minus this TV last boot 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 capsBtn = document.createElement("button");
-    capsBtn.type = "button";
-    capsBtn.textContent = "Capabilities";
-    capsBtn.addEventListener("click", () =>
-      deviceAction(device.deviceId, "get-capabilities")
-    );
-
-    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(capsBtn);
-    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);
-
-  void fetchDevices();
-  devicePollTimer = setInterval(() => {
-    void fetchDevices();
-  }, 8000);
-}
-
 function showResult(data) {
   document.getElementById("result").textContent = JSON.stringify(data, null, 2);
 }
@@ -205,12 +71,9 @@ function isLocalPanelHost(hostname) {
 function normalizeMediaBaseUrl(raw) {
   let s = String(raw || "").trim();
   if (!s) return "";
-  if (!/^https?:\/\//i.test(s)) {
-    s = `http://${s}`;
-  }
+  if (!/^https?:\/\//i.test(s)) s = `http://${s}`;
   try {
-    const u = new URL(s);
-    return u.origin;
+    return new URL(s).origin;
   } catch {
     return "";
   }
@@ -223,11 +86,7 @@ function getMediaBaseOrigin() {
       ""
   );
   if (fromInput) return fromInput;
-
-  if (!isLocalPanelHost(window.location.hostname)) {
-    return window.location.origin;
-  }
-
+  if (!isLocalPanelHost(window.location.hostname)) return window.location.origin;
   return "";
 }
 
@@ -248,12 +107,9 @@ function absoluteMediaUrl(path) {
   const p = String(path || "").trim();
   if (!p) return "";
   if (/^https?:\/\//i.test(p)) return p;
-
   const base = getMediaBaseOrigin();
   if (!base) {
-    throw new Error(
-      "Local CMS only: set CMS URL for screens (your PC LAN IP, e.g. http://192.168.1.105:3000 — not localhost)."
-    );
+    throw new Error("Set CMS URL for screens (LAN IP, not localhost).");
   }
   return `${base}${p.startsWith("/") ? p : `/${p}`}`;
 }
@@ -276,94 +132,181 @@ function defaultDurationMs(type) {
 }
 
 function normalizeDurationMs(item) {
-  const maxMs = 3600 * 1000;
   const minMs = 1000;
+  const maxMs = 3600 * 1000;
   let ms = Number(item?.durationMs);
-  if (!Number.isFinite(ms) || ms < minMs) {
-    return defaultDurationMs(item?.type);
-  }
-  if (ms === 1000000) {
-    return defaultDurationMs(item?.type);
-  }
+  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));
+function buildScheduleFromForm() {
+  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 (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 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 loadScheduleIntoForm(schedule) {
+  const s = schedule || {};
+  document.getElementById("scheduleStartDate").value = s.startDate || "";
+  document.getElementById("scheduleEndDate").value = s.endDate || "";
+  document.getElementById("scheduleStartTime").value = s.start || "";
+  document.getElementById("scheduleEndTime").value = s.end || "";
+  document.querySelectorAll(".day-checkbox").forEach((el) => {
+    el.checked =
+      Array.isArray(s.daysOfWeek) && s.daysOfWeek.includes(Number(el.value));
+  });
+}
+
+function getSelectedPlaylist() {
+  return playlistsCatalog.find((p) => p.id === selectedPlaylistId) || null;
 }
 
-function loadScheduleDraft() {
+async function fetchPlaylists() {
   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));
+    const res = await fetch("/playlists");
+    let data = {};
+    try {
+      data = await res.json();
+    } catch {
+      data = {};
+    }
+    if (!res.ok) {
+      console.warn("[CMS] GET /playlists failed", res.status, data);
+      if (res.status === 404) {
+        showResult({
+          status: "failed",
+          error:
+            "CMS server is missing /playlists. Restart CMS with @tomorrowos/sdk 0.3.1 or newer."
+        });
+      }
+      return;
+    }
+    if (Array.isArray(data.playlists)) {
+      playlistsCatalog = data.playlists;
+      renderPlaylistCatalog();
+      if (selectedPlaylistId && !getSelectedPlaylist()) {
+        selectedPlaylistId = playlistsCatalog[0]?.id || null;
+        loadEditorFromSelection();
+      }
+    }
+  } catch (err) {
+    console.error("[CMS] fetchPlaylists:", err);
+    showResult({ status: "failed", error: err.message });
+  }
+}
+
+function renderPlaylistCatalog() {
+  const list = document.getElementById("playlistCatalog");
+  if (!list) return;
+  list.innerHTML = "";
+
+  if (playlistsCatalog.length === 0) {
+    const li = document.createElement("li");
+    li.className = "playlist-catalog-item";
+    li.textContent = "No playlists yet. Tap +.";
+    list.appendChild(li);
+    return;
+  }
+
+  for (const pl of playlistsCatalog) {
+    const li = document.createElement("li");
+    li.className = "playlist-catalog-item";
+    if (pl.id === selectedPlaylistId) li.classList.add("playlist-catalog-item--active");
+    li.innerHTML = `<strong>${escapeHtml(pl.name)}</strong><small>v${pl.version} · ${(pl.items || []).length} items</small>`;
+    li.addEventListener("click", () => {
+      playlistDraftActive = false;
+      selectedPlaylistId = pl.id;
+      loadEditorFromSelection();
+      renderPlaylistCatalog();
     });
-  } catch {
-    /* ignore */
+    list.appendChild(li);
   }
 }
 
-function loadPlaylistDraft() {
-  try {
-    const raw = localStorage.getItem(PANEL_PLAYLIST_KEY);
-    if (!raw) return;
-    const parsed = JSON.parse(raw);
-    if (Array.isArray(parsed)) {
-      playlistItems = parsed.map((item) => ({
-        ...item,
-        durationMs: normalizeDurationMs(item)
-      }));
-      savePlaylistDraft();
-      renderPlaylist();
+function isPlaylistEditorOpen() {
+  return playlistDraftActive || !!selectedPlaylistId;
+}
+
+function loadEditorFromSelection() {
+  const pl = getSelectedPlaylist();
+  const nameInput = document.getElementById("playlistName");
+  const editorTitle = document.getElementById("editorTitle");
+
+  if (!pl) {
+    if (playlistDraftActive) {
+      if (editorTitle) editorTitle.textContent = "New playlist";
+      renderEditorAssets();
+      return;
     }
-  } catch {
-    playlistItems = [];
+    playlistDraftActive = false;
+    if (editorTitle) editorTitle.textContent = "Playlist editor";
+    if (nameInput) nameInput.value = "";
+    editorItems = [];
+    loadScheduleIntoForm(null);
+    renderEditorAssets();
+    return;
   }
+
+  playlistDraftActive = false;
+  if (editorTitle) editorTitle.textContent = `Edit: ${pl.name}`;
+  if (nameInput) nameInput.value = pl.name || "";
+  loadScheduleIntoForm(pl.schedule);
+  editorItems = (pl.items || []).map((item) => ({
+    id: crypto.randomUUID(),
+    url: item.url,
+    name: item.url?.split("/").pop() || "asset",
+    type: item.type || "image",
+    durationMs: normalizeDurationMs(item)
+  }));
+  renderEditorAssets();
 }
 
-function renderPlaylist() {
+function renderEditorAssets() {
   const list = document.getElementById("playlistList");
   const empty = document.getElementById("playlistEmpty");
   list.querySelectorAll(".playlist-item").forEach((el) => el.remove());
 
-  if (playlistItems.length === 0) {
+  if (!isPlaylistEditorOpen()) {
     empty.classList.remove("hidden");
+    empty.textContent = "Select or create a playlist (Playlists +).";
+    return;
+  }
+
+  if (editorItems.length === 0) {
+    empty.classList.remove("hidden");
+    empty.textContent = "No assets yet. Tap + to upload.";
     return;
   }
 
   empty.classList.add("hidden");
 
-  for (const item of playlistItems) {
+  for (const item of editorItems) {
     const li = document.createElement("li");
     li.className = "playlist-item";
-    li.dataset.id = item.id;
 
     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);
+      try {
+        thumb.src = absoluteMediaUrl(item.url);
+      } catch {
+        thumb.removeAttribute("src");
+      }
       if (item.type === "video") {
         thumb.muted = true;
         thumb.playsInline = true;
-      } else {
-        thumb.alt = item.name;
       }
       li.appendChild(thumb);
     }
@@ -378,20 +321,14 @@ function renderPlaylist() {
 
     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", () => {
-      const seconds = Math.min(3600, Math.max(1, Number(durInput.value) || 10));
-      item.durationMs = seconds * 1000;
-      meta.textContent = `${item.type} · ${seconds}s`;
-      savePlaylistDraft();
+      item.durationMs = Math.min(3600, Math.max(1, Number(durInput.value) || 10)) * 1000;
+      meta.textContent = `${item.type} · ${Math.round(item.durationMs / 1000)}s`;
     });
 
     const removeBtn = document.createElement("button");
@@ -399,15 +336,12 @@ function renderPlaylist() {
     removeBtn.className = "danger";
     removeBtn.textContent = "Remove";
     removeBtn.addEventListener("click", () => {
-      playlistItems = playlistItems.filter((x) => x.id !== item.id);
-      savePlaylistDraft();
-      renderPlaylist();
+      editorItems = editorItems.filter((x) => x.id !== item.id);
+      renderEditorAssets();
     });
 
-    actions.appendChild(durLabel);
     actions.appendChild(durInput);
     actions.appendChild(removeBtn);
-
     li.appendChild(name);
     li.appendChild(meta);
     li.appendChild(actions);
@@ -415,11 +349,321 @@ function renderPlaylist() {
   }
 }
 
+async function saveCurrentPlaylist() {
+  const name = String(document.getElementById("playlistName")?.value || "").trim();
+  if (!name) {
+    alert("Enter a playlist name.");
+    return;
+  }
+  if (editorItems.length === 0) {
+    alert("Add at least one asset before saving.");
+    return;
+  }
+
+  let items;
+  try {
+    items = editorItems.map((item) => ({
+      url: absoluteMediaUrl(item.url),
+      type: item.type,
+      durationMs: item.durationMs
+    }));
+  } catch (err) {
+    alert(err.message);
+    return;
+  }
+
+  const body = {
+    id: selectedPlaylistId || undefined,
+    name,
+    schedule: buildScheduleFromForm(),
+    items
+  };
+
+  const res = await fetch("/playlists", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(body)
+  });
+  const data = await res.json();
+  showResult(data);
+
+  if (!res.ok) {
+    alert(data.error || "Save failed");
+    return;
+  }
+
+  playlistDraftActive = false;
+  selectedPlaylistId = data.playlist?.id || selectedPlaylistId;
+  await fetchPlaylists();
+  loadEditorFromSelection();
+}
+
+async function deleteCurrentPlaylist() {
+  if (!selectedPlaylistId) {
+    alert("Select a playlist to delete.");
+    return;
+  }
+  const pl = getSelectedPlaylist();
+  if (
+    !confirm(
+      `Delete playlist "${pl?.name}"? Devices already playing it keep their cached copy until Clear or reboot without sync. New devices cannot receive it.`
+    )
+  ) {
+    return;
+  }
+
+  const res = await fetch(`/playlists/${encodeURIComponent(selectedPlaylistId)}`, {
+    method: "DELETE"
+  });
+  const data = await res.json();
+  showResult(data);
+  if (!res.ok) {
+    alert(data.error || "Delete failed");
+    return;
+  }
+
+  selectedPlaylistId = null;
+  playlistDraftActive = false;
+  editorItems = [];
+  await fetchPlaylists();
+  loadEditorFromSelection();
+}
+
+function newPlaylistDraft() {
+  selectedPlaylistId = null;
+  playlistDraftActive = true;
+  const nameInput = document.getElementById("playlistName");
+  if (nameInput) {
+    nameInput.value = "";
+    nameInput.focus();
+  }
+  loadScheduleIntoForm(null);
+  editorItems = [];
+  renderPlaylistCatalog();
+  renderEditorAssets();
+  const editorTitle = document.getElementById("editorTitle");
+  if (editorTitle) editorTitle.textContent = "New playlist";
+  document.getElementById("playlistEditorSection")?.scrollIntoView({ behavior: "smooth", block: "start" });
+  showResult({
+    status: "draft",
+    message: "New playlist — enter a name, add assets with + (right), then Save playlist."
+  });
+}
+
+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.";
+    grid.appendChild(empty);
+    return;
+  }
+
+  for (const device of devicesCache) {
+    const card = document.createElement("article");
+    card.className = "device-card";
+
+    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"}`;
+    const title = document.createElement("h3");
+    title.className = "device-card-title";
+    title.textContent = device.deviceName || "Screen";
+    header.appendChild(led);
+    header.appendChild(title);
+
+    const published = document.createElement("ul");
+    published.className = "device-published-list";
+    const pubs = Array.isArray(device.publishedPlaylists) ? device.publishedPlaylists : [];
+    if (pubs.length === 0) {
+      const li = document.createElement("li");
+      li.textContent = "No playlists published";
+      published.appendChild(li);
+    } else {
+      for (const p of pubs) {
+        const li = document.createElement("li");
+        const label = document.createElement("span");
+        label.textContent = `${p.name} (v${p.version})`;
+        const rm = document.createElement("button");
+        rm.type = "button";
+        rm.textContent = "Remove";
+        rm.addEventListener("click", () => removePlaylistFromDevice(device.deviceId, p.playlistId));
+        li.appendChild(label);
+        li.appendChild(rm);
+        published.appendChild(li);
+      }
+    }
+
+    const meta = document.createElement("dl");
+    meta.className = "device-meta";
+    const rows = [
+      ["Device ID", device.deviceId],
+      ["System", device.system || device.platform || "—"],
+      ["Device online", formatDeviceOnlineLabel(device)],
+      ["Last boot", formatDateTimeSeconds(device.lastBootAt)],
+      ["Latest 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");
+      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", () => openPublishModal(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(published);
+    card.appendChild(meta);
+    card.appendChild(actions);
+    grid.appendChild(card);
+  }
+}
+
+function openPublishModal(deviceId) {
+  publishModalDeviceId = deviceId;
+  const modal = document.getElementById("publishModal");
+  const checklist = document.getElementById("publishChecklist");
+  const hint = document.getElementById("publishModalHint");
+  if (!modal || !checklist) return;
+
+  if (playlistsCatalog.length === 0) {
+    alert("Create and save at least one playlist first.");
+    return;
+  }
+
+  hint.textContent = `Device ${deviceId} — select playlists to publish (snapshot at publish time).`;
+  checklist.innerHTML = "";
+
+  for (const pl of playlistsCatalog) {
+    const label = document.createElement("label");
+    const cb = document.createElement("input");
+    cb.type = "checkbox";
+    cb.value = pl.id;
+    cb.dataset.name = pl.name;
+    const pubs = devicesCache.find((d) => d.deviceId === deviceId)?.publishedPlaylists || [];
+    if (pubs.some((p) => p.playlistId === pl.id)) cb.checked = true;
+    label.appendChild(cb);
+    label.appendChild(document.createTextNode(` ${pl.name} (v${pl.version})`));
+    checklist.appendChild(label);
+  }
+
+  modal.classList.remove("hidden");
+}
+
+function closePublishModal() {
+  publishModalDeviceId = null;
+  document.getElementById("publishModal")?.classList.add("hidden");
+}
+
+async function confirmPublishModal() {
+  if (!publishModalDeviceId) return;
+  const ids = [
+    ...document.querySelectorAll("#publishChecklist input[type=checkbox]:checked")
+  ].map((el) => el.value);
+
+  if (ids.length === 0) {
+    alert("Select at least one playlist.");
+    return;
+  }
+
+  const res = await fetch(
+    `/device/${encodeURIComponent(publishModalDeviceId)}/assignments`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ playlistIds: ids })
+    }
+  );
+  const data = await res.json();
+  showResult({ deviceId: publishModalDeviceId, publish: data });
+  if (!res.ok) {
+    alert(data.error || "Publish failed");
+    return;
+  }
+  closePublishModal();
+  await fetchDevices();
+}
+
+async function removePlaylistFromDevice(deviceId, playlistId) {
+  if (!confirm("Remove this playlist from the device? Currently playing content may continue until Clear or failed reboot sync.")) {
+    return;
+  }
+  const res = await fetch(
+    `/device/${encodeURIComponent(deviceId)}/assignments/${encodeURIComponent(playlistId)}`,
+    { method: "DELETE" }
+  );
+  const data = await res.json();
+  showResult({ deviceId, remove: data });
+  if (!res.ok) {
+    alert(data.error || "Remove failed");
+    return;
+  }
+  await fetchDevices();
+}
+
 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" },
+    headers: { "Content-Type": "application/octet-stream" },
     body: file
   });
   const data = await res.json();
@@ -430,219 +674,109 @@ async function uploadFile(file) {
 }
 
 async function addAssetFromFile(file) {
-  showResult({ status: "uploading", filename: file.name });
+  if (!isPlaylistEditorOpen()) {
+    newPlaylistDraft();
+  }
   const data = await uploadFile(file);
   const type = inferMediaType(file.name, file.type);
-  playlistItems.push({
+  editorItems.push({
     id: crypto.randomUUID(),
     url: data.url,
     name: file.name,
     type,
     durationMs: defaultDurationMs(type)
   });
-  savePlaylistDraft();
-  renderPlaylist();
+  renderEditorAssets();
   showResult({ status: "uploaded", ...data });
 }
 
-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 (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;
-
-  return {
-    policy: {
-      playlists: [playlist],
-      fallback: { type: "brand" }
-    }
-  };
-}
-
 async function verify() {
   const code = String(document.getElementById("code").value || "")
     .trim()
     .toUpperCase()
     .replace(/[^0-9A-Z]/g, "");
-
   if (code.length !== 6) {
     showResult({ status: "failed", error: "Enter the 6-character code from the screen." });
     return;
   }
-
   const res = await fetch("/pairing/verify", {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({ code })
   });
-
   const data = await res.json();
   showResult(data);
-
   if (data.deviceId) {
-    const codeInput = document.getElementById("code");
-    if (codeInput) codeInput.value = "";
+    document.getElementById("code").value = "";
     await fetchDevices();
   }
 }
 
 async function unpairDevice(deviceId) {
-  if (
-    !confirm(
-      "Unpair this device? Its card will be removed; the screen keeps the same permanent pairing code."
-    )
-  ) {
-    return;
-  }
-
+  if (!confirm("Unpair this device?")) 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("Unknown device.");
-    return;
-  }
-
-  if (playlistItems.length === 0) {
-    alert("Add at least one asset to the playlist.");
-    return;
-  }
-
-  const mediaBase = getMediaBaseOrigin();
-  if (!mediaBase) {
-    alert(
-      "Local CMS only: set CMS URL for screens first (e.g. http://192.168.1.105:3000 — your PC LAN IP, not localhost)."
-    );
-    return;
-  }
-  if (isLocalPanelHost(new URL(mediaBase).hostname)) {
-    const ok = confirm(
-      "Media URLs use localhost. TVs cannot download from localhost unless the player runs on this PC. Continue anyway?"
-    );
-    if (!ok) return;
-  }
-
-  saveScheduleDraft();
-  let payload;
-  try {
-    payload = buildPolicyPayload();
-  } catch (err) {
-    alert(err.message);
-    return;
-  }
-
-  const res = await fetch(`/device/${deviceId}/content/set-policy`, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify(payload)
-  });
-
-  const data = await res.json();
-  showResult({ deviceId, publish: payload, response: data });
-
-  if (res.ok) {
-    await fetchDevices();
-  }
+  if (res.ok) await fetchDevices();
 }
 
 async function deviceAction(deviceId, action) {
   if (!deviceId) return;
-
   if (action === "reboot" && !confirm("Reboot this device?")) return;
   if (action === "content/clear" && !confirm("Clear content on this device?")) return;
-
   const res = await fetch(`/device/${encodeURIComponent(deviceId)}/${action}`, {
     method: "POST"
   });
   const data = await res.json();
   showResult({ deviceId, action, ...data });
+  if (action === "reboot" && res.ok) await fetchDevices();
+}
 
-  if (action === "reboot" && res.ok) {
-    await fetchDevices();
-  }
+function startDevicePolling() {
+  if (devicePollTimer) clearInterval(devicePollTimer);
+  void fetchDevices();
+  devicePollTimer = setInterval(() => void fetchDevices(), 8000);
 }
 
 document.addEventListener("DOMContentLoaded", () => {
   const savedMediaBase = localStorage.getItem(PANEL_MEDIA_BASE_KEY);
   const cmsBaseInput = document.getElementById("cmsDeviceBaseUrl");
-  if (savedMediaBase && cmsBaseInput) {
-    cmsBaseInput.value = savedMediaBase;
-  } else if (cmsBaseInput && !isLocalPanelHost(window.location.hostname)) {
+  if (savedMediaBase && cmsBaseInput) cmsBaseInput.value = savedMediaBase;
+  else if (cmsBaseInput && !isLocalPanelHost(window.location.hostname)) {
     cmsBaseInput.value = window.location.origin;
   }
 
-  loadPlaylistDraft();
-  loadScheduleDraft();
+  void fetchPlaylists();
   startDevicePolling();
 
-  document.getElementById("addAssetBtn").addEventListener("click", () => {
-    document.getElementById("fileInput").click();
+  document.getElementById("newPlaylistBtn")?.addEventListener("click", newPlaylistDraft);
+  document.getElementById("savePlaylistBtn")?.addEventListener("click", () => void saveCurrentPlaylist());
+  document.getElementById("deletePlaylistBtn")?.addEventListener("click", () => void deleteCurrentPlaylist());
+  document.getElementById("publishConfirmBtn")?.addEventListener("click", () => void confirmPublishModal());
+
+  document.querySelectorAll("[data-close-modal]").forEach((el) => {
+    el.addEventListener("click", closePublishModal);
+  });
+
+  document.getElementById("addAssetBtn")?.addEventListener("click", () => {
+    if (!isPlaylistEditorOpen()) {
+      newPlaylistDraft();
+    }
+    document.getElementById("fileInput")?.click();
   });
 
-  document.getElementById("fileInput").addEventListener("change", async (ev) => {
+  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);
-      }
+      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);
-  });
-
 });