@antelopejs/dms-ai 0.1.6 → 0.2.0

package/frontend-vue/app/views/utils/diff.ts

@@ -0,0 +1,98 @@
+import type {
+	ActivityDiffFile,
+	DiffFile,
+	DiffHunk,
+	DiffLine,
+	DiffLineKind,
+} from "../types";
+
+const PATH_SEPARATOR = "/";
+
+export interface SplitPath {
+	directory: string;
+	name: string;
+}
+
+export interface LineCounts {
+	added: number;
+	removed: number;
+}
+
+/** A diff line as DiffView draws it: number, marker, text and its kind. */
+export interface RenderedLine {
+	key: string;
+	kind: DiffLineKind | "hunk";
+	number: string;
+	marker: string;
+	text: string;
+}
+
+const LINE_MARKERS: Record<DiffLineKind, string> = {
+	context: "",
+	add: "+",
+	remove: "−",
+};
+
+/** Directory (with its trailing slash) and file name of a path. */
+export function splitPath(path: string): SplitPath {
+	const cut = path.lastIndexOf(PATH_SEPARATOR) + 1;
+	return { directory: path.slice(0, cut), name: path.slice(cut) };
+}
+
+export function countLines(hunks: DiffHunk[]): LineCounts {
+	const lines = hunks.flatMap((hunk) => hunk.lines);
+	return {
+		added: lines.filter((line) => line.kind === "add").length,
+		removed: lines.filter((line) => line.kind === "remove").length,
+	};
+}
+
+function hunkLength(hunk: DiffHunk, side: DiffLineKind): number {
+	return hunk.lines.filter((line) => line.kind !== side).length;
+}
+
+/** The `@@ -38,7 +38,20 @@` line heading a hunk. */
+export function hunkHeader(hunk: DiffHunk): string {
+	const oldLength = hunkLength(hunk, "add");
+	const newLength = hunkLength(hunk, "remove");
+	return `@@ -${hunk.oldStart},${oldLength} +${hunk.newStart},${newLength} @@`;
+}
+
+function lineNumber(line: DiffLine): string {
+	const number = line.kind === "remove" ? line.oldLine : line.newLine;
+	return number === undefined ? "" : String(number);
+}
+
+function renderLine(line: DiffLine, key: string): RenderedLine {
+	return {
+		key,
+		kind: line.kind,
+		number: lineNumber(line),
+		marker: LINE_MARKERS[line.kind],
+		text: line.text,
+	};
+}
+
+/**
+ * Every line of a file's hunks, each hunk led by its header, numbered on the
+ * new side (the old side for removed lines), like a unified diff.
+ */
+export function renderHunks(hunks: DiffHunk[]): RenderedLine[] {
+	return hunks.flatMap((hunk, hunkIndex) => [
+		{
+			key: `h${hunkIndex}`,
+			kind: "hunk" as const,
+			number: "",
+			marker: "",
+			text: hunkHeader(hunk),
+		},
+		...hunk.lines.map((line, lineIndex) =>
+			renderLine(line, `h${hunkIndex}l${lineIndex}`),
+		),
+	]);
+}
+
+/** The diff an activity row produced, with the counts DiffView shows. */
+export function toDiffFiles(files: ActivityDiffFile[]): DiffFile[] {
+	return files.map((file) => ({ ...file, ...countLines(file.hunks) }));
+}

package/frontend-vue/app/views/utils/moment.ts

