olly-molly 0.1.0

package/bin/cli.js

@@ -0,0 +1,66 @@
+#!/usr/bin/env node
+
+const { spawn, execSync } = require('child_process');
+const path = require('path');
+const fs = require('fs');
+
+const packageDir = path.dirname(__dirname);
+
+console.log('\n🐙 Olly Molly - Your AI Development Team\n');
+
+// Check if node_modules exists, if not install
+const nodeModulesPath = path.join(packageDir, 'node_modules');
+if (!fs.existsSync(nodeModulesPath)) {
+    console.log('📦 Installing dependencies...\n');
+    try {
+        execSync('npm install', { 
+            cwd: packageDir, 
+            stdio: 'inherit' 
+        });
+    } catch (error) {
+        console.error('❌ Failed to install dependencies');
+        process.exit(1);
+    }
+}
+
+// Check if .next build exists, if not build
+const nextPath = path.join(packageDir, '.next');
+if (!fs.existsSync(nextPath)) {
+    console.log('🔨 Building app...\n');
+    try {
+        execSync('npm run build', { 
+            cwd: packageDir, 
+            stdio: 'inherit' 
+        });
+    } catch (error) {
+        console.error('❌ Failed to build app');
+        process.exit(1);
+    }
+}
+
+// Start the server
+console.log('🚀 Starting Olly Molly on http://localhost:1234\n');
+
+const server = spawn('npm', ['run', 'start', '--', '--port', '1234'], {
+    cwd: packageDir,
+    stdio: 'inherit',
+    shell: true
+});
+
+server.on('error', (error) => {
+    console.error('❌ Failed to start server:', error.message);
+    process.exit(1);
+});
+
+server.on('close', (code) => {
+    process.exit(code || 0);
+});
+
+// Handle graceful shutdown
+process.on('SIGINT', () => {
+    server.kill('SIGINT');
+});
+
+process.on('SIGTERM', () => {
+    server.kill('SIGTERM');
+});

package/components/ThemeProvider.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { createContext, useContext, useEffect, useState } from 'react';
+
+type Theme = 'light' | 'dark';
+
+interface ThemeContextType {
+    theme: Theme;
+    toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+    const [theme, setTheme] = useState<Theme>('dark');
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        setMounted(true);
+        const savedTheme = localStorage.getItem('theme') as Theme | null;
+        if (savedTheme) {
+            setTheme(savedTheme);
+        } else if (window.matchMedia('(prefers-color-scheme: light)').matches) {
+            setTheme('light');
+        }
+    }, []);
+
+    useEffect(() => {
+        if (mounted) {
+            document.documentElement.setAttribute('data-theme', theme);
+            localStorage.setItem('theme', theme);
+        }
+    }, [theme, mounted]);
+
+    const toggleTheme = () => {
+        setTheme(prev => prev === 'dark' ? 'light' : 'dark');
+    };
+
+    if (!mounted) {
+        return null;
+    }
+
+    return (
+        <ThemeContext.Provider value={{ theme, toggleTheme }}>
+            {children}
+        </ThemeContext.Provider>
+    );
+}
+
+export function useTheme() {
+    const context = useContext(ThemeContext);
+    if (!context) {
+        throw new Error('useTheme must be used within a ThemeProvider');
+    }
+    return context;
+}

package/components/ThemeToggle.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { useTheme } from './ThemeProvider';
+
+export function ThemeToggle() {
+    const { theme, toggleTheme } = useTheme();
+
+    return (
+        <button
+            onClick={toggleTheme}
+            className="p-2 rounded-lg transition-colors
+                 bg-zinc-100 dark:bg-zinc-800 
+                 text-zinc-600 dark:text-zinc-400 
+                 hover:bg-zinc-200 dark:hover:bg-zinc-700
+                 hover:text-zinc-900 dark:hover:text-zinc-100"
+            aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
+        >
+            {theme === 'dark' ? (
+                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                        d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+                </svg>
+            ) : (
+                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                        d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+                </svg>
+            )}
+        </button>
+    );
+}

