coaia-visualizer 1.4.2 → 1.5.0

package/cli.ts

@@ -21,13 +21,21 @@ interface Config {
   memoryPath: string;
   port: number;
   noOpen: boolean;
+  live: boolean;
+  pollInterval: number;
+  autoPlay: boolean;
+  audioDir: string;
 }
 
 function loadConfig(args: minimist.ParsedArgs): Config {
   let config: Config = {
     memoryPath: path.join(process.cwd(), 'memory.jsonl'),
     port: 3000,
-    noOpen: false
+    noOpen: false,
+    live: false,
+    pollInterval: 2000,
+    autoPlay: false,
+    audioDir: path.join(process.cwd(), 'audio')
   };
 
   // Load .env files
@@ -50,6 +58,18 @@ function loadConfig(args: minimist.ParsedArgs): Config {
   if (process.env.COAIAV_PORT) {
     config.port = parseInt(process.env.COAIAV_PORT, 10);
   }
+  if (process.env.COAIAV_LIVE === 'true') {
+    config.live = true;
+  }
+  if (process.env.COAIAV_POLL_INTERVAL) {
+    config.pollInterval = parseInt(process.env.COAIAV_POLL_INTERVAL, 10);
+  }
+  if (process.env.COAIAV_AUTO_PLAY === 'true') {
+    config.autoPlay = true;
+  }
+  if (process.env.COAIAV_AUDIO_DIR) {
+    config.audioDir = process.env.COAIAV_AUDIO_DIR;
+  }
 
   // Command-line flags override everything
   if (args['memory-path'] || args['M']) {
@@ -61,6 +81,18 @@ function loadConfig(args: minimist.ParsedArgs): Config {
   if (args['no-open']) {
     config.noOpen = true;
   }
+  if (args['live']) {
+    config.live = true;
+  }
+  if (args['poll-interval']) {
+    config.pollInterval = parseInt(args['poll-interval'], 10);
+  }
+  if (args['auto-play']) {
+    config.autoPlay = true;
+  }
+  if (args['audio-dir']) {
+    config.audioDir = args['audio-dir'];
+  }
 
   return config;
 }
@@ -83,12 +115,20 @@ USAGE:
 OPTIONS:
    --memory-path PATH, -M PATH    Path to memory.jsonl file (default: ./memory.jsonl)
    --port PORT, -p PORT           Server port (default: 3000)
+   --live                         Enable live monitoring mode
+   --poll-interval MS             Polling interval in ms (default: 2000)
+   --auto-play                    Auto-play audio for new beats
+   --audio-dir PATH               Audio directory path (default: ./audio)
    --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
+   COAIAV_LIVE                    Enable live mode (true/false)
+   COAIAV_POLL_INTERVAL           Polling interval in ms
+   COAIAV_AUTO_PLAY               Enable auto-play (true/false)
+   COAIAV_AUDIO_DIR               Audio directory path
 
 EXAMPLES:
    # Launch with default memory.jsonl
@@ -117,14 +157,23 @@ EXAMPLES:
     process.exit(1);
   }
 
-  console.log(`🎨 COAIA Visualizer`);
+  console.log(`🎨 COAIA Visualizer${config.live ? ' [LIVE MODE]' : ''}`);
   console.log(`📁 Memory file: ${config.memoryPath}`);
   console.log(`🌐 Port: ${config.port}`);
+  if (config.live) {
+    console.log(`🔄 Polling: ${config.pollInterval}ms`);
+    console.log(`🎵 Audio: ${config.audioDir}`);
+    console.log(`🔊 Auto-play: ${config.autoPlay ? 'enabled' : 'disabled'}`);
+  }
   console.log();
 
   // Set environment variables for Next.js
   process.env.COAIAV_MEMORY_PATH = path.resolve(config.memoryPath);
   process.env.PORT = config.port.toString();
+  process.env.NEXT_PUBLIC_LIVE_MODE = config.live.toString();
+  process.env.NEXT_PUBLIC_POLL_INTERVAL = config.pollInterval.toString();
+  process.env.NEXT_PUBLIC_AUTO_PLAY = config.autoPlay.toString();
+  process.env.COAIAV_AUDIO_DIR = path.resolve(config.audioDir);
 
   // Navigate to visualizer root
   const visualizerRoot = path.resolve(__dirname, '..');
@@ -136,7 +185,11 @@ EXAMPLES:
     env: {
       ...process.env,
       COAIAV_MEMORY_PATH: path.resolve(config.memoryPath),
-      PORT: config.port.toString()
+      PORT: config.port.toString(),
+      NEXT_PUBLIC_LIVE_MODE: config.live.toString(),
+      NEXT_PUBLIC_POLL_INTERVAL: config.pollInterval.toString(),
+      NEXT_PUBLIC_AUTO_PLAY: config.autoPlay.toString(),
+      COAIAV_AUDIO_DIR: path.resolve(config.audioDir)
     }
   });
 

