coaia-visualizer 1.0.0

package/app/page.tsx

@@ -0,0 +1,284 @@
+// app/page.tsx - Updated to support auto-loading from API
+"use client"
+
+import { useState, useEffect } from "react"
+import { FileUpload } from "@/components/file-upload"
+import { ChartList } from "@/components/chart-list"
+import { ChartDetail } from "@/components/chart-detail"
+import { DataStats } from "@/components/data-stats"
+import type { ParsedData, Chart } from "@/lib/types"
+import { parseJSONL, organizeData } from "@/lib/jsonl-parser"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Download, Upload, RefreshCw, Save } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { useToast } from "@/hooks/use-toast"
+
+export default function Page() {
+  const [data, setData] = useState<ParsedData | null>(null)
+  const [selectedChart, setSelectedChart] = useState<Chart | null>(null)
+  const [viewMode, setViewMode] = useState<"hierarchy" | "list">("hierarchy")
+  const [fileName, setFileName] = useState<string>("")
+  const [isAutoLoaded, setIsAutoLoaded] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+  const { toast } = useToast()
+
+  // Auto-load from API if COAIAV_MEMORY_PATH is set
+  useEffect(() => {
+    async function autoLoad() {
+      try {
+        const response = await fetch('/api/jsonl')
+        if (response.ok) {
+          const { content, filename } = await response.json()
+          handleFileLoad(content, filename)
+          setIsAutoLoaded(true)
+          toast({
+            title: "File loaded",
+            description: `Loaded ${filename} from local filesystem`,
+          })
+        }
+      } catch (error) {
+        console.log('No auto-load available, waiting for manual upload')
+      }
+    }
+    autoLoad()
+  }, [])
+
+  const handleFileLoad = (content: string, name: string) => {
+    try {
+      const records = parseJSONL(content)
+      const organized = organizeData(records)
+      setData(organized)
+      setSelectedChart(null)
+      setFileName(name)
+    } catch (error) {
+      console.error("Failed to parse JSONL:", error)
+      toast({
+        variant: "destructive",
+        title: "Parse error",
+        description: "Failed to parse JSONL file. Please check the file format.",
+      })
+    }
+  }
+
+  const handleReload = async () => {
+    if (!isAutoLoaded) return
+    
+    setIsLoading(true)
+    try {
+      const response = await fetch('/api/jsonl')
+      if (response.ok) {
+        const { content, filename } = await response.json()
+        handleFileLoad(content, filename)
+        toast({
+          title: "Reloaded",
+          description: `Reloaded ${filename} from filesystem`,
+        })
+      } else {
+        throw new Error('Failed to reload')
+      }
+    } catch (error) {
+      toast({
+        variant: "destructive",
+        title: "Reload failed",
+        description: "Failed to reload file from filesystem",
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleSave = async () => {
+    if (!data || !isAutoLoaded) return
+
+    setIsLoading(true)
+    try {
+      const jsonlLines: string[] = []
+
+      // Export all entities
+      for (const entity of data.entities.values()) {
+        jsonlLines.push(JSON.stringify(entity))
+      }
+
+      // Export all relations
+      for (const relation of data.relations) {
+        jsonlLines.push(JSON.stringify(relation))
+      }
+
+      const response = await fetch('/api/jsonl', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ content: jsonlLines.join('\n') + '\n' })
+      })
+
+      if (response.ok) {
+        const { backup } = await response.json()
+        toast({
+          title: "Saved",
+          description: `File saved. Backup created at ${backup}`,
+        })
+      } else {
+        throw new Error('Save failed')
+      }
+    } catch (error) {
+      toast({
+        variant: "destructive",
+        title: "Save failed",
+        description: "Failed to save changes to filesystem",
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleExportData = () => {
+    if (!data) return
+
+    const jsonlLines: string[] = []
+
+    // Export all entities
+    for (const entity of data.entities.values()) {
+      jsonlLines.push(JSON.stringify(entity))
+    }
+
+    // Export all relations
+    for (const relation of data.relations) {
+      jsonlLines.push(JSON.stringify(relation))
+    }
+
+    const blob = new Blob([jsonlLines.join("\n") + "\n"], { type: "application/jsonl" })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement("a")
+    a.href = url
+    a.download = fileName || "coaia-narrative-export.jsonl"
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      <header className="border-b border-border bg-card">
+        <div className="container mx-auto px-4 py-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <h1 className="text-3xl font-bold text-balance">COAIA Narrative Visualizer</h1>
+              <p className="text-muted-foreground mt-2">
+                Visualize and explore structural tension charts from coaia-narrative JSONL files
+              </p>
+              {isAutoLoaded && (
+                <p className="text-xs text-muted-foreground mt-1">
+                  📁 {fileName}
+                </p>
+              )}
+            </div>
+            {data && (
+              <div className="flex items-center gap-2">
+                {isAutoLoaded && (
+                  <>
+                    <Button onClick={handleSave} variant="default" size="sm" disabled={isLoading}>
+                      <Save className="w-4 h-4 mr-2" />
+                      Save Changes
+                    </Button>
+                    <Button onClick={handleReload} variant="outline" size="sm" disabled={isLoading}>
+                      <RefreshCw className={`w-4 h-4 mr-2 ${isLoading ? 'animate-spin' : ''}`} />
+                      Reload
+                    </Button>
+                  </>
+                )}
+                <Button onClick={handleExportData} variant="outline" size="sm">
+                  <Download className="w-4 h-4 mr-2" />
+                  Export JSONL
+                </Button>
+                <Button onClick={() => setData(null)} variant="outline" size="sm">
+                  <Upload className="w-4 h-4 mr-2" />
+                  Load New File
+                </Button>
+              </div>
+            )}
+          </div>
+        </div>
+      </header>
+
+      <main className="container mx-auto px-4 py-8">
+        {!data ? (
+          <div className="max-w-2xl mx-auto">
+            <FileUpload onFileLoad={handleFileLoad} />
+            <div className="mt-8 p-6 bg-muted/30 rounded-lg">
+              <h2 className="text-lg font-semibold mb-3">About This Tool</h2>
+              <p className="text-sm text-muted-foreground leading-relaxed mb-4">
+                This visualizer helps you explore and understand structural tension charts created by the
+                coaia-narrative MCP server. It displays the creative tension between current reality and desired
+                outcomes, action steps, narrative beats across multiple universes, and the relationships between
+                entities.
+              </p>
+              <div className="space-y-2">
+                <h3 className="text-sm font-semibold">Supported Features:</h3>
+                <ul className="text-sm text-muted-foreground space-y-1">
+                  <li className="flex items-start gap-2">
+                    <span className="text-chart-1 mt-1">•</span>
+                    <span>Hierarchical chart visualization with expandable sub-charts</span>
+                  </li>
+                  <li className="flex items-start gap-2">
+                    <span className="text-chart-2 mt-1">•</span>
+                    <span>Action step tracking with completion status and due dates</span>
+                  </li>
+                  <li className="flex items-start gap-2">
+                    <span className="text-chart-3 mt-1">•</span>
+                    <span>Narrative beats with multi-universe perspectives</span>
+                  </li>
+                  <li className="flex items-start gap-2">
+                    <span className="text-chart-4 mt-1">•</span>
+                    <span>Entity relation graph visualization</span>
+                  </li>
+                  <li className="flex items-start gap-2">
+                    <span className="text-chart-5 mt-1">•</span>
+                    <span>Local file editing and auto-saving when launched via CLI</span>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="space-y-6">
+            <DataStats data={data} />
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+              <div className="lg:col-span-1">
+                <Tabs value={viewMode} onValueChange={(v) => setViewMode(v as any)}>
+                  <TabsList className="w-full">
+                    <TabsTrigger value="hierarchy" className="flex-1">
+                      Hierarchy
+                    </TabsTrigger>
+                    <TabsTrigger value="list" className="flex-1">
+                      All Charts
+                    </TabsTrigger>
+                  </TabsList>
+                  <TabsContent value="hierarchy" className="mt-4">
+                    <ChartList
+                      data={data}
+                      selectedChart={selectedChart}
+                      onSelectChart={setSelectedChart}
+                      mode="hierarchy"
+                    />
+                  </TabsContent>
+                  <TabsContent value="list" className="mt-4">
+                    <ChartList data={data} selectedChart={selectedChart} onSelectChart={setSelectedChart} mode="list" />
+                  </TabsContent>
+                </Tabs>
+              </div>
+              <div className="lg:col-span-2">
+                {selectedChart ? (
+                  <ChartDetail chart={selectedChart} data={data} />
+                ) : (
+                  <div className="bg-card border border-border rounded-lg p-12 text-center">
+                    <p className="text-muted-foreground">Select a chart from the list to view details</p>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        )}
+      </main>
+    </div>
+  )
+}

package/cli.ts

@@ -0,0 +1,170 @@
+#!/usr/bin/env node
+
+/**
+ * COAIA Visualizer CLI - Launch visualizer with local memory file
+ * 
+ * Launches Next.js dev server with pre-loaded memory file
+ * Works analogously to coaia-narrative/cli.ts
+ */
+
+import { spawn } from 'child_process';
+import { promises as fs } from 'fs';
+import path from 'path';
+import minimist from 'minimist';
+import * as dotenv from 'dotenv';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+interface Config {
+  memoryPath: string;
+  port: number;
+  noOpen: boolean;
+}
+
+function loadConfig(args: minimist.ParsedArgs): Config {
+  let config: Config = {
+    memoryPath: path.join(process.cwd(), 'memory.jsonl'),
+    port: 3000,
+    noOpen: false
+  };
+
+  // Load .env files
+  const localEnvPath = path.join(process.cwd(), '.env');
+  try {
+    dotenv.config({ path: localEnvPath });
+  } catch (error) {
+    // .env doesn't exist, that's okay
+  }
+
+  // Custom env file
+  if (args.env) {
+    dotenv.config({ path: args.env, override: true });
+  }
+
+  // Environment variables
+  if (process.env.COAIAN_MF) {
+    config.memoryPath = process.env.COAIAN_MF;
+  }
+  if (process.env.COAIAV_PORT) {
+    config.port = parseInt(process.env.COAIAV_PORT, 10);
+  }
+
+  // Command-line flags override everything
+  if (args['memory-path'] || args['M']) {
+    config.memoryPath = args['memory-path'] || args['M'];
+  }
+  if (args['port'] || args['p']) {
+    config.port = args['port'] || args['p'];
+  }
+  if (args['no-open']) {
+    config.noOpen = true;
+  }
+
+  return config;
+}
+
+async function main() {
+  const args = minimist(process.argv.slice(2));
+
+  if (args.help || args.h) {
+    console.log(`
+🎨 COAIA Visualizer - Interactive Chart Viewer
+
+DESCRIPTION:
+   Web-based visualizer for structural tension charts from coaia-narrative.
+   Launches a local web server to interactively explore your charts.
+
+USAGE:
+   coaia-visualizer [OPTIONS]
+   npx coaia-visualizer [OPTIONS]
+
+OPTIONS:
+   --memory-path PATH, -M PATH    Path to memory.jsonl file (default: ./memory.jsonl)
+   --port PORT, -p PORT           Server port (default: 3000)
+   --no-open                      Don't auto-open browser
+   --help, -h                     Show this help message
+
+ENVIRONMENT VARIABLES:
+   COAIAN_MF                      Default memory file path
+   COAIAV_PORT                    Default server port
+
+EXAMPLES:
+   # Launch with default memory.jsonl
+   coaia-visualizer
+
+   # Launch with specific memory file
+   coaia-visualizer --memory-path ./my-charts.jsonl
+
+   # Launch on different port
+   coaia-visualizer --port 3001
+
+   # Use environment variable
+   COAIAN_MF=./charts.jsonl coaia-visualizer
+`);
+    process.exit(0);
+  }
+
+  const config = loadConfig(args);
+
+  // Verify memory file exists
+  try {
+    await fs.access(config.memoryPath);
+  } catch (error) {
+    console.error(`❌ Memory file not found: ${config.memoryPath}`);
+    console.error(`   Create a memory file or specify a different path with --memory-path`);
+    process.exit(1);
+  }
+
+  console.log(`🎨 COAIA Visualizer`);
+  console.log(`📁 Memory file: ${config.memoryPath}`);
+  console.log(`🌐 Port: ${config.port}`);
+  console.log();
+
+  // Set environment variables for Next.js
+  process.env.COAIAV_MEMORY_PATH = path.resolve(config.memoryPath);
+  process.env.PORT = config.port.toString();
+
+  // Navigate to visualizer root
+  const visualizerRoot = path.resolve(__dirname, '..');
+  
+  // Launch Next.js dev server with explicit port flag
+  const nextProcess = spawn('npm', ['run', 'dev', '--', '-p', config.port.toString()], {
+    cwd: visualizerRoot,
+    stdio: 'inherit',
+    env: {
+      ...process.env,
+      COAIAV_MEMORY_PATH: path.resolve(config.memoryPath),
+      PORT: config.port.toString()
+    }
+  });
+
+  // Open browser if not disabled
+  if (!config.noOpen) {
+    setTimeout(() => {
+      const url = `http://localhost:${config.port}`;
+      console.log(`\n🚀 Opening browser: ${url}\n`);
+      
+      const openCmd = process.platform === 'darwin' ? 'open' : 
+                      process.platform === 'win32' ? 'start' : 'xdg-open';
+      spawn(openCmd, [url], { detached: true, stdio: 'ignore' }).unref();
+    }, 3000);
+  }
+
+  // Handle shutdown
+  process.on('SIGINT', () => {
+    console.log('\n👋 Shutting down visualizer...');
+    nextProcess.kill();
+    process.exit(0);
+  });
+
+  nextProcess.on('exit', (code) => {
+    process.exit(code || 0);
+  });
+}
+
+main().catch((error) => {
+  console.error('❌ Fatal error:', error);
+  process.exit(1);
+});

package/components/chart-detail.tsx

@@ -0,0 +1,213 @@
+"use client"
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Separator } from "@/components/ui/separator"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import type { ParsedData, Chart, EntityRecord } from "@/lib/types"
+import { Target, MapPin, ListChecks, Network, BookOpen, Calendar, TrendingUp, CheckCircle2, Circle } from "lucide-react"
+import { NarrativeBeats } from "./narrative-beats"
+import { RelationGraph } from "./relation-graph"
+
+interface ChartDetailProps {
+  chart: Chart
+  data: ParsedData
+}
+
+export function ChartDetail({ chart, data }: ChartDetailProps) {
+  const dueDate = chart.chartEntity.metadata.dueDate
+    ? new Date(chart.chartEntity.metadata.dueDate).toLocaleDateString()
+    : null
+  const createdDate = new Date(chart.chartEntity.metadata.createdAt).toLocaleDateString()
+
+  return (
+    <div className="space-y-6">
+      {/* Header Card */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-start justify-between gap-4">
+            <div className="flex-1">
+              <div className="flex items-center gap-2 mb-2">
+                <CardTitle className="text-2xl">Chart {chart.id}</CardTitle>
+                <Badge>Level {chart.level}</Badge>
+                {chart.parentChart && <Badge variant="outline">Sub-chart</Badge>}
+              </div>
+              <div className="flex items-center gap-4 text-sm text-muted-foreground">
+                <span>Created {createdDate}</span>
+                {dueDate && (
+                  <div className="flex items-center gap-1">
+                    <Calendar className="w-4 h-4" />
+                    <span>Due {dueDate}</span>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </CardHeader>
+      </Card>
+
+      {/* Structural Tension */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <TrendingUp className="w-5 h-5" />
+            Structural Tension
+          </CardTitle>
+          <CardDescription>The creative tension between current reality and desired outcome</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* Desired Outcome */}
+          {chart.desiredOutcome && (
+            <div>
+              <div className="flex items-center gap-2 mb-3">
+                <Target className="w-5 h-5 text-chart-1" />
+                <h3 className="font-semibold">Desired Outcome</h3>
+              </div>
+              <div className="bg-chart-1/10 border border-chart-1/20 rounded-lg p-4">
+                {chart.desiredOutcome.observations.map((obs, idx) => (
+                  <p key={idx} className="text-sm leading-relaxed">
+                    {obs}
+                  </p>
+                ))}
+              </div>
+            </div>
+          )}
+
+          <Separator />
+
+          {/* Current Reality */}
+          {chart.currentReality && (
+            <div>
+              <div className="flex items-center gap-2 mb-3">
+                <MapPin className="w-5 h-5 text-chart-2" />
+                <h3 className="font-semibold">Current Reality</h3>
+              </div>
+              <div className="bg-chart-2/10 border border-chart-2/20 rounded-lg p-4">
+                {chart.currentReality.observations.map((obs, idx) => (
+                  <p key={idx} className="text-sm leading-relaxed">
+                    {obs}
+                  </p>
+                ))}
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Narrative Beats */}
+      {chart.narrativeBeats.length > 0 && (
+        <div>
+          <div className="flex items-center gap-2 mb-4">
+            <BookOpen className="w-5 h-5 text-chart-3" />
+            <h2 className="text-xl font-semibold">Narrative Beats</h2>
+            <Badge className="bg-chart-3 text-white">{chart.narrativeBeats.length}</Badge>
+          </div>
+          <NarrativeBeats beats={chart.narrativeBeats} />
+        </div>
+      )}
+
+      {/* Tabs for Actions and Relations */}
+      <Tabs defaultValue="actions" className="w-full">
+        <TabsList className="grid w-full grid-cols-2">
+          <TabsTrigger value="actions">
+            <ListChecks className="w-4 h-4 mr-2" />
+            Actions ({chart.actions.length})
+          </TabsTrigger>
+          <TabsTrigger value="relations">
+            <Network className="w-4 h-4 mr-2" />
+            Relations ({chart.relations.length})
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="actions" className="mt-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>Action Steps</CardTitle>
+              <CardDescription>Strategic actions advancing toward the desired outcome</CardDescription>
+            </CardHeader>
+            <CardContent>
+              {chart.actions.length === 0 ? (
+                <p className="text-sm text-muted-foreground text-center py-8">No action steps defined yet</p>
+              ) : (
+                <div className="space-y-3">
+                  {chart.actions.map((action, idx) => (
+                    <ActionItem key={action.name} action={action} index={idx + 1} />
+                  ))}
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="relations" className="mt-4">
+          <RelationGraph chart={chart} data={data} />
+        </TabsContent>
+      </Tabs>
+
+      {/* Sub-charts */}
+      {chart.subCharts.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Sub-Charts ({chart.subCharts.length})</CardTitle>
+            <CardDescription>Telescoped action steps broken into detailed sub-charts</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="grid gap-3">
+              {chart.subCharts.map((subChart) => (
+                <div key={subChart.id} className="border border-border rounded-lg p-3">
+                  <div className="flex items-center gap-2 mb-2">
+                    <span className="text-sm font-mono text-muted-foreground">chart_{subChart.id}</span>
+                    <Badge variant="secondary" className="text-xs">
+                      Level {subChart.level}
+                    </Badge>
+                  </div>
+                  {subChart.desiredOutcome && (
+                    <p className="text-sm line-clamp-2">{subChart.desiredOutcome.observations[0]}</p>
+                  )}
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  )
+}
+
+interface ActionItemProps {
+  action: EntityRecord
+  index: number
+}
+
+function ActionItem({ action, index }: ActionItemProps) {
+  const isComplete = action.metadata.completionStatus === true
+  const dueDate = action.metadata.dueDate ? new Date(action.metadata.dueDate).toLocaleDateString() : null
+
+  return (
+    <div
+      className={`flex items-start gap-3 p-3 rounded-lg border ${
+        isComplete ? "bg-muted/50 border-muted" : "bg-card border-border"
+      }`}
+    >
+      <div className="flex-shrink-0 mt-0.5">
+        {isComplete ? (
+          <CheckCircle2 className="w-5 h-5 text-chart-4" />
+        ) : (
+          <Circle className="w-5 h-5 text-muted-foreground" />
+        )}
+      </div>
+      <div className="flex-1 min-w-0">
+        <div className="flex items-start justify-between gap-2 mb-1">
+          <span className="text-sm font-medium">Action {index}</span>
+          {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 ${isComplete ? "text-muted-foreground line-through" : ""}`}>{action.observations[0]}</p>
+      </div>
+    </div>
+  )
+}