@antelopejs/dms-ai 0.1.5 → 0.2.0

package/frontend-vue/app/views/composables/useAiRequest.ts

@@ -0,0 +1,89 @@
+import { ref, shallowRef, type Ref, type ShallowRef } from "vue";
+import { HTTP_SERVICE_UNAVAILABLE } from "../constants";
+
+/** Why a request failed: the sidecar is down (503), or anything else. */
+export type RequestFailure = "unavailable" | "error";
+
+export interface AiRequest<T> {
+	data: ShallowRef<T | null>;
+	isLoading: Ref<boolean>;
+	failure: Ref<RequestFailure | null>;
+	message: Ref<string>;
+	/**
+	 * Runs `fetcher`, keeping the previous data while it loads; a run that a
+	 * later one overtook is dropped.
+	 */
+	run: (fetcher: () => Promise<T>) => Promise<T | null>;
+}
+
+interface FetchErrorResponse {
+	status?: number;
+}
+
+interface FetchErrorBody {
+	message?: unknown;
+}
+
+interface FetchErrorLike {
+	status?: number;
+	statusCode?: number;
+	response?: FetchErrorResponse;
+	data?: FetchErrorBody;
+	message?: string;
+}
+
+/** The HTTP status of a `$authFetch` rejection, if it got an answer. */
+function errorStatus(error: unknown): number | undefined {
+	const candidate = error as FetchErrorLike | null;
+	return (
+		candidate?.status ?? candidate?.statusCode ?? candidate?.response?.status
+	);
+}
+
+/** The server's `{ message }`, else the error's own text. */
+export function errorMessage(error: unknown): string {
+	const candidate = error as FetchErrorLike | null;
+	const serverMessage = candidate?.data?.message;
+	if (typeof serverMessage === "string") return serverMessage;
+	return candidate?.message ?? String(error);
+}
+
+export function classifyFailure(error: unknown): RequestFailure {
+	return errorStatus(error) === HTTP_SERVICE_UNAVAILABLE
+		? "unavailable"
+		: "error";
+}
+
+/**
+ * One request's state for a view: its data, whether it loads, and whether a
+ * failure means "the assistant isn't running" (503) rather than an error.
+ */
+export function useAiRequest<T>(): AiRequest<T> {
+	const data = shallowRef<T | null>(null);
+	const isLoading = ref(false);
+	const failure = ref<RequestFailure | null>(null);
+	const message = ref("");
+	let latestRun = 0;
+
+	async function run(fetcher: () => Promise<T>): Promise<T | null> {
+		latestRun += 1;
+		const runId = latestRun;
+		isLoading.value = true;
+		try {
+			const result = await fetcher();
+			if (runId !== latestRun) return null;
+			data.value = result;
+			failure.value = null;
+			return result;
+		} catch (error) {
+			if (runId !== latestRun) return null;
+			failure.value = classifyFailure(error);
+			message.value = errorMessage(error);
+			return null;
+		} finally {
+			if (runId === latestRun) isLoading.value = false;
+		}
+	}
+
+	return { data, isLoading, failure, message, run };
+}

package/frontend-vue/app/views/composables/useAssistant.ts

@@ -0,0 +1,33 @@
+import { inject } from "vue";
+import { useDmsRouter } from "#dms/frontend-module";
+import { ASSISTANT_SESSION_KEY } from "../../runtime/assistant-session";
+
+export interface AssistantActions {
+	/** The assistant runs in this tab: its buttons can be offered. Reactive. */
+	readonly isAvailable: boolean;
+	openPanel: () => void;
+	openConversation: (conversationId: string) => void;
+	startConversation: (prompt?: string) => void;
+	/** Opens a dashboard page, as its own links do. */
+	goTo: (path: string) => void;
+}
+
+/**
+ * The tab's assistant session as the workspace views use it. Until it runs
+ * (its first probe pending) and without one (production, sidecar disabled) the
+ * actions do nothing and `isAvailable` hides the buttons that need them.
+ */
+export function useAssistant(): AssistantActions {
+	const session = inject(ASSISTANT_SESSION_KEY, null);
+	const router = useDmsRouter();
+	return {
+		get isAvailable() {
+			return (session?.value ?? null) !== null;
+		},
+		openPanel: () => session?.value?.panel.open(),
+		openConversation: (conversationId) =>
+			session?.value?.openConversation(conversationId),
+		startConversation: (prompt) => session?.value?.startConversation(prompt),
+		goTo: (path) => void router.push(path),
+	};
+}

