fix: preexisting bugs surfaced in agent review

src/components/ExternalPill/index.tsx

@@ -45,6 +45,7 @@ export function ExternalPill({
     <a
       href={href}
       target={target}
+      rel={target === "_blank" ? "noopener noreferrer" : undefined}
       title={title}
       className={cn(
         "inline-flex flex-row items-center gap-1.5 rounded-xl border px-3.5 py-2 text-zinc-700 transition-colors duration-500 hover:border-zinc-300 hover:bg-zinc-50 hover:text-black dark:text-zinc-300 dark:hover:border-zinc-700 dark:hover:bg-zinc-900 hover:dark:text-white",

src/components/KeyHint/index.tsx

@@ -1,5 +1,6 @@
 import { cn } from "@/lib/utils";
 import { Icon } from "@/components/Icon";
+import React from "react";
 
 type Modifier = "shift" | "ctrlorcommand" | "alt" | "meta" | "esc";
 
@@ -46,21 +47,21 @@ function KeyHintKeys({ modifiers, keys }: KeyHintItemProps) {
   return (
     <div className="flex flex-row items-center gap-1">
       {modifiers.map((modifier, index) => (
-        <>
+        <React.Fragment key={`${modifier}-${index}`}>
           <Key value={modifierMap[modifier]} />
           {index < modifiers.length - 1 && (
             <span className="text-sm text-body-muted">+</span>
           )}
-        </>
+        </React.Fragment>
       ))}
       {keys.length > 0 && <span className="text-sm text-body-muted">+</span>}
       {keys.map((key, index) => (
-        <>
+        <React.Fragment key={`${key}-${index}`}>
           <Key value={key.toUpperCase()} />
           {index < keys.length - 1 && (
             <span className="text-sm text-body-muted">+</span>
           )}
-        </>
+        </React.Fragment>
       ))}
     </div>
   );
@@ -96,13 +97,14 @@ export function KeyHint({
       <div className="flex w-full flex-row items-center self-start border-b px-2.5 py-0.5 text-[10px] font-semibold tracking-wide text-body-muted uppercase select-none dark:text-body-muted/80">
         <div>{titleText}</div>
         {dismissable && (
-          <div
+          <button
+            type="button"
             className="ml-auto cursor-pointer hover:text-foreground"
             onClick={onDismiss}
-            title="Close"
+            aria-label="Dismiss"
           >
             <Icon name="x" className="h-3.5 w-3.5" />
-          </div>
+          </button>
         )}
       </div>
       <div className="flex flex-row items-center gap-1 px-4 py-3.5">

src/components/LanguageIndicator/index.tsx

@@ -54,7 +54,7 @@ export function LanguageIndicator({
   indicatorOnly = false,
 }: LanguageIndicatorProps) {
   return (
-    <div className={cn("gap flex items-center gap-2 select-none", className)}>
+    <div className={cn("flex items-center gap-2 select-none", className)}>
       <div
         className={`mx-1 h-2 w-2 rounded-full ${languageColorMap[language]}`}
       />

src/components/SegmentedButton/index.tsx

@@ -35,7 +35,7 @@ const SegmentedButtonBase = ({ children, className }: SegmentedButtonProps) => {
           },
         );
       }),
-    [children],
+    [children, hoveredId],
   );
 
   return (

src/components/Table/context/tableProvider.tsx

@@ -28,7 +28,7 @@ export function TableProvider({
         return newSet;
       });
     },
-    [expandedRowKeys, setExpandedRowKeys],
+    [setExpandedRowKeys],
   );
 
   return (

src/components/Tabs/index.tsx

@@ -48,11 +48,11 @@ export function Tabs<I extends string>({
   className,
 }: TabsProps<I>) {
   const [activeTab, setActiveTab] = useState<I>(
-    selectedTab || children[0].props.id,
+    selectedTab ?? children[0].props.id,
   );
 
   useEffect(() => {
-    setActiveTab(selectedTab || children[0].props.id);
+    setActiveTab(selectedTab ?? children[0].props.id);
   }, [selectedTab]);
 
   const validChildren = React.Children.toArray(children).filter(

src/components/UserAvatar/index.tsx

@@ -29,7 +29,7 @@ function getFallbackColor(name: string | undefined) {
   const firstLetter = name[0].toLowerCase();
 
   const index = firstLetter.charCodeAt(0) - "a".charCodeAt(0);
-  return fallbackColors[index % fallbackColors.length];
+  return fallbackColors[Math.abs(index) % fallbackColors.length];
 }
 
 export function UserAvatar({

src/components/WorkspaceSelector/SearchBox.tsx

@@ -29,6 +29,8 @@ export function SearchBox({
         {search && (
           <button
             className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-sm text-muted-foreground hover:bg-accent"
+            type="button"
+            aria-label="Clear search"
             onClick={() => setSearch("")}
           >
             <Icon name="x" size="small" />