@antelopejs/dms-ai 0.2.1 → 0.3.0

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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { computed, watch } from "vue";
+import { computed } from "vue";
 import DiffView from "./DiffView.vue";
 import UnavailableState from "./UnavailableState.vue";
-import { useAiRequest } from "./composables/useAiRequest";
+import { useAiData } from "./composables/useAiData";
 import { useAssistant } from "./composables/useAssistant";
 import { useChangeSetActions } from "./composables/useChangeSetActions";
 import { useViewFormat } from "./composables/useViewFormat";
@@ -20,28 +20,23 @@ interface Props {
 }
 
 const props = defineProps<Props>();
-const emit = defineEmits<{ changed: [] }>();
 
 const { t } = useI18n();
-const { $authFetch } = useAuthFetch();
 const { moment } = useViewFormat();
 const assistant = useAssistant();
-const detail = useAiRequest<ChangeSetDetail>();
-const actions = useChangeSetActions(() => {
-	void load();
-	emit("changed");
-});
+// A set picked again shows what was read before and reads again: it may have
+// been undone or redone since.
+const detail = useAiData<ChangeSetDetail>(
+	() => `${AI_ROUTES.changes}/${encodeURIComponent(props.changeSetId)}`,
+);
+// Once a set is undone or redone, the page reads its data again: this panel,
+// the list and the assistant's status.
+const actions = useChangeSetActions();
 
