diff --git a/frontend/src/components/HistoryPanel.vue b/frontend/src/components/HistoryPanel.vue
deleted file mode 100644
index 56491bc2..00000000
--- a/frontend/src/components/HistoryPanel.vue
+++ /dev/null
@@ -1,466 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, onMounted } from "vue";
-import { apiGet, pinNoteVersion, unpinNoteVersion } from "@/api/client";
-import DiffView from "@/components/DiffView.vue";
-import { computeDiff, type DiffLine } from "@/utils/diff";
-import { fmtStamp } from "@/utils/dateFormat";
-
-interface NoteVersion {
-  id: number;
-  note_id: number;
-  title: string;
-  tags: string[];
-  body?: string;
-  pin_kind: "auto" | "manual" | null;
-  pin_label: string | null;
-  created_at: string;
-}
-
-const props = defineProps<{
-  noteId: number;
-  currentBody: string;
-}>();
-
-const emit = defineEmits<{
-  (e: 'restore', body: string, tags: string[]): void;
-  (e: 'close'): void;
-}>();
-
-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 [];
-
-  return computeDiff(props.currentBody, selectedVersion.value.body);
-});
-
-async function loadVersions() {
-  loading.value = true;
-  try {
-    const data = await apiGet<{ versions: NoteVersion[] }>(
-      `/api/notes/${props.noteId}/versions`
-    );
-    versions.value = data.versions;
-    if (versions.value.length > 0) {
-      await selectVersionItem(versions.value[0]);
-    }
-  } catch {
-    // silent
-  } finally {
-    loading.value = false;
-  }
-}
-
-async function selectVersionItem(v: NoteVersion) {
-  if (v.body !== undefined) {
-    selectedVersion.value = v;
-    return;
-  }
-  loadingDetail.value = true;
-  try {
-    const full = await apiGet<NoteVersion>(
-      `/api/notes/${props.noteId}/versions/${v.id}`
-    );
-    // Cache body back onto list item
-    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;
-  }
-}
-
-function restore() {
-  if (!selectedVersion.value?.body) return;
-  emit('restore', selectedVersion.value.body, selectedVersion.value.tags ?? []);
-}
-
-// ── Pin / unpin / edit-label state ──────────────────────────────────────────
-
-const editingLabel = ref(false);
-const draftLabel = ref("");
-const pinSaving = ref(false);
-
-function startEditLabel() {
-  if (!selectedVersion.value) return;
-  draftLabel.value = selectedVersion.value.pin_label ?? "";
-  editingLabel.value = true;
-}
-
-function cancelEditLabel() {
-  editingLabel.value = false;
-  draftLabel.value = "";
-}
-
-async function savePin() {
-  if (!selectedVersion.value || pinSaving.value) return;
-  pinSaving.value = true;
-  try {
-    const updated = await pinNoteVersion(
-      props.noteId, selectedVersion.value.id, draftLabel.value || null,
-    );
-    // Reflect server state in the local list + selected version.
-    const idx = versions.value.findIndex(v => v.id === updated.id);
-    if (idx >= 0) {
-      versions.value[idx].pin_kind = updated.pin_kind;
-      versions.value[idx].pin_label = updated.pin_label;
-    }
-    if (selectedVersion.value) {
-      selectedVersion.value.pin_kind = updated.pin_kind;
-      selectedVersion.value.pin_label = updated.pin_label;
-    }
-    editingLabel.value = false;
-  } catch {
-    // silent — leaving the form open lets the user retry
-  } finally {
-    pinSaving.value = false;
-  }
-}
-
-async function unpinSelected() {
-  if (!selectedVersion.value || pinSaving.value) return;
-  pinSaving.value = true;
-  try {
-    await unpinNoteVersion(props.noteId, selectedVersion.value.id);
-    const idx = versions.value.findIndex(v => v.id === selectedVersion.value!.id);
-    if (idx >= 0) {
-      versions.value[idx].pin_kind = null;
-      versions.value[idx].pin_label = null;
-    }
-    if (selectedVersion.value) {
-      selectedVersion.value.pin_kind = null;
-      selectedVersion.value.pin_label = null;
-    }
-  } catch {
-    // silent
-  } finally {
-    pinSaving.value = false;
-  }
-}
-
-onMounted(loadVersions);
-</script>
-
-<template>
-  <teleport to="body">
-    <div class="modal-overlay" @click.self="emit('close')">
-      <div class="modal-card history-modal">
-        <div class="history-header">
-          <h3 class="history-title">Version History</h3>
-          <button class="history-close" aria-label="Close version history" @click="emit('close')">&times;</button>
-        </div>
-
-        <div class="history-body">
-          <!-- Left: version list -->
-          <div class="history-list">
-            <div v-if="loading" class="history-empty">Loading...</div>
-            <div v-else-if="!versions.length" class="history-empty">No versions yet.</div>
-            <div
-              v-for="v in versions"
-              :key="v.id"
-              :class="['history-item', { selected: selectedVersion?.id === v.id }]"
-              @click="selectVersionItem(v)"
-            >
-              <div class="history-item-title">
-                <span
-                  v-if="v.pin_kind === 'manual'"
-                  class="pin-badge pin-badge-manual"
-                  :title="v.pin_label || 'Pinned'"
-                  aria-label="manually pinned"
-                >●</span>
-                <span
-                  v-else-if="v.pin_kind === 'auto'"
-                  class="pin-badge pin-badge-auto"
-                  :title="v.pin_label || 'Auto-pinned (stable)'"
-                  aria-label="auto-pinned"
-                >◐</span>
-                {{ v.title || 'Untitled' }}
-              </div>
-              <div
-                v-if="v.pin_kind === 'manual' && v.pin_label"
-                class="history-item-label"
-              >{{ v.pin_label }}</div>
-              <div class="history-item-date">{{ fmtStamp(v.created_at) }}</div>
-            </div>
-          </div>
-
-          <!-- Right: diff -->
-          <div class="history-diff">
-            <div v-if="loadingDetail" class="history-empty">Loading version...</div>
-            <div v-else-if="!selectedVersion" class="history-empty">Select a version to compare.</div>
-            <template v-else>
-              <div class="version-pin-controls">
-                <!-- Label editor -->
-                <div v-if="editingLabel" class="pin-label-form">
-                  <input
-                    v-model="draftLabel"
-                    maxlength="500"
-                    type="text"
-                    class="pin-label-input"
-                    placeholder="Optional label (e.g. 'post-network-refresh runbook')"
-                  />
-                  <button class="btn-pin-save" :disabled="pinSaving" @click="savePin">
-                    {{ pinSaving ? "Saving…" : "Save" }}
-                  </button>
-                  <button class="btn-pin-cancel" @click="cancelEditLabel">Cancel</button>
-                </div>
-
-                <!-- Default: kind-aware action row -->
-                <div v-else class="pin-actions">
-                  <span v-if="selectedVersion.pin_kind === 'manual'" class="pin-state">
-                    <span class="pin-badge pin-badge-manual">●</span>
-                    Manually pinned{{ selectedVersion.pin_label ? `: ${selectedVersion.pin_label}` : '' }}
-                  </span>
-                  <span v-else-if="selectedVersion.pin_kind === 'auto'" class="pin-state">
-                    <span class="pin-badge pin-badge-auto">◐</span>
-                    Auto-pinned{{ selectedVersion.pin_label ? `: ${selectedVersion.pin_label}` : '' }}
-                  </span>
-
-                  <button
-                    v-if="selectedVersion.pin_kind === null"
-                    class="btn-pin"
-                    :disabled="pinSaving"
-                    @click="startEditLabel"
-                  >Pin version</button>
-                  <button
-                    v-else-if="selectedVersion.pin_kind === 'manual'"
-                    class="btn-pin-edit"
-                    :disabled="pinSaving"
-                    @click="startEditLabel"
-                  >Edit label</button>
-                  <button
-                    v-else
-                    class="btn-pin"
-                    :disabled="pinSaving"
-                    @click="startEditLabel"
-                  >Pin permanently</button>
-                  <button
-                    v-if="selectedVersion.pin_kind === 'manual'"
-                    class="btn-unpin"
-                    :disabled="pinSaving"
-                    @click="unpinSelected"
-                  >Unpin</button>
-                </div>
-              </div>
-              <DiffView :diff="diff" />
-            </template>
-          </div>
-        </div>
-
-        <div class="history-footer">
-          <button
-            class="btn-primary"
-            :disabled="!selectedVersion?.body"
-            @click="restore"
-          >Restore this version</button>
-          <button class="modal-btn" @click="emit('close')">Close</button>
-        </div>
-      </div>
-    </div>
-  </teleport>
-</template>
-
-<style scoped>
-.history-modal {
-  max-width: 900px;
-  width: 95%;
-  height: 80vh;
-  max-height: 700px;
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-}
-
-.history-header {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.9rem 1.25rem;
-  border-bottom: 1px solid var(--fs-border-color);
-}
-
-.history-title {
-  margin: 0;
-  font-size: 1rem;
-}
-
-.history-close {
-  background: none;
-  border: none;
-  font-size: 1.25rem;
-  cursor: pointer;
-  color: var(--fs-text-tertiary);
-  line-height: 1;
-  padding: 0.1rem 0.3rem;
-}
-.history-close:hover { color: var(--fs-text-primary); }
-
-.history-body {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  overflow: hidden;
-}
-
-.history-list {
-  width: 220px;
-  flex-shrink: 0;
-  border-right: 1px solid var(--fs-border-color);
-  overflow-y: auto;
-}
-
-.history-item {
-  padding: 0.6rem 0.9rem;
-  cursor: pointer;
-  border-left: 3px solid transparent;
-  border-bottom: 1px solid var(--fs-border-color);
-}
-.history-item:hover { background: var(--fs-surface-raised); }
-.history-item.selected {
-  border-left-color: var(--fs-accent);
-  background: var(--fs-surface-raised);
-}
-
-.history-item-title {
-  font-size: 0.85rem;
-  font-weight: 500;
-  color: var(--fs-text-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.history-item-date {
-  font-size: 0.75rem;
-  color: var(--fs-text-tertiary);
-  margin-top: 0.15rem;
-}
-
-.history-diff {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  padding: 0.5rem;
-}
-
-.history-empty {
-  padding: 1rem;
-  font-size: 0.85rem;
-  color: var(--fs-text-tertiary);
-}
-
-.history-footer {
-  flex-shrink: 0;
-  display: flex;
-  gap: 0.5rem;
-  justify-content: flex-end;
-  padding: 0.75rem 1.25rem;
-  border-top: 1px solid var(--fs-border-color);
-}
-
-
-/* ── Pin badges + label rendering ───────────────────────────────────────── */
-.pin-badge {
-  display: inline-block;
-  width: 0.7rem;
-  text-align: center;
-  margin-right: 0.35rem;
-  font-size: 0.85em;
-  line-height: 1;
-}
-.pin-badge-manual { color: var(--fs-accent); }
-.pin-badge-auto { color: var(--fs-text-tertiary); }
-
-.history-item-label {
-  font-size: 0.72rem;
-  color: var(--fs-accent);
-  font-style: italic;
-  margin-top: 0.15rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* ── Pin controls above the diff ────────────────────────────────────────── */
-.version-pin-controls {
-  padding: 0.4rem 0.5rem 0.5rem;
-  border-bottom: 1px solid var(--fs-border-color);
-  font-size: 0.82rem;
-}
-.pin-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}
-.pin-state {
-  font-style: italic;
-  color: var(--fs-text-tertiary);
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.btn-pin, .btn-pin-edit, .btn-unpin {
-  padding: 0.25rem 0.7rem;
-  font-size: 0.78rem;
-  background: transparent;
-  color: inherit;
-  border: 1px solid var(--fs-border-color);
-  border-radius: 999px;
-  cursor: pointer;
-}
-.btn-pin:hover:not(:disabled), .btn-pin-edit:hover:not(:disabled) {
-  background: rgba(99, 102, 241, 0.12);
-  border-color: var(--fs-accent);
-}
-.btn-unpin:hover:not(:disabled) {
-  background: rgba(239, 68, 68, 0.10);
-  border-color: rgba(239, 68, 68, 0.5);
-}
-.pin-label-form {
-  display: flex;
-  gap: 0.4rem;
-  align-items: center;
-}
-.pin-label-input {
-  flex: 1;
-  padding: 0.3rem 0.5rem;
-  font-size: 0.85rem;
-  background: var(--fs-surface-page);
-  border: 1px solid var(--fs-border-color);
-  border-radius: var(--fs-radius-sm);
-  color: inherit;
-}
-.pin-label-input:focus {
-  outline: none;
-  border-color: var(--fs-accent);
-}
-.btn-pin-save, .btn-pin-cancel {
-  padding: 0.3rem 0.7rem;
-  font-size: 0.78rem;
-  background: transparent;
-  color: inherit;
-  border: 1px solid var(--fs-border-color);
-  border-radius: var(--fs-radius-sm);
-  cursor: pointer;
-}
-.btn-pin-save:hover:not(:disabled) {
-  background: rgba(99, 102, 241, 0.12);
-  border-color: var(--fs-accent);
-}
-.btn-pin-save:disabled, .btn-pin-cancel:disabled,
-.btn-pin:disabled, .btn-pin-edit:disabled, .btn-unpin:disabled {
-  opacity: 0.5;
-  cursor: progress;
-}
-</style>
diff --git a/frontend/src/components/InlineAssistPanel.vue b/frontend/src/components/InlineAssistPanel.vue
deleted file mode 100644
index 60e89a5c..00000000
--- a/frontend/src/components/InlineAssistPanel.vue
+++ /dev/null
@@ -1,258 +0,0 @@
-<script setup lang="ts">
-import { ref, computed } from "vue";
-import { renderMarkdown } from "@/utils/markdown";
-import type { DiffLine } from "@/composables/useAssist";
-
-const props = defineProps<{
-  phase: "streaming" | "review";
-  label: string;
-  streamingText: string;
-  diff: DiffLine[];
-  proposedText: string;
-}>();
-
-const emit = defineEmits<{
-  accept: [];
-  reject: [];
-  cancel: [];
-}>();
-
-const showFullText = ref(false);
-
-const renderedStreaming = computed(() => renderMarkdown(props.streamingText));
-const renderedProposed = computed(() => renderMarkdown(props.proposedText));
-
-const markers: Record<DiffLine["type"], string> = {
-  equal: " ",
-  delete: "−",
-  insert: "+",
-};
-</script>
-
-<template>
-  <!-- ── Streaming ───────────────────────────────────────────────── -->
-  <div v-if="phase === 'streaming'" class="iap iap-streaming">
-    <div class="iap-header">
-      <span class="iap-pulse"></span>
-      <span class="iap-label">{{ label }}</span>
-      <button class="iap-btn-cancel" @click="emit('cancel')">Cancel</button>
-    </div>
-    <div class="iap-stream-preview prose" v-html="renderedStreaming"></div>
-    <div v-if="!streamingText" class="iap-waiting">Waiting for model…</div>
-  </div>
-
-  <!-- ── Review ─────────────────────────────────────────────────── -->
-  <div v-else-if="phase === 'review'" class="iap iap-review">
-    <div class="iap-header">
-      <span class="iap-review-title">Proposed changes</span>
-      <button class="iap-btn-toggle" @click="showFullText = !showFullText">
-        {{ showFullText ? "Show diff" : "Show full text" }}
-      </button>
-      <div class="iap-actions">
-        <button class="iap-btn-accept" @click="emit('accept')">✓ Accept</button>
-        <button class="iap-btn-reject" @click="emit('reject')">✗ Reject</button>
-      </div>
-    </div>
-
-    <!-- Diff view -->
-    <div v-if="!showFullText" class="iap-diff">
-      <div
-        v-for="(line, i) in diff"
-        :key="i"
-        :class="['iap-diff-line', `iap-diff-${line.type}`]"
-      >
-        <span class="iap-diff-marker">{{ markers[line.type] }}</span>
-        <span class="iap-diff-text">{{ line.text }}</span>
-      </div>
-      <div v-if="!diff.length" class="iap-diff-empty">No changes.</div>
-    </div>
-
-    <!-- Full text view -->
-    <div v-else class="iap-full-text prose" v-html="renderedProposed"></div>
-  </div>
-</template>
-
-<style scoped>
-.iap {
-  border-radius: var(--fs-radius-sm);
-  margin-bottom: 0.75rem;
-  overflow: hidden;
-  border: 1px solid var(--fs-border-color);
-  background: var(--fs-surface-page);
-}
-
-/* ── Header ── */
-.iap-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.45rem 0.75rem;
-  font-size: 0.85rem;
-  border-bottom: 1px solid var(--fs-border-color);
-  background: var(--fs-surface-raised);
-}
-
-/* ── Streaming ── */
-.iap-streaming {
-  border-color: var(--fs-accent);
-}
-.iap-streaming .iap-header {
-  background: color-mix(in srgb, var(--fs-accent) 8%, var(--fs-surface-raised));
-}
-
-.iap-pulse {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--fs-accent);
-  flex-shrink: 0;
-  animation: iap-pulse 1.2s ease-in-out infinite;
-}
-@keyframes iap-pulse {
-  0%, 100% { opacity: 1; transform: scale(1); }
-  50%       { opacity: 0.4; transform: scale(0.8); }
-}
-
-.iap-label {
-  flex: 1;
-  font-weight: 500;
-  color: var(--fs-text-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.iap-btn-cancel {
-  background: none;
-  border: 1px solid var(--fs-border-color);
-  color: var(--fs-text-secondary);
-  border-radius: var(--fs-radius-sm);
-  padding: 0.15rem 0.5rem;
-  cursor: pointer;
-  font-size: 0.8rem;
-  font-family: inherit;
-  flex-shrink: 0;
-}
-.iap-btn-cancel:hover {
-  border-color: var(--fs-error);
-  color: var(--fs-error);
-}
-
-.iap-stream-preview {
-  padding: 0.75rem;
-  font-size: 0.9rem;
-  min-height: 2.5rem;
-  max-height: 320px;
-  overflow-y: auto;
-}
-
-.iap-waiting {
-  padding: 0.75rem;
-  font-size: 0.85rem;
-  color: var(--fs-text-tertiary);
-}
-
-/* ── Review ── */
-.iap-review-title {
-  flex: 1;
-  font-weight: 600;
-  color: var(--fs-text-primary);
-}
-
-.iap-btn-toggle {
-  background: none;
-  border: 1px solid var(--fs-border-color);
-  color: var(--fs-text-secondary);
-  border-radius: var(--fs-radius-sm);
-  padding: 0.15rem 0.5rem;
-  cursor: pointer;
-  font-size: 0.78rem;
-  font-family: inherit;
-}
-.iap-btn-toggle:hover {
-  border-color: var(--fs-accent);
-  color: var(--fs-accent);
-}
-
-.iap-actions {
-  display: flex;
-  gap: 0.35rem;
-}
-
-.iap-btn-accept,
-.iap-btn-reject {
-  border: none;
-  border-radius: var(--fs-radius-sm);
-  padding: 0.2rem 0.65rem;
-  cursor: pointer;
-  font-size: 0.8rem;
-  font-family: inherit;
-  font-weight: var(--fs-weight-medium);
-}
-.iap-btn-accept {
-  background: var(--fs-success);
-  color: var(--fs-text-on-action);
-}
-.iap-btn-accept:hover { opacity: 0.85; }
-
-.iap-btn-reject {
-  background: var(--fs-surface-raised);
-  color: var(--fs-text-secondary);
-  border: 1px solid var(--fs-border-color);
-}
-.iap-btn-reject:hover {
-  border-color: var(--fs-error);
-  color: var(--fs-error);
-}
-
-/* ── Diff ── */
-.iap-diff {
-  font-family: ui-monospace, "Cascadia Code", "Fira Mono", monospace;
-  font-size: 0.82rem;
-  line-height: 1.6;
-  max-height: 440px;
-  overflow-y: auto;
-  padding: 0.4rem 0;
-}
-
-.iap-diff-line {
-  display: flex;
-  gap: 0.5rem;
-  padding: 0 0.75rem;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.iap-diff-equal  { color: var(--fs-text-tertiary); }
-.iap-diff-delete {
-  background: color-mix(in srgb, var(--fs-error) 10%, transparent);
-  color: var(--fs-error-fg);
-}
-.iap-diff-insert {
-  background: color-mix(in srgb, var(--fs-success) 10%, transparent);
-  color: var(--fs-success-fg);
-}
-
-.iap-diff-marker {
-  width: 1ch;
-  flex-shrink: 0;
-  font-weight: 700;
-  user-select: none;
-}
-
-.iap-diff-empty {
-  padding: 0.75rem;
-  color: var(--fs-text-tertiary);
-  font-size: 0.85rem;
-  font-family: inherit;
-}
-
-/* ── Full text ── */
-.iap-full-text {
-  padding: 0.75rem;
-  font-size: 0.9rem;
-  max-height: 440px;
-  overflow-y: auto;
-}
-</style>
diff --git a/frontend/src/components/NoteCard.vue b/frontend/src/components/NoteCard.vue
deleted file mode 100644
index 12da8532..00000000
--- a/frontend/src/components/NoteCard.vue
+++ /dev/null
@@ -1,168 +0,0 @@
-<script setup lang="ts">
-import { useRouter } from "vue-router";
-import type { Note } from "@/types/note";
-import TagPill from "@/components/TagPill.vue";
-import { relativeTime } from "@/composables/useRelativeTime";
-import { renderPreview } from "@/utils/markdown";
-
-const props = defineProps<{ note: Note; compact?: boolean }>();
-const emit = defineEmits<{ "tag-click": [tag: string] }>();
-const router = useRouter();
-
-function onTagClick(tag: string) {
-  emit("tag-click", tag);
-}
-
-function goEdit() {
-  router.push(`/notes/${props.note.id}/edit`);
-}
-</script>
-
-<template>
-  <router-link :to="`/notes/${note.id}`" :class="['note-card', { compact }]">
-
-    <!-- Compact: single row -->
-    <template v-if="compact">
-      <span class="note-title-compact">{{ note.title || "Untitled" }}</span>
-      <div class="note-tags-compact">
-        <TagPill
-          v-for="tag in note.tags.slice(0, 3)"
-          :key="tag"
-          :tag="tag"
-          @click.stop="onTagClick(tag)"
-        />
-      </div>
-      <span class="timestamp-compact">{{ relativeTime(note.updated_at) }}</span>
-    </template>
-
-    <!-- Full: original layout -->
-    <template v-else>
-      <div class="note-top">
-        <h3 class="note-title">{{ note.title || "Untitled" }}</h3>
-        <button class="btn-edit" title="Edit" @click.prevent.stop="goEdit">Edit</button>
-      </div>
-      <div v-if="note.body" class="note-preview prose" v-html="renderPreview(note.body)"></div>
-      <div class="note-meta">
-        <TagPill
-          v-for="tag in note.tags"
-          :key="tag"
-          :tag="tag"
-          @click.stop="onTagClick(tag)"
-        />
-        <span class="timestamp">{{ relativeTime(note.updated_at) }}</span>
-      </div>
-    </template>
-
-  </router-link>
-</template>
-
-<style scoped>
-.note-card {
-  display: block;
-  padding: 1rem;
-  border-radius: var(--fs-radius-lg);
-  text-decoration: none;
-  color: inherit;
-  background: var(--fs-surface-raised);
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px color-mix(in srgb, var(--fs-accent) 6%, transparent);
-  transition: box-shadow 0.2s, transform 0.18s ease;
-}
-.note-card:hover {
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 0 0 1px color-mix(in srgb, var(--fs-accent) 14.0%, transparent);
-  transform: translateY(-2px);
-}
-
-/* Compact single-row layout */
-.note-card.compact {
-  display: flex;
-  align-items: center;
-  gap: 0.6rem;
-  padding: 0.45rem 0.75rem;
-  background: var(--fs-surface-raised);
-  box-shadow: none;
-  border-radius: 0;
-  border-bottom: 1px solid var(--fs-border-color);
-  transform: none !important;
-}
-.note-card.compact:first-child {
-  border-top: 1px solid var(--fs-border-color);
-}
-.note-card.compact:hover {
-  box-shadow: none;
-  background: color-mix(in srgb, var(--fs-accent) 4%, transparent);
-  transform: none;
-}
-.note-title-compact {
-  font-size: 0.9rem;
-  font-weight: 500;
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.note-tags-compact {
-  display: flex;
-  gap: 0.3rem;
-  flex-shrink: 0;
-}
-.timestamp-compact {
-  font-size: 0.72rem;
-  color: var(--fs-text-tertiary);
-  flex-shrink: 0;
-  white-space: nowrap;
-}
-
-/* Full layout */
-.note-top {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  margin-bottom: 0.25rem;
-}
-.note-title {
-  margin: 0;
-  font-size: 1.1rem;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.btn-edit {
-  flex-shrink: 0;
-  padding: 0.25rem 0.6rem;
-  font-size: 0.8rem;
-  background: var(--fs-surface-raised);
-  color: var(--fs-text-secondary);
-  border: 1px solid var(--fs-border-color);
-  border-radius: var(--fs-radius-sm);
-  cursor: pointer;
-  transition: color 0.15s, border-color 0.15s;
-}
-.btn-edit:hover {
-  color: var(--fs-accent);
-  border-color: var(--fs-accent);
-}
-.note-preview {
-  margin: 0 0 0.5rem;
-  color: var(--fs-text-secondary);
-  font-size: 0.9rem;
-  max-height: 7.5em;
-  overflow: hidden;
-  position: relative;
-  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
-  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
-}
-.note-meta {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}
-.timestamp {
-  margin-left: auto;
-  font-size: 0.75rem;
-  color: var(--fs-text-tertiary);
-}
-</style>
diff --git a/frontend/src/components/WorkspaceNoteEditor.vue b/frontend/src/components/WorkspaceNoteEditor.vue
deleted file mode 100644
index a3462a45..00000000
--- a/frontend/src/components/WorkspaceNoteEditor.vue
+++ /dev/null
@@ -1,683 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, watch, onMounted, onUnmounted, nextTick } from "vue";
-import type { Editor } from "@tiptap/vue-3";
-import { apiGet, apiPatch, apiPost, apiDelete } from "@/api/client";
-import { useToastStore } from "@/stores/toast";
-import { useAutoSave } from "@/composables/useAutoSave";
-import { useTagSuggestions } from "@/composables/useTagSuggestions";
-import { useNotesStore } from "@/stores/notes";
-import TiptapEditor from "@/components/TiptapEditor.vue";
-import TagInput from "@/components/TagInput.vue";
-import MarkdownToolbar from "@/components/MarkdownToolbar.vue";
-import WordCount from "@/components/WordCount.vue";
-import { Trash2, X } from "lucide-vue-next";
-import { relativeTimeOrDate } from "@/composables/useRelativeTime";
-
-const props = defineProps<{
-  projectId: number;
-  activeNoteId: number | null;
-}>();
-
-const emit = defineEmits<{ "note-loaded": [id: number] }>();
-
-interface NoteItem {
-  id: number;
-  title: string;
-  tags: string[];
-  updated_at: string;
-}
-
-const toast = useToastStore();
-const notesStore = useNotesStore();
-
-// List state
-const projectNotes = ref<NoteItem[]>([]);
-const listLoading = ref(false);
-const deletingId = ref<number | null>(null);
-const pendingDelete = ref<number | null>(null);
-const searchQuery = ref("");
-
-const filteredNotes = computed(() => {
-  const q = searchQuery.value.trim().toLowerCase();
-  if (!q) return projectNotes.value;
-  return projectNotes.value.filter(
-    (n) => n.title.toLowerCase().includes(q) || n.tags?.some((t) => t.toLowerCase().includes(q))
-  );
-});
-
-function matchedTags(note: NoteItem): string[] {
-  const q = searchQuery.value.trim().toLowerCase();
-  if (!q) return [];
-  return (note.tags ?? []).filter(
-    (t) => t.toLowerCase().includes(q) && !note.title.toLowerCase().includes(q)
-  );
-}
-
-// Editor state
-const editingId = ref<number | null>(null);
-const noteTitle = ref("");
-const noteBody = ref("");
-const noteTags = ref<string[]>([]);
-const dirty = ref(false);
-const saving = ref(false);
-
-const tagSuggestions = useTagSuggestions(noteTitle, noteBody, noteTags, () => { dirty.value = true; });
-
-// New note inline creation
-const showNewNoteInput = ref(false);
-const newNoteTitle = ref("");
-const creatingNote = ref(false);
-const newNoteTitleRef = ref<HTMLInputElement | null>(null);
-
-function _noteKey(pid: number) { return `workspace_note_${pid}`; }
-
-async function startNewNote() {
-  showNewNoteInput.value = true;
-  newNoteTitle.value = "";
-  await nextTick();
-  newNoteTitleRef.value?.focus();
-}
-
-function cancelNewNote() {
-  showNewNoteInput.value = false;
-  newNoteTitle.value = "";
-}
-
-async function createNote() {
-  const title = newNoteTitle.value.trim();
-  if (!title || creatingNote.value) return;
-  creatingNote.value = true;
-  try {
-    const note = await apiPost<{ id: number; title: string; body: string; tags: string[]; updated_at: string }>(
-      "/api/notes",
-      { title, project_id: props.projectId, body: "", is_task: false }
-    );
-    showNewNoteInput.value = false;
-    newNoteTitle.value = "";
-    await loadProjectNotes();
-    await openNote(note.id);
-  } catch {
-    toast.show("Failed to create note", "error");
-  } finally {
-    creatingNote.value = false;
-  }
-}
-
-// TipTap editor ref
-const titleRef = ref<HTMLInputElement | null>(null);
-const editorRef = ref<InstanceType<typeof TiptapEditor> | null>(null);
-const tiptapEditor = computed<Editor | null>(() =>
-  (editorRef.value?.editor as Editor | undefined) ?? null
-);
-
-// Link suggestions
-interface LinkSuggestion { note_id: number; title: string; count: number; }
-const linkSuggestions = ref<LinkSuggestion[]>([]);
-let linkCheckTimer: ReturnType<typeof setTimeout> | null = null;
-
-async function fetchLinkSuggestions() {
-  if (!editingId.value || !noteBody.value) { linkSuggestions.value = []; return; }
-  try {
-    const res = await apiPost<{ suggestions: LinkSuggestion[] }>('/api/notes/link-suggestions', {
-      body: noteBody.value,
-      project_id: props.projectId,
-      exclude_note_id: editingId.value,
-    });
-    linkSuggestions.value = res.suggestions;
-  } catch {
-    linkSuggestions.value = [];
-  }
-}
-
-function scheduleLinkCheck() {
-  if (linkCheckTimer) clearTimeout(linkCheckTimer);
-  linkCheckTimer = setTimeout(fetchLinkSuggestions, 2500);
-}
-
-function applyWikilinkToText(text: string, title: string): string {
-  const escaped = title.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-  const parts = text.split(/(\[\[[^\]]*\]\])/);
-  const pattern = new RegExp(`\\b${escaped}\\b`, 'gi');
-  return parts.map((part, i) =>
-    i % 2 === 0 ? part.replace(pattern, `[[${title}]]`) : part
-  ).join('');
-}
-
-function applyLink(s: LinkSuggestion) {
-  noteBody.value = applyWikilinkToText(noteBody.value, s.title);
-  dirty.value = true;
-  linkSuggestions.value = linkSuggestions.value.filter(x => x.note_id !== s.note_id);
-}
-
-function applyAllLinks() {
-  let text = noteBody.value;
-  for (const s of linkSuggestions.value) text = applyWikilinkToText(text, s.title);
-  noteBody.value = text;
-  dirty.value = true;
-  linkSuggestions.value = [];
-}
-
-async function loadProjectNotes() {
-  listLoading.value = true;
-  try {
-    const data = await apiGet<{ notes: NoteItem[] }>(
-      `/api/projects/${props.projectId}/notes?type=note&limit=200`
-    );
-    projectNotes.value = data.notes ?? [];
-  } catch {
-    toast.show("Failed to load notes", "error");
-  } finally {
-    listLoading.value = false;
-  }
-}
-
-async function openNote(id: number) {
-  try {
-    const note = await apiGet<{ id: number; title: string; body: string; tags: string[]; updated_at: string }>(
-      `/api/notes/${id}`
-    );
-    editingId.value = note.id;
-    noteTitle.value = note.title;
-    noteBody.value = note.body ?? "";
-    noteTags.value = note.tags ?? [];
-    dirty.value = false;
-    tagSuggestions.dismissTagSuggestions();
-    linkSuggestions.value = [];
-    localStorage.setItem(_noteKey(props.projectId), String(id));
-    fetchLinkSuggestions();
-    emit("note-loaded", note.id);
-  } catch {
-    toast.show("Failed to load note", "error");
-  }
-}
-
-async function saveNote() {
-  if (!editingId.value) return;
-  saving.value = true;
-  try {
-    await apiPatch(`/api/notes/${editingId.value}`, {
-      title: noteTitle.value,
-      body: noteBody.value,
-      tags: noteTags.value,
-    });
-    dirty.value = false;
-    const idx = projectNotes.value.findIndex((n) => n.id === editingId.value);
-    if (idx !== -1) {
-      projectNotes.value[idx] = {
-        ...projectNotes.value[idx],
-        title: noteTitle.value,
-        tags: noteTags.value,
-        updated_at: new Date().toISOString(),
-      };
-      projectNotes.value.sort((a, b) =>
-        new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime()
-      );
-    }
-  } catch {
-    toast.show("Failed to save note", "error");
-  } finally {
-    saving.value = false;
-  }
-}
-
-function requestDelete(id: number, e: Event) {
-  e.stopPropagation();
-  if (deletingId.value === id) {
-    confirmDelete(id);
-  } else {
-    deletingId.value = id;
-  }
-}
-
-function cancelDelete(e: Event) {
-  e.stopPropagation();
-  deletingId.value = null;
-}
-
-async function confirmDelete(id: number) {
-  pendingDelete.value = id;
-  try {
-    await apiDelete(`/api/notes/${id}`);
-    projectNotes.value = projectNotes.value.filter((n) => n.id !== id);
-    if (editingId.value === id) {
-      editingId.value = null;
-      noteTitle.value = "";
-      noteBody.value = "";
-      localStorage.removeItem(_noteKey(props.projectId));
-    }
-  } catch {
-    toast.show("Failed to delete note", "error");
-  } finally {
-    pendingDelete.value = null;
-    deletingId.value = null;
-  }
-}
-
-watch(noteTitle, () => { dirty.value = true; });
-watch(noteBody, () => { dirty.value = true; if (editingId.value) scheduleLinkCheck(); });
-watch(noteTags, () => { dirty.value = true; });
-
-watch(
-  () => props.activeNoteId,
-  async (id) => {
-    if (id) {
-      await openNote(id);
-      await loadProjectNotes();
-    }
-  }
-);
-
-useAutoSave(dirty, saving, saveNote, 60_000);
-
-onMounted(async () => {
-  await loadProjectNotes();
-  const stored = localStorage.getItem(_noteKey(props.projectId));
-  if (stored) {
-    const id = Number(stored);
-    if (projectNotes.value.find((n) => n.id === id)) {
-      openNote(id).catch(() => {});
-    }
-  }
-});
-
-onUnmounted(() => { if (linkCheckTimer) clearTimeout(linkCheckTimer); });
-
-defineExpose({ reload: loadProjectNotes });
-</script>
-
-<template>
-  <div class="ws-note-editor">
-
-    <!-- Left rail: always-visible note list -->
-    <div class="note-rail">
-      <div class="rail-header">
-        <template v-if="showNewNoteInput">
-          <input
-            ref="newNoteTitleRef"
-            v-model="newNoteTitle"
-            class="new-note-input"
-            placeholder="Note title..."
-            :disabled="creatingNote"
-            @keydown.enter="createNote"
-            @keydown.escape="cancelNewNote"
-          />
-          <button class="btn-primary btn-inline" :disabled="creatingNote || !newNoteTitle.trim()" @click="createNote">
-            {{ creatingNote ? '…' : '+' }}
-          </button>
-          <button class="btn-text" aria-label="Cancel new note" @click="cancelNewNote"><X :size="16" /></button>
-        </template>
-        <template v-else>
-          <span class="rail-title">Notes</span>
-          <button class="btn-ghost btn-inline" @click="startNewNote" title="New note">+ New</button>
-        </template>
-      </div>
-
-      <div class="rail-search">
-        <input
-          v-model="searchQuery"
-          class="rail-search-input"
-          placeholder="Search…"
-          type="search"
-          aria-label="Search notes"
-        />
-        <button v-if="searchQuery" class="btn-text btn-search-clear" aria-label="Clear search" @click="searchQuery = ''"><X :size="16" /></button>
-      </div>
-
-      <div v-if="listLoading" class="rail-state">Loading…</div>
-      <ul v-else class="note-list">
-        <li
-          v-for="note in filteredNotes"
-          :key="note.id"
-          :class="['note-row', { active: editingId === note.id }]"
-          @click="openNote(note.id)"
-        >
-          <div class="note-row-main">
-            <span class="note-row-title">{{ note.title || 'Untitled' }}</span>
-            <span class="note-row-age">{{ relativeTimeOrDate(note.updated_at) }}</span>
-          </div>
-          <div v-if="note.tags?.length" class="note-row-tags">
-            <span
-              v-for="tag in note.tags.slice(0, 2)"
-              :key="tag"
-              :class="['note-tag-pill', { 'tag-match': matchedTags(note).includes(tag) }]"
-            >#{{ tag }}</span>
-            <span v-if="note.tags.length > 2" class="note-tag-more">+{{ note.tags.length - 2 }}</span>
-          </div>
-          <div class="note-row-actions" @click.stop>
-            <template v-if="deletingId === note.id">
-              <button class="btn-danger-outline btn-inline" :disabled="pendingDelete === note.id" @click="requestDelete(note.id, $event)">
-                {{ pendingDelete === note.id ? '…' : 'Delete?' }}
-              </button>
-              <button class="btn-text" aria-label="Cancel delete" @click="cancelDelete($event)"><X :size="16" /></button>
-            </template>
-            <button v-else class="btn-text" title="Delete note" @click="requestDelete(note.id, $event)">
-              <Trash2 :size="16" />
-            </button>
-          </div>
-        </li>
-        <li v-if="filteredNotes.length === 0" class="rail-state">
-          {{ searchQuery.trim() ? 'No matches.' : 'No notes yet.' }}
-        </li>
-      </ul>
-    </div>
-
-    <!-- Right pane: editor -->
-    <div class="note-editor-pane">
-      <template v-if="editingId">
-        <div class="panel-header">
-          <div class="editor-header-right">
-            <WordCount :body="noteBody" />
-            <span v-if="dirty && !saving" class="unsaved">Unsaved</span>
-            <span v-if="saving" class="saving-txt">Saving…</span>
-            <button class="btn-primary btn-compact" :disabled="saving || !dirty" @click="saveNote">Save</button>
-          </div>
-        </div>
-
-        <div class="note-title-row">
-          <input
-            ref="titleRef"
-            v-model="noteTitle"
-            class="note-title-input"
-            placeholder="Note title"
-            @keydown.ctrl.s.prevent="saveNote"
-            @keydown.ctrl.e.prevent="editorRef?.editor?.commands.focus()"
-          />
-        </div>
-
-        <div class="tag-row">
-          <TagInput v-model="noteTags" :fetchTags="(q: string) => notesStore.fetchAllTags(q)" />
-          <button
-            class="btn-ghost btn-compact"
-            :disabled="tagSuggestions.suggestingTags.value"
-            title="Auto-suggest tags from title and body"
-            @click="tagSuggestions.fetchTagSuggestions()"
-          >
-            {{ tagSuggestions.suggestingTags.value ? '…' : 'Suggest' }}
-          </button>
-        </div>
-
-        <div v-if="tagSuggestions.suggestedTags.value.length" class="tag-suggestions">
-          <span class="tag-suggestions-label">Suggested:</span>
-          <button
-            v-for="tag in tagSuggestions.suggestedTags.value"
-            :key="tag"
-            :class="['btn-tag-suggestion', { applied: tagSuggestions.appliedTags.value.has(tag) }]"
-            @click="tagSuggestions.applyTagSuggestion(tag)"
-          >#{{ tag }}{{ tagSuggestions.appliedTags.value.has(tag) ? ' ✓' : '' }}</button>
-          <button class="btn-text" aria-label="Dismiss tag suggestions" @click="tagSuggestions.dismissTagSuggestions()"><X :size="16" /></button>
-        </div>
-
-        <div class="toolbar-row">
-          <MarkdownToolbar :editor="tiptapEditor" />
-        </div>
-
-        <div v-if="linkSuggestions.length" class="link-suggest-strip">
-          <span class="link-suggest-label">Links:</span>
-          <span v-for="s in linkSuggestions" :key="s.note_id" class="link-suggest-chip" :title="`Appears ${s.count}× unlinked`">
-            <button class="btn-chip-link" @click="applyLink(s)">[[{{ s.title }}]]</button>
-          </span>
-          <button class="btn-ghost btn-inline" @click="applyAllLinks" title="Link all suggestions">All</button>
-          <button class="btn-text" aria-label="Dismiss link suggestions" @click="linkSuggestions = []"><X :size="16" /></button>
-        </div>
-
-        <div class="editor-area" @keydown.ctrl.s.prevent="saveNote" @keydown.ctrl.e.prevent="editorRef?.editor?.commands.focus()">
-          <TiptapEditor ref="editorRef" v-model="noteBody" @escape="titleRef?.focus()" />
-        </div>
-      </template>
-
-      <div v-else class="editor-empty-state">
-        <p>Select a note or create a new one</p>
-      </div>
-    </div>
-
-  </div>
-</template>
-
-<style scoped>
-.ws-note-editor {
-  display: flex;
-  flex-direction: row;
-  height: 100%;
-  overflow: hidden;
-  background: var(--fs-surface-hover);
-  border-left: 1px solid var(--fs-border-color);
-}
-
-/* ── Left rail ── */
-.note-rail {
-  width: 200px;
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background: var(--fs-surface-raised);
-}
-
-.rail-header {
-  display: flex;
-  align-items: center;
-  gap: 0.3rem;
-  padding: 0.5rem 0.6rem;
-  border-bottom: 1px solid var(--fs-border-color);
-  flex-shrink: 0;
-}
-
-.rail-title {
-  color: var(--fs-text-tertiary);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  font-size: 0.72rem;
-  font-weight: 500;
-  flex: 1;
-}
-
-.rail-search-input {
-  flex: 1;
-  background: transparent;
-  border: none;
-  font-size: 0.78rem;
-  color: var(--fs-text-primary);
-  min-width: 0;
-  padding: 0;
-}
-.rail-search-input:focus { outline: none; }
-.rail-search-input::-webkit-search-cancel-button { display: none; }
-
-/* Sits inside the search field: no padding, and must not flex. */
-.btn-search-clear { padding: 0; flex-shrink: 0; }
-
-.rail-state {
-  padding: 1rem 0.65rem;
-  font-size: 0.78rem;
-  color: var(--fs-text-tertiary);
-}
-
-/* Note list */
-.note-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  overflow-y: auto;
-  flex: 1;
-}
-
-.note-row {
-  display: flex;
-  flex-direction: column;
-  padding: 0.4rem 0.6rem;
-  border-bottom: 1px solid color-mix(in srgb, var(--fs-border-color) 60%, transparent);
-  cursor: pointer;
-  gap: 0.15rem;
-  border-right: 2px solid transparent;
-  transition: background 0.12s;
-}
-.note-row:hover { background: color-mix(in srgb, var(--fs-accent) 5%, var(--fs-surface-hover)); }
-.note-row.active {
-  background: color-mix(in srgb, var(--fs-accent) 8%, var(--fs-surface-hover));
-  border-right-color: var(--fs-accent);
-}
-
-.note-row-main {
-  display: flex;
-  align-items: baseline;
-  gap: 0.25rem;
-}
-
-.note-row-title {
-  flex: 1;
-  font-size: 0.78rem;
-  font-weight: 500;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--fs-text-primary);
-}
-
-.note-row-age {
-  font-size: 0.62rem;
-  color: var(--fs-text-tertiary);
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-.note-row-tags {
-  display: flex;
-  gap: 0.15rem;
-  overflow: hidden;
-}
-
-.note-tag-pill {
-  font-size: 0.58rem;
-  color: var(--fs-accent-fg);
-  background: color-mix(in srgb, var(--fs-accent) 10%, transparent);
-  border-radius: 999px;
-  padding: 0 0.3rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 5rem;
-}
-.note-tag-pill.tag-match {
-  background: color-mix(in srgb, var(--fs-accent) 22%, transparent);
-  outline: 1px solid var(--fs-accent);
-}
-
-.note-tag-more {
-  font-size: 0.58rem;
-  color: var(--fs-text-tertiary);
-  white-space: nowrap;
-}
-
-.note-row-actions {
-  display: flex;
-  gap: 0.2rem;
-  align-items: center;
-}
-
-/* Editor UI */
-.panel-header {
-  display: flex;
-  align-items: center;
-  padding: 0.5rem 0.75rem;
-  flex-shrink: 0;
-  gap: 0.5rem;
-}
-
-.editor-header-right {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-left: auto;
-}
-
-.unsaved { font-size: 0.72rem; color: var(--fs-text-tertiary); }
-.saving-txt { font-size: 0.72rem; color: var(--fs-accent); }
-
-/* Moss action-primary per Hybrid */
-
-.note-title-input {
-  width: 100%;
-  background: transparent;
-  border: none;
-  font-size: 1.4rem;
-  font-weight: 500;
-  line-height: 1.25;
-  color: var(--fs-text-primary);
-  padding: 0;
-  font-family: 'Fraunces', serif;
-  letter-spacing: -0.01em;
-}
-.note-title-input:focus { outline: none; }
-.note-title-input::placeholder {
-  color: var(--fs-text-tertiary);
-}
-
-.tag-row {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.4rem;
-  padding: 0.4rem 0.6rem;
-  flex-shrink: 0;
-}
-.tag-row > :first-child { flex: 1; min-width: 0; }
-
-.tag-suggestions {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.3rem;
-  padding: 0.35rem 0.6rem;
-  background: color-mix(in srgb, var(--fs-accent) 5%, var(--fs-surface-hover));
-  flex-shrink: 0;
-}
-.tag-suggestions-label { font-size: 0.72rem; color: var(--fs-text-tertiary); flex-shrink: 0; }
-
-.btn-tag-suggestion {
-  background: none;
-  border: 1px solid var(--fs-border-color);
-  border-radius: 999px;
-  padding: 0.15rem 0.55rem;
-  font-size: 0.75rem;
-  color: var(--fs-text-primary);
-  cursor: pointer;
-}
-.btn-tag-suggestion:hover { border-color: var(--fs-accent); color: var(--fs-accent); }
-.btn-tag-suggestion.applied {
-  background: color-mix(in srgb, var(--fs-accent) 15%, transparent);
-  border-color: var(--fs-accent);
-  color: var(--fs-accent-fg);
-}
-
-.link-suggest-strip {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 0.25rem;
-  padding: 0.3rem 0.6rem;
-  background: color-mix(in srgb, var(--fs-accent) 5%, var(--fs-surface-hover));
-  flex-shrink: 0;
-}
-.link-suggest-label {
-  font-size: 0.7rem;
-  color: var(--fs-text-tertiary);
-  flex-shrink: 0;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-.link-suggest-chip { display: inline-flex; }
-
-.btn-chip-link {
-  background: none;
-  border: 1px solid var(--fs-accent);
-  border-radius: 999px;
-  padding: 0.1rem 0.45rem;
-  font-size: 0.7rem;
-  color: var(--fs-accent);
-  cursor: pointer;
-  font-family: monospace;
-  white-space: nowrap;
-}
-.btn-chip-link:hover { background: color-mix(in srgb, var(--fs-accent) 15%, transparent); }
-
-</style>
diff --git a/frontend/src/components/WorkspaceTaskPanel.vue b/frontend/src/components/WorkspaceTaskPanel.vue
deleted file mode 100644
index d98bdaee..00000000
--- a/frontend/src/components/WorkspaceTaskPanel.vue
+++ /dev/null
@@ -1,618 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, onMounted } from "vue";
-import { RouterLink } from "vue-router";
-import { apiGet, apiPatch, apiPost, apiDelete } from "@/api/client";
-import { useToastStore } from "@/stores/toast";
-import TaskLogSection from "@/components/TaskLogSection.vue";
-import KindBadge from "@/components/KindBadge.vue";
-import type { TaskKind } from "@/types/note";
-import { renderMarkdown } from "@/utils/markdown";
-import { Trash2, X } from "lucide-vue-next";
-import { relativeTimeOrDate } from "@/composables/useRelativeTime";
-
-const props = defineProps<{ projectId: number }>();
-
-const toast = useToastStore();
-
-interface Milestone {
-  id: number;
-  title: string;
-  status: string;
-  order_index: number;
-}
-
-interface Task {
-  id: number;
-  title: string;
-  status: string;
-  priority: string;
-  milestone_id: number | null;
-  due_date: string | null;
-  updated_at: string;
-  body?: string;
-  task_kind?: TaskKind;
-}
-
-const tasks = ref<Task[]>([]);
-const milestones = ref<Milestone[]>([]);
-const loading = ref(false);
-
-// Detail slide-over
-const activeTask = ref<Task | null>(null);
-const taskBody = ref("");
-const loadingBody = ref(false);
-
-// Collapsed milestone groups (set of milestone IDs, null = "No Milestone" group)
-const collapsedGroups = ref<Set<number | null>>(new Set());
-
-// New task quick-add
-const newTaskTitle = ref("");
-const addingTask = ref(false);
-
-const STATUS_CYCLE: Record<string, string> = {
-  todo: "in_progress",
-  in_progress: "done",
-  done: "todo",
-};
-
-const STATUS_ICON: Record<string, string> = {
-  todo: "○",
-  in_progress: "▶",
-  done: "✓",
-};
-
-const PRIORITY_CLASS: Record<string, string> = {
-  high: "priority-high",
-  medium: "priority-medium",
-  low: "priority-low",
-};
-
-function isRowOverdue(task: Task): boolean {
-  if (!task.due_date || task.status === "done") return false;
-  return task.due_date < new Date().toISOString().slice(0, 10);
-}
-
-// Group tasks by milestone, "No Milestone" first
-const groupedTasks = computed(() => {
-  const noMs = tasks.value.filter((t) => t.milestone_id === null);
-  const msGroups = milestones.value.map((ms) => ({
-    milestone: ms,
-    tasks: tasks.value.filter((t) => t.milestone_id === ms.id),
-  }));
-  return { noMilestone: noMs, milestoneGroups: msGroups };
-});
-
-async function loadAll() {
-  loading.value = true;
-  try {
-    const [tasksRes, msRes] = await Promise.all([
-      apiGet<{ notes: Task[] }>(`/api/projects/${props.projectId}/notes?type=task&limit=200`),
-      apiGet<{ milestones: Milestone[] }>(`/api/projects/${props.projectId}/milestones`),
-    ]);
-    tasks.value = tasksRes.notes ?? [];
-    milestones.value = msRes.milestones ?? [];
-  } catch {
-    toast.show("Failed to load tasks", "error");
-  } finally {
-    loading.value = false;
-  }
-}
-
-async function cycleStatus(task: Task, e: Event) {
-  e.stopPropagation();
-  const next = STATUS_CYCLE[task.status] ?? "todo";
-  try {
-    await apiPatch(`/api/tasks/${task.id}/status`, { status: next });
-    task.status = next;
-    if (activeTask.value?.id === task.id) activeTask.value.status = next;
-  } catch {
-    toast.show("Failed to update status", "error");
-  }
-}
-
-function toggleGroup(key: number | null) {
-  if (collapsedGroups.value.has(key)) {
-    collapsedGroups.value.delete(key);
-  } else {
-    collapsedGroups.value.add(key);
-  }
-}
-
-async function openTask(task: Task) {
-  activeTask.value = task;
-  taskBody.value = task.body ?? "";
-  loadingBody.value = true;
-  try {
-    const full = await apiGet<Task>(`/api/tasks/${task.id}`);
-    taskBody.value = full.body ?? "";
-    // Update cached task so re-opens don't re-fetch if unchanged
-    task.body = full.body;
-  } catch {
-    // Non-critical — body just won't show
-  } finally {
-    loadingBody.value = false;
-  }
-}
-
-function closeTask() {
-  activeTask.value = null;
-  taskBody.value = "";
-  deleteConfirmPending.value = false;
-}
-
-async function addTask() {
-  const title = newTaskTitle.value.trim();
-  if (!title) return;
-  addingTask.value = true;
-  try {
-    const task = await apiPost<Task>("/api/tasks", {
-      title,
-      project_id: props.projectId,
-      status: "todo",
-    });
-    tasks.value.unshift(task);
-    newTaskTitle.value = "";
-  } catch {
-    toast.show("Failed to create task", "error");
-  } finally {
-    addingTask.value = false;
-  }
-}
-
-const deletingTask = ref(false);
-const deleteConfirmPending = ref(false);
-const changingMilestone = ref(false);
-
-async function setMilestone(milestoneId: number | null) {
-  if (!activeTask.value) return;
-  changingMilestone.value = true;
-  try {
-    await apiPatch(`/api/notes/${activeTask.value.id}`, { milestone_id: milestoneId });
-    activeTask.value.milestone_id = milestoneId;
-    // Update in tasks list too
-    const t = tasks.value.find((x) => x.id === activeTask.value!.id);
-    if (t) t.milestone_id = milestoneId;
-  } catch {
-    toast.show("Failed to update milestone", "error");
-  } finally {
-    changingMilestone.value = false;
-  }
-}
-
-async function deleteActiveTask() {
-  if (!activeTask.value) return;
-  if (!deleteConfirmPending.value) {
-    deleteConfirmPending.value = true;
-    return;
-  }
-  deletingTask.value = true;
-  try {
-    await apiDelete(`/api/tasks/${activeTask.value.id}`);
-    tasks.value = tasks.value.filter((t) => t.id !== activeTask.value!.id);
-    activeTask.value = null;
-    deleteConfirmPending.value = false;
-  } catch {
-    toast.show("Failed to delete task", "error");
-  } finally {
-    deletingTask.value = false;
-  }
-}
-
-function cancelDeleteTask() {
-  deleteConfirmPending.value = false;
-}
-
-onMounted(loadAll);
-defineExpose({ reload: loadAll });
-</script>
-
-<template>
-  <div class="ws-task-panel">
-
-    <!-- Task list — always visible, shrinks when detail is open -->
-    <div :class="['task-list-view', { 'has-detail': !!activeTask }]">
-      <div class="panel-header">
-        <span class="panel-title">Tasks</span>
-      </div>
-
-      <div class="task-add">
-        <input
-          v-model="newTaskTitle"
-          class="task-add-input"
-          placeholder="New task..."
-          @keydown.enter="addTask"
-        />
-        <button class="btn-primary btn-inline btn-add" :disabled="addingTask || !newTaskTitle.trim()" @click="addTask">+</button>
-      </div>
-
-      <div v-if="loading" class="state-msg">Loading...</div>
-
-      <div v-else class="groups-scroll">
-        <!-- No Milestone group (always first) -->
-        <div class="ms-group">
-          <button class="ms-group-header" @click="toggleGroup(null)">
-            <span class="ms-chevron">{{ collapsedGroups.has(null) ? '▶' : '▼' }}</span>
-            <span class="ms-name">No Milestone</span>
-            <span class="ms-count">{{ groupedTasks.noMilestone.length }}</span>
-          </button>
-          <ul v-show="!collapsedGroups.has(null)" class="task-items">
-            <li
-              v-for="task in groupedTasks.noMilestone"
-              :key="task.id"
-              :class="['task-row', { 'task-active': activeTask?.id === task.id }]"
-              @click="openTask(task)"
-            >
-              <button :class="['status-dot', `status-${task.status}`]" :title="`${task.status} — click to cycle`" @click="cycleStatus(task, $event)">{{ STATUS_ICON[task.status] ?? '○' }}</button>
-              <span v-if="task.priority && task.priority !== 'none'" :class="['priority-dot', PRIORITY_CLASS[task.priority] ?? '']"></span>
-              <span class="task-title" :class="{ done: task.status === 'done' }">{{ task.title }}</span>
-              <KindBadge :kind="task.task_kind" />
-              <span v-if="task.due_date" :class="['task-due', { overdue: isRowOverdue(task) }]">{{ task.due_date }}</span>
-              <span class="task-age">{{ relativeTimeOrDate(task.updated_at) }}</span>
-            </li>
-            <li v-if="groupedTasks.noMilestone.length === 0" class="empty-group">No tasks</li>
-          </ul>
-        </div>
-
-        <!-- Milestone groups -->
-        <div v-for="{ milestone, tasks: msTasks } in groupedTasks.milestoneGroups" :key="milestone.id" class="ms-group">
-          <button class="ms-group-header" @click="toggleGroup(milestone.id)">
-            <span class="ms-chevron">{{ collapsedGroups.has(milestone.id) ? '▶' : '▼' }}</span>
-            <span class="ms-name">{{ milestone.title }}</span>
-            <span :class="['ms-status', `ms-status-${milestone.status}`]">{{ milestone.status.replace('_',' ') }}</span>
-            <span class="ms-count">{{ msTasks.length }}</span>
-          </button>
-          <ul v-show="!collapsedGroups.has(milestone.id)" class="task-items">
-            <li
-              v-for="task in msTasks"
-              :key="task.id"
-              :class="['task-row', { 'task-active': activeTask?.id === task.id }]"
-              @click="openTask(task)"
-            >
-              <button :class="['status-dot', `status-${task.status}`]" :title="`${task.status} — click to cycle`" @click="cycleStatus(task, $event)">{{ STATUS_ICON[task.status] ?? '○' }}</button>
-              <span v-if="task.priority && task.priority !== 'none'" :class="['priority-dot', PRIORITY_CLASS[task.priority] ?? '']"></span>
-              <span class="task-title" :class="{ done: task.status === 'done' }">{{ task.title }}</span>
-              <KindBadge :kind="task.task_kind" />
-              <span v-if="task.due_date" :class="['task-due', { overdue: isRowOverdue(task) }]">{{ task.due_date }}</span>
-              <span class="task-age">{{ relativeTimeOrDate(task.updated_at) }}</span>
-            </li>
-            <li v-if="msTasks.length === 0" class="empty-group">No tasks</li>
-          </ul>
-        </div>
-      </div>
-    </div>
-
-    <!-- Detail pane — bottom split when a task is selected -->
-    <Transition name="detail-fade">
-      <div v-if="activeTask" class="task-detail">
-        <div class="detail-header">
-          <RouterLink :to="`/tasks/${activeTask.id}/edit`" target="_blank" class="btn-text btn-edit-task" title="Open full editor">Edit ↗</RouterLink>
-          <span :class="['status-cycler', `status-${activeTask.status}`]" @click="cycleStatus(activeTask, $event)" title="Click to cycle status">
-            {{ STATUS_ICON[activeTask.status] ?? "○" }} {{ activeTask.status.replace("_", " ") }}
-          </span>
-          <template v-if="deleteConfirmPending">
-            <button class="btn-danger-outline btn-inline btn-delete-confirm" :disabled="deletingTask" @click="deleteActiveTask">{{ deletingTask ? '...' : 'Delete?' }}</button>
-            <button class="btn-text" aria-label="Cancel delete" @click="cancelDeleteTask"><X :size="16" /></button>
-          </template>
-          <button v-else class="btn-text btn-delete-task" title="Delete task" @click="deleteActiveTask">
-            <Trash2 :size="16" />
-          </button>
-          <button class="btn-text btn-close-detail" @click="closeTask" aria-label="Close detail"><X :size="16" /></button>
-        </div>
-
-        <h3 class="detail-title">{{ activeTask.title }}</h3>
-
-        <div class="detail-meta">
-          <span v-if="activeTask.priority && activeTask.priority !== 'none'" class="meta-chip priority">{{ activeTask.priority }}</span>
-          <span v-if="activeTask.due_date" class="meta-chip due">Due {{ activeTask.due_date }}</span>
-          <select
-            class="milestone-select"
-            :value="activeTask.milestone_id ?? ''"
-            :disabled="changingMilestone"
-            @change="setMilestone(($event.target as HTMLSelectElement).value === '' ? null : Number(($event.target as HTMLSelectElement).value))"
-          >
-            <option value="">No Milestone</option>
-            <option v-for="ms in milestones" :key="ms.id" :value="ms.id">{{ ms.title }}</option>
-          </select>
-        </div>
-
-        <div v-if="taskBody || loadingBody" class="detail-body">
-          <div v-if="loadingBody" class="body-loading">…</div>
-          <div v-else class="prose" v-html="renderMarkdown(taskBody)" />
-        </div>
-
-        <div class="detail-log">
-          <TaskLogSection :task-id="activeTask.id" />
-        </div>
-      </div>
-    </Transition>
-
-  </div>
-</template>
-
-<style scoped>
-.ws-task-panel {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-  background: var(--fs-surface-hover);
-  border-right: 1px solid var(--fs-border-color);
-}
-
-/* ── List view ── */
-.task-list-view {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-.task-list-view.has-detail {
-  flex: 0 0 44%;
-}
-.task-active {
-  background: color-mix(in srgb, var(--fs-accent) 6%, var(--fs-surface-hover)) !important;
-}
-
-.panel-header {
-  padding: 0.6rem 0.75rem;
-  border-bottom: 1px solid var(--fs-border-color);
-  flex-shrink: 0;
-}
-
-.panel-title {
-  color: var(--fs-text-tertiary);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  font-size: 0.75rem;
-  font-weight: 500;
-}
-
-.task-add {
-  display: flex;
-  gap: 0.4rem;
-  padding: 0.45rem 0.6rem;
-  border-bottom: 1px solid var(--fs-border-color);
-  flex-shrink: 0;
-}
-
-.task-add-input {
-  flex: 1;
-  background: var(--fs-surface-page);
-  border: 1px solid var(--fs-border-color);
-  border-radius: 5px;
-  padding: 0.28rem 0.5rem;
-  font-size: 0.83rem;
-  color: var(--fs-text-primary);
-}
-.task-add-input:focus { outline: none; border-color: var(--fs-accent); }
-
-.btn-add { font-size: 1rem; }   /* a '+' glyph, not a label */
-
-.groups-scroll {
-  flex: 1;
-  overflow-y: auto;
-}
-
-.ms-group {
-  border-bottom: 1px solid var(--fs-border-color);
-}
-
-.ms-group-header {
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-  width: 100%;
-  padding: 0.4rem 0.65rem;
-  background: var(--fs-surface-raised);
-  border: none;
-  cursor: pointer;
-  text-align: left;
-  font-size: 0.8rem;
-  color: var(--fs-text-primary);
-}
-.ms-group-header:hover { background: color-mix(in srgb, var(--fs-accent) 8%, var(--fs-surface-hover)); }
-
-.ms-chevron { font-size: 0.6rem; color: var(--fs-text-tertiary); width: 0.8rem; }
-.ms-name { flex: 1; font-weight: 500; font-size: 0.8rem; }
-.ms-count { font-size: 0.72rem; color: var(--fs-text-tertiary); background: var(--fs-surface-page); border-radius: 10px; padding: 0 0.4rem; }
-
-.ms-status {
-  font-size: 0.68rem;
-  padding: 0.1rem 0.4rem;
-  border-radius: 10px;
-  text-transform: capitalize;
-}
-.ms-status-active { background: color-mix(in srgb, var(--fs-accent) 15%, transparent); color: var(--fs-accent-fg); }
-.ms-status-completed { background: color-mix(in srgb, var(--fs-success) 15%, transparent); color: var(--fs-success-fg); }
-
-.task-items {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.task-row {
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-  padding: 0.35rem 0.65rem 0.35rem 1.4rem;
-  cursor: pointer;
-  border-bottom: 1px solid color-mix(in srgb, var(--fs-border-color) 50%, transparent);
-}
-.task-row:hover { background: color-mix(in srgb, var(--fs-accent) 5%, var(--fs-surface-hover)); }
-.task-row:last-child { border-bottom: none; }
-
-.status-dot {
-  flex-shrink: 0;
-  width: 1.35rem;
-  height: 1.35rem;
-  border-radius: 50%;
-  border: 1.5px solid var(--fs-border-color);
-  background: none;
-  cursor: pointer;
-  font-size: 0.62rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.status-dot.status-in_progress { border-color: var(--fs-accent); color: var(--fs-accent); }
-.status-dot.status-done { border-color: var(--fs-success); color: var(--fs-success); }
-
-.task-title {
-  flex: 1;
-  font-size: 0.83rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--fs-text-primary);
-}
-.task-title.done { text-decoration: line-through; color: var(--fs-text-tertiary); }
-
-.task-age {
-  font-size: 0.68rem;
-  color: var(--fs-text-tertiary);
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-.empty-group { padding: 0.4rem 1.4rem; font-size: 0.78rem; color: var(--fs-text-tertiary); }
-
-.state-msg { padding: 1.5rem; text-align: center; font-size: 0.85rem; color: var(--fs-text-tertiary); }
-
-/* ── Detail pane (bottom split) ── */
-.task-detail {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background: var(--fs-surface-hover);
-  border-top: 2px solid var(--fs-border-color);
-}
-
-.detail-header {
-  display: flex;
-  align-items: center;
-  gap: 0.6rem;
-  padding: 0.6rem 0.75rem;
-  border-bottom: 1px solid var(--fs-border-color);
-  flex-shrink: 0;
-}
-
-/* An interactive CYCLER, not a chip: it is clickable, outlined and
-   transparent. It shared a name with the task chip and was never the same
-   shape (#3132). */
-.status-cycler {
-  padding: 0.2rem 0.55rem;
-  border-radius: 12px;
-  font-size: 0.75rem;
-  font-weight: 500;
-  cursor: pointer;
-  border: 1.5px solid var(--fs-border-color);
-  background: none;
-  text-transform: capitalize;
-  user-select: none;
-  margin-left: auto;
-}
-.status-cycler.status-in_progress { border-color: var(--fs-accent); color: var(--fs-accent-fg); background: color-mix(in srgb, var(--fs-accent) 10%, transparent); }
-.status-cycler.status-done { border-color: var(--fs-success); color: var(--fs-success-fg); background: color-mix(in srgb, var(--fs-success) 10%, transparent); }
-
-.btn-edit-task { margin-left: 0.25rem; }
-.btn-edit-task:hover { text-decoration: underline; }
-
-.detail-body {
-  padding: 0.5rem 0.75rem 0.5rem;
-  border-bottom: 1px solid var(--fs-border-color);
-  flex-shrink: 0;
-  max-height: 40%;
-  overflow-y: auto;
-}
-
-.body-loading {
-  font-size: 0.8rem;
-  color: var(--fs-text-tertiary);
-}
-
-.detail-body .prose {
-  font-size: 0.83rem;
-  line-height: 1.5;
-  color: var(--fs-text-primary);
-}
-
-.btn-delete-task { margin-left: 0.25rem; }
-.btn-delete-task:hover { color: var(--fs-action-destructive); }
-
-.btn-delete-confirm { margin-left: 0.25rem; }
-
-
-.detail-meta {
-  display: flex;
-  gap: 0.4rem;
-  padding: 0 0.75rem 0.5rem;
-  flex-shrink: 0;
-}
-
-.meta-chip {
-  font-size: 0.72rem;
-  padding: 0.15rem 0.5rem;
-  border-radius: 10px;
-  background: var(--fs-surface-page);
-  border: 1px solid var(--fs-border-color);
-  color: var(--fs-text-tertiary);
-  text-transform: capitalize;
-}
-
-.milestone-select {
-  font-size: 0.72rem;
-  padding: 0.15rem 0.4rem;
-  border-radius: 10px;
-  background: var(--fs-surface-page);
-  border: 1px solid var(--fs-border-color);
-  color: var(--fs-text-tertiary);
-  cursor: pointer;
-  max-width: 140px;
-}
-.milestone-select:disabled { opacity: 0.5; cursor: default; }
-.milestone-select:focus { outline: none; border-color: var(--fs-accent); }
-
-.detail-log {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0 0.6rem 0.6rem;
-  border-top: 1px solid var(--fs-border-color);
-}
-
-/* Detail fade transition */
-.detail-fade-enter-active,
-.detail-fade-leave-active { transition: opacity 0.15s; }
-.detail-fade-enter-from,
-.detail-fade-leave-to { opacity: 0; }
-
-/* Priority dots on task rows */
-.priority-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 2px;
-  flex-shrink: 0;
-}
-.priority-high   { background: #ef4444; }
-.priority-medium { background: #f59e0b; }
-.priority-low    { background: #3b82f6; }
-
-/* Due date on task rows */
-.task-due {
-  font-size: 0.65rem;
-  color: var(--fs-text-tertiary);
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-.task-due.overdue {
-  color: var(--fs-error);
-  font-weight: 500;
-}
-
-/* Close detail button */
-.btn-close-detail { margin-left: 0.2rem; }
-</style>
diff --git a/frontend/src/components/rules/RuleHistoryPanel.vue b/frontend/src/components/rules/RuleHistoryPanel.vue
index 96895775..deffd0bf 100644
--- a/frontend/src/components/rules/RuleHistoryPanel.vue
+++ b/frontend/src/components/rules/RuleHistoryPanel.vue
@@ -4,9 +4,9 @@
  * full. Not on the list row: a history entry point there would compete with
  * the row's actual job.
  *
- * A SIBLING OF HistoryPanel.vue, NOT A REUSE OF IT, and the reason is in its
- * props: `noteId` + `currentBody`, a `NoteVersion` carrying tags and pin
- * columns, a fetch of /api/notes/…, a `restore` emit, and pin/unpin buttons.
+ * A SIBLING OF VersionHistorySection.vue (a note's history), NOT A REUSE OF
+ * IT, and the reason is in its props: `noteId` + `currentBody`, a note
+ * version carrying tags, a fetch of /api/notes/…, and a `restore` emit.
  * Every one of those is note-shaped. Rules have no tags, no pins, and
  * deliberately no restore, and a rule's text is EIGHT fields rather than one
  * body — which changes the central question from "what changed" to "which
diff --git a/frontend/src/utils/diff.ts b/frontend/src/utils/diff.ts
index faad5370..83bd27e7 100644
--- a/frontend/src/utils/diff.ts
+++ b/frontend/src/utils/diff.ts
@@ -2,7 +2,7 @@
  * Line diff — one copy, for every surface that shows what changed.
  *
  * WHY THIS FILE EXISTS. The one LCS diff walk, shared by `useAssist.ts`,
- * `HistoryPanel.vue`, `VersionHistorySection.vue` and the rule edit history.
+ * `VersionHistorySection.vue` and the rule edit history.
  * A copy per consumer means a fix has to be found in N places by someone who
  * does not know N.
  */