idea-manager 0.3.1 → 0.4.0

package/README.md

@@ -106,15 +106,14 @@ claude mcp add idea-manager -- npx -y idea-manager mcp
 | Frontend | Next.js 15, React 19, TypeScript, Tailwind CSS 4 |
 | Backend | Next.js API Routes |
 | Database | SQLite (better-sqlite3) |
-| AI | Anthropic Claude (Agent SDK) |
+| AI | Claude CLI (구독 기반, API 키 불필요) |
 | MCP | Model Context Protocol (stdio) |
 | CLI | Commander.js |
 
-## 환경 변수
+## 요구 사항
 
-```bash
-ANTHROPIC_API_KEY=sk-ant-...  # Claude API 키 (AI 채팅/다듬기에 필요, 없어도 기본 기능은 동작)
-```
+- **Node.js** 18+
+- **Claude CLI** — AI 채팅/다듬기 기능 사용 시 필요 (Claude 구독 필요). 없어도 태스크 관리, 프롬프트 작성 등 기본 기능은 정상 동작합니다.
 
 ## 라이선스
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "idea-manager",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "AI 기반 브레인스토밍 → 구조화 → 프롬프트 생성 도구. MCP Server 내장.",
   "keywords": [
     "brainstorm",
@@ -46,6 +46,7 @@
     "open": "^11.0.0",
     "react": "19.2.3",
     "react-dom": "19.2.3",
+    "react-markdown": "^10.1.0",
     "tsx": "^4.21.0"
   },
   "devDependencies": {

package/src/app/api/projects/[id]/sub-projects/[subId]/tasks/[taskId]/chat/route.ts

@@ -3,6 +3,7 @@ import { getTaskConversations, addTaskConversation } from '@/lib/db/queries/task
 import { getTask } from '@/lib/db/queries/tasks';
 import { getTaskPrompt } from '@/lib/db/queries/task-prompts';
 import { getBrainstorm } from '@/lib/db/queries/brainstorms';
+import { getProject } from '@/lib/db/queries/projects';
 import { runClaude } from '@/lib/ai/client';
 
 export async function GET(
@@ -37,9 +38,12 @@ export async function POST(
   const history = getTaskConversations(taskId);
   const prompt = getTaskPrompt(taskId);
   const brainstorm = getBrainstorm(projectId);
+  const project = getProject(projectId);
 
-  const systemPrompt = `You are a helpful assistant helping refine a development task. Respond in Korean. Be concise.
+  const aiPolicy = project?.ai_context ? `\n\nProject AI Policy:\n${project.ai_context}` : '';
 
+  const systemPrompt = `You are a helpful assistant helping refine a development task. Respond in Korean. Be concise.
+${aiPolicy}
 Task: ${task.title}
 Description: ${task.description}
 Status: ${task.status}
@@ -52,9 +56,15 @@ ${brainstorm?.content ? `\nBrainstorming context:\n${brainstorm.content.slice(0,
 
   try {
     const aiResponse = await runClaude(`${systemPrompt}\n\nConversation:\n${conversationText}`);
-    const aiMsg = addTaskConversation(taskId, 'assistant', aiResponse.trim());
+    const trimmed = aiResponse.trim();
+    if (!trimmed) {
+      const fallbackMsg = addTaskConversation(taskId, 'assistant', '(AI 응답을 생성하지 못했습니다. 다시 시도해주세요.)');
+      return NextResponse.json({ userMessage: userMsg, aiMessage: fallbackMsg });
+    }
+    const aiMsg = addTaskConversation(taskId, 'assistant', trimmed);
     return NextResponse.json({ userMessage: userMsg, aiMessage: aiMsg });
   } catch {
-    return NextResponse.json({ error: 'AI response failed' }, { status: 500 });
+    const errorMsg = addTaskConversation(taskId, 'assistant', '(AI 호출에 실패했습니다. Claude CLI가 설치되어 있는지 확인해주세요.)');
+    return NextResponse.json({ userMessage: userMsg, aiMessage: errorMsg });
   }
 }

package/src/app/globals.css

@@ -886,6 +886,78 @@ textarea:focus {
   background: hsl(var(--primary) / 0.6);
 }
 
+/* Chat markdown styling */
+.chat-markdown p {
+  margin: 0.25em 0;
+}
+
+.chat-markdown p:first-child {
+  margin-top: 0;
+}
+
+.chat-markdown p:last-child {
+  margin-bottom: 0;
+}
+
+.chat-markdown strong {
+  font-weight: 700;
+  color: hsl(var(--foreground));
+}
+
+.chat-markdown code {
+  background: hsl(var(--background));
+  padding: 1px 5px;
+  border-radius: 4px;
+  font-size: 0.9em;
+  font-family: var(--font-mono);
+}
+
+.chat-markdown pre {
+  background: hsl(var(--background));
+  padding: 8px 12px;
+  border-radius: 6px;
+  overflow-x: auto;
+  margin: 0.5em 0;
+}
+
+.chat-markdown pre code {
+  background: none;
+  padding: 0;
+}
+
+.chat-markdown ul, .chat-markdown ol {
+  padding-left: 1.4em;
+  margin: 0.3em 0;
+}
+
+.chat-markdown li {
+  margin: 0.15em 0;
+}
+
+.chat-markdown h1, .chat-markdown h2, .chat-markdown h3,
+.chat-markdown h4, .chat-markdown h5, .chat-markdown h6 {
+  font-weight: 700;
+  margin: 0.5em 0 0.25em;
+  line-height: 1.3;
+}
+
+.chat-markdown h1 { font-size: 1.2em; }
+.chat-markdown h2 { font-size: 1.1em; }
+.chat-markdown h3 { font-size: 1.05em; }
+
+.chat-markdown blockquote {
+  border-left: 3px solid hsl(var(--border));
+  padding-left: 10px;
+  margin: 0.4em 0;
+  color: hsl(var(--muted-foreground));
+}
+
+.chat-markdown hr {
+  border: none;
+  border-top: 1px solid hsl(var(--border));
+  margin: 0.5em 0;
+}
+
 /* Dialog animation */
 @keyframes dialogIn {
   from { opacity: 0; transform: scale(0.95) translateY(4px); }

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

@@ -7,6 +7,7 @@ import ProjectTree from '@/components/task/ProjectTree';
 import TaskDetail from '@/components/task/TaskDetail';
 import DirectoryPicker from '@/components/DirectoryPicker';
 import ConfirmDialog from '@/components/ui/ConfirmDialog';
+import AiPolicyModal from '@/components/ui/AiPolicyModal';
 import type { ISubProject, ITask, TaskStatus, ISubProjectWithStats } from '@/types';
 
 interface IProject {
@@ -14,6 +15,7 @@ interface IProject {
   name: string;
   description: string;
   project_path: string | null;
+  ai_context: string;
 }
 
 function WorkspaceInner({ id }: { id: string }) {
@@ -32,10 +34,11 @@ function WorkspaceInner({ id }: { id: string }) {
   const [showAddSub, setShowAddSub] = useState(false);
   const [showBrainstorm, setShowBrainstorm] = useState(true);
   const [newSubName, setNewSubName] = useState('');
+  const [showAiPolicy, setShowAiPolicy] = useState(false);
 
   // Resizable panel widths
-  const [leftWidth, setLeftWidth] = useState(280);
-  const [centerWidth, setCenterWidth] = useState(280);
+  const [leftWidth, setLeftWidth] = useState(500);
+  const [centerWidth, setCenterWidth] = useState(500);
   const containerRef = useRef<HTMLDivElement>(null);
   const draggingRef = useRef<'left' | 'center' | null>(null);
   const startXRef = useRef(0);
@@ -221,6 +224,18 @@ function WorkspaceInner({ id }: { id: string }) {
     }
   };
 
+  const handleSaveAiPolicy = async (aiContext: string) => {
+    const res = await fetch(`/api/projects/${id}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ ai_context: aiContext }),
+    });
+    if (res.ok) {
+      setProject(await res.json());
+      setShowAiPolicy(false);
+    }
+  };
+
   // Keyboard shortcuts (use e.code for Korean IME compatibility)
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
@@ -289,6 +304,16 @@ function WorkspaceInner({ id }: { id: string }) {
           )}
         </div>
         <div className="flex items-center gap-2">
