From 6d593a0ef64ebd2708fa84a71e06475547ba4ce2 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Wed, 11 Mar 2026 16:56:30 -0400
Subject: [PATCH] Move history to sidebar, simplify task assist, add content
 deduplication
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- VersionHistorySection.vue: new sidebar component — collapsible timestamp list,
  click any snapshot to see inline diff + Restore/Back; replaces the modal
- NoteEditorView: remove History toolbar button + HistoryPanel modal, add
  VersionHistorySection at bottom of sidebar
- TaskEditorView: remove floating overlay assist panel + toggle button; add
  Writing Assistant section in sidebar matching note editor (scope selector,
  instruction textarea, generate/proofread/accept/reject); main area now shows
  streaming preview and DiffView like note editor; add VersionHistorySection
- note_versions.py: add content deduplication before time-gap check — identical
  body + title + tags skips snapshot regardless of interval (git semantics)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/components/VersionHistorySection.vue  | 258 ++++++++++++++++++
 frontend/src/views/NoteEditorView.vue         |  36 +--
 frontend/src/views/TaskEditorView.vue         | 258 ++++++++++--------
 src/fabledassistant/services/note_versions.py |  18 +-
 4 files changed, 420 insertions(+), 150 deletions(-)
 create mode 100644 frontend/src/components/VersionHistorySection.vue

