coaia-visualizer 1.6.0 → 1.6.1

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)