rikrok 0.5.0

package/scripts/gen-icon.mjs

@@ -0,0 +1,117 @@
+// The Rik Rok mark: an eighth rest whose stroke becomes the back of a Baskerville Bold
+// Italic R, flattened to outline paths so no font is needed at render time. Cyan and
+// red copies offset and screen-blended, white on top, on black.
+// Geometry was measured from rendered pixels (stem back edge, rest stroke) and tuned by eye.
+// Needs macOS for Baskerville (outline only; the font itself is never shipped).
+// Usage: node scripts/gen-icon.mjs
+import fs from "node:fs";
+import path from "node:path";
+import { execSync } from "node:child_process";
+import { fileURLToPath } from "node:url";
+import * as fkmod from "fontkit";
+
+const fk = fkmod.default ?? fkmod;
+const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
+const CY = "#25F4EE", RD = "#FE2C55";
+
+// Outlines
+const bask = fk.openSync("/System/Library/Fonts/Supplemental/Baskerville.ttc").fonts.find((f) => f.postscriptName === "Baskerville-BoldItalic");
+const noto = fk.openSync(path.join(root, "node_modules/@fontsource/noto-music/files/noto-music-music-400-normal.woff2"));
+const rGlyph = bask.glyphForCodePoint("R".codePointAt(0));
+const eGlyph = noto.glyphForCodePoint(0x1d13e);
+const SIZE = 300, BASE = 450, X = 200; // the working canvas the measurements were taken on
+const glyphT = (font) => `translate(${X} ${BASE}) scale(${SIZE / font.unitsPerEm} ${-SIZE / font.unitsPerEm})`;
+
+// Measured on that canvas: R ink box, stem back edge (two points), rest ink box, rest stroke edge.
+const rb = { x0: 197, y0: 251, x1: 423, y1: 449 };
+const stem = { xa: 260, ya: 310, xb: 232, yb: 400 };
+const eb = { x0: 215, y0: 231, x1: 292, y1: 368 };
+const stroke = { xa: 264, ya: 306, xb: 251, yb: 354 };
+const ang = (p) => Math.atan2(p.xb - p.xa, p.yb - p.ya);
+const rot = ((ang(stem) - ang(stroke)) * 180) / Math.PI;
+const xAt = (p, y) => p.xa + ((y - p.ya) * (p.xb - p.xa)) / (p.yb - p.ya);
+const capH = BASE - rb.y0;
+
+// Tuned: rest 1.12x the cap, tucked 8px into the stem, cut above the foot, R's top-left serif hidden, rest thickened +4.
+const K = 1.12, TUCK = 8, THICK = 4;
+const s = (capH * K) / (eb.y1 - eb.y0);
+const ex = xAt(stroke, eb.y1), ey = eb.y1;
+const tx = xAt(stem, BASE) + TUCK, ty = BASE;
+const restT = `translate(${tx} ${ty}) rotate(${rot.toFixed(3)}) scale(${s.toFixed(4)}) translate(${-ex} ${-ey})`;
+const cutY = BASE - capH * 0.12;
+const midY = BASE - capH * 0.45;
+const rClip = `M${xAt(stem, rb.y0 - 40) - 1} ${rb.y0 - 40} L800 ${rb.y0 - 40} L800 ${BASE + 40} L0 ${BASE + 40} L0 ${midY} L${xAt(stem, midY) - 1} ${midY} Z`;
+const restStroke = (THICK / s) * (noto.unitsPerEm / SIZE); // in the rest's font units
+
+const ux0 = Math.min(rb.x0, tx - 40 * s), ux1 = Math.max(rb.x1, tx + (eb.x1 - eb.x0) * s), uy0 = Math.min(rb.y0, ty - (eb.y1 - eb.y0) * s), uy1 = rb.y1;
+const w = ux1 - ux0, h = uy1 - uy0;
+
+const body = (fill, id) => `<g fill="${fill}"><g clip-path="url(#${id}r)"><path transform="${glyphT(bask)}" d="${rGlyph.path.toSVG()}"/></g><g clip-path="url(#${id}c)"><g transform="${restT}"><path transform="${glyphT(noto)}" d="${eGlyph.path.toSVG()}" stroke="${fill}" stroke-width="${restStroke.toFixed(2)}" stroke-linejoin="round" stroke-linecap="round" paint-order="stroke"/></g></g></g>`;
+const defs = (id) => `<defs><clipPath id="${id}c"><rect x="0" y="0" width="800" height="${cutY}"/></clipPath><clipPath id="${id}r"><path d="${rClip}"/></clipPath></defs>`;
+
+// The mark, fitted into a square of `size` with `fill` fraction, optional rounded background.
+export function mark({ size = 512, fill = 0.8, pad = 96, bg = true, id = "m" } = {}) {
+  const f = Math.min((size * fill) / w, (size * fill) / h);
+  const fit = `translate(${size / 2} ${size / 2}) scale(${f.toFixed(5)}) translate(${-(ux0 + w / 2)} ${-(uy0 + h / 2)})`;
+  const off = (size / 512) * 12;
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${size} ${size}" width="${size}" height="${size}">${defs(id)}${bg ? `<rect width="${size}" height="${size}" rx="${pad}" fill="#000"/>` : ""}<g transform="${fit}"><g style="mix-blend-mode:screen" transform="translate(${(-off / f).toFixed(3)} ${(-off * 0.7 / f).toFixed(3)})">${body(CY, id)}</g><g style="mix-blend-mode:screen" transform="translate(${(off / f).toFixed(3)} ${(off * 0.7 / f).toFixed(3)})">${body(RD, id)}</g>${body("#fff", id)}</g></svg>`;
+}
+
+// Wordmark: "Rik Rok" set entirely in Baskerville Bold Italic outlines, where each R is the
+// mark (rest + R). Letters are advanced by the font's own widths in the mark's coordinate
+// system (font-size 300 at x=200, baseline 450), then the whole line is fitted.
+const upem = bask.unitsPerEm, u = SIZE / upem;
+const adv = (ch) => bask.glyphForCodePoint(ch.codePointAt(0)).advanceWidth * u;
+const glyphPath = (ch) => bask.glyphForCodePoint(ch.codePointAt(0)).path.toSVG();
+const KERN = -0.02 * SIZE; // a touch tighter than the font's default fit
+const letters = [];
+let x = 0;
+for (const ch of "Rik Rok") {
+  letters.push({ ch, x });
+  x += (ch === " " ? adv(" ") * 1.15 : adv(ch)) + (ch === " " ? 0 : KERN);
+}
+const lineW = x - KERN;
+const lineBody = (fill, id) =>
+  letters
+    .map(({ ch, x }, i) => {
+      if (ch === " ") return "";
+      if (ch === "R") return `<g transform="translate(${x.toFixed(2)} 0)">${body(fill, `${id}${i}`)}</g>`;
+      return `<path transform="translate(${x.toFixed(2)} 0) ${glyphT(bask)}" fill="${fill}" d="${glyphPath(ch)}"/>`;
+    })
+    .join("");
+const lineDefs = () => ["wc", "wr", "ww"].map((id) => letters.map((l, i) => (l.ch === "R" ? defs(`${id}${i}`) : "")).join("")).join("");
+// bounds of the line: from the first mark's left ink to the last k's right edge; height = mark's box
+const lx0 = ux0, lx1 = letters[letters.length - 1].x + adv("k") + X, ly0 = uy0, ly1 = uy1;
+const LW = lx1 - lx0, LH = ly1 - ly0;
+const WM_H = 160, WM_PAD = 28;
+const fw = (WM_H - WM_PAD * 2) / LH;
+const WM_W = Math.round(LW * fw + WM_PAD * 2);
+const wfit = `translate(${WM_PAD} ${WM_PAD}) scale(${fw.toFixed(5)}) translate(${-lx0} ${-ly0})`;
+const woff = 5 / fw;
+const wordmark = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${WM_W} ${WM_H}" width="${WM_W}" height="${WM_H}">${lineDefs()}<rect width="${WM_W}" height="${WM_H}" rx="24" fill="#000"/><g transform="${wfit}"><g style="mix-blend-mode:screen" transform="translate(${-woff} ${-woff * 0.7})">${lineBody(CY, "wc")}</g><g style="mix-blend-mode:screen" transform="translate(${woff} ${woff * 0.7})">${lineBody(RD, "wr")}</g>${lineBody("#fff", "ww")}</g></svg>`;
+
+fs.mkdirSync(path.join(root, "assets"), { recursive: true });
+fs.writeFileSync(path.join(root, "assets", "icon.svg"), mark());
+fs.writeFileSync(path.join(root, "server", "public", "icon.svg"), mark());
+fs.writeFileSync(path.join(root, "assets", "wordmark.svg"), wordmark);
+console.log("wrote assets/icon.svg, assets/wordmark.svg, server/public/icon.svg");
+
+let chrome = process.env.RIKROK_BROWSER || "";
+if (!chrome) { try { chrome = execSync("find node_modules/.remotion -name 'chrome-headless-shell' -type f | head -1", { cwd: root }).toString().trim(); } catch {} }
+if (!chrome) { console.log("no headless Chrome yet; PNG icons skipped"); process.exit(0); }
+const puppeteer = (await import("puppeteer-core")).default;
+const browser = await puppeteer.launch({ executablePath: chrome, headless: true, args: ["--no-sandbox"] });
+const page = await browser.newPage();
+for (const size of [180, 512]) {
+  await page.setViewport({ width: size, height: size, deviceScaleFactor: 1 });
+  await page.setContent(`<html><body style="margin:0;background:#000">${mark({ size, pad: size === 180 ? 0 : 96 })}</body></html>`);
+  await page.screenshot({ path: path.join(root, "server", "public", `icon-${size}.png`), clip: { x: 0, y: 0, width: size, height: size } });
+  console.log(`wrote server/public/icon-${size}.png`);
+}
+const wmW = Number(wordmark.match(/width="(\d+)"/)[1]);
+await page.setViewport({ width: wmW, height: 160, deviceScaleFactor: 2 });
+await page.setContent(`<html><body style="margin:0;background:#000">${wordmark}</body></html>`);
+await page.evaluateHandle("document.fonts.ready");
+await page.screenshot({ path: path.join(root, "assets", "wordmark.png"), clip: { x: 0, y: 0, width: wmW, height: 160 } });
+console.log("wrote assets/wordmark.png");
+await browser.close();

