feat(story-193): clickable code references in frontend

frontend/src/components/MessageItem.tsx

@@ -3,23 +3,29 @@ import Markdown from "react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
 import type { Message, ToolCall } from "../types";
+import { InlineCodeWithRefs } from "./CodeRef";
 
 // biome-ignore lint/suspicious/noExplicitAny: react-markdown requires any for component props
 function CodeBlock({ className, children, ...props }: any) {
 	const match = /language-(\w+)/.exec(className || "");
 	const isInline = !className;
-	return !isInline && match ? (
-		<SyntaxHighlighter
-			// biome-ignore lint/suspicious/noExplicitAny: oneDark style types are incompatible
-			style={oneDark as any}
-			language={match[1]}
-			PreTag="div"
-		>
-			{String(children).replace(/\n$/, "")}
-		</SyntaxHighlighter>
-	) : (
+	const text = String(children);
+	if (!isInline && match) {
+		return (
+			<SyntaxHighlighter
+				// biome-ignore lint/suspicious/noExplicitAny: oneDark style types are incompatible
+				style={oneDark as any}
+				language={match[1]}
+				PreTag="div"
+			>
+				{text.replace(/\n$/, "")}
+			</SyntaxHighlighter>
+		);
+	}
+	// For inline code, detect and render code references as clickable links
+	return (
 		<code className={className} {...props}>
-			{children}
+			<InlineCodeWithRefs text={text} />
 		</code>
 	);
 }