@antelopejs/dms-ai 0.1.6 → 0.2.0

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

@@ -15,9 +15,10 @@ function isToggleCombo(event: KeyboardEvent): boolean {
 	return isModifierPressed && event.shiftKey && isTargetKey;
 }
 
+/** Toggles the panel on ⌘⇧K / Ctrl+Shift+K, from the page or the panel itself. */
 export function installToggleShortcut(
 	options: InstallToggleShortcutOptions,
-): void {
+): () => void {
 	const handler = (event: KeyboardEvent): void => {
 		if (!isToggleCombo(event)) return;
 		if (isModalOpen()) return;
@@ -25,4 +26,5 @@ export function installToggleShortcut(
 		options.onToggle();
 	};
 	document.addEventListener("keydown", handler);
+	return () => document.removeEventListener("keydown", handler);
 }

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

@@ -26,13 +26,15 @@ export interface SidecarStatusController {
 	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.
+	// late subscriber (the panel or launcher registered after init) reflects it right away.
 	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;
+	/** Probes again from scratch, even after giving up: a restart was asked. */
+	retry: () => void;
 	dispose: () => void;
 }
 
@@ -136,6 +138,12 @@ export function createSidecarStatusController(
 			setStatus(SIDECAR_STATUS_REVIVING);
 			void poll();
 		},
+		retry: () => {
+			if (disposed) return;
+			resetBackoff(backoff);
+			setStatus(SIDECAR_STATUS_REVIVING);
+			void poll();
+		},
 		dispose: () => {
 			disposed = true;
 			if (pollTimer !== null) {

package/frontend-vue/app/runtime/stream-holds.ts

@@ -0,0 +1,24 @@
+import { computed, type ComputedRef, ref } from "vue";
+
+/** Who needs the tab's stream open besides the panel. */
+export interface StreamHolds {
+	isHeld: ComputedRef<boolean>;
+	/** Holds the stream open until the returned function is called, once. */
+	hold: () => () => void;
+}
+
+export function createStreamHolds(): StreamHolds {
+	const count = ref(0);
+	return {
+		isHeld: computed(() => count.value > 0),
+		hold: () => {
+			count.value += 1;
+			let isReleased = false;
+			return () => {
+				if (isReleased) return;
+				isReleased = true;
+				count.value -= 1;
+			};
+		},
+	};
+}

package/frontend-vue/app/views/ChangeSetPanel.vue

@@ -0,0 +1,222 @@
+<script setup lang="ts">
+import { computed, watch } from "vue";
+import DiffView from "./DiffView.vue";
+import UnavailableState from "./UnavailableState.vue";
+import { useAiRequest } from "./composables/useAiRequest";
+import { useAssistant } from "./composables/useAssistant";
+import { useChangeSetActions } from "./composables/useChangeSetActions";
+import { useViewFormat } from "./composables/useViewFormat";
+import { AI_ROUTES } from "./constants";
+import type { Tone } from "#dms-ui/app/types/tone";
+import type {
+	ChangeSetDetail,
+	ChangeSetSummary,
+	Fact,
+	TypecheckOutcome,
+} from "./types";
+
+interface Props {
+	changeSetId: string;
+}
+
+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");
+});
+
+function load(): Promise<ChangeSetDetail | null> {
+	return detail.run(() =>
+		$authFetch<ChangeSetDetail>(
+			`${AI_ROUTES.changes}/${encodeURIComponent(props.changeSetId)}`,
+		),
+	);
+}
+
+watch(() => props.changeSetId, load, { immediate: true });
+
+const changeSet = computed<ChangeSetSummary | null>(
+	() => detail.data.value?.changeSet ?? null,
+);
+const isUndone = computed(() => changeSet.value?.state === "undone");
+
+const FACT_COLUMNS = 2;
+const TYPECHECK_FACT_TONES: Record<TypecheckOutcome, Tone | undefined> = {
+	passed: "success",
+	failed: "error",
+	skipped: undefined,
+};
+
+function factsOf(set: ChangeSetSummary): Fact[] {
+	return [
+		{
+			id: "asked",
+			label: t("dms_ai.views.changes.asked_by"),
+			value: set.askedBy ?? t("dms_ai.views.common.unknown"),
+		},
+		{
+			id: "agent",
+			label: t("dms_ai.views.changes.agent_scope"),
+			value: `${t(`dms_ai.views.agent.${set.agent}`)} · ${t(`dms_ai.views.scope.${set.scope}`)}`,
+		},
+		{
+			id: "approvals",
+			label: t("dms_ai.views.changes.approvals"),
+			value: t("dms_ai.views.changes.approvals_value", {
+				needed: set.approvalsNeeded,
+				ops: set.builderOps,
+			}),
+		},
+		{
+			id: "checks",
+			label: t("dms_ai.views.changes.checks"),
+			value: t(`dms_ai.views.typecheck.${set.typecheck}`),
+			tone: TYPECHECK_FACT_TONES[set.typecheck],
+		},
+	];
+}
+
+const facts = computed(() => (changeSet.value ? factsOf(changeSet.value) : []));
+
+const undoneNote = computed(() => {
+	const set = changeSet.value;
+	if (!set?.stateChangedAtMs) return t("dms_ai.views.changes.undone");
+	const params = { time: moment(set.stateChangedAtMs), by: set.stateChangedBy };
+	return set.stateChangedBy
+		? t("dms_ai.views.changes.undone_at_by", params)
+		: t("dms_ai.views.changes.undone_at", params);
+});
+
+const footNote = computed(() => {
+	const set = changeSet.value;
+	if (!set) return "";
+	const count = set.files.length;
+	return isUndone.value
+		? t("dms_ai.views.changes.redo_note", { count }, count)
+		: t("dms_ai.views.changes.undo_note", { count }, count);
+});
+
+function openPage(): void {
+	const path = detail.data.value?.pagePath;
+	if (path) assistant.goTo(path);
+}
+</script>
+
+<template>
+	<div v-if="detail.failure.value && !changeSet" class="p-4">
+		<UnavailableState
+			:failure="detail.failure.value"
+			:message="detail.message.value"
+			@retry="load"
+		/>
+	</div>
+	<div
+		v-else-if="!changeSet"
+		class="flex flex-col gap-3 p-5"
+		:aria-busy="true"
+		:aria-label="t('dms_ai.views.common.loading')"
+	>
+		<USkeleton class="h-3 w-48" />
+		<USkeleton class="h-5 w-72" />
+		<USkeleton class="mt-4 h-24 w-full" />
+		<USkeleton class="h-40 w-full" />
+	</div>
+	<article v-else :aria-busy="detail.isLoading.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
+					class="text-secondary font-mono text-[10.5px] font-semibold uppercase tracking-[0.12em]"
+				>
+					✦
+					{{
+						t("dms_ai.views.changes.eyebrow", {
+							number: changeSet.number,
+							time: moment(changeSet.createdAtMs),
+						})
+					}}
+				</p>
+				<h2
+					class="text-highlighted mt-1 text-[15px] font-[650]"
+					:class="isUndone && 'text-muted line-through'"
+				>
+					{{ changeSet.title }}
+				</h2>
+			</div>
+			<div class="flex flex-wrap items-center gap-1.5">
+				<UButton
+					v-if="assistant.isAvailable"
+					icon="i-ph-chats-circle"
+					color="neutral"
+					variant="ghost"
+					size="sm"
+					:label="t('dms_ai.views.changes.conversation')"
+					@click="assistant.openConversation(changeSet.conversationId)"
+				/>
+				<UButton
+					v-if="detail.data.value?.pagePath"
+					icon="i-ph-arrow-square-out"
+					color="neutral"
+					variant="outline"
+					size="sm"
+					:label="t('dms_ai.views.changes.open_page')"
+					@click="openPage"
+				/>
+				<UButton
+					v-if="isUndone"
+					icon="i-ph-arrow-clockwise"
+					color="neutral"
+					variant="outline"
+					size="sm"
+					:loading="actions.isBusy.value"
+					:label="t('dms_ai.views.changes.redo')"
+					@click="actions.redo(changeSet)"
+				/>
+				<UButton
+					v-else
+					icon="i-ph-arrow-counter-clockwise"
+					color="neutral"
+					variant="outline"
+					size="sm"
+					:loading="actions.isBusy.value"
+					:label="t('dms_ai.views.changes.undo')"
+					@click="actions.undo(changeSet)"
+				/>
+			</div>
+		</header>
+		<div
+			v-if="isUndone || changeSet.overlapped"
+			class="flex flex-col gap-2 px-5 pb-3"
+		>
+			<DmsBanner
+				v-if="isUndone"
+				size="sm"
+				tone="info"
+				icon="i-ph-arrow-counter-clockwise"
+				:title="undoneNote"
+			/>
+			<DmsBanner
+				v-if="changeSet.overlapped"
+				size="sm"
+				tone="warning"
+				:title="t('dms_ai.views.changes.overlapped')"
+			/>
+		</div>
+		<div class="border-default border-t px-5">
+			<DmsKeyValueList :items="facts" :columns="FACT_COLUMNS" dense />
+		</div>
+		<DiffView :files="detail.data.value?.files ?? []" variant="flush" />
+		<footer
+			class="border-default text-muted bg-(--dms-bg-muted) flex items-center gap-2 border-t px-5 py-3 text-[12.5px]"
+		>
+			<UIcon name="i-ph-info" class="size-4 shrink-0" :aria-hidden="true" />
+			{{ footNote }}
+		</footer>
+	</article>
+</template>

package/frontend-vue/app/views/DecisionLabel.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { DECISION_STYLES } from "./constants";
+import type { AllowedBy } from "./types";
+
+interface Props {
+	allowedBy: AllowedBy;
+}
+
+const props = defineProps<Props>();
+
+const { t } = useI18n();
+
+const style = computed(() => DECISION_STYLES[props.allowedBy]);
+</script>
+
+<template>
+	<span
+		class="text-muted inline-flex items-center gap-[5px] whitespace-nowrap text-xs font-[550]"
+	>
+		<UIcon
+			v-if="style"
+			:name="style.icon"
+			class="size-3.5 shrink-0"
+			:class="style.iconClass"
+			:aria-hidden="true"
+		/>
+		{{ t(`dms_ai.views.allowed.${props.allowedBy}`) }}
+	</span>
+</template>

package/frontend-vue/app/views/DiffView.vue

@@ -0,0 +1,215 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import type { ChangeFileStatus, DiffFile } from "./types";
+import {
+	countLines,
+	renderHunks,
+	splitPath,
+	type RenderedLine,
+} from "./utils/diff";
+
+type DiffViewVariant = "flush" | "boxed";
+
+interface Props {
+	files: DiffFile[];
+	/**
+	 * `flush` sits edge to edge in a card (files ruled by a top border),
+	 * `boxed` is a rounded frame of its own (a drawer, a dialog).
+	 */
+	variant?: DiffViewVariant;
+}
+
+const props = withDefaults(defineProps<Props>(), { variant: "boxed" });
+
+const { t } = useI18n();
+
+const EXPANDED_LINE_LIMIT = 200;
+const DEFAULT_FILE_ICON = "i-ph-file";
+const FILE_ICONS: Record<string, string> = {
+	ts: "i-ph-file-ts",
+	tsx: "i-ph-file-tsx",
+	js: "i-ph-file-js",
+	mjs: "i-ph-file-js",
+	vue: "i-ph-file-vue",
+	css: "i-ph-file-css",
+	html: "i-ph-file-html",
+	md: "i-ph-file-md",
+	json: "i-ph-brackets-curly",
+};
+const STATUS_BADGES: Partial<Record<ChangeFileStatus, string>> = {
+	added: "dms_ai.views.diff.new",
+	deleted: "dms_ai.views.diff.deleted",
+};
+const STATUS_BADGE_TONES: Partial<Record<ChangeFileStatus, string>> = {
+	added: "success",
+	deleted: "error",
+};
+const LINE_CLASSES: Record<RenderedLine["kind"], string> = {
+	context: "text-toned",
+	add: "bg-(--dms-success-tint) text-highlighted shadow-[inset_2px_0_0_var(--ui-success)]",
+	remove:
+		"bg-(--dms-error-tint) text-highlighted shadow-[inset_2px_0_0_var(--ui-error)]",
+	hunk: "bg-(--dms-accent-tint) text-dimmed",
+};
+const MARKER_CLASSES: Record<RenderedLine["kind"], string> = {
+	context: "text-dimmed",
+	add: "text-success",
+	remove: "text-error",
+	hunk: "text-dimmed",
+};
+const VARIANT_CLASSES: Record<DiffViewVariant, string> = {
+	flush: "border-t border-default",
+	boxed: "rounded-md border border-default overflow-hidden",
+};
+
+interface FileView {
+	key: string;
+	file: DiffFile;
+	directory: string;
+	name: string;
+	icon: string;
+	added: number;
+	removed: number;
+	lines: RenderedLine[];
+	badge?: string;
+	badgeTone?: string;
+}
+
+function extensionOf(name: string): string {
+	return name.split(".").at(-1)?.toLowerCase() ?? "";
+}
+
+function toFileView(file: DiffFile, index: number): FileView {
+	const { directory, name } = splitPath(file.path);
+	const counts = countLines(file.hunks);
+	const status = file.status;
+	return {
+		key: `${index}:${file.path}`,
+		file,
+		directory,
+		name,
+		icon: FILE_ICONS[extensionOf(name)] ?? DEFAULT_FILE_ICON,
+		added: file.added ?? counts.added,
+		removed: file.removed ?? counts.removed,
+		lines: renderHunks(file.hunks),
+		badge: status ? STATUS_BADGES[status] : undefined,
+		badgeTone: status ? STATUS_BADGE_TONES[status] : undefined,
+	};
+}
+
+const views = computed(() => props.files.map(toFileView));
+
+const collapsed = ref<Record<string, boolean>>({});
+
+function isExpanded(view: FileView, index: number): boolean {
+	const override = collapsed.value[view.key];
+	if (override !== undefined) return !override;
+	return index === 0 || view.lines.length <= EXPANDED_LINE_LIMIT;
+}
+
+function toggle(view: FileView, index: number): void {
+	collapsed.value = {
+		...collapsed.value,
+		[view.key]: isExpanded(view, index),
+	};
+}
+</script>
+
+<template>
+	<div
+		class="flex flex-col font-mono text-[11.5px] leading-[1.65]"
+		data-diff-view
+	>
+		<section
+			v-for="(view, index) in views"
+			:key="view.key"
+			:class="[
+				VARIANT_CLASSES[props.variant],
+				props.variant === 'boxed' && index > 0 && 'mt-2',
+			]"
+			class="bg-(--dms-bg-field)"
+			data-diff-file
+		>
+			<header
+				class="text-toned bg-(--dms-bg-muted) flex h-[30px] items-center gap-[7px] pl-2.5 pr-2"
+				:class="isExpanded(view, index) && 'border-default border-b'"
+			>
+				<UIcon
+					:name="view.icon"
+					class="text-muted size-3.5 shrink-0"
+					:aria-hidden="true"
+				/>
+				<span class="min-w-0 truncate" :title="view.file.path">
+					<span v-text="view.directory" />
+					<b class="text-highlighted font-semibold" v-text="view.name" />
+				</span>
+				<DmsStatusPill
+					v-if="view.badge"
+					:label="t(view.badge)"
+					:tone="view.badgeTone"
+					dot="none"
+					size="sm"
+				/>
+				<span class="ms-auto flex shrink-0 gap-1.5 font-semibold">
+					<span v-if="view.added > 0" class="text-success">
+						+{{ view.added }}
+					</span>
+					<span v-if="view.removed > 0" class="text-error">
+						−{{ view.removed }}
+					</span>
+				</span>
+				<UButton
+					:icon="isExpanded(view, index) ? 'i-ph-caret-up' : 'i-ph-caret-down'"
+					color="neutral"
+					variant="ghost"
+					size="xs"
+					square
+					:aria-expanded="isExpanded(view, index)"
+					:aria-label="
+						t(
+							isExpanded(view, index)
+								? 'dms_ai.views.diff.collapse'
+								: 'dms_ai.views.diff.expand',
+							{ path: view.file.path },
+						)
+					"
+					@click="toggle(view, index)"
+				/>
+			</header>
+			<template v-if="isExpanded(view, index)">
+				<p v-if="view.file.isBinary" class="text-muted px-3 py-2 font-sans">
+					{{ t("dms_ai.views.diff.binary") }}
+				</p>
+				<p
+					v-else-if="view.lines.length === 0"
+					class="text-muted px-3 py-2 font-sans"
+				>
+					{{ t("dms_ai.views.diff.no_lines") }}
+				</p>
+				<div v-else class="overflow-x-auto py-1" role="table">
+					<div
+						v-for="line in view.lines"
+						:key="line.key"
+						class="grid min-w-max grid-cols-[36px_14px_minmax(0,1fr)] whitespace-pre"
+						:class="LINE_CLASSES[line.kind]"
+						:data-line-kind="line.kind"
+						role="row"
+					>
+						<span
+							class="text-dimmed select-none pr-1.5 text-right"
+							role="cell"
+							v-text="line.number"
+						/>
+						<span
+							class="select-none text-center"
+							:class="MARKER_CLASSES[line.kind]"
+							role="cell"
+							v-text="line.marker"
+						/>
+						<span class="pr-3" role="cell" v-text="line.text" />
+					</div>
+				</div>
+			</template>
+		</section>
+	</div>
+</template>

