olly-molly 0.1.0

package/components/ui/Button.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import { ButtonHTMLAttributes, forwardRef } from 'react';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+    size?: 'sm' | 'md' | 'lg';
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+    ({ className = '', variant = 'primary', size = 'md', children, ...props }, ref) => {
+        const baseStyles = `
+            inline-flex items-center justify-center font-medium
+            transition-colors duration-150
+            focus:outline-none focus:ring-1 focus:ring-[var(--accent-primary)] focus:ring-offset-1 focus:ring-offset-[var(--bg-primary)]
+            disabled:opacity-40 disabled:cursor-not-allowed
+        `;
+
+        const variants = {
+            primary: `
+                bg-[var(--accent-primary)] text-[var(--bg-primary)]
+                hover:bg-[var(--accent-secondary)]
+                border border-[var(--accent-primary)]
+            `,
+            secondary: `
+                bg-transparent text-[var(--text-primary)]
+                border border-[var(--border-primary)]
+                hover:border-[var(--text-primary)]
+            `,
+            ghost: `
+                bg-transparent text-[var(--text-secondary)]
+                border border-transparent
+                hover:text-[var(--text-primary)]
+            `,
+            danger: `
+                bg-transparent text-[var(--priority-high-text)]
+                border border-[var(--priority-high-text)]
+                hover:bg-[var(--priority-high)]
+            `,
+        };
+
+        const sizes = {
+            sm: 'px-3 py-1 text-xs gap-1.5',
+            md: 'px-4 py-1.5 text-sm gap-2',
+            lg: 'px-5 py-2 text-sm gap-2',
+        };
+
+        return (
+            <button
+                ref={ref}
+                className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`}
+                {...props}
+            >
+                {children}
+            </button>
+        );
+    }
+);
+
+Button.displayName = 'Button';

package/components/ui/Card.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { ReactNode } from 'react';
+
+interface CardProps {
+    children: ReactNode;
+    className?: string;
+    onClick?: () => void;
+    hoverable?: boolean;
+    variant?: 'default' | 'bordered' | 'flat';
+}
+
+export function Card({
+    children,
+    className = '',
+    onClick,
+    hoverable = false,
+    variant = 'default'
+}: CardProps) {
+    const variants = {
+        default: `bg-[var(--bg-card)] border-b border-[var(--border-primary)]`,
+        bordered: `bg-[var(--bg-card)] border border-[var(--border-primary)]`,
+        flat: `bg-transparent`,
+    };
+
+    const hoverStyles = hoverable ? `
+        hover:bg-[var(--bg-secondary)]
+        cursor-pointer 
+        transition-colors duration-150
+    ` : '';
+
+    return (
+        <div
+            className={`${variants[variant]} ${hoverStyles} ${className}`}
+            onClick={onClick}
+        >
+            {children}
+        </div>
+    );
+}
+
+export function CardHeader({ children, className = '' }: { children: ReactNode; className?: string }) {
+    return (
+        <div className={`px-4 py-3 border-b border-[var(--border-primary)] ${className}`}>
+            {children}
+        </div>
+    );
+}
+
+export function CardContent({ children, className = '' }: { children: ReactNode; className?: string }) {
+    return (
+        <div className={`p-4 ${className}`}>
+            {children}
+        </div>
+    );
+}
+
+export function CardFooter({ children, className = '' }: { children: ReactNode; className?: string }) {
+    return (
+        <div className={`px-4 py-3 border-t border-[var(--border-primary)] ${className}`}>
+            {children}
+        </div>
+    );
+}

package/components/ui/Input.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { InputHTMLAttributes, forwardRef } from 'react';
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    error?: string;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+    ({ className = '', label, error, ...props }, ref) => {
+        return (
+            <div className="w-full">
+                {label && (
+                    <label className="block text-xs font-medium text-[var(--text-secondary)] mb-1.5 uppercase tracking-wide">
+                        {label}
+                    </label>
+                )}
+                <input
+                    ref={ref}
+                    className={`
+                        w-full px-3 py-2 text-sm
+                        bg-transparent text-[var(--text-primary)]
+                        border-b border-[var(--border-primary)]
+                        placeholder:text-[var(--text-muted)] 
+                        transition-colors duration-150
+                        focus:outline-none focus:border-[var(--text-primary)]
+                        ${error ? 'border-[var(--priority-high-text)]' : ''}
+                        ${className}
+                    `}
+                    {...props}
+                />
+                {error && (
+                    <p className="mt-1 text-xs text-[var(--priority-high-text)]">{error}</p>
+                )}
+            </div>
+        );
+    }
+);
+
+Input.displayName = 'Input';

package/components/ui/Modal.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { useEffect, useRef, ReactNode } from 'react';
+
+interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    children: ReactNode;
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+}
+
+export function Modal({ isOpen, onClose, title, children, size = 'md' }: ModalProps) {
+    const overlayRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const handleEscape = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') onClose();
+        };
+
+        if (isOpen) {
+            document.addEventListener('keydown', handleEscape);
+            document.body.style.overflow = 'hidden';
+        }
+
+        return () => {
+            document.removeEventListener('keydown', handleEscape);
+            document.body.style.overflow = '';
+        };
+    }, [isOpen, onClose]);
+
+    if (!isOpen) return null;
+
+    const sizes = {
+        sm: 'max-w-sm',
+        md: 'max-w-md',
+        lg: 'max-w-lg',
+        xl: 'max-w-xl',
+        '2xl': 'max-w-2xl',
+    };
+
+    return (
+        <div
+            ref={overlayRef}
+            className="fixed inset-0 z-50 flex items-center justify-center p-4 animate-in fade-in"
+            onClick={(e) => e.target === overlayRef.current && onClose()}
+        >
+            {/* Minimal backdrop */}
+            <div className="absolute inset-0 bg-[var(--bg-primary)]/90" />
+
+            {/* Modal container */}
+            <div className={`
+                relative w-full ${sizes[size]} 
+                bg-[var(--bg-card)] 
+                border border-[var(--border-primary)]
+                animate-in zoom-in-95
+                max-h-[calc(100vh-4rem)] overflow-y-auto
+            `}>
+                {title && (
+                    <div className="flex items-center justify-between px-6 py-4 border-b border-[var(--border-primary)]">
+                        <h2 className="text-sm font-medium text-[var(--text-primary)] uppercase tracking-wide">{title}</h2>
+                        <button
+                            onClick={onClose}
+                            className="p-1 text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-colors"
+                        >
+                            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                            </svg>
+                        </button>
+                    </div>
+                )}
+                <div className="p-6">{children}</div>
+            </div>
+        </div>
+    );
+}

package/components/ui/ResizablePane.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import { useState, useRef, useCallback, useEffect } from 'react';
+
+interface ResizablePaneProps {
+    left: React.ReactNode;
+    right: React.ReactNode;
+    defaultLeftWidth?: number;
+    minLeftWidth?: number;
+    minRightWidth?: number;
+}
+
+export function ResizablePane({
+    left,
+    right,
+    defaultLeftWidth = 60, // percentage
+    minLeftWidth = 30,
+    minRightWidth = 25,
+}: ResizablePaneProps) {
+    const [leftWidth, setLeftWidth] = useState(defaultLeftWidth);
+    const [isDragging, setIsDragging] = useState(false);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    // Update leftWidth when defaultLeftWidth changes
+    useEffect(() => {
+        setLeftWidth(defaultLeftWidth);
+    }, [defaultLeftWidth]);
+
+    const handleMouseDown = () => {
+        setIsDragging(true);
+    };
+
+    const handleMouseMove = useCallback(
+        (e: MouseEvent) => {
+            if (!isDragging || !containerRef.current) return;
+
+            const containerRect = containerRef.current.getBoundingClientRect();
+            const newLeftWidth = ((e.clientX - containerRect.left) / containerRect.width) * 100;
+
+            // Apply constraints
+            const constrainedWidth = Math.max(
+                minLeftWidth,
+                Math.min(100 - minRightWidth, newLeftWidth)
+            );
+
+            setLeftWidth(constrainedWidth);
+        },
+        [isDragging, minLeftWidth, minRightWidth]
+    );
+
+    const handleMouseUp = useCallback(() => {
+        setIsDragging(false);
+    }, []);
+
+    useEffect(() => {
+        if (isDragging) {
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', handleMouseUp);
+            document.body.style.cursor = 'col-resize';
+            document.body.style.userSelect = 'none';
+
+            return () => {
+                document.removeEventListener('mousemove', handleMouseMove);
+                document.removeEventListener('mouseup', handleMouseUp);
+                document.body.style.cursor = '';
+                document.body.style.userSelect = '';
+            };
+        }
+    }, [isDragging, handleMouseMove, handleMouseUp]);
+
+    return (
+        <div ref={containerRef} className="flex h-full overflow-hidden">
+            {/* Left Pane */}
+            <div
+                style={{ width: `${leftWidth}%` }}
+                className="overflow-auto flex-shrink-0"
+            >
+                {left}
+            </div>
+
+            {/* Resizer */}
+            <div
+                onMouseDown={handleMouseDown}
+                className={`w-1 bg-primary hover:bg-indigo-500 cursor-col-resize flex-shrink-0 transition-colors ${isDragging ? 'bg-indigo-500' : ''
+                    }`}
+            />
+
+            {/* Right Pane */}
+            <div
+                style={{ width: `${100 - leftWidth}%` }}
+                className="overflow-hidden flex-shrink-0"
+            >
+                {right}
+            </div>
+        </div>
+    );
+}

package/components/ui/Select.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+interface SelectProps {
+    label?: string;
+    value: string;
+    onChange: (value: string) => void;
+    options: { value: string; label: string }[];
+    placeholder?: string;
+    className?: string;
+}
+
+export function Select({ label, value, onChange, options, placeholder, className = '' }: SelectProps) {
+    return (
+        <div className="w-full">
+            {label && (
+                <label className="block text-xs font-medium text-[var(--text-secondary)] mb-1.5 uppercase tracking-wide">
+                    {label}
+                </label>
+            )}
+            <select
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+                className={`
+                    w-full px-3 py-2 text-sm
+                    bg-transparent text-[var(--text-primary)]
+                    border-b border-[var(--border-primary)]
+                    transition-colors duration-150 cursor-pointer
+                    focus:outline-none focus:border-[var(--text-primary)]
+                    ${className}
+                `}
+            >
+                {placeholder && (
+                    <option value="" disabled className="text-[var(--text-muted)]">
+                        {placeholder}
+                    </option>
+                )}
+                {options.map((option) => (
+                    <option key={option.value} value={option.value} className="bg-[var(--bg-card)]">
+                        {option.label}
+                    </option>
+                ))}
+            </select>
+        </div>
+    );
+}

package/components/ui/Textarea.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { TextareaHTMLAttributes, forwardRef } from 'react';
+
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label?: string;
+    error?: string;
+}
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+    ({ className = '', label, error, ...props }, ref) => {
+        return (
+            <div className="w-full">
+                {label && (
+                    <label className="block text-xs font-medium text-[var(--text-secondary)] mb-1.5 uppercase tracking-wide">
+                        {label}
+                    </label>
+                )}
+                <textarea
+                    ref={ref}
+                    className={`
+                        w-full px-3 py-2 text-sm
+                        bg-transparent text-[var(--text-primary)]
+                        border border-[var(--border-primary)]
+                        placeholder:text-[var(--text-muted)] 
+                        transition-colors duration-150 resize-none
+                        focus:outline-none focus:border-[var(--text-primary)]
+                        ${error ? 'border-[var(--priority-high-text)]' : ''}
+                        ${className}
+                    `}
+                    {...props}
+                />
+                {error && (
+                    <p className="mt-1 text-xs text-[var(--priority-high-text)]">{error}</p>
+                )}
+            </div>
+        );
+    }
+);
+
+Textarea.displayName = 'Textarea';

package/components/ui/index.ts

@@ -0,0 +1,8 @@
+export { Button } from './Button';
+export { Card, CardHeader, CardContent, CardFooter } from './Card';
+export { Modal } from './Modal';
+export { Badge, StatusBadge, PriorityBadge } from './Badge';
+export { Avatar } from './Avatar';
+export { Input } from './Input';
+export { Textarea } from './Textarea';
+export { Select } from './Select';

package/db/schema-conversations.sql

@@ -0,0 +1,26 @@
+-- Conversations: Each execution of AI agent for a ticket
+CREATE TABLE IF NOT EXISTS conversations (
+  id TEXT PRIMARY KEY,
+  ticket_id TEXT NOT NULL REFERENCES tickets(id) ON DELETE CASCADE,
+  agent_id TEXT NOT NULL REFERENCES members(id),
+  provider TEXT NOT NULL CHECK(provider IN ('claude', 'opencode')),
+  prompt TEXT,
+  feedback TEXT,
+  status TEXT DEFAULT 'running' CHECK(status IN ('running', 'completed', 'failed', 'cancelled')),
+  git_commit_hash TEXT,
+  started_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+  completed_at DATETIME,
+  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Conversation Messages: Streaming log entries for each conversation
+CREATE TABLE IF NOT EXISTS conversation_messages (
+  id TEXT PRIMARY KEY,
+  conversation_id TEXT NOT NULL REFERENCES conversations(id) ON DELETE CASCADE,
+  content TEXT NOT NULL,
+  message_type TEXT DEFAULT 'log' CHECK(message_type IN ('log', 'error', 'success', 'system')),
+  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE INDEX IF NOT EXISTS idx_conversations_ticket ON conversations(ticket_id);
+CREATE INDEX IF NOT EXISTS idx_conversation_messages_conversation ON conversation_messages(conversation_id);

package/db/schema-projects.sql

@@ -0,0 +1,29 @@
+-- Projects table for storing target project configurations
+CREATE TABLE IF NOT EXISTS projects (
+  id TEXT PRIMARY KEY,
+  name TEXT NOT NULL,
+  path TEXT NOT NULL UNIQUE,
+  description TEXT,
+  is_active INTEGER DEFAULT 0,
+  created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+  updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Agent work logs - detailed execution history
+CREATE TABLE IF NOT EXISTS agent_work_logs (
+  id TEXT PRIMARY KEY,
+  ticket_id TEXT REFERENCES tickets(id) ON DELETE CASCADE,
+  agent_id TEXT REFERENCES members(id),
+  project_id TEXT REFERENCES projects(id),
+  command TEXT NOT NULL,
+  prompt TEXT,
+  output TEXT,
+  status TEXT DEFAULT 'RUNNING' CHECK(status IN ('RUNNING', 'SUCCESS', 'FAILED', 'CANCELLED')),
+  git_commit_hash TEXT,
+  started_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+  completed_at DATETIME,
+  duration_ms INTEGER
+);
+
+CREATE INDEX IF NOT EXISTS idx_agent_work_logs_ticket ON agent_work_logs(ticket_id);
+CREATE INDEX IF NOT EXISTS idx_agent_work_logs_agent ON agent_work_logs(agent_id);

package/db/schema.sql

@@ -0,0 +1,94 @@
+-- Team Members
+CREATE TABLE IF NOT EXISTS members (
+  id TEXT PRIMARY KEY,
+  role TEXT NOT NULL CHECK(role IN ('PM', 'FE_DEV', 'BACKEND_DEV', 'QA', 'DEVOPS')),
+  name TEXT NOT NULL,
+  avatar TEXT,
+  system_prompt TEXT NOT NULL,
+  created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+  updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Tickets
+CREATE TABLE IF NOT EXISTS tickets (
+  id TEXT PRIMARY KEY,
+  title TEXT NOT NULL,
+  description TEXT,
+  status TEXT DEFAULT 'TODO' CHECK(status IN ('TODO', 'IN_PROGRESS', 'IN_REVIEW', 'NEED_FIX', 'COMPLETE', 'ON_HOLD')),
+  priority TEXT DEFAULT 'MEDIUM' CHECK(priority IN ('LOW', 'MEDIUM', 'HIGH', 'CRITICAL')),
+  assignee_id TEXT REFERENCES members(id),
+  project_id TEXT REFERENCES projects(id),
+  created_by TEXT,
+  created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+  updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Activity Logs
+CREATE TABLE IF NOT EXISTS activity_logs (
+  id TEXT PRIMARY KEY,
+  ticket_id TEXT REFERENCES tickets(id) ON DELETE CASCADE,
+  member_id TEXT REFERENCES members(id),
+  action TEXT NOT NULL,
+  old_value TEXT,
+  new_value TEXT,
+  details TEXT,
+  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Create indexes for better query performance
+CREATE INDEX IF NOT EXISTS idx_tickets_status ON tickets(status);
+CREATE INDEX IF NOT EXISTS idx_tickets_assignee ON tickets(assignee_id);
+CREATE INDEX IF NOT EXISTS idx_tickets_project ON tickets(project_id);
+CREATE INDEX IF NOT EXISTS idx_activity_logs_ticket ON activity_logs(ticket_id);
+
+-- Insert default team members
+INSERT OR IGNORE INTO members (id, role, name, avatar, system_prompt) VALUES
+('pm-001', 'PM', 'PM Agent', '👔', 'You are a Project Manager AI agent. Your responsibilities include:
+- Creating and managing project tickets
+- Assigning tasks to appropriate team members based on their expertise
+- Setting priorities and deadlines
+- Tracking project progress
+- Facilitating communication between team members
+- Making decisions about project scope and timeline
+
+When creating tickets, analyze the task requirements and automatically assign them to the most suitable team member.'),
+
+('fe-001', 'FE_DEV', 'Frontend Developer', '🎨', 'You are a Frontend Developer AI agent. Your responsibilities include:
+- Implementing user interfaces using React and Next.js
+- Writing clean, maintainable TypeScript/JavaScript code
+- Creating responsive and accessible designs
+- Integrating with backend APIs
+- Optimizing frontend performance
+- Following best practices for component architecture
+
+Focus on creating beautiful, user-friendly interfaces with excellent UX.'),
+
+('be-001', 'BACKEND_DEV', 'Backend Developer', '⚙️', 'You are a Backend Developer AI agent. Your responsibilities include:
+- Designing and implementing REST APIs
+- Working with databases (SQLite, PostgreSQL, etc.)
+- Writing server-side logic and business rules
+- Ensuring API security and performance
+- Creating efficient data models
+- Writing unit and integration tests
+
+Focus on building robust, scalable backend systems.'),
+
+('qa-001', 'QA', 'QA Engineer', '🔍', 'You are a QA Engineer AI agent. Your responsibilities include:
+- Testing features moved to "In Review" status
+- Using Chrome DevTools MCP or Playwright MCP for automated testing
+- Writing and executing test cases
+- Reporting bugs and issues
+- Verifying bug fixes
+- Ensuring quality standards are met
+
+When a ticket moves to "In Review", thoroughly test the implementation and provide detailed feedback.'),
+
+('devops-001', 'DEVOPS', 'DevOps Engineer', '🚀', 'You are a DevOps Engineer AI agent. Your responsibilities include:
+- Setting up CI/CD pipelines
+- Managing deployment processes
+- Configuring infrastructure and environments
+- Monitoring application performance
+- Handling security and compliance
+- Automating operational tasks
+
+Focus on ensuring smooth deployments and reliable infrastructure.');