From 62cd0b22cd5aa6258e309c976aa208e887fc9df6 Mon Sep 17 00:00:00 2001
From: Ammar <ammar+ai@ammar.io>
Date: Wed, 28 Jan 2026 21:31:14 -0600
Subject: [PATCH] refactor: add WorkspaceHoverPreview for workspace list item
 hover card

Create a new WorkspaceHoverPreview component that shows a dense preview
of workspace info when hovering over workspace list items. Displays:
- RuntimeBadge
- Project name
- Branch selector
- Git status indicator
- PR link badge

This does not change the WorkspaceHeader layout - it only adds the
new component for use in the hover card.
---
 .../components/WorkspaceHoverPreview.tsx      | 47 +++++++++++++++++++
 src/browser/components/WorkspaceListItem.tsx  | 25 +++++-----
 src/browser/stories/App.sidebar.stories.tsx   |  4 +-
 3 files changed, 60 insertions(+), 16 deletions(-)
 create mode 100644 src/browser/components/WorkspaceHoverPreview.tsx

diff --git a/src/browser/components/WorkspaceHoverPreview.tsx b/src/browser/components/WorkspaceHoverPreview.tsx
new file mode 100644
index 0000000000..d717a6f6aa
--- /dev/null
+++ b/src/browser/components/WorkspaceHoverPreview.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import { cn } from "@/common/lib/utils";
+import { RuntimeBadge } from "./RuntimeBadge";
+import { BranchSelector } from "./BranchSelector";
+import { WorkspaceLinks } from "./WorkspaceLinks";
+import type { RuntimeConfig } from "@/common/types/runtime";
+
+interface WorkspaceHoverPreviewProps {
+  workspaceId: string;
+  projectName: string;
+  workspaceName: string;
+  namedWorkspacePath: string;
+  runtimeConfig?: RuntimeConfig;
+  isWorking: boolean;
+  className?: string;
+}
+
+/**
+ * Dense workspace info preview for hover cards.
+ * Shows runtime badge, project name, branch selector, git status, and PR link.
+ */
+export function WorkspaceHoverPreview({
+  workspaceId,
+  projectName,
+  workspaceName,
+  namedWorkspacePath,
+  runtimeConfig,
+  isWorking,
+  className,
+}: WorkspaceHoverPreviewProps) {
+  return (
+    <div className={cn("flex min-w-0 items-center gap-2 text-[11px]", className)}>
+      <RuntimeBadge
+        runtimeConfig={runtimeConfig}
+        isWorking={isWorking}
+        workspacePath={namedWorkspacePath}
+        workspaceName={workspaceName}
+        tooltipSide="bottom"
+      />
+      <span className="min-w-0 truncate font-mono text-[11px]">{projectName}</span>
+      <div className="flex items-center gap-1">
+        <BranchSelector workspaceId={workspaceId} workspaceName={workspaceName} />
+        <WorkspaceLinks workspaceId={workspaceId} />
+      </div>
+    </div>
+  );
+}
diff --git a/src/browser/components/WorkspaceListItem.tsx b/src/browser/components/WorkspaceListItem.tsx
index 68791f2b98..77fbd295ad 100644
--- a/src/browser/components/WorkspaceListItem.tsx
+++ b/src/browser/components/WorkspaceListItem.tsx
@@ -10,7 +10,8 @@ import React, { useState, useEffect } from "react";
 import { useDrag } from "react-dnd";
 import { getEmptyImage } from "react-dnd-html5-backend";
 import { GitStatusIndicator } from "./GitStatusIndicator";
-import { RuntimeBadge } from "./RuntimeBadge";
+
+import { WorkspaceHoverPreview } from "./WorkspaceHoverPreview";
 import { Tooltip, TooltipTrigger, TooltipContent } from "./ui/tooltip";
 import { HoverCard, HoverCardTrigger, HoverCardContent } from "./ui/hover-card";
 import { Trash2 } from "lucide-react";
@@ -442,25 +443,21 @@ function RegularWorkspaceListItemInner(props: WorkspaceListItemProps) {
                   </span>
                 </HoverCardTrigger>
                 <HoverCardContent
-                  // Keep the workspace title hover card on the right to avoid covering the list.
-                  side="right"
                   align="start"
-                  sideOffset={0}
+                  sideOffset={8}
                   className="border-separator-light bg-modal-bg w-auto max-w-[420px] px-[10px] py-[6px] text-[11px] shadow-[0_2px_8px_rgba(0,0,0,0.4)]"
                   onPointerDownOutside={preventHoverCardDismissForRadixPortals}
                   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>
+                    <WorkspaceHoverPreview
+                      workspaceId={workspaceId}
+                      projectName={projectName}
+                      workspaceName={metadata.name}
+                      namedWorkspacePath={namedWorkspacePath}
+                      runtimeConfig={metadata.runtimeConfig}
+                      isWorking={isWorking}
+                    />
                     {!isDisabled && (
                       <div className="text-muted text-xs">Double-click to edit title</div>
                     )}
diff --git a/src/browser/stories/App.sidebar.stories.tsx b/src/browser/stories/App.sidebar.stories.tsx
index a330f6eba4..1198e3f596 100644
--- a/src/browser/stories/App.sidebar.stories.tsx
+++ b/src/browser/stories/App.sidebar.stories.tsx
@@ -570,8 +570,8 @@ export const WorkspaceTitleHoverCard: AppStory = {
           "[data-radix-popper-content-wrapper] .bg-modal-bg"
         );
         if (!hoverCard) throw new Error("HoverCard not visible");
-        // Verify it contains the runtime badge and title
-        within(hoverCard).getByText("Implement new feature with detailed description");
+        // Verify it contains the project name (WorkspaceHoverPreview content)
+        within(hoverCard).getByText("hover-demo");
       },
       { timeout: 5000 }
     );