coaia-visualizer 1.0.0

package/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn('leading-none font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn('px-6', className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

package/components/ui/scroll-area.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import * as React from 'react'
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
+
+import { cn } from '@/lib/utils'
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn('relative', className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = 'vertical',
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        'flex touch-none p-px transition-colors select-none',
+        orientation === 'vertical' &&
+          'h-full w-2.5 border-l border-l-transparent',
+        orientation === 'horizontal' &&
+          'h-2.5 flex-col border-t border-t-transparent',
+        className,
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }

package/components/ui/separator.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+import * as React from 'react'
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+
+import { cn } from '@/lib/utils'
+
+function Separator({
+  className,
+  orientation = 'horizontal',
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

package/components/ui/tabs.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import * as React from 'react'
+import * as TabsPrimitive from '@radix-ui/react-tabs'
+
+import { cn } from '@/lib/utils'
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn('flex flex-col gap-2', className)}
+      {...props}
+    />
+  )
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn('flex-1 outline-none', className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

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/dist/cli.js

@@ -0,0 +1,144 @@
+#!/usr/bin/env node
+/**
+ * COAIA Visualizer CLI - Launch visualizer with local memory file
+ *
+ * Launches Next.js dev server with pre-loaded memory file
+ * Works analogously to coaia-narrative/cli.ts
+ */
+import { spawn } from 'child_process';
+import { promises as fs } from 'fs';
+import path from 'path';
+import minimist from 'minimist';
+import * as dotenv from 'dotenv';
+import { fileURLToPath } from 'url';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+function loadConfig(args) {
+    let config = {
+        memoryPath: path.join(process.cwd(), 'memory.jsonl'),
+        port: 3000,
+        noOpen: false
+    };
+    // Load .env files
+    const localEnvPath = path.join(process.cwd(), '.env');
+    try {
+        dotenv.config({ path: localEnvPath });
+    }
+    catch (error) {
+        // .env doesn't exist, that's okay
+    }
+    // Custom env file
+    if (args.env) {
+        dotenv.config({ path: args.env, override: true });
+    }
+    // Environment variables
+    if (process.env.COAIAN_MF) {
+        config.memoryPath = process.env.COAIAN_MF;
+    }
+    if (process.env.COAIAV_PORT) {
+        config.port = parseInt(process.env.COAIAV_PORT, 10);
+    }
+    // Command-line flags override everything
+    if (args['memory-path'] || args['M']) {
+        config.memoryPath = args['memory-path'] || args['M'];
+    }
+    if (args['port'] || args['p']) {
+        config.port = args['port'] || args['p'];
+    }
+    if (args['no-open']) {
+        config.noOpen = true;
+    }
+    return config;
+}
+async function main() {
+    const args = minimist(process.argv.slice(2));
+    if (args.help || args.h) {
+        console.log(`
+🎨 COAIA Visualizer - Interactive Chart Viewer
+
+DESCRIPTION:
+   Web-based visualizer for structural tension charts from coaia-narrative.
+   Launches a local web server to interactively explore your charts.
+
+USAGE:
+   coaia-visualizer [OPTIONS]
+   npx coaia-visualizer [OPTIONS]
+
+OPTIONS:
+   --memory-path PATH, -M PATH    Path to memory.jsonl file (default: ./memory.jsonl)
+   --port PORT, -p PORT           Server port (default: 3000)
+   --no-open                      Don't auto-open browser
+   --help, -h                     Show this help message
+
+ENVIRONMENT VARIABLES:
+   COAIAN_MF                      Default memory file path
+   COAIAV_PORT                    Default server port
+
+EXAMPLES:
+   # Launch with default memory.jsonl
+   coaia-visualizer
+
+   # Launch with specific memory file
+   coaia-visualizer --memory-path ./my-charts.jsonl
+
+   # Launch on different port
+   coaia-visualizer --port 3001
+
+   # Use environment variable
+   COAIAN_MF=./charts.jsonl coaia-visualizer
+`);
+        process.exit(0);
+    }
+    const config = loadConfig(args);
+    // Verify memory file exists
+    try {
+        await fs.access(config.memoryPath);
+    }
+    catch (error) {
+        console.error(`❌ Memory file not found: ${config.memoryPath}`);
+        console.error(`   Create a memory file or specify a different path with --memory-path`);
+        process.exit(1);
+    }
+    console.log(`🎨 COAIA Visualizer`);
+    console.log(`📁 Memory file: ${config.memoryPath}`);
+    console.log(`🌐 Port: ${config.port}`);
+    console.log();
+    // Set environment variables for Next.js
+    process.env.COAIAV_MEMORY_PATH = path.resolve(config.memoryPath);
+    process.env.PORT = config.port.toString();
+    // Navigate to visualizer root
+    const visualizerRoot = path.resolve(__dirname, '..');
+    // Launch Next.js dev server with explicit port flag
+    const nextProcess = spawn('npm', ['run', 'dev', '--', '-p', config.port.toString()], {
+        cwd: visualizerRoot,
+        stdio: 'inherit',
+        env: {
+            ...process.env,
+            COAIAV_MEMORY_PATH: path.resolve(config.memoryPath),
+            PORT: config.port.toString()
+        }
+    });
+    // Open browser if not disabled
+    if (!config.noOpen) {
+        setTimeout(() => {
+            const url = `http://localhost:${config.port}`;
+            console.log(`\n🚀 Opening browser: ${url}\n`);
+            const openCmd = process.platform === 'darwin' ? 'open' :
+                process.platform === 'win32' ? 'start' : 'xdg-open';
+            spawn(openCmd, [url], { detached: true, stdio: 'ignore' }).unref();
+        }, 3000);
+    }
+    // Handle shutdown
+    process.on('SIGINT', () => {
+        console.log('\n👋 Shutting down visualizer...');
+        nextProcess.kill();
+        process.exit(0);
+    });
+    nextProcess.on('exit', (code) => {
+        process.exit(code || 0);
+    });
+}
+main().catch((error) => {
+    console.error('❌ Fatal error:', error);
+    process.exit(1);
+});

package/feat-2-webui-local-editing/IMPLEMENTATION.md

@@ -0,0 +1,245 @@
+# Implementation Summary - COAIA Visualizer Local Editing
+
+## Changes Made
+
+### New Files Created
+
+1. **`cli.ts`** - CLI launcher
+   - Parses command-line arguments (--memory-path, --port, --no-open)
+   - Loads configuration from env vars and .env files
+   - Launches Next.js dev server with environment variables
+   - Auto-opens browser unless --no-open specified
+
+2. **`app/api/jsonl/route.ts`** - API endpoints
+   - GET endpoint: reads memory file from filesystem
+   - POST endpoint: writes updated data with automatic backup
+   - Uses `COAIAV_MEMORY_PATH` environment variable
+
+3. **`hooks/use-toast.ts`** - Toast notifications
+   - Wrapper around sonner for consistent toast API
+   - Used for success/error feedback
+
+### Modified Files
+
+1. **`app/page.tsx`** - Enhanced main UI
+   - Auto-loads file on mount if launched via CLI
+   - Adds "Save Changes" button for local persistence
+   - Adds "Reload" button to refresh from file
+   - Shows file path when auto-loaded
+   - Toast notifications for user feedback
+
+2. **`app/layout.tsx`** - Added Toaster
+   - Imports and renders Sonner Toaster component
+   - Enables toast notifications throughout app
+
+3. **`package.json`** - Updated configuration
+   - Changed name to `@coaia/visualizer`
+   - Added `bin` entry for CLI
+   - Added dependencies: minimist, dotenv, @types/minimist
+   - Added `build:cli` and `prepare` scripts
+   - Set `type: "module"` for ES modules
+
+### Dependencies Added
+
+- `minimist` - Command-line argument parsing
+- `dotenv` - Environment variable loading
+- `@types/minimist` - TypeScript types
+
+### Build Process
+
+```bash
+npm run build:cli    # Compiles cli.ts to dist/cli.js
+npm run prepare      # Runs automatically on npm install
+```
+
+## Architecture
+
+### Data Flow
+
+```
+┌──────────────────┐
+│  CLI Launcher    │  node dist/cli.js --memory-path file.jsonl
+│  (cli.ts)        │  Sets COAIAV_MEMORY_PATH env var
+└────────┬─────────┘
+         │
+         ▼
+┌──────────────────┐
+│  Next.js Server  │  Reads env var, starts on specified port
+│                  │
+└────────┬─────────┘
+         │
+         ▼
+┌──────────────────┐
+│  API Route       │  GET/POST /api/jsonl
+│  (route.ts)      │  Reads/writes filesystem using env var
+└────────┬─────────┘
+         │
+         ▼
+┌──────────────────┐
+│  React UI        │  Auto-loads on mount via fetch()
+│  (page.tsx)      │  Save/Reload buttons call API
+└──────────────────┘
+```
+
+### Configuration Priority
+
+CLI follows same pattern as coaia-narrative/cli.ts:
+
+1. Command-line flags (highest)
+2. Custom env file (--env flag)
+3. .env file in cwd
+4. Environment variables
+5. Defaults (lowest)
+
+## Usage Examples
+
+### Basic Launch
+```bash
+node dist/cli.js --memory-path ./charts.jsonl
+# Opens http://localhost:3000 automatically
+```
+
+### Custom Port
+```bash
+node dist/cli.js --memory-path ./charts.jsonl --port 3001
+```
+
+### Environment Variables
+```bash
+export COAIAN_MF=./my-charts.jsonl
+export COAIAV_PORT=3001
+node dist/cli.js
+```
+
+### No Auto-Open
+```bash
+node dist/cli.js --memory-path ./charts.jsonl --no-open
+```
+
+## API Endpoints
+
+### GET /api/jsonl
+Returns file content from `COAIAV_MEMORY_PATH`:
+```json
+{
+  "content": "...",
+  "filename": "memory.jsonl", 
+  "path": "/absolute/path/to/memory.jsonl"
+}
+```
+
+### POST /api/jsonl
+Saves content to file:
+```json
+Request: { "content": "..." }
+Response: { 
+  "success": true,
+  "backup": "/path/to/backup-123456.jsonl",
+  "message": "Memory file updated successfully"
+}
+```
+
+## Testing
+
+### Integration Tests
+```bash
+cd coaia-visualizer
+bash feat-2-webui-local-editing/test-integration.sh
+```
+
+Tests:
+- ✓ CLI help output
+- ✓ CLI builds successfully  
+- ✓ CLI is executable
+- ✓ Test file exists
+- ✓ Server starts correctly
+- ✓ API endpoint works
+- ✓ Homepage loads
+
+### Demo Script
+```bash
+bash feat-2-webui-local-editing/demo.sh
+```
+
+Interactive demo that:
+- Starts server with test file
+- Tests all endpoints
+- Displays data stats
+- Leaves server running for manual testing
+
+## Key Features
+
+### 1. Auto-Loading
+- If `COAIAV_MEMORY_PATH` is set, file auto-loads on page mount
+- Shows filename in header
+- Enables save/reload functionality
+
+### 2. Backup System
+- Every save creates timestamped backup
+- Format: `{filename}.backup-{timestamp}`
+- Prevents accidental data loss
+
+### 3. User Feedback
+- Toast notifications for all operations
+- Loading states on buttons
+- Error messages with details
+
+### 4. Flexible Configuration
+- Works like coaia-narrative/cli.ts
+- Same flags and env vars
+- Consistent user experience
+
+## Files in feat-2-webui-local-editing/
+
+```
+feat-2-webui-local-editing/
+├── cli.ts                    # Original CLI source
+├── api-route-jsonl.ts        # Original API route source
+├── updated-page.tsx          # Original page.tsx source
+├── package.json              # Reference package.json with changes
+├── test-integration.sh       # Automated test script
+├── demo.sh                   # Interactive demo script
+└── INTEGRATION.md            # This documentation
+```
+
+## Integration with coaia-narrative
+
+### Shared Components
+- Both use `--memory-path` / `-M` flag
+- Both use `COAIAN_MF` environment variable
+- Both read/write same JSONL format
+- Compatible data structures
+
+### Workflow
+1. LLM creates charts via coaia-narrative MCP
+2. Human views with coaia-narrative CLI
+3. Human visualizes with coaia-visualizer
+4. Edit in web UI and save
+5. Verify with coaia-narrative CLI
+
+## Next Steps
+
+To deploy as npm package:
+```bash
+npm login
+npm publish --access public
+```
+
+To install globally:
+```bash
+npm install -g @coaia/visualizer
+coaia-visualizer --memory-path ./charts.jsonl
+```
+
+## Complete Implementation ✓
+
+All requirements met:
+- ✓ CLI launcher with --memory-path flag
+- ✓ Environment variable support
+- ✓ API routes for file read/write
+- ✓ Auto-loading in web UI
+- ✓ Save/reload functionality
+- ✓ Backup system
+- ✓ Works with coaia-narrative charts
+- ✓ Analogous to coaia-narrative/cli.ts
+- ✓ Tested and working