diff --git a/src/components/layout/app-layout.tsx b/src/components/layout/app-layout.tsx index df4da20..435a1e8 100644 --- a/src/components/layout/app-layout.tsx +++ b/src/components/layout/app-layout.tsx @@ -5,6 +5,7 @@ import { AddModal } from "@/components/modals/add-modal" import { BudgetModal } from "@/components/modals/budget-modal" import { EditNodeModal } from "@/components/modals/edit-node-modal" import { MediaPlayer } from "@/components/player/media-player" +import { EpisodeBoardOverlay } from "@/components/playable/episode-board-overlay" import { useDefaultLayout } from "react-resizable-panels" import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@/components/ui/resizable" import { useSchemaStore } from "@/stores/schema-store" @@ -60,6 +61,7 @@ export function AppLayout() { + ) } diff --git a/src/components/layout/node-preview-panel.tsx b/src/components/layout/node-preview-panel.tsx index 5468f4b..1982e8e 100644 --- a/src/components/layout/node-preview-panel.tsx +++ b/src/components/layout/node-preview-panel.tsx @@ -1,7 +1,7 @@ "use client" import { useState, useEffect, useRef, useMemo } from "react" -import { ArrowLeft, Link, Zap, Loader2, Play, Film, ExternalLink, Heart, Repeat2, ChevronDown, ChevronUp, MessageCircle, Quote, Eye, BadgeCheck, AtSign, HeartOff, X, Pencil, FlaskConical, GitMerge, MoreHorizontal, Search } from "lucide-react" +import { ArrowLeft, Link, Zap, Loader2, Play, Film, ExternalLink, Heart, Repeat2, ChevronDown, ChevronUp, MessageCircle, Quote, Eye, BadgeCheck, AtSign, HeartOff, X, Pencil, FlaskConical, GitMerge, MoreHorizontal, Search, LayoutGrid } from "lucide-react" import { Badge } from "@/components/ui/badge" import { BoostButton } from "@/components/boost/boost-button" @@ -34,6 +34,7 @@ import type { AgentChatContext } from "../agent/transcript-chat" import { AttachableEmbeds } from "./attachable-embeds" import { formatDateAbsolute, formatDateRelative } from "@/lib/date-format" import { useGraphStore } from "@/stores/graph-store" +import { useBoardStore } from "@/stores/board-store" const DEEP_RESEARCH_NODE_TYPES = ["Topic"] const ENRICH_NODE_TYPES = ["Person", "Organization", "Product", "Location", "Topic"] as const @@ -1184,6 +1185,16 @@ export function NodePreviewPanel({ node, onBack, schemas }: NodePreviewPanelProp > {displayNodeType(nodeType)} + {nodeType === "Episode" && ( + + )}
{/* Hidden BoostButton — clicked programmatically from the dropdown */} {ownerReference && !hideBoost && ( diff --git a/src/components/playable/__tests__/fixture.ts b/src/components/playable/__tests__/fixture.ts new file mode 100644 index 0000000..32ec4ad --- /dev/null +++ b/src/components/playable/__tests__/fixture.ts @@ -0,0 +1,22 @@ +import rawData from "../../../../private/playable-data" +import claimsData from "../../../../private/playable-claims.json" +import crossEdgesData from "../../../../private/playable-cross-edges.json" +import { setBoardData, type BoardEdge, type BoardNode } from "@/lib/board-dataset" + +/** + * Board test fixture: one real episode's graph slice, assembled from DB pulls + * kept under `private/`: + * - `playable-data.ts` — base export (episode, chapters, clips, entities) + * - `playable-claims.json` — Claim nodes + SOURCE/SUPPORTS/CONTRADICTS/ + * MADE_CLAIM edges + * - `playable-cross-edges.json` — Chapter→Entity MENTIONS edges + */ +export function loadFixture() { + const data = rawData as { nodes: BoardNode[]; edges: BoardEdge[] } + const claims = claimsData as { nodes: BoardNode[]; edges: BoardEdge[] } + const cross = crossEdgesData as unknown as { edges: BoardEdge[] } + setBoardData( + [...data.nodes, ...claims.nodes], + [...data.edges, ...claims.edges, ...cross.edges] + ) +} diff --git a/src/components/playable/__tests__/playable-explorer.test.tsx b/src/components/playable/__tests__/playable-explorer.test.tsx new file mode 100644 index 0000000..3e37b4a --- /dev/null +++ b/src/components/playable/__tests__/playable-explorer.test.tsx @@ -0,0 +1,90 @@ +import { describe, it, expect, beforeEach } from "vitest" +import { render, screen, fireEvent } from "@testing-library/react" +import { PlayableExplorer } from "../playable-explorer" +import { + getChapters, + getEntitiesByType, + getClaimRelations, + getChapterMentions, + getTypeCounts, + setBoardData, +} from "@/lib/board-dataset" +import { computeBoardLayout } from "../board-layout" +import { loadFixture } from "./fixture" + +beforeEach(() => { + loadFixture() +}) + +describe("PlayableExplorer (board view)", () => { + it("lays out the full board: episode, chapters, clips and proximity entities", () => { + const layout = computeBoardLayout() + expect(layout.episode).not.toBeNull() + expect(layout.chapters).toHaveLength(getChapters().length) + expect(layout.clips.length).toBeGreaterThan(0) + + // every entity got a chip anchored inside the chapter strip's x-span + const entityCount = [...getEntitiesByType().values()].flat().length + expect(layout.entities).toHaveLength(entityCount) + const first = layout.chapters[0].card + const last = layout.chapters[layout.chapters.length - 1].card + for (const e of layout.entities) { + expect(e.card.x).toBeGreaterThanOrEqual(first.x - 1) + expect(e.card.x + e.card.w).toBeLessThanOrEqual(last.x + last.w + 1) + // chips sit in the band above the chapter strip + expect(e.card.y + e.card.h).toBeLessThanOrEqual(layout.chapterBusY) + } + + // claims stack under a valid chapter card + expect(layout.claims.length).toBe(21) + const chapterIds = new Set(layout.chapters.map((c) => c.card.id)) + for (const c of layout.claims) expect(chapterIds.has(c.chapterId)).toBe(true) + + // claim relations pulled from the DB stay within the pulled claim set + const rel = getClaimRelations() + expect(rel.supports.length).toBe(10) + expect(rel.contradicts.length).toBe(2) + expect(rel.madeBy.length).toBe(21) + + // chapter→entity mention edges link chapters to nodes already on the board + const mentions = getChapterMentions() + expect(mentions.length).toBe(40) + for (const e of mentions) { + expect(chapterIds.has(e.source)).toBe(true) + } + }) + + it("renders the type legend and chapter cards", () => { + render() + expect(screen.getByText("Topic")).toBeInTheDocument() + expect(screen.getByText("Person")).toBeInTheDocument() + expect(screen.getByText(/chapters/)).toBeInTheDocument() + }) + + it("opens the detail panel on node click and closes on Escape", () => { + render() + // click a chapter card (index badge "00" belongs to first chapter) + const chapterBadge = screen.getByText("00") + fireEvent.click(chapterBadge.closest("button")!) + // detail panel exposes the chapter's source link + expect(screen.getByText("Source")).toBeInTheDocument() + fireEvent.keyDown(window, { key: "Escape" }) + expect(screen.queryByText("Source")).not.toBeInTheDocument() + }) + + it("swaps the active dataset and can restore the fixture", () => { + const fixtureChapterCount = getChapters().length + try { + setBoardData( + [{ ref_id: "ep-x", node_type: "Episode", properties: { episode_title: "X" } }], + [], + "ep-x" + ) + expect(getChapters()).toHaveLength(0) + expect(getTypeCounts()).toEqual([["Episode", 1]]) + } finally { + loadFixture() + } + expect(getChapters()).toHaveLength(fixtureChapterCount) + }) +}) diff --git a/src/components/playable/board-layout.ts b/src/components/playable/board-layout.ts new file mode 100644 index 0000000..1c604e7 --- /dev/null +++ b/src/components/playable/board-layout.ts @@ -0,0 +1,261 @@ +import { + episodeNode, + showNode, + getChapters, + getClips, + getEntitiesByType, + getHost, + getClaimsByChapter, + getChapterMentions, + parseTimestampMs, + type ChapterInfo, + type BoardNode, +} from "@/lib/board-dataset" + +/** + * Proximity-based "Miro board" layout for the playable explorer. + * All coordinates are world pixels; the world origin (0,0) is the episode's + * center. + * + * The chapter strip is the temporal backbone. Entity chips (Person, Topic, + * Organization, Product, Location) are placed in the band above the strip at + * the barycenter of the chapters that mention them — so position encodes + * "where in the episode this thing matters" and mention edges stay short. + */ + +export interface CardPlacement { + id: string + x: number + y: number + w: number + h: number +} + +export interface BoardLayout { + episode: CardPlacement | null + show: CardPlacement | null + clips: { node: BoardNode; card: CardPlacement; ms: number | null }[] + chapters: { info: ChapterInfo; card: CardPlacement }[] + /** Claim cards stacked under their parent chapter card. */ + claims: { node: BoardNode; card: CardPlacement; chapterId: string }[] + /** Entity chips anchored above the chapters that mention them. */ + entities: { node: BoardNode; card: CardPlacement }[] + hostId: string | null + /** World bounds for fit-to-view. */ + bounds: { minX: number; minY: number; maxX: number; maxY: number } + /** Y of the horizontal "bus" line feeding the chapter strip. */ + chapterBusY: number +} + +const EPISODE_W = 340 +const EPISODE_H = 190 +/** Extra height the episode card gets at detail zoom (media summary fits). */ +const EPISODE_DETAIL_GROW = 70 +const SHOW_W = 190 +const SHOW_H = 64 +const CLIP_W = 236 +const CLIP_H = 82 +/** Extra height clips with media get at detail zoom (video preview fits). */ +const CLIP_DETAIL_GROW = 60 +const CLIP_GAP = 32 +const CLIP_Y = -430 +const CHAPTER_W = 196 +const CHAPTER_H = 96 +const CHAPTER_GAP = 22 +const CLAIM_W = CHAPTER_W - 12 +const CLAIM_X_INSET = 6 +/** Claims are two-line cards (claim text + speaker/relation row), not chips. */ +const CLAIM_H = 58 +/** Extra height a claim card gets at detail zoom when it carries a + * triplicate (subject–predicate–object) worth showing on the card. */ +const CLAIM_DETAIL_GROW = 46 + +function hasTriplicate(node: BoardNode): boolean { + const p = node.properties + return ( + typeof p.triplicate_subject === "string" && + p.triplicate_subject.length > 0 && + typeof p.triplicate_predicate === "string" && + p.triplicate_predicate.length > 0 && + typeof p.triplicate_object === "string" && + p.triplicate_object.length > 0 + ) +} +const CLAIM_GAP = 8 +const CLAIM_TOP_GAP = 14 + +const CHIP_W = 150 +const CHIP_H = 32 +const CHIP_GAP = 10 +const BAND_GAP = 31 // space between the episode card bottom and the entity band +const ENTITY_ROW_PITCH = 44 +const ENTITY_MAX_ROWS = 6 +const BUS_GAP = 46 // space between the entity band and the chapter bus + +function hasMedia(node: BoardNode): boolean { + return typeof node.properties.media_url === "string" && node.properties.media_url.length > 0 +} + +/** + * `detail` mirrors the board's semantic zoom: at detail level the episode and + * media-bearing clip cards are taller, and every row below them (entity band, + * chapter bus, strip, claims) shifts down accordingly — positions always + * derive from actual card heights, so cards can never overlap. + */ +export function computeBoardLayout(detail = false): BoardLayout { + const episodeH = detail ? EPISODE_H + EPISODE_DETAIL_GROW : EPISODE_H + const episode: CardPlacement | null = episodeNode + ? { + id: episodeNode.ref_id, + x: -EPISODE_W / 2, + y: -EPISODE_H / 2 - 30, + w: EPISODE_W, + h: episodeH, + } + : null + + const show: CardPlacement | null = showNode + ? { id: showNode.ref_id, x: -EPISODE_W / 2 - SHOW_W - 70, y: -EPISODE_H / 2 - 30, w: SHOW_W, h: SHOW_H } + : null + + const clipNodes = getClips() + const clipsTotal = clipNodes.length * CLIP_W + (clipNodes.length - 1) * CLIP_GAP + const clips = clipNodes.map((node, i) => ({ + node, + card: { + id: node.ref_id, + x: -clipsTotal / 2 + i * (CLIP_W + CLIP_GAP), + y: CLIP_Y, + w: CLIP_W, + h: detail && hasMedia(node) ? CLIP_H + CLIP_DETAIL_GROW : CLIP_H, + }, + ms: parseTimestampMs(node.properties.timestamp), + })) + + const chapterInfos = getChapters() + const chaptersTotal = chapterInfos.length * CHAPTER_W + (chapterInfos.length - 1) * CHAPTER_GAP + const stripMin = -chaptersTotal / 2 + const stripMax = chaptersTotal / 2 + + // Chapters are placed AFTER the entity band, whose height depends on how + // many rows the chips need — so compute entities first, then shift the + // strip down accordingly (see below). + + // ─── Entity anchors: barycenter of mentioning chapters ───────────────── + const chapterX = (refId: string): number | null => { + const i = chapterInfos.findIndex((c) => c.node.ref_id === refId) + if (i === -1) return null + return stripMin + i * (CHAPTER_W + CHAPTER_GAP) + CHAPTER_W / 2 + } + const xsByEntity = new Map() + for (const e of getChapterMentions()) { + const x = chapterX(e.source) + if (x == null) continue + const xs = xsByEntity.get(e.target) ?? [] + xs.push(x) + xsByEntity.set(e.target, xs) + } + + const byType = getEntitiesByType() + const allEntities = [...byType.values()].flat() + const anchored = allEntities + .map((node) => { + const xs = xsByEntity.get(node.ref_id) + const anchor = xs ? xs.reduce((a, b) => a + b, 0) / xs.length : 0 + return { node, anchor } + }) + .sort((a, b) => a.anchor - b.anchor) + + // The band hangs below the episode card — its top derives from the card's + // actual (possibly detail-grown) bottom, so the two never collide. + const entityBandTop = episode ? episode.y + episode.h + BAND_GAP : 96 + + // ─── Greedy row packing: first row where the chip doesn't overlap ────── + const rows: { x: number }[][] = [] + const fits = (row: { x: number }[], x: number) => + row.every((c) => x + CHIP_W + CHIP_GAP <= c.x || c.x + CHIP_W + CHIP_GAP <= x) + const entities: BoardLayout["entities"] = [] + for (const { node, anchor } of anchored) { + const x = Math.min(Math.max(anchor - CHIP_W / 2, stripMin), stripMax - CHIP_W) + let rowIdx = rows.findIndex((row) => fits(row, x)) + if (rowIdx === -1 && rows.length < ENTITY_MAX_ROWS) { + rows.push([]) + rowIdx = rows.length - 1 + } + if (rowIdx === -1) { + // Band full — tack onto the shortest row, right of its last chip. + rowIdx = rows.reduce((min, row, i) => (row.length < rows[min].length ? i : min), 0) + const last = rows[rowIdx].reduce((max, c) => Math.max(max, c.x), stripMin) + const fx = Math.min(last + CHIP_W + CHIP_GAP, stripMax - CHIP_W) + rows[rowIdx].push({ x: fx }) + entities.push({ + node, + card: { id: node.ref_id, x: fx, y: entityBandTop + rowIdx * ENTITY_ROW_PITCH, w: CHIP_W, h: CHIP_H }, + }) + continue + } + rows[rowIdx].push({ x }) + entities.push({ + node, + card: { id: node.ref_id, x, y: entityBandTop + rowIdx * ENTITY_ROW_PITCH, w: CHIP_W, h: CHIP_H }, + }) + } + + const bandBottom = entityBandTop + Math.max(rows.length, 1) * ENTITY_ROW_PITCH + const busY = bandBottom + BUS_GAP + const chapterY = busY + 40 + + const chapters = chapterInfos.map((info, i) => ({ + info, + card: { + id: info.node.ref_id, + x: stripMin + i * (CHAPTER_W + CHAPTER_GAP), + y: chapterY, + w: CHAPTER_W, + h: CHAPTER_H, + }, + })) + + // Claims stack under their parent chapter card, inset from the card's width. + // Heights vary (detail zoom grows triplicate-bearing cards), so stack with a + // running Y instead of a fixed pitch. + const claimsByChapter = getClaimsByChapter() + const claims: BoardLayout["claims"] = [] + for (const { card } of chapters) { + const chapterClaims = claimsByChapter.get(card.id) ?? [] + let claimY = card.y + card.h + CLAIM_TOP_GAP + for (const node of chapterClaims) { + const h = detail && hasTriplicate(node) ? CLAIM_H + CLAIM_DETAIL_GROW : CLAIM_H + claims.push({ + node, + chapterId: card.id, + card: { id: node.ref_id, x: card.x + CLAIM_X_INSET, y: claimY, w: CLAIM_W, h }, + }) + claimY += h + CLAIM_GAP + } + } + + const hostId = getHost()?.ref_id ?? null + + const all = [ + ...(episode ? [episode] : []), + ...(show ? [show] : []), + ...clips.map((c) => c.card), + ...chapters.map((c) => c.card), + ...claims.map((c) => c.card), + ...entities.map((c) => c.card), + ] + const bounds = { + minX: Math.min(...all.map((c) => c.x)) - 60, + minY: Math.min(...all.map((c) => c.y)) - 60, + maxX: Math.max(...all.map((c) => c.x + c.w)) + 60, + maxY: Math.max(...all.map((c) => c.y + c.h)) + 60, + } + + return { episode, show, clips, chapters, claims, entities, hostId, bounds, chapterBusY: busY } +} + +/** Center point of a card. */ +export function center(c: CardPlacement): { x: number; y: number } { + return { x: c.x + c.w / 2, y: c.y + c.h / 2 } +} diff --git a/src/components/playable/board-view.tsx b/src/components/playable/board-view.tsx new file mode 100644 index 0000000..78874d3 --- /dev/null +++ b/src/components/playable/board-view.tsx @@ -0,0 +1,893 @@ +"use client" + +import { useEffect, useMemo, useRef, useState } from "react" +import { zoom as d3Zoom, zoomIdentity, type ZoomTransform } from "d3-zoom" +import { select as d3Select } from "d3-selection" +import { + nodeById, + nodeLabel, + truncateLabel, + typeColor, + formatMs, + episodeNode, + getClaimRelations, + getChapterMentions, + getChapters, + boardEdges, +} from "@/lib/board-dataset" +import { + computeBoardLayout, + center, + type CardPlacement, +} from "./board-layout" +import type { ZoomApi } from "./view-types" + +// Semantic zoom thresholds: below FAR the board collapses to group summaries, +// above DETAIL cards reveal descriptions / transcripts / edge labels. +const ZOOM_FAR = 0.42 +const ZOOM_DETAIL = 1.25 + +// Edge / surface palette — the app theme's border token (oklch 0.2) is nearly +// invisible at 1px on this canvas, so the board uses brighter steps. +const EDGE_COLOR = "oklch(0.48 0.03 260)" +const EDGE_ACTIVE = "oklch(0.72 0.14 200)" +const EDGE_LABEL = "oklch(0.72 0.02 260)" +const SUPPORTS_COLOR = "#2ec4b6" +const CONTRADICTS_COLOR = "#e63946" + +type Level = 0 | 1 | 2 + +function levelFor(k: number): Level { + return k < ZOOM_FAR ? 0 : k > ZOOM_DETAIL ? 2 : 1 +} + +/** Entity nodes carry no images in the DB — for people we derive an initials + * avatar so Person chips read as people, not bare dots. */ +function initials(name: string): string { + return name + .split(/\s+/) + .filter(Boolean) + .slice(0, 2) + .map((w) => w[0]?.toUpperCase() ?? "") + .join("") +} + +/** Muted inline video used as a visual thumbnail. pointer-events are off so it + * never interferes with board pan/select; preload="metadata" grabs the first + * frame without streaming the whole clip. */ +function MediaThumb({ src, className }: { src: string; className?: string }) { + return ( +