olly-molly 0.1.0

package/components/project/ProjectSelector.tsx

@@ -0,0 +1,211 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/Button';
+import { Modal } from '@/components/ui/Modal';
+import { Input } from '@/components/ui/Input';
+
+interface Project {
+    id: string;
+    name: string;
+    path: string;
+    description: string | null;
+    is_active: number;
+}
+
+interface ProjectSelectorProps {
+    onProjectChange?: (project: Project | null) => void;
+}
+
+export function ProjectSelector({ onProjectChange }: ProjectSelectorProps) {
+    const [projects, setProjects] = useState<Project[]>([]);
+    const [activeProject, setActiveProject] = useState<Project | null>(null);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [newPath, setNewPath] = useState('');
+    const [newName, setNewName] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        fetchProjects();
+    }, []);
+
+    const fetchProjects = async () => {
+        try {
+            const res = await fetch('/api/projects');
+            const data = await res.json();
+            setProjects(data);
+            const active = data.find((p: Project) => p.is_active);
+            setActiveProject(active || null);
+            onProjectChange?.(active || null);
+        } catch (err) {
+            console.error('Failed to fetch projects:', err);
+        }
+    };
+
+    const handleAddProject = async () => {
+        if (!newPath.trim()) return;
+
+        setLoading(true);
+        setError(null);
+
+        try {
+            const res = await fetch('/api/projects', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    path: newPath.trim(),
+                    name: newName.trim() || undefined,
+                }),
+            });
+
+            const data = await res.json();
+
+            if (!res.ok) {
+                throw new Error(data.error);
+            }
+
+            setNewPath('');
+            setNewName('');
+            await fetchProjects();
+
+            // Auto-select if it's the first project
+            if (projects.length === 0) {
+                handleSelectProject(data.id);
+            }
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to add project');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleSelectProject = async (id: string) => {
+        try {
+            const res = await fetch(`/api/projects/${id}`, {
+                method: 'PATCH',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ is_active: true }),
+            });
+
+            if (res.ok) {
+                await fetchProjects();
+            }
+        } catch (err) {
+            console.error('Failed to select project:', err);
+        }
+    };
+
+    const handleDeleteProject = async (id: string) => {
+        try {
+            await fetch(`/api/projects/${id}`, { method: 'DELETE' });
+            await fetchProjects();
+        } catch (err) {
+            console.error('Failed to delete project:', err);
+        }
+    };
+
+    return (
+        <>
+            <button
+                onClick={() => setIsModalOpen(true)}
+                className="flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm
+                   bg-[var(--bg-tertiary)] border border-[var(--border-primary)]
+                   hover:border-[var(--border-secondary)] transition-colors"
+            >
+                <span>📁</span>
+                <span className="text-[var(--text-secondary)]">
+                    {activeProject ? activeProject.name : '프로젝트 선택'}
+                </span>
+                {activeProject && (
+                    <span className="w-2 h-2 rounded-full bg-emerald-500" title="Active" />
+                )}
+            </button>
+
+            <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} title="📁 프로젝트 관리" size="lg">
+                <div className="space-y-4">
+                    {/* Add new project */}
+                    <div className="p-4 bg-[var(--bg-tertiary)] rounded-lg space-y-3">
+                        <h4 className="text-sm font-medium text-[var(--text-primary)]">새 프로젝트 추가</h4>
+                        <Input
+                            placeholder="/Users/yongmin/my-project"
+                            value={newPath}
+                            onChange={(e) => setNewPath(e.target.value)}
+                            label="프로젝트 경로"
+                        />
+                        <Input
+                            placeholder="My Project (선택사항)"
+                            value={newName}
+                            onChange={(e) => setNewName(e.target.value)}
+                            label="프로젝트 이름"
+                        />
+                        {error && (
+                            <p className="text-sm text-red-400">{error}</p>
+                        )}
+                        <Button
+                            variant="primary"
+                            size="sm"
+                            onClick={handleAddProject}
+                            disabled={!newPath.trim() || loading}
+                        >
+                            {loading ? '추가 중...' : '프로젝트 추가'}
+                        </Button>
+                    </div>
+
+                    {/* Project list */}
+                    <div className="space-y-2">
+                        <h4 className="text-sm font-medium text-[var(--text-secondary)]">등록된 프로젝트</h4>
+                        {projects.length === 0 ? (
+                            <p className="text-sm text-[var(--text-muted)] py-4 text-center">
+                                등록된 프로젝트가 없습니다
+                            </p>
+                        ) : (
+                            projects.map((project) => (
+                                <div
+                                    key={project.id}
+                                    className={`p-3 rounded-lg border transition-colors ${project.is_active
+                                            ? 'bg-indigo-500/10 border-indigo-500/30'
+                                            : 'bg-[var(--bg-card)] border-[var(--border-primary)] hover:border-[var(--border-secondary)]'
+                                        }`}
+                                >
+                                    <div className="flex items-start justify-between gap-2">
+                                        <div className="flex-1 min-w-0">
+                                            <div className="flex items-center gap-2">
+                                                <span className="font-medium text-[var(--text-primary)]">{project.name}</span>
+                                                {project.is_active && (
+                                                    <span className="px-1.5 py-0.5 text-xs bg-emerald-500/20 text-emerald-400 rounded">
+                                                        Active
+                                                    </span>
+                                                )}
+                                            </div>
+                                            <p className="text-xs text-[var(--text-muted)] truncate mt-1">{project.path}</p>
+                                        </div>
+                                        <div className="flex items-center gap-1">
+                                            {!project.is_active && (
+                                                <Button
+                                                    variant="ghost"
+                                                    size="sm"
+                                                    onClick={() => handleSelectProject(project.id)}
+                                                >
+                                                    선택
+                                                </Button>
+                                            )}
+                                            <Button
+                                                variant="ghost"
+                                                size="sm"
+                                                onClick={() => handleDeleteProject(project.id)}
+                                                className="text-red-400 hover:text-red-300"
+                                            >
+                                                삭제
+                                            </Button>
+                                        </div>
+                                    </div>
+                                </div>
+                            ))
+                        )}
+                    </div>
+                </div>
+            </Modal>
+        </>
+    );
+}

