@antelopejs/dms-ai 0.2.1 → 0.3.0

package/frontend-vue/tests/views/api-data-reads.test.ts

@@ -0,0 +1,445 @@
+// @vitest-environment jsdom
+import { flushPromises, shallowMount } from "@vue/test-utils";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+	computed,
+	defineComponent,
+	h,
+	reactive,
+	ref,
+	toValue,
+	watch,
+	type MaybeRefOrGetter,
+} from "vue";
+import ActivityDetail from "../../app/components/ActivityDetail.vue";
+import ChangesView from "../../app/components/ChangesView.vue";
+import ChangeSetPanel from "../../app/views/ChangeSetPanel.vue";
+import UnavailableState from "../../app/views/UnavailableState.vue";
+
+// The views read what they render with the DMS's `useApiData`, which a server
+// render hands to the browser (this repository has no renderer to run it:
+// the playground proves that part), and the Changes list page by page with
+// `useApiPagedData`; `$authFetch` is left to the writes. These fakes read as
+// the browser does.
+
+const route = reactive({ query: {} as Record<string, string> });
+
+vi.mock("#dms/frontend-module", () => ({
+	useDmsRoute: () => route,
+	useDmsRouter: () => ({ push: vi.fn() }),
+}));
+
+interface Read {
+	url: string;
+	query?: Record<string, unknown>;
+}
+
+type Backend = (read: Read) => unknown;
+
+let backend: Backend;
+const reads: Read[] = [];
+const authFetch = vi.fn();
+/** The reads the page's refreshes read again, as the DMS's `refreshPageBlocks()` does. */
+const pageReads = new Set<() => Promise<void>>();
+const refreshPageBlocks = vi.fn(async () => {
+	await Promise.all([...pageReads].map((refresh) => refresh()));
+});
+
+interface FakeApiDataOptions {
+	query?: MaybeRefOrGetter<Record<string, unknown>>;
+	refreshOnPageRefresh?: boolean;
+}
+
+function useApiData<T>(
+	url: MaybeRefOrGetter<string | null | undefined>,
+	options: FakeApiDataOptions = {},
+) {
+	const data = ref<T | null>(null);
+	const error = ref<unknown>(null);
+	const status = ref<"idle" | "pending" | "success" | "error">("idle");
+	const request = () => ({ url: toValue(url), query: toValue(options.query) });
+	async function refresh(): Promise<void> {
+		const { url: target, query } = request();
+		if (target == null) return;
+		const read = query ? { url: target, query } : { url: target };
+		reads.push(read);
+		status.value = "pending";
+		try {
+			// Each answer is a new value, as a parsed response is.
+			data.value = structuredClone(await backend(read)) as T;
+			error.value = null;
+			status.value = "success";
+		} catch (failure) {
+			error.value = failure;
+			status.value = "error";
+		}
+	}
+	watch(request, () => void refresh(), { deep: true, immediate: true });
+	if (options.refreshOnPageRefresh !== false) pageReads.add(refresh);
+	return {
+		data,
+		error,
+		status,
+		pending: computed(() => status.value === "pending"),
+		placeholder: ref(false),
+		refresh,
+		execute: refresh,
+		clear: () => undefined,
+	};
+}
+
+interface FakePagedOptions<TPage> {
+	nextCursor: (page: TPage, pages: TPage[]) => number | null | undefined;
+}
+
+type PagedContext = {
+	$authFetch: typeof authFetch;
+	cursor: number | undefined;
+	signal: AbortSignal;
+};
+
+/** `useApiPagedData` as the renderer runs it: one key, the pages it loaded, all read again on a refresh. */
+function useApiPagedData<TPage>(
+	key: MaybeRefOrGetter<string>,
+	handler: (context: PagedContext) => Promise<TPage>,
+	options: FakePagedOptions<TPage>,
+) {
+	const pages = ref<TPage[]>([]) as { value: TPage[] };
+	const next = ref<number | null>(null);
+	const error = ref<unknown>(null);
+	const status = ref<"idle" | "pending" | "success" | "error">("idle");
+	const loadingMore = ref(false);
+	const read = (cursor: number | undefined) =>
+		handler({
+			$authFetch: authFetch,
+			cursor,
+			signal: new AbortController().signal,
+		});
+	async function readPages(count: number): Promise<void> {
+		status.value = "pending";
+		const loaded: TPage[] = [];
+		let cursor: number | undefined;
+		try {
+			for (let index = 0; index < count; index++) {
+				const page = structuredClone(await read(cursor)) as TPage;
+				loaded.push(page);
+				const after = options.nextCursor(page, loaded) ?? null;
+				next.value = after;
+				if (after === null) break;
+				cursor = after;
+			}
+			pages.value = loaded;
+			error.value = null;
+			status.value = "success";
+		} catch (failure) {
+			error.value = failure;
+			status.value = "error";
+		}
+	}
+	const refresh = () => readPages(Math.max(pages.value.length, 1));
+	watch(
+		() => toValue(key),
+		() => void readPages(1),
+		{ immediate: true },
+	);
+	pageReads.add(refresh);
+	async function loadMore(): Promise<void> {
+		if (next.value === null) return;
+		loadingMore.value = true;
+		try {
+			const page = structuredClone(await read(next.value)) as TPage;
+			pages.value = [...pages.value, page];
+			next.value = options.nextCursor(page, pages.value) ?? null;
+		} catch (failure) {
+			error.value = failure;
+		} finally {
+			loadingMore.value = false;
+		}
+	}
+	return {
+		pages,
+		error,
+		status,
+		pending: computed(() => status.value === "pending"),
+		hasMore: computed(() => next.value !== null),
+		loadingMore,
+		loadMore,
+		refresh,
+	};
+}
+
+const Stub = (name: string) =>
+	defineComponent({
+		name,
+		inheritAttrs: false,
+		setup:
+			(_, { slots }) =>
+			() =>
+				h("div", { "data-stub": name }, slots.default?.()),
+	});
+
+const GLOBAL_STUBS = Object.fromEntries(
+	[
+		"DmsCard",
+		"DmsEmptyState",
+		"DmsMasterDetail",
+		"DmsSegmented",
+		"DmsKeyValueList",
+		"DmsIconWell",
+		"DmsEyebrow",
+		"DmsCodeSnippet",
+		"UButton",
+		"UInput",
+		"USkeleton",
+	].map((name) => [name, Stub(name)]),
+);
+
+const unavailable = () =>
+	Object.assign(new Error("Service Unavailable"), {
+		statusCode: 503,
+		data: { message: "The assistant is not running" },
+	});
+
+const ROW = {
+	id: "act-1",
+	timestampMs: Date.UTC(2026, 9, 15, 10),
+	tool: "Edit",
+	target: "src/pages/home.ts",
+	agent: "claude",
+	allowedBy: "approved",
+	result: "done",
+	conversationId: "conv-1",
+	conversationTitle: "Rename the home page",
+	isReadOnly: false,
+	isAutoFix: false,
+};
+
+const summary = (id: string, number: number) => ({
+	id,
+	number,
+	title: `Change ${number}`,
+	state: "applied",
+	createdAtMs: Date.UTC(2026, 9, 15, 10),
+	added: 1,
+	removed: 0,
+	scope: "safe",
+	agent: "claude",
+	files: [],
+	isAutoFix: false,
+	approvalsNeeded: 0,
+	builderOps: 0,
+	typecheck: "passed",
+});
+
+beforeEach(() => {
+	reads.length = 0;
+	authFetch.mockReset();
+	route.query = {};
+	pageReads.clear();
+	refreshPageBlocks.mockClear();
+	vi.stubGlobal("useApiData", useApiData);
+	vi.stubGlobal("useApiPagedData", useApiPagedData);
+	vi.stubGlobal("refreshPageBlocks", refreshPageBlocks);
+	vi.stubGlobal("useAuthFetch", () => ({ $authFetch: authFetch }));
+	vi.stubGlobal("useI18n", () => ({
+		t: (key: string) => key,
+		te: () => false,
+	}));
+	vi.stubGlobal("useRegionalFormat", () => ({
+		dateTimeFormat: (options: Intl.DateTimeFormatOptions) =>
+			new Intl.DateTimeFormat("en-GB", { ...options, timeZone: "UTC" }),
+	}));
+	vi.stubGlobal("useToast", () => ({ add: vi.fn() }));
+	vi.stubGlobal("useConfirmFrom", () => ({ confirmFrom: vi.fn() }));
+});
+
+afterEach(() => {
+	vi.unstubAllGlobals();
+});
+
+const mount = (component: Parameters<typeof shallowMount>[0], props = {}) =>
+	shallowMount(component, {
+		props,
+		global: { stubs: { ...GLOBAL_STUBS, UnavailableState: false } },
+	});
+
+describe("activity detail", () => {
+	it("reads the entry its row names with the page, not with $authFetch", async () => {
+		backend = () => ({ ...ROW, args: { file_path: "src/pages/home.ts" } });
+		const wrapper = mount(ActivityDetail, { rowData: ROW });
+		await flushPromises();
+		expect(reads).toEqual([{ url: "/ai/activity/act-1" }]);
+		expect(authFetch).not.toHaveBeenCalled();
+		expect(wrapper.findComponent(UnavailableState).exists()).toBe(false);
+		expect(wrapper.find('[data-stub="USkeleton"]').exists()).toBe(false);
+	});
+
+	it("says the assistant is not running on a 503, and reads again on retry", async () => {
+		backend = () => {
+			throw unavailable();
+		};
+		const wrapper = mount(ActivityDetail, { rowData: ROW });
+		await flushPromises();
+		const state = wrapper.findComponent(UnavailableState);
+		expect(state.props("failure")).toBe("unavailable");
+		backend = () => ROW;
+		state.vm.$emit("retry");
+		await flushPromises();
+		expect(reads).toHaveLength(2);
+		expect(wrapper.findComponent(UnavailableState).exists()).toBe(false);
+	});
+});
+
+describe("changes view", () => {
+	const PAGE = { results: [summary("cs-1", 1), summary("cs-2", 2)], total: 3 };
+	const NEXT_PAGE = { results: [summary("cs-3", 3)], total: 3 };
+
+	function changesBackend({ url, query }: Read): unknown {
+		if (url === "/ai/status") return { checkpointsAvailable: true };
+		if (url === "/ai/changes") return query?.offset ? NEXT_PAGE : PAGE;
+		return { changeSet: summary("cs-1", 1), files: [] };
+	}
+
+	/** The paged list's requests, which go through the handler's `$authFetch`. */
+	function listReads(): unknown[] {
+		return authFetch.mock.calls.map(([url, options]) => [
+			url,
+			(options as { query: unknown }).query,
+		]);
+	}
+
+	beforeEach(() => {
+		authFetch.mockImplementation(async (url: string, options: Read) =>
+			changesBackend({ url, query: options.query }),
+		);
+	});
+
+	it("reads the status and the first page with the page, and opens the set the URL names", async () => {
+		backend = changesBackend;
+		route.query = { set: "cs-2" };
+		const wrapper = mount(ChangesView);
+		await flushPromises();
+		expect(reads).toEqual([{ url: "/ai/status" }]);
+		expect(listReads()).toEqual([["/ai/changes", { offset: 0, limit: 30 }]]);
+		expect(wrapper.findComponent(ChangeSetPanel).props("changeSetId")).toBe(
+			"cs-2",
+		);
+	});
+
+	it("selects the first set when the URL names none", async () => {
+		backend = changesBackend;
+		const wrapper = mount(ChangesView);
+		await flushPromises();
+		expect(wrapper.findComponent(ChangeSetPanel).props("changeSetId")).toBe(
+			"cs-1",
+		);
+	});
+
+	it("appends the next page on Load more, and reads every loaded page again on a page refresh", async () => {
+		backend = changesBackend;
+		const wrapper = mount(ChangesView);
+		await flushPromises();
+		const loadMoreButton = () =>
+			wrapper
+				.findAllComponents({ name: "UButton" })
+				.find(
+					(button) =>
+						button.vm.$attrs.label === "dms_ai.views.common.load_more",
+				);
+		loadMoreButton()!.vm.$emit("click");
+		await flushPromises();
+		expect(listReads().at(-1)).toEqual([
+			"/ai/changes",
+			{ offset: 2, limit: 30 },
+		]);
+		const items = () =>
+			(
+				wrapper.findComponent({ name: "DmsMasterDetail" }).vm.$attrs.items as {
+					value: string;
+				}[]
+			).map((item) => item.value);
+		expect(items()).toEqual(["cs-1", "cs-2", "cs-3"]);
+		expect(loadMoreButton()).toBeUndefined();
+
+		// A change set undone in the panel refreshes the page, which reads the
+		// pages loaded again rather than dropping the second one.
+		authFetch.mockClear();
+		await refreshPageBlocks();
+		await flushPromises();
+		expect(listReads()).toEqual([
+			["/ai/changes", { offset: 0, limit: 30 }],
+			["/ai/changes", { offset: 2, limit: 30 }],
+		]);
+		expect(items()).toEqual(["cs-1", "cs-2", "cs-3"]);
+	});
+
+	it("reads the filtered first page when the scope changes", async () => {
+		backend = changesBackend;
+		const wrapper = mount(ChangesView);
+		await flushPromises();
+		wrapper
+			.findComponent({ name: "DmsSegmented" })
+			.vm.$emit("update:modelValue", "vibe");
+		await flushPromises();
+		expect(listReads().at(-1)).toEqual([
+			"/ai/changes",
+			{ offset: 0, limit: 30, scope: "vibe", filter_scope: "is:vibe" },
+		]);
+	});
+});
+
+describe("change set panel", () => {
+	it("refreshes the page once a set is redone, instead of reading on its own", async () => {
+		backend = () => ({
+			changeSet: { ...summary("cs-1", 1), state: "undone" },
+			files: [],
+		});
+		authFetch.mockResolvedValue({});
+		const wrapper = mount(ChangeSetPanel, { changeSetId: "cs-1" });
+		await flushPromises();
+		expect(reads).toEqual([{ url: "/ai/changes/cs-1" }]);
+		const redo = wrapper
+			.findAllComponents({ name: "UButton" })
+			.find((button) => button.vm.$attrs.label === "dms_ai.views.changes.redo");
+		redo!.vm.$emit("click");
+		await flushPromises();
+		expect(authFetch).toHaveBeenCalledWith("/ai/changes/cs-1/redo", {
+			method: "POST",
+			body: {},
+		});
+		expect(refreshPageBlocks).toHaveBeenCalledTimes(1);
+		expect(reads).toEqual([
+			{ url: "/ai/changes/cs-1" },
+			{ url: "/ai/changes/cs-1" },
+		]);
+	});
+});
+
+describe("change set actions", () => {
+	it("stay busy until the page refresh a redo asks for is done", async () => {
+		backend = () => ({
+			changeSet: { ...summary("cs-1", 1), state: "undone" },
+			files: [],
+		});
+		authFetch.mockResolvedValue({});
+		let finishRefresh: () => void = () => undefined;
+		refreshPageBlocks.mockImplementationOnce(
+			() => new Promise<void>((resolve) => (finishRefresh = resolve)),
+		);
+		const wrapper = mount(ChangeSetPanel, { changeSetId: "cs-1" });
+		await flushPromises();
+		const redo = () =>
+			wrapper
+				.findAllComponents({ name: "UButton" })
+				.find(
+					(button) => button.vm.$attrs.label === "dms_ai.views.changes.redo",
+				)!;
+		redo().vm.$emit("click");
+		await flushPromises();
+		expect(refreshPageBlocks).toHaveBeenCalledTimes(1);
+		expect(redo().vm.$attrs.loading).toBe(true);
+		finishRefresh();
+		await flushPromises();
+		expect(redo().vm.$attrs.loading).toBe(false);
+	});
+});

