feat(frontend): markdown and detail components

frontend/src/components/ui/code-block.tsx

@@ -1,37 +1,88 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useCallback } from "react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
 
 interface CodeBlockProps {
   code: string;
   language?: string;
+  label?: string;
 }
 
-export function CodeBlock({ code, language = "python" }: CodeBlockProps) {
+export function CodeBlock({
+  code,
+  language = "python",
+  label,
+}: CodeBlockProps) {
   const [copied, setCopied] = useState(false);
 
-  const handleCopy = async () => {
+  const handleCopy = useCallback(async () => {
     await navigator.clipboard.writeText(code);
     setCopied(true);
     setTimeout(() => setCopied(false), 2000);
+  }, [code]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleCopy();
+      }
+    },
+    [handleCopy]
+  );
+
+  const codeLabel = label || `${language} code example`;
+
+  // Map common language names to Prism language identifiers
+  const languageMap: Record<string, string> = {
+    python: "python",
+    javascript: "javascript",
+    typescript: "typescript",
+    java: "java",
+    cpp: "cpp",
+    c: "c",
+    go: "go",
+    rust: "rust",
   };
 
+  const prismLanguage = languageMap[language.toLowerCase()] || language;
+
   return (
     <div className="relative group">
-      <div className="absolute right-2 top-2 opacity-0 group-hover:opacity-100 transition-opacity">
+      <div className="absolute right-2 top-2 z-10 opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity">
         <button
+          type="button"
           onClick={handleCopy}
-          className="px-2 py-1 text-xs bg-[var(--secondary)] rounded hover:bg-[var(--muted)] transition-colors"
+          onKeyDown={handleKeyDown}
+          aria-label={copied ? "Code copied to clipboard" : "Copy code to clipboard"}
+          className="px-2 py-1 text-xs bg-[var(--muted)] rounded hover:bg-[var(--secondary)] focus:bg-[var(--secondary)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)] transition-colors"
         >
           {copied ? "Copied!" : "Copy"}
         </button>
+        <span role="status" aria-live="polite" className="sr-only">
+          {copied ? "Code copied to clipboard" : ""}
+        </span>
       </div>
-      <div className="text-xs text-[var(--muted-foreground)] mb-1">
+      <div className="text-xs text-[var(--muted-foreground)] mb-1 capitalize">
         {language}
       </div>
-      <pre className="bg-[var(--secondary)] p-4 rounded-lg overflow-x-auto text-sm">
-        <code>{code}</code>
-      </pre>
+      <div aria-label={codeLabel} tabIndex={0} className="rounded-lg overflow-hidden">
+        <SyntaxHighlighter
+          language={prismLanguage}
+          style={oneDark}
+          customStyle={{
+            margin: 0,
+            padding: "1rem",
+            fontSize: "0.875rem",
+            borderRadius: "0.5rem",
+          }}
+          showLineNumbers={false}
+        >
+          {code.trim()}
+        </SyntaxHighlighter>
+      </div>
     </div>
   );
 }