@antelopejs/dms-ai 0.2.1 → 0.4.0

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

@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { useChatI18n } from "../composables/useChatI18n";
+import { CARD_TYPE_LIMIT } from "../constants/block-preview";
+import type { BlockPreview } from "../types/protocol";
+import {
+	countBlocks,
+	hasSketch,
+	type ReferenceView,
+	topBlockTypes,
+} from "../utils/block-preview";
+import BlockPreviewModal from "./BlockPreviewModal.vue";
+import BlockPreviewThumb from "./BlockPreviewThumb.vue";
+
+interface Props {
+	preview: BlockPreview;
+	reference: ReferenceView | null;
+}
+
+const props = defineProps<Props>();
+const { t } = useChatI18n();
+const isOpen = ref(false);
+
+const META_SEPARATOR = " · ";
+
+const isSketched = computed<boolean>(() => hasSketch(props.preview));
+
+const typesLabel = computed<string>(() => {
+	const types = topBlockTypes(props.preview.tree);
+	const shown = types.slice(0, CARD_TYPE_LIMIT).join(", ");
+	const hidden = types.length - CARD_TYPE_LIMIT;
+	return hidden > 0 ? `${shown} +${hidden}` : shown;
+});
+
+const meta = computed<string>(() => {
+	const blocks = countBlocks(props.preview.tree);
+	const variants = props.preview.variants?.length ?? 0;
+	const parts = [
+		typesLabel.value,
+		blocks > 0
+			? t("dms_ai.panel.preview.blocks", { count: blocks }, blocks)
+			: "",
+		variants > 0
+			? t(
+					"dms_ai.panel.preview.variants",
+					{ count: variants + 1 },
+					variants + 1,
+				)
+			: "",
+		isSketched.value ? t("dms_ai.panel.preview.with_sketch") : "",
+		props.reference ? t("dms_ai.panel.preview.with_mockup") : "",
+	];
+	return parts.filter((part) => part !== "").join(META_SEPARATOR);
+});
+</script>
+
+<template>
+	<div class="bp">
+		<span class="bp__who">✦ {{ t("dms_ai.panel.preview.eyebrow") }}</span>
+		<button
+			type="button"
+			class="bp-card"
+			aria-haspopup="dialog"
+			:aria-expanded="isOpen"
+			:aria-label="
+				t('dms_ai.panel.preview.open_aria', { title: preview.title })
+			"
+			@click="isOpen = true"
+		>
+			<BlockPreviewThumb :view="preview" :is-sketched="isSketched" />
+			<span class="bp-card__body">
+				<span class="bp-card__title">{{ preview.title }}</span>
+				<span class="bp-card__meta">{{ meta }}</span>
+				<span class="bp-card__open">
+					<UIcon name="i-ph-frame-corners" class="bp-card__open-icon" />
+					{{ t("dms_ai.panel.preview.open") }}
+				</span>
+			</span>
+		</button>
+		<BlockPreviewModal
+			v-model:open="isOpen"
+			:preview="preview"
+			:reference="reference"
+		/>
+	</div>
+</template>
+
+<style scoped>
+.bp {
+	display: grid;
+	gap: 8px;
+	justify-items: start;
+}
+
+.bp__who {
+	font: 600 10px var(--ai-font-mono);
+	letter-spacing: 0.08em;
+	text-transform: uppercase;
+	color: var(--ai);
+}
+
+.bp-card {
+	display: flex;
+	align-items: stretch;
+	gap: 12px;
+	width: min(100%, 360px);
+	padding: 8px 12px 8px 8px;
+	border: 1px solid var(--ui-border);
+	border-radius: var(--ai-radius-md);
+	background: var(--dms-surface-card, var(--ui-bg));
+	color: inherit;
+	text-align: left;
+	cursor: pointer;
+	transition:
+		border-color 0.15s ease,
+		background-color 0.15s ease;
+}
+
+.bp-card:hover {
+	border-color: var(--ai-line);
+	background: var(--ai-bg-hover);
+}
+
+.bp-card:focus-visible {
+	outline: 2px solid var(--ai);
+	outline-offset: 2px;
+}
+
+.bp-card__body {
+	display: flex;
+	flex-direction: column;
+	gap: 3px;
+	min-width: 0;
+}
+
+.bp-card__title {
+	overflow: hidden;
+	font-size: 13px;
+	font-weight: 600;
+	line-height: 1.35;
+	color: var(--ui-text-highlighted);
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+}
+
+.bp-card__meta {
+	font: 500 10.5px/1.45 var(--ai-font-mono);
+	color: var(--ui-text-dimmed);
+}
+
+.bp-card__open {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	margin-top: auto;
+	font-size: 12px;
+	font-weight: 600;
+	color: var(--ai);
+}
+
+.bp-card__open-icon {
+	width: 13px;
+	height: 13px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.bp-card {
+		transition: none;
+	}
+}
+</style>

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

