fix: Style nits for plan progress component (#103)

apps/web/package.json

@@ -27,6 +27,7 @@
     "@radix-ui/react-avatar": "^1.1.3",
     "@radix-ui/react-collapsible": "^1.1.11",
     "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-hover-card": "^1.1.14",
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-popover": "^1.1.14",
     "@radix-ui/react-scroll-area": "^1.2.9",
@@ -88,6 +89,7 @@
     "postcss": "^8.5.3",
     "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
+    "shadcn": "^2.6.1",
     "tailwind-scrollbar": "^4.0.1",
     "tailwindcss": "^4.0.13",
     "typescript": "~5.7.2",

apps/web/src/components/tasks/index.tsx

@@ -1,4 +1,5 @@
 "use client";
+
 import { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";

apps/web/src/components/tasks/progress-bar.tsx

@@ -1,4 +1,5 @@
 "use client";
+
 import { Button } from "@/components/ui/button";
 import {
   Tooltip,
@@ -6,10 +7,15 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { CheckCircle2, Play, List, HelpCircle } from "lucide-react";
+import { List, HelpCircle } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { useState } from "react";
 import { PlanItem, TaskPlan } from "@open-swe/shared/open-swe/types";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card";
 
 interface ProgressBarProps {
   taskPlan?: TaskPlan;
@@ -90,10 +96,6 @@ export function ProgressBar({
     }
   };
 
-  const currentPlanItem = planItems.find(
-    (item) => item.index === currentTaskIndex,
-  );
-
   return (
     <div
       className={cn(
@@ -102,8 +104,8 @@ export function ProgressBar({
       )}
     >
       {/* Compact header */}
-      <div className="overflow-hidden px-2 py-2 sm:px-3">
-        <div className="mb-2 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+      <div className="overflow-hidden px-1 py-1.5 sm:px-2">
+        <div className="mb-1 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
           <div className="flex items-center gap-2">
             <span className="text-xs font-medium text-gray-700 sm:text-sm">
               Plan Progress
@@ -143,9 +145,9 @@ export function ProgressBar({
               variant="outline"
               size="sm"
               onClick={onOpenSidebar}
-              className="h-7 border-blue-200 px-2 text-xs hover:bg-blue-50 sm:h-8 sm:px-3 sm:text-sm"
+              className="h-6 border-blue-200 text-xs hover:bg-blue-50"
             >
-              <List className="mr-1 h-3 w-3 sm:h-4 sm:w-4" />
+              <List className="size-3" />
               <span className="hidden sm:inline">Tasks</span>
               <span className="sm:hidden">View</span>
             </Button>
@@ -191,7 +193,7 @@ export function ProgressBar({
         {/* Progress Bar */}
         <div className="space-y-2">
           <div
-            className="flex h-3 cursor-pointer touch-manipulation gap-[1px] overflow-hidden rounded-sm bg-gray-100 transition-all hover:h-3.5 sm:h-2 sm:hover:h-2.5"
+            className="flex h-3 cursor-pointer touch-manipulation gap-[1px] overflow-hidden rounded-sm bg-gray-100 transition-all sm:h-2"
             onClick={onOpenSidebar}
             aria-label="Click to view all tasks"
             title="Click to view all tasks"
@@ -201,73 +203,41 @@ export function ProgressBar({
               const segmentWidth = `${100 / planItems.length}%`;
 
               return (
-                <TooltipProvider key={item.index}>
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <div
-                        className={cn(
-                          "transition-all hover:opacity-80",
-                          getSegmentColor(state),
-                          state === "current" && "animate-pulse",
-                        )}
-                        style={{ width: segmentWidth }}
-                      />
-                    </TooltipTrigger>
-                    <TooltipContent
-                      side="bottom"
-                      className="max-w-xs p-2 text-xs sm:max-w-sm"
-                    >
-                      <div className="space-y-1">
-                        <div className="flex flex-col gap-0.5 sm:flex-row sm:items-center sm:gap-1">
-                          <span className="font-medium">
-                            Task #{item.index}
-                          </span>
-                          <span className="text-xs text-gray-500">
-                            {state === "completed"
-                              ? "Completed"
-                              : state === "current"
-                                ? "Current"
-                                : "Pending"}
-                          </span>
-                        </div>
-                        <p className="text-xs break-words">{item.plan}</p>
+                <HoverCard key={item.index}>
+                  <HoverCardTrigger asChild>
+                    <div
+                      className={cn(
+                        "transition-all hover:opacity-80",
+                        getSegmentColor(state),
+                        state === "current" && "animate-pulse",
+                      )}
+                      style={{ width: segmentWidth }}
+                    />
+                  </HoverCardTrigger>
+                  <HoverCardContent
+                    side="bottom"
+                    className="min-w-xs p-2 text-xs sm:max-w-sm md:max-w-lg"
+                  >
+                    <div className="space-y-1">
+                      <div className="flex flex-col gap-0.5 sm:flex-row sm:items-center sm:gap-1">
+                        <span className="font-medium">
+                          Task #{item.index + 1}
+                        </span>
+                        <span className="text-xs text-gray-500">
+                          {state === "completed"
+                            ? "Completed"
+                            : state === "current"
+                              ? "Current"
+                              : "Pending"}
+                        </span>
                       </div>
-                    </TooltipContent>
-                  </Tooltip>
-                </TooltipProvider>
+                      <p className="text-xs break-words">{item.plan}</p>
+                    </div>
+                  </HoverCardContent>
+                </HoverCard>
               );
             })}
           </div>
-
-          {/* Current Task Info */}
-          {currentPlanItem && (
-            <div className="flex items-start gap-2 rounded border border-blue-100 bg-blue-50 px-2 py-1.5 sm:px-3">
-              <Play className="mt-0.5 h-3 w-3 flex-shrink-0 text-blue-500 sm:h-4 sm:w-4" />
-              <div className="min-w-0 flex-1">
-                <div className="text-xs font-medium text-blue-700 sm:text-sm">
-                  Currently working on:
-                </div>
-                <p className="line-clamp-2 text-xs break-words text-gray-700 sm:line-clamp-1 sm:truncate sm:text-sm">
-                  {currentPlanItem.plan}
-                </p>
-              </div>
-            </div>
-          )}
-
-          {/* All tasks completed */}
-          {completedCount === planItems.length && planItems.length > 0 && (
-            <div className="flex items-start gap-2 rounded border border-green-100 bg-green-50 px-2 py-1.5 sm:px-3">
-              <CheckCircle2 className="mt-0.5 h-3 w-3 flex-shrink-0 text-green-600 sm:h-4 sm:w-4" />
-              <div className="flex-1">
-                <div className="text-xs font-medium text-green-700 sm:text-sm">
-                  All tasks completed
-                </div>
-                <p className="text-xs text-gray-700 sm:text-sm">
-                  The agent has finished all planned tasks.
-                </p>
-              </div>
-            </div>
-          )}
         </div>
       </div>
     </div>

apps/web/src/components/ui/hover-card.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+
+import { cn } from "@/lib/utils";
+
+function HoverCard({
+  openDelay = 250,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return (
+    <HoverCardPrimitive.Root
+      data-slot="hover-card"
+      openDelay={openDelay}
+      {...props}
+    />
+  );
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger
+      data-slot="hover-card-trigger"
+      {...props}
+    />
+  );
+}
+
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className,
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  );
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };