@antelopejs/dms-ai 0.1.6 → 0.2.1

package/dist/vocabulary/tools.js

@@ -0,0 +1,99 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LOGGED_TOOLS = void 0;
+exports.bareToolName = bareToolName;
+exports.findLoggedTool = findLoggedTool;
+const MCP_TOOL_PREFIX = "mcp__dms-ai__";
+const BUILTIN_TOOLS = {
+    Read: { icon: "i-ph-file-text", source: "code" },
+    Write: { icon: "i-ph-file-plus", source: "code" },
+    Edit: { icon: "i-ph-pencil-simple-line", source: "code" },
+    MultiEdit: { icon: "i-ph-pencil-simple-line", source: "code" },
+    NotebookEdit: { icon: "i-ph-notebook", source: "code" },
+    Bash: { icon: "i-ph-terminal-window", source: "code" },
+    Glob: { icon: "i-ph-files", source: "code" },
+    Grep: { icon: "i-ph-magnifying-glass", source: "code" },
+    LS: { icon: "i-ph-folder-open", source: "code" },
+    WebFetch: { icon: "i-ph-globe", source: "web" },
+    WebSearch: { icon: "i-ph-globe-hemisphere-west", source: "web" },
+    TodoWrite: { icon: "i-ph-list-checks", source: "assistant" },
+    Task: { icon: "i-ph-users-three", source: "assistant" },
+    ExitPlanMode: { icon: "i-ph-list-checks", source: "assistant" },
+    ToolSearch: { icon: "i-ph-wrench", source: "assistant" },
+    Skill: { icon: "i-ph-books", source: "assistant" },
+    AskUserQuestion: { icon: "i-ph-question", source: "assistant" },
+    UndoChangeSet: { icon: "i-ph-arrow-counter-clockwise", source: "assistant" },
+    RedoChangeSet: { icon: "i-ph-arrow-clockwise", source: "assistant" },
+};
+const MODULE_TOOLS = {
+    GetCurrentPage: { icon: "i-ph-browser", source: "project" },
+    NavigateToPage: { icon: "i-ph-arrow-square-out", source: "project" },
+    FindPagesUsing: { icon: "i-ph-magnifying-glass", source: "project" },
+    ListPages: { icon: "i-ph-list", source: "project" },
+    AskUser: { icon: "i-ph-question", source: "assistant" },
+    Typecheck: { icon: "i-ph-shield-check", source: "project" },
+    QueryLogs: { icon: "i-ph-scroll", source: "project" },
+    BuilderCatalog: { icon: "i-ph-books", source: "builder" },
+    BuilderListPages: { icon: "i-ph-list", source: "builder" },
+    BuilderPageStructure: { icon: "i-ph-tree-structure", source: "builder" },
+    BuilderCreatePage: { icon: "i-ph-file-plus", source: "builder" },
+    BuilderConfigurePage: { icon: "i-ph-sliders", source: "builder" },
+    BuilderDeletePage: {
+        icon: "i-ph-trash",
+        source: "builder",
+        isDestructive: true,
+    },
+    BuilderAddBlock: { icon: "i-ph-squares-four", source: "builder" },
+    BuilderConfigureBlock: { icon: "i-ph-sliders", source: "builder" },
+    BuilderMoveBlock: { icon: "i-ph-arrows-out-cardinal", source: "builder" },
+    BuilderRemoveBlock: {
+        icon: "i-ph-trash",
+        source: "builder",
+        isDestructive: true,
+    },
+    BuilderCreateCategory: { icon: "i-ph-folder-plus", source: "builder" },
+    BuilderConfigureCategory: { icon: "i-ph-sliders", source: "builder" },
+    BuilderDeleteCategory: {
+        icon: "i-ph-trash",
+        source: "builder",
+        isDestructive: true,
+    },
+    BuilderRefresh: { icon: "i-ph-arrows-clockwise", source: "builder" },
+    BuilderCreateResource: { icon: "i-ph-table", source: "builder" },
+    BuilderDeleteResource: {
+        icon: "i-ph-trash",
+        source: "builder",
+        isDestructive: true,
+    },
+    BuilderListResources: { icon: "i-ph-list", source: "builder" },
+    BuilderResourceStructure: { icon: "i-ph-tree-structure", source: "builder" },
+    BuilderAddField: { icon: "i-ph-plus-square", source: "builder" },
+    BuilderConfigureField: { icon: "i-ph-sliders", source: "builder" },
+    BuilderRemoveField: {
+        icon: "i-ph-trash",
+        source: "builder",
+        isDestructive: true,
+    },
+    BuilderQueryTemplates: { icon: "i-ph-books", source: "builder" },
+    BuilderAddQuery: { icon: "i-ph-database", source: "builder" },
+    BuilderConfigureQuery: { icon: "i-ph-database", source: "builder" },
+    BuilderRemoveQuery: {
+        icon: "i-ph-trash",
+        source: "builder",
+        isDestructive: true,
+    },
+};
+exports.LOGGED_TOOLS = Object.entries({
+    ...BUILTIN_TOOLS,
+    ...MODULE_TOOLS,
+}).map(([name, entry]) => ({ ...entry, name }));
+const TOOLS_BY_NAME = new Map(exports.LOGGED_TOOLS.map((tool) => [tool.name, tool]));
+function bareToolName(value) {
+    return value.startsWith(MCP_TOOL_PREFIX)
+        ? value.slice(MCP_TOOL_PREFIX.length)
+        : value;
+}
+function findLoggedTool(value) {
+    return TOOLS_BY_NAME.get(bareToolName(value));
+}
+//# sourceMappingURL=tools.js.map

