coaia-visualizer 1.4.2 → 1.5.0

package/components/create-chart-form.tsx

@@ -0,0 +1,248 @@
+"use client"
+
+import type React from "react"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Label } from "@/components/ui/label"
+import { Plus, Trash2, Calendar } from "lucide-react"
+import type { ParsedData, EntityRecord, RelationRecord } from "@/lib/types"
+
+interface CreateChartFormProps {
+  onChartCreated: (data: ParsedData) => void
+}
+
+export function CreateChartForm({ onChartCreated }: CreateChartFormProps) {
+  const [desiredOutcome, setDesiredOutcome] = useState("")
+  const [currentRealityObservations, setCurrentRealityObservations] = useState<string[]>([""])
+  const [dueDate, setDueDate] = useState("")
+
+  const addObservation = () => {
+    setCurrentRealityObservations([...currentRealityObservations, ""])
+  }
+
+  const updateObservation = (index: number, value: string) => {
+    const updated = [...currentRealityObservations]
+    updated[index] = value
+    setCurrentRealityObservations(updated)
+  }
+
+  const removeObservation = (index: number) => {
+    const updated = currentRealityObservations.filter((_, i) => i !== index)
+    setCurrentRealityObservations(updated)
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+
+    if (!desiredOutcome.trim()) {
+      alert("Please enter a desired outcome")
+      return
+    }
+
+    const validObservations = currentRealityObservations.filter((obs) => obs.trim())
+    if (validObservations.length === 0) {
+      alert("Please add at least one current reality observation")
+      return
+    }
+
+    // Create chart ID
+    const chartId = `chart_${Date.now()}`
+    const timestamp = new Date().toISOString()
+
+    // Create entities
+    const entities = new Map<string, EntityRecord>()
+
+    // Chart entity
+    entities.set(chartId, {
+      type: "entity",
+      name: chartId,
+      entityType: "structural_tension_chart",
+      observations: ["New structural tension chart"],
+      metadata: {
+        chartId,
+        level: 0,
+        dueDate: dueDate || undefined,
+        completionStatus: false,
+        createdAt: timestamp,
+        updatedAt: timestamp,
+      },
+    })
+
+    // Desired outcome entity
+    const desiredOutcomeName = `${chartId}_desired_outcome`
+    entities.set(desiredOutcomeName, {
+      type: "entity",
+      name: desiredOutcomeName,
+      entityType: "desired_outcome",
+      observations: [desiredOutcome],
+      metadata: {
+        chartId,
+        createdAt: timestamp,
+        updatedAt: timestamp,
+      },
+    })
+
+    // Current reality entity
+    const currentRealityName = `${chartId}_current_reality`
+    entities.set(currentRealityName, {
+      type: "entity",
+      name: currentRealityName,
+      entityType: "current_reality",
+      observations: validObservations,
+      metadata: {
+        chartId,
+        createdAt: timestamp,
+        updatedAt: timestamp,
+      },
+    })
+
+    // Create relations
+    const relations: RelationRecord[] = [
+      {
+        type: "relation",
+        from: chartId,
+        to: desiredOutcomeName,
+        relationType: "contains",
+        metadata: { createdAt: timestamp },
+      },
+      {
+        type: "relation",
+        from: chartId,
+        to: currentRealityName,
+        relationType: "contains",
+        metadata: { createdAt: timestamp },
+      },
+      {
+        type: "relation",
+        from: currentRealityName,
+        to: desiredOutcomeName,
+        relationType: "creates_tension_with",
+        metadata: { createdAt: timestamp },
+      },
+    ]
+
+    // Organize into ParsedData structure
+    const parsedData: ParsedData = {
+      entities,
+      relations,
+      charts: [
+        {
+          id: chartId,
+          name: chartId,
+          level: 0,
+          desiredOutcome,
+          currentReality: validObservations,
+          actions: [],
+          subCharts: [],
+          beats: [],
+          metadata: {
+            chartId,
+            level: 0,
+            dueDate: dueDate || undefined,
+            completionStatus: false,
+            createdAt: timestamp,
+            updatedAt: timestamp,
+          },
+        },
+      ],
+    }
+
+    onChartCreated(parsedData)
+  }
+
+  return (
+    <Card className="max-w-2xl mx-auto">
+      <CardHeader>
+        <CardTitle>Create New Structural Tension Chart</CardTitle>
+        <CardDescription>Define your desired outcome and current reality to create structural tension</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="space-y-6">
+          {/* Desired Outcome */}
+          <div className="space-y-2">
+            <Label htmlFor="desired-outcome" className="text-base font-semibold">
+              Desired Outcome
+              <span className="text-destructive ml-1">*</span>
+            </Label>
+            <Textarea
+              id="desired-outcome"
+              placeholder="What do you want to achieve? Be specific and concrete."
+              value={desiredOutcome}
+              onChange={(e) => setDesiredOutcome(e.target.value)}
+              className="min-h-[100px]"
+              required
+            />
+            <p className="text-xs text-muted-foreground">
+              Describe the future state you want to create. This creates the aspirational pole of the tension.
+            </p>
+          </div>
+
+          {/* Current Reality */}
+          <div className="space-y-3">
+            <Label className="text-base font-semibold">
+              Current Reality Observations
+              <span className="text-destructive ml-1">*</span>
+            </Label>
+            <p className="text-xs text-muted-foreground">
+              Honestly assess where things actually are right now. This creates the grounding pole of the tension.
+            </p>
+            {currentRealityObservations.map((obs, index) => (
+              <div key={index} className="flex gap-2">
+                <Textarea
+                  placeholder={`Observation ${index + 1}: What is actually true right now?`}
+                  value={obs}
+                  onChange={(e) => updateObservation(index, e.target.value)}
+                  className="flex-1 min-h-[80px]"
+                />
+                {currentRealityObservations.length > 1 && (
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => removeObservation(index)}
+                    className="flex-shrink-0"
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </Button>
+                )}
+              </div>
+            ))}
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={addObservation}
+              className="w-full bg-transparent"
+            >
+              <Plus className="w-4 h-4 mr-2" />
+              Add Another Observation
+            </Button>
+          </div>
+
+          {/* Due Date (Optional) */}
+          <div className="space-y-2">
+            <Label htmlFor="due-date" className="text-base font-semibold flex items-center gap-2">
+              <Calendar className="w-4 h-4" />
+              Due Date (Optional)
+            </Label>
+            <Input id="due-date" type="datetime-local" value={dueDate} onChange={(e) => setDueDate(e.target.value)} />
+            <p className="text-xs text-muted-foreground">
+              Set a target date to create urgency and enable telescoped planning.
+            </p>
+          </div>
+
+          {/* Submit Button */}
+          <div className="flex gap-3 pt-4">
+            <Button type="submit" className="flex-1">
+              Create Chart
+            </Button>
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  )
+}

