@antelopejs/dms-ai 0.1.4 → 0.1.6

package/frontend-vue/app/runtime/panel-state.ts

@@ -0,0 +1,88 @@
+import { type Ref, readonly, ref } from "vue";
+import {
+	OVERLAY_DEFAULT_WIDTH_PX,
+	OVERLAY_MIN_WIDTH_PX,
+	OVERLAY_OUTSIDE_TOGGLE_SUPPRESS_MS,
+} from "./constants";
+import {
+	type OverlayPrefs,
+	readPrefs,
+	writePrefsDebounced,
+} from "./overlay-prefs";
+
+const MAX_WIDTH_VW_RATIO = 0.94;
+
+/** Whether the chat panel is open and how wide it is, remembered per browser. */
+export interface ChatPanelState {
+	isOpen: Readonly<Ref<boolean>>;
+	width: Readonly<Ref<number>>;
+	/** The keyboard shortcut's toggle: never suppressed. */
+	toggle: () => void;
+	/**
+	 * The header launcher's toggle. It ignores an open request right after an
+	 * outside click closed the panel: the launcher's `click` follows the same
+	 * `pointerdown` that closed it, and would open it again at once.
+	 */
+	toggleFromLauncher: () => void;
+	close: () => void;
+	/** An outside click closed the panel; `timeStamp` is the event's. */
+	closeFromOutside: (timeStamp: number) => void;
+	/** Resizes live, between the minimum width and most of the viewport. */
+	resize: (width: number) => void;
+	/** Remembers the width once a resize is over. */
+	commitWidth: () => void;
+}
+
+function maxWidth(): number {
+	const viewportWidth = globalThis.innerWidth ?? OVERLAY_DEFAULT_WIDTH_PX * 3;
+	return Math.max(
+		OVERLAY_MIN_WIDTH_PX,
+		Math.round(viewportWidth * MAX_WIDTH_VW_RATIO),
+	);
+}
+
+export function clampWidth(width: number): number {
+	return Math.min(Math.max(width, OVERLAY_MIN_WIDTH_PX), maxWidth());
+}
+
+function resolveInitialPrefs(): OverlayPrefs {
+	const stored = readPrefs();
+	if (stored === null)
+		return { width: OVERLAY_DEFAULT_WIDTH_PX, isOpen: false };
+	return { width: clampWidth(stored.width), isOpen: stored.isOpen };
+}
+
+function isRightAfter(timeStamp: number): boolean {
+	return performance.now() - timeStamp < OVERLAY_OUTSIDE_TOGGLE_SUPPRESS_MS;
+}
+
+export function createChatPanelState(): ChatPanelState {
+	const initial = resolveInitialPrefs();
+	const isOpen = ref(initial.isOpen);
+	const width = ref(initial.width);
+	let outsideCloseAt = Number.NEGATIVE_INFINITY;
+	const persist = (): void =>
+		writePrefsDebounced({ width: width.value, isOpen: isOpen.value });
+	const setOpen = (next: boolean): void => {
+		isOpen.value = next;
+		persist();
+	};
+	return {
+		isOpen: readonly(isOpen),
+		width: readonly(width),
+		toggle: () => setOpen(!isOpen.value),
+		toggleFromLauncher: () => {
+			if (!isOpen.value && isRightAfter(outsideCloseAt)) return;
+			setOpen(!isOpen.value);
+		},
+		close: () => setOpen(false),
+		closeFromOutside: (timeStamp) => {
+			outsideCloseAt = timeStamp;
+			setOpen(false);
+		},
+		resize: (next) => {
+			width.value = clampWidth(next);
+		},
+		commitWidth: persist,
+	};
+}

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

@@ -1,4 +1,4 @@
-import { watch } from 'vue'
+import { watch } from "vue";
 
 // Plugins run once, when the Vue app boots, on whatever page the browser landed
 // on. Landing on the sign-in screen means there is no session yet, and signing
@@ -10,13 +10,13 @@ export function runWhenLoggedIn(
 	start: () => void,
 ): () => void {
 	if (isLoggedIn()) {
-		start()
-		return () => undefined
+		start();
+		return () => undefined;
 	}
 	const stop = watch(isLoggedIn, (loggedIn) => {
-		if (!loggedIn) return
-		stop()
-		start()
-	})
-	return stop
+		if (!loggedIn) return;
+		stop();
+		start();
+	});
+	return stop;
 }

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

