@antelopejs/dms-ai 0.1.4 → 0.1.6

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

@@ -2,199 +2,215 @@ import {
 	type DmsAppContext,
 	defineDmsPlugin,
 	useDmsRouter,
-} from '#dms/frontend-module'
+	useDmsState,
+} from "#dms/frontend-module";
+import { type Ref, readonly, ref, watch } from "vue";
+import {
+	ASSISTANT_SESSION_KEY,
+	type AssistantSession,
+} from "../runtime/assistant-session";
 import {
 	type ChannelClient,
 	createChannelClient,
-} from '../runtime/channel-client'
+} from "../runtime/channel-client";
 import {
+	type ChatTransportHub,
 	createChatTransport,
-	exposeChatTransport,
-} from '../runtime/chat-transport'
+} from "../runtime/chat-transport";
 import {
+	APP_OVERLAYS_STATE_KEY,
 	CHANNEL_IDLE_STOP_MS,
 	CHANNEL_STATUS_RECONNECTING,
-	CHAT_CHANNEL,
-	CHATBOX_PATH,
+	CHAT_PANEL_COMPONENT_NAME,
 	HELLO_MESSAGE_TYPE,
-	HOST_CHANNEL,
 	HOST_ROLE,
 	JSON_CONTENT_TYPE,
 	SIDECAR_INFO_PATH,
 	SIDECAR_STATUS_CONNECTED,
-	SIDECAR_STATUS_REVIVING,
-	SIDECAR_STATUS_UNAVAILABLE,
 	VISIBILITY_CHANGE_EVENT,
-} from '../runtime/constants'
+} from "../runtime/constants";
 import {
 	buildCurrentPageUpdate,
 	installCurrentPageTracker,
-} from '../runtime/current-page'
-import { registerLauncherAction } from '../runtime/header-action'
+} 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 { injectOverlay, type OverlayHandle } from '../runtime/overlay'
-import { runWhenLoggedIn } from '../runtime/session-gate'
-import { installToggleShortcut } from '../runtime/shortcuts'
+} from "../runtime/host-commands";
+import { installNavigationCompleteEmitter } from "../runtime/navigation-complete";
+import {
+	type ChatPanelState,
+	createChatPanelState,
+} from "../runtime/panel-state";
+import { runWhenLoggedIn } from "../runtime/session-gate";
+import { installToggleShortcut } from "../runtime/shortcuts";
 import {
 	createSidecarStatusController,
 	type SidecarStatus,
 	type SidecarStatusController,
-} from '../runtime/sidecar-status'
+} from "../runtime/sidecar-status";
 
-type AuthFetch = ReturnType<typeof useAuthFetch>['$authFetch']
+type AuthFetch = ReturnType<typeof useAuthFetch>["$authFetch"];
 
 interface ChannelDeps {
-	$authFetch: AuthFetch
-	controller: SidecarStatusController
-	dispatchHostCommand: HostCommandDispatcher
+	$authFetch: AuthFetch;
+	controller: SidecarStatusController;
+	dispatchHostCommand: HostCommandDispatcher;
 }
 
-function buildIframeUrl(): string {
-	// Seed the chatbox with the host's current light/dark mode so its very first
-	// paint matches; the theme bridge keeps it in sync from there on.
-	const mode = document.documentElement.classList.contains('dark')
-		? 'dark'
-		: 'light'
-	return `${CHATBOX_PATH}?theme=${mode}`
+interface AssistantChannel {
+	client: ChannelClient;
+	chat: ChatTransportHub;
 }
 
-function createAssistantChannel(deps: ChannelDeps): ChannelClient {
+function createAssistantChannel(deps: ChannelDeps): AssistantChannel {
 	const chat = createChatTransport({
-		send: (msg) => channel.send(CHAT_CHANNEL, msg),
-		reconnect: () => channel.reconnectNow(),
-		getStatus: () => channel.getStatus(),
-	})
-	const frameRoutes: Record<string, (raw: string) => void> = {
-		[HOST_CHANNEL]: deps.dispatchHostCommand,
-		[CHAT_CHANNEL]: chat.deliverFrame,
-	}
-	const channel = createChannelClient({
-		channels: [HOST_CHANNEL, CHAT_CHANNEL],
+		send: (msg) => client.send(msg),
+		reconnect: () => client.reconnectNow(),
+		getStatus: () => client.getStatus(),
+	});
+	const client = createChannelClient({
 		post: (path, body) =>
 			deps.$authFetch(path, {
-				method: 'POST',
+				method: "POST",
 				body: JSON.stringify(body),
-				headers: { 'content-type': JSON_CONTENT_TYPE },
+				headers: { "content-type": JSON_CONTENT_TYPE },
 			}),
 		onReady: () => {
-			channel.send(HOST_CHANNEL, { type: HELLO_MESSAGE_TYPE, role: HOST_ROLE })
-			channel.send(HOST_CHANNEL, buildCurrentPageUpdate(window.location.href))
-			chat.announceReady()
+			client.send({ type: HELLO_MESSAGE_TYPE, role: HOST_ROLE });
+			client.send(buildCurrentPageUpdate(window.location.href));
+			chat.announceReady();
 		},
-		onFrame: (name, raw) => frameRoutes[name]?.(raw),
+		onFrame: createFrameRouter({
+			host: deps.dispatchHostCommand,
+			chat: chat.deliver,
+		}),
 		onStatusChange: (status) => {
-			chat.announceStatus(status)
-			// The sidecar went away, or dms-ai reloaded: re-probe, which revives
-			// an idle-exited sidecar, rather than only waiting on the retries.
-			if (status === CHANNEL_STATUS_RECONNECTING) deps.controller.reportChannelDown()
+			chat.announceStatus(status);
+			if (status === CHANNEL_STATUS_RECONNECTING)
+				deps.controller.reportChannelDown();
 		},
-	})
-	exposeChatTransport(chat.transport)
-	return channel
+	});
+	return { client, chat };
 }
 
