From 4c9fbf1f647c83179af1c2acd78eded04ef07fe8 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Tue, 22 Sep 2026 12:22:16 -0700
Subject: [PATCH] refactor(web): InlineButton underlines on hover and takes a
 tone (#13034)

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
---
 apps/web/src/components/Sidebar.tsx           |  2 +-
 .../src/components/ThreadStatusIndicators.tsx | 52 ++++++++++---------
 .../pullRequest/PullRequestGhosts.tsx         |  5 +-
 .../components/settings/ExpandableText.tsx    |  3 +-
 .../settings/ProcessSignalActions.tsx         |  4 +-
 .../settings/SettingInheritance.tsx           | 10 +---
 .../sidebar/SidebarThreadUndoNotice.tsx       |  6 +--
 apps/web/src/components/ui/button.tsx         | 43 +++++++++------
 scripts/lint-restyle-ceiling.ts               |  2 +-
 9 files changed, 65 insertions(+), 62 deletions(-)

diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index a4dc6820d5183d38aa6270984432cd0242b56008..8740949ed0bfa94193d1d0fc33e17cf300f8a772 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -1374,7 +1374,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
     if (!showSnoozeButton) setSnoozeMenuOpen(false);
   }, [showSnoozeButton]);
   const handlePrClick = useCallback(
-    (event: ReactMouseEvent<HTMLAnchorElement>) => {
+    (event: ReactMouseEvent<HTMLElement>) => {
       const url = pr?.url ?? currentLinkedPr?.url;
       if (!url) return;
       const openedInRightPanel = openPrLink(
diff --git a/apps/web/src/components/ThreadStatusIndicators.tsx b/apps/web/src/components/ThreadStatusIndicators.tsx
index 5b2945042ac27e4c3ef0637b6cdc4cde8a266d8c..8b27b74fd0a5dde95ba36546f7cfa482e5767a76 100644
--- a/apps/web/src/components/ThreadStatusIndicators.tsx
+++ b/apps/web/src/components/ThreadStatusIndicators.tsx
@@ -16,7 +16,7 @@ import {
 } from "@t3tools/shared/threadPullRequests";
 import { FolderGit2Icon, TerminalIcon } from "lucide-react";
 import { useMemo, type MouseEvent } from "react";
-import { buttonVariants, InlineButton } from "./ui/button";
+import { Button, InlineButton } from "./ui/button";
 import { cn } from "../lib/utils";
 import { useEnvironment, usePrimaryEnvironmentId } from "../state/environments";
 import { EnvironmentMachineIcon } from "./EnvironmentMachineIcon";
@@ -207,50 +207,52 @@ export function ThreadPullRequestBadgeControl({
   url?: string | undefined;
   status: PrStatusIndicator | null;
   onOpenStack: () => void;
-  onOpenPullRequest: (event: MouseEvent<HTMLAnchorElement>) => void;
+  onOpenPullRequest: (event: MouseEvent<HTMLElement>) => void;
 }) {
   const presentation = resolveThreadPullRequestBadgePresentation({ badge, number, url, status });
   if (presentation === null) return null;
   const isStack = badge?.kind === "stack";
-  const className = cn(
-    variant === "ghost"
-      ? buttonVariants({ variant: "ghost", size: "xs" })
-      : "inline-flex shrink-0 cursor-pointer items-center gap-0.5 whitespace-nowrap border-b border-transparent hover:border-current focus-visible:outline-2 focus-visible:outline-ring",
-    "text-xs tabular-nums",
-    variant === "ghost" &&
-      "font-normal text-xs! active:scale-100 [--control-icon-color:currentColor]",
-    presentation.toneClassName,
-  );
   const content = (
     <>
       <presentation.Icon aria-hidden className="size-3 shrink-0" />
       {presentation.text}
     </>
   );
+  const linkProps = isStack
+    ? {
+        onClick: (event: MouseEvent<HTMLElement>) => {
+          event.preventDefault();
+          event.stopPropagation();
+          onOpenStack();
+        },
+      }
+    : { onClick: onOpenPullRequest };
+  const element = isStack ? (
+    <button type="button" />
+  ) : (
+    <a href={url} target="_blank" rel="noopener noreferrer" />
+  );
   return (
     <Tooltip>
       <TooltipTrigger
         render={
-          isStack ? (
-            <InlineButton
-              className={className}
+          variant === "ghost" ? (
+            <Button
+              render={element}
+              variant="ghost"
+              size="xs"
+              className={presentation.toneClassName}
               aria-label={presentation.label}
               onPointerDown={(event) => event.stopPropagation()}
-              onClick={(event) => {
-                event.preventDefault();
-                event.stopPropagation();
-                onOpenStack();
-              }}
+              {...linkProps}
             />
           ) : (
-            <a
-              href={url}
-              target="_blank"
-              rel="noopener noreferrer"
-              className={className}
+            <InlineButton
+              render={element}
+              className={presentation.toneClassName}
               aria-label={presentation.label}
               onPointerDown={(event) => event.stopPropagation()}
-              onClick={onOpenPullRequest}
+              {...linkProps}
             />
           )
         }
diff --git a/apps/web/src/components/pullRequest/PullRequestGhosts.tsx b/apps/web/src/components/pullRequest/PullRequestGhosts.tsx
index d30fe5109703fd30042d06e36a9234039ecaa70f..00190c6d29dd8d55da3815a3ab768481f03f739d 100644
--- a/apps/web/src/components/pullRequest/PullRequestGhosts.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestGhosts.tsx
@@ -169,10 +169,7 @@ export function PullRequestDetailGhost({
                 <span className="min-w-0 truncate font-medium">{seed.repository}</span>
                 <InlineButton
                   onClick={() => void readLocalApi()?.shell.openExternal(seed.url)}
-                  className={cn(
-                    "font-medium underline-offset-2 hover:underline",
-                    statePresentation?.toneClassName,
-                  )}
+                  className={statePresentation?.toneClassName}
                   aria-label={`Open pull request #${seed.number} on host`}
                 >
                   #{seed.number}
diff --git a/apps/web/src/components/settings/ExpandableText.tsx b/apps/web/src/components/settings/ExpandableText.tsx
index 36c0ce7c952947009cbc255145bca050164d5f9b..f24e0589fa55ef960f76ace2517f47ae4963e31c 100644
--- a/apps/web/src/components/settings/ExpandableText.tsx
+++ b/apps/web/src/components/settings/ExpandableText.tsx
@@ -37,7 +37,8 @@ export function ExpandableText({
         <InlineButton
           aria-expanded={expanded}
           aria-controls={textId}
-          className="mt-1 text-[11px] font-medium text-foreground/70 underline-offset-2 hover:text-foreground hover:underline"
+          tone="muted"
+          className="mt-1"
           onClick={() => setExpanded((value) => !value)}
         >
           {expanded ? "Show less" : expandLabel}
diff --git a/apps/web/src/components/settings/ProcessSignalActions.tsx b/apps/web/src/components/settings/ProcessSignalActions.tsx
index ab96e019ef34e5931d5dcf604da37d83fd5bba39..9c973cabbba2f72630dc5c4ce229aeeeb3ca03db 100644
--- a/apps/web/src/components/settings/ProcessSignalActions.tsx
+++ b/apps/web/src/components/settings/ProcessSignalActions.tsx
@@ -19,7 +19,7 @@ export function ProcessSignalActions({
             <InlineButton
               disabled={disabled}
               aria-label="Send SIGINT"
-              className="text-[11px] font-medium text-muted-foreground underline-offset-2 hover:text-foreground hover:underline"
+              tone="muted"
               onClick={() => onSignal("SIGINT")}
             >
               INT
@@ -34,7 +34,7 @@ export function ProcessSignalActions({
             <InlineButton
               disabled={disabled}
               aria-label="Send SIGKILL"
-              className="text-[11px] font-medium text-destructive underline-offset-2 hover:underline"
+              tone="destructive"
               onClick={() => onSignal("SIGKILL")}
             >
               KILL
diff --git a/apps/web/src/components/settings/SettingInheritance.tsx b/apps/web/src/components/settings/SettingInheritance.tsx
index fe596a9c15236fa5f4340f4c19221829b19ea7e5..490237262e036164825a68ff40bad08b6b8e3eeb 100644
--- a/apps/web/src/components/settings/SettingInheritance.tsx
+++ b/apps/web/src/components/settings/SettingInheritance.tsx
@@ -286,10 +286,7 @@ export function SettingInheritance({
                     <div className="flex items-center justify-between gap-3 px-2 text-xs text-muted-foreground">
                       <span>Overridden by</span>
                       {onClearOverrides ? (
-                        <InlineButton
-                          className="font-medium text-foreground underline-offset-2 hover:underline"
-                          onClick={() => onClearOverrides(overriding)}
-                        >
+                        <InlineButton onClick={() => onClearOverrides(overriding)}>
                           Reset {overriding.length === 1 ? "it" : "all"}
                         </InlineButton>
                       ) : null}
@@ -300,10 +297,7 @@ export function SettingInheritance({
                           key={project.projectId}
                           className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 px-2 py-1"
                         >
-                          <InlineButton
-                            className="min-w-0 justify-start text-left text-foreground underline-offset-2 hover:underline"
-                            onClick={project.open}
-                          >
+                          <InlineButton className="min-w-0 justify-start" onClick={project.open}>
                             <span className="truncate">{project.label}</span>
                           </InlineButton>
                           <span className="max-w-32 truncate text-muted-foreground tabular-nums">
diff --git a/apps/web/src/components/sidebar/SidebarThreadUndoNotice.tsx b/apps/web/src/components/sidebar/SidebarThreadUndoNotice.tsx
index 74f767f05d9aa26c1b19eb420f444b17f4b1f2ae..8f26a62c89bf124c3e06666eaed4df5314f29ef4 100644
--- a/apps/web/src/components/sidebar/SidebarThreadUndoNotice.tsx
+++ b/apps/web/src/components/sidebar/SidebarThreadUndoNotice.tsx
@@ -17,11 +17,7 @@ export function SidebarThreadUndoNotice() {
     <Alert role="status" variant="sidebar">
       <AlertDescription>
         {notice.action} {notice.count} thread{notice.count === 1 ? "" : "s"},{" "}
-        <InlineButton
-          underline
-          onClick={undoLatestThreadAction}
-          className="hover:text-sidebar-foreground"
-        >
+        <InlineButton onClick={undoLatestThreadAction}>
           {shortcut ? `${shortcut} to undo` : "Undo"}
         </InlineButton>
       </AlertDescription>
diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
index f3dc3efbd4223c006e1b71c4918c5f1c38a4ae75..ef373e49f1400e91a13dd4cb8b2d7eaf13e058a6 100644
--- a/apps/web/src/components/ui/button.tsx
+++ b/apps/web/src/components/ui/button.tsx
@@ -97,22 +97,35 @@ function Button({ className, variant, size, render, ...props }: ButtonProps) {
 
 export { Button, buttonVariants };
 
-/** An inline action that keeps the geometry of surrounding text or a graph node. */
+const inlineButtonVariants = cva(
+  "inline-flex shrink-0 cursor-pointer items-center gap-0.5 whitespace-nowrap font-medium underline-offset-2 hover:underline focus-visible:outline-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-64",
+  {
+    defaultVariants: { tone: "default" },
+    variants: {
+      tone: {
+        default: "text-foreground",
+        muted: "text-muted-foreground hover:text-foreground",
+        destructive: "text-destructive/80 hover:text-destructive",
+      },
+    },
+  },
+);
+
+/** An inline text action that keeps the size of the surrounding text and underlines on hover. */
 export function InlineButton({
   className,
-  underline = false,
+  tone,
+  render,
   ...props
-}: React.ComponentProps<"button"> & { underline?: boolean }) {
-  return (
-    <button
-      type="button"
-      data-slot="inline-button"
-      className={cn(
-        "inline-flex shrink-0 cursor-pointer items-center gap-0.5 whitespace-nowrap focus-visible:outline-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-64",
-        underline && "border-b border-transparent hover:border-current",
-        className,
-      )}
-      {...props}
-    />
-  );
+}: useRender.ComponentProps<"button"> & VariantProps<typeof inlineButtonVariants>) {
+  const defaultProps = {
+    className: cn(inlineButtonVariants({ tone }), className),
+    "data-slot": "inline-button",
+    type: render ? undefined : ("button" as const),
+  };
+  return useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(defaultProps, props),
+    render,
+  });
 }
diff --git a/scripts/lint-restyle-ceiling.ts b/scripts/lint-restyle-ceiling.ts
index 5fe692ce866a5f4eb074a65d7ddf3dd5fc5db3e8..c38ba06dcae0f9e89f7c51e0079e1c9550b85f4a 100644
--- a/scripts/lint-restyle-ceiling.ts
+++ b/scripts/lint-restyle-ceiling.ts
@@ -8,7 +8,7 @@ import * as NodeURL from "node:url";
 // components/ui exports are migrated to variants (see vite.config.ts). This gate keeps the
 // count from growing: CI fails when findings exceed the ceiling. Lower the ceiling when you
 // migrate a file, and delete this script when the rule becomes an error.
-export const RESTYLE_CEILING = 865;
+export const RESTYLE_CEILING = 826;
 
 const RULE = "shadcn(no-restyle)";
 
-- 
2.54.0