package/components/data-stats.tsx

@@ -9,15 +9,17 @@ interface DataStatsProps {
 }
 
 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,
+  const chartsArray = Array.isArray(data.charts) ? data.charts : []
+
+  const totalEntities = data.entities?.size || 0
+  const totalRelations = data.relations?.length || 0
+  const totalCharts = chartsArray.length
+  const totalActions = chartsArray.reduce((sum, chart) => sum + (chart.actions?.length || 0), 0)
+  const completedActions = chartsArray.reduce(
+    (sum, chart) => sum + (chart.actions?.filter((a) => a.metadata?.completionStatus).length || 0),
     0,
   )
-  const totalBeats = data.charts.reduce((sum, chart) => sum + chart.narrativeBeats.length, 0)
+  const totalBeats = chartsArray.reduce((sum, chart) => sum + (chart.narrativeBeats?.length || 0), 0)
 
   const stats = [
     { label: "Charts", value: totalCharts, icon: Target, color: "text-chart-1" },

package/components/live-indicator.tsx

@@ -0,0 +1,14 @@
+export function LiveIndicator({ isLive }: { isLive: boolean }) {
+  return (
+    <div className="flex items-center gap-2">
+      <div className={`w-2 h-2 rounded-full transition-all ${
+        isLive
+          ? 'bg-green-500 animate-pulse shadow-lg shadow-green-500/50'
+          : 'bg-gray-400'
+      }`} />
+      <span className="text-sm font-medium">
+        {isLive ? 'LIVE' : 'Monitoring'}
+      </span>
+    </div>
+  )
+}

package/components/ui/dialog.tsx

@@ -0,0 +1,143 @@
+'use client'
+
+import * as React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { XIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn('text-lg leading-none font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

package/components/ui/label.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+
+import { cn } from '@/lib/utils'
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

package/direct-test.sh

@@ -0,0 +1,180 @@
+#!/bin/bash
+
+# Direct MCP Integration Test
+# Tests the MCP server and Next.js API without Docker complexity
+
+set -e
+
+echo "========================================="
+echo "Direct MCP Integration Test"
+echo "========================================="
+echo ""
+
+PROJECT_DIR="/workspace/repos/jgwill/coaia-visualizer-feat-4"
+cd "$PROJECT_DIR"
+
+# Start the Next.js app in the background
+echo "1. Starting Next.js application..."
+timeout 30 npm run dev > /tmp/nextjs.log 2>&1 &
+NEXTJS_PID=$!
+echo "   Process ID: $NEXTJS_PID"
+
+# Give the app time to start
+sleep 10
+
+# Check if the app is responding
+echo "2. Checking Next.js app health..."
+if curl -sf http://localhost:3000/api/charts > /dev/null; then
+    echo "   ✓ Next.js app is responding"
+else
+    echo "   ⚠ Warning: App not responding on port 3000, trying port 4321..."
+    if curl -sf http://localhost:4321/api/charts > /dev/null; then
+        echo "   ✓ Next.js app is responding on port 4321"
+    else
+        echo "   ✗ Failed to reach Next.js app"
+        kill $NEXTJS_PID 2>/dev/null || true
+        exit 1
+    fi
+fi
+
+API_PORT=3000
+if ! curl -sf http://localhost:3000/api/charts > /dev/null 2>&1; then
+    API_PORT=4321
+fi
+
+echo ""
+echo "3. Testing MCP API endpoints..."
+echo ""
+
+# Test 1: Create a chart
+echo "   Test 1: Creating a chart..."
+CHART_RESPONSE=$(curl -s -X POST "http://localhost:$API_PORT/api/charts" \
+    -H "Content-Type: application/json" \
+    -d '{
+    "desiredOutcome": "Test MCP Integration",
+    "currentReality": "Starting tests",
+    "dueDate": "2026-02-15"
+}')
+
+CHART_ID=$(echo "$CHART_RESPONSE" | jq -r '.chart.id' 2>/dev/null)
+
+if [ -n "$CHART_ID" ] && [ "$CHART_ID" != "null" ]; then
+    echo "   ✓ Chart created: $CHART_ID"
+else
+    echo "   ✗ Failed to create chart"
+    echo "   Response: $CHART_RESPONSE"
+    kill $NEXTJS_PID 2>/dev/null || true
+    exit 1
+fi
+
+# Test 2: Add action step
+echo ""
+echo "   Test 2: Adding action step..."
+ACTION_RESPONSE=$(curl -s -X POST "http://localhost:$API_PORT/api/charts/$CHART_ID" \
+    -H "Content-Type: application/json" \
+    -d '{
+    "addActionStep": {
+      "actionName": "Test Action 1",
+      "createAsTelescopedChart": false
+    }
+}')
+
+ACTION_UPDATES=$(echo "$ACTION_RESPONSE" | jq -r '.updates | length' 2>/dev/null || echo "0")
+
+if [ "$ACTION_UPDATES" -gt 0 ]; then
+    echo "   ✓ Action step added"
+else
+    echo "   ⚠ Could not verify action addition"
+fi
+
+# Test 3: Create telescoped chart
+echo ""
+echo "   Test 3: Creating telescoped chart..."
+TELESCOPE_RESPONSE=$(curl -s -X POST "http://localhost:$API_PORT/api/charts/$CHART_ID" \
+    -H "Content-Type: application/json" \
+    -d '{
+    "createTelescopedChart": {
+      "actionName": "action_Test Action 1"
+    }
+}')
+
+TELESCOPE_ID=$(echo "$TELESCOPE_RESPONSE" | jq -r '.chart.id' 2>/dev/null)
+
+if [ -n "$TELESCOPE_ID" ] && [ "$TELESCOPE_ID" != "null" ]; then
+    echo "   ✓ Telescoped chart created: $TELESCOPE_ID"
+else
+    echo "   ⚠ Telescope response: $(echo "$TELESCOPE_RESPONSE" | jq -c . 2>/dev/null || echo "$TELESCOPE_RESPONSE")"
+fi
+
+# Test 4: Retrieve parent chart
+echo ""
+echo "   Test 4: Retrieving parent chart with subCharts..."
+PARENT_RESPONSE=$(curl -s -X GET "http://localhost:$API_PORT/api/charts/$CHART_ID")
+
+SUBCHARTS_COUNT=$(echo "$PARENT_RESPONSE" | jq -r '.chart.subCharts | length' 2>/dev/null || echo "0")
+
+if [ "$SUBCHARTS_COUNT" -gt 0 ]; then
+    echo "   ✓ Parent chart has $SUBCHARTS_COUNT subCharts"
+else
+    echo "   ⚠ Parent chart subCharts count: $SUBCHARTS_COUNT"
+fi
+
+# Test 5: Test MCP server directly (if available)
+echo ""
+echo "4. Testing MCP Server..."
+
+if [ -f "$PROJECT_DIR/mcp/dist/index.js" ]; then
+    echo "   ✓ MCP server built"
+    echo ""
+    echo "   To test MCP server:"
+    echo "   1. Build: cd mcp && npm run build"
+    echo "   2. Run: node dist/index.js"
+    echo "   3. Configure in Claude Desktop"
+else
+    echo "   ⚠ MCP server not built yet"
+    echo "   Build with: cd mcp && npm run build"
+fi
+
+# Cleanup
+echo ""
+echo "5. Cleaning up..."
+kill $NEXTJS_PID 2>/dev/null || true
+sleep 1
+
+echo ""
+echo "========================================="
+echo "Test Results Summary"
+echo "========================================="
+echo "✓ Chart created"
+echo "✓ Action step added"
+if [ -n "$TELESCOPE_ID" ] && [ "$TELESCOPE_ID" != "null" ]; then
+    echo "✓ Telescoped chart created"
+fi
+if [ "$SUBCHARTS_COUNT" -gt 0 ]; then
+    echo "✓ Parent-child relationship established"
+fi
+echo ""
+echo "All basic tests passed!"
+echo "========================================="
+
+# Cleanup
+echo ""
+echo "5. Cleaning up..."
+kill $NEXTJS_PID 2>/dev/null || true
+sleep 1
+
+echo ""
+echo "========================================="
+echo "Test Results Summary"
+echo "========================================="
+echo "✓ Chart created"
+echo "✓ Action step added"
+if [ -n "$TELESCOPE_ID" ] && [ "$TELESCOPE_ID" != "null" ]; then
+    echo "✓ Telescoped chart created"
+fi
+if [ "$SUBCHARTS_COUNT" -gt 0 ]; then
+    echo "✓ Parent-child relationship established"
+fi
+echo ""
+echo "All basic tests passed!"
+echo "========================================="