olly-molly 0.1.0

package/app/globals.css

@@ -0,0 +1,318 @@
+@import "tailwindcss";
+
+/* ================================
+   DESIGN SYSTEM - Minimal Paper
+   Inspired by fontshare.com
+   ================================ */
+
+/* Light theme (default) - Minimal cream aesthetic */
+:root,
+[data-theme="light"] {
+  /* Backgrounds - cream/eggshell tones */
+  --bg-primary: #F5F4EE;
+  --bg-secondary: #EFEDE5;
+  --bg-tertiary: #E8E6DC;
+  --bg-card: #FAFAF7;
+  --bg-card-hover: #F5F4EE;
+  --bg-column: #F5F4EE;
+  
+  /* Borders - subtle, thin lines */
+  --border-primary: #E0DED6;
+  --border-secondary: #D0CEC4;
+  --border-accent: #1A1A1A;
+  
+  /* Text - high contrast black/gray */
+  --text-primary: #1A1A1A;
+  --text-secondary: #4A4A4A;
+  --text-tertiary: #7A7A7A;
+  --text-muted: #9A9A9A;
+  
+  /* Accent - minimal, just black */
+  --accent-primary: #1A1A1A;
+  --accent-secondary: #3A3A3A;
+  --accent-light: #E0DED6;
+  
+  /* Status colors - muted, minimal */
+  --status-todo: #F5F4EE;
+  --status-todo-text: #7A7A7A;
+  --status-progress: #FFF8E7;
+  --status-progress-text: #996B00;
+  --status-review: #F5F0FF;
+  --status-review-text: #6B4FA0;
+  --status-done: #F0F7F0;
+  --status-done-text: #2D6A2D;
+  
+  /* Priority colors - subtle */
+  --priority-low: #F5F4EE;
+  --priority-low-text: #7A7A7A;
+  --priority-medium: #FFF8E7;
+  --priority-medium-text: #996B00;
+  --priority-high: #FFF0F0;
+  --priority-high-text: #B03030;
+  --priority-critical: #FFE0E0;
+  --priority-critical-text: #901010;
+  
+  /* Shadows - minimal to none */
+  --shadow-sm: none;
+  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.04);
+  --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.06);
+  --shadow-card: none;
+}
+
+/* Dark theme - Inverted minimal */
+[data-theme="dark"] {
+  /* Backgrounds */
+  --bg-primary: #141414;
+  --bg-secondary: #1C1C1C;
+  --bg-tertiary: #242424;
+  --bg-card: #1C1C1C;
+  --bg-card-hover: #242424;
+  --bg-column: #1C1C1C;
+  
+  /* Borders */
+  --border-primary: #2A2A2A;
+  --border-secondary: #3A3A3A;
+  --border-accent: #FFFFFF;
+  
+  /* Text */
+  --text-primary: #F5F4EE;
+  --text-secondary: #C0C0C0;
+  --text-tertiary: #8A8A8A;
+  --text-muted: #5A5A5A;
+  
+  /* Accents */
+  --accent-primary: #FFFFFF;
+  --accent-secondary: #E0E0E0;
+  --accent-light: #2A2A2A;
+  
+  /* Status colors - dark variants */
+  --status-todo: #1C1C1C;
+  --status-todo-text: #8A8A8A;
+  --status-progress: #2A2517;
+  --status-progress-text: #E0B030;
+  --status-review: #251A2A;
+  --status-review-text: #B090E0;
+  --status-done: #1A2A1A;
+  --status-done-text: #70C070;
+  
+  /* Priority colors - dark variants */
+  --priority-low: #1C1C1C;
+  --priority-low-text: #8A8A8A;
+  --priority-medium: #2A2517;
+  --priority-medium-text: #E0B030;
+  --priority-high: #2A1717;
+  --priority-high-text: #E07070;
+  --priority-critical: #3A1A1A;
+  --priority-critical-text: #FF8080;
+  
+  /* Shadows */
+  --shadow-sm: none;
+  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.2);
+  --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.3);
+  --shadow-card: none;
+}
+
+/* Tailwind theme integration */
+@theme inline {
+  --color-background: var(--bg-primary);
+  --color-foreground: var(--text-primary);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+/* ================================
+   BASE STYLES
+   ================================ */
+
+html {
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+body {
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ================================
+   TYPOGRAPHY SYSTEM
+   ================================ */
+
+.text-display {
+  font-size: 2.5rem;
+  font-weight: 500;
+  line-height: 1.1;
+  letter-spacing: -0.03em;
+}
+
+.text-heading-1 {
+  font-size: 1.75rem;
+  font-weight: 500;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+}
+
+.text-heading-2 {
+  font-size: 1.25rem;
+  font-weight: 500;
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+}
+
+.text-heading-3 {
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+.text-body-lg {
+  font-size: 1rem;
+  line-height: 1.6;
+}
+
+.text-body {
+  font-size: 0.875rem;
+  line-height: 1.6;
+}
+
+.text-body-sm {
+  font-size: 0.8125rem;
+  line-height: 1.5;
+}
+
+.text-caption {
+  font-size: 0.75rem;
+  line-height: 1.4;
+  letter-spacing: 0.01em;
+}
+
+/* ================================
+   UTILITY CLASSES
+   ================================ */
+
+/* Background utilities */
+.bg-primary { background-color: var(--bg-primary) !important; }
+.bg-secondary { background-color: var(--bg-secondary) !important; }
+.bg-tertiary { background-color: var(--bg-tertiary) !important; }
+.bg-card { background-color: var(--bg-card) !important; }
+.bg-column { background-color: var(--bg-column) !important; }
+
+/* Text utilities */
+.text-primary { color: var(--text-primary) !important; }
+.text-secondary { color: var(--text-secondary) !important; }
+.text-tertiary { color: var(--text-tertiary) !important; }
+.text-muted { color: var(--text-muted) !important; }
+.text-accent { color: var(--accent-primary) !important; }
+
+/* Border utilities */
+.border-primary { border-color: var(--border-primary) !important; }
+.border-secondary { border-color: var(--border-secondary) !important; }
+.border-accent { border-color: var(--border-accent) !important; }
+
+/* ================================
+   SCROLLBAR STYLING
+   ================================ */
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border-secondary);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--text-muted);
+}
+
+/* ================================
+   ANIMATIONS
+   ================================ */
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes zoom-in-95 {
+  from { 
+    opacity: 0;
+    transform: scale(0.98);
+  }
+  to { 
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes gentle-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.animate-in {
+  animation-duration: 150ms;
+  animation-timing-function: ease-out;
+  animation-fill-mode: forwards;
+}
+
+.fade-in { animation-name: fade-in; }
+.zoom-in-95 { animation-name: zoom-in-95; }
+.slide-up { animation-name: slide-up; }
+.gentle-pulse { animation: gentle-pulse 2s ease-in-out infinite; }
+
+/* ================================
+   LINE CLAMP
+   ================================ */
+
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.line-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* ================================
+   MINIMAL BORDER STYLE
+   ================================ */
+
+.border-thin {
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--border-primary);
+}
+
+.divider {
+  height: 1px;
+  background-color: var(--border-primary);
+  width: 100%;
+}

package/app/layout.tsx

@@ -0,0 +1,37 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import { ThemeProvider } from "@/components/ThemeProvider";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Olly Molly",
+  description: "Manage your AI development team with Olly Molly",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        <ThemeProvider>
+          {children}
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

package/app/page.tsx

@@ -0,0 +1,331 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import Image from 'next/image';
+import { KanbanBoard, TicketSidebar } from '@/components/kanban';
+import { TeamPanel } from '@/components/team';
+import { ThemeToggle } from '@/components/ThemeToggle';
+import { PMRequestModal } from '@/components/pm';
+import { ProjectSelector } from '@/components/project';
+import { Button } from '@/components/ui/Button';
+import { ResizablePane } from '@/components/ui/ResizablePane';
+import { ApiKeyModal } from '@/components/ui/ApiKeyModal';
+
+interface RunningJob {
+  id: string;
+  ticketId: string;
+  agentName: string;
+  status: 'running' | 'completed' | 'failed';
+}
+interface Member {
+  id: string;
+  role: string;
+  name: string;
+  avatar?: string | null;
+  system_prompt: string;
+}
+
+interface Ticket {
+  id: string;
+  title: string;
+  description?: string | null;
+  status: string;
+  priority: string;
+  assignee_id?: string | null;
+  assignee?: Member | null;
+}
+
+interface Project {
+  id: string;
+  name: string;
+  path: string;
+  is_active: number;
+}
+
+export default function Dashboard() {
+  const [members, setMembers] = useState<Member[]>([]);
+  const [tickets, setTickets] = useState<Ticket[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [pmModalOpen, setPmModalOpen] = useState(false);
+  const [activeProject, setActiveProject] = useState<Project | null>(null);
+  const [selectedTicket, setSelectedTicket] = useState<Ticket | null>(null);
+  const [ticketSidebarOpen, setTicketSidebarOpen] = useState(false);
+  const [apiKeyModalOpen, setApiKeyModalOpen] = useState(false);
+  const [runningJobs, setRunningJobs] = useState<RunningJob[]>([]);
+
+  // Check for API key on mount
+  useEffect(() => {
+    const storedKey = localStorage.getItem('openai_api_key');
+    if (!storedKey) {
+      // Check if there's an env variable
+      fetch('/api/check-api-key')
+        .then(res => res.json())
+        .then(data => {
+          if (!data.hasKey) {
+            setApiKeyModalOpen(true);
+          }
+        })
+        .catch(() => {
+          // If check fails, show modal
+          setApiKeyModalOpen(true);
+        });
+    }
+  }, []);
+
+  // Poll for running jobs
+  useEffect(() => {
+    const fetchRunningJobs = async () => {
+      try {
+        const res = await fetch('/api/agent/status');
+        const data = await res.json();
+        setRunningJobs(data.jobs || []);
+      } catch (error) {
+        console.error('Failed to fetch running jobs:', error);
+      }
+    };
+    fetchRunningJobs();
+    const interval = setInterval(fetchRunningJobs, 3000);
+    return () => clearInterval(interval);
+  }, []);
+
+  // Fetch data
+  const fetchData = useCallback(async (projectId?: string) => {
+    try {
+      const ticketUrl = projectId
+        ? `/api/tickets?projectId=${projectId}`
+        : '/api/tickets';
+      const [membersRes, ticketsRes] = await Promise.all([
+        fetch('/api/members'),
+        fetch(ticketUrl),
+      ]);
+      const [membersData, ticketsData] = await Promise.all([
+        membersRes.json(),
+        ticketsRes.json(),
+      ]);
+      setMembers(membersData);
+      setTickets(ticketsData);
+    } catch (error) {
+      console.error('Failed to fetch data:', error);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData(activeProject?.id);
+  }, [fetchData, activeProject]);
+
+  const handleTicketCreate = useCallback(async (data: Partial<Ticket>) => {
+    try {
+      const res = await fetch('/api/tickets', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          ...data,
+          project_id: activeProject?.id,
+        }),
+      });
+      const newTicket = await res.json();
+      setTickets(prev => [newTicket, ...prev]);
+    } catch (error) {
+      console.error('Failed to create ticket:', error);
+    }
+  }, [activeProject]);
+
+  const handleTicketUpdate = useCallback(async (id: string, data: Partial<Ticket>) => {
+    try {
+      const res = await fetch(`/api/tickets/${id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+      });
+      const updatedTicket = await res.json();
+      setTickets(prev => prev.map(t => t.id === id ? updatedTicket : t));
+    } catch (error) {
+      console.error('Failed to update ticket:', error);
+    }
+  }, []);
+
+  const handleTicketDelete = useCallback(async (id: string) => {
+    try {
+      await fetch(`/api/tickets/${id}`, { method: 'DELETE' });
+      setTickets(prev => prev.filter(t => t.id !== id));
+    } catch (error) {
+      console.error('Failed to delete ticket:', error);
+    }
+  }, []);
+
+  const handleMemberUpdate = useCallback(async (id: string, systemPrompt: string) => {
+    try {
+      const res = await fetch(`/api/members/${id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ system_prompt: systemPrompt }),
+      });
+      const updatedMember = await res.json();
+      setMembers(prev => prev.map(m => m.id === id ? updatedMember : m));
+    } catch (error) {
+      console.error('Failed to update member:', error);
+    }
+  }, []);
+
+  const handlePMTicketsCreated = useCallback(() => {
+    fetchData(activeProject?.id); // Refresh all data for current project
+  }, [fetchData, activeProject]);
+
+  const handleProjectChange = useCallback((project: Project | null) => {
+    setActiveProject(project);
+  }, []);
+
+  const handleRefresh = useCallback(() => {
+    fetchData(activeProject?.id);
+  }, [fetchData, activeProject]);
+
+  const handleApiKeySubmit = (apiKey: string) => {
+    localStorage.setItem('openai_api_key', apiKey);
+    setApiKeyModalOpen(false);
+  };
+
+  const handleCreateTicket = () => {
+    handleTicketCreate({ title: 'New Ticket', status: 'TODO', priority: 'MEDIUM' });
+  };
+
+  const runningCount = runningJobs.filter(j => j.status === 'running').length;
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-[var(--bg-primary)] flex items-center justify-center">
+        <div className="flex flex-col items-center gap-3">
+          <div className="w-6 h-6 border-2 border-[var(--text-primary)] border-t-transparent rounded-full animate-spin" />
+          <p className="text-xs text-[var(--text-muted)]">Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-[var(--bg-primary)]">
+      {/* Header */}
+      <header className="sticky top-0 z-40 bg-[var(--bg-primary)] border-b border-[var(--border-primary)]">
+        <div className="px-4 py-2 flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <Image
+              src="/app-icon.png"
+              alt="Olly Molly"
+              width={28}
+              height={28}
+              className="opacity-80"
+            />
+            <h1 className="text-sm font-medium text-[var(--text-primary)]">Olly Molly</h1>
+            {runningCount > 0 && (
+              <span className="flex items-center gap-1.5 text-xs text-[var(--status-progress-text)]">
+                <span className="w-1.5 h-1.5 bg-[var(--status-progress-text)] rounded-full gentle-pulse" />
+                {runningCount} working
+              </span>
+            )}
+          </div>
+          <div className="flex items-center gap-2">
+            <ProjectSelector onProjectChange={handleProjectChange} />
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setPmModalOpen(true)}
+            >
+              PM 요청
+            </Button>
+            <Button
+              variant="primary"
+              size="sm"
+              onClick={handleCreateTicket}
+            >
+              + New
+            </Button>
+            <ThemeToggle />
+            <button
+              onClick={() => setSidebarOpen(!sidebarOpen)}
+              className="p-1.5 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={sidebarOpen
+                    ? "M11 19l-7-7 7-7m8 14l-7-7 7-7"
+                    : "M13 5l7 7-7 7M5 5l7 7-7 7"} />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <div className="flex h-[calc(100vh-45px)]">
+        <ResizablePane
+          defaultLeftWidth={ticketSidebarOpen ? 55 : 100}
+          minLeftWidth={30}
+          minRightWidth={25}
+          left={
+            <div className="h-full overflow-auto">
+              <KanbanBoard
+                tickets={tickets}
+                members={members}
+                onTicketCreate={handleTicketCreate}
+                onTicketUpdate={handleTicketUpdate}
+                onTicketDelete={handleTicketDelete}
+                hasActiveProject={!!activeProject}
+                onRefresh={handleRefresh}
+                onTicketSelect={(ticket) => {
+                  setSelectedTicket(ticket);
+                  setTicketSidebarOpen(true);
+                }}
+              />
+            </div>
+          }
+          right={
+            ticketSidebarOpen && selectedTicket ? (
+              <TicketSidebar
+                isOpen={ticketSidebarOpen}
+                onClose={() => {
+                  setTicketSidebarOpen(false);
+                  setSelectedTicket(null);
+                }}
+                ticket={selectedTicket}
+                members={members}
+                onTicketUpdate={handleTicketUpdate}
+                onTicketDelete={handleTicketDelete}
+                hasActiveProject={!!activeProject}
+              />
+            ) : (
+              <div className="h-full bg-secondary border-l border-primary flex items-center justify-center text-muted">
+                <p>Select a ticket to view details</p>
+              </div>
+            )
+          }
+        />
+
+        {/* Team Sidebar */}
+        <aside className={`
+          fixed right-0 top-[45px] bottom-0 w-72 bg-[var(--bg-secondary)] border-l border-[var(--border-primary)]
+          p-4 transition-transform duration-200 overflow-hidden z-20
+          ${sidebarOpen ? 'translate-x-0' : 'translate-x-full'}
+        `}>
+          <TeamPanel members={members} onUpdateMember={handleMemberUpdate} />
+        </aside>
+      </div>
+
+      {/* PM Request Modal */}
+      <PMRequestModal
+        isOpen={pmModalOpen}
+        onClose={() => setPmModalOpen(false)}
+        onTicketsCreated={handlePMTicketsCreated}
+        projectId={activeProject?.id}
+      />
+
+      {/* API Key Modal */}
+      <ApiKeyModal
+        isOpen={apiKeyModalOpen}
+        onClose={() => { }}
+        onSubmit={handleApiKeySubmit}
+      />
+    </div>
+  );
+}