idea-manager 0.1.2 → 0.3.0

package/src/components/task/TaskChat.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import { useState, useEffect, useRef, useCallback } from 'react';
+import type { ITaskConversation } from '@/types';
+
+export default function TaskChat({
+  basePath,
+  onApplyToPrompt,
+}: {
+  basePath: string;
+  onApplyToPrompt: (content: string) => void;
+}) {
+  const [messages, setMessages] = useState<ITaskConversation[]>([]);
+  const [input, setInput] = useState('');
+  const [loading, setLoading] = useState(false);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    fetch(`${basePath}/chat`)
+      .then(r => r.json())
+      .then(data => setMessages(Array.isArray(data) ? data : []));
+  }, [basePath]);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  const send = useCallback(async () => {
+    const text = input.trim();
+    if (!text || loading) return;
+
+    setInput('');
+    setLoading(true);
+
+    // Optimistic user message
+    const tempId = `temp-${Date.now()}`;
+    const userMsg: ITaskConversation = {
+      id: tempId, task_id: '', role: 'user', content: text,
+      created_at: new Date().toISOString(),
+    };
+    setMessages(prev => [...prev, userMsg]);
+
+    try {
+      const res = await fetch(`${basePath}/chat`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ message: text }),
+      });
+      if (res.ok) {
+        const data = await res.json();
+        setMessages(prev => {
+          const withoutTemp = prev.filter(m => m.id !== tempId);
+          return [...withoutTemp, data.userMessage, data.aiMessage];
+        });
+      }
+    } catch { /* silent */ }
+    setLoading(false);
+    inputRef.current?.focus();
+  }, [input, loading, basePath]);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      send();
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-full border-t border-border">
+      <div className="flex items-center justify-between px-3 py-1.5 border-b border-border">
+        <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">AI Chat</span>
+      </div>
+
+      {/* Messages */}
+      <div className="flex-1 overflow-y-auto px-3 py-2 space-y-2 min-h-0">
+        {messages.length === 0 && !loading && (
+          <div className="text-sm text-muted-foreground text-center py-4">
+            Ask AI to help refine your task or prompt
+          </div>
+        )}
+        {messages.map((msg) => (
+          <div key={msg.id} className={`flex flex-col ${msg.role === 'user' ? 'items-end' : 'items-start'}`}>
+            <div className={`max-w-[90%] px-3 py-2 rounded-lg text-sm leading-relaxed whitespace-pre-wrap ${
+              msg.role === 'user'
+                ? 'bg-accent text-white rounded-br-sm'
+                : 'bg-muted text-foreground rounded-bl-sm'
+            }`}>
+              {msg.content}
+            </div>
+            {msg.role === 'assistant' && (
+              <button
+                onClick={() => onApplyToPrompt(msg.content)}
+                className="text-xs text-muted-foreground hover:text-primary mt-0.5 px-1 transition-colors"
+              >
+                Apply to prompt
+              </button>
+            )}
+          </div>
+        ))}
+        {loading && (
+          <div className="flex gap-1 px-2 py-2">
+            <div className="w-1.5 h-1.5 rounded-full bg-muted-foreground animate-bounce" style={{ animationDelay: '0ms' }} />
+            <div className="w-1.5 h-1.5 rounded-full bg-muted-foreground animate-bounce" style={{ animationDelay: '150ms' }} />
+            <div className="w-1.5 h-1.5 rounded-full bg-muted-foreground animate-bounce" style={{ animationDelay: '300ms' }} />
+          </div>
+        )}
+        <div ref={messagesEndRef} />
+      </div>
+
+      {/* Input */}
+      <div className="flex gap-1.5 px-2 py-2 border-t border-border">
+        <textarea
+          ref={inputRef}
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="Ask AI..."
+          rows={1}
+          className="flex-1 bg-input border border-border rounded-md px-3 py-2 text-sm
+                     text-foreground resize-none focus:border-primary focus:outline-none"
+        />
+        <button
+          onClick={send}
+          disabled={!input.trim() || loading}
+          className="px-3 py-2 bg-accent text-white text-sm rounded-md
+                     disabled:opacity-40 hover:bg-accent/80 transition-colors flex-shrink-0"
+        >
+          Send
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/components/task/TaskDetail.tsx