@@ -0,0 +1,92 @@
+type DateTimeFormatter = (
+	options: Intl.DateTimeFormatOptions,
+) => Intl.DateTimeFormat;
+
+export type Translate = (
+	key: string,
+	params?: Record<string, unknown>,
+) => string;
+
+export interface MomentOptions {
+	format: DateTimeFormatter;
+	t: Translate;
+	nowMs: number;
+	withSeconds?: boolean;
+}
+
+const DAY_MS = 86_400_000;
+const WEEK_DAYS = 7;
+const DAY_KEY_OPTIONS: Intl.DateTimeFormatOptions = {
+	year: "numeric",
+	month: "2-digit",
+	day: "2-digit",
+};
+const TIME_OPTIONS: Intl.DateTimeFormatOptions = {
+	hour: "numeric",
+	minute: "2-digit",
+};
+const TIME_WITH_SECONDS_OPTIONS: Intl.DateTimeFormatOptions = {
+	...TIME_OPTIONS,
+	second: "2-digit",
+};
+const WEEKDAY_OPTIONS: Intl.DateTimeFormatOptions = { weekday: "short" };
+const SAME_YEAR_OPTIONS: Intl.DateTimeFormatOptions = {
+	month: "short",
+	day: "numeric",
+};
+const OTHER_YEAR_OPTIONS: Intl.DateTimeFormatOptions = {
+	...SAME_YEAR_OPTIONS,
+	year: "numeric",
+};
+const YEAR_OPTIONS: Intl.DateTimeFormatOptions = { year: "numeric" };
+
+function dayKey(ms: number, format: DateTimeFormatter): string {
+	return format(DAY_KEY_OPTIONS).format(ms);
+}
+
+function daysAgo(ms: number, options: MomentOptions): number {
+	const target = dayKey(ms, options.format);
+	const offsets = Array.from({ length: WEEK_DAYS }, (_, days) => days);
+	const match = offsets.find(
+		(days) => dayKey(options.nowMs - days * DAY_MS, options.format) === target,
+	);
+	return match ?? WEEK_DAYS;
+}
+
+/** Only the clock part ("09:58"), for a moment already placed in its day. */
+export function formatClock(ms: number, options: MomentOptions): string {
+	const timeOptions = options.withSeconds
+		? TIME_WITH_SECONDS_OPTIONS
+		: TIME_OPTIONS;
+	return options.format(timeOptions).format(ms);
+}
+
+function formatDay(ms: number, options: MomentOptions): string {
+	const yearFormat = options.format(YEAR_OPTIONS);
+	const isSameYear = yearFormat.format(ms) === yearFormat.format(options.nowMs);
+	return options
+		.format(isSameYear ? SAME_YEAR_OPTIONS : OTHER_YEAR_OPTIONS)
+		.format(ms);
+}
+
+const RECENT_DAY_KEYS: Record<number, string> = {
+	0: "dms_ai.views.moment.today",
+	1: "dms_ai.views.moment.yesterday",
+};
+
+/**
+ * A moment the way the mockup writes it: "Today 14:02", "Yesterday 09:51",
+ * "Mon 17:20" within the week, then the day ("Sep 24"), in the user's
+ * language, time zone and clock.
+ */
+export function formatMoment(ms: number, options: MomentOptions): string {
+	const days = daysAgo(ms, options);
+	const time = formatClock(ms, options);
+	const recentKey = RECENT_DAY_KEYS[days];
+	if (recentKey !== undefined) return options.t(recentKey, { time });
+	if (days < WEEK_DAYS) {
+		const weekday = options.format(WEEKDAY_OPTIONS).format(ms);
+		return `${weekday} ${time}`;
+	}
+	return formatDay(ms, options);
+}

package/frontend-vue/app/views/utils/skills.ts

@@ -0,0 +1,27 @@
+import type { SkillRow, SkillSource } from "../types";
+
+type SkillTone = "primary" | "warning" | "neutral";
+
+export interface SkillLook {
+	icon: string;
+	/** Tone of the icon well. */
+	tone: SkillTone;
+	/** Tone of the source badge. */
+	badgeTone: SkillTone;
+}
+
+const SOURCE_LOOKS: Record<SkillSource, SkillLook> = {
+	module: { icon: "i-ph-package", tone: "primary", badgeTone: "neutral" },
+	local: { icon: "i-ph-desktop", tone: "warning", badgeTone: "warning" },
+};
+const SHADOWED_TONE = "neutral";
+
+/** Icon and well tone of a skill: its own icon, else its source's. */
+export function skillLook(skill: SkillRow): SkillLook {
+	const look = SOURCE_LOOKS[skill.source] ?? SOURCE_LOOKS.module;
+	return {
+		icon: skill.icon ?? look.icon,
+		tone: skill.isShadowed ? SHADOWED_TONE : look.tone,
+		badgeTone: look.badgeTone,
+	};
+}

package/frontend-vue/app/views/utils/tools.ts

