@antelopejs/dms-ai 0.3.0 → 0.4.0

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

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { useDashboardScheme } from "../composables/useDashboardScheme";
+import { SKETCH_DEFAULT_HEIGHT_PX } from "../constants/sketch";
+import type { PreviewSketch } from "../types/protocol";
+import {
+	buildSketchDocument,
+	computedStyleReader,
+	sketchTokensCss,
+} from "../utils/sketch";
+
+interface Props {
+	sketch: PreviewSketch;
+	title: string;
+	/** Overrides the sketch's own height, e.g. for a thumbnail. */
+	height?: number;
+}
+
+const props = defineProps<Props>();
+const host = ref<HTMLElement | null>(null);
+const { scheme, revision } = useDashboardScheme();
+
+const frameHeight = computed<string>(
+	() => `${props.height ?? props.sketch.height ?? SKETCH_DEFAULT_HEIGHT_PX}px`,
+);
+
+const srcdoc = computed<string>(() => {
+	if (revision.value === 0 || host.value === null) return "";
+	const tokens = sketchTokensCss(scheme.value, computedStyleReader(host.value));
+	return buildSketchDocument(props.sketch, tokens);
+});
+</script>
+
+<template>
+	<div ref="host" class="sketch-frame">
+		<iframe
+			v-if="srcdoc"
+			class="sketch-frame__doc"
+			sandbox=""
+			referrerpolicy="no-referrer"
+			:title="title"
+			:srcdoc="srcdoc"
+			:style="{ height: frameHeight }"
+		/>
+	</div>
+</template>
+
+<style scoped>
+.sketch-frame {
+	display: block;
+	width: 100%;
+}
+
+.sketch-frame__doc {
+	display: block;
+	width: 100%;
+	border: 0;
+}
+</style>

package/frontend-vue/app/chat/composables/conversation-events.ts

