@antelopejs/dms-ai 0.1.6 → 0.2.1

package/frontend-vue/app/components/ChatPanel.vue

@@ -1,202 +1,145 @@
 <script setup lang="ts">
-import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { computed, inject, onMounted, ref } from "vue";
 import ChatView from "../chat/components/ChatView.vue";
+import { useChatI18n } from "../chat/composables/useChatI18n";
+import { SETTINGS_PAGE_PATH } from "../chat/constants/protocol";
 import { ASSISTANT_SESSION_KEY } from "../runtime/assistant-session";
 import {
-	DMS_OVERLAYS_DOM_ID,
-	OVERLAY_DOM_ID,
-	PANEL_LABEL,
-	OVERLAY_Z_INDEX,
-	PLACEHOLDER_CONNECTING_TEXT,
-	PLACEHOLDER_REVIVING_TEXT,
-	PLACEHOLDER_UNAVAILABLE_TEXT,
-	PLACEHOLDER_UNAVAILABLE_TITLE,
-	SIDECAR_STATUS_CONNECTED,
 	SIDECAR_STATUS_CONNECTING,
 	SIDECAR_STATUS_REVIVING,
 	SIDECAR_STATUS_UNAVAILABLE,
 } from "../runtime/constants";
 
-interface StatusScreen {
-	title: string;
-	text: string;
-	isBusy: boolean;
-}
-
-interface ResizeStart {
-	x: number;
-	width: number;
-}
-
-const CLOSE_ICON = "i-ph-x-light";
-const CLOSE_LABEL = "Close";
-
-const STATUS_SCREENS: Record<string, StatusScreen> = {
-	[SIDECAR_STATUS_CONNECTING]: {
-		title: "",
-		text: PLACEHOLDER_CONNECTING_TEXT,
-		isBusy: true,
-	},
-	[SIDECAR_STATUS_REVIVING]: {
-		title: "",
-		text: PLACEHOLDER_REVIVING_TEXT,
-		isBusy: true,
-	},
-	[SIDECAR_STATUS_UNAVAILABLE]: {
-		title: PLACEHOLDER_UNAVAILABLE_TITLE,
-		text: PLACEHOLDER_UNAVAILABLE_TEXT,
-		isBusy: false,
-	},
-};
-
-const session = inject(ASSISTANT_SESSION_KEY, null);
-const panelEl = ref<HTMLElement | null>(null);
-const isOpen = computed(() => session?.panel.isOpen.value === true);
-const hasOpened = ref(isOpen.value);
-const isResizing = ref(false);
-let resizeStart: ResizeStart | null = null;
-
-const statusScreen = computed<StatusScreen | null>(() => {
-	const status = session?.status.value ?? SIDECAR_STATUS_CONNECTING;
-	if (status === SIDECAR_STATUS_CONNECTED) return null;
-	return STATUS_SCREENS[status] ?? null;
-});
-
-const panelStyle = computed(() => ({
-	width: `${session?.panel.width.value ?? 0}px`,
-	zIndex: OVERLAY_Z_INDEX,
-}));
-
-watch(isOpen, (open) => {
-	if (open) hasOpened.value = true;
-});
-
-function onResizeMove(event: PointerEvent): void {
-	if (resizeStart === null) return;
-	session?.panel.resize(resizeStart.width + (resizeStart.x - event.clientX));
-}
-
-function stopResizing(): void {
-	resizeStart = null;
-	isResizing.value = false;
-	globalThis.removeEventListener("pointermove", onResizeMove);
-	globalThis.removeEventListener("pointerup", onResizeEnd);
-}
-
-function onResizeEnd(): void {
-	stopResizing();
-	session?.panel.commitWidth();
-}
-
-function startResize(event: PointerEvent): void {
-	if (session === null) return;
-	event.preventDefault();
-	resizeStart = { x: event.clientX, width: session.panel.width.value };
-	isResizing.value = true;
-	globalThis.addEventListener("pointermove", onResizeMove);
-	globalThis.addEventListener("pointerup", onResizeEnd);
-}
-
-function isInside(event: Event, element: HTMLElement | null): boolean {
-	return element !== null && event.composedPath().includes(element);
-}
-
-function isInsidePanelOrDmsOverlays(event: Event): boolean {
-	return (
-		isInside(event, panelEl.value) ||
-		isInside(event, document.getElementById(DMS_OVERLAYS_DOM_ID))
-	);
-}
-
-function onDocumentPointerDown(event: PointerEvent): void {
-	if (!isOpen.value || panelEl.value === null) return;
-	if (isInsidePanelOrDmsOverlays(event)) return;
-	session?.panel.closeFromOutside(event.timeStamp);
-}
+// The DMS docks this component in its side panel and mounts it while the
+// panel is open; the session arrives once the sidecar answered its first
+// probe, and the panel shows the first connection until then.
+const sessionRef = inject(ASSISTANT_SESSION_KEY, null);
+const session = computed(() => sessionRef?.value ?? null);
+const { t } = useChatI18n();
+const isRestarting = ref(false);
+// Drawn once mounted, inside a host element rendered on the server and the
+// client alike, so hydration always finds the same node.
+const isMounted = ref(false);
+
+const status = computed(
+	() => session.value?.status.value ?? SIDECAR_STATUS_CONNECTING,
+);
+const isUnavailable = computed(
+	() => status.value === SIDECAR_STATUS_UNAVAILABLE,
+);
+const isFirstConnect = computed(
+	() => status.value === SIDECAR_STATUS_CONNECTING,
+);
+const lastError = computed(() => session.value?.lastError.value ?? null);
 
 function close(): void {
-	session?.panel.close();
+	session.value?.panel.close();
 }
 
 function navigate(path: string): void {
-	session?.navigate(path);
+	session.value?.navigate(path);
 }
 
