bps-kit 1.0.1 → 1.0.2

package/templates/vault/videodb/scripts/ws_listener.py

@@ -0,0 +1,204 @@
+#!/usr/bin/env python3
+"""
+WebSocket event listener for VideoDB with auto-reconnect and graceful shutdown.
+
+Usage:
+  python scripts/ws_listener.py [OPTIONS] [output_dir]
+
+Arguments:
+  output_dir  Directory for output files (default: /tmp or VIDEODB_EVENTS_DIR env var)
+
+Options:
+  --clear     Clear the events file before starting (use when starting a new session)
+
+Output files:
+  <output_dir>/videodb_events.jsonl  - All WebSocket events (JSONL format)
+  <output_dir>/videodb_ws_id         - WebSocket connection ID
+  <output_dir>/videodb_ws_pid        - Process ID for easy termination
+
+Output (first line, for parsing):
+  WS_ID=<connection_id>
+
+Examples:
+  python scripts/ws_listener.py &                    # Run in background
+  python scripts/ws_listener.py --clear              # Clear events and start fresh
+  python scripts/ws_listener.py --clear /tmp/mydir   # Custom dir with clear
+  kill $(cat /tmp/videodb_ws_pid)                    # Stop the listener
+"""
+import os
+import sys
+import json
+import signal
+import asyncio
+from datetime import datetime, timezone
+from pathlib import Path
+
+from dotenv import load_dotenv
+load_dotenv()
+
+import videodb
+
+# Retry config
+MAX_RETRIES = 10
+INITIAL_BACKOFF = 1  # seconds
+MAX_BACKOFF = 60     # seconds
+
+# Parse arguments
+def parse_args():
+    clear = False
+    output_dir = None
+    
+    args = sys.argv[1:]
+    for arg in args:
+        if arg == "--clear":
+            clear = True
+        elif not arg.startswith("-"):
+            output_dir = arg
+    
+    if output_dir is None:
+        output_dir = os.environ.get("VIDEODB_EVENTS_DIR", "/tmp")
+    
+    return clear, Path(output_dir)
+
+CLEAR_EVENTS, OUTPUT_DIR = parse_args()
+EVENTS_FILE = OUTPUT_DIR / "videodb_events.jsonl"
+WS_ID_FILE = OUTPUT_DIR / "videodb_ws_id"
+PID_FILE = OUTPUT_DIR / "videodb_ws_pid"
+
+# Track if this is the first connection (for clearing events)
+_first_connection = True
+
+
+def log(msg: str):
+    """Log with timestamp."""
+    ts = datetime.now().strftime("%H:%M:%S")
+    print(f"[{ts}] {msg}", flush=True)
+
+
+def append_event(event: dict):
+    """Append event to JSONL file with timestamps."""
+    event["ts"] = datetime.now(timezone.utc).isoformat()
+    event["unix_ts"] = datetime.now(timezone.utc).timestamp()
+    with open(EVENTS_FILE, "a") as f:
+        f.write(json.dumps(event) + "\n")
+
+
+def write_pid():
+    """Write PID file for easy process management."""
+    OUTPUT_DIR.mkdir(parents=True, exist_ok=True)
+    PID_FILE.write_text(str(os.getpid()))
+
+
+def cleanup_pid():
+    """Remove PID file on exit."""
+    try:
+        PID_FILE.unlink(missing_ok=True)
+    except Exception:
+        pass
+
+
+async def listen_with_retry():
+    """Main listen loop with auto-reconnect and exponential backoff."""
+    global _first_connection
+    
+    retry_count = 0
+    backoff = INITIAL_BACKOFF
+    
+    while retry_count < MAX_RETRIES:
+        try:
+            conn = videodb.connect()
+            ws_wrapper = conn.connect_websocket()
+            ws = await ws_wrapper.connect()
+            ws_id = ws.connection_id
+            
+            # Ensure output directory exists
+            OUTPUT_DIR.mkdir(parents=True, exist_ok=True)
+            
+            # Clear events file only on first connection if --clear flag is set
+            if _first_connection and CLEAR_EVENTS:
+                EVENTS_FILE.unlink(missing_ok=True)
+                log("Cleared events file")
+            _first_connection = False
+            
+            # Write ws_id to file for easy retrieval
+            WS_ID_FILE.write_text(ws_id)
+            
+            # Print ws_id (parseable format for LLM)
+            if retry_count == 0:
+                print(f"WS_ID={ws_id}", flush=True)
+            log(f"Connected (ws_id={ws_id})")
+            
+            # Reset retry state on successful connection
+            retry_count = 0
+            backoff = INITIAL_BACKOFF
+            
+            # Listen for messages
+            async for msg in ws.receive():
+                append_event(msg)
+                channel = msg.get("channel", msg.get("event", "unknown"))
+                text = msg.get("data", {}).get("text", "")
+                if text:
+                    print(f"[{channel}] {text[:80]}", flush=True)
+            
+            # If we exit the loop normally, connection was closed
+            log("Connection closed by server")
+            
+        except asyncio.CancelledError:
+            log("Shutdown requested")
+            raise
+        except Exception as e:
+            retry_count += 1
+            log(f"Connection error: {e}")
+            
+            if retry_count >= MAX_RETRIES:
+                log(f"Max retries ({MAX_RETRIES}) exceeded, exiting")
+                break
+            
+            log(f"Reconnecting in {backoff}s (attempt {retry_count}/{MAX_RETRIES})...")
+            await asyncio.sleep(backoff)
+            backoff = min(backoff * 2, MAX_BACKOFF)
+
+
+async def main_async():
+    """Async main with signal handling."""
+    loop = asyncio.get_running_loop()
+    shutdown_event = asyncio.Event()
+    
+    def handle_signal():
+        log("Received shutdown signal")
+        shutdown_event.set()
+    
+    # Register signal handlers
+    for sig in (signal.SIGINT, signal.SIGTERM):
+        loop.add_signal_handler(sig, handle_signal)
+    
+    # Run listener with cancellation support
+    listen_task = asyncio.create_task(listen_with_retry())
+    shutdown_task = asyncio.create_task(shutdown_event.wait())
+    
+    done, pending = await asyncio.wait(
+        [listen_task, shutdown_task],
+        return_when=asyncio.FIRST_COMPLETED,
+    )
+    
+    # Cancel remaining tasks
+    for task in pending:
+        task.cancel()
+        try:
+            await task
+        except asyncio.CancelledError:
+            pass
+    
+    log("Shutdown complete")
+
+
+def main():
+    write_pid()
+    try:
+        asyncio.run(main_async())
+    finally:
+        cleanup_pid()
+
+
+if __name__ == "__main__":
+    main()

package/templates/vault/web-artifacts-builder/scripts/bundle-artifact.sh

@@ -0,0 +1,54 @@
+#!/bin/bash
+set -e
+
+echo "📦 Bundling React app to single HTML artifact..."
+
+# Check if we're in a project directory
+if [ ! -f "package.json" ]; then
+  echo "❌ Error: No package.json found. Run this script from your project root."
+  exit 1
+fi
+
+# Check if index.html exists
+if [ ! -f "index.html" ]; then
+  echo "❌ Error: No index.html found in project root."
+  echo "   This script requires an index.html entry point."
+  exit 1
+fi
+
+# Install bundling dependencies
+echo "📦 Installing bundling dependencies..."
+pnpm add -D parcel @parcel/config-default parcel-resolver-tspaths html-inline
+
+# Create Parcel config with tspaths resolver
+if [ ! -f ".parcelrc" ]; then
+  echo "🔧 Creating Parcel configuration with path alias support..."
+  cat > .parcelrc << 'EOF'
+{
+  "extends": "@parcel/config-default",
+  "resolvers": ["parcel-resolver-tspaths", "..."]
+}
+EOF
+fi
+
+# Clean previous build
+echo "🧹 Cleaning previous build..."
+rm -rf dist bundle.html
+
+# Build with Parcel
+echo "🔨 Building with Parcel..."
+pnpm exec parcel build index.html --dist-dir dist --no-source-maps
+
+# Inline everything into single HTML
+echo "🎯 Inlining all assets into single HTML file..."
+pnpm exec html-inline dist/index.html > bundle.html
+
+# Get file size
+FILE_SIZE=$(du -h bundle.html | cut -f1)
+
+echo ""
+echo "✅ Bundle complete!"
+echo "📄 Output: bundle.html ($FILE_SIZE)"
+echo ""
+echo "You can now use this single HTML file as an artifact in Claude conversations."
+echo "To test locally: open bundle.html in your browser"

