fix(webapp): move hand-rolled text links onto the shared treatment

Four places styled a link by hand instead of using TextLink's class helper,
and each drifted a different way:

- The TRQL guide's table of contents underlined on hover. This is the one
  that was reported - it carried the preference's marker class, so with the
  preference off it grew an underline on hover that looked exactly like the
  preference being on.
- The investigation card's evidence link and the agent quota notice's
  Upgrade link underlined on hover and, having no marker class, never
  responded to the preference at all.
- The free-plan usage widget's Upgrade link had no hover state whatsoever.

All four now take `textLinkClassName("token")`, so they pick up the token
color, the color-shift hover and the preference in one go. The two that
need to sit on their own line keep `block` rather than adopting TextLink's
inline-flex layout.

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

Author: samejr

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

@@ -1,6 +1,7 @@
 import { ArrowUpCircleIcon } from "@heroicons/react/24/outline";
 import { Link } from "@remix-run/react";
 import { motion, useMotionValue, useTransform } from "framer-motion";
+import { textLinkClassName } from "~/components/primitives/TextLink";
 import { useThemeColor } from "~/hooks/useThemeColor";
 import { cn } from "~/utils/cn";
 
@@ -31,7 +32,7 @@ export function FreePlanUsage({ to, percentage }: { to: string; percentage: numb
           <ArrowUpCircleIcon className="h-5 w-5 shrink-0 text-text-dimmed" />
           <span className="truncate text-2sm text-text-bright">Free Plan</span>
         </div>
-        <Link to={to} className="shrink-0 text-2sm text-text-link focus-custom">
+        <Link to={to} className={cn(textLinkClassName("token"), "shrink-0 text-2sm")}>
           Upgrade
         </Link>
       </div>

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

@@ -1,6 +1,7 @@
 import { Link } from "@remix-run/react";
 import { AgentMonoLogo } from "~/components/primitives/AgentDotMatrix";
 import { LinkButton } from "~/components/primitives/Buttons";
+import { textLinkClassName } from "~/components/primitives/TextLink";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { v3BillingPath } from "~/utils/pathBuilder";
 import { ASK_AGENT_LABEL } from "./agent-identity";
@@ -48,10 +49,7 @@ export function AgentQuotaNotice({ remaining, limit }: { remaining: number; limi
         {remaining} of {limit} free messages left
       </span>
       <span aria-hidden>·</span>
-      <Link
-        to={v3BillingPath(organization)}
-        className="text-text-link underline-offset-2 hover:underline"
-      >
+      <Link to={v3BillingPath(organization)} className={textLinkClassName("token")}>
         Upgrade
       </Link>
     </div>

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

@@ -19,6 +19,8 @@ import {
   SeverityBadge,
   VerdictBadge,
 } from "./agent-badges";
+import { textLinkClassName } from "~/components/primitives/TextLink";
+import { cn } from "~/utils/cn";
 import { AgentCard, AgentCardBody, AgentCardHeader } from "./agent-card";
 import { ChatActionsRow } from "./chat-layout";
 import type { ResolvedUri } from "./ReportView";
@@ -65,7 +67,7 @@ function EvidenceItem({
         {resolved ? (
           <a
             href={resolved.url}
-            className="block break-all font-mono text-[10px] text-text-link transition hover:underline"
+            className={cn(textLinkClassName("token"), "block break-all font-mono text-[10px]")}
           >
             {resolved.label}
           </a>

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/TRQLGuideContent.tsx

@@ -3,8 +3,13 @@ import { CodeBlock } from "~/components/code/CodeBlock";
 import { Button } from "~/components/primitives/Buttons";
 import { Header3 } from "~/components/primitives/Headers";
 import { Paragraph } from "~/components/primitives/Paragraph";
+import { textLinkClassName } from "~/components/primitives/TextLink";
 import { SimpleTooltip } from "~/components/primitives/Tooltip";
 import type { QueryScope } from "~/services/queryService.server";
+import { cn } from "~/utils/cn";
+
+/** Table-of-contents links: the shared text-link treatment, laid out as rows. */
+const TOC_LINK = cn(textLinkClassName("token"), "block");
 
 /** A code block with an integrated "Try it" button */
 export function TryableCodeBlock({
@@ -80,20 +85,21 @@ export function TRQLGuideContent({
         it with additional features.
       </Paragraph>
       {/* Table of contents */}
+      {/* `block` rather than TextLink's inline-flex, so each entry is its own row. */}
       <nav className="space-y-1 text-sm">
-        <a href="#basic" className="inline-text-link block text-text-link hover:underline">
+        <a href="#basic" className={TOC_LINK}>
           Basic queries
         </a>
-        <a href="#filtering" className="inline-text-link block text-text-link hover:underline">
+        <a href="#filtering" className={TOC_LINK}>
           Filtering with WHERE
         </a>
-        <a href="#sorting" className="inline-text-link block text-text-link hover:underline">
+        <a href="#sorting" className={TOC_LINK}>
           Sorting &amp; limiting
         </a>
-        <a href="#grouping" className="inline-text-link block text-text-link hover:underline">
+        <a href="#grouping" className={TOC_LINK}>
           Grouping &amp; aggregation
         </a>
-        <a href="#functions" className="inline-text-link block text-text-link hover:underline">
+        <a href="#functions" className={TOC_LINK}>
           Available functions
         </a>
       </nav>