fix(webui): refine inline token highlights (#5241)

webui/src/components/CliAppMentionText.tsx

@@ -191,6 +191,7 @@ export function SessionMentionToken({
     <a
       href={`#/chat/${encodeURIComponent(mention.session_key)}`}
       className="rounded-sm underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60"
+      style={{ textDecorationColor: INLINE_TOKEN_HIGHLIGHT_COLOR }}
     >
       {token}
     </a>

webui/src/components/InlineTokenHighlight.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
 
 import { cn } from "@/lib/utils";
 
-export const INLINE_TOKEN_HIGHLIGHT_COLOR = "hsl(var(--inline-token-highlight))";
+export const INLINE_TOKEN_HIGHLIGHT_COLOR = "var(--inline-token-highlight)";
 
 export function InlineTokenHighlight({
   children,
@@ -22,25 +22,12 @@ export function InlineTokenHighlight({
       data-testid={testId}
       title={title}
       className={cn(
-        "relative inline transition-[color,text-shadow] duration-150",
+        "relative inline font-[550] transition-colors duration-150",
         className,
       )}
-      style={{
-        color,
-        textShadow: `0 0 10px ${alphaColor(color, 24)}`,
-      }}
+      style={{ color }}
     >
       {children}
     </span>
   );
 }
-
-function alphaColor(color: string, percent: number): string {
-  if (/^#[0-9a-f]{6}$/i.test(color)) {
-    const alpha = Math.round((percent / 100) * 255)
-      .toString(16)
-      .padStart(2, "0");
-    return `${color}${alpha}`;
-  }
-  return `color-mix(in srgb, ${color} ${percent}%, transparent)`;
-}

webui/src/components/MarkdownTextRenderer.tsx

@@ -618,6 +618,7 @@ export default function MarkdownTextRenderer({
             <a
               href={sessionHref}
               className="rounded-sm underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60"
+              style={{ textDecorationColor: INLINE_TOKEN_HIGHLIGHT_COLOR }}
             >
               <InlineTokenHighlight color={INLINE_TOKEN_HIGHLIGHT_COLOR}>
                 {markdownChildren}

webui/src/components/SlashCommandText.tsx

@@ -14,7 +14,6 @@ export function SlashCommandText({
     <InlineTokenHighlight
       testId="message-slash-command"
       color={INLINE_TOKEN_HIGHLIGHT_COLOR}
-      className="font-medium"
     >
       {command}
     </InlineTokenHighlight>

webui/src/components/UserMessageText.tsx

@@ -91,9 +91,8 @@ export function UserMessageText({
             testId={`message-skill-reference-${segment.name.toLowerCase()}`}
             title={t("message.skill", { name: segment.name })}
             color={INLINE_TOKEN_HIGHLIGHT_COLOR}
-            className="font-medium"
           >
-            {segment.text}
+            {segment.name}
           </InlineTokenHighlight>
         );
         return (