package/scripts/ui-check.mjs

@@ -0,0 +1,76 @@
+// Drives the feed UI at iPhone viewport in headless Chrome and screenshots it.
+// Usage: node scripts/ui-check.mjs [outDir]
+import puppeteer from "puppeteer-core";
+import { execSync } from "node:child_process";
+import path from "node:path";
+
+const outDir = process.argv[2] || ".";
+const PORT = process.env.RIKROK_PORT || 4870;
+const chrome = execSync(
+  "find node_modules/.remotion -name 'chrome-headless-shell' -type f | head -1", { cwd: new URL("..", import.meta.url) },
+).toString().trim();
+
+const browser = await puppeteer.launch({
+  executablePath: chrome,
+  headless: true,
+  args: ["--no-sandbox", "--autoplay-policy=no-user-gesture-required", "--mute-audio"],
+});
+const page = await browser.newPage();
+await page.setViewport({ width: 390, height: 844, isMobile: true, hasTouch: true });
+const errors = [];
+page.on("pageerror", (e) => errors.push(String(e)));
+page.on("console", (m) => m.type() === "error" && errors.push(m.text()));
+
+await page.goto(`http://127.0.0.1:${PORT}/`, { waitUntil: "networkidle2" });
+await page.waitForSelector("#go", { timeout: 5000 });
+await page.click("#go");
+await new Promise((r) => setTimeout(r, 2000));
+await page.screenshot({ path: path.join(outDir, "ui-feed.png") });
+
+const state = await page.evaluate(() => {
+  const cells = [...document.querySelectorAll(".cell")];
+  const v = document.querySelector("video");
+  return {
+    cells: cells.length,
+    videoElements: document.querySelectorAll("video").length,
+    playerInFirstCell: cells[0]?.contains(v) ?? false,
+    player: v ? { paused: v.paused, muted: v.muted, currentTime: v.currentTime, src: v.src.split("/").pop() } : null,
+    overlayText: cells[0]?.querySelector(".headline")?.textContent,
+  };
+});
+console.log(JSON.stringify(state, null, 1));
+
+// hold-to-2x
+await page.mouse.move(195, 300);
+await page.mouse.down();
+await new Promise((r) => setTimeout(r, 600));
+const rate = await page.evaluate(() => document.querySelector("video").playbackRate);
+await page.mouse.up();
+await new Promise((r) => setTimeout(r, 450));
+const after = await page.evaluate(() => {
+  const v = document.querySelector("video");
+  return { rate: v.playbackRate, paused: v.paused };
+});
+console.log("hold rate:", rate, "after release:", JSON.stringify(after));
+
+// swipe to second cell — the shared player must follow with a new src
+await page.evaluate(() => document.getElementById("feed").scrollBy(0, window.innerHeight));
+await new Promise((r) => setTimeout(r, 1500));
+const s2 = await page.evaluate(() => {
+  const cells = [...document.querySelectorAll(".cell")];
+  const active = cells.find((c) => {
+    const r = c.getBoundingClientRect();
+    return r.top >= -10 && r.top < 100;
+  });
+  const v = document.querySelector("video");
+  return {
+    activeHeadline: active?.querySelector(".headline")?.textContent,
+    playerMoved: active?.contains(v) ?? false,
+    playing: v && !v.paused,
+    src: v?.src.split("/").pop(),
+  };
+});
+console.log(JSON.stringify(s2, null, 1));
+await page.screenshot({ path: path.join(outDir, "ui-feed-2.png") });
+console.log("page errors:", errors.length ? errors : "none");
+await browser.close();

