rikrok 0.5.0

package/server/public/app.js

@@ -0,0 +1,342 @@
+// Rik Rok feed: TikTok-style vertical swipe.
+// SINGLE shared <video> element: iOS unlocks it once on the Start tap and it
+// stays unlocked, so every swipe plays with sound — and only one video is
+// ever loaded (161 videos in the DOM made Safari refuse unmuted playback
+// and crawl). Cells are lightweight cards; the player moves into the active one.
+let items = [];
+const feed = document.getElementById("feed");
+const startEl = document.getElementById("start");
+
+// Pool of 3 video elements: one plays in the active cell, the other two sit
+// detached pre-buffering the next two reels. All three are unlocked by the
+// Start tap, so whichever one rotates in can play with sound instantly.
+const pool = Array.from({ length: 3 }, () => {
+  const v = document.createElement("video");
+  v.playsInline = true;
+  v.loop = true;
+  v.preload = "auto";
+  return v;
+});
+let player = pool[0]; // the element currently in the active cell
+let activeCell = null;
+let started = false;
+
+function srcFor(item) {
+  return new URL(`/reels/${item.id}.mp4`, location.origin).href;
+}
+
+function elementFor(item) {
+  return pool.find((v) => v.src === srcFor(item)) || pool.find((v) => v !== player) || pool[0];
+}
+
+function prebuffer() {
+  const idx = items.findIndex((i) => i.id === activeCell?.dataset.id);
+  if (idx < 0) return;
+  const next = [items[idx + 1], items[idx + 2]].filter(Boolean);
+  const spare = pool.filter((v) => v !== player);
+  for (let k = 0; k < spare.length; k++) {
+    const target = next[k];
+    if (!target) {
+      spare[k].removeAttribute("src");
+      continue;
+    }
+    if (spare[k].src !== srcFor(target)) {
+      spare[k].pause();
+      spare[k].src = srcFor(target);
+      spare[k].load();
+    }
+  }
+}
+
+async function load() {
+  const res = await fetch("/api/feed");
+  items = await res.json();
+  document.getElementById("count").textContent = items.length
+    ? `${items.filter((i) => !i.watched).length} new · ${items.length} reels`
+    : "no reels yet";
+  render();
+}
+
+const esc = (s) => String(s ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c]));
+
+const detailAvailable = (i) =>
+  (i.achieved?.length || i.open?.length || i.commits?.length || i.urls?.length) > 0;
+
+function detailSheet(item) {
+  if (!detailAvailable(item)) return "";
+  const list = (title, arr, cls, mark) =>
+    arr?.length
+      ? `<div class="dsec"><div class="dtitle ${cls}">${title}</div>${arr
+          .map((x) => `<div class="ditem"><span class="${cls}">${mark}</span> ${esc(x)}</div>`)
+          .join("")}</div>`
+      : "";
+  const links = item.urls?.length
+    ? `<div class="dsec"><div class="dtitle">Links</div>${item.urls
+        .map((u) => `<a class="ditem dlink" href="${esc(u)}" target="_blank" rel="noopener">${esc(u.replace(/^https?:\/\//, ""))}</a>`)
+        .join("")}</div>`
+    : "";
+  return `<div class="sheet">
+    ${list("Shipped", item.achieved, "ok", "✓")}
+    ${list("Open", item.open, "warn", "○")}
+    ${list("Commits", item.commits, "mono", "·")}
+    ${links}
+  </div>`;
+}
+
+function cellHtml(item) {
+  return `
+    <div class="poster" style="border-color:${esc(item.accentColor)}">
+      <div class="pproj" style="color:${esc(item.accentColor)}">${esc(item.project)}</div>
+      <div class="phead">${esc(item.headline)}</div>
+    </div>
+    ${item.watched ? "" : '<div class="newpill">NEW</div>'}
+    ${item.newerId ? `<button class="chain" data-jump="${esc(item.newerId)}">newer recap of this session ↗</button>` : item.chainCount > 1 ? '<div class="chain latest">latest of ' + item.chainCount + ' recaps</div>' : ""}
+    <div class="flash">✅</div>
+    <div class="overlay">
+      <div class="proj"><span class="dot" style="background:${esc(item.accentColor)}"></span>
+        <span style="color:${esc(item.accentColor)}">${esc(item.project)}</span></div>
+      <div class="headline">${esc(item.headline)}</div>
+      ${item.where ? `<div class="where">${esc(item.where)}</div>` : ""}
+      <div class="next"><b>Next:</b> ${esc(item.next_step)}</div>
+      <div class="row">
+        <button class="btn watch">${item.watched ? "✓ watched" : "mark watched"}</button>
+        <button class="btn comment">💬${item.comments?.length ? " " + item.comments.length : ""}</button>
+        <button class="btn archive">archive</button>
+        <button class="btn copy">copy path</button>
+        ${detailAvailable(item) ? '<button class="btn details">details</button>' : ""}
+      </div>
+      ${detailSheet(item)}
+      <div class="csheet">
+        <textarea class="cinput" rows="2" placeholder="Reply to this session… (routed to the project's agent)"></textarea>
+        <div class="crow">
+          <button class="btn csend">send</button>
+          <span class="cstatus"></span>
+        </div>
+        ${(item.comments || []).map((c) => `<div class="citem">${esc(c.text)}${c.routedTo ? ` <span class="crouted">→ ${esc(c.routedTo)}</span>` : ""}</div>`).join("")}
+      </div>
+    </div>
+    <div class="speed">2×</div>`;
+}
+
+function render() {
+  feed.innerHTML = "";
+  if (!items.length) {
+    document.getElementById("empty").style.display = "block";
+    return;
+  }
+  for (const item of items) {
+    const cell = document.createElement("div");
+    cell.className = "cell";
+    cell.dataset.id = item.id;
+    cell.innerHTML = cellHtml(item);
+    wireCell(cell, item);
+    feed.appendChild(cell);
+  }
+  observe();
+}
+
+function activate(cell) {
+  if (activeCell === cell) return;
+  activeCell = cell;
+  const item = items.find((i) => i.id === cell.dataset.id);
+  if (!item) return;
+  const prev = player;
+  player = elementFor(item);
+  if (prev !== player) {
+    prev.pause();
+    prev.remove(); // detach from its old cell; it becomes a pre-buffer spare
+  }
+  cell.prepend(player);
+  if (player.src !== srcFor(item)) player.src = srcFor(item);
+  player.currentTime = 0;
+  player.playbackRate = 1;
+  if (started) {
+    player.muted = false;
+    player.play().catch(() => {
+      player.muted = true;
+      player.play().catch(() => {});
+    });
+  }
+  armAutoWatch(cell, item);
+  prebuffer();
+}
+
+async function setWatched(item, cell, watched) {
+  item.watched = watched;
+  cell.querySelector(".watch").textContent = watched ? "✓ watched" : "mark watched";
+  cell.querySelector(".watch").classList.toggle("done", watched);
+  const pill = cell.querySelector(".newpill");
+  if (pill && watched) pill.remove();
+  try {
+    await fetch(`/api/watched/${item.id}`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ watched }),
+    });
+  } catch {}
+}
+
+function armAutoWatch(cell, item) {
+  if (item.watched) return;
+  const el = player; // the element playing this reel right now
+  const onTime = () => {
+    if (activeCell !== cell || el !== player) {
+      el.removeEventListener("timeupdate", onTime);
+      return;
+    }
+    if (el.duration && el.currentTime / el.duration > 0.8) {
+      el.removeEventListener("timeupdate", onTime);
+      setWatched(item, cell, true);
+    }
+  };
+  el.addEventListener("timeupdate", onTime);
+}
+
+function wireCell(cell, item) {
+  cell.querySelector(".watch").addEventListener("click", (e) => {
+    e.stopPropagation();
+    setWatched(item, cell, !item.watched);
+  });
+  cell.querySelector(".comment").addEventListener("click", (e) => {
+    e.stopPropagation();
+    cell.querySelector(".csheet").classList.toggle("show");
+  });
+  cell.querySelector(".csend").addEventListener("click", async (e) => {
+    e.stopPropagation();
+    const input = cell.querySelector(".cinput");
+    const status = cell.querySelector(".cstatus");
+    const text = input.value.trim();
+    if (!text) return;
+    status.textContent = "…";
+    try {
+      const r = await fetch(`/api/comment/${item.id}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ text }),
+      });
+      const j = await r.json();
+      status.textContent = j.routedTo ? `sent → ${j.routedTo}` : "saved";
+      const div = document.createElement("div");
+      div.className = "citem";
+      div.textContent = text;
+      cell.querySelector(".crow").after(div);
+      cell.querySelector(".comment").textContent = `💬 ${j.count}`;
+      input.value = "";
+    } catch {
+      status.textContent = "failed";
+    }
+  });
+  cell.querySelector(".archive").addEventListener("click", async (e) => {
+    e.stopPropagation();
+    try {
+      await fetch(`/api/archive/${item.id}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ archived: true }),
+      });
+      if (activeCell === cell) player.pause();
+      cell.remove();
+      items = items.filter((i) => i.id !== item.id);
+    } catch {}
+  });
+  const chain = cell.querySelector("button.chain");
+  if (chain) {
+    chain.addEventListener("click", (e) => {
+      e.stopPropagation();
+      const target = document.querySelector(`.cell[data-id="${chain.dataset.jump}"]`);
+      if (target) target.scrollIntoView({ behavior: "smooth", block: "start" });
+    });
+  }
+  cell.querySelector(".copy").addEventListener("click", async (e) => {
+    e.stopPropagation();
+    try {
+      await navigator.clipboard.writeText(item.sourcePath || item.project);
+      e.target.textContent = "copied ✓";
+      setTimeout(() => (e.target.textContent = "copy path"), 1500);
+    } catch {}
+  });
+
+  // hold: 2x speed while pressed
+  let holdTimer = null;
+  let holding = false;
+  cell.addEventListener("pointerdown", (e) => {
+    if (e.target.closest(".btn, .overlay, .sheet, .csheet")) return;
+    holdTimer = setTimeout(() => {
+      holding = true;
+      player.playbackRate = 2;
+      cell.querySelector(".speed").classList.add("show");
+    }, 350);
+  });
+  const endHold = () => {
+    clearTimeout(holdTimer);
+    if (holding) {
+      player.playbackRate = 1;
+      cell.querySelector(".speed").classList.remove("show");
+      setTimeout(() => (holding = false), 350); // swallow the click this release fires
+    }
+  };
+  for (const ev of ["pointerup", "pointercancel", "pointerleave"]) cell.addEventListener(ev, endHold);
+
+  // tap: pause/resume (and unmute). double-tap: mark watched.
+  let lastTap = 0;
+  cell.addEventListener("click", (e) => {
+    if (holding || e.target.closest(".btn, .sheet, .csheet")) return;
+    const now = Date.now();
+    if (now - lastTap < 320) {
+      setWatched(item, cell, true);
+      const f = cell.querySelector(".flash");
+      f.classList.add("show");
+      setTimeout(() => f.classList.remove("show"), 700);
+      lastTap = 0;
+      return;
+    }
+    lastTap = now;
+    setTimeout(() => {
+      if (Date.now() - lastTap < 320 || activeCell !== cell) return;
+      if (player.muted) {
+        player.muted = false;
+        if (player.paused) player.play().catch(() => {});
+      } else if (player.paused) player.play().catch(() => {});
+      else player.pause();
+    }, 330);
+  });
+}
+
+let observer;
+function observe() {
+  observer?.disconnect();
+  observer = new IntersectionObserver(
+    (entries) => {
+      for (const en of entries) {
+        if (en.intersectionRatio >= 0.6) activate(en.target);
+        else if (activeCell === en.target && en.intersectionRatio === 0) player.pause();
+      }
+    },
+    { threshold: [0, 0.6] },
+  );
+  document.querySelectorAll(".cell").forEach((c) => observer.observe(c));
+}
+
+document.getElementById("go").addEventListener("click", () => {
+  started = true;
+  startEl.remove();
+  const first = document.querySelector(".cell");
+  if (first) activate(first); // assigns srcs to player + both pre-buffer spares
+  // Unlock every pool element inside this gesture (play+pause blesses each
+  // for future unmuted playback), then start the first reel for real.
+  for (const v of pool) {
+    if (v === player) continue;
+    v.muted = true;
+    const p = v.play();
+    if (p) p.then(() => v.pause()).catch(() => {});
+  }
+  if (first) {
+    player.muted = false;
+    player.play().catch(() => {
+      player.muted = true;
+      player.play().catch(() => {});
+    });
+  }
+});
+
+load();

package/server/public/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512"><defs><clipPath id="mc"><rect x="0" y="0" width="800" height="426.12"/></clipPath><clipPath id="mr"><path d="M289.8 211 L800 211 L800 490 L0 490 L0 360.45 L243.30444444444444 360.45 Z"/></clipPath></defs><rect width="512" height="512" rx="96" fill="#000"/><g transform="translate(256 256) scale(1.55369) translate(-291.18499594484996 -338.06)"><g style="mix-blend-mode:screen" transform="translate(-7.724 -5.406)"><g fill="#25F4EE"><g clip-path="url(#mr)"><path transform="translate(200 450) scale(0.146484375 -0.146484375)" d="M642 612L545 294Q524 225 524 204Q524 112 687 112L653 0L-23 0L11 112L32 112Q89 112 128.5 138Q168 164 202 275L455 1102Q465 1135 465 1153Q465 1245 322 1245L356 1356L1022 1356Q1300 1356 1415 1257.5Q1530 1159 1530 1011Q1530 902 1469.5 820.5Q1409 739 1305.5 692.5Q1202 646 1070 631Q1148 595 1225 363Q1281 196 1332.5 154Q1384 112 1466 112L1432 0L1035 0Q970 94 897 330Q854 469 822 523.5Q790 578 755.5 595Q721 612 642 612ZM675 720Q892 720 988 753Q1084 786 1137 869Q1190 952 1190 1042Q1190 1145 1118.5 1196.5Q1047 1248 904 1248Q889 1248 835 1245Z"/></g><g clip-path="url(#mc)"><g transform="translate(224.44444444444446 450) rotate(-2.127) scale(1.6269) translate(-247.20833333333334 -368)"><path transform="translate(200 450) scale(0.3 -0.3)" d="M155 269L251 609Q230 590 203.5 582Q177 574 151 574Q108 574 79 597Q50 620 50 663Q50 691 70 710.5Q90 730 121 730Q150 730 168.5 711.5Q187 693 187 662Q187 640 177 623Q177 617 189 617Q244 617 294 703L312 703L191 269Z" stroke="#25F4EE" stroke-width="8.20" stroke-linejoin="round" stroke-linecap="round" paint-order="stroke"/></g></g></g></g><g style="mix-blend-mode:screen" transform="translate(7.724 5.406)"><g fill="#FE2C55"><g clip-path="url(#mr)"><path transform="translate(200 450) scale(0.146484375 -0.146484375)" d="M642 612L545 294Q524 225 524 204Q524 112 687 112L653 0L-23 0L11 112L32 112Q89 112 128.5 138Q168 164 202 275L455 1102Q465 1135 465 1153Q465 1245 322 1245L356 1356L1022 1356Q1300 1356 1415 1257.5Q1530 1159 1530 1011Q1530 902 1469.5 820.5Q1409 739 1305.5 692.5Q1202 646 1070 631Q1148 595 1225 363Q1281 196 1332.5 154Q1384 112 1466 112L1432 0L1035 0Q970 94 897 330Q854 469 822 523.5Q790 578 755.5 595Q721 612 642 612ZM675 720Q892 720 988 753Q1084 786 1137 869Q1190 952 1190 1042Q1190 1145 1118.5 1196.5Q1047 1248 904 1248Q889 1248 835 1245Z"/></g><g clip-path="url(#mc)"><g transform="translate(224.44444444444446 450) rotate(-2.127) scale(1.6269) translate(-247.20833333333334 -368)"><path transform="translate(200 450) scale(0.3 -0.3)" d="M155 269L251 609Q230 590 203.5 582Q177 574 151 574Q108 574 79 597Q50 620 50 663Q50 691 70 710.5Q90 730 121 730Q150 730 168.5 711.5Q187 693 187 662Q187 640 177 623Q177 617 189 617Q244 617 294 703L312 703L191 269Z" stroke="#FE2C55" stroke-width="8.20" stroke-linejoin="round" stroke-linecap="round" paint-order="stroke"/></g></g></g></g><g fill="#fff"><g clip-path="url(#mr)"><path transform="translate(200 450) scale(0.146484375 -0.146484375)" d="M642 612L545 294Q524 225 524 204Q524 112 687 112L653 0L-23 0L11 112L32 112Q89 112 128.5 138Q168 164 202 275L455 1102Q465 1135 465 1153Q465 1245 322 1245L356 1356L1022 1356Q1300 1356 1415 1257.5Q1530 1159 1530 1011Q1530 902 1469.5 820.5Q1409 739 1305.5 692.5Q1202 646 1070 631Q1148 595 1225 363Q1281 196 1332.5 154Q1384 112 1466 112L1432 0L1035 0Q970 94 897 330Q854 469 822 523.5Q790 578 755.5 595Q721 612 642 612ZM675 720Q892 720 988 753Q1084 786 1137 869Q1190 952 1190 1042Q1190 1145 1118.5 1196.5Q1047 1248 904 1248Q889 1248 835 1245Z"/></g><g clip-path="url(#mc)"><g transform="translate(224.44444444444446 450) rotate(-2.127) scale(1.6269) translate(-247.20833333333334 -368)"><path transform="translate(200 450) scale(0.3 -0.3)" d="M155 269L251 609Q230 590 203.5 582Q177 574 151 574Q108 574 79 597Q50 620 50 663Q50 691 70 710.5Q90 730 121 730Q150 730 168.5 711.5Q187 693 187 662Q187 640 177 623Q177 617 189 617Q244 617 294 703L312 703L191 269Z" stroke="#fff" stroke-width="8.20" stroke-linejoin="round" stroke-linecap="round" paint-order="stroke"/></g></g></g></g></svg>

package/server/public/index.html

@@ -0,0 +1,112 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no" />
+<meta name="apple-mobile-web-app-capable" content="yes" />
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+<meta name="theme-color" content="#000000" />
+<title>Rik Rok</title>
+<link rel="manifest" href="/manifest.webmanifest" />
+<link rel="apple-touch-icon" href="/icon-180.png" />
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
+  html, body { height: 100%; overflow: hidden; background: #000000; color: #ffffff;
+    font-family: -apple-system, "Helvetica Neue", sans-serif; overscroll-behavior: none; }
+  #feed { height: 100dvh; overflow-y: scroll; scroll-snap-type: y mandatory;
+    -webkit-overflow-scrolling: touch; scrollbar-width: none; }
+  #feed::-webkit-scrollbar { display: none; }
+  .cell { position: relative; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always;
+    background: #000000; overflow: hidden; }
+  .cell video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; }
+  .poster { position: absolute; inset: 0; display: flex; flex-direction: column;
+    justify-content: center; padding: 0 32px; gap: 14px;
+    border-left: 6px solid transparent; }
+  .pproj { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; }
+  .phead { font-size: 26px; font-weight: 700; line-height: 1.25; color: rgba(255,255,255,0.85); }
+  .overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px;
+    padding-bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 3;
+    background: linear-gradient(transparent, rgba(0,0,0,0.88));
+    display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
+  .overlay > * { pointer-events: auto; }
+  .proj { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
+    font-weight: 700; display: flex; align-items: center; gap: 8px; }
+  .proj .dot { width: 10px; height: 10px; border-radius: 2px; }
+  .headline { font-size: 16px; font-weight: 600; line-height: 1.3; }
+  .where { font-size: 11px; font-family: ui-monospace, Menlo, monospace;
+    color: rgba(255,255,255,0.55); letter-spacing: 0.02em; }
+  .next { font-size: 13px; color: #EE1D52; line-height: 1.35; }
+  .sheet { display: none; max-height: 40dvh; overflow-y: auto; margin-top: 10px;
+    background: rgba(0,0,0,0.92); border: 1px solid rgba(255,255,255,0.18);
+    border-radius: 14px; padding: 14px 16px; backdrop-filter: blur(10px); }
+  .sheet.show { display: block; }
+  .dsec { margin-bottom: 12px; }
+  .dsec:last-child { margin-bottom: 0; }
+  .dtitle { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
+    color: rgba(255,255,255,0.5); margin-bottom: 6px; }
+  .ditem { font-size: 12.5px; line-height: 1.5; color: #ffffff; display: block; }
+  .ditem.dlink { color: #EE1D52; text-decoration: none; word-break: break-all; }
+  .ditem .ok { color: #69C9D0; } .ditem .warn { color: #EE1D52; }
+  .dsec .mono ~ .ditem, .ditem.mono { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; }
+  .next b { color: inherit; }
+  .row { display: flex; gap: 10px; margin-top: 8px; align-items: center; }
+  .btn { border: 1px solid rgba(255,255,255,0.35); border-radius: 999px;
+    background: rgba(0,0,0,0.55); color: #ffffff; font-size: 12px;
+    padding: 7px 14px; backdrop-filter: blur(6px); }
+  .btn.done { border-color: #69C9D0; color: #69C9D0; }
+  .newpill { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 14px;
+    z-index: 3; font-size: 10px; letter-spacing: 0.18em; font-weight: 800;
+    color: #000000; background: #EE1D52; border-radius: 999px; padding: 5px 10px; }
+  .soundhint { position: absolute; top: calc(14px + env(safe-area-inset-top)); left: 14px;
+    z-index: 3; font-size: 11px; color: rgba(255,255,255,0.8);
+    background: rgba(0,0,0,0.6); border-radius: 999px; padding: 6px 12px; display: none; }
+  .chain { position: absolute; top: calc(14px + env(safe-area-inset-top)); left: 14px; z-index: 3;
+    font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: #000000; background: #69C9D0;
+    border: 0; border-radius: 999px; padding: 6px 12px; }
+  .chain.latest { background: rgba(0,0,0,0.6); color: rgba(255,255,255,0.8); font-weight: 600; }
+  #start { position: fixed; inset: 0; z-index: 10; background: #000000;
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    gap: 18px; }
+  #start h1 { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; }
+  #start h1 span { color: #69C9D0; }
+  #start p { color: rgba(255,255,255,0.6); font-size: 14px; }
+  #start .go { margin-top: 10px; background: #69C9D0; color: #000000; font-weight: 800;
+    border: 0; border-radius: 999px; font-size: 16px; padding: 14px 38px; }
+  #empty { display: none; padding: 40vh 30px 0; text-align: center;
+    color: rgba(255,255,255,0.6); font-size: 15px; line-height: 1.6; }
+  .flash { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
+    z-index: 4; pointer-events: none; opacity: 0; font-size: 64px; transition: opacity 0.4s; }
+  .flash.show { opacity: 1; }
+  .speed { position: absolute; top: 50%; right: 16px; transform: translateY(-50%);
+    z-index: 4; pointer-events: none; opacity: 0; transition: opacity 0.15s;
+    font-weight: 800; font-size: 18px; color: #000000; background: #ffffff;
+    border-radius: 999px; padding: 8px 14px; }
+  .speed.show { opacity: 0.92; }
+  .csheet { display: none; margin-top: 10px; background: rgba(0,0,0,0.92);
+    border: 1px solid rgba(255,255,255,0.18); border-radius: 14px; padding: 12px 14px;
+    backdrop-filter: blur(10px); max-height: 40dvh; overflow-y: auto; }
+  .csheet.show { display: block; }
+  .cinput { width: 100%; background: rgba(255,255,255,0.08); color: #ffffff;
+    border: 1px solid rgba(255,255,255,0.22); border-radius: 10px; padding: 10px 12px;
+    font-size: 14px; font-family: inherit; resize: none; }
+  .crow { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
+  .cstatus { font-size: 11px; color: #69C9D0; }
+  .citem { font-size: 12.5px; line-height: 1.5; color: #ffffff; margin-top: 10px;
+    padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.12); }
+  .crouted { color: #69C9D0; font-size: 11px; }
+</style>
+</head>
+<body>
+<div id="start">
+  <h1>Rik<span> Rok</span></h1>
+  <p id="count">loading…</p>
+  <button class="go" id="go">Start scrolling</button>
+</div>
+<div id="feed"></div>
+<div id="empty">No reels yet.<br/>The watcher will fill this as sessions go idle.</div>
+<script src="/app.js"></script>
+<script>
+  if ("serviceWorker" in navigator) navigator.serviceWorker.register("/sw.js");
+</script>
+</body>
+</html>

package/server/public/manifest.webmanifest

@@ -0,0 +1,14 @@
+{
+  "name": "Rik Rok",
+  "short_name": "Rik Rok",
+  "description": "Your coding-agent sessions as recap reels",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#000000",
+  "theme_color": "#000000",
+  "orientation": "portrait",
+  "icons": [
+    { "src": "/icon-180.png", "sizes": "180x180", "type": "image/png" },
+    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
+  ]
+}

package/server/public/sw.js

@@ -0,0 +1,22 @@
+// Minimal service worker: network-first for the app shell, no video caching
+// (reels are large and served over the LAN — caching them would bloat storage).
+self.addEventListener("install", () => self.skipWaiting());
+self.addEventListener("activate", (e) => e.waitUntil(self.clients.claim()));
+self.addEventListener("fetch", (e) => {
+  const url = new URL(e.request.url);
+  if (url.pathname.startsWith("/reels/") || url.pathname.startsWith("/api/") || e.request.method !== "GET")
+    return;
+  e.respondWith(
+    (async () => {
+      const cache = await caches.open("rikrok-shell-v1");
+      try {
+        const resp = await fetch(e.request);
+        if (resp.ok) cache.put(e.request, resp.clone());
+        return resp;
+      } catch {
+        const cached = await cache.match(e.request);
+        return cached || Response.error();
+      }
+    })(),
+  );
+});

package/src/cli/backfill.mjs

@@ -0,0 +1,13 @@
+import { ensureDirs } from "../lib/config.mjs";
+import { loadState, saveState } from "../lib/state.mjs";
+import { runBackfill } from "../lib/backfill.mjs";
+export async function run(args) {
+  ensureDirs();
+  const state = loadState();
+  const limit = args.limit ? Number(args.limit) : 10;
+  const n = await runBackfill(state, { limit });
+  state.backfillDone = true;
+  saveState(state);
+  console.log(`[backfill] done (${n} reel(s))`);
+  return 0;
+}

package/src/cli/config.mjs

@@ -0,0 +1,29 @@
+import * as c from "../lib/config.mjs";
+export async function run() {
+  const rows = {
+    RIKROK_HOME: c.RIKROK_HOME,
+    RIKROK_CLAUDE_DIR: c.CLAUDE_PROJECTS,
+    RIKROK_SOURCES: c.SOURCES.join(","),
+    RIKROK_PORT: c.FEED_PORT,
+    RIKROK_BIND: c.FEED_BIND,
+    RIKROK_IDLE_MINUTES: c.IDLE_MINUTES,
+    RIKROK_MIN_TURNS: c.MIN_ASSISTANT_TURNS,
+    RIKROK_MIN_TOOLS: c.MIN_TOOL_USES,
+    RIKROK_MAX_PER_HOUR: c.MAX_REELS_PER_HOUR,
+    RIKROK_LLM_URL: c.LLM_URL,
+    RIKROK_LLM_MODEL: c.LLM_MODEL || "(unset: template scripts only)",
+    RIKROK_LLM_KEY: c.LLM_KEY ? "(set)" : "",
+    RIKROK_LLM_EXTRA: JSON.stringify(c.LLM_EXTRA),
+    RIKROK_VOICE: c.VOICE,
+    RIKROK_VOICE_FX: c.VOICE_FX,
+    RIKROK_TTS_URL: c.TTS_URL,
+    RIKROK_TTS_MODEL: c.TTS_MODEL,
+    RIKROK_STT_URL: c.STT_URL || "(off)",
+    RIKROK_STT_MODEL: c.STT_MODEL,
+    RIKROK_COMMENT_HOOK: c.COMMENT_HOOK || "(none)",
+    RIKROK_HANDLE: c.HANDLE || "(none)",
+    RIKROK_PROJECT_NAME_RE: c.PROJECT_NAME_RE || "(none)",
+  };
+  for (const [k, v] of Object.entries(rows)) console.log(`${k.padEnd(24)} ${v}`);
+  return 0;
+}

package/src/cli/demo.mjs

@@ -0,0 +1,14 @@
+// Renders one reel from the bundled fixture session, so you can see the output
+// before pointing Rik Rok at your own sessions. LLM optional (template script otherwise).
+import path from "node:path";
+import { PKG_ROOT, ensureDirs } from "../lib/config.mjs";
+import { buildReel } from "../lib/pipeline.mjs";
+
+export async function run(args) {
+  ensureDirs();
+  const fixture = path.join(PKG_ROOT, "test", "fixtures", "claude-session.jsonl");
+  const outPath = path.resolve(typeof args.out === "string" ? args.out : path.join(PKG_ROOT, "assets", "demo.mp4"));
+  const { sidecar } = await buildReel({ source: "claude", path: fixture, sessionId: "demo-session", projectDir: "example-app" }, 0, { outPath, projectName: "example-app" });
+  console.log(`\ndemo reel: ${outPath}\nscript: ${sidecar.scriptSource}, voice: ${sidecar.voice}${sidecar.silent ? " (silent)" : ""}, ${sidecar.durationSec}s`);
+  return 0;
+}