refactor: extract WorkspaceTitleBar for reuse in header and hover card

Create a shared WorkspaceTitleBar component that displays:
- RuntimeBadge
- Project name
- Branch selector
- Git status indicator

Used in both WorkspaceHeader (full variant) and WorkspaceListItem
hover card (dense variant) to maximize code reuse.

Author: ammar-agent

src/browser/components/WorkspaceHeader.tsx

@@ -8,9 +8,7 @@ import {
   getNotifyOnResponseKey,
   getNotifyOnResponseAutoEnableKey,
 } from "@/common/constants/storage";
-import { GitStatusIndicator } from "./GitStatusIndicator";
-import { RuntimeBadge } from "./RuntimeBadge";
-import { BranchSelector } from "./BranchSelector";
+import { WorkspaceTitleBar } from "./WorkspaceTitleBar";
 import { WorkspaceMCPModal } from "./WorkspaceMCPModal";
 import { Tooltip, TooltipTrigger, TooltipContent } from "./ui/tooltip";
 import { Popover, PopoverTrigger, PopoverContent } from "./ui/popover";
@@ -211,24 +209,17 @@ export const WorkspaceHeader: React.FC<WorkspaceHeaderProps> = ({
             <Menu className="h-3.5 w-3.5" />
           </Button>
         )}
-        <RuntimeBadge
+        <WorkspaceTitleBar
+          workspaceId={workspaceId}
+          projectName={projectName}
+          projectPath={projectPath}
+          workspaceName={workspaceName}
+          namedWorkspacePath={namedWorkspacePath}
           runtimeConfig={runtimeConfig}
+          gitStatus={gitStatus}
           isWorking={isWorking}
-          workspacePath={namedWorkspacePath}
-          workspaceName={workspaceName}
-          tooltipSide="bottom"
+          variant="full"
         />
-        <span className="min-w-0 truncate font-mono text-xs">{projectName}</span>
-        <div className="flex items-center gap-1">
-          <BranchSelector workspaceId={workspaceId} workspaceName={workspaceName} />
-          <GitStatusIndicator
-            gitStatus={gitStatus}
-            workspaceId={workspaceId}
-            projectPath={projectPath}
-            tooltipPosition="bottom"
-            isWorking={isWorking}
-          />
-        </div>
       </div>
       <div className={cn("flex items-center gap-2", isDesktop && "titlebar-no-drag")}>
         <WorkspaceLinks workspaceId={workspaceId} />

src/browser/components/WorkspaceListItem.tsx

@@ -11,6 +11,7 @@ import { useDrag } from "react-dnd";
 import { getEmptyImage } from "react-dnd-html5-backend";
 import { GitStatusIndicator } from "./GitStatusIndicator";
 import { RuntimeBadge } from "./RuntimeBadge";
+import { WorkspaceTitleBar } from "./WorkspaceTitleBar";
 import { Tooltip, TooltipTrigger, TooltipContent } from "./ui/tooltip";
 import { HoverCard, HoverCardTrigger, HoverCardContent } from "./ui/hover-card";
 import { Trash2 } from "lucide-react";
@@ -451,16 +452,17 @@ function RegularWorkspaceListItemInner(props: WorkspaceListItemProps) {
                   onFocusOutside={preventHoverCardDismissForRadixPortals}
                 >
                   <div className="flex flex-col gap-1">
-                    <div className="flex items-center gap-2">
-                      <RuntimeBadge
-                        runtimeConfig={metadata.runtimeConfig}
-                        workspaceName={metadata.name}
-                        workspacePath={namedWorkspacePath}
-                      />
-                      <span className="text-foreground font-medium break-words whitespace-normal">
-                        {displayTitle}
-                      </span>
-                    </div>
+                    <WorkspaceTitleBar
+                      workspaceId={workspaceId}
+                      projectName={projectName}
+                      projectPath={projectPath}
+                      workspaceName={metadata.name}
+                      namedWorkspacePath={namedWorkspacePath}
+                      runtimeConfig={metadata.runtimeConfig}
+                      gitStatus={gitStatus}
+                      isWorking={isWorking}
+                      variant="dense"
+                    />
                     {!isDisabled && (
                       <div className="text-muted text-xs">Double-click to edit title</div>
                     )}

src/browser/components/WorkspaceTitleBar.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import { cn } from "@/common/lib/utils";
+import { GitStatusIndicator } from "./GitStatusIndicator";
+import { RuntimeBadge } from "./RuntimeBadge";
+import { BranchSelector } from "./BranchSelector";
+import type { RuntimeConfig } from "@/common/types/runtime";
+import type { GitStatus } from "@/common/types/workspace";
+
+interface WorkspaceTitleBarProps {
+  workspaceId: string;
+  projectName: string;
+  projectPath: string;
+  workspaceName: string;
+  namedWorkspacePath: string;
+  runtimeConfig?: RuntimeConfig;
+  gitStatus: GitStatus | null;
+  isWorking: boolean;
+  /**
+   * "full" - Used in WorkspaceHeader with larger text and bottom tooltips
+   * "dense" - Used in HoverCard with smaller text and right tooltips
+   */
+  variant?: "full" | "dense";
+  className?: string;
+}
+
+/**
+ * Reusable workspace title bar showing runtime badge, project name, branch, and git status.
+ * Used in both WorkspaceHeader (full variant) and WorkspaceListItem hover card (dense variant).
+ */
+export function WorkspaceTitleBar({
+  workspaceId,
+  projectName,
+  projectPath,
+  workspaceName,
+  namedWorkspacePath,
+  runtimeConfig,
+  gitStatus,
+  isWorking,
+  variant = "full",
+  className,
+}: WorkspaceTitleBarProps) {
+  const isDense = variant === "dense";
+  // RuntimeBadge only supports top/bottom; GitStatusIndicator supports right/bottom
+  const gitTooltipPosition = isDense ? "right" : "bottom";
+
+  return (
+    <div
+      className={cn(
+        "flex min-w-0 items-center gap-2",
+        isDense ? "text-[11px]" : "gap-2.5",
+        className
+      )}
+    >
+      <RuntimeBadge
+        runtimeConfig={runtimeConfig}
+        isWorking={isWorking}
+        workspacePath={namedWorkspacePath}
+        workspaceName={workspaceName}
+        tooltipSide="bottom"
+      />
+      <span className={cn("min-w-0 truncate font-mono", isDense ? "text-[11px]" : "text-xs")}>
+        {projectName}
+      </span>
+      <div className="flex items-center gap-1">
+        <BranchSelector workspaceId={workspaceId} workspaceName={workspaceName} />
+        <GitStatusIndicator
+          gitStatus={gitStatus}
+          workspaceId={workspaceId}
+          projectPath={projectPath}
+          tooltipPosition={gitTooltipPosition}
+          isWorking={isWorking}
+        />
+      </div>
+    </div>
+  );
+}