package/server/feed.mjs

@@ -0,0 +1,153 @@
+// Rik Rok feed server: the vertical swipe feed plus reel MP4s.
+// Binds 127.0.0.1 by default; set RIKROK_BIND=0.0.0.0 to reach it from your phone
+// over Tailscale or your LAN (there is no auth, so keep it on a private network).
+import express from "express";
+import fs from "node:fs";
+import path from "node:path";
+import { REELS_DIR, PUBLIC_DIR, FEED_PORT, FEED_BIND, ensureDirs } from "../src/lib/config.mjs";
+import { routeComment, hookConfigured } from "../src/hooks/comment.mjs";
+
+export function createApp() {
+ensureDirs();
+const app = express();
+app.use(express.json());
+
+function allSidecars() {
+  try {
+    return fs
+      .readdirSync(REELS_DIR)
+      .filter((f) => f.endsWith(".json"))
+      .map((f) => {
+        try { return JSON.parse(fs.readFileSync(path.join(REELS_DIR, f), "utf-8")); } catch { return null; }
+      })
+      .filter(Boolean);
+  } catch { return []; }
+}
+
+function readSidecar(id) {
+  const clean = id.replace(/[^a-zA-Z0-9_-]/g, "");
+  const p = path.join(REELS_DIR, `${clean}.json`);
+  if (!fs.existsSync(p)) return null;
+  return { path: p, data: JSON.parse(fs.readFileSync(p, "utf-8")) };
+}
+
+app.get("/api/feed", (req, res) => {
+  let items = [];
+  try {
+    items = fs
+      .readdirSync(REELS_DIR)
+      .filter((f) => f.endsWith(".json"))
+      .map((f) => {
+        try {
+          const d = JSON.parse(fs.readFileSync(path.join(REELS_DIR, f), "utf-8"));
+          if (!fs.existsSync(path.join(REELS_DIR, `${d.id}.mp4`))) return null;
+          return d;
+        } catch {
+          return null;
+        }
+      })
+      .filter(Boolean);
+    // Auto-tidy: keep at most 3 unwatched reels per project; older unwatched
+    // ones are archived (recoverable via ?archived=1 or the sidecar flag).
+    const byProj = {};
+    for (const d of items) {
+      if (!d.archived && !d.watched) (byProj[d.project] = byProj[d.project] || []).push(d);
+    }
+    for (const arr of Object.values(byProj)) {
+      arr.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
+      for (const d of arr.slice(3)) {
+        d.archived = true;
+        fs.writeFileSync(path.join(REELS_DIR, `${d.id}.json`), JSON.stringify(d, null, 2));
+      }
+    }
+    items = items.filter((d) => !d.archived || req.query.archived === "1");
+  } catch {}
+  // Session chains: tell each reel whether a newer recap of its session exists.
+  const latestBySession = {};
+  for (const d of items) {
+    if (!latestBySession[d.sessionId] || d.createdAt > latestBySession[d.sessionId].createdAt) latestBySession[d.sessionId] = d;
+  }
+  for (const d of items) {
+    const latest = latestBySession[d.sessionId];
+    d.newerId = latest && latest.id !== d.id ? latest.id : null;
+    d.chainCount = items.filter((x) => x.sessionId === d.sessionId).length;
+  }
+  // Unwatched first, newest first within each group.
+  items.sort((a, b) => {
+    if (a.watched !== b.watched) return a.watched ? 1 : -1;
+    return new Date(b.createdAt) - new Date(a.createdAt);
+  });
+  res.json(items);
+});
+
+app.post("/api/watched/:id", (req, res) => {
+  const id = req.params.id.replace(/[^a-zA-Z0-9_-]/g, "");
+  const p = path.join(REELS_DIR, `${id}.json`);
+  if (!fs.existsSync(p)) return res.status(404).json({ error: "not found" });
+  try {
+    const d = JSON.parse(fs.readFileSync(p, "utf-8"));
+    d.watched = req.body?.watched !== false;
+    fs.writeFileSync(p, JSON.stringify(d, null, 2));
+    res.json({ ok: true, watched: d.watched });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+app.post("/api/archive/:id", (req, res) => {
+  const sc = readSidecar(req.params.id);
+  if (!sc) return res.status(404).json({ error: "not found" });
+  sc.data.archived = req.body?.archived !== false;
+  fs.writeFileSync(sc.path, JSON.stringify(sc.data, null, 2));
+  res.json({ ok: true, archived: sc.data.archived });
+});
+
+app.post("/api/comment/:id", (req, res) => {
+  const sc = readSidecar(req.params.id);
+  if (!sc) return res.status(404).json({ error: "not found" });
+  const text = String(req.body?.text || "").trim().slice(0, 2000);
+  if (!text) return res.status(400).json({ error: "empty" });
+  const comment = { text, at: new Date().toISOString() };
+  sc.data.comments = [...(sc.data.comments || []), comment];
+  // Hand the comment to RIKROK_COMMENT_HOOK (if set) with enough context to act on:
+  // which slice this reel covered, and whether newer recaps of the same session exist.
+  let routedTo = null;
+  if (hookConfigured()) {
+    const newer = allSidecars()
+      .filter((d) => d.sessionId === sc.data.sessionId && d.id !== sc.data.id && d.createdAt > sc.data.createdAt)
+      .sort((a, b) => (a.createdAt < b.createdAt ? 1 : -1));
+    routedTo = routeComment({
+      reelId: sc.data.id,
+      source: sc.data.source || "claude",
+      sessionId: sc.data.sessionId,
+      project: sc.data.project,
+      cwd: sc.data.sourcePath || null,
+      headline: sc.data.headline,
+      coveredLines: sc.data.coveredLines || null,
+      newerRecaps: newer.map((d) => ({ id: d.id, headline: d.headline, createdAt: d.createdAt })),
+      resumeHint: sc.data.resumeHint || null,
+      comment: text,
+      at: comment.at,
+    });
+    if (routedTo) comment.routedTo = routedTo;
+  }
+  fs.writeFileSync(sc.path, JSON.stringify(sc.data, null, 2));
+  res.json({ ok: true, routed: Boolean(routedTo), count: sc.data.comments.length });
+});
+
+// MP4s (express.static handles HTTP Range for video seeking/instant playback)
+app.use("/reels", express.static(REELS_DIR, { setHeaders: (r) => r.setHeader("Cache-Control", "public, max-age=31536000, immutable") }));
+app.use(express.static(PUBLIC_DIR));
+return app;
+}
+
+export function startFeed({ port = FEED_PORT, bind = FEED_BIND } = {}) {
+  const app = createApp();
+  return new Promise((resolve, reject) => {
+    const server = app.listen(port, bind, () => {
+      console.log(`[feed] Rik Rok feed on http://${bind}:${port}`);
+      resolve(server);
+    });
+    server.on("error", reject);
+  });
+}