diff --git a/packages/app/src/components/dialog-delete-session.tsx b/packages/app/src/components/dialog-delete-session.tsx
new file mode 100644
index 000000000..90c169a87
--- /dev/null
+++ b/packages/app/src/components/dialog-delete-session.tsx
@@ -0,0 +1,52 @@
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { Button } from "@opencode-ai/ui/button"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { createMemo, createSignal } from "solid-js"
+import { useLanguage } from "@/context/language"
+import { useSync } from "@/context/sync"
+import { sessionTitle } from "@/utils/session-title"
+
+export function DialogDeleteSession(props: {
+  sessionID: string
+  onConfirm: () => Promise<void> | void
+}) {
+  const sync = useSync()
+  const language = useLanguage()
+  const dialog = useDialog()
+  const [deleting, setDeleting] = createSignal(false)
+
+  const name = createMemo(
+    () => sessionTitle(sync.session.get(props.sessionID)?.title) ?? language.t("command.session.new"),
+  )
+
+  const handleDelete = async () => {
+    if (deleting()) return
+    setDeleting(true)
+    try {
+      await props.onConfirm()
+      dialog.close()
+    } finally {
+      setDeleting(false)
+    }
+  }
+
+  return (
+    <Dialog title={language.t("session.delete.title")} fit>
+      <div class="flex flex-col gap-4 pl-6 pr-2.5 pb-3">
+        <div class="flex flex-col gap-1">
+          <span class="text-13-regular text-text-strong">
+            {language.t("session.delete.confirm", { name: name() })}
+          </span>
+        </div>
+        <div class="flex justify-end gap-2">
+          <Button variant="ghost" size="large" onClick={() => dialog.close()} disabled={deleting()}>
+            {language.t("common.cancel")}
+          </Button>
+          <Button variant="primary" size="large" onClick={handleDelete} disabled={deleting()}>
+            {language.t("common.delete")}
+          </Button>
+        </div>
+      </div>
+    </Dialog>
+  )
+}
diff --git a/packages/app/src/components/dialog-select-model.tsx b/packages/app/src/components/dialog-select-model.tsx
index 39b0c3dc8..a8577228d 100644
--- a/packages/app/src/components/dialog-select-model.tsx
+++ b/packages/app/src/components/dialog-select-model.tsx
@@ -82,7 +82,7 @@ const ModelList: Component<{
           <div class="w-full min-w-0 flex items-center gap-x-2 text-13-regular text-left">
             <span class="min-w-0 truncate">{i.name}</span>
             <For each={visible}>
-              {(tag) => <Tag class="shrink-0 rounded-full!">{language.t(`model.tag.${tag}`)}</Tag>}
+              {(tag) => <Tag class="shrink-0">{language.t(`model.tag.${tag}`)}</Tag>}
             </For>
           </div>
         )
