retake-dev 0.4.0

package/src/shell/12-checkpoint.js

@@ -0,0 +1,121 @@
+// Checkpoints. Going back in time rebuilds the moment from the start of its
+// page, which on a heavy app takes a while (the app renders every recorded
+// frame again). So after a slow rewind to t, while you look around in the
+// past, a hidden paused frame is built (in idle time) at a moment a little
+// before t. The next rewind to anywhere at or after it (same timeline, same
+// code) hands that frame the recording (PT.adopt) and it only seeks forward
+// from there. Using it spends it; another is built once things are quiet again.
+// Only one frame runs the app at a time: a checkpoint still being built stops
+// when anything else needs to run (quietCheckpoint), and none is made for an
+// app that keeps state in IndexedDB (another frame's replay would change it
+// under the visible one, see storageOk in the runtime).
+
+const CP_BACK = 1500 // how far behind the last rewind the checkpoint sits
+const CP_QUIET = 300 // ms of no rebuilding before one is started
+D.cpMinMs = 150 // only for apps whose replays (of the last rebuild) take at least this long
+
+let lastBuild = null // { target, branchId, at }
+
+// A rebuild just finished: remember how long its replay took and where it went.
+// (An app whose replays are slow stays "heavy": a rewind a checkpoint made
+// quick still wants the next checkpoint.)
+function noteBuilt(b) {
+  if (!b || b.target == null || b.startedAt == null) return
+  const ms = performance.now() - b.startedAt
+  let seekMs = null
+  try {
+    seekMs = b.pt.debug().seekMs
+  } catch {}
+  if (b.via !== "checkpoint" && (seekMs != null ? seekMs : ms) >= D.cpMinMs) D.heavy = true
+  lastBuild = { target: b.target, branchId: b.branchId, at: performance.now() }
+  D.lastRebuild = { ms: Math.round(ms), seekMs, via: b.via || "replay" }
+}
+
+function dropCheckpoint() {
+  if (!D.cp) return
+  D.cp.frame.remove()
+  D.cp = null
+}
+
+// The frame on show is about to run its app (play, an in-place seek): a
+// checkpoint still being built stops. A ready one is paused and stays.
+function quietCheckpoint() {
+  if (D.cp && !checkpointReady(D.cp)) dropCheckpoint()
+}
+
+// Each frame: drop a checkpoint that no longer fits, start one when it's
+// worth it and quiet.
+function tendCheckpoint() {
+  const cp = D.cp
+  const active = activeBranch()
+  if (cp && (cp.branchId !== D.activeId || cp.version !== (active && active.version))) dropCheckpoint()
+  // The frame on show runs its app again some other way (⌥P in the app, an
+  // API seek): a checkpoint still being built stops.
+  if (D.cp && D.last && (D.last.playing || D.last.seeking) && !checkpointReady(D.cp)) dropCheckpoint()
+  if (D.cp || D.building || !lastBuild || !D.PT || D.switching || D.dragT != null || D.keyT != null) return
+  if (!D.heavy || lastBuild.branchId !== D.activeId) return
+  if (performance.now() - lastBuild.at < CP_QUIET) return
+  const s = D.last
+  if (!s || !s.started || s.seeking || s.previewing || s.playing || s.idb || isInteractive(s)) return
+  let rec
+  let json
+  try {
+    rec = D.PT.history()
+    json = JSON.stringify(rec)
+  } catch {
+    return
+  }
+  // A little before the last rewind, on the page it was on.
+  let page = 0
+  for (const sg of rec.segments || []) if (sg.t <= lastBuild.target) page = sg.t
+  const at = Math.max(s.start, page, lastBuild.target - CP_BACK)
+  const url = new URL(urlAt(rec, at), location.href)
+  let doc = rec.doc
+  for (const sg of rec.segments || []) if (sg.t <= at) doc = sg.doc
+  askStoredDoc(doc, url.href)
+  const id = ++D.buildSeq
+  const frame = makeFrame(url.pathname + url.search + url.hash, { rec: json, target: at, play: false, rate: 1, buildId: id })
+  frame.className = "checkpoint"
+  frame.setAttribute("aria-hidden", "true")
+  frame.tabIndex = -1
+  const vp = okViewport(rec.viewport) || recordedViewport(rec)
+  if (vp) {
+    frame.style.width = vp.w + "px"
+    frame.style.height = vp.h + "px"
+  }
+  D.cp = { id, frame, pt: null, at, branchId: D.activeId, version: active && active.version }
+  lastBuild = null
+}
+
+const checkpointReady = (cp) => {
+  try {
+    const s = cp.pt && cp.pt.state()
+    return !!s && s.booted && s.target == null && !s.seeking
+  } catch {
+    return false
+  }
+}
+
+// Called for every rewind: true if the checkpoint took it (it's the build in
+// flight now, seeking forward from where it was parked).
+function useCheckpoint(payload) {
+  const cp = D.cp
+  if (!cp || cp.branchId !== D.activeId || payload.target < cp.at || !checkpointReady(cp) || typeof cp.pt.adopt !== "function") return false
+  let ok = false
+  try {
+    ok = cp.pt.adopt(String(payload.rec), Number(payload.target), false)
+  } catch {}
+  D.cp = null
+  if (!ok) {
+    cp.frame.remove()
+    return false
+  }
+  cp.frame.className = "building"
+  cp.frame.removeAttribute("tabindex")
+  try {
+    if (typeof cp.pt.setBackground === "function") cp.pt.setBackground(D.dragT != null || D.keyT != null)
+  } catch {}
+  window.__retakeShell.rebuilding = true
+  D.building = { id: cp.id, frame: cp.frame, pt: cp.pt, stash: null, branchId: D.activeId, target: payload.target, play: false, fork: false, visible: true, startedAt: performance.now(), via: "checkpoint", restarts: 0 }
+  return true
+}

