refactor(webapp): route hand-rolled links through TextLink

Links that underlined themselves now either use TextLink or share its colour and
the marker the "Underline links" preference targets, so the preference reaches
them. TextLink gains `textLinkClassName` for the cases that can't be the
component - markdown links that must stay in the inline flow, and triggers that
aren't anchors - plus `reloadDocument` so LabelValueStack keeps its behaviour.

Deletes the ProductHunt banner and its image, which nothing rendered.

Left alone: the admin pages, and the underlines that aren't links (dashed
tooltip terms, the dotted Vercel warning, URL-as-text, the focus affordance).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: samejr

apps/webapp/app/assets/images/producthunt.png

@@ -20,6 +20,7 @@ import { Paragraph } from "~/components/primitives/Paragraph";
 import { RadioGroup, RadioGroupItem } from "~/components/primitives/RadioButton";
 import type { BillingLimitResult } from "~/services/billingLimit.schemas";
 import { formatCurrency } from "~/utils/numberFormatter";
+import { TextLink } from "~/components/primitives/TextLink";
 
 export const billingLimitFormSchema = z.discriminatedUnion("mode", [
   z.object({
@@ -338,10 +339,7 @@ function LimitReachedCalloutContent({
       When this limit is reached, queued runs will be held for {gracePeriodLabel}, then new triggers
       will be rejected until you increase or remove the limit. Limits are enforced with a short
       delay, so spend may briefly exceed the limit before grace begins. See our{" "}
-      <a href="https://trigger.dev/terms" className="underline">
-        terms
-      </a>{" "}
-      for refund policy details.
+      <TextLink href="https://trigger.dev/terms">terms</TextLink> for refund policy details.
       {cancelInProgressRuns ? (
         <> In-progress runs will be cancelled when the limit is hit.</>
       ) : null}

apps/webapp/app/components/ProductHuntBanner.tsx

@@ -7,6 +7,7 @@ import { useOptionalOrganization } from "~/hooks/useOrganizations";
 import { useOptionalProject } from "~/hooks/useProject";
 import { cn } from "~/utils/cn";
 import { v3RunPath } from "~/utils/pathBuilder";
+import { textLinkClassName } from "~/components/primitives/TextLink";
 
 // The "why did this run fail?" failure card — the first block in the dashboard
 // agent's view catalog. Rendered from a `diagnosis` block the agent emits via
@@ -60,7 +61,7 @@ function RunLink({ runId, className }: { runId: string; className?: string }) {
   const to = useRunPath(runId);
   if (!to) return <span className={cn("font-mono text-text-dimmed", className)}>{runId}</span>;
   return (
-    <Link to={to} className={cn("text-indigo-400 underline hover:text-indigo-300", className)}>
+    <Link to={to} className={cn(textLinkClassName(), className)}>
       {runId}
     </Link>
   );
@@ -80,7 +81,7 @@ function EvidenceReference({ reference }: { reference: string }) {
         href={safeUrl}
         target="_blank"
         rel="noopener noreferrer"
-        className="font-mono text-xs text-indigo-400 underline hover:text-indigo-300"
+        className={cn(textLinkClassName(), "font-mono text-xs")}
       >
         {reference}
       </a>

apps/webapp/app/components/billing/BillingLimitConfigSection.tsx

@@ -2,6 +2,7 @@ import { XMarkIcon } from "@heroicons/react/20/solid";
 import { useLayoutEffect, useRef, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import { cn } from "~/utils/cn";
+import { textLinkClassName } from "~/components/primitives/TextLink";
 
 export function NotificationCard({
   title,
@@ -109,7 +110,7 @@ function getMarkdownComponents(onLinkClick?: () => void) {
         href={href}
         target="_blank"
         rel="noopener noreferrer"
-        className="relative z-20 text-indigo-400 underline transition-colors hover:text-indigo-300"
+        className={cn(textLinkClassName(), "relative z-20")}
         onClick={(e) => {
           e.stopPropagation();
           onLinkClick?.();

apps/webapp/app/components/dashboard-agent/RunDiagnosisCard.tsx

@@ -1,8 +1,8 @@
 import { cn } from "~/utils/cn";
 import { Paragraph } from "./Paragraph";
+import { TextLink } from "./TextLink";
 import { ArrowTopRightOnSquareIcon } from "@heroicons/react/20/solid";
 import { SimpleTooltip } from "./Tooltip";
-import { Link } from "@remix-run/react";
 
 const variations = {
   primary: {
@@ -69,9 +69,9 @@ function ValueButton({ value, href, variant = "secondary" }: ValueButtonStackPro
   if (!isExternalUrl) {
     return (
       <Paragraph variant={variation.value}>
-        <Link to={href} reloadDocument className="underline underline-offset-2">
+        <TextLink to={href} reloadDocument>
           {value}
-        </Link>
+        </TextLink>
       </Paragraph>
     );
   }
@@ -81,10 +81,14 @@ function ValueButton({ value, href, variant = "secondary" }: ValueButtonStackPro
       side="bottom"
       button={
         <Paragraph variant={variation.value}>
-          <a href={href} className="underline underline-offset-2" target="_blank">
+          <TextLink
+            href={href}
+            target="_blank"
+            trailingIcon={ArrowTopRightOnSquareIcon}
+            trailingIconClassName="text-text-dimmed"
+          >
             {value}
-            <ArrowTopRightOnSquareIcon className="ml-1 inline-block h-4 w-4 text-text-dimmed" />
-          </a>
+          </TextLink>
         </Paragraph>
       }
       content={href}

apps/webapp/app/components/navigation/NotificationCard.tsx

@@ -6,14 +6,26 @@ import { type ShortcutDefinition, useShortcutKeys } from "~/hooks/useShortcutKey
 import { ShortcutKey } from "./ShortcutKey";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./Tooltip";
 
-// inline-text-link: marker for the "Underline links" preference, which underlines
-// these and nothing else (nav items, buttons-as-links and decorative underlines
-// all stay put). See tailwind.css.
-const base = "inline-text-link inline-flex gap-0.5 items-center group focus-visible:focus-custom";
+const colors = {
+  primary: "text-indigo-500 transition hover:text-indigo-400",
+  secondary: "text-text-dimmed transition hover:text-text-bright",
+} as const;
+
+/**
+ * A link's colour plus `inline-text-link`, the marker the "Underline links"
+ * preference targets (see tailwind.css) - without this component's layout.
+ *
+ * For links that can't be a `TextLink`: ones that must stay in the inline flow
+ * (markdown prose, where the component's inline-flex would stop them wrapping),
+ * and triggers that aren't anchors at all.
+ */
+export function textLinkClassName(variant: keyof typeof colors = "primary") {
+  return cn("inline-text-link focus-visible:focus-custom", colors[variant]);
+}
 
 const variations = {
-  primary: `${base} text-indigo-500 transition hover:text-indigo-400`,
-  secondary: `${base} text-text-dimmed transition hover:text-text-bright`,
+  primary: cn(textLinkClassName("primary"), "inline-flex gap-0.5 items-center group"),
+  secondary: cn(textLinkClassName("secondary"), "inline-flex gap-0.5 items-center group"),
 } as const;
 
 type TextLinkProps = {
@@ -27,6 +39,8 @@ type TextLinkProps = {
   shortcut?: ShortcutDefinition;
   hideShortcutKey?: boolean;
   tooltip?: React.ReactNode;
+  /** Forwarded to `Link`: forces a full document load rather than a client nav. */
+  reloadDocument?: boolean;
 } & React.AnchorHTMLAttributes<HTMLAnchorElement>;
 
 export function TextLink({
@@ -40,6 +54,7 @@ export function TextLink({
   shortcut,
   hideShortcutKey,
   tooltip,
+  reloadDocument,
   ...props
 }: TextLinkProps) {
   const innerRef = useRef<HTMLAnchorElement>(null);
@@ -69,7 +84,13 @@ export function TextLink({
   );
 
   const linkElement = to ? (
-    <Link ref={innerRef} to={to} className={cn(classes, className)} {...props}>
+    <Link
+      ref={innerRef}
+      to={to}
+      reloadDocument={reloadDocument}
+      className={cn(classes, className)}
+      {...props}
+    >
       {linkContent}
     </Link>
   ) : href ? (

apps/webapp/app/components/primitives/LabelValueStack.tsx

@@ -2,6 +2,7 @@ import type { UIMessage } from "@ai-sdk/react";
 import { memo } from "react";
 import { AssistantResponse, ChatBubble, ToolUseRow } from "~/components/runs/v3/ai/AIChatMessages";
 import { Popover, PopoverContent, PopoverTrigger } from "~/components/primitives/Popover";
+import { textLinkClassName } from "~/components/primitives/TextLink";
 
 // ---------------------------------------------------------------------------
 // AgentMessageView — renders an AI SDK UIMessage[] conversation.
@@ -215,12 +216,7 @@ export function renderPart(part: UIMessage["parts"][number], i: number) {
     }
     return (
       <div key={i} className="text-xs">
-        <a
-          href={safeUrl}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-indigo-400 underline hover:text-indigo-300"
-        >
+        <a href={safeUrl} target="_blank" rel="noopener noreferrer" className={textLinkClassName()}>
           {label}
         </a>
       </div>
@@ -270,12 +266,7 @@ export function renderPart(part: UIMessage["parts"][number], i: number) {
     }
     return (
       <div key={i} className="text-xs">
-        <a
-          href={safeUrl}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-indigo-400 underline hover:text-indigo-300"
-        >
+        <a href={safeUrl} target="_blank" rel="noopener noreferrer" className={textLinkClassName()}>
           {p.filename ?? "Download file"}
         </a>
       </div>

apps/webapp/app/components/primitives/TextLink.tsx

@@ -2,6 +2,8 @@ import { useState } from "react";
 import { CodeBlock } from "~/components/code/CodeBlock";
 import type { AISpanData, ToolDefinition } from "./types";
 import { Paragraph } from "~/components/primitives/Paragraph";
+import { textLinkClassName } from "~/components/primitives/TextLink";
+import { cn } from "~/utils/cn";
 
 export function AIToolsInventory({ aiData }: { aiData: AISpanData }) {
   const defs = aiData.toolDefinitions ?? [];
@@ -48,7 +50,7 @@ function ToolDefRow({ def, wasCalled }: { def: ToolDefinition; wasCalled: boolea
         <div className="pl-3.5">
           <button
             onClick={() => setShowSchema(!showSchema)}
-            className="text-[10px] text-text-link hover:underline"
+            className={cn(textLinkClassName(), "text-[10px]")}
           >
             {showSchema ? "Hide schema" : "Show schema"}
           </button>

apps/webapp/app/components/runs/v3/agent/AgentMessageView.tsx

@@ -1,4 +1,4 @@
-import { Link, useLocation } from "@remix-run/react";
+import { useLocation } from "@remix-run/react";
 import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { useEffect, useState, useRef, useCallback } from "react";
@@ -53,6 +53,7 @@ import { capitalizeWord } from "~/utils/string";
 import { UserTag } from "../_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments/route";
 import { DeploymentEventFromString } from "@trigger.dev/core/v3/schemas";
 import { pageMeta } from "~/utils/pageTitle";
+import { TextLink } from "~/components/primitives/TextLink";
 
 export const meta = pageMeta(({ params }) => [
   params.deploymentParam ?? "Deployment",
@@ -322,12 +323,12 @@ export default function Page() {
               <Property.Item>
                 <Property.Label>Build Server</Property.Label>
                 <Property.Value>
-                  <Link
+                  <TextLink
                     to={`/resources/${deployment.projectId}/deployments/${deployment.id}/logs`}
-                    className="extra-small/bright/mono underline"
+                    className="font-mono text-xs"
                   >
                     {deployment.externalBuildData.buildId}
-                  </Link>
+                  </TextLink>
                 </Property.Value>
               </Property.Item>
             )}