From ad9bc6c1df40ac41ee9f50405bb17bbea6b08674 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Tue, 24 Feb 2026 21:48:41 -0800
Subject: [PATCH] Improve chat layout responsiveness and adopt new sidebar
 primitives

- Refactor chat, header, and composer spacing/overflow for mobile-friendly behavior
- Replace custom sidebar structure with reusable collapsible/sidebar UI components
- Tighten compact controls with responsive labels, triggers, and accessibility tweaks
---
 apps/web/src/components/ChatMarkdown.tsx      |   2 +-
 apps/web/src/components/ChatView.tsx          |  70 +-
 apps/web/src/components/GitActionsControl.tsx |   6 +-
 .../src/components/ProjectScriptsControl.tsx  |   8 +-
 apps/web/src/components/Sidebar.tsx           | 415 ++++++-----
 apps/web/src/components/ui/collapsible.tsx    |  45 ++
 apps/web/src/components/ui/sidebar.tsx        | 700 ++++++++++++++++++
 apps/web/src/components/ui/tooltip.tsx        |  59 ++
 apps/web/src/index.css                        |  15 +
 apps/web/src/routes/_chat.index.tsx           |  10 +
 apps/web/src/routes/_chat.tsx                 |  24 +-
 11 files changed, 1126 insertions(+), 228 deletions(-)
 create mode 100644 apps/web/src/components/ui/collapsible.tsx
 create mode 100644 apps/web/src/components/ui/sidebar.tsx
 create mode 100644 apps/web/src/components/ui/tooltip.tsx

