From 5b56d430e9ef81f35f25338b2b75805a5cf21314 Mon Sep 17 00:00:00 2001
From: scotttong <scott.tong@gmail.com>
Date: Fri, 4 Sep 2026 16:15:21 -0700
Subject: [PATCH] feat(ui): refine core navigation and task detail (#12854)

## Thinking Path

> - Paperclip is the open source app people use to manage AI agents for
work.
> - The main navigation and task detail view are core operator surfaces.
> - Several controls used different hover states, popover layouts, and
spacing rules.
> - Recent task actions also needed a compact menu and correct inbox
archive behavior.
> - These differences made the interface feel inconsistent and caused
some content to look crowded or clipped.
> - This pull request aligns these surfaces with the Paperclip design
tokens and current interaction patterns.
> - The benefit is a simpler and more consistent operator experience in
light and dark modes.

## Linked Issues or Issue Description

**What happened?**

Profile and organization popovers used inconsistent layouts. Navigation
controls used different hover and selected backgrounds. Task warnings
and the composer could crowd nearby content. Archiving a recent task
could also remove it from more than the inbox.

**Expected behavior**

Popover menus should use the same compact visual language. Navigation
controls should share readable hover and selected tokens. Task detail
content should keep consistent spacing. Archiving should hide a task
from the inbox while keeping it in the task list.

**Steps to reproduce**

1. Open the main sidebar in light or dark mode.
2. Open the profile and organization menus.
3. Hover navigation items, the organization trigger, the profile
trigger, and the feedback flag.
4. Open a task with a warning banner and a long thread.
5. Use the recent task overflow menu and archive a task.

**Paperclip version or commit**

Reproduced on `master` before this branch.

**Deployment mode**

Local dev (`pnpm dev`).

## What Changed

- Rebuilt the profile and organization popovers with compact token-based
layouts.
- Matched organization popover width and alignment to the profile
popover.
- Unified sidebar hover and selected states in light and dark modes.
- Added a recent task overflow menu with rename, archive, and pause or
restart actions.
- Kept archived tasks in the task list while removing them from the
inbox.
- Improved warning banner and composer spacing in task detail views.
- Added and updated focused UI tests for the changed behavior.

## Verification

- `pnpm check:token-gates` passed.
- `pnpm --filter @paperclipai/ui typecheck` passed.
- The seven affected UI test files passed with 216 tests.
- `pnpm --filter @paperclipai/ui build` passed.
- GitHub CI passed the full build, typecheck and release registry,
general test, serialized server, canary dry-run, and end-to-end
matrices.
- Greptile reviewed commit `6e296be85` at 5/5 with no outstanding
actionable findings.

## Risks

- Risk is limited to sidebar presentation, recent task actions, and task
detail layout.
- The recent task archive action now follows inbox-only archive
semantics.
- No database schema or public API contract changed.

> I checked [`ROADMAP.md`](ROADMAP.md). This pull request does not
duplicate planned core work.

## Model Used

- OpenAI Codex, GPT-5.6. The model used high reasoning, tool use, and
code execution. The context window size was not exposed.

## Checklist

- [x] I have included a thinking path that traces from project context
to this change
- [x] I have specified the model used (with version and capability
details)
- [x] I have checked ROADMAP.md and confirmed this PR does not duplicate
planned core work
- [x] I have searched GitHub for duplicate or related PRs and linked
them above
- [x] I have either (a) linked existing issues with `Fixes: #` / `Closes
#` / `Refs #` OR (b) described the issue in-PR following the relevant
issue template
- [x] I have not referenced internal/instance-local Paperclip issues or
links (only public GitHub `#NNN` / `github.com/paperclipai/paperclip`
URLs)
- [x] My branch name describes the change (e.g. `docs/...`, `fix/...`)
and contains no internal Paperclip ticket id or instance-derived details
- [x] I have run tests locally and they pass
- [x] I have added or updated tests where applicable
- [x] I have updated relevant documentation to reflect my changes
- [x] I have considered and documented any risks above
- [x] All Paperclip CI gates are green
- [x] Greptile is 5/5 with no open P2s, recommendations, or follow-ups
- [x] I will address all Greptile and reviewer comments before
requesting merge

---------

Co-authored-by: Scott Tong <scott@scottsmbpm5max.lan>
Co-authored-by: Paperclip <noreply@paperclip.ing>
---
 ui/src/components/Sidebar.tsx                 |   3 +-
 .../SidebarAccountMenu.production.tsx         |   2 +-
 ui/src/components/SidebarAccountMenu.test.tsx |  24 +-
 ui/src/components/SidebarAccountMenu.tsx      | 152 ++++-----
 ui/src/components/SidebarAgents.tsx           |   2 +-
 .../SidebarCompanyMenu.production.tsx         | 170 ++++++----
 ui/src/components/SidebarCompanyMenu.test.tsx |  48 +--
 ui/src/components/SidebarCompanyMenu.tsx      | 166 ++++++----
 ui/src/components/SidebarNavItem.test.tsx     |  14 +-
 ui/src/components/SidebarNavItem.tsx          |   4 +-
 ui/src/components/SidebarProjects.tsx         |   4 +-
 ui/src/components/SidebarRecentTasks.test.tsx | 282 +++++++++++++++-
 ui/src/components/SidebarRecentTasks.tsx      | 313 +++++++++++++++++-
 ui/src/components/SidebarStarredProjects.tsx  |   4 +-
 ui/src/components/TaskChatThread.test.tsx     |   9 +-
 ui/src/components/TaskChatThread.tsx          |   9 +-
 ui/src/components/ThemeToggle.test.tsx        |  17 +
 ui/src/components/ThemeToggle.tsx             |  26 +-
 ui/src/index.css                              |  21 +-
 ui/src/pages/DesignGuide.tsx                  |  11 +
 ui/src/pages/IssueDetail.test.tsx             |  12 +
 ui/src/pages/IssueDetail.tsx                  |   9 +-
 22 files changed, 1009 insertions(+), 293 deletions(-)

diff --git a/ui/src/components/Sidebar.tsx b/ui/src/components/Sidebar.tsx
index 2c750c36ee..9276fbcda4 100644
--- a/ui/src/components/Sidebar.tsx
+++ b/ui/src/components/Sidebar.tsx
@@ -141,8 +141,7 @@ export function Sidebar() {
                 data-slot="icon-button"
                 aria-label={rail ? "New Task" : undefined}
                 className={cn(
-                  "flex items-center gap-2.5 mx-2 rounded-lg px-2 py-1.5 pointer-coarse:py-1 text-(length:--text-compact) font-medium text-foreground/80 hover:text-foreground transition-colors",
-                  streamlinedUiEnabled ? "hover:bg-background" : "hover:bg-accent/50",
+                  "flex items-center gap-2.5 mx-2 rounded-lg px-2 py-1.5 pointer-coarse:py-1 text-(length:--text-compact) font-medium text-foreground/80 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
                 )}
               >
                 <SquarePen className="h-4 w-4 shrink-0" />
diff --git a/ui/src/components/SidebarAccountMenu.production.tsx b/ui/src/components/SidebarAccountMenu.production.tsx
index c136d4ea2f..738fcc7a62 100644
--- a/ui/src/components/SidebarAccountMenu.production.tsx
+++ b/ui/src/components/SidebarAccountMenu.production.tsx
@@ -235,7 +235,7 @@ export function SidebarAccountMenu({
                 target="_blank"
                 rel="noreferrer"
                 aria-label="Share feedback"
-                className="flex size-8 shrink-0 items-center justify-center rounded-lg text-foreground/80 transition-colors hover:bg-accent/50 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                className="flex size-8 shrink-0 items-center justify-center rounded-lg text-muted-foreground/50 transition-colors hover:bg-accent/50 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
               >
                 <Flag className="h-4 w-4" aria-hidden="true" />
               </a>
diff --git a/ui/src/components/SidebarAccountMenu.test.tsx b/ui/src/components/SidebarAccountMenu.test.tsx
index 5c4ffe0c02..0b31d68158 100644
--- a/ui/src/components/SidebarAccountMenu.test.tsx
+++ b/ui/src/components/SidebarAccountMenu.test.tsx
@@ -125,14 +125,21 @@ describe("SidebarAccountMenu", () => {
     expect(accountSurface?.className).not.toContain("border-border");
     const accountTrigger = container.querySelector('button[aria-label="Open account menu"]');
     expect(accountTrigger?.classList).toContain("rounded-lg");
-    expect(accountTrigger?.classList).toContain("hover:bg-background");
+    expect(accountTrigger?.classList).toContain("hover:bg-sidebar-accent");
+    expect(accountTrigger?.classList).toContain("hover:text-sidebar-accent-foreground");
+    expect(accountTrigger?.classList).not.toContain("hover:bg-background");
 
     const feedbackButton = container.querySelector<HTMLAnchorElement>(
       'a[aria-label="Share feedback"]',
     );
     expect(feedbackButton?.getAttribute("href")).toBe("https://paperclip.ing/feedback");
     expect(feedbackButton?.getAttribute("target")).toBe("_blank");
-    expect(feedbackButton?.classList).toContain("hover:bg-background");
+    expect(feedbackButton?.classList).toContain("text-muted-foreground/50");
+    expect(feedbackButton?.classList).not.toContain("text-border");
+    expect(feedbackButton?.classList).not.toContain("text-muted-foreground");
+    expect(feedbackButton?.classList).toContain("hover:bg-sidebar-accent");
+    expect(feedbackButton?.classList).toContain("hover:text-sidebar-accent-foreground");
+    expect(feedbackButton?.classList).not.toContain("hover:bg-background");
     expect(feedbackButton?.querySelector("svg")?.classList).toContain("lucide-flag");
     expect(feedbackButton?.getAttribute("data-slot")).toBe("tooltip-trigger");
     expect(feedbackButton?.hasAttribute("title")).toBe(false);
@@ -166,6 +173,9 @@ describe("SidebarAccountMenu", () => {
     );
     expect(feedbackButton?.getAttribute("href")).toBe("https://paperclip.ing/feedback");
     expect(feedbackButton?.getAttribute("target")).toBe("_blank");
+    expect(feedbackButton?.classList).toContain("text-muted-foreground/50");
+    expect(feedbackButton?.classList).not.toContain("text-border");
+    expect(feedbackButton?.classList).not.toContain("text-muted-foreground");
     expect(feedbackButton?.classList).toContain("hover:bg-accent/50");
     expect(feedbackButton?.querySelector("svg")?.classList).toContain("lucide-flag");
     expect(feedbackButton?.getAttribute("data-slot")).toBe("tooltip-trigger");
@@ -235,7 +245,15 @@ describe("SidebarAccountMenu", () => {
     expect(popover?.textContent).not.toContain("Paperclip v");
     expect(document.body.textContent).toContain("jane@example.com");
     expect(document.body.querySelector('[data-slot="popover-content"]')?.className)
-      .toContain("w-(--sz-277px)");
+      .toContain("w-(--profile-popover-width)");
+    expect(document.body.querySelector('[data-slot="popover-content"]')?.className)
+      .toContain("rounded-xl");
+    expect(document.body.querySelector('[data-slot="popover-content"]')?.className)
+      .toContain("min-h-(--profile-popover-min-height)");
+    expect(document.body.querySelector('a[href="/company/settings"]')?.className)
+      .not.toContain("bg-muted");
+    expect(document.body.textContent).not.toContain("Manage company and instance settings.");
+    expect(document.body.textContent).not.toContain("Open your activity, task, and usage ledger.");
     expect(document.body.querySelector('a[href="/company/settings/instance/profile"]')).not.toBeNull();
     expect(document.body.querySelector('a[href="/company/settings"]')).not.toBeNull();
 
diff --git a/ui/src/components/SidebarAccountMenu.tsx b/ui/src/components/SidebarAccountMenu.tsx
index 87c2897d51..822080ad9f 100644
--- a/ui/src/components/SidebarAccountMenu.tsx
+++ b/ui/src/components/SidebarAccountMenu.tsx
@@ -36,7 +36,6 @@ interface SidebarAccountMenuProps {
 
 interface MenuActionProps {
   label: string;
-  description: string;
   icon: LucideIcon;
   onClick?: () => void;
   href?: string;
@@ -65,19 +64,22 @@ function deriveUserSlug(name: string | null | undefined, email: string | null |
   return "me";
 }
 
-function MenuAction({ label, description, icon: Icon, onClick, href, external = false }: MenuActionProps) {
+function MenuAction({
+  label,
+  icon: Icon,
+  onClick,
+  href,
+  external = false,
+}: MenuActionProps) {
   const className =
-    "flex w-full items-start gap-3 rounded-xl px-3 py-3 text-left transition-colors hover:bg-accent/60";
+    "flex h-(--profile-popover-row-height) w-full items-center gap-(--profile-popover-row-gap) rounded-lg px-2.5 text-left text-(length:--text-compact) font-medium leading-(--profile-popover-label-line-height) text-foreground transition-colors hover:bg-accent";
 
   const content = (
     <>
-      <span className="mt-0.5 rounded-lg border border-border bg-background/70 p-2 text-muted-foreground">
+      <span className="flex size-5 shrink-0 items-center justify-center text-muted-foreground">
         <Icon className="size-4" />
       </span>
-      <span className="min-w-0 flex-1">
-        <span className="block text-sm font-medium text-foreground">{label}</span>
-        <span className="block text-xs text-muted-foreground">{description}</span>
-      </span>
+      <span className="min-w-0 flex-1 truncate">{label}</span>
     </>
   );
 
@@ -146,7 +148,7 @@ export function SidebarAccountMenu({
             <button
               type="button"
               className={cn(
-                "flex min-w-0 items-center gap-2.5 rounded-lg text-left text-(length:--text-compact) font-medium text-foreground/80 transition-colors hover:bg-background hover:text-foreground",
+                "flex min-w-0 items-center gap-2.5 rounded-lg text-left text-(length:--text-compact) font-medium text-foreground/80 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
                 rail ? "w-full px-3 py-2" : "flex-1 px-2 py-1.5",
               )}
               aria-label="Open account menu"
@@ -162,79 +164,69 @@ export function SidebarAccountMenu({
             side="top"
             align="start"
             sideOffset={10}
-            className="w-(--sz-277px) max-w-(--sz-calc-24) overflow-hidden rounded-t-2xl rounded-b-none border-border p-0 shadow-2xl"
+            className="min-h-(--profile-popover-min-height) w-(--profile-popover-width) max-w-(--sz-calc-24) overflow-hidden rounded-xl border-border bg-popover p-0 shadow-(--shadow-profile-popover)"
           >
-            <div className="h-24 bg-(image:--gradient-extract-25)" />
-            <div className="-mt-8 px-4 pb-4">
-              <div className="flex items-start gap-3">
-                <div className="rounded-2xl border-4 border-popover bg-popover p-0.5 shadow-sm">
-                  <Avatar size="lg">
-                    {session?.user.image ? <AvatarImage src={session.user.image} alt={displayName} /> : null}
-                    <AvatarFallback>{initials}</AvatarFallback>
-                  </Avatar>
-                </div>
-                <div className="min-w-0 flex-1 pt-1">
-                  <h2 className="truncate text-base font-semibold text-foreground">{displayName}</h2>
-                  <p className="truncate text-sm text-muted-foreground">{secondaryLabel}</p>
-                </div>
+            <div className="flex h-(--profile-popover-header-height) shrink-0 items-center gap-2.5 px-3.5">
+              <Avatar className="size-9">
+                {session?.user.image ? <AvatarImage src={session.user.image} alt={displayName} /> : null}
+                <AvatarFallback className="text-xs text-foreground">{initials}</AvatarFallback>
+              </Avatar>
+              <div className="min-w-0 flex-1">
+                <h2 className="truncate text-sm font-semibold leading-(--profile-popover-label-line-height) text-foreground">
+                  {displayName}
+                </h2>
+                <p className="truncate text-(length:--text-micro) leading-(--profile-popover-meta-line-height) text-muted-foreground">
+                  {secondaryLabel}
+                </p>
               </div>
+            </div>
 
-              <div className="mt-4 space-y-1">
-                <MenuAction
-                  label="Settings"
-                  description="Manage company and instance settings."
-                  icon={Settings}
-                  href="/company/settings"
-                  onClick={closeNavigationChrome}
-                />
-                <MenuAction
-                  label="View profile"
-                  description="Open your activity, task, and usage ledger."
-                  icon={UserRound}
-                  href={profileHref}
-                  onClick={closeNavigationChrome}
-                />
-                <MenuAction
-                  label="Edit profile"
-                  description="Update your display name and avatar."
-                  icon={UserRoundPen}
-                  href={PROFILE_SETTINGS_PATH}
-                  onClick={closeNavigationChrome}
-                />
-                <MenuAction
-                  label="Documentation"
-                  description="Open Paperclip docs in a new tab."
-                  icon={BookOpen}
-                  href={DOCS_URL}
-                  external
-                  onClick={() => setOpen(false)}
-                />
-                <ThemeToggle variant="menu-action" onAfterToggle={() => setOpen(false)} />
-                {deploymentMode === "authenticated" ? (
-                  <button
-                    type="button"
-                    className={cn(
-                      "flex w-full items-start gap-3 rounded-xl px-3 py-3 text-left transition-colors hover:bg-destructive/10",
-                      signOutMutation.isPending && "cursor-not-allowed opacity-60",
-                    )}
-                    onClick={handleSignOut}
-                    disabled={signOutMutation.isPending}
-                  >
-                    <span className="mt-0.5 rounded-lg border border-border bg-background/70 p-2 text-muted-foreground">
-                      <LogOut className="size-4" />
-                    </span>
-                    <span className="min-w-0 flex-1">
-                      <span className="block text-sm font-medium text-foreground">
-                        {signOutMutation.isPending ? "Signing out..." : "Sign out"}
-                      </span>
-                      <span className="block text-xs text-muted-foreground">
-                        End this browser session.
-                      </span>
-                    </span>
-                  </button>
-                ) : null}
-                <SidebarServerInfo />
-              </div>
+            <div className="flex flex-1 flex-col gap-0.5 border-t border-border px-2.5 pb-2.5 pt-2">
+              <MenuAction
+                label="Settings"
+                icon={Settings}
+                href="/company/settings"
+                onClick={closeNavigationChrome}
+              />
+              <MenuAction
+                label="View profile"
+                icon={UserRound}
+                href={profileHref}
+                onClick={closeNavigationChrome}
+              />
+              <MenuAction
+                label="Edit profile"
+                icon={UserRoundPen}
+                href={PROFILE_SETTINGS_PATH}
+                onClick={closeNavigationChrome}
+              />
+              <MenuAction
+                label="Documentation"
+                icon={BookOpen}
+                href={DOCS_URL}
+                external
+                onClick={() => setOpen(false)}
+              />
+              <ThemeToggle variant="compact-menu-action" onAfterToggle={() => setOpen(false)} />
+              {deploymentMode === "authenticated" ? (
+                <button
+                  type="button"
+                  className={cn(
+                    "flex h-(--profile-popover-row-height) w-full items-center gap-(--profile-popover-row-gap) rounded-lg px-2.5 text-left text-(length:--text-compact) font-medium leading-(--profile-popover-label-line-height) text-foreground transition-colors hover:bg-destructive/10",
+                    signOutMutation.isPending && "cursor-not-allowed opacity-60",
+                  )}
+                  onClick={handleSignOut}
+                  disabled={signOutMutation.isPending}
+                >
+                  <span className="flex size-5 shrink-0 items-center justify-center text-muted-foreground">
+                    <LogOut className="size-4" />
+                  </span>
+                  <span className="min-w-0 flex-1 truncate">
+                    {signOutMutation.isPending ? "Signing out..." : "Sign out"}
+                  </span>
+                </button>
+              ) : null}
+              <SidebarServerInfo />
             </div>
           </PopoverContent>
         </Popover>
@@ -246,7 +238,7 @@ export function SidebarAccountMenu({
                 target="_blank"
                 rel="noreferrer"
                 aria-label="Share feedback"
-                className="flex size-8 shrink-0 items-center justify-center rounded-lg text-foreground/80 transition-colors hover:bg-background hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                className="flex size-8 shrink-0 items-center justify-center rounded-lg text-muted-foreground/50 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
               >
                 <Flag className="h-4 w-4" aria-hidden="true" />
               </a>
diff --git a/ui/src/components/SidebarAgents.tsx b/ui/src/components/SidebarAgents.tsx
index efaa3b387d..806e1fd294 100644
--- a/ui/src/components/SidebarAgents.tsx
+++ b/ui/src/components/SidebarAgents.tsx
@@ -663,7 +663,7 @@ export function SidebarAgents({ streamlined = false }: { streamlined?: boolean }
             onClick={() => {
               if (isMobile) setSidebarOpen(false);
             }}
-            className="flex items-center gap-2.5 mx-2 rounded-lg px-2 py-1.5 pointer-coarse:py-1 text-(length:--text-compact) font-medium text-muted-foreground transition-colors hover:bg-background hover:text-foreground"
+            className="flex items-center gap-2.5 mx-2 rounded-lg px-2 py-1.5 pointer-coarse:py-1 text-(length:--text-compact) font-medium text-muted-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
           >
             <Users className="shrink-0 h-4 w-4" />
             <span className={rail ? SIDEBAR_RAIL_HIDDEN_LABEL : undefined}>See all agents</span>
diff --git a/ui/src/components/SidebarCompanyMenu.production.tsx b/ui/src/components/SidebarCompanyMenu.production.tsx
index 476fcf6e87..af118f5328 100644
--- a/ui/src/components/SidebarCompanyMenu.production.tsx
+++ b/ui/src/components/SidebarCompanyMenu.production.tsx
@@ -30,7 +30,6 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { useCompany } from "@/context/CompanyContext";
@@ -51,16 +50,20 @@ interface SidebarCompanyMenuProps {
   onOpenChange?: (open: boolean) => void;
 }
 
-const WORKSPACE_ICON_CLASS = "size-5 shrink-0 rounded-md text-(length:--text-micro)";
-const WORKSPACE_BADGE_CLASS =
-  "shrink-0 rounded bg-muted px-1.5 py-0.5 font-mono text-(length:--text-nano) text-muted-foreground";
+const TRIGGER_WORKSPACE_ICON_CLASS = "size-5 shrink-0 rounded-md text-(length:--text-micro)";
+const POPOVER_WORKSPACE_ICON_CLASS =
+  "size-(--organization-popover-avatar-size) shrink-0 rounded-lg text-(length:--text-micro)";
+const ORGANIZATION_ROW_CLASS =
+  "h-(--organization-popover-company-row-height) min-w-0 gap-(--organization-popover-row-gap) rounded-lg px-2.5 py-0 text-(length:--text-compact) focus:bg-accent/50 focus:text-foreground";
+const ORGANIZATION_ACTION_CLASS =
+  "h-(--organization-popover-action-row-height) gap-(--organization-popover-row-gap) rounded-lg px-2.5 py-0 text-(length:--text-compact) font-medium leading-(--organization-popover-action-line-height) text-foreground focus:bg-accent/50 focus:text-foreground";
 
-function WorkspaceIcon({ company }: { company: Company }) {
+function WorkspaceIcon({ company, inPopover = false }: { company: Company; inPopover?: boolean }) {
   return (
     <CompanyPatternIcon
       companyName={company.name}
       logoUrl={company.logoUrl}
-      className={WORKSPACE_ICON_CLASS}
+      className={inPopover ? POPOVER_WORKSPACE_ICON_CLASS : TRIGGER_WORKSPACE_ICON_CLASS}
     />
   );
 }
@@ -71,7 +74,7 @@ function WorkspaceIcon({ company }: { company: Company }) {
  * uses — seeded by the display name, never fetched.
  */
 function StackIcon({ displayName }: { displayName: string }) {
-  return <CompanyPatternIcon companyName={displayName} className={WORKSPACE_ICON_CLASS} />;
+  return <CompanyPatternIcon companyName={displayName} className={POPOVER_WORKSPACE_ICON_CLASS} />;
 }
 
 /**
@@ -91,7 +94,7 @@ function CurrentStackIcon({
     <CompanyPatternIcon
       companyName={displayName}
       logoUrl={company?.logoUrl}
-      className={WORKSPACE_ICON_CLASS}
+      className={TRIGGER_WORKSPACE_ICON_CLASS}
     />
   );
 }
@@ -108,19 +111,26 @@ function CloudStackItem({
   return (
     <DropdownMenuItem
       onSelect={() => onSelect(stack)}
-      className={cn("min-w-0 gap-2 py-2", isSelected && "bg-accent text-accent-foreground")}
+      className={ORGANIZATION_ROW_CLASS}
     >
       <StackIcon displayName={stack.displayName} />
-      <span className="min-w-0 flex-1 truncate" title={stack.displayName}>
-        {stack.displayName}
+      <span className="min-w-0 flex-1">
+        <span
+          className="block truncate font-medium leading-(--organization-popover-name-line-height)"
+          title={stack.displayName}
+        >
+          {stack.displayName}
+        </span>
+        <span
+          className="block truncate text-(length:--text-nano) leading-(--organization-popover-prefix-line-height) text-muted-foreground"
+          title={stack.stackSlug}
+        >
+          {stack.stackSlug}
+        </span>
       </span>
-      {/* Company badges are 3-4 character issue prefixes, but stack slugs are
-          user-chosen and can be long enough to truncate the name to a single
-          letter — the name is the primary identifier, so the badge yields. */}
-      <span className={cn(WORKSPACE_BADGE_CLASS, "max-w-24 truncate")} title={stack.stackSlug}>
-        {stack.stackSlug}
+      <span className="flex size-5 shrink-0 items-center justify-center">
+        {isSelected ? <Check className="size-4 text-foreground" /> : null}
       </span>
-      {isSelected ? <Check className="size-4 shrink-0 text-muted-foreground" /> : null}
     </DropdownMenuItem>
   );
 }
@@ -162,20 +172,28 @@ function SortableCompanyItem({
         onSelect(company);
       }}
       className={cn(
-        "min-w-0 gap-2 py-2",
+        ORGANIZATION_ROW_CLASS,
         isEditing && "cursor-grab",
         isDragging && "opacity-80",
-        isSelected && "bg-accent text-accent-foreground",
       )}
     >
-      <WorkspaceIcon company={company} />
-      <span className="min-w-0 flex-1 truncate">{company.name}</span>
+      <WorkspaceIcon company={company} inPopover />
+      <span className="min-w-0 flex-1">
+        <span className="block truncate font-medium leading-(--organization-popover-name-line-height)">
+          {company.name}
+        </span>
+        {isEditing ? null : (
+          <span className="block truncate text-(length:--text-nano) leading-(--organization-popover-prefix-line-height) text-muted-foreground">
+            {company.issuePrefix}
+          </span>
+        )}
+      </span>
       {isEditing ? (
         <button
           type="button"
           ref={setActivatorNodeRef}
           aria-label={`Reorder ${company.name}`}
-          className="inline-flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-(length:--rad-2) focus-visible:ring-ring"
+          className="inline-flex size-8 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-(length:--rad-2) focus-visible:ring-ring"
           onClick={(event) => {
             event.preventDefault();
             event.stopPropagation();
@@ -186,10 +204,9 @@ function SortableCompanyItem({
           <GripVertical className="size-4" aria-hidden="true" />
         </button>
       ) : (
-        <>
-          <span className={WORKSPACE_BADGE_CLASS}>{company.issuePrefix}</span>
-          {isSelected ? <Check className="size-4 text-muted-foreground" /> : null}
-        </>
+        <span className="flex size-5 shrink-0 items-center justify-center">
+          {isSelected ? <Check className="size-4 text-foreground" /> : null}
+        </span>
       )}
     </DropdownMenuItem>
   );
@@ -384,10 +401,14 @@ export function SidebarCompanyMenu({ open: controlledOpen, onOpenChange }: Sideb
           {!rail && <ChevronsUpDown className="size-3.5 shrink-0 text-muted-foreground" />}
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="start" sideOffset={8} className="w-64 p-1">
-        <div className="flex items-center justify-between gap-2 px-2 py-1.5">
-          <DropdownMenuLabel className="p-0 text-(length:--text-micro) font-semibold uppercase text-muted-foreground">
-            {isCloud ? "Switch organization" : "Switch company"}
+      <DropdownMenuContent
+        align="start"
+        sideOffset={8}
+        className="ml-2 w-(--organization-popover-width) max-w-(--sz-calc-24) overflow-hidden rounded-xl border-border bg-popover p-0 shadow-(--shadow-profile-popover)"
+      >
+        <div className="flex h-(--organization-popover-header-height) items-center justify-between gap-2 px-3.5">
+          <DropdownMenuLabel className="p-0 text-(length:--text-compact) font-semibold text-foreground">
+            Organizations
           </DropdownMenuLabel>
           {/* Stack order is owned by cloud's own portfolio in v1, so the
               drag-to-reorder affordance stays self-hosted-only. */}
@@ -399,13 +420,13 @@ export function SidebarCompanyMenu({ open: controlledOpen, onOpenChange }: Sideb
                 event.stopPropagation();
                 setIsEditingOrder((current) => !current);
               }}
-              className="rounded px-1.5 py-0.5 text-(length:--text-micro) font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+              className="rounded px-1.5 py-0.5 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
             >
               {isEditingOrder ? "Done" : "Edit"}
             </button>
           )}
         </div>
-        <div className="max-h-96 overflow-y-auto">
+        <div className="flex max-h-96 flex-col gap-0.5 overflow-y-auto px-2.5 pb-2 pt-1">
           {isCloud ? (
             <>
               {stacks.map((stack) => (
@@ -474,54 +495,63 @@ export function SidebarCompanyMenu({ open: controlledOpen, onOpenChange }: Sideb
             </>
           )}
         </div>
-        <DropdownMenuSeparator />
-        {/* A cloud instance without a configured cloud origin has nowhere to
-            send the user, so the row (and its separator) drop out entirely. */}
-        {isCloud && !createStackUrl ? null : (
-          <>
+        <div className="flex flex-col gap-0.5 border-t border-border px-2.5 pb-2.5 pt-2">
+          {/* A cloud instance without a configured cloud origin has nowhere to
+              send the user, so the row drops out entirely. */}
+          {isCloud && !createStackUrl ? null : (
             <DropdownMenuItem
               onClick={addCompany}
-              className="gap-2 py-2 text-muted-foreground"
+              className={ORGANIZATION_ACTION_CLASS}
               disabled={isEditingOrder}
             >
-              <Plus className="size-4" />
-              <span>Create new organization...</span>
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-          </>
-        )}
-        {showInvitePeople ? (
-          <DropdownMenuItem asChild disabled={isEditingOrder}>
-            <Link
-              to="/company/settings/invites"
-              onClick={(event) => {
-                if (isEditingOrder) {
-                  event.preventDefault();
-                  return;
-                }
-                closeNavigationChrome();
-              }}
-            >
-              <UserPlus className="size-4" />
-              <span className="truncate">
-                {currentName ? `Invite people to ${currentName}` : "Invite people"}
+              <span className="flex size-5 shrink-0 items-center justify-center text-muted-foreground">
+                <Plus className="size-4" />
               </span>
-            </Link>
-          </DropdownMenuItem>
-        ) : null}
-        {session?.session ? (
-          <>
-            <DropdownMenuSeparator />
+              <span className="min-w-0 flex-1 truncate">Create organization</span>
+            </DropdownMenuItem>
+          )}
+          {showInvitePeople ? (
             <DropdownMenuItem
-              variant="destructive"
+              asChild
+              disabled={isEditingOrder}
+              className={ORGANIZATION_ACTION_CLASS}
+            >
+              <Link
+                to="/company/settings/invites"
+                onClick={(event) => {
+                  if (isEditingOrder) {
+                    event.preventDefault();
+                    return;
+                  }
+                  closeNavigationChrome();
+                }}
+              >
+                <span className="flex size-5 shrink-0 items-center justify-center text-muted-foreground">
+                  <UserPlus className="size-4" />
+                </span>
+                <span className="min-w-0 flex-1 truncate">
+                  {currentName
+                    ? `Invite people to ${currentName}`
+                    : "Invite people"}
+                </span>
+              </Link>
+            </DropdownMenuItem>
+          ) : null}
+          {session?.session ? (
+            <DropdownMenuItem
+              className={ORGANIZATION_ACTION_CLASS}
               onClick={() => signOutMutation.mutate()}
               disabled={isEditingOrder || signOutMutation.isPending}
             >
-              <LogOut className="size-4" />
-              <span>{signOutMutation.isPending ? "Signing out..." : "Sign out"}</span>
+              <span className="flex size-5 shrink-0 items-center justify-center text-muted-foreground">
+                <LogOut className="size-4" />
+              </span>
+              <span className="min-w-0 flex-1 truncate">
+                {signOutMutation.isPending ? "Signing out..." : "Sign out"}
+              </span>
             </DropdownMenuItem>
-          </>
-        ) : null}
+          ) : null}
+        </div>
       </DropdownMenuContent>
     </DropdownMenu>
   );
diff --git a/ui/src/components/SidebarCompanyMenu.test.tsx b/ui/src/components/SidebarCompanyMenu.test.tsx
index 5c6cd697ef..4c07dfb19f 100644
--- a/ui/src/components/SidebarCompanyMenu.test.tsx
+++ b/ui/src/components/SidebarCompanyMenu.test.tsx
@@ -296,16 +296,20 @@ describe("SidebarCompanyMenu", () => {
     expect(trigger).not.toBeNull();
     expect(trigger?.classList).toContain("px-4");
     expect(trigger?.classList).toContain("has-[>svg]:px-4");
-    expect(trigger?.classList).toContain("hover:bg-background");
-    expect(trigger?.classList).toContain("hover:text-foreground");
-    expect(trigger?.classList).toContain("dark:hover:bg-background");
+    expect(trigger?.classList).toContain("hover:bg-sidebar-accent");
+    expect(trigger?.classList).toContain("hover:text-sidebar-accent-foreground");
+    expect(trigger?.classList).toContain("dark:hover:bg-sidebar-accent");
+    expect(trigger?.classList).toContain("dark:hover:text-sidebar-accent-foreground");
+    expect(trigger?.classList).not.toContain("hover:bg-background");
+    expect(trigger?.classList).not.toContain("dark:hover:bg-background");
+    expect(trigger?.classList).not.toContain("dark:hover:bg-accent/50");
     act(() => {
       trigger?.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true, button: 0 }));
       trigger?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
     });
     await flushReact();
 
-    expect(document.body.textContent).toContain("Create new organization...");
+    expect(document.body.textContent).toContain("Create organization");
     expect(document.body.textContent).not.toContain("Add company...");
 
     act(() => {
@@ -343,11 +347,11 @@ describe("SidebarCompanyMenu", () => {
     });
     await flushReact();
 
-    expect(document.body.textContent).toContain("Switch organization");
+    expect(document.body.textContent).toContain("Organizations");
     expect(document.body.textContent).toContain("Edit");
     expect(document.body.textContent).toContain("Strata");
     expect(document.body.textContent).toContain("ANA");
-    expect(document.body.textContent).toContain("Create new organization...");
+    expect(document.body.textContent).toContain("Create organization");
     expect(document.body.textContent).toContain("Invite people to Acme Labs");
     expect(document.body.textContent).not.toContain("Company settings");
     expect(document.body.textContent).toContain("Sign out");
@@ -364,7 +368,7 @@ describe("SidebarCompanyMenu", () => {
     expect(mockAuthApi.signOut).toHaveBeenCalledTimes(1);
     expect(mockNavigateTopLevel).not.toHaveBeenCalled();
     expect(queryClient.getQueryState(queryKeys.health)?.isInvalidated).toBe(true);
-    expect(document.body.textContent).not.toContain("Switch organization");
+    expect(document.body.textContent).not.toContain("Organizations");
 
     act(() => {
       root.unmount();
@@ -413,7 +417,7 @@ describe("SidebarCompanyMenu", () => {
 
     await openMenu("Open Acme Labs company switcher");
 
-    expect(document.body.textContent).toContain("Switch");
+    expect(document.body.textContent).toContain("Organizations");
     expect(document.body.textContent).not.toContain("Invite people");
 
     act(() => {
@@ -430,7 +434,7 @@ describe("SidebarCompanyMenu", () => {
 
     await openMenu("Open Acme Labs organization switcher");
 
-    expect(document.body.textContent).toContain("Switch organization");
+    expect(document.body.textContent).toContain("Organizations");
     expect(document.body.textContent).not.toContain("Invite people");
 
     act(() => {
@@ -447,7 +451,7 @@ describe("SidebarCompanyMenu", () => {
 
     await openMenu("Open Acme Labs organization switcher");
 
-    expect(document.body.textContent).toContain("Switch organization");
+    expect(document.body.textContent).toContain("Organizations");
     expect(document.body.textContent).not.toContain("Invite people");
 
     act(() => {
@@ -464,7 +468,7 @@ describe("SidebarCompanyMenu", () => {
 
     await openMenu("Open Acme Labs organization switcher");
 
-    expect(document.body.textContent).toContain("Switch organization");
+    expect(document.body.textContent).toContain("Organizations");
     expect(document.body.textContent).not.toContain("Invite people");
 
     act(() => {
@@ -509,7 +513,11 @@ describe("SidebarCompanyMenu", () => {
     expect(document.body.textContent).toContain("Done");
     expect(document.body.textContent).not.toContain("PAP");
     expect(document.body.textContent).not.toContain("ANA");
-    expect(document.body.querySelector('button[aria-label="Reorder Strata"]')).toBeTruthy();
+    const reorderButton = document.body.querySelector<HTMLButtonElement>(
+      'button[aria-label="Reorder Strata"]',
+    );
+    expect(reorderButton).toBeTruthy();
+    expect(reorderButton?.classList).toContain("size-8");
 
     const strataItem = Array.from(document.body.querySelectorAll('[data-slot="dropdown-menu-item"]'))
       .find((element) => element.textContent?.includes("Strata"));
@@ -579,7 +587,7 @@ describe("SidebarCompanyMenu", () => {
     await openMenu("Open Acme Labs organization switcher");
 
     const createItem = Array.from(document.body.querySelectorAll('[data-slot="dropdown-menu-item"]'))
-      .find((element) => element.textContent?.includes("Create new organization..."));
+      .find((element) => element.textContent?.includes("Create organization"));
     expect(createItem).toBeTruthy();
 
     act(() => {
@@ -644,7 +652,7 @@ describe("SidebarCompanyMenu", () => {
       expect(mockAuthApi.signOut).not.toHaveBeenCalled();
       expect(mockNavigateTopLevel).toHaveBeenCalledOnce();
       expect(mockNavigateTopLevel).toHaveBeenCalledWith("/cloud/logout");
-      expect(document.body.textContent).not.toContain("Switch organization");
+      expect(document.body.textContent).not.toContain("Organizations");
 
       act(() => {
         root.unmount();
@@ -659,8 +667,8 @@ describe("SidebarCompanyMenu", () => {
       expect(mockCloudApi.listStacks).toHaveBeenCalledTimes(1);
       await openMenu("Open Acme Labs organization switcher");
 
-      expect(document.body.textContent).toContain("Switch organization");
-      expect(document.body.textContent).toContain("Create new organization...");
+      expect(document.body.textContent).toContain("Organizations");
+      expect(document.body.textContent).toContain("Create organization");
       expect(document.body.textContent).not.toContain("Organization settings");
       expect(document.body.textContent).not.toContain("Switch company");
       expect(document.body.textContent).not.toContain("Create new company...");
@@ -677,10 +685,10 @@ describe("SidebarCompanyMenu", () => {
 
       const currentRow = Array.from(document.body.querySelectorAll('[data-slot="dropdown-menu-item"]'))
         .find((element) => element.textContent?.includes("Acme Labs"));
-      expect(currentRow?.className).toContain("bg-accent");
+      expect(currentRow?.classList.contains("bg-accent")).toBe(false);
 
       // Long slugs must not squeeze the display name out of the row, so the
-      // badge truncates and keeps the full slug on hover.
+      // secondary line truncates and keeps the full slug on hover.
       const slugBadge = document.body.querySelector('[title="strata"]');
       expect(slugBadge?.className).toContain("truncate");
 
@@ -777,7 +785,7 @@ describe("SidebarCompanyMenu", () => {
       await openMenu("Open Acme Labs organization switcher");
 
       const createItem = Array.from(document.body.querySelectorAll('[data-slot="dropdown-menu-item"]'))
-        .find((element) => element.textContent?.includes("Create new organization..."));
+        .find((element) => element.textContent?.includes("Create organization"));
       expect(createItem).toBeTruthy();
 
       act(() => {
@@ -808,7 +816,7 @@ describe("SidebarCompanyMenu", () => {
       await openMenu("Open acme-labs organization switcher");
 
       expect(document.body.textContent).toContain("Could not load organizations");
-      expect(document.body.textContent).not.toContain("Create new organization...");
+      expect(document.body.textContent).not.toContain("Create organization");
 
       act(() => {
         root.unmount();
diff --git a/ui/src/components/SidebarCompanyMenu.tsx b/ui/src/components/SidebarCompanyMenu.tsx
index 4b492d1fc2..0734bb057d 100644
--- a/ui/src/components/SidebarCompanyMenu.tsx
+++ b/ui/src/components/SidebarCompanyMenu.tsx
@@ -30,7 +30,6 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { useCompany } from "@/context/CompanyContext";
@@ -51,16 +50,20 @@ interface SidebarCompanyMenuProps {
   onOpenChange?: (open: boolean) => void;
 }
 
-const WORKSPACE_ICON_CLASS = "size-5 shrink-0 rounded-md text-(length:--text-micro)";
-const WORKSPACE_BADGE_CLASS =
-  "shrink-0 rounded bg-muted px-1.5 py-0.5 font-mono text-(length:--text-nano) text-muted-foreground";
+const TRIGGER_WORKSPACE_ICON_CLASS = "size-5 shrink-0 rounded-md text-(length:--text-micro)";
+const POPOVER_WORKSPACE_ICON_CLASS =
+  "size-(--organization-popover-avatar-size) shrink-0 rounded-lg text-(length:--text-micro)";
+const ORGANIZATION_ROW_CLASS =
+  "h-(--organization-popover-company-row-height) min-w-0 gap-(--organization-popover-row-gap) rounded-lg px-2.5 py-0 text-(length:--text-compact) focus:bg-accent/50 focus:text-foreground";
+const ORGANIZATION_ACTION_CLASS =
+  "h-(--organization-popover-action-row-height) gap-(--organization-popover-row-gap) rounded-lg px-2.5 py-0 text-(length:--text-compact) font-medium leading-(--organization-popover-action-line-height) text-foreground focus:bg-accent/50 focus:text-foreground";
 
-function WorkspaceIcon({ company }: { company: Company }) {
+function WorkspaceIcon({ company, inPopover = false }: { company: Company; inPopover?: boolean }) {
   return (
     <CompanyPatternIcon
       companyName={company.name}
       logoUrl={company.logoUrl}
-      className={WORKSPACE_ICON_CLASS}
+      className={inPopover ? POPOVER_WORKSPACE_ICON_CLASS : TRIGGER_WORKSPACE_ICON_CLASS}
     />
   );
 }
@@ -71,7 +74,7 @@ function WorkspaceIcon({ company }: { company: Company }) {
  * uses — seeded by the display name, never fetched.
  */
 function StackIcon({ displayName }: { displayName: string }) {
-  return <CompanyPatternIcon companyName={displayName} className={WORKSPACE_ICON_CLASS} />;
+  return <CompanyPatternIcon companyName={displayName} className={POPOVER_WORKSPACE_ICON_CLASS} />;
 }
 
 /**
@@ -91,7 +94,7 @@ function CurrentStackIcon({
     <CompanyPatternIcon
       companyName={displayName}
       logoUrl={company?.logoUrl}
-      className={WORKSPACE_ICON_CLASS}
+      className={TRIGGER_WORKSPACE_ICON_CLASS}
     />
   );
 }
@@ -108,19 +111,26 @@ function CloudStackItem({
   return (
     <DropdownMenuItem
       onSelect={() => onSelect(stack)}
-      className={cn("min-w-0 gap-2 py-2", isSelected && "bg-accent text-accent-foreground")}
+      className={ORGANIZATION_ROW_CLASS}
     >
       <StackIcon displayName={stack.displayName} />
-      <span className="min-w-0 flex-1 truncate" title={stack.displayName}>
-        {stack.displayName}
+      <span className="min-w-0 flex-1">
+        <span
+          className="block truncate font-medium leading-(--organization-popover-name-line-height)"
+          title={stack.displayName}
+        >
+          {stack.displayName}
+        </span>
+        <span
+          className="block truncate text-(length:--text-nano) leading-(--organization-popover-prefix-line-height) text-muted-foreground"
+          title={stack.stackSlug}
+        >
+          {stack.stackSlug}
+        </span>
       </span>
-      {/* Company badges are 3-4 character issue prefixes, but stack slugs are
-          user-chosen and can be long enough to truncate the name to a single
-          letter — the name is the primary identifier, so the badge yields. */}
-      <span className={cn(WORKSPACE_BADGE_CLASS, "max-w-24 truncate")} title={stack.stackSlug}>
-        {stack.stackSlug}
+      <span className="flex size-5 shrink-0 items-center justify-center">
+        {isSelected ? <Check className="size-4 text-foreground" /> : null}
       </span>
-      {isSelected ? <Check className="size-4 shrink-0 text-muted-foreground" /> : null}
     </DropdownMenuItem>
   );
 }
@@ -162,20 +172,28 @@ function SortableCompanyItem({
         onSelect(company);
       }}
       className={cn(
-        "min-w-0 gap-2 py-2",
+        ORGANIZATION_ROW_CLASS,
         isEditing && "cursor-grab",
         isDragging && "opacity-80",
-        isSelected && "bg-accent text-accent-foreground",
       )}
     >
-      <WorkspaceIcon company={company} />
-      <span className="min-w-0 flex-1 truncate">{company.name}</span>
+      <WorkspaceIcon company={company} inPopover />
+      <span className="min-w-0 flex-1">
+        <span className="block truncate font-medium leading-(--organization-popover-name-line-height)">
+          {company.name}
+        </span>
+        {isEditing ? null : (
+          <span className="block truncate text-(length:--text-nano) leading-(--organization-popover-prefix-line-height) text-muted-foreground">
+            {company.issuePrefix}
+          </span>
+        )}
+      </span>
       {isEditing ? (
         <button
           type="button"
           ref={setActivatorNodeRef}
           aria-label={`Reorder ${company.name}`}
-          className="inline-flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-(length:--rad-2) focus-visible:ring-ring"
+          className="inline-flex size-8 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-(length:--rad-2) focus-visible:ring-ring"
           onClick={(event) => {
             event.preventDefault();
             event.stopPropagation();
@@ -186,10 +204,9 @@ function SortableCompanyItem({
           <GripVertical className="size-4" aria-hidden="true" />
         </button>
       ) : (
-        <>
-          <span className={WORKSPACE_BADGE_CLASS}>{company.issuePrefix}</span>
-          {isSelected ? <Check className="size-4 text-muted-foreground" /> : null}
-        </>
+        <span className="flex size-5 shrink-0 items-center justify-center">
+          {isSelected ? <Check className="size-4 text-foreground" /> : null}
+        </span>
       )}
     </DropdownMenuItem>
   );
@@ -352,7 +369,7 @@ export function SidebarCompanyMenu({ open: controlledOpen, onOpenChange }: Sideb
           // floors it at its content width, so without it a long name widens the
           // trigger past the sidebar and pushes the chevron out of bounds. Company
           // names were short in practice; cloud stack names are user-chosen.
-          className="h-9 min-w-0 flex-1 justify-start gap-2 px-4 text-left hover:bg-background hover:text-foreground has-[>svg]:px-4 dark:hover:bg-background"
+          className="h-9 min-w-0 flex-1 justify-start gap-2 px-4 text-left hover:bg-sidebar-accent hover:text-sidebar-accent-foreground has-[>svg]:px-4 dark:hover:bg-sidebar-accent dark:hover:text-sidebar-accent-foreground"
           aria-label={
             currentName
               ? `Open ${currentName} ${switcherNoun} switcher`
@@ -380,10 +397,14 @@ export function SidebarCompanyMenu({ open: controlledOpen, onOpenChange }: Sideb
           {!rail && <ChevronsUpDown className="size-3.5 shrink-0 text-muted-foreground" />}
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="start" sideOffset={8} className="w-64 p-1">
-        <div className="flex items-center justify-between gap-2 px-2 py-1.5">
-          <DropdownMenuLabel className="p-0 text-(length:--text-micro) font-semibold uppercase text-muted-foreground">
-            {`Switch ${switcherNoun}`}
+      <DropdownMenuContent
+        align="start"
+        sideOffset={8}
+        className="ml-2 w-(--organization-popover-width) max-w-(--sz-calc-24) overflow-hidden rounded-xl border-border bg-popover p-0 shadow-(--shadow-profile-popover)"
+      >
+        <div className="flex h-(--organization-popover-header-height) items-center justify-between gap-2 px-3.5">
+          <DropdownMenuLabel className="p-0 text-(length:--text-compact) font-semibold text-foreground">
+            Organizations
           </DropdownMenuLabel>
           {/* Stack order is owned by cloud's own portfolio in v1, so the
               drag-to-reorder affordance stays self-hosted-only. */}
@@ -395,13 +416,13 @@ export function SidebarCompanyMenu({ open: controlledOpen, onOpenChange }: Sideb
                 event.stopPropagation();
                 setIsEditingOrder((current) => !current);
               }}
-              className="rounded px-1.5 py-0.5 text-(length:--text-micro) font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+              className="rounded px-1.5 py-0.5 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
             >
               {isEditingOrder ? "Done" : "Edit"}
             </button>
           )}
         </div>
-        <div className="max-h-96 overflow-y-auto">
+        <div className="flex max-h-96 flex-col gap-0.5 overflow-y-auto px-2.5 pb-2 pt-1">
           {isCloud ? (
             <>
               {stacks.map((stack) => (
@@ -470,54 +491,57 @@ export function SidebarCompanyMenu({ open: controlledOpen, onOpenChange }: Sideb
             </>
           )}
         </div>
-        <DropdownMenuSeparator />
-        {/* A cloud instance without a configured cloud origin has nowhere to
-            send the user, so the row (and its separator) drop out entirely. */}
-        {isCloud && !createStackUrl ? null : (
-          <>
+        <div className="flex flex-col gap-0.5 border-t border-border px-2.5 pb-2.5 pt-2">
+          {/* A cloud instance without a configured cloud origin has nowhere to
+              send the user, so the row drops out entirely. */}
+          {isCloud && !createStackUrl ? null : (
             <DropdownMenuItem
               onClick={addCompany}
-              className="gap-2 py-2 text-muted-foreground"
+              className={ORGANIZATION_ACTION_CLASS}
               disabled={isEditingOrder}
             >
-              <Plus className="size-4" />
-              <span>Create new organization...</span>
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-          </>
-        )}
-        {showInvitePeople ? (
-          <DropdownMenuItem asChild disabled={isEditingOrder}>
-            <Link
-              to="/company/settings/members?tab=invites"
-              onClick={(event) => {
-                if (isEditingOrder) {
-                  event.preventDefault();
-                  return;
-                }
-                closeNavigationChrome();
-              }}
-            >
-              <UserPlus className="size-4" />
-              <span className="truncate">
-                {currentName ? `Invite people to ${currentName}` : "Invite people"}
+              <span className="flex size-5 shrink-0 items-center justify-center text-muted-foreground">
+                <Plus className="size-4" />
               </span>
-            </Link>
-          </DropdownMenuItem>
-        ) : null}
-        {session?.session ? (
-          <>
-            <DropdownMenuSeparator />
+              <span className="min-w-0 flex-1 truncate">Create organization</span>
+            </DropdownMenuItem>
+          )}
+          {showInvitePeople ? (
+            <DropdownMenuItem asChild disabled={isEditingOrder} className={ORGANIZATION_ACTION_CLASS}>
+              <Link
+                to="/company/settings/members?tab=invites"
+                onClick={(event) => {
+                  if (isEditingOrder) {
+                    event.preventDefault();
+                    return;
+                  }
+                  closeNavigationChrome();
+                }}
+              >
+                <span className="flex size-5 shrink-0 items-center justify-center text-muted-foreground">
+                  <UserPlus className="size-4" />
+                </span>
+                <span className="min-w-0 flex-1 truncate">
+                  {currentName ? `Invite people to ${currentName}` : "Invite people"}
+                </span>
+              </Link>
+            </DropdownMenuItem>
+          ) : null}
+          {session?.session ? (
             <DropdownMenuItem
-              variant="destructive"
+              className={ORGANIZATION_ACTION_CLASS}
               onClick={() => signOutMutation.mutate()}
               disabled={isEditingOrder || signOutMutation.isPending}
             >
-              <LogOut className="size-4" />
-              <span>{signOutMutation.isPending ? "Signing out..." : "Sign out"}</span>
+              <span className="flex size-5 shrink-0 items-center justify-center text-muted-foreground">
+                <LogOut className="size-4" />
+              </span>
+              <span className="min-w-0 flex-1 truncate">
+                {signOutMutation.isPending ? "Signing out..." : "Sign out"}
+              </span>
             </DropdownMenuItem>
-          </>
-        ) : null}
+          ) : null}
+        </div>
       </DropdownMenuContent>
     </DropdownMenu>
   );
diff --git a/ui/src/components/SidebarNavItem.test.tsx b/ui/src/components/SidebarNavItem.test.tsx
index a45849f08a..3f882ab265 100644
--- a/ui/src/components/SidebarNavItem.test.tsx
+++ b/ui/src/components/SidebarNavItem.test.tsx
@@ -98,18 +98,20 @@ describe("SidebarNavItem", () => {
     expect(link().firstElementChild?.textContent).toBe("Recent task");
   });
 
-  it("uses the Paper nav surface for the active item", () => {
+  it("uses the sidebar accent surface for the active item", () => {
     render(<SidebarNavItem to="/issues" label="Tasks" icon={Inbox} active />);
 
-    expect(classTokens(link())).toContain("bg-background");
-    expect(classTokens(link())).not.toContain("bg-accent");
+    expect(classTokens(link())).toContain("bg-sidebar-accent");
+    expect(classTokens(link())).toContain("text-sidebar-accent-foreground");
+    expect(classTokens(link())).not.toContain("bg-background");
   });
 
-  it("uses the active nav surface for hover", () => {
+  it("uses the legible sidebar accent surface for hover", () => {
     render(<SidebarNavItem to="/issues" label="Tasks" icon={Inbox} />);
 
-    expect(classTokens(link())).toContain("hover:bg-background");
-    expect(classTokens(link())).not.toContain("hover:bg-accent/50");
+    expect(classTokens(link())).toContain("hover:bg-sidebar-accent");
+    expect(classTokens(link())).toContain("hover:text-sidebar-accent-foreground");
+    expect(classTokens(link())).not.toContain("hover:bg-background");
   });
 
   it("clips the label (kept in flow for 1:1 row height) and collapses the badge to a dot in the rail", () => {
diff --git a/ui/src/components/SidebarNavItem.tsx b/ui/src/components/SidebarNavItem.tsx
index 52b1db3a31..e918ed3540 100644
--- a/ui/src/components/SidebarNavItem.tsx
+++ b/ui/src/components/SidebarNavItem.tsx
@@ -128,8 +128,8 @@ export function SidebarNavItem({
           // (agents/projects) reserve extra right padding via className.
           "flex items-center gap-2.5 mx-2 rounded-lg px-2 py-1.5 pointer-coarse:py-1 text-(length:--text-compact) font-medium transition-colors",
           (active ?? isActive)
-            ? "bg-background text-foreground"
-            : "text-foreground/80 hover:bg-background hover:text-foreground",
+            ? "bg-sidebar-accent text-sidebar-accent-foreground"
+            : "text-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
           className,
         )
       }
diff --git a/ui/src/components/SidebarProjects.tsx b/ui/src/components/SidebarProjects.tsx
index 697f1dcfe4..f35105461b 100644
--- a/ui/src/components/SidebarProjects.tsx
+++ b/ui/src/components/SidebarProjects.tsx
@@ -140,8 +140,8 @@ function ProjectItem({
       className={cn(
         "flex min-w-0 flex-1 items-center gap-2.5 mx-2 rounded-lg px-2 py-1.5 pr-8 pointer-coarse:py-1 text-(length:--text-compact) font-medium transition-colors",
         activeProjectRef === routeRef || activeProjectRef === project.id
-          ? "bg-background text-foreground"
-          : "text-foreground/80 hover:bg-background hover:text-foreground",
+          ? "bg-sidebar-accent text-sidebar-accent-foreground"
+          : "text-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
       )}
     >
       <ProjectTile color={project.color ?? null} icon={project.icon ?? null} size="xs" />
diff --git a/ui/src/components/SidebarRecentTasks.test.tsx b/ui/src/components/SidebarRecentTasks.test.tsx
index 8c572ba865..0b3ba98700 100644
--- a/ui/src/components/SidebarRecentTasks.test.tsx
+++ b/ui/src/components/SidebarRecentTasks.test.tsx
@@ -11,10 +11,20 @@ import {
   readRecentTasks,
   recordRecentTask,
 } from "@/lib/recent-tasks";
+import { queryKeys } from "@/lib/queryKeys";
 
 const mockAuthApi = vi.hoisted(() => ({ getSession: vi.fn() }));
-const mockIssuesApi = vi.hoisted(() => ({ get: vi.fn() }));
+const mockAgentsApi = vi.hoisted(() => ({ wakeup: vi.fn() }));
+const mockIssuesApi = vi.hoisted(() => ({
+  get: vi.fn(),
+  update: vi.fn(),
+  archiveFromInbox: vi.fn(),
+  getTreeControlState: vi.fn(),
+  createTreeHold: vi.fn(),
+  releaseTreeHold: vi.fn(),
+}));
 
+vi.mock("@/api/agents", () => ({ agentsApi: mockAgentsApi }));
 vi.mock("@/api/auth", () => ({ authApi: mockAuthApi }));
 vi.mock("@/api/issues", () => ({ issuesApi: mockIssuesApi }));
 vi.mock("@/lib/router", () => ({
@@ -50,7 +60,8 @@ describe("SidebarRecentTasks", () => {
 
   beforeEach(() => {
     window.localStorage.clear();
-    mockIssuesApi.get.mockReset();
+    Object.values(mockAgentsApi).forEach((mock) => mock.mockReset());
+    Object.values(mockIssuesApi).forEach((mock) => mock.mockReset());
     container = document.createElement("div");
     document.body.appendChild(container);
     root = createRoot(container);
@@ -86,10 +97,31 @@ describe("SidebarRecentTasks", () => {
     return queryClient;
   }
 
-  it("renders a compact empty state", async () => {
+  async function openActions(taskTitle: string) {
+    const actions = container.querySelector<HTMLButtonElement>(
+      `button[aria-label="More actions for ${taskTitle}"]`,
+    );
+    await act(async () => {
+      actions?.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true }));
+      await Promise.resolve();
+    });
+  }
+
+  function menuItem(label: string) {
+    return Array.from(document.body.querySelectorAll<HTMLElement>('[role="menuitem"]'))
+      .find((item) => item.textContent?.trim() === label);
+  }
+
+  function setInputValue(input: HTMLInputElement, value: string) {
+    const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+    setter?.call(input, value);
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+  }
+
+  it("hides the section when there are no recent tasks", async () => {
     await render();
-    expect(container.textContent).toContain("Recent Tasks");
-    expect(container.textContent).toContain("Open or create a task");
+    expect(container.textContent).not.toContain("Recent Tasks");
+    expect(container.textContent).not.toContain("Open or create a task");
   });
 
   it("renders refreshed task text and live state without shifting for a status icon", async () => {
@@ -130,6 +162,246 @@ describe("SidebarRecentTasks", () => {
     expect(link?.querySelector('[data-slot="recent-task-icon-spacer"]')).toBeNull();
     expect(link?.querySelector('[data-slot="sidebar-nav-icon"]')).toBeNull();
     expect(link?.firstElementChild?.textContent).toBe("Refreshed title");
+    const actions = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="More actions for Refreshed title"]',
+    );
+    expect(actions).not.toBeNull();
+    expect(actions?.className).toContain("opacity-0");
+  });
+
+  it("opens the compact task actions menu from the ellipsis button", async () => {
+    recordRecentTask({
+      id: "issue-1",
+      companyId: "company-1",
+      title: "Menu task",
+      identifier: "PAP-1",
+      status: "todo",
+      updatedAt: new Date(1),
+    }, "user-1");
+    mockIssuesApi.get.mockResolvedValue({
+      id: "issue-1",
+      companyId: "company-1",
+      title: "Menu task",
+      identifier: "PAP-1",
+      status: "todo",
+      hiddenAt: null,
+      updatedAt: new Date(1),
+    });
+
+    await render();
+    await openActions("Menu task");
+
+    const menu = document.body.querySelector('[data-slot="dropdown-menu-content"]');
+    expect(menu?.textContent).toContain("Rename");
+    expect(menu?.textContent).toContain("Archive");
+    expect(menu?.textContent).toContain("Pause/Restart");
+  });
+
+  it("archives a task from the inbox without hiding or removing the recent task", async () => {
+    const issue = {
+      id: "issue-1",
+      companyId: "company-1",
+      title: "Archive me",
+      identifier: "PAP-1",
+      status: "todo" as const,
+      hiddenAt: null,
+      updatedAt: new Date(1),
+    };
+    recordRecentTask(issue, "user-1");
+    mockIssuesApi.get.mockResolvedValue(issue);
+    mockIssuesApi.archiveFromInbox.mockResolvedValue({
+      id: issue.id,
+      archivedAt: new Date(2),
+    });
+
+    await render();
+    await openActions("Archive me");
+    await act(async () => {
+      menuItem("Archive")?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+      await Promise.resolve();
+      await new Promise((resolve) => window.setTimeout(resolve, 0));
+    });
+
+    expect(mockIssuesApi.archiveFromInbox).toHaveBeenCalledWith("issue-1");
+    expect(mockIssuesApi.update).not.toHaveBeenCalled();
+    expect(container.textContent).toContain("Recent Tasks");
+    expect(container.querySelector('a[href="/issues/issue-1"]')?.textContent).toContain(
+      "Archive me",
+    );
+    expect(readRecentTasks(
+      getRecentTasksStorageKey("company-1", "user-1"),
+      "company-1",
+    )).toHaveLength(1);
+  });
+
+  it("refreshes task activity after a rename", async () => {
+    const issue = {
+      id: "issue-1",
+      companyId: "company-1",
+      title: "Old title",
+      identifier: "PAP-1",
+      status: "todo" as const,
+      hiddenAt: null,
+      updatedAt: new Date(1),
+    };
+    const renamedIssue = { ...issue, title: "New title", updatedAt: new Date(2) };
+    recordRecentTask(issue, "user-1");
+    mockIssuesApi.get.mockResolvedValue(issue);
+    mockIssuesApi.update.mockResolvedValue(renamedIssue);
+
+    const queryClient = await render();
+    const invalidateQueries = vi.spyOn(queryClient, "invalidateQueries");
+    await openActions("Old title");
+    await act(async () => {
+      menuItem("Rename")?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+      await Promise.resolve();
+    });
+
+    const input = document.body.querySelector<HTMLInputElement>('input[aria-label="Task name"]');
+    expect(input).not.toBeNull();
+    await act(async () => {
+      setInputValue(input!, "New title");
+      await Promise.resolve();
+    });
+    await act(async () => {
+      input?.closest("form")?.dispatchEvent(new SubmitEvent("submit", { bubbles: true, cancelable: true }));
+      await Promise.resolve();
+      await new Promise((resolve) => window.setTimeout(resolve, 0));
+    });
+
+    expect(mockIssuesApi.update).toHaveBeenCalledWith("issue-1", { title: "New title" });
+    expect(invalidateQueries).toHaveBeenCalledWith({
+      queryKey: queryKeys.issues.activity("issue-1"),
+    });
+  });
+
+  it("pauses a running task or restarts its active pause hold", async () => {
+    const issue = {
+      id: "issue-1",
+      companyId: "company-1",
+      title: "Toggle work",
+      identifier: "PAP-1",
+      status: "in_progress" as const,
+      assigneeAgentId: "agent-1",
+      hiddenAt: null,
+      updatedAt: new Date(1),
+    };
+    recordRecentTask(issue, "user-1");
+    mockIssuesApi.get.mockResolvedValue(issue);
+    mockIssuesApi.getTreeControlState
+      .mockResolvedValueOnce({ activePauseHold: null })
+      .mockResolvedValueOnce({
+        activePauseHold: {
+          holdId: "hold-1",
+          rootIssueId: "issue-1",
+          issueId: "issue-1",
+          isRoot: true,
+          mode: "pause",
+          reason: null,
+          releasePolicy: { strategy: "manual" },
+        },
+      });
+    mockIssuesApi.createTreeHold.mockResolvedValue({ hold: {}, preview: {} });
+    mockIssuesApi.releaseTreeHold.mockResolvedValue({});
+    mockAgentsApi.wakeup.mockResolvedValue({ id: "run-1" });
+
+    await render();
+    await openActions("Toggle work");
+    await act(async () => {
+      menuItem("Pause/Restart")?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+      await Promise.resolve();
+      await new Promise((resolve) => window.setTimeout(resolve, 0));
+    });
+    expect(mockIssuesApi.createTreeHold).toHaveBeenCalledWith("issue-1", {
+      mode: "pause",
+      reason: "Paused from Recent Tasks.",
+      releasePolicy: { strategy: "manual" },
+    });
+
+    await openActions("Toggle work");
+    await act(async () => {
+      menuItem("Pause/Restart")?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+      await Promise.resolve();
+      await new Promise((resolve) => window.setTimeout(resolve, 0));
+    });
+    expect(mockIssuesApi.releaseTreeHold).toHaveBeenCalledWith("issue-1", "hold-1", {
+      reason: "Restarted from Recent Tasks.",
+    });
+    expect(mockAgentsApi.wakeup).toHaveBeenCalledWith(
+      "agent-1",
+      {
+        source: "assignment",
+        triggerDetail: "manual",
+        reason: "recent_task_restart",
+        payload: { issueId: "issue-1" },
+      },
+      "company-1",
+    );
+  });
+
+  it("retries only the wake after a remount when restart releases the hold before wakeup fails", async () => {
+    const issue = {
+      id: "issue-1",
+      companyId: "company-1",
+      title: "Retry restart",
+      identifier: "PAP-1",
+      status: "in_progress" as const,
+      assigneeAgentId: "agent-1",
+      hiddenAt: null,
+      updatedAt: new Date(1),
+    };
+    recordRecentTask(issue, "user-1");
+    mockIssuesApi.get.mockResolvedValue(issue);
+    mockIssuesApi.getTreeControlState
+      .mockResolvedValueOnce({
+        activePauseHold: {
+          holdId: "hold-1",
+          rootIssueId: "issue-1",
+          issueId: "issue-1",
+          isRoot: true,
+          mode: "pause",
+          reason: null,
+          releasePolicy: { strategy: "manual" },
+        },
+      })
+      .mockResolvedValueOnce({ activePauseHold: null });
+    mockIssuesApi.releaseTreeHold.mockResolvedValue({});
+    mockAgentsApi.wakeup
+      .mockRejectedValueOnce(new Error("Wake failed"))
+      .mockResolvedValueOnce({ id: "run-1" });
+
+    await render();
+    await openActions("Retry restart");
+    await act(async () => {
+      menuItem("Pause/Restart")?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+      await Promise.resolve();
+      await new Promise((resolve) => window.setTimeout(resolve, 0));
+    });
+
+    await act(async () => root.unmount());
+    root = createRoot(container);
+    await render();
+
+    await openActions("Retry restart");
+    await act(async () => {
+      menuItem("Pause/Restart")?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+      await Promise.resolve();
+      await new Promise((resolve) => window.setTimeout(resolve, 0));
+    });
+
+    expect(mockIssuesApi.releaseTreeHold).toHaveBeenCalledTimes(1);
+    expect(mockIssuesApi.createTreeHold).not.toHaveBeenCalled();
+    expect(mockAgentsApi.wakeup).toHaveBeenCalledTimes(2);
+    expect(mockAgentsApi.wakeup).toHaveBeenLastCalledWith(
+      "agent-1",
+      {
+        source: "assignment",
+        triggerDetail: "manual",
+        reason: "recent_task_restart_retry",
+        payload: { issueId: "issue-1" },
+      },
+      "company-1",
+    );
   });
 
   it("synchronizes recent tasks written by another tab", async () => {
diff --git a/ui/src/components/SidebarRecentTasks.tsx b/ui/src/components/SidebarRecentTasks.tsx
index 449251bbc4..be9797bbf4 100644
--- a/ui/src/components/SidebarRecentTasks.tsx
+++ b/ui/src/components/SidebarRecentTasks.tsx
@@ -1,11 +1,71 @@
-import { useQuery } from "@tanstack/react-query";
+import { useState, type FormEvent } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { Archive, MoreHorizontal, Pencil, RefreshCw } from "lucide-react";
+import { agentsApi } from "@/api/agents";
 import { authApi } from "@/api/auth";
+import { issuesApi } from "@/api/issues";
 import { queryKeys } from "@/lib/queryKeys";
 import { useRecentTasks } from "@/hooks/useRecentTasks";
 import { useSidebar } from "@/context/SidebarContext";
+import { useOptionalToastActions } from "@/context/ToastContext";
+import {
+  updateRecentTaskSnapshots,
+  type RecentTaskEntry,
+} from "@/lib/recent-tasks";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
 import { SidebarSection } from "./SidebarSection";
 import { SidebarNavItem } from "./SidebarNavItem";
 
+const RECENT_TASK_MENU_ITEM_CLASS =
+  "h-(--profile-popover-row-height) gap-(--profile-popover-row-gap) rounded-lg px-2.5 py-0 text-(length:--text-compact) font-medium leading-(--profile-popover-label-line-height) focus:bg-accent/50 focus:text-foreground";
+const RESTART_WAKE_RETRY_STORAGE_SUFFIX = ":restart-wake-retry";
+
+function restartWakeRetryStorageKey(storageKey: string | null) {
+  return storageKey ? `${storageKey}${RESTART_WAKE_RETRY_STORAGE_SUFFIX}` : null;
+}
+
+function readRestartWakeRetryIssueIds(storageKey: string | null) {
+  if (!storageKey) return new Set<string>();
+  try {
+    const parsed = JSON.parse(window.localStorage.getItem(storageKey) ?? "[]") as unknown;
+    return new Set(Array.isArray(parsed) ? parsed.filter((value): value is string => typeof value === "string") : []);
+  } catch {
+    return new Set<string>();
+  }
+}
+
+function setRestartWakeRetryPending(storageKey: string | null, issueId: string, pending: boolean) {
+  if (!storageKey) return;
+  const issueIds = readRestartWakeRetryIssueIds(storageKey);
+  if (pending) issueIds.add(issueId);
+  else issueIds.delete(issueId);
+  try {
+    if (issueIds.size > 0) window.localStorage.setItem(storageKey, JSON.stringify([...issueIds]));
+    else window.localStorage.removeItem(storageKey);
+  } catch {
+    // Recent Tasks remains usable when browser storage is unavailable.
+  }
+}
+
+function errorMessage(error: unknown, fallback: string) {
+  return error instanceof Error && error.message.trim() ? error.message : fallback;
+}
+
 export function SidebarRecentTasks({
   companyId,
   liveIssueIds,
@@ -46,24 +106,243 @@ function RecentTasksList({
   liveIssueIds: ReadonlySet<string>;
   rail: boolean;
 }) {
-  const { entries } = useRecentTasks({ companyId, userId });
+  const { entries, storageKey } = useRecentTasks({ companyId, userId });
+  const queryClient = useQueryClient();
+  const toastActions = useOptionalToastActions();
+  const [renameEntry, setRenameEntry] = useState<RecentTaskEntry | null>(null);
+  const [renameValue, setRenameValue] = useState("");
+  const [pendingAction, setPendingAction] = useState<"rename" | "archive" | "pause" | null>(null);
+  const restartRetryStorageKey = restartWakeRetryStorageKey(storageKey);
 
-  if (rail && entries.length === 0) return null;
+  if (entries.length === 0) return null;
+
+  const refreshIssueQueries = async (issueId: string) => {
+    await Promise.all([
+      queryClient.invalidateQueries({ queryKey: queryKeys.issues.detail(issueId) }),
+      queryClient.invalidateQueries({ queryKey: queryKeys.issues.list(companyId) }),
+      queryClient.invalidateQueries({ queryKey: queryKeys.issues.activity(issueId) }),
+    ]);
+  };
+
+  const beginRename = (entry: RecentTaskEntry) => {
+    setRenameEntry(entry);
+    setRenameValue(entry.title);
+  };
+
+  const submitRename = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const nextTitle = renameValue.trim();
+    if (!renameEntry || !nextTitle || nextTitle === renameEntry.title) {
+      setRenameEntry(null);
+      return;
+    }
+
+    setPendingAction("rename");
+    try {
+      const updated = await issuesApi.update(renameEntry.id, { title: nextTitle });
+      queryClient.setQueryData(queryKeys.issues.detail(renameEntry.id), updated);
+      if (storageKey) updateRecentTaskSnapshots(storageKey, companyId, [updated]);
+      await refreshIssueQueries(renameEntry.id);
+      setRenameEntry(null);
+      toastActions?.pushToast({ title: "Task renamed", tone: "success" });
+    } catch (error) {
+      toastActions?.pushToast({
+        title: "Task rename failed",
+        body: errorMessage(error, "Unable to rename this task."),
+        tone: "error",
+      });
+    } finally {
+      setPendingAction(null);
+    }
+  };
+
+  const archiveTask = async (entry: RecentTaskEntry) => {
+    setPendingAction("archive");
+    try {
+      await issuesApi.archiveFromInbox(entry.id);
+      await refreshIssueQueries(entry.id);
+      await queryClient.invalidateQueries({
+        queryKey: queryKeys.sidebarBadges(companyId),
+      });
+      toastActions?.pushToast({ title: "Task archived from inbox", tone: "success" });
+    } catch (error) {
+      toastActions?.pushToast({
+        title: "Task archive failed",
+        body: errorMessage(error, "Unable to archive this task from the inbox."),
+        tone: "error",
+      });
+    } finally {
+      setPendingAction(null);
+    }
+  };
+
+  const toggleTaskPause = async (entry: RecentTaskEntry) => {
+    setPendingAction("pause");
+    try {
+      const state = await issuesApi.getTreeControlState(entry.id);
+      if (state.activePauseHold?.isRoot) {
+        const restartIssue = await issuesApi.get(entry.id);
+        setRestartWakeRetryPending(restartRetryStorageKey, entry.id, true);
+        await issuesApi.releaseTreeHold(entry.id, state.activePauseHold.holdId, {
+          reason: "Restarted from Recent Tasks.",
+        });
+        if (restartIssue.assigneeAgentId) {
+          const wakeResult = await agentsApi.wakeup(
+            restartIssue.assigneeAgentId,
+            {
+              source: "assignment",
+              triggerDetail: "manual",
+              reason: "recent_task_restart",
+              payload: { issueId: restartIssue.id },
+            },
+            restartIssue.companyId,
+          );
+          if (!("id" in wakeResult)) {
+            throw new Error(wakeResult.message ?? "The assignee wake was skipped.");
+          }
+        }
+        setRestartWakeRetryPending(restartRetryStorageKey, entry.id, false);
+        toastActions?.pushToast({ title: "Task restarted", tone: "success" });
+      } else if (state.activePauseHold) {
+        throw new Error("This task is paused by a parent task. Restart it from the pause root.");
+      } else if (readRestartWakeRetryIssueIds(restartRetryStorageKey).has(entry.id)) {
+        const restartIssue = await issuesApi.get(entry.id);
+        if (restartIssue.assigneeAgentId) {
+          const wakeResult = await agentsApi.wakeup(
+            restartIssue.assigneeAgentId,
+            {
+              source: "assignment",
+              triggerDetail: "manual",
+              reason: "recent_task_restart_retry",
+              payload: { issueId: restartIssue.id },
+            },
+            restartIssue.companyId,
+          );
+          if (!("id" in wakeResult)) {
+            throw new Error(wakeResult.message ?? "The assignee wake was skipped.");
+          }
+        }
+        setRestartWakeRetryPending(restartRetryStorageKey, entry.id, false);
+        toastActions?.pushToast({ title: "Task restarted", tone: "success" });
+      } else {
+        await issuesApi.createTreeHold(entry.id, {
+          mode: "pause",
+          reason: "Paused from Recent Tasks.",
+          releasePolicy: { strategy: "manual" },
+        });
+        toastActions?.pushToast({ title: "Task paused", tone: "success" });
+      }
+      await queryClient.invalidateQueries({
+        queryKey: ["issues", "tree-control-state", entry.id],
+      });
+    } catch (error) {
+      toastActions?.pushToast({
+        title: "Task pause update failed",
+        body: errorMessage(error, "Unable to pause or restart this task."),
+        tone: "error",
+      });
+    } finally {
+      setPendingAction(null);
+    }
+  };
 
   return (
-    <SidebarSection label="Recent Tasks">
-      {entries.length === 0 ? (
-        <p className="mx-3 px-2 py-1 text-(length:--text-micro) leading-snug text-muted-foreground/70">
-          Open or create a task to keep it close at hand.
-        </p>
-      ) : entries.map((entry) => (
-        <SidebarNavItem
-          key={entry.id}
-          to={`/issues/${entry.id}`}
-          label={entry.title}
-          liveCount={liveIssueIds.has(entry.id) ? 1 : undefined}
-        />
-      ))}
-    </SidebarSection>
+    <>
+      <SidebarSection label="Recent Tasks">
+        {entries.map((entry) => (
+          <div key={entry.id} className="group/recent-task relative">
+            <SidebarNavItem
+              to={`/issues/${entry.id}`}
+              label={entry.title}
+              className={rail ? undefined : "pr-10"}
+              liveCount={liveIssueIds.has(entry.id) ? 1 : undefined}
+            />
+            {!rail ? (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon-xs"
+                    aria-label={`More actions for ${entry.title}`}
+                    className="absolute right-2 top-(--pct-50) z-10 -translate-y-(--pct-50) text-muted-foreground opacity-0 transition-opacity hover:text-foreground focus-visible:opacity-100 pointer-coarse:opacity-100 group-hover/recent-task:opacity-100 group-focus-within/recent-task:opacity-100 data-[state=open]:bg-accent data-[state=open]:text-foreground data-[state=open]:opacity-100"
+                  >
+                    <MoreHorizontal aria-hidden="true" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                  side="right"
+                  align="start"
+                  className="w-(--profile-popover-width) rounded-xl p-1.5 shadow-(--shadow-profile-popover)"
+                >
+                  <DropdownMenuItem
+                    className={RECENT_TASK_MENU_ITEM_CLASS}
+                    onSelect={() => beginRename(entry)}
+                  >
+                    <Pencil aria-hidden="true" />
+                    Rename
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    className={RECENT_TASK_MENU_ITEM_CLASS}
+                    disabled={pendingAction !== null}
+                    onSelect={() => void archiveTask(entry)}
+                  >
+                    <Archive aria-hidden="true" />
+                    Archive
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    className={RECENT_TASK_MENU_ITEM_CLASS}
+                    disabled={pendingAction !== null}
+                    onSelect={() => void toggleTaskPause(entry)}
+                  >
+                    <RefreshCw aria-hidden="true" />
+                    Pause/Restart
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            ) : null}
+          </div>
+        ))}
+      </SidebarSection>
+
+      <Dialog
+        open={renameEntry !== null}
+        onOpenChange={(open) => {
+          if (!open && pendingAction !== "rename") setRenameEntry(null);
+        }}
+      >
+        <DialogContent className="sm:max-w-md">
+          <form className="grid gap-4" onSubmit={(event) => void submitRename(event)}>
+            <DialogHeader>
+              <DialogTitle>Rename task</DialogTitle>
+              <DialogDescription>Choose a short, clear name for this task.</DialogDescription>
+            </DialogHeader>
+            <Input
+              autoFocus
+              aria-label="Task name"
+              value={renameValue}
+              disabled={pendingAction === "rename"}
+              onChange={(event) => setRenameValue(event.target.value)}
+            />
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                disabled={pendingAction === "rename"}
+                onClick={() => setRenameEntry(null)}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                disabled={pendingAction === "rename" || !renameValue.trim()}
+              >
+                {pendingAction === "rename" ? "Saving..." : "Save"}
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </>
   );
 }
diff --git a/ui/src/components/SidebarStarredProjects.tsx b/ui/src/components/SidebarStarredProjects.tsx
index 3e00980641..14a5247f1c 100644
--- a/ui/src/components/SidebarStarredProjects.tsx
+++ b/ui/src/components/SidebarStarredProjects.tsx
@@ -124,8 +124,8 @@ export function SidebarStarredProjects() {
               "flex min-w-0 flex-1 items-center gap-2.5 mx-2 rounded-lg px-2 py-1.5 pointer-coarse:py-1 pr-8 text-(length:--text-compact) font-medium transition-colors",
               !rail && "pl-6",
               isActive
-                ? "bg-background text-foreground"
-                : "text-foreground/80 hover:bg-background hover:text-foreground",
+                ? "bg-sidebar-accent text-sidebar-accent-foreground"
+                : "text-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
             )}
           >
             <ProjectTile color={project.color ?? null} icon={project.icon ?? null} size="xs" />
diff --git a/ui/src/components/TaskChatThread.test.tsx b/ui/src/components/TaskChatThread.test.tsx
index 56d84e5677..cb01932ed6 100644
--- a/ui/src/components/TaskChatThread.test.tsx
+++ b/ui/src/components/TaskChatThread.test.tsx
@@ -347,10 +347,17 @@ describe("TaskChatThread draft pass-through", () => {
     const dock = container.querySelector(
       '[data-testid="task-chat-composer-dock"]',
     );
+    const thread = container.querySelector(
+      '[data-testid="task-chat-thread"]',
+    );
+    expect(thread?.classList).not.toContain("h-(--tc-thread-max-h)");
+    expect(thread?.classList).toContain("flex-1");
     expect(dock?.classList).toContain("px-4");
     expect(dock?.classList).not.toContain("px-1");
-    expect(dock?.classList).toContain("-mt-(--radius-task-composer)");
+    expect(dock?.classList).not.toContain("-mt-(--radius-task-composer)");
     expect(dock?.classList).not.toContain("pt-1");
+    expect(dock?.classList).toContain("md:pb-0");
+    expect(dock?.classList).not.toContain("md:pb-4");
     expect(dock?.classList).not.toContain("bg-background/80");
     expect(dock?.classList).not.toContain("backdrop-blur");
   });
diff --git a/ui/src/components/TaskChatThread.tsx b/ui/src/components/TaskChatThread.tsx
index 5b3e04af84..6b95f4c50a 100644
--- a/ui/src/components/TaskChatThread.tsx
+++ b/ui/src/components/TaskChatThread.tsx
@@ -2388,7 +2388,7 @@ export function TaskChatThread(props: TaskChatThreadProps) {
       <div
         className={cn(
           "flex flex-col",
-          !isMobile && "h-(--tc-thread-max-h) min-h-0 flex-1",
+          !isMobile && "min-h-0 flex-1",
         )}
         data-testid="task-chat-thread"
       >
@@ -2533,10 +2533,9 @@ export function TaskChatThread(props: TaskChatThreadProps) {
                 ? "bottom-(--tc-composer-bottom) z-20 transition-[bottom] duration-200 ease-out"
                 : "bottom-0 z-10",
               "mx-auto flex w-full max-w-(--tc-shell-max-w) flex-col gap-2 px-4 pb-2",
-              streamlinedUiEnabled && "md:px-0 md:pb-4",
-              streamlinedUiEnabled && !isMobile
-                ? "-mt-(--radius-task-composer)"
-                : "bg-background/80 pt-1 backdrop-blur supports-[backdrop-filter]:bg-background/60",
+              streamlinedUiEnabled && "md:px-0 md:pb-0",
+              (!streamlinedUiEnabled || isMobile) &&
+                "bg-background/80 pt-1 backdrop-blur supports-[backdrop-filter]:bg-background/60",
             )}
           >
             {composerAccessory}
diff --git a/ui/src/components/ThemeToggle.test.tsx b/ui/src/components/ThemeToggle.test.tsx
index 959f6a1f92..b81c073d67 100644
--- a/ui/src/components/ThemeToggle.test.tsx
+++ b/ui/src/components/ThemeToggle.test.tsx
@@ -72,6 +72,23 @@ describe("ThemeToggle", () => {
     await act(async () => root.unmount());
   });
 
+  it("renders the compact profile-menu row without secondary copy", async () => {
+    const root = createRoot(container);
+    await act(async () => {
+      root.render(<ThemeToggle variant="compact-menu-action" />);
+    });
+    await flushReact();
+
+    const button = container.querySelector("button");
+    expect(button?.classList).toContain("h-(--profile-popover-row-height)");
+    expect(button?.classList).toContain("gap-(--profile-popover-row-gap)");
+    expect(button?.querySelector("span")?.classList).toContain("size-5");
+    expect(container.textContent).toContain("Switch to light mode");
+    expect(container.textContent).not.toContain("Toggle the app appearance.");
+
+    await act(async () => root.unmount());
+  });
+
   it("calls onAfterToggle after toggling (used by SidebarAccountMenu to close the popover)", async () => {
     const onAfterToggle = vi.fn();
     const root = createRoot(container);
diff --git a/ui/src/components/ThemeToggle.tsx b/ui/src/components/ThemeToggle.tsx
index 43bd24503b..6da91a0318 100644
--- a/ui/src/components/ThemeToggle.tsx
+++ b/ui/src/components/ThemeToggle.tsx
@@ -4,7 +4,7 @@ import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { useTheme } from "../context/ThemeContext";
 
-type ThemeToggleVariant = "icon" | "menu-action";
+type ThemeToggleVariant = "icon" | "menu-action" | "compact-menu-action";
 
 interface ThemeToggleProps {
   className?: string;
@@ -14,7 +14,10 @@ interface ThemeToggleProps {
    * other surface that just wants a toggle affordance.
    *
    * `menu-action`: full-width row with label + description + icon —
-   * matches the surrounding `MenuAction` rows in `SidebarAccountMenu`.
+   * suitable for explanatory menus.
+   *
+   * `compact-menu-action`: compact label + icon row — matches the
+   * surrounding actions in `SidebarAccountMenu`.
    */
   variant?: ThemeToggleVariant;
   /**
@@ -42,6 +45,25 @@ export function ThemeToggle({ className, variant = "icon", onAfterToggle }: Them
     onAfterToggle?.();
   }
 
+  if (variant === "compact-menu-action") {
+    return (
+      <button
+        type="button"
+        className={cn(
+          "flex h-(--profile-popover-row-height) w-full items-center gap-(--profile-popover-row-gap) rounded-lg px-2.5 text-left text-(length:--text-compact) font-medium leading-(--profile-popover-label-line-height) text-foreground transition-colors hover:bg-accent",
+          className,
+        )}
+        onClick={handleClick}
+        aria-label={label}
+      >
+        <span className="flex size-5 shrink-0 items-center justify-center text-muted-foreground">
+          <Icon className="size-4" />
+        </span>
+        <span className="min-w-0 flex-1 truncate">{label}</span>
+      </button>
+    );
+  }
+
   if (variant === "menu-action") {
     return (
       <button
diff --git a/ui/src/index.css b/ui/src/index.css
index ef2d25941c..b364fcae4e 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -104,7 +104,7 @@
   --sidebar-foreground: oklch(0.145 0 0);
   --sidebar-primary: oklch(0.205 0 0);
   --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent: oklch(0.88 0 0);
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
@@ -295,6 +295,23 @@
   --radius-task-composer: 16px;
   --shadow-task-composer: 0 2px 8px -2px color-mix(in oklab, var(--foreground) 7%, transparent),
     0 12px 32px -8px color-mix(in oklab, var(--foreground) 12%, transparent);
+  --profile-popover-width: 248px;
+  --profile-popover-min-height: 304px;
+  --profile-popover-header-height: 76px;
+  --profile-popover-row-height: 38px;
+  --profile-popover-row-gap: 9px;
+  --profile-popover-label-line-height: 18px;
+  --profile-popover-meta-line-height: 15px;
+  --shadow-profile-popover: 0 18px 45px oklch(0 0 0 / 18%);
+  --organization-popover-width: 248px;
+  --organization-popover-header-height: 48px;
+  --organization-popover-company-row-height: 44px;
+  --organization-popover-action-row-height: 38px;
+  --organization-popover-avatar-size: 30px;
+  --organization-popover-row-gap: 9px;
+  --organization-popover-name-line-height: 17px;
+  --organization-popover-prefix-line-height: 13px;
+  --organization-popover-action-line-height: 18px;
 
   /* Composer mode-chip hues (v5–v7 decisions): agent + plan reuse the task
      status hues; ask is the v5 blue. Consumed as `--sc` seeds through the
@@ -368,7 +385,7 @@
   --sidebar-foreground: oklch(0.985 0 0);
   --sidebar-primary: oklch(0.488 0.243 264.376);
   --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent: oklch(0.32 0 0);
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.556 0 0);
diff --git a/ui/src/pages/DesignGuide.tsx b/ui/src/pages/DesignGuide.tsx
index 1dba377a19..5bdd23e832 100644
--- a/ui/src/pages/DesignGuide.tsx
+++ b/ui/src/pages/DesignGuide.tsx
@@ -26,6 +26,7 @@ import {
   Zap,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { ThemeToggle } from "@/components/ThemeToggle";
 import { Badge } from "@/components/ui/badge";
 import { InlineBanner } from "@/components/InlineBanner";
 import { BuiltInLifecycleChip } from "@/components/BuiltInAgentBadges";
@@ -541,6 +542,16 @@ export function DesignGuide() {
         </div>
       </Section>
 
+      <Section title="Theme Toggle">
+        <SubSection title="Variants">
+          <div className="flex max-w-sm flex-col items-start gap-3">
+            <ThemeToggle />
+            <ThemeToggle variant="menu-action" />
+            <ThemeToggle variant="compact-menu-action" />
+          </div>
+        </SubSection>
+      </Section>
+
       {/* ============================================================ */}
       {/*  COLORS                                                       */}
       {/* ============================================================ */}
diff --git a/ui/src/pages/IssueDetail.test.tsx b/ui/src/pages/IssueDetail.test.tsx
index 185831f165..533a776302 100644
--- a/ui/src/pages/IssueDetail.test.tsx
+++ b/ui/src/pages/IssueDetail.test.tsx
@@ -4043,6 +4043,18 @@ describe("IssueDetail", () => {
       expect(container.textContent).toContain("Subtree pause is active.");
     });
 
+    const pauseBannerTitle = Array.from(container.querySelectorAll("span")).find(
+      (element) => element.textContent?.trim() === "Subtree pause is active.",
+    );
+    expect(pauseBannerTitle?.closest(".rounded-md")?.classList).toContain(
+      "mt-3",
+    );
+    const taskChatShell = container.querySelector<HTMLElement>(
+      "[data-task-chat-shell]",
+    );
+    expect(taskChatShell?.classList).toContain("gap-3");
+    expect(taskChatShell?.classList).not.toContain("gap-6");
+
     const resumeButton = Array.from(container.querySelectorAll("button")).find(
       (button) => button.textContent?.trim() === "Resume subtree",
     );
diff --git a/ui/src/pages/IssueDetail.tsx b/ui/src/pages/IssueDetail.tsx
index db673a1767..16053ad4d1 100644
--- a/ui/src/pages/IssueDetail.tsx
+++ b/ui/src/pages/IssueDetail.tsx
@@ -7251,7 +7251,10 @@ export function IssueDetail() {
                 "flex w-full flex-col gap-6"
               : // Fill main exactly so the outer page never scrolls — the
                 // thread's own viewport is the only scroll surface.
-                "flex h-full min-h-0 w-full flex-col gap-6"
+                // Keep status banners close to the transcript. A full section
+                // gap here shortens the pinned message viewport enough to
+                // leave its first visible bubble sliced at the top edge.
+                "flex h-full min-h-0 w-full flex-col gap-3"
             : "max-w-3xl space-y-6"
         }
       >
@@ -7263,6 +7266,7 @@ export function IssueDetail() {
             className={cn(
               "flex items-center gap-2 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive",
               shellSectionClass,
+              taskChatShellEnabled && (isMobile ? "mt-4" : "mt-3"),
             )}
           >
             <EyeOff className="h-4 w-4 shrink-0" />
@@ -7274,6 +7278,9 @@ export function IssueDetail() {
             className={cn(
               "rounded-md border border-amber-500/35 bg-amber-500/10 p-3 text-sm text-amber-800 dark:text-amber-200",
               shellSectionClass,
+              taskChatShellEnabled &&
+                !issue.hiddenAt &&
+                (isMobile ? "mt-4" : "mt-3"),
             )}
           >
             {activePauseHold.isRoot ? (