From e96cbb0d3915a67c05424d255cc997437f6ea2d1 Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Mon, 28 Sep 2026 11:35:26 -0500
Subject: [PATCH] fix(desktop): bots plugin uses Tip and Codicon over native
 title and glyphs

Avatar and chip rows move their hints into Tip; rows whose text or
aria-expanded already says it drop the title. The installed check is a
Codicon.
---
 .../src/plugins/hermes-bots/avatar-picker.tsx | 85 +++++++++----------
 .../src/plugins/hermes-bots/create-dialog.tsx | 26 +++---
 apps/desktop/src/plugins/hermes-bots/cron.tsx |  1 -
 .../plugins/hermes-bots/group-chat-view.tsx   |  1 -
 .../src/plugins/hermes-bots/skills-hub.tsx    |  7 +-
 5 files changed, 59 insertions(+), 61 deletions(-)

diff --git a/apps/desktop/src/plugins/hermes-bots/avatar-picker.tsx b/apps/desktop/src/plugins/hermes-bots/avatar-picker.tsx
index a997c1675a..f0f8772ad5 100644
--- a/apps/desktop/src/plugins/hermes-bots/avatar-picker.tsx
+++ b/apps/desktop/src/plugins/hermes-bots/avatar-picker.tsx
@@ -14,6 +14,7 @@ import {
   RowButton,
   SegmentedControl,
   Textarea,
+  Tip,
   useValue
 } from '@hermes/plugin-sdk'
 import { useState } from 'react'
