@antelopejs/dms-ai 0.2.0 → 0.3.0

package/frontend-vue/app/runtime/sidecar-status.ts

@@ -1,3 +1,4 @@
+import { type Ref, readonly, ref, watch } from "vue";
 import { createBackoff, nextDelay, resetBackoff } from "./backoff";
 import {
 	SIDECAR_POLL_DELAYS_MS,
@@ -38,31 +39,52 @@ export interface SidecarStatusController {
 	dispose: () => void;
 }
 
-export type FetchSidecarInfo = () => Promise<Partial<SidecarInfo>>;
-
-async function fetchInfo(
-	fetchDetails: FetchSidecarInfo,
-): Promise<SidecarInfo | null> {
-	try {
-		const body = await fetchDetails();
-		return {
-			isRunning: body.isRunning === true,
-			hasGivenUp: body.hasGivenUp === true,
-			disabled: body.disabled === true,
-		};
-	} catch {
-		return null;
-	}
+/**
+ * The read of the sidecar's info the controller follows: `useApiData` in the
+ * dashboard, opened with `immediate: false` and polled every `interval`.
+ */
+/** The backend's sidecar info, as far as the tab reads it. */
+export type SidecarInfoPayload = Partial<SidecarInfo>;
+
+export interface SidecarInfoRead {
+	data: Readonly<Ref<SidecarInfoPayload | null>>;
+	error: Readonly<Ref<unknown>>;
+	pending: Readonly<Ref<boolean>>;
+	/** The first read. */
+	execute: () => Promise<void>;
+	/** Reads the info again now. */
+	refresh: () => Promise<void>;
+}
+
+/**
+ * Opens the info read, polled every `interval` ms while it is above 0: the
+ * controller raises it while the sidecar comes back, and sets it to 0 once
+ * the sidecar answers or gives up.
+ */
+export type OpenSidecarInfoRead = (
+	interval: Readonly<Ref<number>>,
+) => SidecarInfoRead;
+
+/** The info of the read's last answer, or null when it failed. */
+function readInfo(read: SidecarInfoRead): SidecarInfo | null {
+	const body = read.data.value;
+	if (read.error.value || !body) return null;
+	return {
+		isRunning: body.isRunning === true,
+		hasGivenUp: body.hasGivenUp === true,
+		disabled: body.disabled === true,
+	};
 }
 
 export function createSidecarStatusController(
-	fetchDetails: FetchSidecarInfo,
+	openRead: OpenSidecarInfoRead,
 ): SidecarStatusController {
 	const backoff = createBackoff();
 	const subscribers = new Set<(status: SidecarStatus) => void>();
+	const pollInterval = ref(0);
 	let status: SidecarStatus = SIDECAR_STATUS_CONNECTING;
-	let pollTimer: ReturnType<typeof setTimeout> | null = null;
 	let disposed = false;
+	const read = openRead(readonly(pollInterval));
 
 	function notify(): void {
 		for (const cb of subscribers) cb(status);
@@ -74,18 +96,8 @@ export function createSidecarStatusController(
 		notify();
 	}
 
-	function schedulePoll(): void {
-		if (disposed || pollTimer !== null) return;
-		const delay = nextDelay(backoff, SIDECAR_POLL_DELAYS_MS);
-		pollTimer = setTimeout(() => {
-			pollTimer = null;
-			void poll();
-		}, delay);
-	}
-
-	async function poll(): Promise<void> {
-		if (disposed) return;
-		handleInfo(await fetchInfo(fetchDetails));
+	function keepPolling(): void {
+		pollInterval.value = nextDelay(backoff, SIDECAR_POLL_DELAYS_MS);
 	}
 
 	function handleInfo(info: SidecarInfo | null): void {
@@ -93,31 +105,56 @@ export function createSidecarStatusController(
 		// Probe itself failed (backend momentarily unreachable): keep waiting.
 		if (info === null) {
 			setStatus(SIDECAR_STATUS_REVIVING);
-			schedulePoll();
+			keepPolling();
 			return;
 		}
 		if (info.hasGivenUp) {
+			pollInterval.value = 0;
 			setStatus(SIDECAR_STATUS_UNAVAILABLE);
 			return;
 		}
 		if (info.isRunning) {
 			resetBackoff(backoff);
+			pollInterval.value = 0;
 			setStatus(SIDECAR_STATUS_CONNECTED);
 			return;
 		}
 		// Down but not terminal — the probe already asked the backend to respawn;
 		// keep polling until it reports the sidecar running.
 		setStatus(SIDECAR_STATUS_REVIVING);
-		schedulePoll();
+		keepPolling();
+	}
+
+	// Each answer, a probe's or the polling's, moves the status.
+	const stopFollowing = watch(
+		read.pending,
+		(isPending, wasPending) => {
+			if (wasPending && !isPending) handleInfo(readInfo(read));
+		},
+		{ flush: "sync" },
+	);
+
+	function dispose(): void {
+		disposed = true;
+		pollInterval.value = 0;
+		stopFollowing();
+		subscribers.clear();
+	}
+
+	function probeAgain(): void {
+		if (disposed) return;
+		resetBackoff(backoff);
+		setStatus(SIDECAR_STATUS_REVIVING);
+		void read.refresh();
 	}
 
 	return {
 		init: async (): Promise<boolean> => {
-			const info = await fetchInfo(fetchDetails);
-			if (info === null) return false;
-			if (info.disabled) return false;
-			handleInfo(info);
-			return true;
+			await read.execute();
+			const info = readInfo(read);
+			if (info !== null && !info.disabled) return true;
+			dispose();
+			return false;
 		},
 		getStatus: () => status,
 		subscribe: (cb) => {
@@ -128,29 +165,14 @@ export function createSidecarStatusController(
 			};
 		},
 		reportChannelDown: () => {
-			if (disposed) return;
 			if (status !== SIDECAR_STATUS_CONNECTED) return;
 			// Surface the drop right away (amber dot + spinner) instead of waiting on
 			// the re-probe: that probe awaits a respawn and can take a second or two,
-			// during which the icon would otherwise look healthy. poll() flips back
-			// to connected once the sidecar answers again.
-			resetBackoff(backoff);
-			setStatus(SIDECAR_STATUS_REVIVING);
-			void poll();
-		},
-		retry: () => {
-			if (disposed) return;
-			resetBackoff(backoff);
-			setStatus(SIDECAR_STATUS_REVIVING);
-			void poll();
-		},
-		dispose: () => {
-			disposed = true;
-			if (pollTimer !== null) {
-				clearTimeout(pollTimer);
-				pollTimer = null;
-			}
-			subscribers.clear();
+			// during which the icon would otherwise look healthy. The answer flips
+			// back to connected once the sidecar answers again.
+			probeAgain();
 		},
+		retry: probeAgain,
+		dispose,
 	};
 }

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/constants.ts

@@ -4,7 +4,7 @@ import type { Tone } from "#dms-ui/app/types/tone";
 export const AI_ROUTES = {
 	status: "/ai/status",
 	changes: "/ai/changes",
-	changeUndoConfirm: "/ai/changes/{id}/undo-confirm",
+	changeUndoConfirm: "/ai/changes/{{row.id}}/undo-confirm",
 	activity: "/ai/activity",
 } as const;
 

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/chat/markdown.test.ts

@@ -1,3 +1,4 @@
+// @vitest-environment jsdom
 import { describe, expect, it } from "vitest";
 import {
 	createIncrementalMarkdown,

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

@@ -1,3 +1,4 @@
+// @vitest-environment jsdom
 import { flushPromises, mount } from "@vue/test-utils";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { nextTick } from "vue";

package/frontend-vue/tests/host-commands.test.ts

@@ -1,3 +1,4 @@
+// @vitest-environment jsdom
 import { describe, expect, it, vi } from "vitest";
 import {
 	createHostCommandDispatcher,

package/frontend-vue/tests/navigation.test.ts

@@ -1,3 +1,4 @@
+// @vitest-environment jsdom
 import { describe, expect, it, vi } from "vitest";
 import { installCurrentPageTracker } from "../app/runtime/current-page";
 import { installNavigationCompleteEmitter } from "../app/runtime/navigation-complete";

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

@@ -1,3 +1,4 @@
+// @vitest-environment jsdom
 import { flushPromises, mount, type VueWrapper } from "@vue/test-utils";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { nextTick, ref } from "vue";

package/frontend-vue/tests/panel-states.test.ts

@@ -1,3 +1,4 @@
+// @vitest-environment jsdom
 import { flushPromises } from "@vue/test-utils";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { nextTick } from "vue";
@@ -334,6 +335,10 @@ describe("tool rows and change sets", () => {
 
 describe("the approvals dock", () => {
 	it("previews a diff with line numbers and allows a scope with ↵", async () => {
+		// The countdown reads the clock: frozen at the request's creation, it
+		// shows the full grace period however slow the run is.
+		vi.useFakeTimers({ toFake: ["Date"] });
+		vi.setSystemTime(DIFF_REQUEST.createdAtMs);
 		const harness = createHarness();
 		const panel = await openPanel(harness);
 		deliver(harness, DIFF_REQUEST);
@@ -342,7 +347,7 @@ describe("the approvals dock", () => {
 		const dock = panel.find(".cb-approve");
 		expect(dock.attributes("role")).toBe("alertdialog");
 		expect(dock.text()).toContain("Needs your approval · 1 of 2");
-		expect(dock.text()).toMatch(/denies in 4:1\d/);
+		expect(dock.text()).toContain("denies in 4:12");
 		expect(panel.find(".perm.is-focused .perm__title").text()).toBe(
 			"Edit customer.form.ts",
 		);

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",