diff --git a/frontend/src/assets/theme.css b/frontend/src/assets/theme.css
index f809ee1..7f763e9 100644
--- a/frontend/src/assets/theme.css
+++ b/frontend/src/assets/theme.css
@@ -128,3 +128,22 @@ button:focus-visible {
     display: none !important;
   }
 }
+
+/* Floating inline assist button (teleported to body, cannot be scoped) */
+.inline-assist-btn {
+  position: fixed;
+  z-index: 150;
+  transform: translateX(-50%);
+  background: var(--color-primary);
+  color: #fff;
+  border: none;
+  border-radius: 999px;
+  padding: 0.3rem 0.8rem;
+  font-size: 0.8rem;
+  cursor: pointer;
+  box-shadow: 0 2px 8px var(--color-shadow);
+  white-space: nowrap;
+}
+.inline-assist-btn:hover {
+  filter: brightness(1.1);
+}
diff --git a/frontend/src/composables/useAssist.ts b/frontend/src/composables/useAssist.ts
index 532ca25..4fbfdf1 100644
--- a/frontend/src/composables/useAssist.ts
+++ b/frontend/src/composables/useAssist.ts
@@ -14,6 +14,33 @@ export interface AssistTarget {
   endOffset: number;
 }
 
+export interface DiffLine {
+  type: 'equal' | 'delete' | 'insert';
+  text: string;
+}
+
+function computeDiff(a: string, b: string): DiffLine[] {
+  const aLines = a.split('\n');
+  const bLines = b.split('\n');
+  const m = aLines.length, n = bLines.length;
+  const dp: number[][] = Array.from({ length: m + 1 }, () => new Array(n + 1).fill(0));
+  for (let i = m - 1; i >= 0; i--)
+    for (let j = n - 1; j >= 0; j--)
+      dp[i][j] = aLines[i] === bLines[j]
+        ? dp[i+1][j+1] + 1
+        : Math.max(dp[i+1][j], dp[i][j+1]);
+  const result: DiffLine[] = [];
+  let i = 0, j = 0;
+  while (i < m && j < n) {
+    if (aLines[i] === bLines[j]) { result.push({ type: 'equal', text: aLines[i++] }); j++; }
+    else if (dp[i+1][j] >= dp[i][j+1]) result.push({ type: 'delete', text: aLines[i++] });
+    else result.push({ type: 'insert', text: bLines[j++] });
+  }
+  while (i < m) result.push({ type: 'delete', text: aLines[i++] });
+  while (j < n) result.push({ type: 'insert', text: bLines[j++] });
+  return result;
+}
+
 export function useAssist(body: Ref<string>) {
   const chatStore = useChatStore();
 
@@ -25,6 +52,7 @@ export function useAssist(body: Ref<string>) {
   const streamingText = ref("");
   const proposedText = ref("");
   const error = ref("");
+  const isProofreading = ref(false);
 
   // Snapshot of body at the time a section/selection was chosen
   let bodySnapshot = "";
@@ -56,6 +84,11 @@ export function useAssist(body: Ref<string>) {
       state.value !== "streaming"
   );
 
+  const diff = computed<DiffLine[]>(() => {
+    if (state.value !== 'review' || !target.value || !proposedText.value) return [];
+    return computeDiff(target.value.text, proposedText.value);
+  });
+
   function refreshSections() {
     sections.value = parseMarkdownSections(body.value);
   }
@@ -145,6 +178,20 @@ export function useAssist(body: Ref<string>) {
     }
   }
 
+  async function proofread() {
+    if (state.value === 'streaming') return;
+    isProofreading.value = true;
+    selectedSection.value = null;
+    customSelection.value = { start: 0, end: body.value.length, text: body.value };
+    bodySnapshot = body.value;
+    error.value = '';
+    instruction.value =
+      "Proofread for clarity, grammar, spelling, and flow. " +
+      "Preserve the author's voice and all factual content. " +
+      "Return only the improved text without explanation.";
+    await submit();
+  }
+
   function accept(): string {
     if (!target.value || !proposedText.value) return body.value;
 
@@ -177,6 +224,7 @@ export function useAssist(body: Ref<string>) {
     proposedText.value = "";
     error.value = "";
     state.value = "idle";
+    isProofreading.value = false;
 
     return newBody;
   }
@@ -186,6 +234,7 @@ export function useAssist(body: Ref<string>) {
     streamingText.value = "";
     error.value = "";
     state.value = "idle";
+    isProofreading.value = false;
     // Keep selection + instruction for retry
   }
 
@@ -205,11 +254,14 @@ export function useAssist(body: Ref<string>) {
     proposedText,
     error,
     canSubmit,
+    diff,
+    isProofreading,
     refreshSections,
     selectSection,
     selectTextRange,
     clearSelection,
     submit,
+    proofread,
     accept,
     reject,
   };
diff --git a/frontend/src/utils/sectionParser.ts b/frontend/src/utils/sectionParser.ts
index 9a23424..1690297 100644
--- a/frontend/src/utils/sectionParser.ts
+++ b/frontend/src/utils/sectionParser.ts
@@ -8,6 +8,73 @@ export interface MarkdownSection {
 
 const HEADING_RE = /^(#{1,6})\s+(.*)$/gm;
 
+function parseFallbackSections(body: string): MarkdownSection[] {
+  if (!body.trim())
+    return [];
+
+  const isPseudoHeading = (text: string): boolean => {
+    const t = text.trim();
+    return (
+      t.length > 0 && t.length <= 120 &&
+      !t.includes('\n') &&
+      !/^[-*+>]/.test(t) &&
+      !/^\d+\./.test(t) &&
+      !/^`{3,}/.test(t)
+    );
+  };
+
+  // Build paragraph list with exact start/end offsets
+  const separatorRe = /\n{2,}/g;
+  const paragraphs: Array<{ text: string; start: number; end: number }> = [];
+  let lastEnd = 0;
+  let sep: RegExpExecArray | null;
+  while ((sep = separatorRe.exec(body)) !== null) {
+    if (sep.index > lastEnd)
+      paragraphs.push({ text: body.slice(lastEnd, sep.index), start: lastEnd, end: sep.index });
+    lastEnd = sep.index + sep[0].length;
+  }
+  if (lastEnd < body.length)
+    paragraphs.push({ text: body.slice(lastEnd), start: lastEnd, end: body.length });
+
+  if (paragraphs.length === 0)
+    return [{ heading: '', level: 0, content: body, startOffset: 0, endOffset: body.length }];
+
+  const headingIndices = new Set(
+    paragraphs.map((p, i) => isPseudoHeading(p.text) ? i : -1).filter(i => i >= 0)
+  );
+  if (headingIndices.size === 0)
+    return [{ heading: '', level: 0, content: body, startOffset: 0, endOffset: body.length }];
+
+  const sections: MarkdownSection[] = [];
+  const headingIdxArray = [...headingIndices].sort((a, b) => a - b);
+  const firstHi = headingIdxArray[0];
+
+  // Preamble (content before first pseudo-heading)
+  if (firstHi > 0) {
+    sections.push({
+      heading: '', level: 0,
+      content: body.slice(paragraphs[0].start, paragraphs[firstHi].start),
+      startOffset: paragraphs[0].start,
+      endOffset: paragraphs[firstHi].start,
+    });
+  }
+
+  // One section per pseudo-heading
+  for (let h = 0; h < headingIdxArray.length; h++) {
+    const hi = headingIdxArray[h];
+    const nextHi = h + 1 < headingIdxArray.length ? headingIdxArray[h + 1] : null;
+    const sectionEnd = nextHi !== null ? paragraphs[nextHi].start : body.length;
+    sections.push({
+      heading: paragraphs[hi].text.trim(),
+      level: 0,
+      content: body.slice(paragraphs[hi].start, sectionEnd),
+      startOffset: paragraphs[hi].start,
+      endOffset: sectionEnd,
+    });
+  }
+  return sections;
+}
+
 export function parseMarkdownSections(body: string): MarkdownSection[] {
   const sections: MarkdownSection[] = [];
   const matches: { index: number; level: number; heading: string }[] = [];
@@ -23,17 +90,7 @@ export function parseMarkdownSections(body: string): MarkdownSection[] {
 
   // Preamble: text before the first heading
   if (matches.length === 0) {
-    // Entire body is a single preamble section
-    if (body.length > 0) {
-      sections.push({
-        heading: "",
-        level: 0,
-        content: body,
-        startOffset: 0,
-        endOffset: body.length,
-      });
-    }
-    return sections;
+    return parseFallbackSections(body);
   }
 
   if (matches[0].index > 0) {
diff --git a/frontend/src/views/ChatView.vue b/frontend/src/views/ChatView.vue
index feb2489..46e74c8 100644
--- a/frontend/src/views/ChatView.vue
+++ b/frontend/src/views/ChatView.vue
@@ -676,7 +676,7 @@ onUnmounted(() => {
   padding: 1rem 1.5rem;
   display: flex;
   flex-direction: column;
-  max-width: 960px;
+  max-width: 1200px;
   margin: 0 auto;
   width: 100%;
 }
@@ -821,7 +821,7 @@ onUnmounted(() => {
 
 /* Input wrapper */
 .input-wrapper {
-  max-width: 960px;
+  max-width: 1200px;
   margin: 0 auto 2rem;
   padding: 0 1rem;
   width: 100%;
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 30ec2c7..ea46b9e 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -424,7 +424,7 @@ function clearDashboardResponse() {
 
 <style scoped>
 .home {
-  max-width: 960px;
+  max-width: 1200px;
   margin: 2rem auto;
   padding: 0 1rem;
 }
diff --git a/frontend/src/views/LogsView.vue b/frontend/src/views/LogsView.vue
index 2f4bc70..e8b1b31 100644
--- a/frontend/src/views/LogsView.vue
+++ b/frontend/src/views/LogsView.vue
@@ -252,7 +252,7 @@ function clearFilters() {
 
 <style scoped>
 .logs-page {
-  max-width: 960px;
+  max-width: 1200px;
   margin: 2rem auto;
   padding: 0 1rem;
 }
diff --git a/frontend/src/views/NoteEditorView.vue b/frontend/src/views/NoteEditorView.vue
index c2a5d23..507c4ac 100644
--- a/frontend/src/views/NoteEditorView.vue
+++ b/frontend/src/views/NoteEditorView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed } from "vue";
+import { ref, onMounted, onUnmounted, computed, nextTick } from "vue";
 import { useRoute, useRouter, onBeforeRouteLeave } from "vue-router";
 import { useNotesStore } from "@/stores/notes";
 import { useToastStore } from "@/stores/toast";
@@ -38,10 +38,45 @@ const assist = useAssist(body);
 const renderedStreaming = computed(() => renderMarkdown(assist.streamingText.value));
 const renderedProposal = computed(() => renderMarkdown(assist.proposedText.value));
 
-function onSelectionChange(payload: { text: string; start: number; end: number }) {
-  assist.selectTextRange(payload.start, payload.end);
+// Assist panel toggle (persisted)
+const ASSIST_KEY = 'fa-assist-open';
+const assistOpen = ref(localStorage.getItem(ASSIST_KEY) !== 'false');
+function toggleAssist() {
+  assistOpen.value = !assistOpen.value;
+  localStorage.setItem(ASSIST_KEY, String(assistOpen.value));
 }
 
+// Floating inline assist button
+const floatingAssist = ref({ show: false, top: 0, left: 0 });
+const pendingSelection = ref<{ start: number; end: number } | null>(null);
+const instructionRef = ref<HTMLTextAreaElement | null>(null);
+
+function onSelectionChange(payload: { text: string; start: number; end: number }) {
+  if (payload.text.trim().length > 0) {
+    const sel = window.getSelection();
+    if (sel && sel.rangeCount > 0) {
+      const rect = sel.getRangeAt(0).getBoundingClientRect();
+      floatingAssist.value = { show: true, top: rect.top - 44, left: rect.left + rect.width / 2 };
+      pendingSelection.value = { start: payload.start, end: payload.end };
+    }
+  } else {
+    floatingAssist.value.show = false;
+    pendingSelection.value = null;
+  }
+}
+
+function handleInlineAssist() {
+  if (!pendingSelection.value) return;
+  assist.selectTextRange(pendingSelection.value.start, pendingSelection.value.end);
+  assistOpen.value = true;
+  localStorage.setItem(ASSIST_KEY, 'true');
+  floatingAssist.value.show = false;
+  nextTick(() => instructionRef.value?.focus());
+}
+
+// Diff view toggle
+const showFullProposed = ref(false);
+
 function handleAssistAccept() {
   const newBody = assist.accept();
   if (newBody !== body.value) {
@@ -49,6 +84,7 @@ function handleAssistAccept() {
     markDirty();
     toast.show("Section updated");
   }
+  showFullProposed.value = false;
 }
 
 function truncateTarget(text: string, max = 60): string {
@@ -195,7 +231,7 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
 </script>
 
 <template>
-  <main class="editor-layout">
+  <main class="editor-page">
     <div class="editor-header">
       <div class="toolbar">
         <router-link to="/notes" class="btn-back">Back</router-link>
@@ -205,6 +241,9 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
         <button v-if="isEditing" class="btn-delete" @click="remove">
           Delete
         </button>
+        <button class="btn-assist-toggle" :class="{ active: assistOpen }" @click="toggleAssist">
+          ✨ Assist
+        </button>
       </div>
       <input
         v-model="title"
@@ -251,87 +290,137 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
       <MarkdownToolbar v-show="!showPreview" :editor="tiptapEditor" />
     </div>
 
-    <div class="editor-scroll">
-      <div v-show="!showPreview">
-        <TiptapEditor
-          ref="editorRef"
-          :modelValue="body"
-          placeholder="Write your note in Markdown... Use #tags inline"
-          :fetchTags="(q: string) => store.fetchAllTags(q)"
-          @update:modelValue="onBodyUpdate"
-          @selectionChange="onSelectionChange"
-        />
+    <div class="editor-body">
+      <div class="editor-main">
+        <div v-show="!showPreview">
+          <TiptapEditor
+            ref="editorRef"
+            :modelValue="body"
+            placeholder="Write your note in Markdown... Use #tags inline"
+            :fetchTags="(q: string) => store.fetchAllTags(q)"
+            @update:modelValue="onBodyUpdate"
+            @selectionChange="onSelectionChange"
+          />
+        </div>
+
+        <div
+          v-show="showPreview"
+          class="preview-pane prose"
+          v-html="renderedPreview"
+        ></div>
       </div>
 
-      <div
-        v-show="showPreview"
-        class="preview-pane prose"
-        v-html="renderedPreview"
-      ></div>
+      <aside v-if="assistOpen" class="assist-panel">
+        <!-- Panel header -->
+        <div class="assist-panel-header">
+          <span class="assist-panel-title">✨ AI Assist</span>
+          <button
+            class="btn-proofread"
+            @click="assist.proofread()"
+            :disabled="assist.state.value === 'streaming'"
+          >Proofread</button>
+          <button class="btn-close-assist" @click="toggleAssist">×</button>
+        </div>
+
+        <!-- Panel body -->
+        <div class="assist-panel-body">
+
+          <!-- IDLE -->
+          <div v-if="assist.state.value === 'idle'" class="assist-idle">
+            <div class="assist-sections-label">Sections</div>
+            <div class="assist-sections">
+              <div
+                v-for="(section, i) in assist.sections.value"
+                :key="i"
+                :class="['assist-section-item', { selected: assist.selectedSection.value === section }]"
+                @click="assist.selectSection(section)"
+              >
+                {{ section.heading || '(preamble)' }}
+              </div>
+              <div v-if="!assist.sections.value.length" class="assist-empty">
+                Write some content to get started.
+              </div>
+            </div>
+            <template v-if="assist.target.value">
+              <div class="assist-target-preview">
+                Editing: <em>{{ truncateTarget(assist.target.value.text) }}</em>
+              </div>
+              <textarea
+                ref="instructionRef"
+                v-model="assist.instruction.value"
+                placeholder="What should I do with this section?"
+                class="assist-instruction"
+                rows="3"
+              ></textarea>
+              <div class="assist-input-actions">
+                <button
+                  class="btn-generate"
+                  @click="assist.submit()"
+                  :disabled="!assist.canSubmit.value"
+                >Generate</button>
+                <button class="btn-clear" @click="assist.clearSelection()">Clear</button>
+              </div>
+            </template>
+            <div v-else class="assist-hint">
+              Select a section above or highlight text in the editor.
+            </div>
+          </div>
+
+          <!-- ERROR -->
+          <div v-if="assist.error.value" class="assist-error">{{ assist.error.value }}</div>
+
+          <!-- STREAMING -->
+          <div v-if="assist.state.value === 'streaming'" class="assist-streaming">
+            <div class="assist-streaming-label">
+              {{ assist.isProofreading.value
+                ? 'Proofreading document...'
+                : `Revising: "${truncateTarget(assist.target.value?.text ?? '')}"` }}
+            </div>
+            <div class="assist-preview-box prose" v-html="renderedStreaming"></div>
+            <span class="typing-indicator">●●●</span>
+          </div>
+
+          <!-- REVIEW -->
+          <div v-if="assist.state.value === 'review'" class="assist-review">
+            <div class="assist-review-header">
+              <span>{{ assist.isProofreading.value ? 'Document proofread' : 'Proposed changes' }}</span>
+              <button class="btn-toggle-view" @click="showFullProposed = !showFullProposed">
+                {{ showFullProposed ? 'Show diff' : 'Show full text' }}
+              </button>
+            </div>
+            <div v-if="!showFullProposed" class="diff-view">
+              <div
+                v-for="(line, i) in assist.diff.value"
+                :key="i"
+                :class="['diff-line', `diff-${line.type}`]"
+              >
+                <span class="diff-marker">{{ line.type === 'delete' ? '−' : line.type === 'insert' ? '+' : ' ' }}</span>
+                <span class="diff-text">{{ line.text }}</span>
+              </div>
+              <div v-if="!assist.diff.value.length" class="diff-empty">No changes.</div>
+            </div>
+            <div v-else class="assist-preview-box prose" v-html="renderedProposal"></div>
+            <div class="assist-actions">
+              <button class="btn-accept" @click="handleAssistAccept">✓ Accept</button>
+              <button class="btn-reject" @click="() => { assist.reject(); showFullProposed = false; }">✗ Reject</button>
+            </div>
+          </div>
+
+        </div>
+      </aside>
     </div>
 
-    <!-- AI Assist -->
-    <aside class="assist-panel">
-      <div class="assist-panel-header">
-        <h3 class="assist-panel-title">AI Assist</h3>
-      </div>
-
-      <div class="assist-panel-body">
-        <div v-if="assist.state.value === 'idle'" class="assist-controls">
-          <div class="assist-sections">
-            <div
-              v-for="(section, i) in assist.sections.value"
-              :key="i"
-              :class="['assist-section-item', { selected: assist.selectedSection.value === section }]"
-              @click="assist.selectSection(section)"
-            >
-              {{ section.heading || '(preamble)' }}
-            </div>
-            <div v-if="assist.sections.value.length === 0" class="assist-empty">
-              No sections found. Add headings (## ...) or select text.
-            </div>
-          </div>
-          <div class="assist-input" v-if="assist.target.value">
-            <div class="assist-target-preview">
-              Editing: {{ truncateTarget(assist.target.value.text) }}
-            </div>
-            <textarea
-              v-model="assist.instruction.value"
-              placeholder="What should I do with this section?"
-              class="assist-instruction"
-              rows="2"
-            ></textarea>
-            <div class="assist-input-actions">
-              <button
-                class="btn-generate"
-                @click="assist.submit()"
-                :disabled="!assist.canSubmit.value"
-              >
-                Generate
-              </button>
-              <button class="btn-clear" @click="assist.clearSelection()">Clear</button>
-            </div>
-          </div>
-        </div>
-
-        <div v-if="assist.error.value" class="assist-error">
-          {{ assist.error.value }}
-        </div>
-
-        <div v-if="assist.state.value === 'streaming'" class="assist-preview">
-          <div class="assist-proposed prose" v-html="renderedStreaming"></div>
-          <span class="typing-indicator">...</span>
-        </div>
-
-        <div v-if="assist.state.value === 'review'" class="assist-review">
-          <div class="assist-proposed prose" v-html="renderedProposal"></div>
-          <div class="assist-actions">
-            <button class="btn-accept" @click="handleAssistAccept">Accept</button>
-            <button class="btn-reject" @click="assist.reject()">Reject</button>
-          </div>
-        </div>
-      </div>
-    </aside>
+    <!-- Floating inline assist button (teleported to body) -->
+    <teleport to="body">
+      <button
+        v-if="floatingAssist.show"
+        class="inline-assist-btn"
+        :style="{ top: floatingAssist.top + 'px', left: floatingAssist.left + 'px' }"
+        @mousedown.prevent="handleInlineAssist"
+      >
+        ✨ Assist
+      </button>
+    </teleport>
 
     <!-- Delete confirmation -->
     <teleport to="body">
@@ -351,10 +440,9 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
 
 <style scoped>
 /* ── Layout ── */
-.editor-layout {
-  max-width: 960px;
+.editor-page {
+  max-width: 1400px;
   margin: 0 auto;
-  padding: 0 1rem;
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -365,13 +453,20 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
-  padding: 1rem 0 0.5rem;
+  padding: 1rem 1.5rem 0.5rem;
+  border-bottom: 1px solid var(--color-border);
 }
-.editor-scroll {
-  flex: 1 1 0;
+.editor-body {
+  flex: 1;
   min-height: 0;
+  display: flex;
+  overflow: hidden;
+}
+.editor-main {
+  flex: 1;
+  min-width: 0;
   overflow-y: auto;
-  padding: 0.5rem 0 1rem;
+  padding: 0.75rem 1.5rem 1.5rem;
 }
 
 /* ── Toolbar & inputs ── */
@@ -403,7 +498,21 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
   border: none;
   border-radius: var(--radius-sm);
   cursor: pointer;
+}
+.btn-assist-toggle {
   margin-left: auto;
+  padding: 0.4rem 0.9rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: none;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  font-size: 0.85rem;
+}
+.btn-assist-toggle.active {
+  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+  border-color: var(--color-primary);
+  color: var(--color-primary);
 }
 .title-input {
   padding: 0.5rem 0.75rem;
@@ -505,53 +614,87 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
 
 /* ── Assist panel ── */
 .assist-panel {
-  flex: 0 0 33.33%;
-  min-height: 0;
+  width: 320px;
+  flex-shrink: 0;
+  border-left: 1px solid var(--color-border);
+  background: var(--color-bg-secondary);
   display: flex;
   flex-direction: column;
-  border-top: 1px solid var(--color-border);
-  box-shadow: 0 -4px 16px var(--color-shadow);
-  background: var(--color-bg-card);
-  border-radius: var(--radius-md) var(--radius-md) 0 0;
   overflow: hidden;
 }
 .assist-panel-header {
   flex-shrink: 0;
-  padding: 0.75rem 1rem 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.65rem 0.9rem;
+  border-bottom: 1px solid var(--color-border);
 }
 .assist-panel-title {
-  margin: 0;
+  flex: 1;
   font-size: 0.8rem;
-  font-weight: 600;
+  font-weight: 700;
   color: var(--color-text-secondary);
   text-transform: uppercase;
-  letter-spacing: 0.04em;
+  letter-spacing: 0.05em;
+}
+.btn-proofread {
+  padding: 0.3rem 0.65rem;
+  font-size: 0.78rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: none;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+}
+.btn-proofread:hover:not(:disabled) {
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+}
+.btn-proofread:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.btn-close-assist {
+  padding: 0.1rem 0.4rem;
+  border: none;
+  background: none;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  font-size: 1rem;
+  line-height: 1;
 }
 .assist-panel-body {
   flex: 1;
   min-height: 0;
   overflow-y: auto;
-  padding: 0.75rem 1rem 1rem;
+  padding: 0.75rem 0.9rem 1rem;
   display: flex;
   flex-direction: column;
+  gap: 0.6rem;
 }
-.assist-controls {
-  display: flex;
-  gap: 0.75rem;
-  flex: 1;
-  min-height: 0;
+
+/* Section list */
+.assist-sections-label {
+  font-size: 0.72rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--color-text-muted);
+  margin-bottom: 0.2rem;
 }
 .assist-sections {
-  flex: 0 0 40%;
-  overflow-y: auto;
   border: 1px solid var(--color-input-border);
   border-radius: var(--radius-sm);
   background: var(--color-bg);
+  max-height: 200px;
+  overflow-y: auto;
+  flex-shrink: 0;
 }
 .assist-section-item {
-  padding: 0.35rem 0.75rem;
+  padding: 0.35rem 0.7rem;
   cursor: pointer;
-  font-size: 0.85rem;
+  font-size: 0.82rem;
   border-left: 3px solid transparent;
   color: var(--color-text);
   white-space: nowrap;
@@ -566,38 +709,35 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
   background: var(--color-bg-secondary);
   font-weight: 500;
 }
-.assist-empty {
-  padding: 0.75rem;
-  font-size: 0.85rem;
-  color: var(--color-text-secondary);
-}
-.assist-input {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+.assist-empty,
+.assist-hint {
+  padding: 0.6rem 0.7rem;
+  font-size: 0.82rem;
+  color: var(--color-text-muted);
 }
 .assist-target-preview {
   font-size: 0.8rem;
   color: var(--color-text-secondary);
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.assist-target-preview em {
+  font-style: normal;
+  color: var(--color-text);
 }
 .assist-instruction {
   width: 100%;
-  flex: 1;
-  min-height: 2.5rem;
-  padding: 0.5rem 0.75rem;
+  padding: 0.5rem 0.65rem;
   border: 1px solid var(--color-input-border);
   border-radius: var(--radius-sm);
-  font-size: 0.9rem;
+  font-size: 0.88rem;
   font-family: inherit;
-  resize: none;
+  resize: vertical;
   background: var(--color-bg);
   color: var(--color-text);
   box-sizing: border-box;
+  min-height: 3.5rem;
 }
 .assist-input-actions {
   display: flex;
@@ -625,8 +765,37 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
   font-size: 0.85rem;
   color: var(--color-text-secondary);
 }
+
+/* Streaming */
+.assist-streaming-label {
+  font-size: 0.8rem;
+  color: var(--color-text-secondary);
+  font-style: italic;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.assist-preview-box {
+  padding: 0.65rem;
+  border: 1px solid var(--color-input-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-bg);
+  font-size: 0.9rem;
+  max-height: 300px;
+  overflow-y: auto;
+}
+.typing-indicator {
+  color: var(--color-text-muted);
+  font-size: 0.75rem;
+  letter-spacing: 0.15em;
+  animation: blink 1s step-end infinite;
+}
+@keyframes blink {
+  50% { opacity: 0; }
+}
+
+/* Error */
 .assist-error {
-  margin-top: 0.5rem;
   padding: 0.5rem 0.75rem;
   background: color-mix(in srgb, var(--color-danger) 10%, transparent);
   border: 1px solid var(--color-danger);
@@ -634,29 +803,72 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
   font-size: 0.85rem;
   color: var(--color-danger);
 }
-.assist-preview,
-.assist-review {
-  margin-top: 0.75rem;
-  padding: 0.75rem;
+
+/* Review / diff */
+.assist-review-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+}
+.btn-toggle-view {
+  font-size: 0.75rem;
+  color: var(--color-primary);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+}
+.diff-view {
   border: 1px solid var(--color-input-border);
   border-radius: var(--radius-sm);
   background: var(--color-bg);
+  font-size: 0.82rem;
+  font-family: monospace;
+  max-height: 340px;
+  overflow-y: auto;
+  padding: 0.4rem 0;
 }
-.assist-proposed {
-  font-size: 0.95rem;
+.diff-line {
+  display: flex;
+  align-items: baseline;
+  padding: 0.05rem 0.5rem;
+  line-height: 1.5;
 }
-.typing-indicator {
-  display: inline-block;
-  color: var(--color-text-secondary);
-  animation: blink 1s step-end infinite;
+.diff-delete {
+  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
+  color: var(--color-danger);
 }
-@keyframes blink {
-  50% { opacity: 0; }
+.diff-insert {
+  background: color-mix(in srgb, var(--color-success) 12%, transparent);
+  color: var(--color-success);
+}
+.diff-equal {
+  color: var(--color-text-muted);
+}
+.diff-marker {
+  flex-shrink: 0;
+  width: 1rem;
+  text-align: center;
+  user-select: none;
+  font-weight: 700;
+}
+.diff-text {
+  flex: 1;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.diff-empty {
+  padding: 0.5rem;
+  color: var(--color-text-muted);
+  font-style: italic;
+  font-size: 0.82rem;
 }
 .assist-actions {
   display: flex;
   gap: 0.5rem;
-  margin-top: 0.75rem;
 }
 .btn-accept {
   padding: 0.4rem 1rem;
@@ -726,14 +938,21 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
 
 /* ── Mobile ── */
 @media (max-width: 768px) {
-  .assist-panel {
-    flex-basis: 45%;
-  }
-  .assist-controls {
+  .editor-body {
     flex-direction: column;
   }
-  .assist-sections {
-    flex: none;
+  .assist-panel {
+    width: auto;
+    flex: 0 0 45%;
+    border-left: none;
+    border-top: 1px solid var(--color-border);
+    border-radius: var(--radius-md) var(--radius-md) 0 0;
+  }
+  .editor-header {
+    padding: 0.75rem 1rem 0.5rem;
+  }
+  .editor-main {
+    padding: 0.5rem 1rem 1rem;
   }
 }
 </style>
diff --git a/frontend/src/views/NoteViewerView.vue b/frontend/src/views/NoteViewerView.vue
index b642578..11eb71a 100644
--- a/frontend/src/views/NoteViewerView.vue
+++ b/frontend/src/views/NoteViewerView.vue
@@ -171,14 +171,14 @@ async function convertToTask() {
 <style scoped>
 .viewer-layout {
   display: flex;
-  max-width: 1200px;
+  max-width: 1400px;
   margin: 0 auto;
   gap: 2rem;
 }
 .viewer {
   flex: 1;
   min-width: 0;
-  max-width: 960px;
+  max-width: 1100px;
   margin: 2rem 0;
   padding: 0 1rem;
 }
diff --git a/frontend/src/views/NotesListView.vue b/frontend/src/views/NotesListView.vue
index 9693993..eb62cf1 100644
--- a/frontend/src/views/NotesListView.vue
+++ b/frontend/src/views/NotesListView.vue
@@ -133,7 +133,7 @@ function onOffsetUpdate(offset: number) {
 
 <style scoped>
 .notes-list {
-  max-width: 960px;
+  max-width: 1200px;
   margin: 2rem auto;
   padding: 0 1rem;
 }
diff --git a/frontend/src/views/SettingsView.vue b/frontend/src/views/SettingsView.vue
index 14022b6..5aa604c 100644
--- a/frontend/src/views/SettingsView.vue
+++ b/frontend/src/views/SettingsView.vue
@@ -595,7 +595,7 @@ async function handleRestoreFile(event: Event) {
 
 <style scoped>
 .settings-page {
-  max-width: 960px;
+  max-width: 1200px;
   margin: 2rem auto;
   padding: 0 1rem;
 }
diff --git a/frontend/src/views/TaskEditorView.vue b/frontend/src/views/TaskEditorView.vue
index cd5b17d..eb2212f 100644
--- a/frontend/src/views/TaskEditorView.vue
+++ b/frontend/src/views/TaskEditorView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed } from "vue";
+import { ref, onMounted, onUnmounted, computed, nextTick } from "vue";
 import { useRoute, useRouter, onBeforeRouteLeave } from "vue-router";
 import { useTasksStore } from "@/stores/tasks";
 import { useNotesStore } from "@/stores/notes";
@@ -44,10 +44,45 @@ const assist = useAssist(body);
 const renderedStreaming = computed(() => renderMarkdown(assist.streamingText.value));
 const renderedProposal = computed(() => renderMarkdown(assist.proposedText.value));
 
-function onSelectionChange(payload: { text: string; start: number; end: number }) {
-  assist.selectTextRange(payload.start, payload.end);
+// Assist panel toggle (persisted)
+const ASSIST_KEY = 'fa-assist-open';
+const assistOpen = ref(localStorage.getItem(ASSIST_KEY) !== 'false');
+function toggleAssist() {
+  assistOpen.value = !assistOpen.value;
+  localStorage.setItem(ASSIST_KEY, String(assistOpen.value));
 }
 
+// Floating inline assist button
+const floatingAssist = ref({ show: false, top: 0, left: 0 });
+const pendingSelection = ref<{ start: number; end: number } | null>(null);
+const instructionRef = ref<HTMLTextAreaElement | null>(null);
+
+function onSelectionChange(payload: { text: string; start: number; end: number }) {
+  if (payload.text.trim().length > 0) {
+    const sel = window.getSelection();
+    if (sel && sel.rangeCount > 0) {
+      const rect = sel.getRangeAt(0).getBoundingClientRect();
+      floatingAssist.value = { show: true, top: rect.top - 44, left: rect.left + rect.width / 2 };
+      pendingSelection.value = { start: payload.start, end: payload.end };
+    }
+  } else {
+    floatingAssist.value.show = false;
+    pendingSelection.value = null;
+  }
+}
+
+function handleInlineAssist() {
+  if (!pendingSelection.value) return;
+  assist.selectTextRange(pendingSelection.value.start, pendingSelection.value.end);
+  assistOpen.value = true;
+  localStorage.setItem(ASSIST_KEY, 'true');
+  floatingAssist.value.show = false;
+  nextTick(() => instructionRef.value?.focus());
+}
+
+// Diff view toggle
+const showFullProposed = ref(false);
+
 function handleAssistAccept() {
   const newBody = assist.accept();
   if (newBody !== body.value) {
@@ -55,6 +90,7 @@ function handleAssistAccept() {
     markDirty();
     toast.show("Section updated");
   }
+  showFullProposed.value = false;
 }
 
 function truncateTarget(text: string, max = 60): string {
@@ -215,7 +251,7 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
 </script>
 
 <template>
-  <main class="editor-layout">
+  <main class="editor-page">
     <div class="editor-header">
       <div class="toolbar">
         <router-link to="/tasks" class="btn-back">Back</router-link>
@@ -225,6 +261,9 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
         <button v-if="isEditing" class="btn-delete" @click="remove">
           Delete
         </button>
+        <button class="btn-assist-toggle" :class="{ active: assistOpen }" @click="toggleAssist">
+          ✨ Assist
+        </button>
       </div>
       <input
         v-model="title"
@@ -300,87 +339,137 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
       <MarkdownToolbar v-show="!showPreview" :editor="tiptapEditor" />
     </div>
 
-    <div class="editor-scroll">
-      <div v-show="!showPreview">
-        <TiptapEditor
-          ref="editorRef"
-          :modelValue="body"
-          placeholder="Describe this task... Use #tags inline"
-          :fetchTags="(q: string) => notesStore.fetchAllTags(q)"
-          @update:modelValue="onBodyUpdate"
-          @selectionChange="onSelectionChange"
-        />
+    <div class="editor-body">
+      <div class="editor-main">
+        <div v-show="!showPreview">
+          <TiptapEditor
+            ref="editorRef"
+            :modelValue="body"
+            placeholder="Describe this task... Use #tags inline"
+            :fetchTags="(q: string) => notesStore.fetchAllTags(q)"
+            @update:modelValue="onBodyUpdate"
+            @selectionChange="onSelectionChange"
+          />
+        </div>
+
+        <div
+          v-show="showPreview"
+          class="preview-pane prose"
+          v-html="renderedPreview"
+        ></div>
       </div>
 
-      <div
-        v-show="showPreview"
-        class="preview-pane prose"
-        v-html="renderedPreview"
-      ></div>
+      <aside v-if="assistOpen" class="assist-panel">
+        <!-- Panel header -->
+        <div class="assist-panel-header">
+          <span class="assist-panel-title">✨ AI Assist</span>
+          <button
+            class="btn-proofread"
+            @click="assist.proofread()"
+            :disabled="assist.state.value === 'streaming'"
+          >Proofread</button>
+          <button class="btn-close-assist" @click="toggleAssist">×</button>
+        </div>
+
+        <!-- Panel body -->
+        <div class="assist-panel-body">
+
+          <!-- IDLE -->
+          <div v-if="assist.state.value === 'idle'" class="assist-idle">
+            <div class="assist-sections-label">Sections</div>
+            <div class="assist-sections">
+              <div
+                v-for="(section, i) in assist.sections.value"
+                :key="i"
+                :class="['assist-section-item', { selected: assist.selectedSection.value === section }]"
+                @click="assist.selectSection(section)"
+              >
+                {{ section.heading || '(preamble)' }}
+              </div>
+              <div v-if="!assist.sections.value.length" class="assist-empty">
+                Write some content to get started.
+              </div>
+            </div>
+            <template v-if="assist.target.value">
+              <div class="assist-target-preview">
+                Editing: <em>{{ truncateTarget(assist.target.value.text) }}</em>
+              </div>
+              <textarea
+                ref="instructionRef"
+                v-model="assist.instruction.value"
+                placeholder="What should I do with this section?"
+                class="assist-instruction"
+                rows="3"
+              ></textarea>
+              <div class="assist-input-actions">
+                <button
+                  class="btn-generate"
+                  @click="assist.submit()"
+                  :disabled="!assist.canSubmit.value"
+                >Generate</button>
+                <button class="btn-clear" @click="assist.clearSelection()">Clear</button>
+              </div>
+            </template>
+            <div v-else class="assist-hint">
+              Select a section above or highlight text in the editor.
+            </div>
+          </div>
+
+          <!-- ERROR -->
+          <div v-if="assist.error.value" class="assist-error">{{ assist.error.value }}</div>
+
+          <!-- STREAMING -->
+          <div v-if="assist.state.value === 'streaming'" class="assist-streaming">
+            <div class="assist-streaming-label">
+              {{ assist.isProofreading.value
+                ? 'Proofreading document...'
+                : `Revising: "${truncateTarget(assist.target.value?.text ?? '')}"` }}
+            </div>
+            <div class="assist-preview-box prose" v-html="renderedStreaming"></div>
+            <span class="typing-indicator">●●●</span>
+          </div>
+
+          <!-- REVIEW -->
+          <div v-if="assist.state.value === 'review'" class="assist-review">
+            <div class="assist-review-header">
+              <span>{{ assist.isProofreading.value ? 'Document proofread' : 'Proposed changes' }}</span>
+              <button class="btn-toggle-view" @click="showFullProposed = !showFullProposed">
+                {{ showFullProposed ? 'Show diff' : 'Show full text' }}
+              </button>
+            </div>
+            <div v-if="!showFullProposed" class="diff-view">
+              <div
+                v-for="(line, i) in assist.diff.value"
+                :key="i"
+                :class="['diff-line', `diff-${line.type}`]"
+              >
+                <span class="diff-marker">{{ line.type === 'delete' ? '−' : line.type === 'insert' ? '+' : ' ' }}</span>
+                <span class="diff-text">{{ line.text }}</span>
+              </div>
+              <div v-if="!assist.diff.value.length" class="diff-empty">No changes.</div>
+            </div>
+            <div v-else class="assist-preview-box prose" v-html="renderedProposal"></div>
+            <div class="assist-actions">
+              <button class="btn-accept" @click="handleAssistAccept">✓ Accept</button>
+              <button class="btn-reject" @click="() => { assist.reject(); showFullProposed = false; }">✗ Reject</button>
+            </div>
+          </div>
+
+        </div>
+      </aside>
     </div>
 
-    <!-- AI Assist -->
-    <aside class="assist-panel">
-      <div class="assist-panel-header">
-        <h3 class="assist-panel-title">AI Assist</h3>
-      </div>
-
-      <div class="assist-panel-body">
-        <div v-if="assist.state.value === 'idle'" class="assist-controls">
-          <div class="assist-sections">
-            <div
-              v-for="(section, i) in assist.sections.value"
-              :key="i"
-              :class="['assist-section-item', { selected: assist.selectedSection.value === section }]"
-              @click="assist.selectSection(section)"
-            >
-              {{ section.heading || '(preamble)' }}
-            </div>
-            <div v-if="assist.sections.value.length === 0" class="assist-empty">
-              No sections found. Add headings (## ...) or select text.
-            </div>
-          </div>
-          <div class="assist-input" v-if="assist.target.value">
-            <div class="assist-target-preview">
-              Editing: {{ truncateTarget(assist.target.value.text) }}
-            </div>
-            <textarea
-              v-model="assist.instruction.value"
-              placeholder="What should I do with this section?"
-              class="assist-instruction"
-              rows="2"
-            ></textarea>
-            <div class="assist-input-actions">
-              <button
-                class="btn-generate"
-                @click="assist.submit()"
-                :disabled="!assist.canSubmit.value"
-              >
-                Generate
-              </button>
-              <button class="btn-clear" @click="assist.clearSelection()">Clear</button>
-            </div>
-          </div>
-        </div>
-
-        <div v-if="assist.error.value" class="assist-error">
-          {{ assist.error.value }}
-        </div>
-
-        <div v-if="assist.state.value === 'streaming'" class="assist-preview">
-          <div class="assist-proposed prose" v-html="renderedStreaming"></div>
-          <span class="typing-indicator">...</span>
-        </div>
-
-        <div v-if="assist.state.value === 'review'" class="assist-review">
-          <div class="assist-proposed prose" v-html="renderedProposal"></div>
-          <div class="assist-actions">
-            <button class="btn-accept" @click="handleAssistAccept">Accept</button>
-            <button class="btn-reject" @click="assist.reject()">Reject</button>
-          </div>
-        </div>
-      </div>
-    </aside>
+    <!-- Floating inline assist button (teleported to body) -->
+    <teleport to="body">
+      <button
+        v-if="floatingAssist.show"
+        class="inline-assist-btn"
+        :style="{ top: floatingAssist.top + 'px', left: floatingAssist.left + 'px' }"
+        @mousedown.prevent="handleInlineAssist"
+      >
+        ✨ Assist
+      </button>
+    </teleport>
 
     <!-- Delete confirmation -->
     <teleport to="body">
@@ -400,10 +489,9 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
 
 <style scoped>
 /* ── Layout ── */
-.editor-layout {
-  max-width: 960px;
+.editor-page {
+  max-width: 1400px;
   margin: 0 auto;
-  padding: 0 1rem;
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -414,13 +502,20 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
-  padding: 1rem 0 0.5rem;
+  padding: 1rem 1.5rem 0.5rem;
+  border-bottom: 1px solid var(--color-border);
 }
-.editor-scroll {
-  flex: 1 1 0;
+.editor-body {
+  flex: 1;
   min-height: 0;
+  display: flex;
+  overflow: hidden;
+}
+.editor-main {
+  flex: 1;
+  min-width: 0;
   overflow-y: auto;
-  padding: 0.5rem 0 1rem;
+  padding: 0.75rem 1.5rem 1.5rem;
 }
 
 /* ── Toolbar & inputs ── */
@@ -452,7 +547,21 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
   border: none;
   border-radius: var(--radius-sm);
   cursor: pointer;
+}
+.btn-assist-toggle {
   margin-left: auto;
+  padding: 0.4rem 0.9rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: none;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  font-size: 0.85rem;
+}
+.btn-assist-toggle.active {
+  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+  border-color: var(--color-primary);
+  color: var(--color-primary);
 }
 .title-input {
   padding: 0.5rem 0.75rem;
@@ -580,53 +689,87 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
 
 /* ── Assist panel ── */
 .assist-panel {
-  flex: 0 0 33.33%;
-  min-height: 0;
+  width: 320px;
+  flex-shrink: 0;
+  border-left: 1px solid var(--color-border);
+  background: var(--color-bg-secondary);
   display: flex;
   flex-direction: column;
-  border-top: 1px solid var(--color-border);
-  box-shadow: 0 -4px 16px var(--color-shadow);
-  background: var(--color-bg-card);
-  border-radius: var(--radius-md) var(--radius-md) 0 0;
   overflow: hidden;
 }
 .assist-panel-header {
   flex-shrink: 0;
-  padding: 0.75rem 1rem 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.65rem 0.9rem;
+  border-bottom: 1px solid var(--color-border);
 }
 .assist-panel-title {
-  margin: 0;
+  flex: 1;
   font-size: 0.8rem;
-  font-weight: 600;
+  font-weight: 700;
   color: var(--color-text-secondary);
   text-transform: uppercase;
-  letter-spacing: 0.04em;
+  letter-spacing: 0.05em;
+}
+.btn-proofread {
+  padding: 0.3rem 0.65rem;
+  font-size: 0.78rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: none;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+}
+.btn-proofread:hover:not(:disabled) {
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+}
+.btn-proofread:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.btn-close-assist {
+  padding: 0.1rem 0.4rem;
+  border: none;
+  background: none;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  font-size: 1rem;
+  line-height: 1;
 }
 .assist-panel-body {
   flex: 1;
   min-height: 0;
   overflow-y: auto;
-  padding: 0.75rem 1rem 1rem;
+  padding: 0.75rem 0.9rem 1rem;
   display: flex;
   flex-direction: column;
+  gap: 0.6rem;
 }
-.assist-controls {
-  display: flex;
-  gap: 0.75rem;
-  flex: 1;
-  min-height: 0;
+
+/* Section list */
+.assist-sections-label {
+  font-size: 0.72rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--color-text-muted);
+  margin-bottom: 0.2rem;
 }
 .assist-sections {
-  flex: 0 0 40%;
-  overflow-y: auto;
   border: 1px solid var(--color-input-border);
   border-radius: var(--radius-sm);
   background: var(--color-bg);
+  max-height: 200px;
+  overflow-y: auto;
+  flex-shrink: 0;
 }
 .assist-section-item {
-  padding: 0.35rem 0.75rem;
+  padding: 0.35rem 0.7rem;
   cursor: pointer;
-  font-size: 0.85rem;
+  font-size: 0.82rem;
   border-left: 3px solid transparent;
   color: var(--color-text);
   white-space: nowrap;
@@ -641,38 +784,35 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
   background: var(--color-bg-secondary);
   font-weight: 500;
 }
-.assist-empty {
-  padding: 0.75rem;
-  font-size: 0.85rem;
-  color: var(--color-text-secondary);
-}
-.assist-input {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+.assist-empty,
+.assist-hint {
+  padding: 0.6rem 0.7rem;
+  font-size: 0.82rem;
+  color: var(--color-text-muted);
 }
 .assist-target-preview {
   font-size: 0.8rem;
   color: var(--color-text-secondary);
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.assist-target-preview em {
+  font-style: normal;
+  color: var(--color-text);
 }
 .assist-instruction {
   width: 100%;
-  flex: 1;
-  min-height: 2.5rem;
-  padding: 0.5rem 0.75rem;
+  padding: 0.5rem 0.65rem;
   border: 1px solid var(--color-input-border);
   border-radius: var(--radius-sm);
-  font-size: 0.9rem;
+  font-size: 0.88rem;
   font-family: inherit;
-  resize: none;
+  resize: vertical;
   background: var(--color-bg);
   color: var(--color-text);
   box-sizing: border-box;
+  min-height: 3.5rem;
 }
 .assist-input-actions {
   display: flex;
@@ -700,8 +840,37 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
   font-size: 0.85rem;
   color: var(--color-text-secondary);
 }
+
+/* Streaming */
+.assist-streaming-label {
+  font-size: 0.8rem;
+  color: var(--color-text-secondary);
+  font-style: italic;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.assist-preview-box {
+  padding: 0.65rem;
+  border: 1px solid var(--color-input-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-bg);
+  font-size: 0.9rem;
+  max-height: 300px;
+  overflow-y: auto;
+}
+.typing-indicator {
+  color: var(--color-text-muted);
+  font-size: 0.75rem;
+  letter-spacing: 0.15em;
+  animation: blink 1s step-end infinite;
+}
+@keyframes blink {
+  50% { opacity: 0; }
+}
+
+/* Error */
 .assist-error {
-  margin-top: 0.5rem;
   padding: 0.5rem 0.75rem;
   background: color-mix(in srgb, var(--color-danger) 10%, transparent);
   border: 1px solid var(--color-danger);
@@ -709,29 +878,72 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
   font-size: 0.85rem;
   color: var(--color-danger);
 }
-.assist-preview,
-.assist-review {
-  margin-top: 0.75rem;
-  padding: 0.75rem;
+
+/* Review / diff */
+.assist-review-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+}
+.btn-toggle-view {
+  font-size: 0.75rem;
+  color: var(--color-primary);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+}
+.diff-view {
   border: 1px solid var(--color-input-border);
   border-radius: var(--radius-sm);
   background: var(--color-bg);
+  font-size: 0.82rem;
+  font-family: monospace;
+  max-height: 340px;
+  overflow-y: auto;
+  padding: 0.4rem 0;
 }
-.assist-proposed {
-  font-size: 0.95rem;
+.diff-line {
+  display: flex;
+  align-items: baseline;
+  padding: 0.05rem 0.5rem;
+  line-height: 1.5;
 }
-.typing-indicator {
-  display: inline-block;
-  color: var(--color-text-secondary);
-  animation: blink 1s step-end infinite;
+.diff-delete {
+  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
+  color: var(--color-danger);
 }
-@keyframes blink {
-  50% { opacity: 0; }
+.diff-insert {
+  background: color-mix(in srgb, var(--color-success) 12%, transparent);
+  color: var(--color-success);
+}
+.diff-equal {
+  color: var(--color-text-muted);
+}
+.diff-marker {
+  flex-shrink: 0;
+  width: 1rem;
+  text-align: center;
+  user-select: none;
+  font-weight: 700;
+}
+.diff-text {
+  flex: 1;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.diff-empty {
+  padding: 0.5rem;
+  color: var(--color-text-muted);
+  font-style: italic;
+  font-size: 0.82rem;
 }
 .assist-actions {
   display: flex;
   gap: 0.5rem;
-  margin-top: 0.75rem;
 }
 .btn-accept {
   padding: 0.4rem 1rem;
@@ -801,14 +1013,21 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
 
 /* ── Mobile ── */
 @media (max-width: 768px) {
-  .assist-panel {
-    flex-basis: 45%;
-  }
-  .assist-controls {
+  .editor-body {
     flex-direction: column;
   }
-  .assist-sections {
-    flex: none;
+  .assist-panel {
+    width: auto;
+    flex: 0 0 45%;
+    border-left: none;
+    border-top: 1px solid var(--color-border);
+    border-radius: var(--radius-md) var(--radius-md) 0 0;
+  }
+  .editor-header {
+    padding: 0.75rem 1rem 0.5rem;
+  }
+  .editor-main {
+    padding: 0.5rem 1rem 1rem;
   }
 }
 </style>
diff --git a/frontend/src/views/TaskViewerView.vue b/frontend/src/views/TaskViewerView.vue
index e007ff1..418688e 100644
--- a/frontend/src/views/TaskViewerView.vue
+++ b/frontend/src/views/TaskViewerView.vue
@@ -201,14 +201,14 @@ function onTagClick(tag: string) {
 <style scoped>
 .viewer-layout {
   display: flex;
-  max-width: 1200px;
+  max-width: 1400px;
   margin: 0 auto;
   gap: 2rem;
 }
 .viewer {
   flex: 1;
   min-width: 0;
-  max-width: 960px;
+  max-width: 1100px;
   margin: 2rem 0;
   padding: 0 1rem;
 }
diff --git a/frontend/src/views/TasksListView.vue b/frontend/src/views/TasksListView.vue
index 0459c62..71268bb 100644
--- a/frontend/src/views/TasksListView.vue
+++ b/frontend/src/views/TasksListView.vue
@@ -170,7 +170,7 @@ function onOffsetUpdate(offset: number) {
 
 <style scoped>
 .tasks-list {
-  max-width: 960px;
+  max-width: 1200px;
   margin: 2rem auto;
   padding: 0 1rem;
 }
diff --git a/frontend/src/views/UserManagementView.vue b/frontend/src/views/UserManagementView.vue
index 47d62c8..debb543 100644
--- a/frontend/src/views/UserManagementView.vue
+++ b/frontend/src/views/UserManagementView.vue
@@ -289,7 +289,7 @@ function formatDate(iso: string): string {
 
 <style scoped>
 .users-page {
-  max-width: 960px;
+  max-width: 1200px;
   margin: 2rem auto;
   padding: 0 1rem;
 }
diff --git a/summary.md b/summary.md
index 6466467..202feb2 100644
--- a/summary.md
+++ b/summary.md
@@ -12,7 +12,7 @@
 >    Include file-level details in the commit body when the change is non-trivial.
 
 ## Last Updated
-2026-02-19 — Phase 12: persistent context sidebar, note title in chat, expanded tool suite
+2026-02-19 — Phase 13: Writing assistant UI redesign (right-side panel, diff view, proofread, floating inline assist, fallback section detection, increased site-wide max-width)
 
 ## Project Overview
 Fabled Assistant is a self-hosted note-taking and task-tracking application with
@@ -285,14 +285,14 @@ fabledassistant/
     │   ├── App.vue              # Shell: .app-shell (100dvh flex column) with AppHeader + .app-content (flex:1, scrollable) wrapping router-view; starts status polling + loads settings on mount
     │   ├── main.ts              # App init, imports theme.css
     │   ├── assets/
-    │   │   └── theme.css        # CSS custom properties: light/dark themes, body reset, design tokens, responsive breakpoints (480/768/1024), utility classes (.hide-mobile/.hide-desktop), mobile touch targets
+    │   │   └── theme.css        # CSS custom properties: light/dark themes, body reset, design tokens, responsive breakpoints (480/768/1024), utility classes (.hide-mobile/.hide-desktop), mobile touch targets; global .inline-assist-btn (teleported floating pill)
     │   ├── api/
     │   │   └── client.ts        # ApiError class, apiGet/apiPost/apiPut/apiPatch/apiDelete + apiSSEStream (fetch+ReadableStream), apiStreamPost (legacy), auto 401→login redirect
     │   ├── composables/
     │   │   ├── useTheme.ts      # Theme toggle, localStorage, prefers-color-scheme
     │   │   ├── useShortcuts.ts  # Shared showShortcuts ref + open/close/toggle helpers (used by App.vue + AppHeader.vue)
     │   │   ├── useAutocomplete.ts # Legacy textarea autocomplete (replaced by Tiptap suggestion extensions)
-    │   │   └── useAssist.ts     # AI Assist composable: section parsing, target selection, two-step POST+SSE streaming (apiPost → apiSSEStream), accept/reject; watches body ref for auto-sync
+    │   │   └── useAssist.ts     # AI Assist composable: section parsing, target selection, two-step POST+SSE streaming (apiPost → apiSSEStream), accept/reject, proofread (full-document), LCS line diff (DiffLine/computeDiff), isProofreading ref; watches body ref for auto-sync
     │   ├── stores/
     │   │   ├── auth.ts          # Auth state: user, isAuthenticated, isAdmin, login/register/logout/checkAuth
     │   │   ├── notes.ts         # CRUD + tag filter, resolveTitle, convertToTask, convertToNote, fetchBacklinks, fetchAllTags (with toast errors)
@@ -315,7 +315,8 @@ fabledassistant/
     │   ├── utils/
     │   │   ├── tags.ts          # extractTags(), linkifyTags() (with (?<!&) to skip HTML entities), linkifyWikilinks()
     │   │   ├── markdown.ts      # renderMarkdown() (full) + renderPreview() (strips links/images) — decodes HTML entities before marked, replaces &#39; after sanitization
-    │   │   └── markdownSerializer.ts # Tiptap JSON → markdown serializer: handles all StarterKit nodes + marks
+    │   │   ├── markdownSerializer.ts # Tiptap JSON → markdown serializer: handles all StarterKit nodes + marks
+    │   │   └── sectionParser.ts # parseMarkdownSections() (heading-based) + parseFallbackSections() (paragraph/Q&A-style — single-line ≤120 char paragraphs become pseudo-headings)
     │   ├── views/
     │   │   ├── LoginView.vue    # Login form with error display, link to register
     │   │   ├── RegisterView.vue # Register form with password confirmation; shows "closed" message when registration disabled
@@ -325,10 +326,10 @@ fabledassistant/
     │   │   ├── HomeView.vue     # Actionable dashboard: overdue, due today, due this week, high priority, in progress tasks; recent chats with inline chat input; recently edited notes; model warming on mount
     │   │   ├── SettingsView.vue # Settings page: assistant name, model catalog, data export/restore (admin)
     │   │   ├── NotesListView.vue # Note list: search, sort, tag filter pills, pagination
-    │   │   ├── NoteEditorView.vue # Create/edit: Tiptap editor, sticky toolbar, AI Assist panel (bottom 1/3), LLM tag suggestions, Ctrl+S, unsaved guard
+    │   │   ├── NoteEditorView.vue # Create/edit: Tiptap editor, sticky toolbar, AI Assist panel (right-side 320px, collapsible), line-level diff view, Proofread action, floating inline ✨ pill on text selection, LLM tag suggestions, Ctrl+S, unsaved guard
     │   │   ├── NoteViewerView.vue # Markdown render, wikilink auto-create, convert-to-task, backlinks, table of contents sidebar
     │   │   ├── TasksListView.vue # Task list: search, status/priority filters, sort, pagination
-    │   │   ├── TaskEditorView.vue # Create/edit task: Tiptap editor, sticky toolbar, AI Assist panel, LLM tag suggestions, Ctrl+S, dirty guard
+    │   │   ├── TaskEditorView.vue # Create/edit task: Tiptap editor, sticky toolbar, AI Assist panel (right-side 320px, collapsible), line-level diff view, Proofread action, floating inline ✨ pill on text selection, LLM tag suggestions, Ctrl+S, dirty guard
     │   │   └── TaskViewerView.vue # Task detail: rendered markdown, badges, convert-to-note, backlinks, table of contents sidebar
     │   ├── components/
     │   │   ├── LogsView.vue     # Admin log viewer: stats summary, category/search/date filters, paginated table with expandable detail rows
@@ -512,7 +513,7 @@ When adding a new migration, follow these conventions:
 - Task attributes: status (todo/in_progress/done), priority (none/low/medium/high), due_date
 - Obsidian-style `[[wikilinks]]` with auto-create on click, backlinks ("what links here")
 - Tiptap WYSIWYG editor with markdown round-trip, tag/wikilink autocomplete and decorations, sticky toolbar
-- AI Assist panel in editor: background LLM generation via SSE with section targeting, accept/reject
+- AI Assist panel (right-side 320px, toggle persisted to localStorage): section targeting, floating ✨ pill on text selection, full-document Proofread action, line-level diff view in review state (LCS algorithm), "Show full text" toggle, accept/reject; panel collapses to bottom 45% on mobile (≤768px)
 - Table of contents sidebar on note/task viewers (auto-generated from headings, hidden ≤1200px)
 - Inline edit buttons on NoteCard/TaskCard (hover on desktop, always visible on touch)
 - Search (ILIKE), sort, tag filter pills, pagination on list views
@@ -660,6 +661,7 @@ When adding a new migration, follow these conventions:
 - App shell: navbar always visible, 100dvh flex layout, all views fit within viewport
 - Toast notifications (success/error/warning, 4s auto-dismiss)
 - DOMPurify sanitization on all rendered markdown
+- **Site-wide max-width:** List/chat/settings views 1200px; editor pages 1400px; note/task viewer layout 1400px (content area 1100px)
 
 ### Infrastructure
 - Multi-stage Dockerfile: Node build → Python runtime, auto-migration on startup
@@ -684,3 +686,7 @@ When adding a new migration, follow these conventions:
 - Application-level rate limiting on auth endpoints
 - Security headers middleware (CSP, X-Frame-Options, etc.) — currently handled at reverse proxy level
 - Session invalidation on user deletion
+- **Note relation map (Obsidian-style graph):** Interactive force-directed graph visualizing connections between
+  notes via wikilinks (`[[Title]]`) and shared tags. Nodes = notes/tasks; edges = wikilink references or
+  tag co-occurrence. Clicking a node navigates to that note. Filter by tag or depth. Useful for discovering
+  clusters of related notes and orphaned notes with no connections.