package/dist/vocabulary/tools.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tools.js","sourceRoot":"","sources":["../../src/vocabulary/tools.ts"],"names":[],"mappings":"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"}

package/dist/vocabulary/types.d.ts

@@ -0,0 +1,20 @@
+import type { Tone } from "@antelopejs/interface-dms/base/types";
+interface VocabularyEntry {
+    icon: string;
+    tone: Tone;
+}
+export type Vocabulary = Readonly<Record<string, VocabularyEntry>>;
+export type ToolSource = "builder" | "project" | "code" | "web" | "assistant";
+export interface ToolEntry {
+    icon: string;
+    source: ToolSource;
+    isDestructive?: boolean;
+}
+export interface VocabularyOption {
+    label: string;
+    value: string;
+    icon?: string;
+    description?: string;
+    disabled?: boolean;
+}
+export {};

package/dist/vocabulary/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/vocabulary/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/vocabulary/types.ts"],"names":[],"mappings":""}

package/frontend-vue/app/chat/components/AnswerRecord.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { useChatI18n } from "../composables/useChatI18n";
+import type { QuestionAnswerRecord } from "../types/protocol";
+
+interface Props {
+	answers: QuestionAnswerRecord[];
+}
+
+defineProps<Props>();
+const { t } = useChatI18n();
+</script>
+
+<template>
+	<div class="cb-answers">
+		<span class="cb-answers__who">
+			✦ {{ t("dms_ai.panel.questions.asked") }}
+		</span>
+		<div class="cb-answers__card">
+			<template v-for="(record, index) in answers" :key="index">
+				<div class="cb-answers__q">{{ record.question }}</div>
+				<div class="cb-answers__a">
+					<template v-if="record.skipped">
+						<UIcon name="i-ph-arrow-bend-down-right" />
+						<span>{{ t("dms_ai.panel.questions.skipped_record") }}</span>
+					</template>
+					<template v-else-if="record.isCustom">
+						<UIcon name="i-ph-chat-circle-dots" />
+						<b>“{{ record.answer }}”</b>
+						<UBadge
+							size="sm"
+							color="neutral"
+							variant="subtle"
+							:label="t('dms_ai.panel.questions.your_words')"
+						/>
+					</template>
+					<template v-else>
+						<UIcon name="i-ph-check" />
+						<b>{{ record.answer }}</b>
+					</template>
+				</div>
+			</template>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.cb-answers {
+	display: grid;
+	gap: 8px;
+}
+
+.cb-answers__who {
+	font: 600 10px var(--ai-font-mono);
+	letter-spacing: 0.08em;
+	text-transform: uppercase;
+	color: var(--ai);
+}
+
+.cb-answers__card {
+	display: grid;
+	gap: 6px;
+	padding: 10px 12px;
+	border: 1px solid var(--ai-line);
+	border-radius: var(--ai-radius-md);
+	background: var(--ai-tint);
+	font-size: 12.5px;
+}
+
+.cb-answers__q {
+	font-size: 12px;
+	color: var(--ui-text-muted);
+}
+
+.cb-answers__q:not(:first-child) {
+	margin-top: 4px;
+}
+
+.cb-answers__a {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 6px;
+	color: var(--ui-text-toned);
+}
+
+.cb-answers__a :deep(svg),
+.cb-answers__a .iconify {
+	color: var(--ai);
+}
+
+.cb-answers__a b {
+	font-weight: 600;
+	color: var(--ui-text-highlighted);
+}
+</style>