@@ -0,0 +1,324 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import { useBlockPreviewComponent } from "../composables/useBlockPreviewComponent";
+import { useChatI18n } from "../composables/useChatI18n";
+import { BLOCK_PREVIEW_MAIN_TAB } from "../constants/block-preview";
+import type { BlockPreview } from "../types/protocol";
+import {
+	type BlockPreviewTab,
+	formatTree,
+	previewTabs,
+	type ReferenceView,
+} from "../utils/block-preview";
+import SketchFrame from "./SketchFrame.vue";
+
+interface Props {
+	preview: BlockPreview;
+	reference: ReferenceView | null;
+}
+
+interface TabItem {
+	value: string;
+	label: string;
+}
+
+const props = defineProps<Props>();
+const open = defineModel<boolean>("open", { required: true });
+const { t } = useChatI18n();
+const previewComponent = useBlockPreviewComponent();
+
+const MODAL_UI = { content: "sm:max-w-5xl" };
+
+const activeTab = ref<string>(BLOCK_PREVIEW_MAIN_TAB);
+const tabs = computed<BlockPreviewTab[]>(() => previewTabs(props.preview));
+const tabItems = computed<TabItem[]>(() =>
+	tabs.value.map((tab) => ({
+		value: tab.value,
+		label: tab.label ?? t("dms_ai.panel.preview.proposed"),
+	})),
+);
+const activeView = computed<BlockPreviewTab>(
+	() =>
+		tabs.value.find((tab) => tab.value === activeTab.value) ?? tabs.value[0],
+);
+const paneCount = computed<number>(
+	() =>
+		[props.reference, activeView.value.tree, activeView.value.sketch].filter(
+			(pane) => pane !== null && pane !== undefined,
+		).length,
+);
+const sketchTitle = computed<string>(() =>
+	t("dms_ai.panel.preview.sketch_frame", {
+		caption: activeView.value.sketch?.caption ?? props.preview.title,
+	}),
+);
+const mockupLabel = computed<string>(
+	() => props.preview.reference?.caption ?? t("dms_ai.panel.preview.mockup"),
+);
+
+watch(open, (isOpen) => {
+	if (isOpen) activeTab.value = BLOCK_PREVIEW_MAIN_TAB;
+});
+</script>
+
+<template>
+	<UModal
+		v-model:open="open"
+		:title="preview.title"
+		:description="preview.description"
+		:ui="MODAL_UI"
+	>
+		<template #body>
+			<div class="dms-ai-chat-tokens bp-modal">
+				<UTabs
+					v-if="tabItems.length > 1"
+					v-model="activeTab"
+					:items="tabItems"
+					:content="false"
+					variant="link"
+					size="sm"
+					:aria-label="t('dms_ai.panel.preview.variants_aria')"
+				/>
+				<div class="bp-modal__panes" :class="{ 'is-split': paneCount > 1 }">
+					<figure v-if="reference" class="bp-pane">
+						<figcaption class="bp-pane__label">{{ mockupLabel }}</figcaption>
+						<div class="bp-pane__paper">
+							<img
+								v-if="reference.kind === 'image'"
+								:src="reference.src"
+								:alt="mockupLabel"
+								class="bp-pane__image"
+							/>
+							<div v-else-if="reference.kind === 'link'" class="bp-pane__note">
+								<UIcon name="i-ph-image-broken" class="bp-pane__note-icon" />
+								<p>{{ t("dms_ai.panel.preview.mockup_external") }}</p>
+								<a
+									:href="reference.href"
+									target="_blank"
+									rel="noopener noreferrer"
+									class="bp-pane__link"
+								>
+									{{ t("dms_ai.panel.preview.mockup_open") }}
+									<UIcon name="i-ph-arrow-square-out" />
+								</a>
+							</div>
+							<div v-else class="bp-pane__note">
+								<UIcon name="i-ph-image-broken" class="bp-pane__note-icon" />
+								<p>
+									{{
+										t("dms_ai.panel.preview.mockup_missing", {
+											name: reference.name,
+										})
+									}}
+								</p>
+							</div>
+						</div>
+					</figure>
+					<section
+						v-if="activeView.tree"
+						class="bp-pane"
+						:aria-label="t('dms_ai.panel.preview.dms_blocks')"
+					>
+						<span class="bp-pane__label">
+							{{ t("dms_ai.panel.preview.dms_blocks") }}
+						</span>
+						<div class="bp-pane__stage">
+							<component
+								:is="previewComponent"
+								v-if="previewComponent"
+								:key="activeTab"
+								:tree="activeView.tree"
+							/>
+							<div v-else class="bp-fallback">
+								<p class="bp-fallback__title">
+									<UIcon name="i-ph-info" />
+									{{ t("dms_ai.panel.preview.fallback_title") }}
+								</p>
+								<p class="bp-fallback__body">
+									{{ t("dms_ai.panel.preview.fallback_body") }}
+								</p>
+								<pre
+									class="bp-fallback__json"
+								><code>{{ formatTree(activeView.tree) }}</code></pre>
+							</div>
+						</div>
+					</section>
+					<section
+						v-if="activeView.sketch"
+						class="bp-pane bp-pane--sketch"
+						:aria-label="t('dms_ai.panel.preview.custom_sketch')"
+					>
+						<span class="bp-pane__label bp-pane__label--sketch">
+							<UIcon name="i-ph-pencil-simple-line" />
+							{{ t("dms_ai.panel.preview.custom_sketch") }}
+						</span>
+						<div class="bp-pane__sketch">
+							<SketchFrame
+								:key="activeTab"
+								:sketch="activeView.sketch"
+								:title="sketchTitle"
+							/>
+							<p v-if="activeView.sketch.caption" class="bp-pane__caption">
+								{{ activeView.sketch.caption }}
+							</p>
+						</div>
+					</section>
+				</div>
+			</div>
+		</template>
+	</UModal>
+</template>
+
+<style scoped>
+.bp-modal {
+	display: grid;
+	gap: 14px;
+}
+
+.bp-modal__panes {
+	display: grid;
+	gap: 14px;
+}
+
+.bp-modal__panes.is-split {
+	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+	align-items: start;
+}
+
+.bp-pane {
+	display: grid;
+	grid-template-rows: auto 1fr;
+	gap: 6px;
+	min-width: 0;
+	margin: 0;
+}
+
+.bp-pane__label {
+	font: 600 10px var(--ai-font-mono);
+	letter-spacing: 0.08em;
+	text-transform: uppercase;
+	color: var(--ui-text-muted);
+}
+
+.bp-pane__paper,
+.bp-pane__stage {
+	min-height: 220px;
+	max-height: 64vh;
+	overflow: auto;
+	border: 1px solid var(--ui-border);
+	border-radius: var(--ai-radius-md);
+}
+
+.bp-pane__paper {
+	display: grid;
+	place-items: center;
+	padding: 12px;
+	background: var(--ui-bg-muted);
+}
+
+.bp-pane__stage {
+	padding: 16px;
+	background-color: var(--ui-bg);
+	background-image: radial-gradient(var(--ui-border) 1px, transparent 1px);
+	background-size: 14px 14px;
+}
+
+.bp-pane__label--sketch {
+	display: inline-flex;
+	align-items: center;
+	gap: 5px;
+	color: var(--ai);
+}
+
+.bp-pane__sketch {
+	min-height: 220px;
+	max-height: 64vh;
+	overflow: auto;
+	border: 1px dashed var(--ai-line);
+	border-radius: var(--ai-radius-md);
+	background: var(--ai-tint);
+}
+
+.bp-pane__sketch :deep(.sketch-frame__doc) {
+	border-radius: calc(var(--ai-radius-md) - 1px) calc(var(--ai-radius-md) - 1px)
+		0 0;
+}
+
+.bp-pane__caption {
+	margin: 0;
+	padding: 8px 12px;
+	border-top: 1px dashed var(--ai-line);
+	font-size: 12px;
+	line-height: 1.45;
+	color: var(--ui-text-muted);
+}
+
+.bp-pane__image {
+	max-width: 100%;
+	height: auto;
+	border-radius: var(--ai-radius-sm);
+}
+
+.bp-pane__note {
+	display: grid;
+	justify-items: center;
+	gap: 8px;
+	max-width: 280px;
+	font-size: 12.5px;
+	line-height: 1.5;
+	text-align: center;
+	color: var(--ui-text-muted);
+}
+
+.bp-pane__note p {
+	margin: 0;
+}
+
+.bp-pane__note-icon {
+	width: 22px;
+	height: 22px;
+	color: var(--ui-text-dimmed);
+}
+
+.bp-pane__link {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	font-weight: 600;
+	color: var(--ai);
+}
+
+.bp-fallback {
+	display: grid;
+	gap: 8px;
+}
+
+.bp-fallback p {
+	margin: 0;
+}
+
+.bp-fallback__title {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	font-size: 13px;
+	font-weight: 600;
+	color: var(--ui-text-highlighted);
+}
+
+.bp-fallback__body {
+	font-size: 12.5px;
+	color: var(--ui-text-muted);
+}
+
+.bp-fallback__json {
+	margin: 0;
+	padding: 12px;
+	overflow: auto;
+	border: 1px solid var(--ui-border);
+	border-radius: var(--ai-radius-sm);
+	background: var(--ui-bg-elevated);
+	font: 500 11.5px/1.55 var(--ai-font-mono);
+	color: var(--ui-text-toned);
+}
+</style>

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

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useBlockPreviewComponent } from "../composables/useBlockPreviewComponent";
+import { useChatI18n } from "../composables/useChatI18n";
+import {
+	PLAN_MAX_CELLS,
+	PLAN_MAX_ROWS,
+	THUMBNAIL_CANVAS_WIDTH_PX,
+	THUMBNAIL_SCALE,
+	THUMBNAIL_SKETCH_HEIGHT_PX,
+} from "../constants/block-preview";
+import type { PreviewNode, PreviewView } from "../types/protocol";
+import { countLeaves, rootsOf } from "../utils/block-preview";
+import SketchFrame from "./SketchFrame.vue";
+
+interface Props {
+	/** The view the thumbnail draws: its blocks, else its sketch. */
+	view: PreviewView;
+	/** Whether the preview proposes a custom sketch in any of its views. */
+	isSketched: boolean;
+}
+
+const props = defineProps<Props>();
+const { t } = useChatI18n();
+const previewComponent = useBlockPreviewComponent();
+
+const canvasStyle = {
+	width: `${THUMBNAIL_CANVAS_WIDTH_PX}px`,
+	transform: `scale(${THUMBNAIL_SCALE})`,
+};
+
+const roots = computed<PreviewNode[]>(() =>
+	props.view.tree === undefined
+		? []
+		: rootsOf(props.view.tree).slice(0, PLAN_MAX_ROWS),
+);
+
+function cellCount(node: PreviewNode): number {
+	return Math.min(countLeaves(node), PLAN_MAX_CELLS);
+}
+</script>
+
+<template>
+	<span class="bp-thumb" aria-hidden="true">
+		<span
+			v-if="view.tree && previewComponent"
+			class="bp-thumb__canvas"
+			:style="canvasStyle"
+			inert
+		>
+			<component :is="previewComponent" :tree="view.tree" />
+		</span>
+		<span
+			v-else-if="!view.tree && view.sketch"
+			class="bp-thumb__canvas bp-thumb__canvas--sketch"
+			:style="canvasStyle"
+			inert
+		>
+			<SketchFrame
+				:sketch="view.sketch"
+				:title="t('dms_ai.panel.preview.custom_sketch')"
+				:height="THUMBNAIL_SKETCH_HEIGHT_PX"
+			/>
+		</span>
+		<span v-else class="bp-thumb__plan">
+			<span v-for="(node, index) in roots" :key="index" class="bp-thumb__row">
+				<span
+					v-for="cellIndex in cellCount(node)"
+					:key="cellIndex"
+					class="bp-thumb__cell"
+				/>
+			</span>
+		</span>
+		<span v-if="isSketched" class="bp-thumb__badge">
+			{{ t("dms_ai.panel.preview.sketch_badge") }}
+		</span>
+	</span>
+</template>
+
+<style scoped>
+.bp-thumb {
+	position: relative;
+	flex: none;
+	width: 112px;
+	height: 72px;
+	overflow: hidden;
+	border: 1px solid var(--ai-line);
+	border-radius: var(--ai-radius-sm);
+	background-color: var(--ui-bg);
+	background-image: radial-gradient(var(--ui-border) 1px, transparent 1px);
+	background-size: 8px 8px;
+}
+
+.bp-thumb__canvas {
+	position: absolute;
+	top: 6px;
+	left: 0;
+	transform-origin: top left;
+	pointer-events: none;
+}
+
+.bp-thumb__canvas--sketch {
+	top: 0;
+}
+
+.bp-thumb__badge {
+	position: absolute;
+	right: 4px;
+	bottom: 4px;
+	padding: 1px 5px;
+	border: 1px dashed var(--ai-line);
+	border-radius: 999px;
+	background: var(--dms-surface-card, var(--ui-bg));
+	font: 600 8.5px/1.4 var(--ai-font-mono);
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
+	color: var(--ai);
+}
+
+.bp-thumb__plan {
+	position: absolute;
+	inset: 8px;
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.bp-thumb__row {
+	display: flex;
+	flex: 1;
+	gap: 4px;
+	max-height: 18px;
+}
+
+.bp-thumb__cell {
+	flex: 1;
+	border: 1px solid var(--ai-line);
+	border-radius: 3px;
+	background: var(--ai-tint);
+}
+</style>

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

@@ -5,6 +5,7 @@ import { ACTIVITY_KINDS } from "../constants/run-status";
 import { MESSAGE_ROLES } from "../constants/conversation";
 import type {
 	ConversationMessage,
+	BlockPreviewMessage,
 	ErrorMessage,
 	MessageAttachment,
 	RunProgress,
@@ -14,6 +15,7 @@ import type { PermissionRequestData } from "../types/permission";
 import type { ChangeSetSummary } from "../types/protocol";
 import { lastMatching } from "../utils/arrays";
 import { formatBytes, isInlineImage } from "../utils/attachments";
+import { type ReferenceView, referenceView } from "../utils/block-preview";
 import { formatTimeOfDay } from "../utils/format";
 import { buildRenderItems, type RenderItem } from "../utils/render-items";
 import {
@@ -24,6 +26,7 @@ import {
 	runElapsedMs,
 } from "../utils/run-status";
 import AnswerRecord from "./AnswerRecord.vue";
+import BlockPreviewCard from "./BlockPreviewCard.vue";
 import ChangeSetCard from "./ChangeSetCard.vue";
 import MarkdownContent from "./MarkdownContent.vue";
 import NoticeCard from "./NoticeCard.vue";
@@ -135,6 +138,10 @@ function attachmentsOf(message: UserMessage): MessageAttachment[] {
 	return message.attachments ?? [];
 }
 
+function referenceOf(message: BlockPreviewMessage): ReferenceView | null {
+	return referenceView(message.preview.reference, props.messages);
+}
+
 function canRetry(error: ErrorMessage): boolean {
 	return !props.isRunning && error.id === lastErrorId.value;
 }
@@ -307,6 +314,19 @@ async function copyAnswer(content: string): Promise<void> {
 			>
 				<AnswerRecord :answers="item.message.answers" />
 			</li>
+
+			<li
+				v-else-if="
+					item.kind === 'preview' && item.message.role === 'block_preview'
+				"
+				class="message-item"
+				data-role="preview"
+			>
+				<BlockPreviewCard
+					:preview="item.message.preview"
+					:reference="referenceOf(item.message)"
+				/>
+			</li>
 		</template>
 
 		<li v-if="isStalled" class="message-item" data-role="status">