@@ -0,0 +1,73 @@
+/** Where a tool acts, as the Activity eyebrow names it. */
+export type ToolSource = "builder" | "code" | "web" | "project" | "assistant";
+
+const MCP_PREFIX = /^mcp__.+?__/;
+const WORD_BOUNDARY = /([a-z0-9])([A-Z])|[_-]+/g;
+const BUILDER_PREFIX = "Builder";
+
+const CODE_TOOLS = new Set([
+	"Bash",
+	"Edit",
+	"MultiEdit",
+	"Write",
+	"Read",
+	"Glob",
+	"Grep",
+	"LS",
+	"NotebookEdit",
+	"command_execution",
+	"file_change",
+]);
+const WEB_TOOLS = new Set(["WebFetch", "WebSearch", "web_search"]);
+const PROJECT_TOOLS = new Set(["Typecheck", "NavigateToPage"]);
+
+const SOURCE_ICONS: Record<ToolSource, string> = {
+	builder: "i-ph-squares-four",
+	code: "i-ph-terminal-window",
+	web: "i-ph-globe",
+	project: "i-ph-folder-simple",
+	assistant: "i-ph-sparkle",
+};
+
+/** The tool's own name, without the `mcp__<server>__` namespace. */
+export function bareToolName(tool: string): string {
+	return tool.replace(MCP_PREFIX, "");
+}
+
+/** "BuilderAddBlock" → "Builder add block", for a tool the lexicon lacks. */
+export function readableToolName(tool: string): string {
+	const name = bareToolName(tool);
+	const words = (
+		name.startsWith(BUILDER_PREFIX) && name !== BUILDER_PREFIX
+			? name.slice(BUILDER_PREFIX.length)
+			: name
+	)
+		.replace(WORD_BOUNDARY, (_match, left?: string, right?: string) =>
+			left === undefined ? " " : `${left} ${right}`,
+		)
+		.trim()
+		.toLowerCase();
+	return words.charAt(0).toUpperCase() + words.slice(1);
+}
+
+interface SourceRule {
+	source: ToolSource;
+	matches: (name: string) => boolean;
+}
+
+const SOURCE_RULES: SourceRule[] = [
+	{ source: "builder", matches: (name) => name.startsWith(BUILDER_PREFIX) },
+	{ source: "code", matches: (name) => CODE_TOOLS.has(name) },
+	{ source: "web", matches: (name) => WEB_TOOLS.has(name) },
+	{ source: "project", matches: (name) => PROJECT_TOOLS.has(name) },
+];
+
+export function toolSource(tool: string): ToolSource {
+	const name = bareToolName(tool);
+	const rule = SOURCE_RULES.find((candidate) => candidate.matches(name));
+	return rule?.source ?? "assistant";
+}
+
+export function toolIcon(tool: string): string {
+	return SOURCE_ICONS[toolSource(tool)];
+}

package/frontend-vue/dms.frontend.ts

@@ -1,24 +1,36 @@
 import { defineAsyncComponent, type Component } from "vue";
 import type { DmsFrontendModule } from "#dms/frontend-module";
 import aiPlugin from "./app/plugins/ai.client";
+import sidePanelPlugin from "./app/plugins/side-panel";
 
 interface VueModule {
 	default: Component;
 }
 
+const VUE_EXTENSION = /\.vue$/;
+
+// Every component is addressed by name from the backend, so registering the
+// whole directory keeps the two sides in sync without a manual list.
 const components = import.meta.glob<VueModule>("./app/components/**/*.vue");
 
+function componentName(path: string): string {
+	return (path.split("/").at(-1) ?? path).replace(VUE_EXTENSION, "");
+}
+
 const frontendModule: DmsFrontendModule = {
+	// Put in front of every name registered below: StatusCard.vue registers as
+	// DmsAiStatusCard, the name the backend's CustomComponent() sends.
+	componentPrefix: "DmsAi",
 	setup(sdk) {
 		Object.entries(components)
 			.sort(([left], [right]) => left.localeCompare(right))
 			.forEach(([path, loader]) => {
-				const name = `DmsAi${path
-					.split("/")
-					.at(-1)!
-					.replace(/\.vue$/, "")}`;
-				sdk.registerComponent(name, defineAsyncComponent(loader));
+				sdk.registerComponent(
+					componentName(path),
+					defineAsyncComponent(async () => (await loader()).default),
+				);
 			});
+		sdk.registerPlugin(sidePanelPlugin);
 		sdk.registerPlugin(aiPlugin, { clientOnly: true });
 	},
 };