@getdom/studio 0.2.0 → 0.2.2

package/CHANGELOG.md

@@ -1,5 +1,69 @@
 # Changelog
 
+## 0.2.2 - 2026-09-26
+
+More flexible calendar highlights, refined agent chat, and updated website
+licensing flows.
+
+### Added
+
+- `DomMonthCalendar` now accepts `todayIndicator="both"` to show the cell outline
+  and date circle together. `todayDateClass` customises the circle in either
+  `circle` or `both` mode, with matching TypeScript declarations and an interactive
+  example.
+- Website support for account-optional licence checkout, downloadable purchase
+  confirmations, and email-verified licence claiming. Checkout requires configured
+  transactional email delivery.
+
+### Improved
+
+- Agent chat uses a shared centred width for messages and the composer, compact
+  conversation rows with avatars and unread counts, expandable tool details,
+  and clearer loading, empty, streaming, and agent-context displays.
+- Default control backgrounds use the canvas colour. The command palette has
+  updated translucency and theme-aware shadows.
+- The homepage includes interactive workspace, agent-chat, analytics, and designer
+  demos. Website pricing and checkout use consistent USD licence offers.
+
+### Fixed
+
+- Calendar date numbers keep consistent spacing across all today-indicator modes,
+  and week numbers align with dates in the desktop grid.
+- Website checkout validates the configured price and licence before redirecting
+  to payment. Delayed payment handling and repeat webhook processing preserve
+  the recorded licence and its fulfilment state.
+
+### Upgrade notes
+
+- Existing calendar indicator values remain supported; `cell` is still the default.
+- `DomAgentConversation.maxMessageWidth` now controls the centred message column
+  and composer together. Review custom conversation layouts after upgrading.
+- Applications that supply their own theme can set `--skin-control-bg` to retain
+  a different control background.
+
+## 0.2.1 - 2026-09-21
+
+Vue Router 5 support and a public home for DOM Studio release notes.
+
+### Added
+
+- A release history at `/releases`, with publication dates, version links and
+  upgrade notes. Published GitHub Releases supply the notes through the server.
+- A release preparation command and tag-triggered publishing workflow that checks
+  the package, verifies npm publication, then creates matching GitHub Release notes.
+
+### Improved
+
+- Added Vue Router 5 support while retaining compatibility with Vue Router 4.
+- Updated the development and package-smoke toolchains to validate the current
+  Vue, Pinia, Vite, and Vue Router release line.
+
+### Upgrade notes
+
+- Vue must be version 3.5.34 or newer within Vue 3. Vue Router 4 remains supported.
+- When using Vue Router 5.3 with Pinia, use Pinia 3.0.4 or newer within Pinia 3.
+  Vue Router 5.3 also requires Vite 7.3 or 8 when Vite is installed.
+
 ## 0.2.0 - 2026-09-20
 
 This release expands DOM Studio from its initial public package with new

package/LICENSE.md

@@ -28,11 +28,14 @@ the order confirmation.
 An Individual licence permits one named individual to:
 
 - use and modify the Software in unlimited personal or commercial products owned by that individual;
+- incorporate the Software into bespoke products created for that individual's clients;
 - deploy and distribute those products to end users; and
 - maintain those products for their end users.
 
-The Individual licence does not permit sharing the Software or paid source
-access with colleagues, employees, contractors, or clients.
+The Individual licence covers one named developer. It does not permit sharing
+the component library or paid source access with colleagues, employees, or
+contractors. A client may receive the Software as part of a bespoke end product
+under the client-delivery terms below.
 
 ### Team
 
@@ -44,9 +47,14 @@ A Team licence permits the purchasing legal entity to:
 - incorporate the Software into bespoke products created for its clients.
 
 Contractors may use the Software only while working on behalf of the purchasing
-entity and must not retain or reuse it for unrelated work. A client may receive
-the Software only as part of a bespoke end product and may not extract or reuse
-it as a standalone component library unless the client obtains its own licence.
+entity and must not retain or reuse it for unrelated work.
+
+### Client delivery
+
+Under either commercial licence, a client may receive the Software only as part
+of a bespoke end product. The client may operate and maintain that end product,
+but may not extract or reuse the Software as a standalone component library or
+in another product unless the client obtains its own licence.
 
 ## Permitted modifications and distribution
 
@@ -69,10 +77,16 @@ You must not:
 
 ## Updates
 
-A purchase described as "lifetime v1 access" includes releases published under
-major version 1 while DOM Studio makes them available. It does not include a
-right to future major versions, hosted services, consulting, or support unless
-the order confirmation says otherwise.
+A commercial licence permits perpetual use of the versions obtained under it,
+subject to the terms of this licence. Included updates cover releases published
+under major version 1 while DOM Studio makes them available. Future major
+upgrades are optional and may be sold separately; declining an upgrade does not
+end the right to use the versions already obtained.
+
+Hosted services, architecture reviews, consulting, and support are not included
+unless the order confirmation says otherwise. Existing purchases, including
+introductory £1 purchases and purchases described as "lifetime v1 access", retain
+their purchased access and any additional rights or services promised at purchase.
 
 ## Ownership
 

package/package.json

