sparkecoder 0.1.16 → 0.1.18

package/web/.next/standalone/web/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

package/web/.next/standalone/web/runtime-config.json

@@ -0,0 +1,3 @@
+{
+  "apiBaseUrl": "http://127.0.0.1:3144"
+}

package/web/.next/standalone/web/src/app/(main)/layout.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { SidebarProvider, SidebarInset } from '@/components/ui/sidebar';
+import { SessionsSidebar } from '@/components/sessions-sidebar';
+
+export default function MainLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <SidebarProvider defaultOpen={true}>
+      <SessionsSidebar />
+      <SidebarInset className="h-screen flex flex-col bg-background">
+        {/* Main content */}
+        <div className="flex-1 overflow-hidden">
+          {children}
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}

package/web/.next/standalone/web/src/app/(main)/page.tsx

@@ -0,0 +1,230 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import Image from 'next/image';
+import { Plus, Loader2, Key, ExternalLink, AlertCircle } from 'lucide-react';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { createSession, setApiKey } from '@/lib/api';
+import { getConfig, type AppConfig } from '@/lib/config';
+import { useSessions, mutateSessions } from '@/hooks/use-sessions';
+
+export default function Home() {
+  const router = useRouter();
+  const { sessions } = useSessions();
+  const [creating, setCreating] = useState(false);
+  const [config, setConfig] = useState<AppConfig | null>(null);
+  const [apiKeyInput, setApiKeyInput] = useState('');
+  const [savingKey, setSavingKey] = useState(false);
+  const [keyError, setKeyError] = useState<string | null>(null);
+
+  // Load config for default model
+  useEffect(() => {
+    getConfig().then(setConfig);
+  }, []);
+
+  // Handle saving API key
+  const handleSaveApiKey = async () => {
+    if (!apiKeyInput.trim() || savingKey) return;
+    setSavingKey(true);
+    setKeyError(null);
+    
+    try {
+      const result = await setApiKey('ai-gateway', apiKeyInput.trim());
+      if (result.success) {
+        // Refresh config to update apiKeyConfigured status
+        const newConfig = await getConfig();
+        setConfig(newConfig);
+        setApiKeyInput('');
+      } else {
+        setKeyError('Failed to save API key. Please try again.');
+      }
+    } catch (err) {
+      setKeyError('Failed to save API key. Please try again.');
+    } finally {
+      setSavingKey(false);
+    }
+  };
+
+  // Handle creating a new session
+  const handleCreateSession = async () => {
+    if (creating) return;
+    setCreating(true);
+    try {
+      const session = await createSession({
+        name: `Session ${sessions.length + 1}`,
+        model: config?.defaultModel || 'anthropic/claude-opus-4-5',
+        toolApprovals: config?.defaultToolApprovals || {},
+      });
+      mutateSessions();
+      router.push(`/session/${session.id}`);
+    } catch (err) {
+      console.error('Failed to create session:', err);
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  // Keyboard shortcut: Cmd+T or Ctrl+T to create session
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 't') {
+        e.preventDefault();
+        handleCreateSession();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [creating, sessions.length, config]);
+
+  // Show API key setup if not configured
+  if (config && !config.apiKeyConfigured) {
+    return (
+      <div className="flex items-center justify-center h-full bg-gradient-to-b from-background to-muted/20">
+        <div className="text-center max-w-lg mx-auto p-8">
+          {/* Mascot */}
+          <div className="flex justify-center mb-8">
+            <div className="relative size-28 rounded-2xl overflow-hidden shadow-xl ring-1 ring-white/10">
+              <Image
+                src="/sparke-coder.png"
+                alt="Sparke - AI Coding Assistant"
+                fill
+                className="object-cover"
+                priority
+              />
+            </div>
+          </div>
+
+          {/* Title */}
+          <h1 className="text-3xl font-bold mb-3 text-primary">
+            Welcome to SparkECoder
+          </h1>
+          
+          {/* API Key Setup */}
+          <div className="bg-muted/50 rounded-lg p-6 mb-6 text-left">
+            <div className="flex items-center gap-2 mb-3">
+              <Key className="size-5 text-amber-500" />
+              <h2 className="font-semibold">API Key Required</h2>
+            </div>
+            
+            <p className="text-sm text-muted-foreground mb-4">
+              SparkECoder uses the Vercel AI Gateway. Enter your API key to get started.
+            </p>
+            
+            <div className="flex gap-2 mb-3">
+              <Input
+                type="password"
+                placeholder="Enter your AI Gateway API key"
+                value={apiKeyInput}
+                onChange={(e) => setApiKeyInput(e.target.value)}
+                onKeyDown={(e) => e.key === 'Enter' && handleSaveApiKey()}
+                className="flex-1"
+              />
+              <Button
+                onClick={handleSaveApiKey}
+                disabled={!apiKeyInput.trim() || savingKey}
+              >
+                {savingKey ? (
+                  <Loader2 className="size-4 animate-spin" />
+                ) : (
+                  'Save'
+                )}
+              </Button>
+            </div>
+            
+            {keyError && (
+              <div className="flex items-center gap-2 text-sm text-destructive mb-3">
+                <AlertCircle className="size-4" />
+                {keyError}
+              </div>
+            )}
+            
+            <a
+              href="https://vercel.com/d?to=%2F%5Bteam%5D%2F%7E%2Fai%2Fapi-keys"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1 text-sm text-primary hover:underline"
+            >
+              Get an API key from Vercel
+              <ExternalLink className="size-3" />
+            </a>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center justify-center h-full bg-gradient-to-b from-background to-muted/20">
+      <div className="text-center max-w-lg mx-auto p-8">
+        {/* Mascot */}
+        <div className="flex justify-center mb-8">
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <div className="relative group cursor-pointer">
+                  {/* Glow effect */}
+                  <div className="absolute inset-0 rounded-3xl blur-2xl opacity-40 group-hover:opacity-60 transition-opacity bg-primary/30" />
+                  
+                  {/* Mascot container */}
+                  <div className="relative size-28 rounded-2xl overflow-hidden shadow-xl ring-1 ring-white/10 hover-lift">
+                    <Image
+                      src="/sparke-coder.png"
+                      alt="Sparke - AI Coding Assistant"
+                      fill
+                      className="object-cover sparke-idle"
+                      priority
+                    />
+                  </div>
+                </div>
+              </TooltipTrigger>
+              <TooltipContent>Meet Sparke, your coding companion!</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+
+        {/* Title */}
+        <h1 className="text-3xl font-bold mb-3 text-primary">
+          Welcome to SparkECoder
+        </h1>
+        
+        <p className="text-muted-foreground mb-8 leading-relaxed">
+          Your AI-powered coding assistant. Start a new session to begin building amazing things.
+        </p>
+
+        {/* Start Session Button */}
+        <Button
+          size="lg"
+          onClick={handleCreateSession}
+          disabled={creating}
+          className="gap-2 px-8"
+        >
+          {creating ? (
+            <>
+              <Loader2 className="size-4 animate-spin" />
+              Creating...
+            </>
+          ) : (
+            <>
+              <Plus className="size-4" />
+              Start a Session
+            </>
+          )}
+        </Button>
+
+        {/* Keyboard shortcut hint */}
+        <p className="mt-8 text-xs text-muted-foreground/70">
+          Press <kbd className="px-1.5 py-0.5 bg-muted rounded text-[10px] font-mono">⌘</kbd> + <kbd className="px-1.5 py-0.5 bg-muted rounded text-[10px] font-mono">T</kbd> to create a new session
+        </p>
+      </div>
+    </div>
+  );
+}

package/web/.next/standalone/web/src/app/(main)/session/[id]/page.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { use, useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { ChatInterface } from '@/components/chat-interface';
+import { getSession, type Session } from '@/lib/api';
+import { Loader2 } from 'lucide-react';
+
+export default function SessionPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = use(params);
+  const router = useRouter();
+  const [session, setSession] = useState<Session | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function loadSession() {
+      try {
+        const data = await getSession(id);
+        if (!data) {
+          setError('Session not found');
+          return;
+        }
+        setSession(data);
+      } catch (err) {
+        console.error('Failed to load session:', err);
+        setError('Failed to load session');
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadSession();
+  }, [id]);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <Loader2 className="size-8 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (error || !session) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-center">
+          <p className="text-muted-foreground mb-4">{error || 'Session not found'}</p>
+          <button
+            onClick={() => router.push('/')}
+            className="text-primary hover:underline"
+          >
+            Go back home
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return <ChatInterface session={session} />;
+}

package/web/.next/standalone/web/src/app/api/config/route.ts

@@ -0,0 +1,106 @@
+import { NextResponse } from 'next/server';
+import * as fs from 'fs';
+import * as path from 'path';
+
+/**
+ * Runtime configuration endpoint.
+ * 
+ * Reads the API base URL from runtime-config.json written by the CLI.
+ * This avoids NEXT_PUBLIC_* env var build-time issues.
+ */
+
+// Available models for the UI
+const AVAILABLE_MODELS = [
+  { id: 'anthropic/claude-opus-4-5', name: 'Claude Opus 4.5', provider: 'Anthropic' },
+  { id: 'anthropic/claude-sonnet-4', name: 'Claude Sonnet 4', provider: 'Anthropic' },
+  { id: 'anthropic/claude-haiku-4-5', name: 'Claude Haiku 4.5', provider: 'Anthropic' },
+  { id: 'openai/gpt-5-2-codex', name: 'GPT-5.2 Codex', provider: 'OpenAI' },
+  { id: 'openai/gpt-4o', name: 'GPT-4o', provider: 'OpenAI' },
+  { id: 'google/gemini-3-pro-preview', name: 'Gemini 3 Pro Preview', provider: 'Google' },
+  { id: 'google/gemini-3-flash', name: 'Gemini 3 Flash', provider: 'Google' },
+  { id: 'xai/grok-code-fast-1', name: 'Grok Code Fast', provider: 'xAI' },
+];
+
+// Available tools
+const AVAILABLE_TOOLS = [
+  { id: 'bash', name: 'Bash', description: 'Execute shell commands', dangerous: true },
+  { id: 'write_file', name: 'Write File', description: 'Create or edit files', dangerous: true },
+  { id: 'read_file', name: 'Read File', description: 'Read file contents', dangerous: false },
+  { id: 'todo', name: 'Todo', description: 'Manage task lists', dangerous: false },
+  { id: 'load_skill', name: 'Load Skill', description: 'Load skills into context', dangerous: false },
+];
+
+const DEFAULT_API_BASE = 'http://localhost:3141';
+
+/**
+ * Read the API base URL from runtime-config.json
+ * The CLI writes this file when starting the web server
+ */
+function getApiBaseUrl(): string {
+  const cwd = process.cwd();
+  const possiblePaths = [
+    // Development: web directory root
+    path.join(cwd, 'runtime-config.json'),
+    // Standalone: various relative locations
+    path.join(cwd, '..', 'runtime-config.json'),
+    path.join(cwd, '..', '..', 'runtime-config.json'),
+    path.join(cwd, '..', '..', '..', 'runtime-config.json'),
+  ];
+
+  for (const configPath of possiblePaths) {
+    try {
+      if (fs.existsSync(configPath)) {
+        const content = fs.readFileSync(configPath, 'utf-8');
+        const config = JSON.parse(content);
+        if (config.apiBaseUrl) {
+          return config.apiBaseUrl;
+        }
+      }
+    } catch {
+      // Ignore errors, try next path
+    }
+  }
+
+  // No env var fallback - always use config file or default
+  return DEFAULT_API_BASE;
+}
+
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+  const apiBaseUrl = getApiBaseUrl();
+  
+  try {
+    // Add timeout to prevent hanging if backend is unreachable
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), 3000);
+    
+    const healthRes = await fetch(`${apiBaseUrl}/health`, {
+      cache: 'no-store',
+      signal: controller.signal,
+    });
+    clearTimeout(timeout);
+    
+    const healthData = await healthRes.json();
+
+    return NextResponse.json({
+      availableModels: AVAILABLE_MODELS,
+      availableTools: AVAILABLE_TOOLS,
+      defaultModel: healthData.config?.defaultModel || 'anthropic/claude-opus-4-5',
+      defaultToolApprovals: healthData.config?.defaultToolApprovals || {},
+      serverConnected: true,
+      apiKeyConfigured: healthData.apiKeyConfigured ?? false,
+      apiBaseUrl,
+    });
+  } catch {
+    return NextResponse.json({
+      availableModels: AVAILABLE_MODELS,
+      availableTools: AVAILABLE_TOOLS,
+      defaultModel: 'anthropic/claude-opus-4-5',
+      defaultToolApprovals: {},
+      serverConnected: false,
+      apiKeyConfigured: false,
+      apiBaseUrl,
+    });
+  }
+}