package/frontend-vue/tests/views/use-assistant.test.ts

@@ -0,0 +1,53 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createSSRApp, defineComponent, h, nextTick, shallowRef } from "vue";
+import { renderToString } from "vue/server-renderer";
+import type { AssistantSession } from "../../app/runtime/assistant-session";
+import { ASSISTANT_SESSION_KEY } from "../../app/runtime/assistant-session";
+import { useAssistant } from "../../app/views/composables/useAssistant";
+
+vi.mock("#dms/frontend-module", () => ({
+	useDmsRouter: () => ({ push: vi.fn() }),
+}));
+
+// A view offering an assistant button, as the Changes empty state does.
+const View = defineComponent({
+	setup() {
+		const assistant = useAssistant();
+		return () =>
+			h("div", [assistant.isAvailable ? h("button", "Open assistant") : null]);
+	},
+});
+
+function appWith(session: AssistantSession | null) {
+	const app = createSSRApp(View);
+	app.provide(ASSISTANT_SESSION_KEY, shallowRef(session));
+	return app;
+}
+
+afterEach(() => {
+	document.body.innerHTML = "";
+});
+
+describe("useAssistant", () => {
+	it("hydrates what the server rendered when the session started first, then offers the assistant", async () => {
+		const html = await renderToString(appWith(null));
+		const root = document.createElement("div");
+		root.innerHTML = html;
+		document.body.append(root);
+		const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+		const error = vi.spyOn(console, "error").mockImplementation(() => {});
+
+		// The tab's probe answered before this block hydrated.
+		appWith({} as AssistantSession).mount(root);
+		const mismatches = [...warn.mock.calls, ...error.mock.calls]
+			.flat()
+			.filter((entry) => String(entry).includes("Hydration"));
+		warn.mockRestore();
+		error.mockRestore();
+		expect(mismatches).toEqual([]);
+
+		await nextTick();
+		expect(root.querySelector("button")?.textContent).toBe("Open assistant");
+	});
+});