package/components/add-master-chart.tsx

@@ -0,0 +1,230 @@
+"use client"
+
+import type React from "react"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import { Plus, X } from "lucide-react"
+import type { ParsedData, EntityRecord, RelationRecord } from "@/lib/types"
+
+interface AddMasterChartProps {
+  data: ParsedData
+  onChartAdded: (updatedData: ParsedData) => void
+}
+
+export function AddMasterChart({ data, onChartAdded }: AddMasterChartProps) {
+  const [open, setOpen] = useState(false)
+  const [desiredOutcome, setDesiredOutcome] = useState("")
+  const [currentReality, setCurrentReality] = useState<string[]>([""])
+  const [dueDate, setDueDate] = useState("")
+
+  const handleAddObservation = () => {
+    setCurrentReality([...currentReality, ""])
+  }
+
+  const handleRemoveObservation = (index: number) => {
+    setCurrentReality(currentReality.filter((_, i) => i !== index))
+  }
+
+  const handleObservationChange = (index: number, value: string) => {
+    const updated = [...currentReality]
+    updated[index] = value
+    setCurrentReality(updated)
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+
+    if (!desiredOutcome.trim()) {
+      return
+    }
+
+    const filteredReality = currentReality.filter((obs) => obs.trim())
+    if (filteredReality.length === 0) {
+      return
+    }
+
+    // Generate new chart ID
+    const existingCharts = Array.from(data.entities.values()).filter((e) => e.entityType === "structural_tension_chart")
+    const maxId = existingCharts.reduce((max, e) => {
+      const id = Number.parseInt(e.metadata?.chartId?.replace("chart_", "") || "0")
+      return Math.max(max, id)
+    }, 0)
+
+    const newChartId = `chart_${maxId + 1}`
+    const timestamp = new Date().toISOString()
+
+    // Clone existing data
+    const newEntities = new Map(data.entities)
+    const newRelations = [...data.relations]
+
+    const chartEntity: EntityRecord = {
+      type: "entity",
+      name: newChartId,
+      entityType: "structural_tension_chart",
+      observations: [`Master chart: ${desiredOutcome}`],
+      metadata: {
+        chartId: newChartId,
+        level: 0,
+        completionStatus: false,
+        createdAt: timestamp,
+        updatedAt: timestamp,
+        ...(dueDate && { dueDate: new Date(dueDate).toISOString() }),
+      },
+    }
+    newEntities.set(newChartId, chartEntity)
+
+    const desiredOutcomeName = `${newChartId}_desired_outcome`
+    const desiredOutcomeEntity: EntityRecord = {
+      type: "entity",
+      name: desiredOutcomeName,
+      entityType: "desired_outcome",
+      observations: [desiredOutcome.trim()],
+      metadata: {
+        chartId: newChartId,
+        createdAt: timestamp,
+        updatedAt: timestamp,
+      },
+    }
+    newEntities.set(desiredOutcomeName, desiredOutcomeEntity)
+
+    const currentRealityName = `${newChartId}_current_reality`
+    const currentRealityEntity: EntityRecord = {
+      type: "entity",
+      name: currentRealityName,
+      entityType: "current_reality",
+      observations: filteredReality,
+      metadata: {
+        chartId: newChartId,
+        createdAt: timestamp,
+        updatedAt: timestamp,
+      },
+    }
+    newEntities.set(currentRealityName, currentRealityEntity)
+
+    const containsDesiredOutcome: RelationRecord = {
+      type: "relation",
+      from: newChartId,
+      to: desiredOutcomeName,
+      relationType: "contains",
+      metadata: { createdAt: timestamp },
+    }
+    newRelations.push(containsDesiredOutcome)
+
+    const containsCurrentReality: RelationRecord = {
+      type: "relation",
+      from: newChartId,
+      to: currentRealityName,
+      relationType: "contains",
+      metadata: { createdAt: timestamp },
+    }
+    newRelations.push(containsCurrentReality)
+
+    const tensionRelation: RelationRecord = {
+      type: "relation",
+      from: currentRealityName,
+      to: desiredOutcomeName,
+      relationType: "creates_tension_with",
+      metadata: { createdAt: timestamp },
+    }
+    newRelations.push(tensionRelation)
+
+    // Re-organize data to update chart hierarchy
+    const { organizeData } = require("@/lib/jsonl-parser")
+    const records = [...Array.from(newEntities.values()), ...newRelations]
+    const updatedData = organizeData(records)
+
+    onChartAdded(updatedData)
+
+    // Reset form
+    setDesiredOutcome("")
+    setCurrentReality([""])
+    setDueDate("")
+    setOpen(false)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="outline" size="sm" className="w-full bg-transparent">
+          <Plus className="w-4 h-4 mr-2" />
+          Add Master Chart
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>Add New Master Chart</DialogTitle>
+          <DialogDescription>Create a new top-level structural tension chart</DialogDescription>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <div className="space-y-2">
+            <Label htmlFor="desired-outcome">Desired Outcome *</Label>
+            <Textarea
+              id="desired-outcome"
+              placeholder="What do you want to create or achieve?"
+              value={desiredOutcome}
+              onChange={(e) => setDesiredOutcome(e.target.value)}
+              required
+              rows={3}
+            />
+          </div>
+
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <Label>Current Reality Observations *</Label>
+              <Button type="button" variant="ghost" size="sm" onClick={handleAddObservation}>
+                <Plus className="w-4 h-4 mr-1" />
+                Add Observation
+              </Button>
+            </div>
+            {currentReality.map((obs, index) => (
+              <div key={index} className="flex gap-2">
+                <Textarea
+                  placeholder={`Observation ${index + 1}: What's actually true right now?`}
+                  value={obs}
+                  onChange={(e) => handleObservationChange(index, e.target.value)}
+                  rows={2}
+                  className="flex-1"
+                />
+                {currentReality.length > 1 && (
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleRemoveObservation(index)}
+                    className="flex-shrink-0"
+                  >
+                    <X className="w-4 h-4" />
+                  </Button>
+                )}
+              </div>
+            ))}
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="due-date">Due Date (Optional)</Label>
+            <Input id="due-date" type="date" value={dueDate} onChange={(e) => setDueDate(e.target.value)} />
+          </div>
+
+          <div className="flex gap-3 justify-end">
+            <Button type="button" variant="outline" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button type="submit">Create Master Chart</Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/components/chart-detail-editable.tsx

@@ -41,6 +41,30 @@ export function ChartDetailEditable({
     onUpdate(updatedData)
   }
 
+  const handleCreateTelescopedChart = (actionName: string) => {
+    console.log("[v0] Creating telescoped chart from action:", actionName)
+    const editor = new ChartEditor(data)
+
+    try {
+      const newChartId = editor.createTelescopedChartFromAction(chart.chartEntity.name, actionName)
+      console.log("[v0] Created new chart:", newChartId)
+
+      const updatedData = editor.getUpdatedData()
+      onUpdate(updatedData)
+
+      // Navigate to the newly created chart
+      if (onNavigateToSubChart) {
+        const newChart = updatedData.charts.find((c) => c.id === newChartId)
+        if (newChart) {
+          console.log("[v0] Navigating to new chart:", newChartId)
+          setTimeout(() => onNavigateToSubChart(newChart), 150)
+        }
+      }
+    } catch (error) {
+      console.error("[v0] Error creating telescoped chart:", error)
+    }
+  }
+
   return (
     <div className="space-y-6">
       {/* Back button for sub-charts */}
@@ -157,7 +181,7 @@ export function ChartDetailEditable({
             <CardContent className="space-y-3">
               {chart.actions.map((action, idx) => {
                 const subChart = action.metadata?.isTelescopedChart
-                  ? chart.subCharts.find((sc) => sc.desiredOutcome?.name === action.name)
+                  ? chart.subCharts.find((sc) => sc.desiredOutcome?.observations[0] === action.observations[0])
                   : undefined
 
                 return (
@@ -179,27 +203,14 @@ export function ChartDetailEditable({
                     onNavigateToChart={
                       subChart && onNavigateToSubChart ? () => onNavigateToSubChart(subChart) : undefined
                     }
-                    onCreateTelescopedChart={() => {
-                      applyEdit((editor) => editor.createTelescopedChart(chart.id, action.name))
-                      // After creating, find and navigate to the new subchart
-                      const editor = new ChartEditor(data)
-                      editor.createTelescopedChart(chart.id, action.name)
-                      const updatedData = editor.getUpdatedData()
-                      const newSubChart = updatedData.charts
-                        .find((c) => c.id === chart.id)
-                        ?.subCharts.find((sc) => sc.desiredOutcome?.name === action.name)
-                      if (newSubChart && onNavigateToSubChart) {
-                        onUpdate(updatedData)
-                        setTimeout(() => onNavigateToSubChart(newSubChart), 100)
-                      }
-                    }}
+                    onCreateTelescopedChart={() => handleCreateTelescopedChart(action.name)}
                   />
                 )
               })}
 
               <AddActionStep
                 onAdd={(description, currentReality, dueDate) =>
-                  applyEdit((editor) => editor.addActionStep(chart.id, description, currentReality, dueDate))
+                  applyEdit((editor) => editor.addActionStep(chart.chartEntity.name, description, currentReality, dueDate))
                 }
               />
             </CardContent>

package/components/chart-list.tsx

@@ -8,15 +8,17 @@ 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"
+import { AddMasterChart } from "@/components/add-master-chart"
 
 interface ChartListProps {
   data: ParsedData
   selectedChart: Chart | null
   onSelectChart: (chart: Chart) => void
   mode: "hierarchy" | "list"
+  onDataUpdate?: (updatedData: ParsedData) => void
 }
 
-export function ChartList({ data, selectedChart, onSelectChart, mode }: ChartListProps) {
+export function ChartList({ data, selectedChart, onSelectChart, mode, onDataUpdate }: ChartListProps) {
   if (mode === "list") {
     return (
       <Card>
@@ -25,6 +27,11 @@ export function ChartList({ data, selectedChart, onSelectChart, mode }: ChartLis
           <CardDescription className="text-xs md:text-sm">{data.charts.length} total charts</CardDescription>
         </CardHeader>
         <CardContent>
+          {onDataUpdate && (
+            <div className="mb-4">
+              <AddMasterChart data={data} onChartAdded={onDataUpdate} />
+            </div>
+          )}
           <ScrollArea className="h-[400px] md:h-[600px] pr-2 md:pr-4">
             <div className="space-y-2">
               {data.charts.map((chart) => (
@@ -50,6 +57,11 @@ export function ChartList({ data, selectedChart, onSelectChart, mode }: ChartLis
         <CardDescription className="text-xs md:text-sm">{data.rootCharts.length} root charts</CardDescription>
       </CardHeader>
       <CardContent>
+        {onDataUpdate && (
+          <div className="mb-4">
+            <AddMasterChart data={data} onChartAdded={onDataUpdate} />
+          </div>
+        )}
         <ScrollArea className="h-[400px] md:h-[600px] pr-2 md:pr-4">
           <div className="space-y-2">
             {data.rootCharts.map((chart) => (