idea-manager 1.5.1 → 1.6.0

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

@@ -1,7 +1,6 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { getTaskConversations, addTaskConversation } from '@/lib/db/queries/task-conversations';
 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 { runAgent } from '@/lib/ai/client';
@@ -39,18 +38,23 @@ export async function POST(
 
   // Build context for AI
   const history = getTaskConversations(taskId);
-  const prompt = getTaskPrompt(taskId);
   const brainstorm = getBrainstorm(projectId);
   const project = getProject(projectId);
 
   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.
+  const systemPrompt = `당신은 사용자가 자기 태스크 "노트"를 다듬는 것을 돕는 보조자입니다.
+사용자는 터미널 Claude Code에서 실제 작업을 수행하며, IM에서는 태스크의 맥락·배경·결정사항·질문 등을 자유롭게 메모합니다.
+당신의 역할:
+  - 사용자가 질문하면 간결하게 답한다 (긴 설교 금지)
+  - 사용자가 "이 부분 정리해줘" 같은 요청을 하면 노트에 바로 삽입 가능한 형태(마크다운)로 답한다
+  - 공식 프롬프트를 만들려 하지 말 것. 사용자의 생각을 **정리·명확화**하는 역할만
+응답은 한국어로.
 ${aiPolicy}
 Task: ${task.title}
-Description: ${task.description}
+Note(현재):
+${task.description || '(비어있음)'}
 Status: ${task.status}
-${prompt?.content ? `Current prompt:\n${prompt.content}` : ''}
 ${brainstorm?.content ? `\nBrainstorming context:\n${brainstorm.content.slice(0, 3000)}` : ''}`;
 
   const conversationText = history

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

@@ -0,0 +1,76 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getTask } from '@/lib/db/queries/tasks';
+import { getProject } from '@/lib/db/queries/projects';
+import { runAgent } from '@/lib/ai/client';
+import { ensureDb } from '@/lib/db';
+
+type RefineCommand = 'continue' | 'tidy' | 'split' | 'to-questions' | 'summarize' | 'custom';
+
+function buildInstruction(cmd: RefineCommand, customText?: string): string {
+  switch (cmd) {
+    case 'continue':
+      return '아래 노트의 흐름을 자연스럽게 이어서 덧붙일 한 단락(또는 bullet 몇 개)을 마크다운으로 작성하세요. 설명은 빼고 이어질 내용만 출력.';
+    case 'tidy':
+      return '아래 선택 영역의 뜻을 바꾸지 않고 깔끔하게 다듬어 주세요. 설명 없이 다듬어진 본문만 마크다운으로 출력.';
+    case 'split':
+      return '아래 선택 영역(또는 노트 전체)을 구체적인 할 일 단위의 체크박스 리스트로 변환하세요. 각 항목은 "- [ ] "로 시작. 설명 없이 리스트만 출력.';
+    case 'to-questions':
+      return '아래 내용에서 애매하거나 결정이 필요한 부분을 찾아 명확하게 해줄 질문 목록으로 바꿔주세요. "- Q. "로 시작하는 bullet로 출력. 설명 생략.';
+    case 'summarize':
+      return '아래 내용을 3줄 이내로 요약하세요. bullet 3개. 설명 없이 요약만.';
+    case 'custom':
+      return customText?.trim() || '아래 내용을 개선해주세요.';
+  }
+}
+
+export async function POST(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string; subId: string; taskId: string }> },
+) {
+  await ensureDb();
+  const { id: projectId, taskId } = await params;
+  const body = await request.json() as { command?: RefineCommand; customText?: string; selection?: string; note?: string };
+
+  if (!body.command) {
+    return NextResponse.json({ error: 'command is required' }, { status: 400 });
+  }
+
+  const task = getTask(taskId);
+  if (!task) return NextResponse.json({ error: 'Task not found' }, { status: 404 });
+
+  const project = getProject(projectId);
+  const aiPolicy = project?.ai_context ? `\n\nProject AI Policy:\n${project.ai_context}` : '';
+  const instruction = buildInstruction(body.command, body.customText);
+  const selection = body.selection?.trim();
+  const note = body.note ?? task.description ?? '';
+
+  const prompt = `당신은 사용자의 노트 작성을 돕는 보조자입니다. 한국어로 답하세요.
+${aiPolicy}
+
+[태스크]
+제목: ${task.title}
+
+[명령]
+${instruction}
+
+${selection
+  ? `[선택 영역]\n${selection}\n\n[노트 전체 컨텍스트]\n${note}`
+  : `[노트 전체]\n${note}`}
+
+중요: 답변은 노트에 그대로 삽입될 마크다운 텍스트만 출력하세요. 설명·전제·서론·결론 금지.`;
+
+  try {
+    const agentType = project?.agent_type || 'claude';
+    // Refine is a pure text-tidying task — no repo exploration or tool use.
+    // Skip cwd so the project's CLAUDE.md isn't loaded into context, and run
+    // against a faster model. Keeps latency well under the 90s budget.
+    const result = await runAgent(agentType, prompt, undefined, undefined, {
+      timeoutMs: 90000,
+      model: 'sonnet',
+    });
+    return NextResponse.json({ result: result.trim() });
+  } catch (err) {
+    const msg = err instanceof Error ? err.message : 'AI 호출 실패';
+    return NextResponse.json({ error: msg }, { status: 500 });
+  }
+}

