jfl 0.7.2 → 0.8.0

package/packages/pi/extensions/onboarding-v2.ts

@@ -0,0 +1,516 @@
+/**
+ * Onboarding V2 — CINEMATIC (Sator Square)
+ *
+ * Full-screen animated onboarding sequence for the Tenet rebrand.
+ * Progressive reveal: Sator Square -> subsystem awakening -> mission briefing.
+ * Gold (#FFD700) on dark, theatrical pacing, mystery and gravitas.
+ *
+ * @purpose Cinematic onboarding overlay — Sator Square, subsystem init, mission brief
+ */
+
+import { existsSync, readFileSync, readdirSync, statSync } from "fs"
+import { join } from "path"
+import { execSync } from "child_process"
+import type { PiContext, PiTheme, JflConfig } from "./types.js"
+
+const GOLD = "#FFD700"
+const GOLD_DIM = "#B8960F"
+const DARK_GOLD = "#7A6400"
+const WARM_WHITE = "#F5E6D3"
+const CHARCOAL = "#1a1a1a"
+const EMBER = "#CC5500"
+
+const SATOR_SQUARE = [
+  ["S", "A", "T", "O", "R"],
+  ["A", "R", "E", "P", "O"],
+  ["T", "E", "N", "E", "T"],
+  ["O", "P", "E", "R", "A"],
+  ["R", "O", "T", "A", "S"],
+]
+
+const TENET_POSITIONS = [
+  [2, 0], [2, 1], [2, 2], [2, 3], [2, 4],
+]
+
+interface SubsystemState {
+  name: string
+  icon: string
+  status: "waiting" | "connecting" | "ready" | "error"
+  detail: string
+}
+
+interface MissionData {
+  lastSessionSummary: string[]
+  pendingDecisions: number
+  currentPhase: string
+  projectName: string
+  projectType: string
+  branch: string
+  journalCount: number
+  activeAgents: number
+}
+
+function gatherMissionData(root: string, config: JflConfig): MissionData {
+  const projectName = config.name ?? root.split("/").pop() ?? "TENET"
+  const projectType = config.type ?? "gtm"
+
+  let currentPhase = ""
+  const roadmapPath = join(root, "knowledge", "ROADMAP.md")
+  if (existsSync(roadmapPath)) {
+    try {
+      const content = readFileSync(roadmapPath, "utf-8")
+      const phaseMatch = content.match(/## (?:Phase|Current Phase)[:\s]*([^\n]+)/i)
+      if (phaseMatch) currentPhase = phaseMatch[1].trim()
+    } catch {}
+  }
+
+  const lastSessionSummary: string[] = []
+  let journalCount = 0
+  const journalDir = join(root, ".jfl", "journal")
+  if (existsSync(journalDir)) {
+    try {
+      const files = readdirSync(journalDir).filter(f => f.endsWith(".jsonl")).sort()
+      for (const f of files) {
+        try {
+          const lines = readFileSync(join(journalDir, f), "utf-8").trim().split("\n").filter(Boolean)
+          journalCount += lines.length
+          for (const l of lines.slice(-5)) {
+            try {
+              const e = JSON.parse(l)
+              lastSessionSummary.push(e.title ?? e.summary ?? "")
+            } catch {}
+          }
+        } catch {}
+      }
+    } catch {}
+  }
+
+  let pendingDecisions = 0
+  const tasksPath = join(root, "knowledge", "TASKS.md")
+  if (existsSync(tasksPath)) {
+    try {
+      const content = readFileSync(tasksPath, "utf-8")
+      const pending = content.match(/\[ \]/g)
+      pendingDecisions = pending?.length ?? 0
+    } catch {}
+  }
+
+  let branch = "main"
+  try {
+    branch = execSync("git branch --show-current", { cwd: root, stdio: ["pipe", "pipe", "ignore"] })
+      .toString().trim() || "main"
+  } catch {}
+
+  let activeAgents = 0
+  if (existsSync(journalDir)) {
+    const now = Date.now()
+    try {
+      for (const f of readdirSync(journalDir)) {
+        if (!f.startsWith("session-") || !f.endsWith(".jsonl")) continue
+        try {
+          const stat = statSync(join(journalDir, f))
+          if (now - stat.mtimeMs < 300000) activeAgents++
+        } catch {}
+      }
+    } catch {}
+  }
+
+  return {
+    lastSessionSummary: lastSessionSummary.slice(-4),
+    pendingDecisions,
+    currentPhase,
+    projectName,
+    projectType,
+    branch,
+    journalCount,
+    activeAgents,
+  }
+}
+
+async function probeSubsystem(
+  name: string,
+  probeFn: () => Promise<string>
+): Promise<{ ok: boolean; detail: string }> {
+  try {
+    const detail = await probeFn()
+    return { ok: true, detail }
+  } catch {
+    return { ok: false, detail: "offline" }
+  }
+}
+
+async function probeContextHub(root: string): Promise<string> {
+  const portFile = join(root, ".jfl", "context-hub.port")
+  if (!existsSync(portFile)) return "not found"
+  const port = readFileSync(portFile, "utf-8").trim()
+  const resp = await fetch(`http://localhost:${port}/api/health`, {
+    signal: AbortSignal.timeout(2000),
+  })
+  if (!resp.ok) throw new Error("unhealthy")
+  const data = await resp.json() as { status?: string; itemCount?: number }
+  const count = data.itemCount ?? 0
+  return count > 0 ? `${count} items` : "ready"
+}
+
+async function probeMemory(root: string): Promise<string> {
+  const dbPath = join(root, ".jfl", "memory.db")
+  if (!existsSync(dbPath)) return "no database"
+  const journalDir = join(root, ".jfl", "journal")
+  if (!existsSync(journalDir)) return "0 memories"
+  let count = 0
+  for (const f of readdirSync(journalDir).filter(f => f.endsWith(".jsonl"))) {
+    try {
+      count += readFileSync(join(journalDir, f), "utf-8").trim().split("\n").filter(Boolean).length
+    } catch {}
+  }
+  return `${count} memories`
+}
+
+async function probeSubway(root: string): Promise<string> {
+  const envPath = join(root, ".env")
+  if (!existsSync(envPath)) return "no key"
+  try {
+    const env = readFileSync(envPath, "utf-8")
+    if (env.includes("STRATUS_API_KEY") || env.includes("stratus_sk")) {
+      return "relay online"
+    }
+  } catch {}
+  return "no relay"
+}
+
+export async function setupOnboarding(ctx: PiContext, config: JflConfig): Promise<void> {
+  const root = ctx.session.projectRoot
+
+  if (!ctx.ui.hasUI) {
+    ctx.log("Onboarding v2: no TUI, skipping cinematic", "debug")
+    return
+  }
+
+  const mission = gatherMissionData(root, config)
+
+  const subsystemProbes = await Promise.allSettled([
+    probeSubsystem("Context Hub", () => probeContextHub(root)),
+    probeSubsystem("Memory", () => probeMemory(root)),
+    probeSubsystem("Subway", () => probeSubway(root)),
+  ])
+
+  const subsystems: SubsystemState[] = [
+    {
+      name: "Context Hub",
+      icon: "◆",
+      status: "waiting",
+      detail: "",
+    },
+    {
+      name: "Memory",
+      icon: "◆",
+      status: "waiting",
+      detail: "",
+    },
+    {
+      name: "Subway",
+      icon: "◆",
+      status: "waiting",
+      detail: "",
+    },
+  ]
+
+  const probeResults = subsystemProbes.map(p =>
+    p.status === "fulfilled" ? p.value : { ok: false, detail: "probe failed" }
+  )
+
+  await ctx.ui.custom<void>((tui: any, theme: PiTheme, _kb: any, done: (r: void) => void) => {
+    let phase: "square" | "subsystems" | "briefing" | "ready" = "square"
+    let squareProgress = 0
+    let tenetGlow = false
+    let subsystemIndex = -1
+    let briefingRevealed = 0
+    let readyFade = 0
+    let frameTimer: ReturnType<typeof setTimeout> | null = null
+    let disposed = false
+
+    const TOTAL_CELLS = 25
+    const SQUARE_FRAME_MS = 50
+    const SUBSYSTEM_FRAME_MS = 300
+    const BRIEFING_FRAME_MS = 200
+    const READY_DELAY_MS = 600
+    const TENET_GLOW_DELAY_MS = 400
+
+    function scheduleNext(fn: () => void, ms: number) {
+      if (disposed) return
+      frameTimer = setTimeout(() => {
+        if (disposed) return
+        fn()
+        tui.requestRender()
+      }, ms)
+    }
+
+    function advanceSquare() {
+      if (squareProgress < TOTAL_CELLS) {
+        squareProgress++
+        scheduleNext(advanceSquare, SQUARE_FRAME_MS)
+      } else if (!tenetGlow) {
+        scheduleNext(() => {
+          tenetGlow = true
+          scheduleNext(startSubsystems, TENET_GLOW_DELAY_MS)
+        }, TENET_GLOW_DELAY_MS)
+      }
+    }
+
+    function startSubsystems() {
+      phase = "subsystems"
+      subsystemIndex = 0
+      advanceSubsystem()
+    }
+
+    function advanceSubsystem() {
+      if (subsystemIndex < subsystems.length) {
+        const result = probeResults[subsystemIndex]
+        subsystems[subsystemIndex].status = result.ok ? "ready" : "error"
+        subsystems[subsystemIndex].detail = result.detail
+        subsystemIndex++
+        if (subsystemIndex < subsystems.length) {
+          scheduleNext(advanceSubsystem, SUBSYSTEM_FRAME_MS)
+        } else {
+          scheduleNext(startBriefing, SUBSYSTEM_FRAME_MS)
+        }
+      }
+    }
+
+    function startBriefing() {
+      phase = "briefing"
+      briefingRevealed = 0
+      advanceBriefing()
+    }
+
+    function advanceBriefing() {
+      const totalLines = getBriefingLines().length
+      if (briefingRevealed < totalLines) {
+        briefingRevealed++
+        scheduleNext(advanceBriefing, BRIEFING_FRAME_MS)
+      } else {
+        scheduleNext(startReady, READY_DELAY_MS)
+      }
+    }
+
+    function getBriefingLines(): string[] {
+      const lines: string[] = []
+      if (mission.lastSessionSummary.length > 0) {
+        for (const s of mission.lastSessionSummary.slice(-3)) {
+          if (s.trim()) lines.push(s.trim())
+        }
+      }
+      if (mission.pendingDecisions > 0) {
+        lines.push(`${mission.pendingDecisions} tasks pending`)
+      }
+      if (mission.currentPhase) {
+        lines.push(mission.currentPhase)
+      }
+      if (lines.length === 0) {
+        lines.push("First session. No prior context.")
+      }
+      return lines
+    }
+
+    function startReady() {
+      phase = "ready"
+      readyFade = 0
+      scheduleNext(() => {
+        readyFade = 1
+        scheduleNext(() => {
+          if (!disposed) done(undefined)
+        }, 500)
+      }, 300)
+    }
+
+    scheduleNext(advanceSquare, 300)
+
+    function gold(t: PiTheme, text: string): string {
+      return t.fg(GOLD, text)
+    }
+    function dimGold(t: PiTheme, text: string): string {
+      return t.fg(GOLD_DIM, text)
+    }
+    function darkGold(t: PiTheme, text: string): string {
+      return t.fg(DARK_GOLD, text)
+    }
+    function warm(t: PiTheme, text: string): string {
+      return t.fg(WARM_WHITE, text)
+    }
+
+    function renderSquare(theme: PiTheme, width: number): string[] {
+      const lines: string[] = []
+      const squareWidth = 5 * 4 - 1
+      const leftPad = Math.max(0, Math.floor((width - squareWidth) / 2))
+      const pad = " ".repeat(leftPad)
+
+      for (let row = 0; row < 5; row++) {
+        let line = ""
+        for (let col = 0; col < 5; col++) {
+          const cellIndex = row * 5 + col
+          const char = SATOR_SQUARE[row][col]
+          const isTenet = TENET_POSITIONS.some(([r, c]) => r === row && c === col)
+
+          if (cellIndex < squareProgress) {
+            if (tenetGlow && isTenet) {
+              line += theme.bold(gold(theme, char))
+            } else if (tenetGlow) {
+              line += darkGold(theme, char)
+            } else {
+              line += dimGold(theme, char)
+            }
+          } else {
+            line += darkGold(theme, ".")
+          }
+
+          if (col < 4) line += "   "
+        }
+        lines.push(pad + line)
+        if (row < 4) lines.push("")
+      }
+
+      return lines
+    }
+
+    function renderSubsystems(theme: PiTheme, width: number): string[] {
+      const lines: string[] = []
+      const innerWidth = Math.min(width - 8, 50)
+      const leftPad = Math.max(0, Math.floor((width - innerWidth) / 2))
+      const pad = " ".repeat(leftPad)
+
+      for (let i = 0; i < subsystems.length; i++) {
+        const sys = subsystems[i]
+        let icon: string
+        let nameStr: string
+        let detailStr: string
+
+        if (i > subsystemIndex - 1 && i !== subsystemIndex) {
+          icon = darkGold(theme, "○")
+          nameStr = darkGold(theme, sys.name)
+          detailStr = darkGold(theme, "waiting...")
+        } else if (sys.status === "ready") {
+          icon = gold(theme, "●")
+          nameStr = warm(theme, sys.name)
+          detailStr = gold(theme, sys.detail)
+        } else if (sys.status === "error") {
+          icon = theme.fg(EMBER, "●")
+          nameStr = theme.fg(EMBER, sys.name)
+          detailStr = theme.fg(EMBER, sys.detail)
+        } else {
+          icon = dimGold(theme, "◌")
+          nameStr = dimGold(theme, sys.name)
+          detailStr = dimGold(theme, "connecting...")
+        }
+
+        const namePadded = (sys.name + " ".repeat(Math.max(0, 16 - sys.name.length)))
+        if (sys.status === "ready") {
+          lines.push(pad + `${icon}  ${warm(theme, namePadded)} ${detailStr}`)
+        } else if (sys.status === "error") {
+          lines.push(pad + `${icon}  ${theme.fg(EMBER, namePadded)} ${detailStr}`)
+        } else if (i > subsystemIndex - 1) {
+          lines.push(pad + `${icon}  ${darkGold(theme, namePadded)} ${detailStr}`)
+        } else {
+          lines.push(pad + `${icon}  ${dimGold(theme, namePadded)} ${detailStr}`)
+        }
+      }
+
+      return lines
+    }
+
+    function renderBriefing(theme: PiTheme, width: number): string[] {
+      const lines: string[] = []
+      const innerWidth = Math.min(width - 8, 56)
+      const leftPad = Math.max(0, Math.floor((width - innerWidth) / 2))
+      const pad = " ".repeat(leftPad)
+
+      const divider = darkGold(theme, "───") + dimGold(theme, " Last Session ") + darkGold(theme, "─".repeat(Math.max(0, innerWidth - 17)))
+      lines.push(pad + divider)
+      lines.push("")
+
+      const briefingLines = getBriefingLines()
+      for (let i = 0; i < briefingLines.length; i++) {
+        if (i < briefingRevealed) {
+          lines.push(pad + "  " + warm(theme, briefingLines[i]))
+        }
+      }
+
+      return lines
+    }
+
+    function renderReady(theme: PiTheme, width: number): string[] {
+      const lines: string[] = []
+      const leftPad = Math.max(0, Math.floor((width - 20) / 2))
+      const pad = " ".repeat(leftPad)
+
+      if (readyFade >= 1) {
+        lines.push(pad + theme.bold(gold(theme, mission.projectName)))
+        lines.push(pad + dimGold(theme, `${mission.projectType} · ${mission.branch}`))
+      } else {
+        lines.push(pad + darkGold(theme, mission.projectName))
+      }
+
+      return lines
+    }
+
+    return {
+      handleInput(key: string) {
+        if (key === "\x1b" || key === "q" || key === " " || key === "\r") {
+          if (frameTimer) clearTimeout(frameTimer)
+          disposed = true
+          done(undefined)
+        }
+      },
+
+      render(width: number): string[] {
+        const lines: string[] = []
+        const w = Math.min(width, 80)
+
+        lines.push("")
+        lines.push("")
+
+        if (phase === "square" || phase === "subsystems" || phase === "briefing" || phase === "ready") {
+          const squareLines = renderSquare(theme, w)
+          lines.push(...squareLines)
+        }
+
+        lines.push("")
+
+        if (phase === "subsystems" || phase === "briefing" || phase === "ready") {
+          const sysLines = renderSubsystems(theme, w)
+          lines.push(...sysLines)
+          lines.push("")
+        }
+
+        if (phase === "briefing" || phase === "ready") {
+          const briefLines = renderBriefing(theme, w)
+          lines.push(...briefLines)
+          lines.push("")
+        }
+
+        if (phase === "ready") {
+          const readyLines = renderReady(theme, w)
+          lines.push(...readyLines)
+          lines.push("")
+        }
+
+        if (phase !== "ready") {
+          const hint = darkGold(theme, "Esc to skip")
+          const hintPad = " ".repeat(Math.max(0, Math.floor((w - 11) / 2)))
+          lines.push("")
+          lines.push(hintPad + hint)
+        }
+
+        lines.push("")
+
+        return lines
+      },
+
+      invalidate() {},
+    }
+  }, {
+    overlay: true,
+    overlayOptions: {
+      dismissOnEscape: false,
+    },
+  })
+}