🤖 WIP: Migrate Tooltip to shadcn - imports and partial JSX

- Updated imports in 25 files to use shadcn Tooltip components
- Migrated tool components (5 files)
- Migrated NewWorkspaceModal, StatusIndicator, Context1MCheckbox
- Remaining: ~60 TooltipWrapper instances to migrate

_Generated with `cmux`_

Author: kylecarbs

src/components/AIView.tsx

@@ -26,7 +26,7 @@ import { getModelName } from "@/utils/ai/models";
 import { GitStatusIndicator } from "./GitStatusIndicator";
 
 import { useGitStatus } from "@/stores/GitStatusStore";
-import { TooltipWrapper, Tooltip } from "./Tooltip";
+import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
 import type { DisplayedMessage } from "@/types/message";
 import { useAIViewKeybinds } from "@/hooks/useAIViewKeybinds";
 

src/components/Context1MCheckbox.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { use1MContext } from "@/hooks/use1MContext";
 import { supports1MContext } from "@/utils/ai/models";
-import { TooltipWrapper, Tooltip } from "./Tooltip";
+import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
 
 interface Context1MCheckboxProps {
   modelString: string;

src/components/KebabMenu.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from "react";
 import { createPortal } from "react-dom";
-import { TooltipWrapper, Tooltip } from "./Tooltip";
+import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
 export interface KebabMenuItem {

src/components/Messages/MessageWindow.tsx

@@ -3,7 +3,7 @@ import React, { useState, useMemo } from "react";
 import type { CmuxMessage, DisplayedMessage } from "@/types/message";
 import { HeaderButton } from "../tools/shared/ToolPrimitives";
 import { formatTimestamp } from "@/utils/ui/dateTime";
-import { TooltipWrapper, Tooltip } from "../Tooltip";
+import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
 import { KebabMenu, type KebabMenuItem } from "../KebabMenu";
 
 export interface ButtonConfig {

src/components/NewWorkspaceModal.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useId, useState } from "react";
 import { Modal, ModalInfo, ModalActions, CancelButton, PrimaryButton } from "./Modal";
-import { TooltipWrapper, Tooltip } from "./Tooltip";
+import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
 import { formatNewCommand } from "@/utils/chatCommands";
 
 interface NewWorkspaceModalProps {
@@ -102,11 +102,13 @@ const NewWorkspaceModal: React.FC<NewWorkspaceModalProps> = ({
       <form onSubmit={(event) => void handleSubmit(event)}>
         <div className="[&_label]:text-foreground [&_input]:bg-modal-bg [&_input]:border-border-medium [&_input]:focus:border-accent [&_select]:bg-modal-bg [&_select]:border-border-medium [&_select]:focus:border-accent [&_option]:bg-modal-bg mb-5 [&_input]:w-full [&_input]:rounded [&_input]:border [&_input]:px-3 [&_input]:py-2 [&_input]:text-sm [&_input]:text-white [&_input]:focus:outline-none [&_input]:disabled:cursor-not-allowed [&_input]:disabled:opacity-60 [&_label]:mb-2 [&_label]:block [&_label]:text-sm [&_option]:text-white [&_select]:w-full [&_select]:cursor-pointer [&_select]:rounded [&_select]:border [&_select]:px-3 [&_select]:py-2 [&_select]:text-sm [&_select]:text-white [&_select]:focus:outline-none [&_select]:disabled:cursor-not-allowed [&_select]:disabled:opacity-60">
           <label htmlFor="branchName">
-            <TooltipWrapper inline>
-              <span className="cursor-help underline decoration-[#666] decoration-dotted underline-offset-2">
-                Workspace Branch Name:
-              </span>
-              <Tooltip width="wide" position="bottom" interactive>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span className="cursor-help underline decoration-[#666] decoration-dotted underline-offset-2">
+                  Workspace Branch Name:
+                </span>
+              </TooltipTrigger>
+              <TooltipContent className="max-w-md" side="bottom">
                 <strong>About Workspaces:</strong>
                 <ul className="my-1 pl-4">
                   <li>Uses git worktrees (separate directories sharing .git)</li>
@@ -117,8 +119,8 @@ const NewWorkspaceModal: React.FC<NewWorkspaceModalProps> = ({
                 <a href="https://cmux.io/workspaces.html" target="_blank" rel="noopener noreferrer">
                   Learn more
                 </a>
-              </Tooltip>
-            </TooltipWrapper>
+              </TooltipContent>
+            </Tooltip>
           </label>
           <input
             id="branchName"

src/components/ProjectSidebar.tsx

@@ -14,7 +14,7 @@ import {
   partitionWorkspacesByAge,
   formatOldWorkspaceThreshold,
 } from "@/utils/ui/workspaceFiltering";
-import { TooltipWrapper, Tooltip } from "./Tooltip";
+import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
 import SecretsModal from "./SecretsModal";
 import type { Secret } from "@/types/secrets";
 import { ForceDeleteModal } from "./ForceDeleteModal";

src/components/RightSidebar.tsx

@@ -8,7 +8,7 @@ import { VerticalTokenMeter } from "./RightSidebar/VerticalTokenMeter";
 import { ReviewPanel } from "./RightSidebar/CodeReview/ReviewPanel";
 import { calculateTokenMeterData } from "@/utils/tokens/tokenMeterUtils";
 import { matchesKeybind, KEYBINDS, formatKeybind } from "@/utils/ui/keybinds";
-import { TooltipWrapper, Tooltip } from "./Tooltip";
+import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
 interface SidebarContainerProps {

src/components/RightSidebar/ConsumerBreakdown.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import type { WorkspaceConsumersState } from "@/stores/WorkspaceStore";
-import { TooltipWrapper, Tooltip, HelpIndicator } from "../Tooltip";
+import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
+import { HelpIndicator } from "@/components/Tooltip";
 
 // Format token display - show k for thousands with 1 decimal
 const formatTokens = (tokens: number) =>

src/components/RightSidebar/VerticalTokenMeter.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { TooltipWrapper, Tooltip } from "../Tooltip";
+import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
 import { TokenMeter } from "./TokenMeter";
 import { type TokenMeterData, formatTokens, getSegmentLabel } from "@/utils/tokens/tokenMeterUtils";
 

src/components/StatusIndicator.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from "react";
 import { cn } from "@/lib/utils";
-import { TooltipWrapper, Tooltip } from "./Tooltip";
+import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
 
 interface StatusIndicatorProps {
   streaming: boolean;