package/web/.next/standalone/web/src/app/api/health/route.ts

@@ -0,0 +1,63 @@
+import { NextResponse } from 'next/server';
+import * as fs from 'fs';
+import * as path from 'path';
+
+/**
+ * Health check endpoint for the web app.
+ * Proxies to the backend API and adds identifier for CLI detection.
+ */
+
+const DEFAULT_API_BASE = 'http://localhost:3141';
+
+function getApiBaseUrl(): string {
+  const cwd = process.cwd();
+  const possiblePaths = [
+    path.join(cwd, 'runtime-config.json'),
+    path.join(cwd, '..', 'runtime-config.json'),
+    path.join(cwd, '..', '..', 'runtime-config.json'),
+    path.join(cwd, '..', '..', '..', 'runtime-config.json'),
+  ];
+
+  for (const configPath of possiblePaths) {
+    try {
+      if (fs.existsSync(configPath)) {
+        const content = fs.readFileSync(configPath, 'utf-8');
+        const config = JSON.parse(content);
+        if (config.apiBaseUrl) {
+          return config.apiBaseUrl;
+        }
+      }
+    } catch {
+      // Ignore errors
+    }
+  }
+
+  // No env var fallback - always use config file or default
+  return DEFAULT_API_BASE;
+}
+
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+  const apiBaseUrl = getApiBaseUrl();
+  
+  try {
+    // Add timeout to prevent hanging
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), 3000);
+    
+    const res = await fetch(`${apiBaseUrl}/health/status`, {
+      cache: 'no-store',
+      signal: controller.signal,
+    });
+    clearTimeout(timeout);
+    
+    const data = await res.json();
+    return NextResponse.json({ ...data, name: 'sparkecoder-web' });
+  } catch {
+    return NextResponse.json(
+      { name: 'sparkecoder-web', error: 'Failed to connect to API server' },
+      { status: 503 }
+    );
+  }
+}