@dust-tt/sparkle 0.2.616 → 0.2.617-rc-1

package/dist/esm/stories/ToolCard.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolCard.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/ToolCard.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAI/C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAG/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,QAAQ,yBAoDpB,CAAC"}
+{"version":3,"file":"ToolCard.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/ToolCard.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAI/C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAG/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,QAAQ,yBAsCpB,CAAC"}

package/dist/esm/stories/ToolCard.stories.js

@@ -7,18 +7,10 @@ var meta = {
     component: ToolCard,
 };
 export default meta;
-export var Examples = function () { return (React.createElement("div", { className: "s-flex s-gap-3" },
-    React.createElement("div", { className: "s-w-80" },
-        React.createElement(ToolCard, { icon: BookOpenIcon, cardContainerClassName: "s-h-36", label: "Image Generation", description: "Agent can generate images (GPT Image 1).", isSelected: true, canAdd: true, onClick: function () { return console.log("Add Image Generation"); }, toolInfo: {
-                label: "Click here",
-                onClick: function () { return console.log("Click here"); },
-            } })),
-    React.createElement("div", { className: "s-w-80" },
-        React.createElement(ToolCard, { cardContainerClassName: "s-h-36", icon: CommandLineIcon, label: "Reasoning", description: React.createElement(React.Fragment, null,
-                "Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks.",
-                " ",
-                React.createElement(Hoverable, { href: "https://example.com/help", target: "_blank", rel: "noopener noreferrer", variant: "primary" }, "the docs")), isSelected: true, canAdd: false, toolInfo: {
-                label: "Click here",
-                onClick: function () { return console.log("Click here"); },
-            } })))); };
+export var Examples = function () { return (React.createElement("div", { className: "s-grid s-grid-cols-2 s-gap-3" },
+    React.createElement(ToolCard, { icon: BookOpenIcon, label: "Image Generation", description: "Agent can generate images (GPT Image 1).", isSelected: false, canAdd: true, onClick: function () { return console.log("Add Image Generation"); } }),
+    React.createElement(ToolCard, { icon: CommandLineIcon, label: "Reasoning", description: React.createElement(React.Fragment, null,
+            "Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks. Agent can decide to trigger a reasoning model for complex tasks.",
+            " ",
+            React.createElement(Hoverable, { href: "https://example.com/help", target: "_blank", rel: "noopener noreferrer", variant: "primary" }, "the docs")), isSelected: true, canAdd: false }))); };
 //# sourceMappingURL=ToolCard.stories.js.map

