diff --git a/packages/chrome-extension/src/background.ts b/packages/chrome-extension/src/background.ts
index 0e9e326f..bffcbd27 100644
--- a/packages/chrome-extension/src/background.ts
+++ b/packages/chrome-extension/src/background.ts
@@ -39,6 +39,27 @@ chrome.debugger.onDetach.addListener((source) => {
   }
 });
 
+// Auto-dismiss beforeunload dialogs so agent navigation isn't blocked.
+// Regular dialogs (alert/confirm/prompt) are left for the agent to handle
+// via handle_dialog, but a notification event is sent.
+chrome.debugger.onEvent.addListener((source, method, params) => {
+  if (method !== 'Page.javascriptDialogOpening' || !source.tabId) return;
+  const p = params as { type?: string; message?: string; url?: string };
+
+  if (p.type === 'beforeunload') {
+    chrome.debugger.sendCommand(source, 'Page.handleJavaScriptDialog', { accept: true })
+      .catch(() => { /* tab may have closed */ });
+    console.log(`[Markus] Auto-dismissed beforeunload dialog on tab ${source.tabId}`);
+    return;
+  }
+
+  const pageId = pm.peekPageId(source.tabId);
+  client.send({
+    event: 'dialog_opened',
+    data: { tabId: source.tabId, pageId, type: p.type, message: p.message },
+  });
+});
+
 // Handle popup status queries
 chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
   if (msg.type === 'getStatus') {
diff --git a/packages/web-ui/src/components/ChatTeamSidebar.tsx b/packages/web-ui/src/components/ChatTeamSidebar.tsx
index 4a3fe263..bf428f95 100644
--- a/packages/web-ui/src/components/ChatTeamSidebar.tsx
+++ b/packages/web-ui/src/components/ChatTeamSidebar.tsx
@@ -887,46 +887,18 @@ export function ChatTeamSidebar({
   return (
     <>
       <div className={`bg-surface-secondary rounded-xl my-1 flex flex-col ${width != null ? 'shrink-0' : 'flex-1 min-w-0'}`} style={hidden ? { display: 'none' } : width != null ? { width } : undefined}>
-        {/* Header with title + pause toggle */}
+        {/* Header with title + manage button */}
         <div className="px-4 h-14 flex items-center shrink-0 gap-2">
           {isMobile && <MobileMenuButton />}
           <h2 className="text-lg font-semibold">{t('chat.title')}</h2>
-          <div className="ml-auto">
-            {globalPaused === null ? (
-              <span className="flex items-center gap-1.5 px-2.5 py-1 text-xs rounded-md border border-border-default text-fg-tertiary opacity-60">
-                <svg className="w-3 h-3 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10" strokeDasharray="31.4 31.4" strokeLinecap="round" /></svg>
-                {t('common:status.loading', { defaultValue: '...' })}
-              </span>
-            ) : (
-              <button
-                onClick={handlePauseClick}
-                disabled={pauseLoading}
-                title={globalPaused ? t('modals.resumeAll.title') : t('modals.pauseAll.title')}
-                className={`flex items-center gap-1.5 px-2.5 py-1 text-xs rounded-md border transition-colors ${
-                  globalPaused
-                    ? 'bg-green-500/10 border-green-500/30 text-green-500 hover:bg-green-500/20'
-                    : 'bg-amber-500/10 border-amber-500/30 text-amber-600 hover:bg-amber-500/20'
-                } disabled:opacity-50`}
-              >
-                {globalPaused ? (
-                  <><svg className="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3" /></svg> {t('chat.resume')}</>
-                ) : (
-                  <><svg className="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="4" width="4" height="16" /><rect x="14" y="4" width="4" height="16" /></svg> {t('chat.pause')}</>
-                )}
-              </button>
-            )}
-          </div>
-        </div>
-        {/* Action bar */}
-        {isAdmin && (
-          <div className="px-3 pt-2 pb-1 flex items-center gap-1.5" ref={actionMenuRef}>
-            <div className="relative flex-1">
+          {isAdmin && (
+            <div className="ml-auto relative" ref={actionMenuRef}>
               <button
                 onClick={() => setActionMenu(!actionMenu)}
-                className="w-full flex items-center justify-center gap-1 px-2 py-1.5 text-[10px] font-medium text-fg-secondary hover:text-fg-primary bg-surface-elevated/60 hover:bg-surface-elevated rounded-lg transition-colors"
+                className="flex items-center gap-1 px-2.5 py-1 text-xs font-medium text-fg-secondary hover:text-fg-primary bg-surface-elevated/60 hover:bg-surface-elevated rounded-md transition-colors"
               >
                 <span className="text-brand-500">+</span> {t('chat.manage')}
-                <svg className={`w-2.5 h-2.5 ml-auto transition-transform ${actionMenu ? 'rotate-180' : ''}`} fill="currentColor" viewBox="0 0 20 20">
+                <svg className={`w-2.5 h-2.5 transition-transform ${actionMenu ? 'rotate-180' : ''}`} fill="currentColor" viewBox="0 0 20 20">
                   <path fillRule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clipRule="evenodd" />
                 </svg>
               </button>
@@ -936,10 +908,9 @@ export function ChatTeamSidebar({
                   const rect = el.getBoundingClientRect();
                   const vw = window.innerWidth;
                   const pad = 8;
-                  if (rect.right > vw - pad) el.style.left = 'auto';
-                  if (rect.right > vw - pad) el.style.right = '0';
+                  if (rect.right > vw - pad) { el.style.left = 'auto'; el.style.right = '0'; }
                   if (rect.left < pad) { el.style.left = '0'; el.style.right = 'auto'; }
-                }} className="absolute left-0 top-full mt-1 w-48 max-w-[calc(100vw-1rem)] bg-surface-secondary border border-border-default rounded-lg shadow-xl z-30 overflow-hidden">
+                }} className="absolute right-0 top-full mt-1 w-48 max-w-[calc(100vw-1rem)] bg-surface-secondary border border-border-default rounded-lg shadow-xl z-30 overflow-hidden">
                   <button onClick={() => { setActionMenu(false); setShowMethodChoice('agent'); }}
                     className="w-full text-left px-4 py-2.5 text-xs text-fg-secondary hover:bg-surface-elevated transition-colors">
                     <div className="font-medium flex items-center gap-1.5">
@@ -972,11 +943,29 @@ export function ChatTeamSidebar({
                     </div>
                     <div className="text-[10px] text-fg-tertiary mt-0.5 pl-[18px]">{t('chat.newGroupChatDesc')}</div>
                   </button>
+                  {globalPaused !== null && (
+                    <button
+                      onClick={() => { setActionMenu(false); handlePauseClick(); }}
+                      disabled={pauseLoading}
+                      className={`w-full text-left px-4 py-2.5 text-xs hover:bg-surface-elevated border-t border-border-default transition-colors disabled:opacity-50 ${
+                        globalPaused ? 'text-green-600' : 'text-amber-600'
+                      }`}
+                    >
+                      <div className="font-medium flex items-center gap-1.5">
+                        {globalPaused ? (
+                          <><svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3" /></svg> {t('chat.resume')}</>
+                        ) : (
+                          <><svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="4" width="4" height="16" /><rect x="14" y="4" width="4" height="16" /></svg> {t('chat.pause')}</>
+                        )}
+                      </div>
+                      <div className="text-[10px] text-fg-tertiary mt-0.5 pl-[18px]">{globalPaused ? t('modals.resumeAll.title') : t('modals.pauseAll.title')}</div>
+                    </button>
+                  )}
                 </div>
               )}
             </div>
-          </div>
-        )}
+          )}
+        </div>
 
         {/* Sidebar content */}
         <div className="flex-1 overflow-y-auto px-3 py-2 flex flex-col">
diff --git a/packages/web-ui/src/components/NotificationBell.tsx b/packages/web-ui/src/components/NotificationBell.tsx
index 19ce64f6..e28e95b6 100644
--- a/packages/web-ui/src/components/NotificationBell.tsx
+++ b/packages/web-ui/src/components/NotificationBell.tsx
@@ -420,6 +420,7 @@ export function NotificationBell({ collapsed, userId, embeddedMode, onClose, sid
       invalidateApiCache('/approvals');
       invalidateApiCache('/notifications');
       invalidateApiCache('/tasks');
+      invalidateApiCache('/taskboard');
       invalidateApiCache('/requirements');
       window.dispatchEvent(new CustomEvent('markus:data-changed'));
       setTimeout(() => fetchData(), 800);
diff --git a/packages/web-ui/src/locales/en/agent.json b/packages/web-ui/src/locales/en/agent.json
index 9e6bb0b4..7e6f5a72 100644
--- a/packages/web-ui/src/locales/en/agent.json
+++ b/packages/web-ui/src/locales/en/agent.json
@@ -342,6 +342,10 @@
       "since": "since {{time}}",
       "refresh": "↻ Refresh",
       "queue": "Queue ({{count}})",
+      "expandQueue": "Show {{count}} more…",
+      "collapseQueue": "Collapse",
+      "staleProcessingWarning": "Stale processing items detected (agent is idle)",
+      "agentDetails": "Agent Details",
       "triageDecision": "Triage Decision",
       "processingItem": "Processing: {{id}}…",
       "deferred": "Deferred: {{count}}",
diff --git a/packages/web-ui/src/locales/zh-CN/agent.json b/packages/web-ui/src/locales/zh-CN/agent.json
index 46a10db1..a24fbdc8 100644
--- a/packages/web-ui/src/locales/zh-CN/agent.json
+++ b/packages/web-ui/src/locales/zh-CN/agent.json
@@ -342,6 +342,10 @@
       "since": "自 {{time}} 起",
       "refresh": "↻ 刷新",
       "queue": "队列（{{count}}）",
+      "expandQueue": "展开剩余 {{count}} 项…",
+      "collapseQueue": "收起",
+      "staleProcessingWarning": "存在异常处理中项目（Agent 已空闲）",
+      "agentDetails": "Agent 详情",
       "triageDecision": "分拣决策",
       "processingItem": "处理中：{{id}}…",
       "deferred": "已推迟：{{count}}",
diff --git a/packages/web-ui/src/pages/AgentBuilder.tsx b/packages/web-ui/src/pages/AgentBuilder.tsx
index 62be5a7f..79f50814 100644
--- a/packages/web-ui/src/pages/AgentBuilder.tsx
+++ b/packages/web-ui/src/pages/AgentBuilder.tsx
@@ -577,13 +577,13 @@ export function AgentBuilder({ authUser }: { authUser?: AuthUser } = {}) {
         )}
         {sharePrompt && (
           <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" onClick={() => setSharePrompt(null)}>
-            <div className="bg-gray-900 border border-gray-700 rounded-xl max-w-sm w-full mx-4 p-6" onClick={e => e.stopPropagation()}>
+            <div className="bg-surface-secondary border border-border-default rounded-xl max-w-sm w-full mx-4 p-6 shadow-2xl" onClick={e => e.stopPropagation()}>
               <h3 className="text-base font-semibold text-fg-primary mb-2">{t('common:share')}</h3>
               <p className="text-sm text-fg-secondary mb-5">{t('share.imagePrompt')}</p>
               <div className="flex gap-3">
                 <button
                   onClick={() => { const art = sharePrompt; setSharePrompt(null); PAYMENTS_ENABLED ? setShareModeTarget(art) : void handleShare(art); }}
-                  className="flex-1 text-sm px-4 py-2 rounded-lg border border-border-default text-fg-secondary hover:text-fg-primary hover:border-gray-600 transition-colors">
+                  className="flex-1 text-sm px-4 py-2 rounded-lg border border-border-default text-fg-secondary hover:text-fg-primary hover:border-fg-tertiary transition-colors">
                   {t('share.directly')}
                 </button>
                 <button
@@ -597,7 +597,7 @@ export function AgentBuilder({ authUser }: { authUser?: AuthUser } = {}) {
         )}
         {shareModeTarget && (
           <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" onClick={() => setShareModeTarget(null)}>
-            <div className="bg-gray-900 border border-gray-700 rounded-xl max-w-sm w-full mx-4 p-6" onClick={e => e.stopPropagation()}>
+            <div className="bg-surface-secondary border border-border-default rounded-xl max-w-sm w-full mx-4 p-6 shadow-2xl" onClick={e => e.stopPropagation()}>
               <ShareModeSelect
                 isUpdate={sharedMap.has(`${shareModeTarget.type}/${shareModeTarget.name}`)}
                 onCancel={() => setShareModeTarget(null)}
diff --git a/packages/web-ui/src/pages/AgentProfile.tsx b/packages/web-ui/src/pages/AgentProfile.tsx
index 39019631..8fb4a642 100644
--- a/packages/web-ui/src/pages/AgentProfile.tsx
+++ b/packages/web-ui/src/pages/AgentProfile.tsx
@@ -98,12 +98,27 @@ export function AgentProfile({ agentId, onBack, inline, defaultTab, onSwipeBack,
       <div className="flex-1 overflow-y-auto bg-surface-primary">
         <div className="p-5">
           {effectiveTab === 'overview' && (
-            <>
-              <OverviewTab agent={agent} onUpdate={reload} externalInfo={externalInfo} t={t} canManageAgents={canManageAgents} />
-              <div className="mt-6">
+            agent.state.status === 'working' || agent.state.status === 'idle' ? (
+              <>
                 <MindTab agentId={agentId} highlightId={highlightMailboxId} />
-              </div>
-            </>
+                <details className="mt-6 group">
+                  <summary className="text-xs font-medium text-fg-tertiary uppercase tracking-wider cursor-pointer hover:text-fg-secondary transition-colors list-none flex items-center gap-1.5">
+                    <span className="text-fg-tertiary group-open:rotate-90 transition-transform">▸</span>
+                    {t('agent:profilePage.mind.agentDetails')}
+                  </summary>
+                  <div className="mt-3">
+                    <OverviewTab agent={agent} onUpdate={reload} externalInfo={externalInfo} t={t} canManageAgents={canManageAgents} />
+                  </div>
+                </details>
+              </>
+            ) : (
+              <>
+                <OverviewTab agent={agent} onUpdate={reload} externalInfo={externalInfo} t={t} canManageAgents={canManageAgents} />
+                <div className="mt-6">
+                  <MindTab agentId={agentId} highlightId={highlightMailboxId} />
+                </div>
+              </>
+            )
           )}
           {effectiveTab === 'files' && <FilesTab agentId={agentId} />}
           {effectiveTab === 'tools' && <ToolsTab tools={agent.tools ?? []} />}
@@ -175,12 +190,27 @@ export function AgentProfile({ agentId, onBack, inline, defaultTab, onSwipeBack,
       </div>
       <div className="p-5" onTouchStart={isMobile ? profileSwipe.onTouchStart : undefined} onTouchEnd={isMobile ? profileSwipe.onTouchEnd : undefined}>
         {tab === 'overview' && (
-          <>
-            <OverviewTab agent={agent} onUpdate={reload} externalInfo={externalInfo} t={t} canManageAgents={canManageAgents} />
-            <div className="mt-6">
+          agent.state.status === 'working' || agent.state.status === 'idle' ? (
+            <>
               <MindTab agentId={agentId} highlightId={highlightMailboxId} />
-            </div>
-          </>
+              <details className="mt-6 group">
+                <summary className="text-xs font-medium text-fg-tertiary uppercase tracking-wider cursor-pointer hover:text-fg-secondary transition-colors list-none flex items-center gap-1.5">
+                  <span className="text-fg-tertiary group-open:rotate-90 transition-transform">▸</span>
+                  {t('agent:profilePage.mind.agentDetails')}
+                </summary>
+                <div className="mt-3">
+                  <OverviewTab agent={agent} onUpdate={reload} externalInfo={externalInfo} t={t} canManageAgents={canManageAgents} />
+                </div>
+              </details>
+            </>
+          ) : (
+            <>
+              <OverviewTab agent={agent} onUpdate={reload} externalInfo={externalInfo} t={t} canManageAgents={canManageAgents} />
+              <div className="mt-6">
+                <MindTab agentId={agentId} highlightId={highlightMailboxId} />
+              </div>
+            </>
+          )
         )}
         {tab === 'files' && <FilesTab agentId={agentId} />}
         {tab === 'tools' && <ToolsTab tools={agent.tools ?? []} />}
@@ -1914,8 +1944,10 @@ function MindTab({ agentId, highlightId }: { agentId: string; highlightId?: stri
   const [statusFilter, setStatusFilter] = useState<string>('all');
   const [expandedId, setExpandedId] = useState<string | null>(highlightId ?? null);
   const [highlightedId, setHighlightedId] = useState<string | null>(highlightId ?? null);
+  const [queueExpanded, setQueueExpanded] = useState(false);
   const [hasMore, setHasMore] = useState(true);
   const PAGE = 50;
+  const QUEUE_COLLAPSE_THRESHOLD = 3;
 
   const load = useCallback(async (reset = true) => {
     if (reset) setLoading(true);
@@ -2005,13 +2037,19 @@ function MindTab({ agentId, highlightId }: { agentId: string; highlightId?: stri
 
   if (loading && !mind) return <div className="text-fg-tertiary text-sm animate-pulse">{t('agent:profilePage.mind.loading')}</div>;
 
+  const effectiveAttentionState = (mind?.attentionState && mind.attentionState !== 'idle' && !mind?.currentFocus)
+    ? 'idle'
+    : (mind?.attentionState ?? 'idle');
+
+  const hasStaleProcessingItems = effectiveAttentionState === 'idle' && mailbox?.history?.some(h => h.status === 'processing');
+
   return (
     <div className="space-y-4">
       {/* ── Current State ── */}
       <section>
         <div className="flex items-center gap-3 mb-3">
-          <span className={`px-2.5 py-1 text-xs font-medium rounded-full ${ATTENTION_COLORS[mind?.attentionState ?? 'idle'] ?? 'bg-gray-500/20 text-gray-500'}`}>
-            {t(`agent:profilePage.mind.attention.${mind?.attentionState ?? 'idle'}`)}
+          <span className={`px-2.5 py-1 text-xs font-medium rounded-full ${ATTENTION_COLORS[effectiveAttentionState] ?? 'bg-gray-500/20 text-gray-500'}`}>
+            {t(`agent:profilePage.mind.attention.${effectiveAttentionState}`)}
           </span>
           {mind?.currentFocus ? (() => {
             const focusDisplay = getMailboxItemDisplay({
@@ -2038,47 +2076,88 @@ function MindTab({ agentId, highlightId }: { agentId: string; highlightId?: stri
           <button onClick={() => { load(); }} className="ml-auto text-xs text-fg-tertiary hover:text-fg-secondary active:text-fg-primary transition-colors">{t('agent:profilePage.mind.refresh')}</button>
         </div>
 
-        {(mind?.queuedItems?.length ?? 0) > 0 && (
-          <div className="mb-3">
-            <h4 className="text-xs font-medium text-amber-500 uppercase tracking-wider mb-1.5">{t('agent:profilePage.mind.queue', { count: mind!.queuedItems.length })}</h4>
-            <div className="space-y-1">
-              {mind!.queuedItems.map((item, i) => (
-                <div key={item.id} className="flex items-center gap-2 px-3 py-1.5 rounded bg-amber-500/5 border border-amber-500/20 text-sm">
-                  <span className="text-fg-tertiary w-4 text-right text-xs">{i + 1}</span>
-                  <span className="text-sm">{MAILBOX_TYPE_ICONS[item.sourceType] ?? '●'}</span>
-                  <span className={`text-[10px] ${PRIORITY_COLORS[item.priority] ?? 'text-fg-tertiary'}`}>{t(`agent:profilePage.mind.priority.${PRIORITY_KEYS[item.priority] ?? item.priority}`, { defaultValue: `P${item.priority}` })}</span>
-                  <span className="text-fg-secondary truncate flex-1 text-xs">{item.summary}</span>
-                  <span className="text-[10px] text-fg-tertiary">{new Date(item.queuedAt).toLocaleTimeString()}</span>
-                </div>
-              ))}
-            </div>
+        {hasStaleProcessingItems && (
+          <div className="mb-3 px-3 py-2 rounded-lg bg-amber-500/10 border border-amber-500/30 flex items-center gap-2">
+            <span className="text-amber-500 text-sm">⚠</span>
+            <span className="text-[11px] text-amber-600">{t('agent:profilePage.mind.staleProcessingWarning')}</span>
           </div>
         )}
+
+        {(mind?.queuedItems?.length ?? 0) > 0 && (() => {
+          const items = mind!.queuedItems;
+          const shouldCollapse = items.length > QUEUE_COLLAPSE_THRESHOLD;
+          const visibleItems = shouldCollapse && !queueExpanded ? items.slice(0, QUEUE_COLLAPSE_THRESHOLD) : items;
+          const typeCounts = items.reduce<Record<string, number>>((acc, item) => {
+            acc[item.sourceType] = (acc[item.sourceType] ?? 0) + 1;
+            return acc;
+          }, {});
+          return (
+            <div className="mb-3">
+              <div className="flex items-center gap-2 mb-1.5">
+                <h4 className="text-xs font-medium text-amber-500 uppercase tracking-wider">{t('agent:profilePage.mind.queue', { count: items.length })}</h4>
+                <div className="flex gap-1.5 flex-wrap">
+                  {Object.entries(typeCounts).map(([type, count]) => (
+                    <span key={type} className="text-[10px] text-fg-tertiary bg-amber-500/10 px-1.5 py-0.5 rounded">
+                      {MAILBOX_TYPE_ICONS[type] ?? '●'} {count}
+                    </span>
+                  ))}
+                </div>
+              </div>
+              <div className="space-y-1">
+                {visibleItems.map((item, i) => (
+                  <div key={item.id} className="flex items-center gap-2 px-3 py-1.5 rounded bg-amber-500/5 border border-amber-500/20 text-sm">
+                    <span className="text-fg-tertiary w-4 text-right text-xs">{i + 1}</span>
+                    <span className="text-sm">{MAILBOX_TYPE_ICONS[item.sourceType] ?? '●'}</span>
+                    <span className={`text-[10px] ${PRIORITY_COLORS[item.priority] ?? 'text-fg-tertiary'}`}>{t(`agent:profilePage.mind.priority.${PRIORITY_KEYS[item.priority] ?? item.priority}`, { defaultValue: `P${item.priority}` })}</span>
+                    <span className="text-fg-secondary truncate flex-1 text-xs">{item.summary}</span>
+                    <span className="text-[10px] text-fg-tertiary">{new Date(item.queuedAt).toLocaleTimeString()}</span>
+                  </div>
+                ))}
+                {shouldCollapse && (
+                  <button
+                    onClick={() => setQueueExpanded(!queueExpanded)}
+                    className="w-full text-center text-[11px] text-amber-500 hover:text-amber-400 py-1 transition-colors"
+                  >
+                    {queueExpanded
+                      ? t('agent:profilePage.mind.collapseQueue')
+                      : t('agent:profilePage.mind.expandQueue', { count: items.length - QUEUE_COLLAPSE_THRESHOLD })}
+                  </button>
+                )}
+              </div>
+            </div>
+          );
+        })()}
       </section>
 
       {/* ── Last Triage Decision ── */}
-      {mind?.lastTriage && (
-        <section className="bg-surface-2 rounded-lg border border-indigo-500/20 p-3">
-          <div className="flex items-center gap-2 mb-2">
-            <span className="text-sm">🧠</span>
-            <h4 className="text-xs font-medium text-indigo-400 uppercase tracking-wider">{t('agent:profilePage.mind.triageDecision')}</h4>
-            <span className="text-[10px] text-fg-quaternary ml-auto">{new Date(mind.lastTriage.timestamp).toLocaleTimeString()}</span>
-          </div>
-          <p className="text-xs text-fg-secondary leading-relaxed">{mind.lastTriage.reasoning}</p>
-          <div className="flex flex-wrap gap-2 mt-2 text-[10px]">
-            <span className="px-1.5 py-0.5 rounded bg-green-500/10 text-green-400">{t('agent:profilePage.mind.processingItem', { id: mind.lastTriage.processedItemId.slice(0, 12) })}</span>
-            {mind.lastTriage.deferredItemIds.length > 0 && (
-              <span className="px-1.5 py-0.5 rounded bg-amber-500/10 text-amber-400">{t('agent:profilePage.mind.deferred', { count: mind.lastTriage.deferredItemIds.length })}</span>
-            )}
-            {mind.lastTriage.droppedItemIds.length > 0 && (
-              <span className="px-1.5 py-0.5 rounded bg-red-500/10 text-red-400">{t('agent:profilePage.mind.dropped', { count: mind.lastTriage.droppedItemIds.length })}</span>
-            )}
-            {(mind.lastTriage.inlineCompletedIds?.length ?? 0) > 0 && (
-              <span className="px-1.5 py-0.5 rounded bg-blue-500/10 text-blue-400">{t('agent:profilePage.mind.inlineCompleted', { count: mind.lastTriage.inlineCompletedIds!.length })}</span>
-            )}
-          </div>
-        </section>
-      )}
+      {mind?.lastTriage && (() => {
+        const triageAgeMs = Date.now() - new Date(mind.lastTriage.timestamp).getTime();
+        const isStale = triageAgeMs > 60_000;
+        return (
+          <section className={`bg-surface-2 rounded-lg border p-3 transition-opacity ${isStale ? 'border-border-subtle opacity-60' : 'border-indigo-500/20'}`}>
+            <details open={!isStale}>
+              <summary className="flex items-center gap-2 cursor-pointer list-none">
+                <span className="text-sm">🧠</span>
+                <h4 className="text-xs font-medium text-indigo-400 uppercase tracking-wider">{t('agent:profilePage.mind.triageDecision')}</h4>
+                <span className="text-[10px] text-fg-quaternary ml-auto">{new Date(mind.lastTriage.timestamp).toLocaleTimeString()}</span>
+              </summary>
+              <p className="text-xs text-fg-secondary leading-relaxed mt-2">{mind.lastTriage.reasoning}</p>
+              <div className="flex flex-wrap gap-2 mt-2 text-[10px]">
+                <span className="px-1.5 py-0.5 rounded bg-green-500/10 text-green-400">{t('agent:profilePage.mind.processingItem', { id: mind.lastTriage.processedItemId.slice(0, 12) })}</span>
+                {mind.lastTriage.deferredItemIds.length > 0 && (
+                  <span className="px-1.5 py-0.5 rounded bg-amber-500/10 text-amber-400">{t('agent:profilePage.mind.deferred', { count: mind.lastTriage.deferredItemIds.length })}</span>
+                )}
+                {mind.lastTriage.droppedItemIds.length > 0 && (
+                  <span className="px-1.5 py-0.5 rounded bg-red-500/10 text-red-400">{t('agent:profilePage.mind.dropped', { count: mind.lastTriage.droppedItemIds.length })}</span>
+                )}
+                {(mind.lastTriage.inlineCompletedIds?.length ?? 0) > 0 && (
+                  <span className="px-1.5 py-0.5 rounded bg-blue-500/10 text-blue-400">{t('agent:profilePage.mind.inlineCompleted', { count: mind.lastTriage.inlineCompletedIds!.length })}</span>
+                )}
+              </div>
+            </details>
+          </section>
+        );
+      })()}
 
       {/* ── Mailbox History ── */}
       <section>
diff --git a/packages/web-ui/src/pages/ArtifactDetail.tsx b/packages/web-ui/src/pages/ArtifactDetail.tsx
index a3436906..87a46971 100644
--- a/packages/web-ui/src/pages/ArtifactDetail.tsx
+++ b/packages/web-ui/src/pages/ArtifactDetail.tsx
@@ -995,17 +995,17 @@ export function ArtifactDetail({ type, name, onBack, authUser: _authUser, readOn
 
         {/* Version bump notification */}
         {!readOnly && contentDirty && !showVersionBump && (
-          <div className="mb-4 px-4 py-2.5 rounded-lg bg-amber-500/10 border border-amber-500/20 flex items-center justify-between">
-            <span className="text-xs text-amber-300">{t('versionBump.contentModified')}</span>
-            <button onClick={() => setShowVersionBump(true)} className="text-xs px-3 py-1 rounded bg-amber-500/20 text-amber-300 hover:bg-amber-500/30 transition-colors">
+          <div className="mb-4 px-4 py-2.5 rounded-lg bg-amber-50 dark:bg-amber-500/10 border border-amber-300 dark:border-amber-500/20 flex items-center justify-between">
+            <span className="text-xs text-amber-800 dark:text-amber-300">{t('versionBump.contentModified')}</span>
+            <button onClick={() => setShowVersionBump(true)} className="text-xs px-3 py-1 rounded bg-amber-200 dark:bg-amber-500/20 text-amber-800 dark:text-amber-300 hover:bg-amber-300 dark:hover:bg-amber-500/30 transition-colors">
               {t('versionBump.bumpVersion')}
             </button>
           </div>
         )}
         {!readOnly && showVersionBump && (
-          <div className="mb-4 px-4 py-3 rounded-lg bg-amber-500/10 border border-amber-500/20">
+          <div className="mb-4 px-4 py-3 rounded-lg bg-amber-50 dark:bg-amber-500/10 border border-amber-300 dark:border-amber-500/20">
             <div className="flex items-center gap-3">
-              <span className="text-xs text-amber-300">{t('versionBump.newVersion')}</span>
+              <span className="text-xs text-amber-800 dark:text-amber-300">{t('versionBump.newVersion')}</span>
               <input
                 type="text"
                 defaultValue={(() => {
@@ -1023,7 +1023,7 @@ export function ArtifactDetail({ type, name, onBack, authUser: _authUser, readOn
               <button onClick={(e) => {
                 const input = (e.target as HTMLElement).parentElement?.querySelector('input');
                 if (input) handleFieldChange('version', input.value);
-              }} className="text-xs px-3 py-1 rounded bg-amber-500/20 text-amber-300 hover:bg-amber-500/30 transition-colors">
+              }} className="text-xs px-3 py-1 rounded bg-amber-200 dark:bg-amber-500/20 text-amber-800 dark:text-amber-300 hover:bg-amber-300 dark:hover:bg-amber-500/30 transition-colors">
                 {t('common:confirm')}
               </button>
               <button onClick={() => setShowVersionBump(false)} className="text-xs text-fg-tertiary hover:text-fg-secondary">
@@ -1057,7 +1057,7 @@ export function ArtifactDetail({ type, name, onBack, authUser: _authUser, readOn
                 {!readOnly && showIconPicker && (
                   <>
                   <div className="fixed inset-0 z-40" onClick={() => setShowIconPicker(false)} />
-                  <div className="absolute top-full left-0 mt-2 z-50 bg-gray-900 border border-gray-700 rounded-xl p-3 shadow-xl w-80">
+                  <div className="absolute top-full left-0 mt-2 z-50 bg-surface-secondary border border-border-default rounded-xl p-3 shadow-xl w-80">
                     <div className="flex items-center gap-2 mb-3">
                       <input
                         type="text" placeholder={t('detail.pasteEmojiOrUrl')}
@@ -1100,7 +1100,7 @@ export function ArtifactDetail({ type, name, onBack, authUser: _authUser, readOn
                     <div className="max-h-64 overflow-y-auto">
                       {EMOJI_GROUPS.map(g => (
                         <div key={g.label} className="mb-2.5">
-                          <div className="text-[10px] text-fg-tertiary mb-1 sticky top-0 bg-gray-900 py-0.5">{g.label}</div>
+                          <div className="text-[10px] text-fg-tertiary mb-1 sticky top-0 bg-surface-secondary py-0.5">{g.label}</div>
                           <div className="flex flex-wrap gap-0.5">
                             {g.emojis.map(e => (
                               <button key={e} onClick={() => { handleFieldChange('icon', e); setShowIconPicker(false); }}
@@ -1336,7 +1336,7 @@ function ShareModeDialog({ onClose, onConfirm, isUpdate }: {
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" onClick={onClose}>
-      <div className="bg-gray-900 border border-gray-700 rounded-xl max-w-sm w-full mx-4 p-6" onClick={e => e.stopPropagation()}>
+      <div className="bg-surface-secondary border border-border-default rounded-xl max-w-sm w-full mx-4 p-6 shadow-2xl" onClick={e => e.stopPropagation()}>
         <h3 className="text-base font-semibold text-fg-primary mb-4">
           {isUpdate ? t('shareMode.titleUpdate') : t('share.toHub')}
         </h3>
diff --git a/packages/web-ui/src/pages/Team.tsx b/packages/web-ui/src/pages/Team.tsx
index 33ba2010..dfba2a94 100644
--- a/packages/web-ui/src/pages/Team.tsx
+++ b/packages/web-ui/src/pages/Team.tsx
@@ -653,13 +653,14 @@ function AgentMessageBody({
       : undefined;
     const textSegments = segments.filter(s => s.type === 'text');
     const allText = !isStreaming ? textSegments.map(s => s.content).join('') : null;
-    const displayText = allText
-      ? allText
-          .replace(/<think>[\s\S]*?(<\/think>|$)/g, '')
-          .replace(/<(invoke|function_calls|antml:\w+)\b[\s\S]*?(<\/\1>|$)/g, '')
-          .replace(/<\/?(invoke|function_calls|antml:\w+)[^>]*>/g, '')
-          .trim() || null
-      : null;
+    const stripMarkup = (t: string) => t
+      .replace(/<think>[\s\S]*?(<\/think>|$)/g, '')
+      .replace(/<(invoke|function_calls|antml:\w+)\b[\s\S]*?(<\/\1>|$)/g, '')
+      .replace(/<\/?(invoke|function_calls|antml:\w+)[^>]*>/g, '')
+      .trim() || null;
+    const segmentText = allText ? stripMarkup(allText) : null;
+    const displayText = segmentText
+      || (!isStreaming && msg.text ? stripMarkup(msg.text) : null);
 
     // For the full execution log, prefer server-committed clean segments
     // (populated from thinking_commit/text_commit SSE events) over fragmented
@@ -983,7 +984,7 @@ export function TeamPage({ initialAgentId, authUser }: { initialAgentId?: string
   const thinkingTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const [streamingVisual, setStreamingVisual] = useState(false);
   const streamingTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const STREAMING_MIN_DISPLAY_MS = 1500;
+  const STREAMING_MIN_DISPLAY_MS = 400;
   useEffect(() => {
     if (sending) {
       if (streamingTimerRef.current) { clearTimeout(streamingTimerRef.current); streamingTimerRef.current = null; }
@@ -1258,9 +1259,10 @@ export function TeamPage({ initialAgentId, authUser }: { initialAgentId?: string
   useEffect(() => {
     if (!isActive) return;
     refreshAgents();
+    refreshTeams();
     const timer = setInterval(refreshAgents, 30_000);
     const teamTimer = setInterval(refreshTeams, 60_000);
-    const unsub = wsClient.on('agent:update', throttledRefreshAgents);
+    const unsub = wsClient.on('agent:update', () => { throttledRefreshAgents(); throttledRefreshTeams(); });
     const unsubTeamUpdate = wsClient.on('team:update', throttledRefreshTeams);
     const unsubTeamOnAgentRemoved = wsClient.on('agent:removed', throttledRefreshTeams);
     const unsubGroup = wsClient.on('chat:group_created', () => { throttledRefreshGroupChats(); throttledRefreshTeams(); });
diff --git a/packages/web-ui/src/pages/Work.tsx b/packages/web-ui/src/pages/Work.tsx
index b83446cb..af9d0b24 100644
--- a/packages/web-ui/src/pages/Work.tsx
+++ b/packages/web-ui/src/pages/Work.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback, useMemo, useRef, type DragEvent } from 'react';
 import { useTranslation } from 'react-i18next';
-import { api, wsClient, ApiError, type ProjectInfo, type TaskInfo, type AgentInfo, type TaskLogEntry, type TaskComment, type RequirementComment, type RequirementInfo, type HumanUserInfo, type RoundSummary, type AuthUser, type ActivityRecord, type StatusTransitionInfo } from '../api.ts';
+import { api, wsClient, ApiError, invalidateApiCache, type ProjectInfo, type TaskInfo, type AgentInfo, type TaskLogEntry, type TaskComment, type RequirementComment, type RequirementInfo, type HumanUserInfo, type RoundSummary, type AuthUser, type ActivityRecord, type StatusTransitionInfo } from '../api.ts';
 import { ConfirmModal } from '../components/ConfirmModal.tsx';
 import { MemoExecEntryRow, ThinkingDots, StreamingText, filterCompletedStarts, streamEntryToExecEntry, attachSubagentLogsToEntries, FullExecutionLog, type ExecEntry, type ExecutionStreamEntryUI } from '../components/ExecutionTimeline.tsx';
 import { taskLogToStreamEntry, activityLogToStreamEntry } from '../api.ts';
@@ -3493,7 +3493,9 @@ export function WorkPage({ authUser }: { authUser?: AuthUser }) {
     const reqUnsubs = reqEvents.map(evt =>
       wsClient.on(evt, () => { debouncedRefreshReqs(); })
     );
-    return () => { clearInterval(i); unsub(); unsubTaskCreate(); reqUnsubs.forEach(u => u()); if (boardDebounce) clearTimeout(boardDebounce); if (reqDebounce) clearTimeout(reqDebounce); };
+    const onDataChanged = () => { invalidateApiCache('/taskboard'); refreshBoard(); refreshRequirements(); };
+    window.addEventListener('markus:data-changed', onDataChanged);
+    return () => { clearInterval(i); unsub(); unsubTaskCreate(); reqUnsubs.forEach(u => u()); window.removeEventListener('markus:data-changed', onDataChanged); if (boardDebounce) clearTimeout(boardDebounce); if (reqDebounce) clearTimeout(reqDebounce); };
   }, [isActive, refreshBoard, refreshAgents, refreshRequirements]);
 
   // Refs for event handlers that need current state without re-registering