idea-manager 0.4.0 → 0.5.0

package/src/components/brainstorm/MemoPin.tsx

@@ -1,117 +0,0 @@
-'use client';
-
-import { useState, useRef, useEffect } from 'react';
-
-interface MemoPinProps {
-  question: string;
-  anchorText: string;
-  top: number;
-  left: number;
-  loading?: boolean;
-  onSendMessage?: (message: string) => void;
-}
-
-export default function MemoPin({ question, anchorText, top, left, loading, onSendMessage }: MemoPinProps) {
-  const [showTooltip, setShowTooltip] = useState(false);
-  const [open, setOpen] = useState(false);
-  const [input, setInput] = useState('');
-  const [replies, setReplies] = useState<{ role: 'user' | 'assistant'; text: string }[]>([]);
-  const popoverRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-
-  // Close popover on outside click
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e: MouseEvent) => {
-      if (popoverRef.current && !popoverRef.current.contains(e.target as Node)) {
-        setOpen(false);
-      }
-    };
-    document.addEventListener('mousedown', handler);
-    return () => document.removeEventListener('mousedown', handler);
-  }, [open]);
-
-  // Focus input when popover opens
-  useEffect(() => {
-    if (open) inputRef.current?.focus();
-  }, [open]);
-
-  const handleClick = () => {
-    setOpen(!open);
-    setShowTooltip(false);
-  };
-
-  const handleSubmit = () => {
-    const trimmed = input.trim();
-    if (!trimmed || loading) return;
-    setReplies(prev => [...prev, { role: 'user', text: trimmed }]);
-    setInput('');
-    onSendMessage?.(trimmed);
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      handleSubmit();
-    }
-  };
-
-  return (
-    <div
-      ref={popoverRef}
-      className="memo-pin"
-      style={{ top: `${top}px`, left: `${left}px` }}
-      onMouseEnter={() => !open && setShowTooltip(true)}
-      onMouseLeave={() => setShowTooltip(false)}
-    >
-      <span className="memo-pin-icon" onClick={handleClick}>&#x1F4CC;</span>
-
-      {/* Hover tooltip (only when popover is closed) */}
-      {showTooltip && !open && (
-        <div className="memo-tooltip">
-          <div className="memo-tooltip-anchor">&ldquo;{anchorText}&rdquo;</div>
-          <div className="memo-tooltip-question">{question}</div>
-        </div>
-      )}
-
-      {/* Click popover with inline chat */}
-      {open && (
-        <div className="memo-popover">
-          <div className="memo-popover-anchor">&ldquo;{anchorText}&rdquo;</div>
-          <div className="memo-popover-messages">
-            <div className="memo-popover-bubble memo-popover-bubble-ai">{question}</div>
-            {replies.map((r, i) => (
-              <div key={i} className={`memo-popover-bubble memo-popover-bubble-${r.role === 'user' ? 'user' : 'ai'}`}>
-                {r.text}
-              </div>
-            ))}
-            {loading && (
-              <div className="memo-popover-bubble memo-popover-bubble-ai chat-loading">
-                <span className="dot" /><span className="dot" /><span className="dot" />
-              </div>
-            )}
-          </div>
-          <div className="memo-popover-input-area">
-            <textarea
-              ref={inputRef}
-              value={input}
-              onChange={(e) => setInput(e.target.value)}
-              onKeyDown={handleKeyDown}
-              placeholder="답변 입력..."
-              rows={1}
-              disabled={loading}
-              className="memo-popover-input"
-            />
-            <button
-              onClick={handleSubmit}
-              disabled={!input.trim() || loading}
-              className="memo-popover-send"
-            >
-              전송
-            </button>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

package/src/components/tree/CardView.tsx

@@ -1,206 +0,0 @@
-'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>
-  );
-}

package/src/components/tree/ItemDetail.tsx

@@ -1,196 +0,0 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-
-interface ItemDetailProps {
-  itemId: string;
-  projectId: string;
-  title: string;
-  description: string;
-  itemType: string;
-  priority: string;
-  status: string;
-  isLocked: boolean;
-  depth: number;
-}
-
-interface IPrompt {
-  id: string;
-  content: string;
-  prompt_type: string;
-  version: number;
-}
-
-const typeLabels: Record<string, string> = {
-  feature: '기능',
-  task: '작업',
-  bug: '버그',
-  idea: '아이디어',
-  note: '메모',
-};
-
-const priorityLabels: Record<string, string> = {
-  high: '높음',
-  medium: '보통',
-  low: '낮음',
-};
-
-const statusLabels: Record<string, string> = {
-  pending: '대기',
-  in_progress: '진행 중',
-  done: '완료',
-};
-
-export default function ItemDetail({
-  itemId,
-  projectId,
-  title,
-  description,
-  itemType,
-  priority,
-  status,
-  isLocked,
-  depth,
-}: ItemDetailProps) {
-  const [prompt, setPrompt] = useState<IPrompt | null>(null);
-  const [loadingPrompt, setLoadingPrompt] = useState(false);
-  const [generating, setGenerating] = useState(false);
-  const [copied, setCopied] = useState(false);
-  const [editing, setEditing] = useState(false);
-  const [editContent, setEditContent] = useState('');
-
-  // Load existing prompt
-  useEffect(() => {
-    const loadPrompt = async () => {
-      setLoadingPrompt(true);
-      const res = await fetch(`/api/projects/${projectId}/items/${itemId}/prompt`);
-      if (res.ok) {
-        setPrompt(await res.json());
-      }
-      setLoadingPrompt(false);
-    };
-    loadPrompt();
-  }, [itemId, projectId]);
-
-  const handleGenerate = async () => {
-    setGenerating(true);
-    try {
-      const res = await fetch(`/api/projects/${projectId}/items/${itemId}/prompt`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({}),
-      });
-      if (res.ok) {
-        setPrompt(await res.json());
-      }
-    } finally {
-      setGenerating(false);
-    }
-  };
-
-  const handleCopy = async () => {
-    if (!prompt) return;
-    await navigator.clipboard.writeText(prompt.content);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
-
-  const handleSaveEdit = async () => {
-    if (!editContent.trim()) return;
-    setGenerating(true);
-    try {
-      const res = await fetch(`/api/projects/${projectId}/items/${itemId}/prompt`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ content: editContent }),
-      });
-      if (res.ok) {
-        setPrompt(await res.json());
-        setEditing(false);
-      }
-    } finally {
-      setGenerating(false);
-    }
-  };
-
-  return (
-    <div
-      className="item-detail"
-      style={{ marginLeft: `${depth * 20 + 8}px` }}
-    >
-      <p className="text-muted-foreground mb-2 text-xs">{description || '설명 없음'}</p>
-
-      <div className="flex gap-3 text-xs text-muted-foreground mb-3">
-        <span>유형: {typeLabels[itemType] || itemType}</span>
-        <span>우선순위: {priorityLabels[priority] || priority}</span>
-        <span>상태: {statusLabels[status] || status}</span>
-        <span>잠금: {isLocked ? '잠금' : '해제'}</span>
-      </div>
-
-      {/* Prompt section */}
-      <div className="prompt-section">
-        <div className="prompt-header">
-          <span className="text-xs font-medium text-muted-foreground">프롬프트</span>
-          <div className="flex gap-1">
-            {prompt && (
-              <>
-                <button onClick={handleCopy} className="prompt-action-btn" title="복사">
-                  {copied ? '복사됨' : '복사'}
-                </button>
-                <button
-                  onClick={() => { setEditing(!editing); setEditContent(prompt.content); }}
-                  className="prompt-action-btn"
-                  title="수정"
-                >
-                  {editing ? '취소' : '수정'}
-                </button>
-              </>
-            )}
-            <button
-              onClick={handleGenerate}
-              disabled={generating}
-              className="prompt-action-btn prompt-generate-btn"
-              title={prompt ? '재생성' : '생성'}
-            >
-              {generating ? '생성 중...' : prompt ? '재생성' : '생성'}
-            </button>
-          </div>
-        </div>
-
-        {loadingPrompt ? (
-          <p className="text-xs text-muted-foreground">로딩 중...</p>
-        ) : editing ? (
-          <div className="prompt-edit">
-            <textarea
-              value={editContent}
-              onChange={(e) => setEditContent(e.target.value)}
-              className="prompt-edit-textarea"
-              rows={4}
-            />
-            <button
-              onClick={handleSaveEdit}
-              disabled={generating}
-              className="prompt-action-btn prompt-generate-btn mt-1"
-            >
-              저장
-            </button>
-          </div>
-        ) : prompt ? (
-          <div className="prompt-content">
-            {prompt.content}
-          </div>
-        ) : (
-          <p className="text-xs text-muted-foreground/60">
-            아직 프롬프트가 없습니다. &quot;생성&quot; 버튼을 클릭하세요.
-          </p>
-        )}
-
-        {prompt && (
-          <div className="text-[10px] text-muted-foreground/40 mt-1">
-            v{prompt.version} · {prompt.prompt_type === 'manual' ? '수동' : '자동'}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

package/src/components/tree/LockToggle.tsx

@@ -1,23 +0,0 @@
-'use client';
-
-interface LockToggleProps {
-  isLocked: boolean;
-  onToggle: (locked: boolean) => void;
-  disabled?: boolean;
-}
-
-export default function LockToggle({ isLocked, onToggle, disabled }: LockToggleProps) {
-  return (
-    <button
-      onClick={(e) => {
-        e.stopPropagation();
-        onToggle(!isLocked);
-      }}
-      disabled={disabled}
-      className="lock-toggle"
-      title={isLocked ? '잠금 해제' : '잠금'}
-    >
-      {isLocked ? '\u{1F510}' : '\u{1F513}'}
-    </button>
-  );
-}

package/src/components/tree/RefinePopover.tsx

@@ -1,157 +0,0 @@
-'use client';
-
-import { useState, useRef, useEffect } from 'react';
-
-interface IItemTree {
-  id: string;
-  title: string;
-  description: string;
-  item_type: string;
-  priority: string;
-  status: string;
-  is_locked: boolean;
-  is_pinned: boolean;
-  children: IItemTree[];
-}
-
-interface RefinePopoverProps {
-  itemId: string;
-  projectId: string;
-  title: string;
-  description: string;
-  onClose: () => void;
-  onItemUpdate: (itemId: string, data: Record<string, unknown>) => void;
-  onTreeRefresh: (tree: IItemTree[]) => void;
-}
-
-export default function RefinePopover({
-  itemId,
-  projectId,
-  title,
-  description,
-  onClose,
-  onItemUpdate,
-  onTreeRefresh,
-}: RefinePopoverProps) {
-  const [input, setInput] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [messages, setMessages] = useState<{ role: 'user' | 'assistant'; text: string }[]>([]);
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    inputRef.current?.focus();
-  }, []);
-
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [messages]);
-
-  const handleSubmit = async () => {
-    const trimmed = input.trim();
-    if (!trimmed || loading) return;
-
-    setMessages(prev => [...prev, { role: 'user', text: trimmed }]);
-    setInput('');
-    setLoading(true);
-
-    try {
-      const res = await fetch(`/api/projects/${projectId}/items/${itemId}/refine`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ message: trimmed }),
-      });
-
-      if (res.ok) {
-        const data = await res.json();
-        setMessages(prev => [
-          ...prev,
-          { role: 'assistant', text: `"${data.title}"\n${data.description}` },
-        ]);
-        // Refresh the entire tree if structural changes were made
-        if (data.tree) {
-          onTreeRefresh(data.tree);
-        } else {
-          onItemUpdate(itemId, { title: data.title, description: data.description });
-        }
-      } else {
-        const data = await res.json();
-        setMessages(prev => [
-          ...prev,
-          { role: 'assistant', text: `오류: ${data.error || '다듬기에 실패했습니다'}` },
-        ]);
-      }
-    } catch {
-      setMessages(prev => [
-        ...prev,
-        { role: 'assistant', text: '오류: AI 연결에 실패했습니다' },
-      ]);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      handleSubmit();
-    }
-    if (e.key === 'Escape') {
-      onClose();
-    }
-  };
-
-  return (
-    <div className="refine-popover">
-      <div className="refine-header">
-        <span className="text-xs font-medium">다듬기: {title}</span>
-        <button onClick={onClose} className="refine-close">&times;</button>
-      </div>
-
-      {description && (
-        <div className="refine-context">{description}</div>
-      )}
-
-      <div className="refine-messages">
-        {messages.length === 0 && (
-          <div className="text-xs text-muted-foreground text-center py-2">
-            이 항목을 어떻게 다듬을지 알려주세요
-          </div>
-        )}
-        {messages.map((m, i) => (
-          <div key={i} className={`memo-popover-bubble memo-popover-bubble-${m.role === 'user' ? 'user' : 'ai'}`}>
-            {m.text.split('\n').map((line, j) => (
-              <p key={j} className={j > 0 ? 'mt-1' : ''}>{line}</p>
-            ))}
-          </div>
-        ))}
-        {loading && (
-          <div className="memo-popover-bubble memo-popover-bubble-ai chat-loading">
-            <span className="dot" /><span className="dot" /><span className="dot" />
-          </div>
-        )}
-        <div ref={messagesEndRef} />
-      </div>
-
-      <div className="memo-popover-input-area">
-        <textarea
-          ref={inputRef}
-          value={input}
-          onChange={(e) => setInput(e.target.value)}
-          onKeyDown={handleKeyDown}
-          placeholder="예: 하위 항목을 상세하게 추가해줘, 범위를 줄여줘..."
-          rows={1}
-          disabled={loading}
-          className="memo-popover-input"
-        />
-        <button
-          onClick={handleSubmit}
-          disabled={!input.trim() || loading}
-          className="memo-popover-send"
-        >
-          전송
-        </button>
-      </div>
-    </div>
-  );
-}