@@ -166,8 +166,8 @@ export function ModelSelectorPopover(props: {
       </Kobalte.Trigger>
       <Kobalte.Portal>
         <Kobalte.Content
-          class="w-72 h-80 flex flex-col p-2 border border-border-base bg-surface-raised-stronger-non-alpha shadow-md z-50 outline-none overflow-hidden"
-          style={{ "border-radius": "16px" }}
+          class="w-72 h-80 flex flex-col bg-surface-raised-stronger-non-alpha z-50 outline-none overflow-hidden"
+          style={{ "border-radius": "14px", "box-shadow": "var(--shadow-floating)" }}
           onEscapeKeyDown={(event) => {
             close("escape")
             event.preventDefault()
@@ -196,9 +196,9 @@ export function ModelSelectorPopover(props: {
               <div class="flex items-center gap-1">
                 <Tooltip placement="top" value={language.t("command.provider.connect")}>
                   <IconButton
-                    icon="plus-small"
+                    icon="plus"
                     variant="ghost"
-                    iconSize="normal"
+                    iconSize="small"
                     class="size-6"
                     aria-label={language.t("command.provider.connect")}
                     onClick={handleConnectProvider}
@@ -208,7 +208,7 @@ export function ModelSelectorPopover(props: {
                   <IconButton
                     icon="sliders"
                     variant="ghost"
-                    iconSize="normal"
+                    iconSize="small"
                     class="size-6"
                     aria-label={language.t("dialog.model.manage")}
                     onClick={handleManage}
diff --git a/packages/app/src/components/prompt-input.tsx b/packages/app/src/components/prompt-input.tsx
index 47cceb3d5..7181ed608 100644
--- a/packages/app/src/components/prompt-input.tsx
+++ b/packages/app/src/components/prompt-input.tsx
@@ -27,6 +27,7 @@ import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { ModelSelectorPopover } from "@/components/dialog-select-model"
 import { WorkspaceChip } from "@/components/prompt-input/workspace-chip"
+import { SessionContextUsage } from "@/components/session-context-usage"
 import { translateVariant } from "./prompt-input/variant-label"
 import { SendButton } from "./prompt-input/send-button"
 import { useProviders } from "@/hooks/use-providers"
@@ -1126,7 +1127,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
               as="div"
               variant="ghost"
               size="normal"
-              class="h-[28px]! min-w-0 w-44 px-3 justify-start! text-13-medium! text-text-base group rounded-full! border! border-border-strong-base! transition-colors hover:bg-surface-base-hover"
+              class="h-[28px]! min-w-0 w-44 px-1.5 justify-start! text-13-regular! text-text-base group rounded-xl! transition-colors hover:bg-surface-base-hover"
               style={triggerStyle()}
               onClick={() => {
                 void import("@/components/dialog-select-model-unpaid").then((x) => {
@@ -1163,7 +1164,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
               size: "normal",
               style: triggerStyle(),
               class:
-                "h-[28px]! min-w-0 w-44 px-3 justify-start! text-13-medium! text-text-base group rounded-full! border! border-border-strong-base! transition-colors hover:bg-surface-base-hover",
+                "h-[28px]! min-w-0 w-44 px-1.5 justify-start! text-13-regular! text-text-base group rounded-xl! transition-colors hover:bg-surface-base-hover",
               "data-action": "prompt-model",
             }}
             onClose={restoreFocus}
@@ -1207,21 +1208,23 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
               "aria-haspopup": "menu",
               style: triggerStyle(),
               class:
-                "h-[28px] px-3 max-w-[140px] inline-flex items-center gap-1.5 rounded-full border border-border-strong-base text-13-medium text-text-base transition-colors hover:bg-surface-base-hover",
+                "h-[28px] px-2 max-w-[160px] inline-flex items-center gap-1.5 rounded-xl text-13-regular text-text-base transition-colors hover:bg-surface-base-hover",
             } as any
           }
           trigger={
             <>
-              <span class="truncate leading-none">
+              <span class="truncate">
                 {translateVariant(language.t, local.model.variant.current() ?? "default")}
               </span>
               <Icon name="chevron-down" size="small" class="text-text-weak" />
             </>
           }
-          class="min-w-32 border border-border-base bg-surface-raised-stronger-non-alpha p-2 shadow-md"
-          style={{ "border-radius": "16px" }}
+          class="min-w-32 bg-surface-raised-stronger-non-alpha"
         >
           <div role="menu">
+            <div class="px-2 pt-0.5 pb-2 text-13-regular text-text-weak">
+              {language.t("prompt.variant.popover.title")}
+            </div>
             <For each={variants()}>
               {(variant) => {
                 const active = createMemo(() => (local.model.variant.current() ?? "default") === variant)
@@ -1230,8 +1233,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                     type="button"
                     role="menuitemradio"
                     aria-checked={active()}
-                    class="flex w-full items-center justify-between gap-2 rounded-md px-2 py-1.5 text-left text-13-medium text-text-strong outline-none hover:bg-surface-raised-base-hover focus-visible:bg-surface-raised-base-hover"
-                    classList={{ "font-medium": active() }}
+                    class="flex w-full items-center justify-between gap-2 rounded-md px-2 py-1.5 text-left text-13-regular text-text-strong outline-none hover:bg-surface-raised-base-hover focus-visible:bg-surface-raised-base-hover"
                     onClick={() => {
                       local.model.variant.set(variant === "default" ? undefined : variant)
                       setVariantOpen(false)
@@ -1435,7 +1437,6 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
         onSubmit={handleSubmit}
         classList={{
           "group/prompt-input": true,
-          "focus-within:shadow-xs-border": true,
           "border-icon-info-active border-dashed": store.draggingType !== null,
           [props.class ?? ""]: !!props.class,
         }}
@@ -1479,7 +1480,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
           }}
         >
           <div
-            class="relative min-h-[120px] max-h-[240px] overflow-y-auto no-scrollbar"
+            class="relative min-h-[100px] max-h-[240px] overflow-y-auto no-scrollbar"
             ref={(el) => (scrollRef = el)}
             style={{ "scroll-padding-bottom": space }}
           >
@@ -1566,7 +1567,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                   data-action="prompt-attach"
                   type="button"
                   variant="ghost"
-                  class="size-7 shrink-0 p-0"
+                  class="size-7 shrink-0 p-0 rounded-xl!"
                   style={buttons()}
                   onClick={pick}
                   disabled={store.mode !== "normal"}
@@ -1586,6 +1587,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
             </div>
 
             <div class="flex items-center gap-2 pointer-events-auto">
+              <SessionContextUsage placement="top" />
               <Tooltip placement="top" inactive={!working() && blank()} value={tip()}>
                 <SendButton
                   stopping={stopping()}
diff --git a/packages/app/src/components/prompt-input/workspace-chip.tsx b/packages/app/src/components/prompt-input/workspace-chip.tsx
index 5e6752703..4410e4248 100644
--- a/packages/app/src/components/prompt-input/workspace-chip.tsx
+++ b/packages/app/src/components/prompt-input/workspace-chip.tsx
@@ -63,27 +63,26 @@ export function WorkspaceChip(props: { style?: JSX.CSSProperties | string } = {}
           "aria-label": language.t("workspace.chip.ariaLabel"),
           "aria-haspopup": "menu",
           class:
-            "h-[28px] px-3 inline-flex items-center gap-1.5 rounded-full border border-border-strong-base text-13-medium text-text-base transition-colors hover:bg-surface-base-hover",
+            "h-[28px] px-1.5 inline-flex items-center gap-1.5 rounded-xl text-13-regular text-text-base transition-colors hover:bg-surface-base-hover",
           style: props.style,
         } as any
       }
       trigger={
         <>
           <Icon name="folder" size="small" class="shrink-0 text-text-weak" />
-          <span class="max-w-[120px] truncate leading-none">{label()}</span>
+          <span class="max-w-[120px] truncate">{label()}</span>
           <Icon name="chevron-down" size="small" class="shrink-0 text-text-weak" />
         </>
       }
-      class="min-w-56 max-w-xs border border-border-base bg-surface-raised-stronger-non-alpha p-2 shadow-md"
-      style={{ "border-radius": "16px" }}
+      class="min-w-56 max-w-xs bg-surface-raised-stronger-non-alpha"
     >
       <div role="menu" aria-label={language.t("workspace.chip.popover.title")}>
-        <div class="px-2 pt-0.5 pb-2 text-11 font-medium text-text-weak">
+        <div class="px-2 pt-0.5 pb-2 text-13-regular text-text-weak">
           {language.t("workspace.chip.popover.title")}
         </div>
         <Show
           when={workspaces().length > 0}
-          fallback={<div class="px-2 py-2 text-12 text-text-weak">{language.t("workspace.chip.empty")}</div>}
+          fallback={<div class="px-2 py-2 text-13-regular text-text-weak">{language.t("workspace.chip.empty")}</div>}
         >
           <For each={workspaces()}>
             {(workspace) => {
@@ -96,17 +95,14 @@ export function WorkspaceChip(props: { style?: JSX.CSSProperties | string } = {}
                   type="button"
                   role="menuitemradio"
                   aria-checked={active()}
-                  class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-13-medium outline-none hover:bg-surface-raised-base-hover focus-visible:bg-surface-raised-base-hover"
+                  class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-13-regular outline-none hover:bg-surface-raised-base-hover focus-visible:bg-surface-raised-base-hover"
                   onClick={() => {
                     navigate(`/${base64Encode(workspace.path)}/session`)
                     setOpen(false)
                   }}
                 >
                   <Icon name="folder" size="small" class="shrink-0 text-text-weak" />
-                  <span
-                    class="min-w-0 flex-1 truncate text-text-strong"
-                    classList={{ "font-medium": active() }}
-                  >
+                  <span class="min-w-0 flex-1 truncate text-text-strong">
                     {getFilename(workspace.path)}
                   </span>
                   <Show when={active()}>
@@ -122,7 +118,7 @@ export function WorkspaceChip(props: { style?: JSX.CSSProperties | string } = {}
             type="button"
             role="menuitem"
             data-action="workspace-chip-add"
-            class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-13-medium text-text-base outline-none hover:bg-surface-raised-base-hover focus-visible:bg-surface-raised-base-hover"
+            class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-13-regular text-text-base outline-none hover:bg-surface-raised-base-hover focus-visible:bg-surface-raised-base-hover"
             onClick={() => {
               setOpen(false)
               layoutPage.openProject()
diff --git a/packages/app/src/components/session-context-usage.tsx b/packages/app/src/components/session-context-usage.tsx
index 5675c9922..bd84e7928 100644
--- a/packages/app/src/components/session-context-usage.tsx
+++ b/packages/app/src/components/session-context-usage.tsx
@@ -75,7 +75,7 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
             <Button
               type="button"
               variant="ghost"
-              class="size-6"
+              class="size-7 shrink-0 p-0 rounded-xl!"
               onClick={openContext}
               aria-label={language.t("context.usage.view")}
             >
diff --git a/packages/app/src/components/titlebar.tsx b/packages/app/src/components/titlebar.tsx
index 03fab2ac8..e02e67b08 100644
--- a/packages/app/src/components/titlebar.tsx
+++ b/packages/app/src/components/titlebar.tsx
@@ -103,7 +103,7 @@ export function Titlebar() {
           <div class="h-full shrink-0" style={{ width: `${72 / zoom()}px` }} />
           <div class="xl:hidden w-10 shrink-0 flex items-center justify-center">
             <IconButton
-              icon="menu"
+              icon={layout.mobileSidebar.opened() ? "sidebar-active" : "sidebar"}
               variant="ghost"
               class="titlebar-icon rounded-md"
               onClick={layout.mobileSidebar.toggle}
@@ -115,7 +115,7 @@ export function Titlebar() {
         <Show when={!mac()}>
           <div class="xl:hidden w-[48px] shrink-0 flex items-center justify-center">
             <IconButton
-              icon="menu"
+              icon={layout.mobileSidebar.opened() ? "sidebar-active" : "sidebar"}
               variant="ghost"
               class="titlebar-icon rounded-md"
               onClick={layout.mobileSidebar.toggle}
@@ -141,17 +141,16 @@ export function Titlebar() {
               <Icon size="small" name={layout.sidebar.opened() ? "sidebar-active" : "sidebar"} />
             </Button>
           </TooltipKeybind>
-          <div class="hidden xl:flex items-center shrink-0">
+          <div class="flex items-center shrink-0">
             <Show when={params.dir}>
               <div
                 class="flex items-center shrink-0 w-8"
                 aria-hidden={layout.sidebar.opened() ? "true" : undefined}
               >
                 <div
-                  class="transition-opacity"
+                  class="transition-opacity duration-120 ease-out opacity-100"
                   classList={{
-                    "opacity-100 duration-120 ease-out": !layout.sidebar.opened(),
-                    "opacity-0 duration-120 ease-in delay-0 pointer-events-none": layout.sidebar.opened(),
+                    "xl:opacity-0 xl:ease-in xl:delay-0 xl:pointer-events-none": layout.sidebar.opened(),
                   }}
                 >
                   <TooltipKeybind
diff --git a/packages/app/src/context/layout.tsx b/packages/app/src/context/layout.tsx
index f791b08ee..77ad5b5df 100644
--- a/packages/app/src/context/layout.tsx
+++ b/packages/app/src/context/layout.tsx
@@ -757,6 +757,7 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
         },
       },
       rightPanel: {
+        opened: createMemo(() => store.rightPanel?.opened ?? false),
         width: createMemo(() => clampRightPanelWidth(store.rightPanel?.width)),
         resize(width: number) {
           setStore("rightPanel", "width", clampRightPanelWidth(width))
diff --git a/packages/app/src/context/platform.tsx b/packages/app/src/context/platform.tsx
index b47d80680..21e971e4b 100644
--- a/packages/app/src/context/platform.tsx
+++ b/packages/app/src/context/platform.tsx
@@ -103,6 +103,7 @@ export type Platform = {
     sessionID: string,
     directory: string,
     defaultName?: string,
+    title?: string,
   ): Promise<{ ok: true; path: string } | { ok: false; error: string }>
 
   /** Storage mechanism, defaults to localStorage */
diff --git a/packages/app/src/context/sync.tsx b/packages/app/src/context/sync.tsx
index 063a2c288..a60a5e3f6 100644
--- a/packages/app/src/context/sync.tsx
+++ b/packages/app/src/context/sync.tsx
@@ -616,18 +616,6 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
           })
         },
         more: createMemo(() => current()[0].session.length >= current()[0].limit),
-        archive: async (sessionID: string) => {
-          const directory = sdk.directory
-          const client = sdk.client
-          const [, setStore] = globalSync.child(directory)
-          await client.session.update({ sessionID, time: { archived: Date.now() } })
-          setStore(
-            produce((draft) => {
-              const match = Binary.search(draft.session, sessionID, (s) => s.id)
-              if (match.found) draft.session.splice(match.index, 1)
-            }),
-          )
-        },
       },
       absolute,
       get directory() {
diff --git a/packages/app/src/i18n/en.ts b/packages/app/src/i18n/en.ts
index 3fe68ea01..3be1bee58 100644
--- a/packages/app/src/i18n/en.ts
+++ b/packages/app/src/i18n/en.ts
@@ -32,7 +32,6 @@ export const dict = {
   "command.session.next": "Next session",
   "command.session.previous.unseen": "Previous unread session",
   "command.session.next.unseen": "Next unread session",
-  "command.session.archive": "Archive session",
 
   "command.palette": "Command palette",
 
@@ -487,8 +486,8 @@ export const dict = {
   "toast.update.action.installRestart": "Install and restart",
   "toast.update.action.notYet": "Not yet",
 
-  "error.page.title": "Something went wrong",
-  "error.page.description": "An error occurred while loading the application.",
+  "error.page.title": "Something broke",
+  "error.page.description": "A restart usually fixes this. If not, send us the details.",
   "error.page.details.label": "Error Details",
   "error.page.action.restart": "Restart",
   "error.page.action.checking": "Checking...",
@@ -618,7 +617,7 @@ export const dict = {
   "session.todo.title": "Todos",
   "session.todo.collapse": "Collapse",
   "session.todo.expand": "Expand",
-  "session.todo.progress": "{{done}} of {{total}} todos completed",
+  "session.todo.progress": "Task {{current}} of {{total}}",
   "session.todo.cancelled": "Cancelled",
   "session.question.progress": "{{current}} of {{total}} questions",
   "session.followupDock.summary.one": "{{count}} queued message",
@@ -710,7 +709,7 @@ export const dict = {
   "session.share.copy.copied": "Copied",
   "session.share.copy.copyLink": "Copy link",
 
-  "session.export.action.export": "Export session log",
+  "session.export.action.export": "Export session",
   "session.export.success": "Session exported",
   "session.export.error.failed": "Export failed",
 
@@ -735,7 +734,6 @@ export const dict = {
   "common.learnMore": "Learn more",
   "common.rename": "Rename",
   "common.reset": "Reset",
-  "common.archive": "Archive",
   "common.delete": "Delete",
   "common.close": "Close",
   "common.edit": "Edit",
@@ -1097,6 +1095,7 @@ export const dict = {
   "workspace.chip.empty": "No workspaces available",
   "workspace.chip.popover.title": "Workspaces",
   "workspace.chip.add": "Add workspace",
+  "prompt.variant.popover.title": "Reasoning effort",
   "about.title": "About PawWork",
   "about.version": "Version",
   "about.build": "Build",
diff --git a/packages/app/src/i18n/zh.ts b/packages/app/src/i18n/zh.ts
index 491744590..f853d60fb 100644
--- a/packages/app/src/i18n/zh.ts
+++ b/packages/app/src/i18n/zh.ts
@@ -39,7 +39,6 @@ export const dict = {
   "command.session.next": "下一个会话",
   "command.session.previous.unseen": "上一个未读会话",
   "command.session.next.unseen": "下一个未读会话",
-  "command.session.archive": "归档会话",
 
   "command.palette": "命令面板",
 
@@ -474,8 +473,8 @@ export const dict = {
   "toast.update.action.installRestart": "安装并重启",
   "toast.update.action.notYet": "稍后",
 
-  "error.page.title": "出了点问题",
-  "error.page.description": "加载应用程序时发生错误。",
+  "error.page.title": "应用出错了",
+  "error.page.description": "重启通常能解决。如果不行，把错误详情发给我们看看。",
   "error.page.details.label": "错误详情",
   "error.page.action.restart": "重启",
   "error.page.action.checking": "检查中...",
@@ -646,7 +645,7 @@ export const dict = {
   "session.share.copy.copied": "已复制",
   "session.share.copy.copyLink": "复制链接",
 
-  "session.export.action.export": "导出会话日志",
+  "session.export.action.export": "导出会话",
   "session.export.success": "会话已导出",
   "session.export.error.failed": "导出失败",
 
@@ -669,7 +668,6 @@ export const dict = {
   "common.learnMore": "了解更多",
   "common.rename": "重命名",
   "common.reset": "重置",
-  "common.archive": "归档",
   "common.delete": "删除",
   "common.close": "关闭",
   "common.edit": "编辑",
@@ -1001,7 +999,7 @@ export const dict = {
   "session.review.noVcs.createGit.description": "在此项目中跟踪、审查和撤消更改",
   "session.review.noVcs.createGit.actionLoading": "正在创建 Git 仓库...",
   "session.review.noVcs.createGit.action": "创建 Git 仓库",
-  "session.todo.progress": "已完成 {{done}} 个任务（共 {{total}} 个）",
+  "session.todo.progress": "第 {{current}} 项任务 / 共 {{total}} 项",
   "session.todo.cancelled": "已取消",
   "session.question.progress": "{{current}}/{{total}} 个问题",
   "session.header.open.finder": "访达",
@@ -1045,6 +1043,7 @@ export const dict = {
   "workspace.chip.empty": "暂无可用工作目录",
   "workspace.chip.popover.title": "工作目录",
   "workspace.chip.add": "添加工作目录",
+  "prompt.variant.popover.title": "思考强度",
   "common.key.ctrl": "Ctrl",
   "common.key.alt": "Alt",
   "common.key.shift": "Shift",
diff --git a/packages/app/src/index.css b/packages/app/src/index.css
index 1cc502add..7baa100de 100644
--- a/packages/app/src/index.css
+++ b/packages/app/src/index.css
@@ -88,10 +88,36 @@
     --sidebar: #181818;
   }
 
+  /* Register --sidebar-width as a length so the titlebar gradient interpolates
+     smoothly when sidebar toggles open/close. */
+  @property --sidebar-width {
+    syntax: "<length>";
+    inherits: true;
+    initial-value: 0px;
+  }
+
+  @property --right-panel-width {
+    syntax: "<length>";
+    inherits: true;
+    initial-value: 0px;
+  }
+
+  @property --composer-dock-height {
+    syntax: "<length>";
+    inherits: true;
+    initial-value: 140px;
+  }
+
+  /* Mac native unified-chrome pattern: titlebar bg matches whatever surface
+     sits below it on each side. Left of --sidebar-width = sidebar bg (seamless
+     vertical extension of the sidebar panel up through the titlebar). Right
+     = main bg. The only visual seam is the sidebar/main vertical divider,
+     which now runs continuously from window top to bottom.
+     The xl+ gradient form lives inside the existing 1280px media block below
+     to satisfy shell-frame-contract.test.ts CSS rule ordering. */
   [data-component="titlebar-shell"][data-platform="desktop"][data-os="macos"] {
     padding-inline: 8px;
-    background: var(--shell-surface-raised);
-    border-bottom: 1px solid var(--shell-titlebar-border);
+    background: var(--background-base);
   }
 
   [data-component="titlebar-shell"][data-platform="desktop"][data-os="macos"] [data-shell-slot="left-portal"] {
@@ -143,9 +169,18 @@
       overflow: hidden;
     }
 
-    [data-component="desktop-shell-main"][data-platform="desktop"] {
-      background: color-mix(in srgb, var(--shell-background-base) 92%, white 8%);
+    [data-component="titlebar-shell"][data-platform="desktop"][data-os="macos"] {
+      background: linear-gradient(
+        to right,
+        var(--background-weak) 0,
+        var(--background-weak) var(--sidebar-width, 0px),
+        var(--background-base) var(--sidebar-width, 0px),
+        var(--background-base) calc(100% - var(--right-panel-width, 0px)),
+        var(--right-panel-divider, transparent) calc(100% - var(--right-panel-width, 0px)),
+        var(--right-panel-divider, transparent) calc(100% - var(--right-panel-width, 0px) + 1px),
+        var(--background-base) calc(100% - var(--right-panel-width, 0px) + 1px),
+        var(--background-base) 100%
+      );
     }
-
   }
 }
diff --git a/packages/app/src/pages/error.tsx b/packages/app/src/pages/error.tsx
index 63c0ec94e..1815506b4 100644
--- a/packages/app/src/pages/error.tsx
+++ b/packages/app/src/pages/error.tsx
@@ -1,5 +1,4 @@
 import { TextField } from "@opencode-ai/ui/text-field"
-import { Logo } from "@opencode-ai/ui/logo"
 import { Button } from "@opencode-ai/ui/button"
 import { Component, Show, createMemo, onMount } from "solid-js"
 import { createStore } from "solid-js/store"
@@ -91,6 +90,7 @@ export const ErrorPage: Component<ErrorPageProps> = (props) => {
   async function reportProblem() {
     if (!platform.reportProblem) {
       setStore({
+        reportConfirmOpen: false,
         actionError: undefined,
         actionMessage: language.t("error.page.report.unavailable"),
         feedbackUrl: undefined,
@@ -116,110 +116,163 @@ export const ErrorPage: Component<ErrorPageProps> = (props) => {
         })
       })
       .finally(() => {
-        setStore("reporting", false)
+        setStore({ reporting: false, reportConfirmOpen: false })
       })
   }
 
   return (
-    <div class="relative flex-1 h-screen w-screen min-h-0 flex flex-col items-center justify-center bg-background-base font-sans">
-      <div class="w-2/3 max-w-3xl flex flex-col items-center justify-center gap-8">
-        <Logo class="w-58.5 opacity-12 shrink-0" />
-        <div class="flex flex-col items-center gap-2 text-center">
-          <h1 class="text-lg font-medium text-text-strong">{language.t("error.page.title")}</h1>
-          <p class="text-sm text-text-weak">{language.t("error.page.description")}</p>
+    <div class="relative flex-1 h-screen w-screen min-h-0 overflow-y-auto bg-background-base font-sans">
+      <div class="w-full max-w-[32rem] flex flex-col pt-[28vh] pb-16 pl-[clamp(1.5rem,10vw,6rem)] pr-6">
+        <div class="flex flex-col gap-3">
+          <h1 class="text-28-regular text-text-strong text-balance">{language.t("error.page.title")}</h1>
+          <p class="text-16-regular text-text-base text-balance">{language.t("error.page.description")}</p>
         </div>
+
         <Show when={knownError()}>
           {(known) => (
-            <div class="w-full rounded-lg border border-border-subtle-base bg-background-muted p-4 text-left">
-              <div class="text-sm font-medium text-text-strong">{known().title}</div>
-              <p class="mt-1 text-sm text-text-weak">{known().description}</p>
+            <div class="mt-8 flex flex-col gap-2">
+              <div class="text-13-medium text-text-strong">{known().title}</div>
+              <p class="text-13-regular text-text-weak leading-relaxed">{known().description}</p>
             </div>
           )}
         </Show>
-        <div class="flex items-center gap-3">
-          <Button size="large" onClick={platform.restart}>
-            {language.t("error.page.action.restart")}
-          </Button>
-          <Show when={platform.checkUpdate}>
+
+        <div class="mt-10 flex flex-col items-start gap-5">
+          <Show
+            when={platform.checkUpdate && store.version}
+            fallback={
+              <Button size="large" onClick={platform.restart}>
+                {language.t("error.page.action.restart")}
+              </Button>
+            }
+          >
+            <Button size="large" onClick={installUpdate}>
+              {language.t("error.page.action.updateTo", { version: store.version ?? "" })}
+            </Button>
+          </Show>
+          <div class="flex items-center gap-2 text-13-regular text-text-base">
             <Show
-              when={store.version}
+              when={platform.checkUpdate && store.version}
               fallback={
-                <Button size="large" variant="ghost" onClick={checkForUpdates} disabled={store.checking}>
-                  {store.checking
-                    ? language.t("error.page.action.checking")
-                    : language.t("error.page.action.checkUpdates")}
-                </Button>
+                <Show when={platform.checkUpdate}>
+                  <button
+                    type="button"
+                    class="hover:text-text-strong transition-colors disabled:opacity-50"
+                    onClick={checkForUpdates}
+                    disabled={store.checking}
+                  >
+                    {store.checking
+                      ? language.t("error.page.action.checking")
+                      : language.t("error.page.action.checkUpdates")}
+                  </button>
+                </Show>
               }
             >
-              <Button size="large" onClick={installUpdate}>
-                {language.t("error.page.action.updateTo", { version: store.version ?? "" })}
-              </Button>
+              <button type="button" class="hover:text-text-strong transition-colors" onClick={platform.restart}>
+                {language.t("error.page.action.restart")}
+              </button>
             </Show>
-          </Show>
+            <Show when={platform.checkUpdate}>
+              <span class="text-text-weaker" aria-hidden="true">
+                ·
+              </span>
+            </Show>
+            <button
+              type="button"
+              class="hover:text-text-strong transition-colors disabled:opacity-50"
+              onClick={() => setStore("reportConfirmOpen", true)}
+              disabled={store.reporting}
+            >
+              {store.reporting ? language.t("error.page.report.preparing") : language.t("error.page.report.action")}
+            </button>
+          </div>
         </div>
-        <div class="flex flex-col items-center gap-3 text-center">
-          <Button
-            size="large"
-            variant="secondary"
-            onClick={() => setStore("reportConfirmOpen", true)}
-            disabled={store.reporting}
-          >
-            {store.reporting ? language.t("error.page.report.preparing") : language.t("error.page.report.action")}
-          </Button>
-          <Show when={store.reportConfirmOpen}>
-            <div class="w-full max-w-2xl rounded-lg border border-border-subtle-base bg-background-muted p-4 text-left">
-              <p class="text-sm text-text-strong">{language.t("error.page.report.confirm.description")}</p>
-              <p class="mt-1 text-sm text-text-weak">{language.t("error.page.report.confirm.privacy")}</p>
-              <details class="mt-3 text-sm text-text-weak">
-                <summary class="cursor-pointer text-text-interactive-base">
-                  {language.t("error.page.report.confirm.details")}
-                </summary>
-                <ul class="mt-2 list-disc pl-5">
-                  <li>{language.t("error.page.report.confirm.item.error")}</li>
-                  <li>{language.t("error.page.report.confirm.item.app")}</li>
-                  <li>{language.t("error.page.report.confirm.item.logs")}</li>
-                  <li>{language.t("error.page.report.confirm.item.context")}</li>
-                </ul>
-              </details>
-              <div class="mt-4">
-                <Button size="large" onClick={reportProblem} disabled={store.reporting}>
-                  {language.t("error.page.report.confirm.continue")}
-                </Button>
-              </div>
+
+        <Show when={store.reportConfirmOpen}>
+          <div class="mt-8 flex flex-col gap-3 text-13-regular">
+            <p class="text-text-base leading-relaxed">{language.t("error.page.report.confirm.description")}</p>
+            <p class="text-text-weak leading-relaxed">{language.t("error.page.report.confirm.privacy")}</p>
+            <details class="text-text-weak">
+              <summary class="cursor-pointer text-text-interactive-base select-none">
+                {language.t("error.page.report.confirm.details")}
+              </summary>
+              <ul class="mt-2 list-disc pl-5">
+                <li>{language.t("error.page.report.confirm.item.error")}</li>
+                <li>{language.t("error.page.report.confirm.item.app")}</li>
+                <li>{language.t("error.page.report.confirm.item.logs")}</li>
+                <li>{language.t("error.page.report.confirm.item.context")}</li>
+              </ul>
+            </details>
+            <div class="mt-1 flex items-center gap-2">
+              <Button
+                variant="ghost"
+                size="large"
+                onClick={() => setStore("reportConfirmOpen", false)}
+                disabled={store.reporting}
+              >
+                {language.t("common.cancel")}
+              </Button>
+              <Button size="large" onClick={reportProblem} disabled={store.reporting}>
+                {language.t("error.page.report.confirm.continue")}
+              </Button>
             </div>
-          </Show>
-          <button
-            type="button"
-            class="text-xs text-text-weak hover:text-text-interactive-base"
-            onClick={() => platform.openLink(store.feedbackUrl ?? PAWWORK_GITHUB_ISSUE_URL)}
-          >
-            {store.feedbackUrl
-              ? language.t("error.page.report.formFallbackAction")
-              : language.t("error.page.report.githubFallback")}
-          </button>
-        </div>
+          </div>
+        </Show>
+
         <Show when={store.actionError}>
-          {(message) => <p class="text-xs text-text-danger-base text-center max-w-2xl">{message()}</p>}
+          {(message) => <p class="mt-6 text-12-regular text-text-danger-base">{message()}</p>}
         </Show>
         <Show when={store.actionMessage}>
-          {(message) => <p class="text-xs text-text-weak text-center max-w-2xl">{message()}</p>}
+          {(message) => <p class="mt-6 text-12-regular text-text-weak">{message()}</p>}
         </Show>
-        <TextField
-          value={errorDetails()}
-          readOnly
-          copyable
-          multiline
-          class="max-h-96 w-full font-mono text-xs no-scrollbar"
-          label={language.t("error.page.details.label")}
-          hideLabel
-        />
-        <div class="flex flex-col items-center gap-2">
-          <Show when={platform.version}>
-            {(version) => (
-              <p class="text-xs text-text-weak">{language.t("error.page.version", { version: version() })}</p>
-            )}
-          </Show>
-        </div>
+
+        <details class="group mt-16">
+          <summary class="cursor-pointer select-none text-13-regular text-text-weak hover:text-text-base transition-colors list-none flex items-center gap-2 [&::-webkit-details-marker]:hidden">
+            <svg
+              width="10"
+              height="10"
+              viewBox="0 0 10 10"
+              class="transition-transform group-open:rotate-90"
+              fill="none"
+              aria-hidden="true"
+            >
+              <path d="M3.5 2L6.5 5L3.5 8" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+            {language.t("error.page.details.label")}
+          </summary>
+          <div class="mt-4 flex flex-col gap-3">
+            <TextField
+              value={errorDetails()}
+              readOnly
+              copyable
+              multiline
+              class="max-h-72 w-full font-mono text-xs no-scrollbar"
+              label={language.t("error.page.details.label")}
+              hideLabel
+            />
+            <div class="flex items-center gap-2 text-12-regular text-text-weaker">
+              <Show when={platform.version}>
+                {(version) => (
+                  <>
+                    <span>{language.t("error.page.version", { version: version() })}</span>
+                    <span class="text-text-weaker" aria-hidden="true">
+                      ·
+                    </span>
+                  </>
+                )}
+              </Show>
+              <button
+                type="button"
+                class="hover:text-text-weak transition-colors"
+                onClick={() => platform.openLink(store.feedbackUrl ?? PAWWORK_GITHUB_ISSUE_URL)}
+              >
+                {store.feedbackUrl
+                  ? language.t("error.page.report.formFallbackAction")
+                  : language.t("error.page.report.githubFallback")}
+              </button>
+            </div>
+          </div>
+        </details>
       </div>
     </div>
   )
diff --git a/packages/app/src/pages/layout.tsx b/packages/app/src/pages/layout.tsx
index e6eb7ef41..03cf723c1 100644
--- a/packages/app/src/pages/layout.tsx
+++ b/packages/app/src/pages/layout.tsx
@@ -22,16 +22,12 @@ import { base64Encode } from "@opencode-ai/util/encode"
 import { decode64 } from "@/utils/base64"
 import { ResizeHandle } from "@opencode-ai/ui/resize-handle"
 import { Button } from "@opencode-ai/ui/button"
-import { IconButton } from "@opencode-ai/ui/icon-button"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
-import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
 import { Dialog } from "@opencode-ai/ui/dialog"
 import { getFilename } from "@opencode-ai/util/path"
 import { Session, type Message } from "@opencode-ai/sdk/v2/client"
 import { usePlatform } from "@/context/platform"
 import { useSettings } from "@/context/settings"
 import { createStore, produce, reconcile } from "solid-js/store"
-import { DragDropProvider, DragDropSensors, DragOverlay, SortableProvider, closestCenter } from "@thisbeyond/solid-dnd"
 import type { DragEvent } from "@thisbeyond/solid-dnd"
 import { useProviders } from "@/hooks/use-providers"
 import { showToast, Toast, toaster } from "@opencode-ai/ui/toast"
@@ -62,7 +58,7 @@ import { setSessionHandoff } from "@/pages/session/handoff"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { useTheme, type ColorScheme } from "@opencode-ai/ui/theme/context"
 import { useCommand, type CommandOption } from "@/context/command"
-import { ConstrainDragXAxis, getDraggableId } from "@/utils/solid-dnd"
+import { getDraggableId } from "@/utils/solid-dnd"
 import { DebugBar } from "@/components/debug-bar"
 import { Titlebar } from "@/components/titlebar"
 import { useServer } from "@/context/server"
@@ -88,16 +84,12 @@ import {
   resolvePawworkProjectLabels,
   sortPawworkSidebarSessions,
 } from "./layout/pawwork-session-source"
-import {
-  LocalWorkspace,
-  SortableWorkspace,
-  WorkspaceDragOverlay,
-  type WorkspaceSidebarContext,
-} from "./layout/sidebar-workspace"
+import { type WorkspaceSidebarContext } from "./layout/sidebar-workspace"
 import { PawworkSidebar, type PawworkSidebarSession } from "./layout/pawwork-sidebar"
-import { ProjectDragOverlay, SortableProject, type ProjectSidebarContext } from "./layout/sidebar-project"
+import { ProjectDragOverlay, type ProjectSidebarContext } from "./layout/sidebar-project"
 import { PawworkTitlebar } from "./layout/pawwork-titlebar"
 import { SettingsPage, type SettingsPageTab } from "@/components/settings-page"
+import { DialogDeleteSession } from "@/components/dialog-delete-session"
 
 export default function Layout(props: ParentProps) {
   const [store, setStore, , ready] = persisted(
@@ -652,11 +644,21 @@ export default function Layout(props: ParentProps) {
 
         const [dirStore] = globalSync.child(directory, { bootstrap: true })
         for (const session of sortedRootSessions(dirStore)) {
+          const messages = dirStore.message[session.id]
+          let lastUserAt = 0
+          if (messages?.length) {
+            for (let i = messages.length - 1; i >= 0; i--) {
+              if (messages[i].role === "user") {
+                lastUserAt = messages[i].time?.created ?? 0
+                break
+              }
+            }
+          }
           result.push({
             session,
             slug: base64Encode(session.directory),
             projectLabel: labels.get(project.worktree) ?? displayName(project),
-            created: session.time?.created ?? session.time?.updated ?? 0,
+            created: lastUserAt || session.time?.updated || session.time?.created || 0,
           })
         }
       }
@@ -988,32 +990,6 @@ export default function Layout(props: ParentProps) {
     }
   }
 
-  async function archiveSession(session: Session) {
-    const [store, setStore] = globalSync.child(session.directory)
-    const sessions = store.session ?? []
-    const index = sessions.findIndex((s) => s.id === session.id)
-    const nextSession = sessions[index + 1] ?? sessions[index - 1]
-
-    await globalSDK.client.session.update({
-      directory: session.directory,
-      sessionID: session.id,
-      time: { archived: Date.now() },
-    })
-    setStore(
-      produce((draft) => {
-        const match = Binary.search(draft.session, session.id, (s) => s.id)
-        if (match.found) draft.session.splice(match.index, 1)
-      }),
-    )
-    if (session.id === params.id) {
-      if (nextSession) {
-        navigate(`/${params.dir}/session/${nextSession.id}`)
-      } else {
-        navigate(`/${params.dir}/session`)
-      }
-    }
-  }
-
   async function renamePawworkSession(session: Session, next: string) {
     const title = next.trim()
     if (!title || title === (session.title ?? "")) return
@@ -1052,6 +1028,117 @@ export default function Layout(props: ParentProps) {
     setStore("pawworkSortMode", mode)
   }
 
+  // Export hits the embedded sidecar via main-process IPC. When the user has
+  // switched the active server to a remote target, the sidecar holds different
+  // data than the UI; hide the action rather than ship a misleading export.
+  const exportSessionAvailable = createMemo(
+    () => !!platform.exportSession && server.current?.type === "sidecar",
+  )
+
+  async function exportSession(session: Session) {
+    if (!platform.exportSession) return
+    const [store] = globalSync.child(session.directory)
+    const sessionInfo = store.session?.find((s) => s.id === session.id)
+    const slugSource = sessionInfo?.slug ?? session.id
+    const sanitized = slugSource.replace(/[\\/:*?"<>|]/g, "-").slice(0, 32)
+    const slug = /[\p{L}\p{N}]/u.test(sanitized) ? sanitized : session.id.slice(-8)
+    const stamp = new Date().toISOString().replace(/[:T]/g, "-").replace(/\..+$/, "")
+    const defaultName = `pawwork-session-${slug}-${stamp}.json`
+
+    let result: { ok: true; path: string } | { ok: false; error: string }
+    try {
+      result = await platform.exportSession(
+        session.id,
+        session.directory,
+        defaultName,
+        language.t("session.export.action.export"),
+      )
+    } catch (err) {
+      showToast({
+        title: language.t("session.export.error.failed"),
+        description: errorMessage(err, language.t("common.requestFailed")),
+        variant: "error",
+      })
+      return
+    }
+    if (!result.ok) {
+      if (result.error === "cancelled") return
+      showToast({
+        title: language.t("session.export.error.failed"),
+        description: result.error,
+        variant: "error",
+      })
+      return
+    }
+    showToast({
+      title: language.t("session.export.success"),
+      description: result.path,
+    })
+  }
+
+  async function deleteSession(session: Session) {
+    const [store, setStore] = globalSync.child(session.directory)
+    const sessions = (store.session ?? []).filter((s) => !s.parentID && !s.time?.archived)
+    const index = sessions.findIndex((s) => s.id === session.id)
+    const nextSession = index === -1 ? undefined : (sessions[index + 1] ?? sessions[index - 1])
+
+    const result = await globalSDK.client.session
+      .delete({ directory: session.directory, sessionID: session.id })
+      .then((x) => x.data)
+      .catch((err) => {
+        showToast({
+          title: language.t("session.delete.failed.title"),
+          description: errorMessage(err, language.t("common.requestFailed")),
+          variant: "error",
+        })
+        return false
+      })
+
+    if (!result) return false
+
+    setStore(
+      produce((draft) => {
+        const removed = new Set<string>([session.id])
+        const byParent = new Map<string, string[]>()
+        for (const item of draft.session) {
+          const parentID = item.parentID
+          if (!parentID) continue
+          const existing = byParent.get(parentID)
+          if (existing) {
+            existing.push(item.id)
+            continue
+          }
+          byParent.set(parentID, [item.id])
+        }
+        const stack = [session.id]
+        while (stack.length) {
+          const parentID = stack.pop()
+          if (!parentID) continue
+          const children = byParent.get(parentID)
+          if (!children) continue
+          for (const child of children) {
+            if (removed.has(child)) continue
+            removed.add(child)
+            stack.push(child)
+          }
+        }
+        dropSessionCaches(draft, [...removed])
+        draft.session = draft.session.filter((s) => !removed.has(s.id))
+      }),
+    )
+
+    if (session.id === params.id) {
+      navigate(nextSession ? `/${params.dir}/session/${nextSession.id}` : `/${params.dir}/session`)
+    }
+    return true
+  }
+
+  function confirmDeleteSession(session: Session) {
+    dialog.show(() => (
+      <DialogDeleteSession sessionID={session.id} onConfirm={() => void deleteSession(session)} />
+    ))
+  }
+
   command.register("layout", () => {
     const commands: CommandOption[] = [
       {
@@ -1129,17 +1216,6 @@ export default function Layout(props: ParentProps) {
         keybind: "shift+alt+arrowdown",
         onSelect: () => navigateSessionByUnseen(1),
       },
-      {
-        id: "session.archive",
-        title: language.t("command.session.archive"),
-        category: language.t("command.category.session"),
-        keybind: "mod+shift+backspace",
-        disabled: !params.dir || !params.id,
-        onSelect: () => {
-          const session = currentSessions().find((s) => s.id === params.id)
-          if (session) archiveSession(session)
-        },
-      },
       {
         id: "workspace.new",
         title: language.t("workspace.new"),
@@ -2021,7 +2097,6 @@ export default function Layout(props: ParentProps) {
     sidebarHovering,
     clearHoverProjectSoon,
     prefetchSession,
-    archiveSession,
     workspaceName,
     renameWorkspace,
     editorOpen,
@@ -2067,307 +2142,9 @@ export default function Layout(props: ParentProps) {
       sidebarExpanded,
       clearHoverProjectSoon,
       prefetchSession,
-      archiveSession,
     },
   }
 
-  const SidebarPanel = (panelProps: {
-    project: Accessor<LocalProject | undefined>
-    mobile?: boolean
-    merged?: boolean
-  }) => {
-    const project = panelProps.project
-    const merged = createMemo(() => panelProps.mobile || (panelProps.merged ?? layout.sidebar.opened()))
-    const hover = createMemo(() => !panelProps.mobile && panelProps.merged === false && !layout.sidebar.opened())
-    const empty = createMemo(() => !params.dir && layout.projects.list().length === 0)
-    const projectName = createMemo(() => {
-      const item = project()
-      if (!item) return ""
-      return item.name || getFilename(item.worktree)
-    })
-    const projectId = createMemo(() => project()?.id ?? "")
-    const worktree = createMemo(() => project()?.worktree ?? "")
-    const slug = createMemo(() => {
-      const dir = worktree()
-      if (!dir) return ""
-      return base64Encode(dir)
-    })
-    const workspaces = createMemo(() => {
-      const item = project()
-      if (!item) return [] as string[]
-      return workspaceIds(item)
-    })
-    const unseenCount = createMemo(() =>
-      workspaces().reduce((total, directory) => total + notification.project.unseenCount(directory), 0),
-    )
-    const clearNotifications = () =>
-      workspaces()
-        .filter((directory) => notification.project.unseenCount(directory) > 0)
-        .forEach((directory) => notification.project.markViewed(directory))
-    const workspacesEnabled = createMemo(() => {
-      const item = project()
-      if (!item) return false
-      if (item.vcs !== "git") return false
-      return layout.sidebar.workspaces(item.worktree)()
-    })
-    const canToggle = createMemo(() => {
-      const item = project()
-      if (!item) return false
-      return item.vcs === "git" || layout.sidebar.workspaces(item.worktree)()
-    })
-    const homedir = createMemo(() => globalSync.data.path.home)
-
-    return (
-      <div
-        classList={{
-          "flex flex-col min-h-0 min-w-0 box-border rounded-tl-[12px] px-3": true,
-          "border border-b-0 border-border-weak-base": !merged(),
-          "border-l border-t border-border-weaker-base": merged(),
-          "bg-background-base": merged() || hover(),
-          "bg-background-stronger": !merged() && !hover(),
-          "flex-1 min-w-0": panelProps.mobile,
-          "max-w-full overflow-hidden": panelProps.mobile,
-        }}
-        style={{
-          width: panelProps.mobile ? undefined : `${panel()}px`,
-        }}
-      >
-        <Show
-          when={project()}
-          fallback={
-            <Show when={empty()}>
-              <div class="flex-1 min-h-0 -mt-4 flex items-center justify-center px-6 pb-64 text-center">
-                <div class="mt-8 flex max-w-60 flex-col items-center gap-6 text-center">
-                  <div class="flex flex-col gap-3">
-                    <div class="text-13-medium text-text-strong">{language.t("sidebar.empty.title")}</div>
-                    <div class="text-13-regular text-text-base" style={{ "line-height": "var(--line-height-normal)" }}>
-                      {language.t("sidebar.empty.description")}
-                    </div>
-                  </div>
-                  <Button size="large" icon="folder-add-left" onClick={chooseProject}>
-                    {language.t("command.project.open")}
-                  </Button>
-                </div>
-              </div>
-            </Show>
-          }
-        >
-          <>
-            <div class="shrink-0 pl-1 py-1">
-              <div class="group/project flex items-start justify-between gap-2 py-2 pl-2 pr-0">
-                <div class="flex flex-col min-w-0">
-                  <InlineEditor
-                    id={`project:${projectId()}`}
-                    value={projectName}
-                    onSave={(next) => {
-                      const item = project()
-                      if (!item) return
-                      renameProject(item, next)
-                    }}
-                    class="text-13-medium text-text-strong truncate"
-                    displayClass="text-13-medium text-text-strong truncate"
-                    stopPropagation
-                  />
-
-                  <Tooltip
-                    placement="bottom"
-                    gutter={2}
-                    value={worktree()}
-                    class="shrink-0"
-                    contentStyle={{
-                      "max-width": "640px",
-                      transform: "translate3d(52px, 0, 0)",
-                    }}
-                  >
-                    <span class="text-13-regular text-text-base truncate select-text">
-                      {worktree().replace(homedir(), "~")}
-                    </span>
-                  </Tooltip>
-                </div>
-
-                <DropdownMenu modal={!sidebarHovering()}>
-                  <DropdownMenu.Trigger
-                    as={IconButton}
-                    icon="dot-grid"
-                    variant="ghost"
-                    data-action="project-menu"
-                    data-project={slug()}
-                    class="shrink-0 size-6 rounded-md transition-opacity data-[expanded]:bg-surface-base-active"
-                    classList={{
-                      "opacity-100": panelProps.mobile || merged(),
-                      "opacity-0 group-hover/project:opacity-100 group-focus-within/project:opacity-100 data-[expanded]:opacity-100":
-                        !panelProps.mobile && !merged(),
-                    }}
-                    aria-label={language.t("common.moreOptions")}
-                  />
-                  <DropdownMenu.Portal>
-                    <DropdownMenu.Content class="mt-1">
-                      <DropdownMenu.Item
-                        onSelect={() => {
-                          const item = project()
-                          if (!item) return
-                          showEditProjectDialog(item)
-                        }}
-                      >
-                        <DropdownMenu.ItemLabel>{language.t("common.edit")}</DropdownMenu.ItemLabel>
-                      </DropdownMenu.Item>
-                      <Show when={!pawworkSidebar()}>
-                        <DropdownMenu.Item
-                          data-action="project-workspaces-toggle"
-                          data-project={slug()}
-                          disabled={!canToggle()}
-                          onSelect={() => {
-                            const item = project()
-                            if (!item) return
-                            toggleProjectWorkspaces(item)
-                          }}
-                        >
-                          <DropdownMenu.ItemLabel>
-                            {workspacesEnabled()
-                              ? language.t("sidebar.workspaces.disable")
-                              : language.t("sidebar.workspaces.enable")}
-                          </DropdownMenu.ItemLabel>
-                        </DropdownMenu.Item>
-                      </Show>
-                      <DropdownMenu.Item
-                        data-action="project-clear-notifications"
-                        data-project={slug()}
-                        disabled={unseenCount() === 0}
-                        onSelect={clearNotifications}
-                      >
-                        <DropdownMenu.ItemLabel>
-                          {language.t("sidebar.project.clearNotifications")}
-                        </DropdownMenu.ItemLabel>
-                      </DropdownMenu.Item>
-                      <DropdownMenu.Separator />
-                      <DropdownMenu.Item
-                        data-action="project-close-menu"
-                        data-project={slug()}
-                        onSelect={() => {
-                          const dir = worktree()
-                          if (!dir) return
-                          closeProject(dir)
-                        }}
-                      >
-                        <DropdownMenu.ItemLabel>{language.t("common.close")}</DropdownMenu.ItemLabel>
-                      </DropdownMenu.Item>
-                    </DropdownMenu.Content>
-                  </DropdownMenu.Portal>
-                </DropdownMenu>
-              </div>
-            </div>
-
-            <div class="flex-1 min-h-0 flex flex-col">
-              <Show when={pawworkSidebar() || !workspacesEnabled()}>
-                <div class="shrink-0 py-4">
-                  <Button
-                    size="large"
-                    icon="new-session"
-                    class="w-full"
-                    onClick={() => {
-                      const dir = worktree()
-                      if (!dir) return
-                      navigateWithSidebarReset(`/${base64Encode(dir)}/session`)
-                    }}
-                  >
-                    {language.t("command.session.new")}
-                  </Button>
-                </div>
-                <div class="flex-1 min-h-0">
-                  <LocalWorkspace ctx={workspaceSidebarCtx} project={project()!} mobile={panelProps.mobile} />
-                </div>
-              </Show>
-              <Show when={!pawworkSidebar() && workspacesEnabled()}>
-                <>
-                  <div class="shrink-0 py-4">
-                    <Button
-                      size="large"
-                      icon="plus-small"
-                      class="w-full"
-                      onClick={() => {
-                        const item = project()
-                        if (!item) return
-                        createWorkspace(item)
-                      }}
-                    >
-                      {language.t("workspace.new")}
-                    </Button>
-                  </div>
-                  <div class="relative flex-1 min-h-0">
-                    <DragDropProvider
-                      onDragStart={handleWorkspaceDragStart}
-                      onDragEnd={handleWorkspaceDragEnd}
-                      onDragOver={handleWorkspaceDragOver}
-                      collisionDetector={closestCenter}
-                    >
-                      <DragDropSensors />
-                      <ConstrainDragXAxis />
-                      <div
-                        ref={(el) => {
-                          if (!panelProps.mobile) scrollContainerRef = el
-                        }}
-                        class="size-full flex flex-col py-2 gap-4 overflow-y-auto no-scrollbar [overflow-anchor:none]"
-                      >
-                        <SortableProvider ids={workspaces()}>
-                          <For each={workspaces()}>
-                            {(directory) => (
-                              <SortableWorkspace
-                                ctx={workspaceSidebarCtx}
-                                directory={directory}
-                                project={project()!}
-                                mobile={panelProps.mobile}
-                              />
-                            )}
-                          </For>
-                        </SortableProvider>
-                      </div>
-                      <DragOverlay>
-                        <WorkspaceDragOverlay
-                          sidebarProject={sidebarProject}
-                          activeWorkspace={() => store.activeWorkspace}
-                          workspaceLabel={workspaceLabel}
-                        />
-                      </DragOverlay>
-                    </DragDropProvider>
-                  </div>
-                </>
-              </Show>
-            </div>
-          </>
-        </Show>
-
-        <div
-          class="shrink-0 px-3 py-3"
-          classList={{
-            hidden: store.gettingStartedDismissed || !(providers.all().length > 0 && providers.paid().length === 0),
-          }}
-        >
-          <div class="rounded-xl bg-background-base shadow-xs-border-base" data-component="getting-started">
-            <div class="p-3 flex flex-col gap-6">
-              <div class="flex flex-col gap-2">
-                <div class="text-13-medium text-text-strong">{language.t("sidebar.gettingStarted.title")}</div>
-                <div class="text-13-regular text-text-base" style={{ "line-height": "var(--line-height-normal)" }}>
-                  {language.t("sidebar.gettingStarted.line1")}
-                </div>
-                <div class="text-13-regular text-text-base" style={{ "line-height": "var(--line-height-normal)" }}>
-                  {language.t("sidebar.gettingStarted.line2")}
-                </div>
-              </div>
-              <div data-component="getting-started-actions">
-                <Button size="large" icon="plus-small" onClick={connectProvider}>
-                  {language.t("command.provider.connect")}
-                </Button>
-                <Button size="large" variant="ghost" onClick={() => setStore("gettingStartedDismissed", true)}>
-                  {language.t("toast.update.action.notYet")}
-                </Button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
   const projects = () => layout.projects.list()
   const projectOverlay = () => <ProjectDragOverlay projects={projects} activeProject={() => store.activeProject} />
   const renderPawworkPanel = (
@@ -2386,9 +2163,11 @@ export default function Layout(props: ParentProps) {
       setScrollContainerRef={workspaceSidebarCtx.setScrollContainerRef}
       clearHoverProjectSoon={clearHoverProjectSoon}
       prefetchSession={prefetchSession}
-      archiveSession={archiveSession}
       onRenameSession={renamePawworkSession}
       onTogglePinnedSession={togglePinnedSession}
+      exportSessionAvailable={exportSessionAvailable}
+      onExportSession={exportSession}
+      onDeleteSession={confirmDeleteSession}
       onSetSortMode={setPawworkSortMode}
       onNew={() => openPawworkHome(options?.directory)}
       onSearch={() => command.show()}
@@ -2417,11 +2196,18 @@ export default function Layout(props: ParentProps) {
         data-platform={platform.platform}
         data-os={platform.os}
         class="relative bg-background-base flex-1 min-h-0 min-w-0 flex flex-col select-none [&_input]:select-text [&_textarea]:select-text [&_[contenteditable]]:select-text"
+        classList={{
+          "[transition:--sidebar-width_200ms_cubic-bezier(0.22,1,0.36,1),--right-panel-width_240ms_cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none":
+            !state.sizing,
+        }}
         style={{
           "--shell-titlebar-current-height":
             platform.platform === "desktop" && platform.os === "macos"
               ? `calc(var(--shell-titlebar-height, 40px) / ${platform.webviewZoom?.() ?? 1})`
               : "var(--shell-titlebar-height, 40px)",
+          "--sidebar-width": layout.sidebar.opened() ? `${side()}px` : "0px",
+          "--right-panel-width": layout.rightPanel.opened() ? `${layout.rightPanel.width()}px` : "0px",
+          "--right-panel-divider": layout.rightPanel.opened() ? "var(--border-weaker-base)" : "transparent",
         }}
       >
         <div
@@ -2482,11 +2268,6 @@ export default function Layout(props: ParentProps) {
                 </div>
               </Show>
 
-              <div
-                class="hidden xl:block pointer-events-none absolute top-0 right-0 z-0 border-t border-border-weaker-base"
-                style={{ left: "calc(4rem + 12px)" }}
-              />
-
               <div class="xl:hidden">
                 <div
                   classList={{
@@ -2531,7 +2312,7 @@ export default function Layout(props: ParentProps) {
                   data-platform={platform.platform}
                   data-os={platform.os}
                   classList={{
-                    "size-full overflow-x-hidden flex flex-col items-start contain-strict border-t border-border-weak-base bg-background-base xl:border-l xl:rounded-tl-[12px]": true,
+                    "size-full overflow-x-hidden flex flex-col items-start contain-strict bg-background-base": true,
                   }}
                 >
                   <div class="relative size-full">
diff --git a/packages/app/src/pages/layout/pawwork-sidebar.tsx b/packages/app/src/pages/layout/pawwork-sidebar.tsx
index 3e024c222..7bb812e50 100644
--- a/packages/app/src/pages/layout/pawwork-sidebar.tsx
+++ b/packages/app/src/pages/layout/pawwork-sidebar.tsx
@@ -7,6 +7,7 @@ import { IconButton } from "@opencode-ai/ui/icon-button"
 import { TooltipKeybind } from "@opencode-ai/ui/tooltip"
 import { createEffect, createMemo, createSignal, For, Show, type Accessor, type JSX } from "solid-js"
 import { useLanguage } from "@/context/language"
+import { getRelativeTime } from "@/utils/time"
 import { createInlineEditorController } from "./inline-editor"
 import { buildPawworkSessionSections, type PawworkSortMode } from "./pawwork-session-nav"
 import { SessionItem } from "./sidebar-items"
@@ -40,9 +41,11 @@ export const PawworkSidebar = (props: {
   setScrollContainerRef: (el: HTMLDivElement | undefined, mobile?: boolean) => void
   clearHoverProjectSoon: () => void
   prefetchSession: (session: Session, priority?: "high" | "low") => void
-  archiveSession: (session: Session) => Promise<void>
   onRenameSession: (session: Session, next: string) => Promise<void>
   onTogglePinnedSession: (sessionID: string) => void
+  exportSessionAvailable: Accessor<boolean>
+  onExportSession: (session: Session) => Promise<void>
+  onDeleteSession: (session: Session) => void
   onSetSortMode: (mode: PawworkSortMode) => void
   onNew: () => void
   onSearch: () => void
@@ -109,33 +112,12 @@ export const PawworkSidebar = (props: {
             sidebarExpanded={props.sidebarExpanded}
             clearHoverProjectSoon={props.clearHoverProjectSoon}
             prefetchSession={props.prefetchSession}
-            archiveSession={props.archiveSession}
-            hideDefaultArchiveAction
-            leadingSlot={() => (
-              <button
-                type="button"
-                data-action="pawwork-session-pin"
-                data-pinned={isPinned() ? "true" : "false"}
-                aria-label={pinLabel()}
-                title={pinLabel()}
-                tabIndex={isPinned() ? 0 : -1}
-                aria-hidden={isPinned() ? undefined : "true"}
-                onClick={(event) => {
-                  event.preventDefault()
-                  event.stopPropagation()
-                  if (isPinned()) event.currentTarget.blur()
-                  props.onTogglePinnedSession(session.id)
-                }}
-                classList={{
-                  "inline-flex w-[14px] h-[14px] items-center justify-center rounded transition-colors": true,
-                  "text-text-strong opacity-100 pointer-events-auto": isPinned(),
-                  "text-text-weak opacity-0 pointer-events-none group-hover/session:opacity-100 group-hover/session:pointer-events-auto group-focus-within/session:opacity-100 group-focus-within/session:pointer-events-auto hover:text-text-base":
-                    !isPinned(),
-                }}
-              >
-                <Icon name="pin" size="small" />
-              </button>
-            )}
+            pinned={() => isPinned()}
+            timeText={() =>
+              entry.item.created > 0
+                ? getRelativeTime(new Date(entry.item.created).toISOString(), language.t)
+                : undefined
+            }
             titleContent={({ session: rowSession, title }) => (
               <editor.InlineEditor
                 id={`pawwork-session:${rowSession.id}`}
@@ -143,8 +125,8 @@ export const PawworkSidebar = (props: {
                 onSave={(next) => {
                   void props.onRenameSession(rowSession, next)
                 }}
-                class="text-13-regular text-text-base [.active_&]:font-medium [.active_&]:text-text-strong min-w-0 flex-1 truncate"
-                displayClass="text-13-regular text-text-base [.active_&]:font-medium [.active_&]:text-text-strong min-w-0 flex-1 truncate"
+                class="text-13-regular text-text-base [.active_&]:text-text-strong min-w-0 flex-1 truncate"
+                displayClass="text-13-regular text-text-base [.active_&]:text-text-strong min-w-0 flex-1 truncate"
               />
             )}
             actionSlot={(rowSession) => (
@@ -183,8 +165,16 @@ export const PawworkSidebar = (props: {
                     >
                       <DropdownMenu.ItemLabel>{language.t("common.rename")}</DropdownMenu.ItemLabel>
                     </DropdownMenu.Item>
-                    <DropdownMenu.Item onSelect={() => void props.archiveSession(rowSession)}>
-                      <DropdownMenu.ItemLabel>{language.t("common.archive")}</DropdownMenu.ItemLabel>
+                    <Show when={props.exportSessionAvailable()}>
+                      <DropdownMenu.Item onSelect={() => void props.onExportSession(rowSession)}>
+                        <DropdownMenu.ItemLabel>
+                          {language.t("session.export.action.export")}
+                        </DropdownMenu.ItemLabel>
+                      </DropdownMenu.Item>
+                    </Show>
+                    <DropdownMenu.Separator />
+                    <DropdownMenu.Item onSelect={() => props.onDeleteSession(rowSession)}>
+                      <DropdownMenu.ItemLabel>{language.t("common.delete")}</DropdownMenu.ItemLabel>
                     </DropdownMenu.Item>
                   </DropdownMenu.Content>
                 </DropdownMenu.Portal>
@@ -204,8 +194,14 @@ export const PawworkSidebar = (props: {
             >
               <ContextMenu.ItemLabel>{language.t("common.rename")}</ContextMenu.ItemLabel>
             </ContextMenu.Item>
-            <ContextMenu.Item onSelect={() => void props.archiveSession(session)}>
-              <ContextMenu.ItemLabel>{language.t("common.archive")}</ContextMenu.ItemLabel>
+            <Show when={props.exportSessionAvailable()}>
+              <ContextMenu.Item onSelect={() => void props.onExportSession(session)}>
+                <ContextMenu.ItemLabel>{language.t("session.export.action.export")}</ContextMenu.ItemLabel>
+              </ContextMenu.Item>
+            </Show>
+            <ContextMenu.Separator />
+            <ContextMenu.Item onSelect={() => props.onDeleteSession(session)}>
+              <ContextMenu.ItemLabel>{language.t("common.delete")}</ContextMenu.ItemLabel>
             </ContextMenu.Item>
           </ContextMenu.Content>
         </ContextMenu.Portal>
@@ -213,11 +209,18 @@ export const PawworkSidebar = (props: {
     )
   }
 
+  // Only react to coarse signals that warrant re-centering the active row:
+  // selection change, sort mode flip, list size change (initial load / add / delete),
+  // or pin/unpin (which moves the active row between sections).
+  // Tracking rows()/pinnedRows()/groupedRows() would re-fire on every session field
+  // update (e.g. time.updated bump on submit), pulling the sidebar back to top.
+  const sessionCount = createMemo(() => props.sessions().length)
+  const pinnedSignature = createMemo(() => props.pinnedIDs().join("\0"))
   createEffect(() => {
     const activeSessionID = props.activeSessionID?.()
-    rows()
-    pinnedRows()
-    groupedRows()
+    props.sortMode()
+    sessionCount()
+    pinnedSignature()
     const el = scrollEl
     if (!activeSessionID || !el) return
 
@@ -244,7 +247,7 @@ export const PawworkSidebar = (props: {
             type="button"
             data-action="pawwork-session-new"
             onClick={props.onNew}
-            class="w-full flex items-center gap-2 pl-2 pr-3 py-1.5 rounded-xl hover:bg-surface-raised-base-hover focus-visible:bg-surface-raised-base-hover transition-colors text-left focus:outline-none"
+            class="w-full flex items-center gap-2 pl-2 pr-3 py-1.5 rounded-md hover:bg-surface-raised-base-hover focus-visible:bg-surface-raised-base-hover transition-colors text-left focus:outline-none"
           >
             <span class="shrink-0 w-4 h-4 flex items-center">
               <Icon name="new-session" size="small" class="text-icon-base" />
@@ -255,7 +258,7 @@ export const PawworkSidebar = (props: {
             type="button"
             data-action="pawwork-session-search"
             onClick={props.onSearch}
-            class="w-full flex items-center gap-2 pl-2 pr-3 py-1.5 rounded-xl hover:bg-surface-raised-base-hover focus-visible:bg-surface-raised-base-hover transition-colors text-left focus:outline-none"
+            class="w-full flex items-center gap-2 pl-2 pr-3 py-1.5 rounded-md hover:bg-surface-raised-base-hover focus-visible:bg-surface-raised-base-hover transition-colors text-left focus:outline-none"
           >
             <span class="shrink-0 w-4 h-4 flex items-center">
               <Icon name="magnifying-glass" size="small" class="text-icon-base" />
@@ -268,8 +271,8 @@ export const PawworkSidebar = (props: {
       <Show
         when={!props.showProjectEmptyState}
         fallback={
-          <div class="flex flex-1 items-center px-3">
-            <div class="flex w-full flex-col gap-3 rounded-xl border border-border-weak-base bg-surface-base p-4">
+          <div class="flex flex-1 items-center px-5">
+            <div class="flex w-full flex-col gap-3">
               <div class="text-13-medium text-text-strong">{language.t("sidebar.empty.title")}</div>
               <p class="text-13-regular text-text-weak">{language.t("sidebar.pawwork.empty.description")}</p>
               <Button data-action="pawwork-open-project" size="large" onClick={props.onOpenProject}>
@@ -285,7 +288,7 @@ export const PawworkSidebar = (props: {
             props.setScrollContainerRef(el, props.mobile)
           }}
           data-component="pawwork-session-scroll"
-          class="flex-1 min-h-0 overflow-y-auto px-3 pt-3 pb-3"
+          class="flex-1 min-h-0 overflow-y-auto px-3 pb-3"
         >
           <Show
             when={props.sessions().length > 0}
@@ -293,38 +296,42 @@ export const PawworkSidebar = (props: {
           >
             <nav class="flex flex-col gap-1">
               <Show when={pinnedRows().length > 0}>
-                <section data-component="pawwork-sidebar-pinned" class="flex flex-col gap-1">
-                  <div class="px-2 pb-0.5 text-13-medium text-text-weak">{language.t("sidebar.pawwork.pinned")}</div>
+                <section data-component="pawwork-sidebar-pinned" class="flex flex-col gap-0.5">
+                  <div class="px-2 pt-3 pb-2 text-12-regular text-text-weak">{language.t("sidebar.pawwork.pinned")}</div>
                   <For each={pinnedRows()}>{(entry) => renderSessionItem(entry)}</For>
                 </section>
               </Show>
-              <div class="mt-2 flex items-center justify-between pr-3 pl-2 pb-0.5">
-                <span class="text-13-medium text-text-weak">{language.t("sidebar.pawwork.all")}</span>
-                <button
-                  type="button"
-                  data-action="pawwork-sort-mode"
-                  data-mode={props.sortMode()}
-                  aria-label={sortAriaLabel()}
-                  title={sortAriaLabel()}
-                  onClick={() => props.onSetSortMode(props.sortMode() === "time" ? "project" : "time")}
-                  classList={{
-                    "inline-flex items-center justify-center rounded-md p-1 transition-colors": true,
-                    "hover:bg-surface-hovered-base": true,
-                    "text-accent-brand": props.sortMode() === "project",
-                    "text-text-weak": props.sortMode() !== "project",
-                  }}
-                >
-                  <FilterIcon size={14} />
-                </button>
-              </div>
+              <Show when={rows().length > 0 || groupedRows().length > 0}>
+                <div class="mt-3 flex items-center justify-between pr-2 pl-2 pb-2">
+                  <span class="text-12-regular text-text-weak">{language.t("sidebar.pawwork.all")}</span>
+                  <button
+                    type="button"
+                    data-action="pawwork-sort-mode"
+                    data-mode={props.sortMode()}
+                    aria-label={sortAriaLabel()}
+                    title={sortAriaLabel()}
+                    onClick={() => props.onSetSortMode(props.sortMode() === "time" ? "project" : "time")}
+                    classList={{
+                      "inline-flex items-center justify-center size-5 rounded-md transition-colors": true,
+                      "hover:bg-surface-raised-base-hover": true,
+                      "text-text-strong": props.sortMode() === "project",
+                      "text-text-weak": props.sortMode() !== "project",
+                    }}
+                  >
+                    <FilterIcon size={14} />
+                  </button>
+                </div>
+              </Show>
               <Show when={props.sortMode() === "time"}>
-                <For each={rows()}>{(entry) => renderSessionItem(entry)}</For>
+                <div class="flex flex-col gap-0.5">
+                  <For each={rows()}>{(entry) => renderSessionItem(entry)}</For>
+                </div>
               </Show>
               <Show when={props.sortMode() === "project"}>
                 <For each={groupedRows()}>
                   {(group) => (
-                    <section class="flex flex-col gap-1">
-                      <div data-component="pawwork-group-header" class="px-2 pt-2 pb-0.5 text-13-medium text-text-weak">
+                    <section class="flex flex-col gap-0.5">
+                      <div data-component="pawwork-group-header" class="px-2 pt-3 pb-2 text-12-regular text-text-weak">
                         {group.label}
                       </div>
                       <For each={group.items}>{(item) => renderSessionItem({ item })}</For>
@@ -351,7 +358,7 @@ export const PawworkSidebar = (props: {
             data-action="pawwork-open-settings"
             onClick={props.onOpenSettings}
             aria-label={props.settingsLabel()}
-            class="w-full flex items-center gap-2 pl-2 pr-3 py-1.5 rounded-xl hover:bg-surface-raised-base-hover focus-visible:bg-surface-raised-base-hover transition-colors text-left focus:outline-none"
+            class="w-full flex items-center gap-2 pl-2 pr-3 py-1.5 rounded-md hover:bg-surface-raised-base-hover focus-visible:bg-surface-raised-base-hover transition-colors text-left focus:outline-none"
           >
             <span class="shrink-0 w-4 h-4 flex items-center">
               <Icon name="settings-gear" size="small" class="text-icon-base" />
diff --git a/packages/app/src/pages/layout/sidebar-items.tsx b/packages/app/src/pages/layout/sidebar-items.tsx
index 1ce3d341a..8d811cfa7 100644
--- a/packages/app/src/pages/layout/sidebar-items.tsx
+++ b/packages/app/src/pages/layout/sidebar-items.tsx
@@ -1,7 +1,6 @@
 import type { Session } from "@opencode-ai/sdk/v2/client"
 import { Avatar } from "@opencode-ai/ui/avatar"
 import { Icon } from "@opencode-ai/ui/icon"
-import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Spinner } from "@opencode-ai/ui/spinner"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { getFilename } from "@opencode-ai/util/path"
@@ -74,11 +73,10 @@ export type SessionItemProps = {
   sidebarExpanded: Accessor<boolean>
   clearHoverProjectSoon: () => void
   prefetchSession: (session: Session, priority?: "high" | "low") => void
-  archiveSession: (session: Session) => Promise<void>
   titleContent?: (input: { session: Session; title: Accessor<string> }) => JSX.Element
   actionSlot?: (session: Session) => JSX.Element
-  leadingSlot?: (session: Session) => JSX.Element
-  hideDefaultArchiveAction?: boolean
+  pinned?: (session: Session) => boolean
+  timeText?: (session: Session) => string | undefined
 }
 
 const SessionRow = (props: {
@@ -86,31 +84,18 @@ const SessionRow = (props: {
   slug: string
   mobile?: boolean
   dense?: boolean
-  tint: Accessor<string | undefined>
-  isWorking: Accessor<boolean>
-  hasPermissions: Accessor<boolean>
-  hasError: Accessor<boolean>
-  unseenCount: Accessor<number>
   clearHoverProjectSoon: () => void
   sidebarOpened: Accessor<boolean>
   warmPress: () => void
   warmFocus: () => void
   titleContent?: JSX.Element
-  leadingSlot?: JSX.Element
 }): JSX.Element => {
   const title = () => sessionTitle(props.session.title)
-  const indicator = () => {
-    if (props.isWorking()) return <Spinner class="size-[14px]" />
-    if (props.hasPermissions()) return <div class="size-1.5 rounded-full bg-surface-warning-strong" />
-    if (props.hasError()) return <div class="size-1.5 rounded-full bg-text-diff-delete-base" />
-    if (props.unseenCount() > 0) return <div class="size-1.5 rounded-full bg-text-interactive-base" />
-    return props.leadingSlot ?? null
-  }
 
   return (
     <A
       href={`/${props.slug}/session/${props.session.id}`}
-      class={`flex items-center gap-2 min-w-0 w-full text-left focus:outline-none ${props.dense ? "py-1" : "py-1.5"}`}
+      class={`flex items-center min-w-0 w-full text-left focus:outline-none leading-[1.4] ${props.dense ? "py-1" : "py-[5px]"}`}
       onPointerDown={props.warmPress}
       onFocus={props.warmFocus}
       onClick={() => {
@@ -118,18 +103,9 @@ const SessionRow = (props: {
         props.clearHoverProjectSoon()
       }}
     >
-      <div
-        data-leading-slot
-        class="shrink-0 w-[14px] h-[14px] flex items-center"
-        style={{ color: props.tint() ?? "var(--icon-interactive-base)" }}
-      >
-        {indicator()}
-      </div>
-      <div class="min-w-0 flex-1 flex items-center gap-2">
-        <Show when={props.titleContent} fallback={<span class="text-13-regular text-text-base [.active_&]:font-medium [.active_&]:text-text-strong min-w-0 flex-1 truncate">{title()}</span>}>
-          {props.titleContent}
-        </Show>
-      </div>
+      <Show when={props.titleContent} fallback={<span class="text-13-regular text-text-base [.active_&]:text-text-strong min-w-0 flex-1 truncate">{title()}</span>}>
+        {props.titleContent}
+      </Show>
     </A>
   )
 }
@@ -137,7 +113,6 @@ const SessionRow = (props: {
 export const SessionItem = (props: SessionItemProps): JSX.Element => {
   const params = useParams()
   const layout = useLayout()
-  const language = useLanguage()
   const notification = useNotification()
   const permission = usePermission()
   const globalSync = useGlobalSync()
@@ -165,6 +140,17 @@ export const SessionItem = (props: SessionItemProps): JSX.Element => {
     return childSessionOnPath(sessionStore.session, props.session.id, params.id)
   })
 
+  const isPinned = createMemo(() => props.pinned?.(props.session) ?? false)
+  const statusGlyph = () => {
+    if (isWorking()) return <Spinner class="size-[14px]" style={{ color: tint() ?? "var(--icon-interactive-base)" }} />
+    if (hasPermissions()) return <div class="size-1.5 rounded-full bg-surface-warning-strong" />
+    if (hasError()) return <div class="size-1.5 rounded-full bg-text-diff-delete-base" />
+    if (unseenCount() > 0) return <div class="size-1.5 rounded-full bg-text-interactive-base" />
+    if (isPinned()) return <Icon name="pin" size="small" class="text-text-weak" />
+    return null
+  }
+  const statusTime = () => (statusGlyph() ? undefined : props.timeText?.(props.session))
+
   const warm = (span: number, priority: "high" | "low") => {
     const nav = props.navList?.()
     const list = nav?.some((item) => item.id === props.session.id && item.directory === props.session.directory)
@@ -191,17 +177,11 @@ export const SessionItem = (props: SessionItemProps): JSX.Element => {
       slug={props.slug}
       mobile={props.mobile}
       dense={props.dense}
-      tint={tint}
-      isWorking={isWorking}
-      hasPermissions={hasPermissions}
-      hasError={hasError}
-      unseenCount={unseenCount}
       clearHoverProjectSoon={props.clearHoverProjectSoon}
       sidebarOpened={layout.sidebar.opened}
       warmPress={() => warm(2, "high")}
       warmFocus={() => warm(2, "high")}
       titleContent={props.titleContent?.({ session: props.session, title: () => sessionTitle(props.session.title) ?? "" })}
-      leadingSlot={!props.level && props.leadingSlot ? props.leadingSlot(props.session) : undefined}
     />
   )
 
@@ -209,7 +189,7 @@ export const SessionItem = (props: SessionItemProps): JSX.Element => {
     <>
       <div
         data-session-id={props.session.id}
-        class="group/session relative w-full min-w-0 rounded-xl cursor-default pr-3 transition-colors hover:bg-surface-raised-base-hover [&:has(:focus-visible)]:bg-surface-raised-base-hover has-[[data-expanded]]:bg-surface-raised-base-hover has-[.active]:bg-surface-raised-base-hover"
+        class="group/session relative w-full min-w-0 rounded-md cursor-default pr-2 transition-colors hover:bg-surface-raised-base-hover [&:has(:focus-visible)]:bg-surface-raised-base-hover has-[[data-expanded]]:bg-surface-raised-base-hover has-[.active]:bg-surface-base-active"
         style={{ "padding-left": `${8 + (props.level ?? 0) * 16}px` }}
       >
         <div class="flex min-w-0 items-center gap-1">
@@ -232,38 +212,25 @@ export const SessionItem = (props: SessionItemProps): JSX.Element => {
           </div>
 
           <Show when={!props.level}>
-            <div
-              class="w-5 shrink-0 overflow-hidden transition-opacity"
-              classList={{
-                "opacity-100 pointer-events-auto": !!props.mobile,
-                "opacity-0 pointer-events-none": !props.mobile,
-                "group-hover/session:opacity-100 group-hover/session:pointer-events-auto": true,
-                "group-focus-within/session:opacity-100 group-focus-within/session:pointer-events-auto": true,
-              }}
-            >
-              <Show
-                when={props.actionSlot}
-                fallback={
-                  <Show when={!props.hideDefaultArchiveAction}>
-                    <Tooltip value={language.t("common.archive")} placement="top">
-                      <IconButton
-                        icon="archive"
-                        variant="ghost"
-                        size="small"
-                        class="rounded-md"
-                        aria-label={language.t("common.archive")}
-                        onClick={(event) => {
-                          event.preventDefault()
-                          event.stopPropagation()
-                          void props.archiveSession(props.session)
-                        }}
-                      />
-                    </Tooltip>
-                  </Show>
-                }
-              >
-                {props.actionSlot?.(props.session)}
+            <div class="relative shrink-0 flex items-center justify-end h-5 min-w-5">
+              {/* default glyph (running / permission / error / unread / pinned) — 20×20 box matches dropdown trigger; fades on hover */}
+              <Show when={statusGlyph()}>
+                <div class="pointer-events-none size-5 flex items-center justify-center transition-opacity group-hover/session:opacity-0 group-focus-within/session:opacity-0">
+                  {statusGlyph()}
+                </div>
+              </Show>
+              {/* fallback time text — free width, fades on hover */}
+              <Show when={statusTime()}>
+                {(time) => (
+                  <span class="pointer-events-none text-12-regular text-text-weaker transition-opacity group-hover/session:opacity-0 group-focus-within/session:opacity-0">
+                    {time()}
+                  </span>
+                )}
               </Show>
+              {/* hover/focus action — overlays status icon */}
+              <div class="absolute inset-y-0 right-0 flex items-center justify-end opacity-0 pointer-events-none transition-opacity group-hover/session:opacity-100 group-hover/session:pointer-events-auto group-focus-within/session:opacity-100 group-focus-within/session:pointer-events-auto">
+                <Show when={props.actionSlot}>{props.actionSlot?.(props.session)}</Show>
+              </div>
             </div>
           </Show>
         </div>
@@ -294,21 +261,21 @@ export const NewSessionItem = (props: {
     <A
       href={`/${props.slug}/session`}
       end
-      class={`flex items-center gap-2 min-w-0 w-full text-left focus:outline-none ${props.dense ? "py-1" : "py-1.5"}`}
+      class={`flex items-center gap-2 min-w-0 w-full text-left focus:outline-none leading-[1.4] ${props.dense ? "py-1" : "py-[5px]"}`}
       onClick={() => {
         if (layout.sidebar.opened()) return
         props.clearHoverProjectSoon()
       }}
     >
-      <div data-leading-slot class="shrink-0 w-[14px] h-[14px] flex items-center">
+      <div data-leading-slot class="shrink-0 w-4 h-4 flex items-center">
         <Icon name="new-session" size="small" class="text-icon-weak" />
       </div>
-      <span class="text-13-regular text-text-base [.active_&]:font-medium [.active_&]:text-text-strong min-w-0 flex-1 truncate">{label}</span>
+      <span class="text-13-regular text-text-base [.active_&]:text-text-strong min-w-0 flex-1 truncate">{label}</span>
     </A>
   )
 
   return (
-    <div class="group/session relative w-full min-w-0 rounded-xl cursor-default transition-colors pl-2 pr-3 hover:bg-surface-raised-base-hover [&:has(:focus-visible)]:bg-surface-raised-base-hover has-[.active]:bg-surface-raised-base-hover">
+    <div class="group/session relative w-full min-w-0 rounded-md cursor-default transition-colors pl-2 pr-2 hover:bg-surface-raised-base-hover [&:has(:focus-visible)]:bg-surface-raised-base-hover has-[.active]:bg-surface-base-active">
       <Show
         when={!tooltip()}
         fallback={
@@ -328,7 +295,7 @@ export const SessionSkeleton = (props: { count?: number }): JSX.Element => {
   return (
     <div class="flex flex-col gap-0.5">
       <For each={items}>
-        {() => <div class="h-8 w-full rounded-xl bg-surface-raised-base opacity-60 animate-pulse" />}
+        {() => <div class="h-8 w-full rounded-md bg-surface-raised-base opacity-60 animate-pulse" />}
       </For>
     </div>
   )
diff --git a/packages/app/src/pages/layout/sidebar-workspace.tsx b/packages/app/src/pages/layout/sidebar-workspace.tsx
index 6c71dc9d8..e02eee656 100644
--- a/packages/app/src/pages/layout/sidebar-workspace.tsx
+++ b/packages/app/src/pages/layout/sidebar-workspace.tsx
@@ -37,7 +37,6 @@ export type WorkspaceSidebarContext = {
   sidebarHovering: Accessor<boolean>
   clearHoverProjectSoon: () => void
   prefetchSession: (session: Session, priority?: "high" | "low") => void
-  archiveSession: (session: Session) => Promise<void>
   workspaceName: (directory: string, projectId?: string, branch?: string) => string | undefined
   renameWorkspace: (directory: string, next: string, projectId?: string, branch?: string) => void
   editorOpen: (id: string) => boolean
@@ -266,7 +265,6 @@ const WorkspaceSessionList = (props: {
           sidebarExpanded={props.ctx.sidebarExpanded}
           clearHoverProjectSoon={props.ctx.clearHoverProjectSoon}
           prefetchSession={props.ctx.prefetchSession}
-          archiveSession={props.ctx.archiveSession}
         />
       )}
     </For>
diff --git a/packages/app/src/pages/session.tsx b/packages/app/src/pages/session.tsx
index af06314ea..2ca0e9cb6 100644
--- a/packages/app/src/pages/session.tsx
+++ b/packages/app/src/pages/session.tsx
@@ -1543,6 +1543,7 @@ export default function Page() {
     scroller = el
     autoScroll.scrollRef(el)
     if (!el) return
+    el.style.paddingBottom = "calc(var(--composer-dock-height, 0px) + 16px)"
     scheduleScrollState(el)
     fill()
   }
@@ -1898,10 +1899,12 @@ export default function Page() {
     () => promptDock,
     ({ height }) => {
       const next = Math.ceil(height)
+      const el = scroller
+
+      document.documentElement.style.setProperty("--composer-dock-height", `${next}px`)
 
       if (next === dockHeight) return
 
-      const el = scroller
       const delta = next - dockHeight
       const stick = el
         ? !autoScroll.userScrolled() || el.scrollHeight - el.clientHeight - el.scrollTop < 10 + Math.max(0, delta)
@@ -2024,6 +2027,13 @@ export default function Page() {
       }
       setPromptDockRef={(el) => {
         promptDock = el
+        if (!el) return
+        const next = Math.ceil(el.getBoundingClientRect().height)
+        if (next <= 0) return
+        if (next !== dockHeight) {
+          dockHeight = next
+          document.documentElement.style.setProperty("--composer-dock-height", `${next}px`)
+        }
       }}
     />
   )
diff --git a/packages/app/src/pages/session/composer/session-composer-region.tsx b/packages/app/src/pages/session/composer/session-composer-region.tsx
index cae6b7bc2..a4d11a7de 100644
--- a/packages/app/src/pages/session/composer/session-composer-region.tsx
+++ b/packages/app/src/pages/session/composer/session-composer-region.tsx
@@ -143,13 +143,13 @@ export function SessionComposerRegion(props: {
     navigate(`/${route.params.dir}/session/${id}`)
   }
 
-  createEffect(() => {
-    const el = store.body
-    if (!el) return
-    const update = () => setStore("height", el.getBoundingClientRect().height)
-    createResizeObserver(store.body, update)
-    update()
-  })
+  createResizeObserver(
+    () => store.body,
+    () => {
+      const el = store.body
+      if (el) setStore("height", el.getBoundingClientRect().height)
+    },
+  )
 
   return (
     <div
@@ -158,7 +158,7 @@ export function SessionComposerRegion(props: {
       data-variant={home() ? "home" : "session"}
       classList={{
         "w-full flex flex-col justify-center items-center pointer-events-none": true,
-        "shrink-0 pb-3 bg-background-stronger": !home(),
+        "absolute inset-x-0 bottom-0 pb-6": !home(),
         "py-0 bg-transparent": home(),
         "text-left": home(),
       }}
@@ -210,7 +210,10 @@ export function SessionComposerRegion(props: {
                     </div>
                   )}
                 </Show>
-                <div class="w-full min-h-32 md:min-h-40 rounded-md border border-border-weak-base bg-background-base/50 px-4 py-3 text-text-weak whitespace-pre-wrap pointer-events-none">
+                <div
+                  data-dock-surface="shell"
+                  class="w-full min-h-32 md:min-h-40 px-4 py-3 text-13-regular text-text-weak whitespace-pre-wrap pointer-events-none"
+                >
                   {handoffPrompt() || language.t("prompt.loading")}
                 </div>
               </>
diff --git a/packages/app/src/pages/session/composer/session-todo-dock.tsx b/packages/app/src/pages/session/composer/session-todo-dock.tsx
index e6fd0764a..ea92c5c46 100644
--- a/packages/app/src/pages/session/composer/session-todo-dock.tsx
+++ b/packages/app/src/pages/session/composer/session-todo-dock.tsx
@@ -12,7 +12,7 @@ import { createStore } from "solid-js/store"
 import { composerEnabled, composerProbe } from "@/testing/session-composer"
 import { useLanguage } from "@/context/language"
 
-const doneToken = "\u0000done\u0000"
+const currentToken = "\u0000current\u0000"
 const totalToken = "\u0000total\u0000"
 
 function dot(status: Todo["status"]) {
@@ -56,17 +56,24 @@ export function SessionTodoDock(props: {
   const toggle = () => setStore("collapsed", (value) => !value)
 
   const total = createMemo(() => props.todos.length)
-  const done = createMemo(() => props.todos.filter((todo) => todo.status === "completed").length)
+  // "current" = the step the user is on (1-indexed). It's the first non-finished
+  // item, or `total` once everything is done.
+  const current = createMemo(() => {
+    if (total() === 0) return 0
+    const idx = props.todos.findIndex((todo) => todo.status !== "completed" && todo.status !== "cancelled")
+    if (idx === -1) return total()
+    return idx + 1
+  })
   const allCancelled = createMemo(() => total() > 0 && props.todos.every((todo) => todo.status === "cancelled"))
   const label = createMemo(() => {
     if (allCancelled()) return language.t("session.todo.cancelled")
-    return language.t("session.todo.progress", { done: done(), total: total() })
+    return language.t("session.todo.progress", { current: current(), total: total() })
   })
   const progress = createMemo(() => {
     if (allCancelled()) return [language.t("session.todo.cancelled")]
     return language
-      .t("session.todo.progress", { done: doneToken, total: totalToken })
-      .split(/(\u0000done\u0000|\u0000total\u0000)/)
+      .t("session.todo.progress", { current: currentToken, total: totalToken })
+      .split(/(\u0000current\u0000|\u0000total\u0000)/)
   })
 
   const active = createMemo(
@@ -154,8 +161,8 @@ export function SessionTodoDock(props: {
           >
             <Index each={progress()}>
               {(item) =>
-                item() === doneToken ? (
-                  <AnimatedNumber value={done()} />
+                item() === currentToken ? (
+                  <AnimatedNumber value={current()} />
                 ) : item() === totalToken ? (
                   <AnimatedNumber value={total()} />
                 ) : (
diff --git a/packages/app/src/pages/session/message-timeline.tsx b/packages/app/src/pages/session/message-timeline.tsx
index 1fa6e481a..2ef05974d 100644
--- a/packages/app/src/pages/session/message-timeline.tsx
+++ b/packages/app/src/pages/session/message-timeline.tsx
@@ -441,7 +441,7 @@ export function MessageTimeline(props: {
 
     let result: { ok: true; path: string } | { ok: false; error: string }
     try {
-      result = await platform.exportSession(id, sdk.directory, defaultName)
+      result = await platform.exportSession(id, sdk.directory, defaultName, language.t("session.export.action.export"))
     } catch (err) {
       showToast({
         title: language.t("session.export.error.failed"),
@@ -532,33 +532,6 @@ export function MessageTimeline(props: {
     navigate(`/${params.dir}/session`)
   }
 
-  const archiveSession = async (sessionID: string) => {
-    const session = sync.session.get(sessionID)
-    if (!session) return
-
-    const sessions = sync.data.session ?? []
-    const index = sessions.findIndex((s) => s.id === sessionID)
-    const nextSession = index === -1 ? undefined : (sessions[index + 1] ?? sessions[index - 1])
-
-    await sdk.client.session
-      .update({ sessionID, time: { archived: Date.now() } })
-      .then(() => {
-        sync.set(
-          produce((draft) => {
-            const index = draft.session.findIndex((s) => s.id === sessionID)
-            if (index !== -1) draft.session.splice(index, 1)
-          }),
-        )
-        navigateAfterSessionRemoval(sessionID, session.parentID, nextSession?.id)
-      })
-      .catch((err) => {
-        showToast({
-          title: language.t("common.requestFailed"),
-          description: errorMessage(err),
-        })
-      })
-  }
-
   const deleteSession = async (sessionID: string) => {
     const session = sync.session.get(sessionID)
     if (!session) return false
@@ -662,7 +635,7 @@ export function MessageTimeline(props: {
     >
       <div class="relative w-full h-full min-w-0">
         <div
-          class="absolute left-1/2 -translate-x-1/2 bottom-6 z-[60] pointer-events-none transition-all duration-200 ease-out"
+          class="absolute left-1/2 -translate-x-1/2 bottom-[calc(var(--composer-dock-height,0px)+2.5rem)] z-[60] pointer-events-none transition-[opacity,transform] duration-200 ease-out"
           classList={{
             "opacity-100 translate-y-0 scale-100": props.scroll.overflow && props.scroll.jump && !staging.isStaging(),
             "opacity-0 translate-y-2 scale-95 pointer-events-none":
@@ -670,18 +643,13 @@ export function MessageTimeline(props: {
           }}
         >
           <button
-            class="pointer-events-auto flex items-center justify-center w-10 h-8 bg-transparent border-none cursor-pointer p-0 group"
+            type="button"
+            class="pointer-events-auto size-8 rounded-full border border-border-weaker-base bg-surface-raised-stronger-non-alpha flex items-center justify-center cursor-pointer p-0 transition-colors hover:bg-surface-raised-base-hover hover:border-border-weak-base hover:[--icon-base:var(--icon-hover)]"
+            style={{ "box-shadow": "var(--shadow-floating)" }}
             onClick={props.onResumeScroll}
+            aria-label={language.t("session.messages.jumpToLatest")}
           >
-            <div
-              class="flex items-center justify-center w-8 h-6 rounded-[6px] border border-border-weaker-base bg-[color-mix(in_srgb,var(--surface-raised-stronger-non-alpha)_80%,transparent)] backdrop-blur-[0.75px] transition-colors group-hover:border-[var(--border-weak-base)] group-hover:[--icon-base:var(--icon-hover)]"
-              style={{
-                "box-shadow":
-                  "0 51px 60px 0 rgba(0,0,0,0.10), 0 15px 18px 0 rgba(0,0,0,0.12), 0 6.386px 7.513px 0 rgba(0,0,0,0.12), 0 2.31px 2.717px 0 rgba(0,0,0,0.20)",
-              }}
-            >
-              <Icon name="arrow-down-to-line" size="small" />
-            </div>
+            <Icon name="chevron-down" size="small" />
           </button>
         </div>
         <ScrollView
@@ -732,176 +700,11 @@ export function MessageTimeline(props: {
           onClick={props.onAutoScrollInteraction}
           class="relative min-w-0 w-full h-full"
           style={{
-            "--session-title-height": showHeader() ? "40px" : "0px",
-            "--sticky-accordion-top": showHeader() ? "48px" : "0px",
+            "--session-title-height": "0px",
+            "--sticky-accordion-top": "0px",
           }}
         >
           <div ref={props.setContentRef} class="min-w-0 w-full">
-            <Show when={showHeader()}>
-              <div
-                data-session-title
-                classList={{
-                  "sticky top-0 z-30 bg-[linear-gradient(to_bottom,var(--background-stronger)_48px,transparent)]": true,
-                  relative: true,
-                  "w-full": true,
-                  "pb-4": true,
-                  "pl-2 pr-3 md:pl-4 md:pr-3": true,
-                  "md:max-w-200 md:mx-auto 2xl:max-w-[1000px]": props.centered,
-                }}
-              >
-                <div class="h-12 w-full flex items-center justify-between gap-2">
-                  <div class="flex items-center gap-1 min-w-0 flex-1 pr-3">
-                    <div class="flex items-center min-w-0 grow-1">
-                      <Show when={parentID()}>
-                        <button
-                          type="button"
-                          data-slot="session-title-parent"
-                          class="min-w-0 max-w-[40%] truncate text-13-medium text-text-weak transition-colors hover:text-text-base"
-                          onClick={navigateParent}
-                        >
-                          {parentTitle()}
-                        </button>
-                        <span
-                          data-slot="session-title-separator"
-                          class="px-2 text-13-medium text-text-weak"
-                          aria-hidden="true"
-                        >
-                          /
-                        </span>
-                      </Show>
-                      <div
-                        class="shrink-0 flex items-center justify-center overflow-hidden transition-[width,margin] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]"
-                        style={{
-                          width: working() ? "16px" : "0px",
-                          "margin-right": working() ? "8px" : "0px",
-                        }}
-                        aria-hidden="true"
-                      >
-                        <Show when={workingStatus() !== "hidden"}>
-                          <div
-                            class="transition-opacity duration-200 ease-out"
-                            classList={{ "opacity-0": workingStatus() === "hiding" }}
-                          >
-                            <Spinner class="size-4" style={{ color: tint() ?? "var(--icon-interactive-base)" }} />
-                          </div>
-                        </Show>
-                      </div>
-                      <Show when={childTitle() || title.editing}>
-                        <Show
-                          when={title.editing}
-                          fallback={
-                            <h1
-                              data-slot="session-title-child"
-                              class="text-13-medium text-text-strong truncate grow-1 min-w-0"
-                              onDblClick={openTitleEditor}
-                            >
-                              {childTitle()}
-                            </h1>
-                          }
-                        >
-                          <InlineInput
-                            ref={(el) => {
-                              titleRef = el
-                            }}
-                            data-slot="session-title-child"
-                            value={title.draft}
-                            disabled={titleMutation.isPending}
-                            class="text-13-medium text-text-strong grow-1 min-w-0 rounded-[6px]"
-                            style={{ "--inline-input-shadow": "var(--shadow-xs-border-select)" }}
-                            onInput={(event) => setTitle("draft", event.currentTarget.value)}
-                            onKeyDown={(event) => {
-                              event.stopPropagation()
-                              if (event.key === "Enter") {
-                                event.preventDefault()
-                                void saveTitleEditor()
-                                return
-                              }
-                              if (event.key === "Escape") {
-                                event.preventDefault()
-                                closeTitleEditor()
-                              }
-                            }}
-                            onBlur={closeTitleEditor}
-                          />
-                        </Show>
-                      </Show>
-                    </div>
-                  </div>
-                  <Show when={sessionID()}>
-                    {(id) => (
-                      <div class="shrink-0 flex items-center gap-3">
-                        <SessionContextUsage placement="bottom" />
-                        <Show when={!parentID()}>
-                          <DropdownMenu
-                            gutter={4}
-                            placement="bottom-end"
-                            open={title.menuOpen}
-                            onOpenChange={(open) => {
-                              setTitle("menuOpen", open)
-                              if (open) return
-                            }}
-                          >
-                            <DropdownMenu.Trigger
-                              as={IconButton}
-                              icon="dot-grid"
-                              variant="ghost"
-                              class="size-6 rounded-md data-[expanded]:bg-surface-base-active"
-                              aria-label={language.t("common.moreOptions")}
-                              aria-expanded={title.menuOpen}
-                              ref={(el: HTMLButtonElement) => {
-                                more = el
-                              }}
-                            />
-                            <DropdownMenu.Portal>
-                              <DropdownMenu.Content
-                                style={{ "min-width": "104px" }}
-                                onCloseAutoFocus={(event) => {
-                                  if (title.pendingRename) {
-                                    event.preventDefault()
-                                    setTitle("pendingRename", false)
-                                    openTitleEditor()
-                                  }
-                                }}
-                              >
-                                <DropdownMenu.Item
-                                  onSelect={() => {
-                                    setTitle("pendingRename", true)
-                                    setTitle("menuOpen", false)
-                                  }}
-                                >
-                                  <DropdownMenu.ItemLabel>{language.t("common.rename")}</DropdownMenu.ItemLabel>
-                                </DropdownMenu.Item>
-                                <Show when={exportAvailable()}>
-                                  <DropdownMenu.Item
-                                    onSelect={() => {
-                                      setTitle("menuOpen", false)
-                                      void onExport()
-                                    }}
-                                  >
-                                    <DropdownMenu.ItemLabel>
-                                      {language.t("session.export.action.export")}
-                                    </DropdownMenu.ItemLabel>
-                                  </DropdownMenu.Item>
-                                </Show>
-                                <DropdownMenu.Item onSelect={() => void archiveSession(id())}>
-                                  <DropdownMenu.ItemLabel>{language.t("common.archive")}</DropdownMenu.ItemLabel>
-                                </DropdownMenu.Item>
-                                <DropdownMenu.Separator />
-                                <DropdownMenu.Item
-                                  onSelect={() => dialog.show(() => <DialogDeleteSession sessionID={id()} />)}
-                                >
-                                  <DropdownMenu.ItemLabel>{language.t("common.delete")}</DropdownMenu.ItemLabel>
-                                </DropdownMenu.Item>
-                              </DropdownMenu.Content>
-                            </DropdownMenu.Portal>
-                          </DropdownMenu>
-                        </Show>
-                      </div>
-                    )}
-                  </Show>
-                </div>
-              </div>
-            </Show>
             <div
               role="log"
               data-slot="session-turn-list"
diff --git a/packages/desktop-electron/src/main/ipc.ts b/packages/desktop-electron/src/main/ipc.ts
index ac3aae9c5..1a1a27c76 100644
--- a/packages/desktop-electron/src/main/ipc.ts
+++ b/packages/desktop-electron/src/main/ipc.ts
@@ -324,7 +324,13 @@ export function registerIpcHandlers(deps: Deps) {
 
   ipcMain.handle(
     "export-session",
-    async (_event: IpcMainInvokeEvent, sessionID: string, directory: string, defaultName?: string) => {
+    async (
+      _event: IpcMainInvokeEvent,
+      sessionID: string,
+      directory: string,
+      defaultName?: string,
+      title?: string,
+    ) => {
       if (typeof sessionID !== "string" || typeof directory !== "string") {
         return { ok: false, error: "invalid_args" } as const
       }
@@ -334,7 +340,7 @@ export function registerIpcHandlers(deps: Deps) {
 
       const fallbackStamp = new Date().toISOString().replace(/[:T]/g, "-").replace(/\..+$/, "")
       const result = await dialog.showSaveDialog({
-        title: "Export session log",
+        title: title ?? "Export session",
         defaultPath: defaultName ?? `pawwork-session-${sessionID.slice(-8)}-${fallbackStamp}.json`,
         filters: [{ name: "JSON", extensions: ["json"] }],
       })
diff --git a/packages/desktop-electron/src/preload/index.ts b/packages/desktop-electron/src/preload/index.ts
index 556ea0435..d2c2818c1 100644
--- a/packages/desktop-electron/src/preload/index.ts
+++ b/packages/desktop-electron/src/preload/index.ts
@@ -59,8 +59,8 @@ const api: ElectronAPI = {
   openFilePicker: (opts) => ipcRenderer.invoke("open-file-picker", opts),
   readFileDataUrl: (path, mime) => ipcRenderer.invoke("read-file-data-url", path, mime),
   saveFilePicker: (opts) => ipcRenderer.invoke("save-file-picker", opts),
-  exportSession: (sessionID, directory, defaultName) =>
-    ipcRenderer.invoke("export-session", sessionID, directory, defaultName),
+  exportSession: (sessionID, directory, defaultName, title) =>
+    ipcRenderer.invoke("export-session", sessionID, directory, defaultName, title),
   openLink: (url) => ipcRenderer.send("open-link", url),
   openPath: (path, app) => ipcRenderer.invoke("open-path", path, app),
   showItemInFolder: (path) => ipcRenderer.invoke("show-item-in-folder", path),
diff --git a/packages/desktop-electron/src/preload/types.ts b/packages/desktop-electron/src/preload/types.ts
index 9efce3963..2a5f456b2 100644
--- a/packages/desktop-electron/src/preload/types.ts
+++ b/packages/desktop-electron/src/preload/types.ts
@@ -85,6 +85,7 @@ export type ElectronAPI = {
     sessionID: string,
     directory: string,
     defaultName?: string,
+    title?: string,
   ) => Promise<{ ok: true; path: string } | { ok: false; error: string }>
   openLink: (url: string) => void
   openPath: (path: string, app?: string) => Promise<void>
diff --git a/packages/desktop-electron/src/renderer/index.tsx b/packages/desktop-electron/src/renderer/index.tsx
index ae58d7f87..2e35dc1a3 100644
--- a/packages/desktop-electron/src/renderer/index.tsx
+++ b/packages/desktop-electron/src/renderer/index.tsx
@@ -175,8 +175,8 @@ const createPlatform = (): Platform => {
       return handleWslPicker(result)
     },
 
-    exportSession(sessionID, directory, defaultName) {
-      return window.api.exportSession(sessionID, directory, defaultName)
+    exportSession(sessionID, directory, defaultName, title) {
+      return window.api.exportSession(sessionID, directory, defaultName, title)
     },
 
     openLink(url: string) {
diff --git a/packages/ui/scripts/grayscale-audit/.gitignore b/packages/ui/scripts/grayscale-audit/.gitignore
new file mode 100644
index 000000000..77ac75498
--- /dev/null
+++ b/packages/ui/scripts/grayscale-audit/.gitignore
@@ -0,0 +1,3 @@
+.venv/
+__pycache__/
+*.pyc
diff --git a/packages/ui/scripts/grayscale-audit/README.md b/packages/ui/scripts/grayscale-audit/README.md
new file mode 100644
index 000000000..f3f730dbf
--- /dev/null
+++ b/packages/ui/scripts/grayscale-audit/README.md
@@ -0,0 +1,62 @@
+# Grayscale Audit
+
+Local verification scripts for the grayscale execution refactor (spec: `docs/superpowers/specs/2026-04-29-pawwork-grayscale-execution-design.md`).
+
+## Setup
+
+```bash
+uv pip install -r requirements.txt
+uv run playwright install chromium
+```
+
+## Usage
+
+In one terminal: `bun --cwd packages/app dev` (must reach http://localhost:3000).
+
+In another:
+
+```bash
+uv run python token_audit.py            # token R-B neutrality (light + dark)
+uv run python chatgpt_gap_audit.py      # layer ΔL*, composer shadow, no-1px-border
+uv run python dark_audit.py             # dark mode pixel assertions
+```
+
+Each script exits 0 on full pass, 1 on any assertion failure.
+
+All three audit scripts accept `--dev-server-url` (default `http://localhost:3000`) when the dev server runs on a different host or port:
+
+```bash
+uv run python token_audit.py --dev-server-url http://localhost:5173
+```
+
+`font_size_v2.py` is an ad-hoc measurement utility (no PASS/FAIL); invoke directly with a screenshot path when an exact rendered font size is needed.
+
+## Assertion → script map
+
+| Assertion | Script |
+|---|---|
+| Token `R-B` neutrality on grayscale-family tokens | `token_audit.py` |
+| Sidebar bg vs main bg ΔL\* (light: 2.0–4.0, dark: 2.0–5.0) | `chatgpt_gap_audit.py` |
+| Composer shadow monotonic decay below edge (light): samples at +1/+5/+10/+20 retina px must be non-increasing in distance-from-white, with detectable shadow at +5 (dist >= 4) | `chatgpt_gap_audit.py` |
+| Composer top-1px and right+3px (past AA fringe) ≈ main bg (no hard border on edges where shadow is not expected; bottom edge is covered by the monotonic check above) | `chatgpt_gap_audit.py` |
+| Sidebar / main / composer dark hex match | `dark_audit.py` |
+| Sidebar item row pitch ≤ 30 logical px | `chatgpt_gap_audit.py` (light mode only) |
+| Active vs inactive ink density ratio 0.95–1.05 | manual smoke (text rasterization analysis is out of scope for this round) |
+
+## Helpers
+
+- `img_sample.py` — pixel sampling primitives:
+  - `to_hex(rgb)` — RGB tuple to hex string
+  - `lab_l(rgb)` — sRGB to CIE L\* (lightness)
+  - `median_region(img, x1, y1, x2, y2)` — median RGB across a rectangle
+  - `darkest_region(img, x1, y1, x2, y2, pct)` — median RGB over the darkest N% of pixels (skips pure-black AA artifacts)
+  - `text_row_height(img, x1, y1, x2, y2, threshold_lum)` — longest consecutive run of inked rows in a band
+  - `lightest_below_white(img, x1, y1, x2, y2, threshold)` — brightest pixel below the near-white threshold in the region
+- `font_size_v2.py` — ad-hoc font size measurement from screenshot (no PASS/FAIL)
+
+## Out-of-audit families (do NOT assert)
+
+`--*-brand-*`, `--*-interactive-*` (orange-derived), `--icon-agent-*`, `--icon-on-*`,
+`--icon-success/warning/critical/info-*`, `--surface-success/warning/critical/info-*`,
+`--surface-diff-*`, `--text-diff-*`, `--text-on-*`, `--syntax-*`, `--markdown-*`, `--avatar-*`.
+These keep their colored tint by design (spec Section 6).
diff --git a/packages/ui/scripts/grayscale-audit/chatgpt_gap_audit.py b/packages/ui/scripts/grayscale-audit/chatgpt_gap_audit.py
new file mode 100644
index 000000000..db744e84f
--- /dev/null
+++ b/packages/ui/scripts/grayscale-audit/chatgpt_gap_audit.py
@@ -0,0 +1,259 @@
+#!/usr/bin/env python3
+"""
+Verify PawWork layer ΔL* and composer shadow against ChatGPT targets.
+Takes a 2x retina screenshot of the running app, asserts:
+  - sidebar bg vs main bg ΔL*: light 2.0–4.0, dark 2.0–5.0
+    (dark target follows ChatGPT: flat sidebar→main, ~3 ΔL*; the elevation
+    happens at composer level, not at main bg)
+  - composer shadow monotonic decay (light only): samples at +1/+5/+10/+20 retina px
+    below bottom edge are non-increasing in distance-from-white, with detectable
+    shadow at +5 (dist >= 4)
+  - composer top-1px / right+3px (past AA fringe): equal to main bg ± 5 per channel
+    (no hard 1px border on edges where shadow is NOT expected; bottom edge is
+    intentionally NOT checked here — covered by the monotonic decay assertion)
+  - sidebar item row pitch <= 30 logical px (light only)
+"""
+import argparse
+import os
+import sys
+
+from PIL import Image
+from playwright.sync_api import sync_playwright
+
+from img_sample import lab_l, median_region, to_hex
+
+# Selectors are STABLE references — verify these resolve against actual
+# PawWork DOM at implementation time. Update inline if PawWork uses different test ids.
+# Selectors target stable `data-component` attributes on the live shell. Fallbacks cover
+# older test ids and structural tags so the script keeps working if attributes shift.
+SIDEBAR_SELECTOR = '[data-component="pawwork-sidebar"]'
+MAIN_SELECTOR = '[data-component="desktop-shell-main"]'
+COMPOSER_SELECTOR = '[data-component="prompt-input"]'  # may be missing on the home route
+
+
+def ensure_sidebar_open(page) -> None:
+    """Idempotently open the sidebar. Cmd+B is a toggle, so unconditionally pressing it
+    closes the sidebar on a second invocation if the persisted layout state already had
+    it open. We probe the rendered width and only toggle when it's collapsed (w == 0).
+    The selector matches the live `data-component="pawwork-sidebar"` element."""
+    sidebar_w = page.evaluate(
+        "() => { const e = document.querySelector('[data-component=\"pawwork-sidebar\"]');"
+        " return e ? e.getBoundingClientRect().width : 0; }"
+    )
+    if sidebar_w < 50:
+        page.keyboard.press("ControlOrMeta+b")
+        page.wait_for_function(
+            "() => { const e = document.querySelector('[data-component=\"pawwork-sidebar\"]');"
+            " return e && e.getBoundingClientRect().width >= 50; }",
+            timeout=2000,
+        )
+        page.wait_for_timeout(150)
+
+
+def screenshot(page, mode: str, path: str, dev_server_url: str):
+    # PawWork's theme preload reads localStorage['pawwork-color-scheme'] and writes a
+    # single-mode :root block; we must seed storage and reload to switch.
+    page.evaluate(f"localStorage.setItem('pawwork-color-scheme', '{mode}')")
+    page.goto(dev_server_url, wait_until="networkidle", timeout=60_000)
+    page.wait_for_function(
+        f"document.documentElement.dataset.colorScheme === '{mode}'",
+        timeout=2000,
+    )
+    ensure_sidebar_open(page)
+    page.wait_for_timeout(150)  # extra time for paint after sidebar open + style recompute
+    page.screenshot(path=path, full_page=False)
+
+
+def bbox(page, selector: str):
+    return page.evaluate(
+        "sel => { const el = document.querySelector(sel); if (!el) return null; "
+        "const r = el.getBoundingClientRect(); "
+        "return { x: r.x, y: r.y, w: r.width, h: r.height }; }",
+        selector,
+    )
+
+
+def assert_layer_delta(img: Image.Image, sb_box, mn_box, mode: str):
+    # box coords are CSS px; screenshot is 2x retina
+    def s(b, x1, y1, x2, y2):
+        return median_region(
+            img,
+            int((b["x"] + x1) * 2),
+            int((b["y"] + y1) * 2),
+            int((b["x"] + x2) * 2),
+            int((b["y"] + y2) * 2),
+        )
+
+    sb = s(sb_box, 20, 80, 80, 140)  # clear strip in sidebar
+    mn = s(mn_box, 100, 100, 300, 300)
+    delta = abs(lab_l(mn) - lab_l(sb))
+    target = (2.0, 4.0) if mode == "light" else (2.0, 5.0)
+    status = "PASS" if target[0] <= delta <= target[1] else "FAIL"
+    print(
+        f"  {status}  layer ΔL* ({mode}): {delta:.2f}  (target {target[0]}-{target[1]})  "
+        f"sb={to_hex(sb)} L*={lab_l(sb):.1f}  mn={to_hex(mn)} L*={lab_l(mn):.1f}"
+    )
+    return status == "PASS"
+
+
+def median_strip(img: Image.Image, cx_2x: int, y_2x: int, half_width: int = 3):
+    """Median RGB across a 1-pixel-tall horizontal strip centered at (cx_2x, y_2x).
+    Less fragile than a single-pixel sample at 2x DPR (anti-aliasing, transparent subpixels)."""
+    return median_region(img, cx_2x - half_width, y_2x, cx_2x + half_width + 1, y_2x + 1)
+
+
+def assert_composer_shadow_monotonic(img: Image.Image, comp_box):
+    """Light mode only: shadow must DECAY MONOTONICALLY downward from composer's bottom edge.
+    Sample at +1, +5, +10, +20 retina px below center bottom; require dist-from-white to
+    decrease (or stay equal within noise). A hard 1px border manifests as a non-monotonic
+    SPIKE at +1 followed by drop to bg — the monotonic check catches it more reliably than
+    "+1 ≈ bg" (which conflicts with shadow being present).
+    Also require a measurable shadow at +5 (dist >= 4) so a flat-no-shadow surface fails."""
+    bottom_y_2x = int((comp_box["y"] + comp_box["h"]) * 2)
+    cx_2x = int((comp_box["x"] + comp_box["w"] / 2) * 2)
+
+    def dist_from_white(rgb):
+        return 255 - (rgb[0] + rgb[1] + rgb[2]) // 3
+
+    offsets = [1, 5, 10, 20]
+    samples = [(off, median_strip(img, cx_2x, bottom_y_2x + off)) for off in offsets]
+    dists = [dist_from_white(rgb) for _, rgb in samples]
+
+    # Monotonic non-increasing within noise tolerance of 1
+    monotonic = all(dists[i] >= dists[i + 1] - 1 for i in range(len(dists) - 1))
+    has_shadow = dists[1] >= 4  # at +5px, shadow should be visible
+
+    for (off, rgb), d in zip(samples, dists):
+        print(f"  ----  composer +{off:2d}px below: dist={d:2d}  {to_hex(rgb)}")
+    ok = monotonic and has_shadow
+    print(
+        f"  {'PASS' if ok else 'FAIL'}  composer shadow monotonic decay (mono={monotonic}, has_shadow_at_5={has_shadow})"
+    )
+    return ok
+
+
+def assert_row_pitch(page) -> bool:
+    """Sidebar item row pitch (top of one row to top of next) must be <= 30 logical px.
+    Only runs in light mode; dark mode uses identical layout."""
+    pitches = page.evaluate(
+        """
+      () => {
+        const rows = Array.from(document.querySelectorAll(
+          '[data-testid="sidebar"] [data-testid="sidebar-item"], aside [role="listitem"], aside li'
+        )).slice(0, 5);
+        if (rows.length < 2) return null;
+        const ys = rows.map(r => r.getBoundingClientRect().top);
+        return ys.slice(1).map((y, i) => y - ys[i]);
+      }
+    """
+    )
+    if not pitches:
+        print("  SKIP  row pitch: fewer than 2 sidebar items found")
+        return True  # Don't fail audit on layout we can't measure; manual smoke catches it
+    max_pitch = max(pitches)
+    ok = max_pitch <= 30
+    print(f"  {'PASS' if ok else 'FAIL'}  sidebar row pitch: max={max_pitch:.1f}px (need <= 30) over {len(pitches)} pairs")
+    return ok
+
+
+def assert_no_hard_border(img: Image.Image, comp_box, main_bg):
+    """Composer must NOT have a 1px hard line at edges where shadow is NOT expected.
+    Check top-1 and right+3 (sampled past the AA fringe) — these should ≈ main bg.
+    Bottom edge is excluded because shadow legitimately darkens it (covered by
+    assert_composer_shadow_monotonic instead).
+    Tolerance is 5 to absorb anti-aliased subpixels at the rendered edge."""
+
+    def close(a, b, tol=5):
+        return all(abs(a[i] - b[i]) <= tol for i in range(3))
+
+    right_x_2x = int((comp_box["x"] + comp_box["w"]) * 2)
+    top_y_2x = int(comp_box["y"] * 2)
+    cx_2x = int((comp_box["x"] + comp_box["w"] / 2) * 2)
+    cy_2x = int((comp_box["y"] + comp_box["h"] / 2) * 2)
+
+    # Sample +3px out from right edge to clear AA fringe; vertical center.
+    right_3 = median_strip(img, right_x_2x + 3, cy_2x)
+    # Sample 1px above top edge — light-mode composer has no upward shadow.
+    top_1 = median_strip(img, cx_2x, top_y_2x - 1)
+
+    checks = [
+        ("right+3px (past AA)", right_3, close(right_3, main_bg)),
+        ("top-1px", top_1, close(top_1, main_bg)),
+    ]
+    all_ok = True
+    for label, sample, ok in checks:
+        print(f"  {'PASS' if ok else 'FAIL'}  composer {label} {to_hex(sample)} ≈ main bg {to_hex(main_bg)}")
+        if not ok:
+            all_ok = False
+    return all_ok
+
+
+def main():
+    parser = argparse.ArgumentParser()
+    parser.add_argument("--dev-server-url", default="http://localhost:3000")
+    parser.add_argument("--screenshot-dir", default="/tmp/grayscale-audit")
+    args = parser.parse_args()
+    os.makedirs(args.screenshot_dir, exist_ok=True)
+
+    failed = 0
+    with sync_playwright() as pw:
+        browser = pw.chromium.launch()
+        ctx = browser.new_context(device_scale_factor=2, viewport={"width": 1440, "height": 900})
+        page = ctx.new_page()
+        try:
+            page.goto(args.dev_server_url, wait_until="networkidle", timeout=60_000)
+        except Exception as e:
+            print(f"FAIL: cannot reach {args.dev_server_url}: {e}", file=sys.stderr)
+            print("Hint: run `bun --cwd packages/app dev` in another terminal first.", file=sys.stderr)
+            sys.exit(1)
+
+        for mode in ["light", "dark"]:
+            print(f"\n=== {mode.upper()} ===")
+            shot = os.path.join(args.screenshot_dir, f"{mode}.png")
+            screenshot(page, mode, shot, args.dev_server_url)
+            img = Image.open(shot).convert("RGB")
+            sb = bbox(page, SIDEBAR_SELECTOR) or bbox(page, '[data-testid="sidebar"]') or bbox(page, "aside")
+            mn = bbox(page, MAIN_SELECTOR) or bbox(page, '[data-testid="main-content"]') or bbox(page, "main")
+            comp = bbox(page, COMPOSER_SELECTOR) or bbox(page, '[data-testid="composer"]') or bbox(page, ".prompt-input")
+            critical_missing = [
+                name for name, val in (("sidebar", sb), ("main", mn)) if val is None
+            ]
+            if critical_missing:
+                print(
+                    f"  FAIL: missing element(s): {', '.join(critical_missing)} "
+                    "— check selectors at top of script"
+                )
+                failed += 1
+                continue
+            main_bg_rgb = median_region(
+                img,
+                int((mn["x"] + 100) * 2),
+                int((mn["y"] + 100) * 2),
+                int((mn["x"] + 300) * 2),
+                int((mn["y"] + 300) * 2),
+            )
+            if not assert_layer_delta(img, sb, mn, mode):
+                failed += 1
+            if mode == "light":
+                if comp is None:
+                    print(
+                        "  FAIL  composer assertions: prompt-input not present on the audited route. "
+                        "Pass --dev-server-url pointing at a session route so composer shadow + "
+                        "no-hard-border are actually enforced."
+                    )
+                    failed += 1
+                else:
+                    if not assert_composer_shadow_monotonic(img, comp):
+                        failed += 1
+                    if not assert_no_hard_border(img, comp, main_bg_rgb):
+                        failed += 1
+                if not assert_row_pitch(page):
+                    failed += 1
+        browser.close()
+
+    print(f"\n{failed} assertion(s) failed." if failed else "\nLayer + composer audit: ✓")
+    sys.exit(1 if failed else 0)
+
+
+if __name__ == "__main__":
+    main()
diff --git a/packages/ui/scripts/grayscale-audit/dark_audit.py b/packages/ui/scripts/grayscale-audit/dark_audit.py
new file mode 100644
index 000000000..da1ba6615
--- /dev/null
+++ b/packages/ui/scripts/grayscale-audit/dark_audit.py
@@ -0,0 +1,147 @@
+#!/usr/bin/env python3
+"""
+Verify PawWork dark mode renders the expected layer hex values.
+Asserts:
+  - Sidebar bg renders as #171717 ± 2 per channel
+  - Main bg renders as #212121 ± 2 per channel
+  - Composer interior renders as #2F2F2F ± 2 per channel
+    (one step lighter than main; lift is the boundary cue, no 1px ring)
+
+These targets follow ChatGPT Dark hierarchy: flat sidebar (~#181818), main one
+step above (~#212121), composer two steps above (~#2F2F2F). The combined
+sidebar→main→composer ladder reads as immersion rather than 'lit room'.
+
+Token-level R-B neutrality for dark mode is covered by `token_audit.py --mode dark`.
+This script focuses on layer-level pixel checks specific to dark mode targets.
+"""
+import argparse
+import os
+import sys
+
+from PIL import Image
+from playwright.sync_api import sync_playwright
+
+from img_sample import median_region, to_hex
+
+TARGETS = {
+    "sidebar bg": ((0x17, 0x17, 0x17), 2),
+    "main bg": ((0x21, 0x21, 0x21), 2),
+    "composer interior": ((0x2F, 0x2F, 0x2F), 2),
+}
+
+
+def assert_close(label, actual, target, tol):
+    ok = all(abs(actual[i] - target[i]) <= tol for i in range(3))
+    print(f"  {'PASS' if ok else 'FAIL'}  {label:22s} {to_hex(actual)} (target {to_hex(target)} ± {tol})")
+    return ok
+
+
+def main():
+    parser = argparse.ArgumentParser()
+    parser.add_argument("--dev-server-url", default="http://localhost:3000")
+    parser.add_argument("--screenshot-dir", default="/tmp/grayscale-audit")
+    args = parser.parse_args()
+    os.makedirs(args.screenshot_dir, exist_ok=True)
+
+    failed = 0
+    with sync_playwright() as pw:
+        browser = pw.chromium.launch()
+        ctx = browser.new_context(device_scale_factor=2, viewport={"width": 1440, "height": 900})
+        page = ctx.new_page()
+        try:
+            page.goto(args.dev_server_url, wait_until="networkidle", timeout=60_000)
+        except Exception as e:
+            print(f"FAIL: cannot reach {args.dev_server_url}: {e}", file=sys.stderr)
+            sys.exit(1)
+        # PawWork's theme preload reads localStorage['pawwork-color-scheme'] and writes a
+        # single-mode :root block; seed storage and reload so the preload picks it up.
+        # After reload, verify `data-color-scheme` lands before sampling.
+        page.evaluate("localStorage.setItem('pawwork-color-scheme', 'dark')")
+        page.goto(args.dev_server_url, wait_until="networkidle", timeout=60_000)
+        page.wait_for_function(
+            "document.documentElement.dataset.colorScheme === 'dark'",
+            timeout=2000,
+        )
+        # Sidebar may be collapsed (default opened: false) or restored from persisted
+        # layout state. Cmd+B is a toggle, so probe first and only press when closed.
+        sidebar_w = page.evaluate(
+            "() => { const e = document.querySelector('[data-component=\"pawwork-sidebar\"]');"
+            " return e ? e.getBoundingClientRect().width : 0; }"
+        )
+        if sidebar_w < 50:
+            page.keyboard.press("ControlOrMeta+b")
+            page.wait_for_function(
+                "() => { const e = document.querySelector('[data-component=\"pawwork-sidebar\"]');"
+                " return e && e.getBoundingClientRect().width >= 50; }",
+                timeout=2000,
+            )
+            page.wait_for_timeout(150)
+        shot = os.path.join(args.screenshot_dir, "dark-layers.png")
+        page.screenshot(path=shot)
+        img = Image.open(shot).convert("RGB")
+
+        # Use bbox to locate sidebar / main / composer like chatgpt_gap_audit.py
+        def bb(sel):
+            return page.evaluate(
+                "sel => { const e = document.querySelector(sel); "
+                "if (!e) return null; const r = e.getBoundingClientRect(); "
+                "return { x: r.x, y: r.y, w: r.width, h: r.height }; }",
+                sel,
+            )
+
+        sb = bb('[data-component="pawwork-sidebar"]') or bb('[data-testid="sidebar"]') or bb("aside")
+        mn = bb('[data-component="desktop-shell-main"]') or bb('[data-testid="main-content"]') or bb("main")
+        # Composer only renders inside a session view. From the bare `/` route used by
+        # this audit, no composer is present — skip the composer assertion in that case
+        # rather than failing.
+        comp = bb('[data-component="prompt-input"]') or bb('[data-testid="composer"]') or bb(".prompt-input")
+
+        samples = {}
+        if sb:
+            samples["sidebar bg"] = median_region(
+                img,
+                int((sb["x"] + 20) * 2),
+                int((sb["y"] + 80) * 2),
+                int((sb["x"] + 80) * 2),
+                int((sb["y"] + 140) * 2),
+            )
+        if mn:
+            samples["main bg"] = median_region(
+                img,
+                int((mn["x"] + 100) * 2),
+                int((mn["y"] + 100) * 2),
+                int((mn["x"] + 300) * 2),
+                int((mn["y"] + 300) * 2),
+            )
+        if comp:
+            samples["composer interior"] = median_region(
+                img,
+                int((comp["x"] + 20) * 2),
+                int((comp["y"] + 10) * 2),
+                int((comp["x"] + comp["w"] - 60) * 2),
+                int((comp["y"] + 30) * 2),
+            )
+
+        for label, (target, tol) in TARGETS.items():
+            if label not in samples:
+                if label == "composer interior":
+                    print(
+                        f"  FAIL  {label}: not present on the audited route. "
+                        "Pass --dev-server-url pointing at a session route so the composer "
+                        "dark hex target is actually enforced."
+                    )
+                    failed += 1
+                    continue
+                print(f"  FAIL  {label}: element not found")
+                failed += 1
+                continue
+            if not assert_close(label, samples[label], target, tol):
+                failed += 1
+        browser.close()
+
+    print(f"\n{failed} assertion(s) failed." if failed else "\nDark layer pixel audit: ✓")
+    sys.exit(1 if failed else 0)
+
+
+if __name__ == "__main__":
+    main()
diff --git a/packages/ui/scripts/grayscale-audit/font_size_v2.py b/packages/ui/scripts/grayscale-audit/font_size_v2.py
new file mode 100644
index 000000000..81cd1139c
--- /dev/null
+++ b/packages/ui/scripts/grayscale-audit/font_size_v2.py
@@ -0,0 +1,112 @@
+#!/usr/bin/env python3
+"""Ad-hoc font-size measurement utility for retina (2x) screenshots.
+
+Not a PASS/FAIL audit — used during commits 8-11 to spot-check rendered glyph height
+when a font-size question arises. Caller supplies a screenshot, a starting x, and a
+y-band that fully contains the line; the script finds the first ink glyph in that
+band, measures its tight bbox, and reports a font-size estimate based on a typical
+typographic ratio for the given script.
+"""
+import argparse
+import sys
+
+from PIL import Image
+
+
+def find_first_glyph_x(img, y_start, y_end, x_search_start, x_search_end, dark_text=True, threshold=180):
+    """Scan x-columns within y-band, find first column with ink. Returns x or None."""
+    px = img.load()
+    for x in range(x_search_start, x_search_end):
+        for y in range(y_start, y_end):
+            r, g, b = px[x, y][:3]
+            lum = 0.299 * r + 0.587 * g + 0.114 * b
+            is_ink = (lum < threshold) if dark_text else (lum > threshold)
+            if is_ink:
+                return x
+    return None
+
+
+def find_letter_at(img, x_start, x_end, y_start, y_end, dark_text=True, threshold=180):
+    """Tight bbox of ink within a rect. Returns (min_x, min_y, max_x, max_y, w, h) or None."""
+    px = img.load()
+    min_x, min_y, max_x, max_y = None, None, None, None
+    for y in range(y_start, y_end):
+        for x in range(x_start, x_end):
+            r, g, b = px[x, y][:3]
+            lum = 0.299 * r + 0.587 * g + 0.114 * b
+            is_ink = (lum < threshold) if dark_text else (lum > threshold)
+            if is_ink:
+                if min_x is None or x < min_x:
+                    min_x = x
+                if min_y is None or y < min_y:
+                    min_y = y
+                if max_x is None or x > max_x:
+                    max_x = x
+                if max_y is None or y > max_y:
+                    max_y = y
+    if min_x is None:
+        return None
+    return (min_x, min_y, max_x, max_y, max_x - min_x + 1, max_y - min_y + 1)
+
+
+def measure(screenshot, x, y_top, y_bottom, script):
+    """Measure rendered font size of the first glyph in the given y-band of `screenshot`.
+
+    Args:
+        screenshot: path to a 2x retina PNG.
+        x: x-search start (image px).
+        y_top, y_bottom: y-band bounding the line.
+        script: one of "latin-caps" or "chinese-ink".
+
+    Returns:
+        (measured_pt, observed_px) — measured_pt is the estimated CSS font-size in
+        logical px (computed from glyph height / typographic ratio); observed_px is
+        the raw glyph height in retina px.
+    """
+    img = Image.open(screenshot).convert("RGB")
+    # Default to dark-on-light. For current grayscale-audit usage (light + dark
+    # PawWork screenshots), dark_text=True with a moderate threshold works.
+    # Add an explicit CLI flag if light-on-dark inversion is ever needed.
+    dark_text = True
+    threshold = 180
+
+    x0 = find_first_glyph_x(img, y_top, y_bottom, x, x + 200, dark_text=dark_text, threshold=threshold)
+    if x0 is None:
+        raise RuntimeError(f"No glyph found in y={y_top}-{y_bottom}, x>={x} in {screenshot}")
+    bbox = find_letter_at(img, x0, x0 + 36, y_top, y_bottom, dark_text=dark_text, threshold=threshold)
+    if bbox is None:
+        raise RuntimeError(f"No bbox at x0={x0} in {screenshot}")
+    narrow = find_letter_at(img, bbox[0], bbox[2] + 1, bbox[1], bbox[3] + 1, dark_text=dark_text, threshold=threshold)
+    if narrow is None:
+        raise RuntimeError(f"No narrow bbox in {screenshot}")
+    observed_px = narrow[5]
+    h_logical = observed_px / 2  # 2x retina
+
+    if script == "latin-caps":
+        ratio = 0.70
+    elif script == "chinese-ink":
+        ratio = 0.88
+    else:
+        raise ValueError(f"Unknown script: {script}")
+
+    measured_pt = h_logical / ratio
+    return (measured_pt, observed_px)
+
+
+
+
+def _cli():
+    parser = argparse.ArgumentParser(description="Measure rendered font size from a retina screenshot.")
+    parser.add_argument("screenshot", help="path to a 2x retina PNG")
+    parser.add_argument("--x", type=int, required=True, help="x of glyph search start (image px)")
+    parser.add_argument("--y-top", type=int, required=True)
+    parser.add_argument("--y-bottom", type=int, required=True)
+    parser.add_argument("--script", choices=["latin-caps", "chinese-ink"], default="latin-caps")
+    args = parser.parse_args()
+    pt, px = measure(args.screenshot, args.x, args.y_top, args.y_bottom, args.script)
+    print(f"{pt:.1f}pt observed ({px}px glyph height)")
+    return 0
+
+
+if __name__ == "__main__":
+    sys.exit(_cli())
diff --git a/packages/ui/scripts/grayscale-audit/img_sample.py b/packages/ui/scripts/grayscale-audit/img_sample.py
new file mode 100644
index 000000000..08efbcdfe
--- /dev/null
+++ b/packages/ui/scripts/grayscale-audit/img_sample.py
@@ -0,0 +1,107 @@
+#!/usr/bin/env python3
+"""Pixel sampling helpers for the grayscale audit scripts.
+
+Pure helpers — no top-level I/O. Importable from token_audit.py / chatgpt_gap_audit.py /
+dark_audit.py. Each function operates on a Pillow `Image` (RGB mode) plus integer pixel
+coordinates already converted to retina (2x) space by the caller.
+"""
+import statistics
+
+
+def to_hex(rgb):
+    return "#{:02X}{:02X}{:02X}".format(*rgb[:3])
+
+
+def lab_l(rgb):
+    """CIE L* perceptual lightness."""
+
+    def f(c):
+        c = c / 255
+        return c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4
+
+    r, g, b = (f(c) for c in rgb[:3])
+    y = 0.2126 * r + 0.7152 * g + 0.0722 * b
+    if y > 0.008856:
+        lstar = 116 * (y ** (1 / 3)) - 16
+    else:
+        lstar = 903.3 * y
+    return round(lstar, 1)
+
+
+def median_region(img, x1, y1, x2, y2):
+    """Median color in a rectangle (good for plain backgrounds)."""
+    px = img.load()
+    rs, gs, bs = [], [], []
+    for y in range(y1, y2):
+        for x in range(x1, x2):
+            r, g, b = px[x, y][:3]
+            rs.append(r)
+            gs.append(g)
+            bs.append(b)
+    return (
+        int(statistics.median(rs)),
+        int(statistics.median(gs)),
+        int(statistics.median(bs)),
+    )
+
+
+def darkest_region(img, x1, y1, x2, y2, pct=2.0):
+    """Representative ink color: 2nd percentile darkest pixel (skips pure-black AA artifacts)."""
+    px = img.load()
+    pixels = []
+    for y in range(y1, y2):
+        for x in range(x1, x2):
+            r, g, b = px[x, y][:3]
+            lum = 0.299 * r + 0.587 * g + 0.114 * b
+            pixels.append((lum, r, g, b))
+    pixels.sort(key=lambda p: p[0])
+    idx = max(1, int(len(pixels) * pct / 100))
+    pool = pixels[:idx]
+    rmed = int(statistics.median(p[1] for p in pool))
+    gmed = int(statistics.median(p[2] for p in pool))
+    bmed = int(statistics.median(p[3] for p in pool))
+    return (rmed, gmed, bmed)
+
+
+def text_row_height(img, x1, y1, x2, y2, threshold_lum=200):
+    """Estimate text glyph height by counting consecutive vertical rows containing ink pixels."""
+    px = img.load()
+    rows_with_ink = []
+    for y in range(y1, y2):
+        has_ink = False
+        for x in range(x1, x2):
+            r, g, b = px[x, y][:3]
+            lum = 0.299 * r + 0.587 * g + 0.114 * b
+            if lum < threshold_lum:
+                has_ink = True
+                break
+        rows_with_ink.append(has_ink)
+    runs = []
+    current = 0
+    for has_ink in rows_with_ink:
+        if has_ink:
+            current += 1
+        else:
+            if current > 0:
+                runs.append(current)
+            current = 0
+    if current > 0:
+        runs.append(current)
+    return max(runs) if runs else 0
+
+
+def lightest_below_white(img, x1, y1, x2, y2, threshold=253):
+    """Lightest pixel that's not pure-white-ish (good for finding subtle bg differentiation)."""
+    px = img.load()
+    best = (0, 0, 0)
+    best_l = -1
+    for y in range(y1, y2):
+        for x in range(x1, x2):
+            r, g, b = px[x, y][:3]
+            if r >= threshold and g >= threshold and b >= threshold:
+                continue
+            lum = 0.299 * r + 0.587 * g + 0.114 * b
+            if lum > best_l:
+                best_l = lum
+                best = (r, g, b)
+    return best
diff --git a/packages/ui/scripts/grayscale-audit/requirements.txt b/packages/ui/scripts/grayscale-audit/requirements.txt
new file mode 100644
index 000000000..cf9c72868
--- /dev/null
+++ b/packages/ui/scripts/grayscale-audit/requirements.txt
@@ -0,0 +1,2 @@
+pillow>=12.2.0,<13
+playwright>=1.40,<2
diff --git a/packages/ui/scripts/grayscale-audit/token_audit.py b/packages/ui/scripts/grayscale-audit/token_audit.py
new file mode 100644
index 000000000..6ddcdf47d
--- /dev/null
+++ b/packages/ui/scripts/grayscale-audit/token_audit.py
@@ -0,0 +1,166 @@
+#!/usr/bin/env python3
+"""
+Verify grayscale-family CSS tokens render with abs(R-B) <= 1 on a running dev server.
+Usage: python token_audit.py [--dev-server-url http://localhost:3000] [--mode light|dark|both]
+Exit 0 if all assertions pass, 1 otherwise.
+"""
+import argparse
+import re
+import sys
+
+from playwright.sync_api import sync_playwright
+
+GRAYSCALE_TOKENS = [
+    "--text-base",
+    "--text-weak",
+    "--text-weaker",
+    "--text-strong",
+    "--text-stronger",
+    "--icon-base",
+    "--icon-strong-base",
+    "--icon-hover",
+    "--icon-active",
+    "--icon-disabled",
+    "--icon-weak-base",
+    "--border-base",
+    "--border-strong-base",
+    "--border-weak-base",
+    "--border-weaker-base",
+    "--surface-base-hover",
+    "--surface-base-active",
+    "--surface-raised-base-hover",
+    "--surface-raised-base-active",
+    "--button-secondary-base",
+    "--button-secondary-hover",
+    "--button-ghost-hover",
+]
+
+# Modern Chromium serializes `getComputedStyle(...).color` as either:
+#   rgb(13, 13, 13)         — comma-separated, opaque
+#   rgb(13 13 13)           — space-separated, opaque (CSS Color 4)
+#   rgba(13, 13, 13, 0.5)   — comma-separated, with alpha
+#   rgb(13 13 13 / 0.5)     — space-separated, with alpha
+# We accept all four. Plain `getPropertyValue('--token')` returns the raw token text
+# (e.g. "var(--text-weak)"), which is NOT what we want — we resolve via a probe element
+# whose `color` property consumes the variable, then read the computed `color`.
+
+_RGB_RE = re.compile(r"rgba?\(\s*([0-9.]+)[\s,]+([0-9.]+)[\s,]+([0-9.]+)")
+
+
+def parse_color(value: str):
+    """Parse rgb(...) / rgba(...) (comma OR space sep) or #hex into (R, G, B)."""
+    v = value.strip()
+    m = _RGB_RE.match(v)
+    if m:
+        return tuple(int(float(g)) for g in m.groups())
+    if v.startswith("#"):
+        h = v.lstrip("#")
+        if len(h) == 3:
+            h = "".join(c * 2 for c in h)
+        return tuple(int(h[i : i + 2], 16) for i in (0, 2, 4))
+    raise ValueError(f"Cannot parse color: {value!r}")
+
+
+# Two-step JS: first verify the token is DEFINED on :root (otherwise `var(--missing)`
+# would fall back to inherited `color`, which defaults to rgb(0,0,0) and would silently
+# pass an R-B==0 check). Only then resolve via a probe element whose `color` consumes
+# the variable, forcing the engine to compute and serialize as rgb/rgba.
+RESOLVE_TOKEN_JS = """
+(token) => {
+  const raw = getComputedStyle(document.documentElement).getPropertyValue(token).trim();
+  if (raw === '') return { defined: false, value: null };
+  const probe = document.createElement('div');
+  probe.style.position = 'absolute';
+  probe.style.visibility = 'hidden';
+  probe.style.color = `var(${token})`;
+  document.body.appendChild(probe);
+  const value = getComputedStyle(probe).color;
+  probe.remove();
+  return { defined: true, value };
+}
+"""
+
+
+def audit_mode(page, mode: str, dev_server_url: str):
+    """Switch PawWork's color scheme to mode, resolve each token via probe, return list of
+    (token, value, R-B). PawWork's theme preload reads `localStorage['pawwork-color-scheme']`
+    and writes a single-mode :root block; emulating the media feature alone does NOT switch.
+    Seed storage, reload, then verify `data-color-scheme` lands before sampling — a stale
+    paint with the previous mode's tokens would silently corrupt the audit."""
+    page.evaluate(f"localStorage.setItem('pawwork-color-scheme', '{mode}')")
+    page.goto(dev_server_url, wait_until="networkidle", timeout=60_000)
+    page.wait_for_function(
+        f"document.documentElement.dataset.colorScheme === '{mode}'",
+        timeout=2000,
+    )
+    page.wait_for_timeout(50)  # one RAF tick for style recompute
+    results = []
+    for token in GRAYSCALE_TOKENS:
+        try:
+            res = page.evaluate(RESOLVE_TOKEN_JS, token)
+        except Exception as e:
+            results.append((token, f"ERR: {e}", None))
+            continue
+        if not res.get("defined"):
+            # Token is not declared on :root for this theme. This is itself a failure
+            # signal — the audit cannot verify a missing token.
+            results.append((token, "UNDEFINED", None))
+            continue
+        resolved = res.get("value", "")
+        try:
+            r, g, b = parse_color(resolved)
+        except ValueError:
+            results.append((token, resolved or "UNPARSEABLE", None))
+            continue
+        spread = max(r, g, b) - min(r, g, b)
+        results.append((token, resolved, spread))
+    return results
+
+
+def main():
+    parser = argparse.ArgumentParser()
+    parser.add_argument("--dev-server-url", default="http://localhost:3000")
+    parser.add_argument("--mode", choices=["light", "dark", "both"], default="both")
+    args = parser.parse_args()
+
+    failed = 0
+    skipped = 0
+    with sync_playwright() as pw:
+        browser = pw.chromium.launch()
+        page = browser.new_page()
+        try:
+            page.goto(args.dev_server_url, wait_until="networkidle", timeout=60_000)
+        except Exception as e:
+            print(f"FAIL: cannot reach {args.dev_server_url}: {e}", file=sys.stderr)
+            print("Hint: run `bun --cwd packages/app dev` in another terminal first.", file=sys.stderr)
+            sys.exit(1)
+
+        modes = ["light", "dark"] if args.mode == "both" else [args.mode]
+        for mode in modes:
+            print(f"\n=== {mode.upper()} MODE ===")
+            for token, value, spread in audit_mode(page, mode, args.dev_server_url):
+                if spread is None:
+                    skipped += 1
+                    print(f"  SKIP   {token:42s} = {value}")
+                    continue
+                status = "PASS" if spread <= 1 else "FAIL"
+                if status == "FAIL":
+                    failed += 1
+                print(f"  {status}   {token:42s} = {value}  (channel_spread={spread:d})")
+        browser.close()
+
+    # Closed token list: any UNDEFINED / UNPARSEABLE / ERR is a hard failure.
+    # The spec requires every grayscale-family token in GRAYSCALE_TOKENS to be
+    # asserted; a missing or unparseable token means the spec wasn't applied.
+    if skipped:
+        print(f"\nFAIL: {skipped} token(s) could not be resolved (UNDEFINED/UNPARSEABLE/ERR).")
+        sys.exit(1)
+
+    if failed:
+        print(f"\n{failed} assertion(s) failed.")
+        sys.exit(1)
+    print("\nAll grayscale tokens neutral. ✓")
+
+
+if __name__ == "__main__":
+    main()
diff --git a/packages/ui/src/components/basic-tool.css b/packages/ui/src/components/basic-tool.css
index feb786566..4328dc1cd 100644
--- a/packages/ui/src/components/basic-tool.css
+++ b/packages/ui/src/components/basic-tool.css
@@ -188,13 +188,9 @@
   align-items: center;
   gap: 8px;
   padding: 8px 12px;
-  border-radius: 6px;
-  border: 1px solid var(--border-weak-base, rgba(255, 255, 255, 0.08));
-  background: color-mix(in srgb, var(--background-base) 92%, transparent);
-  transition:
-    border-color 0.15s ease,
-    background-color 0.15s ease,
-    color 0.15s ease;
+  /* Container is spacing-only — no bg, no border, no shadow. Spec: drop card chrome,
+     keep only the inline `param` chip as content distinction. */
+  transition: color 0.15s ease;
 
   [data-slot="basic-tool-tool-info-structured"] {
     flex: 1 1 auto;
@@ -249,9 +245,6 @@
 
   &:hover,
   &:focus-visible {
-    border-color: var(--border-weak-base, rgba(255, 255, 255, 0.08));
-    background: color-mix(in srgb, var(--background-stronger) 88%, transparent);
-
     [data-component="task-tool-action"] {
       opacity: 1;
     }
diff --git a/packages/ui/src/components/dialog.css b/packages/ui/src/components/dialog.css
index f298c2549..f1d88b906 100644
--- a/packages/ui/src/components/dialog.css
+++ b/packages/ui/src/components/dialog.css
@@ -4,7 +4,7 @@
   position: fixed;
   inset: 0;
   z-index: 50;
-  background-color: hsl(from var(--background-base) h s l / 0.2);
+  background-color: light-dark(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7));
 }
 
 [data-component="dialog"] {
@@ -47,10 +47,10 @@
 
       /* padding: 8px; */
       /* padding: 8px 8px 0 8px; */
-      border-radius: var(--radius-xl);
+      border-radius: 14px;
       background: var(--surface-raised-stronger-non-alpha);
       background-clip: padding-box;
-      box-shadow: var(--shadow-lg-border-base);
+      box-shadow: var(--shadow-modal);
 
       [data-slot="dialog-header"] {
         display: flex;
@@ -136,10 +136,10 @@
 }
 
 [data-component="dialog"][data-transition] [data-slot="dialog-content"] {
-  animation: contentHide 100ms ease-in forwards;
+  animation: contentHide 100ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
 
   &[data-expanded] {
-    animation: contentShow 150ms ease-out;
+    animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
   }
 }
 
diff --git a/packages/ui/src/components/dock-surface.css b/packages/ui/src/components/dock-surface.css
index d7e2aec14..3c59b50c5 100644
--- a/packages/ui/src/components/dock-surface.css
+++ b/packages/ui/src/components/dock-surface.css
@@ -1,10 +1,31 @@
 [data-dock-surface="shell"] {
   background-color: var(--surface-raised-stronger-non-alpha);
-  box-shadow: var(--shadow-xs-border-base), var(--shadow-xs);
+  /* Light: 1px ring + drop shadow (ring needed against #FFFFFF main bg). */
+  box-shadow:
+    0 0 0 1px var(--border-weak-base),
+    var(--shadow-raised);
   position: relative;
   z-index: 10;
-  border-radius: 26px;
+  border-radius: 18px;
   overflow: clip;
+
+  &:focus-within {
+    box-shadow:
+      0 0 0 1px var(--border-base),
+      var(--shadow-raised);
+  }
+}
+
+/* Dark: composer bg sits one step above main bg; ring suppressed in both
+   default and focus-within states. The lift + caret are the cue; a focus ring
+   on a #2F2F2F surface (against #626262 border-base) reads as a visual jump
+   on every click. */
+:root[data-color-scheme="dark"] [data-dock-surface="shell"] {
+  box-shadow: var(--shadow-raised);
+
+  &:focus-within {
+    box-shadow: var(--shadow-raised);
+  }
 }
 
 [data-dock-surface="tray"] {
diff --git a/packages/ui/src/components/dropdown-menu.css b/packages/ui/src/components/dropdown-menu.css
index edc2eee9a..b30f98a76 100644
--- a/packages/ui/src/components/dropdown-menu.css
+++ b/packages/ui/src/components/dropdown-menu.css
@@ -2,12 +2,11 @@
 [data-component="dropdown-menu-sub-content"] {
   min-width: 8rem;
   overflow: hidden;
-  border-radius: var(--radius-md);
-  border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent);
+  border-radius: 14px;
   background-clip: padding-box;
   background-color: var(--surface-raised-stronger-non-alpha);
   padding: 4px;
-  box-shadow: var(--shadow-md);
+  box-shadow: var(--shadow-floating);
   z-index: 50;
   transform-origin: var(--kb-menu-content-transform-origin);
 
@@ -36,7 +35,7 @@
     align-items: center;
     gap: 8px;
     padding: 4px 8px;
-    border-radius: var(--radius-sm);
+    border-radius: var(--radius-md);
     cursor: default;
     user-select: none;
     outline: none;
diff --git a/packages/ui/src/components/list.css b/packages/ui/src/components/list.css
index e79d68cfa..6e4471f55 100644
--- a/packages/ui/src/components/list.css
+++ b/packages/ui/src/components/list.css
@@ -197,12 +197,12 @@
 
         color: var(--text-weak);
 
-        /* text-14-medium */
+        /* text-12-regular — aligned with sidebar section headers */
         font-family: var(--font-family-sans);
-        font-size: var(--font-size-hierarchy);
+        font-size: var(--font-size-x-small);
         font-style: normal;
-        font-weight: var(--font-weight-medium);
-        line-height: var(--line-height-large); /* 142.857% */
+        font-weight: var(--font-weight-regular);
+        line-height: var(--line-height-large);
         letter-spacing: var(--letter-spacing-normal);
 
         &::after {
diff --git a/packages/ui/src/components/popover.css b/packages/ui/src/components/popover.css
index b49542afd..811b85778 100644
--- a/packages/ui/src/components/popover.css
+++ b/packages/ui/src/components/popover.css
@@ -6,12 +6,11 @@
   z-index: 50;
   min-width: 200px;
   max-width: 320px;
-  border-radius: var(--radius-md);
+  border-radius: 14px;
   background-color: var(--surface-raised-stronger-non-alpha);
 
-  border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent);
   background-clip: padding-box;
-  box-shadow: var(--shadow-md);
+  box-shadow: var(--shadow-floating);
 
   transform-origin: var(--kb-popover-content-transform-origin);
 
@@ -67,7 +66,7 @@
   }
 
   [data-slot="popover-body"] {
-    padding: 12px;
+    padding: 4px;
   }
 
   [data-slot="popover-arrow"] {
diff --git a/packages/ui/src/styles/tailwind/index.css b/packages/ui/src/styles/tailwind/index.css
index d8b0b2a1a..f49adb8d7 100644
--- a/packages/ui/src/styles/tailwind/index.css
+++ b/packages/ui/src/styles/tailwind/index.css
@@ -60,7 +60,7 @@
   --radius-sm: 0.25rem;
   --radius-md: 0.375rem;
   --radius-lg: 0.5rem;
-  --radius-xl: 0.625rem;
+  --radius-xl: 0.875rem;
 
   --shadow-xs: var(--shadow-xs);
   --shadow-md: var(--shadow-md);
diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css
index be1abc3eb..496631975 100644
--- a/packages/ui/src/styles/theme.css
+++ b/packages/ui/src/styles/theme.css
@@ -49,7 +49,7 @@
   --radius-sm: 0.25rem;
   --radius-md: 0.375rem;
   --radius-lg: 0.5rem;
-  --radius-xl: 0.625rem;
+  --radius-xl: 0.875rem;
 
   --shadow-xs:
     0 1px 2px -0.5px light-dark(hsl(0 0% 0% / 0.04), hsl(0 0% 0% / 0.06)),
@@ -90,6 +90,22 @@
     0 13.141px 29.201px 0 rgba(0, 0, 0, 0.04), 0 6.38px 14.177px 0 rgba(0, 0, 0, 0.05),
     0 3.127px 6.95px 0 rgba(0, 0, 0, 0.06), 0 1.237px 2.748px 0 rgba(0, 0, 0, 0.09);
 
+  /* PawWork raised-surface shadow language (light mode default).
+     Applied to surfaces that "lift off" the main bg without a 1px border.
+     Cast color tints toward the brand warm so shadows share the same
+     undertone as borders and warm-tinted surfaces. */
+  --shadow-raised:
+    0 6px 24px rgba(60, 30, 10, 0.06),
+    0 1px 2px rgba(60, 30, 10, 0.05);
+
+  --shadow-floating:
+    0 8px 24px rgba(50, 25, 8, 0.09),
+    0 1px 3px rgba(50, 25, 8, 0.07);
+
+  --shadow-modal:
+    0 16px 48px rgba(45, 22, 6, 0.11),
+    0 4px 12px rgba(45, 22, 6, 0.07);
+
   color-scheme: light;
   --text-mix-blend-mode: multiply;
 
@@ -356,6 +372,21 @@
     color-scheme: dark;
     --text-mix-blend-mode: plus-lighter;
 
+    /* PawWork raised-surface shadows (dark mode).
+       Drop the brand-warm tint and shift to neutral black depth so elevated
+       surfaces (composer, popover, dialog) read against #181818-class bgs. */
+    --shadow-raised:
+      0 1px 0 rgba(255, 255, 255, 0.04) inset,
+      0 1px 2px rgba(0, 0, 0, 0.30);
+    --shadow-floating:
+      0 1px 0 rgba(255, 255, 255, 0.05) inset,
+      0 8px 24px rgba(0, 0, 0, 0.40),
+      0 1px 3px rgba(0, 0, 0, 0.40);
+    --shadow-modal:
+      0 1px 0 rgba(255, 255, 255, 0.06) inset,
+      0 16px 48px rgba(0, 0, 0, 0.50),
+      0 4px 12px rgba(0, 0, 0, 0.30);
+
     /* OC-2 fallback variables (dark) */
     --background-base: #101010;
     --background-weak: #1e1e1e;
diff --git a/packages/ui/src/theme/themes/pawwork.json b/packages/ui/src/theme/themes/pawwork.json
index 6e3079153..4c79b1b40 100644
--- a/packages/ui/src/theme/themes/pawwork.json
+++ b/packages/ui/src/theme/themes/pawwork.json
@@ -24,17 +24,35 @@
       "surface-raised-base": "#FFFFFF",
       "surface-raised-strong": "#FFFFFF",
       "surface-raised-stronger": "#FFFFFF",
-      "text-strong": "#1A1613",
-      "text-base": "#4A4138",
-      "text-weak": "#8C817A",
-      "border-weak-base": "#ECE6DF",
-      "border-weaker-base": "#F3EDE6",
+      "surface-base-hover": "#EEEEEE",
+      "surface-base-active": "#E8E8E8",
+      "surface-raised-base-hover": "#EEEEEE",
+      "surface-raised-base-active": "#E8E8E8",
+      "text-strong": "#0D0D0D",
+      "text-stronger": "#0D0D0D",
+      "text-base": "#0D0D0D",
+      "text-weak": "#8F8F8F",
+      "text-weaker": "#B5B5B5",
+      "border-base": "#E5E5E5",
+      "border-strong-base": "#ABABAB",
+      "border-weak-base": "#E5E5E5",
+      "border-weaker-base": "#F0F0F0",
       "surface-interactive-base": "#FDF6F0",
       "surface-interactive-hover": "#FBECE0",
       "button-primary-base": "#FF5910",
+      "button-secondary-base": "#FFFFFF",
+      "button-secondary-hover": "#F4F4F4",
+      "button-ghost-hover": "#EEEEEE",
       "text-on-interactive-base": "#FFFFFF",
-      "icon-base": "#8C817A",
-      "icon-weak-base": "#B6ADA7"
+      "icon-base": "#8F8F8F",
+      "icon-strong-base": "#0D0D0D",
+      "icon-hover": "#0D0D0D",
+      "icon-active": "#0D0D0D",
+      "icon-disabled": "#C5C5C5",
+      "icon-weak-base": "#C5C5C5",
+      "shadow-raised": "0 6px 24px rgba(60,30,10,0.06), 0 1px 2px rgba(60,30,10,0.05)",
+      "shadow-floating": "0 8px 24px rgba(50,25,8,0.09), 0 1px 3px rgba(50,25,8,0.07)",
+      "shadow-modal": "0 16px 48px rgba(45,22,6,0.11), 0 4px 12px rgba(45,22,6,0.07)"
     }
   },
   "dark": {
@@ -52,25 +70,43 @@
     },
     "overrides": {
       "background-base": "#212121",
-      "background-weak": "#181818",
+      "background-weak": "#171717",
       "background-strong": "#212121",
       "background-stronger": "#212121",
-      "surface-base": "#2A2A2A",
-      "surface-raised-base": "#2A2A2A",
-      "surface-raised-strong": "#2D2D2D",
-      "surface-raised-stronger": "#303030",
-      "surface-raised-stronger-non-alpha": "#303030",
-      "text-strong": "#ECEAE6",
-      "text-base": "#B8B5AF",
-      "text-weak": "#7D7B77",
+      "surface-base": "#212121",
+      "surface-raised-base": "#212121",
+      "surface-raised-strong": "#212121",
+      "surface-raised-stronger": "#212121",
+      "surface-raised-stronger-non-alpha": "#2F2F2F",
+      "surface-base-hover": "#1B1B1B",
+      "surface-base-active": "#2F2F2F",
+      "surface-raised-base-hover": "#3A3A3A",
+      "surface-raised-base-active": "#444444",
+      "text-strong": "#ECECEC",
+      "text-stronger": "#ECECEC",
+      "text-base": "#B4B4B4",
+      "text-weak": "#7B7B7B",
+      "text-weaker": "#5C5C5C",
       "border-weak-base": "#3A3A3A",
       "border-weaker-base": "#2D2D2D",
       "surface-interactive-base": "#2B1F19",
       "surface-interactive-hover": "#362619",
       "button-primary-base": "#FF5910",
       "text-on-interactive-base": "#FFFFFF",
-      "icon-base": "#A09D98",
-      "icon-weak-base": "#6E6C68"
+      "icon-base": "#7B7B7B",
+      "icon-strong-base": "#ECECEC",
+      "icon-hover": "#ECECEC",
+      "icon-active": "#ECECEC",
+      "icon-disabled": "#5C5C5C",
+      "icon-weak-base": "#6B6B6B",
+      "border-base": "#626262",
+      "border-strong-base": "#717171",
+      "button-secondary-base": "#212121",
+      "button-secondary-hover": "#2F2F2F",
+      "button-ghost-hover": "#1B1B1B",
+      "shadow-raised": "0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.30)",
+      "shadow-floating": "0 1px 0 rgba(255,255,255,0.05) inset, 0 8px 24px rgba(0,0,0,0.40), 0 1px 3px rgba(0,0,0,0.40)",
+      "shadow-modal": "0 1px 0 rgba(255,255,255,0.06) inset, 0 16px 48px rgba(0,0,0,0.50), 0 4px 12px rgba(0,0,0,0.30)"
     }
   }
 }