@lmzhen/dsh-evolution-skill-history 0.13.6 → 0.14.0

package/README.md

@@ -1,6 +1,6 @@
 # @lmzhen/dsh-evolution-skill-history
 
-The web surface for skill content history: a left-sidebar panel row (**Skill history**) that lists the versions every skill write records, and the five loopback host routes it reads.
+The web surface for skill content history: a left-sidebar panel row (**Skill history**) that lists the versions every skill write records, and the six loopback host routes it reads.
 
 The **facts** belong to `@lmzhen/dsh-evolution-core` (which artifact a version holds, how the body chain and the support-file chain split) and the **only write** is `curator.undo`. This package maps a route to that seam and draws it; it owns no state of its own.
 
@@ -23,6 +23,7 @@ The label is a **thunk**: the sidebar re-reads it on every projection, so a lang
 | GET | `/api/dsh-evolution/skill-history/versions?name=` | the body chain and the support-file chain, split, each body row carrying its own `undoable` verdict |
 | POST | `/api/dsh-evolution/skill-history/undo` | `curator.undo(name, v?)` — the only write |
 | GET | `/api/dsh-evolution/skill-history/versions/diff?name=&v=` | one body version against its recorded predecessor, as line counts plus the windowed changed region |
+| GET | `/api/dsh-evolution/skill-history/versions/body?name=&v=` | one version's whole text, for the panel's preview; bounded by `MAX_BODY_CHARS` and flagged `truncated` |
 | GET | `/api/dsh-evolution/skill-history/health` | liveness probe for the client |
 
 Every route sits behind the platform's own /api fence, kept local because the canonical implementation is not part of that package's published surface: the **socket** must be loopback (authoritative; `X-Forwarded-For` is never trusted), the **Host** header must name a loopback authority, an explicit `sec-fetch-site: cross-site` marker is refused, and an attached **Origin** must be exactly this authority.
