mulmoclaude 0.5.2 → 0.6.0

package/src/plugins/wiki/components/WikiPageBody.vue

@@ -0,0 +1,159 @@
+<template>
+  <!-- eslint-disable-next-line vue/no-v-html -- marked.parse output of app-owned wiki page body; trusted in-process render -->
+  <div ref="rootRef" data-testid="wiki-page-body" class="px-6 py-4 prose prose-sm max-w-none wiki-content" @click="onClick" v-html="renderedHtml" />
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { renderWikiPageHtml } from "../helpers";
+import { handleExternalLinkClick } from "../../../utils/dom/externalLink";
+import { classifyWorkspacePath, resolveWikiHref } from "../../../utils/path/workspaceLinkRouter";
+
+const props = defineProps<{
+  body: string;
+  baseDir: string;
+}>();
+
+const emit = defineEmits<{
+  taskCheckboxClick: [event: MouseEvent, target: HTMLInputElement];
+  wikiLinkClick: [slug: string];
+  workspaceLinkClick: [path: string];
+}>();
+
+const rootRef = ref<HTMLElement | null>(null);
+
+const renderedHtml = computed(() => renderWikiPageHtml(props.body, props.baseDir));
+
+defineExpose({ rootRef });
+
+function onClick(event: MouseEvent) {
+  const target = event.target as HTMLElement;
+  if (target instanceof HTMLInputElement && target.type === "checkbox" && target.classList.contains("md-task")) {
+    emit("taskCheckboxClick", event, target);
+    return;
+  }
+  const link = target.closest(".wiki-link") as HTMLElement | null;
+  if (link?.dataset.page) {
+    emit("wikiLinkClick", link.dataset.page);
+    return;
+  }
+  if (handleExternalLinkClick(event)) return;
+  if (event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey) return;
+  const anchor = target.closest("a");
+  if (!anchor) return;
+  const href = anchor.getAttribute("href");
+  if (!href || href.startsWith("#")) return;
+  const resolved = resolveWikiHref(href, props.baseDir);
+  if (classifyWorkspacePath(resolved)) {
+    event.preventDefault();
+    emit("workspaceLinkClick", resolved);
+  }
+}
+</script>
+
+<style scoped>
+.wiki-content :deep(.wiki-link) {
+  color: #2563eb;
+  cursor: pointer;
+  text-decoration: underline;
+  text-decoration-style: dotted;
+}
+.wiki-content :deep(.wiki-link:hover) {
+  text-decoration-style: solid;
+}
+.wiki-content :deep(h1) {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-top: 1.5rem;
+  margin-bottom: 0.75rem;
+  color: #111827;
+}
+.wiki-content :deep(h1:first-child),
+.wiki-content :deep(h2:first-child),
+.wiki-content :deep(h3:first-child),
+.wiki-content :deep(p:first-child) {
+  margin-top: 0;
+}
+.wiki-content :deep(h2) {
+  font-size: 1.2rem;
+  font-weight: 600;
+  margin-top: 1.25rem;
+  margin-bottom: 0.5rem;
+  color: #1f2937;
+  border-bottom: 1px solid #e5e7eb;
+  padding-bottom: 0.25rem;
+}
+.wiki-content :deep(h3) {
+  font-size: 1rem;
+  font-weight: 600;
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+  color: #374151;
+}
+.wiki-content :deep(p) {
+  margin-bottom: 0.75rem;
+  line-height: 1.6;
+  color: #374151;
+}
+.wiki-content :deep(ul),
+.wiki-content :deep(ol) {
+  margin-left: 1.5rem;
+  margin-bottom: 0.75rem;
+}
+.wiki-content :deep(li) {
+  margin-bottom: 0.25rem;
+  line-height: 1.5;
+  color: #374151;
+}
+.wiki-content :deep(ul) {
+  list-style-type: disc;
+}
+.wiki-content :deep(ol) {
+  list-style-type: decimal;
+}
+.wiki-content :deep(hr) {
+  border: none;
+  border-top: 1px solid #e5e7eb;
+  margin: 1rem 0;
+}
+.wiki-content :deep(code) {
+  background: #f3f4f6;
+  padding: 0.1rem 0.3rem;
+  border-radius: 0.25rem;
+  font-size: 0.85em;
+  font-family: monospace;
+}
+.wiki-content :deep(pre) {
+  background: #f3f4f6;
+  padding: 0.75rem;
+  border-radius: 0.375rem;
+  overflow-x: auto;
+  margin-bottom: 0.75rem;
+}
+.wiki-content :deep(pre code) {
+  background: none;
+  padding: 0;
+}
+.wiki-content :deep(blockquote) {
+  border-left: 3px solid #d1d5db;
+  padding-left: 1rem;
+  color: #6b7280;
+  margin: 0.75rem 0;
+}
+.wiki-content :deep(table) {
+  border-collapse: collapse;
+  width: 100%;
+  margin-bottom: 0.75rem;
+  font-size: 0.875rem;
+}
+.wiki-content :deep(th),
+.wiki-content :deep(td) {
+  border: 1px solid #e5e7eb;
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+}
+.wiki-content :deep(th) {
+  background: #f9fafb;
+  font-weight: 600;
+}
+</style>

