@starlove/orbit 1.4.0 → 2.0.0

package/public/js/sse.js

@@ -1,159 +0,0 @@
-// Server-sent events client. Subscribes to /api/events/stream and turns
-// server events into a debounced bootstrap reload + toast notifications.
-// Owns its own reconnect backoff for the rare case where the browser's
-// auto-reconnect gives up (e.g., HTTP error → CLOSED state).
-
-import { state, syncBoardSelection } from "./state.js";
-import { api, bootstrapPath } from "./api.js";
-import { toast, debounce } from "./toast.js";
-import { render } from "./app.js";
-import { markRead, bumpUnread, clearUnread } from "./unread.js";
-
-// Event types that meaningfully change a card's state from the human's POV
-// — these are the ones that should bump the per-card unread count.
-const CARD_TOUCHING_EVENTS = new Set([
-  "ticket_created",
-  "state_changed",
-  "ticket_updated",
-  "comment_created",
-  "comment_ai_omission_changed",
-  "agent_claimed",
-  "checkpoint_requested",
-  "agent_completed"
-]);
-
-// Manual reconnect backoff for the rare case the browser's auto-reconnect
-// gives up (e.g., the server returned an HTTP error and EventSource entered
-// the CLOSED state). Reset on every successful open.
-let sseReconnectDelayMs = 1000;
-let sseReconnectTimer = null;
-let sseDisconnectToastShown = false;
-
-export function connectEventStream() {
-  if (sseReconnectTimer) {
-    clearTimeout(sseReconnectTimer);
-    sseReconnectTimer = null;
-  }
-  if (state.eventSource) {
-    state.eventSource.close();
-    state.eventSource = null;
-  }
-
-  const params = new URLSearchParams();
-  if (state.boardId) params.set("board_id", state.boardId);
-  const url = `/api/events/stream${params.toString() ? `?${params}` : ""}`;
-
-  const es = new EventSource(url);
-  state.eventSource = es;
-
-  es.addEventListener("open", () => {
-    sseReconnectDelayMs = 1000;
-    if (sseDisconnectToastShown) {
-      toast.success("Live updates reconnected");
-      sseDisconnectToastShown = false;
-    }
-  });
-
-  es.addEventListener("board", async (msg) => {
-    let event;
-    try {
-      event = JSON.parse(msg.data);
-    } catch {
-      return;
-    }
-
-    const eventType = event.type;
-    const findTicket = () => state.data?.tickets?.find((t) => t.id === event.ticket_id);
-
-    // Per-card unread counter:
-    //   - my own events → mark read (no badge for my own changes)
-    //   - foreign card-touching events → bump count by 1
-    //   - delete → clear the entry entirely
-    const me = state.data?.actor?.name;
-    const isMine = event.actor && me && event.actor === me;
-    if (event.ticket_id) {
-      if (isMine) {
-        markRead(event.ticket_id, event.timestamp);
-      } else if (eventType === "ticket_deleted") {
-        clearUnread(event.ticket_id);
-      } else if (CARD_TOUCHING_EVENTS.has(eventType)) {
-        bumpUnread(event.ticket_id);
-      }
-    }
-
-    if (eventType === "ticket_created") {
-      toast.success(`Card created: ${event.data.title || "New card"}`);
-      scheduleSSEReload();
-    } else if (eventType === "state_changed") {
-      const ticket = findTicket();
-      const label = ticket ? `#${ticket.number} ${ticket.title}` : "Card";
-      toast.info(`${label} → ${event.data.to}`);
-      scheduleSSEReload();
-    } else if (eventType === "ticket_updated") {
-      const ticket = findTicket();
-      const label = ticket ? `#${ticket.number}` : "Card";
-      const fields = event.data.fields ? Object.keys(event.data.fields).join(", ") : "";
-      toast.info(`${label} updated${fields ? `: ${fields}` : ""}`);
-      scheduleSSEReload();
-    } else if (eventType === "comment_created") {
-      const ticket = findTicket();
-      const label = ticket ? `#${ticket.number}` : "ticket";
-      toast.info(`New comment on ${label}`);
-      scheduleSSEReload();
-    } else if (eventType === "comment_ai_omission_changed") {
-      scheduleSSEReload();
-    } else if (eventType === "agent_claimed") {
-      const ticket = findTicket();
-      toast.info(`Agent claimed ${ticket ? `#${ticket.number} ${ticket.title}` : "a ticket"}`);
-      scheduleSSEReload();
-    } else if (eventType === "checkpoint_requested") {
-      const ticket = findTicket();
-      toast.warning(`Checkpoint on ${ticket ? `#${ticket.number}` : "ticket"} — needs human input`);
-      scheduleSSEReload();
-    } else if (eventType === "agent_completed") {
-      const ticket = findTicket();
-      toast.success(`Agent completed ${ticket ? `#${ticket.number} ${ticket.title}` : "a ticket"}`);
-      scheduleSSEReload();
-    } else if (
-      eventType === "ticket_deleted" ||
-      eventType === "states_reordered" ||
-      eventType === "state_created" ||
-      eventType === "state_deleted" ||
-      eventType === "board_updated" ||
-      eventType === "board_imported"
-    ) {
-      scheduleSSEReload();
-    }
-  });
-
-  es.onerror = () => {
-    // EventSource has three readyStates:
-    //   0 (CONNECTING) — browser will auto-reconnect, no action needed.
-    //   1 (OPEN)       — transient blip, browser handles it.
-    //   2 (CLOSED)     — browser gave up (e.g., HTTP error). Surface and retry.
-    if (es.readyState !== EventSource.CLOSED) return;
-
-    if (!sseDisconnectToastShown) {
-      toast.warning("Live updates disconnected — retrying…");
-      sseDisconnectToastShown = true;
-    }
-
-    if (sseReconnectTimer) return;
-    const delay = sseReconnectDelayMs;
-    sseReconnectDelayMs = Math.min(sseReconnectDelayMs * 2, 30000);
-    sseReconnectTimer = setTimeout(() => {
-      sseReconnectTimer = null;
-      connectEventStream();
-    }, delay);
-  };
-}
-
-export const scheduleSSEReload = debounce(async () => {
-  const selectedId = state.selectedTicketId;
-  const mode = state.detailMode;
-  state.data = await api(bootstrapPath());
-  syncBoardSelection();
-  state.selectedTicketId = selectedId;
-  state.detailMode = mode;
-  await render();
-}, 300);

package/public/js/starscape.js

@@ -1,332 +0,0 @@
-// Animated starfield background, signature stars, meteors, and the theme
-// toggle (which drives the starscape's dark/light state). Self-initializing:
-// importing this module starts the canvas, schedules the first meteor, and
-// wires the theme toggle button.
-//
-// Background stars are drawn on a 2D canvas so each star has its own twinkle
-// period, phase, and warmth — scintillation that reads as per-star rather
-// than whole-layer. Layers parallax to the cursor by depth. The Milky Way,
-// nebula ghosts, signature stars with spikes, and meteors stay in CSS.
-
-import { themeToggle, themeIcon } from "./dom.js";
-import { applyReducedMotionPreference, effectiveReducedMotionPreference } from "./motion-preference.js";
-import {
-  THEME_CHANGE_EVENT,
-  applyStoredThemePreference,
-  currentTheme,
-  storedThemePreference,
-  setThemePreference,
-  toggleThemePreference
-} from "./theme-preference.js";
-
-// Stored theme must be applied before startStarscape() so its first sync()
-// sees the real theme; otherwise the canvas stays stopped until next resize.
-{
-  applyStoredThemePreference();
-  applyReducedMotionPreference();
-}
-
-const starscape = startStarscape();
-scheduleMeteor();
-
-// Sticky top bar gets a tinted glass panel once the page scrolls, so its
-// controls don't blend into whatever content is slipping behind them.
-{
-  const updateScrolled = () => {
-    document.body.classList.toggle("is-scrolled", window.scrollY > 4);
-  };
-  window.addEventListener("scroll", updateScrolled, { passive: true });
-  updateScrolled();
-}
-
-syncThemeIcon();
-themeToggle?.addEventListener("click", () => {
-  toggleThemePreference();
-});
-
-// When there's no explicit user preference stored, track OS changes live so
-// data-theme stays in sync and CSS selectors ([data-theme="dark"]) keep working.
-window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
-  if (!storedThemePreference()) {
-    setThemePreference(e.matches ? "dark" : "light", { notify: true });
-  }
-});
-
-window.addEventListener(THEME_CHANGE_EVENT, () => {
-  syncThemeIcon();
-  starscape.sync();
-});
-
-function syncThemeIcon() {
-  if (!themeIcon) return;
-  const dark = currentTheme() === "dark";
-  themeIcon.innerHTML = dark
-    ? '<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />'
-    : '<circle cx="12" cy="12" r="5" /><path d="M12 1v2m0 18v2M4.2 4.2l1.4 1.4m12.8 12.8l1.4 1.4M1 12h2m18 0h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4" />';
-}
-
-function startStarscape() {
-  const grain = document.querySelector(".grain");
-  if (!grain) return { sync: () => {} };
-
-  buildSignatureStars(grain);
-
-  const canvas = document.createElement("canvas");
-  canvas.className = "starfield-canvas";
-  canvas.setAttribute("aria-hidden", "true");
-  const milkyWay = grain.querySelector(".milky-way");
-  if (milkyWay && milkyWay.nextSibling) {
-    grain.insertBefore(canvas, milkyWay.nextSibling);
-  } else if (milkyWay) {
-    grain.appendChild(canvas);
-  } else {
-    grain.insertBefore(canvas, grain.firstChild);
-  }
-
-  const ctx = canvas.getContext("2d");
-  const DPR = Math.min(window.devicePixelRatio || 1, 2);
-  let width = 0;
-  let height = 0;
-  let stars = [];
-  let rafId = 0;
-  let running = false;
-
-  // Eased mouse position, normalized to [-0.5, 0.5]. Lerp gives inertia.
-  const mouse = { x: 0, y: 0, tx: 0, ty: 0 };
-
-  function resize() {
-    width = window.innerWidth;
-    height = window.innerHeight;
-    canvas.width = Math.round(width * DPR);
-    canvas.height = Math.round(height * DPR);
-    canvas.style.width = width + "px";
-    canvas.style.height = height + "px";
-    ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
-    buildStars();
-  }
-
-  function buildStars() {
-    // Star count scales with viewport area so wide screens don't read empty.
-    const density = (width * height) / (1440 * 900);
-    const layers = [
-      { count: Math.round(320 * density), depth: 0.12, sizes: [[1, 0.9], [1.4, 0.1]], glow: 0 },
-      { count: Math.round(160 * density), depth: 0.30, sizes: [[1, 0.5], [1.6, 0.4], [2.4, 0.1]], glow: 1.8 },
-      { count: Math.round(44 * density),  depth: 0.58, sizes: [[1.8, 0.5], [2.6, 0.38], [3.6, 0.12]], glow: 2.4 }
-    ];
-    const rng = mulberry32(0xc0ffee);
-    stars = [];
-    for (const layer of layers) {
-      for (let i = 0; i < layer.count; i++) {
-        const size = pickWeighted(rng(), layer.sizes);
-        stars.push({
-          x: rng() * width,
-          y: rng() * height,
-          size,
-          depth: layer.depth,
-          glow: size >= 2 ? layer.glow : 0,
-          rgb: pickStarColor(rng()),
-          period: 2.2 + rng() * 5.4,
-          phase: rng() * Math.PI * 2,
-          amp: 0.25 + rng() * 0.5,
-          baseAlpha: size < 1.5 ? 0.45 + rng() * 0.28 : 0.55 + rng() * 0.22
-        });
-      }
-    }
-  }
-
-  function pickStarColor(r) {
-    if (r < 0.80) return [255, 255, 255];
-    if (r < 0.93) return [255, 222, 186];
-    return [195, 218, 255];
-  }
-
-  function onPointerMove(e) {
-    if (!width || !height) return;
-    mouse.tx = e.clientX / width - 0.5;
-    mouse.ty = e.clientY / height - 0.5;
-  }
-
-  function frame(t) {
-    mouse.x += (mouse.tx - mouse.x) * 0.06;
-    mouse.y += (mouse.ty - mouse.y) * 0.06;
-
-    ctx.clearRect(0, 0, width, height);
-    ctx.globalCompositeOperation = "lighter";
-
-    const time = t / 1000;
-    const parallaxPx = 70;
-
-    for (let i = 0; i < stars.length; i++) {
-      const s = stars[i];
-      const pulse = 0.5 + 0.5 * Math.sin(time * ((2 * Math.PI) / s.period) + s.phase);
-      const alpha = s.baseAlpha * (1 - s.amp + s.amp * pulse);
-      const px = s.x - mouse.x * s.depth * parallaxPx;
-      const py = s.y - mouse.y * s.depth * parallaxPx;
-      const [r, g, b] = s.rgb;
-
-      if (s.glow > 0) {
-        // Glowed stars: soft halo + circular core (arc, not rect) so the
-        // bright center doesn't read as a square at larger zoom levels.
-        const radius = s.size * s.glow;
-        const grad = ctx.createRadialGradient(px, py, 0, px, py, radius);
-        grad.addColorStop(0, `rgba(${r},${g},${b},${alpha * 0.85})`);
-        grad.addColorStop(0.35, `rgba(${r},${g},${b},${alpha * 0.3})`);
-        grad.addColorStop(1, `rgba(${r},${g},${b},0)`);
-        ctx.fillStyle = grad;
-        ctx.beginPath();
-        ctx.arc(px, py, radius, 0, Math.PI * 2);
-        ctx.fill();
-
-        ctx.fillStyle = `rgba(${r},${g},${b},${alpha})`;
-        ctx.beginPath();
-        ctx.arc(px, py, s.size / 2, 0, Math.PI * 2);
-        ctx.fill();
-      } else {
-        // Sub-pixel dim stars: fillRect is fine — they're one device pixel.
-        const half = s.size / 2;
-        ctx.fillStyle = `rgba(${r},${g},${b},${alpha})`;
-        ctx.fillRect(px - half, py - half, s.size, s.size);
-      }
-    }
-
-    ctx.globalCompositeOperation = "source-over";
-    if (running) rafId = requestAnimationFrame(frame);
-  }
-
-  function drawStaticFrame() {
-    ctx.clearRect(0, 0, width, height);
-    ctx.globalCompositeOperation = "lighter";
-    for (const s of stars) {
-      const [r, g, b] = s.rgb;
-      ctx.fillStyle = `rgba(${r},${g},${b},${s.baseAlpha})`;
-      if (s.glow > 0) {
-        ctx.beginPath();
-        ctx.arc(s.x, s.y, s.size / 2, 0, Math.PI * 2);
-        ctx.fill();
-      } else {
-        const half = s.size / 2;
-        ctx.fillRect(s.x - half, s.y - half, s.size, s.size);
-      }
-    }
-    ctx.globalCompositeOperation = "source-over";
-  }
-
-  function start() {
-    if (running) return;
-    running = true;
-    rafId = requestAnimationFrame(frame);
-  }
-
-  function stop() {
-    running = false;
-    cancelAnimationFrame(rafId);
-  }
-
-  function sync() {
-    const isDark = currentTheme() === "dark";
-    const reduced = effectiveReducedMotionPreference();
-    if (!isDark) {
-      stop();
-      ctx.clearRect(0, 0, width, height);
-      return;
-    }
-    if (!stars.length) resize();
-    if (reduced || document.hidden) {
-      stop();
-      drawStaticFrame();
-    } else {
-      start();
-    }
-  }
-
-  window.addEventListener("resize", () => {
-    resize();
-    sync();
-  }, { passive: true });
-  window.addEventListener("pointermove", onPointerMove, { passive: true });
-  document.addEventListener("visibilitychange", sync);
-  window.matchMedia("(prefers-reduced-motion: reduce)").addEventListener("change", () => {
-    applyReducedMotionPreference();
-    sync();
-  });
-  window.addEventListener("orbit:motion-preference-change", sync);
-
-  resize();
-  sync();
-  return { sync };
-}
-
-function buildSignatureStars(grain) {
-  grain.querySelectorAll(".signature-star").forEach((el) => el.remove());
-  const rng = mulberry32(0x5ca1e5);
-  const SIG_COUNT = 7;
-  for (let i = 0; i < SIG_COUNT; i++) {
-    const star = document.createElement("div");
-    star.className = "signature-star";
-    star.setAttribute("aria-hidden", "true");
-    star.style.left = (6 + rng() * 88).toFixed(2) + "%";
-    star.style.top = (8 + rng() * 78).toFixed(2) + "%";
-    star.style.animationDelay = (-rng() * 4.8).toFixed(2) + "s";
-    grain.appendChild(star);
-  }
-}
-
-/* Shooting stars — rare streaks that cross the sky. CSS handles the trail
-   and fade; JS picks the trajectory and reschedules the next one. */
-function scheduleMeteor() {
-  const delay = 14000 + Math.random() * 28000;
-  setTimeout(spawnMeteor, delay);
-}
-
-function spawnMeteor() {
-  const isDark = currentTheme() === "dark";
-  const reduced = effectiveReducedMotionPreference();
-  const grain = document.querySelector(".grain");
-  if (!isDark || reduced || document.hidden || !grain) {
-    scheduleMeteor();
-    return;
-  }
-
-  const vw = window.innerWidth;
-  const vh = window.innerHeight;
-  const startX = Math.random() * vw * 0.6;
-  const startY = Math.random() * vh * 0.55;
-  const distance = 380 + Math.random() * 520;
-  const angleDeg = 18 + Math.random() * 26;
-  const rad = (angleDeg * Math.PI) / 180;
-  const endX = startX + Math.cos(rad) * distance;
-  const endY = startY + Math.sin(rad) * distance;
-
-  const m = document.createElement("div");
-  m.className = "meteor";
-  m.setAttribute("aria-hidden", "true");
-  m.style.setProperty("--from-x", startX + "px");
-  m.style.setProperty("--from-y", startY + "px");
-  m.style.setProperty("--to-x", endX + "px");
-  m.style.setProperty("--to-y", endY + "px");
-  m.style.setProperty("--angle", angleDeg + "deg");
-  grain.appendChild(m);
-  m.addEventListener("animationend", () => m.remove(), { once: true });
-
-  scheduleMeteor();
-}
-
-function pickWeighted(r, table) {
-  let acc = 0;
-  for (const [value, weight] of table) {
-    acc += weight;
-    if (r < acc) return value;
-  }
-  return table[table.length - 1][0];
-}
-
-function mulberry32(seed) {
-  let a = seed >>> 0;
-  return function () {
-    a = (a + 0x6d2b79f5) >>> 0;
-    let t = a;
-    t = Math.imul(t ^ (t >>> 15), t | 1);
-    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
-    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
-  };
-}

package/public/js/state.js

@@ -1,129 +0,0 @@
-import { normalizeSettingsTab } from "./settings-tabs.js";
-
-// Mutable application state plus board/ticket query helpers. The `state`
-// object is the single source of truth for "what view is showing" and
-// "what data did the bootstrap give us"; modules read it freely and mutate
-// it in-place. The query helpers wrap the most common slices.
-
-export const state = {
-  data: null,
-  /** Currently selected board id. Single-board UI; this points at the active
-   *  board in `state.data.boards`. */
-  boardId: "",
-  /** URL-facing board identifier. Routes use slugs; API calls keep using ids. */
-  boardSlug: "",
-  selectedTicketId: "",
-  expandedCardIds: new Set(),
-  /** "empty" | "ticket" | "settings" — drives the main right overlay drawer (not the New flyout). */
-  detailMode: "empty",
-  /** "lanes" | "ai" | "data" | "notes" | "journal" — which Settings tab is active. */
-  settingsTab: normalizeSettingsTab(localStorage.getItem("mab_settings_tab")),
-  /** Whether to render the priority pill on kanban / related cards. The detail
-   *  drawer header always shows it. Default on; user can toggle it from the
-   *  Lanes settings tab. */
-  showPriority: localStorage.getItem("mab_show_priority") !== "false",
-  eventSource: null
-};
-
-export function getSettingsTab() {
-  return normalizeSettingsTab(state.settingsTab || localStorage.getItem("mab_settings_tab"));
-}
-
-export function syncBoardSelection() {
-  if (!state.data) return;
-  const boards = state.data.boards || [];
-  let board = state.boardId ? boards.find((b) => b.id === state.boardId) : null;
-  if (!board && state.boardSlug) {
-    board = boards.find((b) => b.slug === state.boardSlug) || boards.find((b) => b.id === state.boardSlug);
-  }
-  if (!board) {
-    const activeBoardId = state.data.active_board_id;
-    board = boards.find((b) => b.id === activeBoardId) || boards[0] || null;
-  }
-  state.boardId = board?.id || "";
-  state.boardSlug = board?.slug || "";
-}
-
-export function currentBoard() {
-  return (state.data?.boards || []).find((b) => b.id === state.boardId);
-}
-
-/** Labels defined for the current board (from bootstrap), for autocomplete. */
-export function boardLabelCatalog() {
-  if (!state.boardId) return [];
-  return (state.data?.labels || []).filter((label) => label.board_id === state.boardId);
-}
-
-export function statesForProject() {
-  return state.data.states.filter((item) => item.board_id === state.boardId);
-}
-
-export function isAiReadyState(item) {
-  return item?.role === "ai_ready" || item?.name === "AI Ready";
-}
-
-export function visibleStatesForProject() {
-  const states = statesForProject();
-  if (currentBoard()?.ai_enabled !== 0) return states;
-  return states.filter((item) => !isAiReadyState(item));
-}
-
-export function selectableStatesForProject(currentStateId = "") {
-  const states = statesForProject();
-  if (currentBoard()?.ai_enabled !== 0) return states;
-  return states.filter((item) => !isAiReadyState(item) || item.id === currentStateId);
-}
-
-export function ticketsForProject() {
-  return state.data.tickets.filter((item) => item.board_id === state.boardId);
-}
-
-function compactTicketForBoard(ticket) {
-  if (!ticket) return null;
-  return {
-    id: ticket.id,
-    board_id: ticket.board_id,
-    board_slug: ticket.board_slug,
-    number: ticket.number,
-    title: ticket.title,
-    type: ticket.type,
-    state_name: ticket.state_name,
-    state_role: ticket.state_role,
-    priority: ticket.priority
-  };
-}
-
-function refreshBoardTicketDerivatives(boardId) {
-  if (!state.data?.tickets) return;
-  const boardTickets = state.data.tickets.filter((ticket) => ticket.board_id === boardId && !ticket.archived_at);
-  const ticketById = new Map(boardTickets.map((ticket) => [ticket.id, ticket]));
-  const childCountByParent = new Map();
-  for (const ticket of boardTickets) {
-    if (!ticket.parent_ticket_id) continue;
-    childCountByParent.set(ticket.parent_ticket_id, (childCountByParent.get(ticket.parent_ticket_id) || 0) + 1);
-  }
-  for (const ticket of boardTickets) {
-    ticket.parent_ticket = ticket.parent_ticket_id ? compactTicketForBoard(ticketById.get(ticket.parent_ticket_id)) : null;
-    ticket.child_count = childCountByParent.get(ticket.id) || 0;
-  }
-}
-
-/** Merge a ticket returned by a mutation/context endpoint into the bootstrap cache.
- * Keeps drawer edits responsive without paying for a full /api/bootstrap reload. */
-export function upsertTicket(updatedTicket) {
-  if (!state.data?.tickets || !updatedTicket?.id) return;
-  const index = state.data.tickets.findIndex((ticket) => ticket.id === updatedTicket.id);
-  const previous = index >= 0 ? state.data.tickets[index] : {};
-  const merged = {
-    ...previous,
-    ...updatedTicket,
-    labels: updatedTicket.labels || previous.labels || [],
-    comment_count: updatedTicket.comment_count ?? previous.comment_count ?? 0,
-    child_count: updatedTicket.child_count ?? previous.child_count ?? 0,
-    parent_ticket: updatedTicket.parent_ticket || previous.parent_ticket || null
-  };
-  if (index >= 0) state.data.tickets.splice(index, 1, merged);
-  else state.data.tickets.push(merged);
-  state.data.tickets.sort((a, b) => String(b.updated_at || "").localeCompare(String(a.updated_at || "")) || String(a.id).localeCompare(String(b.id)));
-  refreshBoardTicketDerivatives(merged.board_id || state.boardId);
-}