package/frontend-vue/app/views/ResultPill.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { RESULT_TONES } from "./constants";
+import type { ActivityResult } from "./types";
+
+interface Props {
+	result: ActivityResult;
+	/** "3 errors", "Redirected to Builder". */
+	detail?: string;
+	/** The change set the call's edits landed in. */
+	changeSetNumber?: number;
+}
+
+const props = defineProps<Props>();
+
+const { t } = useI18n();
+
+const label = computed(() => {
+	if (props.result === "done" && props.changeSetNumber !== undefined) {
+		return t("dms_ai.views.result.applied", { number: props.changeSetNumber });
+	}
+	const base = t(`dms_ai.views.result.${props.result}`);
+	return props.detail ? `${base} · ${props.detail}` : base;
+});
+</script>
+
+<template>
+	<DmsStatusPill
+		:label="label"
+		:tone="RESULT_TONES[props.result] ?? 'neutral'"
+	/>
+</template>

package/frontend-vue/app/views/RowStepper.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { RowNavigation } from "./types";
+
+interface Props {
+	navigation: RowNavigation;
+}
+
+const props = defineProps<Props>();
+
+const { t } = useI18n();
+</script>
+
+<template>
+	<div class="text-muted flex items-center justify-between gap-3 text-xs">
+		<span class="font-mono tabular-nums">
+			{{
+				t("dms_ai.views.common.position", {
+					index: props.navigation.index + 1,
+					total: props.navigation.total,
+				})
+			}}
+		</span>
+		<span class="flex items-center gap-1">
+			<UKbd value="K" />
+			<UKbd value="J" />
+			<UButton
+				icon="i-ph-caret-up"
+				color="neutral"
+				variant="outline"
+				size="xs"
+				square
+				:aria-label="t('dms_ai.views.common.previous')"
+				:disabled="!props.navigation.hasPrev"
+				@click="props.navigation.prev()"
+			/>
+			<UButton
+				icon="i-ph-caret-down"
+				color="neutral"
+				variant="outline"
+				size="xs"
+				square
+				:aria-label="t('dms_ai.views.common.next')"
+				:disabled="!props.navigation.hasNext"
+				@click="props.navigation.next()"
+			/>
+		</span>
+	</div>
+</template>

