@antelopejs/dms-ai 0.1.6 → 0.2.1

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

@@ -1,27 +1,21 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import {
-	MESSAGE_ROLES,
-	RETRY_LABEL,
-	ROLE_LABELS,
-} from "../constants/conversation";
-import {
-	ACTIVITY_KINDS,
-	QUIET_LABEL,
-	RECONNECT_LABEL,
-	STALLED_LABEL,
-	STOP_LABEL,
-} from "../constants/run-status";
+import { useChatI18n } from "../composables/useChatI18n";
+import { ACTIVITY_KINDS } from "../constants/run-status";
+import { MESSAGE_ROLES } from "../constants/conversation";
 import type {
-	AssistantMessage,
 	ConversationMessage,
 	ErrorMessage,
 	MessageAttachment,
 	RunProgress,
-	ToolCallMessage,
 	UserMessage,
 } from "../types/conversation";
+import type { PermissionRequestData } from "../types/permission";
+import type { ChangeSetSummary } from "../types/protocol";
+import { lastMatching } from "../utils/arrays";
 import { formatBytes, isInlineImage } from "../utils/attachments";
+import { formatTimeOfDay } from "../utils/format";
+import { buildRenderItems, type RenderItem } from "../utils/render-items";
 import {
 	agentQuietMs,
 	describeActivity,
@@ -29,13 +23,19 @@ import {
 	isAgentQuiet,
 	runElapsedMs,
 } from "../utils/run-status";
-import { isTodoWrite } from "../utils/todos";
+import AnswerRecord from "./AnswerRecord.vue";
+import ChangeSetCard from "./ChangeSetCard.vue";
 import MarkdownContent from "./MarkdownContent.vue";
-import ToolCallEntry from "./ToolCallEntry.vue";
+import NoticeCard from "./NoticeCard.vue";
+import PlanCard from "./PlanCard.vue";
 import ToolCluster from "./ToolCluster.vue";
+import TurnErrorCard from "./TurnErrorCard.vue";
 
 interface Props {
 	messages: ConversationMessage[];
+	changeSets: Record<string, ChangeSetSummary>;
+	busyChangeSetIds: ReadonlySet<string>;
+	requests: PermissionRequestData[];
 	isRunning: boolean;
 	progress: RunProgress | null;
 	nowMs: number;
@@ -47,215 +47,304 @@ interface Emits {
 	retry: [];
 	reconnect: [];
 	stop: [];
+	focusRequest: [requestId: string];
+	undo: [changeSetId: string];
+	redo: [changeSetId: string];
+	review: [changeSetId: string];
+	stopAutoFix: [];
+	askAgain: [summary: string];
+	runPlan: [];
+	editPlan: [];
 }
 
-type TextMessage = UserMessage | AssistantMessage | ErrorMessage;
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+const { t, locale } = useChatI18n();
 
-interface MessageRenderItem {
-	kind: "message";
-	key: string;
-	message: TextMessage;
-}
+const MS_PER_DAY = 86_400_000;
 
-interface ToolsRenderItem {
-	kind: "tools";
-	key: string;
-	tools: ToolCallMessage[];
-}
+const items = computed<RenderItem[]>(() => buildRenderItems(props.messages));
 
-type RenderItem = MessageRenderItem | ToolsRenderItem;
+const lastToolsKey = computed<string | null>(
+	() => lastMatching(items.value, (item) => item.kind === "tools")?.key ?? null,
+);
 
-const props = defineProps<Props>();
-const emit = defineEmits<Emits>();
+const lastPlanKey = computed<string | null>(
+	() => lastMatching(items.value, (item) => item.kind === "plan")?.key ?? null,
+);
 
-const ATTACH_FILE_ICON = "i-ph-file";
-
-const ROLE_LABEL_BY_ROLE: Record<string, string> = {
-	[MESSAGE_ROLES.USER]: ROLE_LABELS.USER,
-	[MESSAGE_ROLES.ERROR]: ROLE_LABELS.ERROR,
-	[MESSAGE_ROLES.ASSISTANT]: ROLE_LABELS.ASSISTANT,
-	[MESSAGE_ROLES.TOOL]: ROLE_LABELS.TOOL,
-};
-
-const renderItems = computed<RenderItem[]>(() => {
-	const out: RenderItem[] = [];
-	let run: ToolCallMessage[] = [];
-
-	const flush = (): void => {
-		if (run.length === 0) return;
-		out.push({ kind: "tools", key: `tools-${run[0].id}`, tools: run });
-		run = [];
-	};
-
-	for (const message of props.messages) {
-		if (isTodoWrite(message)) {
-			flush();
-			continue;
-		}
-		if (message.role === MESSAGE_ROLES.TOOL) {
-			run = [...run, message];
-			continue;
-		}
-		flush();
-		out.push({ kind: "message", key: message.id, message });
-	}
-	flush();
-	return out;
+const lastErrorId = computed<string | null>(() => {
+	const last = props.messages.at(-1);
+	return last?.role === MESSAGE_ROLES.ERROR ? last.id : null;
 });
 
-const lastToolKey = computed<string | null>(() => {
-	for (let i = renderItems.value.length - 1; i >= 0; i--) {
-		const item = renderItems.value[i];
-		if (item.kind === "tools") return item.key;
-	}
-	return null;
+const lastAutoFixId = computed<string | null>(() => {
+	const notice = lastMatching(
+		props.messages,
+		(message) =>
+			message.role === MESSAGE_ROLES.NOTICE &&
+			message.notice.kind === "autofix",
+	);
+	return notice?.id ?? null;
+});
+
+const streamingMessageId = computed<string | null>(() => {
+	if (!props.isRunning) return null;
+	const last = props.messages.at(-1);
+	return last?.role === MESSAGE_ROLES.ASSISTANT ? last.id : null;
 });
 
 const showActivity = computed<boolean>(() => {
 	if (!props.isRunning) return false;
 	if (props.progress?.activity !== ACTIVITY_KINDS.RESPONDING) return true;
-	const last = props.messages.at(-1);
-	return last === undefined || last.role !== MESSAGE_ROLES.ASSISTANT;
+	return props.messages.at(-1)?.role !== MESSAGE_ROLES.ASSISTANT;
 });
 
-const activityLabel = computed<string>(() => describeActivity(props.progress));
-
-const elapsedLabel = computed<string>(() =>
+const activityLabel = computed(() => describeActivity(props.progress, t));
+const elapsedLabel = computed(() =>
 	formatClock(runElapsedMs(props.progress, props.nowMs)),
 );
-
 const quietLabel = computed<string>(() => {
 	if (!isAgentQuiet(props.progress, props.nowMs)) return "";
-	return `${QUIET_LABEL} ${formatClock(agentQuietMs(props.progress, props.nowMs))}`;
-});
-
-const streamingMessageId = computed<string | null>(() => {
-	if (!props.isRunning) return null;
-	const last = props.messages.at(-1);
-	return last?.role === MESSAGE_ROLES.ASSISTANT ? last.id : null;
+	return t("dms_ai.panel.activity.quiet", {
+		time: formatClock(agentQuietMs(props.progress, props.nowMs)),
+	});
 });
 
-const lastErrorId = computed<string | null>(() => {
-	const last = props.messages.at(-1);
-	return last?.role === MESSAGE_ROLES.ERROR ? last.id : null;
-});
+function dayLabel(dayMs: number): string {
+	const today = new Date();
+	today.setHours(0, 0, 0, 0);
+	if (dayMs === today.getTime()) return t("dms_ai.common.today");
+	if (dayMs === today.getTime() - MS_PER_DAY)
+		return t("dms_ai.common.yesterday");
+	return new Date(dayMs).toLocaleDateString(locale.value, {
+		weekday: "short",
+		day: "numeric",
+		month: "short",
+	});
+}
 
-function roleLabel(role: string): string {
-	return ROLE_LABEL_BY_ROLE[role] ?? role;
+function userMeta(message: UserMessage): string {
+	const time = formatTimeOfDay(message.timestampMs, locale.value);
+	return message.pagePath
+		? `${message.pagePath.replace(/^\/+/, "")} · ${time}`
+		: time;
 }
 
-function userAttachments(message: TextMessage): MessageAttachment[] {
-	if (message.role !== MESSAGE_ROLES.USER) return [];
+function attachmentsOf(message: UserMessage): MessageAttachment[] {
 	return message.attachments ?? [];
 }
 
-function formatTime(ms: number): string {
-	return new Date(ms).toLocaleTimeString();
+function canRetry(error: ErrorMessage): boolean {
+	return !props.isRunning && error.id === lastErrorId.value;
+}
+
+async function copyAnswer(content: string): Promise<void> {
+	try {
+		await navigator.clipboard.writeText(content);
+	} catch {
+		return;
+	}
 }
 </script>
 
 <template>
 	<ol class="message-list">
-		<template v-for="item in renderItems" :key="item.key">
-			<li v-if="item.kind === 'tools'" class="message-item" data-role="tool">
+		<template v-for="item in items" :key="item.key">
+			<li v-if="item.kind === 'separator'" class="cb-sep">
+				{{ dayLabel(item.dayMs) }}
+			</li>
+
+			<li v-else-if="item.kind === 'who'" class="cb-who">
+				✦ {{ t("dms_ai.panel.assistant") }}
+			</li>
+
+			<li
+				v-else-if="item.kind === 'tools'"
+				class="message-item"
+				data-role="tool"
+			>
 				<ToolCluster
-					v-if="item.tools.length > 1"
 					:tools="item.tools"
-					:live="isRunning && item.key === lastToolKey"
+					:live="isRunning && item.key === lastToolsKey"
+					:is-running="isRunning && item.key === lastToolsKey"
+					:requests="requests"
+					:now-ms="nowMs"
+					@focus-request="(id) => emit('focusRequest', id)"
 				/>
-				<ToolCallEntry v-else :message="item.tools[0]" />
 			</li>
 
-			<li v-else class="message-item" :data-role="item.message.role">
-				<header class="message-meta">
-					<span class="message-role">{{ roleLabel(item.message.role) }}</span>
-					<span class="message-time">
-						{{ formatTime(item.message.timestampMs) }}
-					</span>
-				</header>
-
-				<template v-if="item.message.role === MESSAGE_ROLES.USER">
-					<p
-						v-if="item.message.content"
-						class="message-bubble message-bubble-user"
-					>
-						{{ item.message.content }}
-					</p>
-
-					<ul
-						v-if="userAttachments(item.message).length > 0"
-						class="msg-attachments"
-					>
-						<li
-							v-for="(att, i) in userAttachments(item.message)"
-							:key="i"
-							class="msg-att"
-						>
-							<img
-								v-if="isInlineImage(att.mimeType) && att.dataUrl"
-								:src="att.dataUrl"
-								:alt="att.name"
-								class="msg-att-thumb"
-							/>
-							<template v-else>
-								<UIcon :name="ATTACH_FILE_ICON" class="size-[15px]" />
-								<span class="msg-att-name">{{ att.name }}</span>
-								<span class="msg-att-size">{{ formatBytes(att.size) }}</span>
-							</template>
-						</li>
-					</ul>
-				</template>
+			<li
+				v-else-if="item.kind === 'plan'"
+				class="message-item"
+				data-role="plan"
+			>
+				<PlanCard
+					:tool="item.tool"
+					:can-run="!isRunning && item.key === lastPlanKey"
+					@run="emit('runPlan')"
+					@edit="emit('editPlan')"
+				/>
+			</li>
 
-				<div
-					v-else-if="item.message.role === MESSAGE_ROLES.ERROR"
-					class="message-bubble message-bubble-error"
-					role="alert"
+			<li
+				v-else-if="item.kind === 'user' && item.message.role === 'user'"
+				class="message-item cb-user"
+				data-role="user"
+			>
+				<p v-if="item.message.content" class="message-bubble cb-user__bubble">
+					{{ item.message.content }}
+				</p>
+				<ul
+					v-if="attachmentsOf(item.message).length > 0"
+					class="cb-user__files"
 				>
-					<p class="error-text">{{ item.message.content }}</p>
-					<button
-						v-if="
-							!isRunning &&
-							item.message.isRetryable &&
-							item.message.id === lastErrorId
-						"
-						type="button"
-						class="run-action"
-						@click="emit('retry')"
+					<li
+						v-for="(att, index) in attachmentsOf(item.message)"
+						:key="index"
+						class="cb-att"
 					>
-						{{ RETRY_LABEL }}
-					</button>
-				</div>
+						<img
+							v-if="isInlineImage(att.mimeType) && att.dataUrl"
+							:src="att.dataUrl"
+							:alt="att.name"
+							class="cb-att__thumb"
+						/>
+						<template v-else>
+							<UIcon name="i-ph-file" class="cb-att__icon" />
+							<span class="cb-att__name">{{ att.name }}</span>
+							<span class="cb-att__size">{{ formatBytes(att.size) }}</span>
+						</template>
+					</li>
+				</ul>
+				<span class="cb-user__meta">
+					<UIcon v-if="item.message.pagePath" name="i-ph-browser" />
+					{{ userMeta(item.message) }}
+				</span>
+			</li>
 
+			<li
+				v-else-if="
+					item.kind === 'assistant' && item.message.role === 'assistant'
+				"
+				class="message-item cb-ai"
+				data-role="assistant"
+			>
 				<MarkdownContent
-					v-else
-					class="message-bubble message-bubble-assistant"
+					class="message-bubble message-bubble-assistant cb-md"
 					:content="item.message.content"
 					:is-streaming="item.message.id === streamingMessageId"
 				/>
+				<div
+					v-if="item.message.id !== streamingMessageId"
+					class="cb-ai__actions"
+				>
+					<UButton
+						size="xs"
+						color="neutral"
+						variant="ghost"
+						square
+						icon="i-ph-copy"
+						:aria-label="t('dms_ai.panel.copy_answer')"
+						:title="t('dms_ai.panel.copy_answer')"
+						@click="copyAnswer(item.message.content)"
+					/>
+					<span class="cb-ai__meta">
+						{{ formatTimeOfDay(item.message.timestampMs, locale) }}
+					</span>
+				</div>
+			</li>
+
+			<li
+				v-else-if="item.kind === 'error' && item.message.role === 'error'"
+				class="message-item"
+				data-role="error"
+			>
+				<TurnErrorCard
+					:error="item.message"
+					:can-retry="canRetry(item.message)"
+					@retry="emit('retry')"
+				/>
+			</li>
+
+			<li
+				v-else-if="item.kind === 'notice' && item.message.role === 'notice'"
+				class="message-item"
+				data-role="notice"
+			>
+				<NoticeCard
+					:notice="item.message.notice"
+					:can-stop-auto-fix="isRunning && item.message.id === lastAutoFixId"
+					@stop-auto-fix="emit('stopAutoFix')"
+					@ask-again="(summary) => emit('askAgain', summary)"
+				/>
+			</li>
+
+			<li
+				v-else-if="
+					item.kind === 'change' &&
+					item.message.role === 'change_set' &&
+					changeSets[item.message.changeSetId]
+				"
+				class="message-item"
+				data-role="change"
+			>
+				<ChangeSetCard
+					:change-set="changeSets[item.message.changeSetId]"
+					:is-busy="busyChangeSetIds.has(item.message.changeSetId)"
+					@undo="emit('undo', item.message.changeSetId)"
+					@redo="emit('redo', item.message.changeSetId)"
+					@review="emit('review', item.message.changeSetId)"
+				/>
+			</li>
+
+			<li
+				v-else-if="
+					item.kind === 'answers' && item.message.role === 'question_answer'
+				"
+				class="message-item"
+				data-role="answers"
+			>
+				<AnswerRecord :answers="item.message.answers" />
 			</li>
 		</template>
 
-		<li v-if="isStalled" class="message-item" data-role="assistant">
+		<li v-if="isStalled" class="message-item" data-role="status">
 			<div class="run-stalled" role="alert">
-				<span>{{ STALLED_LABEL }} {{ formatClock(stalledForMs) }}.</span>
-				<button type="button" class="run-action" @click="emit('reconnect')">
-					{{ RECONNECT_LABEL }}
-				</button>
-				<button type="button" class="run-action" @click="emit('stop')">
-					{{ STOP_LABEL }}
-				</button>
+				<UIcon name="i-ph-wifi-slash" class="run-stalled__icon" />
+				<span>
+					{{
+						t("dms_ai.panel.activity.stalled", {
+							time: formatClock(stalledForMs),
+						})
+					}}
+				</span>
+				<UButton
+					size="xs"
+					color="neutral"
+					variant="outline"
+					:label="t('dms_ai.panel.connection.reconnect')"
+					@click="emit('reconnect')"
+				/>
+				<UButton
+					size="xs"
+					color="neutral"
+					variant="ghost"
+					:label="t('dms_ai.panel.composer.stop')"
+					@click="emit('stop')"
+				/>
 			</div>
 		</li>
-		<li v-else-if="showActivity" class="message-item" data-role="assistant">
-			<div class="thinking" aria-live="polite">
-				<span class="thinking-label">{{ activityLabel }}</span>
-				<span class="thinking-dots">
-					<i></i>
-					<i></i>
-					<i></i>
+		<li v-else-if="showActivity" class="message-item" data-role="status">
+			<div class="cb-thinking thinking" aria-live="polite">
+				<span class="cb-thinking__dots" aria-hidden="true">
+					<i />
+					<i />
+					<i />
 				</span>
-				<span class="thinking-clock">{{ elapsedLabel }}</span>
+				<span class="thinking-label">{{ activityLabel }}</span>
 				<span v-if="quietLabel" class="thinking-quiet">{{ quietLabel }}</span>
+				<span class="thinking-clock">{{ elapsedLabel }}</span>
 			</div>
 		</li>
 	</ol>
@@ -263,211 +352,216 @@ function formatTime(ms: number): string {
 
 <style scoped>
 .message-list {
-	list-style: none;
-	margin: 0;
-	padding: 12px;
 	display: flex;
 	flex-direction: column;
-	gap: 12px;
+	gap: 14px;
+	margin: 0;
+	padding: 16px 14px 20px;
+	list-style: none;
 }
 
 .message-item {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-	max-width: 85%;
-}
-
-.message-item[data-role="user"] {
-	align-self: flex-end;
-	align-items: flex-end;
-}
-
-.message-item[data-role="assistant"] {
-	align-self: flex-start;
-	align-items: flex-start;
+	display: grid;
+	gap: 6px;
+	min-width: 0;
 }
 
-.message-item[data-role="tool"] {
-	align-self: stretch;
-	max-width: 100%;
+.cb-sep {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	color: var(--ui-text-dimmed);
+	font: 600 10px var(--ai-font-mono);
+	letter-spacing: 0.08em;
+	text-transform: uppercase;
 }
 
-.message-meta {
-	display: flex;
-	gap: 8px;
-	font-family: var(--font-code);
-	font-size: 10px;
-	color: var(--fg-tertiary);
+.cb-sep::before,
+.cb-sep::after {
+	content: "";
+	flex: 1;
+	height: 1px;
+	background: var(--ui-border);
 }
 
-.message-item[data-role="assistant"] .message-role,
-.message-item[data-role="user"] .message-role {
-	display: none;
+.cb-who {
+	margin-bottom: -6px;
+	font: 600 10px var(--ai-font-mono);
+	letter-spacing: 0.08em;
+	text-transform: uppercase;
+	color: var(--ai);
 }
 
-.message-role {
-	font-weight: 600;
+.cb-user {
+	align-self: flex-end;
+	justify-items: end;
+	max-width: 86%;
+	gap: 4px;
 }
 
 .message-bubble {
 	margin: 0;
-	white-space: pre-wrap;
-	word-break: break-word;
-	font-size: 13.5px;
-	line-height: 1.55;
+	overflow-wrap: anywhere;
 }
 
-.message-bubble-user {
-	padding: 11px 14px;
+.cb-user__bubble {
+	padding: 9px 12px;
+	border: 1px solid var(--ui-border);
 	border-radius: 14px 14px 4px 14px;
-	background: var(--accent);
-	color: var(--accent-fg);
-	font-weight: 500;
+	background: var(--ui-bg-accented);
+	color: var(--ui-text-highlighted);
+	font-size: 13.5px;
+	line-height: 1.5;
+	white-space: pre-wrap;
 }
 
-.message-bubble-assistant {
-	white-space: normal;
-	color: var(--fg-secondary);
+.cb-user__meta,
+.cb-ai__meta {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	font: 500 10.5px var(--ai-font-mono);
+	color: var(--ui-text-dimmed);
 }
 
-.msg-attachments {
-	list-style: none;
-	margin: 6px 0 0;
-	padding: 0;
+.cb-user__files {
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: flex-end;
 	gap: 6px;
+	margin: 0;
+	padding: 0;
+	list-style: none;
 }
 
-.msg-att {
+.cb-att {
 	display: inline-flex;
 	align-items: center;
 	gap: 6px;
 	max-width: 220px;
-	padding: 5px 9px;
-	background: var(--surface-inset);
-	border: 1px solid var(--hair);
-	border-radius: var(--corner-md);
-	color: var(--fg-secondary);
+	padding: 4px 8px;
+	border: 1px solid var(--ui-border);
+	border-radius: 7px;
+	background: var(--dms-surface-card);
 	font-size: 12px;
+	color: var(--ui-text-toned);
 }
 
-.msg-att-thumb {
+.cb-att:has(.cb-att__thumb) {
+	padding: 0;
+	overflow: hidden;
+}
+
+.cb-att__thumb {
 	max-width: 180px;
 	max-height: 180px;
-	padding: 0;
-	border-radius: var(--corner-md);
 	object-fit: contain;
 }
 
-.msg-att:has(.msg-att-thumb) {
-	padding: 0;
-	overflow: hidden;
+.cb-att__icon {
+	width: 14px;
+	height: 14px;
+	color: var(--ui-text-muted);
 }
 
-.msg-att-name {
-	white-space: nowrap;
+.cb-att__name {
 	overflow: hidden;
 	text-overflow: ellipsis;
-	font-weight: 500;
-	color: var(--fg);
+	white-space: nowrap;
 }
 
-.msg-att-size {
-	flex: 0 0 auto;
-	color: var(--fg-tertiary);
-	font-size: 10px;
+.cb-att__size {
+	font: 500 10.5px var(--ai-font-mono);
+	color: var(--ui-text-dimmed);
 }
 
-.thinking {
-	display: inline-flex;
+.message-bubble-assistant {
+	color: var(--ui-text-toned);
+	font-size: 13.5px;
+	line-height: 1.6;
+}
+
+.cb-ai__actions {
+	display: flex;
 	align-items: center;
-	gap: 8px;
-	color: var(--fg-tertiary);
+	gap: 2px;
+	margin-top: -4px;
+	color: var(--ui-text-dimmed);
+}
+
+.cb-thinking {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	color: var(--ui-text-muted);
 	font-size: 13px;
 }
 
-.thinking-dots {
+.cb-thinking__dots {
 	display: inline-flex;
-	gap: 3px;
+	gap: 4px;
 }
 
-.thinking-clock,
-.thinking-quiet {
-	font-family: var(--font-code);
-	font-size: 11px;
+.cb-thinking__dots i {
+	width: 6px;
+	height: 6px;
+	border-radius: 50%;
+	background: var(--ai);
+	animation: dms-ai-bounce 1.1s ease-in-out infinite;
+}
+
+.cb-thinking__dots i:nth-child(2) {
+	animation-delay: 0.15s;
+}
+
+.cb-thinking__dots i:nth-child(3) {
+	animation-delay: 0.3s;
 }
 
 .thinking-quiet {
-	color: var(--fg-secondary);
+	color: var(--ui-text-toned);
+	font-size: 11.5px;
 }
 
-.message-item[data-role="error"] {
-	align-self: stretch;
-	max-width: 100%;
+.thinking-clock {
+	margin-left: auto;
+	font: 500 11px var(--ai-font-mono);
+	color: var(--ui-text-dimmed);
 }
 
-.message-bubble-error,
 .run-stalled {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
 	gap: 8px;
 	padding: 9px 12px;
-	border: 1px solid var(--danger-400);
-	border-radius: var(--corner-md);
-	background: var(--danger-bg);
-	color: var(--fg);
-	white-space: normal;
-}
-
-.error-text {
-	flex: 1 1 200px;
-	margin: 0;
+	border: 1px solid var(--dms-warning-line);
+	border-radius: var(--ai-radius-md);
+	background: var(--dms-warning-tint);
+	font-size: 12.5px;
+	color: var(--ui-text-toned);
 }
 
-.run-action {
-	padding: 4px 10px;
-	border: 1px solid var(--hair);
-	border-radius: var(--corner-md);
-	background: var(--surface-card);
-	color: var(--fg);
-	font-size: 12px;
-	font-weight: 600;
-	cursor: pointer;
+.run-stalled__icon {
+	width: 15px;
+	height: 15px;
+	color: var(--ui-warning);
 }
 
-.run-action:hover {
-	border-color: var(--accent);
+.run-stalled span {
+	flex: 1 1 180px;
 }
 
-.thinking-dots i {
-	width: 5px;
-	height: 5px;
-	border-radius: 50%;
-	background: #9ca3af;
-	animation: thinking-bounce 1.2s infinite ease-in-out both;
-}
-
-.thinking-dots i:nth-child(2) {
-	animation-delay: 0.16s;
-}
-
-.thinking-dots i:nth-child(3) {
-	animation-delay: 0.32s;
-}
-
-@keyframes thinking-bounce {
+@keyframes dms-ai-bounce {
 	0%,
 	80%,
 	100% {
-		transform: scale(0.6);
-		opacity: 0.4;
+		transform: translateY(0);
+		opacity: 0.45;
 	}
+
 	40% {
-		transform: scale(1);
+		transform: translateY(-4px);
 		opacity: 1;
 	}
 }