coaia-visualizer 1.0.0

package/components/chart-list.tsx

@@ -0,0 +1,184 @@
+"use client"
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import type { ParsedData, Chart } from "@/lib/types"
+import { getChartSummary, getChartProgress } from "@/lib/jsonl-parser"
+import { ChevronRight, ChevronDown, Target, Calendar, BookOpen } from "lucide-react"
+import { useState } from "react"
+import { cn } from "@/lib/utils"
+
+interface ChartListProps {
+  data: ParsedData
+  selectedChart: Chart | null
+  onSelectChart: (chart: Chart) => void
+  mode: "hierarchy" | "list"
+}
+
+export function ChartList({ data, selectedChart, onSelectChart, mode }: ChartListProps) {
+  if (mode === "list") {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>All Charts</CardTitle>
+          <CardDescription>{data.charts.length} total charts</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ScrollArea className="h-[600px] pr-4">
+            <div className="space-y-2">
+              {data.charts.map((chart) => (
+                <ChartItem
+                  key={chart.id}
+                  chart={chart}
+                  isSelected={selectedChart?.id === chart.id}
+                  onSelect={onSelectChart}
+                  showLevel
+                />
+              ))}
+            </div>
+          </ScrollArea>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Chart Hierarchy</CardTitle>
+        <CardDescription>{data.rootCharts.length} root charts</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ScrollArea className="h-[600px] pr-4">
+          <div className="space-y-2">
+            {data.rootCharts.map((chart) => (
+              <ChartTree key={chart.id} chart={chart} selectedChart={selectedChart} onSelectChart={onSelectChart} />
+            ))}
+          </div>
+        </ScrollArea>
+      </CardContent>
+    </Card>
+  )
+}
+
+interface ChartTreeProps {
+  chart: Chart
+  selectedChart: Chart | null
+  onSelectChart: (chart: Chart) => void
+  level?: number
+}
+
+function ChartTree({ chart, selectedChart, onSelectChart, level = 0 }: ChartTreeProps) {
+  const [isExpanded, setIsExpanded] = useState(true)
+  const hasSubCharts = chart.subCharts.length > 0
+  const isSelected = selectedChart?.id === chart.id
+
+  return (
+    <div className={cn(level > 0 && "ml-4 border-l border-border pl-4")}>
+      <div className="flex items-start gap-2">
+        {hasSubCharts && (
+          <button
+            onClick={() => setIsExpanded(!isExpanded)}
+            className="mt-2 text-muted-foreground hover:text-foreground transition-colors"
+          >
+            {isExpanded ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
+          </button>
+        )}
+        {!hasSubCharts && <div className="w-4" />}
+        <div className="flex-1">
+          <ChartItem chart={chart} isSelected={isSelected} onSelect={onSelectChart} />
+        </div>
+      </div>
+      {isExpanded && hasSubCharts && (
+        <div className="mt-2 space-y-2">
+          {chart.subCharts.map((subChart) => (
+            <ChartTree
+              key={subChart.id}
+              chart={subChart}
+              selectedChart={selectedChart}
+              onSelectChart={onSelectChart}
+              level={level + 1}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+interface ChartItemProps {
+  chart: Chart
+  isSelected: boolean
+  onSelect: (chart: Chart) => void
+  showLevel?: boolean
+}
+
+function ChartItem({ chart, isSelected, onSelect, showLevel }: ChartItemProps) {
+  const summary = getChartSummary(chart)
+  const progress = getChartProgress(chart)
+  const dueDate = chart.chartEntity.metadata.dueDate
+    ? new Date(chart.chartEntity.metadata.dueDate).toLocaleDateString()
+    : null
+
+  return (
+    <button
+      onClick={() => onSelect(chart)}
+      className={cn(
+        "w-full text-left p-3 rounded-lg border transition-all",
+        isSelected ? "border-primary bg-primary/5" : "border-border hover:border-primary/50 bg-card",
+      )}
+    >
+      <div className="flex items-start justify-between gap-2 mb-2">
+        <div className="flex items-center gap-2">
+          <Target className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+          <span className="text-xs font-mono text-muted-foreground">chart_{chart.id}</span>
+          {showLevel && (
+            <Badge variant="outline" className="text-xs">
+              L{chart.level}
+            </Badge>
+          )}
+        </div>
+        {dueDate && (
+          <div className="flex items-center gap-1 text-xs text-muted-foreground">
+            <Calendar className="w-3 h-3" />
+            <span>{dueDate}</span>
+          </div>
+        )}
+      </div>
+      <p className="text-sm mb-2 line-clamp-2">{summary}</p>
+
+      {chart.narrativeBeats.length > 0 && (
+        <div className="mb-2 p-2 bg-chart-3/10 border border-chart-3/20 rounded">
+          <div className="flex items-center gap-2 mb-1">
+            <BookOpen className="w-3 h-3 text-chart-3" />
+            <span className="text-xs font-medium text-chart-3">
+              {chart.narrativeBeats.length} Narrative Beat{chart.narrativeBeats.length > 1 ? "s" : ""}
+            </span>
+          </div>
+          {chart.narrativeBeats[0]?.metadata?.narrative?.description && (
+            <p className="text-xs text-muted-foreground line-clamp-1 pl-5">
+              {chart.narrativeBeats[0].metadata.narrative.description}
+            </p>
+          )}
+        </div>
+      )}
+
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Badge variant="secondary" className="text-xs">
+            {chart.actions.length} actions
+          </Badge>
+        </div>
+        {chart.actions.length > 0 && (
+          <div className="flex items-center gap-2">
+            <div className="w-16 h-1.5 bg-secondary rounded-full overflow-hidden">
+              <div className="h-full bg-primary transition-all" style={{ width: `${progress}%` }} />
+            </div>
+            <span className="text-xs text-muted-foreground">{progress}%</span>
+          </div>
+        )}
+      </div>
+    </button>
+  )
+}

package/components/data-stats.tsx

@@ -0,0 +1,49 @@
+"use client"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import type { ParsedData } from "@/lib/types"
+import { BarChart3, FileText, Network, Target } from "lucide-react"
+
+interface DataStatsProps {
+  data: ParsedData
+}
+
+export function DataStats({ data }: DataStatsProps) {
+  const totalEntities = data.entities.size
+  const totalRelations = data.relations.length
+  const totalCharts = data.charts.length
+  const totalActions = data.charts.reduce((sum, chart) => sum + chart.actions.length, 0)
+  const completedActions = data.charts.reduce(
+    (sum, chart) => sum + chart.actions.filter((a) => a.metadata.completionStatus).length,
+    0,
+  )
+  const totalBeats = data.charts.reduce((sum, chart) => sum + chart.narrativeBeats.length, 0)
+
+  const stats = [
+    { label: "Charts", value: totalCharts, icon: Target, color: "text-chart-1" },
+    { label: "Actions", value: `${completedActions}/${totalActions}`, icon: BarChart3, color: "text-chart-2" },
+    { label: "Entities", value: totalEntities, icon: FileText, color: "text-chart-3" },
+    { label: "Relations", value: totalRelations, icon: Network, color: "text-chart-4" },
+  ]
+
+  return (
+    <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+      {stats.map((stat) => {
+        const Icon = stat.icon
+        return (
+          <Card key={stat.label}>
+            <CardHeader className="pb-2">
+              <CardTitle className="text-sm font-medium text-muted-foreground">{stat.label}</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="flex items-center gap-2">
+                <Icon className={`w-4 h-4 ${stat.color}`} />
+                <span className="text-2xl font-bold">{stat.value}</span>
+              </div>
+            </CardContent>
+          </Card>
+        )
+      })}
+    </div>
+  )
+}

package/components/file-upload.tsx

@@ -0,0 +1,73 @@
+"use client"
+
+import type React from "react"
+
+import { useCallback } from "react"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Upload } from "lucide-react"
+
+interface FileUploadProps {
+  onFileLoad: (content: string, fileName: string) => void
+}
+
+export function FileUpload({ onFileLoad }: FileUploadProps) {
+  const handleFileChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0]
+      if (!file) return
+
+      const reader = new FileReader()
+      reader.onload = (event) => {
+        const content = event.target?.result as string
+        onFileLoad(content, file.name)
+      }
+      reader.readAsText(file)
+    },
+    [onFileLoad],
+  )
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent<HTMLDivElement>) => {
+      e.preventDefault()
+      const file = e.dataTransfer.files[0]
+      if (!file) return
+
+      const reader = new FileReader()
+      reader.onload = (event) => {
+        const content = event.target?.result as string
+        onFileLoad(content, file.name)
+      }
+      reader.readAsText(file)
+    },
+    [onFileLoad],
+  )
+
+  const handleDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault()
+  }, [])
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Load JSONL File</CardTitle>
+        <CardDescription>
+          Upload a coaia-narrative memory file (.jsonl) to visualize structural tension charts
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div
+          onDrop={handleDrop}
+          onDragOver={handleDragOver}
+          className="border-2 border-dashed border-border rounded-lg p-12 text-center hover:border-primary/50 transition-colors cursor-pointer"
+        >
+          <input type="file" accept=".jsonl,.txt" onChange={handleFileChange} className="hidden" id="file-upload" />
+          <label htmlFor="file-upload" className="cursor-pointer">
+            <Upload className="w-12 h-12 mx-auto mb-4 text-muted-foreground" />
+            <p className="text-sm font-medium mb-2">Click to upload or drag and drop</p>
+            <p className="text-xs text-muted-foreground">JSONL files from coaia-narrative</p>
+          </label>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

package/components/narrative-beats.tsx

@@ -0,0 +1,108 @@
+"use client"
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import type { EntityRecord } from "@/lib/types"
+import { Clock, Compass, Drama, Sparkles } from "lucide-react"
+
+interface NarrativeBeatsProps {
+  beats: EntityRecord[]
+}
+
+export function NarrativeBeats({ beats }: NarrativeBeatsProps) {
+  if (beats.length === 0) {
+    return (
+      <Card>
+        <CardContent className="py-8">
+          <p className="text-sm text-muted-foreground text-center">No narrative beats documented yet</p>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      {beats.map((beat, idx) => {
+        const narrative = beat.metadata.narrative
+        const act = beat.metadata.act
+        const typeDramatic = beat.metadata.type_dramatic
+        const universes = beat.metadata.universes || []
+        const timestamp = beat.metadata.timestamp ? new Date(beat.metadata.timestamp).toLocaleString() : null
+
+        return (
+          <Card key={beat.name} className="border-l-4 border-l-chart-3">
+            <CardHeader className="bg-chart-3/5">
+              <div className="flex items-start justify-between gap-4">
+                <div className="flex-1">
+                  <div className="flex items-center gap-2 mb-2">
+                    <Drama className="w-5 h-5 text-chart-3" />
+                    <CardTitle className="text-lg">
+                      Act {act} - {typeDramatic}
+                    </CardTitle>
+                    <Badge variant="outline" className="border-chart-3 text-chart-3">
+                      Beat {idx + 1}
+                    </Badge>
+                  </div>
+                  {timestamp && (
+                    <CardDescription className="flex items-center gap-1">
+                      <Clock className="w-3 h-3" />
+                      {timestamp}
+                    </CardDescription>
+                  )}
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent className="space-y-4 pt-4">
+              {/* Universes */}
+              <div className="flex items-center gap-2 flex-wrap">
+                <Compass className="w-4 h-4 text-muted-foreground" />
+                <span className="text-xs text-muted-foreground">Universes:</span>
+                {universes.map((universe: string) => (
+                  <Badge key={universe} variant="secondary" className="text-xs">
+                    {universe}
+                  </Badge>
+                ))}
+              </div>
+
+              {/* Description */}
+              {narrative?.description && (
+                <div>
+                  <h4 className="text-sm font-semibold mb-2 flex items-center gap-2">
+                    <Sparkles className="w-4 h-4 text-chart-3" />
+                    Description
+                  </h4>
+                  <p className="text-sm leading-relaxed">{narrative.description}</p>
+                </div>
+              )}
+
+              {/* Prose */}
+              {narrative?.prose && (
+                <div>
+                  <h4 className="text-sm font-semibold mb-2">Narrative</h4>
+                  <div className="bg-chart-3/10 border-l-2 border-l-chart-3 rounded-lg p-4">
+                    <p className="text-sm leading-relaxed italic">{narrative.prose}</p>
+                  </div>
+                </div>
+              )}
+
+              {/* Lessons */}
+              {narrative?.lessons && narrative.lessons.length > 0 && (
+                <div>
+                  <h4 className="text-sm font-semibold mb-2">Lessons Learned</h4>
+                  <ul className="space-y-2">
+                    {narrative.lessons.map((lesson: string, lessonIdx: number) => (
+                      <li key={lessonIdx} className="text-sm flex items-start gap-2 p-2 bg-muted/50 rounded">
+                        <span className="text-chart-3 mt-0.5 font-bold">•</span>
+                        <span>{lesson}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        )
+      })}
+    </div>
+  )
+}

package/components/relation-graph.tsx

@@ -0,0 +1,81 @@
+"use client"
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import type { ParsedData, Chart, RelationRecord } from "@/lib/types"
+import { ArrowRight } from "lucide-react"
+
+interface RelationGraphProps {
+  chart: Chart
+  data: ParsedData
+}
+
+export function RelationGraph({ chart, data }: RelationGraphProps) {
+  const relations = chart.relations
+
+  if (relations.length === 0) {
+    return (
+      <Card>
+        <CardContent className="py-8">
+          <p className="text-sm text-muted-foreground text-center">No relations defined</p>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  const relationsByType = relations.reduce(
+    (acc, rel) => {
+      if (!acc[rel.relationType]) {
+        acc[rel.relationType] = []
+      }
+      acc[rel.relationType].push(rel)
+      return acc
+    },
+    {} as Record<string, RelationRecord[]>,
+  )
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Entity Relations</CardTitle>
+        <CardDescription>Connections between chart entities</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        {Object.entries(relationsByType).map(([type, rels]) => (
+          <div key={type}>
+            <h3 className="text-sm font-semibold mb-3 flex items-center gap-2">
+              <Badge variant="outline">{type.replace(/_/g, " ")}</Badge>
+              <span className="text-muted-foreground">({rels.length})</span>
+            </h3>
+            <div className="space-y-2">
+              {rels.map((rel, idx) => {
+                const fromEntity = data.entities.get(rel.from)
+                const toEntity = data.entities.get(rel.to)
+
+                return (
+                  <div key={idx} className="flex items-center gap-3 p-3 bg-muted/30 rounded-lg text-sm">
+                    <div className="flex-1 min-w-0">
+                      <div className="font-mono text-xs text-muted-foreground mb-1">{rel.from}</div>
+                      {fromEntity && (
+                        <div className="text-xs line-clamp-1">
+                          {fromEntity.observations[0] || fromEntity.entityType}
+                        </div>
+                      )}
+                    </div>
+                    <ArrowRight className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+                    <div className="flex-1 min-w-0">
+                      <div className="font-mono text-xs text-muted-foreground mb-1">{rel.to}</div>
+                      {toEntity && (
+                        <div className="text-xs line-clamp-1">{toEntity.observations[0] || toEntity.entityType}</div>
+                      )}
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}

package/components/theme-provider.tsx

@@ -0,0 +1,11 @@
+'use client'
+
+import * as React from 'react'
+import {
+  ThemeProvider as NextThemesProvider,
+  type ThemeProviderProps,
+} from 'next-themes'
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

package/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const badgeVariants = cva(
+  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+        destructive:
+          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'span'> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'span'
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

package/components/ui/button.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost:
+          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+        'icon-sm': 'size-8',
+        'icon-lg': 'size-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : 'button'
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }