coaia-visualizer 1.4.2 → 1.5.0

package/WS__issue_8__coaia-visualizer__260207.code-workspace

@@ -0,0 +1,45 @@
+{
+	"folders": [
+		{
+			"path": "."
+		},
+		{
+			"path": "../../../src/_sessiondata/496dca71-d476-4ac9-ba9f-376add118dd8"
+		},
+		{
+			"path": "../../../src/_sessiondata/55158baa-dea7-45c8-9941-540433cfe551"
+		},
+		{
+			"path": "../../../cesaret/book/_/tcc/winter_solstice/drop/ceremonies/4c8623a1-c2e1-4ebb-a7f3-ab8ef8376172/plans"
+		},
+		{
+			"path": "../../../home/mia/workspace/stcmastery-copilot-acp-55158baa-dea7-45c8-9941-540433cfe551--2602072108"
+		}
+	],
+	"settings": {
+		"mcp": {
+			"servers": {
+				"charts_55158baa-dea7-45c8-9941-540433cfe551__LiveNarrativeWitnessMode": {
+					"command": "npx",
+					"args": [
+						"-y",
+						"coaia-narrative@0.10.1",
+						"--memory-path",
+						"${input:memory_path}"
+					],
+					"env": {
+						"COAIA_TOOLS": "STC_TOOLS,NARRATIVE_TOOLS,CORE_TOOLS"
+					},
+					"type": "stdio"
+				}
+			},
+			"inputs": [
+				{
+					"id": "memory_path",
+					"type": "promptString",
+					"description": "Memory File Path"
+				}
+			]
+		}
+	}
+}

package/app/api/audio/[filename]/route.ts

@@ -0,0 +1,37 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { promises as fs } from 'fs'
+import path from 'path'
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { filename: string } }
+) {
+  const audioDir = process.env.COAIAV_AUDIO_DIR || './audio'
+  const filename = params.filename
+
+  // Security: only allow .mp3 files
+  if (!filename.endsWith('.mp3')) {
+    return NextResponse.json(
+      { error: 'Only MP3 files allowed' },
+      { status: 400 }
+    )
+  }
+
+  try {
+    const audioPath = path.join(audioDir, filename)
+    const file = await fs.readFile(audioPath)
+
+    return new NextResponse(file, {
+      headers: {
+        'Content-Type': 'audio/mpeg',
+        'Content-Length': file.length.toString(),
+        'Cache-Control': 'public, max-age=31536000'
+      }
+    })
+  } catch (error: any) {
+    return NextResponse.json(
+      { error: `Audio file not found: ${filename}` },
+      { status: 404 }
+    )
+  }
+}

package/app/api/charts/[id]/route.ts