package/frontend-vue/app/views/composables/useChangeSetActions.ts

@@ -0,0 +1,102 @@
+import { ref, type Ref } from "vue";
+import { AI_ROUTES } from "../constants";
+import type { ChangeSetSummary } from "../types";
+import { classifyFailure, errorMessage } from "./useAiRequest";
+
+export interface ChangeSetActions {
+	isBusy: Ref<boolean>;
+	/** Asks the undo dialog the server words, then undoes from inside it. */
+	undo: (changeSet: ChangeSetSummary) => Promise<void>;
+	redo: (changeSet: ChangeSetSummary) => Promise<void>;
+}
+
+const AI_COLOR = "secondary";
+
+interface UndoResult {
+	undone: string[];
+}
+
+function changeSetPath(changeSetId: string, action: string): string {
+	return `${AI_ROUTES.changes}/${encodeURIComponent(changeSetId)}/${action}`;
+}
+
+/**
+ * Undo and redo of a change set, each confirmed by a toast; `onChanged` runs
+ * once the sidecar has restored the files.
+ */
+export function useChangeSetActions(onChanged: () => void): ChangeSetActions {
+	const { t } = useI18n();
+	const toast = useToast();
+	const { $authFetch } = useAuthFetch();
+	const { confirmFrom } = useConfirmFrom();
+	const isBusy = ref(false);
+
+	function failureToast(error: unknown): void {
+		const failure = classifyFailure(error);
+		toast.add({
+			title: t(`dms_ai.views.${failure}.title`),
+			description:
+				failure === "error"
+					? errorMessage(error)
+					: t("dms_ai.views.unavailable.description"),
+			color: "error",
+			icon: "i-ph-warning-circle",
+		});
+	}
+
+	async function redo(changeSet: ChangeSetSummary): Promise<void> {
+		isBusy.value = true;
+		try {
+			await $authFetch(changeSetPath(changeSet.id, "redo"), {
+				method: "POST",
+				body: {},
+			});
+			toast.add({
+				title: t("dms_ai.views.toast.redone", { number: changeSet.number }),
+				color: AI_COLOR,
+				icon: "i-ph-arrow-clockwise",
+			});
+			onChanged();
+		} catch (error) {
+			failureToast(error);
+		} finally {
+			isBusy.value = false;
+		}
+	}
+
+	async function sendUndo(
+		changeSet: ChangeSetSummary,
+		values: Record<string, unknown>,
+	): Promise<void> {
+		const result = await $authFetch<UndoResult>(
+			changeSetPath(changeSet.id, "undo"),
+			{ method: "POST", body: values },
+		);
+		const count = result.undone.length;
+		toast.add({
+			title: t("dms_ai.views.toast.undone", { number: changeSet.number }),
+			description: t("dms_ai.views.toast.undone_description", { count }, count),
+			color: AI_COLOR,
+			icon: "i-ph-arrow-counter-clockwise",
+			actions: [
+				{
+					label: t("dms_ai.views.changes.redo"),
+					icon: "i-ph-arrow-clockwise",
+					color: "neutral",
+					variant: "outline",
+					onClick: () => void redo(changeSet),
+				},
+			],
+		});
+		onChanged();
+	}
+
+	async function undo(changeSet: ChangeSetSummary): Promise<void> {
+		await confirmFrom(AI_ROUTES.changeUndoConfirm, {
+			params: { id: changeSet.id, number: changeSet.number },
+			onConfirm: (values) => sendUndo(changeSet, values),
+		});
+	}
+
+	return { isBusy, undo, redo };
+}

package/frontend-vue/app/views/composables/useViewFormat.ts