-function load(): Promise<ChangeSetDetail | null> {
-	return detail.run(() =>
-		$authFetch<ChangeSetDetail>(
-			`${AI_ROUTES.changes}/${encodeURIComponent(props.changeSetId)}`,
-		),
-	);
+function load(): Promise<void> {
+	return detail.refresh();
 }
 
-watch(() => props.changeSetId, load, { immediate: true });
-
 const changeSet = computed<ChangeSetSummary | null>(
 	() => detail.data.value?.changeSet ?? null,
 );
@@ -128,7 +123,7 @@ function openPage(): void {
 		<USkeleton class="mt-4 h-24 w-full" />
 		<USkeleton class="h-40 w-full" />
 	</div>
-	<article v-else :aria-busy="detail.isLoading.value">
+	<article v-else :aria-busy="detail.pending.value">
 		<header class="flex min-h-16 flex-wrap items-start gap-3 px-5 py-3.5">
 			<div class="min-w-0 flex-1">
 				<p

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import type { RequestFailure } from "./composables/useAiRequest";
+import type { RequestFailure } from "./composables/useAiData";
 import { useViewFormat } from "./composables/useViewFormat";
 
 type UnavailableStateSize = "sm" | "md" | "lg";

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

@@ -0,0 +1,116 @@
+import { computed, type ComputedRef, type MaybeRefOrGetter } from "vue";
+import type {
+	ApiDataRequest,
+	ApiDataResult,
+	ApiPagedDataHandler,
+	ApiPagedDataResult,
+	UseApiDataOptions,
+} from "#dms-core/app/composables/auth/useApiData";
+import type {
+	DmsAsyncDataKey,
+	UseDmsPagedDataOptions,
+} from "#dms/frontend-module";
+import { HTTP_SERVICE_UNAVAILABLE } from "../constants";
+
+/** Why a request failed: the sidecar is down (503), or anything else. */
+export type RequestFailure = "unavailable" | "error";
+
+/** Why a read failed, and the server's message for it. */
+interface FailureDescription {
+	/** Why the last read failed; none while a retry is in flight. */
+	failure: ComputedRef<RequestFailure | null>;
+	/** The server's message for the failure. */
+	message: ComputedRef<string>;
+}
+
+/** A view's read, and why it failed. */
+export type AiData<T> = ApiDataResult<T> & FailureDescription;
+
+/** A view's list read page by page, and why it failed. */
+export type AiPagedData<TPage, TCursor> = ApiPagedDataResult<TPage, TCursor> &
+	FailureDescription;
+
+/** What a failure description needs of a read. */
+interface FailingRead {
+	error: { value: unknown };
+	status: { value: string };
+}
+
+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";
+}
+
+/**
+ * A view's read of the assistant's data, with the page (`useApiData`): a
+ * server render reads it and hands it to the browser. Its failure says
+ * whether the assistant isn't running (503) rather than an error.
+ */
+function describeFailure(result: FailingRead): FailureDescription {
+	return {
+		failure: computed(() =>
+			result.error.value && result.status.value !== "pending"
+				? classifyFailure(result.error.value)
+				: null,
+		),
+		message: computed(() =>
+			result.error.value ? errorMessage(result.error.value) : "",
+		),
+	};
+}
+
+export function useAiData<T>(
+	url: ApiDataRequest,
+	options?: UseApiDataOptions<T>,
+): AiData<T> {
+	const result = useApiData<T>(url, options);
+	return Object.assign(result, describeFailure(result));
+}
+
+/**
+ * A view's list read page by page ("Load more"), with the page
+ * (`useApiPagedData`): a server render reads the first page, and the page's
+ * refreshes read every page loaded again. Its failure says whether the
+ * assistant isn't running (503) rather than an error.
+ */
+export function useAiPagedData<TPage, TCursor>(
+	key: MaybeRefOrGetter<DmsAsyncDataKey>,
+	handler: ApiPagedDataHandler<TPage, TCursor>,
+	options: UseDmsPagedDataOptions<TPage, TCursor>,
+): AiPagedData<TPage, TCursor> {
+	const result = useApiPagedData<TPage, TCursor>(key, handler, options);
+	return Object.assign(result, describeFailure(result));
+}

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

@@ -1,4 +1,4 @@
-import { inject } from "vue";
+import { getCurrentInstance, inject, onMounted, ref } from "vue";
 import { useDmsRouter } from "#dms/frontend-module";
 import { ASSISTANT_SESSION_KEY } from "../../runtime/assistant-session";
 
@@ -16,13 +16,19 @@ export interface AssistantActions {
  * The tab's assistant session as the workspace views use it. Until it runs
  * (its first probe pending) and without one (production, sidecar disabled) the
  * actions do nothing and `isAvailable` hides the buttons that need them.
+ *
+ * A view only offers them once mounted: the server never has a session, and a
+ * probe that answered before the view hydrated would otherwise make the
+ * browser render buttons the server's HTML lacks.
  */
 export function useAssistant(): AssistantActions {
 	const session = inject(ASSISTANT_SESSION_KEY, null);
 	const router = useDmsRouter();
+	const isMounted = ref(!getCurrentInstance());
+	if (!isMounted.value) onMounted(() => (isMounted.value = true));
 	return {
 		get isAvailable() {
-			return (session?.value ?? null) !== null;
+			return isMounted.value && (session?.value ?? null) !== null;
 		},
 		openPanel: () => session?.value?.panel.open(),
 		openConversation: (conversationId) =>

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

@@ -1,7 +1,7 @@
 import { ref, type Ref } from "vue";
 import { AI_ROUTES } from "../constants";
 import type { ChangeSetSummary } from "../types";
-import { classifyFailure, errorMessage } from "./useAiRequest";
+import { classifyFailure, errorMessage } from "./useAiData";
 
 export interface ChangeSetActions {
 	isBusy: Ref<boolean>;
@@ -21,10 +21,11 @@ function changeSetPath(changeSetId: string, action: string): string {
 }
 
 /**
- * Undo and redo of a change set, each confirmed by a toast; `onChanged` runs
- * once the sidecar has restored the files.
+ * Undo and redo of a change set, each confirmed by a toast; the page is read
+ * again once the sidecar has restored the files, and the action stays busy
+ * until it is: the set shows its new state before it can be acted on again.
  */
-export function useChangeSetActions(onChanged: () => void): ChangeSetActions {
+export function useChangeSetActions(): ChangeSetActions {
 	const { t } = useI18n();
 	const toast = useToast();
 	const { $authFetch } = useAuthFetch();
@@ -56,7 +57,7 @@ export function useChangeSetActions(onChanged: () => void): ChangeSetActions {
 				color: AI_COLOR,
 				icon: "i-ph-arrow-clockwise",
 			});
-			onChanged();
+			await refreshPageBlocks();
 		} catch (error) {
 			failureToast(error);
 		} finally {
@@ -88,7 +89,7 @@ export function useChangeSetActions(onChanged: () => void): ChangeSetActions {
 				},
 			],
 		});
-		onChanged();
+		await refreshPageBlocks();
 	}
 
 	async function undo(changeSet: ChangeSetSummary): Promise<void> {

package/frontend-vue/app/views/utils/change-sets.ts

@@ -26,13 +26,6 @@ export function matchesSearch(
 	return haystack.some((text) => text.toLowerCase().includes(needle));
 }
 
-/** The `?set=<id>` deep link of the page, if any. */
-export function readSelectedSet(): string | undefined {
-	if (typeof window === "undefined") return undefined;
-	const params = new URLSearchParams(window.location.search);
-	return params.get(CHANGE_SET_QUERY_KEY) ?? undefined;
-}
-
 /**
  * Keeps the selected set in the URL without a visit, so a reload or a shared
  * link opens it again.

package/frontend-vue/package.json

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

package/frontend-vue/tests/assistant-activity.test.ts

@@ -0,0 +1,69 @@
+import { describe, expect, it } from "vitest";
+import { nextTick, ref } from "vue";
+import {
+	type AssistantStatusPayload,
+	createAssistantActivity,
+} from "../app/runtime/assistant-activity";
+import type { ChatTransport } from "../app/runtime/chat-transport";
+
+type Listener = (msg: object) => void;
+
+function fakeChat() {
+	const listeners = new Set<Listener>();
+	const chat = {
+		onMessage: (listener: Listener) => {
+			listeners.add(listener);
+			return () => listeners.delete(listener);
+		},
+	} as unknown as ChatTransport;
+	return { chat, emit: (msg: object) => listeners.forEach((l) => l(msg)) };
+}
+
+describe("assistant activity", () => {
+	it("polls the status through the read's interval while it is useful, and stops on teardown", async () => {
+		const data = ref<AssistantStatusPayload | null>(null);
+		let interval: () => number = () => -1;
+		const isPanelOpen = ref(false);
+		const { chat } = fakeChat();
+		const activity = createAssistantActivity({
+			readStatus: (given) => {
+				interval = given;
+				return { data, refresh: async () => undefined };
+			},
+			chat,
+			shouldPoll: () => !isPanelOpen.value,
+		});
+		expect(interval()).toBe(15_000);
+		isPanelOpen.value = true;
+		expect(interval()).toBe(0);
+		isPanelOpen.value = false;
+		activity.stop();
+		expect(interval()).toBe(0);
+	});
+
+	it("takes its counts from each status answer and from the stream's lists", async () => {
+		const data = ref<AssistantStatusPayload | null>(null);
+		const { chat, emit } = fakeChat();
+		const activity = createAssistantActivity({
+			readStatus: () => ({ data, refresh: async () => undefined }),
+			chat,
+			shouldPoll: () => true,
+		});
+		data.value = { pendingApprovals: 2, workingConversations: 0 };
+		await nextTick();
+		expect(activity.pendingApprovals.value).toBe(2);
+		expect(activity.isBusy.value).toBe(true);
+		emit({ type: "conversation_list", conversations: [{ isRunning: true }] });
+		expect(activity.pendingApprovals.value).toBe(0);
+		expect(activity.workingConversations.value).toBe(1);
+		data.value = {
+			pendingApprovals: 0,
+			workingConversations: 0,
+			lastError: "boom",
+		};
+		await nextTick();
+		expect(activity.workingConversations.value).toBe(0);
+		expect(activity.lastError.value).toBe("boom");
+		activity.stop();
+	});
+});

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

@@ -57,7 +57,7 @@ function loadPlugin(loggedIn: Ref<boolean>): PluginHarness {
 	new Function(
 		"require",
 		"exports",
-		"useUserSession",
+		"useDmsUserSession",
 		"useAuthFetch",
 		"useToast",
 		"useDevReload",

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

@@ -1,39 +1,117 @@
 import { describe, expect, it, vi } from "vitest";
-import { createSidecarStatusController } from "../app/runtime/sidecar-status";
+import { computed, nextTick, type Ref, ref } from "vue";
+import {
+	createSidecarStatusController,
+	type SidecarInfoPayload,
+	type SidecarInfoRead,
+} from "../app/runtime/sidecar-status";
+
+type Answer = SidecarInfoPayload | Error;
+
+interface FakeRead extends SidecarInfoRead {
+	/** The polling interval the controller asks for. */
+	interval: Readonly<Ref<number>>;
+	reads: () => number;
+}
+
+/** `useApiData` as the controller uses it: each read takes the next answer. */
+function fakeRead(answers: Answer[]) {
+	let opened: FakeRead | undefined;
+	const open = (interval: Readonly<Ref<number>>): SidecarInfoRead => {
+		const data = ref<SidecarInfoPayload | null>(null);
+		const error = ref<unknown>(null);
+		const status = ref<"idle" | "pending" | "done">("idle");
+		let count = 0;
+		const refresh = async (): Promise<void> => {
+			status.value = "pending";
+			await Promise.resolve();
+			const answer = answers[Math.min(count, answers.length - 1)];
+			count += 1;
+			if (answer instanceof Error) error.value = answer;
+			else {
+				data.value = answer ?? null;
+				error.value = null;
+			}
+			status.value = "done";
+		};
+		opened = {
+			data,
+			error,
+			pending: computed(() => status.value === "pending"),
+			execute: refresh,
+			refresh,
+			interval,
+			reads: () => count,
+		};
+		return opened;
+	};
+	return { open, read: () => opened! };
+}
 
 describe("sidecar status", () => {
 	it("reports connected from the status alone, and keeps no port or credential", async () => {
-		const controller = createSidecarStatusController(async () => ({
-			isRunning: true,
-		}));
+		const { open, read } = fakeRead([{ isRunning: true }]);
+		const controller = createSidecarStatusController(open);
 		expect(await controller.init()).toBe(true);
 		expect(controller.getStatus()).toBe("connected");
+		expect(read().interval.value).toBe(0);
 		expect(Object.keys(controller)).not.toContain("getPort");
 		expect(Object.keys(controller)).not.toContain("getClientToken");
 		controller.dispose();
 	});
 
 	it("re-probes when the channel drops, and reports connected once the sidecar answers", async () => {
-		const fetchInfo = vi
-			.fn()
-			.mockResolvedValueOnce({ isRunning: true })
-			.mockResolvedValueOnce({ isRunning: true });
+		const { open, read } = fakeRead([{ isRunning: true }]);
 		const statuses: string[] = [];
-		const controller = createSidecarStatusController(fetchInfo);
+		const controller = createSidecarStatusController(open);
 		await controller.init();
 		controller.subscribe((status) => statuses.push(status));
 		controller.reportChannelDown();
 		await vi.waitFor(() => expect(statuses.at(-1)).toBe("connected"));
 		expect(statuses).toEqual(["connected", "reviving", "connected"]);
-		expect(fetchInfo).toHaveBeenCalledTimes(2);
+		expect(read().reads()).toBe(2);
 		controller.dispose();
 	});
 
-	it("does not show the assistant when spawning is disabled", async () => {
-		const controller = createSidecarStatusController(async () => ({
-			disabled: true,
-		}));
-		expect(await controller.init()).toBe(false);
+	it("polls through the read's interval, backing off while the sidecar comes back, and stops once it runs", async () => {
+		const { open, read } = fakeRead([
+			{ isRunning: false },
+			new Error("Bad Gateway"),
+			{ isRunning: true },
+		]);
+		const controller = createSidecarStatusController(open);
+		expect(await controller.init()).toBe(true);
+		expect(controller.getStatus()).toBe("reviving");
+		expect(read().interval.value).toBe(500);
+		await read().refresh();
+		expect(read().interval.value).toBe(1000);
+		await read().refresh();
+		await nextTick();
+		expect(controller.getStatus()).toBe("connected");
+		expect(read().interval.value).toBe(0);
+		controller.dispose();
+	});
+
+	it("stops polling once the sidecar gives up", async () => {
+		const { open, read } = fakeRead([{ hasGivenUp: true }]);
+		const controller = createSidecarStatusController(open);
+		await controller.init();
+		expect(controller.getStatus()).toBe("unavailable");
+		expect(read().interval.value).toBe(0);
 		controller.dispose();
 	});
+
+	it("does not show the assistant when spawning is disabled, and polls nothing", async () => {
+		const { open, read } = fakeRead([{ disabled: true }]);
+		const controller = createSidecarStatusController(open);
+		expect(await controller.init()).toBe(false);
+		expect(read().interval.value).toBe(0);
+	});
+
+	it("does not show the assistant when the first probe fails", async () => {
+		const { open, read } = fakeRead([new Error("Not Found")]);
+		const controller = createSidecarStatusController(open);
+		expect(await controller.init()).toBe(false);
+		expect(read().interval.value).toBe(0);
+	});
 });

package/frontend-vue/tests/support/dms-frontend-module.ts

@@ -0,0 +1,9 @@
+// The renderer's runtime (`#dms/frontend-module`), which only the generated
+// application provides: the suites that import a view mock what they use.
+export function useDmsRoute(): never {
+	throw new Error("Mock #dms/frontend-module in the suite that needs it");
+}
+
+export function useDmsRouter(): never {
+	throw new Error("Mock #dms/frontend-module in the suite that needs it");
+}