@@ -147,33 +148,30 @@ export function AvatarPicker({ shape, color, image, onShape, onColor, onImage, g
                 {/* Silhouette pins: Auto (name decides) + the six blob kinds. */}
                 <div className="grid grid-cols-4 justify-items-center gap-1.5">
                   {['', ...BLOB_KINDS].map(k => (
-                    <RowButton
-                      className={cn(
-                        'flex items-center justify-center rounded-md transition-colors hover:bg-(--chrome-action-hover)',
-                        k === kind && !image && 'ring-1 ring-(--ui-accent)'
-                      )}
-                      key={k || 'auto'}
-                      onClick={() => {
-                        onImage(null)
-                        onShape(blobShapeString(seedPart, k))
-                      }}
-                      style={{
-                        width: 44,
-                        height: 44
-                      }}
-                      title={k || b.editor.autoHint}
-                    >
-                      {k ? (
-                        <BotFace
-                          color={avatarColor(color, pickerName)}
-                          name={pickerName}
-                          shape={blobShapeString(seedPart, k)}
-                          size={32}
-                        />
-                      ) : (
-                        <span className="text-[0.6rem] text-(--ui-text-tertiary)">{b.editor.auto}</span>
-                      )}
-                    </RowButton>
+                    <Tip key={k || 'auto'} label={k || b.editor.autoHint}>
+                      <RowButton
+                        aria-label={k || b.editor.autoHint}
+                        className={cn(
+                          'flex size-11 items-center justify-center rounded-md transition-colors hover:bg-(--chrome-action-hover)',
+                          k === kind && !image && 'ring-1 ring-(--ui-accent)'
+                        )}
+                        onClick={() => {
+                          onImage(null)
+                          onShape(blobShapeString(seedPart, k))
+                        }}
+                      >
+                        {k ? (
+                          <BotFace
+                            color={avatarColor(color, pickerName)}
+                            name={pickerName}
+                            shape={blobShapeString(seedPart, k)}
+                            size={32}
+                          />
+                        ) : (
+                          <span className="text-[0.6rem] text-(--ui-text-tertiary)">{b.editor.auto}</span>
+                        )}
+                      </RowButton>
+                    </Tip>
                   ))}
                 </div>
                 <div className="flex items-center gap-1">
@@ -218,24 +216,21 @@ export function AvatarPicker({ shape, color, image, onShape, onColor, onImage, g
           <div className="grid justify-items-center gap-3">
             <div className="grid grid-cols-4 justify-items-center gap-1.5">
               {(blobatarSvg ? ['blobatar', ...AVATAR_PICKER_SHAPES] : AVATAR_PICKER_SHAPES).map(s => (
-                <RowButton
-                  className={cn(
-                    'flex items-center justify-center rounded-md transition-colors hover:bg-(--chrome-action-hover)',
-                    s === shape && !image && 'ring-1 ring-(--ui-accent)'
-                  )}
-                  key={s}
-                  onClick={() => {
-                    onImage(null)
-                    onShape(s)
-                  }}
-                  style={{
-                    width: 44,
-                    height: 44
-                  }}
-                  title={s === 'blobatar' ? b.avatar.blobFromName : undefined}
-                >
-                  <BotFace color={avatarColor(color, pickerName)} name={pickerName} shape={s} size={32} />
-                </RowButton>
+                <Tip key={s} label={s === 'blobatar' ? b.avatar.blobFromName : undefined}>
+                  <RowButton
+                    aria-label={s === 'blobatar' ? b.avatar.blobFromName : s}
+                    className={cn(
+                      'flex size-11 items-center justify-center rounded-md transition-colors hover:bg-(--chrome-action-hover)',
+                      s === shape && !image && 'ring-1 ring-(--ui-accent)'
+                    )}
+                    onClick={() => {
+                      onImage(null)
+                      onShape(s)
+                    }}
+                  >
+                    <BotFace color={avatarColor(color, pickerName)} name={pickerName} shape={s} size={32} />
+                  </RowButton>
+                </Tip>
               ))}
             </div>
             <ColorSwatches
diff --git a/apps/desktop/src/plugins/hermes-bots/create-dialog.tsx b/apps/desktop/src/plugins/hermes-bots/create-dialog.tsx
index 00e2fb2bb2..5ddb7e6c39 100644
--- a/apps/desktop/src/plugins/hermes-bots/create-dialog.tsx
+++ b/apps/desktop/src/plugins/hermes-bots/create-dialog.tsx
@@ -33,6 +33,7 @@ import {
   SelectTrigger,
   SelectValue,
   Textarea,
+  Tip,
   useI18n,
   useValue
 } from '@hermes/plugin-sdk'
@@ -1259,18 +1260,19 @@ export function CreateGroupChatDialog({ open, roster, onClose, onCreated }: Crea
                 key={botRosterKey(bot)}
                 variant="muted"
               >
-                <RowButton
-                  onClick={() =>
-                    setChecked(prev => ({
-                      ...prev,
-                      [botRosterKey(bot)]: false
-                    }))
-                  }
-                  title={b.group.removeFromSelection}
-                >
-                  {displayName(bot, botRosterMeta(bot, allMeta))}
-                  <Codicon className="text-[0.6rem]" name="close" />
-                </RowButton>
+                <Tip label={b.group.removeFromSelection}>
+                  <RowButton
+                    onClick={() =>
+                      setChecked(prev => ({
+                        ...prev,
+                        [botRosterKey(bot)]: false
+                      }))
+                    }
+                  >
+                    {displayName(bot, botRosterMeta(bot, allMeta))}
+                    <Codicon className="text-[0.6rem]" name="close" />
+                  </RowButton>
+                </Tip>
               </Badge>
             ))}
           </div>
diff --git a/apps/desktop/src/plugins/hermes-bots/cron.tsx b/apps/desktop/src/plugins/hermes-bots/cron.tsx
index 9f40b76117..166aac1a0b 100644
--- a/apps/desktop/src/plugins/hermes-bots/cron.tsx
+++ b/apps/desktop/src/plugins/hermes-bots/cron.tsx
@@ -554,7 +554,6 @@ export function RoutineRow({ job, onOpen, owner }: RoutineRowProps) {
         <RowButton
           className="flex min-w-0 flex-1 items-center gap-2 text-left transition-colors hover:text-foreground"
           onClick={() => onOpen?.(job)}
-          title={c.manage}
         >
           {/* `--ui-success` rather than a literal emerald: the token is rotated
               toward the accent, so a column of active dots can't fight the
diff --git a/apps/desktop/src/plugins/hermes-bots/group-chat-view.tsx b/apps/desktop/src/plugins/hermes-bots/group-chat-view.tsx
index e417eef23f..2a9aafe9b6 100644
--- a/apps/desktop/src/plugins/hermes-bots/group-chat-view.tsx
+++ b/apps/desktop/src/plugins/hermes-bots/group-chat-view.tsx
@@ -880,7 +880,6 @@ export function GroupChatWorkspace({ group, members, onBack, visible = true }: G
           aria-expanded={activityOpen}
           className="flex min-w-0 flex-1 items-center gap-1.5 px-2.5 py-1 text-left text-[0.7rem] text-(--ui-text-quaternary) transition-colors hover:text-foreground"
           onClick={() => setActivityOpen(prev => !prev)}
-          title={activityOpen ? b.group.hideActivity : b.group.showActivity}
         >
           <Codicon className="shrink-0 text-[0.65rem]" name={activityOpen ? 'chevron-down' : 'chevron-right'} />
           <span className="shrink-0 font-medium">{b.group.activity}</span>
diff --git a/apps/desktop/src/plugins/hermes-bots/skills-hub.tsx b/apps/desktop/src/plugins/hermes-bots/skills-hub.tsx
index cecaa0d87a..4c09bc0ec9 100644
--- a/apps/desktop/src/plugins/hermes-bots/skills-hub.tsx
+++ b/apps/desktop/src/plugins/hermes-bots/skills-hub.tsx
@@ -6,7 +6,7 @@
  * it reaches back into neither.
  */
 
-import { Button, host, Input, useI18n } from '@hermes/plugin-sdk'
+import { Button, Codicon, host, Input, useI18n } from '@hermes/plugin-sdk'
 import { useEffect, useRef, useState } from 'react'
 
 import { useBots } from './i18n'
@@ -244,7 +244,10 @@ export function HubSkillsSection({ bot, onInstalled }: HubSkillsSectionProps) {
                   ) : null}
                 </div>
                 {installed[r.name] ? (
-                  <span className="shrink-0 text-[0.65rem] text-(--ui-text-tertiary)">✓ {h.installed}</span>
+                  <span className="flex shrink-0 items-center gap-0.5 text-[0.65rem] text-(--ui-text-tertiary)">
+                    <Codicon name="check" size="0.65rem" />
+                    {h.installed}
+                  </span>
                 ) : (
                   <Button
                     aria-label={b.tools.installHint(r.name)}