@@ -1,11 +1,15 @@
 {
 	"name": "@getdom/studio",
-	"version": "0.2.0",
+	"version": "0.2.2",
 	"description": "A Vue 3 and Web Component interface system for application UI.",
 	"type": "module",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"author": "Steve O'Brien",
 	"homepage": "https://getdom.studio",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/steve-obrien/dom.studio.git"
+	},
 	"keywords": [
 		"vue",
 		"web-components",
@@ -50,8 +54,8 @@
 	"peerDependencies": {
 		"pinia": "^2.3.0 || ^3.0.0",
 		"tailwindcss": "^4.2.0",
-		"vue": "^3.5.0",
-		"vue-router": "^4.6.0"
+		"vue": "^3.5.34",
+		"vue-router": "^4.6.0 || ^5.0.0"
 	},
 	"dependencies": {
 		"@tiptap/extension-code-block": "3.27.3",

package/src/pages/_layout/componentCatalog.generated.js

@@ -1778,7 +1778,7 @@ export const componentCatalog = [
 			},
 			"name": "Agent conversation list",
 			"tag": "<DomAgentConversationList>",
-			"description": "A reusable AI conversation navigation list with search, agent labels, unread counts, status pills, and active-thread selection.",
+			"description": "A reusable AI conversation navigation list with search, agent labels, unread counts, status indicators, and active-thread selection.",
 			"icon": "M5 6h14M5 12h14M5 18h8",
 			"events": [
 				{

package/src/pages/components/command-palette/DomCommandPalette.vue

@@ -439,12 +439,17 @@ function matchesShortcut(event, shortcut) {
 .command-panel-blur {
 	--skin-overlay-bg: var(
 		--dom-command-palette-background,
-		color-mix(in oklch, var(--canvas) 82%, transparent)
+		color-mix(in oklch, var(--canvas) 68%, transparent)
 	);
 	--skin-overlay-backdrop: var(
 		--dom-command-palette-backdrop,
 		blur(20px) saturate(1.12)
 	);
+	--skin-overlay-shadow: var(
+		--dom-command-palette-shadow,
+		0 40px 100px -24px rgb(15 23 42 / 0.3),
+		0 16px 40px -20px rgb(15 23 42 / 0.2)
+	);
 }
 
 .command-panel-entering {

package/src/pages/data/agent-chat/DomAgentChatShell.vue

@@ -103,6 +103,8 @@ export const agentChatShellProps = {
 import { computed, useId } from 'vue';
 import DomIconButton from '../../components/icon-button/DomIconButton.vue';
 import DomSplitterPanel from '../../components/splitter-panel/DomSplitterPanel.vue';
+import DomAvatar from '../../visual/avatar/DomAvatar.vue';
+import DomBadge from '../../visual/badge/DomBadge.vue';
 import DomStatusPill from '../../visual/status-pill/DomStatusPill.vue';
 import DomAgentConversation from './DomAgentConversation.vue';
 import DomAgentConversationList from './DomAgentConversationList.vue';
@@ -364,7 +366,7 @@ function conversationStatusTone() {
 <template>
 	<section
 		:id="shellId"
-		class="h-full min-h-0 w-full min-w-0 overflow-hidden rounded-lg border border-border bg-canvas text-canvas-fg shadow-sm"
+		class="h-full min-h-0 w-full min-w-0 overflow-hidden rounded-xl border border-border bg-canvas text-canvas-fg shadow-sm"
 		:aria-label="title"
 	>
 		<div class="hidden h-full min-h-0 md:block">
@@ -376,7 +378,7 @@ function conversationStatusTone() {
 				:min-main="minConversation"
 				:min-end="asideMinimum"
 				:handle-size="8"
-				handle-class="transition hover:bg-border/70 data-[dragging=true]:bg-ring/30"
+				handle-class="relative before:pointer-events-none before:absolute before:inset-y-0 before:left-1/2 before:w-px before:-translate-x-1/2 before:bg-border/70 before:transition hover:before:bg-ring/60 data-[dragging=true]:before:bg-ring"
 				@update:start-size="updateSidebarSize"
 				@update:end-size="updateAsideSize"
 			>
@@ -440,70 +442,67 @@ function conversationStatusTone() {
 				<template v-if="asideOpen" #end>
 					<slot name="aside" :conversation="conversation" :active-agent="activeAgent" :tool-parts="toolParts">
 						<aside class="flex h-full min-h-0 flex-col bg-canvas">
-							<header class="shrink-0 border-b border-border bg-secondary/25 p-4">
-								<div class="flex items-start justify-between gap-3">
+							<header class="flex h-14 shrink-0 items-center justify-between gap-3 border-b border-border/70 px-4">
+								<div class="flex min-w-0 items-center gap-2.5">
+									<DomAvatar size="sm" shape="rounded" :src="activeAgent?.avatarUrl || ''" :name="activeAgentLabel()" />
 									<div class="min-w-0">
-										<p class="text-xs font-semibold uppercase text-muted-fg">Agent context</p>
-										<h2 class="mt-1 truncate text-sm font-semibold text-canvas-fg">{{ activeAgentLabel() }}</h2>
+										<h2 class="truncate text-sm font-semibold tracking-tight text-canvas-fg">{{ activeAgentLabel() }}</h2>
+										<p class="truncate font-mono text-[11px] text-muted-fg">{{ activeModelLabel() }}</p>
 									</div>
-									<DomIconButton label="Close context panel" size="sm" variant="ghost" icon="M6 6l12 12M18 6 6 18" @click="setAsideOpen(false)" />
 								</div>
+								<DomIconButton label="Close context panel" size="sm" variant="ghost" icon="M6 6l12 12M18 6 6 18" @click="setAsideOpen(false)" />
 							</header>
-							<div class="min-h-0 flex-1 overflow-y-auto p-4">
-								<div class="rounded-lg border border-border bg-secondary/25 p-4">
-									<p class="text-xs font-semibold text-muted-fg">Runtime</p>
-									<p class="mt-1 text-sm font-semibold text-canvas-fg">{{ activeModelLabel() }}</p>
-									<p class="mt-2 text-sm leading-6 text-muted-fg">{{ activeAgent?.role || 'Connect an agent to show instructions, tools, and memory context here.' }}</p>
-								</div>
-
-								<div class="mt-4 rounded-lg border border-border p-4">
-									<div class="flex items-center justify-between gap-3">
-										<p class="text-xs font-semibold uppercase text-muted-fg">Conversation</p>
-										<DomStatusPill size="sm" :tone="conversationStatusTone()">{{ streaming ? 'streaming' : (conversation?.status || 'idle') }}</DomStatusPill>
-									</div>
-									<dl class="mt-3 grid grid-cols-2 gap-3 text-sm">
-										<div>
-											<dt class="text-xs text-muted-fg">Messages</dt>
-											<dd class="font-semibold text-canvas-fg">{{ messages.length }}</dd>
+							<div class="min-h-0 flex-1 divide-y divide-border/70 overflow-y-auto">
+								<section class="p-4">
+									<p class="text-sm leading-6 text-muted-fg">{{ activeAgent?.role || 'Connect an agent to show instructions, tools, and memory context here.' }}</p>
+									<dl class="mt-4 grid grid-cols-3 gap-2">
+										<div class="rounded-lg bg-secondary/60 px-3 py-2">
+											<dt class="text-[11px] text-muted-fg">Status</dt>
+											<dd class="mt-1">
+												<DomStatusPill class="capitalize" size="sm" :tone="conversationStatusTone()" :pulse="streaming">{{ streaming ? 'streaming' : (conversation?.status || 'idle') }}</DomStatusPill>
+											</dd>
 										</div>
-										<div>
-											<dt class="text-xs text-muted-fg">Tools</dt>
-											<dd class="font-semibold text-canvas-fg">{{ toolParts.length }}</dd>
+										<div class="rounded-lg bg-secondary/60 px-3 py-2">
+											<dt class="text-[11px] text-muted-fg">Messages</dt>
+											<dd class="mt-0.5 text-base font-semibold tabular-nums text-canvas-fg">{{ messages.length }}</dd>
+										</div>
+										<div class="rounded-lg bg-secondary/60 px-3 py-2">
+											<dt class="text-[11px] text-muted-fg">Tools</dt>
+											<dd class="mt-0.5 text-base font-semibold tabular-nums text-canvas-fg">{{ toolParts.length }}</dd>
 										</div>
 									</dl>
-								</div>
+								</section>
 
-								<div class="mt-4 rounded-lg border border-border p-4">
-									<p class="text-xs font-semibold uppercase text-muted-fg">Tool calls</p>
-									<div v-if="toolParts.length" class="mt-3 space-y-2">
-										<div
+								<section class="p-4">
+									<h3 class="text-xs font-medium uppercase tracking-wide text-muted-fg">Tool calls</h3>
+									<ul v-if="toolParts.length" class="mt-2 -mx-2">
+										<li
 											v-for="tool in toolParts"
 											:key="`${tool.messageId}-${tool.id || tool.name}`"
-											class="rounded-md border border-border bg-secondary/25 p-3"
+											class="flex items-center gap-3 rounded-lg px-2 py-2 transition hover:bg-secondary/50"
 										>
-											<div class="flex items-start justify-between gap-2">
-												<p class="min-w-0 truncate text-sm font-semibold text-canvas-fg">{{ tool.label || tool.name }}</p>
-												<span class="shrink-0 text-xs text-muted-fg">{{ tool.status || 'ready' }}</span>
-											</div>
-											<p class="mt-1 truncate text-xs text-muted-fg">{{ tool.name }}</p>
-										</div>
-									</div>
-									<p v-else class="mt-3 text-sm leading-6 text-muted-fg">Tool activity appears here as the agent works.</p>
-								</div>
+											<span class="grid size-7 shrink-0 place-items-center rounded-lg bg-secondary text-muted-fg">
+												<svg viewBox="0 0 24 24" class="size-3.5" fill="none" aria-hidden="true">
+													<path d="M14.7 6.3a4 4 0 0 0-5.4 5.2L4 16.8V20h3.2l5.3-5.3a4 4 0 0 0 5.2-5.4l-2.5 2.5-2.3-.7-.7-2.3 2.5-2.5Z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round" />
+												</svg>
+											</span>
+											<span class="min-w-0 flex-1">
+												<span class="block truncate text-sm font-medium text-canvas-fg">{{ tool.label || tool.name }}</span>
+												<span class="block truncate font-mono text-[11px] text-muted-fg">{{ tool.name }}</span>
+											</span>
+											<span class="shrink-0 text-xs capitalize text-muted-fg">{{ tool.status || 'ready' }}</span>
+										</li>
+									</ul>
+									<p v-else class="mt-2 text-sm leading-6 text-muted-fg">Tool activity appears here as the agent works.</p>
+								</section>
 
-								<div class="mt-4 rounded-lg border border-border p-4">
-									<p class="text-xs font-semibold uppercase text-muted-fg">Available tools</p>
-									<div v-if="activeAgent?.tools?.length" class="mt-3 flex flex-wrap gap-2">
-										<span
-											v-for="tool in activeAgent.tools"
-											:key="tool"
-											class="rounded-full border border-border bg-secondary px-2.5 py-1 text-xs font-medium text-muted-fg"
-										>
-											{{ tool }}
-										</span>
+								<section class="p-4">
+									<h3 class="text-xs font-medium uppercase tracking-wide text-muted-fg">Available tools</h3>
+									<div v-if="activeAgent?.tools?.length" class="mt-3 flex flex-wrap gap-1.5">
+										<DomBadge v-for="tool in activeAgent.tools" :key="tool" class="font-mono" size="sm">{{ tool }}</DomBadge>
 									</div>
-									<p v-else class="mt-3 text-sm leading-6 text-muted-fg">No tool manifest supplied.</p>
-								</div>
+									<p v-else class="mt-2 text-sm leading-6 text-muted-fg">No tool manifest supplied.</p>
+								</section>
 							</div>
 						</aside>
 					</slot>

package/src/pages/data/agent-chat/DomAgentConversation.vue

@@ -127,7 +127,7 @@ export const agentConversationProps = {
 	maxMessageWidth: {
 		type: String,
 		default: '48rem',
-		_edit: { description: 'CSS max-width applied to message bubbles.' },
+		_edit: { description: 'CSS max-width applied to the centered message column and composer.' },
 	},
 };
 </script>
@@ -136,6 +136,10 @@ export const agentConversationProps = {
 import { computed, nextTick, ref, useId, watch } from 'vue';
 import DomIconButton from '../../components/icon-button/DomIconButton.vue';
 import DomTextareaComposer from '../../forms/textarea-composer/DomTextareaComposer.vue';
+import DomToggleButtonGroup from '../../forms/toggle-button-group/DomToggleButtonGroup.vue';
+import DomAvatar from '../../visual/avatar/DomAvatar.vue';
+import DomEmptyState from '../../visual/empty-state/DomEmptyState.vue';
+import DomSkeleton from '../../visual/skeleton/DomSkeleton.vue';
 import DomStatusPill from '../../visual/status-pill/DomStatusPill.vue';
 
 defineOptions({
@@ -181,6 +185,11 @@ const emit = defineEmits([
 	'scroll-bottom',
 ]);
 
+const modeOptions = [
+	{ label: 'Text', value: 'text' },
+	{ label: 'Audio', value: 'audio' },
+];
+
 const scroller = ref(null);
 const isPinnedToBottom = ref(true);
 const titleId = useId();
@@ -192,7 +201,7 @@ const statusTone = computed(() => statusToneFor(props.streaming ? 'streaming' :
 const visibleMessages = computed(() => props.messages.filter(isVisibleMessage));
 const canSubmit = computed(() => !props.disabled && !props.streaming && props.modelValue.trim().length > 0);
 const composerPlaceholder = computed(() => props.mode === 'audio' ? 'Describe what you want to say, or connect this to speech input...' : props.placeholder);
-const messageWidthStyle = computed(() => ({ maxWidth: props.maxMessageWidth }));
+const columnStyle = computed(() => ({ maxWidth: props.maxMessageWidth }));
 const shouldShowJumpButton = computed(() => !isPinnedToBottom.value && visibleMessages.value.length > 2);
 
 watch(() => props.conversation?.id, async () => {
@@ -351,22 +360,6 @@ function authorName(message) {
 	return findAgentById(props.agents, message.agentId)?.name || activeAgent.value?.name || 'Assistant';
 }
 
-/**
- * Resolves the short avatar label for a message.
- *
- * @param {AgentChatMessage} message Message record.
- * @returns {string} Avatar initials.
- */
-function avatarLabel(message) {
-	return authorName(message)
-		.split(/\s+/)
-		.filter(Boolean)
-		.slice(0, 2)
-		.map(firstCharacter)
-		.join('')
-		.toUpperCase() || 'AI';
-}
-
 /**
  * Resolves the timestamp label for a message.
  *
@@ -417,19 +410,27 @@ function toolStatusLabel(status) {
 }
 
 /**
- * Returns status indicator classes for a tool card.
+ * Returns the status pill tone for a tool part.
  *
  * @param {string} status Tool status.
- * @returns {string} Token-based class list.
+ * @returns {'neutral'|'info'|'success'|'danger'} Status pill tone.
  */
-function toolStatusClass(status) {
+function toolStatusTone(status) {
 	return {
-		queued: 'border-border bg-secondary text-muted-fg',
-		running: 'border-primary/35 bg-primary/10 text-primary',
-		complete: 'border-success/35 bg-success/10 text-success',
-		error: 'border-destructive/35 bg-destructive/10 text-destructive',
-		cancelled: 'border-border bg-muted text-muted-fg',
-	}[status] || 'border-border bg-secondary text-muted-fg';
+		running: 'info',
+		complete: 'success',
+		error: 'danger',
+	}[status] || 'neutral';
+}
+
+/**
+ * Resolves the avatar image for a message author.
+ *
+ * @param {AgentChatMessage} message Message record.
+ * @returns {string} Avatar URL.
+ */
+function avatarUrl(message) {
+	return (findAgentById(props.agents, message.agentId) || activeAgent.value)?.avatarUrl || '';
 }
 
 /**
@@ -489,139 +490,138 @@ function statusToneFor(status) {
 function trimText(value) {
 	return String(value || '').trim();
 }
-
-/**
- * Returns the first character from a word.
- *
- * @param {string} value Source word.
- * @returns {string} First character.
- */
-function firstCharacter(value) {
-	return value.charAt(0);
-}
 </script>
 
+
 <template>
 	<section
-		class="flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden rounded-lg border border-border bg-canvas text-canvas-fg shadow-sm"
+		class="flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden rounded-xl border border-border bg-canvas text-canvas-fg shadow-sm"
 		:aria-labelledby="titleId"
 	>
-		<header v-if="showHeader" class="flex min-h-16 shrink-0 items-center gap-3 border-b border-border bg-secondary/25 px-3 py-2 sm:px-4">
+		<header v-if="showHeader" class="flex h-14 shrink-0 items-center gap-2 border-b border-border/70 px-3 sm:px-4">
 			<slot name="header-leading" :conversation="conversation" :active-agent="activeAgent" />
 			<div class="min-w-0 flex-1">
 				<div class="flex min-w-0 items-center gap-2">
-					<h2 :id="titleId" class="truncate text-sm font-semibold text-canvas-fg">{{ conversationTitle }}</h2>
-					<DomStatusPill class="hidden sm:inline-flex" size="sm" :tone="statusTone">{{ streaming ? 'Streaming' : (conversation?.status || 'Idle') }}</DomStatusPill>
+					<h2 :id="titleId" class="truncate text-sm font-semibold tracking-tight text-canvas-fg">{{ conversationTitle }}</h2>
+					<DomStatusPill class="hidden shrink-0 capitalize sm:inline-flex" size="sm" :tone="statusTone" :pulse="streaming">{{ streaming ? 'Streaming' : (conversation?.status || 'Idle') }}</DomStatusPill>
 				</div>
-				<p class="mt-0.5 truncate text-xs text-muted-fg">{{ conversationSummary }}</p>
+				<p class="truncate text-xs text-muted-fg">{{ conversationSummary }}</p>
 			</div>
-			<div class="flex shrink-0 items-center gap-1">
-				<button
-					type="button"
-					class="rounded-full px-2.5 py-1 text-xs font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
-					:class="mode === 'text' ? 'bg-primary text-primary-fg' : 'text-muted-fg hover:bg-secondary hover:text-canvas-fg'"
-					:aria-pressed="mode === 'text'"
-					@click="setMode('text')"
-				>
-					Text
-				</button>
-				<button
-					type="button"
-					class="rounded-full px-2.5 py-1 text-xs font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
-					:class="mode === 'audio' ? 'bg-primary text-primary-fg' : 'text-muted-fg hover:bg-secondary hover:text-canvas-fg'"
-					:aria-pressed="mode === 'audio'"
-					@click="setMode('audio')"
-				>
-					Audio
-				</button>
+			<div class="flex shrink-0 items-center gap-1.5">
+				<DomToggleButtonGroup
+					:model-value="mode"
+					:options="modeOptions"
+					:chrome="false"
+					label="Input mode"
+					size="sm"
+					variant="switch"
+					@update:model-value="setMode"
+				/>
 				<slot name="header-actions" :conversation="conversation" :active-agent="activeAgent" :streaming="streaming" />
 			</div>
 		</header>
 
 		<div
 			ref="scroller"
-			class="min-h-0 flex-1 overflow-y-auto px-3 py-4 sm:px-5"
+			class="min-h-0 flex-1 overflow-y-auto"
 			@scroll.passive="updateScrollState"
 		>
-			<div v-if="loading" class="mx-auto flex min-h-full max-w-3xl flex-col justify-end gap-3">
-				<div v-for="index in 3" :key="index" class="h-24 animate-pulse rounded-lg border border-border bg-secondary/35"></div>
-			</div>
-
-			<slot v-else-if="!visibleMessages.length" name="empty">
-				<div class="flex min-h-full items-center justify-center">
-					<div class="max-w-sm text-center">
-						<div class="mx-auto grid size-12 place-items-center rounded-full bg-secondary text-muted-fg">
-							<svg viewBox="0 0 24 24" class="size-5" fill="none" aria-hidden="true">
-								<path d="M5 7h14M5 12h10M5 17h6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
-							</svg>
+			<div class="mx-auto flex min-h-full w-full flex-col px-4 py-6 sm:px-6" :style="columnStyle">
+				<div v-if="loading" class="mt-auto flex flex-col gap-8">
+					<div v-for="index in 2" :key="index" class="flex flex-col gap-8">
+						<DomSkeleton class="ml-auto h-10 w-2/5 rounded-2xl" />
+						<div class="flex gap-3">
+							<DomSkeleton variant="circle" width="2rem" height="2rem" class="shrink-0" />
+							<DomSkeleton class="flex-1" variant="text" :lines="3" />
 						</div>
-						<p class="mt-3 text-sm font-semibold text-canvas-fg">No messages yet</p>
-						<p class="mt-1 text-sm leading-6 text-muted-fg">{{ emptyText }}</p>
 					</div>
 				</div>
-			</slot>
 
-			<div v-else class="mx-auto flex max-w-5xl flex-col gap-5">
-				<article
-					v-for="message in visibleMessages"
-					:key="message.id"
-					class="flex min-w-0 gap-3"
-					:class="isUserMessage(message) ? 'justify-end' : 'justify-start'"
-				>
-					<div v-if="!isUserMessage(message)" class="mt-1 hidden size-8 shrink-0 place-items-center rounded-full border border-border bg-secondary text-xs font-semibold text-muted-fg sm:grid">
-						{{ avatarLabel(message) }}
+				<slot v-else-if="!visibleMessages.length" name="empty">
+					<div class="flex flex-1 items-center justify-center">
+						<DomEmptyState
+							class="w-full max-w-sm border-transparent bg-transparent"
+							size="sm"
+							title="No messages yet"
+							:description="emptyText"
+							icon="M7 8h10M7 12h6m-9 8 2.6-3H18a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v14Z"
+						/>
 					</div>
-
-					<slot name="message" :message="message" :active-agent="activeAgent" :parts="partsForMessage(message)">
-						<div
-							class="min-w-0"
-							:class="isUserMessage(message) ? 'flex justify-end' : 'flex justify-start'"
-							:style="messageWidthStyle"
-						>
+				</slot>
+
+				<div v-else class="flex flex-col gap-7">
+					<article
+						v-for="message in visibleMessages"
+						:key="message.id"
+						class="flex min-w-0 gap-3"
+						:class="isUserMessage(message) ? 'justify-end' : 'justify-start'"
+					>
+						<DomAvatar
+							v-if="!isUserMessage(message)"
+							class="mt-0.5 hidden sm:inline-grid"
+							size="sm"
+							shape="rounded"
+							:src="avatarUrl(message)"
+							:name="authorName(message)"
+						/>
+
+						<slot name="message" :message="message" :active-agent="activeAgent" :parts="partsForMessage(message)">
 							<div
-								class="min-w-0 rounded-lg border px-4 py-3 text-sm leading-6 shadow-sm"
-								:class="isUserMessage(message)
-									? 'border-primary/20 bg-primary text-primary-fg'
-									: 'border-border bg-canvas'"
+								class="flex min-w-0 flex-col"
+								:class="isUserMessage(message) ? 'max-w-[85%] items-end' : 'flex-1'"
 							>
-								<div class="mb-2 flex items-center justify-between gap-3 text-xs" :class="isUserMessage(message) ? 'text-primary-fg/80' : 'text-muted-fg'">
-									<span class="font-semibold">{{ authorName(message) }}</span>
-									<span v-if="messageTime(message)">{{ messageTime(message) }}</span>
+								<div v-if="!isUserMessage(message)" class="mb-1 flex h-6 items-center gap-2 text-xs">
+									<span class="font-semibold text-canvas-fg">{{ authorName(message) }}</span>
+									<span v-if="messageTime(message)" class="text-muted-fg">{{ messageTime(message) }}</span>
 								</div>
 
-								<div class="space-y-3">
+								<div
+									class="min-w-0 space-y-3 text-sm"
+									:class="isUserMessage(message)
+										? 'rounded-2xl rounded-br-md bg-secondary px-4 py-2.5 leading-6 text-secondary-fg'
+										: 'leading-7 text-canvas-fg'"
+								>
 									<template v-for="(part, index) in partsForMessage(message)" :key="part.id || `${message.id}-${index}`">
-										<div v-if="part.type === 'text'" class="space-y-2">
+										<div v-if="part.type === 'text'" class="space-y-3">
 											<p v-for="paragraph in textParagraphs(part.text)" :key="paragraph" class="whitespace-pre-wrap">{{ paragraph }}</p>
 										</div>
 
 										<details
 											v-else-if="part.type === 'reasoning' && showReasoning"
-											class="rounded-md border border-border bg-secondary/35 px-3 py-2"
+											class="group/reasoning"
 											:open="part.open"
 										>
-											<summary class="cursor-pointer text-xs font-semibold text-muted-fg">Reasoning summary</summary>
-											<p class="mt-2 whitespace-pre-wrap text-xs leading-5 text-muted-fg">{{ part.text }}</p>
+											<summary class="inline-flex cursor-pointer list-none items-center gap-1.5 rounded-md text-xs font-medium text-muted-fg transition hover:text-canvas-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 [&::-webkit-details-marker]:hidden">
+												<svg viewBox="0 0 24 24" class="size-3.5" fill="none" aria-hidden="true">
+													<path d="M12 3v3m0 12v3M3 12h3m12 0h3M6.3 6.3l2.1 2.1m7.2 7.2 2.1 2.1m0-11.4-2.1 2.1m-7.2 7.2-2.1 2.1" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
+												</svg>
+												Reasoning
+												<svg viewBox="0 0 24 24" class="size-3.5 transition group-open/reasoning:rotate-90" fill="none" aria-hidden="true">
+													<path d="m9 6 6 6-6 6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
+												</svg>
+											</summary>
+											<p class="mt-2 whitespace-pre-wrap border-l-2 border-border pl-3 text-xs leading-5 text-muted-fg">{{ part.text }}</p>
 										</details>
 
-										<div v-else-if="part.type === 'audio'" class="rounded-md border border-border bg-secondary/35 p-3">
-											<div class="flex items-center gap-3">
-												<div class="grid size-8 place-items-center rounded-full bg-primary/10 text-primary">
-													<svg viewBox="0 0 24 24" class="size-4" fill="none" aria-hidden="true">
-														<path d="M12 5v14M7 9v6M17 9v6M4 11v2M20 11v2" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
-													</svg>
-												</div>
-												<div class="min-w-0 flex-1">
-													<p class="text-xs font-semibold text-canvas-fg">{{ part.label || 'Audio message' }}</p>
-													<div class="mt-2 flex h-6 items-end gap-1" aria-hidden="true">
-														<span v-for="bar in 18" :key="bar" class="w-1 rounded-full bg-primary/45" :style="{ height: `${8 + ((bar * 7) % 18)}px` }"></span>
-													</div>
+										<div v-else-if="part.type === 'audio'" class="flex items-center gap-3 rounded-xl bg-secondary/70 p-2.5 pr-4 text-secondary-fg">
+											<span class="grid size-8 shrink-0 place-items-center rounded-full bg-primary text-primary-fg">
+												<svg viewBox="0 0 24 24" class="size-4" fill="none" aria-hidden="true">
+													<path d="M12 4a3 3 0 0 0-3 3v5a3 3 0 1 0 6 0V7a3 3 0 0 0-3-3Zm-6 8a6 6 0 0 0 12 0m-6 6v2" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
+												</svg>
+											</span>
+											<div class="min-w-0 flex-1">
+												<p class="text-xs font-medium">{{ part.label || 'Audio message' }}</p>
+												<div class="mt-1 flex h-5 items-center gap-0.5" aria-hidden="true">
+													<span v-for="bar in 28" :key="bar" class="w-0.5 rounded-full bg-current opacity-40" :style="{ height: `${4 + ((bar * 7) % 16)}px` }"></span>
 												</div>
+												<p v-if="part.text" class="mt-1 text-xs leading-5 text-muted-fg">{{ part.text }}</p>
 											</div>
-											<p v-if="part.text" class="mt-2 text-xs leading-5 text-muted-fg">{{ part.text }}</p>
 										</div>
 
-										<div v-else-if="part.type === 'tool-call' || part.type === 'tool-result'" class="rounded-md border border-border bg-secondary/25 p-3">
+										<div
+											v-else-if="part.type === 'tool-call' || part.type === 'tool-result'"
+											class="overflow-hidden rounded-xl border border-border bg-canvas text-canvas-fg shadow-xs"
+										>
 											<slot
 												name="tool"
 												:tool="part"
@@ -637,50 +637,59 @@ function firstCharacter(value) {
 													:result="part.result"
 													@action="emitToolAction($event, part, message)"
 												/>
-												<div v-else class="space-y-3">
-													<div class="flex items-start justify-between gap-3">
-														<div class="min-w-0">
-															<p class="truncate text-sm font-semibold text-canvas-fg">{{ part.label || part.name || 'Tool call' }}</p>
-															<p class="mt-0.5 text-xs text-muted-fg">{{ part.name || 'tool' }}</p>
-														</div>
-														<span class="shrink-0 rounded-full border px-2 py-0.5 text-[11px] font-medium" :class="toolStatusClass(part.status)">
-															{{ toolStatusLabel(part.status) }}
+												<details v-else class="group/tool">
+													<summary class="flex cursor-pointer list-none items-center gap-3 px-3 py-2.5 transition hover:bg-secondary/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/50 [&::-webkit-details-marker]:hidden">
+														<span class="grid size-7 shrink-0 place-items-center rounded-lg bg-secondary text-muted-fg">
+															<svg viewBox="0 0 24 24" class="size-3.5" fill="none" aria-hidden="true">
+																<path d="M14.7 6.3a4 4 0 0 0-5.4 5.2L4 16.8V20h3.2l5.3-5.3a4 4 0 0 0 5.2-5.4l-2.5 2.5-2.3-.7-.7-2.3 2.5-2.5Z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round" />
+															</svg>
 														</span>
-													</div>
-													<div class="grid gap-3 md:grid-cols-2">
-														<div>
-															<p class="mb-1 text-[11px] font-semibold uppercase text-muted-fg">Arguments</p>
-															<pre class="max-h-40 overflow-auto rounded-md border border-border bg-canvas p-2 text-xs leading-5 text-muted-fg">{{ formatJson(part.args) }}</pre>
+														<span class="min-w-0 flex-1">
+															<span class="block truncate text-sm font-medium leading-5">{{ part.label || part.name || 'Tool call' }}</span>
+															<span class="block truncate font-mono text-[11px] leading-4 text-muted-fg">{{ part.name || 'tool' }}</span>
+														</span>
+														<DomStatusPill class="shrink-0" size="sm" :tone="toolStatusTone(part.status)" :pulse="part.status === 'running'">{{ toolStatusLabel(part.status) }}</DomStatusPill>
+														<svg viewBox="0 0 24 24" class="size-4 shrink-0 text-muted-fg transition group-open/tool:rotate-90" fill="none" aria-hidden="true">
+															<path d="m9 6 6 6-6 6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
+														</svg>
+													</summary>
+													<div class="grid gap-3 border-t border-border bg-secondary/30 p-3 md:grid-cols-2">
+														<div class="min-w-0">
+															<p class="mb-1.5 text-[11px] font-medium uppercase tracking-wide text-muted-fg">Arguments</p>
+															<pre class="max-h-40 overflow-auto rounded-lg bg-canvas p-2.5 font-mono text-xs leading-5 text-muted-fg ring-1 ring-border">{{ formatJson(part.args) }}</pre>
 														</div>
-														<div>
-															<p class="mb-1 text-[11px] font-semibold uppercase text-muted-fg">Result</p>
-															<pre class="max-h-40 overflow-auto rounded-md border border-border bg-canvas p-2 text-xs leading-5 text-muted-fg">{{ formatJson(part.result) }}</pre>
+														<div class="min-w-0">
+															<p class="mb-1.5 text-[11px] font-medium uppercase tracking-wide text-muted-fg">Result</p>
+															<pre class="max-h-40 overflow-auto rounded-lg bg-canvas p-2.5 font-mono text-xs leading-5 text-muted-fg ring-1 ring-border">{{ formatJson(part.result) }}</pre>
 														</div>
 													</div>
-												</div>
+												</details>
 											</slot>
 										</div>
 
-										<div v-else-if="part.type === 'handoff'" class="rounded-md border border-warning/35 bg-warning/10 p-3 text-warning">
-											<p class="text-xs font-semibold">{{ part.label || 'Agent handoff' }}</p>
-											<p class="mt-1 text-xs leading-5">{{ part.text }}</p>
+										<div v-else-if="part.type === 'handoff'" class="flex gap-2.5 rounded-xl border border-warning/30 bg-warning/10 px-3 py-2.5">
+											<svg viewBox="0 0 24 24" class="mt-0.5 size-4 shrink-0 text-warning" fill="none" aria-hidden="true">
+												<path d="M7 7h11m0 0-3-3m3 3-3 3M17 17H6m0 0 3-3m-3 3 3 3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
+											</svg>
+											<div class="min-w-0">
+												<p class="text-xs font-semibold text-canvas-fg">{{ part.label || 'Agent handoff' }}</p>
+												<p class="mt-0.5 text-xs leading-5 text-muted-fg">{{ part.text }}</p>
+											</div>
 										</div>
 									</template>
 
-									<div v-if="isStreamingMessage(message)" class="flex items-center gap-1.5 pt-1 text-muted-fg" aria-label="Assistant is typing">
+									<div v-if="isStreamingMessage(message)" class="flex h-6 items-center gap-1 text-muted-fg" role="status" aria-label="Assistant is typing">
 										<span class="size-1.5 animate-pulse rounded-full bg-current"></span>
-										<span class="size-1.5 animate-pulse rounded-full bg-current [animation-delay:120ms]"></span>
-										<span class="size-1.5 animate-pulse rounded-full bg-current [animation-delay:240ms]"></span>
+										<span class="size-1.5 animate-pulse rounded-full bg-current [animation-delay:150ms]"></span>
+										<span class="size-1.5 animate-pulse rounded-full bg-current [animation-delay:300ms]"></span>
 									</div>
 								</div>
-							</div>
-						</div>
-					</slot>
 
-					<div v-if="isUserMessage(message)" class="mt-1 hidden size-8 shrink-0 place-items-center rounded-full border border-primary/25 bg-primary/10 text-xs font-semibold text-primary sm:grid">
-						{{ avatarLabel(message) }}
-					</div>
-				</article>
+								<span v-if="isUserMessage(message) && messageTime(message)" class="mt-1 px-1 text-[11px] text-muted-fg">{{ messageTime(message) }}</span>
+							</div>
+						</slot>
+					</article>
+				</div>
 			</div>
 		</div>
 
@@ -695,16 +704,16 @@ function firstCharacter(value) {
 			/>
 		</div>
 
-		<footer v-if="showFooter" class="shrink-0 border-t border-border bg-canvas p-3">
+		<footer v-if="showFooter" class="relative shrink-0 px-3 pb-3 sm:px-4 sm:pb-4 before:pointer-events-none before:absolute before:inset-x-0 before:bottom-full before:h-6 before:bg-linear-to-t before:from-canvas before:to-transparent">
 			<slot name="footer" :value="modelValue" :mode="mode" :submit="submitComposer" :set-mode="setMode">
-				<div>
+				<div class="mx-auto w-full [--skin-input-shadow:var(--shadow-md)] [&_.skin-input]:rounded-2xl" :style="columnStyle">
 					<DomTextareaComposer
 						:model-value="modelValue"
 						:placeholder="composerPlaceholder"
 						:disabled="disabled || streaming"
 						:submit-disabled="!canSubmit"
 						:show-submit="!streaming"
-						:rows="2"
+						:rows="1"
 						:max-rows="8"
 						:chrome="false"
 						@update:model-value="updateComposer"
@@ -727,9 +736,9 @@ function firstCharacter(value) {
 							/>
 						</template>
 					</DomTextareaComposer>
-					<div class="mt-2 flex items-center justify-between gap-2 px-1 text-[11px] text-muted-fg">
-						<span>{{ mode === 'audio' ? 'Audio handoff ready' : 'Enter to send, Shift + Enter for a new line' }}</span>
-						<span v-if="activeAgent">{{ activeAgent.model }}</span>
+					<div class="mt-2 flex items-center justify-between gap-2 px-2 text-[11px] text-muted-fg">
+						<span class="hidden truncate sm:inline">{{ mode === 'audio' ? 'Audio handoff ready' : 'Enter to send · Shift + Enter for a new line' }}</span>
+						<span v-if="activeAgent?.model" class="ml-auto shrink-0 whitespace-nowrap font-mono">{{ activeAgent.model }}</span>
 					</div>
 				</div>
 			</slot>

package/src/pages/data/agent-chat/DomAgentConversationList.vue

@@ -46,14 +46,15 @@ export const agentConversationListProps = {
 <script setup>
 import { computed, useId } from 'vue';
 import DomIconButton from '../../components/icon-button/DomIconButton.vue';
-import DomStatusPill from '../../visual/status-pill/DomStatusPill.vue';
+import DomAvatar from '../../visual/avatar/DomAvatar.vue';
+import DomSkeleton from '../../visual/skeleton/DomSkeleton.vue';
 
 defineOptions({
 	__doc: {
 		nav: { section: 'ai' },
 		name: 'Agent conversation list',
 		tag: '<DomAgentConversationList>',
-		description: 'A reusable AI conversation navigation list with search, agent labels, unread counts, status pills, and active-thread selection.',
+		description: 'A reusable AI conversation navigation list with search, agent labels, unread counts, status indicators, and active-thread selection.',
 		icon: 'M5 6h14M5 12h14M5 18h8',
 		events: [
 			{ name: 'update:search', payload: 'string', description: 'Fired when the sidebar search changes.' },
@@ -148,20 +149,13 @@ function conversationSummary(conversation) {
 }
 
 /**
- * Returns a compact label for the agent avatar.
+ * Returns the agent name used for a conversation avatar.
  *
  * @param {Record<string, unknown>} conversation Conversation summary.
- * @returns {string} Initials.
+ * @returns {string} Agent name.
  */
-function agentInitials(conversation) {
-	const name = agentForConversation(conversation)?.name || 'AI';
-	return name
-		.split(/\s+/)
-		.filter(Boolean)
-		.slice(0, 2)
-		.map(firstCharacter)
-		.join('')
-		.toUpperCase() || 'AI';
+function agentName(conversation) {
+	return agentForConversation(conversation)?.name || 'AI';
 }
 
 /**
@@ -182,18 +176,18 @@ function updatedLabel(conversation) {
 }
 
 /**
- * Resolves a status pill tone for a conversation.
+ * Resolves the status dot class for a conversation.
  *
  * @param {Record<string, unknown>} conversation Conversation summary.
- * @returns {'neutral'|'info'|'success'|'warning'|'danger'} Status tone.
+ * @returns {string} Token-based dot classes.
  */
-function statusTone(conversation) {
+function statusDotClass(conversation) {
 	return {
-		streaming: 'info',
-		waiting: 'warning',
-		error: 'danger',
-		complete: 'success',
-	}[conversation.status] || 'neutral';
+		streaming: 'bg-primary animate-pulse',
+		waiting: 'bg-warning',
+		error: 'bg-destructive',
+		complete: 'bg-success',
+	}[conversation.status] || 'bg-muted-fg/50';
 }
 
 /**
@@ -218,37 +212,27 @@ function conversationMatchesQuery(conversation, query) {
 		.toLowerCase()
 		.includes(query);
 }
-
-/**
- * Returns the first character from a word.
- *
- * @param {string} value Source word.
- * @returns {string} First character.
- */
-function firstCharacter(value) {
-	return value.charAt(0);
-}
 </script>
 
 <template>
 	<aside class="flex h-full min-h-0 w-full min-w-0 flex-col bg-canvas text-canvas-fg">
-		<header class="shrink-0 border-b border-border bg-secondary/25 p-3">
-			<div class="flex items-center justify-between gap-3">
-				<h2 class="truncate text-sm font-semibold text-canvas-fg">{{ title }}</h2>
+		<header class="shrink-0 px-3 pb-2">
+			<div class="flex h-14 items-center justify-between gap-3 px-1">
+				<h2 class="truncate text-sm font-semibold tracking-tight text-canvas-fg">{{ title }}</h2>
 				<div class="flex shrink-0 items-center gap-1">
 					<slot name="actions" :conversations="conversations" />
 					<DomIconButton
 						v-if="showNewButton"
 						label="New conversation"
 						size="sm"
-						variant="secondary"
+						variant="ghost"
 						icon="M12 5v14M5 12h14"
 						@click="createConversation"
 					/>
 				</div>
 			</div>
 			<label :for="searchId" class="sr-only">Search conversations</label>
-			<div class="mt-3 flex items-center gap-2 rounded-md border border-border bg-canvas px-3 py-2">
+			<div class="skin-input flex items-center gap-2 px-2.5 py-1.5 focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30">
 				<svg viewBox="0 0 24 24" class="size-4 shrink-0 text-muted-fg" fill="none" aria-hidden="true">
 					<path d="M11 5a6 6 0 1 0 0 12 6 6 0 0 0 0-12Zm4.5 10.5L20 20" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
 				</svg>
@@ -263,18 +247,19 @@ function firstCharacter(value) {
 			</div>
 		</header>
 
-		<div class="min-h-0 flex-1 overflow-y-auto p-2">
-			<div v-if="loading" class="space-y-2">
-				<div v-for="index in 5" :key="index" class="h-20 animate-pulse rounded-lg border border-border bg-secondary/35"></div>
+		<div class="min-h-0 flex-1 overflow-y-auto px-2 pb-2">
+			<div v-if="loading" class="space-y-1">
+				<div v-for="index in 5" :key="index" class="flex gap-2.5 px-2.5 py-2.5">
+					<DomSkeleton variant="circle" width="2rem" height="2rem" class="shrink-0" />
+					<DomSkeleton class="flex-1" variant="text" :lines="2" />
+				</div>
 			</div>
 
 			<slot v-else-if="!filteredConversations.length" name="empty">
-				<div class="grid min-h-40 place-items-center rounded-lg border border-dashed border-border p-4 text-center">
-					<p class="text-sm leading-6 text-muted-fg">{{ emptyText }}</p>
-				</div>
+				<p class="px-3 py-8 text-center text-sm leading-6 text-muted-fg">{{ emptyText }}</p>
 			</slot>
 
-			<div v-else class="space-y-1">
+			<div v-else class="space-y-0.5">
 				<slot
 					v-for="conversation in filteredConversations"
 					:key="conversation.id"
@@ -285,27 +270,38 @@ function firstCharacter(value) {
 				>
 					<button
 						type="button"
-						class="w-full rounded-lg border p-3 text-left transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
-						:class="isActiveConversation(conversation)
-							? 'border-primary/40 bg-primary/10 shadow-sm'
-							: 'border-transparent hover:border-border hover:bg-secondary/45'"
+						class="w-full rounded-lg px-2.5 py-2.5 text-left transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+						:class="isActiveConversation(conversation) ? 'bg-secondary' : 'hover:bg-secondary/50'"
+						:aria-current="isActiveConversation(conversation) ? 'true' : undefined"
 						@click="selectConversation(conversation)"
 					>
-						<div class="flex items-start gap-3">
-							<div class="grid size-9 shrink-0 place-items-center rounded-full border border-border bg-canvas text-xs font-semibold text-muted-fg">
-								{{ agentInitials(conversation) }}
-							</div>
+						<div class="flex items-start gap-2.5">
+							<span class="relative shrink-0">
+								<DomAvatar
+									size="sm"
+									shape="rounded"
+									:src="agentForConversation(conversation)?.avatarUrl || ''"
+									:name="agentName(conversation)"
+								/>
+								<span
+									class="absolute -bottom-0.5 -right-0.5 size-2.5 rounded-full ring-2"
+									:class="[statusDotClass(conversation), isActiveConversation(conversation) ? 'ring-secondary' : 'ring-canvas']"
+									:title="conversation.status || 'idle'"
+									aria-hidden="true"
+								></span>
+							</span>
 							<div class="min-w-0 flex-1">
-								<div class="flex min-w-0 items-start justify-between gap-2">
-									<p class="truncate text-sm font-semibold text-canvas-fg">{{ conversationTitle(conversation) }}</p>
+								<div class="flex min-w-0 items-baseline justify-between gap-2">
+									<p class="truncate text-sm font-medium text-canvas-fg">{{ conversationTitle(conversation) }}</p>
 									<span class="shrink-0 text-[11px] text-muted-fg">{{ updatedLabel(conversation) }}</span>
 								</div>
-								<p class="mt-1 line-clamp-2 text-xs leading-5 text-muted-fg">{{ conversationSummary(conversation) }}</p>
-								<div class="mt-2 flex items-center justify-between gap-2">
-									<DomStatusPill size="sm" :tone="statusTone(conversation)" variant="soft">{{ conversation.status || 'idle' }}</DomStatusPill>
+								<div class="mt-0.5 flex min-w-0 items-center gap-2">
+									<p class="min-w-0 flex-1 truncate text-xs leading-5 text-muted-fg">
+										<span class="sr-only">{{ conversation.status || 'idle' }}. </span>{{ conversationSummary(conversation) }}
+									</p>
 									<span
 										v-if="conversation.unreadCount"
-										class="grid min-w-5 place-items-center rounded-full bg-primary px-1.5 py-0.5 text-[11px] font-semibold text-primary-fg"
+										class="grid h-4.5 min-w-4.5 shrink-0 place-items-center rounded-full bg-primary px-1 text-[10px] font-semibold text-primary-fg"
 									>
 										{{ conversation.unreadCount }}
 									</span>

package/src/pages/data/month-calendar/DomMonthCalendar.vue

@@ -264,8 +264,8 @@ export const monthCalendarProps = {
 		 * @param {string} value Requested indicator style.
 		 * @returns {boolean} Whether the indicator is supported.
 		 */
-		validator: (value) => ['cell', 'circle', 'none'].includes(value),
-		_edit: { group: 'Styling', options: ['cell', 'circle', 'none'], description: 'Highlight today with a cell outline, a coloured circle behind the date, or no visual indicator.' },
+		validator: (value) => ['cell', 'circle', 'both', 'none'].includes(value),
+		_edit: { group: 'Styling', options: ['cell', 'circle', 'both', 'none'], description: 'Highlight today with a cell outline, a coloured circle behind the date, both, or no visual indicator.' },
 	},
 	/**
 	 * @type {MonthCalendarDayClass}
@@ -273,7 +273,7 @@ export const monthCalendarProps = {
 	todayDateClass: {
 		type: [String, Array, Object, Function],
 		default: 'bg-primary text-primary-fg',
-		_edit: { group: 'Styling', description: 'Classes for today’s date circle. Replaces the default primary background and foreground colours when todayIndicator is circle.' },
+		_edit: { group: 'Styling', description: 'Classes for today’s date circle. Replaces the default primary background and foreground colours when todayIndicator is circle or both.' },
 	},
 	/**
 	 * @type {MonthCalendarDayClass}
@@ -1632,7 +1632,7 @@ function onDayClick(cell, event) {
 							v-if="hasRowRail"
 							role="rowheader"
 							:aria-label="rowHeaderLabelFor(week)"
-							class="dom-month-calendar__row-rail flex gap-3 px-3 py-2 text-xs font-semibold uppercase tracking-wide text-muted-fg"
+							class="dom-month-calendar__row-rail flex gap-3 px-3 py-[var(--dom-month-calendar-row-rail-padding)] text-xs font-semibold uppercase tracking-wide text-muted-fg"
 							:class="[
 								week.index > 0 && 'border-t border-border',
 								section.continuous ? 'bg-canvas' : 'bg-secondary/35',
@@ -1648,7 +1648,7 @@ function onDayClick(cell, event) {
 									{{ label }}
 								</span>
 							</div>
-							<span v-if="showWeekNumbers" class="text-base leading-none tabular-nums">{{ week.weekNumber }}</span>
+							<span v-if="showWeekNumbers" class="order-[var(--dom-month-calendar-week-number-order)] inline-flex size-7 shrink-0 items-center justify-center text-base leading-none tabular-nums">{{ week.weekNumber }}</span>
 						</div>
 						<component
 							:is="clickable ? 'button' : 'div'"
@@ -1681,7 +1681,7 @@ function onDayClick(cell, event) {
 								clickable && !cell.disabled && hoverableDays && 'hover:bg-secondary/50',
 								clickable && cell.disabled && 'cursor-not-allowed opacity-55',
 								!clickable && 'cursor-default',
-								cell.today && !cell.hidden && todayIndicator === 'cell' && 'ring-2 ring-inset ring-ring/40',
+								cell.today && !cell.hidden && (todayIndicator === 'cell' || todayIndicator === 'both') && 'ring-2 ring-inset ring-ring/40',
 								dayClassFor(cell),
 								dragAndDrop && dragState.active && canDropOnCell(cell) && !isDropTarget(cell) && 'bg-primary/5',
 								dragAndDrop && isDropTarget(cell) && 'bg-primary/10 ring-2 ring-inset ring-ring/60',
@@ -1698,10 +1698,9 @@ function onDayClick(cell, event) {
 							<template v-if="!cell.hidden">
 								<div class="flex items-center justify-between gap-2">
 									<span
-										class="text-base font-bold leading-none tabular-nums"
+										class="inline-flex size-7 shrink-0 items-center justify-center rounded-full text-base font-bold leading-none tabular-nums"
 										:class="[
-											todayIndicator === 'circle' && 'inline-flex size-7 shrink-0 items-center justify-center rounded-full',
-											cell.today && todayIndicator === 'circle' && resolveDayClass(todayDateClass, cell),
+											cell.today && (todayIndicator === 'circle' || todayIndicator === 'both') && resolveDayClass(todayDateClass, cell),
 										]"
 									>{{ cell.day }}</span>
 									<span v-if="showDayNames" class="text-base lowercase leading-none tabular-nums">{{ cell.weekday }}</span>

package/src/pages/lib/vue/index.d.ts

@@ -2644,11 +2644,11 @@ export interface DomMonthCalendarProps {
 	 */
 	showDayNames?: boolean;
 	/**
-	 * Highlight today with a cell outline, a coloured circle behind the date, or no visual indicator.
+	 * Highlight today with a cell outline, a coloured circle behind the date, both, or no visual indicator.
 	 */
-	todayIndicator?: "cell" | "circle" | "none";
+	todayIndicator?: "cell" | "circle" | "both" | "none";
 	/**
-	 * Classes for today’s date circle. Replaces the default primary background and foreground colours when todayIndicator is circle.
+	 * Classes for today’s date circle. Replaces the default primary background and foreground colours when todayIndicator is circle or both.
 	 */
 	todayDateClass?: string | Array<unknown> | Record<string, unknown> | ((...args: Array<unknown>) => unknown);
 	/**

package/src/tailwind.css

@@ -14,6 +14,8 @@
 	--dom-month-calendar-row-rail-direction: row;
 	--dom-month-calendar-row-rail-justify: space-between;
 	--dom-month-calendar-row-rail-min-height: 2.5rem;
+	--dom-month-calendar-row-rail-padding: 0.5rem;
+	--dom-month-calendar-week-number-order: 0;
 	--dom-month-calendar-week-columns: minmax(0, 1fr);
 }
 
@@ -33,6 +35,8 @@
 		--dom-month-calendar-row-rail-direction: column;
 		--dom-month-calendar-row-rail-justify: flex-start;
 		--dom-month-calendar-row-rail-min-height: 11rem;
+		--dom-month-calendar-row-rail-padding: 0.75rem;
+		--dom-month-calendar-week-number-order: -1;
 		--dom-month-calendar-week-columns: var(--dom-month-calendar-wide-week-columns);
 		--dom-month-calendar-wide-border-left-width: 1px;
 		--dom-month-calendar-wide-border-top-width: 0;
@@ -109,7 +113,7 @@
 	}
 
 	.skin-control {
-		background-color: var(--skin-control-bg, var(--secondary));
+		background-color: var(--skin-control-bg, var(--canvas));
 		background-image: var(--skin-control-bg-image, none);
 		border-color: var(--skin-control-border, var(--border));
 		border-style: var(--skin-control-border-style, solid);

package/src/theme.css

@@ -11,6 +11,8 @@
 	--shadow-lg: 0 8px 20px -6px rgb(15 23 42 / 0.16), 0 2px 6px -2px rgb(15 23 42 / 0.08);
 	--shadow-xl: 0 18px 44px -18px rgb(15 23 42 / 0.24), 0 8px 18px -12px rgb(15 23 42 / 0.16);
 	--shadow-2xl: 0 24px 60px -18px rgb(15 23 42 / 0.24), 0 8px 20px -10px rgb(15 23 42 / 0.14);
+	--dom-command-palette-background: color-mix(in oklch, var(--canvas) 68%, transparent);
+	--dom-command-palette-shadow: 0 40px 100px -24px rgb(15 23 42 / 0.3), 0 16px 40px -20px rgb(15 23 42 / 0.2);
 	--chart-1: oklch(0.55 0.19 257);
 	--chart-2: oklch(0.58 0.13 175);
 	--chart-3: oklch(0.65 0.16 65);
@@ -45,6 +47,8 @@
 	--shadow-lg: 0 1px 0 0 rgb(255 255 255 / 0.05) inset, 0 16px 34px -18px rgb(0 0 0 / 0.58), 0 5px 12px -8px rgb(0 0 0 / 0.5);
 	--shadow-xl: 0 1px 0 0 rgb(255 255 255 / 0.05) inset, 0 24px 52px -24px rgb(0 0 0 / 0.68), 0 10px 22px -14px rgb(0 0 0 / 0.56);
 	--shadow-2xl: 0 1px 0 0 rgb(255 255 255 / 0.06) inset, 0 34px 76px -30px rgb(0 0 0 / 0.72), 0 16px 34px -20px rgb(0 0 0 / 0.58);
+	--dom-command-palette-background: color-mix(in oklch, var(--canvas) 68%, transparent);
+	--dom-command-palette-shadow: 0 40px 100px -24px rgb(0 0 0 / 0.78), 0 16px 40px -20px rgb(0 0 0 / 0.62);
 	--chart-1: oklch(0.72 0.15 257);
 	--chart-2: oklch(0.75 0.13 175);
 	--chart-3: oklch(0.8 0.15 75);