@@ -0,0 +1,55 @@
+import { formatClock, formatMoment, type MomentOptions } from "../utils/moment";
+import { bareToolName, readableToolName } from "../utils/tools";
+
+const TOOL_LEXICON_PREFIX = "dms_ai.tools";
+const I18N_PATH_SEPARATOR = ".";
+const I18N_KEY_SIGIL = "$";
+
+export interface ViewFormat {
+	/** "Today 14:02", "Mon 17:20", "Sep 24". */
+	moment: (ms: number, withSeconds?: boolean) => string;
+	/** "09:58". */
+	clock: (ms: number) => string;
+	/** The tool's name in the panel's lexicon, else a readable form of it. */
+	toolLabel: (tool: string) => string;
+	/** A server message, translated when it is an i18n key (`$` or bare). */
+	serverMessage: (message: string) => string;
+}
+
+/**
+ * The formatters every workspace view shares, bound to the user's language
+ * and regional preferences.
+ */
+export function useViewFormat(): ViewFormat {
+	const { t, te } = useI18n();
+	const regional = useRegionalFormat();
+
+	function momentOptions(withSeconds: boolean): MomentOptions {
+		return {
+			format: (options) => regional.dateTimeFormat(options),
+			t: (key, params) => t(key, params ?? {}),
+			nowMs: Date.now(),
+			withSeconds,
+		};
+	}
+
+	function toolLabel(tool: string): string {
+		const name = bareToolName(tool);
+		if (name.includes(I18N_PATH_SEPARATOR)) return readableToolName(tool);
+		const key = `${TOOL_LEXICON_PREFIX}.${name}.label`;
+		return te(key) ? t(key) : readableToolName(tool);
+	}
+
+	function serverMessage(message: string): string {
+		const key = message.startsWith(I18N_KEY_SIGIL) ? message.slice(1) : message;
+		return te(key) ? t(key) : message;
+	}
+
+	return {
+		serverMessage,
+		moment: (ms, withSeconds = false) =>
+			formatMoment(ms, momentOptions(withSeconds)),
+		clock: (ms) => formatClock(ms, momentOptions(false)),
+		toolLabel,
+	};
+}

package/frontend-vue/app/views/constants.ts

@@ -0,0 +1,43 @@
+import type { ActivityResult, AllowedBy } from "./types";
+import type { Tone } from "#dms-ui/app/types/tone";
+
+export const AI_ROUTES = {
+	status: "/ai/status",
+	changes: "/ai/changes",
+	changeUndoConfirm: "/ai/changes/{id}/undo-confirm",
+	activity: "/ai/activity",
+} as const;
+
+export const AI_PAGES = {
+	changes: "/modules/ai/changes",
+} as const;
+
+export const CHANGE_SET_QUERY_KEY = "set";
+export const CHANGES_PAGE_SIZE = 30;
+export const HTTP_SERVICE_UNAVAILABLE = 503;
+
+export interface DecisionStyle {
+	icon: string;
+	iconClass: string;
+}
+
+export const DECISION_STYLES: Record<AllowedBy, DecisionStyle> = {
+	read_auto: { icon: "i-ph-eye", iconClass: "text-dimmed" },
+	builder_auto: { icon: "i-ph-hammer", iconClass: "text-dimmed" },
+	approved: { icon: "i-ph-check-circle", iconClass: "text-success" },
+	rule: { icon: "i-ph-key", iconClass: "text-secondary" },
+	full_auto: { icon: "i-ph-lightning", iconClass: "text-secondary" },
+	blocked: { icon: "i-ph-shield-warning", iconClass: "text-warning" },
+	denied: { icon: "i-ph-prohibit", iconClass: "text-error" },
+	expired: { icon: "i-ph-hourglass-simple", iconClass: "text-warning" },
+};
+
+export const RESULT_TONES: Record<ActivityResult, Tone> = {
+	done: "success",
+	failed: "error",
+	denied: "neutral",
+	blocked: "warning",
+	stopped: "neutral",
+	pending: "warning",
+	expired: "neutral",
+};

package/frontend-vue/app/views/types.ts

