coaia-visualizer 1.6.0 → 1.6.2

package/components/metadata-projections.tsx

@@ -0,0 +1,208 @@
+"use client"
+
+import { AlertTriangle, Blocks, FileJson, Github, ListChecks, Sparkles, Target } from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import type { Chart, EntityRecord, ParsedData } from "@/lib/types"
+
+interface MetadataProjectionsProps {
+  chart: Chart
+  data: ParsedData
+}
+
+const KNOWN_METADATA_KEYS = new Set([
+  "dueDate",
+  "chartId",
+  "phase",
+  "completionStatus",
+  "completedAt",
+  "parentChart",
+  "parentActionStep",
+  "level",
+  "createdAt",
+  "updatedAt",
+  "act",
+  "type_dramatic",
+  "universes",
+  "timestamp",
+  "elementsOfPerformance",
+  "mmotEvaluations",
+  "relationalAlignment",
+  "fourDirections",
+  "narrative",
+  "isTelescopedChart",
+  "telescopedChartId",
+  "github",
+])
+
+function JsonBlock({ value }: { value: unknown }) {
+  return (
+    <pre className="max-h-64 overflow-auto rounded-md border bg-muted/40 p-3 text-xs leading-relaxed">
+      {JSON.stringify(value, null, 2)}
+    </pre>
+  )
+}
+
+function ProjectionRecord({ entity, label }: { entity?: EntityRecord; label: string }) {
+  if (!entity) return null
+
+  const metadata = entity.metadata || {}
+  const unknownKeys = Object.keys(metadata).filter((key) => !KNOWN_METADATA_KEYS.has(key))
+
+  return (
+    <div className="rounded-md border p-3">
+      <div className="flex flex-wrap items-center gap-2">
+        <Badge variant="outline">{label}</Badge>
+        <span className="font-mono text-xs text-muted-foreground">{entity.name}</span>
+        {metadata.github && (
+          <Badge variant="secondary" className="gap-1">
+            <Github className="h-3 w-3" />
+            GitHub
+          </Badge>
+        )}
+        {unknownKeys.length > 0 && <Badge variant="secondary">{unknownKeys.length} extensions</Badge>}
+      </div>
+
+      {metadata.github && (
+        <div className="mt-3">
+          <div className="mb-1 flex items-center gap-2 text-sm font-medium">
+            <Github className="h-4 w-4" />
+            GitHub Provenance
+          </div>
+          <JsonBlock value={metadata.github} />
+        </div>
+      )}
+
+      <details className="mt-3">
+        <summary className="cursor-pointer text-sm font-medium">Full Metadata</summary>
+        <div className="mt-2">
+          <JsonBlock value={metadata} />
+        </div>
+      </details>
+    </div>
+  )
+}
+
+export function MetadataProjections({ chart, data }: MetadataProjectionsProps) {
+  const riseSpec = (data.riseSpecs || []).find((spec) => spec.chartId === chart.id)
+  const chartRecordNames = new Set(
+    [
+      chart.chartEntity.name,
+      chart.desiredOutcome?.name,
+      chart.currentReality?.name,
+      ...chart.actions.map((action) => action.name),
+      ...chart.narrativeBeats.map((beat) => beat.name),
+    ].filter(Boolean),
+  )
+  const warnings = (data.preservationWarnings || []).filter(
+    (warning) => !warning.recordName || chartRecordNames.has(warning.recordName),
+  )
+
+  return (
+    <div className="space-y-6">
+      {warnings.length > 0 && (
+        <Card className="border-amber-500/40">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-base">
+              <AlertTriangle className="h-5 w-5 text-amber-600" />
+              Preservation Warnings
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2">
+            {warnings.map((warning, index) => (
+              <div key={`${warning.recordName}-${index}`} className="rounded-md border border-amber-500/30 bg-amber-500/5 p-3 text-sm">
+                <div className="font-medium">{warning.recordName || warning.recordType || "JSONL record"}</div>
+                <div className="text-muted-foreground">{warning.message}</div>
+                {warning.upstreamIssue && (
+                  <a className="text-xs underline" href={warning.upstreamIssue} target="_blank" rel="noreferrer">
+                    avadisabelle/coaia-narrative#35
+                  </a>
+                )}
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      )}
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-base">
+            <Blocks className="h-5 w-5" />
+            RISE Projection
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="grid gap-4 md:grid-cols-2">
+          <div>
+            <div className="mb-1 flex items-center gap-2 text-sm font-medium">
+              <Target className="h-4 w-4" />
+              Desired Outcome
+            </div>
+            <p className="text-sm text-muted-foreground">{riseSpec?.desiredOutcome || "No desired outcome"}</p>
+          </div>
+          <div>
+            <div className="mb-1 text-sm font-medium">Current Reality</div>
+            <ul className="space-y-1 text-sm text-muted-foreground">
+              {(riseSpec?.currentReality.length ? riseSpec.currentReality : ["No current reality"]).map((item, index) => (
+                <li key={index}>{item}</li>
+              ))}
+            </ul>
+          </div>
+          <div>
+            <div className="mb-1 text-sm font-medium">Natural Progression</div>
+            <ul className="space-y-1 text-sm text-muted-foreground">
+              {(riseSpec?.naturalProgression.length ? riseSpec.naturalProgression : ["No projected progression"]).map((item, index) => (
+                <li key={index}>{item}</li>
+              ))}
+            </ul>
+          </div>
+          <div>
+            <div className="mb-1 text-sm font-medium">Remaining Blockers</div>
+            <ul className="space-y-1 text-sm text-muted-foreground">
+              {(riseSpec?.remainingBlockers.length ? riseSpec.remainingBlockers : ["No blockers recorded"]).map((item, index) => (
+                <li key={index}>{item}</li>
+              ))}
+            </ul>
+          </div>
+          <div className="md:col-span-2">
+            <div className="mb-1 text-sm font-medium">Next Chart Operations</div>
+            <ul className="space-y-1 text-sm text-muted-foreground">
+              {(riseSpec?.nextOperations.length ? riseSpec.nextOperations : ["No next operations recorded"]).map((item, index) => (
+                <li key={index}>{item}</li>
+              ))}
+            </ul>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-base">
+            <FileJson className="h-5 w-5" />
+            Rich Metadata Projection
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <ProjectionRecord label="Chart" entity={chart.chartEntity} />
+          <ProjectionRecord label="Desired Outcome" entity={chart.desiredOutcome} />
+          <ProjectionRecord label="Current Reality" entity={chart.currentReality} />
+          {chart.actions.map((action) => (
+            <ProjectionRecord key={action.name} label="Action Step" entity={action} />
+          ))}
+          {chart.narrativeBeats.map((beat) => (
+            <ProjectionRecord key={beat.name} label="Narrative Beat" entity={beat} />
+          ))}
+          <div className="flex flex-wrap gap-2 pt-1 text-sm text-muted-foreground">
+            <Badge variant="outline" className="gap-1">
+              <ListChecks className="h-3 w-3" />
+              {data.projections?.actionStepRecords.length || 0} actions
+            </Badge>
+            <Badge variant="outline" className="gap-1">
+              <Sparkles className="h-3 w-3" />
+              {data.projections?.narrativeBeatRecords.length || 0} beats
+            </Badge>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/components/relation-graph.tsx

@@ -2,10 +2,8 @@
 
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
-import type { ParsedData, Chart, EntityRecord, RelationRecord } from "@/lib/types"
-import { ArrowRight, Github } from "lucide-react"
-import { getGithubBridgeRelationType, getGithubSyncState } from "@/lib/github-provenance"
-import { SyncStatePill } from "./github-provenance"
+import type { ParsedData, Chart, RelationRecord } from "@/lib/types"
+import { ArrowRight } from "lucide-react"
 
 interface RelationGraphProps {
   chart: Chart
@@ -25,10 +23,7 @@ export function RelationGraph({ chart, data }: RelationGraphProps) {
     )
   }
 
-  const githubBridgeRelations = relations.filter((relation) => getGithubBridgeRelationType(relation))
-  const standardRelations = relations.filter((relation) => !getGithubBridgeRelationType(relation))
-
-  const relationsByType = standardRelations.reduce(
+  const relationsByType = relations.reduce(
     (acc, rel) => {
       if (!acc[rel.relationType]) {
         acc[rel.relationType] = []
@@ -46,28 +41,6 @@ export function RelationGraph({ chart, data }: RelationGraphProps) {
         <CardDescription>Connections between chart entities</CardDescription>
       </CardHeader>
       <CardContent className="space-y-6">
-        {githubBridgeRelations.length > 0 && (
-          <div>
-            <h3 className="text-sm font-semibold mb-3 flex items-center gap-2">
-              <Badge className="gap-1 bg-indigo-600 text-white">
-                <Github className="w-3 h-3" />
-                GitHub bridge
-              </Badge>
-              <span className="text-muted-foreground">({githubBridgeRelations.length})</span>
-            </h3>
-            <div className="space-y-2">
-              {githubBridgeRelations.map((rel, idx) => (
-                <RelationRow
-                  key={`github-${idx}`}
-                  relation={rel}
-                  data={data}
-                  bridgeLabel={getGithubBridgeRelationType(rel)}
-                />
-              ))}
-            </div>
-          </div>
-        )}
-
         {Object.entries(relationsByType).map(([type, rels]) => (
           <div key={type}>
             <h3 className="text-sm font-semibold mb-3 flex items-center gap-2">
@@ -75,9 +48,30 @@ export function RelationGraph({ chart, data }: RelationGraphProps) {
               <span className="text-muted-foreground">({rels.length})</span>
             </h3>
             <div className="space-y-2">
-              {rels.map((rel, idx) => (
-                <RelationRow key={idx} relation={rel} data={data} />
-              ))}
+              {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>
         ))}
@@ -85,61 +79,3 @@ export function RelationGraph({ chart, data }: RelationGraphProps) {
     </Card>
   )
 }
-
-interface RelationRowProps {
-  relation: RelationRecord
-  data: ParsedData
-  bridgeLabel?: string
-}
-
-function RelationRow({ relation, data, bridgeLabel }: RelationRowProps) {
-  const fromEntity = data.entities.get(relation.from)
-  const toEntity = data.entities.get(relation.to)
-  const syncState = getGithubSyncState(relation.metadata)
-
-  return (
-    <div className="flex flex-col gap-2 p-3 bg-muted/30 rounded-lg text-sm sm:flex-row sm:items-center sm:gap-3">
-      <RelationEndpoint name={relation.from} entity={fromEntity} />
-
-      <div className="flex items-center gap-2 text-muted-foreground sm:flex-col">
-        <ArrowRight className="w-4 h-4 flex-shrink-0 rotate-90 sm:rotate-0" />
-        {(bridgeLabel || syncState) && (
-          <div className="flex flex-wrap justify-center gap-1">
-            {bridgeLabel && (
-              <Badge variant="outline" className="text-xs">
-                {bridgeLabel.replace(/_/g, " ")}
-              </Badge>
-            )}
-            <SyncStatePill syncState={syncState} />
-          </div>
-        )}
-      </div>
-
-      <RelationEndpoint name={relation.to} entity={toEntity} />
-    </div>
-  )
-}
-
-function RelationEndpoint({
-  name,
-  entity,
-}: {
-  name: string
-  entity?: EntityRecord
-}) {
-  const isGithubVirtualNode = name.startsWith("gh:")
-
-  return (
-    <div className="flex-1 min-w-0">
-      <div className="font-mono text-xs text-muted-foreground mb-1 break-all">{name}</div>
-      {entity ? (
-        <div className="text-xs line-clamp-1">{entity.observations[0] || entity.entityType}</div>
-      ) : isGithubVirtualNode ? (
-        <Badge variant="outline" className="gap-1 text-xs">
-          <Github className="w-3 h-3" />
-          GitHub issue
-        </Badge>
-      ) : null}
-    </div>
-  )
-}

package/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

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 "========================================="

package/dist/cli.js

@@ -11,6 +11,7 @@ import path from 'path';
 import minimist from 'minimist';
 import * as dotenv from 'dotenv';
 import { fileURLToPath } from 'url';
+import { handleSkillCommand } from './skill.js';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const DOCKER_IMAGE = 'jgwill/coaia:visualizer';
@@ -95,6 +96,11 @@ function loadConfig(args) {
 }
 async function main() {
     const args = minimist(process.argv.slice(2));
+    const command = args._[0];
+    if (command === 'skill') {
+        await handleSkillCommand(args);
+        return;
+    }
     if (args.help || args.h) {
         console.log(`
 🎨 COAIA Visualizer - Interactive Chart Viewer
@@ -106,6 +112,7 @@ DESCRIPTION:
 USAGE:
    coaia-visualizer [OPTIONS]
    npx coaia-visualizer [OPTIONS]
+   coaia-visualizer skill <show|install|help>
 
 OPTIONS:
    --memory-path PATH, -M PATH    Path to memory.jsonl file (default: ./memory.jsonl)