idea-manager 1.9.0 → 2.1.0

package/src/components/task/TaskDetail.tsx

@@ -6,6 +6,7 @@ import StatusFlow from './StatusFlow';
 import TaskChat from './TaskChat';
 import NoteEditor, { getPromotableLine } from './NoteEditor';
 import CommandPalette, { type RefineCommand } from './CommandPalette';
+import { registerAiActivity, unregisterAiActivity } from '@/lib/ai-activity';
 import type { ReactCodeMirrorRef } from '@uiw/react-codemirror';
 
 export default function TaskDetail({
@@ -16,6 +17,7 @@ export default function TaskDetail({
   onUpdate,
   onDelete,
   onTaskPromoted,
+  onTaskMoved,
   onChatStateChange,
 }: {
   task: ITask;
@@ -27,13 +29,18 @@ export default function TaskDetail({
   onDelete: () => void;
   /** Fired after a checkbox line is promoted to a new task. Parent should refresh its task list. */
   onTaskPromoted?: (newTask: ITask) => void;
+  /** Fired after task is moved to another sub-project. Parent should refresh. */
+  onTaskMoved?: () => void;
   onChatStateChange?: (taskId: string, state: 'idle' | 'loading' | 'done') => void;
 }) {
   const [title, setTitle] = useState(task.title);
   const [description, setDescription] = useState(task.description);
   const [editingTitle, setEditingTitle] = useState(false);
   const [copied, setCopied] = useState(false);
+  const [tagInput, setTagInput] = useState('');
+  const [showTagInput, setShowTagInput] = useState(false);
   const [chatOpen, setChatOpen] = useState(false);
+  const [focusMode, setFocusMode] = useState(false);
   const chatWasManuallyToggled = useRef(false);
 
   // Auto-open the chat panel while the task is being executed by the watcher —
@@ -148,6 +155,8 @@ export default function TaskDetail({
     setRefineElapsed(0);
     const abort = new AbortController();
     refineAbortRef.current = abort;
+    const actId = `refine-${Date.now()}`;
+    registerAiActivity({ id: actId, type: 'refine', label: `Refine: ${task.title}`, startedAt: Date.now() });
     const started = Date.now();
     const tick = setInterval(() => setRefineElapsed(Math.floor((Date.now() - started) / 1000)), 500);
 
@@ -228,6 +237,7 @@ export default function TaskDetail({
       clearInterval(tick);
       setRefining(false);
       refineAbortRef.current = null;
+      unregisterAiActivity(actId);
     }
   }, [basePath, onUpdate, task.id]);
 
@@ -244,6 +254,42 @@ export default function TaskDetail({
   }, [undoSnapshot, task.id, onUpdate]);
 
   const [promoteNotice, setPromoteNotice] = useState<string | null>(null);
+  const [showMoveModal, setShowMoveModal] = useState(false);
+  const [moveProjects, setMoveProjects] = useState<{ id: string; name: string; subs: { id: string; name: string }[] }[]>([]);
+  const [moveTargetSub, setMoveTargetSub] = useState('');
+  const [moving, setMoving] = useState(false);
+
+  const openMoveModal = useCallback(async () => {
+    try {
+      const pRes = await fetch('/api/projects');
+      const projects = await pRes.json() as { id: string; name: string }[];
+      const withSubs = await Promise.all(projects.map(async (p) => {
+        const sRes = await fetch(`/api/projects/${p.id}/sub-projects`);
+        const subs = await sRes.json() as { id: string; name: string }[];
+        return { ...p, subs };
+      }));
+      setMoveProjects(withSubs);
+      setMoveTargetSub('');
+      setShowMoveModal(true);
+    } catch { /* silent */ }
+  }, []);
+
+  const doMove = useCallback(async () => {
+    if (!moveTargetSub || moving) return;
+    setMoving(true);
+    try {
+      const res = await fetch(`/api/tasks/${task.id}/move`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ subProjectId: moveTargetSub }),
+      });
+      if (res.ok) {
+        setShowMoveModal(false);
+        onTaskMoved?.();
+      }
+    } catch { /* silent */ }
+    setMoving(false);
+  }, [moveTargetSub, moving, task.id, onTaskMoved]);
 
   const promoteCheckbox = useCallback(async () => {
     const view = editorRef.current?.view;
@@ -285,6 +331,48 @@ export default function TaskDetail({
 
   const priorities: ItemPriority[] = ['high', 'medium', 'low'];
 
+  // Focus mode: Esc to exit (when not in slash autocomplete or other modal)
+  useEffect(() => {
+    if (!focusMode) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') { setFocusMode(false); }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [focusMode]);
+
+  if (focusMode) {
+    return (
+      <div className="fixed inset-0 z-40 bg-background flex flex-col">
+        <div className="flex items-center justify-between px-6 py-3 border-b border-border flex-shrink-0">
+          <div className="flex items-center gap-3">
+            <h2 className="text-lg font-semibold text-foreground">{task.title}</h2>
+            <span className="text-xs text-muted-foreground">Focus Mode</span>
+          </div>
+          <button
+            onClick={() => setFocusMode(false)}
+            className="text-xs px-3 py-1 rounded border border-border text-muted-foreground hover:text-foreground transition-colors"
+          >
+            Esc 닫기
+          </button>
+        </div>
+        <div className="flex-1 min-h-0">
+          <NoteEditor
+            ref={editorRef}
+            value={description}
+            onChange={setDescription}
+            onBlur={saveDescription}
+            onOpenCommand={openPalette}
+            onPromoteLine={promoteCheckbox}
+            extraCorpus={extraCorpus}
+            placeholder="집중 모드 — 자유롭게 작성하세요…"
+          />
+        </div>
+        <CommandPalette open={paletteOpen} hasSelection={hasSelection} onClose={() => setPaletteOpen(false)} onRun={runRefine} />
+      </div>
+    );
+  }
+
   return (
     <div className="flex flex-col h-full">
       {/* Header */}
@@ -354,6 +442,14 @@ export default function TaskDetail({
           >
             {copied ? '✓ Copied' : 'Copy as Prompt'}
           </button>
+          <button
+            onClick={() => setFocusMode(true)}
+            title="포커스 모드 — 노트만 풀스크린"
+            className="text-xs px-2 py-0.5 rounded transition-colors border border-border
+                       text-muted-foreground hover:text-foreground hover:border-muted-foreground"
+          >
+            Focus
+          </button>
           <button
             onClick={() => { chatWasManuallyToggled.current = true; setChatOpen(v => !v); }}
             className={`text-xs px-2 py-0.5 rounded transition-colors border ${
@@ -365,13 +461,59 @@ export default function TaskDetail({
             💬 Chat
           </button>
 
+          <button
+            onClick={openMoveModal}
+            className="text-xs text-muted-foreground hover:text-foreground transition-colors ml-auto"
+          >
+            Move
+          </button>
           <button
             onClick={onDelete}
-            className="text-xs text-muted-foreground hover:text-destructive transition-colors ml-auto"
+            className="text-xs text-muted-foreground hover:text-destructive transition-colors"
           >
             Delete
           </button>
         </div>
+
+        {/* Tags */}
+        <div className="flex items-center gap-1.5 flex-wrap">
+          {(task.tags ?? []).map(tag => (
+            <span key={tag} className="inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-full bg-muted text-muted-foreground border border-border">
+              {tag}
+              <button
+                onClick={() => onUpdate({ tags: task.tags.filter(t => t !== tag) })}
+                className="text-muted-foreground/60 hover:text-destructive text-[10px] leading-none"
+              >×</button>
+            </span>
+          ))}
+          {showTagInput ? (
+            <input
+              value={tagInput}
+              onChange={(e) => setTagInput(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  const t = tagInput.trim();
+                  if (t && !(task.tags ?? []).includes(t)) {
+                    onUpdate({ tags: [...(task.tags ?? []), t] });
+                  }
+                  setTagInput('');
+                }
+                if (e.key === 'Escape') { setTagInput(''); setShowTagInput(false); }
+              }}
+              onBlur={() => { setTagInput(''); setShowTagInput(false); }}
+              placeholder="태그 입력…"
+              className="text-xs bg-transparent border-b border-border focus:border-primary focus:outline-none px-1 py-0.5 w-24"
+              autoFocus
+            />
+          ) : (
+            <button
+              onClick={() => setShowTagInput(true)}
+              className="text-[10px] text-muted-foreground/50 hover:text-muted-foreground transition-colors"
+            >
+              + tag
+            </button>
+          )}
+        </div>
       </div>
 
       {/* Note editor */}
@@ -460,6 +602,45 @@ export default function TaskDetail({
         onClose={() => setPaletteOpen(false)}
         onRun={runRefine}
       />
+
+      {showMoveModal && (
+        <div
+          onClick={() => setShowMoveModal(false)}
+          className="fixed inset-0 z-50 flex items-center justify-center"
+          style={{ background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(2px)' }}
+        >
+          <div onClick={(e) => e.stopPropagation()} className="bg-card border border-border rounded-xl shadow-2xl w-full max-w-sm p-4 flex flex-col gap-3 animate-dialog-in">
+            <div className="text-sm font-semibold text-foreground">태스크 이동</div>
+            <div className="text-xs text-muted-foreground">"{task.title}" 을 다른 프로젝트로 이동합니다.</div>
+            <select
+              value={moveTargetSub}
+              onChange={(e) => setMoveTargetSub(e.target.value)}
+              className="bg-input border border-border rounded-md px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-none"
+            >
+              <option value="">이동할 대상 선택…</option>
+              {moveProjects.map(p => (
+                <optgroup key={p.id} label={p.name}>
+                  {p.subs.map(s => (
+                    <option key={s.id} value={s.id} disabled={s.id === subProjectId}>
+                      {s.name}{s.id === subProjectId ? ' (현재)' : ''}
+                    </option>
+                  ))}
+                </optgroup>
+              ))}
+            </select>
+            <div className="flex justify-end gap-2">
+              <button onClick={() => setShowMoveModal(false)} className="text-xs text-muted-foreground px-2 py-1">취소</button>
+              <button
+                onClick={doMove}
+                disabled={!moveTargetSub || moving}
+                className="text-xs px-3 py-1 bg-primary text-primary-foreground rounded disabled:opacity-40"
+              >
+                {moving ? '이동 중…' : '이동'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

package/src/components/ui/AiActivityIndicator.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useAiActivity } from '@/hooks/useAiActivity';
+
+function elapsed(startedAt: number): string {
+  const s = Math.floor((Date.now() - startedAt) / 1000);
+  return s < 60 ? `${s}s` : `${Math.floor(s / 60)}m${s % 60}s`;
+}
+
+const TYPE_LABEL: Record<string, string> = {
+  refine: '⌘K Refine',
+  'task-chat': 'Note Assistant',
+  'project-advisor': 'Project Advisor',
+  'global-advisor': 'Global Advisor',
+  watch: 'Watch',
+};
+
+export default function AiActivityIndicator() {
+  const activities = useAiActivity();
+  const [, tick] = useState(0);
+  const [showList, setShowList] = useState(false);
+
+  // Re-render every second to update elapsed times
+  useEffect(() => {
+    if (activities.length === 0) return;
+    const id = setInterval(() => tick(n => n + 1), 1000);
+    return () => clearInterval(id);
+  }, [activities.length]);
+
+  if (activities.length === 0) return null;
+
+  return (
+    <div className="relative mr-2">
+      <button
+        onClick={() => setShowList(prev => !prev)}
+        className="flex items-center gap-1.5 text-xs px-2 py-1 rounded-md border border-warning/40 bg-warning/15 text-warning hover:bg-warning/25 transition-colors"
+        title={`AI 작업 ${activities.length}개 진행 중`}
+      >
+        <span className="inline-block w-1.5 h-1.5 rounded-full bg-warning animate-pulse" />
+        <span>AI {activities.length}</span>
+      </button>
+
+      {showList && (
+        <>
+          <div className="fixed inset-0 z-[80]" onClick={() => setShowList(false)} />
+          <div className="absolute right-0 top-full mt-1 z-[81] bg-card border border-border rounded-lg shadow-xl w-72 py-1 animate-dialog-in">
+            <div className="px-3 py-1.5 text-[10px] uppercase tracking-wider text-muted-foreground/70 border-b border-border">
+              진행 중인 AI 작업
+            </div>
+            {activities.map(a => (
+              <div key={a.id} className="px-3 py-2 flex items-center gap-2 text-xs">
+                <span className="inline-block w-1.5 h-1.5 rounded-full bg-warning animate-pulse flex-shrink-0" />
+                <div className="flex-1 min-w-0">
+                  <div className="text-foreground truncate">{a.label}</div>
+                  <div className="text-muted-foreground/70">{TYPE_LABEL[a.type] ?? a.type}</div>
+                </div>
+                <span className="text-muted-foreground font-mono flex-shrink-0">{elapsed(a.startedAt)}</span>
+              </div>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/ui/ShortcutOverlay.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+const SECTIONS: { title: string; shortcuts: { keys: string; desc: string }[] }[] = [
+  {
+    title: '전역',
+    shortcuts: [
+      { keys: '⌘P', desc: '전역 검색' },
+      { keys: '⌘N', desc: '빠른 태스크 생성' },
+      { keys: '⌘M', desc: '전역 메모 (Quick Memo)' },
+      { keys: '⌘J', desc: '전역 AI 어드바이저' },
+      { keys: '?', desc: '이 도움말' },
+    ],
+  },
+  {
+    title: '워크스페이스',
+    shortcuts: [
+      { keys: '⌘L', desc: 'Project Advisor 열기/닫기' },
+      { keys: 'B', desc: '브레인스토밍 패널 토글' },
+      { keys: 'N', desc: '새 프로젝트 추가' },
+      { keys: 'T', desc: '새 태스크 추가' },
+      { keys: '⌘1', desc: '상태 → Idea' },
+      { keys: '⌘2', desc: '상태 → Doing' },
+      { keys: '⌘3', desc: '상태 → Done' },
+      { keys: '⌘4', desc: '상태 → Problem' },
+    ],
+  },
+  {
+    title: '노트 에디터',
+    shortcuts: [
+      { keys: '⌘K', desc: 'AI 명령 팔레트' },
+      { keys: '⌘⇧T', desc: '체크박스/불릿 → 태스크 승격' },
+      { keys: '/', desc: '슬래시 명령 (/todo, /table, /code…)' },
+      { keys: '⌘↵', desc: '체크박스 토글 [ ] ↔ [x]' },
+      { keys: '⌘⇧↵', desc: '테이블 행 추가' },
+      { keys: '⌘⇧⌫', desc: '테이블 행 삭제' },
+      { keys: 'Tab', desc: '고스트 자동완성 수락' },
+      { keys: 'Esc', desc: '고스트 해제' },
+      { keys: 'Enter', desc: '리스트 자동 이어쓰기' },
+    ],
+  },
+];
+
+export default function ShortcutOverlay() {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === '?' && !e.metaKey && !e.ctrlKey && !e.altKey) {
+        const target = e.target as HTMLElement | null;
+        const isInput =
+          target instanceof HTMLInputElement ||
+          target instanceof HTMLTextAreaElement ||
+          (target?.isContentEditable ?? false) ||
+          !!target?.closest?.('.cm-editor');
+        if (isInput) return;
+        e.preventDefault();
+        setOpen(prev => !prev);
+      }
+      if (e.key === 'Escape' && open) {
+        setOpen(false);
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [open]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      onClick={() => setOpen(false)}
+      className="fixed inset-0 z-[70] flex items-center justify-center"
+      style={{ background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(3px)' }}
+    >
+      <div
+        onClick={(e) => e.stopPropagation()}
+        className="bg-card border border-border rounded-xl shadow-2xl w-full max-w-lg animate-dialog-in p-5"
+      >
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-sm font-semibold text-foreground">Keyboard Shortcuts</h2>
+          <button onClick={() => setOpen(false)} className="text-muted-foreground hover:text-foreground text-lg leading-none">×</button>
+        </div>
+        <div className="space-y-4">
+          {SECTIONS.map((section) => (
+            <div key={section.title}>
+              <div className="text-[10px] uppercase tracking-wider text-muted-foreground/70 mb-1.5">{section.title}</div>
+              <div className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1">
+                {section.shortcuts.map((s) => (
+                  <div key={s.keys} className="contents">
+                    <kbd className="text-xs font-mono px-1.5 py-0.5 rounded bg-muted border border-border text-foreground text-right whitespace-nowrap">
+                      {s.keys}
+                    </kbd>
+                    <span className="text-xs text-muted-foreground self-center">{s.desc}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+        <div className="mt-4 text-[10px] text-muted-foreground/50 text-center">
+          ? 를 다시 눌러 닫기
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/workspace/ProjectAdvisor.tsx

@@ -1,194 +1,30 @@
 'use client';
 
-import { useState, useEffect, useRef, useCallback } from 'react';
-import type { IProjectConversation } from '@/types';
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
+import AdvisorChat from '@/components/advisor/AdvisorChat';
 
 export default function ProjectAdvisor({
   projectId,
+  projectName,
   onClose,
 }: {
   projectId: string;
+  projectName?: string;
   onClose: () => void;
 }) {
-  const [messages, setMessages] = useState<IProjectConversation[]>([]);
-  const [input, setInput] = useState('');
-  const [loading, setLoading] = useState(false);
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-  const basePath = `/api/projects/${projectId}/advisor`;
-
-  const fetchMessages = useCallback(async () => {
-    try {
-      const res = await fetch(basePath);
-      if (!res.ok) return;
-      const data = await res.json();
-      if (Array.isArray(data)) setMessages(data);
-    } catch { /* silent */ }
-  }, [basePath]);
-
-  useEffect(() => {
-    fetchMessages();
-  }, [fetchMessages]);
-
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [messages]);
-
-  useEffect(() => {
-    inputRef.current?.focus();
-  }, []);
-
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') { e.preventDefault(); onClose(); }
-    };
-    window.addEventListener('keydown', onKey);
-    return () => window.removeEventListener('keydown', onKey);
-  }, [onClose]);
-
-  const send = useCallback(async () => {
-    const text = input.trim();
-    if (!text || loading) return;
-    setInput('');
-    setLoading(true);
-
-    const tempId = `temp-${Date.now()}`;
-    const userMsg: IProjectConversation = {
-      id: tempId, project_id: projectId, role: 'user', content: text,
-      created_at: new Date().toISOString(),
-    };
-    setMessages(prev => [...prev, userMsg]);
-
-    try {
-      const res = await fetch(basePath, {
-        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, projectId]);
-
-  const handleClear = useCallback(async () => {
-    await fetch(basePath, { method: 'DELETE' });
-    setMessages([]);
-    inputRef.current?.focus();
-  }, [basePath]);
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      send();
-    }
-  };
-
   return (
-    <div className="fixed inset-0 z-50 flex justify-end" onClick={onClose}>
-      <div className="absolute inset-0 bg-black/40" style={{ backdropFilter: 'blur(2px)' }} />
-
-      <div
-        onClick={(e) => e.stopPropagation()}
-        className="relative w-[480px] max-w-[85vw] h-full bg-card border-l border-border shadow-2xl flex flex-col"
-        style={{ animation: 'dialog-in 0.15s ease-out' }}
-      >
-        {/* Header */}
-        <div className="px-4 py-3 border-b border-border flex items-center justify-between flex-shrink-0">
-          <div className="flex items-center gap-2">
-            <span className="text-sm font-semibold text-foreground">Project Advisor</span>
-            <span className="text-[10px] text-muted-foreground/60">⌘L</span>
-          </div>
-          <div className="flex items-center gap-2">
-            {messages.length > 0 && (
-              <button
-                onClick={handleClear}
-                className="text-xs text-muted-foreground hover:text-foreground transition-colors px-1"
-                title="대화 초기화"
-              >
-                Clear
-              </button>
-            )}
-            <button
-              onClick={onClose}
-              className="text-muted-foreground hover:text-foreground transition-colors text-lg leading-none"
-            >
-              ×
-            </button>
-          </div>
-        </div>
-
-        {/* Messages */}
-        <div className="flex-1 overflow-y-auto px-4 py-3 space-y-3 min-h-0">
-          {messages.length === 0 && !loading && (
-            <div className="flex flex-col items-center justify-center h-full text-center gap-3 text-muted-foreground">
-              <div className="text-2xl">🧭</div>
-              <div className="text-sm">프로젝트 전체 맥락을 보고 답합니다</div>
-              <div className="text-xs text-muted-foreground/70 max-w-[300px] leading-relaxed">
-                &quot;다음 뭐부터 하면 좋겠어?&quot;<br />
-                &quot;빠진 작업 없나?&quot;<br />
-                &quot;이번 주 진행 상황 정리해줘&quot;<br />
-                &quot;이 방향이 맞는지 검토해줘&quot;
-              </div>
-            </div>
-          )}
-          {messages.filter(m => m.role !== 'system').map((msg) => (
-            <div key={msg.id} className={`flex flex-col ${msg.role === 'user' ? 'items-end' : 'items-start'}`}>
-              <div className={`max-w-[92%] px-3 py-2 rounded-lg text-sm leading-relaxed ${
-                msg.role === 'user'
-                  ? 'bg-accent text-white rounded-br-sm whitespace-pre-wrap'
-                  : 'bg-muted text-foreground rounded-bl-sm chat-markdown'
-              }`}>
-                {msg.role === 'assistant'
-                  ? <ReactMarkdown remarkPlugins={[remarkGfm]}>{msg.content}</ReactMarkdown>
-                  : msg.content}
-              </div>
-            </div>
-          ))}
-          {loading && (
-            <div className="flex items-start">
-              <div className="px-3 py-2 rounded-lg bg-muted text-foreground rounded-bl-sm">
-                <div className="flex gap-1">
-                  <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>
-            </div>
-          )}
-          <div ref={messagesEndRef} />
-        </div>
-
-        {/* Input */}
-        <div className="flex gap-1.5 px-3 py-3 border-t border-border flex-shrink-0">
-          <textarea
-            ref={inputRef}
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            onKeyDown={handleKeyDown}
-            placeholder="프로젝트에 대해 무엇이든 물어보세요…"
-            rows={2}
-            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 self-end"
-          >
-            Send
-          </button>
-        </div>
-      </div>
-
-    </div>
+    <AdvisorChat
+      basePath={`/api/projects/${projectId}/advisor`}
+      title="Project Advisor"
+      shortcutHint="⌘L"
+      placeholder="프로젝트에 대해 무엇이든 물어보세요…"
+      emptyIcon="🧭"
+      emptyHints={[
+        '프로젝트 전체 맥락을 보고 답합니다',
+        '"다음 뭐부터 하면 좋겠어?"\n"빠진 작업 없나?"\n"이번 주 진행 상황 정리해줘"',
+      ]}
+      activityType="project-advisor"
+      activityLabel={projectName ? `Advisor: ${projectName}` : 'Project Advisor'}
+      onClose={onClose}
+    />
   );
 }