@antelopejs/dms-ai 0.1.6 → 0.2.0

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

@@ -0,0 +1,235 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import DecisionLabel from "../views/DecisionLabel.vue";
+import DiffView from "../views/DiffView.vue";
+import RowStepper from "../views/RowStepper.vue";
+import ResultPill from "../views/ResultPill.vue";
+import UnavailableState from "../views/UnavailableState.vue";
+import { useAiRequest } from "../views/composables/useAiRequest";
+import { useAssistant } from "../views/composables/useAssistant";
+import { useViewFormat } from "../views/composables/useViewFormat";
+import { AI_PAGES, AI_ROUTES, CHANGE_SET_QUERY_KEY } from "../views/constants";
+import type {
+	ActivityDetailPayload,
+	ActivityRow,
+	RowNavigation,
+} from "../views/types";
+import {
+	activityOutput,
+	argumentItems,
+	rawActivityJson,
+} from "../views/utils/activity";
+import { toDiffFiles } from "../views/utils/diff";
+import { toolIcon, toolSource } from "../views/utils/tools";
+
+interface Props {
+	rowData?: ActivityRow;
+	navigation?: RowNavigation;
+}
+
+const props = defineProps<Props>();
+
+const { t } = useI18n();
+const { $authFetch } = useAuthFetch();
+const { moment, toolLabel, clock } = useViewFormat();
+const assistant = useAssistant();
+const detail = useAiRequest<ActivityDetailPayload>();
+const isRawShown = ref(false);
+
+const OUTPUT_MAX_LINES = 14;
+const RAW_MAX_LINES = 20;
+
+const rowId = computed(() => props.rowData?.id ?? props.rowData?._id);
+
+function load(): void {
+	const id = rowId.value;
+	if (!id) return;
+	void detail.run(() =>
+		$authFetch<ActivityDetailPayload>(
+			`${AI_ROUTES.activity}/${encodeURIComponent(id)}`,
+		),
+	);
+}
+
+watch(rowId, load, { immediate: true });
+
+const row = computed(() => props.rowData);
+const eyebrow = computed(() => {
+	const current = row.value;
+	if (!current) return "";
+	const source = t(`dms_ai.views.source.${toolSource(current.tool)}`);
+	return `${source} · ${moment(current.timestampMs, true)}`;
+});
+const heading = computed(() => {
+	const current = row.value;
+	if (!current) return "";
+	const label = toolLabel(current.tool);
+	return current.target ? `${label} · ${current.target}` : label;
+});
+
+const facts = computed(() => [
+	{ id: "allowed", label: t("dms_ai.views.activity.allowed") },
+	{ id: "result", label: t("dms_ai.views.activity.result") },
+]);
+
+const args = computed(() => argumentItems(detail.data.value?.args));
+const diffFiles = computed(() => toDiffFiles(detail.data.value?.diff ?? []));
+const trail = computed(() => detail.data.value?.decisionTrail ?? []);
+const output = computed(() => activityOutput(detail.data.value));
+const rawJson = computed(() => rawActivityJson(row.value, detail.data.value));
+
+function viewChangeSet(): void {
+	const id = row.value?.changeSetId;
+	if (!id) return;
+	const query = new URLSearchParams({ [CHANGE_SET_QUERY_KEY]: id });
+	assistant.goTo(`${AI_PAGES.changes}?${query.toString()}`);
+}
+
+function openConversation(): void {
+	if (row.value) assistant.openConversation(row.value.conversationId);
+}
+</script>
+
+<template>
+	<div v-if="row" class="flex min-h-full flex-col gap-5">
+		<RowStepper v-if="props.navigation" :navigation="props.navigation" />
+
+		<header class="flex items-start gap-3">
+			<DmsIconWell :icon="toolIcon(row.tool)" tone="neutral" size="lg" />
+			<div class="min-w-0 flex-1">
+				<p
+					class="text-dimmed font-mono text-[10.5px] font-semibold uppercase tracking-[0.12em]"
+				>
+					{{ eyebrow }}
+				</p>
+				<h3 class="text-highlighted mt-1 text-[17px] font-[650] leading-snug">
+					{{ heading }}
+				</h3>
+			</div>
+		</header>
+
+		<DmsKeyValueList :items="facts">
+			<template #value="{ item }">
+				<DecisionLabel
+					v-if="item.id === 'allowed'"
+					:allowed-by="row.allowedBy"
+				/>
+				<ResultPill
+					v-else
+					:result="row.result"
+					:detail="row.resultDetail"
+					:change-set-number="row.changeSetNumber"
+				/>
+			</template>
+		</DmsKeyValueList>
+
+		<UnavailableState
+			v-if="detail.failure.value"
+			:failure="detail.failure.value"
+			:message="detail.message.value"
+			size="sm"
+			@retry="load"
+		/>
+		<div
+			v-else-if="!detail.data.value"
+			class="flex flex-col gap-3"
+			:aria-busy="true"
+			:aria-label="t('dms_ai.views.common.loading')"
+		>
+			<USkeleton class="h-3 w-24" />
+			<USkeleton class="h-24 w-full" />
+			<USkeleton class="h-32 w-full" />
+		</div>
+		<template v-else>
+			<section v-if="args.length > 0" class="flex flex-col gap-2">
+				<DmsEyebrow :label="t('dms_ai.views.activity.arguments')" />
+				<div class="border-default bg-(--dms-bg-field) rounded-md border px-3">
+					<DmsKeyValueList :items="args" dense />
+				</div>
+			</section>
+
+			<section v-if="trail.length > 0" class="flex flex-col gap-2">
+				<DmsEyebrow :label="t('dms_ai.views.activity.decision_trail')" />
+				<ol class="flex flex-col">
+					<li
+						v-for="(step, index) in trail"
+						:key="index"
+						class="border-muted flex items-baseline gap-3 border-s-2 py-1 ps-3 text-[13px]"
+					>
+						<span class="text-dimmed font-mono text-[11.5px] tabular-nums">
+							{{ clock(step.atMs) }}
+						</span>
+						<span class="text-toned">{{ step.label }}</span>
+					</li>
+				</ol>
+			</section>
+
+			<section v-if="diffFiles.length > 0" class="flex flex-col gap-2">
+				<DmsEyebrow :label="t('dms_ai.views.activity.diff')" />
+				<DiffView :files="diffFiles" />
+			</section>
+
+			<section v-if="output" class="flex flex-col gap-2">
+				<DmsEyebrow :label="t('dms_ai.views.activity.output')" />
+				<DmsCodeSnippet
+					:code="output"
+					language="text"
+					:max-lines="OUTPUT_MAX_LINES"
+					wrap
+				/>
+			</section>
+
+			<div class="flex flex-col gap-2">
+				<UButton
+					class="self-start"
+					icon="i-ph-brackets-curly"
+					color="neutral"
+					variant="ghost"
+					size="xs"
+					:aria-expanded="isRawShown"
+					:label="
+						t(
+							isRawShown
+								? 'dms_ai.views.activity.hide_raw'
+								: 'dms_ai.views.activity.show_raw',
+						)
+					"
+					@click="isRawShown = !isRawShown"
+				/>
+				<DmsCodeSnippet
+					v-if="isRawShown"
+					:code="rawJson"
+					language="json"
+					:max-lines="RAW_MAX_LINES"
+				/>
+			</div>
+		</template>
+
+		<footer
+			v-if="assistant.isAvailable || row.changeSetId"
+			class="border-default bg-default sticky bottom-0 mt-auto flex flex-wrap justify-end gap-2 border-t pt-4"
+		>
+			<UButton
+				v-if="assistant.isAvailable"
+				icon="i-ph-chats-circle"
+				color="neutral"
+				variant="outline"
+				:label="t('dms_ai.views.activity.open_conversation')"
+				@click="openConversation"
+			/>
+			<UButton
+				v-if="row.changeSetId"
+				icon="i-ph-git-diff"
+				color="secondary"
+				:label="
+					row.changeSetNumber !== undefined
+						? t('dms_ai.views.activity.view_change_set_number', {
+								number: row.changeSetNumber,
+							})
+						: t('dms_ai.views.activity.view_change_set')
+				"
+				@click="viewChangeSet"
+			/>
+		</footer>
+	</div>
+</template>

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