@@ -0,0 +1,189 @@
+import type { Tone } from "#dms-ui/app/types/tone";
+
+type AgentId = "claude" | "codex";
+export type ScopeId = "safe" | "vibe";
+export type ApprovalMode = "normal" | "acceptEdits" | "plan";
+type AssistantState = "ready" | "working" | "waiting";
+export type TypecheckOutcome = "passed" | "failed" | "skipped";
+export type ChangeSetState = "applied" | "undone";
+export type ChangeFileStatus = "added" | "modified" | "deleted";
+export type DiffLineKind = "context" | "add" | "remove";
+export type SkillSource = "module" | "local";
+
+export type AllowedBy =
+	| "read_auto"
+	| "builder_auto"
+	| "approved"
+	| "rule"
+	| "full_auto"
+	| "blocked"
+	| "denied"
+	| "expired";
+
+export type ActivityResult =
+	| "done"
+	| "failed"
+	| "denied"
+	| "blocked"
+	| "stopped"
+	| "pending"
+	| "expired";
+
+export interface DiffLine {
+	kind: DiffLineKind;
+	text: string;
+	oldLine?: number;
+	newLine?: number;
+}
+
+export interface DiffHunk {
+	oldStart: number;
+	newStart: number;
+	lines: DiffLine[];
+}
+
+/** One file of a diff, as DiffView draws it. */
+export interface DiffFile {
+	path: string;
+	status?: ChangeFileStatus;
+	added?: number;
+	removed?: number;
+	hunks: DiffHunk[];
+	isBinary?: boolean;
+}
+
+export interface ChangeSetFile {
+	path: string;
+	status: ChangeFileStatus;
+	added: number;
+	removed: number;
+}
+
+export interface ChangeSetSummary {
+	id: string;
+	number: number;
+	conversationId: string;
+	title: string;
+	createdAtMs: number;
+	agent: AgentId;
+	scope: ScopeId;
+	isAutoFix: boolean;
+	overlapped: boolean;
+	files: ChangeSetFile[];
+	added: number;
+	removed: number;
+	typecheck: TypecheckOutcome;
+	state: ChangeSetState;
+	stateChangedAtMs?: number;
+	stateChangedBy?: string;
+	askedBy?: string;
+	approvalsNeeded: number;
+	builderOps: number;
+}
+
+export interface ChangeSetDetail {
+	changeSet: ChangeSetSummary;
+	files: DiffFile[];
+	conversationTitle: string;
+	pagePath?: string;
+}
+
+export interface ListPayload<T> {
+	results: T[];
+	total: number;
+}
+
+export interface ActivityRow {
+	_id?: string;
+	id: string;
+	timestampMs: number;
+	tool: string;
+	target: string;
+	agent: AgentId;
+	allowedBy: AllowedBy;
+	result: ActivityResult;
+	resultDetail?: string;
+	changeSetId?: string;
+	changeSetNumber?: number;
+	conversationId: string;
+	conversationTitle: string;
+	durationMs?: number;
+	isReadOnly: boolean;
+	isAutoFix: boolean;
+	added?: number;
+	removed?: number;
+	expiresAtMs?: number;
+}
+
+export interface DecisionStep {
+	atMs: number;
+	label: string;
+}
+
+export interface ActivityDiffFile {
+	path: string;
+	hunks: DiffHunk[];
+}
+
+/**
+ * `GET /ai/activity/:id`. The contract names the call's (truncated) output
+ * `result`, the same key as the row's outcome: both readings are accepted.
+ */
+export interface ActivityDetailPayload extends Omit<ActivityRow, "result"> {
+	args?: Record<string, unknown>;
+	result?: string;
+	output?: string;
+	diff?: ActivityDiffFile[];
+	decisionTrail?: DecisionStep[];
+}
+
+export interface AssistantStatus {
+	status: AssistantState;
+	provider: AgentId;
+	providers?: unknown;
+	builderAvailable: boolean;
+	mode: ApprovalMode;
+	generationMode: ScopeId;
+	workingConversations: number;
+	pendingApprovals: number;
+	pendingQuestions: number;
+	port: number;
+	version?: string;
+	lastError?: string;
+	checkpointsAvailable: boolean;
+}
+
+export interface SkillRow {
+	_id: string;
+	name: string;
+	description: string;
+	source: SkillSource;
+	origin: string;
+	tags: string[];
+	uses30d: number;
+	lastUsedAtMs?: number;
+	lastConversationId?: string;
+	isShadowed: boolean;
+	shadowedBy?: string;
+	body: string;
+	qualifiedName: string;
+	icon?: string;
+}
+
+/** What a DMS row drawer hands its component to step through the rows. */
+export interface RowNavigation {
+	index: number;
+	total: number;
+	hasPrev: boolean;
+	hasNext: boolean;
+	prev: () => void;
+	next: () => void;
+}
+
+/** One fact of a change set, a row of a DmsKeyValueList. */
+export interface Fact {
+	id: string;
+	label: string;
+	value: string;
+	tone?: Tone;
+}

package/frontend-vue/app/views/utils/activity.ts