package/components/project/index.ts

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

package/components/team/MemberCard.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+import { useState } from 'react';
+import { Modal } from '@/components/ui/Modal';
+import { Button } from '@/components/ui/Button';
+import { Textarea } from '@/components/ui/Textarea';
+import { Avatar } from '@/components/ui/Avatar';
+import { Badge } from '@/components/ui/Badge';
+
+interface Member {
+    id: string;
+    role: string;
+    name: string;
+    avatar?: string | null;
+    system_prompt: string;
+}
+
+interface MemberCardProps {
+    member: Member;
+    onClick: () => void;
+}
+
+
+export function MemberCard({ member, onClick }: MemberCardProps) {
+    const roleLabels: Record<string, string> = {
+        PM: 'Project Manager',
+        FE_DEV: 'Frontend Developer',
+        BACKEND_DEV: 'Backend Developer',
+        QA: 'QA Engineer',
+        DEVOPS: 'DevOps Engineer',
+    };
+
+    const roleColors: Record<string, 'default' | 'info' | 'success' | 'warning' | 'purple'> = {
+        PM: 'purple',
+        FE_DEV: 'info',
+        BACKEND_DEV: 'success',
+        QA: 'warning',
+        DEVOPS: 'default',
+    };
+
+    const roleImages: Record<string, string> = {
+        PM: '/profiles/pm.png',
+        FE_DEV: '/profiles/dev-frontend.png',
+        BACKEND_DEV: '/profiles/dev-backend.png',
+        QA: '/profiles/qa.png',
+    };
+
+    const profileImage = roleImages[member.role];
+
+    return (
+        <div
+            onClick={onClick}
+            className="p-4 bg-[var(--bg-tertiary)] rounded-xl border border-[var(--border-primary)] 
+                 hover:border-[var(--border-secondary)] hover:bg-[var(--bg-card-hover)] 
+                 cursor-pointer transition-all duration-200"
+        >
+            <div className="flex items-center gap-3">
+                <Avatar
+                    name={member.name}
+                    src={profileImage}
+                    emoji={!profileImage ? member.avatar : undefined}
+                    badge={profileImage ? member.avatar : undefined}
+                    size="lg"
+                />
+                <div className="flex-1 min-w-0">
+                    <h3 className="font-medium text-[var(--text-primary)] truncate">{member.name}</h3>
+                    <Badge variant={roleColors[member.role]} size="sm">
+                        {roleLabels[member.role] || member.role}
+                    </Badge>
+                </div>
+            </div>
+            <p className="mt-3 text-xs text-[var(--text-muted)] line-clamp-2">
+                {member.system_prompt.slice(0, 100)}...
+            </p>
+        </div>
+    );
+}
+
+interface SystemPromptEditorProps {
+    isOpen: boolean;
+    onClose: () => void;
+    member: Member | null;
+    onSave: (id: string, systemPrompt: string) => void;
+}
+
+
+export function SystemPromptEditor({ isOpen, onClose, member, onSave }: SystemPromptEditorProps) {
+    const [prompt, setPrompt] = useState(member?.system_prompt || '');
+
+    const roleImages: Record<string, string> = {
+        PM: '/profiles/pm.png',
+        FE_DEV: '/profiles/dev-frontend.png',
+        BACKEND_DEV: '/profiles/dev-backend.png',
+        QA: '/profiles/qa.png',
+    };
+
+    const profileImage = member ? roleImages[member.role] : undefined;
+
+    const handleSave = () => {
+        if (member) {
+            onSave(member.id, prompt);
+            onClose();
+        }
+    };
+
+    // Update prompt when member changes
+    if (member && member.system_prompt !== prompt && !isOpen) {
+        setPrompt(member.system_prompt);
+    }
+
+    return (
+        <Modal isOpen={isOpen} onClose={onClose} title={`Edit ${member?.name}'s System Prompt`} size="xl">
+            <div className="space-y-4">
+                <div className="flex items-center gap-3 p-3 bg-[var(--bg-tertiary)] rounded-lg">
+                    {member && (
+                        <>
+                            <Avatar
+                                name={member.name}
+                                src={profileImage}
+                                emoji={!profileImage ? member.avatar : undefined}
+                                badge={profileImage ? member.avatar : undefined}
+                                size="md"
+                            />
+                            <div>
+                                <p className="font-medium text-[var(--text-primary)]">{member.name}</p>
+                                <p className="text-xs text-[var(--text-tertiary)]">{member.role}</p>
+                            </div>
+                        </>
+                    )}
+                </div>
+
+                <Textarea
+                    label="System Prompt"
+                    value={prompt}
+                    onChange={(e) => setPrompt(e.target.value)}
+                    rows={12}
+                    placeholder="Enter the system prompt for this AI agent..."
+                />
+
+                <div className="flex justify-end gap-3 pt-2">
+                    <Button variant="ghost" onClick={onClose}>Cancel</Button>
+                    <Button variant="primary" onClick={handleSave}>Save Changes</Button>
+                </div>
+            </div>
+        </Modal>
+    );
+}

