@antelopejs/dms-ai 0.5.0 → 0.6.0

package/frontend-vue/app/chat/utils/markdown.ts

@@ -48,19 +48,27 @@ const LINK_REL = "noopener noreferrer";
 const NEWLINES = /\r\n?/g;
 const LINE_BREAK = "\n";
 
-const md = new MarkdownIt({
-	html: false,
-	linkify: true,
-	breaks: true,
-});
-
-md.validateLink = (url) => SAFE_URL.test(url.trim());
-
-md.renderer.rules.link_open = (tokens, idx, options, _env, self) => {
-	tokens[idx].attrSet("target", LINK_TARGET);
-	tokens[idx].attrSet("rel", LINK_REL);
-	return self.renderToken(tokens, idx, options);
-};
+/**
+ * The parser shared by every renderer: no raw HTML, safe links opening in a
+ * new tab, images shown as links. `breaks` alone differs between them.
+ */
+function createParser(breaks: boolean): MarkdownIt {
+	const parser = new MarkdownIt({ html: false, linkify: true, breaks });
+	parser.validateLink = (url) => SAFE_URL.test(url.trim());
+	parser.renderer.rules.link_open = (tokens, idx, options, _env, self) => {
+		tokens[idx].attrSet("target", LINK_TARGET);
+		tokens[idx].attrSet("rel", LINK_REL);
+		return self.renderToken(tokens, idx, options);
+	};
+	parser.renderer.rules.image = (tokens, idx, options, env, self) => {
+		const token = tokens[idx];
+		const src = token.attrGet("src") ?? "";
+		const alt = self.renderInlineAsText(token.children ?? [], options, env);
+		const label = parser.utils.escapeHtml(imageLinkLabel(alt, src));
+		return `<a href="${parser.utils.escapeHtml(src)}" target="${LINK_TARGET}" rel="${LINK_REL}">${label}</a>`;
+	};
+	return parser;
+}
 
 function imageDestination(src: string): string {
 	try {
@@ -75,13 +83,11 @@ function imageLinkLabel(alt: string, src: string): string {
 	return alt ? `${alt} (${destination})` : destination;
 }
 
-md.renderer.rules.image = (tokens, idx, options, env, self) => {
-	const token = tokens[idx];
-	const src = token.attrGet("src") ?? "";
-	const alt = self.renderInlineAsText(token.children ?? [], options, env);
-	const label = md.utils.escapeHtml(imageLinkLabel(alt, src));
-	return `<a href="${md.utils.escapeHtml(src)}" target="${LINK_TARGET}" rel="${LINK_REL}">${label}</a>`;
-};
+// A chat message keeps every newline the model wrote as a line break.
+const md = createParser(true);
+// A document (a SKILL.md) is hard-wrapped at a fixed column: a single newline
+// inside a paragraph is a CommonMark soft break, rendered as a space.
+const documentMd = createParser(false);
 
 let purifier: Purifier | null = null;
 
@@ -109,6 +115,16 @@ export function renderMarkdown(source: string): string {
 	return sanitize(md.render(normalize(source)));
 }
 
+/**
+ * A Markdown document (a SKILL.md) as sanitized HTML. Unlike
+ * {@link renderMarkdown}, a single newline inside a paragraph is a space, so a
+ * hard-wrapped source reflows to the reader's width; a blank line still starts
+ * a new paragraph.
+ */
+export function renderDocument(source: string): string {
+	return sanitize(documentMd.render(normalize(source)));
+}
+
 interface TopLevelBlock {
 	tokens: Token[];
 	startLine: number;

package/frontend-vue/app/components/ActivityDetail.vue

@@ -9,11 +9,8 @@ import { useAiData } from "../views/composables/useAiData";
 import { useAssistant } from "../views/composables/useAssistant";
 import { useViewFormat } from "../views/composables/useViewFormat";
 import { AI_PAGES, AI_ROUTES, CHANGE_SET_QUERY_KEY } from "../views/constants";
-import type {
-	ActivityDetailPayload,
-	ActivityRow,
-	RowNavigation,
-} from "../views/types";
+import type { RowNavigation } from "#dms-ui/app/types/row-navigation";
+import type { ActivityDetailPayload, ActivityRow } from "../views/types";
 import {
 	activityOutput,
 	argumentItems,

package/frontend-vue/app/components/ChatPanel.vue

@@ -173,9 +173,11 @@ onMounted(() => {
 	color: var(--ui-text-muted);
 }
 
+/* Sits where the panel header's close button does: centred in a header
+   as tall as the DMS navbar (28px is the small square button height). */
 .dms-ai-panel-close {
 	position: absolute;
-	top: 11px;
+	top: calc((var(--ui-header-height) - 28px) / 2);
 	right: 8px;
 }
 

package/frontend-vue/app/components/SkillDetail.vue

@@ -1,15 +1,25 @@
 <script setup lang="ts">
+import type { Tone } from "#dms-ui/app/types/tone";
 import { computed } from "vue";
-import { renderMarkdown } from "../chat/utils/markdown";
-import RowStepper from "../views/RowStepper.vue";
+import { renderDocument } from "../chat/utils/markdown";
 import { useAssistant } from "../views/composables/useAssistant";
 import { useViewFormat } from "../views/composables/useViewFormat";
-import type { RowNavigation, SkillRow } from "../views/types";
+import type { SkillRow } from "../views/types";
 import { skillLook } from "../views/utils/skills";
 
 interface Props {
 	rowData?: SkillRow;
-	navigation?: RowNavigation;
+}
+
+/** A fact of the skill: a status pill, an identifier (mono) or plain text. */
+interface SkillFact {
+	id: string;
+	label: string;
+	value: string;
+	type?: "status" | "mono";
+	tone?: Tone;
+	/** Draws a button copying the value. */
+	copy?: boolean;
 }
 
 const props = defineProps<Props>();
@@ -20,9 +30,9 @@ const assistant = useAssistant();
 
 const skill = computed(() => props.rowData);
 const look = computed(() => (skill.value ? skillLook(skill.value) : null));
-const html = computed(() => renderMarkdown(skill.value?.body ?? ""));
+const html = computed(() => renderDocument(skill.value?.body ?? ""));
 
-const facts = computed(() => {
+const facts = computed<SkillFact[]>(() => {
 	const current = skill.value;
 	if (!current || !look.value) return [];
 	return [
@@ -30,14 +40,21 @@ const facts = computed(() => {
 			id: "source",
 			label: t("dms_ai.views.skills.source_label"),
 			value: t(`dms_ai.views.skills.source.${current.source}`),
-			type: "status" as const,
+			type: "status",
 			tone: look.value.badgeTone,
 		},
+		{
+			id: "qualified",
+			label: t("dms_ai.views.skills.qualified_name_label"),
+			value: current.qualifiedName,
+			type: "mono",
+			copy: true,
+		},
 		{
 			id: "origin",
 			label: t("dms_ai.views.skills.origin_label"),
 			value: current.origin,
-			type: "mono" as const,
+			type: "mono",
 			copy: true,
 		},
 		{
@@ -67,22 +84,6 @@ function openLastConversation(): void {
 
 <template>
 	<div v-if="skill && look" class="flex min-h-full flex-col gap-5">
-		<RowStepper v-if="props.navigation" :navigation="props.navigation" />
-
-		<header class="flex items-start gap-3">
-			<DmsIconWell :icon="look.icon" :tone="look.tone" size="lg" />
-			<div class="min-w-0 flex-1">
-				<h3
-					class="text-highlighted truncate font-mono text-[15px] font-semibold"
-				>
-					{{ skill.name }}
-				</h3>
-				<p class="text-dimmed mt-0.5 truncate font-mono text-[11.5px]">
-					{{ skill.qualifiedName }}
-				</p>
-			</div>
-		</header>
-
 		<DmsBanner
 			v-if="skill.isShadowed"
 			size="sm"
@@ -95,9 +96,38 @@ function openLastConversation(): void {
 			"
 		/>
 
-		<DmsKeyValueList :items="facts" />
+		<!-- The drawer's header names the skill. The facts read as a record
+		     drawer's fields: the DMS form row, a label column beside a
+		     left-aligned value once the drawer is wide enough, the label above
+		     it on a phone. -->
+		<div class="grid gap-3">
+			<DmsFieldRow
+				v-for="fact in facts"
+				:key="fact.id"
+				:label="fact.label"
+				layout="form"
+				spacing="list"
+				:inset="false"
+			>
+				<div class="flex min-w-0 items-center gap-1.5 text-[13px]">
+					<DmsStatusPill
+						v-if="fact.type === 'status'"
+						:tone="fact.tone ?? 'neutral'"
+						:label="fact.value"
+					/>
+					<span
+						v-else
+						class="text-highlighted wrap-anywhere min-w-0"
+						:class="fact.type === 'mono' && 'font-mono text-[12.5px]'"
+					>
+						{{ fact.value }}
+					</span>
+					<DmsCopyButton v-if="fact.copy" :value="fact.value" class="-my-1" />
+				</div>
+			</DmsFieldRow>
+		</div>
 
-		<p class="text-muted text-[13px] leading-relaxed">
+		<p class="text-muted max-w-[76ch] text-[13px] leading-relaxed">
 			{{ skill.description }}
 		</p>
 
@@ -185,4 +215,20 @@ function openLastConversation(): void {
 	color: var(--ui-primary);
 	text-decoration: underline;
 }
+/* Running text keeps a readable measure in the wide sheet; code and tables
+   may use the whole width. */
+.dms-ai-skill-doc :deep(:is(p, ul, ol, blockquote, h1, h2, h3, h4, h5, h6)) {
+	max-width: 76ch;
+}
+.dms-ai-skill-doc :deep(table) {
+	margin: 0 0 8px;
+	border-collapse: collapse;
+	display: block;
+	overflow-x: auto;
+}
+.dms-ai-skill-doc :deep(:is(th, td)) {
+	padding: 4px 8px;
+	border: 1px solid var(--ui-border);
+	text-align: start;
+}
 </style>

package/frontend-vue/app/views/RowStepper.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { RowNavigation } from "./types";
+import type { RowNavigation } from "#dms-ui/app/types/row-navigation";
 
 interface Props {
 	navigation: RowNavigation;

package/frontend-vue/app/views/types.ts

@@ -170,16 +170,6 @@ export interface SkillRow {
 	icon?: string;
 }
 
-/** What a DMS row drawer hands its component to step through the rows. */
-export interface RowNavigation {
-	index: number;
-	total: number;
-	hasPrev: boolean;
-	hasNext: boolean;
-	prev: () => void;
-	next: () => void;
-}
-
 /** One fact of a change set, a row of a DmsKeyValueList. */
 export interface Fact {
 	id: string;

package/frontend-vue/i18n/locales/dms-ai-pages-en-GB.json

@@ -28,6 +28,10 @@
 		},
 		"blocks": {
 			"overview": {
+				"toolbar": {
+					"name": "Toolbar",
+					"description": "When the Overview last read its figures, a refresh, and the period"
+				},
 				"period": {
 					"name": "Period",
 					"description": "Picks the period the Overview's figures cover"
@@ -80,11 +84,11 @@
 				},
 				"activity_chart": {
 					"name": "Activity chart",
-					"description": "Actions per day, compared with the previous period",
+					"description": "Actions per day, against the chosen comparison",
 					"title": "Activity",
 					"caption": "Actions over the selected period",
 					"primary": "Actions",
-					"comparison": "Previous period"
+					"comparison": "Comparison"
 				},
 				"allowed": {
 					"name": "How actions were allowed",
@@ -133,6 +137,14 @@
 				}
 			},
 			"activity": {
+				"toolbar": {
+					"name": "Toolbar",
+					"description": "When the audit log was last read, a refresh, and the period"
+				},
+				"period": {
+					"name": "Period",
+					"description": "Picks the period the audit log covers"
+				},
 				"log": {
 					"name": "Audit log",
 					"description": "Every tool call, how it was allowed and what came out"
@@ -561,7 +573,8 @@
 			},
 			"detail": {
 				"open": "Details",
-				"title": "Skill detail"
+				"title": "Skill detail",
+				"position": "Skill {index} of {total}"
 			},
 			"empty": {
 				"title": "No skills loaded",

package/frontend-vue/i18n/locales/dms-ai-pages-fr-FR.json

@@ -28,6 +28,10 @@
 		},
 		"blocks": {
 			"overview": {
+				"toolbar": {
+					"name": "Barre d'outils",
+					"description": "Quand la vue d'ensemble a lu ses chiffres, un rafraîchissement et la période"
+				},
 				"period": {
 					"name": "Période",
 					"description": "Choisit la période couverte par les chiffres de la vue d'ensemble"
@@ -80,11 +84,11 @@
 				},
 				"activity_chart": {
 					"name": "Graphique d'activité",
-					"description": "Actions par jour, comparées à la période précédente",
+					"description": "Actions par jour, face à la comparaison choisie",
 					"title": "Activité",
 					"caption": "Actions sur la période choisie",
 					"primary": "Actions",
-					"comparison": "Période précédente"
+					"comparison": "Comparaison"
 				},
 				"allowed": {
 					"name": "Comment les actions ont été autorisées",
@@ -133,6 +137,14 @@
 				}
 			},
 			"activity": {
+				"toolbar": {
+					"name": "Barre d'outils",
+					"description": "Quand le journal d'audit a été lu, un rafraîchissement et la période"
+				},
+				"period": {
+					"name": "Période",
+					"description": "Choisit la période couverte par le journal d'audit"
+				},
 				"log": {
 					"name": "Journal d'audit",
 					"description": "Chaque appel d'outil, comment il a été autorisé et son résultat"
@@ -561,7 +573,8 @@
 			},
 			"detail": {
 				"open": "Détails",
-				"title": "Détail de la skill"
+				"title": "Détail de la skill",
+				"position": "Skill {index} sur {total}"
 			},
 			"empty": {
 				"title": "Aucune skill chargée",

package/frontend-vue/i18n/locales/dms-ai-views-en-GB.json

@@ -131,6 +131,7 @@
 				"uses": "{count} use | {count} uses",
 				"never_used": "never used",
 				"source_label": "Source",
+				"qualified_name_label": "Full name",
 				"origin_label": "Origin",
 				"used_label": "Used",
 				"used_value": "{count}× · 30 days",

package/frontend-vue/i18n/locales/dms-ai-views-fr-FR.json

@@ -131,6 +131,7 @@
 				"uses": "{count} utilisation | {count} utilisations",
 				"never_used": "jamais utilisée",
 				"source_label": "Source",
+				"qualified_name_label": "Nom complet",
 				"origin_label": "Origine",
 				"used_label": "Utilisée",
 				"used_value": "{count}× · 30 jours",

package/frontend-vue/package.json

@@ -6,7 +6,7 @@
 	"license": "Apache-2.0",
 	"packageManager": "pnpm@10.6.5",
 	"engines": {
-		"@antelopejs/dms-frontend": ">=0.6.3 <0.8.0"
+		"@antelopejs/dms-frontend": ">=0.8.0 <0.9.0"
 	},
 	"scripts": {
 		"build": "pnpm --dir \"${DMS_FRONTEND_WORKSPACE:?Set DMS_FRONTEND_WORKSPACE to the generated Inertia workspace}\" build",

package/frontend-vue/tests/chat/markdown.test.ts

@@ -2,6 +2,7 @@
 import { describe, expect, it } from "vitest";
 import {
 	createIncrementalMarkdown,
+	renderDocument,
 	renderMarkdown,
 } from "../../app/chat/utils/markdown";
 
@@ -270,3 +271,71 @@ describe("a streaming answer renders incrementally", () => {
 		expect(renderedChars).toBeLessThan(paragraphs.length * 5);
 	});
 });
+
+describe("a document reflows its hard-wrapped lines", () => {
+	const SKILL = [
+		"# Skill",
+		"",
+		"The DMS is a **backend-driven admin framework** built",
+		"on AntelopeJS. You add an",
+		"admin screen by writing TypeScript.",
+		"",
+		"Second paragraph.",
+		"",
+		"- one item",
+		"  wrapped",
+		"- two",
+		"",
+		"```ts",
+		"const a = 1;",
+		"const b = 2;",
+		"```",
+		"",
+		"| a | b |",
+		"|---|---|",
+		"| 1 | 2 |",
+	].join("\n");
+
+	function renderSkill(): HTMLElement {
+		const host = document.createElement("div");
+		host.innerHTML = renderDocument(SKILL);
+		return host;
+	}
+
+	it("joins a paragraph's lines with spaces, not line breaks", () => {
+		const host = renderSkill();
+		expect(host.querySelector("br")).toBeNull();
+		// A soft break stays a newline in the text, which HTML shows as a space.
+		const text = host.querySelector("p")?.textContent?.replace(/\s+/g, " ");
+		expect(text).toBe(
+			"The DMS is a backend-driven admin framework built on AntelopeJS. You add an admin screen by writing TypeScript.",
+		);
+	});
+
+	it("keeps paragraphs, lists, code blocks and tables", () => {
+		const host = renderSkill();
+		expect(host.querySelectorAll("p")).toHaveLength(2);
+		expect(host.querySelectorAll("li")).toHaveLength(2);
+		expect(host.querySelector("li")?.textContent).toBe("one item\nwrapped");
+		expect(host.querySelector("pre code")?.textContent).toBe(
+			"const a = 1;\nconst b = 2;\n",
+		);
+		expect(host.querySelectorAll("td")).toHaveLength(2);
+	});
+
+	it("still honours a hard break written in the source", () => {
+		const host = document.createElement("div");
+		host.innerHTML = renderDocument("first  \nsecond");
+		expect(host.querySelector("br")).not.toBeNull();
+	});
+
+	it("leaves chat messages breaking on every newline", () => {
+		expect(renderMarkdown("one\ntwo")).toContain("<br>");
+	});
+
+	it("sanitizes like a chat message", () => {
+		expectHarmless(
+			renderDocument("<img src=x onerror=alert(1)>\n[x](javascript:alert(1))"),
+		);
+	});
+});

package/frontend-vue/tests/i18n-views.test.ts

@@ -0,0 +1,63 @@
+import { readdirSync, readFileSync, statSync } from "node:fs";
+import { join, resolve } from "node:path";
+import { describe, expect, it } from "vitest";
+import en from "../i18n/locales/dms-ai-views-en-GB.json";
+import fr from "../i18n/locales/dms-ai-views-fr-FR.json";
+
+type Tree = Record<string, unknown>;
+
+const ROOT = resolve(__dirname, "..");
+// The page components (the skill drawer and cards among them) and the view
+// helpers they share; the chat panel has its own test.
+const SOURCES = ["app/components", "app/views"];
+const EXCLUDED = ["ChatPanel.vue"];
+const LITERAL_KEY = /["'`](dms_ai\.views\.[A-Za-z0-9_.]+[A-Za-z0-9_])["'`]/g;
+
+/** Keys built at run time from a value, each with every value it can take. */
+const DYNAMIC_FAMILIES: Record<string, readonly string[]> = {
+	"dms_ai.views.skills.source": ["module", "local"],
+};
+
+function files(path: string): string[] {
+	const full = join(ROOT, path);
+	if (!statSync(full).isDirectory()) return [full];
+	return readdirSync(full)
+		.filter((entry) => !EXCLUDED.includes(entry))
+		.flatMap((entry) => files(join(path, entry)));
+}
+
+function flatten(tree: Tree, prefix = ""): string[] {
+	return Object.entries(tree).flatMap(([key, value]) =>
+		value !== null && typeof value === "object"
+			? flatten(value as Tree, `${prefix}${key}.`)
+			: [`${prefix}${key}`],
+	);
+}
+
+function usedKeys(): string[] {
+	const source = SOURCES.flatMap(files)
+		.map((file) => readFileSync(file, "utf8"))
+		.join("\n");
+	return [
+		...new Set([...source.matchAll(LITERAL_KEY)].map((match) => match[1])),
+	];
+}
+
+const dynamicKeys = Object.entries(DYNAMIC_FAMILIES).flatMap(
+	([prefix, values]) => values.map((value) => `${prefix}.${value}`),
+);
+
+describe("the views' strings", () => {
+	const english = new Set(flatten(en));
+	const french = new Set(flatten(fr));
+
+	it("exist in English and French alike", () => {
+		expect([...english].sort()).toEqual([...french].sort());
+	});
+
+	it("cover every key the views use", () => {
+		const keys = [...usedKeys(), ...dynamicKeys];
+		expect(keys.length).toBeGreaterThan(0);
+		expect(keys.filter((key) => !english.has(key))).toEqual([]);
+	});
+});

package/frontend-vue/tests/panel-header-height.test.ts

@@ -0,0 +1,40 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { describe, expect, it } from "vitest";
+
+// jsdom does not lay out, so these read the stylesheets: each panel header must
+// take its height from the DMS navbar's variable, or their borders drift apart.
+const HEADER_RULES = [
+	{ file: "../app/chat/components/PanelHeader.vue", selector: ".cb__head" },
+	{
+		file: "../app/chat/components/ConversationDrawer.vue",
+		selector: ".cb-drawer__head",
+	},
+];
+
+function ruleBody(source: string, selector: string): string {
+	const start = source.indexOf(`${selector} {`);
+	expect(start, `${selector} rule`).toBeGreaterThanOrEqual(0);
+	return source.slice(start, source.indexOf("}", start));
+}
+
+describe("panel header height", () => {
+	it.each(HEADER_RULES)("$selector uses the DMS header height", (rule) => {
+		const source = readFileSync(resolve(__dirname, rule.file), "utf8");
+
+		expect(ruleBody(source, rule.selector)).toMatch(
+			/\bheight: var\(--ui-header-height\);/,
+		);
+	});
+
+	it("centres the status overlay close button in that height", () => {
+		const source = readFileSync(
+			resolve(__dirname, "../app/components/ChatPanel.vue"),
+			"utf8",
+		);
+
+		expect(ruleBody(source, ".dms-ai-panel-close")).toContain(
+			"var(--ui-header-height)",
+		);
+	});
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antelopejs/dms-ai",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "AI development assistant for the AntelopeJS DMS: a chat panel next to every page and a coding agent that edits the project in reviewable, undoable change sets.",
   "keywords": [
     "ai",
@@ -68,7 +68,7 @@
   "dependencies": {
     "@antelopejs/interface-api": ">=0.0.15 <1.0.0",
     "@antelopejs/interface-core": ">=0.2.4 <1.0.0",
-    "@antelopejs/interface-dms": ">=0.7.2 <1.0.0",
+    "@antelopejs/interface-dms": ">=0.8.0 <1.0.0",
     "@anthropic-ai/claude-agent-sdk": "^0.2.131",
     "@anthropic-ai/claude-code": "^2.1.131",
     "@modelcontextprotocol/sdk": "1.29.0",
@@ -107,5 +107,6 @@
     "skills": [
       "./skills"
     ]
-  }
+  },
+  "dmsFrontend": "dist/frontend-module.js"
 }