package/components/activity/ActivityLog.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+interface ActivityLog {
+    id: string;
+    ticket_id: string;
+    member_id?: string;
+    action: string;
+    old_value?: string | null;
+    new_value?: string | null;
+    details?: string | null;
+    created_at: string;
+    member?: {
+        id: string;
+        name: string;
+        avatar?: string | null;
+        role?: string;
+    };
+}
+
+interface ActivityLogProps {
+    ticketId: string;
+}
+
+export function ActivityLog({ ticketId }: ActivityLogProps) {
+    const [logs, setLogs] = useState<ActivityLog[]>([]);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        async function fetchLogs() {
+            try {
+                const res = await fetch(`/api/tickets/${ticketId}/logs`);
+                const data = await res.json();
+                setLogs(data);
+            } catch (error) {
+                console.error('Failed to fetch logs:', error);
+            } finally {
+                setLoading(false);
+            }
+        }
+        fetchLogs();
+    }, [ticketId]);
+
+    if (loading) {
+        return (
+            <div className="flex items-center justify-center py-4">
+                <div className="w-5 h-5 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" />
+            </div>
+        );
+    }
+
+    if (logs.length === 0) {
+        return (
+            <p className="text-sm text-[var(--text-muted)] text-center py-4">No activity yet</p>
+        );
+    }
+
+    const getActionIcon = (action: string) => {
+        switch (action) {
+            case 'CREATED': return '✨';
+            case 'STATUS_CHANGED': return '🔄';
+            case 'ASSIGNED': return '👤';
+            case 'PRIORITY_CHANGED': return '⚡';
+            case 'COMMENTED': return '💬';
+            default: return '📝';
+        }
+    };
+
+    const formatDate = (date: string) => {
+        const d = new Date(date);
+        return d.toLocaleDateString('ko-KR', {
+            month: 'short',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+        });
+    };
+
+    return (
+        <div className="space-y-3">
+            {logs.map((log) => (
+                <div key={log.id} className="flex gap-3 text-sm">
+                    <span className="text-lg">{getActionIcon(log.action)}</span>
+                    <div className="flex-1 min-w-0">
+                        <p className="text-[var(--text-secondary)]">{log.details}</p>
+                        <p className="text-xs text-[var(--text-muted)] mt-0.5">
+                            {log.member?.name && <span className="text-[var(--text-tertiary)]">{log.member.name} · </span>}
+                            {formatDate(log.created_at)}
+                        </p>
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+}

package/components/activity/index.ts

@@ -0,0 +1 @@
+export { ActivityLog } from './ActivityLog';

package/components/kanban/ConversationList.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import type { Conversation } from '@/lib/db';
+
+interface ConversationListProps {
+    conversations: Conversation[];
+    selectedId: string | null;
+    onSelect: (id: string) => void;
+}
+
+export function ConversationList({ conversations, selectedId, onSelect }: ConversationListProps) {
+    const getStatusIcon = (status: Conversation['status']) => {
+        switch (status) {
+            case 'running':
+                return '⏳';
+            case 'completed':
+                return '✅';
+            case 'failed':
+                return '❌';
+            case 'cancelled':
+                return '⏹';
+            default:
+                return '⏱';
+        }
+    };
+
+    const getProviderBadge = (provider: Conversation['provider']) => {
+        return provider === 'opencode' ? '🟢 OpenCode' : '🟣 Claude';
+    };
+
+    const formatTime = (dateString: string) => {
+        const date = new Date(dateString);
+        const now = new Date();
+        const diffInMinutes = Math.floor((now.getTime() - date.getTime()) / 60000);
+
+        if (diffInMinutes < 1) return 'Just now';
+        if (diffInMinutes < 60) return `${diffInMinutes}m ago`;
+        if (diffInMinutes < 1440) return `${Math.floor(diffInMinutes / 60)}h ago`;
+        return date.toLocaleDateString();
+    };
+
+    if (conversations.length === 0) {
+        return (
+            <div className="p-4 text-center text-muted">
+                <p className="text-sm">No conversations yet</p>
+                <p className="text-xs mt-1">Execute AI Agent to create a conversation</p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="divide-y divide-primary">
+            {conversations.map((conv) => (
+                <button
+                    key={conv.id}
+                    onClick={() => onSelect(conv.id)}
+                    className={`w-full p-3 text-left transition-colors hover:bg-tertiary ${selectedId === conv.id ? 'bg-tertiary border-l-2 border-indigo-500' : ''
+                        }`}
+                >
+                    <div className="flex items-start justify-between mb-1">
+                        <div className="flex items-center gap-2">
+                            <span className="text-lg">{conv.agent?.avatar || '🤖'}</span>
+                            <span className="text-sm font-medium text-primary">{conv.agent?.name}</span>
+                        </div>
+                        <span className="text-xs">{getStatusIcon(conv.status)}</span>
+                    </div>
+                    <div className="flex items-center justify-between">
+                        <span className="text-xs text-muted">{getProviderBadge(conv.provider)}</span>
+                        <span className="text-xs text-muted">{formatTime(conv.started_at)}</span>
+                    </div>
+                </button>
+            ))}
+        </div>
+    );
+}

package/components/kanban/ConversationView.tsx

@@ -0,0 +1,132 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import type { Conversation, ConversationMessage } from '@/lib/db';
+
+interface ConversationViewProps {
+    conversation: Conversation | null;
+    messages: ConversationMessage[];
+    isRunning?: boolean;
+}
+
+export function ConversationView({ conversation, messages, isRunning = false }: ConversationViewProps) {
+    const messagesEndRef = useRef<HTMLDivElement>(null);
+
+    // Auto-scroll to bottom when new messages arrive
+    useEffect(() => {
+        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }, [messages]);
+
+    if (!conversation) {
+        return (
+            <div className="flex items-center justify-center h-full text-tertiary">
+                <div className="text-center">
+                    <p className="text-lg mb-2">💬</p>
+                    <p>Select a conversation to view details</p>
+                </div>
+            </div>
+        );
+    }
+
+    const getStatusColor = (status: Conversation['status']) => {
+        switch (status) {
+            case 'running':
+                return 'text-blue-400';
+            case 'completed':
+                return 'text-emerald-400';
+            case 'failed':
+                return 'text-red-400';
+            case 'cancelled':
+                return 'text-gray-400';
+            default:
+                return 'text-gray-400';
+        }
+    };
+
+    const getStatusIcon = (status: Conversation['status']) => {
+        switch (status) {
+            case 'running':
+                return '⏳';
+            case 'completed':
+                return '✅';
+            case 'failed':
+                return '❌';
+            case 'cancelled':
+                return '⏹';
+            default:
+                return '⏱';
+        }
+    };
+
+    const getMessageTypeClass = (type: ConversationMessage['message_type']) => {
+        switch (type) {
+            case 'error':
+                return 'text-red-400 bg-red-500/10 border-red-500/20';
+            case 'success':
+                return 'text-emerald-400 bg-emerald-500/10 border-emerald-500/20';
+            case 'system':
+                return 'text-blue-400 bg-blue-500/10 border-blue-500/20';
+            default:
+                return 'text-[var(--text-tertiary)] bg-black/20 border-transparent';
+        }
+    };
+
+    return (
+        <div className="flex flex-col h-full">
+            {/* Header */}
+            <div className="p-4 border-b border-primary flex items-center justify-between flex-shrink-0">
+                <div className="flex items-center gap-3">
+                    <span className="text-2xl">{conversation.agent?.avatar || '🤖'}</span>
+                    <div>
+                        <h3 className="font-medium text-primary">{conversation.agent?.name || 'Agent'}</h3>
+                        <p className="text-xs text-muted">
+                            {conversation.provider === 'opencode' ? '🟢 OpenCode' : '🟣 Claude'}
+                        </p>
+                    </div>
+                </div>
+                <div className="flex items-center gap-2">
+                    <span className={`text-sm font-medium ${getStatusColor(conversation.status)}`}>
+                        {getStatusIcon(conversation.status)} {conversation.status}
+                    </span>
+                    {isRunning && (
+                        <div className="w-2 h-2 bg-blue-400 rounded-full animate-pulse" />
+                    )}
+                </div>
+            </div>
+
+            {/* Messages */}
+            <div className="flex-1 overflow-y-auto p-4 space-y-2">
+                {messages.length === 0 ? (
+                    <div className="flex items-center justify-center h-full text-muted">
+                        <p>No messages yet...</p>
+                    </div>
+                ) : (
+                    messages.map((message) => (
+                        <div
+                            key={message.id}
+                            className={`pmargin-bottom: 2px; rounded-lg border p-2 font-mono text-xs whitespace-pre-wrap break-words ${getMessageTypeClass(message.message_type)}`}
+                        >
+                            {message.content}
+                        </div>
+                    ))
+                )}
+                <div ref={messagesEndRef} />
+            </div>
+
+            {/* Footer Info */}
+            {conversation.completed_at && (
+                <div className="p-3 border-t border-primary bg-tertiary flex-shrink-0">
+                    <div className="flex items-center justify-between text-xs text-muted">
+                        <span>Started: {new Date(conversation.started_at).toLocaleString()}</span>
+                        <span>Completed: {new Date(conversation.completed_at).toLocaleString()}</span>
+                    </div>
+                    {conversation.git_commit_hash && (
+                        <div className="mt-1 text-xs text-emerald-400">
+                            📦 Commit: {conversation.git_commit_hash}
+                        </div>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}

package/components/kanban/KanbanBoard.tsx

@@ -0,0 +1,179 @@
+'use client';
+
+import { useState, useCallback, useEffect } from 'react';
+import {
+    DndContext,
+    DragOverlay,
+    closestCenter,
+    KeyboardSensor,
+    PointerSensor,
+    useSensor,
+    useSensors,
+    DragStartEvent,
+    DragEndEvent,
+} from '@dnd-kit/core';
+import { sortableKeyboardCoordinates } from '@dnd-kit/sortable';
+import { KanbanColumn } from './KanbanColumn';
+import { TicketCard } from './TicketCard';
+
+interface Member {
+    id: string;
+    name: string;
+    avatar?: string | null;
+    role: string;
+    system_prompt: string;
+}
+
+interface Ticket {
+    id: string;
+    title: string;
+    description?: string | null;
+    status: string;
+    priority: string;
+    assignee_id?: string | null;
+    assignee?: Member | null;
+}
+
+interface RunningJob {
+    id: string;
+    ticketId: string;
+    agentName: string;
+    status: 'running' | 'completed' | 'failed';
+}
+
+interface KanbanBoardProps {
+    tickets: Ticket[];
+    members: Member[];
+    onTicketUpdate: (id: string, data: Partial<Ticket>) => void;
+    onTicketCreate: (data: Partial<Ticket>) => void;
+    onTicketDelete: (id: string) => void;
+    hasActiveProject?: boolean;
+    onRefresh?: () => void;
+    onTicketSelect?: (ticket: Ticket) => void;
+}
+
+const columns = [
+    { id: 'TODO', title: 'To Do', color: 'text-[var(--text-secondary)]', icon: '📋' },
+    { id: 'IN_PROGRESS', title: 'In Progress', color: 'text-blue-500', icon: '🔄' },
+    { id: 'IN_REVIEW', title: 'In Review', color: 'text-purple-500', icon: '👀' },
+    { id: 'NEED_FIX', title: 'Need Fix', color: 'text-orange-500', icon: '🛠️' },
+    { id: 'COMPLETE', title: 'Complete', color: 'text-emerald-500', icon: '✅' },
+    { id: 'ON_HOLD', title: 'On Hold', color: 'text-amber-500', icon: '⏸️' },
+];
+
+export function KanbanBoard({ tickets, members, onTicketUpdate, onTicketCreate, onTicketDelete, hasActiveProject, onRefresh, onTicketSelect }: KanbanBoardProps) {
+    const [activeTicket, setActiveTicket] = useState<Ticket | null>(null);
+    const [runningJobs, setRunningJobs] = useState<RunningJob[]>([]);
+
+    const sensors = useSensors(
+        useSensor(PointerSensor, {
+            activationConstraint: {
+                distance: 8,
+            },
+        }),
+        useSensor(KeyboardSensor, {
+            coordinateGetter: sortableKeyboardCoordinates,
+        })
+    );
+
+    // Poll for running jobs
+    useEffect(() => {
+        const fetchRunningJobs = async () => {
+            try {
+                const res = await fetch('/api/agent/status');
+                const data = await res.json();
+                setRunningJobs(data.jobs || []);
+
+                // If any job just completed, refresh the board
+                const hasCompleted = data.jobs?.some((job: RunningJob) => job.status !== 'running');
+                if (hasCompleted) {
+                    onRefresh?.();
+                }
+            } catch (error) {
+                console.error('Failed to fetch running jobs:', error);
+            }
+        };
+
+        fetchRunningJobs();
+        const interval = setInterval(fetchRunningJobs, 3000);
+        return () => clearInterval(interval);
+    }, [onRefresh]);
+
+    const isTicketRunning = useCallback((ticketId: string) => {
+        return runningJobs.some(job => job.ticketId === ticketId && job.status === 'running');
+    }, [runningJobs]);
+
+    const handleDragStart = (event: DragStartEvent) => {
+        const ticket = tickets.find(t => t.id === event.active.id);
+        if (ticket) setActiveTicket(ticket);
+    };
+
+    const handleDragEnd = (event: DragEndEvent) => {
+        const { active, over } = event;
+        setActiveTicket(null);
+
+        if (!over) return;
+
+        const ticketId = active.id as string;
+        const overId = over.id as string;
+
+        // Check if dropped on a column
+        const targetColumn = columns.find(col => col.id === overId);
+        if (targetColumn) {
+            const ticket = tickets.find(t => t.id === ticketId);
+            if (ticket && ticket.status !== targetColumn.id) {
+                onTicketUpdate(ticketId, { status: targetColumn.id });
+            }
+        }
+    };
+
+    const handleTicketClick = useCallback((ticket: Ticket) => {
+        onTicketSelect?.(ticket);
+    }, [onTicketSelect]);
+
+    const handleCreateClick = () => {
+        // For now, creating tickets still uses inline approach or can be added to sidebar
+        // We'll create a minimal ticket and open sidebar
+        onTicketCreate({ title: 'New Ticket', status: 'TODO', priority: 'MEDIUM' });
+    };
+
+    const runningCount = runningJobs.filter(j => j.status === 'running').length;
+
+    return (
+        <div className="flex h-full border-t border-[var(--border-primary)]">
+            {/* Board */}
+            <DndContext
+                sensors={sensors}
+                collisionDetection={closestCenter}
+                onDragStart={handleDragStart}
+                onDragEnd={handleDragEnd}
+            >
+                <div className="flex gap-4 overflow-x-auto pb-4">
+                    {columns.map((column) => (
+                        <KanbanColumn
+                            key={column.id}
+                            id={column.id}
+                            title={column.title}
+                            color={column.color}
+                            icon={column.icon}
+                            tickets={tickets.filter(t => t.status === column.id)}
+                            onTicketClick={handleTicketClick}
+                            runningTicketIds={runningJobs.filter(j => j.status === 'running').map(j => j.ticketId)}
+                        />
+                    ))}
+                </div>
+
+                <DragOverlay>
+                    {activeTicket && (
+                        <TicketCard
+                            ticket={activeTicket}
+                            onClick={() => { }}
+                            isDragging
+                            isRunning={isTicketRunning(activeTicket.id)}
+                        />
+                    )}
+                </DragOverlay>
+            </DndContext>
+        </div>
+    );
+}