From 2b43f5758b293ac44334cbe0330f2c77bb06a0e7 Mon Sep 17 00:00:00 2001
From: felipe-software <codercastor@gmail.com>
Date: Tue, 23 Jun 2026 13:32:23 -0300
Subject: [PATCH 1/6] feat: stale worktrees

---
 .../templates/sidebar/sidebar-branch-item.tsx          |  4 ++++
 .../components/templates/sidebar/sidebar-item-icon.tsx | 10 ++++++----
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/templates/sidebar/sidebar-branch-item.tsx b/src/lib/components/templates/sidebar/sidebar-branch-item.tsx
index b500268..3f0c82b 100644
--- a/src/lib/components/templates/sidebar/sidebar-branch-item.tsx
+++ b/src/lib/components/templates/sidebar/sidebar-branch-item.tsx
@@ -105,6 +105,10 @@ function getBranchStatus(branch: BranchInfo): {
     label: string;
     tone: "branch" | "pull-request" | "stale" | "worktree";
 } {
+    if (branch.hasWorktree && branch.isStale) {
+        return { label: "Stale Worktree", tone: "stale" };
+    }
+
     if (branch.hasWorktree) {
         return { label: "Worktree", tone: "worktree" };
     }
diff --git a/src/lib/components/templates/sidebar/sidebar-item-icon.tsx b/src/lib/components/templates/sidebar/sidebar-item-icon.tsx
index 836006d..addfd18 100644
--- a/src/lib/components/templates/sidebar/sidebar-item-icon.tsx
+++ b/src/lib/components/templates/sidebar/sidebar-item-icon.tsx
@@ -11,10 +11,12 @@ export function SidebarItemIcon({ branch }: SidebarItemIconProps) {
         <span
             className={[
                 "grid h-5 w-5 flex-none place-items-center rounded-md",
-                branch.hasWorktree
-                    ? "bg-success/15 text-success"
-                    : branch.source === "pull-request"
-                      ? "bg-blue-500/20 text-blue-600 dark:text-blue-300"
+                branch.isStale
+                    ? "bg-warning/15 text-warning-foreground"
+                    : branch.hasWorktree
+                      ? "bg-success/15 text-success"
+                      : branch.source === "pull-request"
+                        ? "bg-blue-500/20 text-blue-600 dark:text-blue-300"
                       : "bg-muted/45 text-muted-foreground/75",
             ].join(" ")}
         >

From 1a0ff1edb43b750472084cb32d611fdfda7748d2 Mon Sep 17 00:00:00 2001
From: felipe-software <codercastor@gmail.com>
Date: Tue, 23 Jun 2026 13:40:34 -0300
Subject: [PATCH 2/6] style: better stale worktree styling

---
 docs/SIDEBAR_ITEM.md                          | 56 ++++++++++++++
 src/lib/components/atoms/status-pill.tsx      |  2 +
 .../templates/sidebar/sidebar-branch-item.tsx | 30 ++------
 .../templates/sidebar/sidebar-item-icon.tsx   | 11 +--
 .../templates/sidebar/sidebar-item-status.ts  | 74 +++++++++++++++++++
 5 files changed, 141 insertions(+), 32 deletions(-)
 create mode 100644 docs/SIDEBAR_ITEM.md
 create mode 100644 src/lib/components/templates/sidebar/sidebar-item-status.ts

diff --git a/docs/SIDEBAR_ITEM.md b/docs/SIDEBAR_ITEM.md
new file mode 100644
index 0000000..b8a0237
--- /dev/null
+++ b/docs/SIDEBAR_ITEM.md
@@ -0,0 +1,56 @@
+# Sidebar Item
+
+Sidebar branch items are split into small components under
+`src/lib/components/templates/sidebar`:
+
+- `sidebar-branch-item.tsx` renders the clickable row, branch name, status pill,
+  last commit age, and worktree removal action.
+- `sidebar-item-icon.tsx` renders the branch or pull request icon.
+- `sidebar-item-status.ts` classifies each branch item and stores the sidebar
+  label, icon color classes, and pill color classes in one place.
+- `sidebar-project-item.tsx` groups branch items by project and decides which
+  stale items are visible.
+
+## Classification
+
+`getSidebarItemStatus` classifies a `BranchInfo` using this priority order:
+
+1. `stale-worktree`: `branch.hasWorktree === true` and
+   `branch.isStale === true`.
+    - Label: `Stale Worktree`
+    - Color: danger/red
+    - Reason: this branch has a local worktree, but the backing branch is stale,
+      so it needs the strongest warning.
+2. `worktree`: `branch.hasWorktree === true`.
+    - Label: `Worktree`
+    - Color: success/green
+    - Reason: this branch has a local runnable worktree.
+3. `stale`: `branch.isStale === true`.
+    - Label: `Stale`
+    - Color: warning/yellow
+    - Reason: this branch is stale but does not have a local worktree.
+4. `pull-request`: `branch.source === "pull-request"`.
+    - Label: `PR`
+    - Color: blue
+    - Reason: this item came from an open pull request.
+5. `branch`: fallback for every other branch.
+    - Label: `Branch`
+    - Color: muted
+    - Reason: this is a regular branch without a worktree, stale marker, or pull
+      request source.
+
+The priority order matters. For example, a pull request that is stale is shown
+as `Stale`, and a stale branch with a worktree is shown as `Stale Worktree`.
+
+## Color Source
+
+Sidebar item colors should be changed only in `sidebar-item-status.ts`.
+
+Both `SidebarBranchItem` and `SidebarItemIcon` consume the same status config:
+
+- `pillClassName` controls the status pill color.
+- `iconClassName` controls the icon background and icon color.
+
+This keeps the icon and status pill visually aligned for combined states such as
+`Stale Worktree`. Sidebar pills use the `custom` `StatusPill` tone so the
+sidebar status config fully owns the background, border, and text colors.
diff --git a/src/lib/components/atoms/status-pill.tsx b/src/lib/components/atoms/status-pill.tsx
index 7154bbc..ef3fca5 100644
--- a/src/lib/components/atoms/status-pill.tsx
+++ b/src/lib/components/atoms/status-pill.tsx
@@ -5,6 +5,7 @@ import { cn } from "@/lib/utils/cn";
 type StatusPillTone =
     | "branch"
     | "busy"
+    | "custom"
     | "error"
     | "idle"
     | "pull-request"
@@ -18,6 +19,7 @@ type StatusPillProps = ComponentPropsWithoutRef<"span"> & {
 const statusPillClassName: Record<StatusPillTone, string> = {
     branch: "border-border bg-muted/35 text-muted-foreground",
     busy: "border-success/25 bg-success/12 text-success-foreground",
+    custom: "",
     error: "border-danger/25 bg-danger/12 text-danger-foreground",
     idle: "border-border bg-muted/25 text-muted-foreground",
     "pull-request":
diff --git a/src/lib/components/templates/sidebar/sidebar-branch-item.tsx b/src/lib/components/templates/sidebar/sidebar-branch-item.tsx
index 3f0c82b..9226b9e 100644
--- a/src/lib/components/templates/sidebar/sidebar-branch-item.tsx
+++ b/src/lib/components/templates/sidebar/sidebar-branch-item.tsx
@@ -4,6 +4,7 @@ import { Button } from "@/lib/components/atoms/button";
 import { StatusPill } from "@/lib/components/atoms/status-pill";
 import { formatBranchAge } from "@/lib/format";
 import { SidebarItemIcon } from "@/lib/components/templates/sidebar/sidebar-item-icon";
+import { getSidebarItemStatus } from "@/lib/components/templates/sidebar/sidebar-item-status";
 import { cn } from "@/lib/utils/cn";
 import type { BranchInfo } from "@/types/pr-run";
 
@@ -22,7 +23,7 @@ export function SidebarBranchItem({
     onRemoveWorktree,
     onSelectBranch,
 }: SidebarBranchItemProps) {
-    const status = getBranchStatus(branch);
+    const status = getSidebarItemStatus(branch);
 
     return (
         <div
@@ -57,7 +58,9 @@ export function SidebarBranchItem({
                     className="ml-auto flex shrink-0 items-center justify-end
                         gap-0 text-right"
                 >
-                    <StatusPill tone={status.tone}>{status.label}</StatusPill>
+                    <StatusPill className={status.pillClassName} tone="custom">
+                        {status.label}
+                    </StatusPill>
                     <span
                         className="text-muted-foreground/70 min-w-5 shrink-0
                             text-right text-[10px] leading-4 tabular-nums"
@@ -100,26 +103,3 @@ export function SidebarBranchItem({
         </div>
     );
 }
-
-function getBranchStatus(branch: BranchInfo): {
-    label: string;
-    tone: "branch" | "pull-request" | "stale" | "worktree";
-} {
-    if (branch.hasWorktree && branch.isStale) {
-        return { label: "Stale Worktree", tone: "stale" };
-    }
-
-    if (branch.hasWorktree) {
-        return { label: "Worktree", tone: "worktree" };
-    }
-
-    if (branch.isStale) {
-        return { label: "Stale", tone: "stale" };
-    }
-
-    if (branch.source === "pull-request") {
-        return { label: "PR", tone: "pull-request" };
-    }
-
-    return { label: "Branch", tone: "branch" };
-}
diff --git a/src/lib/components/templates/sidebar/sidebar-item-icon.tsx b/src/lib/components/templates/sidebar/sidebar-item-icon.tsx
index addfd18..139a315 100644
--- a/src/lib/components/templates/sidebar/sidebar-item-icon.tsx
+++ b/src/lib/components/templates/sidebar/sidebar-item-icon.tsx
@@ -1,5 +1,6 @@
 import { GitBranch, GitPullRequest } from "lucide-react";
 
+import { getSidebarItemStatus } from "@/lib/components/templates/sidebar/sidebar-item-status";
 import type { BranchInfo } from "@/types/pr-run";
 
 type SidebarItemIconProps = {
@@ -7,17 +8,13 @@ type SidebarItemIconProps = {
 };
 
 export function SidebarItemIcon({ branch }: SidebarItemIconProps) {
+    const status = getSidebarItemStatus(branch);
+
     return (
         <span
             className={[
                 "grid h-5 w-5 flex-none place-items-center rounded-md",
-                branch.isStale
-                    ? "bg-warning/15 text-warning-foreground"
-                    : branch.hasWorktree
-                      ? "bg-success/15 text-success"
-                      : branch.source === "pull-request"
-                        ? "bg-blue-500/20 text-blue-600 dark:text-blue-300"
-                      : "bg-muted/45 text-muted-foreground/75",
+                status.iconClassName,
             ].join(" ")}
         >
             {branch.source === "pull-request" ? (
diff --git a/src/lib/components/templates/sidebar/sidebar-item-status.ts b/src/lib/components/templates/sidebar/sidebar-item-status.ts
new file mode 100644
index 0000000..9cee80f
--- /dev/null
+++ b/src/lib/components/templates/sidebar/sidebar-item-status.ts
@@ -0,0 +1,74 @@
+import type { BranchInfo } from "@/types/pr-run";
+
+export type SidebarItemStatus =
+    | "stale-worktree"
+    | "worktree"
+    | "stale"
+    | "pull-request"
+    | "branch";
+
+type SidebarItemStatusConfig = {
+    iconClassName: string;
+    label: string;
+    pillClassName: string;
+    status: SidebarItemStatus;
+};
+
+const sidebarItemStatusConfigs: Record<
+    SidebarItemStatus,
+    SidebarItemStatusConfig
+> = {
+    "stale-worktree": {
+        iconClassName: "bg-danger/15 text-danger-foreground",
+        label: "Stale Worktree",
+        pillClassName: "border-danger/25 bg-danger/15 text-danger-foreground",
+        status: "stale-worktree",
+    },
+    worktree: {
+        iconClassName: "bg-success/15 text-success",
+        label: "Worktree",
+        pillClassName:
+            "border-success/25 bg-success/10 text-success-foreground",
+        status: "worktree",
+    },
+    stale: {
+        iconClassName: "bg-warning/15 text-warning-foreground",
+        label: "Stale",
+        pillClassName:
+            "border-warning/25 bg-warning/10 text-warning-foreground",
+        status: "stale",
+    },
+    "pull-request": {
+        iconClassName: "bg-blue-500/20 text-blue-600 dark:text-blue-300",
+        label: "PR",
+        pillClassName:
+            "border-blue-500/25 bg-blue-500/10 text-blue-700 dark:text-blue-300",
+        status: "pull-request",
+    },
+    branch: {
+        iconClassName: "bg-muted/45 text-muted-foreground/75",
+        label: "Branch",
+        pillClassName: "border-border bg-muted/35 text-muted-foreground",
+        status: "branch",
+    },
+};
+
+export function getSidebarItemStatus(branch: BranchInfo) {
+    if (branch.hasWorktree && branch.isStale) {
+        return sidebarItemStatusConfigs["stale-worktree"];
+    }
+
+    if (branch.hasWorktree) {
+        return sidebarItemStatusConfigs.worktree;
+    }
+
+    if (branch.isStale) {
+        return sidebarItemStatusConfigs.stale;
+    }
+
+    if (branch.source === "pull-request") {
+        return sidebarItemStatusConfigs["pull-request"];
+    }
+
+    return sidebarItemStatusConfigs.branch;
+}

From dc7b1d9665bd72e8907b74b1b158838f0f25c826 Mon Sep 17 00:00:00 2001
From: felipe-software <codercastor@gmail.com>
Date: Tue, 23 Jun 2026 13:59:50 -0300
Subject: [PATCH 3/6] style: better overlay buttons

---
 .../templates/branch-scripts-section.tsx      | 75 +++++++++++++------
 .../components/templates/pr-run-app/index.tsx |  2 +
 .../pr-run-app/use-pr-run-app-state.ts        |  3 +
 .../components/templates/sidebar/index.tsx    |  4 +
 .../templates/sidebar/sidebar-branch-item.tsx | 64 ++++++++++++----
 .../sidebar/sidebar-group-section.tsx         |  8 ++
 .../sidebar/sidebar-project-item.tsx          | 36 +++++++--
 src/lib/components/templates/sidebar/types.ts |  2 +
 8 files changed, 150 insertions(+), 44 deletions(-)

diff --git a/src/lib/components/templates/branch-scripts-section.tsx b/src/lib/components/templates/branch-scripts-section.tsx
index 2d2f4d1..2cd6999 100644
--- a/src/lib/components/templates/branch-scripts-section.tsx
+++ b/src/lib/components/templates/branch-scripts-section.tsx
@@ -12,6 +12,7 @@ import { useOpenScriptMutation } from "@/lib/hooks/query/use-open-script-mutatio
 import { useRunScriptMutation } from "@/lib/hooks/query/use-run-script-mutation";
 import { useScriptsQuery } from "@/lib/hooks/query/use-scripts-query";
 import { getErrorMessage } from "@/lib/utils/get-error-message";
+import { cn } from "@/lib/utils/cn";
 import type { ScriptInfo } from "@/types/pr-run";
 
 type BranchScriptsSectionProps = {
@@ -127,6 +128,7 @@ export function BranchScriptsSection({
                             const isDeleting =
                                 deleteScriptMutation.isPending &&
                                 deleteScriptMutation.variables === script.id;
+                            const isActionVisible = isDeleting;
 
                             return (
                                 <div
@@ -138,8 +140,8 @@ export function BranchScriptsSection({
                                         className="hover:bg-muted/30
                                             disabled:text-muted-foreground h-8
                                             max-w-64 cursor-pointer
-                                            justify-start gap-1.5 pr-[58px]
-                                            text-left transition
+                                            justify-start gap-1.5 text-left
+                                            transition
                                             disabled:cursor-not-allowed
                                             disabled:opacity-60"
                                         disabled={
@@ -147,25 +149,52 @@ export function BranchScriptsSection({
                                             isPreparing
                                         }
                                         type="button"
-                                        onClick={() => void runScript(script)}
+                                        onClick={() => {
+                                            runScript(script);
+                                        }}
                                     >
-                                        <Play className="h-3.5 w-3.5 shrink-0" />
-                                        <span className="truncate">
-                                            {isPreparing
-                                                ? "Preparing..."
-                                                : script.title}
+                                        <span
+                                            className="flex min-w-0 items-center
+                                                gap-1.5"
+                                        >
+                                            <Play
+                                                className="h-3.5 w-3.5 shrink-0"
+                                            />
+                                            <span className="truncate">
+                                                {isPreparing
+                                                    ? "Preparing..."
+                                                    : script.title}
+                                            </span>
+                                        </span>
+                                        <span
+                                            aria-hidden
+                                            className={cn(
+                                                `block h-full w-14 shrink-0
+                                                    transition-opacity
+                                                    duration-150
+                                                    group-focus-within:opacity-0
+                                                    group-hover:opacity-0`,
+                                                isActionVisible && "opacity-0",
+                                            )}
+                                        >
+                                            &nbsp;
                                         </span>
                                     </Chip>
                                     <div
-                                        className="pointer-events-none absolute
-                                            top-1/2 right-1 z-10 flex
-                                            -translate-y-1/2 items-center gap-1
-                                            opacity-0 transition-opacity
-                                            duration-150
-                                            group-focus-within:pointer-events-auto
-                                            group-focus-within:opacity-100
-                                            group-hover:pointer-events-auto
-                                            group-hover:opacity-100"
+                                        className={cn(
+                                            `pointer-events-none absolute
+                                                top-1/2 right-1 z-10 flex
+                                                -translate-y-1/2 items-center
+                                                gap-1 opacity-0
+                                                transition-opacity duration-150
+                                                group-focus-within:pointer-events-auto
+                                                group-focus-within:opacity-100
+                                                group-hover:pointer-events-auto
+                                                group-hover:opacity-100`,
+                                            isActionVisible &&
+                                                `pointer-events-auto
+                                                    opacity-100`,
+                                        )}
                                     >
                                         <Button
                                             aria-label={`Edit ${script.title}`}
@@ -173,9 +202,9 @@ export function BranchScriptsSection({
                                             size="icon-xs"
                                             type="button"
                                             variant="outline"
-                                            onPress={() =>
-                                                void editScript(script)
-                                            }
+                                            onPress={() => {
+                                                editScript(script);
+                                            }}
                                         >
                                             <Pencil className="h-3.5 w-3.5" />
                                         </Button>
@@ -227,9 +256,9 @@ export function BranchScriptsSection({
                                 isDisabled={deleteScriptMutation.isPending}
                                 type="button"
                                 variant="danger"
-                                onPress={() =>
-                                    void deleteScript(scriptPendingDelete)
-                                }
+                                onPress={() => {
+                                    deleteScript(scriptPendingDelete);
+                                }}
                             >
                                 <Trash2 className="h-4 w-4" />
                                 {deleteScriptMutation.isPending
diff --git a/src/lib/components/templates/pr-run-app/index.tsx b/src/lib/components/templates/pr-run-app/index.tsx
index 10c9c59..d86ef19 100644
--- a/src/lib/components/templates/pr-run-app/index.tsx
+++ b/src/lib/components/templates/pr-run-app/index.tsx
@@ -60,6 +60,7 @@ export function PrRunApp() {
                 groups={state.groups}
                 isCreatingScript={state.isCreatingScript}
                 pendingProjectUpdateId={state.pendingProjectUpdateId}
+                pendingWorktreeCheckoutKey={state.pendingWorktreeCheckoutKey}
                 pendingWorktreeRemovalKey={state.pendingWorktreeRemovalKey}
                 selectedBranchName={
                     state.selectedBranchView.branchName ?? undefined
@@ -69,6 +70,7 @@ export function PrRunApp() {
                 theme={state.theme}
                 onAddProject={state.openAddProject}
                 onBeginResize={state.beginResize}
+                onCheckoutBranch={state.checkoutBranch}
                 onCreateScript={state.openCreateScript}
                 onOpenSshPassphrase={state.openSshPassphrase}
                 onRemoveWorktree={state.removeWorktree}
diff --git a/src/lib/components/templates/pr-run-app/use-pr-run-app-state.ts b/src/lib/components/templates/pr-run-app/use-pr-run-app-state.ts
index 975ef11..7ce08e7 100644
--- a/src/lib/components/templates/pr-run-app/use-pr-run-app-state.ts
+++ b/src/lib/components/templates/pr-run-app/use-pr-run-app-state.ts
@@ -306,6 +306,9 @@ export function usePrRunAppState() {
         pendingProjectUpdateId: updateProjectWorktreesMutation.isPending
             ? updateProjectWorktreesMutation.variables
             : undefined,
+        pendingWorktreeCheckoutKey: checkoutBranchMutation.isPending
+            ? `${checkoutBranchMutation.variables?.projectId}:${checkoutBranchMutation.variables?.branchName}`
+            : undefined,
         pendingWorktreeRemovalKey: removeWorktreeMutation.isPending
             ? `${removeWorktreeMutation.variables?.projectId}:${removeWorktreeMutation.variables?.branchName}`
             : undefined,
diff --git a/src/lib/components/templates/sidebar/index.tsx b/src/lib/components/templates/sidebar/index.tsx
index f9d9c51..f799f27 100644
--- a/src/lib/components/templates/sidebar/index.tsx
+++ b/src/lib/components/templates/sidebar/index.tsx
@@ -11,6 +11,7 @@ export function Sidebar({
     groups,
     isCreatingScript,
     pendingProjectUpdateId,
+    pendingWorktreeCheckoutKey,
     pendingWorktreeRemovalKey,
     selectedBranchName,
     selectedProjectId,
@@ -18,6 +19,7 @@ export function Sidebar({
     theme,
     onAddProject,
     onBeginResize,
+    onCheckoutBranch,
     onCreateScript,
     onOpenSshPassphrase,
     onRemoveWorktree,
@@ -46,9 +48,11 @@ export function Sidebar({
                         isExpanded={expandedGroups.has(group.id)}
                         key={group.id}
                         pendingProjectUpdateId={pendingProjectUpdateId}
+                        pendingWorktreeCheckoutKey={pendingWorktreeCheckoutKey}
                         pendingWorktreeRemovalKey={pendingWorktreeRemovalKey}
                         selectedBranchName={selectedBranchName}
                         selectedProjectId={selectedProjectId}
+                        onCheckoutBranch={onCheckoutBranch}
                         onRemoveWorktree={onRemoveWorktree}
                         onSelectBranch={onSelectBranch}
                         onToggleGroup={onToggleGroup}
diff --git a/src/lib/components/templates/sidebar/sidebar-branch-item.tsx b/src/lib/components/templates/sidebar/sidebar-branch-item.tsx
index 9226b9e..5bddc76 100644
--- a/src/lib/components/templates/sidebar/sidebar-branch-item.tsx
+++ b/src/lib/components/templates/sidebar/sidebar-branch-item.tsx
@@ -1,4 +1,4 @@
-import { RefreshCw, Trash2 } from "lucide-react";
+import { FolderPlus, RefreshCw, Trash2 } from "lucide-react";
 
 import { Button } from "@/lib/components/atoms/button";
 import { StatusPill } from "@/lib/components/atoms/status-pill";
@@ -10,20 +10,25 @@ import type { BranchInfo } from "@/types/pr-run";
 
 type SidebarBranchItemProps = {
     branch: BranchInfo;
+    isCheckingOutWorktree: boolean;
     isRemovingWorktree: boolean;
     isSelected: boolean;
+    onCheckoutBranch: (branchName: string) => Promise<void>;
     onRemoveWorktree: (branchName: string) => Promise<void>;
     onSelectBranch: (branchName: string) => void;
 };
 
 export function SidebarBranchItem({
     branch,
+    isCheckingOutWorktree,
     isRemovingWorktree,
     isSelected,
+    onCheckoutBranch,
     onRemoveWorktree,
     onSelectBranch,
 }: SidebarBranchItemProps) {
     const status = getSidebarItemStatus(branch);
+    const isActionPending = isCheckingOutWorktree || isRemovingWorktree;
 
     return (
         <div
@@ -62,22 +67,32 @@ export function SidebarBranchItem({
                         {status.label}
                     </StatusPill>
                     <span
-                        className="text-muted-foreground/70 min-w-5 shrink-0
-                            text-right text-[10px] leading-4 tabular-nums"
+                        className={cn(
+                            `text-muted-foreground/70 pointer-events-none w-7
+                            shrink-0 text-right text-[10px] leading-4
+                            tabular-nums transition-opacity duration-150
+                            group-focus-within/menu-sub-item:opacity-0
+                            group-hover/menu-sub-item:opacity-0`,
+                            isActionPending && "opacity-0",
+                        )}
                     >
                         {formatBranchAge(branch.lastCommitTimestamp)}
                     </span>
                 </span>
             </button>
-            {branch.hasWorktree ? (
-                <div
-                    className="bg-sidebar/80 pointer-events-none absolute
-                        inset-y-0 right-0 flex items-center rounded-r-md px-1
-                        opacity-0 backdrop-blur-md transition-opacity
-                        duration-150
-                        group-[&:is(:hover,:focus-within)]/menu-sub-item:pointer-events-auto
-                        group-[&:is(:hover,:focus-within)]/menu-sub-item:opacity-100"
-                >
+            <div
+                className={cn(
+                    `pointer-events-none absolute inset-y-0 right-0 flex w-7
+                    items-center justify-center opacity-0 transition-opacity
+                    duration-150
+                    group-focus-within/menu-sub-item:pointer-events-auto
+                    group-focus-within/menu-sub-item:opacity-100
+                    group-hover/menu-sub-item:pointer-events-auto
+                    group-hover/menu-sub-item:opacity-100`,
+                    isActionPending && "pointer-events-auto opacity-100",
+                )}
+            >
+                {branch.hasWorktree ? (
                     <Button
                         aria-label={`Remove ${branch.name} worktree`}
                         className="text-danger-foreground
@@ -98,8 +113,29 @@ export function SidebarBranchItem({
                             <Trash2 className="h-3.5 w-3.5" />
                         )}
                     </Button>
-                </div>
-            ) : null}
+                ) : (
+                    <Button
+                        aria-label={`Create ${branch.name} worktree`}
+                        className="text-danger-foreground
+                            data-[hover=true]:bg-sidebar-accent
+                            border-transparent bg-transparent shadow-none"
+                        isDisabled={isCheckingOutWorktree}
+                        isIconOnly
+                        size="icon-xs"
+                        type="button"
+                        variant="ghost"
+                        onPress={() => {
+                            onCheckoutBranch(branch.name);
+                        }}
+                    >
+                        {isCheckingOutWorktree ? (
+                            <RefreshCw className="h-3.5 w-3.5 animate-spin" />
+                        ) : (
+                            <FolderPlus className="h-3.5 w-3.5" />
+                        )}
+                    </Button>
+                )}
+            </div>
         </div>
     );
 }
diff --git a/src/lib/components/templates/sidebar/sidebar-group-section.tsx b/src/lib/components/templates/sidebar/sidebar-group-section.tsx
index 4b84b89..8fe716a 100644
--- a/src/lib/components/templates/sidebar/sidebar-group-section.tsx
+++ b/src/lib/components/templates/sidebar/sidebar-group-section.tsx
@@ -8,9 +8,11 @@ type SidebarGroupSectionProps = Pick<
     SidebarProps,
     | "collapsedProjects"
     | "pendingProjectUpdateId"
+    | "pendingWorktreeCheckoutKey"
     | "pendingWorktreeRemovalKey"
     | "selectedBranchName"
     | "selectedProjectId"
+    | "onCheckoutBranch"
     | "onRemoveWorktree"
     | "onSelectBranch"
     | "onToggleGroup"
@@ -26,9 +28,11 @@ export function SidebarGroupSection({
     group,
     isExpanded,
     pendingProjectUpdateId,
+    pendingWorktreeCheckoutKey,
     pendingWorktreeRemovalKey,
     selectedBranchName,
     selectedProjectId,
+    onCheckoutBranch,
     onRemoveWorktree,
     onSelectBranch,
     onToggleGroup,
@@ -64,12 +68,16 @@ export function SidebarGroupSection({
                             pendingWorktreeRemovalKey={
                                 pendingWorktreeRemovalKey
                             }
+                            pendingWorktreeCheckoutKey={
+                                pendingWorktreeCheckoutKey
+                            }
                             project={project}
                             selectedBranchName={
                                 selectedProjectId === project.id
                                     ? selectedBranchName
                                     : undefined
                             }
+                            onCheckoutBranch={onCheckoutBranch}
                             onRemoveWorktree={onRemoveWorktree}
                             onSelectBranch={onSelectBranch}
                             onToggleProject={onToggleProject}
diff --git a/src/lib/components/templates/sidebar/sidebar-project-item.tsx b/src/lib/components/templates/sidebar/sidebar-project-item.tsx
index 20abd8f..fc94fbf 100644
--- a/src/lib/components/templates/sidebar/sidebar-project-item.tsx
+++ b/src/lib/components/templates/sidebar/sidebar-project-item.tsx
@@ -17,9 +17,11 @@ type SidebarProjectItemProps = {
     isExpanded: boolean;
     isSelected: boolean;
     isUpdatingProject: boolean;
+    pendingWorktreeCheckoutKey?: string;
     pendingWorktreeRemovalKey?: string;
     project: ProjectConfig;
     selectedBranchName?: string;
+    onCheckoutBranch: (projectId: string, branchName: string) => Promise<void>;
     onRemoveWorktree: (projectId: string, branchName: string) => Promise<void>;
     onSelectBranch: (projectId: string, branchName: string) => void;
     onToggleProject: (projectId: string) => void;
@@ -32,9 +34,11 @@ export function SidebarProjectItem({
     isExpanded,
     isSelected,
     isUpdatingProject,
+    pendingWorktreeCheckoutKey,
     pendingWorktreeRemovalKey,
     project,
     selectedBranchName,
+    onCheckoutBranch,
     onRemoveWorktree,
     onSelectBranch,
     onToggleProject,
@@ -84,6 +88,7 @@ export function SidebarProjectItem({
                 branchesQuery.refetch().then(() => undefined),
             );
     }, [branchesQuery, isAwaitingSshPassphrase]);
+    const isActionVisible = isUpdatingProject;
 
     return (
         <div className="group/menu-item relative">
@@ -131,20 +136,30 @@ export function SidebarProjectItem({
                             {project.name}
                         </span>
                         <span
-                            className="text-muted-foreground/65 block truncate
-                                text-[10px] leading-4"
+                            className={cn(
+                                `text-muted-foreground/65 pointer-events-none
+                                block truncate text-[10px] leading-4
+                                transition-opacity duration-150
+                                group-focus-within/menu-item:opacity-0
+                                group-hover/menu-item:opacity-0`,
+                                isActionVisible && "opacity-0",
+                            )}
                         >
                             {shortenPath(project.path)}
                         </span>
                     </div>
                 </button>
                 <div
-                    className="bg-sidebar/80 pointer-events-none absolute
-                        inset-y-0 right-0 flex items-center rounded-r-md px-1
-                        opacity-0 backdrop-blur-md transition-opacity
+                    className={cn(
+                        `pointer-events-none absolute inset-y-0 right-0 flex
+                        items-center px-1 opacity-0 transition-opacity
                         duration-150
-                        group-[&:is(:hover,:focus-within)]/menu-item:pointer-events-auto
-                        group-[&:is(:hover,:focus-within)]/menu-item:opacity-100"
+                        group-focus-within/menu-item:pointer-events-auto
+                        group-focus-within/menu-item:opacity-100
+                        group-hover/menu-item:pointer-events-auto
+                        group-hover/menu-item:opacity-100`,
+                        isActionVisible && "pointer-events-auto opacity-100",
+                    )}
                 >
                     <Button
                         aria-label={`Reload ${project.name} worktrees`}
@@ -219,12 +234,19 @@ export function SidebarProjectItem({
                     {visibleBranches.map((branch) => (
                         <SidebarBranchItem
                             branch={branch}
+                            isCheckingOutWorktree={
+                                pendingWorktreeCheckoutKey ===
+                                `${project.id}:${branch.name}`
+                            }
                             isRemovingWorktree={
                                 pendingWorktreeRemovalKey ===
                                 `${project.id}:${branch.name}`
                             }
                             isSelected={selectedBranchName === branch.name}
                             key={branch.remoteName}
+                            onCheckoutBranch={(branchName) =>
+                                onCheckoutBranch(project.id, branchName)
+                            }
                             onRemoveWorktree={(branchName) =>
                                 onRemoveWorktree(project.id, branchName)
                             }
diff --git a/src/lib/components/templates/sidebar/types.ts b/src/lib/components/templates/sidebar/types.ts
index 7e289fb..ac0ad51 100644
--- a/src/lib/components/templates/sidebar/types.ts
+++ b/src/lib/components/templates/sidebar/types.ts
@@ -6,6 +6,7 @@ export type SidebarProps = {
     groups: ProjectGroup[];
     isCreatingScript: boolean;
     pendingProjectUpdateId?: string;
+    pendingWorktreeCheckoutKey?: string;
     pendingWorktreeRemovalKey?: string;
     selectedBranchName?: string;
     selectedProjectId?: string;
@@ -14,6 +15,7 @@ export type SidebarProps = {
     onAddProject: () => void;
     onBeginResize: () => void;
     onCreateScript: () => void;
+    onCheckoutBranch: (projectId: string, branchName: string) => Promise<void>;
     onOpenSshPassphrase: () => void;
     onRemoveWorktree: (projectId: string, branchName: string) => Promise<void>;
     onSelectBranch: (projectId: string, branchName: string) => void;

From dea10c7cd2fcd98e8b6ce94b596877efe49e2158 Mon Sep 17 00:00:00 2001
From: felipe-software <codercastor@gmail.com>
Date: Tue, 23 Jun 2026 14:11:23 -0300
Subject: [PATCH 4/6] feat: base status bar

---
 src/lib/components/atoms/busy-dot.tsx         |  21 +++
 .../main-panel/branch-empty-state.tsx         |   2 +-
 .../components/templates/main-panel/index.tsx |   2 +-
 .../components/templates/pr-run-app/index.tsx |  22 +--
 .../pr-run-app/use-app-status-summary.ts      |  72 ++++++++++
 .../pr-run-app/use-pr-run-app-state.ts        |   3 +
 .../components/templates/sidebar/index.tsx    |   4 +
 .../templates/sidebar/sidebar-branch-item.tsx |   4 +
 .../sidebar/sidebar-group-section.tsx         |  14 +-
 .../sidebar/sidebar-project-item.tsx          |  49 ++++---
 .../templates/sidebar/sidebar-shell.tsx       |   2 +-
 .../templates/sidebar/sidebar-sort.test.ts    | 134 ++++++++++++++++++
 .../templates/sidebar/sidebar-sort.ts         |  70 +++++++++
 src/lib/components/templates/sidebar/types.ts |   2 +
 src/lib/components/templates/status-bar.tsx   | 119 ++++++++++++++++
 .../store/use-worktree-terminal-store.test.ts |  66 +++++++++
 .../store/use-worktree-terminal-store.ts      |  39 +++++
 17 files changed, 596 insertions(+), 29 deletions(-)
 create mode 100644 src/lib/components/atoms/busy-dot.tsx
 create mode 100644 src/lib/components/templates/pr-run-app/use-app-status-summary.ts
 create mode 100644 src/lib/components/templates/sidebar/sidebar-sort.test.ts
 create mode 100644 src/lib/components/templates/sidebar/sidebar-sort.ts
 create mode 100644 src/lib/components/templates/status-bar.tsx

diff --git a/src/lib/components/atoms/busy-dot.tsx b/src/lib/components/atoms/busy-dot.tsx
new file mode 100644
index 0000000..5bcc523
--- /dev/null
+++ b/src/lib/components/atoms/busy-dot.tsx
@@ -0,0 +1,21 @@
+import type { ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/utils/cn";
+
+type BusyDotProps = ComponentPropsWithoutRef<"span">;
+
+export function BusyDot({ className, ...props }: BusyDotProps) {
+    return (
+        <span
+            aria-label="Busy terminal"
+            className={cn(
+                `bg-success ring-success/20 inline-block h-2 w-2 shrink-0
+                rounded-full ring-2`,
+                className,
+            )}
+            role="status"
+            title="Busy terminal"
+            {...props}
+        />
+    );
+}
diff --git a/src/lib/components/templates/main-panel/branch-empty-state.tsx b/src/lib/components/templates/main-panel/branch-empty-state.tsx
index 5de3df8..1658070 100644
--- a/src/lib/components/templates/main-panel/branch-empty-state.tsx
+++ b/src/lib/components/templates/main-panel/branch-empty-state.tsx
@@ -5,7 +5,7 @@ import { EmptyState } from "@/lib/components/atoms/empty-state";
 export function BranchEmptyState() {
     return (
         <main
-            className="bg-background flex h-dvh min-h-0 flex-1 overflow-y-auto"
+            className="bg-background flex h-full min-h-0 flex-1 overflow-y-auto"
         >
             <EmptyState
                 description="Pick a project in the sidebar and choose a remote branch to inspect commits, scripts, and diffs."
diff --git a/src/lib/components/templates/main-panel/index.tsx b/src/lib/components/templates/main-panel/index.tsx
index 499989c..eb5704f 100644
--- a/src/lib/components/templates/main-panel/index.tsx
+++ b/src/lib/components/templates/main-panel/index.tsx
@@ -175,7 +175,7 @@ export function MainPanel({
 
     return (
         <main
-            className="bg-background flex h-dvh min-h-0 flex-1 overflow-hidden
+            className="bg-background flex h-full min-h-0 flex-1 overflow-hidden
                 px-3 py-3 max-[900px]:px-2 max-[500px]:overflow-y-auto"
         >
             <div
diff --git a/src/lib/components/templates/pr-run-app/index.tsx b/src/lib/components/templates/pr-run-app/index.tsx
index d86ef19..13d0ffc 100644
--- a/src/lib/components/templates/pr-run-app/index.tsx
+++ b/src/lib/components/templates/pr-run-app/index.tsx
@@ -8,6 +8,7 @@ import { CreateScriptDialog } from "@/lib/components/templates/create-script-dia
 import { MainPanel } from "@/lib/components/templates/main-panel";
 import { Sidebar } from "@/lib/components/templates/sidebar";
 import { SshPassphraseDialog } from "@/lib/components/templates/ssh-passphrase-dialog";
+import { StatusBar } from "@/lib/components/templates/status-bar";
 import { usePrRunAppState } from "@/lib/components/templates/pr-run-app/use-pr-run-app-state";
 
 export function PrRunApp() {
@@ -55,6 +56,8 @@ export function PrRunApp() {
             variant="plain"
         >
             <Sidebar
+                busyOwnerKeys={state.statusSummary.busyOwnerKeys}
+                busyProjectIds={state.statusSummary.busyProjectIds}
                 expandedGroups={state.expandedGroups}
                 collapsedProjects={state.collapsedProjects}
                 groups={state.groups}
@@ -84,14 +87,17 @@ export function PrRunApp() {
                 }
                 onUpdateProject={state.updateProject}
             />
-            <MainPanel
-                actionError={state.actionError}
-                branchName={state.selectedBranchView.branchName}
-                isCheckingOutWorktree={state.isCheckingOutWorktree}
-                project={state.selectedBranchView.project}
-                onCheckoutBranch={state.checkoutBranch}
-                onCreateScript={state.openCreateScript}
-            />
+            <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
+                <MainPanel
+                    actionError={state.actionError}
+                    branchName={state.selectedBranchView.branchName}
+                    isCheckingOutWorktree={state.isCheckingOutWorktree}
+                    project={state.selectedBranchView.project}
+                    onCheckoutBranch={state.checkoutBranch}
+                    onCreateScript={state.openCreateScript}
+                />
+                <StatusBar summary={state.statusSummary} />
+            </div>
             <AddProjectDialog
                 error={state.addProjectError}
                 isOpen={state.isAddProjectOpen}
diff --git a/src/lib/components/templates/pr-run-app/use-app-status-summary.ts b/src/lib/components/templates/pr-run-app/use-app-status-summary.ts
new file mode 100644
index 0000000..8f7b2b0
--- /dev/null
+++ b/src/lib/components/templates/pr-run-app/use-app-status-summary.ts
@@ -0,0 +1,72 @@
+import { useQueries } from "@tanstack/react-query";
+import { useMemo } from "react";
+
+import { projectBranchesQueryOptions } from "@/lib/hooks/query/use-project-branches-query";
+import {
+    getBusyTerminalSummary,
+    useWorktreeTerminalStore,
+} from "@/lib/hooks/store/use-worktree-terminal-store";
+import type { ProjectConfig } from "@/types/pr-run";
+
+export type AppStatusSummary = {
+    branchCount: number;
+    busyOwnerKeys: Set<string>;
+    busyProjectIds: Set<string>;
+    busyTerminalCount: number;
+    isLoadingBranchCounts: boolean;
+    openPullRequestCount: number;
+    staleWorktreeCount: number;
+    worktreeCount: number;
+};
+
+export function useAppStatusSummary(
+    projects: ProjectConfig[],
+): AppStatusSummary {
+    const owners = useWorktreeTerminalStore((state) => state.owners);
+    const branchQueries = useQueries({
+        queries: projects.map((project) => ({
+            ...projectBranchesQueryOptions(project.id),
+            enabled: projects.length > 0,
+        })),
+    });
+
+    const busySummary = useMemo(() => getBusyTerminalSummary(owners), [owners]);
+
+    return useMemo(() => {
+        let branchCount = 0;
+        let openPullRequestCount = 0;
+        let staleWorktreeCount = 0;
+        let worktreeCount = 0;
+
+        for (const query of branchQueries) {
+            for (const branch of query.data ?? []) {
+                if (branch.source === "branch") {
+                    branchCount += 1;
+                }
+
+                if (branch.source === "pull-request") {
+                    openPullRequestCount += 1;
+                }
+
+                if (branch.hasWorktree) {
+                    worktreeCount += 1;
+                }
+
+                if (branch.hasWorktree && branch.isStale) {
+                    staleWorktreeCount += 1;
+                }
+            }
+        }
+
+        return {
+            ...busySummary,
+            branchCount,
+            isLoadingBranchCounts: branchQueries.some(
+                (query) => query.isPending,
+            ),
+            openPullRequestCount,
+            staleWorktreeCount,
+            worktreeCount,
+        };
+    }, [branchQueries, busySummary]);
+}
diff --git a/src/lib/components/templates/pr-run-app/use-pr-run-app-state.ts b/src/lib/components/templates/pr-run-app/use-pr-run-app-state.ts
index 7ce08e7..8215816 100644
--- a/src/lib/components/templates/pr-run-app/use-pr-run-app-state.ts
+++ b/src/lib/components/templates/pr-run-app/use-pr-run-app-state.ts
@@ -22,6 +22,7 @@ import type {
     SelectedBranchState,
     SelectedBranchView,
 } from "@/lib/components/templates/pr-run-app/types";
+import { useAppStatusSummary } from "@/lib/components/templates/pr-run-app/use-app-status-summary";
 
 const SIDEBAR_WIDTH_STORAGE_KEY = "pr-run.sidebar.width";
 const SIDEBAR_MIN_WIDTH = 256;
@@ -65,6 +66,7 @@ export function usePrRunAppState() {
         [groups],
     );
     usePreloadProjects(projects);
+    const statusSummary = useAppStatusSummary(projects);
     const selectedProject = useMemo(
         () =>
             projects.find(
@@ -314,6 +316,7 @@ export function usePrRunAppState() {
             : undefined,
         selectedBranchView,
         sidebarWidth,
+        statusSummary,
         theme,
         beginResize: () => setIsResizingSidebar(true),
         closeAddProject: () => setIsAddProjectOpen(false),
diff --git a/src/lib/components/templates/sidebar/index.tsx b/src/lib/components/templates/sidebar/index.tsx
index f799f27..4e68f88 100644
--- a/src/lib/components/templates/sidebar/index.tsx
+++ b/src/lib/components/templates/sidebar/index.tsx
@@ -6,6 +6,8 @@ import { SidebarShell } from "@/lib/components/templates/sidebar/sidebar-shell";
 import type { SidebarProps } from "@/lib/components/templates/sidebar/types";
 
 export function Sidebar({
+    busyOwnerKeys,
+    busyProjectIds,
     collapsedProjects,
     expandedGroups,
     groups,
@@ -43,6 +45,8 @@ export function Sidebar({
             <SidebarContent>
                 {groups.map((group) => (
                     <SidebarGroupSection
+                        busyOwnerKeys={busyOwnerKeys}
+                        busyProjectIds={busyProjectIds}
                         collapsedProjects={collapsedProjects}
                         group={group}
                         isExpanded={expandedGroups.has(group.id)}
diff --git a/src/lib/components/templates/sidebar/sidebar-branch-item.tsx b/src/lib/components/templates/sidebar/sidebar-branch-item.tsx
index 5bddc76..3c732a0 100644
--- a/src/lib/components/templates/sidebar/sidebar-branch-item.tsx
+++ b/src/lib/components/templates/sidebar/sidebar-branch-item.tsx
@@ -1,5 +1,6 @@
 import { FolderPlus, RefreshCw, Trash2 } from "lucide-react";
 
+import { BusyDot } from "@/lib/components/atoms/busy-dot";
 import { Button } from "@/lib/components/atoms/button";
 import { StatusPill } from "@/lib/components/atoms/status-pill";
 import { formatBranchAge } from "@/lib/format";
@@ -10,6 +11,7 @@ import type { BranchInfo } from "@/types/pr-run";
 
 type SidebarBranchItemProps = {
     branch: BranchInfo;
+    isBusy: boolean;
     isCheckingOutWorktree: boolean;
     isRemovingWorktree: boolean;
     isSelected: boolean;
@@ -20,6 +22,7 @@ type SidebarBranchItemProps = {
 
 export function SidebarBranchItem({
     branch,
+    isBusy,
     isCheckingOutWorktree,
     isRemovingWorktree,
     isSelected,
@@ -53,6 +56,7 @@ export function SidebarBranchItem({
                 onClick={() => onSelectBranch(branch.name)}
             >
                 <SidebarItemIcon branch={branch} />
+                {isBusy ? <BusyDot /> : null}
                 <span
                     className="min-w-0 flex-1 grow truncate text-[13px]
                         leading-4 tracking-tight"
diff --git a/src/lib/components/templates/sidebar/sidebar-group-section.tsx b/src/lib/components/templates/sidebar/sidebar-group-section.tsx
index 8fe716a..367b0e6 100644
--- a/src/lib/components/templates/sidebar/sidebar-group-section.tsx
+++ b/src/lib/components/templates/sidebar/sidebar-group-section.tsx
@@ -1,11 +1,14 @@
 import { SidebarEmptyState } from "@/lib/components/templates/sidebar/sidebar-empty-state";
 import { SidebarProjectItem } from "@/lib/components/templates/sidebar/sidebar-project-item";
+import { sortProjectsByBusyState } from "@/lib/components/templates/sidebar/sidebar-sort";
 import { SidebarSectionHeader } from "@/lib/components/templates/sidebar/sidebar-section-header";
 import type { SidebarProps } from "@/lib/components/templates/sidebar/types";
 import type { ProjectGroup } from "@/types/pr-run";
 
 type SidebarGroupSectionProps = Pick<
     SidebarProps,
+    | "busyOwnerKeys"
+    | "busyProjectIds"
     | "collapsedProjects"
     | "pendingProjectUpdateId"
     | "pendingWorktreeCheckoutKey"
@@ -24,6 +27,8 @@ type SidebarGroupSectionProps = Pick<
 };
 
 export function SidebarGroupSection({
+    busyOwnerKeys,
+    busyProjectIds,
     collapsedProjects,
     group,
     isExpanded,
@@ -39,6 +44,11 @@ export function SidebarGroupSection({
     onToggleProject,
     onUpdateProject,
 }: SidebarGroupSectionProps) {
+    const sortedProjects = sortProjectsByBusyState(
+        group.projects,
+        busyProjectIds,
+    );
+
     return (
         <section className="py-0.5">
             <SidebarSectionHeader
@@ -57,9 +67,11 @@ export function SidebarGroupSection({
                         </SidebarEmptyState>
                     ) : null}
 
-                    {group.projects.map((project) => (
+                    {sortedProjects.map((project) => (
                         <SidebarProjectItem
+                            busyOwnerKeys={busyOwnerKeys}
                             isExpanded={!collapsedProjects.has(project.id)}
+                            isBusy={busyProjectIds.has(project.id)}
                             isSelected={selectedProjectId === project.id}
                             isUpdatingProject={
                                 pendingProjectUpdateId === project.id
diff --git a/src/lib/components/templates/sidebar/sidebar-project-item.tsx b/src/lib/components/templates/sidebar/sidebar-project-item.tsx
index fc94fbf..97c6a00 100644
--- a/src/lib/components/templates/sidebar/sidebar-project-item.tsx
+++ b/src/lib/components/templates/sidebar/sidebar-project-item.tsx
@@ -2,19 +2,27 @@ import { ChevronDown, ChevronRight, Folder, RefreshCw } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
 
 import { isHandledSshPromptError } from "@/lib/api";
+import { BusyDot } from "@/lib/components/atoms/busy-dot";
 import { Button } from "@/lib/components/atoms/button";
 import { Skeleton } from "@/lib/components/atoms/skeleton";
 import { Surface } from "@/lib/components/atoms/surface";
 import { SidebarBranchItem } from "@/lib/components/templates/sidebar/sidebar-branch-item";
+import {
+    getVisibleSidebarBranches,
+    sortBranchesByLastCommit,
+} from "@/lib/components/templates/sidebar/sidebar-sort";
 import { useProjectBranchesQuery } from "@/lib/hooks/query/use-project-branches-query";
 import { useSshPassphraseStore } from "@/lib/hooks/store/use-ssh-passphrase-store";
+import { getWorktreeOwnerKey } from "@/lib/hooks/store/use-worktree-terminal-store";
 import { shortenPath } from "@/lib/format";
 import { cn } from "@/lib/utils/cn";
 import { getErrorMessage } from "@/lib/utils/get-error-message";
 import type { ProjectConfig } from "@/types/pr-run";
 
 type SidebarProjectItemProps = {
+    busyOwnerKeys: Set<string>;
     isExpanded: boolean;
+    isBusy: boolean;
     isSelected: boolean;
     isUpdatingProject: boolean;
     pendingWorktreeCheckoutKey?: string;
@@ -31,7 +39,9 @@ type SidebarProjectItemProps = {
 const INITIAL_VISIBLE_BRANCH_COUNT = 5;
 
 export function SidebarProjectItem({
+    busyOwnerKeys,
     isExpanded,
+    isBusy,
     isSelected,
     isUpdatingProject,
     pendingWorktreeCheckoutKey,
@@ -56,26 +66,27 @@ export function SidebarProjectItem({
         ? getErrorMessage(branchesQuery.error)
         : undefined;
     const sortedBranches = useMemo(
-        () =>
-            [...(branchesQuery.data ?? [])].sort(
-                (left, right) =>
-                    (right.lastCommitTimestamp ?? 0) -
-                    (left.lastCommitTimestamp ?? 0),
-            ),
+        () => sortBranchesByLastCommit(branchesQuery.data ?? []),
         [branchesQuery.data],
     );
-    const recentBranches = sortedBranches.filter((branch) => !branch.isStale);
-    const staleBranches = sortedBranches.filter((branch) => branch.isStale);
-    const hiddenRecentBranchCount = Math.max(
-        recentBranches.length - INITIAL_VISIBLE_BRANCH_COUNT,
-        0,
+    const { hiddenRecentBranchCount, staleBranches, visibleBranches } = useMemo(
+        () =>
+            getVisibleSidebarBranches({
+                areAllRecentBranchesVisible,
+                areStaleBranchesVisible,
+                branches: sortedBranches,
+                busyOwnerKeys,
+                initialVisibleBranchCount: INITIAL_VISIBLE_BRANCH_COUNT,
+                projectId: project.id,
+            }),
+        [
+            areAllRecentBranchesVisible,
+            areStaleBranchesVisible,
+            busyOwnerKeys,
+            project.id,
+            sortedBranches,
+        ],
     );
-    const visibleBranches = [
-        ...(areAllRecentBranchesVisible
-            ? recentBranches
-            : recentBranches.slice(0, INITIAL_VISIBLE_BRANCH_COUNT)),
-        ...(areStaleBranchesVisible ? staleBranches : []),
-    ];
 
     useEffect(() => {
         if (!isAwaitingSshPassphrase) {
@@ -128,6 +139,7 @@ export function SidebarProjectItem({
                         className="text-muted-foreground/70 ml-0.5 h-3.5 w-3.5
                             shrink-0"
                     />
+                    {isBusy ? <BusyDot /> : null}
                     <div className="ml-2 flex min-w-0 flex-1 justify-between">
                         <span
                             className="block truncate text-xs leading-4
@@ -234,6 +246,9 @@ export function SidebarProjectItem({
                     {visibleBranches.map((branch) => (
                         <SidebarBranchItem
                             branch={branch}
+                            isBusy={busyOwnerKeys.has(
+                                getWorktreeOwnerKey(project.id, branch.name),
+                            )}
                             isCheckingOutWorktree={
                                 pendingWorktreeCheckoutKey ===
                                 `${project.id}:${branch.name}`
diff --git a/src/lib/components/templates/sidebar/sidebar-shell.tsx b/src/lib/components/templates/sidebar/sidebar-shell.tsx
index 86c47d3..9300e13 100644
--- a/src/lib/components/templates/sidebar/sidebar-shell.tsx
+++ b/src/lib/components/templates/sidebar/sidebar-shell.tsx
@@ -9,7 +9,7 @@ export function SidebarShell({ children, sidebarWidth }: SidebarShellProps) {
     return (
         <aside
             className="border-sidebar-border bg-sidebar text-sidebar-foreground
-                relative flex h-dvh min-h-0 shrink-0 flex-col border-r
+                relative flex h-full min-h-0 shrink-0 flex-col border-r
                 shadow-sm/5"
             style={{ width: `${sidebarWidth}px` }}
         >
diff --git a/src/lib/components/templates/sidebar/sidebar-sort.test.ts b/src/lib/components/templates/sidebar/sidebar-sort.test.ts
new file mode 100644
index 0000000..650bd99
--- /dev/null
+++ b/src/lib/components/templates/sidebar/sidebar-sort.test.ts
@@ -0,0 +1,134 @@
+import { describe, expect, it } from "bun:test";
+
+import type { BranchInfo, ProjectConfig } from "@/types/pr-run";
+
+import {
+    getVisibleSidebarBranches,
+    sortBranchesByLastCommit,
+    sortProjectsByBusyState,
+} from "./sidebar-sort";
+
+describe("sortProjectsByBusyState", () => {
+    it("promotes busy projects without changing relative order", () => {
+        const projects = [
+            createProject("project-a"),
+            createProject("project-b"),
+            createProject("project-c"),
+            createProject("project-d"),
+        ];
+
+        expect(
+            sortProjectsByBusyState(
+                projects,
+                new Set(["project-b", "project-d"]),
+            ).map((project) => project.id),
+        ).toEqual(["project-b", "project-d", "project-a", "project-c"]);
+    });
+});
+
+describe("getVisibleSidebarBranches", () => {
+    it("promotes busy branches before recent branches", () => {
+        const branches = sortBranchesByLastCommit([
+            createBranch("recent", 300),
+            createBranch("busy", 100),
+            createBranch("older", 200),
+        ]);
+
+        const result = getVisibleSidebarBranches({
+            areAllRecentBranchesVisible: false,
+            areStaleBranchesVisible: false,
+            branches,
+            busyOwnerKeys: new Set(["project-one:busy"]),
+            initialVisibleBranchCount: 5,
+            projectId: "project-one",
+        });
+
+        expect(result.visibleBranches.map((branch) => branch.name)).toEqual([
+            "busy",
+            "recent",
+            "older",
+        ]);
+    });
+
+    it("shows busy stale branches even when stale branches are collapsed", () => {
+        const branches = sortBranchesByLastCommit([
+            createBranch("recent", 300),
+            createBranch("busy-stale", 100, { isStale: true }),
+            createBranch("stale", 200, { isStale: true }),
+        ]);
+
+        const result = getVisibleSidebarBranches({
+            areAllRecentBranchesVisible: false,
+            areStaleBranchesVisible: false,
+            branches,
+            busyOwnerKeys: new Set(["project-one:busy-stale"]),
+            initialVisibleBranchCount: 5,
+            projectId: "project-one",
+        });
+
+        expect(result.visibleBranches.map((branch) => branch.name)).toEqual([
+            "busy-stale",
+            "recent",
+        ]);
+        expect(result.staleBranches.map((branch) => branch.name)).toEqual([
+            "stale",
+        ]);
+    });
+
+    it("keeps non-busy stale branches hidden until stale branches are expanded", () => {
+        const branches = sortBranchesByLastCommit([
+            createBranch("recent", 300),
+            createBranch("stale", 200, { isStale: true }),
+        ]);
+
+        const collapsedResult = getVisibleSidebarBranches({
+            areAllRecentBranchesVisible: false,
+            areStaleBranchesVisible: false,
+            branches,
+            busyOwnerKeys: new Set(),
+            initialVisibleBranchCount: 5,
+            projectId: "project-one",
+        });
+        const expandedResult = getVisibleSidebarBranches({
+            areAllRecentBranchesVisible: false,
+            areStaleBranchesVisible: true,
+            branches,
+            busyOwnerKeys: new Set(),
+            initialVisibleBranchCount: 5,
+            projectId: "project-one",
+        });
+
+        expect(
+            collapsedResult.visibleBranches.map((branch) => branch.name),
+        ).toEqual(["recent"]);
+        expect(
+            expandedResult.visibleBranches.map((branch) => branch.name),
+        ).toEqual(["recent", "stale"]);
+    });
+});
+
+function createProject(id: string): ProjectConfig {
+    return {
+        id,
+        name: id,
+        path: `/tmp/${id}`,
+    };
+}
+
+function createBranch(
+    name: string,
+    lastCommitTimestamp: number,
+    options: Partial<BranchInfo> = {},
+): BranchInfo {
+    return {
+        compareBranchName: "main",
+        hasWorktree: true,
+        isStale: false,
+        lastCommitTimestamp,
+        name,
+        remoteName: `origin/${name}`,
+        source: "branch",
+        worktreePath: `/tmp/${name}`,
+        ...options,
+    };
+}
diff --git a/src/lib/components/templates/sidebar/sidebar-sort.ts b/src/lib/components/templates/sidebar/sidebar-sort.ts
new file mode 100644
index 0000000..e76dbf2
--- /dev/null
+++ b/src/lib/components/templates/sidebar/sidebar-sort.ts
@@ -0,0 +1,70 @@
+import { getWorktreeOwnerKey } from "@/lib/hooks/store/use-worktree-terminal-store";
+import type { BranchInfo, ProjectConfig } from "@/types/pr-run";
+
+export function sortProjectsByBusyState(
+    projects: ProjectConfig[],
+    busyProjectIds: Set<string>,
+) {
+    return stableBusyFirst(projects, (project) =>
+        busyProjectIds.has(project.id),
+    );
+}
+
+export function sortBranchesByLastCommit(branches: BranchInfo[]) {
+    return [...branches].sort(
+        (left, right) =>
+            (right.lastCommitTimestamp ?? 0) - (left.lastCommitTimestamp ?? 0),
+    );
+}
+
+export function getVisibleSidebarBranches(params: {
+    areAllRecentBranchesVisible: boolean;
+    areStaleBranchesVisible: boolean;
+    branches: BranchInfo[];
+    busyOwnerKeys: Set<string>;
+    initialVisibleBranchCount: number;
+    projectId: string;
+}) {
+    const busyBranches = params.branches.filter((branch) =>
+        params.busyOwnerKeys.has(
+            getWorktreeOwnerKey(params.projectId, branch.name),
+        ),
+    );
+    const busyBranchNames = new Set(busyBranches.map((branch) => branch.name));
+    const nonBusyBranches = params.branches.filter(
+        (branch) => !busyBranchNames.has(branch.name),
+    );
+    const recentBranches = nonBusyBranches.filter((branch) => !branch.isStale);
+    const staleBranches = nonBusyBranches.filter((branch) => branch.isStale);
+    const visibleRecentBranches = params.areAllRecentBranchesVisible
+        ? recentBranches
+        : recentBranches.slice(0, params.initialVisibleBranchCount);
+
+    return {
+        hiddenRecentBranchCount: Math.max(
+            recentBranches.length - params.initialVisibleBranchCount,
+            0,
+        ),
+        staleBranches,
+        visibleBranches: [
+            ...busyBranches,
+            ...visibleRecentBranches,
+            ...(params.areStaleBranchesVisible ? staleBranches : []),
+        ],
+    };
+}
+
+function stableBusyFirst<T>(items: T[], isBusy: (item: T) => boolean) {
+    const busyItems: T[] = [];
+    const idleItems: T[] = [];
+
+    for (const item of items) {
+        if (isBusy(item)) {
+            busyItems.push(item);
+        } else {
+            idleItems.push(item);
+        }
+    }
+
+    return [...busyItems, ...idleItems];
+}
diff --git a/src/lib/components/templates/sidebar/types.ts b/src/lib/components/templates/sidebar/types.ts
index ac0ad51..41f079c 100644
--- a/src/lib/components/templates/sidebar/types.ts
+++ b/src/lib/components/templates/sidebar/types.ts
@@ -1,6 +1,8 @@
 import type { ProjectConfig, ProjectGroup } from "@/types/pr-run";
 
 export type SidebarProps = {
+    busyOwnerKeys: Set<string>;
+    busyProjectIds: Set<string>;
     expandedGroups: Set<string>;
     collapsedProjects: Set<string>;
     groups: ProjectGroup[];
diff --git a/src/lib/components/templates/status-bar.tsx b/src/lib/components/templates/status-bar.tsx
new file mode 100644
index 0000000..f735cb5
--- /dev/null
+++ b/src/lib/components/templates/status-bar.tsx
@@ -0,0 +1,119 @@
+import { GitBranch, GitPullRequest, Terminal } from "lucide-react";
+import type { ReactNode } from "react";
+
+import type { AppStatusSummary } from "@/lib/components/templates/pr-run-app/use-app-status-summary";
+import { cn } from "@/lib/utils/cn";
+
+type StatusBarProps = {
+    summary: AppStatusSummary;
+};
+
+export function StatusBar({ summary }: StatusBarProps) {
+    return (
+        <footer
+            className={cn(
+                `border-sidebar-border bg-sidebar text-sidebar-foreground flex
+                h-7 shrink-0 [scrollbar-width:none] items-center gap-1
+                overflow-x-auto border-t px-2 text-[11px] leading-none
+                whitespace-nowrap [&::-webkit-scrollbar]:hidden`,
+                summary.isLoadingBranchCounts && "text-muted-foreground",
+            )}
+        >
+            <StatusBarItem
+                icon={
+                    <StatusBarIcon
+                        className="bg-warning/15 text-warning-foreground"
+                    >
+                        <GitBranch className="h-3.5 w-3.5" />
+                    </StatusBarIcon>
+                }
+                label="stale"
+                value={summary.staleWorktreeCount}
+            />
+            <StatusBarItem
+                icon={
+                    <StatusBarIcon className="bg-success/15 text-success">
+                        <Terminal className="h-3.5 w-3.5" />
+                    </StatusBarIcon>
+                }
+                label="busy terminals"
+                value={summary.busyTerminalCount}
+            />
+            <StatusBarItem
+                icon={
+                    <StatusBarIcon
+                        className="bg-blue-500/20 text-blue-600
+                            dark:text-blue-300"
+                    >
+                        <GitPullRequest className="h-3.5 w-3.5" />
+                    </StatusBarIcon>
+                }
+                label="PRs"
+                value={summary.openPullRequestCount}
+            />
+            <StatusBarItem
+                icon={
+                    <StatusBarIcon className="bg-success/15 text-success">
+                        <GitBranch className="h-3.5 w-3.5" />
+                    </StatusBarIcon>
+                }
+                label="worktrees"
+                value={summary.worktreeCount}
+            />
+            <StatusBarItem
+                icon={
+                    <StatusBarIcon
+                        className="bg-muted/45 text-muted-foreground/75"
+                    >
+                        <GitBranch className="h-3.5 w-3.5" />
+                    </StatusBarIcon>
+                }
+                label="branches"
+                value={summary.branchCount}
+            />
+        </footer>
+    );
+}
+
+type StatusBarItemProps = {
+    icon: ReactNode;
+    label: string;
+    value: number;
+};
+
+function StatusBarItem({ icon, label, value }: StatusBarItemProps) {
+    return (
+        <button
+            className={cn(
+                `hover:bg-sidebar-accent focus-visible:ring-ring inline-flex h-6
+                min-w-0 cursor-pointer items-center gap-1 rounded bg-transparent
+                px-1.5 font-medium transition-colors outline-none
+                focus-visible:ring-2`,
+            )}
+            type="button"
+        >
+            {icon}
+            <span className="tabular-nums">{value}</span>
+            <span>{label}</span>
+        </button>
+    );
+}
+
+function StatusBarIcon({
+    children,
+    className,
+}: {
+    children: ReactNode;
+    className: string;
+}) {
+    return (
+        <span
+            className={cn(
+                "grid h-5 w-5 flex-none place-items-center rounded-md",
+                className,
+            )}
+        >
+            {children}
+        </span>
+    );
+}
diff --git a/src/lib/hooks/store/use-worktree-terminal-store.test.ts b/src/lib/hooks/store/use-worktree-terminal-store.test.ts
index ee2306b..be7fd46 100644
--- a/src/lib/hooks/store/use-worktree-terminal-store.test.ts
+++ b/src/lib/hooks/store/use-worktree-terminal-store.test.ts
@@ -3,6 +3,7 @@ import { describe, expect, it } from "bun:test";
 import {
     appendWorktreeTerminalTab,
     createWorktreeTerminalOwnerState,
+    getBusyTerminalSummary,
     removeWorktreeTerminalTab,
     resolveScriptExecutionMode,
 } from "./use-worktree-terminal-store";
@@ -121,3 +122,68 @@ describe("worktree terminal owner state", () => {
         expect(nextOwner.tabs.map((tab) => tab.id)).toEqual(["tab-1", "tab-2"]);
     });
 });
+
+describe("getBusyTerminalSummary", () => {
+    it("counts alive busy tabs across owners", () => {
+        const summary = getBusyTerminalSummary({
+            "project-one:feature-a": {
+                ...createWorktreeTerminalOwnerState("/tmp/one"),
+                tabs: [
+                    createTab("tab-1", "busy", "alive"),
+                    createTab("tab-2", "busy", "alive"),
+                ],
+            },
+            "project-two:feature-b": {
+                ...createWorktreeTerminalOwnerState("/tmp/two"),
+                tabs: [createTab("tab-3", "busy", "alive")],
+            },
+        });
+
+        expect(summary.busyTerminalCount).toBe(3);
+        expect([...summary.busyOwnerKeys]).toEqual([
+            "project-one:feature-a",
+            "project-two:feature-b",
+        ]);
+        expect([...summary.busyProjectIds]).toEqual([
+            "project-one",
+            "project-two",
+        ]);
+    });
+
+    it("ignores idle, unknown, and exited tabs", () => {
+        const summary = getBusyTerminalSummary({
+            "project-one:feature-a": {
+                ...createWorktreeTerminalOwnerState("/tmp/one"),
+                tabs: [
+                    createTab("tab-1", "idle", "alive"),
+                    createTab("tab-2", "unknown", "alive"),
+                    createTab("tab-3", "busy", "exited"),
+                ],
+            },
+            "project-two:feature-b": {
+                ...createWorktreeTerminalOwnerState("/tmp/two"),
+                tabs: [createTab("tab-4", "busy", "alive")],
+            },
+        });
+
+        expect(summary.busyTerminalCount).toBe(1);
+        expect([...summary.busyOwnerKeys]).toEqual(["project-two:feature-b"]);
+        expect([...summary.busyProjectIds]).toEqual(["project-two"]);
+    });
+});
+
+function createTab(
+    id: string,
+    busyState: "busy" | "idle" | "unknown",
+    status: "alive" | "exited",
+) {
+    return {
+        busyState,
+        id,
+        label: id,
+        sessionId: id,
+        status,
+        hasManualInput: false,
+        shellName: "zsh",
+    };
+}
diff --git a/src/lib/hooks/store/use-worktree-terminal-store.ts b/src/lib/hooks/store/use-worktree-terminal-store.ts
index e1ccabe..e1fc710 100644
--- a/src/lib/hooks/store/use-worktree-terminal-store.ts
+++ b/src/lib/hooks/store/use-worktree-terminal-store.ts
@@ -34,6 +34,12 @@ export type WorktreeTerminalOwnerState = {
     worktreePath: string;
 };
 
+export type BusyTerminalSummary = {
+    busyOwnerKeys: Set<WorktreeTerminalOwnerKey>;
+    busyProjectIds: Set<string>;
+    busyTerminalCount: number;
+};
+
 type CreateTerminalReason =
     | { type: "default" | "manual" }
     | { type: "script"; scriptTitle: string };
@@ -132,6 +138,39 @@ export function removeWorktreeTerminalTab(
     };
 }
 
+export function getBusyTerminalSummary(
+    owners: Record<WorktreeTerminalOwnerKey, WorktreeTerminalOwnerState>,
+): BusyTerminalSummary {
+    const busyOwnerKeys = new Set<WorktreeTerminalOwnerKey>();
+    const busyProjectIds = new Set<string>();
+    let busyTerminalCount = 0;
+
+    for (const [ownerKey, owner] of Object.entries(owners)) {
+        const busyTabCount = owner.tabs.filter(
+            (tab) => tab.status === "alive" && tab.busyState === "busy",
+        ).length;
+
+        if (busyTabCount === 0) {
+            continue;
+        }
+
+        busyTerminalCount += busyTabCount;
+        busyOwnerKeys.add(ownerKey);
+
+        const projectId = ownerKey.split(":")[0];
+
+        if (projectId) {
+            busyProjectIds.add(projectId);
+        }
+    }
+
+    return {
+        busyOwnerKeys,
+        busyProjectIds,
+        busyTerminalCount,
+    };
+}
+
 export function resolveScriptExecutionMode(params: {
     activeTab?: WorktreeTerminalTab;
     activeSessionState?: Pick<TerminalSessionSnapshot, "busyState" | "isAlive">;

From 4023c95dce9f3881444e4903ef1c93d2e6b8ab9b Mon Sep 17 00:00:00 2001
From: felipe-software <codercastor@gmail.com>
Date: Tue, 23 Jun 2026 14:19:54 -0300
Subject: [PATCH 5/6] feat: status sidebar

---
 src/lib/components/atoms/busy-dot.tsx         |  21 ----
 src/lib/components/atoms/busy-icon.tsx        |  44 +++++++
 .../worktree-terminal/terminal-tab-bar.tsx    |   6 +-
 .../templates/main-panel/branch-page-tabs.tsx |   9 +-
 .../components/templates/main-panel/index.tsx |   9 ++
 .../templates/sidebar/sidebar-branch-item.tsx |  16 ++-
 .../sidebar/sidebar-project-item.tsx          | 114 +++++++++++-------
 7 files changed, 149 insertions(+), 70 deletions(-)
 delete mode 100644 src/lib/components/atoms/busy-dot.tsx
 create mode 100644 src/lib/components/atoms/busy-icon.tsx

diff --git a/src/lib/components/atoms/busy-dot.tsx b/src/lib/components/atoms/busy-dot.tsx
deleted file mode 100644
index 5bcc523..0000000
--- a/src/lib/components/atoms/busy-dot.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { ComponentPropsWithoutRef } from "react";
-
-import { cn } from "@/lib/utils/cn";
-
-type BusyDotProps = ComponentPropsWithoutRef<"span">;
-
-export function BusyDot({ className, ...props }: BusyDotProps) {
-    return (
-        <span
-            aria-label="Busy terminal"
-            className={cn(
-                `bg-success ring-success/20 inline-block h-2 w-2 shrink-0
-                rounded-full ring-2`,
-                className,
-            )}
-            role="status"
-            title="Busy terminal"
-            {...props}
-        />
-    );
-}
diff --git a/src/lib/components/atoms/busy-icon.tsx b/src/lib/components/atoms/busy-icon.tsx
new file mode 100644
index 0000000..168dcdb
--- /dev/null
+++ b/src/lib/components/atoms/busy-icon.tsx
@@ -0,0 +1,44 @@
+import type { ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/utils/cn";
+
+type BusyIconProps = ComponentPropsWithoutRef<"span"> & {
+    size?: "sm" | "md";
+};
+
+const busyIconSizeClassName = {
+    md: {
+        container: "h-5 w-5",
+        dot: "h-2.5 w-2.5",
+    },
+    sm: {
+        container: "h-4 w-4",
+        dot: "h-2 w-2",
+    },
+};
+
+export function BusyIcon({ className, size = "md", ...props }: BusyIconProps) {
+    const sizeClassName = busyIconSizeClassName[size];
+
+    return (
+        <span
+            aria-label="Busy terminal"
+            className={cn(
+                `bg-success/15 text-success grid flex-none place-items-center
+                rounded-md`,
+                sizeClassName.container,
+                className,
+            )}
+            role="img"
+            title="Busy terminal"
+            {...props}
+        >
+            <span
+                className={cn(
+                    "bg-success ring-success/25 rounded-full ring-2",
+                    sizeClassName.dot,
+                )}
+            />
+        </span>
+    );
+}
diff --git a/src/lib/components/molecules/worktree-terminal/terminal-tab-bar.tsx b/src/lib/components/molecules/worktree-terminal/terminal-tab-bar.tsx
index 97914a3..0d6ed6e 100644
--- a/src/lib/components/molecules/worktree-terminal/terminal-tab-bar.tsx
+++ b/src/lib/components/molecules/worktree-terminal/terminal-tab-bar.tsx
@@ -1,6 +1,7 @@
 import { Plus, X } from "lucide-react";
 import type { MouseEvent } from "react";
 
+import { BusyIcon } from "@/lib/components/atoms/busy-icon";
 import { Button } from "@/lib/components/atoms/button";
 import { TabShell } from "@/lib/components/atoms/tab-shell";
 import { cn } from "@/lib/utils/cn";
@@ -62,10 +63,7 @@ export function TerminalTabBar({
                                     onClick={() => onSelectTab(tab.id)}
                                 >
                                     {tab.busyState === "busy" ? (
-                                        <span
-                                            className="h-1.5 w-1.5 shrink-0
-                                                rounded-full bg-emerald-400"
-                                        />
+                                        <BusyIcon size="sm" />
                                     ) : tab.status === "exited" ? (
                                         <span
                                             className="bg-danger h-1.5 w-1.5
diff --git a/src/lib/components/templates/main-panel/branch-page-tabs.tsx b/src/lib/components/templates/main-panel/branch-page-tabs.tsx
index 4b57687..53b8fdc 100644
--- a/src/lib/components/templates/main-panel/branch-page-tabs.tsx
+++ b/src/lib/components/templates/main-panel/branch-page-tabs.tsx
@@ -1,9 +1,11 @@
+import { BusyIcon } from "@/lib/components/atoms/busy-icon";
 import { TabShell } from "@/lib/components/atoms/tab-shell";
 
 type BranchPageTab = "general" | "run" | "diff" | "docker" | "env";
 
 type BranchPageTabsProps = {
     activeTab: BranchPageTab;
+    isRunTabBusy: boolean;
     onSelectTab: (tab: BranchPageTab) => void;
 };
 
@@ -17,6 +19,7 @@ const tabs: { label: string; value: BranchPageTab }[] = [
 
 export function BranchPageTabs({
     activeTab,
+    isRunTabBusy,
     onSelectTab,
 }: BranchPageTabsProps) {
     return (
@@ -32,12 +35,16 @@ export function BranchPageTabs({
                 >
                     <button
                         aria-selected={activeTab === tab.value}
-                        className="h-full w-full px-3 font-[inherit] text-xs
+                        className="flex h-full w-full items-center
+                            justify-center gap-1.5 px-3 font-[inherit] text-xs
                             leading-none"
                         role="tab"
                         type="button"
                         onClick={() => onSelectTab(tab.value)}
                     >
+                        {tab.value === "run" && isRunTabBusy ? (
+                            <BusyIcon size="sm" />
+                        ) : null}
                         {tab.label}
                     </button>
                 </TabShell>
diff --git a/src/lib/components/templates/main-panel/index.tsx b/src/lib/components/templates/main-panel/index.tsx
index eb5704f..da5c7ba 100644
--- a/src/lib/components/templates/main-panel/index.tsx
+++ b/src/lib/components/templates/main-panel/index.tsx
@@ -75,6 +75,9 @@ export function MainPanel({
     const [activeTab, setActiveTab] = useState<BranchPageTab>("general");
     const selectedKey =
         project && branchName ? `${project.id}:${branchName}` : "";
+    const selectedTerminalOwner = useWorktreeTerminalStore((state) =>
+        selectedKey ? state.owners[selectedKey] : undefined,
+    );
     const branchesQuery = useProjectBranchesQuery(
         project?.id,
         Boolean(project),
@@ -98,6 +101,11 @@ export function MainPanel({
     const isAwaitingCommitPassphrase = isHandledSshPromptError(
         commitsQuery.error,
     );
+    const isRunTabBusy = Boolean(
+        selectedTerminalOwner?.tabs.some(
+            (tab) => tab.status === "alive" && tab.busyState === "busy",
+        ),
+    );
 
     useEffect(() => {
         setActiveTab("general");
@@ -185,6 +193,7 @@ export function MainPanel({
                 <div className="flex shrink-0 flex-col gap-0">
                     <BranchPageTabs
                         activeTab={activeTab}
+                        isRunTabBusy={isRunTabBusy}
                         onSelectTab={setActiveTab}
                     />
                     <BranchPageHeader
diff --git a/src/lib/components/templates/sidebar/sidebar-branch-item.tsx b/src/lib/components/templates/sidebar/sidebar-branch-item.tsx
index 3c732a0..edc9cee 100644
--- a/src/lib/components/templates/sidebar/sidebar-branch-item.tsx
+++ b/src/lib/components/templates/sidebar/sidebar-branch-item.tsx
@@ -1,6 +1,6 @@
 import { FolderPlus, RefreshCw, Trash2 } from "lucide-react";
 
-import { BusyDot } from "@/lib/components/atoms/busy-dot";
+import { BusyIcon } from "@/lib/components/atoms/busy-icon";
 import { Button } from "@/lib/components/atoms/button";
 import { StatusPill } from "@/lib/components/atoms/status-pill";
 import { formatBranchAge } from "@/lib/format";
@@ -12,6 +12,7 @@ import type { BranchInfo } from "@/types/pr-run";
 type SidebarBranchItemProps = {
     branch: BranchInfo;
     isBusy: boolean;
+    isCollapsedPreview?: boolean;
     isCheckingOutWorktree: boolean;
     isRemovingWorktree: boolean;
     isSelected: boolean;
@@ -23,6 +24,7 @@ type SidebarBranchItemProps = {
 export function SidebarBranchItem({
     branch,
     isBusy,
+    isCollapsedPreview = false,
     isCheckingOutWorktree,
     isRemovingWorktree,
     isSelected,
@@ -51,12 +53,20 @@ export function SidebarBranchItem({
                     outline-none focus-visible:ring-2`,
                     isSelected && "text-sidebar-accent-foreground",
                     branch.isStale && !isSelected && "text-muted-foreground",
+                    isCollapsedPreview && "py-1 opacity-85 shadow-none",
                 )}
                 type="button"
                 onClick={() => onSelectBranch(branch.name)}
             >
-                <SidebarItemIcon branch={branch} />
-                {isBusy ? <BusyDot /> : null}
+                <span className="relative flex h-5 w-5 flex-none items-center">
+                    <SidebarItemIcon branch={branch} />
+                    {isBusy ? (
+                        <BusyIcon
+                            className="absolute -right-1 -bottom-1"
+                            size="sm"
+                        />
+                    ) : null}
+                </span>
                 <span
                     className="min-w-0 flex-1 grow truncate text-[13px]
                         leading-4 tracking-tight"
diff --git a/src/lib/components/templates/sidebar/sidebar-project-item.tsx b/src/lib/components/templates/sidebar/sidebar-project-item.tsx
index 97c6a00..4bba268 100644
--- a/src/lib/components/templates/sidebar/sidebar-project-item.tsx
+++ b/src/lib/components/templates/sidebar/sidebar-project-item.tsx
@@ -2,7 +2,7 @@ import { ChevronDown, ChevronRight, Folder, RefreshCw } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
 
 import { isHandledSshPromptError } from "@/lib/api";
-import { BusyDot } from "@/lib/components/atoms/busy-dot";
+import { BusyIcon } from "@/lib/components/atoms/busy-icon";
 import { Button } from "@/lib/components/atoms/button";
 import { Skeleton } from "@/lib/components/atoms/skeleton";
 import { Surface } from "@/lib/components/atoms/surface";
@@ -58,7 +58,10 @@ export function SidebarProjectItem({
         useState(false);
     const [areStaleBranchesVisible, setAreStaleBranchesVisible] =
         useState(false);
-    const branchesQuery = useProjectBranchesQuery(project.id, isExpanded);
+    const branchesQuery = useProjectBranchesQuery(
+        project.id,
+        isExpanded || isBusy,
+    );
     const isAwaitingSshPassphrase = isHandledSshPromptError(
         branchesQuery.error,
     );
@@ -135,11 +138,19 @@ export function SidebarProjectItem({
                                 shrink-0"
                         />
                     )}
-                    <Folder
-                        className="text-muted-foreground/70 ml-0.5 h-3.5 w-3.5
-                            shrink-0"
-                    />
-                    {isBusy ? <BusyDot /> : null}
+                    <span
+                        className="bg-muted/45 text-muted-foreground/75 relative
+                            grid h-5 w-5 flex-none place-items-center
+                            rounded-md"
+                    >
+                        <Folder className="h-3.5 w-3.5" />
+                        {isBusy ? (
+                            <BusyIcon
+                                className="absolute -right-1 -bottom-1"
+                                size="sm"
+                            />
+                        ) : null}
+                    </span>
                     <div className="ml-2 flex min-w-0 flex-1 justify-between">
                         <span
                             className="block truncate text-xs leading-4
@@ -197,12 +208,15 @@ export function SidebarProjectItem({
                 </div>
             </div>
 
-            {isExpanded ? (
+            {isExpanded || isBusy ? (
                 <div
-                    className="border-sidebar-border/80 relative mt-0.5 ml-2
-                        flex min-w-0 flex-col gap-0.5 border-l py-0.5 pl-1"
+                    className={cn(
+                        `border-sidebar-border/80 relative mt-0.5 ml-2 flex
+                            min-w-0 flex-col gap-0.5 border-l py-0.5 pl-1`,
+                        !isExpanded && "opacity-90",
+                    )}
                 >
-                    {branchesQuery.isPending ? (
+                    {branchesQuery.isPending && isExpanded ? (
                         <div className="grid gap-1 px-1.5 py-1">
                             <Skeleton className="h-5 w-11/12" />
                             <Skeleton className="h-5 w-9/12" />
@@ -210,7 +224,9 @@ export function SidebarProjectItem({
                         </div>
                     ) : null}
 
-                    {!branchesQuery.isPending && isAwaitingSshPassphrase ? (
+                    {!branchesQuery.isPending &&
+                    isExpanded &&
+                    isAwaitingSshPassphrase ? (
                         <Surface
                             className="text-muted-foreground/70 border-0
                                 bg-transparent px-2 py-1.5 text-[11px]
@@ -222,6 +238,7 @@ export function SidebarProjectItem({
                     ) : null}
 
                     {!branchesQuery.isPending &&
+                    isExpanded &&
                     !isAwaitingSshPassphrase &&
                     branchError ? (
                         <Surface
@@ -233,6 +250,7 @@ export function SidebarProjectItem({
                     ) : null}
 
                     {!branchesQuery.isPending &&
+                    isExpanded &&
                     !branchError &&
                     (branchesQuery.data?.length ?? 0) === 0 ? (
                         <div
@@ -243,35 +261,48 @@ export function SidebarProjectItem({
                         </div>
                     ) : null}
 
-                    {visibleBranches.map((branch) => (
-                        <SidebarBranchItem
-                            branch={branch}
-                            isBusy={busyOwnerKeys.has(
-                                getWorktreeOwnerKey(project.id, branch.name),
-                            )}
-                            isCheckingOutWorktree={
-                                pendingWorktreeCheckoutKey ===
-                                `${project.id}:${branch.name}`
-                            }
-                            isRemovingWorktree={
-                                pendingWorktreeRemovalKey ===
-                                `${project.id}:${branch.name}`
-                            }
-                            isSelected={selectedBranchName === branch.name}
-                            key={branch.remoteName}
-                            onCheckoutBranch={(branchName) =>
-                                onCheckoutBranch(project.id, branchName)
-                            }
-                            onRemoveWorktree={(branchName) =>
-                                onRemoveWorktree(project.id, branchName)
-                            }
-                            onSelectBranch={(branchName) =>
-                                onSelectBranch(project.id, branchName)
-                            }
-                        />
-                    ))}
+                    {(isExpanded
+                        ? visibleBranches
+                        : visibleBranches.filter((branch) =>
+                              busyOwnerKeys.has(
+                                  getWorktreeOwnerKey(project.id, branch.name),
+                              ),
+                          )
+                    ).map((branch) => {
+                        const isBranchBusy = busyOwnerKeys.has(
+                            getWorktreeOwnerKey(project.id, branch.name),
+                        );
+
+                        return (
+                            <SidebarBranchItem
+                                branch={branch}
+                                isBusy={isBranchBusy}
+                                isCollapsedPreview={!isExpanded}
+                                isCheckingOutWorktree={
+                                    pendingWorktreeCheckoutKey ===
+                                    `${project.id}:${branch.name}`
+                                }
+                                isRemovingWorktree={
+                                    pendingWorktreeRemovalKey ===
+                                    `${project.id}:${branch.name}`
+                                }
+                                isSelected={selectedBranchName === branch.name}
+                                key={branch.remoteName}
+                                onCheckoutBranch={(branchName) =>
+                                    onCheckoutBranch(project.id, branchName)
+                                }
+                                onRemoveWorktree={(branchName) =>
+                                    onRemoveWorktree(project.id, branchName)
+                                }
+                                onSelectBranch={(branchName) =>
+                                    onSelectBranch(project.id, branchName)
+                                }
+                            />
+                        );
+                    })}
 
-                    {!areAllRecentBranchesVisible &&
+                    {isExpanded &&
+                    !areAllRecentBranchesVisible &&
                     hiddenRecentBranchCount > 0 ? (
                         <Button
                             className="text-muted-foreground
@@ -285,7 +316,8 @@ export function SidebarProjectItem({
                         </Button>
                     ) : null}
 
-                    {(areAllRecentBranchesVisible ||
+                    {isExpanded &&
+                    (areAllRecentBranchesVisible ||
                         hiddenRecentBranchCount === 0) &&
                     !areStaleBranchesVisible &&
                     staleBranches.length > 0 ? (

From 0b928cc8ed6dd962feea77eb6bfb264ef7f9d4f9 Mon Sep 17 00:00:00 2001
From: felipe-software <codercastor@gmail.com>
Date: Tue, 23 Jun 2026 14:41:15 -0300
Subject: [PATCH 6/6] fix: change drag statusbar behavior

---
 .../templates/global-terminal-panel.tsx       | 399 ++++++++++++++++++
 .../components/templates/pr-run-app/index.tsx | 164 ++++++-
 src/lib/components/templates/status-bar.tsx   |  27 +-
 3 files changed, 583 insertions(+), 7 deletions(-)
 create mode 100644 src/lib/components/templates/global-terminal-panel.tsx

diff --git a/src/lib/components/templates/global-terminal-panel.tsx b/src/lib/components/templates/global-terminal-panel.tsx
new file mode 100644
index 0000000..7949bfa
--- /dev/null
+++ b/src/lib/components/templates/global-terminal-panel.tsx
@@ -0,0 +1,399 @@
+import { ChevronDown, ChevronRight, Terminal, X } from "lucide-react";
+import type { PointerEvent as ReactPointerEvent } from "react";
+import { useEffect, useMemo, useState } from "react";
+
+import { BusyIcon } from "@/lib/components/atoms/busy-icon";
+import { Button } from "@/lib/components/atoms/button";
+import { EmptyState } from "@/lib/components/atoms/empty-state";
+import { Surface } from "@/lib/components/atoms/surface";
+import { TerminalPane } from "@/lib/components/molecules/worktree-terminal/terminal-pane";
+import { useWorktreeTerminalStore } from "@/lib/hooks/store/use-worktree-terminal-store";
+import { cn } from "@/lib/utils/cn";
+import type { ProjectGroup } from "@/types/pr-run";
+
+type GlobalTerminalPanelProps = {
+    groups: ProjectGroup[];
+    height: number;
+    isOpen: boolean;
+    sidebarWidth: number;
+    selectedTerminalKey: string | null;
+    onBeginSidebarResize: (event: ReactPointerEvent<HTMLDivElement>) => void;
+    onBeginResize: (event: ReactPointerEvent<HTMLDivElement>) => void;
+    onClose: () => void;
+    onSelectTerminal: (terminalKey: string) => void;
+};
+
+type TerminalTreeGroup = {
+    branchName: string;
+    id: string;
+    isBusy: boolean;
+    ownerKey: string;
+    projectId: string;
+    title: string;
+    terminals: TerminalTreeTab[];
+};
+
+type TerminalTreeTab = {
+    branchName: string;
+    busyState: "idle" | "busy" | "unknown";
+    id: string;
+    isAlive: boolean;
+    label: string;
+    ownerKey: string;
+    projectId: string;
+    sessionId: string;
+    terminalKey: string;
+};
+
+export function GlobalTerminalPanel({
+    groups,
+    height,
+    isOpen,
+    sidebarWidth,
+    selectedTerminalKey,
+    onBeginSidebarResize,
+    onBeginResize,
+    onClose,
+    onSelectTerminal,
+}: GlobalTerminalPanelProps) {
+    const owners = useWorktreeTerminalStore((state) => state.owners);
+    const setActiveTab = useWorktreeTerminalStore(
+        (state) => state.setActiveTab,
+    );
+    const tree = useMemo(
+        () => buildTerminalTree(groups, owners),
+        [groups, owners],
+    );
+    const terminals = useMemo(() => flattenTerminalTree(tree), [tree]);
+    const selectedTerminal =
+        terminals.find(
+            (terminal) => terminal.terminalKey === selectedTerminalKey,
+        ) ??
+        terminals[0] ??
+        null;
+    const [expandedGroupIds, setExpandedGroupIds] = useState<Set<string>>(
+        () => new Set(),
+    );
+
+    useEffect(() => {
+        if (!isOpen || !selectedTerminal) {
+            return;
+        }
+
+        setExpandedGroupIds((current) => {
+            if (current.has(selectedTerminal.ownerKey)) {
+                return current;
+            }
+
+            return new Set([...current, selectedTerminal.ownerKey]);
+        });
+    }, [isOpen, selectedTerminal]);
+
+    if (!isOpen) {
+        return null;
+    }
+
+    function selectTerminal(terminal: TerminalTreeTab) {
+        setActiveTab(terminal.ownerKey, terminal.id);
+        onSelectTerminal(terminal.terminalKey);
+    }
+
+    return (
+        <section
+            className="border-sidebar-border bg-sidebar text-sidebar-foreground
+                flex min-h-48 shrink-0 flex-col border-t"
+            style={{ height }}
+        >
+            <div
+                aria-label="Resize terminal panel"
+                className="hover:bg-sidebar-accent/70 h-1.5 shrink-0
+                    cursor-row-resize transition-colors"
+                role="separator"
+                onPointerDown={onBeginResize}
+            />
+
+            <div className="flex min-h-0 flex-1">
+                <div className="flex min-h-0 min-w-0 flex-1 p-0.5 pr-0">
+                    {selectedTerminal ? (
+                        <TerminalPane
+                            ownerKey={selectedTerminal.ownerKey}
+                            sessionId={selectedTerminal.sessionId}
+                            tabId={selectedTerminal.id}
+                        />
+                    ) : (
+                        <Surface
+                            className="grid h-full place-items-center"
+                            variant="muted"
+                        >
+                            <EmptyState
+                                description="Open a worktree terminal to show it here."
+                                icon={<Terminal className="h-4 w-4" />}
+                                title="No terminals"
+                            />
+                        </Surface>
+                    )}
+                </div>
+
+                <div
+                    aria-label="Resize terminal list"
+                    className="group flex w-2 shrink-0 cursor-col-resize
+                        items-center justify-center"
+                    role="separator"
+                    onPointerDown={onBeginSidebarResize}
+                >
+                    <div
+                        className="bg-sidebar-border group-hover:bg-primary h-10
+                            w-px rounded-full transition-colors"
+                    />
+                </div>
+
+                <aside
+                    className="border-sidebar-border bg-sidebar
+                        text-sidebar-foreground flex shrink-0 border-l"
+                    style={{ width: sidebarWidth }}
+                >
+                    <div className="min-h-0 flex-1 overflow-auto px-1 py-0.5">
+                        {tree.length === 0 ? (
+                            <div
+                                className="text-muted-foreground px-1.5 py-1.5
+                                    text-[11px]"
+                            >
+                                No terminals.
+                            </div>
+                        ) : null}
+
+                        {tree.map((group) => {
+                            const isGroupExpanded = expandedGroupIds.has(
+                                group.id,
+                            );
+
+                            return (
+                                <div key={group.id}>
+                                    <button
+                                        className="hover:bg-sidebar-accent flex
+                                            h-6 w-full min-w-0 cursor-pointer
+                                            items-center gap-1 rounded px-1.5
+                                            text-left text-xs transition-colors
+                                            outline-none"
+                                        type="button"
+                                        onClick={() =>
+                                            setExpandedGroupIds((current) =>
+                                                toggleSetValue(
+                                                    current,
+                                                    group.id,
+                                                ),
+                                            )
+                                        }
+                                    >
+                                        {isGroupExpanded ? (
+                                            <ChevronDown
+                                                className="h-3.5 w-3.5 shrink-0"
+                                            />
+                                        ) : (
+                                            <ChevronRight
+                                                className="h-3.5 w-3.5 shrink-0"
+                                            />
+                                        )}
+                                        <span className="truncate font-medium">
+                                            {group.title}
+                                        </span>
+                                        {group.isBusy ? (
+                                            <BusyIcon
+                                                className="ml-auto"
+                                                size="sm"
+                                            />
+                                        ) : null}
+                                        <span
+                                            className="text-muted-foreground
+                                                text-[10px] tabular-nums"
+                                        >
+                                            {group.terminals.length}
+                                        </span>
+                                    </button>
+
+                                    {isGroupExpanded
+                                        ? group.terminals.map((tab) => (
+                                              <button
+                                                  className={cn(
+                                                      `hover:bg-sidebar-accent
+                                                        flex h-6 w-full min-w-0
+                                                        cursor-pointer
+                                                        items-center gap-1.5
+                                                        rounded px-1.5 pl-6
+                                                        text-left text-[11px]
+                                                        transition-colors
+                                                        outline-none`,
+                                                      selectedTerminal?.terminalKey ===
+                                                          tab.terminalKey &&
+                                                          `bg-sidebar-accent
+                                                            text-sidebar-accent-foreground`,
+                                                  )}
+                                                  key={tab.terminalKey}
+                                                  type="button"
+                                                  onClick={() =>
+                                                      selectTerminal(tab)
+                                                  }
+                                              >
+                                                  <Terminal
+                                                      className="text-muted-foreground
+                                                        h-3.5 w-3.5 shrink-0"
+                                                  />
+                                                  <span
+                                                      className="min-w-0 flex-1
+                                                        truncate"
+                                                  >
+                                                      {tab.label}
+                                                  </span>
+                                                  {tab.busyState === "busy" ? (
+                                                      <BusyIcon
+                                                          className="ml-auto"
+                                                          size="sm"
+                                                      />
+                                                  ) : null}
+                                              </button>
+                                          ))
+                                        : null}
+                                </div>
+                            );
+                        })}
+                    </div>
+                    <div
+                        className="border-sidebar-border flex h-full w-8
+                            shrink-0 flex-col items-center border-l py-1"
+                    >
+                        <Button
+                            aria-label="Close terminals panel"
+                            className="text-muted-foreground border-transparent
+                                bg-transparent shadow-none"
+                            isIconOnly
+                            size="icon-xs"
+                            type="button"
+                            variant="ghost"
+                            onPress={onClose}
+                        >
+                            <X className="h-3.5 w-3.5" />
+                        </Button>
+                    </div>
+                </aside>
+            </div>
+        </section>
+    );
+}
+
+function buildTerminalTree(
+    groups: ProjectGroup[],
+    owners: ReturnType<typeof useWorktreeTerminalStore.getState>["owners"],
+) {
+    const projects = groups.flatMap((group) => group.projects);
+    const projectNameById = new Map(
+        projects.map((project) => [project.id, project.name]),
+    );
+    const projectOrder = new Map(
+        projects.map((project, index) => [project.id, index]),
+    );
+    const groupMap = new Map<string, TerminalTreeGroup>();
+
+    for (const [ownerKey, owner] of Object.entries(owners)) {
+        if (owner.tabs.length === 0) {
+            continue;
+        }
+
+        const { branchName, projectId } = parseOwnerKey(ownerKey);
+        const projectName = projectNameById.get(projectId) ?? projectId;
+        const group = ensureTerminalGroup(
+            groupMap,
+            ownerKey,
+            branchName,
+            projectId,
+            `${projectName} - ${branchName}`,
+        );
+
+        group.terminals.push(
+            ...owner.tabs.map((tab) => ({
+                branchName,
+                busyState: tab.busyState,
+                id: tab.id,
+                isAlive: tab.status === "alive",
+                label: tab.label,
+                ownerKey,
+                projectId,
+                sessionId: tab.sessionId,
+                terminalKey: getTerminalKey(ownerKey, tab.id),
+            })),
+        );
+        group.isBusy = group.terminals.some(
+            (terminal) => terminal.isAlive && terminal.busyState === "busy",
+        );
+    }
+
+    return [...groupMap.values()].sort(
+        (left, right) =>
+            (projectOrder.get(left.projectId) ?? Number.MAX_SAFE_INTEGER) -
+                (projectOrder.get(right.projectId) ??
+                    Number.MAX_SAFE_INTEGER) ||
+            left.branchName.localeCompare(right.branchName),
+    );
+}
+
+function ensureTerminalGroup(
+    groupMap: Map<string, TerminalTreeGroup>,
+    ownerKey: string,
+    branchName: string,
+    projectId: string,
+    title: string,
+) {
+    const existing = groupMap.get(ownerKey);
+
+    if (existing) {
+        return existing;
+    }
+
+    const group: TerminalTreeGroup = {
+        branchName,
+        id: ownerKey,
+        isBusy: false,
+        ownerKey,
+        projectId,
+        title,
+        terminals: [],
+    };
+
+    groupMap.set(ownerKey, group);
+    return group;
+}
+
+function flattenTerminalTree(tree: TerminalTreeGroup[]) {
+    return tree.flatMap((group) => group.terminals);
+}
+
+export function getTerminalKey(ownerKey: string, tabId: string) {
+    return `${ownerKey}::${tabId}`;
+}
+
+function parseOwnerKey(ownerKey: string) {
+    const separatorIndex = ownerKey.indexOf(":");
+
+    if (separatorIndex === -1) {
+        return {
+            branchName: ownerKey,
+            projectId: ownerKey,
+        };
+    }
+
+    return {
+        branchName: ownerKey.slice(separatorIndex + 1),
+        projectId: ownerKey.slice(0, separatorIndex),
+    };
+}
+
+function toggleSetValue(set: Set<string>, value: string) {
+    const next = new Set(set);
+
+    if (next.has(value)) {
+        next.delete(value);
+    } else {
+        next.add(value);
+    }
+
+    return next;
+}
diff --git a/src/lib/components/templates/pr-run-app/index.tsx b/src/lib/components/templates/pr-run-app/index.tsx
index 13d0ffc..076b392 100644
--- a/src/lib/components/templates/pr-run-app/index.tsx
+++ b/src/lib/components/templates/pr-run-app/index.tsx
@@ -1,18 +1,129 @@
 import { AlertTriangle } from "lucide-react";
+import type { PointerEvent as ReactPointerEvent } from "react";
+import { useMemo, useState } from "react";
 
 import { EmptyState } from "@/lib/components/atoms/empty-state";
 import { Skeleton } from "@/lib/components/atoms/skeleton";
 import { Surface } from "@/lib/components/atoms/surface";
 import { AddProjectDialog } from "@/lib/components/templates/add-project-dialog";
 import { CreateScriptDialog } from "@/lib/components/templates/create-script-dialog";
+import {
+    getTerminalKey,
+    GlobalTerminalPanel,
+} from "@/lib/components/templates/global-terminal-panel";
 import { MainPanel } from "@/lib/components/templates/main-panel";
 import { Sidebar } from "@/lib/components/templates/sidebar";
 import { SshPassphraseDialog } from "@/lib/components/templates/ssh-passphrase-dialog";
 import { StatusBar } from "@/lib/components/templates/status-bar";
 import { usePrRunAppState } from "@/lib/components/templates/pr-run-app/use-pr-run-app-state";
+import { useWorktreeTerminalStore } from "@/lib/hooks/store/use-worktree-terminal-store";
+
+const TERMINAL_PANEL_DEFAULT_HEIGHT = 320;
+const TERMINAL_PANEL_MIN_HEIGHT = 180;
+const TERMINAL_PANEL_MAX_HEIGHT = 640;
+const TERMINAL_PANEL_SIDEBAR_DEFAULT_WIDTH = 180;
+const TERMINAL_PANEL_SIDEBAR_MIN_WIDTH = 132;
+const TERMINAL_PANEL_SIDEBAR_MAX_WIDTH = 360;
 
 export function PrRunApp() {
     const state = usePrRunAppState();
+    const terminalOwners = useWorktreeTerminalStore((store) => store.owners);
+    const [isTerminalPanelOpen, setIsTerminalPanelOpen] = useState(false);
+    const [terminalPanelHeight, setTerminalPanelHeight] = useState(
+        TERMINAL_PANEL_DEFAULT_HEIGHT,
+    );
+    const [terminalPanelSidebarWidth, setTerminalPanelSidebarWidth] = useState(
+        TERMINAL_PANEL_SIDEBAR_DEFAULT_WIDTH,
+    );
+    const [selectedGlobalTerminalKey, setSelectedGlobalTerminalKey] = useState<
+        string | null
+    >(null);
+    const preferredGlobalTerminalKey = useMemo(
+        () => getPreferredGlobalTerminalKey(terminalOwners),
+        [terminalOwners],
+    );
+
+    function openGlobalTerminalPanel() {
+        setSelectedGlobalTerminalKey(
+            (current) => current ?? preferredGlobalTerminalKey,
+        );
+        setIsTerminalPanelOpen(true);
+    }
+
+    function beginTerminalPanelResize(
+        event: ReactPointerEvent<HTMLDivElement>,
+        startHeightOverride?: number,
+    ) {
+        event.preventDefault();
+
+        const startY = event.clientY;
+        const startHeight = startHeightOverride ?? terminalPanelHeight;
+        const maxHeight = Math.min(
+            TERMINAL_PANEL_MAX_HEIGHT,
+            Math.floor(window.innerHeight * 0.78),
+        );
+
+        function handlePointerMove(moveEvent: PointerEvent) {
+            setTerminalPanelHeight(
+                clamp(
+                    startHeight + startY - moveEvent.clientY,
+                    TERMINAL_PANEL_MIN_HEIGHT,
+                    maxHeight,
+                ),
+            );
+        }
+
+        function handlePointerUp() {
+            window.removeEventListener("pointermove", handlePointerMove);
+            window.removeEventListener("pointerup", handlePointerUp);
+            window.removeEventListener("pointercancel", handlePointerUp);
+        }
+
+        window.addEventListener("pointermove", handlePointerMove);
+        window.addEventListener("pointerup", handlePointerUp);
+        window.addEventListener("pointercancel", handlePointerUp);
+    }
+
+    function openAndBeginTerminalPanelResize(
+        event: ReactPointerEvent<HTMLDivElement>,
+    ) {
+        openGlobalTerminalPanel();
+        beginTerminalPanelResize(
+            event,
+            isTerminalPanelOpen
+                ? terminalPanelHeight
+                : TERMINAL_PANEL_MIN_HEIGHT,
+        );
+    }
+
+    function beginTerminalPanelSidebarResize(
+        event: ReactPointerEvent<HTMLDivElement>,
+    ) {
+        event.preventDefault();
+
+        const startX = event.clientX;
+        const startWidth = terminalPanelSidebarWidth;
+
+        function handlePointerMove(moveEvent: PointerEvent) {
+            setTerminalPanelSidebarWidth(
+                clamp(
+                    startWidth + moveEvent.clientX - startX,
+                    TERMINAL_PANEL_SIDEBAR_MIN_WIDTH,
+                    TERMINAL_PANEL_SIDEBAR_MAX_WIDTH,
+                ),
+            );
+        }
+
+        function handlePointerUp() {
+            window.removeEventListener("pointermove", handlePointerMove);
+            window.removeEventListener("pointerup", handlePointerUp);
+            window.removeEventListener("pointercancel", handlePointerUp);
+        }
+
+        window.addEventListener("pointermove", handlePointerMove);
+        window.addEventListener("pointerup", handlePointerUp);
+        window.addEventListener("pointercancel", handlePointerUp);
+    }
 
     if (state.configError) {
         return (
@@ -96,7 +207,22 @@ export function PrRunApp() {
                     onCheckoutBranch={state.checkoutBranch}
                     onCreateScript={state.openCreateScript}
                 />
-                <StatusBar summary={state.statusSummary} />
+                <GlobalTerminalPanel
+                    groups={state.groups}
+                    height={terminalPanelHeight}
+                    isOpen={isTerminalPanelOpen}
+                    sidebarWidth={terminalPanelSidebarWidth}
+                    selectedTerminalKey={selectedGlobalTerminalKey}
+                    onBeginSidebarResize={beginTerminalPanelSidebarResize}
+                    onBeginResize={beginTerminalPanelResize}
+                    onClose={() => setIsTerminalPanelOpen(false)}
+                    onSelectTerminal={setSelectedGlobalTerminalKey}
+                />
+                <StatusBar
+                    summary={state.statusSummary}
+                    onBeginTerminalPanelResize={openAndBeginTerminalPanelResize}
+                    onOpenBusyTerminals={openGlobalTerminalPanel}
+                />
             </div>
             <AddProjectDialog
                 error={state.addProjectError}
@@ -116,3 +242,39 @@ export function PrRunApp() {
         </Surface>
     );
 }
+
+function getPreferredGlobalTerminalKey(
+    owners: ReturnType<typeof useWorktreeTerminalStore.getState>["owners"],
+) {
+    const fallback = getFirstTerminalKey(owners);
+
+    for (const [ownerKey, owner] of Object.entries(owners)) {
+        const busyTab = owner.tabs.find(
+            (tab) => tab.status === "alive" && tab.busyState === "busy",
+        );
+
+        if (busyTab) {
+            return getTerminalKey(ownerKey, busyTab.id);
+        }
+    }
+
+    return fallback;
+}
+
+function getFirstTerminalKey(
+    owners: ReturnType<typeof useWorktreeTerminalStore.getState>["owners"],
+) {
+    for (const [ownerKey, owner] of Object.entries(owners)) {
+        const firstTab = owner.tabs[0];
+
+        if (firstTab) {
+            return getTerminalKey(ownerKey, firstTab.id);
+        }
+    }
+
+    return null;
+}
+
+function clamp(value: number, min: number, max: number) {
+    return Math.min(Math.max(value, min), max);
+}
diff --git a/src/lib/components/templates/status-bar.tsx b/src/lib/components/templates/status-bar.tsx
index f735cb5..5a33385 100644
--- a/src/lib/components/templates/status-bar.tsx
+++ b/src/lib/components/templates/status-bar.tsx
@@ -1,23 +1,32 @@
 import { GitBranch, GitPullRequest, Terminal } from "lucide-react";
-import type { ReactNode } from "react";
+import type { PointerEvent as ReactPointerEvent, ReactNode } from "react";
 
 import type { AppStatusSummary } from "@/lib/components/templates/pr-run-app/use-app-status-summary";
 import { cn } from "@/lib/utils/cn";
 
 type StatusBarProps = {
     summary: AppStatusSummary;
+    onBeginTerminalPanelResize: (
+        event: ReactPointerEvent<HTMLDivElement>,
+    ) => void;
+    onOpenBusyTerminals: () => void;
 };
 
-export function StatusBar({ summary }: StatusBarProps) {
+export function StatusBar({
+    summary,
+    onBeginTerminalPanelResize,
+    onOpenBusyTerminals,
+}: StatusBarProps) {
     return (
         <footer
             className={cn(
-                `border-sidebar-border bg-sidebar text-sidebar-foreground flex
-                h-7 shrink-0 [scrollbar-width:none] items-center gap-1
-                overflow-x-auto border-t px-2 text-[11px] leading-none
+                `border-sidebar-border bg-sidebar text-sidebar-foreground
+                relative flex h-7 shrink-0 [scrollbar-width:none] items-center
+                gap-1 overflow-x-auto border-t px-2 text-[11px] leading-none
                 whitespace-nowrap [&::-webkit-scrollbar]:hidden`,
                 summary.isLoadingBranchCounts && "text-muted-foreground",
             )}
+            onPointerDown={onBeginTerminalPanelResize}
         >
             <StatusBarItem
                 icon={
@@ -38,6 +47,7 @@ export function StatusBar({ summary }: StatusBarProps) {
                 }
                 label="busy terminals"
                 value={summary.busyTerminalCount}
+                onPress={onOpenBusyTerminals}
             />
             <StatusBarItem
                 icon={
@@ -78,10 +88,11 @@ export function StatusBar({ summary }: StatusBarProps) {
 type StatusBarItemProps = {
     icon: ReactNode;
     label: string;
+    onPress?: () => void;
     value: number;
 };
 
-function StatusBarItem({ icon, label, value }: StatusBarItemProps) {
+function StatusBarItem({ icon, label, onPress, value }: StatusBarItemProps) {
     return (
         <button
             className={cn(
@@ -91,6 +102,10 @@ function StatusBarItem({ icon, label, value }: StatusBarItemProps) {
                 focus-visible:ring-2`,
             )}
             type="button"
+            onPointerDown={(event) => {
+                event.stopPropagation();
+            }}
+            onClick={onPress}
         >
             {icon}
             <span className="tabular-nums">{value}</span>