Add Tiptap inline-preview editor, layout improvements, and README

Replace plain textarea with Tiptap (ProseMirror) WYSIWYG editor for notes
and tasks. Headings, bold, lists, and code blocks now render inline while
editing. Tags and wikilinks get visual highlighting via decoration plugins,
and autocomplete uses @tiptap/suggestion with heading disambiguation.

Layout: pin navbar with app-shell flex column (100dvh), sticky editor
toolbar above scrolling content, AI Assist panel fixed at bottom 1/3 with
full-height section selector and prompt. Increase max-width to 960px
across all views. Hide assist controls during streaming/review.

Other fixes: markdown paste handling, auto-syncing assist sections via
body watcher, trailing newline on AI accept, ChatView height fix.

Add README.md describing the app, usage guide, and technical overview.
Update summary.md with Phase 5.2 roadmap and current status.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/components/MarkdownToolbar.vue

@@ -1,18 +1,78 @@
 <script setup lang="ts">
-const emit = defineEmits<{
-  insert: [before: string, after: string, placeholder: string];
+import type { Editor } from "@tiptap/vue-3";
+
+const props = defineProps<{
+  editor: Editor | null;
 }>();
 
 const buttons = [
-  { label: "B", before: "**", after: "**", placeholder: "bold", title: "Bold" },
-  { label: "I", before: "_", after: "_", placeholder: "italic", title: "Italic" },
-  { label: "H1", before: "# ", after: "", placeholder: "Heading", title: "Heading 1" },
-  { label: "H2", before: "## ", after: "", placeholder: "Heading", title: "Heading 2" },
-  { label: "Link", before: "[", after: "](url)", placeholder: "text", title: "Link" },
-  { label: "UL", before: "- ", after: "", placeholder: "item", title: "Bullet List" },
-  { label: "OL", before: "1. ", after: "", placeholder: "item", title: "Numbered List" },
-  { label: "`", before: "`", after: "`", placeholder: "code", title: "Inline Code" },
-  { label: "```", before: "```\n", after: "\n```", placeholder: "code block", title: "Code Block" },
+  {
+    label: "B",
+    title: "Bold",
+    command: () => props.editor?.chain().focus().toggleBold().run(),
+    isActive: () => props.editor?.isActive("bold") ?? false,
+  },
+  {
+    label: "I",
+    title: "Italic",
+    command: () => props.editor?.chain().focus().toggleItalic().run(),
+    isActive: () => props.editor?.isActive("italic") ?? false,
+  },
+  {
+    label: "H1",
+    title: "Heading 1",
+    command: () =>
+      props.editor?.chain().focus().toggleHeading({ level: 1 }).run(),
+    isActive: () => props.editor?.isActive("heading", { level: 1 }) ?? false,
+  },
+  {
+    label: "H2",
+    title: "Heading 2",
+    command: () =>
+      props.editor?.chain().focus().toggleHeading({ level: 2 }).run(),
+    isActive: () => props.editor?.isActive("heading", { level: 2 }) ?? false,
+  },
+  {
+    label: "Link",
+    title: "Link",
+    command: () => {
+      const ed = props.editor;
+      if (!ed) return;
+      if (ed.isActive("link")) {
+        ed.chain().focus().unsetLink().run();
+      } else {
+        const url = prompt("URL:");
+        if (url) {
+          ed.chain().focus().setLink({ href: url }).run();
+        }
+      }
+    },
+    isActive: () => props.editor?.isActive("link") ?? false,
+  },
+  {
+    label: "UL",
+    title: "Bullet List",
+    command: () => props.editor?.chain().focus().toggleBulletList().run(),
+    isActive: () => props.editor?.isActive("bulletList") ?? false,
+  },
+  {
+    label: "OL",
+    title: "Numbered List",
+    command: () => props.editor?.chain().focus().toggleOrderedList().run(),
+    isActive: () => props.editor?.isActive("orderedList") ?? false,
+  },
+  {
+    label: "`",
+    title: "Inline Code",
+    command: () => props.editor?.chain().focus().toggleCode().run(),
+    isActive: () => props.editor?.isActive("code") ?? false,
+  },
+  {
+    label: "```",
+    title: "Code Block",
+    command: () => props.editor?.chain().focus().toggleCodeBlock().run(),
+    isActive: () => props.editor?.isActive("codeBlock") ?? false,
+  },
 ];
 </script>
 
@@ -21,9 +81,9 @@ const buttons = [
     <button
       v-for="btn in buttons"
       :key="btn.label"
-      class="md-btn"
+      :class="['md-btn', { active: btn.isActive() }]"
       :title="btn.title"
-      @click="emit('insert', btn.before, btn.after, btn.placeholder)"
+      @click="btn.command()"
     >
       {{ btn.label }}
     </button>
@@ -50,4 +110,9 @@ const buttons = [
 .md-btn:hover {
   background: var(--color-bg-secondary);
 }
+.md-btn.active {
+  background: var(--color-primary);
+  color: #fff;
+  border-color: var(--color-primary);
+}
 </style>