package/templates/vault/web-artifacts-builder/scripts/init-artifact.sh

@@ -0,0 +1,322 @@
+#!/bin/bash
+
+# Exit on error
+set -e
+
+# Detect Node version
+NODE_VERSION=$(node -v | cut -d'v' -f2 | cut -d'.' -f1)
+
+echo "🔍 Detected Node.js version: $NODE_VERSION"
+
+if [ "$NODE_VERSION" -lt 18 ]; then
+  echo "❌ Error: Node.js 18 or higher is required"
+  echo "   Current version: $(node -v)"
+  exit 1
+fi
+
+# Set Vite version based on Node version
+if [ "$NODE_VERSION" -ge 20 ]; then
+  VITE_VERSION="latest"
+  echo "✅ Using Vite latest (Node 20+)"
+else
+  VITE_VERSION="5.4.11"
+  echo "✅ Using Vite $VITE_VERSION (Node 18 compatible)"
+fi
+
+# Detect OS and set sed syntax
+if [[ "$OSTYPE" == "darwin"* ]]; then
+  SED_INPLACE="sed -i ''"
+else
+  SED_INPLACE="sed -i"
+fi
+
+# Check if pnpm is installed
+if ! command -v pnpm &> /dev/null; then
+  echo "📦 pnpm not found. Installing pnpm..."
+  npm install -g pnpm
+fi
+
+# Check if project name is provided
+if [ -z "$1" ]; then
+  echo "❌ Usage: ./create-react-shadcn-complete.sh <project-name>"
+  exit 1
+fi
+
+PROJECT_NAME="$1"
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+COMPONENTS_TARBALL="$SCRIPT_DIR/shadcn-components.tar.gz"
+
+# Check if components tarball exists
+if [ ! -f "$COMPONENTS_TARBALL" ]; then
+  echo "❌ Error: shadcn-components.tar.gz not found in script directory"
+  echo "   Expected location: $COMPONENTS_TARBALL"
+  exit 1
+fi
+
+echo "🚀 Creating new React + Vite project: $PROJECT_NAME"
+
+# Create new Vite project (always use latest create-vite, pin vite version later)
+pnpm create vite "$PROJECT_NAME" --template react-ts
+
+# Navigate into project directory
+cd "$PROJECT_NAME"
+
+echo "🧹 Cleaning up Vite template..."
+$SED_INPLACE '/<link rel="icon".*vite\.svg/d' index.html
+$SED_INPLACE 's/<title>.*<\/title>/<title>'"$PROJECT_NAME"'<\/title>/' index.html
+
+echo "📦 Installing base dependencies..."
+pnpm install
+
+# Pin Vite version for Node 18
+if [ "$NODE_VERSION" -lt 20 ]; then
+  echo "📌 Pinning Vite to $VITE_VERSION for Node 18 compatibility..."
+  pnpm add -D vite@$VITE_VERSION
+fi
+
+echo "📦 Installing Tailwind CSS and dependencies..."
+pnpm install -D tailwindcss@3.4.1 postcss autoprefixer @types/node tailwindcss-animate
+pnpm install class-variance-authority clsx tailwind-merge lucide-react next-themes
+
+echo "⚙️  Creating Tailwind and PostCSS configuration..."
+cat > postcss.config.js << 'EOF'
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
+EOF
+
+echo "📝 Configuring Tailwind with shadcn theme..."
+cat > tailwind.config.js << 'EOF'
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+}
+EOF
+
+# Add Tailwind directives and CSS variables to index.css
+echo "🎨 Adding Tailwind directives and CSS variables..."
+cat > src/index.css << 'EOF'
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+EOF
+
+# Add path aliases to tsconfig.json
+echo "🔧 Adding path aliases to tsconfig.json..."
+node -e "
+const fs = require('fs');
+const config = JSON.parse(fs.readFileSync('tsconfig.json', 'utf8'));
+config.compilerOptions = config.compilerOptions || {};
+config.compilerOptions.baseUrl = '.';
+config.compilerOptions.paths = { '@/*': ['./src/*'] };
+fs.writeFileSync('tsconfig.json', JSON.stringify(config, null, 2));
+"
+
+# Add path aliases to tsconfig.app.json
+echo "🔧 Adding path aliases to tsconfig.app.json..."
+node -e "
+const fs = require('fs');
+const path = 'tsconfig.app.json';
+const content = fs.readFileSync(path, 'utf8');
+// Remove comments manually
+const lines = content.split('\n').filter(line => !line.trim().startsWith('//'));
+const jsonContent = lines.join('\n');
+const config = JSON.parse(jsonContent.replace(/\/\*[\s\S]*?\*\//g, '').replace(/,(\s*[}\]])/g, '\$1'));
+config.compilerOptions = config.compilerOptions || {};
+config.compilerOptions.baseUrl = '.';
+config.compilerOptions.paths = { '@/*': ['./src/*'] };
+fs.writeFileSync(path, JSON.stringify(config, null, 2));
+"
+
+# Update vite.config.ts
+echo "⚙️  Updating Vite configuration..."
+cat > vite.config.ts << 'EOF'
+import path from "path";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+});
+EOF
+
+# Install all shadcn/ui dependencies
+echo "📦 Installing shadcn/ui dependencies..."
+pnpm install @radix-ui/react-accordion @radix-ui/react-aspect-ratio @radix-ui/react-avatar @radix-ui/react-checkbox @radix-ui/react-collapsible @radix-ui/react-context-menu @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-hover-card @radix-ui/react-label @radix-ui/react-menubar @radix-ui/react-navigation-menu @radix-ui/react-popover @radix-ui/react-progress @radix-ui/react-radio-group @radix-ui/react-scroll-area @radix-ui/react-select @radix-ui/react-separator @radix-ui/react-slider @radix-ui/react-slot @radix-ui/react-switch @radix-ui/react-tabs @radix-ui/react-toast @radix-ui/react-toggle @radix-ui/react-toggle-group @radix-ui/react-tooltip
+pnpm install sonner cmdk vaul embla-carousel-react react-day-picker react-resizable-panels date-fns react-hook-form @hookform/resolvers zod
+
+# Extract shadcn components from tarball
+echo "📦 Extracting shadcn/ui components..."
+tar -xzf "$COMPONENTS_TARBALL" -C src/
+
+# Create components.json for reference
+echo "📝 Creating components.json config..."
+cat > components.json << 'EOF'
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}
+EOF
+
+echo "✅ Setup complete! You can now use Tailwind CSS and shadcn/ui in your project."
+echo ""
+echo "📦 Included components (40+ total):"
+echo "  - accordion, alert, aspect-ratio, avatar, badge, breadcrumb"
+echo "  - button, calendar, card, carousel, checkbox, collapsible"
+echo "  - command, context-menu, dialog, drawer, dropdown-menu"
+echo "  - form, hover-card, input, label, menubar, navigation-menu"
+echo "  - popover, progress, radio-group, resizable, scroll-area"
+echo "  - select, separator, sheet, skeleton, slider, sonner"
+echo "  - switch, table, tabs, textarea, toast, toggle, toggle-group, tooltip"
+echo ""
+echo "To start developing:"
+echo "  cd $PROJECT_NAME"
+echo "  pnpm dev"
+echo ""
+echo "📚 Import components like:"
+echo "  import { Button } from '@/components/ui/button'"
+echo "  import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'"
+echo "  import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog'"