package/dist/esm/stories/ToolCard.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolCard.stories.js","sourceRoot":"","sources":["../../../src/stories/ToolCard.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAEnE,IAAM,IAAI,GAA0B;IAClC,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,QAAQ;CACpB,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,IAAM,QAAQ,GAAG,cAAM,OAAA,CAC5B,6BAAK,SAAS,EAAC,gBAAgB;IAE7B,6BAAK,SAAS,EAAC,QAAQ;QACrB,oBAAC,QAAQ,IACP,IAAI,EAAE,YAAY,EAClB,sBAAsB,EAAC,QAAQ,EAC/B,KAAK,EAAC,kBAAkB,EACxB,WAAW,EAAC,0CAA0C,EACtD,UAAU,QACV,MAAM,QACN,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,GAAG,CAAC,sBAAsB,CAAC,EAAnC,CAAmC,EAClD,QAAQ,EAAE;gBACR,KAAK,EAAE,YAAY;gBACnB,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,EAAzB,CAAyB;aACzC,GACD,CACE;IAGN,6BAAK,SAAS,EAAC,QAAQ;QACrB,oBAAC,QAAQ,IACP,sBAAsB,EAAC,QAAQ,EAC/B,IAAI,EAAE,eAAe,EACrB,KAAK,EAAC,WAAW,EACjB,WAAW,EACT;;gBAMmE,GAAG;gBACpE,oBAAC,SAAS,IACR,IAAI,EAAC,0BAA0B,EAC/B,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,OAAO,EAAC,SAAS,eAGP,CACX,EAEL,UAAU,QACV,MAAM,EAAE,KAAK,EACb,QAAQ,EAAE;gBACR,KAAK,EAAE,YAAY;gBACnB,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,EAAzB,CAAyB;aACzC,GACD,CACE,CACF,CACP,EApD6B,CAoD7B,CAAC"}
+{"version":3,"file":"ToolCard.stories.js","sourceRoot":"","sources":["../../../src/stories/ToolCard.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAEnE,IAAM,IAAI,GAA0B;IAClC,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,QAAQ;CACpB,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,IAAM,QAAQ,GAAG,cAAM,OAAA,CAC5B,6BAAK,SAAS,EAAC,8BAA8B;IAE3C,oBAAC,QAAQ,IACP,IAAI,EAAE,YAAY,EAClB,KAAK,EAAC,kBAAkB,EACxB,WAAW,EAAC,0CAA0C,EACtD,UAAU,EAAE,KAAK,EACjB,MAAM,EAAE,IAAI,EACZ,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,GAAG,CAAC,sBAAsB,CAAC,EAAnC,CAAmC,GAClD;IAGF,oBAAC,QAAQ,IACP,IAAI,EAAE,eAAe,EACrB,KAAK,EAAC,WAAW,EACjB,WAAW,EACT;;YAMyD,GAAG;YAC1D,oBAAC,SAAS,IACR,IAAI,EAAC,0BAA0B,EAC/B,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,OAAO,EAAC,SAAS,eAGP,CACX,EAEL,UAAU,EAAE,IAAI,EAChB,MAAM,EAAE,KAAK,GACb,CACE,CACP,EAtC6B,CAsC7B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.616",
+  "version": "0.2.617-rc-1",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",

package/src/components/Avatar.tsx

@@ -6,7 +6,7 @@ import { UserIcon } from "@sparkle/icons/app";
 import { getEmojiAndBackgroundFromUrl } from "@sparkle/lib/avatar/utils";
 import { cn } from "@sparkle/lib/utils";
 
-const AVATAR_SIZES = ["xs", "sm", "md", "lg", "xl", "2xl", "auto"] as const;
+const AVATAR_SIZES = ["xs", "sm", "md", "lg", "xl", "xxl", "auto"] as const;
 type AvatarSizeType = (typeof AVATAR_SIZES)[number];
 
 const AVATAR_VARIANTS = ["default", "clickable", "disabled"] as const;
@@ -22,7 +22,7 @@ const avatarVariants = cva(
         md: "s-h-10 s-w-10",
         lg: "s-h-16 s-w-16",
         xl: "s-h-20 s-w-20",
-        "2xl": "s-h-36 s-w-36",
+        xxl: "s-h-36 s-w-36",
         auto: "s-w-full s-relative",
       },
       variant: {
@@ -64,7 +64,7 @@ const avatarVariants = cva(
       },
       {
         rounded: false,
-        size: "2xl",
+        size: "xxl",
         className: "s-rounded-[38px]",
       },
       {
@@ -89,7 +89,7 @@ const textVariants = cva("s-select-none s-font-semibold", {
       md: "s-text-base",
       lg: "s-text-3xl",
       xl: "s-text-5xl",
-      "2xl": "s-text-7xl",
+      xxl: "s-text-7xl",
       auto: "s-text-xl",
     },
   },

package/src/components/ConversationMessage.tsx

@@ -35,10 +35,8 @@ interface ConversationMessageProps
   citations?: React.ReactElement[];
   isDisabled?: boolean;
   name?: string;
-  timestamp?: string;
   pictureUrl?: string | React.ReactNode | null;
   renderName?: (name: string | null) => React.ReactNode;
-  infoChip?: React.ReactNode;
 }
 
 const messageVariants = cva("s-flex s-w-full s-flex-col s-rounded-2xl", {
@@ -83,10 +81,8 @@ export const ConversationMessage = React.forwardRef<
       citations,
       isDisabled = false,
       name,
-      timestamp,
       pictureUrl,
       renderName = (name) => <span>{name}</span>,
-      infoChip,
       type,
       className,
       ...props
@@ -99,11 +95,9 @@ export const ConversationMessage = React.forwardRef<
           <ConversationMessageHeader
             avatarUrl={pictureUrl}
             name={name}
-            timestamp={timestamp}
             isBusy={avatarBusy}
             isDisabled={isDisabled}
             renderName={renderName}
-            infoChip={infoChip}
           />
 
           <ConversationMessageContent citations={citations}>
@@ -164,8 +158,6 @@ interface ConversationMessageHeaderProps
   isBusy?: boolean;
   isDisabled?: boolean;
   name?: string;
-  timestamp?: string;
-  infoChip?: React.ReactNode;
   renderName: (name: string | null) => React.ReactNode;
 }
 
@@ -179,8 +171,6 @@ export const ConversationMessageHeader = React.forwardRef<
       isBusy,
       isDisabled,
       name = "",
-      timestamp,
-      infoChip,
       renderName,
       className,
       ...props
@@ -212,22 +202,13 @@ export const ConversationMessageHeader = React.forwardRef<
           disabled={isDisabled}
           size="sm"
         />
-        <div className="s-flex s-w-full s-flex-row s-justify-between s-gap-0.5">
-          <div
-            className={cn(
-              "s-text-sm s-font-semibold @sm:s-text-base",
-              "s-text-foreground dark:s-text-foreground-night",
-              "s-flex s-flex-row s-items-center s-gap-2"
-            )}
-          >
-            {renderName(name)}
-            {infoChip}
-          </div>
-          <div>
-            <span className="s-text-xs s-font-normal s-text-muted-foreground dark:s-text-muted-foreground-night">
-              {timestamp}
-            </span>
-          </div>
+        <div
+          className={cn(
+            "s-text-sm s-font-semibold @sm:s-text-base",
+            "s-text-foreground dark:s-text-foreground-night"
+          )}
+        >
+          {renderName(name)}
         </div>
       </div>
     );

package/src/components/DataTable.tsx

@@ -15,7 +15,13 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import React, { ReactNode, useEffect, useRef, useState } from "react";
+import React, {
+  ReactNode,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
 
 import {
   Avatar,
@@ -339,6 +345,24 @@ export interface ScrollableDataTableProps<TData extends TBaseData>
 const COLUMN_HEIGHT = 48;
 const MIN_COLUMN_WIDTH = 40;
 
+// Helper function to compare column sizing objects
+function shallowEqualSizing(
+  a: Record<string, number>,
+  b: Record<string, number>
+) {
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) {
+    return false;
+  }
+  for (const k of aKeys) {
+    if (a[k] !== b[k]) {
+      return false;
+    }
+  }
+  return true;
+}
+
 export function ScrollableDataTable<TData extends TBaseData>({
   data,
   totalRowCount,
@@ -360,7 +384,7 @@ export function ScrollableDataTable<TData extends TBaseData>({
   const loadMoreRef = useRef<HTMLDivElement>(null);
   const [tableWidth, setTableWidth] = useState(0);
 
-  // Monitor table width changes
+  // Monitor table width changes with guard against tiny changes
   useEffect(() => {
     if (!tableContainerRef.current) {
       return;
@@ -368,7 +392,8 @@ export function ScrollableDataTable<TData extends TBaseData>({
 
     const resizeObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
-        setTableWidth(entry.contentRect.width);
+        const w = Math.round(entry.contentRect.width);
+        setTableWidth((prev) => (prev !== w ? w : prev)); // update only on real change
       }
     });
 
@@ -405,12 +430,20 @@ export function ScrollableDataTable<TData extends TBaseData>({
     getRowId,
   });
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!tableContainerRef.current || !table || !tableWidth) {
       return;
     }
     const columns = table.getAllColumns();
 
+    // Skip sizing if no columns have ratios defined
+    const hasRatios = columns.some(
+      (c) => (c.columnDef.meta?.sizeRatio ?? 0) > 0
+    );
+    if (!hasRatios) {
+      return;
+    }
+
     // Calculate ideal widths and handle minimums
     const idealSizing = columns.reduce(
       (acc, column) => {
@@ -419,7 +452,8 @@ export function ScrollableDataTable<TData extends TBaseData>({
           Math.floor((ratio / 100) * tableWidth),
           MIN_COLUMN_WIDTH
         );
-        return { ...acc, [column.id]: calculated };
+        acc[column.id] = calculated;
+        return acc;
       },
       {} as Record<string, number>
     );
@@ -439,8 +473,13 @@ export function ScrollableDataTable<TData extends TBaseData>({
 
       idealSizing[adjustColumnId] += widthDifference;
     }
-    table.setColumnSizing(idealSizing);
-  }, [table, tableWidth]);
+
+    // Only set when sizing actually changes
+    const currentSizing = table.getState().columnSizing;
+    if (!shallowEqualSizing(idealSizing, currentSizing)) {
+      table.setColumnSizing(idealSizing);
+    }
+  }, [tableWidth]); // intentionally remove `table` from deps
 
   // Get the current column sizing from the table for rendering
   const columnSizing = table.getState().columnSizing;

package/src/components/NavigationList.tsx

@@ -41,18 +41,13 @@ const NavigationListItemStyles = cva(
   }
 );
 
-interface NavigationListProps {
-  viewportRef?: React.RefObject<HTMLDivElement>;
-}
 const NavigationList = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> &
-    NavigationListProps
->(({ className, children, viewportRef, ...props }, ref) => {
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => {
   return (
     <ScrollArea
       ref={ref}
-      viewportRef={viewportRef}
       className={cn(className, "s-transition-all s-duration-300")}
       {...props}
     >

package/src/components/ScrollArea.tsx

@@ -14,7 +14,6 @@ interface ScrollAreaProps
     active?: string;
     inactive?: string;
   };
-  viewportRef?: React.RefObject<HTMLDivElement>;
 }
 
 const ScrollArea = React.forwardRef<
@@ -30,12 +29,11 @@ const ScrollArea = React.forwardRef<
       scrollBarClassName,
       viewportClassName,
       scrollStyles,
-      viewportRef,
       ...props
     },
     ref
   ) => {
-    const localViewportRef = React.useRef<HTMLDivElement>(null);
+    const viewportRef = React.useRef<HTMLDivElement>(null);
     const [isScrolled, setIsScrolled] = React.useState(false);
 
     const hasCustomScrollBar = useMemo(
@@ -52,13 +50,9 @@ const ScrollArea = React.forwardRef<
     const shouldHideDefaultScrollBar = hideScrollBar || hasCustomScrollBar;
 
     const handleScroll = React.useCallback(() => {
-      if (viewportRef && viewportRef.current) {
+      if (viewportRef.current) {
         setIsScrolled(viewportRef.current.scrollTop > 0);
       }
-
-      if (localViewportRef.current) {
-        setIsScrolled(localViewportRef.current.scrollTop > 0);
-      }
     }, []);
 
     return (
@@ -72,7 +66,7 @@ const ScrollArea = React.forwardRef<
         {...props}
       >
         <ScrollAreaPrimitive.Viewport
-          ref={viewportRef || localViewportRef}
+          ref={viewportRef}
           onScroll={handleScroll}
           className={cn(
             "s-h-full s-w-full s-rounded-[inherit]",

package/src/components/Spinner.tsx

@@ -13,7 +13,7 @@ import animLightLG from "@sparkle/lottie/spinnerLightLG";
 import animLightXS from "@sparkle/lottie/spinnerLightXS";
 
 type SpinnerSizeType = (typeof SPINNER_SIZES)[number];
-const SPINNER_SIZES = ["xs", "sm", "md", "lg", "xl", "2xl"] as const;
+const SPINNER_SIZES = ["xs", "sm", "md", "lg", "xl", "xxl"] as const;
 
 type SpinnerVariant =
   | "mono"
@@ -43,7 +43,7 @@ const pxSizeClasses: Record<SpinnerSizeType, string> = {
   md: "24",
   lg: "32",
   xl: "128",
-  "2xl": "192",
+  xxl: "192",
 };
 
 type LottieColorType = [number, number, number, number];
@@ -111,7 +111,7 @@ const Spinner: React.FC<SpinnerProps> = ({ size = "md", variant = "mono" }) => {
         anim = animLightXS;
         break;
       case "xl":
-      case "2xl":
+      case "xxl":
         anim = animLightLG;
         break;
       default:
@@ -139,7 +139,7 @@ const Spinner: React.FC<SpinnerProps> = ({ size = "md", variant = "mono" }) => {
         anim = animColorXS;
         break;
       case "xl":
-      case "2xl":
+      case "xxl":
         anim = animColorLG;
         break;
       default:
@@ -162,7 +162,7 @@ const Spinner: React.FC<SpinnerProps> = ({ size = "md", variant = "mono" }) => {
         anim = animLightXS;
         break;
       case "xl":
-      case "2xl":
+      case "xxl":
         anim = animLightLG;
         break;
       default:
@@ -185,7 +185,7 @@ const Spinner: React.FC<SpinnerProps> = ({ size = "md", variant = "mono" }) => {
         anim = animDarkXS;
         break;
       case "xl":
-      case "2xl":
+      case "xxl":
         anim = animDarkLG;
         break;
       default:
@@ -210,7 +210,7 @@ const Spinner: React.FC<SpinnerProps> = ({ size = "md", variant = "mono" }) => {
       darkAnim = animDarkXS;
       break;
     case "xl":
-    case "2xl":
+    case "xxl":
       lightAnim = animLightLG;
       darkAnim = animDarkLG;
       break;

package/src/components/ToolCard.tsx

@@ -15,13 +15,10 @@ export interface ToolCardProps {
   isSelected: boolean;
   canAdd: boolean;
   cantAddReason?: string;
-  toolInfo?: { label: string; onClick: () => void };
   onClick?: () => void;
   className?: string;
-  cardContainerClassName?: string;
   mountPortal?: boolean;
   mountPortalContainer?: HTMLElement;
-  descriptionLineClamp?: number;
 }
 
 export const ToolCard = React.forwardRef<HTMLDivElement, ToolCardProps>(
@@ -33,13 +30,10 @@ export const ToolCard = React.forwardRef<HTMLDivElement, ToolCardProps>(
       isSelected,
       canAdd,
       cantAddReason,
-      toolInfo,
       onClick,
       className,
-      cardContainerClassName,
       mountPortal,
       mountPortalContainer,
-      descriptionLineClamp = 2,
     },
     ref
   ) => {
@@ -49,63 +43,44 @@ export const ToolCard = React.forwardRef<HTMLDivElement, ToolCardProps>(
         variant={isSelected ? "secondary" : "primary"}
         onClick={onClick}
         disabled={!canAdd}
-        containerClassName={cardContainerClassName}
-        className={cn("s-p-3", className)}
+        className={cn("s-h-24 s-p-3", className)}
       >
-        <div className="s-flex s-h-full s-w-full s-flex-col s-justify-between">
-          <div className="s-flex s-flex-col">
-            <div className="s-mb-2 s-flex s-items-center s-justify-between s-gap-2">
-              <div className="s-flex s-items-center s-gap-2">
-                <Avatar icon={icon} size="sm" />
-                <span className="s-text-sm s-font-medium">{label}</span>
-                {isSelected && (
-                  <Chip
-                    size="xs"
-                    color="green"
-                    label="ADDED"
-                    className={cn(FADE_TRANSITION_CLASSES, "s-opacity-100")}
-                  />
-                )}
-              </div>
-              <div className="s-flex s-flex-shrink-0 s-items-center s-gap-2">
-                {canAdd && (
-                  <Button
-                    size="xs"
-                    variant="outline"
-                    icon={PlusIcon}
-                    label="Add"
-                    className={cn(FADE_TRANSITION_CLASSES, "s-flex-shrink-0")}
-                  />
-                )}
-                {cantAddReason && (
-                  <div className="s-flex-shrink-0 s-text-xs s-italic s-text-muted-foreground dark:s-text-muted-foreground-night">
-                    {cantAddReason}
-                  </div>
-                )}
-              </div>
+        <div className="s-flex s-w-full s-flex-col">
+          <div className="s-mb-2 s-flex s-items-start s-justify-between s-gap-2">
+            <div className="s-flex s-items-center s-gap-2">
+              <Avatar icon={icon} size="sm" />
+              <span className="s-text-sm s-font-medium">{label}</span>
+              {isSelected && (
+                <Chip
+                  size="xs"
+                  color="green"
+                  label="ADDED"
+                  className={cn(FADE_TRANSITION_CLASSES, "s-opacity-100")}
+                />
+              )}
             </div>
-            <TruncatedText
-              className="s-text-sm s-text-muted-foreground dark:s-text-muted-foreground-night"
-              mountPortal={mountPortal}
-              mountPortalContainer={mountPortalContainer}
-              lineClamp={descriptionLineClamp}
-            >
-              {description}
-            </TruncatedText>
+            {canAdd && (
+              <Button
+                size="xs"
+                variant="outline"
+                icon={PlusIcon}
+                label="Add"
+                className={cn(FADE_TRANSITION_CLASSES, "s-flex-shrink-0")}
+              />
+            )}
+            {cantAddReason && (
+              <div className="s-flex-shrink-0 s-text-xs s-italic s-text-muted-foreground dark:s-text-muted-foreground-night">
+                {cantAddReason}
+              </div>
+            )}
           </div>
-          {toolInfo && (
-            <div>
-              <a
-                onClick={(e) => {
-                  e.stopPropagation();
-                  toolInfo.onClick();
-                }}
-                className="hover:s-underline-offset-2 dark:s-text-muted-foreground-night s-cursor-pointer s-text-sm s-font-semibold s-text-muted-foreground hover:s-text-highlight-light hover:s-underline dark:hover:s-text-highlight-light-night"
-              >
-                {toolInfo.label}
-              </a>
-            </div>
-          )}
+          <TruncatedText 
+            className="s-text-sm s-text-muted-foreground dark:s-text-muted-foreground-night"
+            mountPortal={mountPortal}
+            mountPortalContainer={mountPortalContainer}
+          >
+            {description}
+          </TruncatedText>
         </div>
       </Card>
     );

package/src/components/Tooltip.tsx

@@ -20,58 +20,47 @@ interface TooltipContentProps
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
   TooltipContentProps
->(
-  (
-    {
-      className,
-      sideOffset = 4,
-      mountPortal = true,
-      mountPortalContainer,
-      ...props
-    },
-    ref
-  ) => {
-    const content = (
-      <TooltipPrimitive.Content
-        ref={ref}
-        sideOffset={sideOffset}
-        className={classNames(
-          "s-z-50 s-max-w-sm s-overflow-hidden s-whitespace-pre-wrap s-break-words s-rounded-md s-border",
-          "s-bg-background dark:s-bg-background-night",
-          "s-text-foreground dark:s-text-foreground-night",
-          "s-border-border dark:s-border-border-night",
-          "s-px-3 s-py-1.5 s-text-sm s-shadow-md",
-          "s-animate-in s-fade-in-0 s-zoom-in-95",
-          "data-[state=closed]:s-animate-out data-[state=closed]:s-fade-out-0 data-[state=closed]:s-zoom-out-95 data-[side=bottom]:s-slide-in-from-top-2 data-[side=left]:s-slide-in-from-right-2 data-[side=right]:s-slide-in-from-left-2 data-[side=top]:s-slide-in-from-bottom-2",
-          className || ""
-        )}
-        {...props}
-      />
-    );
+>(({ className, sideOffset = 4, mountPortal = true, mountPortalContainer, ...props }, ref) => {
+  const content = (
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={classNames(
+        "s-z-50 s-max-w-sm s-overflow-hidden s-whitespace-pre-wrap s-break-words s-rounded-md s-border",
+        "s-bg-background dark:s-bg-background-night",
+        "s-text-foreground dark:s-text-foreground-night",
+        "s-border-border dark:s-border-border-night",
+        "s-px-3 s-py-1.5 s-text-sm s-shadow-md",
+        "s-animate-in s-fade-in-0 s-zoom-in-95",
+        "data-[state=closed]:s-animate-out data-[state=closed]:s-fade-out-0 data-[state=closed]:s-zoom-out-95 data-[side=bottom]:s-slide-in-from-top-2 data-[side=left]:s-slide-in-from-right-2 data-[side=right]:s-slide-in-from-left-2 data-[side=top]:s-slide-in-from-bottom-2",
+        className || ""
+      )}
+      {...props}
+    />
+  );
 
-    const [container, setContainer] = useState<Element | undefined>(
-      mountPortalContainer
-    );
+  const [container, setContainer] = useState<Element | undefined>(
+    mountPortalContainer
+  );
 
-    useEffect(() => {
-      if (mountPortal && !container) {
-        const dialogElements = document.querySelectorAll(
-          ".s-sheet[role=dialog][data-state=open]"
-        );
-        const defaultContainer = dialogElements[dialogElements.length - 1];
-        setContainer(defaultContainer);
-      }
-    }, [mountPortal, container]);
+  useEffect(() => {
+    if (mountPortal && !container) {
+      const dialogElements = document.querySelectorAll(
+        ".s-sheet[role=dialog][data-state=open]"
+      );
+      const defaultContainer = dialogElements[dialogElements.length - 1];
+      setContainer(defaultContainer);
+    }
+  }, [mountPortal, container]);
 
-    return mountPortal ? (
-      <TooltipPrimitive.Portal container={container}>
-        {content}
-      </TooltipPrimitive.Portal>
-    ) : (
-      content
-    );
-  }
-);
+  return mountPortal ? (
+    <TooltipPrimitive.Portal container={container}>
+      {content}
+    </TooltipPrimitive.Portal>
+  ) : (
+    content
+  );
+});
 
 interface TooltipProps extends TooltipContentProps {
   trigger: React.ReactNode;