package/src/shell/15-session.js

@@ -0,0 +1,291 @@
+// Keeping the session. Timelines, notes and bookmarks go to the dev server
+// (/__retake/session, kept on disk under <project>/.retake/) so a reload or a
+// restart doesn't lose them; each timeline's recording goes to
+// /__retake/recording/:id. Agents reply to notes over /__retake/events.
+// When the server has no session API (it answers 404), everything stays in
+// memory for this page.
+const TOKEN = window.__RETAKE_TOKEN || ""
+const net = {
+  on: true, // false: in-memory only
+  restoring: true, // nothing is saved until what's on disk has been read
+  savedSession: null, // the last session body the server has
+  savedRec: new Map(), // branch id → the recording string the server has
+  activeSig: "", // what the active recording looked like when last saved
+  activeSavedAt: 0,
+}
+
+async function api(method, path, body) {
+  const headers = {}
+  if (method !== "GET") headers["x-retake-token"] = TOKEN
+  if (body !== undefined) headers["content-type"] = "application/json"
+  const res = await fetch("/__retake/" + path, {
+    method,
+    headers,
+    body: body === undefined ? undefined : typeof body === "string" ? body : JSON.stringify(body),
+  })
+  if (res.status === 404) return { missing: true }
+  if (!res.ok) throw new Error(`${method} /__retake/${path}: ${res.status}`)
+  const text = await res.text()
+  return { value: text && (res.headers.get("content-type") || "").includes("json") ? JSON.parse(text) : text }
+}
+
+// The session as the server stores it (see CONTRACT.md).
+function sessionBody() {
+  return {
+    branches: D.branches.map((b) => ({ id: b.id, parentId: b.parentId, forkAt: b.forkAt, name: b.name, codeVersion: b.version || null, end: b.end })),
+    activeId: D.activeId,
+    markers: D.markers,
+    notes: D.notes.map(noteForServer),
+  }
+}
+
+function applySession(s) {
+  D.branches = s.branches.map((b) => ({ ...b, version: b.codeVersion || undefined, json: null, end: b.end ?? b.forkAt, born: -1e9 }))
+  D.branchSeq = Math.max(0, ...D.branches.map((b) => b.id))
+  D.activeId = D.branches.some((b) => b.id === s.activeId) ? s.activeId : D.branches[0].id
+  D.markers = Array.isArray(s.markers) ? s.markers : []
+  D.markerSeq = Math.max(0, ...D.markers.map((m) => Number(m.id) || 0))
+  D.notes = Array.isArray(s.notes) ? s.notes.map(noteFromServer) : []
+}
+
+// A timeline's recording: in memory if we have it, else from the server.
+async function recordingOf(b) {
+  if (b.json) return b.json
+  if (!net.on) return null
+  try {
+    const r = await api("GET", `recording/${b.id}`)
+    if (r.missing || !r.value) return null
+    b.json = typeof r.value === "string" ? r.value : JSON.stringify(r.value)
+    net.savedRec.set(b.id, b.json)
+    return b.json
+  } catch {
+    return null
+  }
+}
+
+// The page the user asked for, without the frame's own parameter.
+const askedFor = location.pathname + location.search + location.hash
+const FEATURES = (window.__retakeConfig && window.__retakeConfig.features) || []
+
+// On load: read what was saved, then open the app at the page the user asked
+// for, live. The saved timelines stay; the active one carries on from its end
+// at this page (a runtime with the "continue" feature marks it there, and a
+// rewind before that point brings the old page back). A runtime without it
+// gets this visit as a timeline of its own, so nothing saved is overwritten.
+// It's never a rebuild, and never waits long: after 1.5s the app opens fresh.
+async function restore() {
+  let known = false // the saved session has been read (or there's none)
+  const fallback = setTimeout(() => !D.frame && openFirstFrame(null, null), 1500)
+  const ownTimeline = () => {
+    const b = newBranch(0, null)
+    b.name = `→ ${askedFor.split("?")[0] || "/"}`
+    D.activeId = b.id
+    return b.id
+  }
+  try {
+    const r = await api("GET", "session")
+    if (r.missing) {
+      net.on = false
+      return
+    }
+    const s = r.value
+    if (!s || !Array.isArray(s.branches) || !s.branches.length) return
+    applySession(s)
+    net.savedSession = JSON.stringify(sessionBody())
+    known = true
+    const json = await recordingOf(activeBranch())
+    if (D.frame) {
+      // Opened fresh already (the session was slow): that visit is its own.
+      D.frameBranch = ownTimeline()
+      return
+    }
+    if (json && FEATURES.includes("continue")) {
+      let end = activeBranch().end
+      try {
+        end = JSON.parse(json).end
+      } catch {}
+      openFirstFrame({ rec: json, target: end, play: true, continue: true, url: askedFor }, D.activeId)
+    } else if (json) openFirstFrame(null, ownTimeline())
+    else openFirstFrame(null, D.activeId)
+  } catch (err) {
+    // Don't overwrite a session we couldn't read.
+    console.warn("[retake] couldn't restore the session; keeping this one in memory", err)
+    net.on = false
+  } finally {
+    clearTimeout(fallback)
+    if (!known && !D.frame) openFirstFrame(null, D.activeId)
+    else if (!known && D.frameBranch == null) D.frameBranch = D.activeId
+    net.restoring = false
+  }
+}
+
+// The active timeline's recording is saved when it's still (paused), and every
+// few seconds while it's live.
+function activeSig(s) {
+  const h = D.PT.history()
+  return `${D.activeId}:${h.end}:${h.events.length}:${h.frames.length}`
+}
+
+let saving = false
+async function persist() {
+  if (!net.on || net.restoring || net.hold || saving || D.switching) return
+  saving = true
+  try {
+    const body = JSON.stringify(sessionBody())
+    if (body !== net.savedSession) {
+      await api("PUT", "session", body)
+      net.savedSession = body
+    }
+    for (const b of D.branches) {
+      if (b.id === D.activeId || !b.json || net.savedRec.get(b.id) === b.json) continue
+      await api("PUT", `recording/${b.id}`, b.json)
+      net.savedRec.set(b.id, b.json)
+    }
+    const s = state()
+    if (D.PT && s && s.started && !D.building && D.frameBranch === D.activeId) {
+      const sig = activeSig(s)
+      const due = !s.recording || performance.now() - net.activeSavedAt > 5000
+      if (sig !== net.activeSig && due) {
+        const json = JSON.stringify(D.PT.history())
+        await api("PUT", `recording/${D.activeId}`, json)
+        net.activeSig = sig
+        net.activeSavedAt = performance.now()
+        net.savedRec.set(D.activeId, json)
+      }
+    }
+  } catch (err) {
+    console.warn("[retake] saving the session failed; will retry", err)
+  } finally {
+    saving = false
+  }
+}
+
+// Debounced: a change is saved once things have been still for 300ms.
+let lastSeen = ""
+let stillSince = 0
+setInterval(() => {
+  if (!net.on || net.restoring || net.hold) return
+  let sig = ""
+  try {
+    sig = JSON.stringify(sessionBody()) + D.branches.map((b) => (b.json ? b.json.length : 0)).join(",")
+    if (D.PT && D.last && D.last.started) sig += activeSig(D.last)
+  } catch {
+    return
+  }
+  const now = performance.now()
+  if (sig !== lastSeen) {
+    lastSeen = sig
+    stillSince = now
+    // A live recording never stands still; save it on its own clock.
+    if (!(D.last && D.last.recording)) return
+  }
+  if (now - stillSince >= 300 || (D.last && D.last.recording)) persist()
+}, 100)
+
+// Agent replies and other outside changes arrive as server events.
+function listen() {
+  if (!window.EventSource || !net.on) return
+  const es = new EventSource("/__retake/events")
+  const read = (e) => {
+    try {
+      return JSON.parse(e.data)
+    } catch {
+      return null
+    }
+  }
+  es.addEventListener("note-updated", (e) => {
+    const d = read(e)
+    const n = d && (d.note || d)
+    if (n && n.id != null) mergeNote(n)
+  })
+  es.addEventListener("active-changed", (e) => {
+    const d = read(e)
+    const id = d && Number(d.activeId)
+    if (id && id !== D.activeId && branchById(id)) switchTo(id, D.last ? D.last.now : 0)
+  })
+  es.addEventListener("code-version", (e) => {
+    const d = read(e)
+    if (d && d.version) D.codeVersionSeen = d.version
+  })
+  // A server without events answers 404 and the stream closes for good.
+  es.onerror = () => es.readyState === EventSource.CLOSED && es.close()
+}
+
+// Start fresh: one empty timeline, no notes, a new recording, straight away.
+// For five seconds it can be undone; the server isn't told until then.
+const UNDO_MS = 5000
+let undo = null
+const toast = $("#wb-toast")
+
+function startFresh() {
+  if (undo) commitFresh()
+  const snap = {
+    branches: D.branches.map((b) => ({ ...b })),
+    activeId: D.activeId,
+    branchSeq: D.branchSeq,
+    notes: D.notes,
+    markers: D.markers,
+    markerSeq: D.markerSeq,
+    frame: D.frame, // the frame showing when it was cleared
+  }
+  const cur = snap.branches.find((b) => b.id === snap.activeId)
+  try {
+    if (cur && D.PT) {
+      cur.json = JSON.stringify(D.PT.history())
+      cur.end = D.PT.state().end
+    }
+  } catch {}
+  net.hold = true
+  D.notes = []
+  D.markers = []
+  D.markerSeq = 0
+  closeCard()
+  resetBranches()
+  invalidateGutter()
+  freshFrame()
+  undo = { snap, timer: setTimeout(commitFresh, UNDO_MS) }
+  toast.hidden = false
+}
+
+// The five seconds are up: clear the session on the server too.
+async function commitFresh() {
+  if (!undo) return
+  clearTimeout(undo.timer)
+  undo = null
+  toast.hidden = true
+  net.savedRec.clear()
+  net.activeSig = ""
+  net.hold = false
+  if (net.on) {
+    try {
+      const body = JSON.stringify(sessionBody())
+      await api("PUT", "session", body)
+      net.savedSession = body
+    } catch {}
+  }
+}
+
+// Undo: everything back as it was, the moment rebuilt where it was.
+function undoFresh() {
+  if (!undo) return
+  clearTimeout(undo.timer)
+  const { snap } = undo
+  undo = null
+  toast.hidden = true
+  D.branches = snap.branches
+  D.activeId = snap.activeId
+  D.branchSeq = snap.branchSeq
+  D.notes = snap.notes
+  D.markers = snap.markers
+  D.markerSeq = snap.markerSeq
+  invalidateGutter()
+  const cur = activeBranch()
+  // Still showing the old frame (the fresh one hadn't swapped in yet)? Then
+  // there's nothing to rebuild: just drop the fresh one.
+  if (D.building) cancelBuild()
+  if (D.frame === snap.frame) D.frameBranch = cur.id
+  else if (cur && cur.json && D.PT) D.PT.load(cur.json, cur.end)
+  net.hold = false
+}
+
+restore().then(listen)