package/frontend-vue/vitest.config.ts

@@ -1,8 +1,18 @@
+import { resolve } from "node:path";
 import vue from "@vitejs/plugin-vue";
 import { defineConfig } from "vitest/config";
 
 export default defineConfig({
 	plugins: [vue()],
+	resolve: {
+		alias: {
+			// The renderer's runtime exists in the generated application only.
+			"#dms/frontend-module": resolve(
+				__dirname,
+				"tests/support/dms-frontend-module.ts",
+			),
+		},
+	},
 	test: {
 		// Most suites need no DOM, and setting jsdom up per file is the bulk of
 		// the run; the files that mount components opt in with a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antelopejs/dms-ai",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -54,7 +54,7 @@
   "dependencies": {
     "@antelopejs/interface-api": ">=0.0.14 <1.0.0",
     "@antelopejs/interface-core": ">=0.1.1 <1.0.0",
-    "@antelopejs/interface-dms": ">=0.6.0 <1.0.0",
+    "@antelopejs/interface-dms": ">=0.7.0 <1.0.0",
     "@anthropic-ai/claude-agent-sdk": "^0.2.131",
     "@anthropic-ai/claude-code": "^2.1.131",
     "@modelcontextprotocol/sdk": "1.29.0",

package/frontend-vue/app/views/composables/useAiRequest.ts

@@ -1,89 +0,0 @@
-import { ref, shallowRef, type Ref, type ShallowRef } from "vue";
-import { HTTP_SERVICE_UNAVAILABLE } from "../constants";
-
-/** Why a request failed: the sidecar is down (503), or anything else. */
-export type RequestFailure = "unavailable" | "error";
-
-export interface AiRequest<T> {
-	data: ShallowRef<T | null>;
-	isLoading: Ref<boolean>;
-	failure: Ref<RequestFailure | null>;
-	message: Ref<string>;
-	/**
-	 * Runs `fetcher`, keeping the previous data while it loads; a run that a
-	 * later one overtook is dropped.
-	 */
-	run: (fetcher: () => Promise<T>) => Promise<T | null>;
-}
-
-interface FetchErrorResponse {
-	status?: number;
-}
-
-interface FetchErrorBody {
-	message?: unknown;
-}
-
-interface FetchErrorLike {
-	status?: number;
-	statusCode?: number;
-	response?: FetchErrorResponse;
-	data?: FetchErrorBody;
-	message?: string;
-}
-
-/** The HTTP status of a `$authFetch` rejection, if it got an answer. */
-function errorStatus(error: unknown): number | undefined {
-	const candidate = error as FetchErrorLike | null;
-	return (
-		candidate?.status ?? candidate?.statusCode ?? candidate?.response?.status
-	);
-}
-
-/** The server's `{ message }`, else the error's own text. */
-export function errorMessage(error: unknown): string {
-	const candidate = error as FetchErrorLike | null;
-	const serverMessage = candidate?.data?.message;
-	if (typeof serverMessage === "string") return serverMessage;
-	return candidate?.message ?? String(error);
-}
-
-export function classifyFailure(error: unknown): RequestFailure {
-	return errorStatus(error) === HTTP_SERVICE_UNAVAILABLE
-		? "unavailable"
-		: "error";
-}
-
-/**
- * One request's state for a view: its data, whether it loads, and whether a
- * failure means "the assistant isn't running" (503) rather than an error.
- */
-export function useAiRequest<T>(): AiRequest<T> {
-	const data = shallowRef<T | null>(null);
-	const isLoading = ref(false);
-	const failure = ref<RequestFailure | null>(null);
-	const message = ref("");
-	let latestRun = 0;
-
-	async function run(fetcher: () => Promise<T>): Promise<T | null> {
-		latestRun += 1;
-		const runId = latestRun;
-		isLoading.value = true;
-		try {
-			const result = await fetcher();
-			if (runId !== latestRun) return null;
-			data.value = result;
-			failure.value = null;
-			return result;
-		} catch (error) {
-			if (runId !== latestRun) return null;
-			failure.value = classifyFailure(error);
-			message.value = errorMessage(error);
-			return null;
-		} finally {
-			if (runId === latestRun) isLoading.value = false;
-		}
-	}
-
-	return { data, isLoading, failure, message, run };
-}