@@ -0,0 +1,205 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import type { ITask, TaskStatus, ItemPriority } from '@/types';
+import StatusFlow from './StatusFlow';
+import PromptEditor from './PromptEditor';
+import TaskChat from './TaskChat';
+
+export default function TaskDetail({
+  task,
+  projectId,
+  subProjectId,
+  onUpdate,
+  onDelete,
+}: {
+  task: ITask;
+  projectId: string;
+  subProjectId: string;
+  onUpdate: (data: Partial<ITask>) => void;
+  onDelete: () => void;
+}) {
+  const [title, setTitle] = useState(task.title);
+  const [description, setDescription] = useState(task.description);
+  const [promptContent, setPromptContent] = useState('');
+  const [refining, setRefining] = useState(false);
+  const [editingTitle, setEditingTitle] = useState(false);
+  const [showChat, setShowChat] = useState(false);
+
+  const basePath = `/api/projects/${projectId}/sub-projects/${subProjectId}/tasks/${task.id}`;
+
+  // Load prompt
+  useEffect(() => {
+    setTitle(task.title);
+    setDescription(task.description);
+    setShowChat(false);
+    fetch(`${basePath}/prompt`)
+      .then(r => r.json())
+      .then(data => setPromptContent(data.content || ''));
+  }, [task.id, task.title, task.description, basePath]);
+
+  const saveTitle = useCallback(() => {
+    const trimmed = title.trim();
+    if (trimmed && trimmed !== task.title) {
+      onUpdate({ title: trimmed });
+    } else {
+      setTitle(task.title);
+    }
+    setEditingTitle(false);
+  }, [title, task.title, onUpdate]);
+
+  const saveDescription = useCallback(() => {
+    if (description !== task.description) {
+      onUpdate({ description });
+    }
+  }, [description, task.description, onUpdate]);
+
+  const savePrompt = useCallback(async (content: string) => {
+    setPromptContent(content);
+    await fetch(`${basePath}/prompt`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ content, prompt_type: 'manual' }),
+    });
+  }, [basePath]);
+
+  const handleRefine = useCallback(async () => {
+    setRefining(true);
+    try {
+      const res = await fetch(`${basePath}/chat`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          message: `Please refine and improve this prompt for a coding assistant. Current prompt: ${promptContent || '(empty - generate one based on the task)'}. Task: ${task.title}. Description: ${task.description}. Output ONLY the improved prompt text, nothing else.`,
+        }),
+      });
+      if (res.ok) {
+        const data = await res.json();
+        const refined = data.aiMessage?.content || '';
+        if (refined) {
+          await savePrompt(refined);
+        }
+      }
+    } catch { /* silent */ }
+    setRefining(false);
+  }, [basePath, promptContent, task.title, task.description, savePrompt]);
+
+  const handleApplyToPrompt = useCallback(async (content: string) => {
+    await savePrompt(content);
+  }, [savePrompt]);
+
+  const priorities: ItemPriority[] = ['high', 'medium', 'low'];
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Upper: Task info + Prompt */}
+      <div className={`overflow-y-auto ${showChat ? 'flex-1 min-h-0' : 'flex-1'}`}>
+        <div className="p-4 space-y-4">
+          {/* Title */}
+          <div>
+            {editingTitle ? (
+              <input
+                value={title}
+                onChange={(e) => setTitle(e.target.value)}
+                onBlur={saveTitle}
+                onKeyDown={(e) => { if (e.key === 'Enter') saveTitle(); if (e.key === 'Escape') { setTitle(task.title); setEditingTitle(false); } }}
+                className="w-full bg-transparent text-xl font-semibold border-b border-primary
+                           focus:outline-none pb-1 text-foreground"
+                autoFocus
+              />
+            ) : (
+              <h2
+                onClick={() => setEditingTitle(true)}
+                className="text-xl font-semibold cursor-text hover:text-primary transition-colors"
+              >
+                {task.title}
+              </h2>
+            )}
+          </div>
+
+          {/* Status + Priority + Today */}
+          <div className="flex items-center gap-4 flex-wrap">
+            <StatusFlow status={task.status} onChange={(status: TaskStatus) => onUpdate({ status })} />
+            <div className="flex items-center gap-1">
+              {priorities.map(p => (
+                <button
+                  key={p}
+                  onClick={() => onUpdate({ priority: p })}
+                  className={`px-2.5 py-1 text-sm rounded transition-colors ${
+                    task.priority === p
+                      ? p === 'high' ? 'bg-destructive/20 text-destructive' : p === 'medium' ? 'bg-warning/20 text-warning' : 'bg-muted text-muted-foreground'
+                      : 'text-muted-foreground/40 hover:text-muted-foreground'
+                  }`}
+                >
+                  {p}
+                </button>
+              ))}
+            </div>
+            <button
+              onClick={() => onUpdate({ is_today: !task.is_today })}
+              className={`text-sm px-2.5 py-1 rounded transition-colors ${
+                task.is_today
+                  ? 'bg-primary/20 text-primary'
+                  : 'text-muted-foreground hover:text-foreground'
+              }`}
+            >
+              {task.is_today ? 'Today *' : 'Mark today'}
+            </button>
+          </div>
+
+          {/* Description */}
+          <div>
+            <textarea
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              onBlur={saveDescription}
+              placeholder="Background, conditions, notes..."
+              className="w-full bg-input border border-border rounded-lg px-3 py-2.5 text-sm
+                         focus:border-primary focus:outline-none text-foreground resize-none min-h-[60px]
+                         leading-relaxed"
+              rows={2}
+            />
+          </div>
+
+          {/* Prompt */}
+          <PromptEditor
+            content={promptContent}
+            onSave={savePrompt}
+            onRefine={handleRefine}
+            refining={refining}
+          />
+
+          {/* Actions */}
+          <div className="pt-4 border-t border-border flex items-center justify-between">
+            <button
+              onClick={() => setShowChat(!showChat)}
+              className={`text-xs px-2.5 py-1 rounded-md transition-colors border ${
+                showChat
+                  ? 'bg-accent/20 text-accent border-accent/30'
+                  : 'text-muted-foreground hover:text-foreground border-border hover:border-muted-foreground'
+              }`}
+            >
+              {showChat ? 'Hide AI Chat' : 'AI Chat'}
+            </button>
+            <button
+              onClick={onDelete}
+              className="text-xs text-muted-foreground hover:text-destructive transition-colors"
+            >
+              Delete task
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Lower: AI Chat */}
+      {showChat && (
+        <div className="h-[45%] flex-shrink-0">
+          <TaskChat
+            basePath={basePath}
+            onApplyToPrompt={handleApplyToPrompt}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/task/TaskList.tsx

@@ -0,0 +1,119 @@
+'use client';
+
+import { useState } from 'react';
+import type { ITask, TaskStatus } from '@/types';
+import { statusIcon } from './StatusFlow';
+
+const PRIORITY_COLORS: Record<string, string> = {
+  high: 'bg-destructive',
+  medium: 'bg-warning',
+  low: 'bg-muted-foreground',
+};
+
+export default function TaskList({
+  tasks,
+  selectedTaskId,
+  onSelect,
+  onCreate,
+  onStatusChange,
+  onTodayToggle,
+}: {
+  tasks: ITask[];
+  selectedTaskId: string | null;
+  onSelect: (taskId: string) => void;
+  onCreate: (title: string) => void;
+  onStatusChange: (taskId: string, status: TaskStatus) => void;
+  onTodayToggle: (taskId: string, isToday: boolean) => void;
+}) {
+  const [newTitle, setNewTitle] = useState('');
+  const [adding, setAdding] = useState(false);
+
+  const handleAdd = () => {
+    const title = newTitle.trim();
+    if (!title) return;
+    onCreate(title);
+    setNewTitle('');
+    setAdding(false);
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex-1 overflow-y-auto">
+        {tasks.length === 0 && !adding && (
+          <div className="text-center py-8 text-muted-foreground text-xs">
+            No tasks yet
+          </div>
+        )}
+        {tasks.map((task) => (
+          <div
+            key={task.id}
+            onClick={() => onSelect(task.id)}
+            className={`flex items-center gap-2 px-3 py-2 cursor-pointer transition-colors text-sm border-l-2 ${
+              selectedTaskId === task.id
+                ? 'bg-card-hover border-l-primary'
+                : 'border-l-transparent hover:bg-card-hover/50'
+            }`}
+          >
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                const nextStatus = getNextStatus(task.status);
+                onStatusChange(task.id, nextStatus);
+              }}
+              className="flex-shrink-0 text-sm"
+              title={`Status: ${task.status}`}
+            >
+              {statusIcon(task.status)}
+            </button>
+            <span className={`tree-priority-dot ${PRIORITY_COLORS[task.priority]}`} />
+            <span className={`flex-1 truncate ${task.status === 'done' ? 'text-muted-foreground line-through' : ''}`}>
+              {task.title}
+            </span>
+            {task.is_today && (
+              <button
+                onClick={(e) => { e.stopPropagation(); onTodayToggle(task.id, false); }}
+                className="text-xs flex-shrink-0" title="Remove from today"
+              >
+                *
+              </button>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {adding ? (
+        <div className="p-2 border-t border-border">
+          <input
+            type="text"
+            value={newTitle}
+            onChange={(e) => setNewTitle(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') handleAdd();
+              if (e.key === 'Escape') { setNewTitle(''); setAdding(false); }
+            }}
+            placeholder="Task title..."
+            className="w-full bg-input border border-border rounded px-2 py-1.5 text-sm
+                       focus:border-primary focus:outline-none text-foreground"
+            autoFocus
+          />
+        </div>
+      ) : (
+        <button
+          data-add-task
+          onClick={() => setAdding(true)}
+          className="p-2 text-xs text-muted-foreground hover:text-foreground
+                     border-t border-border transition-colors text-left"
+        >
+          + Add task <span className="text-muted-foreground/50 ml-1">T</span>
+        </button>
+      )}
+    </div>
+  );
+}
+
+function getNextStatus(current: TaskStatus): TaskStatus {
+  const flow: TaskStatus[] = ['idea', 'writing', 'submitted', 'testing', 'done'];
+  const idx = flow.indexOf(current);
+  if (idx === -1) return 'idea';
+  return flow[(idx + 1) % flow.length];
+}

package/src/components/tree/CardView.tsx

@@ -0,0 +1,206 @@
+'use client';
+
+import { useState } from 'react';
+import StatusBadge from './StatusBadge';
+
+interface IItemTree {
+  id: string;
+  title: string;
+  description: string;
+  item_type: string;
+  priority: string;
+  status: string;
+  is_locked: boolean;
+  is_pinned: boolean;
+  children: IItemTree[];
+}
+
+interface CardViewProps {
+  items: IItemTree[];
+  onItemUpdate: (itemId: string, data: Record<string, unknown>) => void;
+  onItemDelete: (itemId: string) => void;
+}
+
+const typeConfig: Record<string, { icon: string; color: string }> = {
+  feature: { icon: '\u{1F4E6}', color: 'var(--primary)' },
+  task:    { icon: '\u{2705}', color: 'var(--success)' },
+  bug:     { icon: '\u{1F41B}', color: 'var(--destructive)' },
+  idea:    { icon: '\u{1F4A1}', color: 'var(--warning)' },
+  note:    { icon: '\u{1F4DD}', color: 'var(--muted-foreground)' },
+};
+
+function countAll(items: IItemTree[]): { total: number; done: number; inProgress: number; pending: number } {
+  let total = 0, done = 0, inProgress = 0, pending = 0;
+  for (const item of items) {
+    total++;
+    if (item.status === 'done') done++;
+    else if (item.status === 'in_progress') inProgress++;
+    else pending++;
+    const sub = countAll(item.children);
+    total += sub.total;
+    done += sub.done;
+    inProgress += sub.inProgress;
+    pending += sub.pending;
+  }
+  return { total, done, inProgress, pending };
+}
+
+function flattenChildren(item: IItemTree, maxDepth = 2, depth = 0): { item: IItemTree; depth: number }[] {
+  const result: { item: IItemTree; depth: number }[] = [];
+  for (const child of item.children) {
+    result.push({ item: child, depth });
+    if (child.children.length > 0 && depth < maxDepth - 1) {
+      result.push(...flattenChildren(child, maxDepth, depth + 1));
+    }
+  }
+  return result;
+}
+
+function ProjectCard({ item, onItemUpdate, onItemDelete }: {
+  item: IItemTree;
+  onItemUpdate: CardViewProps['onItemUpdate'];
+  onItemDelete: CardViewProps['onItemDelete'];
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const baseCfg = typeConfig[item.item_type] || typeConfig.note;
+  const isDone = item.status === 'done';
+  const cfg = isDone
+    ? { icon: '\u{2705}', color: 'var(--success)' }
+    : item.status === 'in_progress'
+      ? { icon: baseCfg.icon, color: 'var(--primary)' }
+      : baseCfg;
+  const stats = countAll(item.children);
+  const totalWithSelf = stats.total + 1;
+  const doneWithSelf = stats.done + (isDone ? 1 : 0);
+  const progressPct = totalWithSelf > 0 ? (doneWithSelf / totalWithSelf) * 100 : 0;
+  const flatChildren = flattenChildren(item);
+  const hasMore = flatChildren.length > 5;
+  const displayChildren = expanded ? flatChildren : flatChildren.slice(0, 5);
+
+  const progressColor = progressPct === 100 ? 'hsl(var(--success))'
+    : progressPct > 50 ? 'hsl(var(--primary))'
+    : 'hsl(var(--accent))';
+
+  return (
+    <div className="project-card" style={{ borderTopColor: `hsl(${cfg.color})`, borderTopWidth: '3px' }}>
+      <div className="project-card-header group">
+        <span className="project-card-icon">{cfg.icon}</span>
+        <div className="flex-1 min-w-0">
+          <div className="project-card-title">{item.title}</div>
+        </div>
+        <button
+          onClick={() => onItemDelete(item.id)}
+          className="text-[10px] text-muted-foreground/40 hover:text-destructive opacity-0 group-hover:opacity-100 transition-opacity px-1"
+          title="삭제"
+        >
+          ✕
+        </button>
+        <StatusBadge
+          status={item.status}
+          onStatusChange={(status) => onItemUpdate(item.id, { status })}
+        />
+      </div>
+
+      {item.description && (
+        <p className="project-card-desc">{item.description}</p>
+      )}
+
+      {/* Progress bar */}
+      {stats.total > 0 && (
+        <div className="project-card-progress">
+          <div
+            className="project-card-progress-fill"
+            style={{ width: `${progressPct}%`, background: progressColor }}
+          />
+        </div>
+      )}
+
+      {/* Stats */}
+      <div className="project-card-stats">
+        {stats.done > 0 && (
+          <span className="project-card-stat">
+            <span style={{ color: 'hsl(var(--success))' }}>●</span> {stats.done} 완료
+          </span>
+        )}
+        {stats.inProgress > 0 && (
+          <span className="project-card-stat">
+            <span style={{ color: 'hsl(var(--primary))' }}>●</span> {stats.inProgress} 진행
+          </span>
+        )}
+        {stats.pending > 0 && (
+          <span className="project-card-stat">
+            <span style={{ color: 'hsl(var(--muted-foreground))' }}>●</span> {stats.pending} 대기
+          </span>
+        )}
+        <span className="ml-auto">{stats.total}개 항목</span>
+      </div>
+
+      {/* Children list */}
+      {displayChildren.length > 0 && (
+        <div className="project-card-children">
+          {displayChildren.map(({ item: child, depth }) => {
+            const childBaseCfg = typeConfig[child.item_type] || typeConfig.note;
+            const childIcon = child.status === 'done' ? '\u{2705}' : childBaseCfg.icon;
+            const isDone = child.status === 'done';
+            return (
+              <div
+                key={child.id}
+                className={`project-card-child group/child ${isDone ? 'project-card-child-done' : ''}`}
+                style={{ paddingLeft: `${14 + depth * 16}px` }}
+              >
+                <span className="text-[11px]">{childIcon}</span>
+                <span className="flex-1 truncate">{child.title}</span>
+                <button
+                  onClick={() => onItemDelete(child.id)}
+                  className="text-[10px] text-muted-foreground/30 hover:text-destructive opacity-0 group-hover/child:opacity-100 transition-opacity px-0.5"
+                >
+                  ✕
+                </button>
+                <span className="tree-priority-dot flex-shrink-0" style={{
+                  background: child.priority === 'high' ? 'hsl(var(--destructive))'
+                    : child.priority === 'medium' ? 'hsl(var(--warning))'
+                    : 'hsl(var(--success))'
+                }} />
+                <StatusBadge
+                  status={child.status}
+                  onStatusChange={(status) => onItemUpdate(child.id, { status })}
+                />
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {/* Expand toggle */}
+      {hasMore && (
+        <div className="project-card-expand" onClick={() => setExpanded(!expanded)}>
+          {expanded ? '접기' : `+${flatChildren.length - 5}개 더 보기`}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function CardView({ items, onItemUpdate, onItemDelete }: CardViewProps) {
+  if (items.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full text-muted-foreground text-sm">
+        <div className="text-4xl mb-3">&#x1F5C2;</div>
+        <p>아직 구조화된 항목이 없습니다</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="card-grid">
+      {items.map((item) => (
+        <ProjectCard
+          key={item.id}
+          item={item}
+          onItemUpdate={onItemUpdate}
+          onItemDelete={onItemDelete}
+        />
+      ))}
+    </div>
+  );
+}