package/src/components/dashboard/DashboardPanel.tsx

@@ -276,7 +276,7 @@ export default function DashboardPanel() {
 
   const STATUS_FILTERS: Record<string, (t: ITask) => boolean> = {
     total: () => true,
-    active: (t) => t.status === 'submitted' || t.status === 'testing',
+    active: (t) => t.status === 'doing' || t.status === 'submitted' || t.status === 'testing',
     pending: (t) => t.status === 'idea' || t.status === 'writing',
     done: (t) => t.status === 'done',
     problem: (t) => t.status === 'problem',

package/src/components/dashboard/SubProjectCard.tsx

@@ -4,6 +4,7 @@ import type { ISubProjectWithStats, TaskStatus } from '@/types';
 
 const STATUS_ICONS: Record<TaskStatus, string> = {
   idea: '\u{1F4A1}',
+  doing: '\u{1F525}',
   writing: '\u{270F}\u{FE0F}',
   submitted: '\u{1F680}',
   testing: '\u{1F9EA}',

package/src/components/task/CommandPalette.tsx

@@ -0,0 +1,137 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+export type RefineCommand =
+  | 'continue'
+  | 'tidy'
+  | 'split'
+  | 'to-questions'
+  | 'summarize'
+  | 'custom';
+
+const COMMANDS: { key: RefineCommand; label: string; hint: string }[] = [
+  { key: 'continue',     label: '이어서 써줘',          hint: '커서 앞 맥락을 이어서 자연스럽게 덧붙임' },
+  { key: 'tidy',         label: '이 부분 정리해줘',     hint: '선택 영역을 깔끔히 다듬음 (의미 유지)' },
+  { key: 'split',        label: '할 일로 쪼개줘',       hint: '선택 영역을 체크박스 리스트로' },
+  { key: 'to-questions', label: '질문으로 바꿔줘',      hint: '모호한 부분을 명확하게 하는 질문 목록으로' },
+  { key: 'summarize',    label: '요약해줘',             hint: '선택 영역을 3줄 이내로' },
+  { key: 'custom',       label: '직접 입력…',           hint: '임의 명령을 프롬프트로 전달' },
+];
+
+export default function CommandPalette({
+  open,
+  hasSelection,
+  onClose,
+  onRun,
+}: {
+  open: boolean;
+  hasSelection: boolean;
+  onClose: () => void;
+  onRun: (cmd: RefineCommand, customText?: string) => void;
+}) {
+  const [idx, setIdx] = useState(0);
+  const [customMode, setCustomMode] = useState(false);
+  const [custom, setCustom] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (open) {
+      setIdx(0);
+      setCustomMode(false);
+      setCustom('');
+    }
+  }, [open]);
+
+  useEffect(() => {
+    if (customMode) inputRef.current?.focus();
+  }, [customMode]);
+
+  if (!open) return null;
+
+  const runAt = (i: number) => {
+    const c = COMMANDS[i];
+    if (c.key === 'custom') {
+      setCustomMode(true);
+      return;
+    }
+    onRun(c.key);
+  };
+
+  const submitCustom = () => {
+    const t = custom.trim();
+    if (!t) return;
+    onRun('custom', t);
+  };
+
+  return (
+    <div
+      onClick={onClose}
+      className="fixed inset-0 z-50 flex items-start justify-center pt-[18vh]"
+      style={{ background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(2px)' }}
+    >
+      <div
+        onClick={(e) => e.stopPropagation()}
+        className="bg-card border border-border rounded-xl shadow-2xl w-full max-w-md animate-dialog-in"
+      >
+        <div className="px-4 py-3 border-b border-border flex items-center justify-between">
+          <div className="text-xs text-muted-foreground">
+            {hasSelection ? '선택 영역에 명령 실행' : '커서 위치 기준 명령 실행'}
+          </div>
+          <button onClick={onClose} className="text-xs text-muted-foreground hover:text-foreground">Esc</button>
+        </div>
+
+        {!customMode ? (
+          <ul
+            onKeyDown={(e) => {
+              if (e.key === 'ArrowDown') { e.preventDefault(); setIdx((i) => Math.min(i + 1, COMMANDS.length - 1)); }
+              else if (e.key === 'ArrowUp') { e.preventDefault(); setIdx((i) => Math.max(i - 1, 0)); }
+              else if (e.key === 'Enter') { e.preventDefault(); runAt(idx); }
+            }}
+            tabIndex={0}
+            ref={(el) => { el?.focus(); }}
+            className="py-1 max-h-[50vh] overflow-y-auto focus:outline-none"
+          >
+            {COMMANDS.map((c, i) => (
+              <li
+                key={c.key}
+                onMouseEnter={() => setIdx(i)}
+                onClick={() => runAt(i)}
+                className={`px-4 py-2 cursor-pointer flex flex-col gap-0.5 ${
+                  i === idx ? 'bg-muted' : ''
+                }`}
+              >
+                <span className="text-sm text-foreground">{c.label}</span>
+                <span className="text-xs text-muted-foreground">{c.hint}</span>
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <div className="p-4 flex flex-col gap-3">
+            <input
+              ref={inputRef}
+              value={custom}
+              onChange={(e) => setCustom(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') submitCustom();
+                if (e.key === 'Escape') onClose();
+              }}
+              placeholder="예: 이 부분 markdown 표로 만들어줘"
+              className="w-full bg-input border border-border rounded-md px-3 py-2 text-sm focus:border-primary focus:outline-none"
+            />
+            <div className="flex justify-end gap-2">
+              <button onClick={() => setCustomMode(false)} className="text-xs text-muted-foreground px-2 py-1">뒤로</button>
+              <button
+                onClick={submitCustom}
+                disabled={!custom.trim()}
+                className="text-xs px-3 py-1 bg-primary text-primary-foreground rounded disabled:opacity-40"
+              >
+                실행
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/task/NoteEditor.tsx

@@ -0,0 +1,411 @@
+'use client';
+
+import { forwardRef, useMemo, useRef } from 'react';
+import CodeMirror, { type ReactCodeMirrorRef } from '@uiw/react-codemirror';
+import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
+import { EditorView, Decoration, keymap, ViewPlugin, WidgetType } from '@codemirror/view';
+import { EditorState, StateEffect, StateField, Prec } from '@codemirror/state';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { tags as t } from '@lezer/highlight';
+
+// ─────────────────────────────────────────────────────────────
+// Ghost-text state: a decoration widget after the cursor.
+// ─────────────────────────────────────────────────────────────
+const setGhost = StateEffect.define<{ from: number; text: string } | null>();
+
+class GhostWidget extends WidgetType {
+  constructor(public readonly text: string) { super(); }
+  eq(other: GhostWidget) { return other.text === this.text; }
+  toDOM() {
+    const span = document.createElement('span');
+    span.className = 'cm-ghost-text';
+    span.textContent = this.text;
+    span.style.opacity = '0.35';
+    span.style.pointerEvents = 'none';
+    return span;
+  }
+  ignoreEvent() { return true; }
+}
+
+const ghostField = StateField.define<{ from: number; text: string } | null>({
+  create: () => null,
+  update(value, tr) {
+    for (const e of tr.effects) {
+      if (e.is(setGhost)) return e.value;
+    }
+    // Any doc change or selection move clears ghost unless effect explicitly set it
+    if (tr.docChanged || tr.selection) return null;
+    return value;
+  },
+});
+
+const ghostDecorations = EditorView.decorations.compute([ghostField], (state) => {
+  const g = state.field(ghostField);
+  if (!g) return Decoration.none;
+  return Decoration.set([
+    Decoration.widget({ widget: new GhostWidget(g.text), side: 1 }).range(g.from),
+  ]);
+});
+
+// ─────────────────────────────────────────────────────────────
+// Local autocomplete: suggest multi-word phrases sourced from the
+// current doc + an optional wider corpus (sibling tasks, brainstorm).
+// Phrases are segmented by punctuation; longer repeated n-grams win
+// over single-word matches when they appear often.
+// ─────────────────────────────────────────────────────────────
+const CURRENT_DOC_WEIGHT = 3;
+const MAX_PHRASE_LEN = 3;
+const MAX_GHOST_CHARS = 40;
+const TOKEN_MIN_LEN = 2;
+const SEGMENT_SPLIT = /[.!?,;:·\n\r()[\]{}"]+/;
+
+interface Segment { tokens: string[]; weight: number }
+
+function tokenizeSegments(text: string): string[][] {
+  const out: string[][] = [];
+  for (const raw of text.split(SEGMENT_SPLIT)) {
+    const tokens = raw.trim().split(/\s+/).filter(t => t.length >= TOKEN_MIN_LEN);
+    if (tokens.length) out.push(tokens);
+  }
+  return out;
+}
+
+// Cache extra-corpus segmentation by array identity to avoid re-splitting
+// a potentially large text blob on every keystroke.
+let cachedExtraRef: string[] | null = null;
+let cachedExtraSegs: Segment[] = [];
+function getExtraSegments(extraCorpus: string[]): Segment[] {
+  if (extraCorpus === cachedExtraRef) return cachedExtraSegs;
+  const segs: Segment[] = [];
+  for (const text of extraCorpus) {
+    for (const toks of tokenizeSegments(text)) segs.push({ tokens: toks, weight: 1 });
+  }
+  cachedExtraRef = extraCorpus;
+  cachedExtraSegs = segs;
+  return segs;
+}
+
+function buildSegments(doc: string, extraCorpus: string[]): Segment[] {
+  const out: Segment[] = [];
+  for (const toks of tokenizeSegments(doc)) out.push({ tokens: toks, weight: CURRENT_DOC_WEIGHT });
+  return out.concat(getExtraSegments(extraCorpus));
+}
+
+function caretPrefix(state: EditorState): { word: string; from: number } | null {
+  const pos = state.selection.main.head;
+  const line = state.doc.lineAt(pos);
+  const col = pos - line.from;
+  const before = line.text.slice(0, col);
+  const after = line.text.slice(col);
+  // Don't suggest when the caret sits inside a word — would duplicate the
+  // trailing part (e.g. "안녕하|세요" + ghost "세요" → "안녕하세요세요").
+  if (/^[A-Za-z가-힣\w_-]/.test(after)) return null;
+  const m = before.match(/([A-Za-z가-힣][\w가-힣_-]*)$/);
+  if (!m) return null;
+  return { word: m[1], from: pos - m[1].length };
+}
+
+// Gather vocabulary already present in the current doc. Segments from the
+// extra corpus that share vocabulary with this set are considered "topically
+// related" and receive a score boost — so if the user is writing about Pods,
+// "Pod"-adjacent completions win over unrelated ones.
+function buildContextVocabulary(doc: string): Set<string> {
+  const set = new Set<string>();
+  const matches = doc.toLowerCase().match(/[a-z가-힣][\w가-힣_-]{1,}/g);
+  if (!matches) return set;
+  for (const w of matches) {
+    if (w.length >= TOKEN_MIN_LEN) set.add(w);
+  }
+  return set;
+}
+
+function computeLocalGhost(
+  state: EditorState,
+  extraCorpus: string[],
+): { from: number; text: string } | null {
+  const ctx = caretPrefix(state);
+  if (!ctx || ctx.word.length < 2) return null;
+  const doc = state.doc.toString();
+  const segments = buildSegments(doc, extraCorpus);
+  const prefix = ctx.word.toLowerCase();
+  const contextVocab = buildContextVocabulary(doc);
+
+  // Tally candidate completions by the full tail text that would be inserted.
+  // Longer phrases get a small length bonus so "Claude Code" beats "Claude"
+  // when both appear with equal frequency. Segments that share vocabulary
+  // with the current doc get a relevance boost (up to 2×) so topically
+  // related completions surface first.
+  const scores = new Map<string, number>();
+  for (const seg of segments) {
+    let overlap = 0;
+    for (const tk of seg.tokens) {
+      if (contextVocab.has(tk.toLowerCase())) overlap++;
+    }
+    const relevance = 1 + Math.min(overlap * 0.25, 1.0);
+
+    for (let i = 0; i < seg.tokens.length; i++) {
+      const first = seg.tokens[i];
+      if (first.length <= ctx.word.length) continue;
+      if (!first.toLowerCase().startsWith(prefix)) continue;
+      if (first === ctx.word) continue;
+
+      const maxExtra = Math.min(MAX_PHRASE_LEN - 1, seg.tokens.length - i - 1);
+      for (let n = 0; n <= maxExtra; n++) {
+        const tail = n === 0
+          ? first.slice(ctx.word.length)
+          : `${first.slice(ctx.word.length)} ${seg.tokens.slice(i + 1, i + 1 + n).join(' ')}`;
+        if (tail.length > MAX_GHOST_CHARS) break;
+        const lengthBonus = 1 + n * 0.5;
+        scores.set(tail, (scores.get(tail) ?? 0) + seg.weight * lengthBonus * relevance);
+      }
+    }
+  }
+
+  if (!scores.size) return null;
+  // On exact tie, prefer later-inserted (longer) phrases using `>=`.
+  let best: { text: string; score: number } | null = null;
+  for (const [text, score] of scores) {
+    if (!best || score >= best.score) best = { text, score };
+  }
+  if (!best) return null;
+  return { from: state.selection.main.head, text: best.text };
+}
+
+function createLocalCompletionPlugin(corpusRef: { current: string[] }) {
+  return ViewPlugin.fromClass(class {
+    timer: ReturnType<typeof setTimeout> | null = null;
+    constructor(public view: EditorView) {}
+    update(u: { docChanged: boolean; selectionSet: boolean; state: EditorState; view: EditorView }) {
+      if (!u.docChanged && !u.selectionSet) return;
+      if (this.timer) clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        const ghost = computeLocalGhost(u.view.state, corpusRef.current);
+        u.view.dispatch({ effects: setGhost.of(ghost) });
+      }, 120);
+    }
+    destroy() {
+      if (this.timer) clearTimeout(this.timer);
+    }
+  });
+}
+
+// Accept-ghost command — bound to Tab, only when ghost exists
+function acceptGhost(view: EditorView): boolean {
+  const ghost = view.state.field(ghostField, false);
+  if (!ghost) return false;
+  view.dispatch({
+    changes: { from: ghost.from, insert: ghost.text },
+    selection: { anchor: ghost.from + ghost.text.length },
+    effects: setGhost.of(null),
+  });
+  return true;
+}
+
+function dismissGhost(view: EditorView): boolean {
+  const ghost = view.state.field(ghostField, false);
+  if (!ghost) return false;
+  view.dispatch({ effects: setGhost.of(null) });
+  return true;
+}
+
+// ─────────────────────────────────────────────────────────────
+// Markdown list / checkbox continuation on Enter.
+// ─────────────────────────────────────────────────────────────
+function continueList(view: EditorView): boolean {
+  const { state } = view;
+  const pos = state.selection.main.head;
+  const line = state.doc.lineAt(pos);
+  // Only when caret is at end of line
+  if (pos !== line.to) return false;
+  const text = line.text;
+
+  const bullet = text.match(/^(\s*)([-*+])\s(\[[ xX]\]\s)?(.*)$/);
+  const ordered = text.match(/^(\s*)(\d+)\.\s(.*)$/);
+
+  if (bullet) {
+    const [, indent, mark, check, content] = bullet;
+    if (!content.trim()) {
+      // Empty bullet → exit list
+      view.dispatch({
+        changes: { from: line.from, to: line.to, insert: indent },
+        selection: { anchor: line.from + indent.length },
+      });
+      return true;
+    }
+    const prefix = check ? `${indent}${mark} [ ] ` : `${indent}${mark} `;
+    view.dispatch({
+      changes: { from: pos, insert: `\n${prefix}` },
+      selection: { anchor: pos + 1 + prefix.length },
+    });
+    return true;
+  }
+  if (ordered) {
+    const [, indent, numStr, content] = ordered;
+    const num = parseInt(numStr, 10);
+    if (!content.trim()) {
+      view.dispatch({
+        changes: { from: line.from, to: line.to, insert: indent },
+        selection: { anchor: line.from + indent.length },
+      });
+      return true;
+    }
+    const prefix = `${indent}${num + 1}. `;
+    view.dispatch({
+      changes: { from: pos, insert: `\n${prefix}` },
+      selection: { anchor: pos + 1 + prefix.length },
+    });
+    return true;
+  }
+  return false;
+}
+
+// ─────────────────────────────────────────────────────────────
+// Markdown syntax highlighting — explicit Lezer-tag mapping so list
+// marks, headings and inline code stand out clearly against plain
+// text. `t.processingInstruction` covers ATX heading `#`s, list
+// bullets (`-` `*` `+`), ordered list `1.`, quote `>`, emphasis `*`
+// and link brackets — all of which we want to visually punctuate.
+// ─────────────────────────────────────────────────────────────
+const mdHighlight = HighlightStyle.define([
+  { tag: t.heading1, color: 'hsl(var(--foreground))', fontWeight: '800', fontSize: '1.35em' },
+  { tag: t.heading2, color: 'hsl(var(--foreground))', fontWeight: '700', fontSize: '1.2em' },
+  { tag: t.heading3, color: 'hsl(var(--foreground))', fontWeight: '700', fontSize: '1.08em' },
+  { tag: [t.heading4, t.heading5, t.heading6], color: 'hsl(var(--foreground))', fontWeight: '700' },
+  { tag: t.processingInstruction, color: 'hsl(var(--accent))', fontWeight: '700' },
+  { tag: t.list, color: 'hsl(var(--foreground))' },
+  { tag: t.emphasis, fontStyle: 'italic', color: 'hsl(var(--foreground))' },
+  { tag: t.strong, fontWeight: '700', color: 'hsl(var(--foreground))' },
+  { tag: [t.link, t.url], color: 'hsl(var(--primary))', textDecoration: 'underline' },
+  { tag: t.monospace, color: 'hsl(var(--warning))' },
+  { tag: t.quote, color: 'hsl(var(--muted-foreground))', fontStyle: 'italic' },
+  { tag: t.contentSeparator, color: 'hsl(var(--border))' },
+  { tag: t.strikethrough, textDecoration: 'line-through', color: 'hsl(var(--muted-foreground))' },
+]);
+
+// ─────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────
+export interface NoteEditorProps {
+  value: string;
+  onChange: (v: string) => void;
+  onBlur?: () => void;
+  onOpenCommand?: () => 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 },
+  ref,
+) {
+  // Mutable ref keeps the plugin in sync with the latest corpus without
+  // rebuilding the extension list (which would re-init CodeMirror).
+  const corpusRef = useRef<string[]>(extraCorpus ?? []);
+  corpusRef.current = extraCorpus ?? [];
+
+  const extensions = useMemo(() => [
+    markdown({ base: markdownLanguage }),
+    syntaxHighlighting(mdHighlight),
+    ghostField,
+    ghostDecorations,
+    createLocalCompletionPlugin(corpusRef),
+    Prec.highest(keymap.of([
+      { key: 'Tab', run: acceptGhost },
+      { key: 'Escape', run: dismissGhost },
+      { key: 'Enter', run: continueList },
+      { key: 'Mod-k', run: () => { onOpenCommand?.(); return true; } },
+    ])),
+    EditorView.lineWrapping,
+    EditorView.theme({
+      '&': {
+        fontSize: '13px',
+        backgroundColor: 'transparent',
+        color: 'hsl(var(--foreground))',
+        height: '100%',
+      },
+      '.cm-editor': { backgroundColor: 'transparent' },
+      '&.cm-focused': { outline: 'none' },
+      '.cm-scroller': {
+        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
+        lineHeight: '1.7',
+        backgroundColor: 'transparent',
+      },
+      '.cm-content': {
+        padding: '12px 16px',
+        caretColor: 'hsl(var(--primary))',
+        color: 'hsl(var(--foreground))',
+      },
+      '.cm-gutters': { display: 'none' },
+      '.cm-activeLine': { backgroundColor: 'transparent' },
+      '.cm-activeLineGutter': { backgroundColor: 'transparent' },
+      '.cm-line': { backgroundColor: 'transparent' },
+      '.cm-selectionLayer .cm-selectionBackground, .cm-content ::selection, ::selection': {
+        backgroundColor: 'hsl(var(--primary) / 0.25)',
+      },
+      '&.cm-focused .cm-selectionBackground': {
+        backgroundColor: 'hsl(var(--primary) / 0.3)',
+      },
+      '.cm-cursor, .cm-dropCursor': {
+        borderLeftColor: 'hsl(var(--primary))',
+        borderLeftWidth: '2px',
+      },
+      '.cm-ghost-text': {
+        color: 'hsl(var(--muted-foreground))',
+        opacity: '0.55',
+        fontStyle: 'italic',
+      },
+      '.cm-placeholder': {
+        color: 'hsl(var(--muted-foreground) / 0.55)',
+        whiteSpace: 'normal',
+        display: 'inline-block',
+        maxWidth: '90%',
+        lineHeight: '1.6',
+      },
+      // Markdown syntax coloring (one-dark style tuned to IM palette)
+      '.tok-heading, .tok-heading1, .tok-heading2, .tok-heading3, .tok-heading4, .tok-heading5, .tok-heading6': {
+        color: 'hsl(var(--foreground))',
+        fontWeight: '700',
+      },
+      '.tok-emphasis': { fontStyle: 'italic', color: 'hsl(var(--foreground))' },
+      '.tok-strong': { fontWeight: '700', color: 'hsl(var(--foreground))' },
+      '.tok-link': { color: 'hsl(var(--primary))', textDecoration: 'underline' },
+      '.tok-url': { color: 'hsl(var(--primary))' },
+      '.tok-monospace, .tok-literal': {
+        color: 'hsl(var(--warning))',
+        backgroundColor: 'hsl(var(--muted) / 0.5)',
+        padding: '0 3px',
+        borderRadius: '3px',
+      },
+      '.tok-list': { color: 'hsl(var(--accent))' },
+      '.tok-quote': { color: 'hsl(var(--muted-foreground))', fontStyle: 'italic' },
+      '.tok-comment, .tok-meta': { color: 'hsl(var(--muted-foreground))' },
+    }, { dark: true }),
+  ], [onOpenCommand]);
+
+  return (
+    <div className="h-full w-full">
+      <CodeMirror
+        ref={ref}
+        value={value}
+        onChange={onChange}
+        onBlur={onBlur}
+        extensions={extensions}
+        theme="none"
+        basicSetup={{
+          lineNumbers: false,
+          foldGutter: false,
+          highlightActiveLine: false,
+          highlightActiveLineGutter: false,
+          autocompletion: false,
+          searchKeymap: false,
+        }}
+        placeholder={placeholder}
+        height="100%"
+        style={{ height: '100%' }}
+      />
+    </div>
+  );
+});
+
+export default NoteEditor;