coaia-visualizer 1.6.0 → 1.6.2

package/test-scripts/test-03-navigation.sh

@@ -0,0 +1,87 @@
+#!/bin/bash
+set -e
+
+echo "Test 03: Navigation & Chart Hierarchy"
+echo "======================================"
+
+TEST_RESULTS_DIR="/test-results/test-03"
+mkdir -p "$TEST_RESULTS_DIR"
+
+# Load chart IDs from previous tests
+PARENT_CHART_ID=$(cat /test-results/test-01/chart-id.txt 2>/dev/null || echo "")
+TELESCOPED_CHART_ID=$(cat /test-results/test-02/telescoped-chart-id.txt 2>/dev/null || echo "")
+
+echo "Parent chart: $PARENT_CHART_ID"
+echo "Telescoped chart: $TELESCOPED_CHART_ID"
+
+if [ -z "$PARENT_CHART_ID" ]; then
+    echo "✗ No parent chart ID available"
+    exit 1
+fi
+
+echo "1. Testing parent chart retrieval..."
+curl -X GET "http://visualizer-app:4321/api/charts/$PARENT_CHART_ID" \
+-H "X-API-Key: test-api-key" \
+-o "$TEST_RESULTS_DIR/parent-chart.json" || true
+
+# Verify parent chart has metadata about children
+HAS_SUBCHARTS=$(cat "$TEST_RESULTS_DIR/parent-chart.json" | jq -r '.chart.subCharts != null' 2>/dev/null || echo "false")
+
+echo "  Parent has subCharts array: $HAS_SUBCHARTS"
+
+if [ -n "$TELESCOPED_CHART_ID" ] && [ "$TELESCOPED_CHART_ID" != "null" ]; then
+    echo "2. Testing telescoped chart retrieval..."
+    curl -X GET "http://visualizer-app:4321/api/charts/$TELESCOPED_CHART_ID" \
+    -H "X-API-Key: test-api-key" \
+    -o "$TEST_RESULTS_DIR/telescoped-chart.json" || true
+    
+    # Verify telescoped chart has parent metadata
+    PARENT_REF=$(cat "$TEST_RESULTS_DIR/telescoped-chart.json" | jq -r '.chart.metadata.parentChart' 2>/dev/null || echo "")
+    
+    echo "  Telescoped chart parent reference: $PARENT_REF"
+    
+    if [ -n "$PARENT_REF" ] && [ "$PARENT_REF" != "null" ]; then
+        echo "✓ Navigation hierarchy is properly established"
+    else
+        echo "⚠ Parent reference not found in telescoped chart"
+    fi
+else
+    echo "⚠ No telescoped chart ID available to test navigation"
+fi
+
+echo "3. Testing search functionality..."
+curl -X GET "http://visualizer-app:4321/api/charts/search?query=MCP" \
+-H "X-API-Key: test-api-key" \
+-o "$TEST_RESULTS_DIR/search-results.json" || true
+
+SEARCH_COUNT=$(cat "$TEST_RESULTS_DIR/search-results.json" | jq -r '.results | length' 2>/dev/null || echo "0")
+echo "  Search returned $SEARCH_COUNT results"
+
+echo "4. Listing all charts to verify hierarchy..."
+curl -X GET "http://visualizer-app:4321/api/charts" \
+-H "X-API-Key: test-api-key" \
+-o "$TEST_RESULTS_DIR/all-charts.json" || true
+
+TOTAL_CHARTS=$(cat "$TEST_RESULTS_DIR/all-charts.json" | jq -r '.charts | length' 2>/dev/null || echo "0")
+echo "  Total charts in system: $TOTAL_CHARTS"
+
+echo ""
+echo "Test 03: COMPLETED"
+echo ""
+
+# Generate final summary
+cat > /test-results/navigation-summary.txt << EOF
+Navigation Test Summary
+========================
+Parent Chart ID: $PARENT_CHART_ID
+Telescoped Chart ID: $TELESCOPED_CHART_ID
+Total Charts: $TOTAL_CHARTS
+Search Results: $SEARCH_COUNT
+
+Parent has subCharts: $HAS_SUBCHARTS
+Telescoped has parent ref: $([ -n "$PARENT_REF" ] && echo "yes" || echo "no")
+
+Test Status: PASSED
+EOF
+
+cat /test-results/navigation-summary.txt

