@antelopejs/dms-ai 0.1.5 → 0.2.0

package/frontend-vue/app/plugins/ai.client.ts

@@ -1,13 +1,36 @@
 import {
 	type DmsAppContext,
+	type DmsI18n,
 	defineDmsPlugin,
 	useDmsRouter,
-	useDmsState,
 } from "#dms/frontend-module";
-import { type Ref, readonly, ref, watch } from "vue";
+import {
+	computed,
+	type Ref,
+	readonly,
+	ref,
+	shallowRef,
+	type ShallowRef,
+	watch,
+} from "vue";
+import { CHAT_I18N_KEY, type ChatI18n } from "../chat/composables/useChatI18n";
+import type { ChatApi } from "../chat/composables/useChangeSetActions";
+import type { CurrentPage } from "../chat/types/conversation";
+import {
+	type AssistantActivity,
+	type AssistantStatusPayload,
+	createAssistantActivity,
+} from "../runtime/assistant-activity";
+import {
+	launcherAction,
+	paletteAssistant,
+	paletteSource,
+} from "../runtime/assistant-commands";
+import { installAssistantNotifications } from "../runtime/assistant-notifications";
 import {
 	ASSISTANT_SESSION_KEY,
 	type AssistantSession,
+	type ChatPanelState,
 } from "../runtime/assistant-session";
 import {
 	type ChannelClient,
@@ -18,15 +41,18 @@ import {
 	createChatTransport,
 } from "../runtime/chat-transport";
 import {
-	APP_OVERLAYS_STATE_KEY,
+	CHANGES_PATH,
 	CHANNEL_IDLE_STOP_MS,
 	CHANNEL_STATUS_RECONNECTING,
-	CHAT_PANEL_COMPONENT_NAME,
 	HELLO_MESSAGE_TYPE,
 	HOST_ROLE,
 	JSON_CONTENT_TYPE,
+	RESTART_PATH,
 	SIDECAR_INFO_PATH,
 	SIDECAR_STATUS_CONNECTED,
+	SIDECAR_STATUS_REVIVING,
+	SIDE_PANEL_ID,
+	STATUS_PATH,
 	VISIBILITY_CHANGE_EVENT,
 } from "../runtime/constants";
 import {
@@ -34,16 +60,12 @@ import {
 	installCurrentPageTracker,
 } from "../runtime/current-page";
 import { createFrameRouter } from "../runtime/frame-router";
-import { registerLauncherAction } from "../runtime/header-action";
 import {
 	createHostCommandDispatcher,
 	type HostCommandDispatcher,
 } from "../runtime/host-commands";
 import { installNavigationCompleteEmitter } from "../runtime/navigation-complete";
-import {
-	type ChatPanelState,
-	createChatPanelState,
-} from "../runtime/panel-state";
+import { createPanelIntents } from "../runtime/panel-intents";
 import { runWhenLoggedIn } from "../runtime/session-gate";
 import { installToggleShortcut } from "../runtime/shortcuts";
 import {
@@ -51,8 +73,10 @@ import {
 	type SidecarStatus,
 	type SidecarStatusController,
 } from "../runtime/sidecar-status";
+import { createStreamHolds, type StreamHolds } from "../runtime/stream-holds";
 
 type AuthFetch = ReturnType<typeof useAuthFetch>["$authFetch"];
+type Toaster = ReturnType<typeof useToast>;
 
 interface ChannelDeps {
 	$authFetch: AuthFetch;
@@ -65,6 +89,26 @@ interface AssistantChannel {
 	chat: ChatTransportHub;
 }
 
+/** What the plugin takes from the DMS before its first await, while in context. */
+interface DashboardDeps {
+	$authFetch: AuthFetch;
+	toaster: Toaster;
+	devReload: ReturnType<typeof useDevReload>;
+	router: ReturnType<typeof useDmsRouter>;
+}
+
+function postJson(
+	$authFetch: AuthFetch,
+	path: string,
+	body?: unknown,
+): Promise<unknown> {
+	return $authFetch(path, {
+		method: "POST",
+		body: JSON.stringify(body ?? {}),
+		headers: { "content-type": JSON_CONTENT_TYPE },
+	});
+}
+
 function createAssistantChannel(deps: ChannelDeps): AssistantChannel {
 	const chat = createChatTransport({
 		send: (msg) => client.send(msg),
@@ -72,12 +116,7 @@ function createAssistantChannel(deps: ChannelDeps): AssistantChannel {
 		getStatus: () => client.getStatus(),
 	});
 	const client = createChannelClient({
-		post: (path, body) =>
-			deps.$authFetch(path, {
-				method: "POST",
-				body: JSON.stringify(body),
-				headers: { "content-type": JSON_CONTENT_TYPE },
-			}),
+		post: (path, body) => postJson(deps.$authFetch, path, body),
 		onReady: () => {
 			client.send({ type: HELLO_MESSAGE_TYPE, role: HOST_ROLE });
 			client.send(buildCurrentPageUpdate(window.location.href));
@@ -96,7 +135,21 @@ function createAssistantChannel(deps: ChannelDeps): AssistantChannel {
 	return { client, chat };
 }
 
-function followPanel(panel: ChatPanelState, client: ChannelClient): () => void {
+/** What keeps the tab's stream open. */
+interface StreamNeeds {
+	panel: ChatPanelState;
+	activity: AssistantActivity;
+	holds: StreamHolds;
+}
+
+/**
+ * The stream is open while the panel is, while the tab shows a chat that
+ * works or waits, so its events (and their toasts) still arrive, and while the
+ * command palette streams an answer; otherwise it gives its connection back
+ * shortly after.
+ */
+function followPanel(needs: StreamNeeds, client: ChannelClient): () => void {
+	const { panel, activity, holds } = needs;
 	let stopTimer: ReturnType<typeof setTimeout> | null = null;
 	const clearStopTimer = (): void => {
 		if (stopTimer !== null) clearTimeout(stopTimer);
@@ -104,17 +157,21 @@ function followPanel(panel: ChatPanelState, client: ChannelClient): () => void {
 	};
 	const follow = (): void => {
 		clearStopTimer();
-		const isNeeded =
-			panel.isOpen.value && document.visibilityState === "visible";
-		if (isNeeded) client.start();
+		const isVisible = document.visibilityState === "visible";
+		const isWanted =
+			panel.isOpen.value || activity.isBusy.value || holds.isHeld.value;
+		if (isVisible && isWanted) client.start();
 		else stopTimer = setTimeout(() => client.stop(), CHANNEL_IDLE_STOP_MS);
 	};
-	const stopWatchingPanel = watch(panel.isOpen, follow);
+	const stopWatching = watch(
+		[panel.isOpen, activity.isBusy, holds.isHeld],
+		follow,
+	);
 	document.addEventListener(VISIBILITY_CHANGE_EVENT, follow);
 	follow();
 	return () => {
 		clearStopTimer();
-		stopWatchingPanel();
+		stopWatching();
 		document.removeEventListener(VISIBILITY_CHANGE_EVENT, follow);
 	};
 }
@@ -129,22 +186,33 @@ function followSidecarStatus(
 	client: ChannelClient,
 ): FollowedSidecarStatus {
 	const status = ref<SidecarStatus>(controller.getStatus());
-	let isFirstReport = true;
+	// Only a sidecar coming back needs a fresh stream: replacing the one that
+	// just opened would re-attach every chat and replay its running turn.
 	const stop = controller.subscribe((next) => {
-		if (next === SIDECAR_STATUS_CONNECTED && !isFirstReport)
+		if (
+			next === SIDECAR_STATUS_CONNECTED &&
+			status.value === SIDECAR_STATUS_REVIVING
+		)
 			client.reconnectNow();
 		status.value = next;
-		isFirstReport = false;
 	});
 	return { status: readonly(status), stop };
 }
 
-function installHostState(client: ChannelClient): () => void {
+function installHostState(
+	client: ChannelClient,
+	currentPage: Ref<CurrentPage | null>,
+): () => void {
 	const sendWhenConnected = (msg: unknown): void => {
 		if (!client.isConnected()) return;
 		client.send(msg);
 	};
-	const stopTracking = installCurrentPageTracker({ send: sendWhenConnected });
+	const stopTracking = installCurrentPageTracker({
+		send: (msg) => {
+			currentPage.value = msg.currentPage;
+			sendWhenConnected(msg);
+		},
+	});
 	const stopNavigation = installNavigationCompleteEmitter({
 		send: sendWhenConnected,
 	});
@@ -154,63 +222,287 @@ function installHostState(client: ChannelClient): () => void {
 	};
 }
 
-function registerChatPanel(): void {
-	const overlays = useDmsState<string[]>(APP_OVERLAYS_STATE_KEY, () => []);
-	if (overlays.value.includes(CHAT_PANEL_COMPONENT_NAME)) return;
-	overlays.value = [...overlays.value, CHAT_PANEL_COMPONENT_NAME];
+function createChatI18n(i18n: DmsI18n): ChatI18n {
+	return {
+		t: (key, params, plural) =>
+			plural === undefined
+				? i18n.t(key, params ?? {})
+				: i18n.t(key, params ?? {}, plural),
+		locale: computed(() => String(i18n.locale.value)),
+	};
 }
 
-async function startAssistant({ vueApp }: DmsAppContext): Promise<void> {
-	const { $authFetch } = useAuthFetch();
-	const controller = createSidecarStatusController(() =>
-		$authFetch(SIDECAR_INFO_PATH),
+function createApi($authFetch: AuthFetch): ChatApi {
+	return {
+		get: <T>(path: string) => $authFetch(path) as Promise<T>,
+		post: <T>(path: string, body?: unknown) =>
+			postJson($authFetch, path, body) as Promise<T>,
+	};
+}
+
+interface SessionParts {
+	deps: DashboardDeps;
+	controller: SidecarStatusController;
+	chat: ChatTransportHub;
+	panel: ChatPanelState;
+	holds: StreamHolds;
+	status: Readonly<Ref<SidecarStatus>>;
+	activity: AssistantActivity;
+	currentPage: Ref<CurrentPage | null>;
+}
+
+function createSession(parts: SessionParts): AssistantSession {
+	const { deps, panel, activity } = parts;
+	const intents = createPanelIntents();
+	return {
+		status: parts.status,
+		chat: parts.chat.transport,
+		panel,
+		navigate: (path) => void deps.router.push(path),
+		openConversation: (conversationId) => {
+			intents.push({ kind: "open", conversationId });
+			panel.open();
+		},
+		startConversation: (prompt) => {
+			intents.push({ kind: "start", prompt });
+			panel.open();
+		},
+		holdStream: parts.holds.hold,
+		pendingApprovals: activity.pendingApprovals,
+		intents,
+		currentPage: readonly(parts.currentPage),
+		api: createApi(deps.$authFetch),
+		lastError: activity.lastError,
+		restart: async () => {
+			try {
+				await postJson(deps.$authFetch, RESTART_PATH);
+			} finally {
+				parts.controller.retry();
+				void activity.refresh();
+			}
+		},
+	};
+}
+
+function registerDashboardEntries(
+	session: AssistantSession,
+	i18n: ChatI18n,
+): () => void {
+	const register = (): void => registerHeaderAction(launcherAction(i18n.t));
+	register();
+	const stopWatchingLocale = watch(i18n.locale, register);
+	registerCommandPaletteSource(
+		paletteSource(i18n.t, session.pendingApprovals, {
+			ask: () => {
+				session.intents.push({ kind: "focus" });
+				session.panel.open();
+			},
+			startConversation: () => session.startConversation(),
+			reviewApprovals: () => {
+				session.intents.push({ kind: "approvals" });
+				session.panel.open();
+			},
+			openChanges: () => session.navigate(CHANGES_PATH),
+		}),
+	);
+	registerCommandPaletteAssistant(
+		paletteAssistant(i18n.t, session.currentPage),
 	);
-	if (!(await controller.init())) return;
-	const router = useDmsRouter();
+	return stopWatchingLocale;
+}
+
+function installToasts(
+	session: AssistantSession,
+	i18n: ChatI18n,
+	toaster: Toaster,
+): () => void {
+	return installAssistantNotifications({
+		chat: session.chat,
+		isPanelOpen: session.panel.isOpen,
+		pendingApprovals: session.pendingApprovals,
+		t: i18n.t,
+		toast: (input) => void toaster.add(input),
+		reviewApprovals: (conversationId) => {
+			if (conversationId !== undefined)
+				session.openConversation(conversationId);
+			session.intents.push({ kind: "approvals" });
+			session.panel.open();
+		},
+		undoChangeSet: (set) =>
+			session.chat.send({
+				type: "change_set_action",
+				conversationId: set.conversationId,
+				changeSetId: set.id,
+				action: "undo",
+			}),
+		reviewChangeSet: (id) =>
+			session.navigate(`${CHANGES_PATH}?set=${encodeURIComponent(id)}`),
+	});
+}
+
+/**
+ * The launcher and the palette entries join the dashboard only once the app is
+ * mounted: the server renders neither, and anything added before hydration
+ * would make the client's tree, and the ids its tooltips and menus draw,
+ * differ from the server's. The panel itself is registered on the server too
+ * (`side-panel.ts`).
+ */
+function registerOnceMounted(
+	context: DmsAppContext,
+	appMounted: Promise<void>,
+	session: AssistantSession,
+	i18n: ChatI18n,
+): () => void {
+	let stop: (() => void) | null = null;
+	let isActive = true;
+	void appMounted.then(() => {
+		if (!isActive) return;
+		context.runWithContext(() => {
+			stop = registerDashboardEntries(session, i18n);
+		});
+	});
+	return () => {
+		isActive = false;
+		stop?.();
+	};
+}
+
+/** What the plugin provides the app before the assistant runs. */
+interface ProvidedAssistant {
+	session: ShallowRef<AssistantSession | null>;
+	i18n: ChatI18n;
+}
+
+interface AssistantRuntime {
+	session: AssistantSession;
+	stops: Array<() => void>;
+}
+
+function createRuntime(
+	deps: DashboardDeps,
+	controller: SidecarStatusController,
+): AssistantRuntime {
 	const dispatchHostCommand = createHostCommandDispatcher({
-		router,
-		devReload: useDmsDevReload(),
+		router: deps.router,
+		devReload: deps.devReload,
 	});
 	const { client, chat } = createAssistantChannel({
-		$authFetch,
+		$authFetch: deps.$authFetch,
 		controller,
 		dispatchHostCommand,
 	});
-	const panel = createChatPanelState();
+	const panel: ChatPanelState = useSidePanel(SIDE_PANEL_ID);
+	const holds = createStreamHolds();
 	const sidecarStatus = followSidecarStatus(controller, client);
-	const session: AssistantSession = {
-		status: sidecarStatus.status,
+	const activity = createAssistantActivity({
+		fetchStatus: () =>
+			deps.$authFetch(STATUS_PATH) as Promise<AssistantStatusPayload>,
 		chat: chat.transport,
+		shouldPoll: () =>
+			!panel.isOpen.value ||
+			sidecarStatus.status.value !== SIDECAR_STATUS_CONNECTED,
+	});
+	const currentPage = ref<CurrentPage | null>(null);
+	const session = createSession({
+		deps,
+		controller,
+		chat,
 		panel,
-		navigate: (path) => void router.push(path),
+		holds,
+		status: sidecarStatus.status,
+		activity,
+		currentPage,
+	});
+	void activity.refresh();
+	const stops = [
+		installToggleShortcut({ onToggle: panel.toggle }),
+		followPanel({ panel, activity, holds }, client),
+		installHostState(client, currentPage),
+		sidecarStatus.stop,
+		activity.stop,
+		controller.dispose,
+		client.stop,
+	];
+	return { session, stops };
+}
+
+interface WireOptions {
+	context: DmsAppContext;
+	appMounted: Promise<void>;
+	provided: ProvidedAssistant;
+	toaster: Toaster;
+}
+
+function wireAssistant(
+	options: WireOptions,
+	runtime: AssistantRuntime,
+): () => void {
+	const { context, appMounted, provided } = options;
+	const { session } = runtime;
+	provided.session.value = session;
+	const stops = [
+		registerOnceMounted(context, appMounted, session, provided.i18n),
+		installToasts(session, provided.i18n, options.toaster),
+		...runtime.stops,
+	];
+	return () => {
+		provided.session.value = null;
+		stops.forEach((stop) => stop());
 	};
-	vueApp.provide(ASSISTANT_SESSION_KEY, session);
-	registerChatPanel();
-	installToggleShortcut({ onToggle: panel.toggle });
-	registerLauncherAction(panel.toggleFromLauncher);
-	const stopFollowing = followPanel(panel, client);
-	const stopHostState = installHostState(client);
-	const teardown = (): void => {
-		stopFollowing();
-		stopHostState();
-		sidecarStatus.stop();
-		controller.dispose();
-		client.stop();
+}
+
+async function startAssistant(
+	context: DmsAppContext,
+	appMounted: Promise<void>,
+	provided: ProvidedAssistant,
+): Promise<void> {
+	const deps: DashboardDeps = {
+		$authFetch: useAuthFetch().$authFetch,
+		toaster: useToast(),
+		devReload: useDevReload(),
+		router: useDmsRouter(),
 	};
-	vueApp.onUnmount(teardown);
+	const controller = createSidecarStatusController(() =>
+		deps.$authFetch(SIDECAR_INFO_PATH),
+	);
+	if (!(await controller.init())) {
+		context.runWithContext(() => unregisterSidePanel(SIDE_PANEL_ID));
+		return;
+	}
+	const teardown = context.runWithContext(() =>
+		wireAssistant(
+			{ context, appMounted, provided, toaster: deps.toaster },
+			createRuntime(deps, controller),
+		),
+	);
+	context.vueApp.onUnmount(teardown);
 	import.meta.hot?.dispose(teardown);
 }
 
 /**
  * The assistant appears for a signed-in owner in development only: a first
  * probe that finds no dms-ai backend, or a disabled sidecar, leaves no trace.
+ * The session is provided at once, empty until that probe answers, so the
+ * panel the server rendered open and the workspace pages follow it.
  */
 export default defineDmsPlugin((context) => {
 	if (!import.meta.env.DEV) return;
+	const provided: ProvidedAssistant = {
+		session: shallowRef<AssistantSession | null>(null),
+		i18n: createChatI18n(context.$i18n),
+	};
+	context.vueApp.provide(ASSISTANT_SESSION_KEY, provided.session);
+	context.vueApp.provide(CHAT_I18N_KEY, provided.i18n);
+	const appMounted = new Promise<void>((resolve) =>
+		context.hook("app:mounted", resolve),
+	);
 	const { loggedIn } = useUserSession();
 	const stopGate = runWhenLoggedIn(
 		() => loggedIn.value,
-		() => void context.runWithContext(() => startAssistant(context)),
+		() =>
+			void context.runWithContext(() =>
+				startAssistant(context, appMounted, provided),
+			),
 	);
 	context.vueApp.onUnmount(stopGate);
 });

package/frontend-vue/app/plugins/side-panel.ts

@@ -0,0 +1,13 @@
+import { defineDmsPlugin } from "#dms/frontend-module";
+import { assistantSidePanel } from "../runtime/assistant-commands";
+
+/**
+ * The panel's place in the dashboard, registered on the server as well: a
+ * panel left open renders docked at its width on the first paint, without the
+ * page jumping. The client plugin withdraws it where the assistant does not
+ * run (no dms-ai backend, the sidecar disabled).
+ */
+export default defineDmsPlugin(() => {
+	if (!import.meta.env.DEV) return;
+	registerSidePanel(assistantSidePanel());
+});

package/frontend-vue/app/runtime/assistant-activity.ts

@@ -0,0 +1,105 @@
+import { computed, type ComputedRef, type Ref, ref } from "vue";
+import type { ChatTransport } from "./chat-transport";
+import { STATUS_POLL_MS } from "./constants";
+import { isTypedMessage } from "./typed-message";
+
+/** The backend's `/ai/status`, as far as the tab reads it. */
+export interface AssistantStatusPayload {
+	pendingApprovals?: number;
+	workingConversations?: number;
+	lastError?: string;
+}
+
+interface ConversationListItem {
+	isRunning?: boolean;
+	pendingApprovals?: number;
+}
+
+interface ConversationListFrame {
+	type: "conversation_list";
+	conversations?: ConversationListItem[];
+}
+
+const CONVERSATION_LIST_TYPE = "conversation_list";
+
+export interface AssistantActivity {
+	/** Requests waiting for an answer, across every chat. */
+	pendingApprovals: Readonly<Ref<number>>;
+	/** Chats running a turn now. */
+	workingConversations: Readonly<Ref<number>>;
+	/** A chat works or waits: the stream is worth keeping while the tab shows. */
+	isBusy: ComputedRef<boolean>;
+	lastError: Readonly<Ref<string | null>>;
+	/** Re-reads the backend's status now. */
+	refresh: () => Promise<void>;
+	stop: () => void;
+}
+
+export interface AssistantActivityOptions {
+	fetchStatus: () => Promise<AssistantStatusPayload>;
+	chat: ChatTransport;
+	/** Whether polling is useful now: the tab shows and the panel is closed. */
+	shouldPoll: () => boolean;
+}
+
+function isListFrame(msg: object): msg is ConversationListFrame {
+	return isTypedMessage(msg) && msg.type === CONVERSATION_LIST_TYPE;
+}
+
+function sum(
+	items: ConversationListItem[],
+	read: (item: ConversationListItem) => number,
+): number {
+	return items.reduce((total, item) => total + read(item), 0);
+}
+
+/**
+ * What the tab knows of the assistant's work across chats, from the backend's
+ * status (polled while the panel is closed) and from the conversation lists
+ * the sidecar broadcasts while the stream is open.
+ */
+export function createAssistantActivity(
+	options: AssistantActivityOptions,
+): AssistantActivity {
+	const pendingApprovals = ref(0);
+	const workingConversations = ref(0);
+	const lastError = ref<string | null>(null);
+
+	const refresh = async (): Promise<void> => {
+		try {
+			const status = await options.fetchStatus();
+			pendingApprovals.value = status.pendingApprovals ?? 0;
+			workingConversations.value = status.workingConversations ?? 0;
+			lastError.value = status.lastError ?? null;
+		} catch {
+			return;
+		}
+	};
+
+	const stopListening = options.chat.onMessage((msg) => {
+		if (!isListFrame(msg)) return;
+		const items = msg.conversations ?? [];
+		pendingApprovals.value = sum(items, (item) => item.pendingApprovals ?? 0);
+		workingConversations.value = sum(items, (item) =>
+			item.isRunning === true ? 1 : 0,
+		);
+	});
+
+	const timer = setInterval(() => {
+		if (options.shouldPoll()) void refresh();
+	}, STATUS_POLL_MS);
+
+	return {
+		pendingApprovals,
+		workingConversations,
+		isBusy: computed(
+			() => pendingApprovals.value > 0 || workingConversations.value > 0,
+		),
+		lastError,
+		refresh,
+		stop: () => {
+			clearInterval(timer);
+			stopListening();
+		},
+	};
+}