package/templates/vault/webapp-testing/scripts/with_server.py

@@ -0,0 +1,106 @@
+#!/usr/bin/env python3
+"""
+Start one or more servers, wait for them to be ready, run a command, then clean up.
+
+Usage:
+    # Single server
+    python scripts/with_server.py --server "npm run dev" --port 5173 -- python automation.py
+    python scripts/with_server.py --server "npm start" --port 3000 -- python test.py
+
+    # Multiple servers
+    python scripts/with_server.py \
+      --server "cd backend && python server.py" --port 3000 \
+      --server "cd frontend && npm run dev" --port 5173 \
+      -- python test.py
+"""
+
+import subprocess
+import socket
+import time
+import sys
+import argparse
+
+def is_server_ready(port, timeout=30):
+    """Wait for server to be ready by polling the port."""
+    start_time = time.time()
+    while time.time() - start_time < timeout:
+        try:
+            with socket.create_connection(('localhost', port), timeout=1):
+                return True
+        except (socket.error, ConnectionRefusedError):
+            time.sleep(0.5)
+    return False
+
+
+def main():
+    parser = argparse.ArgumentParser(description='Run command with one or more servers')
+    parser.add_argument('--server', action='append', dest='servers', required=True, help='Server command (can be repeated)')
+    parser.add_argument('--port', action='append', dest='ports', type=int, required=True, help='Port for each server (must match --server count)')
+    parser.add_argument('--timeout', type=int, default=30, help='Timeout in seconds per server (default: 30)')
+    parser.add_argument('command', nargs=argparse.REMAINDER, help='Command to run after server(s) ready')
+
+    args = parser.parse_args()
+
+    # Remove the '--' separator if present
+    if args.command and args.command[0] == '--':
+        args.command = args.command[1:]
+
+    if not args.command:
+        print("Error: No command specified to run")
+        sys.exit(1)
+
+    # Parse server configurations
+    if len(args.servers) != len(args.ports):
+        print("Error: Number of --server and --port arguments must match")
+        sys.exit(1)
+
+    servers = []
+    for cmd, port in zip(args.servers, args.ports):
+        servers.append({'cmd': cmd, 'port': port})
+
+    server_processes = []
+
+    try:
+        # Start all servers
+        for i, server in enumerate(servers):
+            print(f"Starting server {i+1}/{len(servers)}: {server['cmd']}")
+
+            # Use shell=True to support commands with cd and &&
+            process = subprocess.Popen(
+                server['cmd'],
+                shell=True,
+                stdout=subprocess.PIPE,
+                stderr=subprocess.PIPE
+            )
+            server_processes.append(process)
+
+            # Wait for this server to be ready
+            print(f"Waiting for server on port {server['port']}...")
+            if not is_server_ready(server['port'], timeout=args.timeout):
+                raise RuntimeError(f"Server failed to start on port {server['port']} within {args.timeout}s")
+
+            print(f"Server ready on port {server['port']}")
+
+        print(f"\nAll {len(servers)} server(s) ready")
+
+        # Run the command
+        print(f"Running: {' '.join(args.command)}\n")
+        result = subprocess.run(args.command)
+        sys.exit(result.returncode)
+
+    finally:
+        # Clean up all servers
+        print(f"\nStopping {len(server_processes)} server(s)...")
+        for i, process in enumerate(server_processes):
+            try:
+                process.terminate()
+                process.wait(timeout=5)
+            except subprocess.TimeoutExpired:
+                process.kill()
+                process.wait()
+            print(f"Server {i+1} stopped")
+        print("All servers stopped")
+
+
+if __name__ == '__main__':
+    main()