package/src/plugins/wiki/helpers.ts

@@ -2,6 +2,23 @@
 // `/\[\[([^\]]+)\]\]/g` regex — flagged by `sonarjs/slow-regex`
 // for backtracking risk — with a linear walker.
 
+import { marked } from "marked";
+import { rewriteMarkdownImageRefs } from "../../utils/image/rewriteMarkdownImageRefs";
+import { makeTasksInteractive } from "../../utils/markdown/taskList";
+
+/**
+ * Pure markdown→HTML pipeline shared between the standalone /wiki
+ * view and the chat-inline preview (Stage 3a). Caller passes a body
+ * that already has frontmatter stripped, plus the workspace-relative
+ * base dir used to rewrite image refs (`data/wiki/pages` for a page,
+ * `data/wiki` for log/lint).
+ */
+export function renderWikiPageHtml(body: string, baseDir: string): string {
+  if (!body) return "";
+  const withImages = rewriteMarkdownImageRefs(body, baseDir);
+  return makeTasksInteractive(marked.parse(renderWikiLinks(withImages)) as string);
+}
+
 /**
  * Replace every `[[page name]]` occurrence in `content` with a
  * `<span class="wiki-link" data-page="…">…</span>` element. The

package/src/plugins/wiki/history/HistoryDetail.vue

@@ -0,0 +1,325 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { formatSmartTime } from "../../../utils/format/date";
+import { fetchHistorySnapshot, restoreHistorySnapshot, type SnapshotContent, type SnapshotSummary } from "./api";
+import { DIFF_LINE_KIND, joinFrontmatterAndBody, renderUnifiedDiff, stripAutoStampKeys, type DiffHunk, type DiffLineKind } from "./diff";
+import RestoreConfirm from "./RestoreConfirm.vue";
+
+const props = defineProps<{
+  slug: string;
+  /** Summary of the snapshot being viewed (carries ts/editor/reason for the header). */
+  summary: SnapshotSummary;
+  /** Summary of the snapshot just before this one in the list (newest-first
+   *  ordering = `summary` is at index N, `previousSummary` is at index N+1).
+   *  null when this is the oldest entry. Used for the "compare with previous"
+   *  toggle. */
+  previousSummary: SnapshotSummary | null;
+  /** Live page body + frontmatter, supplied by the parent so we don't
+   *  re-fetch on tab switches. */
+  currentBody: string;
+  currentMeta: Record<string, unknown>;
+}>();
+
+const emit = defineEmits<{
+  back: [];
+  /** Fired after the server returns 200 on the restore POST. The
+   *  parent (View.vue) handles the tab switch + success toast. */
+  restored: [];
+}>();
+
+const { t } = useI18n();
+
+const COMPARE_TARGET = {
+  current: "current",
+  previous: "previous",
+} as const;
+type CompareTarget = (typeof COMPARE_TARGET)[keyof typeof COMPARE_TARGET];
+
+const loading = ref(true);
+const fetchError = ref<string | null>(null);
+const snapshot = ref<SnapshotContent | null>(null);
+const previousSnapshot = ref<SnapshotContent | null>(null);
+// Separate error channel for the previous-compare fetch (codex
+// iter-4 #946). Folding it into `fetchError` made a failed previous
+// load take over the whole detail pane even after the user
+// switched back to "current" — kept blocking valid state.
+const previousFetchError = ref<string | null>(null);
+
+const compareTarget = ref<CompareTarget>(COMPARE_TARGET.current);
+const restoring = ref(false);
+const restoreError = ref<string | null>(null);
+const confirmOpen = ref(false);
+
+// Stale-response guards (codex iter-1 #946). A user who clicks a
+// different snapshot before the previous fetch returns would
+// otherwise see the slow response overwrite the new selection.
+// Two separate tokens because the "current" and "previous" fetches
+// are independent.
+let loadToken = 0;
+let previousLoadToken = 0;
+
+onMounted(async () => {
+  await loadThisSnapshot();
+});
+
+watch(
+  () => props.summary.stamp,
+  async (next, prev) => {
+    if (next === prev) return;
+    await loadThisSnapshot();
+  },
+);
+
+watch(compareTarget, async (target, prevTarget) => {
+  // Switching away from "previous" must invalidate any in-flight
+  // previous-snapshot load — otherwise its late failure would
+  // surface as `fetchError` and take over the detail pane even
+  // though the user is now looking at the (valid) current
+  // comparison (codex iter-3 #946).
+  if (prevTarget === COMPARE_TARGET.previous && target !== COMPARE_TARGET.previous) {
+    previousLoadToken += 1;
+  }
+  if (target === COMPARE_TARGET.previous && previousSnapshot.value === null && props.previousSummary !== null) {
+    await loadPreviousSnapshot();
+  }
+});
+
+async function loadThisSnapshot(): Promise<void> {
+  const myToken = ++loadToken;
+  // Invalidate any in-flight previous-snapshot load too — codex
+  // iter-2 #946: a slow `previousSnapshot` response was otherwise
+  // able to land after the user switched to a different snapshot,
+  // surfacing a comparison against the wrong base. Bumping
+  // `previousLoadToken` here guarantees that lingering response
+  // sees its token as stale and drops on the floor.
+  previousLoadToken += 1;
+  loading.value = true;
+  fetchError.value = null;
+  previousFetchError.value = null;
+  snapshot.value = null;
+  previousSnapshot.value = null;
+  compareTarget.value = COMPARE_TARGET.current;
+  restoreError.value = null;
+  const result = await fetchHistorySnapshot(props.slug, props.summary.stamp);
+  if (myToken !== loadToken) return;
+  loading.value = false;
+  if (!result.ok) {
+    fetchError.value = result.error;
+    return;
+  }
+  snapshot.value = result.data.snapshot;
+}
+
+async function loadPreviousSnapshot(): Promise<void> {
+  if (props.previousSummary === null) return;
+  const myToken = ++previousLoadToken;
+  previousFetchError.value = null;
+  const result = await fetchHistorySnapshot(props.slug, props.previousSummary.stamp);
+  if (myToken !== previousLoadToken) return;
+  if (!result.ok) {
+    previousFetchError.value = result.error;
+    return;
+  }
+  previousSnapshot.value = result.data.snapshot;
+}
+
+const editorBadge = computed(() => editorBadgeFor(props.summary.editor));
+
+function markerFor(kind: DiffLineKind): string {
+  if (kind === DIFF_LINE_KIND.add) return "+";
+  if (kind === DIFF_LINE_KIND.del) return "-";
+  return " "; // non-breaking space — keeps the column aligned
+}
+
+function editorBadgeFor(editor: SnapshotSummary["editor"]): { label: string; className: string } {
+  if (editor === "llm") {
+    return { label: t("pluginWiki.history.editorBadgeLLM"), className: "bg-purple-50 text-purple-700" };
+  }
+  if (editor === "system") {
+    return { label: t("pluginWiki.history.editorBadgeSystem"), className: "bg-gray-100 text-gray-700" };
+  }
+  return { label: t("pluginWiki.history.editorBadgeUser"), className: "bg-blue-50 text-blue-700" };
+}
+
+const hunks = computed<DiffHunk[]>(() => {
+  if (snapshot.value === null) return [];
+  // Right side = the snapshot we're viewing, with auto-stamps stripped.
+  const rightMeta = stripAutoStampKeys(stripSnapshotMetaPatchKeys(snapshot.value.meta));
+  const right = joinFrontmatterAndBody(rightMeta, snapshot.value.body);
+
+  if (compareTarget.value === COMPARE_TARGET.current) {
+    const leftMeta = stripAutoStampKeys(props.currentMeta);
+    const left = joinFrontmatterAndBody(leftMeta, props.currentBody);
+    return renderUnifiedDiff(left, right, 3);
+  }
+  // compare with previous
+  if (previousSnapshot.value === null) return [];
+  const leftMeta = stripAutoStampKeys(stripSnapshotMetaPatchKeys(previousSnapshot.value.meta));
+  const left = joinFrontmatterAndBody(leftMeta, previousSnapshot.value.body);
+  return renderUnifiedDiff(left, right, 3);
+});
+
+const showNoPreviousMessage = computed(() => compareTarget.value === COMPARE_TARGET.previous && props.previousSummary === null);
+const showPreviousFetchError = computed(() => compareTarget.value === COMPARE_TARGET.previous && previousFetchError.value !== null);
+const showNoChangesMessage = computed(() => {
+  if (loading.value) return false;
+  if (snapshot.value === null) return false;
+  if (compareTarget.value === COMPARE_TARGET.previous && (props.previousSummary === null || previousSnapshot.value === null)) return false;
+  return hunks.value.length === 0;
+});
+
+/** The snapshot's frontmatter still carries `_snapshot_*` keys
+ *  (snapshot pipeline metadata). These are NOT user data — strip
+ *  them before any diff so they don't show up as changes against
+ *  the live page (which never carries them). */
+function stripSnapshotMetaPatchKeys(meta: Record<string, unknown>): Record<string, unknown> {
+  const out: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(meta)) {
+    if (key.startsWith("_snapshot_")) continue;
+    out[key] = value;
+  }
+  return out;
+}
+
+function openConfirm(): void {
+  restoreError.value = null;
+  confirmOpen.value = true;
+}
+
+function cancelConfirm(): void {
+  if (restoring.value) return;
+  confirmOpen.value = false;
+}
+
+async function performRestore(): Promise<void> {
+  restoring.value = true;
+  restoreError.value = null;
+  const result = await restoreHistorySnapshot(props.slug, props.summary.stamp);
+  restoring.value = false;
+  if (!result.ok) {
+    restoreError.value = result.error;
+    confirmOpen.value = false;
+    return;
+  }
+  confirmOpen.value = false;
+  emit("restored");
+}
+</script>
+
+<template>
+  <div class="flex-1 flex flex-col min-h-0" data-testid="wiki-history-detail">
+    <!-- Top bar: back + restore -->
+    <div class="shrink-0 flex items-center justify-between px-4 py-2 border-b border-gray-100">
+      <button
+        type="button"
+        class="h-8 px-2.5 flex items-center gap-1 rounded text-sm text-gray-600 hover:bg-gray-100 transition-colors"
+        data-testid="wiki-history-back-button"
+        @click="emit('back')"
+      >
+        <span class="material-icons text-base">arrow_back</span>
+        {{ t("pluginWiki.history.backToList") }}
+      </button>
+      <button
+        type="button"
+        class="h-8 px-2.5 flex items-center gap-1 rounded bg-blue-600 hover:bg-blue-700 text-white text-sm disabled:opacity-60 disabled:cursor-not-allowed transition-colors"
+        :disabled="loading || snapshot === null || restoring"
+        data-testid="wiki-history-restore-button"
+        @click="openConfirm"
+      >
+        <span class="material-icons text-base">restore</span>
+        {{ t("pluginWiki.history.restoreButton") }}
+      </button>
+    </div>
+
+    <!-- Header: snapshot metadata + diff target toggle -->
+    <div class="shrink-0 px-4 py-3 border-b border-gray-100 flex flex-wrap items-center justify-between gap-3">
+      <div class="flex flex-wrap items-center gap-2 text-sm text-gray-700 min-w-0">
+        <span :class="['inline-flex items-center px-2 h-5 rounded text-xs font-medium', editorBadge.className]" data-testid="wiki-history-detail-editor-badge">
+          {{ editorBadge.label }}
+        </span>
+        <span class="text-gray-500" data-testid="wiki-history-detail-ts">
+          {{ formatSmartTime(props.summary.ts) }}
+        </span>
+        <span v-if="props.summary.reason" class="text-gray-700 truncate" data-testid="wiki-history-detail-reason">{{ ` — ${props.summary.reason}` }}</span>
+      </div>
+      <div class="flex border border-gray-300 rounded overflow-hidden text-sm">
+        <button
+          :class="[
+            'h-8 px-2.5 transition-colors',
+            compareTarget === COMPARE_TARGET.current ? 'bg-blue-50 text-blue-600 font-medium' : 'bg-white text-gray-600 hover:bg-gray-50',
+          ]"
+          data-testid="wiki-history-compare-current"
+          @click="compareTarget = COMPARE_TARGET.current"
+        >
+          {{ t("pluginWiki.history.compareCurrent") }}
+        </button>
+        <button
+          :class="[
+            'h-8 px-2.5 border-l border-gray-200 transition-colors',
+            compareTarget === COMPARE_TARGET.previous ? 'bg-blue-50 text-blue-600 font-medium' : 'bg-white text-gray-600 hover:bg-gray-50',
+          ]"
+          data-testid="wiki-history-compare-previous"
+          @click="compareTarget = COMPARE_TARGET.previous"
+        >
+          {{ t("pluginWiki.history.comparePrevious") }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Inline restore-failure banner (Q10=B) -->
+    <div
+      v-if="restoreError"
+      class="shrink-0 mx-4 mt-3 rounded border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700"
+      data-testid="wiki-history-restore-error"
+    >
+      {{ t("pluginWiki.history.restoreFailureBanner", { error: restoreError }) }}
+    </div>
+
+    <!-- Body: loading / fetch error / no-previous / no-changes / diff -->
+    <div class="flex-1 overflow-y-auto px-4 py-3 font-mono text-xs">
+      <div v-if="loading" class="flex items-center justify-center py-8 text-gray-400">
+        <span class="material-icons animate-spin text-base mr-2">progress_activity</span>
+        {{ t("pluginWiki.history.loading") }}
+      </div>
+      <div v-else-if="fetchError" class="text-red-600">{{ fetchError }}</div>
+      <div v-else-if="showNoPreviousMessage" class="text-gray-500">{{ t("pluginWiki.history.diffNoPrevious") }}</div>
+      <div v-else-if="showPreviousFetchError" class="text-red-600">{{ previousFetchError }}</div>
+      <div v-else-if="showNoChangesMessage" class="text-gray-500">{{ t("pluginWiki.history.diffNoChanges") }}</div>
+      <div v-else>
+        <template v-for="(hunk, hunkIdx) in hunks" :key="hunkIdx">
+          <div v-if="hunk.hiddenBefore > 0" class="text-gray-400 italic px-2 py-1 border-y border-gray-100 bg-gray-50">
+            {{ t("pluginWiki.history.hiddenLines", { count: hunk.hiddenBefore }) }}
+          </div>
+          <div
+            v-for="(line, lineIdx) in hunk.lines"
+            :key="`${hunkIdx}-${lineIdx}`"
+            :class="[
+              'whitespace-pre-wrap px-2 py-0.5 leading-snug',
+              line.kind === DIFF_LINE_KIND.add && 'bg-green-50 text-green-800',
+              line.kind === DIFF_LINE_KIND.del && 'bg-red-50 text-red-800',
+              line.kind === DIFF_LINE_KIND.context && 'text-gray-700',
+            ]"
+            :data-testid="`wiki-history-diff-line-${line.kind}`"
+          >
+            <span
+              :class="[
+                'mr-1',
+                line.kind === DIFF_LINE_KIND.add && 'text-green-600',
+                line.kind === DIFF_LINE_KIND.del && 'text-red-600',
+                line.kind === DIFF_LINE_KIND.context && 'text-gray-300',
+              ]"
+              >{{ markerFor(line.kind) }}</span
+            >{{ line.text }}
+          </div>
+          <div v-if="hunkIdx === hunks.length - 1 && hunk.hiddenAfter > 0" class="text-gray-400 italic px-2 py-1 border-y border-gray-100 bg-gray-50">
+            {{ t("pluginWiki.history.hiddenLines", { count: hunk.hiddenAfter }) }}
+          </div>
+        </template>
+      </div>
+    </div>
+
+    <!-- Confirm modal -->
+    <RestoreConfirm v-if="confirmOpen" :snapshot="props.summary" :restoring="restoring" @cancel="cancelConfirm" @confirm="performRestore" />
+  </div>
+</template>