package/test-scripts/test-global-cli.spec.ts

@@ -0,0 +1,220 @@
+/**
+ * Test globally installed CLI with Playwright
+ * Tests the fix for Turbopack file watching issue
+ */
+
+import { test, expect } from '@playwright/test';
+import { spawn, ChildProcess } from 'child_process';
+import { promises as fs } from 'fs';
+import path from 'path';
+
+let cliProcess: ChildProcess | null = null;
+const CLI_PORT = 3099;
+const TEST_TIMEOUT = 60000; // 60 seconds for server startup
+
+test.describe('Global CLI Installation Tests', () => {
+  test.beforeEach(async () => {
+    // Kill any existing process on the port
+    try {
+      await new Promise<void>((resolve) => {
+        const kill = spawn('fuser', ['-k', `${CLI_PORT}/tcp`]);
+        kill.on('close', () => resolve());
+        setTimeout(resolve, 1000);
+      });
+    } catch (e) {
+      // Port might not be in use
+    }
+  });
+
+  test.afterEach(async () => {
+    // Clean up CLI process
+    if (cliProcess) {
+      cliProcess.kill('SIGTERM');
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      if (!cliProcess.killed) {
+        cliProcess.kill('SIGKILL');
+      }
+      cliProcess = null;
+    }
+  });
+
+  test('should launch CLI without file watch errors', async ({ page }) => {
+    test.setTimeout(TEST_TIMEOUT);
+
+    const sampleFile = path.join(__dirname, '../samples/tradingchart.jsonl');
+    
+    // Verify sample file exists
+    await fs.access(sampleFile);
+
+    // Launch CLI with sample file
+    let cliOutput = '';
+    let cliError = '';
+    let hasFileWatchError = false;
+    let serverReady = false;
+
+    cliProcess = spawn(
+      'coaia-visualizer',
+      ['-M', sampleFile, '--port', CLI_PORT.toString(), '--no-open'],
+      {
+        stdio: ['ignore', 'pipe', 'pipe'],
+        env: { ...process.env },
+      }
+    );
+
+    // Monitor output
+    cliProcess.stdout?.on('data', (data) => {
+      const output = data.toString();
+      cliOutput += output;
+      console.log('[CLI stdout]', output);
+      
+      if (output.includes('Local:') || output.includes('localhost')) {
+        serverReady = true;
+      }
+    });
+
+    cliProcess.stderr?.on('data', (data) => {
+      const error = data.toString();
+      cliError += error;
+      console.log('[CLI stderr]', error);
+      
+      // Check for file watch errors
+      if (
+        error.includes('OS file watch limit reached') ||
+        error.includes('TurbopackInternalError') ||
+        error.includes('about ["/home/') ||
+        error.includes('ENOSPC')
+      ) {
+        hasFileWatchError = true;
+      }
+    });
+
+    // Wait for server to be ready (max 45 seconds)
+    const startTime = Date.now();
+    while (!serverReady && Date.now() - startTime < 45000) {
+      await new Promise(resolve => setTimeout(resolve, 500));
+      
+      // Fail fast if file watch error detected
+      if (hasFileWatchError) {
+        break;
+      }
+    }
+
+    // Verify no file watch errors
+    expect(hasFileWatchError, 'Should not have file watch errors').toBe(false);
+    expect(serverReady, 'Server should be ready').toBe(true);
+
+    // Navigate to the app
+    await page.goto(`http://localhost:${CLI_PORT}`, { 
+      waitUntil: 'networkidle',
+      timeout: 15000 
+    });
+
+    // Verify page loaded successfully
+    await expect(page.locator('body')).toBeVisible();
+    
+    // Check that it's the visualizer app (should have charts or similar content)
+    const title = await page.title();
+    console.log('Page title:', title);
+    
+    // Take a screenshot for verification
+    await page.screenshot({ 
+      path: path.join(__dirname, '../test-data/global-cli-test.png'),
+      fullPage: true 
+    });
+
+    console.log('✅ CLI launched successfully without file watch errors');
+  });
+
+  test('should load sample chart data correctly', async ({ page }) => {
+    test.setTimeout(TEST_TIMEOUT);
+
+    const sampleFile = path.join(__dirname, '../samples/tradingchart.jsonl');
+    
+    // Launch CLI
+    let serverReady = false;
+    cliProcess = spawn(
+      'coaia-visualizer',
+      ['-M', sampleFile, '--port', CLI_PORT.toString(), '--no-open'],
+      {
+        stdio: ['ignore', 'pipe', 'pipe'],
+        env: { ...process.env },
+      }
+    );
+
+    cliProcess.stdout?.on('data', (data) => {
+      const output = data.toString();
+      if (output.includes('Local:') || output.includes('localhost')) {
+        serverReady = true;
+      }
+    });
+
+    // Wait for server
+    const startTime = Date.now();
+    while (!serverReady && Date.now() - startTime < 45000) {
+      await new Promise(resolve => setTimeout(resolve, 500));
+    }
+
+    expect(serverReady).toBe(true);
+
+    // Navigate and test the UI
+    await page.goto(`http://localhost:${CLI_PORT}`, { 
+      waitUntil: 'networkidle',
+      timeout: 15000 
+    });
+
+    // Wait for content to load
+    await page.waitForTimeout(2000);
+
+    // Check for chart elements (adjust selectors based on your UI)
+    const snapshot = await page.locator('body').textContent();
+    console.log('Page content includes:', snapshot?.substring(0, 500));
+
+    // Verify the app is functional
+    await expect(page.locator('body')).toBeVisible();
+    
+    console.log('✅ Sample chart data loaded successfully');
+  });
+
+  test('should handle different ports correctly', async ({ page }) => {
+    test.setTimeout(TEST_TIMEOUT);
+
+    const alternatePort = 3098;
+    const sampleFile = path.join(__dirname, '../samples/tradingchart.jsonl');
+    
+    // Launch on alternate port
+    let serverReady = false;
+    cliProcess = spawn(
+      'coaia-visualizer',
+      ['-M', sampleFile, '-p', alternatePort.toString(), '--no-open'],
+      {
+        stdio: ['ignore', 'pipe', 'pipe'],
+        env: { ...process.env },
+      }
+    );
+
+    cliProcess.stdout?.on('data', (data) => {
+      const output = data.toString();
+      if (output.includes(`${alternatePort}`)) {
+        serverReady = true;
+      }
+    });
+
+    // Wait for server
+    const startTime = Date.now();
+    while (!serverReady && Date.now() - startTime < 45000) {
+      await new Promise(resolve => setTimeout(resolve, 500));
+    }
+
+    expect(serverReady).toBe(true);
+
+    // Verify server is on alternate port
+    await page.goto(`http://localhost:${alternatePort}`, { 
+      waitUntil: 'networkidle',
+      timeout: 15000 
+    });
+
+    await expect(page.locator('body')).toBeVisible();
+    
+    console.log('✅ Alternate port configuration works');
+  });
+});

