idea-manager 1.6.0 → 1.7.0

package/src/components/search/QuickCapture.tsx

@@ -0,0 +1,208 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { useTabContext } from '@/components/tabs/TabContext';
+import type { IProject, ISubProject, ITask } from '@/types';
+
+interface ProjectWithSubs extends IProject {
+  subProjects?: ISubProject[];
+  loaded?: boolean;
+}
+
+const LAST_DEST_KEY = 'im-quick-capture-last-dest';
+
+interface LastDest { projectId: string; subProjectId: string }
+
+function loadLastDest(): LastDest | null {
+  if (typeof window === 'undefined') return null;
+  try {
+    const raw = localStorage.getItem(LAST_DEST_KEY);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (parsed?.projectId && parsed?.subProjectId) return parsed as LastDest;
+  } catch { /* ignore */ }
+  return null;
+}
+
+function saveLastDest(dest: LastDest) {
+  try { localStorage.setItem(LAST_DEST_KEY, JSON.stringify(dest)); } catch { /* quota */ }
+}
+
+export default function QuickCapture() {
+  const [open, setOpen] = useState(false);
+  const [projects, setProjects] = useState<ProjectWithSubs[]>([]);
+  const [projectId, setProjectId] = useState<string>('');
+  const [subProjectId, setSubProjectId] = useState<string>('');
+  const [title, setTitle] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [err, setErr] = useState<string | null>(null);
+  const titleRef = useRef<HTMLInputElement>(null);
+  const { openProject } = useTabContext();
+
+  // Global ⌘N / Ctrl+N shortcut
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'n') {
+        e.preventDefault();
+        setOpen(prev => !prev);
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, []);
+
+  // Load projects on first open
+  useEffect(() => {
+    if (!open) return;
+    fetch('/api/projects')
+      .then(r => r.ok ? r.json() : [])
+      .then((data: IProject[]) => {
+        setProjects(data.map(p => ({ ...p })));
+        const last = loadLastDest();
+        const fallback = data[0]?.id;
+        const initial = last?.projectId && data.some(p => p.id === last.projectId) ? last.projectId : fallback;
+        if (initial) setProjectId(initial);
+      });
+  }, [open]);
+
+  // Load sub-projects when project changes
+  useEffect(() => {
+    if (!projectId) { setSubProjectId(''); return; }
+    const existing = projects.find(p => p.id === projectId);
+    if (existing?.loaded && existing.subProjects) {
+      const last = loadLastDest();
+      const fallback = existing.subProjects[0]?.id ?? '';
+      setSubProjectId(
+        last?.projectId === projectId && existing.subProjects.some(s => s.id === last.subProjectId)
+          ? last.subProjectId
+          : fallback,
+      );
+      return;
+    }
+    fetch(`/api/projects/${projectId}/sub-projects`)
+      .then(r => r.ok ? r.json() : [])
+      .then((subs: ISubProject[]) => {
+        setProjects(prev => prev.map(p =>
+          p.id === projectId ? { ...p, subProjects: subs, loaded: true } : p
+        ));
+        const last = loadLastDest();
+        const fallback = subs[0]?.id ?? '';
+        setSubProjectId(
+          last?.projectId === projectId && subs.some(s => s.id === last.subProjectId)
+            ? last.subProjectId
+            : fallback,
+        );
+      });
+  // projects is mutated above; keep deps minimal to avoid refetch loops
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [projectId]);
+
+  useEffect(() => {
+    if (!open) return;
+    setTitle('');
+    setErr(null);
+    setBusy(false);
+    const id = requestAnimationFrame(() => titleRef.current?.focus());
+    return () => cancelAnimationFrame(id);
+  }, [open]);
+
+  const submit = async () => {
+    const t = title.trim();
+    if (!t || !projectId || !subProjectId || busy) return;
+    setBusy(true);
+    setErr(null);
+    try {
+      const res = await fetch(`/api/projects/${projectId}/sub-projects/${subProjectId}/tasks`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ title: t }),
+      });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const task = await res.json() as ITask;
+      saveLastDest({ projectId, subProjectId });
+      const project = projects.find(p => p.id === projectId);
+      if (project) openProject(project.id, project.name, subProjectId, task.id);
+      setOpen(false);
+    } catch (e) {
+      setErr(e instanceof Error ? e.message : '생성 실패');
+      setBusy(false);
+    }
+  };
+
+  if (!open) return null;
+
+  const currentProject = projects.find(p => p.id === projectId);
+  const subs = currentProject?.subProjects ?? [];
+
+  return (
+    <div
+      onClick={() => setOpen(false)}
+      className="fixed inset-0 z-[60] flex items-start justify-center pt-[16vh]"
+      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-md animate-dialog-in p-4 flex flex-col gap-3"
+      >
+        <div className="flex items-center justify-between">
+          <div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">빠른 태스크 캡처</div>
+          <span className="text-[10px] text-muted-foreground/70 px-1.5 py-0.5 border border-border rounded">⌘N · Esc</span>
+        </div>
+
+        <div className="grid grid-cols-2 gap-2">
+          <select
+            value={projectId}
+            onChange={(e) => setProjectId(e.target.value)}
+            className="bg-input border border-border rounded-md px-2 py-1.5 text-sm text-foreground focus:border-primary focus:outline-none"
+          >
+            {projects.map(p => (
+              <option key={p.id} value={p.id}>{p.name}</option>
+            ))}
+          </select>
+          <select
+            value={subProjectId}
+            onChange={(e) => setSubProjectId(e.target.value)}
+            disabled={!subs.length}
+            className="bg-input border border-border rounded-md px-2 py-1.5 text-sm text-foreground focus:border-primary focus:outline-none disabled:opacity-50"
+          >
+            {subs.length === 0 ? (
+              <option value="">프로젝트 없음</option>
+            ) : subs.map(s => (
+              <option key={s.id} value={s.id}>{s.name}</option>
+            ))}
+          </select>
+        </div>
+
+        <input
+          ref={titleRef}
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') { e.preventDefault(); submit(); }
+            if (e.key === 'Escape') { e.preventDefault(); setOpen(false); }
+          }}
+          placeholder="태스크 제목을 입력하고 Enter…"
+          className="w-full bg-input border border-border rounded-md px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-none"
+        />
+
+        {err && <div className="text-xs text-destructive">⚠ {err}</div>}
+
+        <div className="flex items-center justify-between">
+          <div className="text-[10px] text-muted-foreground/70">
+            저장 후 해당 태스크 워크스페이스로 바로 이동
+          </div>
+          <div className="flex gap-2">
+            <button onClick={() => setOpen(false)} className="text-xs text-muted-foreground px-2 py-1">취소</button>
+            <button
+              onClick={submit}
+              disabled={!title.trim() || !projectId || !subProjectId || busy}
+              className="text-xs px-3 py-1 bg-primary text-primary-foreground rounded disabled:opacity-40"
+            >
+              {busy ? '…' : '생성'}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/tabs/TabBar.tsx