package/frontend-vue/app/chat/components/ApprovalDock.vue

@@ -0,0 +1,371 @@
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from "vue";
+import { useChatI18n } from "../composables/useChatI18n";
+import type {
+	ExpiredRequest,
+	PermissionAnswer,
+	PermissionRequestData,
+} from "../types/permission";
+import type { ActiveRule } from "../types/protocol";
+import {
+	approvalKeyAction,
+	isTextTarget,
+	stepIndex,
+} from "../utils/approval-keyboard";
+import { formatClock } from "../utils/format";
+import { describeTool, toolVerb } from "../utils/tool-lexicon";
+import PermissionCard from "./PermissionCard.vue";
+import RulesList from "./RulesList.vue";
+
+interface Props {
+	requests: PermissionRequestData[];
+	expired: ExpiredRequest[];
+	rules: ActiveRule[];
+	nowMs: number;
+	timeoutMinutes: number;
+}
+
+interface Emits {
+	answer: [requestId: string, answer: PermissionAnswer];
+	denyAll: [];
+	revokeRule: [ruleId: string];
+	askAgain: [request: ExpiredRequest];
+	dismissExpired: [requestId: string];
+}
+
+interface CardHandle {
+	allow: () => void;
+	deny: () => void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+const { t } = useChatI18n();
+
+const rootEl = ref<HTMLElement | null>(null);
+const focusedId = ref<string | null>(null);
+const cards = new Map<string, CardHandle>();
+
+const focusedIndex = computed(() => {
+	const index = props.requests.findIndex(
+		(req) => req.requestId === focusedId.value,
+	);
+	return index === -1 ? 0 : index;
+});
+
+const focused = computed(() => props.requests[focusedIndex.value] ?? null);
+
+const countdown = computed<string>(() => {
+	const expiresAt = focused.value?.expiresAtMs;
+	if (expiresAt === undefined) return "";
+	return formatClock(Math.max(0, expiresAt - props.nowMs));
+});
+
+const denyAllLabel = computed(() =>
+	t(
+		props.requests.length === 2
+			? "dms_ai.panel.approvals.deny_both"
+			: "dms_ai.panel.approvals.deny_all",
+	),
+);
+
+function expiredVerb(request: ExpiredRequest): string {
+	return toolVerb(describeTool(request.toolName, null), t);
+}
+
+function isTyping(): boolean {
+	const active = document.activeElement;
+	return (
+		active instanceof HTMLTextAreaElement &&
+		active.value.trim() !== "" &&
+		rootEl.value?.contains(active) !== true
+	);
+}
+
+async function takeFocus(): Promise<void> {
+	await nextTick();
+	if (isTyping()) return;
+	rootEl.value?.focus({ preventScroll: true });
+}
+
+function focusRequest(requestId: string): void {
+	focusedId.value = requestId;
+	void takeFocus();
+}
+
+function move(step: number): void {
+	const next = stepIndex(focusedIndex.value, step, props.requests.length);
+	focusedId.value = props.requests[next]?.requestId ?? null;
+}
+
+function focusedCard(): CardHandle | undefined {
+	const id = focused.value?.requestId;
+	return id === undefined ? undefined : cards.get(id);
+}
+
+const KEY_ACTIONS = {
+	allow: () => focusedCard()?.allow(),
+	deny: () => focusedCard()?.deny(),
+	next: () => move(1),
+	previous: () => move(-1),
+};
+
+function onKeydown(event: KeyboardEvent): void {
+	const action = approvalKeyAction({
+		key: event.key,
+		shiftKey: event.shiftKey,
+		metaKey: event.metaKey,
+		ctrlKey: event.ctrlKey,
+		altKey: event.altKey,
+		isTextTarget: isTextTarget(event.target),
+	});
+	if (action === null) return;
+	event.preventDefault();
+	KEY_ACTIONS[action]();
+}
+
+function setCardRef(requestId: string, card: unknown): void {
+	if (card === null) cards.delete(requestId);
+	else cards.set(requestId, card as CardHandle);
+}
+
+watch(
+	() => props.requests.map((req) => req.requestId),
+	(ids, previous) => {
+		if (focusedId.value === null || !ids.includes(focusedId.value))
+			focusedId.value = ids[0] ?? null;
+		const hasNew = ids.some((id) => !(previous ?? []).includes(id));
+		if (hasNew) void takeFocus();
+	},
+	{ immediate: true },
+);
+
+defineExpose({ focusRequest });
+</script>
+
+<template>
+	<div class="cb-approve-wrap">
+		<div
+			v-if="requests.length > 0"
+			ref="rootEl"
+			class="cb-approve"
+			role="alertdialog"
+			tabindex="-1"
+			:aria-label="t('dms_ai.panel.approvals.aria')"
+			@keydown="onKeydown"
+		>
+			<div class="cb-approve__head">
+				<UIcon name="i-ph-hand-palm" class="cb-approve__icon" />
+				<span class="cb-approve__eyebrow">
+					{{
+						t("dms_ai.panel.approvals.heading", {
+							index: focusedIndex + 1,
+							total: requests.length,
+						})
+					}}
+				</span>
+				<span
+					v-if="countdown"
+					class="cb-approve__timer"
+					:title="
+						t('dms_ai.panel.approvals.timer_hint', { minutes: timeoutMinutes })
+					"
+				>
+					<UIcon name="i-ph-timer" />
+					{{ t("dms_ai.panel.approvals.denies_in", { time: countdown }) }}
+				</span>
+			</div>
+			<PermissionCard
+				v-for="request in requests"
+				:key="request.requestId"
+				:ref="(card) => setCardRef(request.requestId, card)"
+				:request="request"
+				:is-focused="request.requestId === focused?.requestId"
+				@focus="focusRequest(request.requestId)"
+				@answer="(answer) => emit('answer', request.requestId, answer)"
+			/>
+			<div class="cb-approve__foot">
+				<UButton
+					v-if="requests.length > 1"
+					size="xs"
+					color="neutral"
+					variant="ghost"
+					icon="i-ph-prohibit"
+					:label="denyAllLabel"
+					@click="emit('denyAll')"
+				/>
+				<span v-else />
+				<UPopover
+					v-if="rules.length > 0"
+					:content="{ side: 'top', align: 'end' }"
+				>
+					<UButton
+						size="xs"
+						color="neutral"
+						variant="ghost"
+						icon="i-ph-key"
+						:label="
+							t(
+								'dms_ai.panel.rules.count',
+								{ count: rules.length },
+								rules.length,
+							)
+						"
+					/>
+					<template #content>
+						<RulesList
+							:rules="rules"
+							@revoke="(id) => emit('revokeRule', id)"
+						/>
+					</template>
+				</UPopover>
+			</div>
+		</div>
+
+		<div v-for="request in expired" :key="request.requestId" class="cb-expired">
+			<span class="cb-expired__icon"><UIcon name="i-ph-timer" /></span>
+			<div class="cb-expired__body">
+				<div class="cb-expired__title">
+					{{
+						t("dms_ai.panel.approvals.expired_title", {
+							tool: expiredVerb(request),
+						})
+					}}
+				</div>
+				<div class="cb-expired__sub">{{ request.summary }}</div>
+				<p class="cb-expired__text">
+					{{
+						t("dms_ai.panel.approvals.expired_text", {
+							minutes: timeoutMinutes,
+						})
+					}}
+				</p>
+				<div class="cb-expired__row">
+					<UButton
+						size="xs"
+						color="neutral"
+						variant="outline"
+						icon="i-ph-arrows-clockwise"
+						:label="t('dms_ai.panel.approvals.ask_again')"
+						@click="emit('askAgain', request)"
+					/>
+					<UButton
+						size="xs"
+						color="neutral"
+						variant="ghost"
+						:label="t('dms_ai.common.dismiss')"
+						@click="emit('dismissExpired', request.requestId)"
+					/>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.cb-approve-wrap:empty {
+	display: none;
+}
+
+.cb-approve {
+	display: grid;
+	gap: 10px;
+	padding: 12px 14px;
+	border-bottom: 1px solid var(--ui-border-muted);
+	background: linear-gradient(180deg, var(--dms-warning-tint), transparent 60%);
+	max-height: 62vh;
+	overflow: auto;
+	outline: none;
+}
+
+.cb-approve:focus-visible {
+	box-shadow: inset 0 0 0 2px var(--dms-warning-line);
+}
+
+.cb-approve__head {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.cb-approve__icon {
+	width: 15px;
+	height: 15px;
+	color: var(--ui-warning);
+}
+
+.cb-approve__eyebrow {
+	font: 600 10px var(--ai-font-mono);
+	letter-spacing: 0.08em;
+	text-transform: uppercase;
+	color: var(--ui-warning);
+}
+
+.cb-approve__timer {
+	display: inline-flex;
+	align-items: center;
+	gap: 5px;
+	margin-left: auto;
+	font: 500 11px var(--ai-font-mono);
+	color: var(--ui-text-muted);
+}
+
+.cb-approve__foot {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 6px;
+}
+
+.cb-expired {
+	display: flex;
+	gap: 10px;
+	margin: 10px 14px 0;
+	padding: 11px 12px;
+	border: 1px solid var(--ui-border-accented);
+	border-radius: var(--ai-radius-md);
+	background: var(--ui-bg-elevated);
+	opacity: 0.9;
+}
+
+.cb-expired__icon {
+	display: grid;
+	place-items: center;
+	width: 28px;
+	height: 28px;
+	flex: none;
+	border-radius: var(--ai-radius-sm);
+	background: var(--ui-bg-accented);
+	color: var(--ui-text-muted);
+}
+
+.cb-expired__body {
+	flex: 1;
+	min-width: 0;
+}
+
+.cb-expired__title {
+	font-size: 13px;
+	font-weight: 600;
+	color: var(--ui-text-highlighted);
+}
+
+.cb-expired__sub {
+	margin-top: 2px;
+	font: 450 11.5px var(--ai-font-mono);
+	color: var(--ui-text-muted);
+	overflow-wrap: anywhere;
+}
+
+.cb-expired__text {
+	margin: 6px 0 0;
+	font-size: 12.5px;
+	color: var(--ui-text-muted);
+}
+
+.cb-expired__row {
+	display: flex;
+	gap: 6px;
+	margin-top: 8px;
+}
+</style>