package/test-scripts/verify-global-cli.sh

@@ -0,0 +1,87 @@
+#!/bin/bash
+# Verify global CLI installation works without file watch errors
+
+set -e
+
+PORT=3099
+SAMPLE_FILE="/a/src/coaia-visualizer/samples/tradingchart.jsonl"
+TIMEOUT=45
+ERROR_LOG="/tmp/cli-error-check.log"
+
+echo "🧪 Testing globally installed coaia-visualizer CLI"
+echo "📁 Sample file: $SAMPLE_FILE"
+echo "🌐 Port: $PORT"
+echo ""
+
+# Clean up any existing process on the port
+fuser -k ${PORT}/tcp 2>/dev/null || true
+sleep 2
+
+# Start CLI in background
+rm -f "$ERROR_LOG"
+cd /tmp
+coaia-visualizer -M "$SAMPLE_FILE" --port $PORT --no-open > "$ERROR_LOG" 2>&1 &
+CLI_PID=$!
+
+echo "⏳ Waiting for server to start (PID: $CLI_PID)..."
+
+# Wait for server to be ready
+for i in $(seq 1 $TIMEOUT); do
+  if grep -q "Ready in" "$ERROR_LOG" 2>/dev/null; then
+    echo "✅ Server started successfully"
+    break
+  fi
+  
+  if grep -E "(OS file watch limit|TurbopackInternalError|FATAL)" "$ERROR_LOG" 2>/dev/null; then
+    echo "❌ File watch error detected:"
+    grep -E "(OS file watch limit|TurbopackInternalError|FATAL)" "$ERROR_LOG"
+    kill $CLI_PID 2>/dev/null
+    exit 1
+  fi
+  
+  if ! kill -0 $CLI_PID 2>/dev/null; then
+    echo "❌ CLI process died unexpectedly"
+    tail -20 "$ERROR_LOG"
+    exit 1
+  fi
+  
+  sleep 1
+done
+
+# Test server response
+echo "🔍 Testing HTTP response..."
+if curl -s -f http://localhost:$PORT > /dev/null; then
+  echo "✅ Server responding correctly"
+else
+  echo "❌ Server not responding"
+  kill $CLI_PID 2>/dev/null
+  exit 1
+fi
+
+# Check for file watch errors in output
+echo "🔍 Checking for file watch errors..."
+if grep -qE "(OS file watch limit|TurbopackInternalError|about \[\"/home/)" "$ERROR_LOG"; then
+  echo "❌ File watch errors detected:"
+  grep -E "(OS file watch limit|TurbopackInternalError|about \[\"/home/)" "$ERROR_LOG"
+  kill $CLI_PID 2>/dev/null
+  exit 1
+else
+  echo "✅ No file watch errors detected"
+fi
+
+# Verify project directory
+echo "🔍 Verifying Turbopack project directory..."
+if grep -q "dir: '/a/src/coaia-visualizer'" "$ERROR_LOG"; then
+  echo "✅ Turbopack using correct project directory"
+else
+  echo "⚠️  Warning: Could not verify Turbopack directory"
+  grep "Creating turbopack project" "$ERROR_LOG" || true
+fi
+
+# Clean up
+kill $CLI_PID 2>/dev/null
+wait $CLI_PID 2>/dev/null || true
+
+echo ""
+echo "✅ All tests passed! CLI works correctly without file watch errors."
+echo "📋 Full output saved to: $ERROR_LOG"