package/components/team/TeamPanel.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { useState } from 'react';
+import { MemberCard, SystemPromptEditor } from './MemberCard';
+
+interface Member {
+    id: string;
+    role: string;
+    name: string;
+    avatar?: string | null;
+    system_prompt: string;
+}
+
+interface TeamPanelProps {
+    members: Member[];
+    onUpdateMember: (id: string, systemPrompt: string) => void;
+}
+
+export function TeamPanel({ members, onUpdateMember }: TeamPanelProps) {
+    const [selectedMember, setSelectedMember] = useState<Member | null>(null);
+    const [isEditorOpen, setIsEditorOpen] = useState(false);
+
+    const handleMemberClick = (member: Member) => {
+        setSelectedMember(member);
+        setIsEditorOpen(true);
+    };
+
+    const handleSave = (id: string, systemPrompt: string) => {
+        onUpdateMember(id, systemPrompt);
+    };
+
+    return (
+        <div className="h-full flex flex-col">
+            <div className="mb-4">
+                <h2 className="text-lg font-semibold text-[var(--text-primary)]">Team Members</h2>
+                <p className="text-sm text-[var(--text-tertiary)]">Click to edit system prompts</p>
+            </div>
+
+            <div className="flex-1 space-y-3 overflow-y-auto">
+                {members.map((member) => (
+                    <MemberCard
+                        key={member.id}
+                        member={member}
+                        onClick={() => handleMemberClick(member)}
+                    />
+                ))}
+            </div>
+
+            <SystemPromptEditor
+                isOpen={isEditorOpen}
+                onClose={() => setIsEditorOpen(false)}
+                member={selectedMember}
+                onSave={handleSave}
+            />
+        </div>
+    );
+}

package/components/team/index.ts

@@ -0,0 +1,2 @@
+export { TeamPanel } from './TeamPanel';
+export { MemberCard, SystemPromptEditor } from './MemberCard';

