diff --git a/internal/web/dist/index.html b/internal/web/dist/index.html
index 5b73fa5..6aece25 100644
--- a/internal/web/dist/index.html
+++ b/internal/web/dist/index.html
@@ -11,30 +11,30 @@
 		<link rel="preconnect" href="https://fonts.googleapis.com">
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 		<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Instrument+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
-		<link href="/_app/immutable/entry/start.BTpC5eSl.js" rel="modulepreload">
-		<link href="/_app/immutable/chunks/BDDnoQ_7.js" rel="modulepreload">
+		<link href="/_app/immutable/entry/start.X5wzyl3b.js" rel="modulepreload">
+		<link href="/_app/immutable/chunks/CPFJ4jrM.js" rel="modulepreload">
 		<link href="/_app/immutable/chunks/BjgrqnN-.js" rel="modulepreload">
-		<link href="/_app/immutable/chunks/DFRGYO_X.js" rel="modulepreload">
-		<link href="/_app/immutable/chunks/0x2jFCf0.js" rel="modulepreload">
-		<link href="/_app/immutable/chunks/C3nS3byM.js" rel="modulepreload">
-		<link href="/_app/immutable/chunks/C1Y8Vas-.js" rel="modulepreload">
-		<link href="/_app/immutable/chunks/Bs4ZECIt.js" rel="modulepreload">
-		<link href="/_app/immutable/entry/app.CH8Eo5Dd.js" rel="modulepreload">
+		<link href="/_app/immutable/chunks/D2RS6Hlp.js" rel="modulepreload">
+		<link href="/_app/immutable/chunks/C-40UA0L.js" rel="modulepreload">
+		<link href="/_app/immutable/chunks/4Fzv7G3k.js" rel="modulepreload">
+		<link href="/_app/immutable/chunks/C0W-VSVk.js" rel="modulepreload">
+		<link href="/_app/immutable/chunks/ChDFVqbV.js" rel="modulepreload">
+		<link href="/_app/immutable/entry/app.DrjvX3b5.js" rel="modulepreload">
 		
 	</head>
 	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">
 			<script>
 				{
-					__sveltekit_vfgq9e = {
+					__sveltekit_fae453 = {
 						base: ""
 					};
 
 					const element = document.currentScript.parentElement;
 
 					Promise.all([
-						import("/_app/immutable/entry/start.BTpC5eSl.js"),
-						import("/_app/immutable/entry/app.CH8Eo5Dd.js")
+						import("/_app/immutable/entry/start.X5wzyl3b.js"),
+						import("/_app/immutable/entry/app.DrjvX3b5.js")
 					]).then(([kit, app]) => {
 						kit.start(app, element);
 					});
diff --git a/web/src/lib/components/Sidebar.svelte b/web/src/lib/components/Sidebar.svelte
index b36ed58..b4aa27c 100644
--- a/web/src/lib/components/Sidebar.svelte
+++ b/web/src/lib/components/Sidebar.svelte
@@ -55,6 +55,16 @@
 		return count > 99 ? '99+' : String(count);
 	}
 
+	// Filter DM list: only show human agents + AI agents with unread DMs.
+	// This hides agent-to-agent internal conversations from the sidebar.
+	let dmAgentList = $derived(
+		agentList.filter(agent => {
+			if (agent.type !== 'ai') return true;
+			const unread = $notifications.dms.get(agent.name) ?? 0;
+			return unread > 0;
+		})
+	);
+
 	const adminLinks = [
 		{ href: '/agents', label: 'Agents' },
 		{ href: '/settings', label: 'Settings' }
@@ -207,10 +217,10 @@
 			</button>
 			{#if dmsExpanded}
 				<div class="mt-0.5">
-					{#if agentList.length === 0}
+					{#if dmAgentList.length === 0}
 						<p class="px-3 py-1 text-xs text-text-secondary italic">No agents</p>
 					{:else}
-						{#each agentList as agent}
+						{#each dmAgentList as agent}
 							{@const dmUnread = $notifications.dms.get(agent.name) ?? 0}
 							<a
 								href="/dm/{agent.name}"
diff --git a/web/src/routes/dm/[name]/+page.svelte b/web/src/routes/dm/[name]/+page.svelte
index 945fe63..5445719 100644
--- a/web/src/routes/dm/[name]/+page.svelte
+++ b/web/src/routes/dm/[name]/+page.svelte
@@ -4,6 +4,8 @@
 	import { openThread, closeThread } from '$lib/stores/thread';
 	import { notifications } from '$lib/stores/notifications';
 	import MessageBody from '$lib/components/MessageBody.svelte';
+	import WorkflowBadge from '$lib/components/WorkflowBadge.svelte';
+	import ReactionPills from '$lib/components/ReactionPills.svelte';
 
 	let peerAgent = $derived($page.params.name);
 	let peer = $state<any>(null);
@@ -246,6 +248,10 @@
 										{/if}
 									</div>
 									<div class="text-sm text-text-primary/90 leading-relaxed"><MessageBody body={msg.body} /></div>
+									{#if msg.workflow_state}
+										<WorkflowBadge state={msg.workflow_state} />
+									{/if}
+									<ReactionPills reactions={msg.reactions ?? []} messageId={msg.id} />
 									{#if msg.reply_count > 0}
 										<button
 											class="mt-1 flex items-center gap-1 text-xs text-accent-blue hover:underline"