feat(frontend): markdown and detail components

frontend/src/components/ui/markdown.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+
+interface MarkdownProps {
+  children: string;
+  className?: string;
+}
+
+export function Markdown({ children, className = "" }: MarkdownProps) {
+  return (
+    <div className={`prose prose-sm dark:prose-invert max-w-none ${className}`}>
+      <ReactMarkdown
+        rehypePlugins={[rehypeRaw]}
+        components={{
+          // Style inline code
+          code: ({ children, ...props }) => {
+            return (
+              <code
+                className="bg-[var(--secondary)] px-1.5 py-0.5 rounded text-sm font-mono"
+                {...props}
+              >
+                {children}
+              </code>
+            );
+          },
+          // Style code blocks
+          pre: ({ children }) => {
+            return (
+              <pre className="bg-[var(--secondary)] p-4 rounded-lg overflow-x-auto text-sm">
+                {children}
+              </pre>
+            );
+          },
+          // Style unordered lists
+          ul: ({ children }) => {
+            return (
+              <ul className="list-disc list-inside space-y-1">
+                {children}
+              </ul>
+            );
+          },
+          // Style ordered lists
+          ol: ({ children }) => {
+            return (
+              <ol className="list-decimal list-inside space-y-1">
+                {children}
+              </ol>
+            );
+          },
+          // Style paragraphs with spacing
+          p: ({ children }) => {
+            return <p className="mb-4 last:mb-0">{children}</p>;
+          },
+        }}
+      >
+        {children}
+      </ReactMarkdown>
+    </div>
+  );
+}