idea-manager 0.1.0

package/src/components/tree/ItemDetail.tsx

@@ -0,0 +1,196 @@
+'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

@@ -0,0 +1,23 @@
+'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/StatusBadge.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+interface StatusBadgeProps {
+  status: string;
+  onStatusChange: (status: string) => void;
+  disabled?: boolean;
+}
+
+const statusConfig: Record<string, { icon: string; label: string; next: string }> = {
+  pending: { icon: '\u{23F3}', label: '대기', next: 'in_progress' },
+  in_progress: { icon: '\u{1F504}', label: '진행 중', next: 'done' },
+  done: { icon: '\u{2705}', label: '완료', next: 'pending' },
+};
+
+export default function StatusBadge({ status, onStatusChange, disabled }: StatusBadgeProps) {
+  const config = statusConfig[status] || statusConfig.pending;
+
+  return (
+    <button
+      onClick={(e) => {
+        e.stopPropagation();
+        onStatusChange(config.next);
+      }}
+      disabled={disabled}
+      className="status-badge"
+      title={`${config.label} → 클릭하여 변경`}
+    >
+      <span>{config.icon}</span>
+      <span className="status-badge-label">{config.label}</span>
+    </button>
+  );
+}

package/src/components/tree/TreeNode.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+import { useState } from 'react';
+import LockToggle from './LockToggle';
+import StatusBadge from './StatusBadge';
+import ItemDetail from './ItemDetail';
+
+interface IItemTree {
+  id: string;
+  project_id?: string;
+  title: string;
+  description: string;
+  item_type: string;
+  priority: string;
+  status: string;
+  is_locked: boolean;
+  children: IItemTree[];
+}
+
+interface TreeNodeProps {
+  item: IItemTree;
+  depth: number;
+  projectId: string;
+  onItemUpdate: (itemId: string, data: Record<string, unknown>) => void;
+}
+
+const typeIcons: Record<string, string> = {
+  feature: '\u{1F4E6}',
+  task: '\u{2705}',
+  bug: '\u{1F41B}',
+  idea: '\u{1F4A1}',
+  note: '\u{1F4DD}',
+};
+
+const priorityColors: Record<string, string> = {
+  high: 'text-destructive',
+  medium: 'text-warning',
+  low: 'text-success',
+};
+
+export default function TreeNode({ item, depth, projectId, onItemUpdate }: TreeNodeProps) {
+  const [expanded, setExpanded] = useState(true);
+  const [showDetail, setShowDetail] = useState(false);
+  const hasChildren = item.children.length > 0;
+
+  return (
+    <div className="select-none">
+      <div
+        className="flex items-center gap-2 py-1.5 px-2 rounded-md hover:bg-card-hover
+                   cursor-pointer transition-colors group"
+        style={{ paddingLeft: `${depth * 20 + 8}px` }}
+        onClick={() => setShowDetail(!showDetail)}
+      >
+        {hasChildren ? (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              setExpanded(!expanded);
+            }}
+            className="text-muted-foreground hover:text-foreground text-xs w-4 flex-shrink-0"
+          >
+            {expanded ? '\u25BC' : '\u25B6'}
+          </button>
+        ) : (
+          <span className="w-4 flex-shrink-0" />
+        )}
+
+        <LockToggle
+          isLocked={item.is_locked}
+          onToggle={(locked) => onItemUpdate(item.id, { is_locked: locked })}
+        />
+
+        <span className="text-sm flex-shrink-0">
+          {typeIcons[item.item_type] || '\u{1F4CB}'}
+        </span>
+
+        <span className="text-sm flex-1 truncate">{item.title}</span>
+
+        <span className={`text-xs flex-shrink-0 ${priorityColors[item.priority] || ''}`}>
+          {item.priority === 'high' ? '\u{1F534}' : item.priority === 'medium' ? '\u{1F7E1}' : '\u{1F7E2}'}
+        </span>
+
+        <StatusBadge
+          status={item.status}
+          onStatusChange={(status) => onItemUpdate(item.id, { status })}
+        />
+      </div>
+
+      {showDetail && (
+        <ItemDetail
+          itemId={item.id}
+          projectId={projectId}
+          title={item.title}
+          description={item.description}
+          itemType={item.item_type}
+          priority={item.priority}
+          status={item.status}
+          isLocked={item.is_locked}
+          depth={depth}
+        />
+      )}
+
+      {expanded && hasChildren && (
+        <div>
+          {item.children.map((child) => (
+            <TreeNode
+              key={child.id}
+              item={child}
+              depth={depth + 1}
+              projectId={projectId}
+              onItemUpdate={onItemUpdate}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/tree/TreeView.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import TreeNode from './TreeNode';
+
+interface IItemTree {
+  id: string;
+  title: string;
+  description: string;
+  item_type: string;
+  priority: string;
+  status: string;
+  is_locked: boolean;
+  children: IItemTree[];
+}
+
+interface TreeViewProps {
+  items: IItemTree[];
+  loading: boolean;
+  projectId: string;
+  onItemUpdate: (itemId: string, data: Record<string, unknown>) => void;
+}
+
+export default function TreeView({ items, loading, projectId, onItemUpdate }: TreeViewProps) {
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex items-center justify-between px-4 py-2 border-b border-border">
+        <h2 className="text-sm font-medium text-muted-foreground">구조화 뷰</h2>
+        {loading && (
+          <span className="text-xs text-accent animate-pulse">
+            AI 분석 중...
+          </span>
+        )}
+      </div>
+
+      <div className="flex-1 overflow-auto p-2">
+        {items.length === 0 && !loading ? (
+          <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 className="mb-2">아직 구조화된 항목이 없습니다</p>
+            <p className="text-xs text-center">
+              왼쪽 패널에서 아이디어를 입력해보세요.
+              <br />
+              입력을 멈추면 3초 후 AI가 자동으로 구조화합니다.
+            </p>
+          </div>
+        ) : (
+          items.map((item) => (
+            <TreeNode
+              key={item.id}
+              item={item}
+              depth={0}
+              projectId={projectId}
+              onItemUpdate={onItemUpdate}
+            />
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

package/src/lib/ai/chat-responder.ts

@@ -0,0 +1,69 @@
+import { runStructureWithQuestions, type IStructuredItem } from './client';
+import { replaceItems } from '../db/queries/items';
+import { getRecentConversations, addMessage } from '../db/queries/conversations';
+import { getBrainstorm } from '../db/queries/brainstorms';
+import { resolveMemos, createMemosFromQuestions } from '../db/queries/memos';
+import type { IItemTree, IMemo, IConversation } from '@/types';
+
+export async function handleChatResponse(
+  projectId: string,
+  brainstormId: string,
+  userMessage: string,
+): Promise<{ items: IItemTree[]; memos: IMemo[]; messages: IConversation[] }> {
+  // Save user message
+  const userMsg = addMessage(projectId, 'user', userMessage);
+
+  // Load brainstorm content
+  const brainstorm = getBrainstorm(projectId);
+  if (!brainstorm || !brainstorm.content.trim()) {
+    return { items: [], memos: [], messages: [userMsg] };
+  }
+
+  // Resolve old memos before generating new ones
+  resolveMemos(projectId);
+
+  // Load full conversation history (limited to 20)
+  const history = getRecentConversations(projectId, 20);
+  const historyForAi = history.map(h => ({
+    role: h.role,
+    content: h.content,
+  }));
+
+  // AI call with updated conversation context
+  const result = await runStructureWithQuestions(brainstorm.content, historyForAi);
+
+  // Replace items in DB
+  const dbItems = mapToDbFormat(result.items as IStructuredItem[]);
+  const tree = replaceItems(projectId, brainstormId, dbItems);
+
+  // Build AI response + new memos
+  const newMessages: IConversation[] = [userMsg];
+  let memos: IMemo[] = [];
+
+  if (result.questions.length > 0) {
+    const messageContent = result.questions
+      .map((q, i) => `${i + 1}. ${q.question}`)
+      .join('\n');
+
+    const aiMsg = addMessage(projectId, 'assistant', messageContent);
+    newMessages.push(aiMsg);
+    memos = createMemosFromQuestions(projectId, aiMsg.id, result.questions);
+  } else {
+    // Even without questions, acknowledge the refinement
+    const aiMsg = addMessage(projectId, 'assistant', '답변을 반영하여 구조를 업데이트했습니다.');
+    newMessages.push(aiMsg);
+  }
+
+  return { items: tree, memos, messages: newMessages };
+}
+
+function mapToDbFormat(items: IStructuredItem[]): Parameters<typeof replaceItems>[2] {
+  return items.map((item) => ({
+    parent_id: null,
+    title: item.title,
+    description: item.description,
+    item_type: item.item_type,
+    priority: item.priority,
+    children: item.children ? mapToDbFormat(item.children) : undefined,
+  }));
+}

package/src/lib/ai/client.ts

@@ -0,0 +1,124 @@
+import { query } from '@anthropic-ai/claude-agent-sdk';
+import type { IStructureWithQuestions } from '@/types';
+
+export interface IStructuredItem {
+  title: string;
+  description: string;
+  item_type: 'feature' | 'task' | 'bug' | 'idea' | 'note';
+  priority: 'high' | 'medium' | 'low';
+  children?: IStructuredItem[];
+}
+
+export async function runStructure(brainstormContent: string): Promise<IStructuredItem[]> {
+  const systemPrompt = `You are a JSON-only structuring machine. You NEVER respond with text, explanations, or conversation.
+You ALWAYS output ONLY a raw JSON array, nothing else.
+
+Your job: convert ANY input text into a structured JSON array of items.
+Even if the input seems like a greeting or conversation, extract the implicit intent and structure it.
+
+Schema per item:
+{ "title": string, "description": string, "item_type": "feature"|"task"|"bug"|"idea"|"note", "priority": "high"|"medium"|"low", "children": [same schema] }
+
+Rules:
+- Output MUST start with [ and end with ]
+- No markdown fences, no explanation, no text before or after the JSON
+- Keep titles concise (under 50 chars)
+- Group related ideas under parent items
+- If input is vague, interpret it as best you can and create at least 1 item`;
+
+  const prompt = `Analyze this brainstorming content and structure it into a JSON tree:\n\n${brainstormContent}`;
+
+  let resultText = '';
+
+  for await (const message of query({
+    prompt: `${systemPrompt}\n\n${prompt}`,
+    options: {
+      allowedTools: [],
+      maxTurns: 1,
+    },
+  })) {
+    if (message.type === 'result') {
+      resultText = (message as { type: string; result: string }).result || '';
+    }
+  }
+
+  // Strip markdown fences if present
+  resultText = resultText.replace(/```(?:json)?\s*/g, '').replace(/```\s*/g, '').trim();
+
+  // Extract JSON from the response
+  const jsonMatch = resultText.match(/\[[\s\S]*\]/);
+  if (!jsonMatch) {
+    throw new Error('AI did not return valid JSON');
+  }
+
+  return JSON.parse(jsonMatch[0]) as IStructuredItem[];
+}
+
+export async function runStructureWithQuestions(
+  brainstormContent: string,
+  conversationHistory: { role: 'assistant' | 'user'; content: string }[],
+): Promise<IStructureWithQuestions> {
+  const systemPrompt = `You are an AI assistant that structures brainstorming content AND identifies ambiguous areas.
+You ALWAYS output ONLY a raw JSON object (not an array), nothing else.
+
+Your job:
+1. Convert the brainstorming text into a structured JSON tree of items
+2. Identify 0-5 areas where the brainstorming is ambiguous or could benefit from clarification
+3. Consider the conversation history to avoid repeating questions already answered
+
+Output schema:
+{
+  "items": [{ "title": string, "description": string, "item_type": "feature"|"task"|"bug"|"idea"|"note", "priority": "high"|"medium"|"low", "children": [same] }],
+  "questions": [{ "anchor_text": string, "question": string }]
+}
+
+Rules:
+- Output MUST be a JSON object with "items" and "questions" keys
+- No markdown fences, no explanation, no text before or after the JSON
+- Keep titles concise (under 50 chars)
+- Group related ideas under parent items
+- questions[].anchor_text MUST be an exact substring from the brainstorming content (5-20 chars)
+- questions[].question should be a helpful Korean question asking for clarification
+- Generate 0-5 questions. Skip questions already answered in conversation history.
+- If the brainstorming is clear enough, return an empty questions array
+- All questions MUST be in Korean`;
+
+  let historyContext = '';
+  if (conversationHistory.length > 0) {
+    historyContext = '\n\n이전 대화:\n' + conversationHistory
+      .map(m => `${m.role === 'user' ? '사용자' : 'AI'}: ${m.content}`)
+      .join('\n');
+  }
+
+  const prompt = `다음 브레인스토밍 내용을 분석하고 구조화하세요:\n\n${brainstormContent}${historyContext}`;
+
+  let resultText = '';
+
+  for await (const message of query({
+    prompt: `${systemPrompt}\n\n${prompt}`,
+    options: {
+      allowedTools: [],
+      maxTurns: 1,
+    },
+  })) {
+    if (message.type === 'result') {
+      resultText = (message as { type: string; result: string }).result || '';
+    }
+  }
+
+  // Strip markdown fences if present
+  resultText = resultText.replace(/```(?:json)?\s*/g, '').replace(/```\s*/g, '').trim();
+
+  // Extract JSON object from the response
+  const jsonMatch = resultText.match(/\{[\s\S]*\}/);
+  if (!jsonMatch) {
+    throw new Error('AI did not return valid JSON');
+  }
+
+  const parsed = JSON.parse(jsonMatch[0]);
+
+  return {
+    items: parsed.items || [],
+    questions: parsed.questions || [],
+  } as IStructureWithQuestions;
+}