@@ -1,28 +1,28 @@
-import { MODAL_OPEN_SELECTOR, TOGGLE_SHORTCUT_KEY } from './constants'
+import { MODAL_OPEN_SELECTOR, TOGGLE_SHORTCUT_KEY } from "./constants";
 
 export interface InstallToggleShortcutOptions {
-	onToggle: () => void
+	onToggle: () => void;
 }
 
 function isModalOpen(): boolean {
-	return document.querySelector(MODAL_OPEN_SELECTOR) !== null
+	return document.querySelector(MODAL_OPEN_SELECTOR) !== null;
 }
 
 function isToggleCombo(event: KeyboardEvent): boolean {
-	const isModifierPressed = event.metaKey || event.ctrlKey
-	const isTargetKey = event.key.toLowerCase() === TOGGLE_SHORTCUT_KEY
+	const isModifierPressed = event.metaKey || event.ctrlKey;
+	const isTargetKey = event.key.toLowerCase() === TOGGLE_SHORTCUT_KEY;
 	// Require shift too — plain ctrl/cmd + k is the DMS search palette.
-	return isModifierPressed && event.shiftKey && isTargetKey
+	return isModifierPressed && event.shiftKey && isTargetKey;
 }
 
 export function installToggleShortcut(
 	options: InstallToggleShortcutOptions,
 ): void {
 	const handler = (event: KeyboardEvent): void => {
-		if (!isToggleCombo(event)) return
-		if (isModalOpen()) return
-		event.preventDefault()
-		options.onToggle()
-	}
-	document.addEventListener('keydown', handler)
+		if (!isToggleCombo(event)) return;
+		if (isModalOpen()) return;
+		event.preventDefault();
+		options.onToggle();
+	};
+	document.addEventListener("keydown", handler);
 }

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

@@ -1,148 +1,148 @@
-import { createBackoff, nextDelay, resetBackoff } from './backoff'
+import { createBackoff, nextDelay, resetBackoff } from "./backoff";
 import {
 	SIDECAR_POLL_DELAYS_MS,
 	SIDECAR_STATUS_CONNECTED,
 	SIDECAR_STATUS_CONNECTING,
 	SIDECAR_STATUS_REVIVING,
 	SIDECAR_STATUS_UNAVAILABLE,
-} from './constants'
+} from "./constants";
 
 export type SidecarStatus =
 	| typeof SIDECAR_STATUS_CONNECTING
 	| typeof SIDECAR_STATUS_CONNECTED
 	| typeof SIDECAR_STATUS_REVIVING
-	| typeof SIDECAR_STATUS_UNAVAILABLE
+	| typeof SIDECAR_STATUS_UNAVAILABLE;
 
 interface SidecarInfo {
-	isRunning: boolean
-	hasGivenUp: boolean
-	disabled: boolean
+	isRunning: boolean;
+	hasGivenUp: boolean;
+	disabled: boolean;
 }
 
 export interface SidecarStatusController {
 	// Runs the first probe. Returns false when the assistant should not be shown
 	// at all — the dms-ai backend route is absent (probe unreachable) or spawning
 	// is disabled for this process — so the caller skips injection entirely.
-	init: () => Promise<boolean>
-	getStatus: () => SidecarStatus
+	init: () => Promise<boolean>;
+	getStatus: () => SidecarStatus;
 	// Subscribe to status changes; fires immediately with the current status so a
 	// late subscriber (overlay/icon injected after init) reflects it right away.
-	subscribe: (cb: (status: SidecarStatus) => void) => () => void
+	subscribe: (cb: (status: SidecarStatus) => void) => () => void;
 	/**
 	 * The host channel dropped: re-probe now, which also revives an idle-exited
 	 * sidecar, and report `connected` again once it answers.
 	 */
-	reportChannelDown: () => void
-	dispose: () => void
+	reportChannelDown: () => void;
+	dispose: () => void;
 }
 
