diff --git a/frontend/src/components/HistoryPanel.vue b/frontend/src/components/HistoryPanel.vue
index bd2385b..5e4cd21 100644
--- a/frontend/src/components/HistoryPanel.vue
+++ b/frontend/src/components/HistoryPanel.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from "vue";
-import { apiGet } from "@/api/client";
+import { apiGet, pinNoteVersion, unpinNoteVersion } from "@/api/client";
 import DiffView from "@/components/DiffView.vue";
 import type { DiffLine } from "@/composables/useAssist";
 
@@ -10,6 +10,8 @@ interface NoteVersion {
   title: string;
   tags: string[];
   body?: string;
+  pin_kind: "auto" | "manual" | null;
+  pin_label: string | null;
   created_at: string;
 }
 
@@ -105,6 +107,69 @@ function restore() {
   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>
 
@@ -128,7 +193,25 @@ onMounted(loadVersions);
               :class="['history-item', { selected: selectedVersion?.id === v.id }]"
               @click="selectVersionItem(v)"
             >
-              <div class="history-item-title">{{ v.title || 'Untitled' }}</div>
+              <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">{{ formatDate(v.created_at) }}</div>
             </div>
           </div>
@@ -137,7 +220,62 @@ onMounted(loadVersions);
           <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>
-            <DiffView v-else :diff="diff" />
+            <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>
 
@@ -268,4 +406,101 @@ onMounted(loadVersions);
   opacity: 0.5;
   cursor: default;
 }
+
+/* ── 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(--color-primary, #6366f1); }
+.pin-badge-auto { color: var(--color-text-muted, rgba(255, 255, 255, 0.5)); }
+
+.history-item-label {
+  font-size: 0.72rem;
+  color: var(--color-primary, #6366f1);
+  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(--color-border);
+  font-size: 0.82rem;
+}
+.pin-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+.pin-state {
+  font-style: italic;
+  color: var(--color-text-muted, rgba(255, 255, 255, 0.6));
+  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(--color-border, rgba(255, 255, 255, 0.12));
+  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(--color-primary, #6366f1);
+}
+.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(--color-input-bg, rgba(255, 255, 255, 0.03));
+  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
+  border-radius: var(--radius-sm, 4px);
+  color: inherit;
+}
+.pin-label-input:focus {
+  outline: none;
+  border-color: var(--color-primary, #6366f1);
+}
+.btn-pin-save, .btn-pin-cancel {
+  padding: 0.3rem 0.7rem;
+  font-size: 0.78rem;
+  background: transparent;
+  color: inherit;
+  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
+  border-radius: var(--radius-sm, 4px);
+  cursor: pointer;
+}
+.btn-pin-save:hover:not(:disabled) {
+  background: rgba(99, 102, 241, 0.12);
+  border-color: var(--color-primary, #6366f1);
+}
+.btn-pin-save:disabled, .btn-pin-cancel:disabled,
+.btn-pin:disabled, .btn-pin-edit:disabled, .btn-unpin:disabled {
+  opacity: 0.5;
+  cursor: progress;
+}
 </style>