@@ -24,14 +24,14 @@ export const GET = withAuth(async (
     const content = await fs.readFile(memoryPath, 'utf-8')
     const records = parseJSONL(content)
     const parsedData = organizeData(records)
-    
+
     const chartId = params.id
     const chart = parsedData.charts.find(c => c.id === chartId)
-    
+
     if (!chart) {
       return errorResponse(`Chart not found: ${chartId}`, 404)
     }
-    
+
     return successResponse({ chart })
   } catch (error: any) {
     return errorResponse(`Failed to read chart: ${error.message}`, 500)
@@ -48,11 +48,14 @@ export const GET = withAuth(async (
  *   addCurrentRealityObservation?: string
  *   updateCurrentRealityObservation?: { index: number, text: string }
  *   deleteCurrentRealityObservation?: number
- *   addActionStep?: { description: string, dueDate?: string }
+ *   addActionStep?: { description: string, currentReality: string, dueDate?: string }
  *   updateActionStep?: { actionName: string, description: string }
  *   toggleActionCompletion?: string (action name)
+ *   markActionComplete?: string (action name)
+ *   updateActionProgress?: { actionStepName: string, progressObservation: string, updateCurrentReality?: boolean }
  *   updateActionDueDate?: { actionName: string, dueDate: string | null }
  *   deleteActionStep?: string (action name)
+ *   createTelescopedChart?: { actionName: string }
  *   updateDueDate?: string | null
  * }
  */
@@ -69,53 +72,53 @@ export const POST = withAuth(async (
   try {
     const chartId = params.id
     const body = await request.json()
-    
+
     // Read current data
     const content = await fs.readFile(memoryPath, 'utf-8')
     const records = parseJSONL(content)
     const parsedData = organizeData(records)
-    
+
     // Verify chart exists
     const chart = parsedData.charts.find(c => c.id === chartId)
     if (!chart) {
       return errorResponse(`Chart not found: ${chartId}`, 404)
     }
-    
+
     // Create editor
     const editor = new ChartEditor(parsedData)
-    
+
     // Apply updates based on body
     const updates: string[] = []
-    
+
     if (body.updateDesiredOutcome) {
       editor.updateDesiredOutcome(chartId, body.updateDesiredOutcome)
       updates.push('Updated desired outcome')
     }
-    
+
     if (body.addCurrentRealityObservation) {
       editor.addCurrentRealityObservation(chartId, body.addCurrentRealityObservation)
       updates.push('Added current reality observation')
     }
 
     if (body.updateCurrentReality) {
-      const observations = Array.isArray(body.updateCurrentReality) 
-        ? body.updateCurrentReality 
+      const observations = Array.isArray(body.updateCurrentReality)
+        ? body.updateCurrentReality
         : [body.updateCurrentReality]
       editor.updateCurrentReality(chartId, observations)
       updates.push(`Updated current reality with ${observations.length} observation(s)`)
     }
-    
+
     if (body.updateCurrentRealityObservation) {
       const { index, text } = body.updateCurrentRealityObservation
       editor.updateCurrentRealityObservation(chartId, index, text)
       updates.push(`Updated current reality observation ${index}`)
     }
-    
+
     if (typeof body.deleteCurrentRealityObservation === 'number') {
       editor.deleteCurrentRealityObservation(chartId, body.deleteCurrentRealityObservation)
       updates.push(`Deleted current reality observation ${body.deleteCurrentRealityObservation}`)
     }
-    
+
     if (body.addActionStep) {
       const { description, currentReality, dueDate } = body.addActionStep
       if (!currentReality) {
@@ -124,13 +127,13 @@ export const POST = withAuth(async (
       const result = editor.addActionStep(chartId, description, currentReality, dueDate)
       updates.push(`Added action step as telescoped chart ${result.chartId}`)
     }
-    
+
     if (body.updateActionStep) {
       const { actionName, description } = body.updateActionStep
       editor.updateActionStep(chartId, actionName, description)
       updates.push(`Updated action step ${actionName}`)
     }
-    
+
     if (body.toggleActionCompletion) {
       editor.toggleActionCompletion(body.toggleActionCompletion)
       updates.push(`Toggled completion for ${body.toggleActionCompletion}`)
@@ -146,44 +149,54 @@ export const POST = withAuth(async (
       editor.updateActionProgress(actionStepName, progressObservation, updateCurrentReality)
       updates.push(`Updated progress for ${actionStepName}`)
     }
-    
+
     if (body.updateActionDueDate) {
       const { actionName, dueDate } = body.updateActionDueDate
       editor.updateActionDueDate(actionName, dueDate)
       updates.push(`Updated due date for ${actionName}`)
     }
-    
+
     if (body.deleteActionStep) {
       editor.deleteActionStep(body.deleteActionStep)
       updates.push(`Deleted action step ${body.deleteActionStep}`)
     }
-    
+
+    if (body.createTelescopedChart) {
+      const { actionName } = body.createTelescopedChart
+      const chart = parsedData.charts.find(c => c.id === chartId)
+      if (!chart) {
+        return errorResponse(`Chart not found: ${chartId}`, 404)
+      }
+      const newChartId = editor.createTelescopedChartFromAction(chart.chartEntity.name, actionName)
+      updates.push(`Created telescoped chart ${newChartId} from action ${actionName}`)
+    }
+
     if ('updateDueDate' in body) {
       editor.updateChartDueDate(chartId, body.updateDueDate)
       updates.push('Updated chart due date')
     }
-    
+
     if (updates.length === 0) {
       return errorResponse('No valid updates provided', 400)
     }
-    
+
     // Export and save
     const newContent = editor.exportToJSONL()
     const backupPath = `${memoryPath}.backup-${Date.now()}`
     await fs.copyFile(memoryPath, backupPath)
     await fs.writeFile(memoryPath, newContent, 'utf-8')
-    
+
     // Get updated chart
     const updatedData = editor.getUpdatedData()
     const updatedChart = updatedData.charts.find(c => c.id === chartId)
-    
+
     return successResponse({
       chart: updatedChart,
       updates,
       backup: backupPath,
       message: `Chart updated: ${updates.join(', ')}`
     })
-    
+
   } catch (error: any) {
     return errorResponse(`Failed to update chart: ${error.message}`, 500)
   }
@@ -205,34 +218,34 @@ export const DELETE = withAuth(async (
 
   try {
     const chartId = params.id
-    
+
     // Read current data
     const content = await fs.readFile(memoryPath, 'utf-8')
     const records = parseJSONL(content)
     const parsedData = organizeData(records)
-    
+
     // Verify chart exists
     const chart = parsedData.charts.find(c => c.id === chartId)
     if (!chart) {
       return errorResponse(`Chart not found: ${chartId}`, 404)
     }
-    
+
     // Collect all entities to delete
     const entitiesToDelete = new Set<string>()
     entitiesToDelete.add(chartId)
     entitiesToDelete.add(`${chartId}_desired_outcome`)
     entitiesToDelete.add(`${chartId}_current_reality`)
-    
+
     // Add action steps
     chart.actions.forEach(action => {
       entitiesToDelete.add(action.name)
     })
-    
+
     // Add narrative beats
     chart.narrativeBeats.forEach(beat => {
       entitiesToDelete.add(beat.name)
     })
-    
+
     // Recursively delete sub-charts
     const deleteSubCharts = (subChart: typeof chart) => {
       entitiesToDelete.add(subChart.id)
@@ -243,7 +256,7 @@ export const DELETE = withAuth(async (
       subChart.subCharts.forEach(deleteSubCharts)
     }
     chart.subCharts.forEach(deleteSubCharts)
-    
+
     // Filter out deleted entities and their relations
     const filteredRecords = records.filter(record => {
       if (record.type === 'entity') {
@@ -253,19 +266,19 @@ export const DELETE = withAuth(async (
         return !entitiesToDelete.has(record.from) && !entitiesToDelete.has(record.to)
       }
     })
-    
+
     // Write back
     const newContent = filteredRecords.map(r => JSON.stringify(r)).join('\n') + '\n'
     const backupPath = `${memoryPath}.backup-${Date.now()}`
     await fs.copyFile(memoryPath, backupPath)
     await fs.writeFile(memoryPath, newContent, 'utf-8')
-    
+
     return successResponse({
       message: `Chart ${chartId} deleted successfully`,
       deletedEntities: Array.from(entitiesToDelete),
       backup: backupPath
     })
-    
+
   } catch (error: any) {
     return errorResponse(`Failed to delete chart: ${error.message}`, 500)
   }

package/app/api/watch/route.ts

@@ -0,0 +1,42 @@
+import { NextResponse } from 'next/server'
+import { promises as fs } from 'fs'
+
+export async function GET() {
+  const memoryPath = process.env.COAIAV_MEMORY_PATH
+
+  if (!memoryPath) {
+    return NextResponse.json(
+      { error: 'No memory file configured' },
+      { status: 400 }
+    )
+  }
+
+  try {
+    const stats = await fs.stat(memoryPath)
+    const content = await fs.readFile(memoryPath, 'utf-8')
+    const lines = content.trim().split('\n').filter(l => l.trim())
+
+    // Count narrative beats
+    const beatCount = lines.filter(line => {
+      try {
+        const record = JSON.parse(line)
+        return record.type === 'entity' &&
+               record.metadata?.type === 'narrative_beat'
+      } catch {
+        return false
+      }
+    }).length
+
+    return NextResponse.json({
+      lastModified: stats.mtime.getTime(),
+      beatCount,
+      fileSize: stats.size,
+      totalRecords: lines.length
+    })
+  } catch (error: any) {
+    return NextResponse.json(
+      { error: `Watch failed: ${error.message}` },
+      { status: 500 }
+    )
+  }
+}

package/app/page.tsx

@@ -1,4 +1,3 @@
-// app/page.tsx
 "use client"
 
 import { useState, useEffect } from "react"
@@ -6,14 +5,17 @@ import { FileUpload } from "@/components/file-upload"
 import { ChartList } from "@/components/chart-list"
 import { ChartDetailEditable } from "@/components/chart-detail-editable"
 import { DataStats } from "@/components/data-stats"
+import { CreateChartForm } from "@/components/create-chart-form"
 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, Edit3 } from "lucide-react"
+import { Download, Upload, RefreshCw, Save, Edit3, Plus } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { useToast } from "@/hooks/use-toast"
 import { Badge } from "@/components/ui/badge"
 import { ThemeToggle } from "@/components/theme-toggle"
+import { LiveIndicator } from "@/components/live-indicator"
+import { useLivePolling } from "@/hooks/use-live-polling"
 
 export default function Page() {
   const [data, setData] = useState<ParsedData | null>(null)
@@ -24,9 +26,19 @@ export default function Page() {
   const [isAutoLoaded, setIsAutoLoaded] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false)
+  const [showCreateForm, setShowCreateForm] = useState(false)
   const { toast } = useToast()
 
-  // Auto-load from API if COAIAV_MEMORY_PATH is set
+  // Live mode configuration
+  const liveMode = typeof window !== 'undefined' && process.env.NEXT_PUBLIC_LIVE_MODE === 'true'
+  const pollInterval = typeof window !== 'undefined' ? parseInt(process.env.NEXT_PUBLIC_POLL_INTERVAL || '2000') : 2000
+
+  const { isLive } = useLivePolling({
+    enabled: liveMode && isAutoLoaded,
+    interval: pollInterval,
+    onReload: handleReload
+  })
+
   useEffect(() => {
     async function autoLoad() {
       try {
@@ -55,6 +67,7 @@ export default function Page() {
       setSelectedChart(null)
       setFileName(name)
       setHasUnsavedChanges(false)
+      setShowCreateForm(false)
     } catch (error) {
       console.error("Failed to parse JSONL:", error)
       toast({
@@ -105,12 +118,10 @@ export default function Page() {
     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))
       }
@@ -147,12 +158,10 @@ export default function Page() {
 
     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))
     }
@@ -172,7 +181,6 @@ export default function Page() {
     setData(updatedData)
     setHasUnsavedChanges(true)
 
-    // Update selected chart if it exists in new data
     if (selectedChart) {
       const updatedChart = updatedData.charts.find((c) => c.id === selectedChart.id)
       if (updatedChart) {
@@ -191,12 +199,27 @@ export default function Page() {
   const handleNavigateBack = () => {
     if (chartNavigationStack.length > 0) {
       const newStack = [...chartNavigationStack]
-      const previousChart = newStack.pop()!
+      const previousChartId = newStack.pop()!.id
       setChartNavigationStack(newStack)
-      setSelectedChart(previousChart)
+      // Find the refreshed parent chart from current data (with populated subCharts)
+      const refreshedParent = data.charts.find((c) => c.id === previousChartId)
+      if (refreshedParent) {
+        setSelectedChart(refreshedParent)
+      }
     }
   }
 
+  const handleChartCreated = (newData: ParsedData) => {
+    setData(newData)
+    setFileName("new-chart.jsonl")
+    setHasUnsavedChanges(true)
+    setShowCreateForm(false)
+    toast({
+      title: "Chart created",
+      description: "Your new structural tension chart has been created",
+    })
+  }
+
   return (
     <div className="min-h-screen bg-background">
       <header className="border-b border-border bg-card sticky top-0 z-10">
@@ -225,6 +248,7 @@ export default function Page() {
               )}
             </div>
             <div className="flex items-center gap-2 flex-wrap">
+              {liveMode && isAutoLoaded && <LiveIndicator isLive={isLive} />}
               <ThemeToggle />
               {data && (
                 <>
@@ -274,45 +298,64 @@ export default function Page() {
 
       <main className="container mx-auto px-4 py-4 md:py-8">
         {!data ? (
-          <div className="max-w-2xl mx-auto">
-            <FileUpload onFileLoad={handleFileLoad} />
-            <div className="mt-8 p-4 md:p-6 bg-muted/30 rounded-lg">
-              <h2 className="text-lg md:text-xl font-semibold mb-3">About This Tool</h2>
-              <p className="text-sm md:text-base text-muted-foreground leading-relaxed mb-4">
-                This visualizer helps you explore and edit structural tension charts created by the coaia-narrative MCP
-                server. Edit desired outcomes, add observations to current reality, manage action steps, set due dates,
-                and save changes back to your JSONL file.
-              </p>
-              <div className="space-y-2">
-                <h3 className="text-sm md:text-base font-semibold">Editing Features:</h3>
-                <ul className="text-sm md:text-base text-muted-foreground space-y-1">
-                  <li className="flex items-start gap-2">
-                    <span className="text-chart-1 mt-1">•</span>
-                    <span>Edit desired outcomes inline</span>
-                  </li>
-                  <li className="flex items-start gap-2">
-                    <span className="text-chart-2 mt-1">•</span>
-                    <span>Add, edit, and delete current reality observations</span>
-                  </li>
-                  <li className="flex items-start gap-2">
-                    <span className="text-chart-3 mt-1">•</span>
-                    <span>Create and manage action steps</span>
-                  </li>
-                  <li className="flex items-start gap-2">
-                    <span className="text-chart-4 mt-1">•</span>
-                    <span>Set and update due dates for charts and actions</span>
-                  </li>
-                  <li className="flex items-start gap-2">
-                    <span className="text-chart-5 mt-1">•</span>
-                    <span>Toggle action completion status</span>
-                  </li>
-                  <li className="flex items-start gap-2">
-                    <span className="text-primary mt-1">•</span>
-                    <span>Auto-save to local filesystem when launched via CLI</span>
-                  </li>
-                </ul>
-              </div>
-            </div>
+          <div className="max-w-2xl mx-auto space-y-6">
+            <Tabs value={showCreateForm ? "create" : "upload"} onValueChange={(v) => setShowCreateForm(v === "create")}>
+              <TabsList className="w-full">
+                <TabsTrigger value="upload" className="flex-1">
+                  <Upload className="w-4 h-4 mr-2" />
+                  Upload File
+                </TabsTrigger>
+                <TabsTrigger value="create" className="flex-1">
+                  <Plus className="w-4 h-4 mr-2" />
+                  Create New Chart
+                </TabsTrigger>
+              </TabsList>
+
+              <TabsContent value="upload" className="mt-6">
+                <FileUpload onFileLoad={handleFileLoad} />
+                <div className="mt-8 p-4 md:p-6 bg-muted/30 rounded-lg">
+                  <h2 className="text-lg md:text-xl font-semibold mb-3">About This Tool</h2>
+                  <p className="text-sm md:text-base text-muted-foreground leading-relaxed mb-4">
+                    This visualizer helps you explore and edit structural tension charts created by the coaia-narrative
+                    MCP server. Edit desired outcomes, add observations to current reality, manage action steps, set due
+                    dates, and save changes back to your JSONL file.
+                  </p>
+                  <div className="space-y-2">
+                    <h3 className="text-sm md:text-base font-semibold">Editing Features:</h3>
+                    <ul className="text-sm md:text-base text-muted-foreground space-y-1">
+                      <li className="flex items-start gap-2">
+                        <span className="text-chart-1 mt-1">•</span>
+                        <span>Edit desired outcomes inline</span>
+                      </li>
+                      <li className="flex items-start gap-2">
+                        <span className="text-chart-2 mt-1">•</span>
+                        <span>Add, edit, and delete current reality observations</span>
+                      </li>
+                      <li className="flex items-start gap-2">
+                        <span className="text-chart-3 mt-1">•</span>
+                        <span>Create and manage action steps</span>
+                      </li>
+                      <li className="flex items-start gap-2">
+                        <span className="text-chart-4 mt-1">•</span>
+                        <span>Set and update due dates for charts and actions</span>
+                      </li>
+                      <li className="flex items-start gap-2">
+                        <span className="text-chart-5 mt-1">•</span>
+                        <span>Toggle action completion status</span>
+                      </li>
+                      <li className="flex items-start gap-2">
+                        <span className="text-primary mt-1">•</span>
+                        <span>Auto-save to local filesystem when launched via CLI</span>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </TabsContent>
+
+              <TabsContent value="create" className="mt-6">
+                <CreateChartForm onChartCreated={handleChartCreated} />
+              </TabsContent>
+            </Tabs>
           </div>
         ) : (
           <div className="space-y-4 md:space-y-6">
@@ -334,18 +377,25 @@ export default function Page() {
                       selectedChart={selectedChart}
                       onSelectChart={setSelectedChart}
                       mode="hierarchy"
+                      onDataUpdate={handleDataUpdate}
                     />
                   </TabsContent>
                   <TabsContent value="list" className="mt-4">
-                    <ChartList data={data} selectedChart={selectedChart} onSelectChart={setSelectedChart} mode="list" />
+                    <ChartList
+                      data={data}
+                      selectedChart={selectedChart}
+                      onSelectChart={setSelectedChart}
+                      mode="list"
+                      onDataUpdate={handleDataUpdate}
+                    />
                   </TabsContent>
                 </Tabs>
               </div>
               <div className="lg:col-span-2">
                 {selectedChart ? (
-                  <ChartDetailEditable 
-                    chart={selectedChart} 
-                    data={data} 
+                  <ChartDetailEditable
+                    chart={selectedChart}
+                    data={data}
                     onUpdate={handleDataUpdate}
                     onNavigateToSubChart={handleNavigateToSubChart}
                     onNavigateBack={chartNavigationStack.length > 0 ? handleNavigateBack : undefined}