-export type FetchSidecarInfo = () => Promise<Partial<SidecarInfo>>
+export type FetchSidecarInfo = () => Promise<Partial<SidecarInfo>>;
 
 async function fetchInfo(
 	fetchDetails: FetchSidecarInfo,
 ): Promise<SidecarInfo | null> {
 	try {
-		const body = await fetchDetails()
+		const body = await fetchDetails();
 		return {
 			isRunning: body.isRunning === true,
 			hasGivenUp: body.hasGivenUp === true,
 			disabled: body.disabled === true,
-		}
+		};
 	} catch {
-		return null
+		return null;
 	}
 }
 
 export function createSidecarStatusController(
 	fetchDetails: FetchSidecarInfo,
 ): SidecarStatusController {
-	const backoff = createBackoff()
-	const subscribers = new Set<(status: SidecarStatus) => void>()
-	let status: SidecarStatus = SIDECAR_STATUS_CONNECTING
-	let pollTimer: ReturnType<typeof setTimeout> | null = null
-	let disposed = false
+	const backoff = createBackoff();
+	const subscribers = new Set<(status: SidecarStatus) => void>();
+	let status: SidecarStatus = SIDECAR_STATUS_CONNECTING;
+	let pollTimer: ReturnType<typeof setTimeout> | null = null;
+	let disposed = false;
 
 	function notify(): void {
-		for (const cb of subscribers) cb(status)
+		for (const cb of subscribers) cb(status);
 	}
 
 	function setStatus(next: SidecarStatus): void {
-		if (status === next) return
-		status = next
-		notify()
+		if (status === next) return;
+		status = next;
+		notify();
 	}
 
 	function schedulePoll(): void {
-		if (disposed || pollTimer !== null) return
-		const delay = nextDelay(backoff, SIDECAR_POLL_DELAYS_MS)
+		if (disposed || pollTimer !== null) return;
+		const delay = nextDelay(backoff, SIDECAR_POLL_DELAYS_MS);
 		pollTimer = setTimeout(() => {
-			pollTimer = null
-			void poll()
-		}, delay)
+			pollTimer = null;
+			void poll();
+		}, delay);
 	}
 
 	async function poll(): Promise<void> {
-		if (disposed) return
-		handleInfo(await fetchInfo(fetchDetails))
+		if (disposed) return;
+		handleInfo(await fetchInfo(fetchDetails));
 	}
 
 	function handleInfo(info: SidecarInfo | null): void {
-		if (disposed) return
+		if (disposed) return;
 		// Probe itself failed (backend momentarily unreachable): keep waiting.
 		if (info === null) {
-			setStatus(SIDECAR_STATUS_REVIVING)
-			schedulePoll()
-			return
+			setStatus(SIDECAR_STATUS_REVIVING);
+			schedulePoll();
+			return;
 		}
 		if (info.hasGivenUp) {
-			setStatus(SIDECAR_STATUS_UNAVAILABLE)
-			return
+			setStatus(SIDECAR_STATUS_UNAVAILABLE);
+			return;
 		}
 		if (info.isRunning) {
-			resetBackoff(backoff)
-			setStatus(SIDECAR_STATUS_CONNECTED)
-			return
+			resetBackoff(backoff);
+			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()
+		setStatus(SIDECAR_STATUS_REVIVING);
+		schedulePoll();
 	}
 
 	return {
 		init: async (): Promise<boolean> => {
-			const info = await fetchInfo(fetchDetails)
-			if (info === null) return false
-			if (info.disabled) return false
-			handleInfo(info)
-			return true
+			const info = await fetchInfo(fetchDetails);
+			if (info === null) return false;
+			if (info.disabled) return false;
+			handleInfo(info);
+			return true;
 		},
 		getStatus: () => status,
 		subscribe: (cb) => {
-			subscribers.add(cb)
-			cb(status)
+			subscribers.add(cb);
+			cb(status);
 			return () => {
-				subscribers.delete(cb)
-			}
+				subscribers.delete(cb);
+			};
 		},
 		reportChannelDown: () => {
-			if (disposed) return
-			if (status !== SIDECAR_STATUS_CONNECTED) return
+			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()
+			resetBackoff(backoff);
+			setStatus(SIDECAR_STATUS_REVIVING);
+			void poll();
 		},
 		dispose: () => {
-			disposed = true
+			disposed = true;
 			if (pollTimer !== null) {
-				clearTimeout(pollTimer)
-				pollTimer = null
+				clearTimeout(pollTimer);
+				pollTimer = null;
 			}
-			subscribers.clear()
+			subscribers.clear();
 		},
-	}
+	};
 }

package/frontend-vue/app/runtime/typed-message.ts

@@ -0,0 +1,11 @@
+export interface TypedMessage {
+	type: string;
+}
+
+/** Whether `value` is an object carrying a string `type`, as every protocol message does. */
+export function isTypedMessage<T extends TypedMessage = TypedMessage>(
+	value: unknown,
+): value is T {
+	if (value === null || typeof value !== "object") return false;
+	return typeof Reflect.get(value, "type") === "string";
+}

package/frontend-vue/dms.frontend.ts

@@ -1,12 +1,12 @@
-import { defineAsyncComponent, type Component } from 'vue'
-import type { DmsFrontendModule } from '#dms/frontend-module'
-import aiPlugin from './app/plugins/ai.client'
+import { defineAsyncComponent, type Component } from "vue";
+import type { DmsFrontendModule } from "#dms/frontend-module";
+import aiPlugin from "./app/plugins/ai.client";
 
 interface VueModule {
-	default: Component
+	default: Component;
 }
 