diff --git a/frontend/src/components/VersionHistorySection.vue b/frontend/src/components/VersionHistorySection.vue
new file mode 100644
index 0000000..59c6926
--- /dev/null
+++ b/frontend/src/components/VersionHistorySection.vue
@@ -0,0 +1,258 @@
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { apiGet } from "@/api/client";
+import DiffView from "@/components/DiffView.vue";
+import type { DiffLine } from "@/composables/useAssist";
+
+interface NoteVersion {
+  id: number;
+  note_id: number;
+  title: string;
+  tags: string[];
+  body?: string;
+  created_at: string;
+}
+
+const props = defineProps<{
+  noteId: number;
+  currentBody: string;
+}>();
+
+const emit = defineEmits<{
+  (e: "restore", body: string, tags: string[]): void;
+}>();
+
+const expanded = ref(false);
+const view = ref<"list" | "diff">("list");
+const versions = ref<NoteVersion[]>([]);
+const selectedVersion = ref<NoteVersion | null>(null);
+const loading = ref(false);
+const loadingDetail = ref(false);
+
+const diff = computed<DiffLine[]>(() => {
+  if (!selectedVersion.value?.body) return [];
+  const aLines = props.currentBody.split("\n");
+  const bLines = selectedVersion.value.body.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;
+});
+
+function formatDate(iso: string): string {
+  const d = new Date(iso);
+  const now = new Date();
+  const isToday = d.toDateString() === now.toDateString();
+  if (isToday) {
+    return d.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" });
+  }
+  return d.toLocaleString(undefined, {
+    month: "short", day: "numeric",
+    hour: "2-digit", minute: "2-digit",
+  });
+}
+
+async function toggle() {
+  expanded.value = !expanded.value;
+  if (expanded.value && versions.value.length === 0) {
+    await loadVersions();
+  }
+}
+
+async function loadVersions() {
+  loading.value = true;
+  try {
+    const data = await apiGet<{ versions: NoteVersion[] }>(
+      `/api/notes/${props.noteId}/versions`
+    );
+    versions.value = data.versions;
+  } catch {
+    // silent
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function selectVersion(v: NoteVersion) {
+  if (v.body === undefined) {
+    loadingDetail.value = true;
+    try {
+      const full = await apiGet<NoteVersion>(
+        `/api/notes/${props.noteId}/versions/${v.id}`
+      );
+      const listItem = versions.value.find((x) => x.id === v.id);
+      if (listItem) listItem.body = full.body;
+      selectedVersion.value = full;
+    } catch {
+      // silent
+    } finally {
+      loadingDetail.value = false;
+    }
+  } else {
+    selectedVersion.value = v;
+  }
+  view.value = "diff";
+}
+
+function back() {
+  view.value = "list";
+  selectedVersion.value = null;
+}
+
+function restore() {
+  if (!selectedVersion.value?.body) return;
+  emit("restore", selectedVersion.value.body, selectedVersion.value.tags ?? []);
+  back();
+}
+</script>
+
+<template>
+  <div class="vh-section">
+    <button class="vh-header" @click="toggle">
+      <span class="vh-title">Version History</span>
+      <span class="vh-chevron">{{ expanded ? "▴" : "▾" }}</span>
+    </button>
+
+    <div v-if="expanded" class="vh-body">
+
+      <!-- List view -->
+      <template v-if="view === 'list'">
+        <div v-if="loading" class="vh-empty">Loading...</div>
+        <div v-else-if="!versions.length" class="vh-empty">No snapshots yet.</div>
+        <div
+          v-for="v in versions"
+          :key="v.id"
+          class="vh-item"
+          @click="selectVersion(v)"
+        >
+          {{ formatDate(v.created_at) }}
+        </div>
+      </template>
+
+      <!-- Diff view -->
+      <template v-else>
+        <div class="vh-diff-actions">
+          <button class="vh-btn-back" @click="back">← Back</button>
+          <button
+            class="vh-btn-restore"
+            :disabled="!selectedVersion?.body"
+            @click="restore"
+          >Restore</button>
+        </div>
+        <div class="vh-diff-wrap">
+          <div v-if="loadingDetail" class="vh-empty">Loading...</div>
+          <DiffView v-else :diff="diff" />
+        </div>
+      </template>
+
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.vh-section {
+  border-top: 1px solid var(--color-border);
+}
+
+.vh-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0.55rem 0.75rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  text-align: left;
+}
+.vh-header:hover { background: var(--color-bg-secondary); }
+
+.vh-title {
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.vh-chevron {
+  font-size: 0.7rem;
+  color: var(--color-text-muted);
+}
+
+.vh-body {
+  padding: 0 0 0.5rem;
+}
+
+.vh-empty {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8rem;
+  color: var(--color-text-muted);
+  font-style: italic;
+}
+
+.vh-item {
+  padding: 0.35rem 0.75rem;
+  font-size: 0.8rem;
+  color: var(--color-text);
+  cursor: pointer;
+  font-family: monospace;
+  border-left: 2px solid transparent;
+}
+.vh-item:hover {
+  background: var(--color-bg-secondary);
+  border-left-color: var(--color-primary);
+}
+
+.vh-diff-actions {
+  display: flex;
+  gap: 0.4rem;
+  padding: 0.4rem 0.75rem 0.35rem;
+}
+
+.vh-btn-back {
+  background: none;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  padding: 0.25rem 0.6rem;
+  font-size: 0.78rem;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  font-family: inherit;
+}
+.vh-btn-back:hover { border-color: var(--color-primary); color: var(--color-primary); }
+
+.vh-btn-restore {
+  background: var(--color-primary);
+  border: none;
+  border-radius: var(--radius-sm);
+  padding: 0.25rem 0.6rem;
+  font-size: 0.78rem;
+  color: #fff;
+  cursor: pointer;
+  font-family: inherit;
+}
+.vh-btn-restore:disabled { opacity: 0.5; cursor: default; }
+
+.vh-diff-wrap {
+  padding: 0 0.5rem 0.25rem;
+  max-height: 420px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+</style>
diff --git a/frontend/src/views/NoteEditorView.vue b/frontend/src/views/NoteEditorView.vue
index e664048..3490cf8 100644
--- a/frontend/src/views/NoteEditorView.vue
+++ b/frontend/src/views/NoteEditorView.vue
@@ -18,7 +18,7 @@ import TagInput from "@/components/TagInput.vue";
 import ProjectSelector from "@/components/ProjectSelector.vue";
 import MilestoneSelector from "@/components/MilestoneSelector.vue";
 import DiffView from "@/components/DiffView.vue";
-import HistoryPanel from "@/components/HistoryPanel.vue";
+import VersionHistorySection from "@/components/VersionHistorySection.vue";
 import ConfirmDialog from "@/components/ConfirmDialog.vue";
 
 const route = useRoute();
@@ -35,7 +35,6 @@ const dirty = ref(false);
 const saving = ref(false);
 const showPreview = ref(false);
 const sidebarOpen = ref(true);
-const showHistory = ref(false);
 const editorRef = ref<InstanceType<typeof TiptapEditor> | null>(null);
 const titleRef = ref<HTMLInputElement | null>(null);
 const tiptapEditor = computed<Editor | null>(() => {
@@ -326,7 +325,6 @@ onUnmounted(() => assist.clearSelection());
           {{ saving ? "Saving..." : "Save" }}
         </button>
         <button v-if="isEditing" class="btn-delete" @click="remove">Delete</button>
-        <button v-if="isEditing" class="btn-history" @click="showHistory = true">History</button>
         <WordCount :body="body" />
       </div>
       <input
@@ -513,6 +511,13 @@ onUnmounted(() => assist.clearSelection());
             </template>
           </div>
 
+          <VersionHistorySection
+            v-if="noteId"
+            :note-id="noteId"
+            :current-body="body"
+            @restore="(b, t) => { body = b; tags = t; markDirty(); }"
+          />
+
         </div><!-- /sidebar-content -->
       </aside>
     </div><!-- /note-body -->
@@ -527,15 +532,6 @@ onUnmounted(() => assist.clearSelection());
       >✨ Assist</button>
     </teleport>
 
-    <!-- History panel -->
-    <HistoryPanel
-      v-if="showHistory && noteId"
-      :note-id="noteId"
-      :current-body="body"
-      @restore="(b: string, t: string[]) => { body = b; tags = t; markDirty(); }"
-      @close="showHistory = false"
-    />
-
     <!-- Delete confirmation -->
     <ConfirmDialog
       v-if="showDeleteConfirm"
@@ -738,22 +734,6 @@ onUnmounted(() => assist.clearSelection());
   letter-spacing: 0.05em;
 }
 
-/* History button */
-.btn-history {
-  padding: 0.45rem 1rem;
-  background: none;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-  font-family: inherit;
-}
-.btn-history:hover {
-  border-color: var(--color-primary);
-  color: var(--color-primary);
-}
-
 /* Narrow screen: sidebar collapses */
 @media (max-width: 720px) {
   .note-body { flex-direction: column; overflow-y: auto; overflow-x: hidden; }
diff --git a/frontend/src/views/TaskEditorView.vue b/frontend/src/views/TaskEditorView.vue
index a9d0f34..871e291 100644
--- a/frontend/src/views/TaskEditorView.vue
+++ b/frontend/src/views/TaskEditorView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, computed, nextTick } from "vue";
+import { ref, onMounted, computed, nextTick, onUnmounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useTasksStore } from "@/stores/tasks";
 import { useNotesStore } from "@/stores/notes";
@@ -20,9 +20,9 @@ import TagInput from "@/components/TagInput.vue";
 import ProjectSelector from "@/components/ProjectSelector.vue";
 import MilestoneSelector from "@/components/MilestoneSelector.vue";
 import TaskLogSection from "@/components/TaskLogSection.vue";
-import InlineAssistPanel from "@/components/InlineAssistPanel.vue";
+import DiffView from "@/components/DiffView.vue";
 import ConfirmDialog from "@/components/ConfirmDialog.vue";
-import HistoryPanel from "@/components/HistoryPanel.vue";
+import VersionHistorySection from "@/components/VersionHistorySection.vue";
 
 const route = useRoute();
 const router = useRouter();
@@ -117,46 +117,62 @@ const renderedPreview = computed(() => renderMarkdown(body.value));
 // AI Assist
 const assist = useAssist(body, taskId, projectId);
 
-const assistLabel = computed(() => {
-  if (assist.isProofreading.value) return "Proofreading document...";
-  const t = assist.target.value;
-  if (!t) return "Generating...";
-  const heading = t.text.split("\n")[0];
-  return `Revising: "${heading.length > 50 ? heading.slice(0, 50) + "..." : heading}"`;
+// Scope selector — matches note editor pattern
+const scopeOptions = computed(() => {
+  const opts: Array<{ value: string; label: string }> = [
+    { value: "__document__", label: "Whole document" },
+  ];
+  for (const section of assist.sections.value) {
+    opts.push({
+      value: String(assist.sections.value.indexOf(section)),
+      label: section.heading || "(preamble)",
+    });
+  }
+  return opts;
 });
 
-// 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));
-}
+const scopeSelectValue = computed({
+  get() {
+    if (assist.scopeMode.value === "document") return "__document__";
+    if (assist.selectedSection.value) {
+      const idx = assist.sections.value.indexOf(assist.selectedSection.value);
+      return idx >= 0 ? String(idx) : "__document__";
+    }
+    return "__document__";
+  },
+  set(val: string) {
+    if (val === "__document__") {
+      assist.scopeMode.value = "document";
+      assist.selectedSection.value = null;
+    } else {
+      const idx = Number(val);
+      const section = assist.sections.value[idx];
+      if (section) {
+        assist.scopeMode.value = "section";
+        assist.selectSection(section);
+      }
+    }
+  },
+});
 
 // Floating inline assist button
 const instructionRef = ref<HTMLTextAreaElement | null>(null);
 const { floatingAssist, onSelectionChange, handleInlineAssist } = useFloatingAssist(
   ({ start, end }) => {
+    assist.scopeMode.value = "section";
     assist.selectTextRange(start, end);
-    assistOpen.value = true;
-    localStorage.setItem(ASSIST_KEY, 'true');
     nextTick(() => instructionRef.value?.focus());
   }
 );
 
 function handleAssistAccept() {
   const newBody = assist.accept();
-  if (newBody !== body.value) {
-    body.value = newBody;
-    markDirty();
-    toast.show("Section updated");
-  }
+  body.value = newBody;
+  markDirty();
+  toast.show("Task updated");
 }
 
-function truncateTarget(text: string, max = 60): string {
-  const first = text.split("\n")[0];
-  return first.length > max ? first.slice(0, max) + "..." : first;
-}
+onUnmounted(() => assist.clearSelection());
 
 // Tag suggestions
 const { suggestedTags, appliedTags, suggestingTags, fetchTagSuggestions, applyTagSuggestion, dismissTagSuggestions } =
@@ -322,7 +338,6 @@ async function save() {
 }
 
 const showDeleteConfirm = ref(false);
-const showHistory = ref(false);
 
 function remove() {
   if (taskId.value) {
@@ -388,13 +403,7 @@ useEditorGuards(dirty, save);
         <button class="btn-save" @click="save" :disabled="saving">
           {{ saving ? "Saving..." : "Save" }}
         </button>
-        <button v-if="isEditing" class="btn-history" @click="showHistory = true">History</button>
-        <button v-if="isEditing" class="btn-delete" @click="remove">
-          Delete
-        </button>
-        <button class="btn-assist-toggle" :class="{ active: assistOpen }" @click="toggleAssist">
-          ✨ Assist
-        </button>
+        <button v-if="isEditing" class="btn-delete" @click="remove">Delete</button>
         <WordCount :body="body" />
       </div>
       <input
@@ -422,38 +431,36 @@ useEditorGuards(dirty, save);
             <button :class="['tab', { active: !showPreview }]" @click="showPreview = false">Write</button>
             <button :class="['tab', { active: showPreview }]" @click="showPreview = true">Preview</button>
           </div>
-          <MarkdownToolbar v-show="!showPreview" :editor="tiptapEditor" />
+          <MarkdownToolbar v-show="!showPreview && assist.state.value === 'idle'" :editor="tiptapEditor" />
         </div>
 
-        <!-- Inline assist output -->
-        <InlineAssistPanel
-          v-if="assist.state.value !== 'idle'"
-          :phase="assist.state.value as 'streaming' | 'review'"
-          :label="assistLabel"
-          :streaming-text="assist.streamingText.value"
-          :diff="assist.diff.value"
-          :proposed-text="assist.proposedText.value"
-          @accept="handleAssistAccept"
-          @reject="assist.reject()"
-          @cancel="assist.clearSelection()"
-        />
+        <!-- Streaming preview -->
+        <template v-if="assist.state.value === 'streaming'">
+          <div class="stream-label">Generating...</div>
+          <div class="stream-preview prose" v-html="renderMarkdown(assist.streamingText.value)" />
+        </template>
 
-        <!-- Editor / preview (hidden during review) -->
-        <div v-show="!showPreview && assist.state.value !== 'review'" class="body-editor-wrap">
-          <TiptapEditor
-            ref="editorRef"
-            :modelValue="body"
-            placeholder="Describe this task..."
-            @update:modelValue="onBodyUpdate"
-            @selectionChange="onSelectionChange"
-            @escape="titleRef?.focus()"
-          />
-        </div>
-        <div
-          v-show="showPreview && assist.state.value !== 'review'"
-          class="preview-pane prose"
-          v-html="renderedPreview"
-        ></div>
+        <!-- Review: full-document diff -->
+        <template v-else-if="assist.state.value === 'review'">
+          <DiffView :diff="assist.diff.value" class="main-diff" />
+        </template>
+
+        <!-- Normal: editor or preview -->
+        <template v-else>
+          <div v-show="!showPreview" class="body-editor-wrap">
+            <TiptapEditor
+              ref="editorRef"
+              :modelValue="body"
+              placeholder="Describe this task..."
+              @update:modelValue="onBodyUpdate"
+              @selectionChange="onSelectionChange"
+              @escape="titleRef?.focus()"
+            />
+          </div>
+          <div v-show="showPreview" class="preview-pane prose" v-html="renderedPreview" />
+        </template>
+
+        <div v-if="assist.error.value" class="assist-error">{{ assist.error.value }}</div>
 
         <!-- Work log -->
         <TaskLogSection v-if="taskId" :task-id="taskId" class="body-log" />
@@ -591,51 +598,57 @@ useEditorGuards(dirty, save);
             </template>
           </div>
 
-        </div><!-- /sidebar-content -->
-      </aside><!-- /task-sidebar -->
+          <div class="sb-divider"></div>
 
-      <!-- ✨ Assist panel overlays on top of sidebar when open -->
-      <aside v-if="assistOpen" class="assist-panel">
-        <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" aria-label="Close assist panel" @click="toggleAssist">×</button>
-        </div>
-        <div class="assist-panel-body">
-          <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>
+          <!-- Writing Assistant -->
+          <div class="assist-section">
+            <div class="assist-section-title">✨ Writing Assistant</div>
+
+            <div class="sb-field">
+              <label class="sb-label">Scope</label>
+              <select v-model="scopeSelectValue" class="sb-select" :disabled="assist.state.value === 'streaming'">
+                <option v-for="opt in scopeOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
+              </select>
             </div>
-            <template v-if="assist.target.value">
-              <div class="assist-target-preview">Editing: <em>{{ truncateTarget(assist.target.value.text) }}</em></div>
+
+            <template v-if="assist.state.value === 'idle'">
               <textarea
                 ref="instructionRef"
                 v-model="assist.instruction.value"
-                placeholder="What should I do with this section?"
+                placeholder="What should I do?"
                 class="assist-instruction"
                 rows="3"
                 @keydown.enter.exact.prevent="assist.canSubmit.value && assist.submit()"
               ></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>
+                <button class="btn-proofread" @click="assist.proofread()">Proofread</button>
+              </div>
+            </template>
+
+            <template v-else-if="assist.state.value === 'streaming'">
+              <div class="assist-active-hint">Generating… see main area</div>
+              <button class="btn-clear" @click="assist.clearSelection()">Cancel</button>
+            </template>
+
+            <template v-else-if="assist.state.value === 'review'">
+              <div class="assist-active-hint">Review the diff in the main area</div>
+              <div class="assist-actions">
+                <button class="btn-accept" @click="handleAssistAccept">Accept</button>
+                <button class="btn-reject" @click="assist.reject()">Reject</button>
               </div>
             </template>
-            <div v-else class="assist-hint">Select a section above or highlight text in the editor.</div>
           </div>
-          <div v-if="assist.error.value" class="assist-error">{{ assist.error.value }}</div>
-          <div v-if="assist.state.value !== 'idle'" class="assist-active-hint">
-            {{ assist.state.value === 'streaming' ? 'Generating in editor…' : 'Review diff in editor ↑' }}
-          </div>
-        </div>
-      </aside>
+
+          <VersionHistorySection
+            v-if="taskId"
+            :note-id="taskId"
+            :current-body="body"
+            @restore="(b, t) => { body = b; tags = t; markDirty(); }"
+          />
+
+        </div><!-- /sidebar-content -->
+      </aside><!-- /task-sidebar -->
 
     </div><!-- /task-body -->
 
@@ -657,15 +670,6 @@ useEditorGuards(dirty, save);
       @confirm="confirmDelete"
       @cancel="showDeleteConfirm = false"
     />
-
-    <!-- History panel -->
-    <HistoryPanel
-      v-if="showHistory && taskId"
-      :note-id="taskId"
-      :current-body="body"
-      @restore="(b: string, t: string[]) => { body = b; tags = t; markDirty(); }"
-      @close="showHistory = false"
-    />
   </main>
 </template>
 
@@ -855,20 +859,40 @@ useEditorGuards(dirty, save);
   font-family: inherit;
 }
 
-/* History button */
-.btn-history {
-  padding: 0.45rem 1rem;
-  background: none;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-  font-family: inherit;
+/* Streaming preview */
+.stream-label {
+  font-size: 0.8rem;
+  color: var(--color-text-muted);
+  font-style: italic;
 }
-.btn-history:hover {
-  border-color: var(--color-primary);
-  color: var(--color-primary);
+.stream-preview {
+  border: 1px solid var(--color-input-border);
+  border-radius: var(--radius-sm);
+  padding: 0.75rem;
+  background: var(--color-bg-card);
+  min-height: 200px;
+}
+.main-diff {
+  flex: 1;
+  min-height: 0;
+}
+
+/* Writing Assistant section (in sidebar) */
+.assist-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.assist-section-title {
+  font-size: 0.78rem;
+  font-weight: 700;
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.assist-actions {
+  display: flex;
+  gap: 0.4rem;
 }
 
 /* Tag suggest row inside sidebar */
diff --git a/src/fabledassistant/services/note_versions.py b/src/fabledassistant/services/note_versions.py
index 3af363a..425c4dc 100644
--- a/src/fabledassistant/services/note_versions.py
+++ b/src/fabledassistant/services/note_versions.py
@@ -18,16 +18,24 @@ async def create_version(
     user_id: int, note_id: int, body: str, title: str, tags: list[str] | None = None
 ) -> NoteVersion | None:
     async with async_session() as session:
-        # Skip if a recent snapshot already exists within the minimum interval.
+        # Fetch the most recent snapshot once for both checks.
         recent = await session.execute(
-            select(NoteVersion.created_at)
+            select(NoteVersion)
             .where(NoteVersion.note_id == note_id, NoteVersion.user_id == user_id)
             .order_by(NoteVersion.created_at.desc())
             .limit(1)
         )
-        last_at = recent.scalar_one_or_none()
-        if last_at is not None:
-            # created_at is stored with timezone; ensure comparison is tz-aware
+        last = recent.scalars().first()
+        if last is not None:
+            # Skip if content is identical — no change, no snapshot (git semantics).
+            if (
+                last.body == body
+                and last.title == title
+                and sorted(last.tags or []) == sorted(tags or [])
+            ):
+                return None
+            # Skip if within the minimum interval to prevent rapid-fire autosave snapshots.
+            last_at = last.created_at
             if last_at.tzinfo is None:
                 last_at = last_at.replace(tzinfo=timezone.utc)
             age = (datetime.now(timezone.utc) - last_at).total_seconds()