From d723cf890699b6733fd667e5f92fbf056248485f Mon Sep 17 00:00:00 2001
From: Ame <123734885+luokerenx4@users.noreply.github.com>
Date: Sun, 6 Sep 2026 12:33:57 +0800
Subject: [PATCH 1/4] Polish shared conversation transcript and message actions

---
 docs/ui-interaction-and-motion.md             |  8 +++
 .../conversation/ConversationTranscript.tsx   | 11 +++-
 .../conversation/ConversationView.tsx         |  2 +-
 .../conversation/MessageActions.spec.tsx      | 45 +++++++++++++++
 .../conversation/MessageActions.tsx           | 38 +++++++++++++
 .../components/conversation/conversation.css  | 55 +++++++++----------
 6 files changed, 127 insertions(+), 32 deletions(-)
 create mode 100644 ui/src/components/conversation/MessageActions.spec.tsx
 create mode 100644 ui/src/components/conversation/MessageActions.tsx

diff --git a/docs/ui-interaction-and-motion.md b/docs/ui-interaction-and-motion.md
index 3c78e5d64..80288fdb8 100644
--- a/docs/ui-interaction-and-motion.md
+++ b/docs/ui-interaction-and-motion.md
@@ -172,6 +172,14 @@ the Harness launch page; its context, controls and details are caller-owned
 slots, not embedded Pi selectors. Existing `oa-harness-composer-*` styling seams
 remain the shared visual material. Messages and composer use a 46rem reading
 measure, with local scrolling for wide output and wrapping toolbar controls.
+User messages use a quiet, borderless bubble; assistant prose sits directly on
+the canvas. Execution summaries are lightweight disclosure rows, with an inset
+rail for individual actions rather than nested activity cards. Preserve the
+shared Markdown table scroll wrapper instead of overriding table display.
+Completed text has a copy action that copies only the displayed message, not
+reasoning or tool payloads. Older actions reveal on hover or keyboard focus;
+the latest message and touch surfaces keep them visible. Clipboard failures
+are actionable, and interrupted tools must say incomplete rather than completed.
 
 The normalized types in this folder are ephemeral presentation data, not a new
 persisted transcript or execution protocol. An adapter converts wire messages
diff --git a/ui/src/components/conversation/ConversationTranscript.tsx b/ui/src/components/conversation/ConversationTranscript.tsx
index c509dd168..e292e4c68 100644
--- a/ui/src/components/conversation/ConversationTranscript.tsx
+++ b/ui/src/components/conversation/ConversationTranscript.tsx
@@ -2,18 +2,22 @@ import { useEffect, useState, type ReactElement } from 'react'
 import { Check, ChevronRight, CircleAlert, CircleDashed, LoaderCircle } from 'lucide-react'
 import { MarkdownContent } from '../MarkdownContent'
 import type { ConversationActivity, ConversationContent, ConversationItem, ConversationToolStep } from './types'