-function followPanel(overlay: OverlayHandle, channel: ChannelClient): () => void {
-	let stopTimer: ReturnType<typeof setTimeout> | null = null
+function followPanel(panel: ChatPanelState, client: ChannelClient): () => void {
+	let stopTimer: ReturnType<typeof setTimeout> | null = null;
 	const clearStopTimer = (): void => {
-		if (stopTimer !== null) clearTimeout(stopTimer)
-		stopTimer = null
-	}
+		if (stopTimer !== null) clearTimeout(stopTimer);
+		stopTimer = null;
+	};
 	const follow = (): void => {
-		clearStopTimer()
-		const isNeeded = overlay.isOpen() && document.visibilityState === 'visible'
-		if (isNeeded) channel.start()
-		else stopTimer = setTimeout(() => channel.stop(), CHANNEL_IDLE_STOP_MS)
-	}
-	const stopOpenChange = overlay.onOpenChange(follow)
-	document.addEventListener(VISIBILITY_CHANGE_EVENT, follow)
-	follow()
+		clearStopTimer();
+		const isNeeded =
+			panel.isOpen.value && document.visibilityState === "visible";
+		if (isNeeded) client.start();
+		else stopTimer = setTimeout(() => client.stop(), CHANNEL_IDLE_STOP_MS);
+	};
+	const stopWatchingPanel = watch(panel.isOpen, follow);
+	document.addEventListener(VISIBILITY_CHANGE_EVENT, follow);
+	follow();
 	return () => {
-		clearStopTimer()
-		stopOpenChange()
-		document.removeEventListener(VISIBILITY_CHANGE_EVENT, follow)
-	}
+		clearStopTimer();
+		stopWatchingPanel();
+		document.removeEventListener(VISIBILITY_CHANGE_EVENT, follow);
+	};
+}
+
+interface FollowedSidecarStatus {
+	status: Readonly<Ref<SidecarStatus>>;
+	stop: () => void;
 }
 
