idea-manager 0.1.0

package/src/app/projects/[id]/page.tsx

@@ -0,0 +1,249 @@
+'use client';
+
+import { useState, useEffect, useCallback, useRef, use } from 'react';
+import { useRouter } from 'next/navigation';
+import Editor from '@/components/brainstorm/Editor';
+import TreeView from '@/components/tree/TreeView';
+import ChatPanel from '@/components/chat/ChatPanel';
+import ResizeHandle from '@/components/brainstorm/ResizeHandle';
+
+interface IProject {
+  id: string;
+  name: string;
+  description: string;
+}
+
+interface IItemTree {
+  id: string;
+  title: string;
+  description: string;
+  item_type: string;
+  priority: string;
+  status: string;
+  is_locked: boolean;
+  children: IItemTree[];
+}
+
+interface IMessage {
+  id: string;
+  role: 'assistant' | 'user';
+  content: string;
+  created_at: string;
+}
+
+interface IMemo {
+  id: string;
+  anchor_text: string;
+  question: string;
+  is_resolved: boolean;
+}
+
+export default function ProjectWorkspace({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = use(params);
+  const router = useRouter();
+  const [project, setProject] = useState<IProject | null>(null);
+  const [items, setItems] = useState<IItemTree[]>([]);
+  const [messages, setMessages] = useState<IMessage[]>([]);
+  const [memos, setMemos] = useState<IMemo[]>([]);
+  const [structuring, setStructuring] = useState(false);
+  const [chatLoading, setChatLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [editorPercent, setEditorPercent] = useState(60);
+  const leftPanelRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const loadProject = async () => {
+      const res = await fetch(`/api/projects/${id}`);
+      if (!res.ok) {
+        router.push('/');
+        return;
+      }
+      setProject(await res.json());
+    };
+
+    const loadItems = async () => {
+      const res = await fetch(`/api/projects/${id}/items`);
+      if (res.ok) {
+        setItems(await res.json());
+      }
+    };
+
+    const loadConversations = async () => {
+      const res = await fetch(`/api/projects/${id}/conversations`);
+      if (res.ok) {
+        setMessages(await res.json());
+      }
+    };
+
+    const loadMemos = async () => {
+      const res = await fetch(`/api/projects/${id}/memos?unresolved=true`);
+      if (res.ok) {
+        setMemos(await res.json());
+      }
+    };
+
+    loadProject();
+    loadItems();
+    loadConversations();
+    loadMemos();
+  }, [id, router]);
+
+  const handleStructure = useCallback(async (_content: string) => {
+    setStructuring(true);
+    setError(null);
+
+    try {
+      const res = await fetch(`/api/projects/${id}/structure`, {
+        method: 'POST',
+      });
+
+      if (res.ok) {
+        const data = await res.json();
+        setItems(data.items);
+        if (data.message) {
+          setMessages(prev => [...prev, data.message]);
+        }
+        if (data.memos) {
+          setMemos(data.memos);
+        }
+      } else {
+        const data = await res.json();
+        setError(data.error || '구조화에 실패했습니다');
+      }
+    } catch {
+      setError('AI 연결에 실패했습니다');
+    } finally {
+      setStructuring(false);
+    }
+  }, [id]);
+
+  const handleItemUpdate = useCallback(async (itemId: string, data: Record<string, unknown>) => {
+    try {
+      const res = await fetch(`/api/projects/${id}/items/${itemId}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+      });
+
+      if (res.ok) {
+        // Reload items tree to reflect changes (including cascaded lock)
+        const itemsRes = await fetch(`/api/projects/${id}/items`);
+        if (itemsRes.ok) {
+          setItems(await itemsRes.json());
+        }
+      }
+    } catch {
+      setError('항목 업데이트에 실패했습니다');
+    }
+  }, [id]);
+
+  const handleSendMessage = useCallback(async (message: string) => {
+    setChatLoading(true);
+    setError(null);
+
+    // Optimistically add user message
+    const tempUserMsg: IMessage = {
+      id: `temp-${Date.now()}`,
+      role: 'user',
+      content: message,
+      created_at: new Date().toISOString(),
+    };
+    setMessages(prev => [...prev, tempUserMsg]);
+
+    try {
+      const res = await fetch(`/api/projects/${id}/conversations`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ message }),
+      });
+
+      if (res.ok) {
+        const data = await res.json();
+        setItems(data.items);
+        // Replace the temp message with real messages
+        setMessages(prev => {
+          const withoutTemp = prev.filter(m => m.id !== tempUserMsg.id);
+          return [...withoutTemp, ...data.messages];
+        });
+        if (data.memos) {
+          setMemos(data.memos);
+        }
+      } else {
+        const data = await res.json();
+        setError(data.error || '응답에 실패했습니다');
+        // Remove temp message on error
+        setMessages(prev => prev.filter(m => m.id !== tempUserMsg.id));
+      }
+    } catch {
+      setError('AI 연결에 실패했습니다');
+      setMessages(prev => prev.filter(m => m.id !== tempUserMsg.id));
+    } finally {
+      setChatLoading(false);
+    }
+  }, [id]);
+
+  if (!project) {
+    return (
+      <div className="min-h-screen flex items-center justify-center text-muted-foreground">
+        로딩 중...
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-screen flex flex-col">
+      {/* Header */}
+      <header className="flex items-center justify-between px-4 py-2 border-b border-border bg-card">
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => router.push('/')}
+            className="text-muted-foreground hover:text-foreground hover:bg-muted transition-colors text-sm px-2 py-1 rounded-md"
+          >
+            &larr; 뒤로
+          </button>
+          <span className="text-border">|</span>
+          <h1 className="text-sm font-semibold">{project.name}</h1>
+          {project.description && (
+            <span className="text-xs text-muted-foreground">{project.description}</span>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          {error && (
+            <span className="text-xs text-destructive">{error}</span>
+          )}
+          <button
+            onClick={() => handleStructure('')}
+            disabled={structuring}
+            className="px-3 py-1.5 text-xs bg-accent hover:bg-accent/80 text-white
+                       rounded-md transition-colors disabled:opacity-50"
+          >
+            {structuring ? '구조화 중...' : '지금 구조화'}
+          </button>
+        </div>
+      </header>
+
+      {/* 2-Panel Layout */}
+      <div className="flex-1 flex overflow-hidden">
+        {/* Left: Editor (top) + Chat (bottom) */}
+        <div ref={leftPanelRef} className="w-1/2 border-r border-border flex flex-col">
+          <div style={{ height: `${editorPercent}%` }} className="flex flex-col min-h-0">
+            <Editor projectId={id} onContentChange={handleStructure} memos={memos} />
+          </div>
+          <ResizeHandle onResize={setEditorPercent} containerRef={leftPanelRef} />
+          <div style={{ height: `${100 - editorPercent}%` }} className="flex flex-col min-h-0">
+            <ChatPanel
+              messages={messages}
+              loading={chatLoading || structuring}
+              onSendMessage={handleSendMessage}
+            />
+          </div>
+        </div>
+
+        {/* Right: Tree View */}
+        <div className="w-1/2 flex flex-col">
+          <TreeView items={items} loading={structuring} projectId={id} onItemUpdate={handleItemUpdate} />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/cli.ts

@@ -0,0 +1,41 @@
+#!/usr/bin/env node
+
+import { Command } from 'commander';
+import { startMcpServer } from '@/lib/mcp/server';
+import { listProjects, getProject } from '@/lib/db/queries/projects';
+import { getItemTree, getItems, updateItem } from '@/lib/db/queries/items';
+import { getPrompt } from '@/lib/db/queries/prompts';
+import type { McpToolContext } from '@/lib/mcp/tools';
+
+const program = new Command();
+
+program
+  .name('im')
+  .description('Idea Manager CLI')
+  .version('1.0.0');
+
+program
+  .command('mcp')
+  .description('Start MCP server (stdio mode)')
+  .action(async () => {
+    const ctx: McpToolContext = {
+      listProjects,
+      getProject,
+      getItemTree,
+      getItems,
+      getPrompt,
+      updateItem: (id, data) => updateItem(id, data as Parameters<typeof updateItem>[1]),
+    };
+
+    await startMcpServer(ctx);
+  });
+
+program
+  .command('start')
+  .description('Start the web UI')
+  .action(async () => {
+    const open = (await import('open')).default;
+    await open('http://localhost:3456');
+  });
+
+program.parse();

package/src/components/brainstorm/Editor.tsx

@@ -0,0 +1,163 @@
+'use client';
+
+import { useState, useEffect, useRef, useCallback } from 'react';
+import MemoPin from './MemoPin';
+
+interface Memo {
+  id: string;
+  anchor_text: string;
+  question: string;
+  is_resolved: boolean;
+}
+
+interface EditorProps {
+  projectId: string;
+  onContentChange: (content: string) => void;
+  memos?: Memo[];
+}
+
+interface PinPosition {
+  memo: Memo;
+  top: number;
+  left: number;
+}
+
+export default function Editor({ projectId, onContentChange, memos = [] }: EditorProps) {
+  const [content, setContent] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [loaded, setLoaded] = useState(false);
+  const [pinPositions, setPinPositions] = useState<PinPosition[]>([]);
+  const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const structureTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const overlayRef = useRef<HTMLDivElement>(null);
+
+  // Load brainstorm content
+  useEffect(() => {
+    const load = async () => {
+      const res = await fetch(`/api/projects/${projectId}/brainstorm`);
+      const data = await res.json();
+      setContent(data.content || '');
+      setLoaded(true);
+    };
+    load();
+  }, [projectId]);
+
+  // Calculate pin positions when memos or content change
+  useEffect(() => {
+    if (!textareaRef.current || !content) {
+      setPinPositions([]);
+      return;
+    }
+
+    const textarea = textareaRef.current;
+    const unresolvedMemos = memos.filter(m => !m.is_resolved);
+    const positions: PinPosition[] = [];
+
+    for (const memo of unresolvedMemos) {
+      const idx = content.indexOf(memo.anchor_text);
+      if (idx === -1) continue;
+
+      // Calculate approximate position based on character index
+      const textBefore = content.substring(0, idx);
+      const lines = textBefore.split('\n');
+      const lineNumber = lines.length - 1;
+      const lineHeight = parseFloat(getComputedStyle(textarea).lineHeight) || 22;
+      const paddingTop = parseFloat(getComputedStyle(textarea).paddingTop) || 16;
+
+      const top = paddingTop + lineNumber * lineHeight;
+      const left = textarea.clientWidth - 28;
+
+      positions.push({ memo, top, left });
+    }
+
+    setPinPositions(positions);
+  }, [memos, content]);
+
+  const saveContent = useCallback(async (text: string) => {
+    setSaving(true);
+    await fetch(`/api/projects/${projectId}/brainstorm`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ content: text }),
+    });
+    setSaving(false);
+  }, [projectId]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newContent = e.target.value;
+    setContent(newContent);
+
+    // Auto-save with 1s debounce
+    if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+    saveTimerRef.current = setTimeout(() => {
+      saveContent(newContent);
+    }, 1000);
+
+    // Trigger AI structuring with 3s debounce
+    if (structureTimerRef.current) clearTimeout(structureTimerRef.current);
+    if (newContent.trim()) {
+      structureTimerRef.current = setTimeout(() => {
+        onContentChange(newContent);
+      }, 3000);
+    }
+  };
+
+  // Sync scroll between textarea and overlay
+  const handleScroll = () => {
+    if (textareaRef.current && overlayRef.current) {
+      overlayRef.current.scrollTop = textareaRef.current.scrollTop;
+    }
+  };
+
+  if (!loaded) {
+    return (
+      <div className="flex items-center justify-center h-full text-muted-foreground">
+        로딩 중...
+      </div>
+    );
+  }
+
+  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>
+        <span className="text-xs text-muted-foreground">
+          {saving ? '저장 중...' : content ? '저장됨' : ''}
+        </span>
+      </div>
+      <div className="editor-container">
+        <textarea
+          ref={textareaRef}
+          value={content}
+          onChange={handleChange}
+          onScroll={handleScroll}
+          placeholder={`자유롭게 아이디어를 적어보세요...
+
+예시:
+- 소셜 로그인을 활용한 사용자 인증
+- 분석 차트가 포함된 대시보드
+- 알림 시스템 필요 (푸시 + 이메일)
+- 다크 모드 지원
+- 모바일 반응형 디자인 중요`}
+          className="flex-1 w-full p-4 bg-transparent resize-none text-foreground
+                     placeholder:text-muted-foreground/40 font-mono text-sm leading-relaxed"
+          spellCheck={false}
+        />
+        {pinPositions.length > 0 && (
+          <div ref={overlayRef} className="memo-overlay">
+            {pinPositions.map((pin) => (
+              <MemoPin
+                key={pin.memo.id}
+                question={pin.memo.question}
+                anchorText={pin.memo.anchor_text}
+                top={pin.top}
+                left={pin.left}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/brainstorm/MemoPin.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { useState } from 'react';
+
+interface MemoPinProps {
+  question: string;
+  anchorText: string;
+  top: number;
+  left: number;
+}
+
+export default function MemoPin({ question, anchorText, top, left }: MemoPinProps) {
+  const [showTooltip, setShowTooltip] = useState(false);
+
+  return (
+    <div
+      className="memo-pin"
+      style={{ top: `${top}px`, left: `${left}px` }}
+      onMouseEnter={() => setShowTooltip(true)}
+      onMouseLeave={() => setShowTooltip(false)}
+    >
+      <span className="memo-pin-icon">&#x1F4CC;</span>
+      {showTooltip && (
+        <div className="memo-tooltip">
+          <div className="memo-tooltip-anchor">&ldquo;{anchorText}&rdquo;</div>
+          <div className="memo-tooltip-question">{question}</div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/brainstorm/ResizeHandle.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { useCallback, useRef } from 'react';
+
+interface ResizeHandleProps {
+  onResize: (topPercent: number) => void;
+  containerRef: React.RefObject<HTMLDivElement | null>;
+}
+
+export default function ResizeHandle({ onResize, containerRef }: ResizeHandleProps) {
+  const isDragging = useRef(false);
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    isDragging.current = true;
+
+    const handleMouseMove = (moveEvent: MouseEvent) => {
+      if (!isDragging.current || !containerRef.current) return;
+      const container = containerRef.current;
+      const rect = container.getBoundingClientRect();
+      const y = moveEvent.clientY - rect.top;
+      const percent = Math.max(20, Math.min(80, (y / rect.height) * 100));
+      onResize(percent);
+    };
+
+    const handleMouseUp = () => {
+      isDragging.current = false;
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+    document.body.style.cursor = 'row-resize';
+    document.body.style.userSelect = 'none';
+  }, [onResize, containerRef]);
+
+  return (
+    <div className="resize-handle" onMouseDown={handleMouseDown}>
+      <div className="resize-handle-bar" />
+    </div>
+  );
+}

package/src/components/chat/ChatMessage.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+interface ChatMessageProps {
+  role: 'assistant' | 'user';
+  content: string;
+  createdAt: string;
+}
+
+export default function ChatMessage({ role, content, createdAt }: ChatMessageProps) {
+  const isAi = role === 'assistant';
+  const time = new Date(createdAt).toLocaleTimeString('ko-KR', {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+
+  return (
+    <div className={`chat-message ${isAi ? 'chat-message-ai' : 'chat-message-user'}`}>
+      <div className={`chat-bubble ${isAi ? 'chat-bubble-ai' : 'chat-bubble-user'}`}>
+        {content.split('\n').map((line, i) => (
+          <p key={i} className={i > 0 ? 'mt-1' : ''}>
+            {line}
+          </p>
+        ))}
+      </div>
+      <span className="chat-time">{time}</span>
+    </div>
+  );
+}

package/src/components/chat/ChatPanel.tsx

@@ -0,0 +1,100 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import ChatMessage from './ChatMessage';
+
+interface Message {
+  id: string;
+  role: 'assistant' | 'user';
+  content: string;
+  created_at: string;
+}
+
+interface ChatPanelProps {
+  messages: Message[];
+  loading: boolean;
+  onSendMessage: (message: string) => void;
+}
+
+export default function ChatPanel({ messages, loading, onSendMessage }: ChatPanelProps) {
+  const [input, setInput] = useState('');
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  // Auto-scroll to bottom when messages change
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  const handleSubmit = () => {
+    const trimmed = input.trim();
+    if (!trimmed || loading) return;
+    onSendMessage(trimmed);
+    setInput('');
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+
+  return (
+    <div className="chat-panel">
+      <div className="chat-header">
+        <h2 className="text-sm font-medium text-muted-foreground">AI 대화</h2>
+        {messages.length > 0 && (
+          <span className="text-xs text-muted-foreground">{messages.length}개 메시지</span>
+        )}
+      </div>
+
+      <div className="chat-messages">
+        {messages.length === 0 ? (
+          <div className="chat-empty">
+            <p>구조화를 실행하면 AI가 질문을 시작합니다</p>
+          </div>
+        ) : (
+          messages.map((msg) => (
+            <ChatMessage
+              key={msg.id}
+              role={msg.role}
+              content={msg.content}
+              createdAt={msg.created_at}
+            />
+          ))
+        )}
+        {loading && (
+          <div className="chat-message chat-message-ai">
+            <div className="chat-bubble chat-bubble-ai chat-loading">
+              <span className="dot" />
+              <span className="dot" />
+              <span className="dot" />
+            </div>
+          </div>
+        )}
+        <div ref={messagesEndRef} />
+      </div>
+
+      <div className="chat-input-area">
+        <textarea
+          ref={inputRef}
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="답변을 입력하세요..."
+          rows={1}
+          disabled={loading}
+          className="chat-input"
+        />
+        <button
+          onClick={handleSubmit}
+          disabled={!input.trim() || loading}
+          className="chat-send-btn"
+        >
+          전송
+        </button>
+      </div>
+    </div>
+  );
+}