package/tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "target": "ES6",
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/components/github-provenance.tsx

@@ -1,226 +0,0 @@
-"use client"
-
-import { useState } from "react"
-import type { LucideIcon } from "lucide-react"
-import { AlertTriangle, CheckCircle2, Cloud, ExternalLink, FolderOpen, Github, GitBranch, XCircle } from "lucide-react"
-
-import { Badge } from "@/components/ui/badge"
-import type { EntityRecord } from "@/lib/types"
-import {
-  formatGithubIssueRef,
-  formatProjectItemRef,
-  getGithubEntityProvenance,
-  getGithubIssueRef,
-  getGithubSyncState,
-  getProjectFieldEntries,
-  type GithubSyncState,
-} from "@/lib/github-provenance"
-import { cn } from "@/lib/utils"
-
-interface SyncStatePillProps {
-  syncState?: GithubSyncState
-  className?: string
-}
-
-const syncStateConfig: Record<GithubSyncState, { label: string; className: string; Icon: LucideIcon }> = {
-  synced: {
-    label: "synced",
-    className: "border-emerald-500/40 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
-    Icon: CheckCircle2,
-  },
-  diverged: {
-    label: "diverged",
-    className: "border-amber-500/40 bg-amber-500/10 text-amber-700 dark:text-amber-300",
-    Icon: AlertTriangle,
-  },
-  conflict: {
-    label: "conflict",
-    className: "border-destructive/40 bg-destructive/10 text-destructive",
-    Icon: XCircle,
-  },
-  "project-only": {
-    label: "project-only",
-    className: "border-slate-500/40 bg-slate-500/10 text-slate-700 dark:text-slate-300",
-    Icon: Cloud,
-  },
-  "chart-only": {
-    label: "chart-only",
-    className: "border-slate-500/40 bg-slate-500/10 text-slate-700 dark:text-slate-300",
-    Icon: FolderOpen,
-  },
-}
-
-export function SyncStatePill({ syncState, className }: SyncStatePillProps) {
-  if (!syncState) return null
-
-  const { label, className: stateClassName, Icon } = syncStateConfig[syncState]
-
-  return (
-    <Badge variant="outline" className={cn("gap-1 text-xs", stateClassName, className)}>
-      <Icon className="w-3 h-3" />
-      {label}
-    </Badge>
-  )
-}
-
-interface ProjectSourceBadgeProps {
-  entity: EntityRecord
-  className?: string
-  compact?: boolean
-}
-
-export function ProjectSourceBadge({ entity, className, compact = false }: ProjectSourceBadgeProps) {
-  const [selectedLensIndex, setSelectedLensIndex] = useState(0)
-  const provenance = getGithubEntityProvenance(entity)
-
-  if (!provenance.hasGithubMetadata) return null
-
-  const projectItems = provenance.projectItems
-  const activeLensIndex = projectItems.length > 0 ? Math.min(selectedLensIndex, projectItems.length - 1) : 0
-  const activeProjectItem = projectItems[activeLensIndex]
-  const projectRef = formatProjectItemRef(activeProjectItem)
-  const issueRef = formatGithubIssueRef(provenance.issue)
-  const projectTitle = activeProjectItem?.projectTitle
-  const fieldEntries = getProjectFieldEntries(entity, activeProjectItem)
-  const sourceLabel = getSourceLabel(provenance.source?.system, provenance.source?.toolName, provenance.lastSyncedAt)
-  const projectTooltip = [
-    projectTitle,
-    activeProjectItem?.itemId && `item ${activeProjectItem.itemId}`,
-    activeProjectItem?.projectId && `project ${activeProjectItem.projectId}`,
-    activeProjectItem?.url,
-  ]
-    .filter(Boolean)
-    .join(" · ")
-
-  return (
-    <div
-      className={cn(
-        "rounded-md border border-indigo-500/20 bg-indigo-500/5 p-3 text-sm",
-        compact && "p-2",
-        className,
-      )}
-    >
-      <div className="flex flex-wrap items-center gap-2">
-        {activeProjectItem?.url ? (
-          <a href={activeProjectItem.url} target="_blank" rel="noreferrer" title={projectTooltip}>
-            <ProjectBadge label={projectRef ?? "Project bridge"} />
-          </a>
-        ) : (
-          <ProjectBadge label={projectRef ?? "Project bridge"} title={projectTooltip} />
-        )}
-
-        {provenance.issue &&
-          (provenance.issue.url ? (
-            <a href={provenance.issue.url} target="_blank" rel="noreferrer" title={issueRef}>
-              <Badge variant="outline" className="gap-1 text-xs">
-                <Github className="w-3 h-3" />#{provenance.issue.number}
-                <ExternalLink className="w-3 h-3" />
-              </Badge>
-            </a>
-          ) : (
-            <Badge variant="outline" className="gap-1 text-xs" title={issueRef}>
-              <Github className="w-3 h-3" />#{provenance.issue.number}
-            </Badge>
-          ))}
-
-        <SyncStatePill syncState={provenance.syncState} />
-
-        {projectItems.length > 1 && (
-          <select
-            aria-label="Active GitHub project lens"
-            value={activeLensIndex}
-            onChange={(event) => setSelectedLensIndex(Number(event.target.value))}
-            className="h-7 rounded-md border border-border bg-background px-2 text-xs text-foreground"
-          >
-            {projectItems.map((item, index) => (
-              <option key={`${formatProjectItemRef(item) ?? item.itemId ?? "project"}-${index}`} value={index}>
-                {item.projectTitle ?? formatProjectItemRef(item) ?? `Project ${index + 1}`}
-              </option>
-            ))}
-          </select>
-        )}
-      </div>
-
-      {!compact && (projectTitle || sourceLabel || fieldEntries.length > 0) && (
-        <div className="mt-2 space-y-2 text-xs text-muted-foreground">
-          {(projectTitle || sourceLabel) && (
-            <div className="flex flex-wrap items-center gap-2">
-              {projectTitle && <span className="font-medium text-foreground">{projectTitle}</span>}
-              {sourceLabel && <span>{sourceLabel}</span>}
-            </div>
-          )}
-
-          {fieldEntries.length > 0 && (
-            <div className="flex flex-wrap gap-1.5">
-              {fieldEntries.map((field) => (
-                <span
-                  key={field.key}
-                  className="inline-flex max-w-full items-center gap-1 rounded-md border border-border bg-background px-2 py-1"
-                  title={`${field.label}: ${field.value}`}
-                >
-                  <span className="font-medium text-foreground">{field.label}</span>
-                  <span className="max-w-[18rem] truncate">{field.value}</span>
-                </span>
-              ))}
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}
-
-function ProjectBadge({ label, title }: { label: string; title?: string }) {
-  return (
-    <Badge className="gap-1 bg-indigo-600 text-white hover:bg-indigo-600/90" title={title}>
-      <GitBranch className="w-3 h-3" />
-      Project: {label}
-    </Badge>
-  )
-}
-
-interface ActionStepIssueBadgeProps {
-  action: EntityRecord
-  className?: string
-}
-
-export function ActionStepIssueBadge({ action, className }: ActionStepIssueBadgeProps) {
-  const issue = getGithubIssueRef(action)
-  const syncState = getGithubSyncState(action)
-  const issueRef = formatGithubIssueRef(issue)
-
-  if (!issue && !syncState) return null
-
-  return (
-    <span className={cn("inline-flex flex-wrap items-center gap-1", className)}>
-      {issue &&
-        (issue.url ? (
-          <a href={issue.url} target="_blank" rel="noreferrer" title={issueRef}>
-            <Badge variant="outline" className="gap-1 text-xs">
-              <Github className="w-3 h-3" />#{issue.number}
-              <ExternalLink className="w-3 h-3" />
-            </Badge>
-          </a>
-        ) : (
-          <Badge variant="outline" className="gap-1 text-xs" title={issueRef}>
-            <Github className="w-3 h-3" />#{issue.number}
-          </Badge>
-        ))}
-      <SyncStatePill syncState={syncState} />
-    </span>
-  )
-}
-
-function getSourceLabel(system?: string, toolName?: string, lastSyncedAt?: string): string | undefined {
-  const parts = [system, toolName, formatDateTime(lastSyncedAt)].filter(Boolean)
-  return parts.length > 0 ? parts.join(" · ") : undefined
-}
-
-function formatDateTime(value?: string): string | undefined {
-  if (!value) return undefined
-
-  const date = new Date(value)
-  if (Number.isNaN(date.getTime())) return value
-
-  return date.toLocaleString()
-}