fix: show disabled action reasons via tooltips

web/frontend/src/components/agent/hub/market-skill-card.tsx

@@ -18,6 +18,11 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
 
 export function MarketSkillCard({
   result,
@@ -37,11 +42,15 @@ export function MarketSkillCard({
   const { t } = useTranslation()
 
   const installDisabledReason = (() => {
-    if (installPending) return t("pages.agent.skills.marketplace_installDisabled.installing")
-    if (result.installed) return t("pages.agent.skills.marketplace_installDisabled.installed")
-    if (!canInstall) return t("pages.agent.skills.marketplace_installDisabled.cannotInstall")
+    if (installPending)
+      return t("pages.agent.skills.marketplace_installDisabled.installing")
+    if (result.installed)
+      return t("pages.agent.skills.marketplace_installDisabled.installed")
+    if (!canInstall)
+      return t("pages.agent.skills.marketplace_installDisabled.cannotInstall")
     return t("pages.agent.skills.marketplace_install_action")
   })()
+  const installDisabled = !canInstall || result.installed || installPending
 
   return (
     <Card
@@ -93,13 +102,18 @@ export function MarketSkillCard({
             ) : null}
           </div>
           <div className="flex shrink-0 flex-col items-end gap-2">
+            <Tooltip delayDuration={installDisabled ? 0 : 700}>
+              <TooltipTrigger asChild>
+                <span
+                  className={installDisabled ? "cursor-not-allowed" : undefined}
+                  tabIndex={installDisabled ? 0 : undefined}
+                >
                   <Button
                     size="sm"
                     variant={result.installed ? "secondary" : "default"}
                     className="shadow-sm transition-all"
-              disabled={!canInstall || result.installed || installPending}
+                    disabled={installDisabled}
                     onClick={onInstall}
-              title={installDisabledReason}
                   >
                     {installPending ? (
                       <IconLoader2 className="size-4 animate-spin" />
@@ -112,6 +126,10 @@ export function MarketSkillCard({
                       ? t("pages.agent.skills.marketplace_installed")
                       : t("pages.agent.skills.marketplace_install_action")}
                   </Button>
+                </span>
+              </TooltipTrigger>
+              <TooltipContent>{installDisabledReason}</TooltipContent>
+            </Tooltip>
             {result.installed && installedSkill ? (
               <Button
                 variant="outline"

web/frontend/src/components/models/model-card.tsx

@@ -10,6 +10,11 @@ import { useTranslation } from "react-i18next"
 
 import type { ModelInfo } from "@/api/models"
 import { Button } from "@/components/ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
 
 interface ModelCardProps {
   model: ModelInfo
@@ -35,7 +40,8 @@ export function ModelCard({
 
   const setDefaultDisabledReason = (() => {
     if (settingDefault) return t("models.action.setDefaultDisabled.setting")
-    if (!model.available) return t("models.action.setDefaultDisabled.unavailable")
+    if (!model.available)
+      return t("models.action.setDefaultDisabled.unavailable")
     if (model.is_default) return t("models.action.setDefaultDisabled.isDefault")
     if (model.is_virtual) return t("models.action.setDefaultDisabled.isVirtual")
     return t("models.action.setDefault")
@@ -44,6 +50,7 @@ export function ModelCard({
   const deleteDisabledReason = model.is_default
     ? t("models.action.deleteDisabled.isDefault")
     : t("models.action.delete")
+  const deleteDisabled = model.is_default
 
   return (
     <div
@@ -93,12 +100,21 @@ export function ModelCard({
               <IconStarFilled className="size-3.5" />
             </span>
           ) : (
+            <Tooltip delayDuration={!canSetDefault || settingDefault ? 0 : 700}>
+              <TooltipTrigger asChild>
+                <span
+                  className={
+                    !canSetDefault || settingDefault
+                      ? "cursor-not-allowed"
+                      : undefined
+                  }
+                  tabIndex={!canSetDefault || settingDefault ? 0 : undefined}
+                >
                   <Button
                     variant="ghost"
                     size="icon-sm"
                     onClick={() => onSetDefault(model)}
                     disabled={settingDefault || !canSetDefault}
-              title={setDefaultDisabledReason}
                   >
                     {settingDefault ? (
                       <IconLoader2 className="size-3.5 animate-spin" />
@@ -106,6 +122,10 @@ export function ModelCard({
                       <IconStar className="size-3.5" />
                     )}
                   </Button>
+                </span>
+              </TooltipTrigger>
+              <TooltipContent>{setDefaultDisabledReason}</TooltipContent>
+            </Tooltip>
           )}
 
           <Button
@@ -117,16 +137,25 @@ export function ModelCard({
             <IconEdit className="size-3.5" />
           </Button>
 
+          <Tooltip delayDuration={deleteDisabled ? 0 : 700}>
+            <TooltipTrigger asChild>
+              <span
+                className={deleteDisabled ? "cursor-not-allowed" : undefined}
+                tabIndex={deleteDisabled ? 0 : undefined}
+              >
                 <Button
                   variant="ghost"
                   size="icon-sm"
                   onClick={() => onDelete(model)}
-            disabled={model.is_default}
-            title={deleteDisabledReason}
+                  disabled={deleteDisabled}
                   className="text-muted-foreground hover:text-destructive hover:bg-destructive/10"
                 >
                   <IconTrash className="size-3.5" />
                 </Button>
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>{deleteDisabledReason}</TooltipContent>
+          </Tooltip>
         </div>
       </div>