@@ -0,0 +1,77 @@
+import type {
+	ActivityDetailPayload,
+	ActivityResult,
+	ActivityRow,
+} from "../types";
+
+/** A named argument as DmsKeyValueList draws it. */
+export interface ArgumentItem {
+	id: string;
+	label: string;
+	value: string;
+	type: "mono";
+	/** The whole value, which the row's copy button copies. */
+	copyValue: string;
+}
+
+const MAX_ARGUMENT_CHARS = 240;
+const ELLIPSIS = "…";
+const JSON_INDENT = 2;
+const OUTCOMES: ReadonlySet<string> = new Set<ActivityResult>([
+	"done",
+	"failed",
+	"denied",
+	"blocked",
+	"stopped",
+	"pending",
+	"expired",
+]);
+
+function shorten(text: string): string {
+	if (text.length <= MAX_ARGUMENT_CHARS) return text;
+	return `${text.slice(0, MAX_ARGUMENT_CHARS - ELLIPSIS.length)}${ELLIPSIS}`;
+}
+
+function stringifyArgument(value: unknown): string {
+	if (typeof value === "string") return value;
+	if (value === undefined) return "";
+	try {
+		return JSON.stringify(value) ?? String(value);
+	} catch {
+		return String(value);
+	}
+}
+
+/** A call's arguments, one row per name, long values cut short but copied whole. */
+export function argumentItems(
+	args: Record<string, unknown> | undefined,
+): ArgumentItem[] {
+	return Object.entries(args ?? {}).map(([name, value]) => {
+		const text = stringifyArgument(value);
+		return {
+			id: name,
+			label: name,
+			value: shorten(text),
+			type: "mono",
+			copyValue: text,
+		};
+	});
+}
+
+/** The call's output text, whichever key the route sent it under. */
+export function activityOutput(
+	detail: ActivityDetailPayload | null,
+): string | undefined {
+	if (!detail) return undefined;
+	if (detail.output) return detail.output;
+	const result = detail.result;
+	return result && !OUTCOMES.has(result) ? result : undefined;
+}
+
+/** Everything known about the call, for the raw JSON toggle. */
+export function rawActivityJson(
+	row: ActivityRow | undefined,
+	detail: ActivityDetailPayload | null,
+): string {
+	return JSON.stringify({ ...row, ...detail }, null, JSON_INDENT);
+}

package/frontend-vue/app/views/utils/change-sets.ts

@@ -0,0 +1,44 @@
+import { CHANGE_SET_QUERY_KEY } from "../constants";
+import type { ChangeSetSummary } from "../types";
+
+const UNDONE_ICON = "i-ph-arrow-counter-clockwise";
+const AUTO_FIX_ICON = "i-ph-wrench";
+const SCOPE_NODE_ICONS: Record<ChangeSetSummary["scope"], string> = {
+	safe: "i-ph-sparkle",
+	vibe: "i-ph-code",
+};
+
+/** The list node of a set: undone, auto-fix, else its scope. */
+export function changeSetIcon(changeSet: ChangeSetSummary): string {
+	if (changeSet.state === "undone") return UNDONE_ICON;
+	if (changeSet.isAutoFix) return AUTO_FIX_ICON;
+	return SCOPE_NODE_ICONS[changeSet.scope];
+}
+
+/** The set's title or one of its files contains the search, case aside. */
+export function matchesSearch(
+	changeSet: ChangeSetSummary,
+	search: string,
+): boolean {
+	const needle = search.trim().toLowerCase();
+	if (needle === "") return true;
+	const haystack = [changeSet.title, ...changeSet.files.map((f) => f.path)];
+	return haystack.some((text) => text.toLowerCase().includes(needle));
+}
+
+/** The `?set=<id>` deep link of the page, if any. */
+export function readSelectedSet(): string | undefined {
+	if (typeof window === "undefined") return undefined;
+	const params = new URLSearchParams(window.location.search);
+	return params.get(CHANGE_SET_QUERY_KEY) ?? undefined;
+}
+
+/**
+ * Keeps the selected set in the URL without a visit, so a reload or a shared
+ * link opens it again.
+ */
+export function writeSelectedSet(changeSetId: string): void {
+	const url = new URL(window.location.href);
+	url.searchParams.set(CHANGE_SET_QUERY_KEY, changeSetId);
+	window.history.replaceState(window.history.state, "", url);
+}