@antelopejs/dms-ai 0.1.5 → 0.2.0

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

@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { useChatI18n } from "../composables/useChatI18n";
+import type { Notice } from "../types/protocol";
+import { formatTimeOfDay } from "../utils/format";
+import { describeTool, toolVerb } from "../utils/tool-lexicon";
+
+interface Props {
+	notice: Notice;
+	/** Whether this auto-fix is the one running now, so it can be stopped. */
+	canStopAutoFix: boolean;
+}
+
+interface Emits {
+	stopAutoFix: [];
+	askAgain: [summary: string];
+}
+
+interface NoticeLook {
+	tone: string;
+	icon: string;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+const { t, locale } = useChatI18n();
+
+const LOOKS: Record<Notice["kind"], NoticeLook> = {
+	autofix: { tone: "warning", icon: "i-ph-wrench" },
+	permission_expired: { tone: "neutral", icon: "i-ph-timer" },
+	question_skipped: { tone: "neutral", icon: "i-ph-arrow-bend-down-right" },
+	full_auto_ended: { tone: "neutral", icon: "i-ph-lightning-slash" },
+};
+
+const showErrors = ref(false);
+const look = computed(() => LOOKS[props.notice.kind]);
+const time = computed(() =>
+	formatTimeOfDay(props.notice.timestampMs, locale.value),
+);
+
+const expiredTool = computed<string>(() => {
+	if (props.notice.kind !== "permission_expired") return "";
+	return toolVerb(describeTool(props.notice.toolName, null), t);
+});
+</script>
+
+<template>
+	<div class="cb-notice" :data-tone="look.tone" role="note">
+		<UIcon :name="look.icon" class="cb-notice__icon" />
+		<div class="cb-notice__body">
+			<template v-if="notice.kind === 'autofix'">
+				<b>
+					{{
+						t("dms_ai.panel.notice.autofix_title", {
+							attempt: notice.attempt,
+							max: notice.maxAttempts,
+						})
+					}}
+				</b>
+				{{ t("dms_ai.panel.notice.autofix_text") }}
+				<ul v-if="showErrors" class="cb-notice__errors">
+					<li v-for="(error, index) in notice.errors" :key="index">
+						<code>{{ error }}</code>
+					</li>
+				</ul>
+				<div class="cb-notice__row">
+					<UButton
+						v-if="canStopAutoFix"
+						size="xs"
+						color="neutral"
+						variant="outline"
+						:label="t('dms_ai.panel.notice.stop_autofix')"
+						@click="emit('stopAutoFix')"
+					/>
+					<UButton
+						v-if="notice.errors.length > 0"
+						size="xs"
+						color="neutral"
+						variant="ghost"
+						:label="
+							t(
+								showErrors
+									? 'dms_ai.panel.notice.hide_errors'
+									: 'dms_ai.panel.notice.show_errors',
+								{ count: notice.errors.length },
+								notice.errors.length,
+							)
+						"
+						@click="showErrors = !showErrors"
+					/>
+				</div>
+			</template>
+			<template v-else-if="notice.kind === 'permission_expired'">
+				<b>
+					{{ t("dms_ai.panel.notice.expired_title", { tool: expiredTool }) }}
+				</b>
+				{{
+					t("dms_ai.panel.notice.expired_text", {
+						summary: notice.summary,
+						time,
+					})
+				}}
+				<div class="cb-notice__row">
+					<UButton
+						size="xs"
+						color="neutral"
+						variant="outline"
+						icon="i-ph-arrows-clockwise"
+						:label="t('dms_ai.panel.approvals.ask_again')"
+						@click="emit('askAgain', notice.summary)"
+					/>
+				</div>
+			</template>
+			<template v-else-if="notice.kind === 'question_skipped'">
+				{{
+					t("dms_ai.panel.notice.question_skipped", { header: notice.header })
+				}}
+			</template>
+			<template v-else>
+				{{ t("dms_ai.panel.notice.full_auto_ended", { time }) }}
+			</template>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.cb-notice {
+	--notice-color: var(--ui-text-muted);
+	--notice-line: var(--ui-border);
+	--notice-tint: var(--dms-surface-card);
+
+	display: flex;
+	gap: 10px;
+	padding: 10px 12px;
+	border: 1px solid var(--notice-line);
+	border-radius: var(--ai-radius-md);
+	background: var(--notice-tint);
+	font-size: 12.5px;
+	line-height: 1.5;
+	color: var(--ui-text-toned);
+}
+
+.cb-notice[data-tone="warning"] {
+	--notice-color: var(--ui-warning);
+	--notice-line: var(--dms-warning-line);
+	--notice-tint: var(--dms-warning-tint);
+}
+
+.cb-notice[data-tone="error"] {
+	--notice-color: var(--ui-error);
+	--notice-line: var(--dms-error-line);
+	--notice-tint: var(--dms-error-tint);
+}
+
+.cb-notice__icon {
+	width: 16px;
+	height: 16px;
+	flex: none;
+	margin-top: 1px;
+	color: var(--notice-color);
+}
+
+.cb-notice__body {
+	min-width: 0;
+	flex: 1;
+}
+
+.cb-notice__body b {
+	font-weight: 600;
+	color: var(--ui-text-highlighted);
+}
+
+.cb-notice__row {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 6px;
+	margin-top: 8px;
+}
+
+.cb-notice__row:empty {
+	display: none;
+}
+
+.cb-notice__errors {
+	margin: 8px 0 0;
+	padding-left: 16px;
+}
+
+.cb-notice__errors code {
+	font: 500 11.5px var(--ai-font-mono);
+	overflow-wrap: anywhere;
+}
+</style>

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

@@ -0,0 +1,242 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useChatI18n } from "../composables/useChatI18n";
+import type { ActiveRule } from "../types/protocol";
+import { ruleIcon } from "../utils/permission-view";
+import { shortcutLabel } from "../utils/platform";
+
+export type PanelStatusKind =
+	| "ready"
+	| "working"
+	| "waiting"
+	| "connecting"
+	| "offline";
+
+interface Props {
+	title: string;
+	status: PanelStatusKind;
+	/** "Working · 0:14 · Claude Code". */
+	statusLabel: string;
+	rules: ActiveRule[];
+}
+
+interface Emits {
+	history: [];
+	newChat: [];
+	close: [];
+	navigate: [target: "changes" | "activity" | "settings"];
+	revokeRule: [ruleId: string];
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+const { t } = useChatI18n();
+
+const HISTORY_KEY = "j";
+const TOGGLE_KEY = "k";
+
+const historyTitle = computed(
+	() => `${t("dms_ai.panel.header.history")} · ${shortcutLabel(HISTORY_KEY)}`,
+);
+const closeTitle = computed(
+	() =>
+		`${t("dms_ai.panel.header.close")} · ${shortcutLabel(TOGGLE_KEY, true)}`,
+);
+
+const moreItems = computed(() => [
+	[
+		{
+			label: t(
+				"dms_ai.panel.rules.count",
+				{ count: props.rules.length },
+				props.rules.length,
+			),
+			icon: "i-ph-key",
+			disabled: props.rules.length === 0,
+			children: [
+				[
+					{
+						type: "label" as const,
+						label: t("dms_ai.panel.rules.select_to_revoke"),
+					},
+				],
+				props.rules.map((rule) => ({
+					label: rule.label || rule.value,
+					icon: ruleIcon(rule.kind),
+					onSelect: () => emit("revokeRule", rule.id),
+				})),
+			],
+		},
+	],
+	[
+		{
+			label: t("dms_ai.panel.header.open_changes"),
+			icon: "i-ph-git-diff",
+			onSelect: () => emit("navigate", "changes"),
+		},
+		{
+			label: t("dms_ai.panel.header.open_activity"),
+			icon: "i-ph-clock-counter-clockwise",
+			onSelect: () => emit("navigate", "activity"),
+		},
+		{
+			label: t("dms_ai.panel.header.settings"),
+			icon: "i-ph-gear-six",
+			onSelect: () => emit("navigate", "settings"),
+		},
+	],
+]);
+</script>
+
+<template>
+	<header class="cb__head chat-view-header">
+		<span class="ai-tile" aria-hidden="true">
+			<UIcon name="i-ph-sparkle" />
+		</span>
+		<div class="cb__title">
+			<b>{{ title }}</b>
+			<span class="cb__status" :data-status="status" aria-live="polite">
+				<span class="cb__dot" />
+				{{ statusLabel }}
+			</span>
+		</div>
+		<div class="cb__head-actions">
+			<UButton
+				size="sm"
+				color="neutral"
+				variant="ghost"
+				square
+				icon="i-ph-list-bullets"
+				:aria-label="t('dms_ai.panel.header.history')"
+				:title="historyTitle"
+				@click="emit('history')"
+			/>
+			<UButton
+				size="sm"
+				color="neutral"
+				variant="ghost"
+				square
+				icon="i-ph-note-pencil"
+				:aria-label="t('dms_ai.panel.header.new_chat')"
+				:title="t('dms_ai.panel.header.new_chat')"
+				@click="emit('newChat')"
+			/>
+			<UDropdownMenu :items="moreItems" :content="{ align: 'end' }">
+				<UButton
+					size="sm"
+					color="neutral"
+					variant="ghost"
+					square
+					icon="i-ph-dots-three"
+					:aria-label="t('dms_ai.panel.header.more')"
+					:title="t('dms_ai.panel.header.more')"
+				/>
+			</UDropdownMenu>
+			<UButton
+				size="sm"
+				color="neutral"
+				variant="ghost"
+				square
+				icon="i-ph-x"
+				:aria-label="t('dms_ai.panel.header.close')"
+				:title="closeTitle"
+				@click="emit('close')"
+			/>
+		</div>
+	</header>
+</template>
+
+<style scoped>
+.cb__head {
+	display: flex;
+	flex: none;
+	align-items: center;
+	gap: 10px;
+	height: 52px;
+	padding: 0 8px 0 14px;
+	border-bottom: 1px solid var(--ui-border);
+}
+
+.ai-tile {
+	display: grid;
+	place-items: center;
+	width: 28px;
+	height: 28px;
+	flex: none;
+	border-radius: var(--ai-radius-sm);
+	background: var(--ai-tint);
+	box-shadow: inset 0 0 0 1px var(--ai-line);
+	color: var(--ai);
+	font-size: 15px;
+}
+
+.cb__title {
+	flex: 1;
+	min-width: 0;
+}
+
+.cb__title b {
+	display: block;
+	overflow: hidden;
+	font-size: 13px;
+	font-weight: 650;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	color: var(--ui-text-highlighted);
+}
+
+.cb__status {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	overflow: hidden;
+	font: 500 10.5px var(--ai-font-mono);
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	color: var(--ui-text-muted);
+}
+
+.cb__dot {
+	width: 6px;
+	height: 6px;
+	flex: none;
+	border-radius: 50%;
+	background: var(--ui-success);
+	box-shadow: 0 0 6px var(--ui-success);
+}
+
+.cb__status[data-status="working"] .cb__dot {
+	background: var(--ai);
+	box-shadow: 0 0 6px var(--ai);
+	animation: dms-ai-pulse 1.2s ease-in-out infinite;
+}
+
+.cb__status[data-status="waiting"] .cb__dot,
+.cb__status[data-status="connecting"] .cb__dot {
+	background: var(--ui-warning);
+	box-shadow: 0 0 6px var(--ui-warning);
+}
+
+.cb__status[data-status="offline"] .cb__dot {
+	background: var(--ui-error);
+	box-shadow: none;
+}
+
+.cb__head-actions {
+	display: flex;
+	align-items: center;
+	gap: 1px;
+}
+
+@keyframes dms-ai-pulse {
+	50% {
+		opacity: 0.35;
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.cb__status[data-status="working"] .cb__dot {
+		animation: none;
+	}
+}
+</style>