@antelopejs/dms-ai 0.1.6 → 0.2.0

package/frontend-vue/tests/sidecar-guest.test.ts

@@ -1,8 +1,10 @@
 import { readFileSync } from "node:fs";
 import { resolve } from "node:path";
 import ts from "typescript";
+import * as vue from "vue";
 import { nextTick, ref, type Ref } from "vue";
 import { expect, it, vi } from "vitest";
+import * as constants from "../app/runtime/constants";
 import { runWhenLoggedIn } from "../app/runtime/session-gate";
 
 interface PluginExports {
@@ -11,11 +13,13 @@ interface PluginExports {
 
 interface PluginHarness {
 	useAuthFetch: ReturnType<typeof vi.fn>;
+	unregisterSidePanel: ReturnType<typeof vi.fn>;
 	run: () => void | Promise<void>;
 }
 
 const SESSION_GATE_MODULE = "../runtime/session-gate";
 const SIDECAR_STATUS_MODULE = "../runtime/sidecar-status";
+const CONSTANTS_MODULE = "../runtime/constants";
 
 // A first probe reporting "no assistant here" stops the startup right after the
 // authenticated fetch, which is all these tests need to observe.
@@ -36,10 +40,16 @@ function loadPlugin(loggedIn: Ref<boolean>): PluginHarness {
 	);
 	const exports = {} as PluginExports;
 	const useAuthFetch = vi.fn(() => ({ $authFetch: vi.fn() }));
+	const unregisterSidePanel = vi.fn();
 	const requireModule = (name: string) => {
 		if (name === "#dms/frontend-module") {
-			return { defineDmsPlugin: (plugin: unknown) => plugin };
+			return {
+				defineDmsPlugin: (plugin: unknown) => plugin,
+				useDmsRouter: () => ({ push: vi.fn() }),
+			};
 		}
+		if (name === "vue") return vue;
+		if (name === CONSTANTS_MODULE) return constants;
 		if (name === SESSION_GATE_MODULE) return { runWhenLoggedIn };
 		if (name === SIDECAR_STATUS_MODULE) return silentController;
 		return {};
@@ -49,13 +59,27 @@ function loadPlugin(loggedIn: Ref<boolean>): PluginHarness {
 		"exports",
 		"useUserSession",
 		"useAuthFetch",
+		"useToast",
+		"useDevReload",
+		"unregisterSidePanel",
 		compiled.outputText,
-	)(requireModule, exports, () => ({ loggedIn }), useAuthFetch);
+	)(
+		requireModule,
+		exports,
+		() => ({ loggedIn }),
+		useAuthFetch,
+		() => ({ add: vi.fn() }),
+		() => ({ awaitRoute: vi.fn() }),
+		unregisterSidePanel,
+	);
 	return {
 		useAuthFetch,
+		unregisterSidePanel,
 		run: () =>
 			exports.default({
-				vueApp: { onUnmount: vi.fn() },
+				vueApp: { onUnmount: vi.fn(), provide: vi.fn() },
+				$i18n: { t: (key: string) => key, locale: ref("en-GB") },
+				hook: vi.fn(),
 				runWithContext: (callback: () => unknown) => callback(),
 			}),
 	};
@@ -77,3 +101,11 @@ it("starts the assistant when a guest signs in without reloading the page", asyn
 	await nextTick();
 	expect(plugin.useAuthFetch).toHaveBeenCalledTimes(1);
 });
+
+it("withdraws the docked panel when the first probe finds no assistant", async () => {
+	const plugin = loadPlugin(ref(true));
+	await plugin.run();
+	await vi.waitFor(() =>
+		expect(plugin.unregisterSidePanel).toHaveBeenCalledWith("dms-ai:assistant"),
+	);
+});

package/frontend-vue/tests/support/i18n.ts

@@ -0,0 +1,49 @@
+import { ref } from "vue";
+import type {
+	ChatI18n,
+	TranslateParams,
+} from "../../app/chat/composables/useChatI18n";
+import en from "../../i18n/locales/dms-ai-panel-en-GB.json";
+
+type Messages = Record<string, unknown>;
+
+const PLURAL_SEPARATOR = " | ";
+
+function lookup(messages: Messages, key: string): string | null {
+	const value = key
+		.split(".")
+		.reduce<unknown>(
+			(node, part) =>
+				node !== null && typeof node === "object"
+					? (node as Messages)[part]
+					: undefined,
+			messages,
+		);
+	return typeof value === "string" ? value : null;
+}
+
+/** vue-i18n's default choice: two forms are singular/plural, three add zero. */
+function choose(forms: string[], count: number): string {
+	if (forms.length === 2) return forms[count === 1 ? 0 : 1];
+	return forms[Math.min(count, forms.length - 1)];
+}
+
+function interpolate(text: string, params: TranslateParams = {}): string {
+	return text.replace(/\{(\w+)\}/g, (match, name: string) =>
+		name in params ? String(params[name]) : match,
+	);
+}
+
+/** The panel's English strings behind the chat's translator, as in the dashboard. */
+export function createTestI18n(messages: Messages = en): ChatI18n {
+	return {
+		t: (key, params, plural) => {
+			const text = lookup(messages, key);
+			if (text === null) return key;
+			const forms = text.split(PLURAL_SEPARATOR);
+			const form = plural === undefined ? forms[0] : choose(forms, plural);
+			return interpolate(form, params);
+		},
+		locale: ref("en-GB"),
+	};
+}

package/frontend-vue/tests/support/panel-harness.ts

@@ -0,0 +1,198 @@
+import { flushPromises, mount, type VueWrapper } from "@vue/test-utils";
+import { vi } from "vitest";
+import { defineComponent, h, nextTick, readonly, ref, shallowRef } from "vue";
+import ChatPanel from "../../app/components/ChatPanel.vue";
+import {
+	ASSISTANT_SESSION_KEY,
+	type AssistantSession,
+	type ChatPanelState,
+} from "../../app/runtime/assistant-session";
+import type { ChannelStatus } from "../../app/runtime/channel-client";
+import {
+	type ChatTransportHub,
+	createChatTransport,
+} from "../../app/runtime/chat-transport";
+import { createPanelIntents } from "../../app/runtime/panel-intents";
+import { CHAT_I18N_KEY } from "../../app/chat/composables/useChatI18n";
+import { createTestI18n } from "./i18n";
+import { PANEL_STUBS } from "./stubs";
+import type { SidecarStatus } from "../../app/runtime/sidecar-status";
+
+export const CONVERSATION_ID = "conv-native-1";
+
+/** A panel mounted on a fake stream: what it sent, and handles to drive it. */
+export interface Harness {
+	session: AssistantSession;
+	hub: ChatTransportHub;
+	sent: Array<Record<string, unknown>>;
+	reconnects: number;
+	sidecarStatus: ReturnType<typeof ref<SidecarStatus>>;
+	setChannelStatus: (status: ChannelStatus) => void;
+	navigate: ReturnType<typeof vi.fn>;
+	restart: ReturnType<typeof vi.fn>;
+	lastError: ReturnType<typeof ref<string | null>>;
+	api: AssistantSession["api"];
+	/** How many holds keep the tab's stream open. */
+	streamHolds: number;
+}
+
+/**
+ * What the DMS's `useSidePanel` hands the plugin: the open state it keeps in
+ * its cookie, and the ways to change it.
+ */
+export function createSidePanel(): ChatPanelState {
+	const isOpen = ref(false);
+	return {
+		isOpen: readonly(isOpen),
+		open: () => {
+			isOpen.value = true;
+		},
+		close: () => {
+			isOpen.value = false;
+		},
+		toggle: () => {
+			isOpen.value = !isOpen.value;
+		},
+	};
+}
+
+export function createHarness(): Harness {
+	let channelStatus: ChannelStatus = "connected";
+	const harness = {
+		sent: [] as Array<Record<string, unknown>>,
+		reconnects: 0,
+		sidecarStatus: ref<SidecarStatus>("connected"),
+		navigate: vi.fn(),
+		restart: vi.fn(async () => undefined),
+		lastError: ref<string | null>(null),
+		api: { get: vi.fn(async () => ({ conflicts: [] })), post: vi.fn() },
+	} as unknown as Harness;
+	harness.hub = createChatTransport({
+		send: (msg) => {
+			if (channelStatus !== "connected") return false;
+			harness.sent.push(msg as Record<string, unknown>);
+			return true;
+		},
+		reconnect: () => {
+			harness.reconnects += 1;
+		},
+		getStatus: () => channelStatus,
+	});
+	harness.streamHolds = 0;
+	harness.setChannelStatus = (status) => {
+		channelStatus = status;
+		harness.hub.announceStatus(status);
+	};
+	const panel = createSidePanel();
+	const intents = createPanelIntents();
+	harness.session = {
+		status: harness.sidecarStatus,
+		chat: harness.hub.transport,
+		panel,
+		navigate: harness.navigate,
+		openConversation: (conversationId) => {
+			intents.push({ kind: "open", conversationId });
+			panel.open();
+		},
+		startConversation: (prompt) => {
+			intents.push({ kind: "start", prompt });
+			panel.open();
+		},
+		holdStream: () => {
+			harness.streamHolds += 1;
+			return () => {
+				harness.streamHolds -= 1;
+			};
+		},
+		pendingApprovals: ref(0),
+		intents,
+		currentPage: ref({
+			path: "/sales/overview",
+			title: "Sales overview · DMS",
+		}),
+		api: harness.api,
+		lastError: harness.lastError,
+		restart: harness.restart,
+	};
+	return harness;
+}
+
+let wrapper: VueWrapper | null = null;
+
+/** Unmounts what the last test mounted. */
+export function unmountPanel(): void {
+	wrapper?.unmount();
+	wrapper = null;
+}
+
+/**
+ * The DMS's side panel host: the panel's component is mounted while the panel
+ * is open, and unmounted when it closes.
+ */
+function sidePanelHost(panel: ChatPanelState) {
+	return defineComponent({
+		setup: () => () =>
+			h("aside", { "data-dms-side-panel": "" }, [
+				panel.isOpen.value ? h(ChatPanel) : null,
+			]),
+	});
+}
+
+/** The providers the plugin installs, as a test mounts them. */
+export function providedSession(session: AssistantSession | null) {
+	return {
+		[ASSISTANT_SESSION_KEY as symbol]: shallowRef(session),
+		[CHAT_I18N_KEY as symbol]: createTestI18n(),
+	};
+}
+
+function mountPanel(harness: Harness): VueWrapper {
+	wrapper = mount(sidePanelHost(harness.session.panel), {
+		attachTo: document.body,
+		global: {
+			provide: providedSession(harness.session),
+			stubs: PANEL_STUBS,
+		},
+	});
+	return wrapper;
+}
+
+export async function openPanel(harness: Harness): Promise<VueWrapper> {
+	const mounted = mountPanel(harness);
+	harness.session.panel.open();
+	await nextTick();
+	await flushPromises();
+	return mounted;
+}
+
+/** A sidecar event for the panel's conversation. */
+export function deliver(
+	harness: Harness,
+	event: Record<string, unknown>,
+): void {
+	harness.hub.deliver({ conversationId: CONVERSATION_ID, ...event });
+}
+
+export function sentOfType(harness: Harness, type: string) {
+	return harness.sent.filter((msg) => msg.type === type);
+}
+
+export async function sendMessage(
+	panel: VueWrapper,
+	text: string,
+): Promise<void> {
+	await panel.find("textarea").setValue(text);
+	await panel.find("form.composer").trigger("submit");
+}
+
+/** The first button whose text contains `label`. */
+export function buttonWithText(
+	root: VueWrapper | ReturnType<VueWrapper["find"]>,
+	label: string,
+) {
+	const button = root
+		.findAll("button")
+		.find((item) => item.text().includes(label));
+	if (button === undefined) throw new Error(`no button "${label}"`);
+	return button;
+}

package/frontend-vue/tests/support/stubs.ts

@@ -0,0 +1,201 @@
+import { defineComponent, h, type PropType } from "vue";
+
+interface SegmentItem {
+	value: string;
+	label: string;
+}
+
+/** Nuxt UI's button, drawn as a plain button with its label and slot. */
+const UButton = defineComponent({
+	name: "UButton",
+	inheritAttrs: false,
+	props: {
+		label: { type: String, default: "" },
+		disabled: { type: Boolean, default: false },
+		loading: { type: Boolean, default: false },
+		type: { type: String, default: "button" },
+	},
+	emits: ["click"],
+	setup(props, { slots, attrs, emit }) {
+		return () =>
+			h(
+				"button",
+				{
+					...attrs,
+					type: props.type,
+					disabled: props.disabled,
+					onClick: (event: MouseEvent) => emit("click", event),
+				},
+				[props.label, slots.default?.()],
+			);
+	},
+});
+
+const UKbd = defineComponent({
+	name: "UKbd",
+	props: { value: { type: String, default: "" } },
+	setup: (props) => () => h("kbd", props.value),
+});
+
+const UBadge = defineComponent({
+	name: "UBadge",
+	props: { label: { type: String, default: "" } },
+	setup: (props) => () => h("span", { class: "u-badge" }, props.label),
+});
+
+/** A modal that draws its slots in place while open. */
+const UModal = defineComponent({
+	name: "UModal",
+	props: {
+		open: { type: Boolean, default: false },
+		title: { type: String, default: "" },
+	},
+	setup(props, { slots }) {
+		return () =>
+			props.open
+				? h("div", { class: "u-modal", role: "dialog" }, [
+						h("h2", props.title),
+						slots.body?.(),
+						slots.footer?.(),
+					])
+				: null;
+	},
+});
+
+interface MenuItem {
+	label?: string;
+	onSelect?: () => void;
+}
+
+/** A menu drawn open, each item a button, so tests can pick one. */
+const UDropdownMenu = defineComponent({
+	name: "UDropdownMenu",
+	props: { items: { type: Array as PropType<unknown[]>, default: () => [] } },
+	setup(props, { slots }) {
+		const flat = (): MenuItem[] => props.items.flat(2) as MenuItem[];
+		return () =>
+			h("div", { class: "u-dropdown" }, [
+				slots.default?.(),
+				...flat()
+					.filter((item) => item.onSelect !== undefined)
+					.map((item) =>
+						h(
+							"button",
+							{
+								class: "u-dropdown-item",
+								type: "button",
+								onClick: item.onSelect,
+							},
+							item.label,
+						),
+					),
+			]);
+	},
+});
+
+const UPopover = defineComponent({
+	name: "UPopover",
+	setup:
+		(_, { slots }) =>
+		() =>
+			h("div", { class: "u-popover" }, [slots.default?.(), slots.content?.()]),
+});
+
+const UInput = defineComponent({
+	name: "UInput",
+	props: { modelValue: { type: String, default: "" } },
+	emits: ["update:modelValue"],
+	setup:
+		(props, { emit, attrs }) =>
+		() =>
+			h("input", {
+				...attrs,
+				value: props.modelValue,
+				onInput: (event: Event) =>
+					emit("update:modelValue", (event.target as HTMLInputElement).value),
+			}),
+});
+
+const UTextarea = defineComponent({
+	name: "UTextarea",
+	props: { modelValue: { type: String, default: "" } },
+	emits: ["update:modelValue"],
+	setup:
+		(props, { emit }) =>
+		() =>
+			h("textarea", {
+				class: "u-textarea",
+				value: props.modelValue,
+				onInput: (event: Event) =>
+					emit(
+						"update:modelValue",
+						(event.target as HTMLTextAreaElement).value,
+					),
+			}),
+});
+
+const DmsSegmented = defineComponent({
+	name: "DmsSegmented",
+	props: {
+		modelValue: { type: [String, Number], default: "" },
+		items: {
+			type: Array as PropType<SegmentItem[]>,
+			default: () => [],
+		},
+	},
+	emits: ["update:modelValue"],
+	setup:
+		(props, { emit }) =>
+		() =>
+			h(
+				"div",
+				{ class: "dms-segmented" },
+				props.items.map((item) =>
+					h(
+						"button",
+						{
+							type: "button",
+							onClick: () => emit("update:modelValue", item.value),
+						},
+						item.label,
+					),
+				),
+			),
+});
+
+const DmsEmptyState = defineComponent({
+	name: "DmsEmptyState",
+	props: {
+		title: { type: String, default: "" },
+		description: { type: String, default: "" },
+	},
+	setup:
+		(props, { slots }) =>
+		() =>
+			h("div", { class: "dms-empty" }, [
+				h("p", props.title),
+				h("p", props.description),
+				slots.actions?.(),
+			]),
+});
+
+/** Every Nuxt UI and DMS component the panel draws, as light stand-ins. */
+export const PANEL_STUBS = {
+	UIcon: true,
+	UButton,
+	UKbd,
+	UBadge,
+	UModal,
+	UDropdownMenu,
+	UPopover,
+	UInput,
+	UTextarea,
+	DmsSegmented,
+	DmsEmptyState,
+	DmsStatusPill: defineComponent({
+		props: { label: { type: String, default: "" } },
+		setup: (props) => () =>
+			h("span", { class: "dms-status-pill" }, props.label),
+	}),
+	DmsIconWell: true,
+};

package/frontend-vue/tests/views/diff-view.test.ts

@@ -0,0 +1,149 @@
+import { mount } from "@vue/test-utils";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import DiffView from "../../app/views/DiffView.vue";
+import type { DiffFile } from "../../app/views/types";
+import {
+	countLines,
+	hunkHeader,
+	renderHunks,
+} from "../../app/views/utils/diff";
+
+const PAGE_FILE: DiffFile = {
+	path: "src/modules/sales/pages/overview.page.ts",
+	status: "modified",
+	added: 2,
+	removed: 1,
+	hunks: [
+		{
+			oldStart: 38,
+			newStart: 38,
+			lines: [
+				{
+					kind: "context",
+					text: "  static revenue = ChartCard();",
+					oldLine: 38,
+					newLine: 38,
+				},
+				{ kind: "remove", text: "  static latest = TableView();", oldLine: 39 },
+				{ kind: "add", text: "  static top = TopListCard();", newLine: 39 },
+				{ kind: "add", text: "  static latest = TableView();", newLine: 40 },
+			],
+		},
+	],
+};
+
+const NEW_FILE: DiffFile = {
+	path: "src/modules/sales/queries/top-customers.ts",
+	status: "added",
+	hunks: [
+		{
+			oldStart: 0,
+			newStart: 1,
+			lines: [{ kind: "add", text: "export const top = 5;", newLine: 1 }],
+		},
+	],
+};
+
+const STUBS = {
+	UIcon: true,
+	UButton: {
+		props: ["ariaLabel", "icon"],
+		emits: ["click"],
+		template: `<button :aria-label="ariaLabel" @click="$emit('click')" />`,
+	},
+	DmsStatusPill: {
+		props: ["label"],
+		template: `<span data-pill>{{ label }}</span>`,
+	},
+};
+
+function mountDiff(files: DiffFile[]) {
+	return mount(DiffView, { props: { files }, global: { stubs: STUBS } });
+}
+
+beforeEach(() => {
+	vi.stubGlobal("useI18n", () => ({
+		t: (key: string, params?: Record<string, unknown>) =>
+			params?.path ? `${key}:${String(params.path)}` : key,
+	}));
+});
+
+afterEach(() => {
+	vi.unstubAllGlobals();
+});
+
+describe("diff utils", () => {
+	it("writes a unified hunk header from the hunk's lines", () => {
+		expect(hunkHeader(PAGE_FILE.hunks[0]!)).toBe("@@ -38,2 +38,3 @@");
+	});
+
+	it("counts added and removed lines", () => {
+		expect(countLines(PAGE_FILE.hunks)).toEqual({ added: 2, removed: 1 });
+	});
+
+	it("numbers removed lines on the old side and the rest on the new side", () => {
+		const lines = renderHunks(PAGE_FILE.hunks);
+		expect(lines.map((line) => [line.kind, line.number, line.marker])).toEqual([
+			["hunk", "", ""],
+			["context", "38", ""],
+			["remove", "39", "−"],
+			["add", "39", "+"],
+			["add", "40", "+"],
+		]);
+	});
+});
+
+describe("DiffView", () => {
+	it("draws each file with its directory, name and counts", () => {
+		const wrapper = mountDiff([PAGE_FILE]);
+		const header = wrapper.get("[data-diff-file] header");
+		expect(header.text()).toContain("src/modules/sales/pages/");
+		expect(header.get("b").text()).toBe("overview.page.ts");
+		expect(header.text()).toContain("+2");
+		expect(header.text()).toContain("−1");
+	});
+
+	it("colours lines by kind and keeps their text verbatim", () => {
+		const wrapper = mountDiff([PAGE_FILE]);
+		const kinds = wrapper
+			.findAll("[data-line-kind]")
+			.map((row) => row.attributes("data-line-kind"));
+		expect(kinds).toEqual(["hunk", "context", "remove", "add", "add"]);
+		const removed = wrapper.get('[data-line-kind="remove"]');
+		expect(removed.classes().join(" ")).toContain("error");
+		expect(removed.findAll("span").at(2)?.text()).toBe(
+			"static latest = TableView();",
+		);
+		expect(wrapper.get('[data-line-kind="add"]').classes().join(" ")).toContain(
+			"success",
+		);
+	});
+
+	it("marks a new file and derives its counts from the hunks", () => {
+		const wrapper = mountDiff([NEW_FILE]);
+		expect(wrapper.get("[data-pill]").text()).toBe("dms_ai.views.diff.new");
+		expect(wrapper.get("header").text()).toContain("+1");
+	});
+
+	it("collapses and expands a file", async () => {
+		const wrapper = mountDiff([PAGE_FILE]);
+		expect(wrapper.findAll("[data-line-kind]")).toHaveLength(5);
+		await wrapper.get("header button").trigger("click");
+		expect(wrapper.findAll("[data-line-kind]")).toHaveLength(0);
+		await wrapper.get("header button").trigger("click");
+		expect(wrapper.findAll("[data-line-kind]")).toHaveLength(5);
+	});
+
+	it("says so for a binary file instead of drawing lines", () => {
+		const wrapper = mountDiff([
+			{
+				path: "public/logo.png",
+				status: "modified",
+				hunks: [],
+				isBinary: true,
+			},
+		]);
+		expect(wrapper.text()).toContain("dms_ai.views.diff.binary");
+		expect(wrapper.findAll("[data-line-kind]")).toHaveLength(0);
+	});
+});