@@ -7,6 +7,7 @@ import type {
 import type {
 	AllowedBy,
 	AttachmentMeta,
+	BlockPreview,
 	ChangeSetSummary,
 	ConversationModeState,
 	FullAutoState,
@@ -19,6 +20,7 @@ import type {
 import type { PendingAttachment } from "../utils/attachments";
 import {
 	buildAssistantMessage,
+	buildBlockPreviewMessage,
 	buildErrorMessage,
 	buildUserMessage,
 	closedStatus,
@@ -91,6 +93,10 @@ interface ChangeSetEvent {
 	changeSet?: ChangeSetSummary;
 }
 
+interface BlockPreviewEvent {
+	preview?: BlockPreview;
+}
+
 interface UsageEvent {
 	totalTokens?: number;
 }
@@ -197,7 +203,8 @@ function isTurnStart(msg: ConversationMessage): boolean {
 function isOutOfTurn(msg: ConversationMessage): boolean {
 	return (
 		msg.role === MESSAGE_ROLES.NOTICE ||
-		msg.role === MESSAGE_ROLES.QUESTION_ANSWER
+		msg.role === MESSAGE_ROLES.QUESTION_ANSWER ||
+		msg.role === MESSAGE_ROLES.BLOCK_PREVIEW
 	);
 }
 
@@ -357,6 +364,20 @@ function applyChangeSet(state: ConversationState, event: ChangeSetEvent): void {
 	});
 }
 
+function appendBlockPreview(
+	state: ConversationState,
+	event: BlockPreviewEvent,
+): void {
+	const preview = event.preview;
+	if (preview === undefined) return;
+	const isKnown = state.messages.value.some(
+		(msg) =>
+			msg.role === MESSAGE_ROLES.BLOCK_PREVIEW && msg.preview.id === preview.id,
+	);
+	if (isKnown) return;
+	appendMessage(state, buildBlockPreviewMessage(preview));
+}
+
 function applyUsage(state: ConversationState, event: UsageEvent): void {
 	if (typeof event.totalTokens !== "number") return;
 	state.totalTokens.value = event.totalTokens;
@@ -377,6 +398,7 @@ const EVENT_HANDLERS: Record<string, EventHandler> = {
 	[SERVER_EVENT_TYPES.NOTICE]: appendNotice,
 	[SERVER_EVENT_TYPES.CHANGE_SET]: applyChangeSet,
 	[SERVER_EVENT_TYPES.USAGE]: applyUsage,
+	[SERVER_EVENT_TYPES.BLOCK_PREVIEW]: appendBlockPreview,
 };
 
 function isRecord(value: unknown): value is Record<string, unknown> {

package/frontend-vue/app/chat/composables/useBlockPreviewComponent.ts

@@ -0,0 +1,15 @@
+import { type Component, getCurrentInstance } from "vue";
+import { BLOCK_PREVIEW_COMPONENT_NAMES } from "../constants/block-preview";
+
+/**
+ * The DMS's `DmsBlockPreview`, looked up among the app's components rather
+ * than imported: the chat must keep working on a DMS that predates it, where
+ * the preview falls back to the tree as JSON.
+ */
+export function useBlockPreviewComponent(): Component | null {
+	const components = getCurrentInstance()?.appContext.components ?? {};
+	const name = BLOCK_PREVIEW_COMPONENT_NAMES.find(
+		(candidate) => components[candidate] !== undefined,
+	);
+	return name === undefined ? null : components[name];
+}

package/frontend-vue/app/chat/composables/useDashboardScheme.ts

@@ -0,0 +1,42 @@
+import { onBeforeUnmount, onMounted, type Ref, ref } from "vue";
+import { DARK_THEME_CLASS, type SketchScheme } from "../constants/sketch";
+
+const OBSERVED_ATTRIBUTES = ["class", "style", "data-scale"];
+
+function currentScheme(): SketchScheme {
+	return document.documentElement.classList.contains(DARK_THEME_CLASS)
+		? "dark"
+		: "light";
+}
+
+export interface DashboardScheme {
+	scheme: Ref<SketchScheme>;
+	revision: Ref<number>;
+}
+
+/**
+ * The dashboard's light or dark theme, followed live. `revision` also moves
+ * when the root's styles change, so readers of its CSS variables re-read them.
+ */
+export function useDashboardScheme(): DashboardScheme {
+	const scheme = ref<SketchScheme>("light");
+	const revision = ref(0);
+	let observer: MutationObserver | null = null;
+
+	const sync = () => {
+		scheme.value = currentScheme();
+		revision.value += 1;
+	};
+
+	onMounted(() => {
+		sync();
+		observer = new MutationObserver(sync);
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: OBSERVED_ATTRIBUTES,
+		});
+	});
+	onBeforeUnmount(() => observer?.disconnect());
+
+	return { scheme, revision };
+}

package/frontend-vue/app/chat/constants/block-preview.ts

@@ -0,0 +1,27 @@
+/** Names the DMS may register its block preview component under. */
+export const BLOCK_PREVIEW_COMPONENT_NAMES = [
+	"DmsBlockPreview",
+	"dms-block-preview",
+] as const;
+
+export const BLOCK_PREVIEW_MAIN_TAB = "proposed";
+export const BLOCK_PREVIEW_VARIANT_TAB_PREFIX = "variant-";
+
+export const JSON_INDENT = 2;
+
+/** Mirror of the sidecar's reference URL rules (sidecar/src/constants/preview.ts). */
+export const SAME_ORIGIN_PATH = /^\/(?![/\\])/;
+export const REMOTE_URL = /^https?:\/\//i;
+
+/** Width the card's live thumbnail is laid out at before it is scaled down. */
+export const THUMBNAIL_CANVAS_WIDTH_PX = 560;
+export const THUMBNAIL_SCALE = 0.2;
+/** Height a sketch is drawn at in the thumbnail, before the scale. */
+export const THUMBNAIL_SKETCH_HEIGHT_PX = 360;
+
+/** Most block types the card names before it counts the rest. */
+export const CARD_TYPE_LIMIT = 2;
+
+/** The schematic thumbnail drawn when the DMS cannot render the blocks. */
+export const PLAN_MAX_ROWS = 3;
+export const PLAN_MAX_CELLS = 4;

package/frontend-vue/app/chat/constants/conversation.ts

@@ -6,6 +6,7 @@ export const MESSAGE_ROLES = {
 	NOTICE: "notice",
 	CHANGE_SET: "change_set",
 	QUESTION_ANSWER: "question_answer",
+	BLOCK_PREVIEW: "block_preview",
 } as const;
 
 export const STORED_TOOL_USE_ROLE = "tool_use";

package/frontend-vue/app/chat/constants/protocol.ts

@@ -52,6 +52,7 @@ export const SERVER_EVENT_TYPES = {
 	NOTICE: "notice",
 	CHANGE_SET: "change_set",
 	USAGE: "usage",
+	BLOCK_PREVIEW: "block_preview",
 } as const;
 
 /** The role the chat says hello with. */

package/frontend-vue/app/chat/constants/sketch.ts

@@ -0,0 +1,105 @@
+/**
+ * How an agent's sketch is drawn. The frame is the security boundary: an empty
+ * `sandbox` (no scripts, opaque origin, no forms, popups or top navigation)
+ * and a CSP that loads nothing but inline styles and `data:` images and fonts.
+ */
+export const SKETCH_CSP =
+	"default-src 'none'; style-src 'unsafe-inline'; img-src data:; font-src data:";
+
+/** Mirror of the sidecar's default (sidecar/src/constants/preview.ts). */
+export const SKETCH_DEFAULT_HEIGHT_PX = 320;
+
+export type SketchScheme = "light" | "dark";
+
+/** Class the dashboard puts on `<html>` in its dark theme. */
+export const DARK_THEME_CLASS = "dark";
+
+/**
+ * The `--sketch-*` tokens a sketch's CSS may use, read from the dashboard's
+ * own variables (a sandboxed document inherits none of them), with the
+ * dashboard's default values when a variable is unset.
+ */
+export interface SketchToken {
+	name: string;
+	source: string;
+	light: string;
+	dark: string;
+}
+
+const SANS_STACK =
+	'"Geist", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif';
+const MONO_STACK = '"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace';
+
+export const SKETCH_TOKENS: readonly SketchToken[] = [
+	{
+		name: "canvas",
+		source: "--ui-bg-muted",
+		light: "#f4f6f7",
+		dark: "#07090b",
+	},
+	{
+		name: "surface",
+		source: "--dms-surface-card",
+		light: "#ffffff",
+		dark: "#10151a",
+	},
+	{
+		name: "surface-muted",
+		source: "--dms-bg-muted",
+		light: "#f7f9fa",
+		dark: "#0d1114",
+	},
+	{ name: "border", source: "--ui-border", light: "#e2e7ea", dark: "#262e36" },
+	{ name: "text", source: "--ui-text", light: "#2a333b", dark: "#c7d0d8" },
+	{
+		name: "text-strong",
+		source: "--ui-text-highlighted",
+		light: "#0b1114",
+		dark: "#eef3f6",
+	},
+	{
+		name: "text-muted",
+		source: "--ui-text-muted",
+		light: "#49525b",
+		dark: "#9ea7b0",
+	},
+	{ name: "accent", source: "--ui-primary", light: "#167f8a", dark: "#4dd9e6" },
+	{
+		name: "accent-fill",
+		source: "--dms-accent-fill",
+		light: "#4dd9e6",
+		dark: "#4dd9e6",
+	},
+	{
+		name: "success",
+		source: "--ui-success",
+		light: "#15803d",
+		dark: "#4ade80",
+	},
+	{ name: "error", source: "--ui-error", light: "#b91c1c", dark: "#f87171" },
+	{
+		name: "radius",
+		source: "--dms-radius-card",
+		light: "0.875rem",
+		dark: "0.875rem",
+	},
+	{ name: "font", source: "--font-sans", light: SANS_STACK, dark: SANS_STACK },
+	{
+		name: "font-mono",
+		source: "--font-mono",
+		light: MONO_STACK,
+		dark: MONO_STACK,
+	},
+];
+
+/** A dashboard value that could end the style element it is written into. */
+export const UNSAFE_TOKEN_VALUE = /[<>{};]/;
+
+/** Neutral base under the agent's CSS, so a bare sketch already looks native. */
+export const SKETCH_BASE_CSS = `*,*::before,*::after{box-sizing:border-box}
+html{color-scheme:var(--sketch-scheme);background:var(--sketch-canvas)}
+body{margin:0;padding:16px;font:14px/1.5 var(--sketch-font);color:var(--sketch-text);-webkit-font-smoothing:antialiased}
+h1,h2,h3,h4{margin:0 0 .5em;color:var(--sketch-text-strong);line-height:1.25}
+p{margin:0 0 .5em}
+img,svg{max-width:100%}
+code,kbd,pre{font-family:var(--sketch-font-mono)}`;

package/frontend-vue/app/chat/types/conversation.ts

@@ -2,6 +2,7 @@ import type { ACTIVITY_KINDS } from "../constants/run-status";
 import type { PendingAttachment } from "../utils/attachments";
 import type {
 	AllowedBy,
+	BlockPreview,
 	Notice,
 	ProviderName,
 	QuestionAnswerRecord,
@@ -91,6 +92,14 @@ export interface QuestionAnswerMessage {
 	timestampMs: number;
 }
 
+/** A block preview the agent shared, drawn as an attachment card. */
+export interface BlockPreviewMessage {
+	id: string;
+	role: "block_preview";
+	preview: BlockPreview;
+	timestampMs: number;
+}
+
 /**
  * What the running turn is doing, as last reported by the sidecar.
  * `receivedAtMs` is the local time of that report, from which the elapsed and
@@ -126,7 +135,8 @@ export type ConversationMessage =
 	| ErrorMessage
 	| NoticeMessage
 	| ChangeSetMessage
-	| QuestionAnswerMessage;
+	| QuestionAnswerMessage
+	| BlockPreviewMessage;
 
 export interface QueuedMessage {
 	id: string;

package/frontend-vue/app/chat/types/protocol.ts

@@ -203,6 +203,61 @@ export interface AttachmentMeta {
 	size: number;
 }
 
+/** One block of a preview tree, as the DMS `DmsBlockPreview` takes it. */
+export interface PreviewNode {
+	type?: string;
+	componentName?: string;
+	options?: Record<string, unknown>;
+	id?: string;
+	slot?: string;
+	colSpan?: number;
+	children?: PreviewNode[];
+}
+
+export type PreviewTree = PreviewNode | PreviewNode[];
+
+/**
+ * A custom component the agent proposes as static HTML and CSS, drawn in a
+ * sandboxed frame. Never a DMS block.
+ */
+export interface PreviewSketch {
+	html: string;
+	css?: string;
+	caption?: string;
+	height?: number;
+}
+
+/** What one tab of a preview draws: DMS blocks, a sketch, or both. */
+export interface PreviewView {
+	tree?: PreviewTree;
+	sketch?: PreviewSketch;
+}
+
+export interface BlockPreviewVariant extends PreviewView {
+	label: string;
+}
+
+/**
+ * The user's mockup a preview is compared with: an image they attached in the
+ * conversation (by name) or a URL.
+ */
+export interface BlockPreviewReference {
+	attachmentName?: string;
+	url?: string;
+	caption?: string;
+}
+
+/** A block preview the agent shared with its PreviewBlocks tool. */
+export interface BlockPreview extends PreviewView {
+	id: string;
+	title: string;
+	description?: string;
+	label?: string;
+	reference?: BlockPreviewReference;
+	variants?: BlockPreviewVariant[];
+	timestampMs: number;
+}
+
 export interface SnapshotMessage {
 	role: string;
 	content: string;
@@ -217,6 +272,7 @@ export interface SnapshotMessage {
 	changeSetId?: string;
 	notice?: Notice;
 	answers?: QuestionAnswerRecord[];
+	preview?: BlockPreview;
 }
 
 export interface QueuedItemWire {

package/frontend-vue/app/chat/utils/block-preview.ts

@@ -0,0 +1,145 @@
+import { MESSAGE_ROLES } from "../constants/conversation";
+import { lastMatching } from "./arrays";
+import {
+	BLOCK_PREVIEW_MAIN_TAB,
+	BLOCK_PREVIEW_VARIANT_TAB_PREFIX,
+	JSON_INDENT,
+	REMOTE_URL,
+	SAME_ORIGIN_PATH,
+} from "../constants/block-preview";
+import type { ConversationMessage, UserMessage } from "../types/conversation";
+import type {
+	BlockPreview,
+	BlockPreviewReference,
+	PreviewNode,
+	PreviewTree,
+	PreviewView,
+} from "../types/protocol";
+
+export interface BlockPreviewTab extends PreviewView {
+	value: string;
+	/** The view's own label; null for an unlabelled main view, named by the chat. */
+	label: string | null;
+}
+
+/**
+ * How the mockup is drawn: an image the page may load (an attachment of this
+ * session, or a same-origin path), a link for an external URL — loading it
+ * could send what the agent read to its address — or a note when the
+ * attachment is gone (only its name survives a reload).
+ */
+export type ReferenceView = ImageReference | LinkReference | MissingReference;
+
+interface ImageReference {
+	kind: "image";
+	src: string;
+	name: string;
+}
+
+interface LinkReference {
+	kind: "link";
+	href: string;
+}
+
+interface MissingReference {
+	kind: "missing";
+	name: string;
+}
+
+export function rootsOf(tree: PreviewTree): PreviewNode[] {
+	return Array.isArray(tree) ? tree : [tree];
+}
+
+function countIn(node: PreviewNode): number {
+	return 1 + (node.children ?? []).reduce((sum, c) => sum + countIn(c), 0);
+}
+
+/** The blocks with no children under the node: what a row actually shows. */
+export function countLeaves(node: PreviewNode): number {
+	const children = node.children ?? [];
+	if (children.length === 0) return 1;
+	return children.reduce((sum, child) => sum + countLeaves(child), 0);
+}
+
+/** Every block of the tree, nested ones included; none without a tree. */
+export function countBlocks(tree: PreviewTree | undefined): number {
+	if (tree === undefined) return 0;
+	return rootsOf(tree).reduce((sum, node) => sum + countIn(node), 0);
+}
+
+/** The block types at the top of the tree, for the card's subtitle. */
+export function topBlockTypes(tree: PreviewTree | undefined): string[] {
+	if (tree === undefined) return [];
+	const names = rootsOf(tree).map(
+		(node) => node.type ?? node.componentName ?? "",
+	);
+	return [...new Set(names.filter((name) => name !== ""))];
+}
+
+export function previewTabs(preview: BlockPreview): BlockPreviewTab[] {
+	const variants = (preview.variants ?? []).map((variant, index) => ({
+		value: `${BLOCK_PREVIEW_VARIANT_TAB_PREFIX}${index}`,
+		label: variant.label,
+		tree: variant.tree,
+		sketch: variant.sketch,
+	}));
+	const main = {
+		value: BLOCK_PREVIEW_MAIN_TAB,
+		label: preview.label ?? null,
+		tree: preview.tree,
+		sketch: preview.sketch,
+	};
+	return [main, ...variants];
+}
+
+/** Whether any view of the preview proposes a custom sketch. */
+export function hasSketch(preview: BlockPreview): boolean {
+	return [preview, ...(preview.variants ?? [])].some(
+		(view) => view.sketch !== undefined,
+	);
+}
+
+export function formatTree(tree: PreviewTree): string {
+	return JSON.stringify(tree, null, JSON_INDENT);
+}
+
+function isUser(message: ConversationMessage): message is UserMessage {
+	return message.role === MESSAGE_ROLES.USER;
+}
+
+/** The latest image of that name the user attached in this session. */
+function findAttachedImage(
+	name: string,
+	messages: readonly ConversationMessage[],
+): string | null {
+	const attachments = messages
+		.filter(isUser)
+		.flatMap((message) => message.attachments ?? []);
+	const match = lastMatching(
+		attachments,
+		(attachment) =>
+			attachment.name === name && attachment.dataUrl !== undefined,
+	);
+	return match?.dataUrl ?? null;
+}
+
+function viewOfUrl(url: string): ReferenceView | null {
+	if (SAME_ORIGIN_PATH.test(url)) return { kind: "image", src: url, name: url };
+	if (REMOTE_URL.test(url)) return { kind: "link", href: url };
+	return null;
+}
+
+export function referenceView(
+	reference: BlockPreviewReference | undefined,
+	messages: readonly ConversationMessage[],
+): ReferenceView | null {
+	if (reference === undefined) return null;
+	const name = reference.attachmentName;
+	if (name !== undefined) {
+		const src = findAttachedImage(name, messages);
+		return src === null
+			? { kind: "missing", name }
+			: { kind: "image", src, name };
+	}
+	return reference.url === undefined ? null : viewOfUrl(reference.url);
+}

package/frontend-vue/app/chat/utils/conversation-messages.ts

@@ -7,6 +7,7 @@ import {
 } from "../constants/conversation";
 import type {
 	AssistantMessage,
+	BlockPreviewMessage,
 	ConversationMessage,
 	ErrorMessage,
 	MessageAttachment,
@@ -14,7 +15,11 @@ import type {
 	ToolStatus,
 	UserMessage,
 } from "../types/conversation";
-import type { SnapshotMessage, ToolOutcome } from "../types/protocol";
+import type {
+	BlockPreview,
+	SnapshotMessage,
+	ToolOutcome,
+} from "../types/protocol";
 import { newUuid } from "./ids";
 
 const STOPPED_OUTCOME: ToolOutcome = "stopped";
@@ -81,6 +86,17 @@ export function buildLocalError(
 	};
 }
 
+export function buildBlockPreviewMessage(
+	preview: BlockPreview,
+): BlockPreviewMessage {
+	return {
+		id: newUuid(),
+		role: MESSAGE_ROLES.BLOCK_PREVIEW,
+		preview,
+		timestampMs: preview.timestampMs,
+	};
+}
+
 function normalizeToolStatus(raw: string | undefined): ToolStatus {
 	if (raw === TOOL_STATUS.SUCCESS) return TOOL_STATUS.SUCCESS;
 	if (raw === TOOL_STATUS.ERROR) return TOOL_STATUS.ERROR;
@@ -223,6 +239,11 @@ function addQuestionAnswer(build: SnapshotBuild, snap: SnapshotMessage): void {
 	});
 }
 
+function addBlockPreview(build: SnapshotBuild, snap: SnapshotMessage): void {
+	if (snap.preview === undefined) return;
+	build.out.push(buildBlockPreviewMessage(snap.preview));
+}
+
 const SNAPSHOT_BUILDERS: Record<
 	string,
 	(build: SnapshotBuild, snap: SnapshotMessage) => void
@@ -235,6 +256,7 @@ const SNAPSHOT_BUILDERS: Record<
 	[MESSAGE_ROLES.NOTICE]: addNotice,
 	[MESSAGE_ROLES.CHANGE_SET]: addChangeSet,
 	[MESSAGE_ROLES.QUESTION_ANSWER]: addQuestionAnswer,
+	[MESSAGE_ROLES.BLOCK_PREVIEW]: addBlockPreview,
 };
 
 /**

package/frontend-vue/app/chat/utils/render-items.ts

@@ -4,6 +4,7 @@ import {
 } from "../constants/conversation";
 import type {
 	AssistantMessage,
+	BlockPreviewMessage,
 	ChangeSetMessage,
 	ConversationMessage,
 	ErrorMessage,
@@ -29,7 +30,14 @@ interface WhoItem {
 }
 
 interface MessageItem {
-	kind: "user" | "assistant" | "error" | "notice" | "change" | "answers";
+	kind:
+		| "user"
+		| "assistant"
+		| "error"
+		| "notice"
+		| "change"
+		| "answers"
+		| "preview";
 	key: string;
 	message:
 		| UserMessage
@@ -37,7 +45,8 @@ interface MessageItem {
 		| ErrorMessage
 		| NoticeMessage
 		| ChangeSetMessage
-		| QuestionAnswerMessage;
+		| QuestionAnswerMessage
+		| BlockPreviewMessage;
 }
 
 interface ToolsItem {
@@ -66,6 +75,7 @@ const KIND_BY_ROLE: Record<string, MessageItem["kind"]> = {
 	[MESSAGE_ROLES.NOTICE]: "notice",
 	[MESSAGE_ROLES.CHANGE_SET]: "change",
 	[MESSAGE_ROLES.QUESTION_ANSWER]: "answers",
+	[MESSAGE_ROLES.BLOCK_PREVIEW]: "preview",
 };
 
 /** Roles drawn on the agent's side, under one "✦ Assistant" line per turn. */
@@ -73,6 +83,7 @@ const AGENT_ROLES: ReadonlySet<string> = new Set([
 	MESSAGE_ROLES.ASSISTANT,
 	MESSAGE_ROLES.TOOL,
 	MESSAGE_ROLES.CHANGE_SET,
+	MESSAGE_ROLES.BLOCK_PREVIEW,
 ]);
 
 function startOfDay(ms: number): number {