@@ -0,0 +1,249 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from "vue";
+import { useDmsRoute } from "#dms/frontend-module";
+import ChangeSetPanel from "../views/ChangeSetPanel.vue";
+import UnavailableState from "../views/UnavailableState.vue";
+import { useAiRequest } from "../views/composables/useAiRequest";
+import { useAssistant } from "../views/composables/useAssistant";
+import { useViewFormat } from "../views/composables/useViewFormat";
+import {
+	AI_ROUTES,
+	CHANGE_SET_QUERY_KEY,
+	CHANGES_PAGE_SIZE,
+} from "../views/constants";
+import type {
+	AssistantStatus,
+	ChangeSetSummary,
+	ListPayload,
+	ScopeId,
+} from "../views/types";
+import {
+	changeSetIcon,
+	matchesSearch,
+	readSelectedSet,
+	writeSelectedSet,
+} from "../views/utils/change-sets";
+
+type ScopeFilter = ScopeId | "all";
+
+const { t } = useI18n();
+const { $authFetch } = useAuthFetch();
+const { moment } = useViewFormat();
+const assistant = useAssistant();
+const route = useDmsRoute();
+
+const list = useAiRequest<ListPayload<ChangeSetSummary>>();
+const status = useAiRequest<AssistantStatus>();
+const changeSets = ref<ChangeSetSummary[]>([]);
+const total = ref(0);
+const scope = ref<ScopeFilter>("all");
+const search = ref("");
+const selectedId = ref<string | undefined>(readSelectedSet());
+// The list loads on the client only: until its first answer the server and
+// the hydrating client both draw the skeleton, never a premature empty state.
+const hasLoaded = ref(false);
+
+const SCOPE_ITEMS = computed(() => [
+	{ value: "all", label: t("dms_ai.views.changes.filter_all") },
+	{ value: "safe", label: t("dms_ai.views.changes.filter_safe") },
+	{ value: "vibe", label: t("dms_ai.views.changes.filter_code") },
+]);
+
+function listQuery(offset: number): Record<string, string | number> {
+	const query: Record<string, string | number> = {
+		offset,
+		limit: CHANGES_PAGE_SIZE,
+	};
+	if (scope.value === "all") return query;
+	return { ...query, scope: scope.value, filter_scope: `is:${scope.value}` };
+}
+
+async function loadPage(offset: number): Promise<void> {
+	const page = await list.run(() =>
+		$authFetch<ListPayload<ChangeSetSummary>>(AI_ROUTES.changes, {
+			query: listQuery(offset),
+		}),
+	);
+	hasLoaded.value = true;
+	if (!page) return;
+	changeSets.value =
+		offset === 0 ? page.results : [...changeSets.value, ...page.results];
+	total.value = page.total;
+	if (selectedId.value === undefined) selectedId.value = page.results[0]?.id;
+}
+
+function reload(): Promise<void> {
+	return loadPage(0);
+}
+
+function loadMore(): Promise<void> {
+	return loadPage(changeSets.value.length);
+}
+
+onMounted(() => {
+	void status.run(() => $authFetch<AssistantStatus>(AI_ROUTES.status));
+	void reload();
+});
+
+watch(scope, reload);
+
+watch(
+	() => route.query[CHANGE_SET_QUERY_KEY],
+	(id) => {
+		if (id) selectedId.value = id;
+	},
+);
+
+function select(id: string | number | undefined): void {
+	if (id === undefined) return;
+	selectedId.value = String(id);
+	writeSelectedSet(selectedId.value);
+}
+
+function sublabel(set: ChangeSetSummary): string {
+	if (set.state === "undone") {
+		const parts = [`#${set.number}`, t("dms_ai.views.changes.undone")];
+		if (set.stateChangedAtMs) parts.push(moment(set.stateChangedAtMs));
+		if (set.stateChangedBy) parts.push(set.stateChangedBy);
+		return parts.join(" · ");
+	}
+	const parts = [
+		`#${set.number}`,
+		moment(set.createdAtMs),
+		`+${set.added} −${set.removed}`,
+		t(`dms_ai.views.scope.${set.scope}`),
+	];
+	if (set.isAutoFix) parts.push(t("dms_ai.views.changes.auto_fix"));
+	return parts.join(" · ");
+}
+
+const visibleSets = computed(() =>
+	changeSets.value.filter((set) => matchesSearch(set, search.value)),
+);
+const items = computed(() =>
+	visibleSets.value.map((set) => ({
+		value: set.id,
+		label: set.title,
+		sublabel: sublabel(set),
+		icon: changeSetIcon(set),
+	})),
+);
+
+const isCheckpointOff = computed(
+	() => status.data.value?.checkpointsAvailable === false,
+);
+const isFirstLoad = computed(
+	() =>
+		(!hasLoaded.value || list.isLoading.value) && changeSets.value.length === 0,
+);
+const hasMore = computed(() => changeSets.value.length < total.value);
+const listLabel = computed(() =>
+	t("dms_ai.views.changes.list_label", { count: total.value }),
+);
+const emptyActions = computed(() =>
+	assistant.isAvailable
+		? [
+				{
+					label: t("dms_ai.views.common.open_assistant"),
+					icon: "i-ph-sparkle",
+					color: "secondary" as const,
+					onClick: () => assistant.openPanel(),
+				},
+			]
+		: [],
+);
+</script>
+
+<template>
+	<div class="flex flex-col gap-4">
+		<div class="flex flex-wrap items-center justify-between gap-3">
+			<UInput
+				v-model="search"
+				icon="i-ph-magnifying-glass"
+				size="sm"
+				class="w-full sm:w-64"
+				:placeholder="t('dms_ai.views.changes.search')"
+				:aria-label="t('dms_ai.views.changes.search')"
+			/>
+			<DmsSegmented
+				v-model="scope"
+				:items="SCOPE_ITEMS"
+				size="sm"
+				:aria-label="t('dms_ai.views.changes.filter_label')"
+			/>
+		</div>
+
+		<DmsCard v-if="isCheckpointOff" :padded="false">
+			<DmsEmptyState
+				icon="i-ph-git-diff"
+				:title="t('dms_ai.views.changes.off_title')"
+				:description="t('dms_ai.views.changes.off_description')"
+			/>
+		</DmsCard>
+		<DmsCard
+			v-else-if="list.failure.value && changeSets.length === 0"
+			:padded="false"
+		>
+			<UnavailableState
+				:failure="list.failure.value"
+				:message="list.message.value"
+				@retry="reload"
+			/>
+		</DmsCard>
+		<div
+			v-else-if="isFirstLoad"
+			class="grid grid-cols-1 items-start gap-5 lg:grid-cols-[380px_minmax(0,1fr)]"
+			:aria-busy="true"
+			:aria-label="t('dms_ai.views.common.loading')"
+		>
+			<DmsCard class="flex flex-col gap-4">
+				<USkeleton v-for="index in 5" :key="index" class="h-10 w-full" />
+			</DmsCard>
+			<DmsCard class="flex flex-col gap-3">
+				<USkeleton class="h-5 w-64" />
+				<USkeleton class="h-48 w-full" />
+			</DmsCard>
+		</div>
+		<DmsCard v-else-if="changeSets.length === 0" :padded="false">
+			<DmsEmptyState
+				icon="i-ph-git-diff"
+				:title="t('dms_ai.views.changes.empty_title')"
+				:description="t('dms_ai.views.changes.empty_description')"
+				:actions="emptyActions"
+			/>
+		</DmsCard>
+		<DmsCard v-else-if="items.length === 0" :padded="false">
+			<DmsEmptyState
+				variant="no-result"
+				:title="t('dms_ai.views.changes.no_match_title')"
+				:description="t('dms_ai.views.changes.no_match_description')"
+			/>
+		</DmsCard>
+		<template v-else>
+			<DmsMasterDetail
+				:model-value="selectedId"
+				:items="items"
+				:list-label="listLabel"
+				@update:model-value="select"
+			>
+				<ChangeSetPanel
+					v-if="selectedId"
+					:key="selectedId"
+					:change-set-id="selectedId"
+					@changed="reload"
+				/>
+			</DmsMasterDetail>
+			<div v-if="hasMore" class="flex lg:w-[380px] lg:justify-center">
+				<UButton
+					color="neutral"
+					variant="outline"
+					size="sm"
+					icon="i-ph-caret-down"
+					:loading="list.isLoading.value"
+					:label="t('dms_ai.views.common.load_more')"
+					@click="loadMore"
+				/>
+			</div>
+		</template>
+	</div>
+</template>