@@ -33,15 +34,23 @@ The row is **inert without a web server** (`ctx.get('webServer')`, not a declare
 
 ## What the panel shows
 
-**The left column** lists the skills that recorded versions, one row per skill: its name, how many versions it has, its own one-line description, clipped with an ellipsis (the listing already carried it) and the management state the marker probe reported. A **search box** filters that list by name or description — client state only, no route behind it.
+**The left column** lists the skills that recorded versions, one row per skill: its name, how many versions it has, its own one-line description, clipped with an ellipsis (the listing already carried it), the management state the marker probe reported and — on the description line, where it cannot squeeze the name — **when the content last changed**. That last fact comes from the index this route already reads (`latestVersionAt` across both chains); *last use* is a different fact and stays in the usage store. A **search box** filters that list by name or description — client state only, no route behind it.
 
-**The right pane** shows the selected skill's versions as two groups: **Body versions** (restorable) and **File versions** (history only, because a restore rewrites `SKILL.md`). A body row reads like a sentence rather than a dump — `v3  targeted edit  3 hours ago  (+1363 chars)`, where the absolute clock is the row's hover text — with a *current* capsule on the live content, **Restore this version** (an inline two-click confirmation, with a **Cancel** beside it once it is armed) on the others, and **Diff** expanding that version against its predecessor (lines added and removed, plus the changed region, marked truncated when it is long). After a restore the rows are read again — the restore itself is a new version — while the curator's result sentence stays on screen. **Refresh** re-reads the skill list and the open skill.
+**The right pane** shows the selected skill's versions as two groups: **Body versions** (restorable) and **File versions** (history only, because a restore rewrites `SKILL.md`). A support file's bytes land in the second group even when the entry wears the `baseline` label — a support write's predecessor is that FILE's previous content, not a body version — because the entry's `path` says which artifact it holds, and for an entry recorded before that field existed the link the support write left behind (`beforeHash`) says it instead. A body row reads like a sentence rather than a dump — `v3  targeted edit  3 hours ago  (+1363 chars)`, where the absolute clock is the row's hover text — with a *current* capsule on the live content, **Restore this version** (an inline two-click confirmation, with a **Cancel** beside it once it is armed) on the others, and **Diff** expanding that version against its predecessor (lines added and removed, plus the changed region, marked truncated when it is long). A support row names the file it holds (`references/notes.md`) once the entry records it, and says so plainly when it does not — entries written before the path was recorded have none, and the blob store cannot recover the name. After a restore the rows are read again — the restore itself is a new version — while the curator's result sentence stays on screen. **Refresh** re-reads the skill list and the open skill.
+
+**Preview** renders one version as a document, support files included (the body route above). Inside the diff view, **Source / Rendered** switches between the exact window the host computed and the same two sides rendered as Markdown — removed first, added second, each under a tinted edge. Block level on purpose: line-level interleaving of two rendered documents is a different, much larger problem, and the source view stays one click away. Only one row is expanded at a time (`expanded: {v, kind}`), and each kind keeps its own lazily-filled cache.
 
 While nothing is selected the pane says so — a line pointing at the left column, or the empty listing when no skill has a history yet.
 
-**The panel owns no rule and no arithmetic.** The host reports every row with its whole verdict — `undoable` (evolution-core's artifact classification against the live bytes), `actionKind` (a closed vocabulary key), `age` (a bucket plus a count), `charsDelta`, `summary` — and this half substitutes words from its locale dictionary and renders. The time, the action words and the sentences are therefore localized; the facts are computed once, host-side, so the panel and the slash commands cannot drift.
+**The panel owns no rule and no arithmetic.** The host reports every row with its whole verdict — `undoable` (evolution-core's `entryTarget` classification against the live bytes), `actionKind` (a closed vocabulary key), `age` (a bucket plus a count), `charsDelta`, `summary` — and this half substitutes words from its locale dictionary and renders. The time, the action words and the sentences are therefore localized; the facts are computed once, host-side, so the panel and the slash commands cannot drift.
+
+**Appearance follows the platform's tokens, not its modules.** The panel carries its own stylesheet (`src/client/styles.ts`, injected once behind `data-plugin-css`) and copies its metrics from the platform's own components — the command card's `<pre>` for the diff block, the sidebar row's hover and focus ring for the controls, and the theme's semantic state pair (`--dsw-alias-state-success-primary` / `--dsw-alias-state-error-primary`) for the diff's added and removed lines — while type follows the shell rather than the conversation: the panel is one relative step below the shell's chrome size (`calc(1em - 1px)`, never the conversation-content setting) and steps again inside itself — `calc(1em + 2px)` for the title, `calc(1em - 1px)` for a group label. Only the diff block takes the platform's code-block token — it renders content, not chrome. The setting behind `--dsh-content-font-size*` is documented as affecting conversation content only, so the panel deliberately does not follow it. Two platform seams are reached differently, and the difference is deliberate. **Controls and styles are drawn here**, because a STATIC import of the platform's control package cannot compile from this tree: the workspace tsconfig maps the specifier to platform sources (`TS6059`/`TS6307`) and this package's `react.d.ts` shadows the real React types (`TS2305`); an ambient `declare module` for that specifier loses to the paths mapping. **The Markdown renderer is borrowed at runtime instead**: `src/client/markdown.ts` is the one seam, taking `MarkdownText` from `@deepseek-ai/dsh-client-ui-primitives` — a `PLATFORM_MODULES` row every dynamic bundle can `require`, exactly like `react` — through the loader-provided `require` (the bundler keeps `@deepseek-ai/*` external, so nothing is inlined and no dependency is installed). It renders with the platform's own mdast pipeline and the shell's own stylesheet, and when the row is absent the seam reports `{ok: false}` and every caller falls back to plain text: a missing renderer degrades a view, never the panel. `verify-arch-guards` rule **N24** keeps the drawn half honest — no literal `font-size`/`font`/`font-family` and no literal colour under `src/client`, only `var(--…)`, `calc(…)` or a CSS-wide keyword. The roll call of what the panel deliberately does not do is in `## Known limitations and deferred work`.
+
+## Where the boundaries are
+
+**Restore is confirmed here and deliberately not in the CLI.** The panel's only write is a two-click confirmation with its own Cancel; `/evolution skill undo` keeps no prompt at all, because typing the command IS the intent and the face has to stay scriptable. That asymmetry is a decision, not an oversight — it is written down so the question does not reopen.
 
-**Appearance follows the platform's tokens, not its modules.** The panel carries its own stylesheet (`src/client/styles.ts`, injected once behind `data-plugin-css`) and copies its metrics from the platform's own components — the command card's `<pre>` for the diff block, the sidebar row's hover and focus ring for the controls, and the theme's semantic state pair (`--dsw-alias-state-success-primary` / `--dsw-alias-state-error-primary`) for the diff's added and removed lines — while type follows the shell rather than the conversation: the panel is one relative step below the shell's chrome size (`calc(1em - 1px)`, never the conversation-content setting) and steps again inside itself — `calc(1em + 2px)` for the title, `calc(1em - 1px)` for a group label. Only the diff block takes the platform's code-block token — it renders content, not chrome. The setting behind `--dsh-content-font-size*` is documented as affecting conversation content only, so the panel deliberately does not follow it. Importing the platform's control package is NOT possible from here without splitting this package's compiler faces: the specifier is path-mapped to source, and `tsc -b` then refuses the foreign project (host/client face split, `react` devDependencies and a CI graph change would all be needed). The roll call of what the panel deliberately does not do is in `## Known limitations and deferred work`.
+**Browsing belongs to the skill centre; versions and restore belong here.** The panel lists the skills that recorded versions and shows nothing about curation or lifecycle beyond the marker facts the listing already carries, so it cannot grow into a second skill-management surface. The third-party skill browser (`dsh-client-ui-skill-explorer`) covers discovery; this panel covers what changed and how to go back.
 
 ## Build
 
@@ -53,10 +62,10 @@ This package adds **no model-visible content**: no prompt section, no tool schem
 
 ## Known limitations and deferred work
 
-- **No rendered spec.** The family's specs are Node-level and this package's client half cannot be rendered there, so the panel is covered by `tsc`, the client bundle build, the pure `tests/client-api.spec.ts` and a live pass on the installed artifact. A rendered spec (jsdom plus a driven fixture runtime) is the follow-up that would catch wiring in CI — 0.11.3 is the cost of not having one: the first installed pass restored the content correctly and re-read the rows correctly while the curator's result sentence never appeared, because the reload that follows a restore cleared the note state it had just set. No Node-level spec and no `tsc` can see the order of two state updates; only clicking the panel showed it.
+- **The rendered lane covers behaviour, not the assembled artifact.** `tests/panel.client.spec.ts` renders the panel under jsdom (result sentence survives the re-read, two-click confirmation with Cancel, a late rows reply for a skill the operator left is discarded, empty state and refusal) and `tests/client-apply.client.spec.ts` drives `apply` over a fake slot registry (one row, one keyed body, one locale namespace, and nothing left behind on dispose). What neither sees is the artifact the platform actually loads: module identity, the shell's stylesheet reaching the borrowed renderer, and the sidebar's own projection still need a live pass on an installed build.
 - **The list shows skills with recorded versions only.** A skill that never wrote through the library has no history to browse, so it does not appear; the tree-wide listing stays with the skill catalog.
 - **No quality and no last-use in the list.** Both are real and both are wanted, but they live in the curator's health view and the usage store; joining them into this listing would make the route a second home for facts it does not own. The row shows what the listing already holds (description, managed/protected markers, version count).
-- **No rendered component spec yet.** The panel's state machine (result sentence, two-click confirmation, the read ticket that discards a late reply, the lazy diff) is pinned by `tsc`, the bundle build and live passes; a jsdom lane is the follow-up, and it needs `react` in this package's devDependencies plus one `pnpm install` in the tree the specs run in.
+- **A support version can be read but not restored.** Its bytes and (from 0.14.0) its file name are recorded, and the preview shows them, but `undo` still refuses a support version by name: restoring one means deciding deletion semantics, path validation and what happens to a `scripts/` file, which is a design of its own.
 
 - **Support-file bytes are history only.** They share the index with the body, so they are listed and labelled, but `undo` refuses them by name — the bytes stay in the blob store for a hand copy.
 - **No occupancy row.** `.history` growth is documented in the evolution-core README; showing the size in the panel would promise a cleanup path the family has not designed (a whole-library reference count belongs to the curator).

package/lib/client.js

@@ -19,6 +19,7 @@ window.__ModuleLoader__.load({
 			skills: "/api/dsh-evolution/skill-history/skills",
 			versions: "/api/dsh-evolution/skill-history/versions",
 			diff: "/api/dsh-evolution/skill-history/versions/diff",
+			body: "/api/dsh-evolution/skill-history/versions/body",
 			undo: "/api/dsh-evolution/skill-history/undo"
 		};
 		/** A refusal the host reported, carrying its own sentence (the curator's, not ours). */
@@ -40,6 +41,7 @@ window.__ModuleLoader__.load({
 				skills: async () => await request(HOST_ROUTES.skills),
 				versions: async (name) => await request(HOST_ROUTES.versions + "?name=" + encodeURIComponent(name)),
 				diff: async (name, v) => await request(HOST_ROUTES.diff + "?name=" + encodeURIComponent(name) + "&v=" + String(v)),
+				body: async (name, v) => await request(HOST_ROUTES.body + "?name=" + encodeURIComponent(name) + "&v=" + String(v)),
 				undo: async (name, v) => {
 					return (await request(HOST_ROUTES.undo, {
 						method: "POST",
@@ -89,6 +91,15 @@ window.__ModuleLoader__.load({
 			"row.delta.up": "（+{n} 字符）",
 			"row.delta.down": "（-{n} 字符）",
 			"diff.show": "差异",
+			"diff.source": "源码",
+			"preview.show": "预览",
+			"preview.hide": "收起预览",
+			"preview.truncated": "正文过长，只显示前一部分",
+			"path.unrecorded": "（路径未记录）",
+			"diff.rendered": "渲染",
+			"markdown.copy": "复制",
+			"markdown.copied": "已复制",
+			"markdown.footnotes": "脚注",
 			"diff.hide": "收起差异",
 			"diff.loading": "读取差异…",
 			"diff.against": "与 v{n} 比较",
@@ -153,6 +164,15 @@ window.__ModuleLoader__.load({
 			"row.delta.up": "(+{n} chars)",
 			"row.delta.down": "(-{n} chars)",
 			"diff.show": "Diff",
+			"diff.source": "Source",
+			"preview.show": "Preview",
+			"preview.hide": "Hide preview",
+			"preview.truncated": "the body is long; only its beginning is shown",
+			"path.unrecorded": "(path not recorded)",
+			"diff.rendered": "Rendered",
+			"markdown.copy": "Copy",
+			"markdown.copied": "Copied",
+			"markdown.footnotes": "Footnotes",
 			"diff.hide": "Hide diff",
 			"diff.loading": "Loading the diff…",
 			"diff.against": "compared with v{n}",
@@ -268,10 +288,97 @@ window.__ModuleLoader__.load({
 			".evo-hist-button:focus-visible{outline:2px solid var(--dsw-alias-label-primary);outline-offset:-2px}",
 			".evo-hist-button[data-tone=\"primary\"]{border-color:var(--dsw-alias-brand-primary);color:var(--dsw-alias-brand-primary)}",
 			".evo-hist-pre{margin:6px 0 2px;padding:12px 16px;max-height:260px;overflow:auto;border:.5px solid var(--dsw-alias-border-l1);border-radius:12px;background:var(--dsw-alias-markdown-code-block);color:var(--dsw-alias-label-primary);font:var(--dsw-font-markdown-code-block-small);white-space:pre-wrap}",
+			".evo-hist-diff-head{display:flex;align-items:center;gap:8px}",
+			".evo-hist-diff-head .evo-hist-note{flex:1 1 auto;margin:0}",
+			".evo-hist-diff-toggle{display:flex;flex:none;align-items:center;gap:6px}",
+			".evo-hist-preview{margin:6px 0 2px;border:.5px solid var(--dsw-alias-border-l2);border-radius:12px;padding:4px 12px 12px;background:var(--dsw-alias-bg-layer-2);max-height:420px;overflow:auto}",
+			".evo-hist-render{display:flex;flex-direction:column;gap:8px;margin:6px 0 2px}",
+			".evo-hist-render-block{position:relative;padding:8px 12px 8px 22px;border:.5px solid var(--dsw-alias-border-l2);border-left-width:2px;border-radius:12px;background:var(--dsw-alias-markdown-code-block);overflow-x:auto}",
+			".evo-hist-render-del{border-left-color:var(--dsw-alias-state-error-primary)}",
+			".evo-hist-render-add{border-left-color:var(--dsw-alias-state-success-primary)}",
+			".evo-hist-render-tag{position:absolute;left:8px;top:8px;color:var(--dsw-alias-label-tertiary)}",
 			".evo-hist-pre-add{color:var(--dsw-alias-state-success-primary)}",
 			".evo-hist-pre-del{color:var(--dsw-alias-state-error-primary)}"
 		].join("\n");
 		//#endregion
+		//#region src/client/markdown.ts
+		/**
+		* The one seam onto the platform's Markdown renderer.
+		*
+		* Everything that renders Markdown in this panel goes through here, so the implementation can be
+		* swapped in one file: today it is the platform's own `MarkdownText` (reached through the client
+		* module table — zero bytes shipped, styles already in the shell, the same mdast pipeline the chat
+		* uses); if that ever stops being reachable, a self-drawn renderer replaces this module and nothing
+		* else changes.
+		*
+		* The words are NOT this module's: the face passes its locale dictionary in, because the platform
+		* component takes its chrome as props.
+		* @module @lmzhen/dsh-evolution-skill-history/client
+		*/
+		/** The module-table specifier; kept in one place so the seam is the only reader. */
+		const PLATFORM_UI_MODULE = "@deepseek-ai/dsh-client-ui-primitives";
+		/**
+		* The platform component, when this deployment's module table carries one.
+		*
+		* A module that IS reachable without the export is not a renderer: reporting a render for it would
+		* move the failure into the render itself, where only the slot's error boundary would catch it.
+		* @returns the component, or undefined when it cannot be reached.
+		*/
+		function markdownText() {
+			try {
+				const row = require(PLATFORM_UI_MODULE);
+				return typeof row.MarkdownText === "function" ? row.MarkdownText : void 0;
+			} catch {
+				return;
+			}
+		}
+		/**
+		* One document, rendered by the platform component under a labels object that survives re-renders.
+		*
+		* The component is memoized and the platform's own call sites memoize their labels for that reason:
+		* this panel re-renders on every keystroke in its search field, and a fresh labels object per render
+		* would take the whole document through the render again.
+		* @param props - the resolved component, the Markdown source, and the localized words.
+		* @returns the rendered document.
+		*/
+		function MarkdownBlock(props) {
+			const { component: MarkdownText, text, words } = props;
+			const { copy, copied, footnotes } = words;
+			return (0, react.createElement)(MarkdownText, {
+				text,
+				labels: (0, react.useMemo)(() => ({
+					code: {
+						copyLabel: copy,
+						copiedLabel: copied
+					},
+					footnotes
+				}), [
+					copy,
+					copied,
+					footnotes
+				])
+			});
+		}
+		/**
+		* Render one Markdown document to an element tree.
+		* @param text - the Markdown source (already bounded by the caller).
+		* @param words - the localized Markdown chrome.
+		* @returns the element, or `{ ok: false }` when the platform renderer is not reachable (the caller
+		*   then keeps its own source view: a missing renderer degrades the view, never the panel).
+		*/
+		function renderMarkdown(text, words) {
+			const component = markdownText();
+			if (component === void 0) return { ok: false };
+			return {
+				ok: true,
+				node: (0, react.createElement)(MarkdownBlock, {
+					component,
+					text,
+					words
+				})
+			};
+		}
+		//#endregion
 		//#region src/client/Panel.ts
 		/**
 		* The skill-history panel: the skills that recorded versions, the two chains of the selected skill,
@@ -318,6 +425,21 @@ window.__ModuleLoader__.load({
 			if (row.actionKind === "delete") return face.t("action.delete.note");
 			if (row.actionKind === "archive") return face.t("action.archive.note");
 		}
+		/**
+		* The lazy-read cache without one key.
+		*
+		* A read that a later toggle superseded must leave nothing behind: `loading` is not an answer, and
+		* the cache also serves as the "do not read twice" guard, so an abandoned entry would refuse every
+		* later read of that row and leave it saying "loading" until the page is reloaded.
+		* @param current - the cache.
+		* @param key - the version whose entry is dropped.
+		* @returns a new cache without that key.
+		*/
+		function without(current, key) {
+			const next = new Map(current);
+			next.delete(key);
+			return next;
+		}
 		/** The relative-time sentence for one row's bucket. */
 		function ageText(face, age) {
 			if (age.unit === "now") return face.t("time.now");
@@ -349,8 +471,47 @@ window.__ModuleLoader__.load({
 			}
 			return (0, react.createElement)("pre", { className: "evo-hist-pre" }, rows.length === 0 ? "±" : rows);
 		}
+		/**
+		* The same diff, both sides rendered as Markdown and stacked: the removed text first, then the
+		* added one. Block level on purpose — line-level interleaving of two rendered documents is a
+		* different (and much larger) problem, and the source view stays one click away for exact bytes.
+		* @param face - copy plus the data callbacks.
+		* @param diff - the windowed change the host reported.
+		* @returns the stacked blocks.
+		*/
+		function renderedBlocks(face, diff) {
+			const blocks = [];
+			for (const [index, hunk] of diff.hunks.entries()) {
+				if (hunk.oldText !== "") {
+					const side = renderedSide(face, "−", "del", hunk.oldText);
+					if (side === null) return null;
+					blocks.push((0, react.createElement)("div", { key: "del-" + String(index) }, side));
+				}
+				if (hunk.newText !== "") {
+					const side = renderedSide(face, "+", "add", hunk.newText);
+					if (side === null) return null;
+					blocks.push((0, react.createElement)("div", { key: "add-" + String(index) }, side));
+				}
+			}
+			return blocks.length === 0 ? null : blocks;
+		}
+		/**
+		* One diff in the mode the reader asked for, degrading to the source view when the renderer is out.
+		* @param face - copy plus the data callbacks.
+		* @param diff - the windowed change the host reported.
+		* @param mode - source or rendered.
+		* @returns the element to draw.
+		*/
+		function diffView(face, diff, mode) {
+			if (mode === "rendered") {
+				const blocks = renderedBlocks(face, diff);
+				if (blocks !== null) return (0, react.createElement)("div", { className: "evo-hist-render" }, blocks);
+			}
+			return diffBlock(diff);
+		}
 		/** One version row: what happened, when, how big, and what it is against. */
-		function versionRow(face, row, confirming, openDiff, diff, restore, cancelRestore, toggleDiff) {
+		function versionRow(face, row, confirming, expanded, diff, body, restore, cancelRestore, toggle) {
+			const showing = (kind) => expanded !== void 0 && expanded.v === row.v && expanded.kind === kind;
 			const parts = [
 				(0, react.createElement)("span", {
 					key: "v",
@@ -366,6 +527,15 @@ window.__ModuleLoader__.load({
 					title: localTime(row.at)
 				}, ageText(face, row.age))
 			];
+			if (row.path !== void 0) parts.push((0, react.createElement)("span", {
+				key: "path",
+				className: "evo-hist-row-meta",
+				title: row.path
+			}, row.path));
+			else if (row.actionKind === "support-write" || row.actionKind === "support-remove") parts.push((0, react.createElement)("span", {
+				key: "path",
+				className: "evo-hist-row-meta"
+			}, face.t("path.unrecorded")));
 			const delta = deltaText(face, row);
 			if (delta !== null) parts.push((0, react.createElement)("span", {
 				key: "delta",
@@ -400,27 +570,90 @@ window.__ModuleLoader__.load({
 				type: "button",
 				className: "evo-hist-button",
 				onClick: () => {
-					toggleDiff(row.v);
+					toggle(row.v, "diff");
 				}
-			}, openDiff === row.v ? face.t("diff.hide") : face.t("diff.show")));
+			}, showing("diff") ? face.t("diff.hide") : face.t("diff.show")));
+			actions.push((0, react.createElement)("button", {
+				key: "preview",
+				type: "button",
+				className: "evo-hist-button",
+				onClick: () => {
+					toggle(row.v, "preview");
+				}
+			}, showing("preview") ? face.t("preview.hide") : face.t("preview.show")));
 			return (0, react.createElement)("div", {
 				key: String(row.v),
 				className: "evo-hist-row"
-			}, (0, react.createElement)("div", { className: "evo-hist-row-body" }, (0, react.createElement)("div", { className: "evo-hist-row-title" }, parts), row.summary === void 0 || row.summary === "" ? null : (0, react.createElement)("div", { className: "evo-hist-row-summary" }, row.summary), openDiff === row.v && diff !== void 0 ? diffBody(face, diff) : null), (0, react.createElement)("div", { className: "evo-hist-actions" }, actions));
+			}, (0, react.createElement)("div", { className: "evo-hist-row-body" }, (0, react.createElement)("div", { className: "evo-hist-row-title" }, parts), row.summary === void 0 || row.summary === "" ? null : (0, react.createElement)("div", { className: "evo-hist-row-summary" }, row.summary), showing("diff") && diff !== void 0 ? (0, react.createElement)(DiffBody, {
+				face,
+				diff
+			}) : null, showing("preview") && body !== void 0 ? (0, react.createElement)(BodyView, {
+				face,
+				body
+			}) : null), (0, react.createElement)("div", { className: "evo-hist-actions" }, actions));
+		}
+		/** One rendered side of a diff: an "old" or "new" block under a tinted edge. */
+		function renderedSide(face, mark, side, text) {
+			const rendered = renderMarkdown(text, face.markdownWords);
+			if (!rendered.ok) return null;
+			return (0, react.createElement)("div", { className: "evo-hist-render-block evo-hist-render-" + side }, (0, react.createElement)("span", { className: "evo-hist-render-tag" }, mark), rendered.node);
 		}
-		/** The expanded body of one row: the diff, a loading line, or the refusal. */
-		function diffBody(face, diff) {
+		/**
+		* One version read as a document: the platform renderer when it is there, plain text when it is not.
+		* A preview therefore degrades to the exact bytes instead of blanking.
+		* @param props - the face and the body state to draw.
+		* @returns the element.
+		*/
+		function BodyView(props) {
+			const { face, body } = props;
+			if (body.kind === "loading") return (0, react.createElement)("p", { className: "evo-hist-note" }, face.t("diff.loading"));
+			if (body.kind === "failed") return (0, react.createElement)("p", {
+				className: "evo-hist-note",
+				"data-error": "true"
+			}, body.message);
+			const rendered = renderMarkdown(body.body.text, face.markdownWords);
+			return (0, react.createElement)("div", { className: "evo-hist-preview" }, body.body.truncated ? (0, react.createElement)("p", { className: "evo-hist-note" }, face.t("preview.truncated")) : null, rendered.ok ? rendered.node : (0, react.createElement)("pre", { className: "evo-hist-pre" }, body.body.text));
+		}
+		/**
+		* The expanded body of one row: the diff, a loading line, or the refusal.
+		*
+		* The source/rendered toggle is LOCAL to this view: which row is open is the panel's business, but
+		* how one open diff is displayed is not, so the state does not climb into the parent.
+		* @param props - the face and the diff state to draw.
+		* @returns the element.
+		*/
+		function DiffBody(props) {
+			const { face, diff } = props;
+			const [mode, setMode] = (0, react.useState)("source");
 			if (diff.kind === "loading") return (0, react.createElement)("p", { className: "evo-hist-note" }, face.t("diff.loading"));
 			if (diff.kind === "failed") return (0, react.createElement)("p", {
 				className: "evo-hist-note",
 				"data-error": "true"
 			}, diff.message);
-			return (0, react.createElement)("div", null, (0, react.createElement)("p", { className: "evo-hist-note" }, (diff.diff.against === null ? face.t("diff.first") : face.format("diff.against", { n: diff.diff.against })) + " · " + face.format("diff.added", { n: diff.diff.linesAdded }) + " · " + face.format("diff.removed", { n: diff.diff.linesRemoved }) + (diff.diff.truncated ? " · " + face.t("diff.truncated") : "")), diffBlock(diff.diff));
+			const against = diff.diff.against === null ? face.t("diff.first") : face.format("diff.against", { n: diff.diff.against });
+			const toggle = (0, react.createElement)("div", { className: "evo-hist-diff-toggle" }, (0, react.createElement)("button", {
+				key: "source",
+				type: "button",
+				className: "evo-hist-button",
+				"data-tone": mode === "source" ? "primary" : void 0,
+				onClick: () => {
+					setMode("source");
+				}
+			}, face.t("diff.source")), (0, react.createElement)("button", {
+				key: "rendered",
+				type: "button",
+				className: "evo-hist-button",
+				"data-tone": mode === "rendered" ? "primary" : void 0,
+				onClick: () => {
+					setMode("rendered");
+				}
+			}, face.t("diff.rendered")));
+			return (0, react.createElement)("div", null, (0, react.createElement)("div", { className: "evo-hist-diff-head" }, (0, react.createElement)("p", { className: "evo-hist-note" }, against + " · " + face.format("diff.added", { n: diff.diff.linesAdded }) + " · " + face.format("diff.removed", { n: diff.diff.linesRemoved }) + (diff.diff.truncated ? " · " + face.t("diff.truncated") : "")), toggle), diffView(face, diff.diff, mode));
 		}
 		/** One group: a heading, an optional note, and its rows. */
 		function group(face, title, entries, noteText, state) {
 			if (entries.length === 0) return null;
-			return (0, react.createElement)("section", { key: title }, (0, react.createElement)("h3", { className: "evo-hist-group" }, title), noteText === void 0 ? null : (0, react.createElement)("p", { className: "evo-hist-hint" }, noteText), ...entries.map((entry) => versionRow(face, entry, state.confirming, state.openDiff, state.diffs.get(entry.v), state.restore, state.cancelRestore, state.toggleDiff)));
+			return (0, react.createElement)("section", { key: title }, (0, react.createElement)("h3", { className: "evo-hist-group" }, title), noteText === void 0 ? null : (0, react.createElement)("p", { className: "evo-hist-hint" }, noteText), ...entries.map((entry) => versionRow(face, entry, state.confirming, state.expanded, state.diffs.get(entry.v), state.bodies.get(entry.v), state.restore, state.cancelRestore, state.toggle)));
 		}
 		/**
 		* The panel body.
@@ -435,8 +668,9 @@ window.__ModuleLoader__.load({
 			const [noteError, setNoteError] = (0, react.useState)(false);
 			const [pending, setPending] = (0, react.useState)(void 0);
 			const [query, setQuery] = (0, react.useState)("");
-			const [openDiff, setOpenDiff] = (0, react.useState)(void 0);
+			const [expanded, setExpanded] = (0, react.useState)(void 0);
 			const [diffs, setDiffs] = (0, react.useState)(/* @__PURE__ */ new Map());
+			const [bodies, setBodies] = (0, react.useState)(/* @__PURE__ */ new Map());
 			const readTicket = (0, react.useRef)(0);
 			const failed = (error) => {
 				setNoteError(true);
@@ -462,8 +696,9 @@ window.__ModuleLoader__.load({
 				setSelected(name);
 				setPayload(void 0);
 				setPending(void 0);
-				setOpenDiff(void 0);
+				setExpanded(void 0);
 				setDiffs(/* @__PURE__ */ new Map());
+				setBodies(/* @__PURE__ */ new Map());
 				face.loadVersions(name).then((next) => {
 					if (readTicket.current === ticket) setPayload(next);
 				}).catch((error) => {
@@ -499,30 +734,67 @@ window.__ModuleLoader__.load({
 					succeeded(message);
 				}).catch(failed);
 			};
-			const toggleDiff = (v) => {
+			/**
+			* Expand one row, or collapse it: one row is open at a time, and each kind keeps its own lazy read.
+			* @param v - the version whose row was clicked.
+			* @param kind - which expansion the row should show.
+			*/
+			const toggle = (v, kind) => {
 				if (selected === void 0) return;
-				if (openDiff === v) {
-					setOpenDiff(void 0);
+				if (expanded !== void 0 && expanded.v === v && expanded.kind === kind) {
+					setExpanded(void 0);
 					return;
 				}
-				setOpenDiff(v);
-				if (diffs.has(v)) return;
+				setExpanded({
+					v,
+					kind
+				});
+				if (kind === "diff" ? diffs.has(v) : bodies.has(v)) return;
 				const name = selected;
 				const ticket = readTicket.current + 1;
 				readTicket.current = ticket;
-				setDiffs((current) => new Map(current).set(v, { kind: "loading" }));
-				face.loadDiff(name, v).then((diff) => {
-					if (readTicket.current !== ticket) return;
-					setDiffs((current) => new Map(current).set(v, {
+				const failedMessage = (error) => face.t("error") + ": " + (error instanceof Error ? error.message : String(error));
+				if (kind === "diff") {
+					setDiffs((current) => new Map(current).set(v, { kind: "loading" }));
+					face.loadDiff(name, v).then((diff) => {
+						if (readTicket.current !== ticket) {
+							setDiffs((current) => without(current, v));
+							return;
+						}
+						setDiffs((current) => new Map(current).set(v, {
+							kind: "ready",
+							diff
+						}));
+					}).catch((error) => {
+						if (readTicket.current !== ticket) {
+							setDiffs((current) => without(current, v));
+							return;
+						}
+						setDiffs((current) => new Map(current).set(v, {
+							kind: "failed",
+							message: failedMessage(error)
+						}));
+					});
+					return;
+				}
+				setBodies((current) => new Map(current).set(v, { kind: "loading" }));
+				face.loadBody(name, v).then((body) => {
+					if (readTicket.current !== ticket) {
+						setBodies((current) => without(current, v));
+						return;
+					}
+					setBodies((current) => new Map(current).set(v, {
 						kind: "ready",
-						diff
+						body
 					}));
 				}).catch((error) => {
-					if (readTicket.current !== ticket) return;
-					const message = face.t("error") + ": " + (error instanceof Error ? error.message : String(error));
-					setDiffs((current) => new Map(current).set(v, {
+					if (readTicket.current !== ticket) {
+						setBodies((current) => without(current, v));
+						return;
+					}
+					setBodies((current) => new Map(current).set(v, {
 						kind: "failed",
-						message
+						message: failedMessage(error)
 					}));
 				});
 			};
@@ -536,11 +808,12 @@ window.__ModuleLoader__.load({
 			};
 			const rowState = {
 				confirming: pending,
-				openDiff,
+				expanded,
 				diffs,
+				bodies,
 				restore,
 				cancelRestore,
-				toggleDiff
+				toggle
 			};
 			return (0, react.createElement)("div", { className: "evo-hist-root" }, (0, react.createElement)("aside", { className: "evo-hist-aside" }, (0, react.createElement)("div", { className: "evo-hist-search" }, (0, react.createElement)("input", {
 				type: "search",
@@ -559,7 +832,7 @@ window.__ModuleLoader__.load({
 				onClick: () => {
 					open(skill.name);
 				}
-			}, (0, react.createElement)("span", { className: "evo-hist-skill-line" }, (0, react.createElement)("span", { className: "evo-hist-skill-name" }, skill.name), (0, react.createElement)("span", { className: "evo-hist-skill-count" }, String(skill.versions) + " " + face.t("versions.count"))), (0, react.createElement)("span", { className: "evo-hist-skill-desc" }, oneLine(skill.description) + " · " + face.t(stateKey(skill))))))), (0, react.createElement)("div", { className: "evo-hist-main" }, (0, react.createElement)("div", { className: "evo-hist-head" }, (0, react.createElement)("h2", { className: "evo-hist-title" }, face.t("title")), (0, react.createElement)("button", {
+			}, (0, react.createElement)("span", { className: "evo-hist-skill-line" }, (0, react.createElement)("span", { className: "evo-hist-skill-name" }, skill.name), (0, react.createElement)("span", { className: "evo-hist-skill-count" }, String(skill.versions) + " " + face.t("versions.count"))), (0, react.createElement)("span", { className: "evo-hist-skill-desc" }, oneLine(skill.description) + " · " + face.t(stateKey(skill)) + (skill.age === null ? "" : " · " + ageText(face, skill.age))))))), (0, react.createElement)("div", { className: "evo-hist-main" }, (0, react.createElement)("div", { className: "evo-hist-head" }, (0, react.createElement)("h2", { className: "evo-hist-title" }, face.t("title")), (0, react.createElement)("button", {
 				type: "button",
 				className: "evo-hist-button",
 				onClick: refresh
@@ -679,7 +952,13 @@ window.__ModuleLoader__.load({
 						loadSkills: api.skills,
 						loadVersions: api.versions,
 						loadDiff: api.diff,
-						undo: api.undo
+						loadBody: api.body,
+						undo: api.undo,
+						markdownWords: {
+							copy: t("markdown.copy"),
+							copied: t("markdown.copied"),
+							footnotes: t("markdown.footnotes")
+						}
 					})
 				}, SkillHistoryPanel);
 			});

package/lib/index.js

@@ -1,7 +1,7 @@
-import { contentHash, elapsedSince, errorText, partitionVersions, textDiffFacts, versionActionKind } from "@lmzhen/dsh-evolution-core";
+import { contentHash, elapsedSince, errorText, latestVersionAt, partitionVersions, textDiffFacts, versionActionKind } from "@lmzhen/dsh-evolution-core";
 //#region lib/types/routes.js
 /**
-* The skill-history HTTP surface: five loopback routes over the curator's read/write seam (four reads plus the one write).
+* The skill-history HTTP surface: six loopback routes over the curator's read/write seam (five reads plus the one write).
 *
 * Layering: this module maps a route to a USE CASE and does nothing else. "Which artifact does this
 * version hold" and "how do the two chains split" live in evolution-core; the only write is
@@ -13,9 +13,15 @@ const SKILL_HISTORY_ROUTES = {
 	skills: "/api/dsh-evolution/skill-history/skills",
 	versions: "/api/dsh-evolution/skill-history/versions",
 	diff: "/api/dsh-evolution/skill-history/versions/diff",
+	body: "/api/dsh-evolution/skill-history/versions/body",
 	undo: "/api/dsh-evolution/skill-history/undo",
 	health: "/api/dsh-evolution/skill-history/health"
 };
+/**
+* How much of one version's body the read route hands back. A bound on the ANSWER, not on what the
+* deployment may store: a long skill arrives as its head plus `truncated`, so the reader is told.
+*/
+const MAX_BODY_CHARS = 2e4;
 function header(request, name) {
 	const value = request.headers[name];
 	return typeof value === "string" ? value : void 0;
@@ -139,16 +145,20 @@ function makeSkillHistoryRoutes(services) {
 				await withCurator(res, async (curator) => {
 					const listed = await curator.skills.list();
 					const withHistory = [];
+					const now = Date.now();
 					for (const skill of listed) {
 						const versions = await curator.skills.listVersions(skill.name);
 						if (versions.length === 0) continue;
+						const lastAt = latestVersionAt(versions);
 						withHistory.push({
 							name: skill.name,
 							versions: versions.length,
 							description: skill.description,
 							managed: skill.managed,
 							protectedBy: skill.protectedBy,
-							protectionUnknown: skill.protectionUnknown
+							protectionUnknown: skill.protectionUnknown,
+							lastAt,
+							age: lastAt === null ? null : elapsedSince(lastAt, now)
 						});
 					}
 					writeJson(res, 200, {
@@ -252,6 +262,46 @@ function makeSkillHistoryRoutes(services) {
 				});
 			}
 		},
+		{
+			kind: "exact",
+			path: SKILL_HISTORY_ROUTES.body,
+			handler: async (req, res) => {
+				if (!guard(req, res, "GET")) return;
+				const params = new URL(req.url ?? "/", "http://loopback").searchParams;
+				const name = params.get("name")?.trim() ?? "";
+				const rawV = params.get("v")?.trim() ?? "";
+				const v = Number.parseInt(rawV, 10);
+				if (name === "" || !/^\d+$/.test(rawV) || !Number.isInteger(v) || v < 1) {
+					writeJson(res, 400, {
+						ok: false,
+						code: "bad-request",
+						message: "name and a positive integer v are required"
+					});
+					return;
+				}
+				await withCurator(res, async (curator) => {
+					const text = await curator.skills.readVersion(name, v);
+					if (text === null) {
+						writeJson(res, 404, {
+							ok: false,
+							code: "not-found",
+							message: "the stored content of that version could not be read"
+						});
+						return;
+					}
+					const truncated = text.length > MAX_BODY_CHARS;
+					writeJson(res, 200, {
+						ok: true,
+						data: {
+							v,
+							text: truncated ? text.slice(0, MAX_BODY_CHARS) : text,
+							chars: text.length,
+							truncated
+						}
+					});
+				});
+			}
+		},
 		{
 			kind: "exact",
 			path: SKILL_HISTORY_ROUTES.undo,

package/lib/types/client/Panel.d.ts

@@ -14,7 +14,8 @@
  * @module @lmzhen/dsh-evolution-skill-history/client
  */
 import { type ReactNode } from 'react';
-import type { SkillRow, VersionDiffRow, VersionsPayload } from './api.ts';
+import type { SkillRow, VersionBodyRow, VersionDiffRow, VersionsPayload } from './api.ts';
+import { type MarkdownWords } from './markdown.ts';
 /** The face the plugin hands the component: copy plus callbacks, never a service handle. */
 export interface PanelFace {
     readonly t: (key: string) => string;
@@ -23,7 +24,10 @@ export interface PanelFace {
     readonly loadSkills: () => Promise<readonly SkillRow[]>;
     readonly loadVersions: (name: string) => Promise<VersionsPayload>;
     readonly loadDiff: (name: string, v: number) => Promise<VersionDiffRow>;
+    readonly loadBody: (name: string, v: number) => Promise<VersionBodyRow>;
     readonly undo: (name: string, v?: number) => Promise<string>;
+    /** The two words the platform Markdown renderer needs; the dictionary owns them. */
+    readonly markdownWords: MarkdownWords;
 }
 /**
  * The panel body.

package/lib/types/client/api.d.ts

@@ -11,6 +11,7 @@ export declare const HOST_ROUTES: {
     readonly skills: "/api/dsh-evolution/skill-history/skills";
     readonly versions: "/api/dsh-evolution/skill-history/versions";
     readonly diff: "/api/dsh-evolution/skill-history/versions/diff";
+    readonly body: "/api/dsh-evolution/skill-history/versions/body";
     readonly undo: "/api/dsh-evolution/skill-history/undo";
 };
 /** One changed region, as the host reports it (the platform diff card's own shape). */
@@ -49,6 +50,11 @@ export interface VersionRow {
     };
     /** The one line the optional summarizer wrote, when the deployment turned it on. */
     readonly summary?: string;
+    /**
+     * Which support file these bytes came from, relative to the skill directory. Absent on body rows,
+     * and absent on every support row recorded before the field existed (the bytes carry no name).
+     */
+    readonly path?: string;
 }
 /** One skill that has recorded versions, with what the listing already knows about it. */
 export interface SkillRow {
@@ -58,6 +64,22 @@ export interface SkillRow {
     readonly managed: boolean;
     readonly protectedBy: string | null;
     readonly protectionUnknown: boolean;
+    /** When this skill's content last changed (either chain), or null when the index is empty. */
+    readonly lastAt: string | null;
+    /** That moment as a bucket plus a count; null exactly when `lastAt` is. */
+    readonly age: {
+        readonly unit: string;
+        readonly n: number;
+    } | null;
+}
+/** One version's whole body, as the read route hands it over. */
+export interface VersionBodyRow {
+    readonly v: number;
+    /** The body, or its head when `truncated` — the reader is told rather than silently cut. */
+    readonly text: string;
+    /** How long the stored body is, whatever came back. */
+    readonly chars: number;
+    readonly truncated: boolean;
 }
 /** The two chains, plus the live body hash the panel marks as "current". */
 export interface VersionsPayload {
@@ -71,6 +93,7 @@ export interface SkillHistoryApi {
     readonly versions: (name: string) => Promise<VersionsPayload>;
     readonly undo: (name: string, v?: number) => Promise<string>;
     readonly diff: (name: string, v: number) => Promise<VersionDiffRow>;
+    readonly body: (name: string, v: number) => Promise<VersionBodyRow>;
 }
 /** A refusal the host reported, carrying its own sentence (the curator's, not ours). */
 export declare class SkillHistoryRefusal extends Error {

package/lib/types/client/markdown.d.ts

@@ -0,0 +1,23 @@
+/** The three localized words the platform renderer needs; the face owns them. */
+export interface MarkdownWords {
+    readonly copy: string;
+    readonly copied: string;
+    /** The heading of the generated footnote section. */
+    readonly footnotes: string;
+}
+/** One render attempt: the element, or the news that this deployment has no renderer. */
+export type MarkdownRender = {
+    readonly ok: true;
+    readonly node: unknown;
+} | {
+    readonly ok: false;
+};
+/**
+ * Render one Markdown document to an element tree.
+ * @param text - the Markdown source (already bounded by the caller).
+ * @param words - the localized Markdown chrome.
+ * @returns the element, or `{ ok: false }` when the platform renderer is not reachable (the caller
+ *   then keeps its own source view: a missing renderer degrades the view, never the panel).
+ */
+export declare function renderMarkdown(text: string, words: MarkdownWords): MarkdownRender;
+//# sourceMappingURL=markdown.d.ts.map

package/lib/types/routes.d.ts

@@ -1,5 +1,5 @@
 /**
- * The skill-history HTTP surface: five loopback routes over the curator's read/write seam (four reads plus the one write).
+ * The skill-history HTTP surface: six loopback routes over the curator's read/write seam (five reads plus the one write).
  *
  * Layering: this module maps a route to a USE CASE and does nothing else. "Which artifact does this
  * version hold" and "how do the two chains split" live in evolution-core; the only write is
@@ -14,11 +14,17 @@ export declare const SKILL_HISTORY_ROUTES: {
     readonly skills: "/api/dsh-evolution/skill-history/skills";
     readonly versions: "/api/dsh-evolution/skill-history/versions";
     readonly diff: "/api/dsh-evolution/skill-history/versions/diff";
+    readonly body: "/api/dsh-evolution/skill-history/versions/body";
     readonly undo: "/api/dsh-evolution/skill-history/undo";
     readonly health: "/api/dsh-evolution/skill-history/health";
 };
 /** Largest request body these routes accept (the undo payload is a name and a number). */
 export declare const MAX_REQUEST_BODY_BYTES: number;
+/**
+ * How much of one version's body the read route hands back. A bound on the ANSWER, not on what the
+ * deployment may store: a long skill arrives as its head plus `truncated`, so the reader is told.
+ */
+export declare const MAX_BODY_CHARS = 20000;
 /** The request facts the trust fence reads: a Node request, or the same fields in a spec fixture. */
 export interface FenceRequest {
     readonly headers: Record<string, string | string[] | undefined>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lmzhen/dsh-evolution-skill-history",
   "description": "Web surface for skill content history: loopback host routes plus the sidebar panel (community build)",
-  "version": "0.13.6",
+  "version": "0.14.0",
   "publishConfig": {
     "access": "public"
   },
@@ -30,21 +30,23 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@lmzhen/dsh-evolution-core": "^0.13.6"
+    "@lmzhen/dsh-evolution-core": "^0.14.0"
   },
   "peerDependencies": {
     "@deepseek-ai/cordis": "^4.0.1",
     "@deepseek-ai/dsh-host-webserver": "^0.1.5-rc.2",
     "react": "^18.2.0",
-    "@lmzhen/dsh-evolution-curator": "^0.13.6"
+    "@lmzhen/dsh-evolution-curator": "^0.14.0"
   },
   "devDependencies": {
     "@deepseek-ai/cordis": "^4.0.1",
     "@deepseek-ai/dsh-host-webserver": "^0.1.5-rc.2",
-    "@lmzhen/dsh-evolution-core": "^0.13.6",
-    "@lmzhen/dsh-evolution-curator": "^0.13.6",
-    "@lmzhen/dsh-evolution-io": "^0.13.6",
-    "@lmzhen/dsh-evolution-io-node": "^0.13.6"
+    "@types/react": "~18.3.1",
+    "react": "^18.2.0",
+    "@lmzhen/dsh-evolution-core": "^0.14.0",
+    "@lmzhen/dsh-evolution-curator": "^0.14.0",
+    "@lmzhen/dsh-evolution-io": "^0.14.0",
+    "@lmzhen/dsh-evolution-io-node": "^0.14.0"
   },
   "dsh": {
     "client": {