package/frontend-vue/app/views/UnavailableState.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type { RequestFailure } from "./composables/useAiRequest";
+import { useViewFormat } from "./composables/useViewFormat";
+
+type UnavailableStateSize = "sm" | "md" | "lg";
+
+interface Props {
+	failure: RequestFailure;
+	/** The server's message, shown for an unexpected error. */
+	message?: string;
+	size?: UnavailableStateSize;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	message: "",
+	size: "md",
+});
+const emit = defineEmits<{ retry: [] }>();
+
+const { t } = useI18n();
+const { serverMessage } = useViewFormat();
+
+interface FailureCopy {
+	icon: string;
+	title: string;
+	description: string;
+}
+
+const COPY: Record<RequestFailure, () => FailureCopy> = {
+	unavailable: () => ({
+		icon: "i-ph-plugs",
+		title: t("dms_ai.views.unavailable.title"),
+		description: t("dms_ai.views.unavailable.description"),
+	}),
+	error: () => ({
+		icon: "i-ph-warning-circle",
+		title: t("dms_ai.views.error.title"),
+		description: props.message
+			? serverMessage(props.message)
+			: t("dms_ai.views.error.description"),
+	}),
+};
+
+const copy = computed(() => COPY[props.failure]());
+const actions = computed(() => [
+	{
+		label: t("dms_ai.views.common.retry"),
+		icon: "i-ph-arrows-clockwise",
+		color: "neutral" as const,
+		variant: "outline" as const,
+		onClick: () => emit("retry"),
+	},
+]);
+</script>
+
+<template>
+	<DmsEmptyState
+		variant="error"
+		:size="props.size"
+		:icon="copy.icon"
+		:title="copy.title"
+		:description="copy.description"
+		:actions="actions"
+	/>
+</template>