-function statusApplier(
-	overlay: OverlayHandle,
-	channel: ChannelClient,
-): (status: SidecarStatus) => void {
-	let firstApply = true
-	return (status) => {
-		if (status === SIDECAR_STATUS_CONNECTED) {
-			overlay.repoint(buildIframeUrl())
-			// Only a connect after a drop needs to skip the channel's backoff.
-			if (!firstApply) channel.reconnectNow()
-		} else if (status === SIDECAR_STATUS_REVIVING) {
-			overlay.showPlaceholder('reviving')
-		} else if (status === SIDECAR_STATUS_UNAVAILABLE) {
-			overlay.showPlaceholder('unavailable')
-		} else {
-			overlay.showPlaceholder('connecting')
-		}
-		firstApply = false
-	}
+function followSidecarStatus(
+	controller: SidecarStatusController,
+	client: ChannelClient,
+): FollowedSidecarStatus {
+	const status = ref<SidecarStatus>(controller.getStatus());
+	let isFirstReport = true;
+	const stop = controller.subscribe((next) => {
+		if (next === SIDECAR_STATUS_CONNECTED && !isFirstReport)
+			client.reconnectNow();
+		status.value = next;
+		isFirstReport = false;
+	});
+	return { status: readonly(status), stop };
 }
 
-function installHostState(channel: ChannelClient): () => void {
+function installHostState(client: ChannelClient): () => void {
 	const sendWhenConnected = (msg: unknown): void => {
-		if (!channel.isConnected()) return
-		channel.send(HOST_CHANNEL, msg)
-	}
-	const stopTracking = installCurrentPageTracker({ send: sendWhenConnected })
+		if (!client.isConnected()) return;
+		client.send(msg);
+	};
+	const stopTracking = installCurrentPageTracker({ send: sendWhenConnected });
 	const stopNavigation = installNavigationCompleteEmitter({
 		send: sendWhenConnected,
-	})
+	});
 	return () => {
-		stopTracking()
-		stopNavigation()
-	}
+		stopTracking();
+		stopNavigation();
+	};
+}
+
+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];
 }
 
 async function startAssistant({ vueApp }: DmsAppContext): Promise<void> {
-	const { $authFetch } = useAuthFetch()
+	const { $authFetch } = useAuthFetch();
 	const controller = createSidecarStatusController(() =>
 		$authFetch(SIDECAR_INFO_PATH),
-	)
-	// A null/disabled first probe means the assistant shouldn't appear at all —
-	// preserve the previous "no icon, no overlay" behavior in that case.
-	if (!(await controller.init())) return
-	const overlay = injectOverlay()
-	if (overlay === null) return
-	installToggleShortcut({ onToggle: () => overlay.toggleOpen() })
-	// Registered unconditionally (even while reviving) so the launcher is present
-	// through an outage; opening it surfaces the panel's own status placeholder.
-	registerLauncherAction(() => overlay.toggleFromLauncher())
-	// Host-side dev hot reload: a page the agent just wrote is re-registered
-	// asynchronously, so each navigation waits for the layout to serve it, one at
-	// a time so a burst of commands cannot land out of order.
+	);
+	if (!(await controller.init())) return;
+	const router = useDmsRouter();
 	const dispatchHostCommand = createHostCommandDispatcher({
-		router: useDmsRouter(),
+		router,
 		devReload: useDmsDevReload(),
-	})
-	const channel = createAssistantChannel({ $authFetch, controller, dispatchHostCommand })
-	controller.subscribe(statusApplier(overlay, channel))
-	const stopFollowing = followPanel(overlay, channel)
-	const stopHostState = installHostState(channel)
+	});
+	const { client, chat } = createAssistantChannel({
+		$authFetch,
+		controller,
+		dispatchHostCommand,
+	});
+	const panel = createChatPanelState();
+	const sidecarStatus = followSidecarStatus(controller, client);
+	const session: AssistantSession = {
+		status: sidecarStatus.status,
+		chat: chat.transport,
+		panel,
+		navigate: (path) => void router.push(path),
+	};
+	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()
-		channel.stop()
-	}
-	vueApp.onUnmount(teardown)
-	import.meta.hot?.dispose(teardown)
+		stopFollowing();
+		stopHostState();
+		sidecarStatus.stop();
+		controller.dispose();
+		client.stop();
+	};
+	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.
+ */
 export default defineDmsPlugin((context) => {
-	if (!import.meta.env.DEV) return
-	const { loggedIn } = useUserSession()
+	if (!import.meta.env.DEV) return;
+	const { loggedIn } = useUserSession();
 	const stopGate = runWhenLoggedIn(
 		() => loggedIn.value,
 		() => void context.runWithContext(() => startAssistant(context)),
-	)
-	context.vueApp.onUnmount(stopGate)
-})
+	);
+	context.vueApp.onUnmount(stopGate);
+});

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

@@ -0,0 +1,21 @@
+import type { InjectionKey, Ref } from "vue";
+import type { ChatTransport } from "./chat-transport";
+import type { ChatPanelState } from "./panel-state";
+import type { SidecarStatus } from "./sidecar-status";
+
+/**
+ * What the chat panel needs from the plugin that owns the tab's assistant: the
+ * sidecar's reachability, the chat's side of the tab's stream, the panel's own
+ * state, and the dashboard's router.
+ */
+export interface AssistantSession {
+	status: Readonly<Ref<SidecarStatus>>;
+	chat: ChatTransport;
+	panel: ChatPanelState;
+	/** Opens a page of the dashboard, as its own links do. */
+	navigate: (path: string) => void;
+}
+
+export const ASSISTANT_SESSION_KEY: InjectionKey<AssistantSession> = Symbol(
+	"dms-ai:assistant-session",
+);

package/frontend-vue/app/runtime/backoff.ts

@@ -1,30 +1,27 @@
 export interface BackoffState {
-	index: number
+	index: number;
 }
 
 export function createBackoff(): BackoffState {
-	return { index: 0 }
+	return { index: 0 };
 }
 
-function readScheduleAt(
-	schedule: readonly number[],
-	index: number,
-): number {
-	const value = schedule[index]
-	if (value === undefined) return 0
-	return value
+function readScheduleAt(schedule: readonly number[], index: number): number {
+	const value = schedule[index];
+	if (value === undefined) return 0;
+	return value;
 }
 
 export function nextDelay(
 	state: BackoffState,
 	schedule: readonly number[],
 ): number {
-	const cappedIndex = Math.min(state.index, schedule.length - 1)
-	const delay = readScheduleAt(schedule, cappedIndex)
-	state.index += 1
-	return delay
+	const cappedIndex = Math.min(state.index, schedule.length - 1);
+	const delay = readScheduleAt(schedule, cappedIndex);
+	state.index += 1;
+	return delay;
 }
 
 export function resetBackoff(state: BackoffState): void {
-	state.index = 0
+	state.index = 0;
 }