diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index 8272223ae34778164172141721365b471c91b4cf..ab3248639b0f76c3bf66ddd554b9e550d5e66383 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -1698,7 +1698,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
       <header
         className={cn(
           "border-b border-border px-3 sm:px-5",
-          isElectron ? "drag-region h-[52px]" : "py-2 sm:py-3",
+          isElectron ? "drag-region flex h-[52px] items-center" : "py-2 sm:py-3",
         )}
       >
         <ChatHeader
diff --git a/apps/web/src/components/DiffPanel.tsx b/apps/web/src/components/DiffPanel.tsx
index 38658c728b4ecef5c80becfe91937c0e902892f5..c20de6f2c7e24b431ff5d64cbf8be9cfc9ef2f7c 100644
--- a/apps/web/src/components/DiffPanel.tsx
+++ b/apps/web/src/components/DiffPanel.tsx
@@ -298,133 +298,139 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
   }, [selectedTurn?.turnId, selectedTurnId]);
 
   const shouldUseDragRegion = isElectron && mode !== "sheet";
-
-  return (
-    <div
-      className={cn(
-        "flex h-full min-w-0 flex-col bg-card",
-        mode === "inline"
-          ? "w-[42vw] min-w-[360px] max-w-[560px] shrink-0 border-l border-border"
-          : "w-full",
-      )}
-    >
-      <div className="border-b border-border">
+  const headerRow = (
+    <>
+      <div className="relative min-w-0 flex-1 [-webkit-app-region:no-drag]">
+        {canScrollTurnStripLeft && (
+          <div className="pointer-events-none absolute inset-y-0 left-8 z-10 w-7 bg-linear-to-r from-card to-transparent" />
+        )}
+        {canScrollTurnStripRight && (
+          <div className="pointer-events-none absolute inset-y-0 right-8 z-10 w-7 bg-linear-to-l from-card to-transparent" />
+        )}
+        <button
+          type="button"
+          className={cn(
+            "absolute left-0 top-1/2 z-20 inline-flex size-6 -translate-y-1/2 items-center justify-center rounded-md border bg-background/90 text-muted-foreground transition-colors",
+            canScrollTurnStripLeft
+              ? "border-border/70 hover:border-border hover:text-foreground"
+              : "cursor-not-allowed border-border/40 text-muted-foreground/40",
+          )}
+          onClick={() => scrollTurnStripBy(-180)}
+          disabled={!canScrollTurnStripLeft}
+          aria-label="Scroll turn list left"
+        >
+          <ChevronLeftIcon className="size-3.5" />
+        </button>
+        <button
+          type="button"
+          className={cn(
+            "absolute right-0 top-1/2 z-20 inline-flex size-6 -translate-y-1/2 items-center justify-center rounded-md border bg-background/90 text-muted-foreground transition-colors",
+            canScrollTurnStripRight
+              ? "border-border/70 hover:border-border hover:text-foreground"
+              : "cursor-not-allowed border-border/40 text-muted-foreground/40",
+          )}
+          onClick={() => scrollTurnStripBy(180)}
+          disabled={!canScrollTurnStripRight}
+          aria-label="Scroll turn list right"
+        >
+          <ChevronRightIcon className="size-3.5" />
+        </button>
         <div
-          className={cn(
-            "flex h-12 items-center justify-between gap-2 px-4",
-            shouldUseDragRegion ? "drag-region" : undefined,
-          )}
+          ref={turnStripRef}
+          className="turn-chip-strip flex gap-1 overflow-x-auto px-8 py-0.5"
         >
-          <div className="relative min-w-0 flex-1 [-webkit-app-region:no-drag]">
-          {canScrollTurnStripLeft && (
-            <div className="pointer-events-none absolute inset-y-0 left-8 z-10 w-7 bg-linear-to-r from-card to-transparent" />
-          )}
-          {canScrollTurnStripRight && (
-            <div className="pointer-events-none absolute inset-y-0 right-8 z-10 w-7 bg-linear-to-l from-card to-transparent" />
-          )}
           <button
             type="button"
-            className={cn(
-              "absolute left-0 top-1/2 z-20 inline-flex size-6 -translate-y-1/2 items-center justify-center rounded-md border bg-background/90 text-muted-foreground transition-colors",
-              canScrollTurnStripLeft
-                ? "border-border/70 hover:border-border hover:text-foreground"
-                : "cursor-not-allowed border-border/40 text-muted-foreground/40",
-            )}
-            onClick={() => scrollTurnStripBy(-180)}
-            disabled={!canScrollTurnStripLeft}
-            aria-label="Scroll turn list left"
+            className="shrink-0 rounded-md"
+            onClick={selectWholeConversation}
+            data-turn-chip-selected={selectedTurnId === null}
           >
-            <ChevronLeftIcon className="size-3.5" />
+            <div
+              className={cn(
+                "rounded-md border px-2 py-1 text-left transition-colors",
+                selectedTurnId === null
+                  ? "border-border bg-accent text-accent-foreground"
+                  : "border-border/70 bg-background/70 text-muted-foreground/80 hover:border-border hover:text-foreground/80",
+              )}
+            >
+              <div className="text-[10px] leading-tight font-medium">All turns</div>
+            </div>
           </button>
-          <button
-            type="button"
-            className={cn(
-              "absolute right-0 top-1/2 z-20 inline-flex size-6 -translate-y-1/2 items-center justify-center rounded-md border bg-background/90 text-muted-foreground transition-colors",
-              canScrollTurnStripRight
-                ? "border-border/70 hover:border-border hover:text-foreground"
-                : "cursor-not-allowed border-border/40 text-muted-foreground/40",
-            )}
-            onClick={() => scrollTurnStripBy(180)}
-            disabled={!canScrollTurnStripRight}
-            aria-label="Scroll turn list right"
-          >
-            <ChevronRightIcon className="size-3.5" />
-          </button>
-          <div
-            ref={turnStripRef}
-            className="turn-chip-strip flex gap-1 overflow-x-auto px-8 py-0.5"
-          >
+          {orderedTurnDiffSummaries.map((summary) => (
             <button
+              key={summary.turnId}
               type="button"
               className="shrink-0 rounded-md"
-              onClick={selectWholeConversation}
-              data-turn-chip-selected={selectedTurnId === null}
+              onClick={() => selectTurn(summary.turnId)}
+              title={summary.turnId}
+              data-turn-chip-selected={summary.turnId === selectedTurn?.turnId}
             >
               <div
                 className={cn(
                   "rounded-md border px-2 py-1 text-left transition-colors",
-                  selectedTurnId === null
+                  summary.turnId === selectedTurn?.turnId
                     ? "border-border bg-accent text-accent-foreground"
                     : "border-border/70 bg-background/70 text-muted-foreground/80 hover:border-border hover:text-foreground/80",
                 )}
               >
-                <div className="text-[10px] leading-tight font-medium">All turns</div>
+                <div className="flex items-center gap-1">
+                  <span className="text-[10px] leading-tight font-medium">
+                    Turn{" "}
+                    {summary.checkpointTurnCount ??
+                      inferredCheckpointTurnCountByTurnId[summary.turnId] ??
+                      "?"}
+                  </span>
+                  <span className="text-[9px] leading-tight opacity-70">
+                    {formatTurnChipTimestamp(summary.completedAt)}
+                  </span>
+                </div>
               </div>
             </button>
-            {orderedTurnDiffSummaries.map((summary) => (
-              <button
-                key={summary.turnId}
-                type="button"
-                className="shrink-0 rounded-md"
-                onClick={() => selectTurn(summary.turnId)}
-                title={summary.turnId}
-                data-turn-chip-selected={summary.turnId === selectedTurn?.turnId}
-              >
-                <div
-                  className={cn(
-                    "rounded-md border px-2 py-1 text-left transition-colors",
-                    summary.turnId === selectedTurn?.turnId
-                      ? "border-border bg-accent text-accent-foreground"
-                      : "border-border/70 bg-background/70 text-muted-foreground/80 hover:border-border hover:text-foreground/80",
-                  )}
-                >
-                  <div className="flex items-center gap-1">
-                    <span className="text-[10px] leading-tight font-medium">
-                      Turn{" "}
-                      {summary.checkpointTurnCount ??
-                        inferredCheckpointTurnCountByTurnId[summary.turnId] ??
-                        "?"}
-                    </span>
-                    <span className="text-[9px] leading-tight opacity-70">
-                      {formatTurnChipTimestamp(summary.completedAt)}
-                    </span>
-                  </div>
-                </div>
-              </button>
-            ))}
-          </div>
-          </div>
-          <ToggleGroup
-            className="shrink-0 [-webkit-app-region:no-drag]"
-            variant="outline"
-            size="xs"
-            value={[diffRenderMode]}
-            onValueChange={(value) => {
-              const next = value[0];
-              if (next === "stacked" || next === "split") {
-                setDiffRenderMode(next);
-              }
-            }}
-          >
-            <Toggle aria-label="Stacked diff view" value="stacked">
-              <Rows3Icon className="size-3" />
-            </Toggle>
-            <Toggle aria-label="Split diff view" value="split">
-              <Columns2Icon className="size-3" />
-            </Toggle>
-          </ToggleGroup>
+          ))}
         </div>
       </div>
+      <ToggleGroup
+        className="shrink-0 [-webkit-app-region:no-drag]"
+        variant="outline"
+        size="xs"
+        value={[diffRenderMode]}
+        onValueChange={(value) => {
+          const next = value[0];
+          if (next === "stacked" || next === "split") {
+            setDiffRenderMode(next);
+          }
+        }}
+      >
+        <Toggle aria-label="Stacked diff view" value="stacked">
+          <Rows3Icon className="size-3" />
+        </Toggle>
+        <Toggle aria-label="Split diff view" value="split">
+          <Columns2Icon className="size-3" />
+        </Toggle>
+      </ToggleGroup>
+    </>
+  );
+  const headerRowClassName = cn(
+    "flex items-center justify-between gap-2 px-4",
+    shouldUseDragRegion ? "drag-region h-[52px] border-b border-border" : "h-12",
+  );
+
+  return (
+    <div
+      className={cn(
+        "flex h-full min-w-0 flex-col bg-card",
+        mode === "inline"
+          ? "w-[42vw] min-w-[360px] max-w-[560px] shrink-0 border-l border-border"
+          : "w-full",
+      )}
+    >
+      {shouldUseDragRegion ? (
+        <div className={headerRowClassName}>{headerRow}</div>
+      ) : (
+        <div className="border-b border-border">
+          <div className={headerRowClassName}>{headerRow}</div>
+        </div>
+      )}
 
       {!activeThread ? (
         <div className="flex flex-1 items-center justify-center px-5 text-center text-xs text-muted-foreground/70">
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 566b386914b62322f07fca8acc2b1e36a46e78a0..7bed62ff2096ab81c7f220200d476503f23a0979 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -467,40 +467,56 @@ export default function Sidebar() {
     };
   }, [handleNewThread, keybindings, routeThreadId, state.projects, state.threads]);
 
+  const onCreateThreadClick = () => {
+    if (state.projects.length === 0) {
+      setAddingProject(true);
+      return;
+    }
+    const firstProject = state.projects[0];
+    if (firstProject) void handleNewThread(firstProject.id);
+  };
+
+  const wordmark = (
+    <div className={`flex items-center gap-2 ${isElectron ? "-translate-y-px" : ""}`}>
+      <SidebarTrigger className="shrink-0 md:hidden" />
+      <div className="flex min-w-0 flex-1 items-center gap-1">
+        <T3Wordmark />
+        <span className="truncate text-base font-medium tracking-tight text-muted-foreground">
+          Code
+        </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>
+  );
+
+  const newThreadButton = (
+    <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"
+      onClick={onCreateThreadClick}
+    >
+      <span className="text-foreground">+</span>
+      New thread
+    </button>
+  );
+
   return (
     <>
-      <SidebarHeader
-        className={`gap-3 ${isElectron ? "drag-region h-[52px] px-4 pl-[88px]" : "px-3 py-2 sm:gap-2.5 sm:px-4 sm:py-3"}`}
-      >
-        <div className="flex items-center gap-2">
-          <SidebarTrigger className="shrink-0 md:hidden" />
-          <div className="flex min-w-0 flex-1 items-center gap-1">
-            <T3Wordmark />
-            <span className="truncate text-base font-medium tracking-tight text-muted-foreground">
-              Code
-            </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>
-
-        <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"
-          onClick={() => {
-            if (state.projects.length === 0) {
-              setAddingProject(true);
-              return;
-            }
-            const firstProject = state.projects[0];
-            if (firstProject) void handleNewThread(firstProject.id);
-          }}
-        >
-          <span className="text-foreground">+</span>
-          New thread
-        </button>
-      </SidebarHeader>
+      {isElectron ? (
+        <>
+          <SidebarHeader className="drag-region h-[52px] flex-row items-center gap-2 px-4 py-0 pl-[88px]">
+            {wordmark}
+          </SidebarHeader>
+          <div className="px-4 pb-2">{newThreadButton}</div>
+        </>
+      ) : (
+        <SidebarHeader className="gap-3 px-3 py-2 sm:gap-2.5 sm:px-4 sm:py-3">
+          {wordmark}
+          {newThreadButton}
+        </SidebarHeader>
+      )}
 
       <SidebarContent className="gap-0">
         <SidebarGroup className="px-2 py-2">
diff --git a/apps/web/src/routes/_chat.$threadId.tsx b/apps/web/src/routes/_chat.$threadId.tsx
index 1cebff4b3b877af263b9c5664068f4631327a241..5c23d14f17efe3f61634319e0fbc081ba535f034 100644
--- a/apps/web/src/routes/_chat.$threadId.tsx
+++ b/apps/web/src/routes/_chat.$threadId.tsx
@@ -12,7 +12,7 @@ const DiffPanel = lazy(() => import("../components/DiffPanel"));
 const DIFF_INLINE_LAYOUT_MEDIA_QUERY = "(max-width: 1180px)";
 const DIFF_INLINE_SIDEBAR_WIDTH_STORAGE_KEY = "chat_diff_sidebar_width";
 const DIFF_INLINE_DEFAULT_WIDTH = "clamp(28rem,48vw,44rem)";
-const DIFF_INLINE_SIDEBAR_MIN_WIDTH = 28 * 16;
+const DIFF_INLINE_SIDEBAR_MIN_WIDTH = 26 * 16;
 
 const DiffPanelSheet = (props: {
   children: ReactNode;