+import { MessageActions } from './MessageActions'
 
 export function ConversationTranscriptItem({
   item,
   working,
+  latest = false,
 }: {
   readonly item: ConversationItem
   readonly working: boolean
+  readonly latest?: boolean
 }): ReactElement {
   if (item.kind === 'user') {
     return (
-      <article className="conversation-message is-user">
+      <article className={`conversation-message is-user${latest ? ' is-latest' : ''}`}>
         <div className="conversation-message-body"><ConversationContentView content={item.content} /></div>
+        {item.content.some(block => block.kind === 'markdown') && <MessageActions text={item.content.flatMap(block => block.kind === 'markdown' ? [block.text] : []).join('\n\n')} />}
       </article>
     )
   }
@@ -25,7 +29,7 @@ export function ConversationTranscriptItem({
     )
   }
   return (
-    <article className="conversation-message is-assistant is-turn">
+    <article className={`conversation-message is-assistant is-turn${latest ? ' is-latest' : ''}`}>
       <div className="conversation-message-body">
         {item.progress.map((text, index) => (
           <div key={index} className="conversation-progress-text"><MarkdownContent text={text} /></div>
@@ -33,6 +37,7 @@ export function ConversationTranscriptItem({
         {item.activity && <ConversationActivityGroup activity={item.activity} working={working} />}
         {item.final && <div className="conversation-final-text"><MarkdownContent text={item.final} /></div>}
       </div>
+      {!working && item.final && <MessageActions text={item.final} />}
     </article>
   )
 }
@@ -115,7 +120,7 @@ function ConversationToolStepView({ step, working }: { readonly step: Conversati
               : <Check size={13} />}
         </span>
         <code>{step.name}</code>
-        <span className="conversation-step-summary">{summary ?? (step.status === 'running' ? 'Running…' : 'Completed')}</span>
+        <span className="conversation-step-summary">{summary ?? (step.status === 'running' ? (working ? 'Running…' : 'Incomplete') : failed ? 'Failed' : 'Completed')}</span>
         {resultChars !== null && <span className="conversation-step-size">{formatChars(resultChars)}</span>}
         <ChevronRight size={13} className="conversation-disclosure" aria-hidden="true" />
       </summary>
diff --git a/ui/src/components/conversation/ConversationView.tsx b/ui/src/components/conversation/ConversationView.tsx
index b7886aef0..418905e1e 100644
--- a/ui/src/components/conversation/ConversationView.tsx
+++ b/ui/src/components/conversation/ConversationView.tsx
@@ -87,7 +87,7 @@ export function ConversationView(props: ConversationViewProps) {
       setFollowing(followingRef.current)
     }}>
       {props.items.length === 0 && !error && <div className="conversation-empty">{props.empty}</div>}
-      {props.items.map((item, index) => <ConversationTranscriptItem key={item.key} item={item} working={props.busy && index === props.items.length - 1} />)}
+      {props.items.map((item, index) => <ConversationTranscriptItem key={item.key} item={item} latest={index === props.items.length - 1} working={props.busy && index === props.items.length - 1} />)}
       {error && <div className="conversation-error" role="alert">
         <strong>Could not continue</strong><span>{error}</span>
         {props.retry && <button type="button" onClick={() => { setActionError(null); props.retry?.() }}>Retry</button>}
diff --git a/ui/src/components/conversation/MessageActions.spec.tsx b/ui/src/components/conversation/MessageActions.spec.tsx
new file mode 100644
index 000000000..3b2d92807
--- /dev/null
+++ b/ui/src/components/conversation/MessageActions.spec.tsx
@@ -0,0 +1,45 @@
+// @vitest-environment jsdom
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { afterEach, expect, it, vi } from 'vitest'
+import { ConversationTranscriptItem } from './ConversationTranscript'
+import { MessageActions } from './MessageActions'
+
+afterEach(() => { cleanup(); vi.restoreAllMocks() })
+
+it('copies the final response without reasoning or tool data', async () => {
+  const writeText = vi.fn().mockResolvedValue(undefined)
+  Object.defineProperty(navigator, 'clipboard', { configurable: true, value: { writeText } })
+  render(<ConversationTranscriptItem working={false} item={{
+    kind: 'assistant-turn', key: 'turn', progress: ['Progress only'], final: '**Final answer**',
+    activity: { steps: [], thinking: ['Private reasoning'], unknownParts: ['raw payload'] },
+  }} />)
+  fireEvent.click(screen.getByRole('button', { name: 'Copy message' }))
+  expect(await screen.findByRole('button', { name: 'Copied' })).toBeTruthy()
+  expect(writeText).toHaveBeenCalledWith('**Final answer**')
+})
+
+it('reports clipboard failures and supports a deliberate retry', async () => {
+  const writeText = vi.fn().mockRejectedValueOnce(new Error('Denied')).mockResolvedValueOnce(undefined)
+  Object.defineProperty(navigator, 'clipboard', { configurable: true, value: { writeText } })
+  render(<MessageActions text="Reply" />)
+  fireEvent.click(screen.getByRole('button', { name: 'Copy message' }))
+  expect(await screen.findByRole('alert')).toBeTruthy()
+  fireEvent.click(screen.getByRole('button', { name: 'Copy message' }))
+  expect(await screen.findByRole('button', { name: 'Copied' })).toBeTruthy()
+  expect(screen.queryByRole('alert')).toBeNull()
+})
+
+it('does not offer copy for a response still streaming', () => {
+  render(<ConversationTranscriptItem working item={{ kind: 'assistant-turn', key: 'stream', progress: [], final: 'Partial', activity: null }} />)
+  expect(screen.queryByRole('button', { name: 'Copy message' })).toBeNull()
+})
+
+it('labels an unfinished tool as incomplete after execution stops', () => {
+  render(<ConversationTranscriptItem working={false} item={{
+    kind: 'assistant-turn', key: 'interrupted', progress: [], final: null,
+    activity: { thinking: [], unknownParts: [], steps: [{ id: 'read', name: 'read', summary: null, status: 'running', input: '{}', thinking: [] }] },
+  }} />)
+  expect(screen.getAllByText('Incomplete')).toHaveLength(2)
+  expect(screen.queryByText('Completed')).toBeNull()
+  expect(screen.queryByText('Running…')).toBeNull()
+})
diff --git a/ui/src/components/conversation/MessageActions.tsx b/ui/src/components/conversation/MessageActions.tsx
new file mode 100644
index 000000000..34dc698a6
--- /dev/null
+++ b/ui/src/components/conversation/MessageActions.tsx
@@ -0,0 +1,38 @@
+import { useEffect, useRef, useState } from 'react'
+import { Check, Copy } from 'lucide-react'
+import { Button } from '../ui/button'
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip'
+
+/** Operates only on the visible message, never reasoning or tool payloads. */
+export function MessageActions({ text }: { readonly text: string }) {
+  const [state, setState] = useState<'idle' | 'copied' | 'failed'>('idle')
+  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+  const mounted = useRef(true)
+  useEffect(() => {
+    mounted.current = true
+    return () => { mounted.current = false; clearTimeout(timer.current) }
+  }, [])
+  async function copy() {
+    clearTimeout(timer.current)
+    setState('idle')
+    try {
+      await navigator.clipboard.writeText(text)
+      if (!mounted.current) return
+      setState('copied')
+      clearTimeout(timer.current)
+      timer.current = setTimeout(() => setState('idle'), 2000)
+    } catch {
+      if (mounted.current) setState('failed')
+    }
+  }
+  const label = state === 'copied' ? 'Copied' : 'Copy message'
+  return <div className={`conversation-message-actions${state === 'failed' ? ' is-error' : ''}`}>
+    <Tooltip>
+      <TooltipTrigger render={<Button type="button" variant="ghost" size="icon-sm" aria-label={label} onClick={() => void copy()} />}>
+        {state === 'copied' ? <Check aria-hidden /> : <Copy aria-hidden />}
+      </TooltipTrigger>
+      <TooltipContent>{label}</TooltipContent>
+    </Tooltip>
+    {state === 'failed' && <span className="conversation-copy-error" role="alert">Could not copy. Select the message to copy it manually.</span>}
+  </div>
+}
diff --git a/ui/src/components/conversation/conversation.css b/ui/src/components/conversation/conversation.css
index 4c841f4ee..c8a68f363 100644
--- a/ui/src/components/conversation/conversation.css
+++ b/ui/src/components/conversation/conversation.css
@@ -31,11 +31,18 @@
 }
 
 .conversation-empty { padding: 12vh 16px; text-align: center; color: var(--muted-foreground); font-size: 13px; }
-.conversation-message { max-width: 100%; min-width: 0; display: flex; align-items: flex-start; margin: 0 0 26px; }
-.conversation-message.is-user { justify-content: flex-end; margin-left: 12%; }
-.conversation-message-body { flex: 1; min-width: 0; font-size: 14px; line-height: 1.75; }
-.conversation-message.is-user .conversation-message-body { flex: 0 1 auto; max-width: min(88%, 736px); padding: 10px 13px; border: 1px solid var(--border); border-radius: 20px; background: var(--secondary); }
-.conversation-message.is-turn .conversation-message-body { display: grid; gap: 12px; }
+.conversation-message { max-width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: stretch; margin: 0 0 32px; }
+.conversation-message.is-user { align-items: flex-end; margin-left: 12%; }
+.conversation-message-body { min-width: 0; font-size: 14px; line-height: 1.75; }
+.conversation-message.is-user .conversation-message-body { max-width: min(88%, 736px); padding: 12px 16px; border-radius: 20px; background: var(--secondary); }
+.conversation-message.is-turn .conversation-message-body { display: grid; gap: 20px; }
+.conversation-message-actions { display: flex; align-items: center; gap: 8px; min-height: 28px; margin-top: 6px; color: var(--muted-foreground); opacity: 0; transition: opacity 120ms ease; }
+.conversation-message:hover > .conversation-message-actions,
+.conversation-message:focus-within > .conversation-message-actions,
+.conversation-message-actions.is-error,
+.conversation-message.is-latest > .conversation-message-actions { opacity: 1; }
+.conversation-copy-error { font-size: 12px; color: var(--destructive); }
+@media (hover: none) { .conversation-message-actions { opacity: 1; } }
 .conversation-message-body > *,
 .conversation-progress-text,
 .conversation-final-text,
@@ -70,12 +77,6 @@
   max-width: 100%;
   overscroll-behavior-inline: contain;
 }
-.conversation-message-body .markdown-content table {
-  display: block;
-  max-width: 100%;
-  overflow-x: auto;
-  overscroll-behavior-inline: contain;
-}
 .conversation-content-parts > * + * { margin-top: 9px; }
 .conversation-detail { padding: 6px 9px; border-left: 2px solid var(--border); color: var(--muted-foreground); font-size: 11px; }
 .conversation-detail summary { cursor: pointer; user-select: none; font-weight: 600; }
@@ -83,14 +84,11 @@
 
 .conversation-activity {
   overflow: hidden;
-  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
-  border-radius: 10px;
-  background: color-mix(in srgb, var(--secondary) 54%, transparent);
-  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
+  border: 0;
+  background: transparent;
 }
-.conversation-activity:hover { border-color: color-mix(in srgb, var(--primary) 24%, var(--border)); }
-.conversation-activity[open] { background: color-mix(in srgb, var(--secondary) 72%, transparent); box-shadow: 0 8px 24px color-mix(in srgb, var(--shadow-color) 5%, transparent); }
-.conversation-activity.is-error { border-color: color-mix(in srgb, var(--destructive) 48%, var(--border)); }
+.conversation-activity > summary:hover { color: var(--foreground); }
+.conversation-activity.is-error > summary { color: var(--destructive); }
 .conversation-activity > summary,
 .conversation-tool-step > summary,
 .conversation-reasoning > summary {
@@ -106,23 +104,21 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 7px 10px;
+  padding: 7px 0;
   color: var(--muted-foreground);
   font-size: 11px;
 }
-.conversation-activity-status { width: 18px; height: 18px; flex: 0 0 18px; display: grid; place-items: center; border-radius: 6px; color: color-mix(in srgb, var(--muted-foreground) 82%, transparent); background: color-mix(in srgb, var(--border) 42%, transparent); }
-.conversation-activity.is-running .conversation-activity-status { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
-.conversation-activity.is-error .conversation-activity-status { color: var(--destructive); background: color-mix(in srgb, var(--destructive) 10%, transparent); }
-.conversation-activity-title { flex: 0 0 auto; color: color-mix(in srgb, var(--foreground) 88%, var(--muted-foreground)); font-weight: 650; }
+.conversation-activity-status { width: 18px; height: 18px; flex: 0 0 18px; display: grid; place-items: center; color: inherit; }
+.conversation-activity-title { flex: 0 0 auto; font-weight: 500; }
 .conversation-activity-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 10px/1.4 var(--font-mono, monospace); }
-.conversation-disclosure { flex: 0 0 auto; margin-left: auto; transition: transform 150ms ease; }
+.conversation-disclosure { flex: 0 0 auto; transition: transform 150ms ease; }
 .conversation-activity[open] > summary .conversation-disclosure,
 .conversation-tool-step[open] > summary .conversation-disclosure { transform: rotate(90deg); }
-.conversation-activity-body { border-top: 1px solid color-mix(in srgb, var(--border) 84%, transparent); padding: 3px 10px 7px; }
+.conversation-activity-body { border-left: 1px solid var(--border); margin-left: 8px; padding: 0 0 0 17px; }
 .conversation-activity[open] > .conversation-activity-body,
 .conversation-tool-step[open] > .conversation-step-detail { animation: conversation-detail-reveal 150ms ease-out both; }
 
-.conversation-tool-step { border-bottom: 1px solid color-mix(in srgb, var(--border) 68%, transparent); }
+.conversation-tool-step { border: 0; }
 .conversation-tool-step:last-of-type { border-bottom: 0; }
 .conversation-tool-step > summary { min-height: 38px; display: grid; grid-template-columns: 18px minmax(58px, auto) minmax(0, 1fr) auto 14px; align-items: center; gap: 8px; padding: 6px 1px; color: var(--muted-foreground); }
 .conversation-tool-step > summary:hover { color: var(--foreground); }
@@ -133,7 +129,7 @@
 .conversation-step-summary { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
 .conversation-step-size { white-space: nowrap; color: color-mix(in srgb, var(--muted-foreground) 72%, transparent); font: 9px/1.4 var(--font-mono, monospace); }
 .conversation-tool-step > summary .conversation-disclosure { margin-left: 0; }
-.conversation-step-detail { display: grid; gap: 9px; margin: 0 0 8px 26px; padding: 9px 10px; border: 1px solid color-mix(in srgb, var(--border) 76%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--background) 64%, transparent); }
+.conversation-step-detail { display: grid; gap: 12px; margin: 0 0 14px 26px; padding: 12px; border-radius: 8px; background: var(--secondary); }
 .conversation-step-detail section { min-width: 0; }
 .conversation-step-detail h4 { margin: 0 0 5px; color: var(--muted-foreground); font-size: 9px; font-weight: 700; }
 .conversation-step-detail pre { max-height: 230px; margin: 0; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: color-mix(in srgb, var(--foreground) 88%, var(--muted-foreground)); font: 10px/1.5 var(--font-mono, monospace); }
@@ -164,7 +160,9 @@
 .conversation-jump-row .conversation-jump-latest { position: static; pointer-events: auto; font-size: 12px; }
 .conversation-composer-wrap .conversation-compaction-status { margin: 0 0 10px; }
 .conversation-activity > summary, .conversation-tool-step > summary, .conversation-reasoning > summary { font-size: 12px; }
-.conversation-activity-meta, .conversation-step-summary, .conversation-tool-step > summary code { font-size: 11px; }
+.conversation-activity-meta, .conversation-step-summary, .conversation-tool-step > summary code { font-size: 12px; }
+.conversation-step-detail h4, .conversation-step-size { font-size: 11px; }
+.conversation-step-detail pre, .conversation-step-result, .conversation-reasoning-notes { font-size: 12px; }
 .conversation-activity summary:focus-visible, .conversation-detail summary:focus-visible, .conversation-reasoning summary:focus-visible { outline: 2px solid var(--oa-focus-ring); outline-offset: -2px; }
 .conversation-unknown { overflow-wrap: anywhere; }
 
@@ -174,6 +172,7 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
+  .conversation-message-actions, .conversation-disclosure { transition: none; }
   .conversation-activity[open] > .conversation-activity-body,
   .conversation-tool-step[open] > .conversation-step-detail { animation: none; }
 }

From 271c0698709c7b9ec53d7ec42e1262443fac9610 Mon Sep 17 00:00:00 2001
From: Ame <123734885+luokerenx4@users.noreply.github.com>
Date: Sun, 6 Sep 2026 14:47:27 +0800
Subject: [PATCH 2/4] Keep conversation focus feedback on composer shell

---
 ui/src/components/conversation/conversation.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/conversation/conversation.css b/ui/src/components/conversation/conversation.css
index c8a68f363..6e24279bc 100644
--- a/ui/src/components/conversation/conversation.css
+++ b/ui/src/components/conversation/conversation.css
@@ -152,7 +152,9 @@
 .conversation-compaction-status span { color: var(--muted-foreground); font-size: 10px; line-height: 1.45; }
 .conversation-composer-wrap { position: relative; flex-shrink: 0; width: 100%; min-width: 0; padding: 12px max(24px, calc((100% - 736px) / 2)) 20px; }
 .conversation-input[data-slot="textarea"] { display: block; width: 100%; min-height: 68px; max-height: 168px; resize: none; border: 0; border-radius: 0; padding: 6px; color: var(--foreground); background: transparent; box-shadow: none; font-size: 14px; line-height: 21px; }
-.conversation-input[data-slot="textarea"]:focus-visible { outline: none; box-shadow: none; }
+/* The composer shell owns focus feedback. Outrank the shared field-control
+ * focus rule so its inset textarea does not draw a second rectangular ring. */
+:root .conversation-shell .conversation-input[data-slot="textarea"]:focus-visible { outline: none; box-shadow: none; }
 .conversation-send[data-slot="button"] { flex-shrink: 0; border-radius: 999px; color: var(--background); background: var(--foreground); }
 .conversation-send[data-slot="button"]:hover { opacity: .9; }
 .conversation-send[data-slot="button"]:disabled { color: var(--muted-foreground); background: var(--muted); opacity: .55; }

From 04a3b06bc57eb09a0c93eb369a5ba692b2881ef2 Mon Sep 17 00:00:00 2001
From: Ame <123734885+luokerenx4@users.noreply.github.com>
Date: Sun, 6 Sep 2026 22:52:27 +0800
Subject: [PATCH 3/4] Unify sidebar child navigation and repair demo session
 resume

---
 docs/ui-interaction-and-motion.md             | 10 ++++-
 ui/src/components/ActivityBar.tsx             |  2 +-
 ui/src/components/InboxSidebar.tsx            |  6 +--
 ui/src/components/SidebarChildRow.spec.tsx    | 23 +++++++++++
 ui/src/components/SidebarChildRow.tsx         | 19 +++++++++
 .../ChatWorkspaceSection.auto-quant.spec.tsx  | 14 +++----
 .../workspace/ChatWorkspaceSection.tsx        |  9 +++--
 .../workspace/HarnessNavigationGroup.tsx      |  2 +-
 .../workspace/HarnessWorkspaceEntry.tsx       | 22 +++++------
 ui/src/components/workspace/Sidebar.tsx       | 23 +++++------
 ui/src/components/workspace/api.spec.ts       | 10 +++++
 ui/src/components/workspace/api.ts            |  8 +++-
 .../demo/handlers/workspaces-resume.spec.ts   | 17 ++++++++
 ui/src/demo/handlers/workspaces.ts            | 27 ++++++++++++-
 ui/src/index.css                              | 39 ++++++++++++++++++-
 15 files changed, 183 insertions(+), 48 deletions(-)
 create mode 100644 ui/src/components/SidebarChildRow.spec.tsx
 create mode 100644 ui/src/components/SidebarChildRow.tsx

diff --git a/docs/ui-interaction-and-motion.md b/docs/ui-interaction-and-motion.md
index 80288fdb8..23fe34c8a 100644
--- a/docs/ui-interaction-and-motion.md
+++ b/docs/ui-interaction-and-motion.md
@@ -98,8 +98,14 @@ retryable errors. Without a Workspace, only the Harness header remains: clicking
 it opens the existing setup landing flow, without creating or selecting a
 Workspace. Do not repeat setup copy or a second setup button below it. Before
 readiness, the new-research shortcut is hidden.
-Studio is a compact outlined tool button with route-owned selection, separate
-from conversation rows; Quant and Prediction share its presentation.
+Studio is a quiet, borderless child navigation row aligned with Sessions, with
+route-owned selection. Its arrow appears on hover or keyboard focus and remains
+visible on touch devices; Quant and Prediction share its presentation.
+`SidebarChildRow` and `SidebarChildRowButton` own Harness child geometry for
+both Studio and Sessions: a 16px icon slot, 8px label gap, shared selection and
+keyboard focus, and sibling action controls. Expanded fine-pointer desktop rows
+are 30px tall with no additional per-destination vertical padding; other surfaces
+retain the existing Session row density. Keep runtime behavior in the caller.
 Harness working views use one content top bar, not a second conversation sidebar.
 TerminalView has no card/canvas mode: its header always uses PageTopBar and its
 single grid row fills the remaining height. Do not reserve a local header row
diff --git a/ui/src/components/ActivityBar.tsx b/ui/src/components/ActivityBar.tsx
index e6208f2b7..0f629386d 100644
--- a/ui/src/components/ActivityBar.tsx
+++ b/ui/src/components/ActivityBar.tsx
@@ -197,7 +197,7 @@ export function ActivityBar({
                         badge = {
                           count: unreadInbox,
                           label: t('nav.unread', { count: unreadInbox }),
-                          tone: 'bg-sidebar-foreground text-sidebar',
+                          tone: 'oa-inbox-unread-count',
                         }
                       } else if (item.page === 'portfolio' && pendingPush > 0) {
                         badge = {
diff --git a/ui/src/components/InboxSidebar.tsx b/ui/src/components/InboxSidebar.tsx
index b66aee627..3f3623946 100644
--- a/ui/src/components/InboxSidebar.tsx
+++ b/ui/src/components/InboxSidebar.tsx
@@ -323,7 +323,7 @@ function WorkspaceView({
                 {workspaceLabel}
               </span>
               {unread > 0 && (
-                <span className="shrink-0 min-w-[15px] h-[15px] px-1 rounded-full bg-primary text-primary-foreground text-[10px] leading-[14px] font-semibold tabular-nums flex items-center justify-center">
+                <span className="shrink-0 min-w-[15px] text-center text-muted-foreground text-[11px] leading-[15px] font-medium tabular-nums">
                   {unread}
                 </span>
               )}
@@ -393,7 +393,7 @@ function ClusterRow({
       {active && <SelectionIndicator />}
       <span
         aria-hidden
-        className={`mt-[7px] shrink-0 w-1.5 h-1.5 rounded-full ${unread ? 'bg-primary' : 'bg-transparent'}`}
+        className={`mt-[7px] shrink-0 w-1.5 h-1.5 rounded-full ${unread ? 'oa-inbox-unread-dot' : 'bg-transparent'}`}
       />
       <span className="min-w-0">
         <span
@@ -499,7 +499,7 @@ function TimeRow({
       <div className="flex min-w-0 items-start gap-1.5">
         <span
           aria-hidden
-          className={`mt-1.5 shrink-0 w-1.5 h-1.5 rounded-full ${unread ? 'bg-primary' : 'bg-transparent'}`}
+          className={`mt-1.5 shrink-0 w-1.5 h-1.5 rounded-full ${unread ? 'oa-inbox-unread-dot' : 'bg-transparent'}`}
         />
         <span className="min-w-0 flex-1">
           <span
diff --git a/ui/src/components/SidebarChildRow.spec.tsx b/ui/src/components/SidebarChildRow.spec.tsx
new file mode 100644
index 000000000..9ae348b55
--- /dev/null
+++ b/ui/src/components/SidebarChildRow.spec.tsx
@@ -0,0 +1,23 @@
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { afterEach, expect, it, vi } from 'vitest'
+import { SidebarChildRow, SidebarChildRowButton } from './SidebarChildRow'
+
+afterEach(cleanup)
+
+it('keeps destination and trailing actions independent with shared selection geometry', () => {
+  const open = vi.fn()
+  const options = vi.fn()
+  render(<SidebarChildRow active>
+    <SidebarChildRowButton icon={<svg />} onClick={open} aria-current="page">Studio</SidebarChildRowButton>
+    <button onClick={options}>Options</button>
+  </SidebarChildRow>)
+  const main = screen.getByRole('button', { name: 'Studio' })
+  expect(main.getAttribute('aria-current')).toBe('page')
+  expect(main.parentElement?.dataset.active).toBe('true')
+  expect(main.querySelector('span')?.className).toContain('size-4')
+  fireEvent.click(screen.getByRole('button', { name: 'Options' }))
+  expect(open).not.toHaveBeenCalled()
+  fireEvent.click(main)
+  expect(open).toHaveBeenCalledOnce()
+  expect(options).toHaveBeenCalledOnce()
+})
diff --git a/ui/src/components/SidebarChildRow.tsx b/ui/src/components/SidebarChildRow.tsx
new file mode 100644
index 000000000..ef3a6200d
--- /dev/null
+++ b/ui/src/components/SidebarChildRow.tsx
@@ -0,0 +1,19 @@
+import type { ComponentProps, ReactNode } from 'react'
+import { SelectionIndicator } from './SelectionIndicator'
+
+/** Shared geometry for Harness child destinations; actions are sibling controls. */
+export function SidebarChildRow({ active, className = '', children, ...props }: ComponentProps<'div'> & { active: boolean }) {
+  return <div {...props} data-active={active}
+    className={`oa-sidebar-child-row text-body group relative mx-1.5 flex min-h-9 items-center gap-1 rounded-md px-2 py-1.5 transition-colors ${active ? 'bg-sidebar-accent text-sidebar-accent-foreground' : 'hover:bg-sidebar-accent/65'} ${className}`}>
+    {active && <SelectionIndicator />}
+    {children}
+  </div>
+}
+
+export function SidebarChildRowButton({ icon, children, className = '', ...props }: ComponentProps<'button'> & { icon: ReactNode }) {
+  return <button type="button" {...props}
+    className={`oa-sidebar-child-row-main flex min-w-0 flex-1 items-center gap-2 text-left outline-none disabled:cursor-default ${className}`}>
+    <span className="flex size-4 shrink-0 items-center justify-center text-foreground/80" aria-hidden>{icon}</span>
+    {children}
+  </button>
+}
diff --git a/ui/src/components/workspace/ChatWorkspaceSection.auto-quant.spec.tsx b/ui/src/components/workspace/ChatWorkspaceSection.auto-quant.spec.tsx
index 927b2be64..bc171470c 100644
--- a/ui/src/components/workspace/ChatWorkspaceSection.auto-quant.spec.tsx
+++ b/ui/src/components/workspace/ChatWorkspaceSection.auto-quant.spec.tsx
@@ -137,7 +137,7 @@ describe('Ask Alice sidebar in AutoQuant mode', () => {
   it('keeps the office visible but withholds research and Studio until the default is ready', () => {
     const state = { ...context(), autoQuantDefaultWorkspaceId: null }
     render(<WorkspacesContext.Provider value={state}><ChatWorkspaceSection mode="auto-quant" placement="navigation" /></WorkspacesContext.Provider>)
-    expect(screen.queryByRole('button', { name: 'Open Studio' })).toBeNull()
+    expect(screen.queryByRole('button', { name: 'Studio' })).toBeNull()
     expect(screen.queryByRole('button', { name: sessionTitle })).toBeNull()
     fireEvent.click(screen.getByRole('button', { name: 'Auto Quant Harness' }))
     expect(actions.openOrFocus).toHaveBeenCalledWith({ kind: 'auto-quant-landing', params: {} })
@@ -148,7 +148,7 @@ describe('Ask Alice sidebar in AutoQuant mode', () => {
     render(<WorkspacesContext.Provider value={context()}><ChatWorkspaceSection mode="auto-quant" placement="navigation" /></WorkspacesContext.Provider>)
     fireEvent.click(screen.getByRole('button', { name: sessionTitle }))
     expect(actions.resumeSession).toHaveBeenCalledWith(workspace.id, session.id, 'auto-quant')
-    fireEvent.click(screen.getByRole('button', { name: 'Open Studio' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Studio' }))
     expect(actions.openOrFocus).toHaveBeenCalledWith({ kind: 'harness-surface', params: { wsId: workspace.id, capability: 'studio', source: 'auto-quant' } })
   })
   it('stacks Harness capabilities as full-width rows', () => {
@@ -215,7 +215,7 @@ describe.each(['auto-quant', 'prediction'] as const)('%s navigation readiness',
     const state = renderNavigation({ workspaces: [], autoQuantDefaultWorkspaceId: null, autoPredictionDefaultWorkspaceId: null })
     expect(screen.queryByText('Set up a workspace to start researching.')).toBeNull()
     expect(screen.queryByRole('button', { name: `Set up ${name}` })).toBeNull()
-    expect(screen.queryByRole('button', { name: 'Open Studio' })).toBeNull()
+    expect(screen.queryByRole('button', { name: 'Studio' })).toBeNull()
     expect(screen.queryByRole('button', { name: /New.*research/i })).toBeNull()
     fireEvent.click(screen.getByRole('button', { name: `${name} Harness` }))
     expect(actions.openOrFocus).toHaveBeenCalledWith({ kind: landingKind, params: {} })
@@ -227,7 +227,7 @@ describe.each(['auto-quant', 'prediction'] as const)('%s navigation readiness',
     const create = screen.getByRole('button', { name: new RegExp(`^${name}: New`) })
     expect(create.parentElement?.lastElementChild).toBe(create)
     expect(screen.queryByRole('button', { name: /^New.*research$/i })).toBeNull()
-    expect(screen.getByRole('button', { name: 'Open Studio' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Studio' })).toBeTruthy()
     fireEvent.click(create)
     expect(actions.openOrFocus).toHaveBeenCalledWith({ kind: landingKind, params: { targetWsId: workspace.id } })
   })
@@ -243,13 +243,13 @@ describe.each(['auto-quant', 'prediction'] as const)('%s navigation readiness',
   it('does not flash setup while preferences are loading', () => {
     renderNavigation({ autoQuantPreferenceLoaded: false, autoPredictionPreferenceLoaded: false })
     expect(screen.getByLabelText('Loading…')).toBeTruthy()
-    expect(screen.queryByRole('button', { name: /Set up|Choose workspace|Open Studio/ })).toBeNull()
+    expect(screen.queryByRole('button', { name: /Set up|Choose workspace|Studio/ })).toBeNull()
     expect(screen.queryByRole('button', { name: /New.*research/i })).toBeNull()
   })
 
   it('shows preference failure as retryable error, not a missing workspace', () => {
     const state = renderNavigation({ workspaces: [], autoQuantPreferenceError: 'offline', autoPredictionPreferenceError: 'offline' })
-    expect(screen.queryByRole('button', { name: /Set up|Choose workspace|Open Studio/ })).toBeNull()
+    expect(screen.queryByRole('button', { name: /Set up|Choose workspace|Studio/ })).toBeNull()
     fireEvent.click(screen.getByRole('button', { name: 'Retry' }))
     expect(mode === 'auto-quant' ? state.refreshAutoQuantPreference : state.refreshAutoPredictionPreference).toHaveBeenCalledOnce()
   })
@@ -263,7 +263,7 @@ describe.each(['auto-quant', 'prediction'] as const)('%s navigation readiness',
   it('marks only its matching Studio as current', () => {
     focused.spec = { kind: 'harness-surface', params: { wsId: workspace.id, source: mode, capability: 'studio' } }
     renderNavigation()
-    const studio = screen.getByRole('button', { name: 'Open Studio' })
+    const studio = screen.getByRole('button', { name: 'Studio' })
     expect(studio.getAttribute('aria-current')).toBe('page')
     fireEvent.click(studio)
     expect(actions.openOrFocus).toHaveBeenCalledWith(focused.spec)
diff --git a/ui/src/components/workspace/ChatWorkspaceSection.tsx b/ui/src/components/workspace/ChatWorkspaceSection.tsx
index 43ea22cb8..874f7b9ed 100644
--- a/ui/src/components/workspace/ChatWorkspaceSection.tsx
+++ b/ui/src/components/workspace/ChatWorkspaceSection.tsx
@@ -8,8 +8,9 @@ import { useEffect, useId, useMemo, useRef, useState, type ReactElement } from '
 import { useTranslation } from 'react-i18next'
 import {
   AppWindow,
-  Binary,
-  Microscope,
+  ChartNoAxesCombined,
+  Radar,
+  Layers,
   ChevronDown,
   ChevronRight,
   Clock3,
@@ -407,7 +408,7 @@ export function ChatWorkspaceSection({
           title={harnessTitle}
           compact={compact}
           compactIcon={mode === 'chat' ? <MessageSquare size={15} strokeWidth={1.75} aria-hidden />
-            : mode === 'auto-quant' ? <Microscope size={15} strokeWidth={1.75} aria-hidden /> : <Binary size={15} strokeWidth={1.75} aria-hidden />}
+            : mode === 'auto-quant' ? <ChartNoAxesCombined size={17} strokeWidth={1.75} aria-hidden /> : <Radar size={17} strokeWidth={1.75} aria-hidden />}
           active={(isWsFocus && (compact || !selection?.sessionId)) || landingOwnsStatus || studioActive || (focused?.kind === 'workspace-details' && focused.params.source === source)}
           showNewAction={mode === 'chat' || Boolean(navigationLoaded && !navigationError && currentWorkspace)}
           newLabel={newLabel} onOpen={openLanding} menu={contextMenu}
@@ -467,7 +468,7 @@ export function ChatWorkspaceSection({
             size="lg"
             className="w-full justify-start px-2.5 text-muted-foreground"
           >
-            <AppWindow size={15} strokeWidth={2.05} className="shrink-0 text-primary" />
+            <Layers size={14} strokeWidth={1.5} className="shrink-0 text-muted-foreground" aria-hidden />
             <span className="text-body">{t('harnessSurface.studio')}</span>
           </Button>
         )}
diff --git a/ui/src/components/workspace/HarnessNavigationGroup.tsx b/ui/src/components/workspace/HarnessNavigationGroup.tsx
index 2456312d6..ffdb5b1e9 100644
--- a/ui/src/components/workspace/HarnessNavigationGroup.tsx
+++ b/ui/src/components/workspace/HarnessNavigationGroup.tsx
@@ -44,7 +44,7 @@ export function HarnessNavigationGroup({ title, compact, compactIcon, active, ne
           </button>}
         </div>
       </div>
-      <div className="ml-3 min-w-0 pb-2">{children}</div>
+      <div className="oa-harness-nav-children ml-3 min-w-0 pb-2">{children}</div>
     </section>
   )
 }
diff --git a/ui/src/components/workspace/HarnessWorkspaceEntry.tsx b/ui/src/components/workspace/HarnessWorkspaceEntry.tsx
index fbd5fcfee..2b743c202 100644
--- a/ui/src/components/workspace/HarnessWorkspaceEntry.tsx
+++ b/ui/src/components/workspace/HarnessWorkspaceEntry.tsx
@@ -1,8 +1,9 @@
-import { AppWindow, ArrowRight } from 'lucide-react'
+import { Layers, ArrowRight } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '../ui/button'
+import { SidebarChildRow, SidebarChildRowButton } from '../SidebarChildRow'
 
-/** Workspace tools, visually distinct from the recent conversation rows. */
+/** Shared Studio navigation for ready Harness workspaces. */
 export function HarnessWorkspaceEntry({ state, active, onOpen }: {
   state: 'ready' | 'select'
   active: boolean
@@ -24,15 +25,12 @@ export function HarnessWorkspaceEntry({ state, active, onOpen }: {
     )
   }
   return (
-    <div className="px-2 pb-1 pt-1">
-      <Button variant="outline" onClick={onOpen} aria-current={active ? 'page' : undefined}
-        className={`h-auto min-h-10 w-full justify-start gap-2 px-2.5 text-[13px] font-normal whitespace-normal shadow-none md:min-h-8 ${active
-          ? 'border-primary/35 bg-sidebar-accent text-sidebar-accent-foreground dark:border-primary/35 dark:bg-sidebar-accent'
-          : 'border-sidebar-border/70 bg-transparent text-sidebar-foreground/85 dark:border-sidebar-border/70 dark:bg-transparent'}`}>
-        <AppWindow className="size-3.5" aria-hidden />
-        <span className="min-w-0 flex-1 text-left">{t('harnessNavigation.openStudio')}</span>
-        <ArrowRight className="size-3.5 text-muted-foreground" aria-hidden />
-      </Button>
-    </div>
+    <SidebarChildRow active={active} className="oa-harness-studio-entry">
+      <SidebarChildRowButton onClick={onOpen} aria-current={active ? 'page' : undefined}
+        icon={<Layers className="size-3.5 text-muted-foreground" strokeWidth={1.5} />}>
+        <span className="min-w-0 flex-1 truncate">{t('harnessSurface.studio')}</span>
+        <ArrowRight className="oa-studio-arrow size-3.5 text-muted-foreground" aria-hidden />
+      </SidebarChildRowButton>
+    </SidebarChildRow>
   )
 }
diff --git a/ui/src/components/workspace/Sidebar.tsx b/ui/src/components/workspace/Sidebar.tsx
index 730965ac6..904045ee6 100644
--- a/ui/src/components/workspace/Sidebar.tsx
+++ b/ui/src/components/workspace/Sidebar.tsx
@@ -23,6 +23,7 @@ import { SelectionIndicator } from '../SelectionIndicator';
 import { projectHeadlessTaskPresentation } from './headless-task-presentation';
 import { Button } from '../ui/button';
 import { SidebarRow } from '../SidebarRow';
+import { SidebarChildRow, SidebarChildRowButton } from '../SidebarChildRow';
 
 /**
  * Workspace launcher sidebar.
@@ -730,18 +731,15 @@ export function SessionRow(props: SessionRowProps): ReactElement {
   if (props.failed) labelTone = 'text-muted-foreground/70';
   else if (isPaused && !headlessOccupying) labelTone = 'text-muted-foreground';
   return (
-    <div
+    <SidebarChildRow
       data-reorder-id={props.reorderId}
-      data-active={props.isActive}
+      active={props.isActive}
       aria-busy={headlessOccupying || opening || undefined}
-      className={`oa-session-row text-body group relative mx-1.5 flex min-h-9 items-center gap-1 rounded-md px-2 py-1.5 transition-colors ${
-        props.isActive ? 'bg-sidebar-accent text-sidebar-accent-foreground' : 'hover:bg-sidebar-accent/65'
-      }`}
+      className="oa-session-row"
     >
-      {props.isActive && <SelectionIndicator />}
-      <button
-        type="button"
-        className="oa-session-row-main flex-1 min-w-0 flex items-center gap-2 text-left outline-none disabled:cursor-default"
+      <SidebarChildRowButton
+        className="oa-session-row-main"
+        icon={opening ? <LoaderCircle size={14} className="animate-spin motion-reduce:animate-none" aria-hidden /> : <AgentBadgeGlyph agentId={s.agent} />}
         onClick={() => void enter()}
         disabled={opening}
         aria-label={selectLabel}
@@ -749,9 +747,6 @@ export function SessionRow(props: SessionRowProps): ReactElement {
       >
         {/* Runtime identity stays stable across Session state. The action at the
             right and the row treatment carry paused/running/selected state. */}
-        <span className="flex h-4 w-4 shrink-0 items-center justify-center text-foreground/80">
-          {opening ? <LoaderCircle size={14} className="animate-spin motion-reduce:animate-none" aria-hidden /> : <AgentBadgeGlyph agentId={s.agent} />}
-        </span>
         <span className="min-w-0 flex-1">
           <span
             title={display}
@@ -766,7 +761,7 @@ export function SessionRow(props: SessionRowProps): ReactElement {
           )}
           {openError && <span role="alert" className="block text-caption text-destructive break-words">{openError}</span>}
         </span>
-      </button>
+      </SidebarChildRowButton>
       {/* Right-aligned, always-visible state-as-action: an interactive running
           Session shows STOP, a paused one shows PLAY, and headless occupancy
           shows live activity that opens the single-writer explanation. */}
@@ -824,6 +819,6 @@ export function SessionRow(props: SessionRowProps): ReactElement {
           />
         </span>
       )}
-    </div>
+    </SidebarChildRow>
   );
 }
diff --git a/ui/src/components/workspace/api.spec.ts b/ui/src/components/workspace/api.spec.ts
index 0191e84d7..1758fb8a2 100644
--- a/ui/src/components/workspace/api.spec.ts
+++ b/ui/src/components/workspace/api.spec.ts
@@ -7,6 +7,16 @@ afterEach(() => {
 })
 
 describe('resumeSession', () => {
+  it.each([null, {}, { sessionId: 'pi-paused', wsId: 'chat-1', pid: null, startedAt: 1 }])('rejects malformed successful responses: %j', async (body) => {
+    vi.stubGlobal('fetch', vi.fn(async () => new Response(JSON.stringify(body))))
+    await expect(resumeSession('chat-1', 'pi-paused')).rejects.toThrow('invalid response')
+  })
+
+  it('accepts the Demo pid sentinel', async () => {
+    const body = { sessionId: 'pi-paused', wsId: 'chat-1', pid: 0, startedAt: 1 }
+    vi.stubGlobal('fetch', vi.fn(async () => new Response(JSON.stringify(body))))
+    await expect(resumeSession('chat-1', 'pi-paused')).resolves.toEqual(body)
+  })
   it('rejects with the server diagnostic instead of resolving an empty Session', async () => {
     const fetchMock = vi.fn(async () => new Response(JSON.stringify({
       error: 'agent_credential_failed',
diff --git a/ui/src/components/workspace/api.ts b/ui/src/components/workspace/api.ts
index 280efa7a2..c69133c8d 100644
--- a/ui/src/components/workspace/api.ts
+++ b/ui/src/components/workspace/api.ts
@@ -1255,7 +1255,13 @@ export async function resumeSession(
     const body = (await res.json().catch(() => null)) as { error?: string; message?: string } | null;
     throw new Error(body?.message ?? body?.error ?? `resume session failed: ${res.status}`);
   }
-  return (await res.json()) as SpawnedSession;
+  const body = await res.json().catch(() => null) as SpawnedSession | null;
+  if (!body || body.sessionId !== sessionId || body.wsId !== wsId
+    || typeof body.pid !== 'number' || !Number.isFinite(body.pid)
+    || typeof body.startedAt !== 'number' || !Number.isFinite(body.startedAt)) {
+    throw new Error('Unable to resume this Session: the server returned an invalid response. Please try again.');
+  }
+  return body;
 }
 
 export interface PausedSessionRuntimeUpdate {
diff --git a/ui/src/demo/handlers/workspaces-resume.spec.ts b/ui/src/demo/handlers/workspaces-resume.spec.ts
index 4df42d5bb..c5f7dbdf0 100644
--- a/ui/src/demo/handlers/workspaces-resume.spec.ts
+++ b/ui/src/demo/handlers/workspaces-resume.spec.ts
@@ -21,6 +21,23 @@ afterEach(() => {
 afterAll(() => server.close())
 
 describe('demo Workspace resume handlers', () => {
+  it('restores a paused Session and retains running state across refreshes', async () => {
+    const url = `${baseUrl}/api/workspaces/${DEMO_CHAT_WORKSPACE_ID}/sessions/demo-chat-o1/resume`
+    const response = await fetch(url, { method: 'POST' })
+    expect(response.status).toBe(200)
+    const result = await response.json()
+    expect(result).toMatchObject({ sessionId: 'demo-chat-o1', wsId: DEMO_CHAT_WORKSPACE_ID, pid: 0, surface: 'terminal' })
+    expect(result.startedAt).toEqual(expect.any(Number))
+    const refreshed = await fetch(`${baseUrl}/api/workspaces`).then((res) => res.json())
+    expect(refreshed.workspaces.find((ws: { id: string }) => ws.id === DEMO_CHAT_WORKSPACE_ID).sessions)
+      .toContainEqual(expect.objectContaining({ id: 'demo-chat-o1', state: 'running', pid: 0 }))
+    expect(await fetch(url, { method: 'POST' }).then((res) => res.json())).toMatchObject({ startedAt: result.startedAt })
+  })
+
+  it('rejects unknown Sessions instead of returning a null success', async () => {
+    const response = await fetch(`${baseUrl}/api/workspaces/${DEMO_CHAT_WORKSPACE_ID}/sessions/missing/resume`, { method: 'POST' })
+    expect(response.status).toBe(404)
+  })
   it('registers Issue workspaces and materializes a resumable run conversation', async () => {
     const before = await fetch(`${baseUrl}/api/workspaces`).then((response) => response.json())
     expect(before.workspaces.map((workspace: { id: string }) => workspace.id)).toEqual(
diff --git a/ui/src/demo/handlers/workspaces.ts b/ui/src/demo/handlers/workspaces.ts
index 2fd45ff02..0d52347fd 100644
--- a/ui/src/demo/handlers/workspaces.ts
+++ b/ui/src/demo/handlers/workspaces.ts
@@ -53,6 +53,7 @@ const demoManagerSession = {
 
 let demoManagerMessages: unknown[] = []
 let demoQuickChatSequence = 0
+const demoResumedSessions = new Map<string, SessionRecord>()
 let demoWorkspaceCreateSequence = 0
 let demoAutoQuantDefaultWorkspaceId: string | null = DEMO_AUTO_QUANT_WORKSPACE_ID
 let demoAutoPredictionDefaultWorkspaceId: string | null = DEMO_AUTO_PREDICTION_WORKSPACE_ID
@@ -97,11 +98,12 @@ export function resetDemoWorkspaceWebPiState(): void {
     const workspace = demoWorkspaces[index]!
     demoWorkspaces[index] = {
       ...workspace,
-      sessions: workspace.sessions.filter((session) =>
+      sessions: workspace.sessions.map((session) => demoResumedSessions.get(webPiKey(workspace.id, session.id)) ?? session).filter((session) =>
         !session.id.startsWith('demo-quick-chat-')
         && !session.id.startsWith('run-demo-resume-')),
     }
   }
+  demoResumedSessions.clear()
 }
 
 function setDemoWebPiSession(seed: DemoWebPiSeed): WebPiSnapshot {
@@ -1311,7 +1313,28 @@ export const workspacesHandlers = [
     }
     return HttpResponse.json({ session: updatedSession })
   }),
-  http.post('/api/workspaces/:id/sessions/:sid/resume', () => HttpResponse.json(null)),
+  http.post('/api/workspaces/:id/sessions/:sid/resume', ({ params }) => {
+    const workspace = demoWorkspaces.find((candidate) => candidate.id === String(params.id))
+    const session = workspace?.sessions.find((candidate) => candidate.id === String(params.sid))
+    if (!workspace || !session) {
+      return HttpResponse.json({ error: 'not_found', message: 'This demo Session is unavailable.' }, { status: 404 })
+    }
+    const key = webPiKey(workspace.id, session.id)
+    if (!demoResumedSessions.has(key)) demoResumedSessions.set(key, session)
+    // Demo never starts a PTY; pid 0 represents the existing terminal preview.
+    const updated: SessionRecord = {
+      ...session, state: 'running', surface: 'terminal', pid: 0,
+      startedAt: session.state === 'running' ? (session.startedAt ?? Date.now()) : Date.now(),
+      lastActiveAt: new Date().toISOString(),
+    }
+    const index = demoWorkspaces.indexOf(workspace)
+    demoWorkspaces[index] = { ...workspace, sessions: workspace.sessions.map((row) => row.id === session.id ? updated : row) }
+    return HttpResponse.json({
+      sessionId: updated.id, wsId: workspace.id, name: updated.name,
+      pid: updated.pid, startedAt: updated.startedAt, agent: updated.agent,
+      resumeId: updated.resumeId, title: updated.title ?? null, surface: 'terminal',
+    })
+  }),
   http.delete('/api/workspaces/:id/sessions/:sid', ({ params }) => {
     const wsId = String(params.id)
     const sessionId = String(params.sid)
diff --git a/ui/src/index.css b/ui/src/index.css
index 5fe66c943..671598ccb 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -161,6 +161,43 @@ body {
    reserve ambient loops for real live/loading state. Pointer cursors are global
    because a clickable control should never make the user guess. */
 
+/* Unread is a quiet informational cue, not an alarm or selected state.
+   Shared by the global Inbox count and both Inbox list presentations. */
+.oa-inbox-unread-count {
+  color: color-mix(in srgb, var(--info) 60%, var(--sidebar-foreground));
+  background: color-mix(in srgb, var(--info) 12%, var(--sidebar));
+}
+.oa-inbox-unread-dot {
+  background: color-mix(in srgb, var(--info) 70%, var(--muted-foreground));
+}
+
+/* Expanded desktop navigation has one inset per hierarchy level. Keep these
+   density rules out of the compact rail and touch navigation. */
+@media (pointer: coarse) {
+  .oa-sidebar-child-row { min-height: 40px; }
+}
+@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
+  #activity-bar:not([data-rail-layout="compact"]) .oa-nav-item {
+    min-height: 30px;
+    padding-inline: 8px;
+    gap: 8px;
+  }
+  #activity-bar .oa-harness-nav-header { min-height: 30px; }
+  #activity-bar .oa-harness-nav-actions > button { height: 28px; }
+  #activity-bar .oa-harness-nav-children { margin-left: 8px; padding-bottom: 4px; }
+  #activity-bar .oa-harness-nav-children .oa-sidebar-child-row {
+    margin-inline: 0;
+    min-height: 30px;
+    padding-block: 4px;
+  }
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .oa-harness-studio-entry .oa-studio-arrow { opacity: 0; }
+  .oa-harness-studio-entry > button:hover .oa-studio-arrow,
+  .oa-harness-studio-entry > button:focus-visible .oa-studio-arrow { opacity: 1; }
+}
+
 :where(button, [role="button"], summary, a[href], select):not(:disabled):not([aria-disabled="true"]) {
   cursor: pointer;
 }
@@ -370,7 +407,7 @@ body {
   box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--foreground) 3.5%, transparent);
 }
 
-.oa-session-row:has(.oa-session-row-main:focus-visible) {
+.oa-sidebar-child-row:has(.oa-sidebar-child-row-main:focus-visible) {
   background: var(--accent);
   box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--foreground) 12%, transparent);
 }

From 604e25d918c80a12dfe6d581366b744643d53da1 Mon Sep 17 00:00:00 2001
From: Ame <123734885+luokerenx4@users.noreply.github.com>
Date: Sun, 6 Sep 2026 22:54:34 +0800
Subject: [PATCH 4/4] Align demo resume state with the upstream Web key helper

---
 ui/src/demo/handlers/workspaces.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/demo/handlers/workspaces.ts b/ui/src/demo/handlers/workspaces.ts
index eededbd40..ccbb264fd 100644
--- a/ui/src/demo/handlers/workspaces.ts
+++ b/ui/src/demo/handlers/workspaces.ts
@@ -106,7 +106,7 @@ export function resetDemoWorkspaceWebState(): void {
     const workspace = demoWorkspaces[index]!
     demoWorkspaces[index] = {
       ...workspace,
-      sessions: workspace.sessions.map((session) => demoResumedSessions.get(webPiKey(workspace.id, session.id)) ?? session).filter((session) =>
+      sessions: workspace.sessions.map((session) => demoResumedSessions.get(webKey(workspace.id, session.id)) ?? session).filter((session) =>
         !session.id.startsWith('demo-quick-chat-')
         && !session.id.startsWith('run-demo-resume-')),
     }
@@ -1392,7 +1392,7 @@ export const workspacesHandlers = [
     if (!workspace || !session) {
       return HttpResponse.json({ error: 'not_found', message: 'This demo Session is unavailable.' }, { status: 404 })
     }
-    const key = webPiKey(workspace.id, session.id)
+    const key = webKey(workspace.id, session.id)
     if (!demoResumedSessions.has(key)) demoResumedSessions.set(key, session)
     // Demo never starts a PTY; pid 0 represents the existing terminal preview.
     const updated: SessionRecord = {