@antelopejs/dms-ai 0.2.1 → 0.4.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/i18n/locales/dms-ai-panel-en-GB.json

@@ -368,6 +368,27 @@
 					"close": "Close",
 					"not_running": "The assistant isn't running in this tab."
 				}
+			},
+			"preview": {
+				"eyebrow": "Block preview",
+				"open": "Preview",
+				"open_aria": "Open the block preview: {title}",
+				"blocks": "{count} block | {count} blocks",
+				"variants": "{count} variant | {count} variants",
+				"with_mockup": "vs your mockup",
+				"proposed": "Proposed",
+				"variants_aria": "Variants",
+				"mockup": "Your mockup",
+				"dms_blocks": "DMS blocks",
+				"mockup_missing": "{name} was attached before the chat reloaded, so it can no longer be shown. Attach it again to compare side by side.",
+				"mockup_external": "External image, not loaded in the dashboard.",
+				"mockup_open": "Open the mockup",
+				"fallback_title": "This DMS version cannot draw block previews",
+				"fallback_body": "Update the DMS to see the real blocks. Here is the tree the assistant sent.",
+				"custom_sketch": "Custom sketch — not a DMS block",
+				"sketch_badge": "Custom sketch",
+				"with_sketch": "custom sketch",
+				"sketch_frame": "Static sketch of a custom component: {caption}"
 			}
 		},
 		"tools": {
@@ -419,7 +440,8 @@
 			"add_query": "Add query",
 			"configure_query": "Configure query",
 			"remove_query": "Remove query",
-			"search_tools": "Load tools"
+			"search_tools": "Load tools",
+			"show_preview": "Show a preview"
 		}
 	}
 }

package/frontend-vue/i18n/locales/dms-ai-panel-fr-FR.json

@@ -368,6 +368,27 @@
 					"close": "Fermer",
 					"not_running": "L'assistant ne tourne pas dans cet onglet."
 				}
+			},
+			"preview": {
+				"eyebrow": "Aperçu de blocs",
+				"open": "Aperçu",
+				"open_aria": "Ouvrir l'aperçu des blocs : {title}",
+				"blocks": "{count} bloc | {count} blocs",
+				"variants": "{count} variante | {count} variantes",
+				"with_mockup": "face à votre maquette",
+				"proposed": "Proposé",
+				"variants_aria": "Variantes",
+				"mockup": "Votre maquette",
+				"dms_blocks": "Blocs DMS",
+				"mockup_missing": "{name} a été jointe avant le rechargement du chat et ne peut plus être affichée. Joignez-la à nouveau pour comparer côte à côte.",
+				"mockup_external": "Image externe, non chargée dans le tableau de bord.",
+				"mockup_open": "Ouvrir la maquette",
+				"fallback_title": "Cette version du DMS ne sait pas afficher d'aperçu de blocs",
+				"fallback_body": "Mettez à jour le DMS pour voir les vrais blocs. Voici l'arbre envoyé par l'assistant.",
+				"custom_sketch": "Esquisse sur mesure — pas un bloc DMS",
+				"sketch_badge": "Esquisse",
+				"with_sketch": "esquisse sur mesure",
+				"sketch_frame": "Esquisse statique d'un composant sur mesure : {caption}"
 			}
 		},
 		"tools": {
@@ -419,7 +440,8 @@
 			"add_query": "Ajouter une requête",
 			"configure_query": "Configurer la requête",
 			"remove_query": "Retirer la requête",
-			"search_tools": "Charger des outils"
+			"search_tools": "Charger des outils",
+			"show_preview": "Montrer un aperçu"
 		}
 	}
 }

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.3 <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();
+	});
+});