+          <button
+            onClick={() => setShowAiPolicy(true)}
+            className={`px-3 py-1.5 text-xs border rounded-md transition-colors ${
+              project.ai_context
+                ? 'bg-accent/15 text-accent border-accent/30 hover:bg-accent/25'
+                : 'bg-muted hover:bg-card-hover text-muted-foreground border-border'
+            }`}
+          >
+            AI Policy{project.ai_context ? ' *' : ''}
+          </button>
           {!project.project_path && (
             <button
               onClick={() => setShowDirPicker(true)}
@@ -418,6 +443,13 @@ function WorkspaceInner({ id }: { id: string }) {
         onConfirm={handleConfirmAction}
         onCancel={() => setConfirmAction(null)}
       />
+
+      <AiPolicyModal
+        open={showAiPolicy}
+        content={project.ai_context || ''}
+        onSave={handleSaveAiPolicy}
+        onClose={() => setShowAiPolicy(false)}
+      />
     </div>
   );
 }

package/src/components/task/TaskChat.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect, useRef, useCallback } from 'react';
 import type { ITaskConversation } from '@/types';
+import ReactMarkdown from 'react-markdown';
 
 export default function TaskChat({
   basePath,
@@ -79,14 +80,16 @@ export default function TaskChat({
             Ask AI to help refine your task or prompt
           </div>
         )}
-        {messages.map((msg) => (
+        {messages.filter(msg => msg.content).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 ${
+            <div className={`max-w-[90%] px-3 py-2 rounded-lg text-sm leading-relaxed ${
               msg.role === 'user'
-                ? 'bg-accent text-white rounded-br-sm'
-                : 'bg-muted text-foreground rounded-bl-sm'
+                ? 'bg-accent text-white rounded-br-sm whitespace-pre-wrap'
+                : 'bg-muted text-foreground rounded-bl-sm chat-markdown'
             }`}>
-              {msg.content}
+              {msg.role === 'assistant'
+                ? <ReactMarkdown>{msg.content}</ReactMarkdown>
+                : msg.content}
             </div>
             {msg.role === 'assistant' && (
               <button

package/src/components/ui/AiPolicyModal.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+
+export default function AiPolicyModal({
+  open,
+  content,
+  onSave,
+  onClose,
+}: {
+  open: boolean;
+  content: string;
+  onSave: (content: string) => void;
+  onClose: () => void;
+}) {
+  const [draft, setDraft] = useState(content);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    if (open) {
+      setDraft(content);
+      setTimeout(() => textareaRef.current?.focus(), 50);
+    }
+  }, [open, content]);
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+      if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+        e.preventDefault();
+        onSave(draft);
+      }
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [open, draft, onSave, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
+      <div className="relative bg-card border border-border rounded-xl shadow-2xl w-[640px] max-h-[80vh] flex flex-col animate-dialog-in">
+        <div className="flex items-center justify-between px-5 py-3 border-b border-border">
+          <div>
+            <h3 className="text-sm font-semibold">AI Policy</h3>
+            <p className="text-xs text-muted-foreground mt-0.5">
+              AI 채팅과 프롬프트 다듬기에 항상 포함되는 프로젝트 컨텍스트
+            </p>
+          </div>
+          <button onClick={onClose} className="text-muted-foreground hover:text-foreground text-lg px-1">
+            x
+          </button>
+        </div>
+
+        <div className="flex-1 p-4 overflow-y-auto">
+          <textarea
+            ref={textareaRef}
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            placeholder={`프로젝트 컨텍스트와 AI 지침을 작성하세요.
+
+예시:
+- 이 프로젝트는 JABIS 스마트워크 시스템입니다
+- 기술 스택: React + TypeScript + Vite (monorepo)
+- DB: PostgreSQL (jabis 스키마)
+- 한국어로 응답할 것
+- 코드 제안 시 기존 컨벤션을 따를 것`}
+            className="w-full bg-input border border-border rounded-lg px-4 py-3 text-sm
+                       text-foreground resize-none focus:border-primary focus:outline-none
+                       leading-relaxed font-mono min-h-[300px]"
+          />
+        </div>
+
+        <div className="flex items-center justify-between px-5 py-3 border-t border-border">
+          <span className="text-xs text-muted-foreground">Cmd+Enter to save</span>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={onClose}
+              className="px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground
+                         border border-border rounded-md transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={() => onSave(draft)}
+              className="px-3 py-1.5 text-xs bg-primary text-white rounded-md
+                         hover:bg-primary-hover transition-colors"
+            >
+              Save
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/lib/ai/client.ts

@@ -13,7 +13,7 @@ export interface IStructuredItem {
 const CLI_PATH = 'claude';
 const DEFAULT_ARGS = ['--dangerously-skip-permissions'];
 const MODEL = 'sonnet';
-const MAX_TURNS = 1;
+const MAX_TURNS = 80;
 
 export type OnTextChunk = (text: string) => void;
 export type OnRawEvent = (event: Record<string, unknown>) => void;
@@ -24,10 +24,11 @@ export type OnRawEvent = (event: Record<string, unknown>) => void;
  */
 export function runClaude(prompt: string, onText?: OnTextChunk, onRawEvent?: OnRawEvent): Promise<string> {
   return new Promise((resolve, reject) => {
+    const useStreamJson = !!(onText || onRawEvent);
     const args = [
       ...DEFAULT_ARGS,
       '--model', MODEL,
-      '--output-format', 'stream-json',
+      ...(useStreamJson ? ['--output-format', 'stream-json', '--verbose'] : ['--output-format', 'text']),
       '--max-turns', String(MAX_TURNS),
       '-p', '-',  // read prompt from stdin
     ];
@@ -57,56 +58,47 @@ export function runClaude(prompt: string, onText?: OnTextChunk, onRawEvent?: OnR
     let resultText = '';
     let stderrText = '';
 
-    proc.stdout?.on('data', (chunk: Buffer) => {
-      buffer += chunk.toString();
-      const lines = buffer.split('\n');
-      buffer = lines.pop() ?? '';
-
-      for (const line of lines) {
-        const trimmed = line.trim();
-        if (!trimmed) continue;
-        try {
-          const parsed = JSON.parse(trimmed);
-
-          // Emit raw event for live streaming to frontend
-          onRawEvent?.(parsed);
-
-          // content_block_delta — real-time streaming tokens (API-style)
-          if (parsed.type === 'content_block_delta' && parsed.delta?.text) {
-            resultText += parsed.delta.text;
-            onText?.(parsed.delta.text);
-          }
-
-          // assistant — complete or incremental message
-          else if (parsed.type === 'assistant' && parsed.message?.content) {
-            let fullText = '';
-            for (const block of parsed.message.content) {
-              if (block.type === 'text') {
-                fullText += block.text;
+    if (useStreamJson) {
+      // stream-json mode: parse NDJSON events
+      proc.stdout?.on('data', (chunk: Buffer) => {
+        buffer += chunk.toString();
+        const lines = buffer.split('\n');
+        buffer = lines.pop() ?? '';
+
+        for (const line of lines) {
+          const trimmed = line.trim();
+          if (!trimmed) continue;
+          try {
+            const parsed = JSON.parse(trimmed);
+            onRawEvent?.(parsed);
+
+            if (parsed.type === 'content_block_delta' && parsed.delta?.text) {
+              resultText += parsed.delta.text;
+              onText?.(parsed.delta.text);
+            } else if (parsed.type === 'assistant' && parsed.message?.content) {
+              let fullText = '';
+              for (const block of parsed.message.content) {
+                if (block.type === 'text') fullText += block.text;
               }
+              if (fullText.length > resultText.length) {
+                onText?.(fullText.slice(resultText.length));
+              }
+              resultText = fullText;
+            } else if (parsed.type === 'result' && parsed.result) {
+              if (parsed.result.length > resultText.length) {
+                onText?.(parsed.result.slice(resultText.length));
+              }
+              resultText = parsed.result;
             }
-            // Only emit the NEW part (handles incremental assistant messages)
-            if (fullText.length > resultText.length) {
-              const newPart = fullText.slice(resultText.length);
-              onText?.(newPart);
-            }
-            resultText = fullText;
-          }
-
-          // result — final output
-          else if (parsed.type === 'result' && parsed.result) {
-            // Emit any remaining new text from result
-            if (parsed.result.length > resultText.length) {
-              const newPart = parsed.result.slice(resultText.length);
-              onText?.(newPart);
-            }
-            resultText = parsed.result;
-          }
-        } catch {
-          // ignore non-JSON lines
+          } catch { /* ignore non-JSON */ }
         }
-      }
-    });
+      });
+    } else {
+      // text mode: stdout is the raw result
+      proc.stdout?.on('data', (chunk: Buffer) => {
+        resultText += chunk.toString();
+      });
+    }
 
     proc.stderr?.on('data', (chunk: Buffer) => {
       stderrText += chunk.toString();
@@ -117,6 +109,10 @@ export function runClaude(prompt: string, onText?: OnTextChunk, onRawEvent?: OnR
     });
 
     proc.on('exit', (code, signal) => {
+      // Clean up known CLI noise from text output
+      if (!useStreamJson) {
+        resultText = resultText.replace(/Error: Reached max turns \(\d+\)\s*/g, '').trim();
+      }
       if (code !== 0 && !resultText) {
         const detail = stderrText.slice(0, 500) || (signal ? `killed by signal ${signal}` : 'no output');
         reject(new Error(`Claude CLI exited with code ${code}: ${detail}`));

package/src/lib/db/queries/projects.ts

@@ -30,7 +30,7 @@ export function createProject(name: string, description: string = '', projectPat
   return getProject(id)!;
 }
 
-export function updateProject(id: string, data: { name?: string; description?: string; project_path?: string | null }): IProject | undefined {
+export function updateProject(id: string, data: { name?: string; description?: string; project_path?: string | null; ai_context?: string }): IProject | undefined {
   const db = getDb();
   const project = getProject(id);
   if (!project) return undefined;
@@ -38,11 +38,12 @@ export function updateProject(id: string, data: { name?: string; description?: s
   const now = new Date().toISOString();
 
   db.prepare(
-    'UPDATE projects SET name = ?, description = ?, project_path = ?, updated_at = ? WHERE id = ?'
+    'UPDATE projects SET name = ?, description = ?, project_path = ?, ai_context = ?, updated_at = ? WHERE id = ?'
   ).run(
     data.name ?? project.name,
     data.description ?? project.description,
     data.project_path !== undefined ? data.project_path : project.project_path,
+    data.ai_context !== undefined ? data.ai_context : (project.ai_context ?? ''),
     now,
     id,
   );

package/src/lib/db/schema.ts

@@ -97,6 +97,9 @@ export function initSchema(db: Database.Database): void {
   if (!projCols.some(c => c.name === 'project_path')) {
     db.exec("ALTER TABLE projects ADD COLUMN project_path TEXT");
   }
+  if (!projCols.some(c => c.name === 'ai_context')) {
+    db.exec("ALTER TABLE projects ADD COLUMN ai_context TEXT NOT NULL DEFAULT ''");
+  }
 
   // v2 tables
   db.exec(`

package/src/types/index.ts

@@ -3,6 +3,7 @@ export interface IProject {
   name: string;
   description: string;
   project_path: string | null;
+  ai_context: string;
   created_at: string;
   updated_at: string;
 }