package/components/ui/ApiKeyModal.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+
+interface ApiKeyModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSubmit: (apiKey: string) => void;
+}
+
+export function ApiKeyModal({ isOpen, onClose, onSubmit }: ApiKeyModalProps) {
+    const [apiKey, setApiKey] = useState('');
+    const [showKey, setShowKey] = useState(false);
+
+    useEffect(() => {
+        if (isOpen) {
+            setApiKey('');
+        }
+    }, [isOpen]);
+
+    const handleSubmit = () => {
+        if (apiKey.trim()) {
+            onSubmit(apiKey.trim());
+            onClose();
+        }
+    };
+
+    if (!isOpen) return null;
+
+    return (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+            <div className="bg-secondary border border-primary rounded-lg p-6 max-w-lg w-full mx-4 shadow-xl">
+                <h2 className="text-xl font-bold text-primary mb-4">🔑 OpenAI API Key Required</h2>
+
+                <div className="space-y-4">
+                    <p className="text-sm text-muted">
+                        To use AI agents, you need to provide an OpenAI API key. This key will be stored locally in your browser.
+                    </p>
+
+                    <div className="bg-tertiary border border-primary rounded-lg p-4 space-y-2">
+                        <h3 className="font-semibold text-primary text-sm">📖 How to get your API key:</h3>
+                        <ol className="text-xs text-muted space-y-1 list-decimal list-inside">
+                            <li>Visit <a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener noreferrer" className="text-indigo-400 hover:underline">platform.openai.com/api-keys</a></li>
+                            <li>Sign in or create an OpenAI account</li>
+                            <li>Click "Create new secret key"</li>
+                            <li>Give it a name (e.g., "Olly Molly")</li>
+                            <li>Copy the key (starts with "sk-")</li>
+                            <li>Paste it below</li>
+                        </ol>
+                    </div>
+
+                    <div className="space-y-2">
+                        <label className="text-sm font-medium text-primary">API Key</label>
+                        <div className="relative">
+                            <Input
+                                type={showKey ? 'text' : 'password'}
+                                value={apiKey}
+                                onChange={(e) => setApiKey(e.target.value)}
+                                placeholder="sk-..."
+                                className="pr-20"
+                                onKeyDown={(e) => {
+                                    if (e.key === 'Enter') handleSubmit();
+                                }}
+                                autoFocus
+                            />
+                            <button
+                                type="button"
+                                onClick={() => setShowKey(!showKey)}
+                                className="absolute right-2 top-1/2 -translate-y-1/2 text-xs text-muted hover:text-primary"
+                            >
+                                {showKey ? '🙈 Hide' : '👁️ Show'}
+                            </button>
+                        </div>
+                        <p className="text-xs text-amber-400">
+                            ⚠️ Your API key is stored only in your browser's localStorage and never sent to our servers.
+                        </p>
+                    </div>
+
+                    <div className="flex gap-3 pt-2">
+                        <Button
+                            onClick={handleSubmit}
+                            variant="primary"
+                            disabled={!apiKey.trim()}
+                            className="flex-1"
+                        >
+                            💾 Save API Key
+                        </Button>
+                        <Button
+                            onClick={onClose}
+                            variant="ghost"
+                        >
+                            Cancel
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

package/components/ui/Avatar.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+interface AvatarProps {
+    src?: string | null;
+    name: string;
+    size?: 'sm' | 'md' | 'lg';
+    emoji?: string | null;
+    badge?: string | null;
+}
+
+export function Avatar({ src, name, size = 'md', emoji, badge }: AvatarProps) {
+    const sizes = {
+        sm: 'w-6 h-6 text-xs',
+        md: 'w-8 h-8 text-sm',
+        lg: 'w-12 h-12 text-lg',
+    };
+
+    const badgeSizes = {
+        sm: 'w-3 h-3 text-[8px]',
+        md: 'w-4 h-4 text-[10px]',
+        lg: 'w-6 h-6 text-sm',
+    };
+
+    // Get initials from name
+    const initials = name
+        .split(' ')
+        .map(n => n[0])
+        .join('')
+        .toUpperCase()
+        .slice(0, 2);
+
+    // Generate consistent color based on name
+    const colors = [
+        'from-violet-500 to-purple-600',
+        'from-blue-500 to-indigo-600',
+        'from-emerald-500 to-teal-600',
+        'from-amber-500 to-orange-600',
+        'from-rose-500 to-pink-600',
+    ];
+    const colorIndex = name.charCodeAt(0) % colors.length;
+
+    const Badge = () => {
+        if (!badge) return null;
+        return (
+            <div className={`
+        absolute -bottom-1 -right-1
+        ${badgeSizes[size]} rounded-full flex items-center justify-center
+        bg-white dark:bg-slate-800 shadow-sm border border-slate-200 dark:border-slate-700
+      `}>
+                <span>{badge}</span>
+            </div>
+        );
+    };
+
+    if (src) {
+        return (
+            <div className="relative inline-block">
+                <img
+                    src={src}
+                    alt={name}
+                    className={`${sizes[size]} rounded-full object-cover bg-white`}
+                />
+                <Badge />
+            </div>
+        );
+    }
+
+    if (emoji) {
+        return (
+            <div className="relative inline-block">
+                <div className={`
+          ${sizes[size]} rounded-full flex items-center justify-center
+          bg-gradient-to-br ${colors[colorIndex]}
+        `}>
+                    <span className={size === 'lg' ? 'text-2xl' : size === 'md' ? 'text-lg' : 'text-base'}>
+                        {emoji}
+                    </span>
+                </div>
+                <Badge />
+            </div>
+        );
+    }
+
+    return (
+        <div className="relative inline-block">
+            <div className={`
+        ${sizes[size]} rounded-full flex items-center justify-center font-medium text-white
+        bg-gradient-to-br ${colors[colorIndex]}
+      `}>
+                {initials}
+            </div>
+            <Badge />
+        </div>
+    );
+}

package/components/ui/Badge.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+interface BadgeProps {
+    children: React.ReactNode;
+    variant?: 'default' | 'success' | 'warning' | 'danger' | 'info' | 'purple';
+    size?: 'sm' | 'md';
+}
+
+export function Badge({ children, variant = 'default', size = 'sm' }: BadgeProps) {
+    const variants = {
+        default: 'text-[var(--text-tertiary)] bg-transparent border-[var(--border-primary)]',
+        success: 'text-[var(--status-done-text)] bg-transparent border-[var(--status-done-text)]/30',
+        warning: 'text-[var(--priority-medium-text)] bg-transparent border-[var(--priority-medium-text)]/30',
+        danger: 'text-[var(--priority-high-text)] bg-transparent border-[var(--priority-high-text)]/30',
+        info: 'text-[var(--status-progress-text)] bg-transparent border-[var(--status-progress-text)]/30',
+        purple: 'text-[var(--status-review-text)] bg-transparent border-[var(--status-review-text)]/30',
+    };
+
+    const sizes = {
+        sm: 'px-1.5 py-0.5 text-[10px]',
+        md: 'px-2 py-0.5 text-xs',
+    };
+
+    return (
+        <span className={`
+            inline-flex items-center font-medium border uppercase tracking-wide
+            ${variants[variant]} ${sizes[size]}
+        `}>
+            {children}
+        </span>
+    );
+}
+
+// Status-specific badge
+export function StatusBadge({ status }: { status: string }) {
+    const statusConfig: Record<string, { label: string; variant: BadgeProps['variant'] }> = {
+        TODO: { label: 'Todo', variant: 'default' },
+        IN_PROGRESS: { label: 'Progress', variant: 'info' },
+        IN_REVIEW: { label: 'Review', variant: 'purple' },
+        COMPLETE: { label: 'Done', variant: 'success' },
+        ON_HOLD: { label: 'Hold', variant: 'warning' },
+    };
+
+    const config = statusConfig[status] || { label: status, variant: 'default' as const };
+    return <Badge variant={config.variant}>{config.label}</Badge>;
+}
+
+// Priority badge
+export function PriorityBadge({ priority }: { priority: string }) {
+    const priorityConfig: Record<string, { label: string; variant: BadgeProps['variant'] }> = {
+        LOW: { label: 'Low', variant: 'default' },
+        MEDIUM: { label: 'Med', variant: 'warning' },
+        HIGH: { label: 'High', variant: 'danger' },
+        CRITICAL: { label: '!', variant: 'danger' },
+    };
+
+    const config = priorityConfig[priority] || { label: priority, variant: 'default' as const };
+    return <Badge variant={config.variant}>{config.label}</Badge>;
+}