@@ -2,6 +2,7 @@
 
 import { useTabContext } from './TabContext';
 import ThemePicker from '@/components/theme/ThemePicker';
+import UpdateButton from '@/components/update/UpdateButton';
 
 export default function TabBar() {
   const { state, setActiveTab, closeTab } = useTabContext();
@@ -43,6 +44,7 @@ export default function TabBar() {
         );
       })}
       <div className="tab-bar-spacer" />
+      <UpdateButton />
       <ThemePicker />
     </div>
   );

package/src/components/tabs/TabShell.tsx

@@ -4,6 +4,8 @@ import { useTabContext } from './TabContext';
 import TabBar from './TabBar';
 import DashboardPanel from '@/components/dashboard/DashboardPanel';
 import WorkspacePanel from '@/components/workspace/WorkspacePanel';
+import GlobalSearch from '@/components/search/GlobalSearch';
+import QuickCapture from '@/components/search/QuickCapture';
 
 export default function TabShell() {
   const { state } = useTabContext();
@@ -11,6 +13,8 @@ export default function TabShell() {
   return (
     <div className="h-screen flex flex-col">
       <TabBar />
+      <GlobalSearch />
+      <QuickCapture />
       <div className="flex-1 min-h-0 relative">
         {state.tabs.map((tab) => (
           <div

package/src/components/task/CommandPalette.tsx

@@ -19,6 +19,28 @@ const COMMANDS: { key: RefineCommand; label: string; hint: string }[] = [
   { key: 'custom',       label: '직접 입력…',           hint: '임의 명령을 프롬프트로 전달' },
 ];
 
+const HISTORY_KEY = 'im-refine-custom-history';
+const HISTORY_MAX = 8;
+
+function loadHistory(): string[] {
+  if (typeof window === 'undefined') return [];
+  try {
+    const raw = localStorage.getItem(HISTORY_KEY);
+    if (!raw) return [];
+    const arr = JSON.parse(raw);
+    return Array.isArray(arr) ? arr.filter((v): v is string => typeof v === 'string') : [];
+  } catch { return []; }
+}
+
+function pushHistory(entry: string) {
+  if (typeof window === 'undefined') return;
+  const trimmed = entry.trim();
+  if (!trimmed) return;
+  const prev = loadHistory().filter(x => x !== trimmed);
+  const next = [trimmed, ...prev].slice(0, HISTORY_MAX);
+  try { localStorage.setItem(HISTORY_KEY, JSON.stringify(next)); } catch { /* quota */ }
+}
+
 export default function CommandPalette({
   open,
   hasSelection,
@@ -33,6 +55,7 @@ export default function CommandPalette({
   const [idx, setIdx] = useState(0);
   const [customMode, setCustomMode] = useState(false);
   const [custom, setCustom] = useState('');
+  const [history, setHistory] = useState<string[]>([]);
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
@@ -44,7 +67,10 @@ export default function CommandPalette({
   }, [open]);
 
   useEffect(() => {
-    if (customMode) inputRef.current?.focus();
+    if (customMode) {
+      inputRef.current?.focus();
+      setHistory(loadHistory());
+    }
   }, [customMode]);
 
   if (!open) return null;
@@ -61,6 +87,7 @@ export default function CommandPalette({
   const submitCustom = () => {
     const t = custom.trim();
     if (!t) return;
+    pushHistory(t);
     onRun('custom', t);
   };
 
@@ -114,11 +141,30 @@ export default function CommandPalette({
               onChange={(e) => setCustom(e.target.value)}
               onKeyDown={(e) => {
                 if (e.key === 'Enter') submitCustom();
-                if (e.key === 'Escape') onClose();
+                if (e.key === 'Escape') { e.preventDefault(); setCustomMode(false); }
               }}
               placeholder="예: 이 부분 markdown 표로 만들어줘"
               className="w-full bg-input border border-border rounded-md px-3 py-2 text-sm focus:border-primary focus:outline-none"
             />
+            {history.length > 0 && (
+              <div className="flex flex-col gap-1.5">
+                <div className="text-[10px] uppercase tracking-wider text-muted-foreground/70">최근 명령</div>
+                <div className="flex flex-wrap gap-1.5">
+                  {history.map((h) => (
+                    <button
+                      key={h}
+                      onClick={() => setCustom(h)}
+                      title={h}
+                      className="text-xs px-2 py-1 rounded border border-border text-muted-foreground
+                                 hover:text-foreground hover:border-muted-foreground transition-colors
+                                 max-w-[220px] truncate text-left"
+                    >
+                      {h}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
             <div className="flex justify-end gap-2">
               <button onClick={() => setCustomMode(false)} className="text-xs text-muted-foreground px-2 py-1">뒤로</button>
               <button

package/src/components/task/NoteEditor.tsx

@@ -285,18 +285,32 @@ const mdHighlight = HighlightStyle.define([
 // ─────────────────────────────────────────────────────────────
 // Component
 // ─────────────────────────────────────────────────────────────
+// Extract the current bullet/checkbox line text suitable for promoting to a task.
+// Returns the "content" portion (without the `- [ ]` marker) and the line range.
+export function getPromotableLine(view: EditorView): { content: string; from: number; to: number } | null {
+  const state = view.state;
+  const pos = state.selection.main.head;
+  const line = state.doc.lineAt(pos);
+  const m = line.text.match(/^(\s*)([-*+])\s(?:\[[ xX]\]\s)?(.*)$/);
+  if (!m) return null;
+  const content = m[3]?.trim();
+  if (!content) return null;
+  return { content, from: line.from, to: line.to };
+}
+
 export interface NoteEditorProps {
   value: string;
   onChange: (v: string) => void;
   onBlur?: () => void;
   onOpenCommand?: () => void;
+  onPromoteLine?: () => void;
   placeholder?: string;
   /** Extra text blobs (sibling tasks, brainstorm, …) to widen the autocomplete corpus. */
   extraCorpus?: string[];
 }
 
 const NoteEditor = forwardRef<ReactCodeMirrorRef, NoteEditorProps>(function NoteEditor(
-  { value, onChange, onBlur, onOpenCommand, placeholder, extraCorpus },
+  { value, onChange, onBlur, onOpenCommand, onPromoteLine, placeholder, extraCorpus },
   ref,
 ) {
   // Mutable ref keeps the plugin in sync with the latest corpus without
@@ -315,6 +329,7 @@ const NoteEditor = forwardRef<ReactCodeMirrorRef, NoteEditorProps>(function Note
       { key: 'Escape', run: dismissGhost },
       { key: 'Enter', run: continueList },
       { key: 'Mod-k', run: () => { onOpenCommand?.(); return true; } },
+      { key: 'Mod-Shift-t', run: () => { onPromoteLine?.(); return true; } },
     ])),
     EditorView.lineWrapping,
     EditorView.theme({

package/src/components/task/TaskChat.tsx

@@ -149,27 +149,38 @@ export default function TaskChat({
             노트 작성을 도와드립니다. 질문하거나 "이 부분 정리해줘" 같이 요청해보세요
           </div>
         )}
-        {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 ${
-              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}
+        {messages.filter(msg => msg.content).map((msg) => {
+          const isProgress = msg.role === 'assistant' && msg.content.startsWith('[진행 중]');
+          return (
+            <div key={msg.id} className={`flex flex-col ${msg.role === 'user' ? 'items-end' : 'items-start'}`}>
+              {isProgress && (
+                <div className="flex items-center gap-1.5 text-[10px] uppercase tracking-wider text-warning mb-0.5 pl-1">
+                  <span className="inline-block w-1.5 h-1.5 rounded-full bg-warning animate-pulse" />
+                  Watch 실행 중 · 실시간 출력
+                </div>
+              )}
+              <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 whitespace-pre-wrap'
+                  : isProgress
+                    ? 'bg-warning/10 text-foreground rounded-bl-sm chat-markdown border border-warning/30'
+                    : 'bg-muted text-foreground rounded-bl-sm chat-markdown'
+              }`}>
+                {msg.role === 'assistant'
+                  ? <ReactMarkdown remarkPlugins={[remarkGfm]}>{msg.content}</ReactMarkdown>
+                  : msg.content}
+              </div>
+              {msg.role === 'assistant' && !isProgress && (
+                <button
+                  onClick={() => onInsertToNote(msg.content)}
+                  className="text-xs text-muted-foreground hover:text-primary mt-0.5 px-1 transition-colors"
+                >
+                  ↓ 노트에 삽입
+                </button>
+              )}
             </div>
-            {msg.role === 'assistant' && (
-              <button
-                onClick={() => onInsertToNote(msg.content)}
-                className="text-xs text-muted-foreground hover:text-primary mt-0.5 px-1 transition-colors"
-              >
-                ↓ 노트에 삽입
-              </button>
-            )}
-          </div>
-        ))}
+          );
+        })}
         {loading && (
           <div className="flex gap-1 px-2 py-2">
             <div className="w-1.5 h-1.5 rounded-full bg-muted-foreground animate-bounce" style={{ animationDelay: '0ms' }} />

package/src/components/task/TaskDetail.tsx

@@ -4,7 +4,7 @@ import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
 import type { ITask, TaskStatus, ItemPriority } from '@/types';
 import StatusFlow from './StatusFlow';
 import TaskChat from './TaskChat';
-import NoteEditor from './NoteEditor';
+import NoteEditor, { getPromotableLine } from './NoteEditor';
 import CommandPalette, { type RefineCommand } from './CommandPalette';
 import type { ReactCodeMirrorRef } from '@uiw/react-codemirror';
 
@@ -15,6 +15,7 @@ export default function TaskDetail({
   siblingTasks,
   onUpdate,
   onDelete,
+  onTaskPromoted,
   onChatStateChange,
 }: {
   task: ITask;
@@ -24,6 +25,8 @@ export default function TaskDetail({
   siblingTasks?: ITask[];
   onUpdate: (data: Partial<ITask>) => void;
   onDelete: () => void;
+  /** Fired after a checkbox line is promoted to a new task. Parent should refresh its task list. */
+  onTaskPromoted?: (newTask: ITask) => void;
   onChatStateChange?: (taskId: string, state: 'idle' | 'loading' | 'done') => void;
 }) {
   const [title, setTitle] = useState(task.title);
@@ -31,6 +34,16 @@ export default function TaskDetail({
   const [editingTitle, setEditingTitle] = useState(false);
   const [copied, setCopied] = useState(false);
   const [chatOpen, setChatOpen] = useState(false);
+  const chatWasManuallyToggled = useRef(false);
+
+  // Auto-open the chat panel while the task is being executed by the watcher —
+  // that's where streaming progress shows up. Don't override a manual toggle
+  // the user made in this session.
+  useEffect(() => {
+    if (task.status === 'testing' && !chatOpen && !chatWasManuallyToggled.current) {
+      setChatOpen(true);
+    }
+  }, [task.status, chatOpen]);
   const [paletteOpen, setPaletteOpen] = useState(false);
   const [refining, setRefining] = useState(false);
   const [refineElapsed, setRefineElapsed] = useState(0);
@@ -230,6 +243,46 @@ export default function TaskDetail({
     setUndoSnapshot(null);
   }, [undoSnapshot, task.id, onUpdate]);
 
+  const [promoteNotice, setPromoteNotice] = useState<string | null>(null);
+
+  const promoteCheckbox = useCallback(async () => {
+    const view = editorRef.current?.view;
+    if (!view) return;
+    const line = getPromotableLine(view);
+    if (!line) {
+      setRefineError('체크박스나 불릿 목록 줄에 커서를 두고 실행하세요');
+      setTimeout(() => setRefineError(null), 3000);
+      return;
+    }
+    const titleText = line.content.slice(0, 200);
+    try {
+      const res = await fetch(`/api/projects/${projectId}/sub-projects/${subProjectId}/tasks`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ title: titleText }),
+      });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const newTask = await res.json() as ITask;
+
+      // Remove the promoted line from the note (and a trailing newline, if any).
+      const doc = view.state.doc.toString();
+      const before = doc.slice(0, line.from);
+      const afterRaw = doc.slice(line.to);
+      const trimmed = afterRaw.startsWith('\n') ? afterRaw.slice(1) : afterRaw;
+      const nextDoc = before + trimmed;
+      setDescription(nextDoc);
+      onUpdate({ description: nextDoc });
+      onTaskPromoted?.(newTask);
+
+      setPromoteNotice(`→ 태스크 "${titleText}" 생성됨`);
+      setTimeout(() => setPromoteNotice(null), 3000);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : '태스크 생성 실패';
+      setRefineError(msg);
+      setTimeout(() => setRefineError(null), 4000);
+    }
+  }, [projectId, subProjectId, onUpdate, onTaskPromoted]);
+
   const priorities: ItemPriority[] = ['high', 'medium', 'low'];
 
   return (
@@ -302,7 +355,7 @@ export default function TaskDetail({
             {copied ? '✓ Copied' : 'Copy as Prompt'}
           </button>
           <button
-            onClick={() => setChatOpen(v => !v)}
+            onClick={() => { chatWasManuallyToggled.current = true; setChatOpen(v => !v); }}
             className={`text-xs px-2 py-0.5 rounded transition-colors border ${
               chatOpen
                 ? 'bg-accent/15 text-accent border-accent/30'
@@ -336,6 +389,7 @@ export default function TaskDetail({
             onChange={setDescription}
             onBlur={saveDescription}
             onOpenCommand={openPalette}
+            onPromoteLine={promoteCheckbox}
             extraCorpus={extraCorpus}
             placeholder="자유롭게 작성하세요. 배경 · 목표 · 관련 파일 · 결정사항 · 질문 · 링크 등 뭐든..."
           />
@@ -353,6 +407,12 @@ export default function TaskDetail({
             </button>
           </div>
         )}
+        {promoteNotice && (
+          <div className="absolute bottom-2 right-3 text-xs px-3 py-1.5 rounded bg-success/15 text-success flex items-center gap-2 shadow-lg border border-success/30">
+            <span>✓</span>
+            <span className="truncate max-w-[50ch]">{promoteNotice}</span>
+          </div>
+        )}
         {!refining && undoSnapshot && undoSnapshot.taskId === task.id && (
           <div className="absolute bottom-2 right-3 text-xs px-2 py-1 rounded bg-accent/15 text-foreground flex items-center gap-2 shadow-lg border border-accent/30">
             <span className="text-accent">✓</span>