-onMounted(() => {
-	document.addEventListener("pointerdown", onDocumentPointerDown, {
-		capture: true,
-	});
-});
+async function restart(): Promise<void> {
+	if (session.value === null || isRestarting.value) return;
+	isRestarting.value = true;
+	try {
+		await session.value.restart();
+	} finally {
+		isRestarting.value = false;
+	}
+}
 
-onBeforeUnmount(() => {
-	document.removeEventListener("pointerdown", onDocumentPointerDown, {
-		capture: true,
-	});
-	stopResizing();
+onMounted(() => {
+	isMounted.value = true;
 });
 </script>
 
 <template>
-	<aside
-		v-if="session"
-		:id="OVERLAY_DOM_ID"
-		ref="panelEl"
-		class="dms-ai-panel"
-		:data-open="isOpen"
-		:data-resizing="isResizing"
-		:style="panelStyle"
-		:inert="!isOpen"
-		:aria-label="PANEL_LABEL"
-	>
-		<div class="dms-ai-panel-resize" @pointerdown="startResize" />
-		<ChatView
-			v-if="hasOpened"
-			class="dms-ai-panel-chat"
-			:transport="session.chat"
-			@close="close"
-			@navigate="navigate"
-		/>
-		<div v-if="statusScreen" class="dms-ai-panel-status" role="status">
-			<button
-				type="button"
-				class="dms-ai-panel-close"
-				:aria-label="CLOSE_LABEL"
-				:title="CLOSE_LABEL"
-				@click="close"
+	<div class="dms-ai-panel">
+		<template v-if="isMounted">
+			<ChatView
+				v-if="session"
+				class="dms-ai-panel-chat"
+				:transport="session.chat"
+				:intents="session.intents"
+				:page="session.currentPage.value"
+				:is-reviving="status === SIDECAR_STATUS_REVIVING"
+				:api="session.api"
+				@close="close"
+				@navigate="navigate"
+			/>
+			<div
+				v-if="isUnavailable || isFirstConnect"
+				class="dms-ai-panel-status"
+				role="status"
 			>
-				<UIcon :name="CLOSE_ICON" class="size-[18px]" />
-			</button>
-			<span v-if="statusScreen.isBusy" class="dms-ai-panel-spinner" />
-			<b v-if="statusScreen.title" class="dms-ai-panel-status-title">
-				{{ statusScreen.title }}
-			</b>
-			<span class="dms-ai-panel-status-text">{{ statusScreen.text }}</span>
-		</div>
-	</aside>
+				<UButton
+					v-if="session"
+					size="sm"
+					color="neutral"
+					variant="ghost"
+					square
+					icon="i-ph-x"
+					class="dms-ai-panel-close"
+					:aria-label="t('dms_ai.panel.header.close')"
+					@click="close"
+				/>
+				<template v-if="isUnavailable">
+					<DmsIconWell icon="i-ph-plugs" tone="error" size="lg" />
+					<b class="dms-ai-panel-status-title">
+						{{ t("dms_ai.panel.unavailable.title") }}
+					</b>
+					<span class="dms-ai-panel-status-text">
+						{{
+							lastError
+								? t("dms_ai.panel.unavailable.text_error")
+								: t("dms_ai.panel.unavailable.text")
+						}}
+					</span>
+					<code v-if="lastError" class="dms-ai-panel-error">
+						{{ lastError }}
+					</code>
+					<div class="dms-ai-panel-actions">
+						<UButton
+							size="sm"
+							color="secondary"
+							icon="i-ph-arrows-clockwise"
+							:loading="isRestarting"
+							:label="t('dms_ai.panel.unavailable.restart')"
+							@click="restart"
+						/>
+						<UButton
+							size="sm"
+							color="neutral"
+							variant="outline"
+							icon="i-ph-gear-six"
+							:label="t('dms_ai.panel.header.settings')"
+							@click="navigate(SETTINGS_PAGE_PATH)"
+						/>
+					</div>
+					<span class="dms-ai-panel-note">
+						{{ t("dms_ai.panel.unavailable.kept") }}
+					</span>
+				</template>
+				<template v-else>
+					<span class="dms-ai-panel-spinner" />
+					<b class="dms-ai-panel-status-title">
+						{{ t("dms_ai.panel.connection.first_connect") }}
+					</b>
+				</template>
+			</div>
+		</template>
+	</div>
 </template>
 
 <style scoped>
 .dms-ai-panel {
-	position: fixed;
-	top: 0;
-	right: 0;
-	bottom: 0;
+	position: relative;
 	display: flex;
+	min-width: 0;
 	overflow: hidden;
-	background: var(--ui-bg);
 	color: var(--ui-text);
-	border-left: 1px solid var(--ui-border);
-	box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
-	transform: translateX(100%);
-	transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.dms-ai-panel[data-open="true"] {
-	transform: none;
-}
-
-.dms-ai-panel[data-resizing="true"] {
-	user-select: none;
 }
 
 .dms-ai-panel-chat {
@@ -204,17 +147,6 @@ onBeforeUnmount(() => {
 	min-width: 0;
 }
 
-.dms-ai-panel-resize {
-	position: absolute;
-	top: 0;
-	left: 0;
-	z-index: 3;
-	width: 6px;
-	height: 100%;
-	cursor: ew-resize;
-	touch-action: none;
-}
-
 .dms-ai-panel-status {
 	position: absolute;
 	inset: 0;
@@ -229,7 +161,7 @@ onBeforeUnmount(() => {
 	font-size: 13px;
 	font-weight: 500;
 	line-height: 1.5;
-	background: var(--ui-bg);
+	background: var(--dms-bg-sidebar, var(--ui-bg));
 }
 
 .dms-ai-panel-status-title {
@@ -243,27 +175,40 @@ onBeforeUnmount(() => {
 
 .dms-ai-panel-close {
 	position: absolute;
-	top: 14px;
-	right: 14px;
-	display: grid;
-	place-items: center;
-	width: 30px;
-	height: 30px;
-	border-radius: 7px;
-	color: var(--ui-text-dimmed);
-	cursor: pointer;
+	top: 11px;
+	right: 8px;
 }
 
-.dms-ai-panel-close:hover {
-	background: var(--ui-bg-muted);
-	color: var(--ui-text);
+.dms-ai-panel-error {
+	display: block;
+	max-width: 320px;
+	padding: 8px 10px;
+	border-radius: 8px;
+	background: var(--ui-bg-accented);
+	color: var(--ui-text-highlighted);
+	font: 500 12px var(--font-mono, ui-monospace, monospace);
+	text-align: left;
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+}
+
+.dms-ai-panel-actions {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: 6px;
+}
+
+.dms-ai-panel-note {
+	font-size: 12px;
+	color: var(--ui-text-muted);
 }
 
 .dms-ai-panel-spinner {
 	width: 22px;
 	height: 22px;
-	border: 2.5px solid color-mix(in oklab, currentColor 20%, transparent);
-	border-top-color: currentColor;
+	border: 2px solid var(--dms-assistant-line);
+	border-top-color: var(--ui-secondary);
 	border-radius: 50%;
 	animation: dms-ai-spin 0.7s linear infinite;
 }

package/frontend-vue/app/components/PaletteAnswer.vue

@@ -0,0 +1,185 @@
+<script setup lang="ts">
+import { computed, inject, onBeforeUnmount, onMounted } from "vue";
+import MessageList from "../chat/components/MessageList.vue";
+import { useChatI18n } from "../chat/composables/useChatI18n";
+import { usePaletteTurn } from "../chat/composables/usePaletteTurn";
+import { useRunClock } from "../chat/composables/useRunClock";
+import { MESSAGE_ROLES } from "../chat/constants/conversation";
+import { isRunStalled } from "../chat/utils/run-status";
+import {
+	ASSISTANT_SESSION_KEY,
+	type AssistantSession,
+} from "../runtime/assistant-session";
+
+interface Props {
+	/** The question the palette submitted, trimmed. */
+	prompt: string;
+	/** Closes the palette. */
+	close: () => void;
+}
+
+const props = defineProps<Props>();
+// A read-only answer changes no file: no change set is ever being undone.
+const NO_BUSY_CHANGE_SETS: ReadonlySet<string> = new Set();
+const { t } = useChatI18n();
+const sessionRef = inject(ASSISTANT_SESSION_KEY, null);
+// Read once: a palette answer belongs to the session it was asked in.
+const session: AssistantSession | null = sessionRef?.value ?? null;
+
+const turn =
+	session === null
+		? null
+		: usePaletteTurn({
+				transport: session.chat,
+				prompt: props.prompt,
+				getPagePath: () => session.currentPage.value?.path,
+			});
+const releaseStream = session?.holdStream() ?? (() => undefined);
+
+const isRunning = computed(() => turn?.conversation.isRunning.value === true);
+const nowMs = useRunClock(isRunning);
+const answer = computed(
+	() =>
+		turn?.conversation.messages.value.filter(
+			(message) => message.role !== MESSAGE_ROLES.USER,
+		) ?? [],
+);
+const isStalled = computed(
+	() =>
+		turn !== null &&
+		turn.conversation.isTurnInFlight.value &&
+		turn.channel.isConnected.value &&
+		isRunStalled(turn.conversation.lastEventAtMs.value, nowMs.value),
+);
+const isWaiting = computed(() => turn?.isWaitingForUser.value === true);
+const isStarting = computed(
+	() => turn !== null && answer.value.length === 0 && !isWaiting.value,
+);
+
+function continueInAssistant(): void {
+	if (session === null || turn === null) return;
+	turn.handOff();
+	props.close();
+	session.openConversation(turn.conversationId);
+}
+
+onMounted(() => turn?.start());
+
+onBeforeUnmount(() => {
+	turn?.stop();
+	releaseStream();
+});
+</script>
+
+<template>
+	<div class="dms-ai-palette-answer dms-ai-chat-tokens">
+		<p v-if="turn === null" class="dms-ai-palette-answer__note">
+			{{ t("dms_ai.panel.palette.answer.not_running") }}
+		</p>
+		<template v-else>
+			<p class="dms-ai-palette-answer__mode">
+				<UIcon name="i-ph-eye" />
+				{{ t("dms_ai.panel.palette.answer.read_only") }}
+			</p>
+			<p
+				v-if="isStarting"
+				class="dms-ai-palette-answer__progress"
+				role="status"
+			>
+				<span class="spin-ai" />
+				{{
+					turn.channel.isConnected.value
+						? t("dms_ai.panel.palette.answer.thinking")
+						: t("dms_ai.panel.status.connecting")
+				}}
+			</p>
+			<MessageList
+				v-else
+				class="dms-ai-palette-answer__stream"
+				:messages="answer"
+				:change-sets="turn.conversation.changeSets.value"
+				:busy-change-set-ids="NO_BUSY_CHANGE_SETS"
+				:requests="turn.permissions.queue.value"
+				:is-running="isRunning"
+				:progress="turn.conversation.progress.value"
+				:now-ms="nowMs"
+				:is-stalled="isStalled"
+				:stalled-for-ms="nowMs - turn.conversation.lastEventAtMs.value"
+				@retry="turn.conversation.retry"
+				@reconnect="turn.channel.reconnect"
+				@stop="turn.conversation.interrupt"
+				@focus-request="continueInAssistant"
+				@run-plan="continueInAssistant"
+				@edit-plan="continueInAssistant"
+			/>
+			<p v-if="isWaiting" class="dms-ai-palette-answer__waiting" role="alert">
+				<UIcon name="i-ph-hand-palm" />
+				{{ t("dms_ai.panel.palette.answer.waiting") }}
+			</p>
+		</template>
+		<div class="dms-ai-palette-answer__actions">
+			<UButton
+				v-if="turn !== null"
+				size="sm"
+				color="secondary"
+				:variant="isWaiting ? 'solid' : 'soft'"
+				icon="i-ph-sidebar-simple"
+				:label="t('dms_ai.panel.palette.answer.continue')"
+				@click="continueInAssistant"
+			/>
+			<UButton
+				size="sm"
+				color="neutral"
+				variant="ghost"
+				:label="t('dms_ai.panel.palette.answer.close')"
+				@click="props.close()"
+			/>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.dms-ai-palette-answer {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	font-size: 13px;
+}
+
+.dms-ai-palette-answer__mode,
+.dms-ai-palette-answer__progress,
+.dms-ai-palette-answer__waiting {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	margin: 0;
+	font-size: 12px;
+	color: var(--ui-text-muted);
+}
+
+.dms-ai-palette-answer__waiting {
+	color: var(--ui-warning);
+	font-weight: 500;
+}
+
+.dms-ai-palette-answer__stream {
+	max-height: min(46vh, 420px);
+	overflow-y: auto;
+}
+
+/* The palette's frame already names the assistant. */
+.dms-ai-palette-answer__stream :deep(.cb-who) {
+	display: none;
+}
+
+.dms-ai-palette-answer__note {
+	margin: 0;
+	color: var(--ui-text-muted);
+}
+
+.dms-ai-palette-answer__actions {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 6px;
+}
+</style>

package/frontend-vue/app/components/SkillCard.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type { SkillRow } from "../views/types";
+import { skillLook } from "../views/utils/skills";
+
+interface Props {
+	row: SkillRow;
+	selected?: boolean;
+	select?: (value?: boolean) => void;
+	open?: () => void;
+	actions?: object;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	selected: false,
+	select: undefined,
+	open: undefined,
+	actions: undefined,
+});
+
+const { t } = useI18n();
+
+const look = computed(() => skillLook(props.row));
+const badge = computed(() =>
+	props.row.isShadowed
+		? { label: t("dms_ai.views.skills.shadowed"), tone: "warning" as const }
+		: {
+				label: t(`dms_ai.views.skills.source.${props.row.source}`),
+				tone: look.value.badgeTone,
+			},
+);
+const uses = computed(() =>
+	props.row.uses30d > 0
+		? t(
+				"dms_ai.views.skills.uses",
+				{ count: props.row.uses30d },
+				props.row.uses30d,
+			)
+		: t("dms_ai.views.skills.never_used"),
+);
+</script>
+
+<template>
+	<DmsRecordCard
+		:icon="look.icon"
+		:tone="look.tone"
+		:title="props.row.name"
+		:subtitle="props.row.origin"
+		:description="props.row.description"
+		:tags="props.row.tags"
+		:meta="uses"
+		:selected="props.selected"
+		:muted="props.row.isShadowed"
+		interactive
+		@open="props.open?.()"
+	>
+		<!-- The aside slot replaces the badge: keep it and add the TableView
+		selection checkbox, which a custom card has to draw itself. -->
+		<template #aside>
+			<div class="flex shrink-0 items-center gap-2">
+				<DmsStatusPill
+					:label="badge.label"
+					:tone="badge.tone"
+					dot="none"
+					size="sm"
+				/>
+				<UCheckbox
+					v-if="props.select"
+					:model-value="props.selected"
+					:aria-label="props.row.name"
+					@click.stop
+					@update:model-value="props.select?.(!!$event)"
+				/>
+			</div>
+		</template>
+	</DmsRecordCard>
+</template>