diff --git a/src/client/App.test.tsx b/src/client/App.test.tsx
index e632b45..5f8689f 100644
--- a/src/client/App.test.tsx
+++ b/src/client/App.test.tsx
@@ -54,6 +54,11 @@ beforeEach(() => {
   vi.mocked(api.getTask).mockResolvedValue({ task: task({ title: "Detailed task" }) });
   vi.mocked(api.settings).mockResolvedValue(settings());
   vi.mocked(api.providerStatus).mockResolvedValue({ providers: [providerStatus()] });
+  vi.mocked(api.assistantChatHistory).mockResolvedValue({
+    conversations: [],
+    activeConversationId: null,
+    messages: [],
+  });
   vi.mocked(api.openAiAuth).mockResolvedValue({ configured: false, login: { phase: "idle" } });
   vi.mocked(api.openAiAccountInfo).mockResolvedValue({
     configured: false,
@@ -143,6 +148,35 @@ describe("App settings view", () => {
     expect(document.body.querySelector('[aria-label="Search tasks"]')).toBeNull();
     expect(document.body.querySelector('button[aria-label="New task"]')).toBeNull();
   });
+
+  it("lets the sidebar Chat toggle leave settings cleanly", async () => {
+    await renderApp();
+
+    await waitFor(() =>
+      expect(
+        document.body.querySelector('[role="button"][aria-label="Open task Route task"]'),
+      ).toBeTruthy(),
+    );
+    await clickButtonByText("Settings");
+
+    await waitFor(() => {
+      expect(document.body.textContent).toContain("OpenAI connection");
+    });
+
+    await clickSelector('button[aria-label="Show chat"]');
+
+    await waitFor(() => {
+      expect(document.body.textContent).toContain(
+        "Talk with the agent. Each conversation keeps its own saved history.",
+      );
+      expect(document.body.textContent).toContain("Ask about priorities");
+      expect(document.body.textContent).not.toContain("OpenAI connection");
+    });
+    expect(
+      Array.from(document.body.querySelectorAll<HTMLButtonElement>('button[aria-current="page"]'))
+        .some((button) => button.textContent?.includes("Settings")),
+    ).toBe(false);
+  });
 });
 
 async function renderApp() {
diff --git a/src/client/App.tsx b/src/client/App.tsx
index 01652be..8fd1385 100644
--- a/src/client/App.tsx
+++ b/src/client/App.tsx
@@ -503,9 +503,7 @@ export function App() {
 
   function changeWorkspaceMode(nextMode: WorkspaceMode) {
     setWorkspaceMode(nextMode);
-    if (nextMode === "board") {
-      setView("board");
-    }
+    setView("board");
   }
 
   function clearBoardFilters() {
diff --git a/src/client/components/Sidebar.test.tsx b/src/client/components/Sidebar.test.tsx
index 6c79ab2..606ce0a 100644
--- a/src/client/components/Sidebar.test.tsx
+++ b/src/client/components/Sidebar.test.tsx
@@ -83,11 +83,29 @@ describe("Sidebar", () => {
     expect(container.textContent).not.toContain("Focus areas");
     expect(container.textContent).not.toContain("Client Ops");
     expect(container.querySelector('button[aria-label="New chat"]')).not.toBeNull();
+    expect(container.querySelector('[data-slot="scroll-area"]')).not.toBeNull();
+    const localStatus = container.querySelector('[data-sidebar="local-status"]');
+    expect(localStatus).not.toBeNull();
+    expect(localStatus?.tagName).toBe("DIV");
+    expect(localStatus?.getAttribute("tabindex")).toBeNull();
+    expect(
+      Array.from(container.querySelectorAll<HTMLButtonElement>("button")).some((button) =>
+        button.textContent?.includes("This Mac"),
+      ),
+    ).toBe(false);
     expect(
       Array.from(container.querySelectorAll<HTMLButtonElement>('button[data-sidebar="menu-button"]'))
         .some((button) => button.textContent?.trim() === "Board"),
     ).toBe(false);
 
+    await act(async () => {
+      Array.from(container.querySelectorAll<HTMLButtonElement>('button[data-sidebar="menu-button"]'))
+        .find((button) => button.textContent?.includes("Settings"))
+        ?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
+
+    expect(onViewChange).toHaveBeenCalledWith("settings");
+
     await act(async () => {
       container
         .querySelector<HTMLButtonElement>('button[aria-label="Show board"]')
@@ -148,6 +166,10 @@ describe("Sidebar", () => {
     );
 
     expect(boardToggle?.getAttribute("data-state")).toBe("off");
+    expect(
+      Array.from(container.querySelectorAll<HTMLButtonElement>('button[aria-current="page"]'))
+        .find((button) => button.textContent?.includes("Settings")),
+    ).not.toBeUndefined();
 
     await act(async () => {
       boardToggle?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
@@ -159,6 +181,7 @@ describe("Sidebar", () => {
 
   it("turns focus areas into clickable board filters with counts", async () => {
     const onFocusAreaChange = vi.fn();
+    const onViewChange = vi.fn();
 
     await act(async () => {
       root.render(
@@ -174,7 +197,7 @@ describe("Sidebar", () => {
               chatConversations={chatConversations()}
               activeConversationId="conversation-1"
               chatHistoryLoading={false}
-              onViewChange={vi.fn()}
+              onViewChange={onViewChange}
               onWorkspaceModeChange={vi.fn()}
               onFocusAreaChange={onFocusAreaChange}
               onChatConversationSelect={vi.fn()}
@@ -188,6 +211,28 @@ describe("Sidebar", () => {
     expect(container.textContent).toContain("Focus areas");
     expect(container.textContent).toContain("All work");
     expect(container.textContent).toContain("Client Ops");
+    expect(container.textContent).toContain("Ideas");
+    expect(container.querySelector('[data-slot="scroll-area"]')).not.toBeNull();
+    expect(
+      container.querySelector<HTMLButtonElement>('button[aria-label="All work, 7 tasks"]')
+        ?.getAttribute("aria-pressed"),
+    ).toBe("false");
+    expect(
+      container.querySelector<HTMLButtonElement>('button[aria-label="Client Ops, 2 tasks"]')
+        ?.getAttribute("aria-pressed"),
+    ).toBe("true");
+    expect(
+      container.querySelector<HTMLButtonElement>('button[aria-label="Ideas, 0 tasks"]')
+        ?.getAttribute("aria-pressed"),
+    ).toBe("false");
+
+    await act(async () => {
+      container
+        .querySelector<HTMLButtonElement>('button[aria-label="Edit focus areas"]')
+        ?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
+
+    expect(onViewChange).toHaveBeenCalledWith("settings");
 
     await act(async () => {
       Array.from(container.querySelectorAll<HTMLButtonElement>('button[data-sidebar="menu-button"]'))
@@ -244,6 +289,8 @@ describe("Sidebar", () => {
     ).find((button) => button.getAttribute("data-active") === "true");
 
     expect(activeButton?.textContent).toContain("Launch note");
+    expect(activeButton?.getAttribute("aria-current")).toBe("page");
+    expect(container.querySelectorAll('[data-sidebar="menu-badge"]').length).toBe(1);
 
     await act(async () => {
       activeButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
@@ -251,6 +298,50 @@ describe("Sidebar", () => {
 
     expect(onChatConversationSelect).toHaveBeenCalledWith("conversation-2");
   });
+
+  it("keeps long conversation lists scrollable while search stays above the list", async () => {
+    await act(async () => {
+      root.render(
+        <TooltipProvider>
+          <SidebarProvider>
+            <Sidebar
+              activeView="board"
+              workspaceMode="chat"
+              counts={counts()}
+              focusAreas={focusAreas()}
+              focusAreaCounts={focusAreaCounts()}
+              activeFocusAreaId={null}
+              chatConversations={twentyChatConversations()}
+              activeConversationId="conversation-20"
+              chatHistoryLoading={false}
+              onViewChange={vi.fn()}
+              onWorkspaceModeChange={vi.fn()}
+              onFocusAreaChange={vi.fn()}
+              onChatConversationSelect={vi.fn()}
+              onNewChatConversation={vi.fn()}
+            />
+          </SidebarProvider>
+        </TooltipProvider>,
+      );
+    });
+
+    const search = container.querySelector<HTMLInputElement>(
+      'input[aria-label="Search conversations"]',
+    );
+    const scrollArea = container.querySelector('[data-slot="scroll-area"]');
+    const activeButton = container.querySelector<HTMLButtonElement>(
+      'button[aria-current="page"]',
+    );
+
+    expect(search).not.toBeNull();
+    expect(scrollArea).not.toBeNull();
+    expect(search?.compareDocumentPosition(scrollArea!)).toBe(
+      Node.DOCUMENT_POSITION_FOLLOWING,
+    );
+    expect(container.textContent).toContain("Conversation 20");
+    expect(activeButton?.textContent).toContain("Conversation 20");
+    expect(container.querySelectorAll('[data-sidebar="menu-badge"]').length).toBe(1);
+  });
 });
 
 function counts(): Record<TaskStatus, number> {
@@ -264,11 +355,14 @@ function counts(): Record<TaskStatus, number> {
 }
 
 function focusAreas(): FocusArea[] {
-  return [{ id: "client-ops", label: "Client Ops", color: "emerald" }];
+  return [
+    { id: "client-ops", label: "Client Ops", color: "emerald" },
+    { id: "ideas", label: "Ideas", color: "violet" },
+  ];
 }
 
 function focusAreaCounts(): Record<string, number> {
-  return { "client-ops": 2 };
+  return { "client-ops": 2, ideas: 0 };
 }
 
 function chatConversations(): AssistantChatConversation[] {
@@ -318,6 +412,18 @@ function manyChatConversations(): AssistantChatConversation[] {
   ];
 }
 
+function twentyChatConversations(): AssistantChatConversation[] {
+  return Array.from({ length: 20 }, (_, index) => {
+    const value = index + 1;
+    return {
+      id: `conversation-${value}`,
+      title: `Conversation ${value}`,
+      createdAt: `2026-05-03T10:${String(index).padStart(2, "0")}:00.000Z`,
+      updatedAt: `2026-05-03T10:${String(index).padStart(2, "0")}:30.000Z`,
+    };
+  });
+}
+
 function setInputValue(input: HTMLInputElement, value: string) {
   const setter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
   setter?.call(input, value);
diff --git a/src/client/components/Sidebar.tsx b/src/client/components/Sidebar.tsx
index c9859cb..10e21da 100644
--- a/src/client/components/Sidebar.tsx
+++ b/src/client/components/Sidebar.tsx
@@ -13,6 +13,7 @@ import type {
   TaskStatus,
 } from "../../shared/types";
 import { Badge } from "@/components/ui/badge";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import {
   Sidebar as ShadcnSidebar,
   SidebarContent,
@@ -33,6 +34,7 @@ import {
   useSidebar,
 } from "@/components/ui/sidebar";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { cn } from "@/lib/utils";
 import { getFocusAreaStyle } from "../focus-areas";
 
 type View = "board" | "settings";
@@ -57,7 +59,7 @@ export function Sidebar(props: {
 }) {
   const readyNowCount = props.counts.ready + props.counts.in_progress;
   const attentionCount = props.counts.needs_attention;
-  const { isMobile, setOpenMobile } = useSidebar();
+  const { isMobile, setOpenMobile, state } = useSidebar();
 
   function selectView(view: View) {
     props.onViewChange(view);
@@ -100,7 +102,18 @@ export function Sidebar(props: {
   }
 
   const activeWorkspaceMode =
-    props.workspaceMode === "chat" ? "chat" : props.activeView === "board" ? "board" : "";
+    props.activeView === "settings" ? "" : props.workspaceMode === "chat" ? "chat" : "board";
+  const settingsIsActive = props.activeView === "settings";
+  const collapsedIconMode = !isMobile && state === "collapsed";
+  const collapsedToggleItemStyle = collapsedIconMode
+    ? {
+        width: "32px",
+        height: "32px",
+        minWidth: "32px",
+        padding: 0,
+        borderRadius: "var(--radius-md)",
+      }
+    : undefined;
   const totalTaskCount = Object.values(props.counts).reduce((total, count) => total + count, 0);
 
   return (
@@ -139,14 +152,17 @@ export function Sidebar(props: {
           }}
           variant="outline"
           size="sm"
-          spacing={0}
-          className="w-full group-data-[collapsible=icon]:w-8 group-data-[collapsible=icon]:flex-col"
+          spacing={collapsedIconMode ? 1 : 0}
+          orientation={collapsedIconMode ? "vertical" : "horizontal"}
+          className={cn("w-full", collapsedIconMode && "w-8 rounded-none")}
           aria-label="Task mode"
         >
           <ToggleGroupItem
             value="board"
             aria-label="Show board"
-            className="flex-1 group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:min-w-8 group-data-[collapsible=icon]:px-0"
+            title="Board"
+            style={collapsedToggleItemStyle}
+            className={cn(collapsedIconMode ? "flex-none" : "flex-1")}
           >
             <LayoutGrid data-icon="inline-start" />
             <span className="group-data-[collapsible=icon]:hidden">Board</span>
@@ -154,7 +170,9 @@ export function Sidebar(props: {
           <ToggleGroupItem
             value="chat"
             aria-label="Show chat"
-            className="flex-1 group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:min-w-8 group-data-[collapsible=icon]:px-0"
+            title="Chat"
+            style={collapsedToggleItemStyle}
+            className={cn(collapsedIconMode ? "flex-none" : "flex-1")}
           >
             <MessageSquareText data-icon="inline-start" />
             <span className="group-data-[collapsible=icon]:hidden">Chat</span>
@@ -178,6 +196,7 @@ export function Sidebar(props: {
             totalTaskCount={totalTaskCount}
             activeFocusAreaId={props.activeFocusAreaId}
             onFocusAreaChange={selectFocusArea}
+            onManageFocusAreas={() => selectView("settings")}
           />
         )}
       </SidebarContent>
@@ -187,8 +206,9 @@ export function Sidebar(props: {
           <SidebarMenuItem>
             <SidebarMenuButton
               type="button"
-              isActive={props.workspaceMode === "board" && props.activeView === "settings"}
+              isActive={settingsIsActive}
               tooltip="Settings"
+              aria-current={settingsIsActive ? "page" : undefined}
               onClick={() => selectView("settings")}
             >
               <Settings />
@@ -196,9 +216,14 @@ export function Sidebar(props: {
             </SidebarMenuButton>
           </SidebarMenuItem>
           <SidebarMenuItem>
-            <SidebarMenuButton type="button" disabled className="h-auto items-start disabled:opacity-100">
+            <div
+              data-sidebar="local-status"
+              className="flex h-auto min-h-12 w-full items-start gap-2 rounded-md p-2 text-sm text-sidebar-foreground group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:min-h-8 group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-2 [&_svg]:size-4 [&_svg]:shrink-0"
+              aria-label={`This Mac: ${readyNowCount} ready now, ${attentionCount} need attention`}
+              title={`This Mac: ${readyNowCount} ready now, ${attentionCount} need attention`}
+            >
               <Monitor />
-              <span className="grid gap-0.5">
+              <span className="grid gap-0.5 group-data-[collapsible=icon]:hidden">
                 <span>This Mac</span>
                 <span className="text-xs font-normal text-muted-foreground">
                   <span className="inline-flex items-center gap-1.5">
@@ -206,7 +231,7 @@ export function Sidebar(props: {
                   </span>
                 </span>
               </span>
-            </SidebarMenuButton>
+            </div>
           </SidebarMenuItem>
         </SidebarMenu>
       </SidebarFooter>
@@ -221,46 +246,62 @@ function FocusAreasGroup(props: {
   totalTaskCount: number;
   activeFocusAreaId: string | null;
   onFocusAreaChange: (focusAreaId: string | null) => void;
+  onManageFocusAreas: () => void;
 }) {
+  const allWorkIsActive = props.activeFocusAreaId === null;
+
   return (
-    <SidebarGroup>
+    <SidebarGroup className="min-h-0 flex-1">
       <SidebarGroupLabel>Focus areas</SidebarGroupLabel>
-      <SidebarGroupContent>
-        <SidebarMenu>
-          <SidebarMenuItem>
-            <SidebarMenuButton
-              type="button"
-              isActive={props.activeFocusAreaId === null}
-              tooltip="All work"
-              onClick={() => props.onFocusAreaChange(null)}
-            >
-              <LayoutGrid />
-              <span>All work</span>
-              <Badge variant="secondary" className="ml-auto group-data-[collapsible=icon]:hidden">
-                {props.totalTaskCount}
-              </Badge>
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-          {props.focusAreas.map((area) => {
-            const style = getFocusAreaStyle(area.color);
-            return (
-              <SidebarMenuItem key={area.id}>
-                <SidebarMenuButton
-                  type="button"
-                  isActive={props.activeFocusAreaId === area.id}
-                  tooltip={area.label}
-                  onClick={() => props.onFocusAreaChange(area.id)}
-                >
-                  <Circle style={{ color: style.accent, fill: style.background }} />
-                  <span>{area.label}</span>
-                  <Badge variant="secondary" className="ml-auto group-data-[collapsible=icon]:hidden">
-                    {props.focusAreaCounts[area.id] ?? 0}
-                  </Badge>
-                </SidebarMenuButton>
-              </SidebarMenuItem>
-            );
-          })}
-        </SidebarMenu>
+      <SidebarGroupAction
+        type="button"
+        aria-label="Edit focus areas"
+        title="Edit focus areas"
+        onClick={props.onManageFocusAreas}
+      >
+        <Settings />
+        <span className="sr-only">Edit focus areas</span>
+      </SidebarGroupAction>
+      <SidebarGroupContent className="flex min-h-0 flex-1 flex-col">
+        <ScrollArea className="min-h-0 flex-1 pr-1 group-data-[collapsible=icon]:pr-0">
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton
+                type="button"
+                isActive={allWorkIsActive}
+                tooltip="All work"
+                aria-pressed={allWorkIsActive}
+                aria-label={formatFocusAreaAriaLabel("All work", props.totalTaskCount)}
+                onClick={() => props.onFocusAreaChange(null)}
+              >
+                <LayoutGrid />
+                <span>All work</span>
+                <FocusAreaCountBadge count={props.totalTaskCount} />
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+            {props.focusAreas.map((area) => {
+              const style = getFocusAreaStyle(area.color);
+              const count = props.focusAreaCounts[area.id] ?? 0;
+              const isActive = props.activeFocusAreaId === area.id;
+              return (
+                <SidebarMenuItem key={area.id}>
+                  <SidebarMenuButton
+                    type="button"
+                    isActive={isActive}
+                    tooltip={area.label}
+                    aria-pressed={isActive}
+                    aria-label={formatFocusAreaAriaLabel(area.label, count)}
+                    onClick={() => props.onFocusAreaChange(area.id)}
+                  >
+                    <Circle style={{ color: style.accent, fill: style.background }} />
+                    <span>{area.label}</span>
+                    <FocusAreaCountBadge count={count} />
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              );
+            })}
+          </SidebarMenu>
+        </ScrollArea>
       </SidebarGroupContent>
     </SidebarGroup>
   );
@@ -286,7 +327,7 @@ function ChatHistoryGroup(props: {
   }, [normalizedQuery, props.conversations, showSearch]);
 
   return (
-    <SidebarGroup>
+    <SidebarGroup className="min-h-0 flex-1">
       <SidebarGroupLabel>Conversations</SidebarGroupLabel>
       <SidebarGroupAction
         type="button"
@@ -297,7 +338,7 @@ function ChatHistoryGroup(props: {
         <Plus />
         <span className="sr-only">New chat</span>
       </SidebarGroupAction>
-      <SidebarGroupContent className="flex flex-col gap-2">
+      <SidebarGroupContent className="flex min-h-0 flex-1 flex-col gap-2">
         {showSearch && (
           <>
             <SidebarInput
@@ -310,80 +351,99 @@ function ChatHistoryGroup(props: {
             <SidebarSeparator className="group-data-[collapsible=icon]:hidden" />
           </>
         )}
-        <SidebarMenu>
-          {props.loading ? (
-            Array.from({ length: 4 }, (_, index) => (
-              <SidebarMenuItem key={index}>
-                <SidebarMenuSkeleton showIcon />
-              </SidebarMenuItem>
-            ))
-          ) : props.conversations.length === 0 ? (
-            <SidebarMenuItem>
-              <SidebarMenuButton
-                type="button"
-                disabled
-                className="h-auto items-start disabled:opacity-100"
-                tooltip="No conversations yet"
-              >
-                <MessageSquareText />
-                <span className="grid gap-0.5">
-                  <span>No conversations</span>
-                  <span className="text-xs font-normal text-muted-foreground">
-                    Start a new chat.
+        <ScrollArea className="min-h-0 flex-1 pr-1 group-data-[collapsible=icon]:pr-0">
+          <SidebarMenu>
+            {props.loading ? (
+              Array.from({ length: 4 }, (_, index) => (
+                <SidebarMenuItem key={index}>
+                  <SidebarMenuSkeleton showIcon />
+                </SidebarMenuItem>
+              ))
+            ) : props.conversations.length === 0 ? (
+              <SidebarMenuItem>
+                <SidebarMenuButton
+                  type="button"
+                  disabled
+                  className="h-auto items-start disabled:opacity-100"
+                  tooltip="No conversations yet"
+                >
+                  <MessageSquareText />
+                  <span className="grid gap-0.5">
+                    <span>No conversations</span>
+                    <span className="text-xs font-normal text-muted-foreground">
+                      Start a new chat.
+                    </span>
                   </span>
-                </span>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-          ) : visibleConversations.length === 0 ? (
-            <SidebarMenuItem>
-              <SidebarMenuButton
-                type="button"
-                disabled
-                className="h-auto items-start disabled:opacity-100"
-                tooltip="No matching conversations"
-              >
-                <MessageSquareText />
-                <span className="grid gap-0.5">
-                  <span>No matches</span>
-                  <span className="text-xs font-normal text-muted-foreground">
-                    Try another search.
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            ) : visibleConversations.length === 0 ? (
+              <SidebarMenuItem>
+                <SidebarMenuButton
+                  type="button"
+                  disabled
+                  className="h-auto items-start disabled:opacity-100"
+                  tooltip="No matching conversations"
+                >
+                  <MessageSquareText />
+                  <span className="grid gap-0.5">
+                    <span>No matches</span>
+                    <span className="text-xs font-normal text-muted-foreground">
+                      Try another search.
+                    </span>
                   </span>
-                </span>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-          ) : (
-            visibleConversations.map((conversation) => {
-              const isActive = conversation.id === props.activeConversationId;
-              return (
-                <SidebarMenuItem key={conversation.id}>
-                  <SidebarMenuButton
-                    type="button"
-                    isActive={isActive}
-                    className="h-auto min-h-11 items-start pr-14"
-                    tooltip={conversation.title}
-                    onClick={() => props.onConversationSelect(conversation.id)}
-                  >
-                    <MessageSquareText />
-                    <span className="grid min-w-0 gap-0.5">
-                      <span className="truncate">{conversation.title}</span>
-                      <span className="truncate text-xs font-normal text-muted-foreground">
-                        {formatConversationTime(conversation.updatedAt)}
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            ) : (
+              visibleConversations.map((conversation) => {
+                const isActive = conversation.id === props.activeConversationId;
+                return (
+                  <SidebarMenuItem key={conversation.id}>
+                    <SidebarMenuButton
+                      type="button"
+                      isActive={isActive}
+                      className={cn("h-auto min-h-11 items-start", isActive && "pr-14")}
+                      tooltip={conversation.title}
+                      aria-current={isActive ? "page" : undefined}
+                      onClick={() => props.onConversationSelect(conversation.id)}
+                    >
+                      <MessageSquareText />
+                      <span className="grid min-w-0 gap-0.5">
+                        <span className="truncate">{conversation.title}</span>
+                        <span className="truncate text-xs font-normal text-muted-foreground">
+                          {formatConversationTime(conversation.updatedAt)}
+                        </span>
                       </span>
-                    </span>
-                  </SidebarMenuButton>
-                  <SidebarMenuBadge>
-                    {isActive ? "Open" : formatConversationBadge(conversation.updatedAt)}
-                  </SidebarMenuBadge>
-                </SidebarMenuItem>
-              );
-            })
-          )}
-        </SidebarMenu>
+                    </SidebarMenuButton>
+                    {isActive && <SidebarMenuBadge>Open</SidebarMenuBadge>}
+                  </SidebarMenuItem>
+                );
+              })
+            )}
+          </SidebarMenu>
+        </ScrollArea>
       </SidebarGroupContent>
     </SidebarGroup>
   );
 }
 
+function FocusAreaCountBadge(props: { count: number }) {
+  return (
+    <Badge
+      variant="secondary"
+      className={cn(
+        "ml-auto group-data-[collapsible=icon]:hidden",
+        props.count === 0 && "font-normal text-muted-foreground",
+      )}
+    >
+      {props.count}
+    </Badge>
+  );
+}
+
+function formatFocusAreaAriaLabel(label: string, count: number): string {
+  return `${label}, ${count} ${count === 1 ? "task" : "tasks"}`;
+}
+
 function formatConversationTime(value: string): string {
   const date = new Date(value);
   if (Number.isNaN(date.getTime())) {
@@ -396,14 +456,3 @@ function formatConversationTime(value: string): string {
     minute: "2-digit",
   }).format(date);
 }
-
-function formatConversationBadge(value: string): string {
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) {
-    return "Saved";
-  }
-  return new Intl.DateTimeFormat(undefined, {
-    month: "short",
-    day: "numeric",
-  }).format(date);
-}