package/src/plugins/wiki/history/HistoryTab.vue

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { formatRelativeTime, formatSmartTime } from "../../../utils/format/date";
+import { fetchHistoryList, type SnapshotSummary } from "./api";
+import HistoryDetail from "./HistoryDetail.vue";
+
+const props = defineProps<{
+  slug: string;
+  /** Live page body + frontmatter, supplied by the parent so the
+   *  detail view can diff against the current state without an
+   *  extra fetch. */
+  currentBody: string;
+  currentMeta: Record<string, unknown>;
+}>();
+
+const emit = defineEmits<{
+  /** Bubbled up from the detail view after a successful restore.
+   *  The parent (View.vue) handles the tab switch + success toast. */
+  restored: [];
+}>();
+
+const { t } = useI18n();
+
+const loading = ref(true);
+const fetchError = ref<string | null>(null);
+const snapshots = ref<SnapshotSummary[]>([]);
+/** Per Q15=B, this state persists across `Content` ↔ `History` tab
+ *  switches as long as the slug doesn't change. The parent keeps
+ *  the History tab mounted via `v-show`. */
+const selectedStamp = ref<string | null>(null);
+
+// Stale-response guard (codex iter-1 #946). A user who switches
+// slugs faster than the network responds would otherwise see a
+// late list arrive and overwrite the new slug's state. Each load
+// bumps the counter; resolutions whose token has been superseded
+// drop on the floor.
+let loadToken = 0;
+
+onMounted(async () => {
+  await loadList();
+});
+
+watch(
+  () => props.slug,
+  async (next, prev) => {
+    if (next === prev) return;
+    selectedStamp.value = null;
+    await loadList();
+  },
+);
+
+async function loadList(): Promise<void> {
+  const myToken = ++loadToken;
+  loading.value = true;
+  fetchError.value = null;
+  const result = await fetchHistoryList(props.slug);
+  if (myToken !== loadToken) return;
+  loading.value = false;
+  if (!result.ok) {
+    fetchError.value = result.error;
+    snapshots.value = [];
+    return;
+  }
+  snapshots.value = result.data.snapshots;
+}
+
+const selectedIndex = computed(() => {
+  if (selectedStamp.value === null) return -1;
+  return snapshots.value.findIndex((entry) => entry.stamp === selectedStamp.value);
+});
+
+const selectedSummary = computed<SnapshotSummary | null>(() => {
+  const idx = selectedIndex.value;
+  return idx === -1 ? null : snapshots.value[idx];
+});
+
+const previousSummary = computed<SnapshotSummary | null>(() => {
+  // List is newest-first; `previous` (older) is at index+1.
+  const idx = selectedIndex.value;
+  if (idx === -1) return null;
+  return snapshots.value[idx + 1] ?? null;
+});
+
+function selectStamp(stamp: string): void {
+  selectedStamp.value = stamp;
+}
+
+function clearSelection(): void {
+  selectedStamp.value = null;
+}
+
+function editorBadgeFor(editor: SnapshotSummary["editor"]): { label: string; className: string } {
+  if (editor === "llm") {
+    return { label: t("pluginWiki.history.editorBadgeLLM"), className: "bg-purple-50 text-purple-700" };
+  }
+  if (editor === "system") {
+    return { label: t("pluginWiki.history.editorBadgeSystem"), className: "bg-gray-100 text-gray-700" };
+  }
+  return { label: t("pluginWiki.history.editorBadgeUser"), className: "bg-blue-50 text-blue-700" };
+}
+
+function onRestored(): void {
+  emit("restored");
+  // After restore we expect the parent to switch tabs and the new
+  // restore snapshot is now the newest entry. Refresh the list so
+  // returning to History reflects the new state.
+  void loadList();
+  selectedStamp.value = null;
+}
+</script>
+
+<template>
+  <div class="flex-1 flex flex-col min-h-0" data-testid="wiki-history-tab">
+    <!-- Loading -->
+    <div v-if="loading" class="flex-1 flex items-center justify-center text-gray-400 text-sm">
+      <span class="material-icons animate-spin text-base mr-2">progress_activity</span>
+      {{ t("pluginWiki.history.loading") }}
+    </div>
+
+    <!-- Fetch error -->
+    <div v-else-if="fetchError" class="m-4 rounded border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700" data-testid="wiki-history-fetch-error">
+      {{ fetchError }}
+    </div>
+
+    <!-- Detail view (Q15=B: persists when user toggles tabs) -->
+    <HistoryDetail
+      v-else-if="selectedSummary !== null"
+      :slug="props.slug"
+      :summary="selectedSummary"
+      :previous-summary="previousSummary"
+      :current-body="props.currentBody"
+      :current-meta="props.currentMeta"
+      @back="clearSelection"
+      @restored="onRestored"
+    />
+
+    <!-- Empty state -->
+    <div
+      v-else-if="snapshots.length === 0"
+      class="flex-1 flex items-center justify-center px-6 text-gray-400 text-sm text-center"
+      data-testid="wiki-history-empty"
+    >
+      <p>{{ t("pluginWiki.history.empty") }}</p>
+    </div>
+
+    <!-- List view -->
+    <div v-else class="flex-1 overflow-y-auto" data-testid="wiki-history-list">
+      <button
+        v-for="entry in snapshots"
+        :key="entry.stamp"
+        type="button"
+        class="w-full text-left px-4 py-2 border-b border-gray-100 hover:bg-blue-50 transition-colors flex items-baseline gap-3"
+        :data-testid="`wiki-history-row-${entry.stamp}`"
+        @click="selectStamp(entry.stamp)"
+      >
+        <span :class="['inline-flex items-center px-2 h-5 rounded text-xs font-medium shrink-0', editorBadgeFor(entry.editor).className]">
+          {{ editorBadgeFor(entry.editor).label }}
+        </span>
+        <span class="text-sm text-gray-700 shrink-0" :title="formatSmartTime(entry.ts)">
+          {{ formatRelativeTime(entry.ts) }}
+        </span>
+        <span v-if="entry.reason" class="text-sm text-gray-500 truncate">{{ ` — ${entry.reason}` }}</span>
+      </button>
+    </div>
+  </div>
+</template>