-const components = import.meta.glob<VueModule>('./app/components/**/*.vue')
+const components = import.meta.glob<VueModule>("./app/components/**/*.vue");
 
 const frontendModule: DmsFrontendModule = {
 	setup(sdk) {
@@ -14,13 +14,13 @@ const frontendModule: DmsFrontendModule = {
 			.sort(([left], [right]) => left.localeCompare(right))
 			.forEach(([path, loader]) => {
 				const name = `DmsAi${path
-					.split('/')
+					.split("/")
 					.at(-1)!
-					.replace(/\.vue$/, '')}`
-				sdk.registerComponent(name, defineAsyncComponent(loader))
-			})
-		sdk.registerPlugin(aiPlugin, { clientOnly: true })
+					.replace(/\.vue$/, "")}`;
+				sdk.registerComponent(name, defineAsyncComponent(loader));
+			});
+		sdk.registerPlugin(aiPlugin, { clientOnly: true });
 	},
-}
+};
 
-export default frontendModule
+export default frontendModule;

package/frontend-vue/eslint.config.mjs

@@ -1,24 +1,24 @@
-import eslint from '@eslint/js'
-import ts from 'typescript-eslint'
-import vue from 'eslint-plugin-vue'
-import globals from 'globals'
+import eslint from "@eslint/js";
+import ts from "typescript-eslint";
+import vue from "eslint-plugin-vue";
+import globals from "globals";
 
 export default ts.config(
-	{ ignores: ['dist/**', 'node_modules/**'] },
+	{ ignores: ["dist/**", "node_modules/**"] },
 	eslint.configs.recommended,
-	...vue.configs['flat/essential'],
+	...vue.configs["flat/essential"],
 	{
-		files: ['**/*.{ts,vue}'],
+		files: ["**/*.{ts,vue}"],
 		languageOptions: {
 			parserOptions: { parser: ts.parser },
 			globals: { ...globals.browser, ...globals.node },
 		},
 		rules: {
-			'no-undef': 'off',
-			'no-unused-vars': 'off',
-			'no-redeclare': 'off',
-			'vue/multi-word-component-names': 'off',
+			"no-undef": "off",
+			"no-unused-vars": "off",
+			"no-redeclare": "off",
+			"vue/multi-word-component-names": "off",
 		},
 	},
-	{ files: ['**/*.ts'], languageOptions: { parser: ts.parser } },
-)
+	{ files: ["**/*.ts"], languageOptions: { parser: ts.parser } },
+);

package/frontend-vue/package.json

@@ -11,25 +11,32 @@
 	"scripts": {
 		"build": "pnpm --dir \"${DMS_FRONTEND_WORKSPACE:?Set DMS_FRONTEND_WORKSPACE to the generated Inertia workspace}\" build",
 		"typecheck": "pnpm --dir \"${DMS_FRONTEND_WORKSPACE:?Set DMS_FRONTEND_WORKSPACE to the generated Inertia workspace}\" typecheck",
+		"typecheck:chat": "vue-tsc --noEmit -p tsconfig.chat.json",
 		"format": "prettier --write .",
-		"lint": "eslint .",
-		"lint:fix": "eslint . --fix",
+		"lint": "eslint . && prettier --check .",
+		"lint:fix": "eslint . --fix && prettier --write .",
 		"test": "vitest run --passWithNoTests"
 	},
 	"dependencies": {
 		"@inertiajs/vue3": "^3.7.0",
+		"@types/markdown-it": "^14.1.2",
+		"dompurify": "^3.2.4",
+		"markdown-it": "^14.1.0",
 		"vue": "^3.5.18"
 	},
 	"devDependencies": {
 		"@eslint/js": "^9.0.0",
-		"typescript-eslint": "^8.0.0",
+		"@vitejs/plugin-vue": "^6.0.0",
+		"@vitest/runner": "^4.1.5",
+		"@vue/test-utils": "^2.4.6",
 		"eslint": "^9.0.0",
 		"eslint-plugin-vue": "^10.0.0",
 		"globals": "^16.0.0",
-		"@vitest/runner": "^4.1.5",
 		"jsdom": "^29.1.1",
 		"prettier": "^3.5.3",
+		"prettier-plugin-tailwindcss": "^0.6.11",
 		"typescript": "^5.8.2",
+		"typescript-eslint": "^8.0.0",
 		"vitest": "^4.1.5",
 		"vue-tsc": "^3.1.1"
 	}