create-interview-cockpit 0.5.0 → 0.7.0

package/template/client/src/components/NotesModal.tsx

@@ -0,0 +1,977 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import {
+  Clipboard,
+  ClipboardCheck,
+  GripVertical,
+  Loader2,
+  Maximize2,
+  MessageSquare,
+  Minimize2,
+  Eye,
+  EyeOff,
+  Plus,
+  Save,
+  Send,
+  Trash2,
+  X,
+} from "lucide-react";
+import * as api from "../api";
+
+const MIN_W = 560;
+const MIN_H = 520;
+const DEFAULT_W = 860;
+const DEFAULT_H = 660;
+type ResizeDir = "e" | "s" | "se" | "sw" | "w" | "ne" | "nw" | "n" | null;
+
+// ── Data model ───────────────────────────────────────────────────
+interface Note {
+  id: string;
+  name: string;
+  text: string;
+  updatedAt: number;
+}
+
+export function notesKey(questionId?: string | null): string {
+  return questionId ? `notes:q:${questionId}` : "notes:global";
+}
+
+function loadNotes(key: string): Note[] {
+  try {
+    const raw = localStorage.getItem(key);
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed : [];
+  } catch {
+    return [];
+  }
+}
+
+function persistNotes(key: string, notes: Note[]): void {
+  try {
+    if (notes.length === 0) {
+      localStorage.removeItem(key);
+    } else {
+      localStorage.setItem(key, JSON.stringify(notes));
+    }
+  } catch {
+    // storage full — ignore
+  }
+}
+
+function genId(): string {
+  return Math.random().toString(36).slice(2, 10) + Date.now().toString(36);
+}
+
+// ── Component ────────────────────────────────────────────────────
+interface Props {
+  questionId?: string | null;
+  onClose: () => void;
+}
+
+export default function NotesModal({ questionId, onClose }: Props) {
+  const storageKey = notesKey(questionId);
+
+  const [notes, setNotes] = useState<Note[]>(() => loadNotes(storageKey));
+  const [activeId, setActiveId] = useState<string | null>(
+    () => loadNotes(storageKey)[0]?.id ?? null,
+  );
+
+  // Editable draft for the active note
+  const [draftName, setDraftName] = useState<string>(
+    () => loadNotes(storageKey)[0]?.name ?? "",
+  );
+  const [draftText, setDraftText] = useState<string>(
+    () => loadNotes(storageKey)[0]?.text ?? "",
+  );
+  const [dirty, setDirty] = useState(false);
+
+  // Save As dialog
+  const [saveAsValue, setSaveAsValue] = useState<string | null>(null); // null = hidden
+
+  // Preview / edit toggle
+  const [preview, setPreview] = useState(false);
+
+  // Reset preview when switching notes
+  useEffect(() => {
+    setPreview(false);
+  }, [activeId]);
+
+  // Re-load when the question changes
+  useEffect(() => {
+    const loaded = loadNotes(storageKey);
+    setNotes(loaded);
+    const first = loaded[0] ?? null;
+    setActiveId(first?.id ?? null);
+    setDraftName(first?.name ?? "");
+    setDraftText(first?.text ?? "");
+    setDirty(false);
+  }, [storageKey]);
+
+  // Sync draft when activeId changes (but not on every notes mutation)
+  const prevActiveId = useRef<string | null>(null);
+  useEffect(() => {
+    if (activeId === prevActiveId.current) return;
+    prevActiveId.current = activeId;
+    const note = notes.find((n) => n.id === activeId);
+    if (note) {
+      setDraftName(note.name);
+      setDraftText(note.text);
+      setDirty(false);
+    }
+  }, [activeId, notes]);
+
+  // ── Actions ──────────────────────────────────────────────────
+  const flushDraft = useCallback(
+    (prev: Note[]): Note[] => {
+      if (!activeId || !dirty) return prev;
+      const updated = prev.map((n) =>
+        n.id === activeId
+          ? {
+              ...n,
+              name: draftName.trim() || "Untitled",
+              text: draftText,
+              updatedAt: Date.now(),
+            }
+          : n,
+      );
+      persistNotes(storageKey, updated);
+      return updated;
+    },
+    [activeId, dirty, draftName, draftText, storageKey],
+  );
+
+  const handleSave = useCallback(() => {
+    if (!activeId) return;
+    setNotes((prev) => {
+      const updated = prev.map((n) =>
+        n.id === activeId
+          ? {
+              ...n,
+              name: draftName.trim() || "Untitled",
+              text: draftText,
+              updatedAt: Date.now(),
+            }
+          : n,
+      );
+      persistNotes(storageKey, updated);
+      return updated;
+    });
+    setDirty(false);
+  }, [activeId, draftName, draftText, storageKey]);
+
+  const handleAddNote = useCallback(() => {
+    setNotes((prev) => {
+      const flushed = flushDraft(prev);
+      const count = flushed.length + 1;
+      const newNote: Note = {
+        id: genId(),
+        name: `Note ${count}`,
+        text: "",
+        updatedAt: Date.now(),
+      };
+      const updated = [...flushed, newNote];
+      persistNotes(storageKey, updated);
+      setActiveId(newNote.id);
+      setDraftName(newNote.name);
+      setDraftText("");
+      setDirty(false);
+      return updated;
+    });
+  }, [flushDraft, storageKey]);
+
+  const handleSelectNote = useCallback(
+    (id: string) => {
+      if (id === activeId) return;
+      setNotes((prev) => {
+        const updated = flushDraft(prev);
+        persistNotes(storageKey, updated);
+        return updated;
+      });
+      setDirty(false);
+      setActiveId(id);
+    },
+    [activeId, flushDraft, storageKey],
+  );
+
+  const handleDeleteNote = useCallback(
+    (id: string) => {
+      setNotes((prev) => {
+        const updated = prev.filter((n) => n.id !== id);
+        persistNotes(storageKey, updated);
+        if (id === activeId) {
+          const next = updated[0] ?? null;
+          setActiveId(next?.id ?? null);
+          setDraftName(next?.name ?? "");
+          setDraftText(next?.text ?? "");
+          setDirty(false);
+        }
+        return updated;
+      });
+    },
+    [activeId, storageKey],
+  );
+
+  const handleSaveAs = useCallback(() => {
+    setSaveAsValue((draftName.trim() || "Untitled") + " copy");
+  }, [draftName]);
+
+  const confirmSaveAs = useCallback(() => {
+    const name = (saveAsValue ?? "").trim() || "Untitled";
+    const newNote: Note = {
+      id: genId(),
+      name,
+      text: draftText,
+      updatedAt: Date.now(),
+    };
+    setNotes((prev) => {
+      const updated = [...prev, newNote];
+      persistNotes(storageKey, updated);
+      return updated;
+    });
+    setActiveId(newNote.id);
+    setDraftName(name);
+    setDirty(false);
+    setSaveAsValue(null);
+  }, [saveAsValue, draftText, storageKey]);
+
+  // ── Chat ─────────────────────────────────────────────────────
+  interface ChatMessage {
+    id: string;
+    role: "user" | "assistant";
+    content: string;
+  }
+
+  const [chatMessages, setChatMessages] = useState<ChatMessage[]>([]);
+  const [chatInput, setChatInput] = useState("");
+  const [chatLoading, setChatLoading] = useState(false);
+  const [chatCopiedId, setChatCopiedId] = useState<string | null>(null);
+  const chatScrollRef = useRef<HTMLDivElement>(null);
+  const chatInputRef = useRef<HTMLTextAreaElement>(null);
+  const chatAbortRef = useRef<{ aborted: boolean }>({ aborted: false });
+
+  // Reset chat when switching notes
+  useEffect(() => {
+    setChatMessages([]);
+    setChatInput("");
+    setChatLoading(false);
+  }, [activeId]);
+
+  useEffect(() => {
+    if (chatScrollRef.current) {
+      chatScrollRef.current.scrollTop = chatScrollRef.current.scrollHeight;
+    }
+  }, [chatMessages, chatLoading]);
+
+  const handleChatSend = useCallback(async () => {
+    const text = chatInput.trim();
+    if (!text || chatLoading) return;
+    setChatInput("");
+    const userMsg: ChatMessage = {
+      id: crypto.randomUUID(),
+      role: "user",
+      content: text,
+    };
+    setChatMessages((prev) => [...prev, userMsg]);
+    setChatLoading(true);
+    const abort = { aborted: false };
+    chatAbortRef.current = abort;
+    const assistantId = crypto.randomUUID();
+    setChatMessages((prev) => [
+      ...prev,
+      { id: assistantId, role: "assistant", content: "" },
+    ]);
+    try {
+      const history = [...chatMessages, userMsg].map((m) => ({
+        role: m.role,
+        content: m.content,
+      }));
+      await api.streamNotesAsk(
+        {
+          messages: history,
+          noteContent: draftText,
+          noteName: draftName || "Untitled",
+        },
+        (delta) => {
+          if (abort.aborted) return;
+          setChatMessages((prev) =>
+            prev.map((m) =>
+              m.id === assistantId ? { ...m, content: m.content + delta } : m,
+            ),
+          );
+        },
+      );
+    } catch (err: unknown) {
+      if (!abort.aborted) {
+        setChatMessages((prev) =>
+          prev.map((m) =>
+            m.id === assistantId
+              ? { ...m, content: (err as Error)?.message ?? "Request failed" }
+              : m,
+          ),
+        );
+      }
+    } finally {
+      if (!abort.aborted) setChatLoading(false);
+    }
+  }, [chatInput, chatLoading, chatMessages, draftText, draftName]);
+
+  const handleCopyMessage = useCallback((id: string, content: string) => {
+    void navigator.clipboard.writeText(content).then(() => {
+      setChatCopiedId(id);
+      setTimeout(() => setChatCopiedId(null), 1800);
+    });
+  }, []);
+
+  // ── Drag / resize ─────────────────────────────────────────────
+  const [pos, setPos] = useState(() => ({
+    x: Math.max(0, (window.innerWidth - DEFAULT_W) / 2),
+    y: Math.max(0, (window.innerHeight - DEFAULT_H) / 2),
+  }));
+  const [size, setSize] = useState({ w: DEFAULT_W, h: DEFAULT_H });
+  const [maximized, setMaximized] = useState(false);
+
+  const dragStart = useRef<{
+    mx: number;
+    my: number;
+    ox: number;
+    oy: number;
+  } | null>(null);
+  const resizeDir = useRef<ResizeDir>(null);
+  const resizeStart = useRef<{
+    mx: number;
+    my: number;
+    ox: number;
+    oy: number;
+    ow: number;
+    oh: number;
+  } | null>(null);
+  const savedPos = useRef(pos);
+  const savedSize = useRef(size);
+
+  const onTitleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      if (maximized) return;
+      e.preventDefault();
+      dragStart.current = {
+        mx: e.clientX,
+        my: e.clientY,
+        ox: pos.x,
+        oy: pos.y,
+      };
+    },
+    [maximized, pos],
+  );
+
+  const startResize = useCallback(
+    (dir: ResizeDir) => (e: React.MouseEvent) => {
+      if (maximized) return;
+      e.preventDefault();
+      e.stopPropagation();
+      resizeDir.current = dir;
+      resizeStart.current = {
+        mx: e.clientX,
+        my: e.clientY,
+        ox: pos.x,
+        oy: pos.y,
+        ow: size.w,
+        oh: size.h,
+      };
+    },
+    [maximized, pos, size],
+  );
+
+  const toggleMax = useCallback(() => {
+    if (!maximized) {
+      savedPos.current = pos;
+      savedSize.current = size;
+      setMaximized(true);
+    } else {
+      setPos(savedPos.current);
+      setSize(savedSize.current);
+      setMaximized(false);
+    }
+  }, [maximized, pos, size]);
+
+  useEffect(() => {
+    const onMove = (e: MouseEvent) => {
+      const drag = dragStart.current;
+      const resize = resizeStart.current;
+      const dir = resizeDir.current;
+      if (drag) {
+        setPos({
+          x: Math.max(0, drag.ox + e.clientX - drag.mx),
+          y: Math.max(0, drag.oy + e.clientY - drag.my),
+        });
+      }
+      if (resize && dir) {
+        const dx = e.clientX - resize.mx;
+        const dy = e.clientY - resize.my;
+        setSize((prev) => {
+          let w = prev.w,
+            h = prev.h;
+          if (dir.includes("e")) w = Math.max(MIN_W, resize.ow + dx);
+          if (dir.includes("s")) h = Math.max(MIN_H, resize.oh + dy);
+          if (dir.includes("w")) w = Math.max(MIN_W, resize.ow - dx);
+          if (dir.includes("n")) h = Math.max(MIN_H, resize.oh - dy);
+          return { w, h };
+        });
+        if (dir.includes("w"))
+          setPos((p) => ({
+            ...p,
+            x: Math.min(resize.ox + resize.ow - MIN_W, resize.ox + dx),
+          }));
+        if (dir.includes("n"))
+          setPos((p) => ({
+            ...p,
+            y: Math.min(resize.oy + resize.oh - MIN_H, resize.oy + dy),
+          }));
+      }
+    };
+    const onUp = () => {
+      dragStart.current = null;
+      resizeStart.current = null;
+      resizeDir.current = null;
+    };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+    return () => {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+    };
+  }, []);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && saveAsValue === null) onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [onClose, saveAsValue]);
+
+  const windowStyle: React.CSSProperties = maximized
+    ? {
+        position: "fixed",
+        inset: 0,
+        width: "100vw",
+        height: "100vh",
+        borderRadius: 0,
+      }
+    : {
+        position: "fixed",
+        left: pos.x,
+        top: pos.y,
+        width: size.w,
+        height: size.h,
+        minWidth: MIN_W,
+        minHeight: MIN_H,
+      };
+
+  // ── Render ───────────────────────────────────────────────────
+  return (
+    <div
+      className="z-50 flex flex-col bg-slate-900 border border-slate-700 rounded-xl shadow-2xl overflow-hidden select-none"
+      style={windowStyle}
+    >
+      {/* Resize handles */}
+      {!maximized && (
+        <>
+          <div
+            className="absolute top-0 left-0 right-0 h-1 cursor-n-resize z-10"
+            onMouseDown={startResize("n")}
+          />
+          <div
+            className="absolute bottom-0 left-0 right-0 h-1 cursor-s-resize z-10"
+            onMouseDown={startResize("s")}
+          />
+          <div
+            className="absolute top-0 left-0 bottom-0 w-1 cursor-w-resize z-10"
+            onMouseDown={startResize("w")}
+          />
+          <div
+            className="absolute top-0 right-0 bottom-0 w-1 cursor-e-resize z-10"
+            onMouseDown={startResize("e")}
+          />
+          <div
+            className="absolute top-0 left-0 w-3 h-3 cursor-nw-resize z-20"
+            onMouseDown={startResize("nw")}
+          />
+          <div
+            className="absolute top-0 right-0 w-3 h-3 cursor-ne-resize z-20"
+            onMouseDown={startResize("ne")}
+          />
+          <div
+            className="absolute bottom-0 left-0 w-3 h-3 cursor-sw-resize z-20"
+            onMouseDown={startResize("sw")}
+          />
+          <div
+            className="absolute bottom-0 right-0 w-3 h-3 cursor-se-resize z-20"
+            onMouseDown={startResize("se")}
+          />
+        </>
+      )}
+
+      {/* Title bar */}
+      <div
+        className="flex items-center gap-2 px-3 py-2.5 bg-slate-800 border-b border-slate-700 shrink-0"
+        onMouseDown={onTitleMouseDown}
+        style={{ cursor: maximized ? "default" : "grab" }}
+      >
+        <GripVertical className="w-3.5 h-3.5 text-slate-600 shrink-0" />
+        <span className="text-sm font-semibold text-slate-100 flex-1">
+          Notes
+          {questionId && (
+            <span className="ml-2 text-xs font-normal text-slate-500">
+              — this question
+            </span>
+          )}
+        </span>
+        <button
+          type="button"
+          onMouseDown={(e) => e.stopPropagation()}
+          onClick={toggleMax}
+          className="p-1 rounded hover:bg-slate-700 text-slate-500 hover:text-slate-300 transition-colors shrink-0"
+          title={maximized ? "Restore" : "Maximise"}
+        >
+          {maximized ? (
+            <Minimize2 className="w-3.5 h-3.5" />
+          ) : (
+            <Maximize2 className="w-3.5 h-3.5" />
+          )}
+        </button>
+        <button
+          type="button"
+          onMouseDown={(e) => e.stopPropagation()}
+          onClick={onClose}
+          className="p-1 rounded hover:bg-slate-700 text-slate-500 hover:text-red-400 transition-colors shrink-0"
+          title="Close (Esc)"
+        >
+          <X className="w-3.5 h-3.5" />
+        </button>
+      </div>
+
+      {/* Body: sidebar + editor + chat */}
+      <div className="flex-1 min-h-0 flex flex-col overflow-hidden">
+        {/* Top: sidebar + editor */}
+        <div className="flex-1 min-h-0 flex overflow-hidden">
+          {/* Notes list sidebar */}
+          <div className="w-44 shrink-0 flex flex-col border-r border-slate-700 bg-slate-900">
+            <div className="flex items-center justify-between px-2.5 py-2 border-b border-slate-800 shrink-0">
+              <span className="text-xs font-semibold text-slate-500 uppercase tracking-wide">
+                All notes
+              </span>
+              <button
+                type="button"
+                onMouseDown={(e) => e.stopPropagation()}
+                onClick={handleAddNote}
+                title="New note"
+                className="p-1 rounded hover:bg-slate-700 text-slate-400 hover:text-slate-200 transition-colors"
+              >
+                <Plus className="w-3.5 h-3.5" />
+              </button>
+            </div>
+            <div className="flex-1 overflow-y-auto">
+              {notes.length === 0 && (
+                <p className="px-3 py-3 text-xs text-slate-600 italic">
+                  No notes yet
+                </p>
+              )}
+              {notes.map((note) => (
+                <div
+                  key={note.id}
+                  onClick={() => handleSelectNote(note.id)}
+                  className={`group flex items-center gap-1 px-2.5 py-2 cursor-pointer text-xs ${
+                    note.id === activeId
+                      ? "bg-slate-700 text-slate-100"
+                      : "text-slate-400 hover:bg-slate-800 hover:text-slate-200"
+                  }`}
+                >
+                  <span className="flex-1 truncate">
+                    {note.name || "Untitled"}
+                  </span>
+                  <button
+                    type="button"
+                    onMouseDown={(e) => e.stopPropagation()}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleDeleteNote(note.id);
+                    }}
+                    className="opacity-0 group-hover:opacity-100 p-0.5 rounded hover:text-red-400 transition-all shrink-0"
+                    title="Delete note"
+                  >
+                    <Trash2 className="w-3 h-3" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Editor pane */}
+          <div className="flex-1 flex flex-col min-w-0">
+            {activeId ? (
+              <>
+                {/* Note name + preview toggle */}
+                <div className="flex items-center gap-2 px-3 py-2 border-b border-slate-800 shrink-0">
+                  <input
+                    value={draftName}
+                    onChange={(e) => {
+                      setDraftName(e.target.value);
+                      setDirty(true);
+                    }}
+                    onMouseDown={(e) => e.stopPropagation()}
+                    placeholder="Note name…"
+                    className="flex-1 bg-transparent text-sm font-semibold text-slate-100 placeholder-slate-600 outline-none"
+                  />
+                  <button
+                    type="button"
+                    onMouseDown={(e) => e.stopPropagation()}
+                    onClick={() => setPreview((v) => !v)}
+                    className={`flex items-center gap-1 px-2 py-0.5 rounded text-xs transition-colors ${
+                      preview
+                        ? "bg-violet-600/20 text-violet-300 hover:bg-violet-600/30"
+                        : "text-slate-500 hover:bg-slate-800 hover:text-slate-300"
+                    }`}
+                    title={
+                      preview
+                        ? "Switch to edit mode"
+                        : "Preview rendered Markdown"
+                    }
+                  >
+                    {preview ? (
+                      <EyeOff className="w-3 h-3" />
+                    ) : (
+                      <Eye className="w-3 h-3" />
+                    )}
+                    <span>{preview ? "Edit" : "Preview"}</span>
+                  </button>
+                </div>
+
+                {/* Editor / Preview */}
+                {preview ? (
+                  <div
+                    className="flex-1 overflow-y-auto px-5 py-4 prose prose-invert prose-sm max-w-none bg-slate-950 text-slate-200"
+                    onMouseDown={(e) => e.stopPropagation()}
+                  >
+                    {draftText.trim() ? (
+                      <ReactMarkdown
+                        remarkPlugins={[remarkGfm]}
+                        components={{
+                          code({ className, children, ...props }) {
+                            const isBlock = className?.startsWith("language-");
+                            return isBlock ? (
+                              <pre className="bg-slate-900 rounded-lg p-3 overflow-x-auto my-2">
+                                <code
+                                  className={`${className ?? ""} text-xs`}
+                                  {...props}
+                                >
+                                  {children}
+                                </code>
+                              </pre>
+                            ) : (
+                              <code
+                                className="bg-slate-900/70 px-1 rounded text-violet-300 text-[0.8em]"
+                                {...props}
+                              >
+                                {children}
+                              </code>
+                            );
+                          },
+                          table({ children }) {
+                            return (
+                              <table className="border-collapse w-full my-2 text-sm">
+                                {children}
+                              </table>
+                            );
+                          },
+                          th({ children }) {
+                            return (
+                              <th className="border border-slate-700 px-3 py-1.5 text-left text-slate-200 bg-slate-800">
+                                {children}
+                              </th>
+                            );
+                          },
+                          td({ children }) {
+                            return (
+                              <td className="border border-slate-700 px-3 py-1.5">
+                                {children}
+                              </td>
+                            );
+                          },
+                        }}
+                      >
+                        {draftText}
+                      </ReactMarkdown>
+                    ) : (
+                      <p className="text-slate-600 italic text-sm">
+                        Nothing to preview yet.
+                      </p>
+                    )}
+                  </div>
+                ) : (
+                  <textarea
+                    value={draftText}
+                    onChange={(e) => {
+                      setDraftText(e.target.value);
+                      setDirty(true);
+                    }}
+                    onMouseDown={(e) => e.stopPropagation()}
+                    placeholder="Write your notes here… (Markdown supported)"
+                    spellCheck
+                    className="flex-1 bg-slate-950 text-sm text-slate-200 placeholder-slate-700 px-4 py-3 outline-none resize-none leading-relaxed font-mono"
+                  />
+                )}
+
+                {/* Footer */}
+                <div className="flex items-center gap-2 px-3 py-2 border-t border-slate-800 bg-slate-900 shrink-0">
+                  <button
+                    type="button"
+                    onMouseDown={(e) => e.stopPropagation()}
+                    onClick={handleSave}
+                    disabled={!dirty}
+                    className={`flex items-center gap-1.5 px-3 py-1 rounded text-xs font-medium transition-colors ${
+                      dirty
+                        ? "bg-blue-600 hover:bg-blue-500 text-white"
+                        : "bg-slate-800 text-slate-600 cursor-default"
+                    }`}
+                    title="Save (Ctrl+S)"
+                  >
+                    <Save className="w-3 h-3" />
+                    Save
+                  </button>
+                  <button
+                    type="button"
+                    onMouseDown={(e) => e.stopPropagation()}
+                    onClick={handleSaveAs}
+                    className="flex items-center gap-1.5 px-3 py-1 rounded text-xs font-medium bg-slate-800 hover:bg-slate-700 text-slate-300 transition-colors"
+                    title="Save as a new named note"
+                  >
+                    Save As
+                  </button>
+                  {dirty && (
+                    <span className="ml-auto text-xs text-amber-500 select-none">
+                      Unsaved changes
+                    </span>
+                  )}
+                </div>
+              </>
+            ) : (
+              <div className="flex-1 flex flex-col items-center justify-center gap-3 text-slate-600">
+                <p className="text-sm">No note selected</p>
+                <button
+                  type="button"
+                  onMouseDown={(e) => e.stopPropagation()}
+                  onClick={handleAddNote}
+                  className="flex items-center gap-1.5 px-3 py-1.5 rounded bg-slate-800 hover:bg-slate-700 text-slate-300 text-xs transition-colors"
+                >
+                  <Plus className="w-3.5 h-3.5" />
+                  New note
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Bottom: Chat panel */}
+        <div className="h-56 shrink-0 border-t border-slate-700 flex flex-col bg-slate-950/80">
+          {/* Chat header */}
+          <div className="flex items-center justify-between px-3 py-1.5 border-b border-slate-800 shrink-0">
+            <div className="flex items-center gap-1.5 text-xs font-medium text-violet-400">
+              <MessageSquare className="w-3.5 h-3.5" />
+              <span>Chat about this note</span>
+            </div>
+            {chatMessages.length > 0 && (
+              <button
+                type="button"
+                onMouseDown={(e) => e.stopPropagation()}
+                onClick={() => setChatMessages([])}
+                className="text-[10px] text-slate-600 hover:text-slate-400 transition-colors"
+              >
+                clear
+              </button>
+            )}
+          </div>
+
+          {/* Messages */}
+          <div
+            ref={chatScrollRef}
+            className="flex-1 overflow-y-auto px-3 py-2 space-y-3"
+          >
+            {chatMessages.length === 0 && (
+              <p className="text-xs text-slate-600 pt-1">
+                Ask anything about your note —{" "}
+                <span className="text-slate-500">"Explain this concept"</span>{" "}
+                or{" "}
+                <span className="text-slate-500">"What's missing here?"</span>
+              </p>
+            )}
+            {chatMessages.map((msg) => (
+              <div
+                key={msg.id}
+                className={`flex flex-col gap-0.5 ${
+                  msg.role === "user" ? "items-end" : "items-start"
+                }`}
+              >
+                <div
+                  className={`max-w-[85%] rounded-xl px-3 py-2 text-xs leading-5 ${
+                    msg.role === "user"
+                      ? "bg-violet-600/30 text-violet-100 whitespace-pre-wrap"
+                      : "bg-slate-800 text-slate-200 prose prose-invert prose-xs max-w-none"
+                  }`}
+                >
+                  {msg.role === "user" ? (
+                    msg.content
+                  ) : msg.content ? (
+                    <ReactMarkdown
+                      remarkPlugins={[remarkGfm]}
+                      components={{
+                        code({ className, children, ...props }) {
+                          const isBlock = className?.startsWith("language-");
+                          return isBlock ? (
+                            <pre className="bg-slate-900/80 rounded p-2 overflow-x-auto my-1">
+                              <code
+                                className={`${className ?? ""} text-[11px]`}
+                                {...props}
+                              >
+                                {children}
+                              </code>
+                            </pre>
+                          ) : (
+                            <code
+                              className="bg-slate-900/60 px-1 rounded text-violet-300 text-[11px]"
+                              {...props}
+                            >
+                              {children}
+                            </code>
+                          );
+                        },
+                        p({ children }) {
+                          return <p className="mb-1 last:mb-0">{children}</p>;
+                        },
+                        ul({ children }) {
+                          return (
+                            <ul className="list-disc list-inside mb-1 space-y-0.5">
+                              {children}
+                            </ul>
+                          );
+                        },
+                        ol({ children }) {
+                          return (
+                            <ol className="list-decimal list-inside mb-1 space-y-0.5">
+                              {children}
+                            </ol>
+                          );
+                        },
+                      }}
+                    >
+                      {msg.content}
+                    </ReactMarkdown>
+                  ) : (
+                    <span className="flex items-center gap-1.5 text-slate-500">
+                      <Loader2 className="w-3 h-3 animate-spin" /> thinking…
+                    </span>
+                  )}
+                </div>
+                {msg.role === "assistant" && msg.content && (
+                  <button
+                    onClick={() => handleCopyMessage(msg.id, msg.content)}
+                    onMouseDown={(e) => e.stopPropagation()}
+                    className="flex items-center gap-1 text-[10px] text-slate-700 hover:text-slate-400 transition-colors px-1"
+                    title="Copy response"
+                  >
+                    {chatCopiedId === msg.id ? (
+                      <>
+                        <ClipboardCheck className="w-3 h-3 text-emerald-400" />
+                        <span className="text-emerald-400">Copied</span>
+                      </>
+                    ) : (
+                      <>
+                        <Clipboard className="w-3 h-3" />
+                        <span>Copy</span>
+                      </>
+                    )}
+                  </button>
+                )}
+              </div>
+            ))}
+          </div>
+
+          {/* Input */}
+          <div className="flex items-end gap-1.5 px-3 py-2 border-t border-slate-800 bg-slate-900/60 shrink-0">
+            <textarea
+              ref={chatInputRef}
+              rows={1}
+              value={chatInput}
+              onChange={(e) => setChatInput(e.target.value)}
+              onMouseDown={(e) => e.stopPropagation()}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && !e.shiftKey) {
+                  e.preventDefault();
+                  void handleChatSend();
+                }
+              }}
+              placeholder={
+                activeId ? "Ask about your note…" : "Select a note to chat…"
+              }
+              disabled={chatLoading || !activeId}
+              className="flex-1 bg-transparent text-xs text-slate-200 placeholder-slate-600 outline-none resize-none disabled:opacity-50 max-h-16"
+            />
+            <button
+              type="button"
+              onMouseDown={(e) => e.stopPropagation()}
+              onClick={() => void handleChatSend()}
+              disabled={chatLoading || !chatInput.trim() || !activeId}
+              className="p-1 rounded text-slate-600 hover:text-violet-400 hover:bg-violet-500/10 disabled:opacity-40 transition-colors shrink-0"
+              title="Send (Enter)"
+            >
+              {chatLoading ? (
+                <Loader2 className="w-3.5 h-3.5 animate-spin" />
+              ) : (
+                <Send className="w-3.5 h-3.5" />
+              )}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Save As dialog */}
+      {saveAsValue !== null && (
+        <div className="absolute inset-0 bg-slate-900/80 backdrop-blur-sm flex items-center justify-center z-20">
+          <div
+            className="bg-slate-800 border border-slate-700 rounded-lg p-4 w-72 flex flex-col gap-3"
+            onMouseDown={(e) => e.stopPropagation()}
+          >
+            <p className="text-sm font-semibold text-slate-100">Save As</p>
+            <input
+              autoFocus
+              value={saveAsValue}
+              onChange={(e) => setSaveAsValue(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") confirmSaveAs();
+                if (e.key === "Escape") setSaveAsValue(null);
+              }}
+              placeholder="Note name…"
+              className="px-3 py-1.5 rounded bg-slate-950 border border-slate-700 text-sm text-slate-100 outline-none focus:border-blue-500 transition-colors"
+            />
+            <div className="flex gap-2 justify-end">
+              <button
+                type="button"
+                onClick={() => setSaveAsValue(null)}
+                className="px-3 py-1 rounded text-xs text-slate-400 hover:bg-slate-700 transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                onClick={confirmSaveAs}
+                className="px-3 py-1 rounded text-xs bg-blue-600 hover:bg-blue-500 text-white transition-colors"
+              >
+                Save
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}