diff --git a/apps/web/src/components/ChatMarkdown.tsx b/apps/web/src/components/ChatMarkdown.tsx
index e16d09e2a3705389cb0008ad5727f25ff598f088..e8e2b9d85c8ae6ecdeafba3ae5a089efa6c7f471 100644
--- a/apps/web/src/components/ChatMarkdown.tsx
+++ b/apps/web/src/components/ChatMarkdown.tsx
@@ -16,7 +16,7 @@ const markdownComponents: Components = {
 
 function ChatMarkdown({ text }: ChatMarkdownProps) {
   return (
-    <div className="chat-markdown text-sm leading-relaxed text-foreground/80">
+    <div className="chat-markdown w-full min-w-0 text-sm leading-relaxed text-foreground/80">
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
         rehypePlugins={[[rehypeHighlight, { detect: true, ignoreMissing: true }]]}
diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index 13653399fac8899d977627ba48e16afc8cd4d1e2..150ae0a3ebda2501fc94d5fc65682dad6028be27 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -112,6 +112,7 @@ import {
   setupProjectScript,
 } from "~/projectScripts";
 import { Toggle } from "./ui/toggle";
+import { SidebarTrigger } from "./ui/sidebar";
 import {
   asApprovalRequestId,
   asProjectId,
@@ -1666,6 +1667,14 @@ export default function ChatView({ threadId }: ChatViewProps) {
   if (!activeThread) {
     return (
       <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-background text-muted-foreground/40">
+        {!isElectron && (
+          <header className="border-b border-border px-3 py-2 md:hidden">
+            <div className="flex items-center gap-2">
+              <SidebarTrigger className="size-7 shrink-0" />
+              <span className="text-sm font-medium text-foreground">Threads</span>
+            </div>
+          </header>
+        )}
         {isElectron && (
           <div className="drag-region flex h-[52px] shrink-0 items-center border-b border-border px-5">
             <span className="text-xs text-muted-foreground/50">No active thread</span>
@@ -1681,10 +1690,13 @@ export default function ChatView({ threadId }: ChatViewProps) {
   }
 
   return (
-    <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-background">
+    <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden bg-background">
       {/* Top bar */}
       <header
-        className={`flex items-center justify-between border-b border-border px-5 ${isElectron ? "drag-region h-[52px]" : "py-3"}`}
+        className={cn(
+          "border-b border-border px-3 sm:px-5",
+          isElectron ? "drag-region h-[52px]" : "py-2 sm:py-3",
+        )}
       >
         <ChatHeader
           activeThreadId={activeThread.id}
@@ -1718,7 +1730,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
       {/* Messages */}
       <div
         ref={messagesScrollRef}
-        className="min-h-0 flex-1 overflow-y-auto px-5 py-4"
+        className="min-h-0 flex-1 overflow-x-hidden overflow-y-auto overscroll-y-contain px-3 py-3 sm:px-5 sm:py-4"
         onScroll={onMessagesScroll}
       >
         <MessagesTimeline
@@ -1741,8 +1753,8 @@ export default function ChatView({ threadId }: ChatViewProps) {
       </div>
 
       {/* Input bar */}
-      <div className={cn("px-5 pt-2", isGitRepo ? "pb-1" : "pb-4")}>
-        <form onSubmit={onSend} className="mx-auto max-w-3xl">
+      <div className={cn("px-3 pt-1.5 sm:px-5 sm:pt-2", isGitRepo ? "pb-1" : "pb-3 sm:pb-4")}>
+        <form onSubmit={onSend} className="mx-auto w-full max-w-3xl">
           <div
             className={`group rounded-[20px] border bg-card transition-colors duration-200 focus-within:border-ring ${
               isDragOverComposer ? "border-primary/70 bg-accent/30" : "border-border"
@@ -1753,7 +1765,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
             onDrop={onComposerDrop}
           >
             {/* Textarea area */}
-            <div className="relative px-4 pt-4 pb-2">
+            <div className="relative px-3 pt-3.5 pb-2 sm:px-4 sm:pt-4">
               {composerMenuOpen && (
                 <div className="absolute inset-x-0 bottom-full z-20 mb-2 px-1">
                   <ComposerCommandMenu
@@ -1840,24 +1852,24 @@ export default function ChatView({ threadId }: ChatViewProps) {
             </div>
 
             {/* Bottom toolbar */}
-            <div className="flex items-center justify-between px-3 pb-3">
-              <div className="flex items-center gap-1">
+            <div className="flex flex-wrap items-center justify-between gap-2 px-2.5 pb-2.5 sm:flex-nowrap sm:gap-0 sm:px-3 sm:pb-3">
+              <div className="flex min-w-0 flex-1 items-center gap-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden sm:overflow-visible">
                 {/* Model picker */}
                 <ModelPicker model={selectedModel} onModelChange={onModelSelect} />
 
                 {/* Divider */}
-                <Separator orientation="vertical" className="mx-0.5 h-4" />
+                <Separator orientation="vertical" className="mx-0.5 hidden h-4 sm:block" />
 
                 {/* Reasoning effort */}
                 <ReasoningEffortPicker effort={selectedEffort} onEffortChange={onEffortSelect} />
 
                 {/* Divider */}
-                <Separator orientation="vertical" className="mx-0.5 h-4" />
+                <Separator orientation="vertical" className="mx-0.5 hidden h-4 sm:block" />
 
                 {/* Runtime mode toggle */}
                 <Button
                   variant="ghost"
-                  className="text-muted-foreground/70 hover:text-foreground/80"
+                  className="shrink-0 px-2 text-muted-foreground/70 hover:text-foreground/80 sm:px-3"
                   size="sm"
                   type="button"
                   disabled={isSwitchingRuntimeMode}
@@ -1873,16 +1885,18 @@ export default function ChatView({ threadId }: ChatViewProps) {
                   }
                 >
                   {state.runtimeMode === "full-access" ? <LockOpenIcon /> : <LockIcon />}
-                  {state.runtimeMode === "full-access" ? "Full access" : "Supervised"}
+                  <span className="sr-only sm:not-sr-only">
+                    {state.runtimeMode === "full-access" ? "Full access" : "Supervised"}
+                  </span>
                 </Button>
               </div>
 
               {/* Right side: send / stop button */}
-              <div className="flex items-center gap-2">
+              <div className="flex shrink-0 items-center gap-2">
                 {phase === "running" ? (
                   <button
                     type="button"
-                    className="flex h-8 w-8 items-center justify-center rounded-full bg-rose-500/90 text-white transition-all duration-150 hover:bg-rose-500 hover:scale-105"
+                    className="flex h-9 w-9 items-center justify-center rounded-full bg-rose-500/90 text-white transition-all duration-150 hover:bg-rose-500 hover:scale-105 sm:h-8 sm:w-8"
                     onClick={() => void onInterrupt()}
                     aria-label="Stop generation"
                   >
@@ -1899,7 +1913,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
                 ) : (
                   <button
                     type="submit"
-                    className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/90 text-primary-foreground transition-all duration-150 hover:bg-primary hover:scale-105 disabled:opacity-30 disabled:hover:scale-100"
+                    className="flex h-9 w-9 items-center justify-center rounded-full bg-primary/90 text-primary-foreground transition-all duration-150 hover:bg-primary hover:scale-105 disabled:opacity-30 disabled:hover:scale-100 sm:h-8 sm:w-8"
                     disabled={
                       isSending || isConnecting || (!prompt.trim() && composerImages.length === 0)
                     }
@@ -2061,14 +2075,19 @@ const ChatHeader = memo(function ChatHeader({
   onToggleDiff,
 }: ChatHeaderProps) {
   return (
-    <>
-      <div className="flex min-w-0 flex-1 items-center gap-3">
+    <div className="flex min-w-0 flex-1 items-center justify-between gap-2">
+      <div className="flex min-w-0 items-center gap-2 sm:gap-3">
+        <SidebarTrigger className="size-7 shrink-0 md:hidden" />
         <h2 className="truncate text-sm font-medium text-foreground" title={activeThreadTitle}>
           {activeThreadTitle}
         </h2>
-        {activeProjectName && <Badge variant="outline">{activeProjectName}</Badge>}
+        {activeProjectName && (
+          <Badge variant="outline" className="max-w-28 truncate sm:max-w-none">
+            {activeProjectName}
+          </Badge>
+        )}
       </div>
-      <div className="shrink-0 flex items-center gap-3">
+      <div className="flex shrink-0 items-center gap-2 sm:gap-3">
         {activeProjectScripts && (
           <ProjectScriptsControl
             scripts={activeProjectScripts}
@@ -2086,6 +2105,7 @@ const ChatHeader = memo(function ChatHeader({
           <GitActionsControl api={api} gitCwd={gitCwd} activeThreadId={activeThreadId} />
         )}
         <Toggle
+          className="shrink-0"
           pressed={diffOpen}
           onPressedChange={onToggleDiff}
           aria-label="Toggle diff panel"
@@ -2095,7 +2115,7 @@ const ChatHeader = memo(function ChatHeader({
           <DiffIcon className="size-3" />
         </Toggle>
       </div>
-    </>
+    </div>
   );
 });
 
@@ -2309,7 +2329,7 @@ const MessagesTimeline = memo(function MessagesTimeline({
 
   return (
     <div
-      className="relative mx-auto max-w-3xl"
+      className="relative mx-auto w-full min-w-0 max-w-3xl overflow-x-hidden"
       style={{ height: `${rowVirtualizer.getTotalSize()}px` }}
     >
       {virtualRows.map((virtualRow: VirtualItem) => {
@@ -2428,7 +2448,7 @@ const MessagesTimeline = memo(function MessagesTimeline({
                           </div>
                         )}
                         {row.message.text && (
-                          <pre className="whitespace-pre-wrap wrap-break-word font-mono text-sm leading-relaxed text-foreground">
+                          <pre className="whitespace-pre-wrap break-words font-mono text-sm leading-relaxed text-foreground">
                             {row.message.text}
                           </pre>
                         )}
@@ -2469,7 +2489,7 @@ const MessagesTimeline = memo(function MessagesTimeline({
                           <span className="h-px flex-1 bg-border" />
                         </div>
                       )}
-                      <div className="px-1 py-0.5">
+                      <div className="min-w-0 px-1 py-0.5">
                         <ChatMarkdown text={messageText} />
                         {(() => {
                           const turnSummary = turnDiffSummaryByAssistantMessageId.get(
@@ -2708,9 +2728,9 @@ const OpenInPicker = memo(function OpenInPicker({
     <Group aria-label="Subscription actions">
       <Button size="xs" variant="outline" onClick={() => openInEditor(lastEditor)}>
         {primaryOption?.Icon && <primaryOption.Icon aria-hidden="true" className="size-3.5" />}
-        <span className="ml-0.5">Open</span>
+        <span className="sr-only sm:not-sr-only sm:ml-0.5">Open</span>
       </Button>
-      <GroupSeparator />
+      <GroupSeparator className="hidden sm:block" />
       <Menu>
         <MenuTrigger render={<Button aria-label="Copy options" size="icon-xs" variant="outline" />}>
           <ChevronDownIcon aria-hidden="true" className="size-4" />
diff --git a/apps/web/src/components/GitActionsControl.tsx b/apps/web/src/components/GitActionsControl.tsx
index 11b5fc45236b60a006f86dcfe08243b5d36eec34..4b287947651f7bd857031b3588e44d0dbf89b7b3 100644
--- a/apps/web/src/components/GitActionsControl.tsx
+++ b/apps/web/src/components/GitActionsControl.tsx
@@ -501,7 +501,7 @@ export default function GitActionsControl({
                 }
               >
                 <GitQuickActionIcon quickAction={quickAction} />
-                <span className="ml-0.5">{quickAction.label}</span>
+                <span className="sr-only sm:not-sr-only sm:ml-0.5">{quickAction.label}</span>
               </PopoverTrigger>
               <PopoverPopup tooltipStyle side="bottom" align="start">
                 {quickActionDisabledReason}
@@ -515,10 +515,10 @@ export default function GitActionsControl({
               onClick={runQuickAction}
             >
               <GitQuickActionIcon quickAction={quickAction} />
-              <span className="ml-0.5">{quickAction.label}</span>
+              <span className="sr-only sm:not-sr-only sm:ml-0.5">{quickAction.label}</span>
             </Button>
           )}
-          <GroupSeparator />
+          <GroupSeparator className="hidden sm:block" />
           <Menu
             onOpenChange={(open) => {
               if (open) void invalidateGitQueries(queryClient);
diff --git a/apps/web/src/components/ProjectScriptsControl.tsx b/apps/web/src/components/ProjectScriptsControl.tsx
index 71d1edad9757762c0b3481afc83f6ae23eee9195..067ae5792fe29dbd2207481349ceb04a353d8d71 100644
--- a/apps/web/src/components/ProjectScriptsControl.tsx
+++ b/apps/web/src/components/ProjectScriptsControl.tsx
@@ -266,9 +266,9 @@ export default function ProjectScriptsControl({
             title={`Run ${primaryScript.name}`}
           >
             <ScriptIcon icon={primaryScript.icon} />
-            <span className="ml-0.5">{primaryScript.name}</span>
+            <span className="sr-only sm:not-sr-only sm:ml-0.5">{primaryScript.name}</span>
           </Button>
-          <GroupSeparator />
+          <GroupSeparator className="hidden sm:block" />
           <Menu highlightItemOnHover={false}>
             <MenuTrigger
               render={<Button size="icon-xs" variant="outline" aria-label="Script actions" />}
@@ -327,9 +327,9 @@ export default function ProjectScriptsControl({
           </Menu>
         </Group>
       ) : (
-        <Button size="xs" variant="outline" onClick={openAddDialog}>
+        <Button size="xs" variant="outline" onClick={openAddDialog} title="Add action">
           <PlusIcon className="size-3.5" />
-          Add action
+          <span className="sr-only sm:not-sr-only sm:ml-0.5">Add action</span>
         </Button>
       )}
 
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 6b4029cb5255d0d9af4bc8cd9a7ef0ae2f9e9108..3ba9c4527a7b5e65f50d72bef5f07a3eeb19e82f 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -1,4 +1,4 @@
-import { TerminalIcon } from "lucide-react";
+import { ChevronRightIcon, TerminalIcon } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import type { ResolvedKeybindingsConfig } from "@t3tools/contracts";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
@@ -15,6 +15,22 @@ import { useNativeApi } from "../hooks/useNativeApi";
 import { gitRemoveWorktreeMutationOptions } from "../lib/gitReactQuery";
 import { serverConfigQueryOptions } from "../lib/serverReactQuery";
 import { toastManager } from "./ui/toast";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible";
+import {
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+} from "./ui/sidebar";
 import { formatWorktreePathForDisplay, getOrphanedWorktreePathForThread } from "../worktreeCleanup";
 
 const EMPTY_KEYBINDINGS: ResolvedKeybindingsConfig = [];
@@ -431,23 +447,22 @@ export default function Sidebar() {
   }, [handleNewThread, keybindings, routeThreadId, state.projects, state.threads]);
 
   return (
-    <aside className="sidebar flex h-full w-[260px] shrink-0 flex-col border-r border-border bg-card">
-      {/* Branding */}
-      <div
-        className={`flex items-center gap-2.5 px-4 ${isElectron ? "drag-region h-[52px] pl-[76px]" : "py-4"}`}
+    <>
+      <SidebarHeader
+        className={`gap-3 ${isElectron ? "drag-region h-[52px] px-4 pl-[76px]" : "px-3 py-2 sm:gap-2.5 sm:px-4 sm:py-3"}`}
       >
-        <div className="flex min-w-0 flex-1 items-center gap-2">
-          <span className="truncate text-sm font-semibold tracking-tight text-foreground">
-            T3 <span className="font-normal text-muted-foreground">Code</span>
-          </span>
-          <span className="rounded-full bg-muted/50 px-1.5 py-0.5 text-[9px] font-medium uppercase tracking-widest text-muted-foreground/60">
-            {APP_STAGE_LABEL}
-          </span>
+        <div className="flex items-center gap-2">
+          <SidebarTrigger className="shrink-0 md:hidden" />
+          <div className="flex min-w-0 flex-1 items-center gap-2">
+            <span className="truncate text-sm font-semibold tracking-tight text-foreground">
+              T3 <span className="font-normal text-muted-foreground">Code</span>
+            </span>
+            <span className="rounded-full bg-muted/50 px-1.5 py-0.5 text-[9px] font-medium uppercase tracking-widest text-muted-foreground/60">
+              {APP_STAGE_LABEL}
+            </span>
+          </div>
         </div>
-      </div>
 
-      {/* New thread (global) */}
-      <div className="px-3 pb-3">
         <button
           type="button"
           className="flex w-full items-center gap-2 rounded-lg border border-border bg-secondary px-3 py-2 text-xs text-muted-foreground transition-colors duration-150 hover:bg-accent"
@@ -463,182 +478,206 @@ export default function Sidebar() {
           <span className="text-foreground">+</span>
           New thread
         </button>
-      </div>
+      </SidebarHeader>
 
-      {/* Project list */}
-      <nav className="flex-1 overflow-y-auto px-2">
-        {state.projects.map((project) => {
-          const threads = state.threads
-            .filter((t) => t.projectId === project.id)
-            .toSorted((a, b) => {
-              const byDate = new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
-              if (byDate !== 0) return byDate;
-              return b.id.localeCompare(a.id);
-            });
-          return (
-            <div key={project.id} className="mb-1">
-              {/* Project header */}
-              <button
-                type="button"
-                className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors duration-150 hover:bg-accent"
-                onClick={() => dispatch({ type: "TOGGLE_PROJECT", projectId: project.id })}
-                onContextMenu={(e) => {
-                  e.preventDefault();
-                  void handleProjectContextMenu(project.id, {
-                    x: e.clientX,
-                    y: e.clientY,
-                  });
-                }}
-              >
-                <span className="text-[10px] text-muted-foreground/70">
-                  {project.expanded ? "▼" : "▶"}
-                </span>
-                <span className="flex-1 truncate text-xs font-medium text-foreground/90">
-                  {project.name}
-                </span>
-                <span className="text-[10px] text-muted-foreground/60">{threads.length}</span>
-              </button>
+      <SidebarContent className="gap-0">
+        <SidebarGroup className="px-2 py-2">
+          <SidebarMenu>
+            {state.projects.map((project) => {
+              const threads = state.threads
+                .filter((thread) => thread.projectId === project.id)
+                .toSorted((a, b) => {
+                  const byDate = new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+                  if (byDate !== 0) return byDate;
+                  return b.id.localeCompare(a.id);
+                });
 
-              {/* Threads */}
-              {project.expanded && (
-                <div className="ml-2 border-l border-border/80 pl-2">
-                  {threads.map((thread) => {
-                    const isActive = routeThreadId === thread.id;
-                    const threadStatus = threadStatusPill(
-                      thread,
-                      pendingApprovalByThreadId.get(thread.id) === true,
-                    );
-                    const terminalStatus = terminalStatusIndicator(thread);
-                    return (
-                      <button
-                        key={thread.id}
-                        type="button"
-                        className={`flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors duration-150 ${
-                          isActive
-                            ? "bg-accent text-foreground"
-                            : "text-muted-foreground hover:bg-secondary"
+              return (
+                <Collapsible
+                  key={project.id}
+                  className="group/collapsible"
+                  open={project.expanded}
+                  onOpenChange={(open) => {
+                    if (open === project.expanded) return;
+                    dispatch({ type: "TOGGLE_PROJECT", projectId: project.id });
+                  }}
+                >
+                  <SidebarMenuItem>
+                    <CollapsibleTrigger
+                      render={
+                        <SidebarMenuButton
+                          size="sm"
+                          className="gap-2 px-2 py-1.5 text-left hover:bg-accent"
+                        />
+                      }
+                      onContextMenu={(event) => {
+                        event.preventDefault();
+                        void handleProjectContextMenu(project.id, {
+                          x: event.clientX,
+                          y: event.clientY,
+                        });
+                      }}
+                    >
+                      <ChevronRightIcon
+                        className={`-ml-0.5 size-3.5 shrink-0 text-muted-foreground/70 transition-transform duration-150 ${
+                          project.expanded ? "rotate-90" : ""
                         }`}
-                        onClick={() => {
-                          void navigate({
-                            to: "/$threadId",
-                            params: { threadId: thread.id },
-                          });
-                        }}
-                        onContextMenu={(e) => {
-                          e.preventDefault();
-                          void handleThreadContextMenu(thread.id, {
-                            x: e.clientX,
-                            y: e.clientY,
-                          });
-                        }}
-                      >
-                        <div className="flex min-w-0 flex-1 items-center gap-1.5">
-                          {threadStatus && (
-                            <span
-                              className={`inline-flex items-center gap-1 text-[10px] ${threadStatus.colorClass}`}
-                            >
-                              <span
-                                className={`h-1.5 w-1.5 rounded-full ${threadStatus.dotClass} ${
-                                  threadStatus.pulse ? "animate-pulse" : ""
+                      />
+                      <span className="flex-1 truncate text-xs font-medium text-foreground/90">
+                        {project.name}
+                      </span>
+                      <span className="text-[10px] text-muted-foreground/60">{threads.length}</span>
+                    </CollapsibleTrigger>
+
+                    <CollapsibleContent>
+                      <SidebarMenuSub className="mx-1 my-0 w-full translate-x-0 gap-0 px-1.5 py-0">
+                        {threads.map((thread) => {
+                          const isActive = routeThreadId === thread.id;
+                          const threadStatus = threadStatusPill(
+                            thread,
+                            pendingApprovalByThreadId.get(thread.id) === true,
+                          );
+                          const terminalStatus = terminalStatusIndicator(thread);
+
+                          return (
+                            <SidebarMenuSubItem key={thread.id} className="w-full">
+                              <SidebarMenuSubButton
+                                render={<button type="button" />}
+                                size="sm"
+                                isActive={isActive}
+                                className={`h-7 w-full translate-x-0 justify-start px-2 text-left hover:bg-accent hover:text-foreground ${
+                                  isActive ? "text-foreground" : "text-muted-foreground"
                                 }`}
-                              />
-                              <span className="hidden md:inline">{threadStatus.label}</span>
-                            </span>
-                          )}
-                          <span className="min-w-0 flex-1 truncate text-xs">{thread.title}</span>
-                        </div>
-                        <div className="ml-2 flex shrink-0 items-center gap-1.5">
-                          {terminalStatus && (
-                            <span
-                              role="img"
-                              aria-label={terminalStatus.label}
-                              title={terminalStatus.label}
-                              className={`inline-flex items-center justify-center ${terminalStatus.colorClass}`}
-                            >
-                              <TerminalIcon
-                                className={`size-3 ${terminalStatus.pulse ? "animate-pulse" : ""}`}
-                              />
-                            </span>
-                          )}
-                          <span className="text-[10px] text-muted-foreground/40">
-                            {formatRelativeTime(thread.createdAt)}
-                          </span>
-                        </div>
-                      </button>
-                    );
-                  })}
+                                onClick={() => {
+                                  void navigate({
+                                    to: "/$threadId",
+                                    params: { threadId: thread.id },
+                                  });
+                                }}
+                                onContextMenu={(event) => {
+                                  event.preventDefault();
+                                  void handleThreadContextMenu(thread.id, {
+                                    x: event.clientX,
+                                    y: event.clientY,
+                                  });
+                                }}
+                              >
+                                <div className="flex min-w-0 flex-1 items-center gap-1.5 text-left">
+                                  {threadStatus && (
+                                    <span
+                                      className={`inline-flex items-center gap-1 text-[10px] ${threadStatus.colorClass}`}
+                                    >
+                                      <span
+                                        className={`h-1.5 w-1.5 rounded-full ${threadStatus.dotClass} ${
+                                          threadStatus.pulse ? "animate-pulse" : ""
+                                        }`}
+                                      />
+                                      <span className="hidden md:inline">{threadStatus.label}</span>
+                                    </span>
+                                  )}
+                                  <span className="min-w-0 flex-1 truncate text-xs">
+                                    {thread.title}
+                                  </span>
+                                </div>
+                                <div className="ml-auto flex shrink-0 items-center gap-1.5">
+                                  {terminalStatus && (
+                                    <span
+                                      role="img"
+                                      aria-label={terminalStatus.label}
+                                      title={terminalStatus.label}
+                                      className={`inline-flex items-center justify-center ${terminalStatus.colorClass}`}
+                                    >
+                                      <TerminalIcon
+                                        className={`size-3 ${terminalStatus.pulse ? "animate-pulse" : ""}`}
+                                      />
+                                    </span>
+                                  )}
+                                  <span className="text-[10px] text-muted-foreground/40">
+                                    {formatRelativeTime(thread.createdAt)}
+                                  </span>
+                                </div>
+                              </SidebarMenuSubButton>
+                            </SidebarMenuSubItem>
+                          );
+                        })}
 
-                  {/* New thread within project */}
-                  <button
-                    type="button"
-                    className="flex w-full items-center gap-1 px-2 py-1 text-[10px] text-muted-foreground/60 transition-colors duration-150 hover:text-muted-foreground/80"
-                    onClick={() => {
-                      void handleNewThread(project.id);
-                    }}
-                  >
-                    <span>+</span> New thread
-                  </button>
-                </div>
-              )}
+                        <SidebarMenuSubItem className="w-full">
+                          <SidebarMenuSubButton
+                            render={<button type="button" />}
+                            size="sm"
+                            className="h-6 w-full translate-x-0 justify-start px-2 text-left text-[10px] text-muted-foreground/60 hover:bg-accent hover:text-muted-foreground/80"
+                            onClick={() => {
+                              void handleNewThread(project.id);
+                            }}
+                          >
+                            <span>+</span>
+                            <span>New thread</span>
+                          </SidebarMenuSubButton>
+                        </SidebarMenuSubItem>
+                      </SidebarMenuSub>
+                    </CollapsibleContent>
+                  </SidebarMenuItem>
+                </Collapsible>
+              );
+            })}
+          </SidebarMenu>
+
+          {state.projects.length === 0 && !addingProject && (
+            <div className="px-2 pt-4 text-center text-xs text-muted-foreground/60">
+              No projects yet.
+              <br />
+              Add one to get started.
             </div>
-          );
-        })}
-
-        {state.projects.length === 0 && !addingProject && (
-          <div className="px-2 pt-4 text-center text-xs text-muted-foreground/60">
-            No projects yet.
-            <br />
-            Add one to get started.
-          </div>
-        )}
-      </nav>
-
-      {/* Add project form */}
-      {addingProject ? (
-        <div className="border-t border-border p-3">
-          <p className="mb-2 text-[10px] font-medium uppercase tracking-wider text-muted-foreground/70">
-            Add project
-          </p>
-          <input
-            className="mb-2 w-full rounded-md border border-border bg-secondary px-2 py-1.5 font-mono text-xs text-foreground placeholder:text-muted-foreground/40 focus:border-ring focus:outline-none"
-            placeholder="/path/to/project"
-            value={newCwd}
-            onChange={(e) => setNewCwd(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") handleAddProject();
-              if (e.key === "Escape") setAddingProject(false);
-            }}
-          />
-          {isElectron && api && (
-            <button
-              type="button"
-              className="mb-2 flex w-full items-center justify-center rounded-md border border-border px-2 py-1.5 text-xs text-muted-foreground transition-colors duration-150 hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-60"
-              onClick={() => void handlePickFolder()}
-              disabled={isPickingFolder || isAddingProject}
-            >
-              {isPickingFolder ? "Picking folder..." : "Browse for folder"}
-            </button>
           )}
-          <div className="flex gap-2">
-            <button
-              type="button"
-              className="flex-1 rounded-md bg-primary px-2 py-1 text-xs font-medium text-primary-foreground transition-colors duration-150 hover:bg-primary/90"
-              onClick={handleAddProject}
-              disabled={isAddingProject}
-            >
-              {isAddingProject ? "Adding..." : "Add"}
-            </button>
-            <button
-              type="button"
-              className="flex-1 rounded-md border border-border px-2 py-1 text-xs text-muted-foreground/80 transition-colors duration-150 hover:bg-secondary"
-              onClick={() => setAddingProject(false)}
-            >
-              Cancel
-            </button>
-          </div>
-        </div>
-      ) : (
-        <div className="border-t border-border p-3">
+        </SidebarGroup>
+      </SidebarContent>
+
+      <SidebarSeparator />
+      <SidebarFooter className="gap-0 p-3">
+        {addingProject ? (
+          <>
+            <p className="mb-2 text-[10px] font-medium uppercase tracking-wider text-muted-foreground/70">
+              Add project
+            </p>
+            <input
+              className="mb-2 w-full rounded-md border border-border bg-secondary px-2 py-1.5 font-mono text-xs text-foreground placeholder:text-muted-foreground/40 focus:border-ring focus:outline-none"
+              placeholder="/path/to/project"
+              value={newCwd}
+              onChange={(event) => setNewCwd(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key === "Enter") handleAddProject();
+                if (event.key === "Escape") setAddingProject(false);
+              }}
+            />
+            {isElectron && api && (
+              <button
+                type="button"
+                className="mb-2 flex w-full items-center justify-center rounded-md border border-border px-2 py-1.5 text-xs text-muted-foreground transition-colors duration-150 hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-60"
+                onClick={() => void handlePickFolder()}
+                disabled={isPickingFolder || isAddingProject}
+              >
+                {isPickingFolder ? "Picking folder..." : "Browse for folder"}
+              </button>
+            )}
+            <div className="flex gap-2">
+              <button
+                type="button"
+                className="flex-1 rounded-md bg-primary px-2 py-1 text-xs font-medium text-primary-foreground transition-colors duration-150 hover:bg-primary/90"
+                onClick={handleAddProject}
+                disabled={isAddingProject}
+              >
+                {isAddingProject ? "Adding..." : "Add"}
+              </button>
+              <button
+                type="button"
+                className="flex-1 rounded-md border border-border px-2 py-1 text-xs text-muted-foreground/80 transition-colors duration-150 hover:bg-secondary"
+                onClick={() => setAddingProject(false)}
+              >
+                Cancel
+              </button>
+            </div>
+          </>
+        ) : (
           <button
             type="button"
             className="flex w-full items-center justify-center gap-1 rounded-md border border-dashed border-border py-2 text-xs text-muted-foreground/70 transition-colors duration-150 hover:border-ring hover:text-muted-foreground"
@@ -646,8 +685,10 @@ export default function Sidebar() {
           >
             + Add project
           </button>
-        </div>
-      )}
-    </aside>
+        )}
+      </SidebarFooter>
+
+      <SidebarRail />
+    </>
   );
 }
diff --git a/apps/web/src/components/ui/collapsible.tsx b/apps/web/src/components/ui/collapsible.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..84935fd567035910b2ba75efd4a59c3ba3940b9a
--- /dev/null
+++ b/apps/web/src/components/ui/collapsible.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible";
+
+import { cn } from "~/lib/utils";
+
+function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
+
+function CollapsibleTrigger({
+  className,
+  ...props
+}: CollapsiblePrimitive.Trigger.Props) {
+  return (
+    <CollapsiblePrimitive.Trigger
+      className={cn("cursor-pointer", className)}
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  );
+}
+
+function CollapsiblePanel({
+  className,
+  ...props
+}: CollapsiblePrimitive.Panel.Props) {
+  return (
+    <CollapsiblePrimitive.Panel
+      className={cn(
+        "h-(--collapsible-panel-height) overflow-hidden transition-[height] duration-200 data-ending-style:h-0 data-starting-style:h-0",
+        className,
+      )}
+      data-slot="collapsible-panel"
+      {...props}
+    />
+  );
+}
+
+export {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsiblePanel,
+  CollapsiblePanel as CollapsibleContent,
+};
diff --git a/apps/web/src/components/ui/sidebar.tsx b/apps/web/src/components/ui/sidebar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..fbe2308f6bfff1a1d1879c193096b26c95003be9
--- /dev/null
+++ b/apps/web/src/components/ui/sidebar.tsx
@@ -0,0 +1,700 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+import { PanelLeftCloseIcon, PanelLeftIcon } from "lucide-react";
+import * as React from "react";
+import { cn } from "~/lib/utils";
+import { Button } from "~/components/ui/button";
+import { Input } from "~/components/ui/input";
+import { ScrollArea } from "~/components/ui/scroll-area";
+import { Separator } from "~/components/ui/separator";
+import {
+  Sheet,
+  SheetDescription,
+  SheetHeader,
+  SheetPopup,
+  SheetTitle,
+} from "~/components/ui/sheet";
+import { Skeleton } from "~/components/ui/skeleton";
+import { Tooltip, TooltipPopup, TooltipTrigger } from "~/components/ui/tooltip";
+import { useMediaQuery } from "~/hooks/useMediaQuery";
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "calc(100vw - var(--spacing(3)))";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed";
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+};
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null);
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.");
+  }
+
+  return context;
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}) {
+  const isMobile = useMediaQuery("(max-width: 767px)");
+  const [openMobile, setOpenMobile] = React.useState(false);
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen);
+  const open = openProp ?? _open;
+  const setOpen = React.useCallback(
+    async (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value;
+      if (setOpenProp) {
+        setOpenProp(openState);
+      } else {
+        _setOpen(openState);
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      await cookieStore.set({
+        expires: Date.now() + SIDEBAR_COOKIE_MAX_AGE * 1000,
+        name: SIDEBAR_COOKIE_NAME,
+        path: "/",
+        value: String(openState),
+      });
+    },
+    [setOpenProp, open],
+  );
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+  }, [isMobile, setOpen]);
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        toggleSidebar();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [toggleSidebar]);
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed";
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      isMobile,
+      open,
+      openMobile,
+      setOpen,
+      setOpenMobile,
+      state,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, toggleSidebar],
+  );
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <div
+        className={cn(
+          "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
+          className,
+        )}
+        data-slot="sidebar-wrapper"
+        style={
+          {
+            "--sidebar-width": SIDEBAR_WIDTH,
+            "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+            ...style,
+          } as React.CSSProperties
+        }
+        {...props}
+      >
+        {children}
+      </div>
+    </SidebarContext.Provider>
+  );
+}
+
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "left" | "right";
+  variant?: "sidebar" | "floating" | "inset";
+  collapsible?: "offcanvas" | "icon" | "none";
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+  if (collapsible === "none") {
+    return (
+      <div
+        className={cn(
+          "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
+          className,
+        )}
+        data-slot="sidebar"
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet onOpenChange={setOpenMobile} open={openMobile} {...props}>
+        <SheetPopup
+          className={cn(
+            "w-(--sidebar-width) max-w-none bg-sidebar p-0 text-sidebar-foreground",
+            className,
+          )}
+          data-mobile="true"
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          showCloseButton={false}
+          side={side}
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetPopup>
+      </Sheet>
+    );
+  }
+
+  return (
+    <div
+      className="group peer hidden text-sidebar-foreground md:block"
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-side={side}
+      data-slot="sidebar"
+      data-state={state}
+      data-variant={variant}
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        className={cn(
+          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
+        )}
+        data-slot="sidebar-gap"
+      />
+      <div
+        className={cn(
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+          side === "left"
+            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          className,
+        )}
+        data-slot="sidebar-container"
+        {...props}
+      >
+        <div
+          className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm/5"
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar, openMobile } = useSidebar();
+
+  return (
+    <Button
+      className={cn("size-7", className)}
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      onClick={(event) => {
+        onClick?.(event);
+        toggleSidebar();
+      }}
+      size="icon"
+      variant="ghost"
+      {...props}
+    >
+      {openMobile ? <PanelLeftCloseIcon /> : <PanelLeftIcon />}
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  );
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <button
+      aria-label="Toggle Sidebar"
+      className={cn(
+        "-translate-x-1/2 group-data-[side=left]:-right-4 absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=right]:left-0 sm:flex",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:translate-x-0 hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:after:left-full",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className,
+      )}
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      onClick={toggleSidebar}
+      tabIndex={-1}
+      title="Toggle Sidebar"
+      type="button"
+      {...props}
+    />
+  );
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+  return (
+    <main
+      className={cn(
+        "relative flex w-full flex-1 flex-col bg-background",
+        "md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2 md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm/5",
+        className,
+      )}
+      data-slot="sidebar-inset"
+      {...props}
+    />
+  );
+}
+
+function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      className={cn("h-8 w-full bg-background shadow-none", className)}
+      data-sidebar="input"
+      data-slot="sidebar-input"
+      {...props}
+    />
+  );
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("flex flex-col gap-2 p-2", className)}
+      data-sidebar="header"
+      data-slot="sidebar-header"
+      {...props}
+    />
+  );
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("flex flex-col gap-2 p-2", className)}
+      data-sidebar="footer"
+      data-slot="sidebar-footer"
+      {...props}
+    />
+  );
+}
+
+function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
+      data-sidebar="separator"
+      data-slot="sidebar-separator"
+      {...props}
+    />
+  );
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <ScrollArea className="**:data-[slot=scroll-area-scrollbar]:hidden" scrollFade>
+      <div
+        className={cn(
+          "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+          className,
+        )}
+        data-sidebar="content"
+        data-slot="sidebar-content"
+        {...props}
+      />
+    </ScrollArea>
+  );
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      data-sidebar="group"
+      data-slot="sidebar-group"
+      {...props}
+    />
+  );
+}
+
+function SidebarGroupLabel({ className, render, ...props }: useRender.ComponentProps<"div">) {
+  const defaultProps = {
+    className: cn(
+      "flex h-8 shrink-0 items-center rounded-lg px-2 font-medium text-sidebar-foreground text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+      "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+      className,
+    ),
+    "data-sidebar": "group-label",
+    "data-slot": "sidebar-group-label",
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps(defaultProps, props),
+    render,
+  });
+}
+
+function SidebarGroupAction({ className, render, ...props }: useRender.ComponentProps<"button">) {
+  const defaultProps = {
+    className: cn(
+      "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-lg p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0",
+      // Increases the hit area of the button on mobile.
+      "after:-inset-2 after:absolute md:after:hidden",
+      "group-data-[collapsible=icon]:hidden",
+      className,
+    ),
+    "data-sidebar": "group-action",
+    "data-slot": "sidebar-group-action",
+  };
+
+  return useRender({
+    defaultTagName: "button",
+    props: mergeProps(defaultProps, props),
+    render,
+  });
+}
+
+function SidebarGroupContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("w-full text-sm", className)}
+      data-sidebar="group-content"
+      data-slot="sidebar-group-content"
+      {...props}
+    />
+  );
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+      data-sidebar="menu"
+      data-slot="sidebar-menu"
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      className={cn("group/menu-item relative", className)}
+      data-sidebar="menu-item"
+      data-slot="sidebar-menu-item"
+      {...props}
+    />
+  );
+}
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-lg p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pe-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0",
+  {
+    defaultVariants: {
+      size: "default",
+      variant: "default",
+    },
+    variants: {
+      size: {
+        default: "h-8 text-sm",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+        sm: "h-7 text-xs",
+      },
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+    },
+  },
+);
+
+function SidebarMenuButton({
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"button"> & {
+  isActive?: boolean;
+  tooltip?: string | React.ComponentProps<typeof TooltipPopup>;
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const { isMobile, state } = useSidebar();
+
+  const defaultProps = {
+    className: cn(sidebarMenuButtonVariants({ size, variant }), className),
+    "data-active": isActive,
+    "data-sidebar": "menu-button",
+    "data-size": size,
+    "data-slot": "sidebar-menu-button",
+  };
+
+  const buttonProps = mergeProps<"button">(defaultProps, props);
+
+  const buttonElement = useRender({
+    defaultTagName: "button",
+    props: buttonProps,
+    render,
+  });
+
+  if (!tooltip) {
+    return buttonElement;
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    };
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger render={buttonElement as React.ReactElement<Record<string, unknown>>} />
+      <TooltipPopup
+        align="center"
+        hidden={state !== "collapsed" || isMobile}
+        side="right"
+        {...tooltip}
+      />
+    </Tooltip>
+  );
+}
+
+function SidebarMenuAction({
+  className,
+  showOnHover = false,
+  render,
+  ...props
+}: useRender.ComponentProps<"button"> & {
+  showOnHover?: boolean;
+}) {
+  const defaultProps = {
+    className: cn(
+      "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-lg p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0",
+      // Increases the hit area of the button on mobile.
+      "after:-inset-2 after:absolute md:after:hidden",
+      "peer-data-[size=sm]/menu-button:top-1",
+      "peer-data-[size=default]/menu-button:top-1.5",
+      "peer-data-[size=lg]/menu-button:top-2.5",
+      "group-data-[collapsible=icon]:hidden",
+      showOnHover &&
+        "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+      className,
+    ),
+    "data-sidebar": "menu-action",
+    "data-slot": "sidebar-menu-action",
+  };
+
+  return useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(defaultProps, props),
+    render,
+  });
+}
+
+function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-lg px-1 font-medium text-sidebar-foreground text-xs tabular-nums",
+        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        className,
+      )}
+      data-sidebar="menu-badge"
+      data-slot="sidebar-menu-badge"
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean;
+}) {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  }, []);
+
+  return (
+    <div
+      className={cn("flex h-8 items-center gap-2 rounded-lg px-2", className)}
+      data-sidebar="menu-skeleton"
+      data-slot="sidebar-menu-skeleton"
+      {...props}
+    >
+      {showIcon && <Skeleton className="size-4 rounded-lg" data-sidebar="menu-skeleton-icon" />}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  );
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      className={cn(
+        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-sidebar-border border-l px-2.5 py-0.5",
+        "group-data-[collapsible=icon]:hidden",
+        className,
+      )}
+      data-sidebar="menu-sub"
+      data-slot="sidebar-menu-sub"
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      className={cn("group/menu-sub-item relative", className)}
+      data-sidebar="menu-sub-item"
+      data-slot="sidebar-menu-sub-item"
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuSubButton({
+  size = "md",
+  isActive = false,
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"a"> & {
+  size?: "sm" | "md";
+  isActive?: boolean;
+}) {
+  const defaultProps = {
+    className: cn(
+      "-translate-x-px flex h-7 min-w-0 items-center gap-2 overflow-hidden rounded-lg px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+      "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+      size === "sm" && "text-xs",
+      size === "md" && "text-sm",
+      "group-data-[collapsible=icon]:hidden",
+      className,
+    ),
+    "data-active": isActive,
+    "data-sidebar": "menu-sub-button",
+    "data-size": size,
+    "data-slot": "sidebar-menu-sub-button",
+  };
+
+  return useRender({
+    defaultTagName: "a",
+    props: mergeProps<"a">(defaultProps, props),
+    render,
+  });
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+};
diff --git a/apps/web/src/components/ui/tooltip.tsx b/apps/web/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f41c4520075cf95db2e90b925fb88d27fdd167de
--- /dev/null
+++ b/apps/web/src/components/ui/tooltip.tsx
@@ -0,0 +1,59 @@
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+
+import { cn } from "~/lib/utils";
+
+const TooltipCreateHandle = TooltipPrimitive.createHandle;
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+function TooltipTrigger(props: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipPopup({
+  className,
+  align = "center",
+  sideOffset = 4,
+  side = "top",
+  anchor,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props & {
+  align?: TooltipPrimitive.Positioner.Props["align"];
+  side?: TooltipPrimitive.Positioner.Props["side"];
+  sideOffset?: TooltipPrimitive.Positioner.Props["sideOffset"];
+  anchor?: TooltipPrimitive.Positioner.Props["anchor"];
+}) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        anchor={anchor}
+        className="z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom,transform] data-instant:transition-none"
+        data-slot="tooltip-positioner"
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <TooltipPrimitive.Popup
+          className={cn(
+            "relative flex h-(--popup-height,auto) w-(--popup-width,auto) origin-(--transform-origin) text-balance rounded-md border bg-popover not-dark:bg-clip-padding text-popover-foreground text-xs shadow-md/5 transition-[width,height,scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 data-instant:duration-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+            className,
+          )}
+          data-slot="tooltip-popup"
+          {...props}
+        >
+          <TooltipPrimitive.Viewport
+            className="relative size-full overflow-clip px-(--viewport-inline-padding) py-1 [--viewport-inline-padding:--spacing(2)] data-instant:transition-none **:data-current:data-ending-style:opacity-0 **:data-current:data-starting-style:opacity-0 **:data-previous:data-ending-style:opacity-0 **:data-previous:data-starting-style:opacity-0 **:data-current:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-previous:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-previous:truncate **:data-current:opacity-100 **:data-previous:opacity-100 **:data-current:transition-opacity **:data-previous:transition-opacity"
+            data-slot="tooltip-viewport"
+          >
+            {children}
+          </TooltipPrimitive.Viewport>
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { TooltipCreateHandle, TooltipProvider, Tooltip, TooltipTrigger, TooltipPopup };
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 68b216ddd1e217ef77bb9cb77cba2273b064d868..97cb06366f07694ac74bdaec0aca95f2286353bc 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -133,6 +133,18 @@ body {
   min-height: 100vh;
 }
 
+html,
+body,
+#root {
+  height: 100%;
+  width: 100%;
+  max-width: 100%;
+  overflow-y: hidden;
+  overflow-x: hidden;
+  overflow-x: clip;
+  overscroll-behavior-y: none;
+}
+
 body::after {
   content: "";
   position: fixed;
@@ -229,7 +241,9 @@ label:has(> select#reasoning-effort) select {
 
 /* Chat markdown rendering */
 .chat-markdown {
+  min-width: 0;
   overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 .chat-markdown > :first-child {
@@ -283,6 +297,7 @@ label:has(> select#reasoning-effort) select {
 }
 
 .chat-markdown pre {
+  max-width: 100%;
   overflow-x: auto;
   border: 1px solid var(--border);
   border-radius: 0.75rem;
diff --git a/apps/web/src/routes/_chat.index.tsx b/apps/web/src/routes/_chat.index.tsx
index 5e70383c485c3c5b7df2313db34913fb8ae97c8f..888e6ee74b074c48569623975916d54231fbf38e 100644
--- a/apps/web/src/routes/_chat.index.tsx
+++ b/apps/web/src/routes/_chat.index.tsx
@@ -1,10 +1,20 @@
 import { createFileRoute } from "@tanstack/react-router";
 
 import { isElectron } from "../env";
+import { SidebarTrigger } from "../components/ui/sidebar";
 
 function ChatIndexRouteView() {
   return (
     <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-background text-muted-foreground/40">
+      {!isElectron && (
+        <header className="border-b border-border px-3 py-2 md:hidden">
+          <div className="flex items-center gap-2">
+            <SidebarTrigger className="size-7 shrink-0" />
+            <span className="text-sm font-medium text-foreground">Threads</span>
+          </div>
+        </header>
+      )}
+
       {isElectron && (
         <div className="drag-region flex h-[52px] shrink-0 items-center border-b border-border px-5">
           <span className="text-xs text-muted-foreground/50">No active thread</span>
diff --git a/apps/web/src/routes/_chat.tsx b/apps/web/src/routes/_chat.tsx
index 36c14455986a5adbbb5309100b92eeb1e85d03a2..38cf5bcccd4f55fc241b54d9edb258a211b9686d 100644
--- a/apps/web/src/routes/_chat.tsx
+++ b/apps/web/src/routes/_chat.tsx
@@ -2,7 +2,8 @@ import { Outlet, createFileRoute, useNavigate } from "@tanstack/react-router";
 import { useEffect } from "react";
 
 import { DiffWorkerPoolProvider } from "../components/DiffWorkerPoolProvider";
-import Sidebar from "../components/Sidebar";
+import ThreadSidebar from "../components/Sidebar";
+import { SidebarInset, Sidebar, SidebarProvider } from "~/components/ui/sidebar";
 
 function ChatRouteLayout() {
   const navigate = useNavigate();
@@ -24,16 +25,23 @@ function ChatRouteLayout() {
   }, [navigate]);
 
   return (
-    <div className="flex h-screen overflow-hidden bg-background text-foreground isolate">
-      <Sidebar />
-      <DiffWorkerPoolProvider>
-        <Outlet />
-      </DiffWorkerPoolProvider>
-    </div>
+    <SidebarProvider defaultOpen>
+      <Sidebar
+        side="left"
+        collapsible="offcanvas"
+        className="border-r border-border bg-card text-foreground"
+      >
+        <ThreadSidebar />
+      </Sidebar>
+      <SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none bg-background text-foreground isolate">
+        <DiffWorkerPoolProvider>
+          <Outlet />
+        </DiffWorkerPoolProvider>
+      </SidebarInset>
+    </SidebarProvider>
   );
 }
 
 export const Route = createFileRoute("/_chat")({
   component: ChatRouteLayout,
 });
-
-- 
2.54.0