feat: syntax highlighting with shiki and copy-to-clipboard for all docs code blocks

apps/web/package.json

@@ -18,7 +18,8 @@
     "lucide-react": "^0.469.0",
     "next": "^15.1.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "shiki": "^3.22.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.0.0",

apps/web/src/app/docs/api-reference/page.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { CodeBlock } from "@/components/code-block";
 
 export const metadata: Metadata = {
   title: "REST API Reference",
@@ -6,21 +7,6 @@ export const metadata: Metadata = {
     "Complete API contract for AgentLens trace ingestion and retrieval endpoints.",
 };
 
-function CodeBlock({ children, title }: { children: string; title?: string }) {
-  return (
-    <div className="rounded-xl overflow-hidden border border-neutral-800 bg-neutral-900/50 my-4">
-      {title && (
-        <div className="px-4 py-2.5 border-b border-neutral-800 text-xs text-neutral-500 font-mono">
-          {title}
-        </div>
-      )}
-      <pre className="p-4 overflow-x-auto text-sm leading-relaxed">
-        <code className="text-neutral-300">{children}</code>
-      </pre>
-    </div>
-  );
-}
-
 function EndpointHeader({
   method,
   path,
@@ -86,7 +72,7 @@ export default function ApiReferencePage() {
         <h3 className="text-lg font-medium text-neutral-200 mb-3">
           Request body
         </h3>
-        <CodeBlock title="request_body.json">{`{
+        <CodeBlock title="request_body.json" language="json">{`{
   "traces": [
     {
       "id": "trace-uuid-v4",
@@ -497,7 +483,7 @@ export default function ApiReferencePage() {
         <h3 className="text-lg font-medium text-neutral-200 mb-3 mt-8">
           cURL example
         </h3>
-        <CodeBlock title="terminal">{`curl -X POST https://agentlens.vectry.tech/api/traces \\
+        <CodeBlock title="terminal" language="bash">{`curl -X POST https://agentlens.vectry.tech/api/traces \\
   -H "Content-Type: application/json" \\
   -H "Authorization: Bearer your-api-key" \\
   -d '{
@@ -599,7 +585,7 @@ export default function ApiReferencePage() {
         <h3 className="text-lg font-medium text-neutral-200 mb-3 mt-8">
           Response shape
         </h3>
-        <CodeBlock title="response.json">{`{
+        <CodeBlock title="response.json" language="json">{`{
   "traces": [
     {
       "id": "...",

apps/web/src/app/docs/concepts/page.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { CodeBlock } from "@/components/code-block";
 
 export const metadata: Metadata = {
   title: "Core Concepts",
@@ -6,21 +7,6 @@ export const metadata: Metadata = {
     "Understand the four core data types in AgentLens: Traces, Spans, Decision Points, and Events.",
 };
 
-function CodeBlock({ children, title }: { children: string; title?: string }) {
-  return (
-    <div className="rounded-xl overflow-hidden border border-neutral-800 bg-neutral-900/50 my-4">
-      {title && (
-        <div className="px-4 py-2.5 border-b border-neutral-800 text-xs text-neutral-500 font-mono">
-          {title}
-        </div>
-      )}
-      <pre className="p-4 overflow-x-auto text-sm leading-relaxed">
-        <code className="text-neutral-300">{children}</code>
-      </pre>
-    </div>
-  );
-}
-
 function ConceptCard({
   title,
   description,
@@ -203,7 +189,7 @@ export default function ConceptsPage() {
         <h3 className="text-base font-medium text-neutral-200 mb-3">
           Structure
         </h3>
-        <CodeBlock title="decision_point.json">{`{
+        <CodeBlock title="decision_point.json" language="json">{`{
   "type": "TOOL_SELECTION",
   "reasoning": "User asked about weather, need real-time data",
   "chosen": { "tool": "weather_api", "confidence": 0.95 },
@@ -246,7 +232,7 @@ export default function ConceptsPage() {
         <h3 className="text-base font-medium text-neutral-200 mb-3">
           Example
         </h3>
-        <CodeBlock title="event.json">{`{
+        <CodeBlock title="event.json" language="json">{`{
   "type": "CONTEXT_OVERFLOW",
   "name": "token-limit-exceeded",
   "metadata": {

apps/web/src/app/docs/getting-started/page.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { CodeBlock } from "@/components/code-block";
 
 export const metadata: Metadata = {
   title: "Getting Started",
@@ -6,21 +7,6 @@ export const metadata: Metadata = {
     "Install AgentLens, initialize the SDK, and send your first trace in under five minutes.",
 };
 
-function CodeBlock({ children, title }: { children: string; title?: string }) {
-  return (
-    <div className="rounded-xl overflow-hidden border border-neutral-800 bg-neutral-900/50 my-4">
-      {title && (
-        <div className="px-4 py-2.5 border-b border-neutral-800 text-xs text-neutral-500 font-mono">
-          {title}
-        </div>
-      )}
-      <pre className="p-4 overflow-x-auto text-sm leading-relaxed">
-        <code className="text-neutral-300">{children}</code>
-      </pre>
-    </div>
-  );
-}
-
 export default function GettingStartedPage() {
   return (
     <div>
@@ -64,12 +50,12 @@ export default function GettingStartedPage() {
         </h2>
 
         <h3 className="text-lg font-medium text-neutral-200 mb-2">Python</h3>
-        <CodeBlock title="terminal">pip install vectry-agentlens</CodeBlock>
+        <CodeBlock title="terminal" language="bash">pip install vectry-agentlens</CodeBlock>
 
         <h3 className="text-lg font-medium text-neutral-200 mb-2 mt-6">
           TypeScript / Node.js
         </h3>
-        <CodeBlock title="terminal">npm install agentlens-sdk</CodeBlock>
+        <CodeBlock title="terminal" language="bash">npm install agentlens-sdk</CodeBlock>
       </section>
 
       <section className="mb-12">
@@ -78,7 +64,7 @@ export default function GettingStartedPage() {
         </h2>
 
         <h3 className="text-lg font-medium text-neutral-200 mb-2">Python</h3>
-        <CodeBlock title="main.py">{`import agentlens
+        <CodeBlock title="main.py" language="python">{`import agentlens
 
 agentlens.init(
     api_key="your-api-key",
@@ -88,7 +74,7 @@ agentlens.init(
         <h3 className="text-lg font-medium text-neutral-200 mb-2 mt-6">
           TypeScript
         </h3>
-        <CodeBlock title="index.ts">{`import { init } from "agentlens-sdk";
+        <CodeBlock title="index.ts" language="typescript">{`import { init } from "agentlens-sdk";
 
 init({
   apiKey: "your-api-key",
@@ -102,7 +88,7 @@ init({
         </h2>
 
         <h3 className="text-lg font-medium text-neutral-200 mb-2">Python</h3>
-        <CodeBlock title="agent.py">{`import agentlens
+        <CodeBlock title="agent.py" language="python">{`import agentlens
 from agentlens import trace
 
 agentlens.init(
@@ -122,7 +108,7 @@ result = my_agent("What is the capital of France?")`}</CodeBlock>
         <h3 className="text-lg font-medium text-neutral-200 mb-2 mt-6">
           TypeScript
         </h3>
-        <CodeBlock title="agent.ts">{`import { init, TraceBuilder } from "agentlens-sdk";
+        <CodeBlock title="agent.ts" language="typescript">{`import { init, TraceBuilder } from "agentlens-sdk";
 
 init({
   apiKey: "your-api-key",

apps/web/src/app/docs/integrations/anthropic/page.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { CodeBlock } from "@/components/code-block";
 
 export const metadata: Metadata = {
   title: "Anthropic Integration",
@@ -6,21 +7,6 @@ export const metadata: Metadata = {
     "Wrap the Anthropic client to automatically trace Claude API calls with full metadata capture.",
 };
 
-function CodeBlock({ children, title }: { children: string; title?: string }) {
-  return (
-    <div className="rounded-xl overflow-hidden border border-neutral-800 bg-neutral-900/50 my-4">
-      {title && (
-        <div className="px-4 py-2.5 border-b border-neutral-800 text-xs text-neutral-500 font-mono">
-          {title}
-        </div>
-      )}
-      <pre className="p-4 overflow-x-auto text-sm leading-relaxed">
-        <code className="text-neutral-300">{children}</code>
-      </pre>
-    </div>
-  );
-}
-
 export default function AnthropicIntegrationPage() {
   return (
     <div>
@@ -35,12 +21,12 @@ export default function AnthropicIntegrationPage() {
 
       <section className="mb-12">
         <h2 className="text-2xl font-semibold mb-4">Installation</h2>
-        <CodeBlock title="terminal">{`pip install vectry-agentlens anthropic`}</CodeBlock>
+        <CodeBlock title="terminal" language="bash">{`pip install vectry-agentlens anthropic`}</CodeBlock>
       </section>
 
       <section className="mb-12">
         <h2 className="text-2xl font-semibold mb-4">Quick setup</h2>
-        <CodeBlock title="main.py">{`import agentlens
+        <CodeBlock title="main.py" language="python">{`import agentlens
 from agentlens.integrations.anthropic import wrap_anthropic
 import anthropic
 
@@ -110,7 +96,7 @@ response = client.messages.create(
 
       <section className="mb-12">
         <h2 className="text-2xl font-semibold mb-4">Async client</h2>
-        <CodeBlock title="async_example.py">{`from agentlens.integrations.anthropic import wrap_anthropic
+        <CodeBlock title="async_example.py" language="python">{`from agentlens.integrations.anthropic import wrap_anthropic
 import anthropic
 
 async_client = wrap_anthropic(anthropic.AsyncAnthropic())
@@ -126,7 +112,7 @@ response = await async_client.messages.create(
         <h2 className="text-2xl font-semibold mb-4">
           Combining with @trace
         </h2>
-        <CodeBlock title="combined.py">{`import agentlens
+        <CodeBlock title="combined.py" language="python">{`import agentlens
 from agentlens import trace
 from agentlens.integrations.anthropic import wrap_anthropic
 import anthropic
@@ -151,7 +137,7 @@ async def analyze(document: str) -> str:
           When Claude invokes tools, AgentLens captures each tool use as a
           TOOL_SELECTION decision point automatically:
         </p>
-        <CodeBlock title="tools.py">{`@trace(name="claude-tool-agent")
+        <CodeBlock title="tools.py" language="python">{`@trace(name="claude-tool-agent")
 async def tool_agent(prompt: str):
     response = client.messages.create(
         model="claude-sonnet-4-20250514",

apps/web/src/app/docs/integrations/langchain/page.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { CodeBlock } from "@/components/code-block";
 
 export const metadata: Metadata = {
   title: "LangChain Integration",
@@ -6,21 +7,6 @@ export const metadata: Metadata = {
     "Use the AgentLensCallbackHandler to trace LangChain chains, agents, and tool invocations.",
 };
 
-function CodeBlock({ children, title }: { children: string; title?: string }) {
-  return (
-    <div className="rounded-xl overflow-hidden border border-neutral-800 bg-neutral-900/50 my-4">
-      {title && (
-        <div className="px-4 py-2.5 border-b border-neutral-800 text-xs text-neutral-500 font-mono">
-          {title}
-        </div>
-      )}
-      <pre className="p-4 overflow-x-auto text-sm leading-relaxed">
-        <code className="text-neutral-300">{children}</code>
-      </pre>
-    </div>
-  );
-}
-
 export default function LangChainIntegrationPage() {
   return (
     <div>
@@ -35,12 +21,12 @@ export default function LangChainIntegrationPage() {
 
       <section className="mb-12">
         <h2 className="text-2xl font-semibold mb-4">Installation</h2>
-        <CodeBlock title="terminal">{`pip install vectry-agentlens langchain langchain-openai`}</CodeBlock>
+        <CodeBlock title="terminal" language="bash">{`pip install vectry-agentlens langchain langchain-openai`}</CodeBlock>
       </section>
 
       <section className="mb-12">
         <h2 className="text-2xl font-semibold mb-4">Quick setup</h2>
-        <CodeBlock title="main.py">{`import agentlens
+        <CodeBlock title="main.py" language="python">{`import agentlens
 from agentlens.integrations.langchain import AgentLensCallbackHandler
 
 agentlens.init(
@@ -56,7 +42,7 @@ handler = AgentLensCallbackHandler()`}</CodeBlock>
         <p className="text-neutral-400 leading-relaxed mb-4">
           Pass the handler in the <code className="text-emerald-400 font-mono text-xs bg-emerald-500/5 px-1.5 py-0.5 rounded">callbacks</code> config:
         </p>
-        <CodeBlock title="chain_example.py">{`from langchain_openai import ChatOpenAI
+        <CodeBlock title="chain_example.py" language="python">{`from langchain_openai import ChatOpenAI
 from langchain_core.prompts import ChatPromptTemplate
 from langchain_core.output_parsers import StrOutputParser
 
@@ -76,7 +62,7 @@ result = chain.invoke(
 
       <section className="mb-12">
         <h2 className="text-2xl font-semibold mb-4">Using with agents</h2>
-        <CodeBlock title="agent_example.py">{`from langchain_openai import ChatOpenAI
+        <CodeBlock title="agent_example.py" language="python">{`from langchain_openai import ChatOpenAI
 from langchain.agents import AgentExecutor, create_tool_calling_agent
 from langchain_core.prompts import ChatPromptTemplate
 from langchain_core.tools import tool
@@ -158,7 +144,7 @@ result = executor.invoke(
           To trace all LangChain operations without passing callbacks
           individually, set the handler globally:
         </p>
-        <CodeBlock title="global.py">{`from langchain_core.globals import set_llm_cache
+        <CodeBlock title="global.py" language="python">{`from langchain_core.globals import set_llm_cache
 from langchain.callbacks.manager import set_handler
 
 set_handler(handler)
@@ -202,7 +188,7 @@ result = chain.invoke({"input": "Hello"})
             </tbody>
           </table>
         </div>
-        <CodeBlock title="options.py">{`handler = AgentLensCallbackHandler(
+        <CodeBlock title="options.py" language="python">{`handler = AgentLensCallbackHandler(
     trace_name="my-langchain-app",
     tags=["production", "langchain"],
     capture_io=True,

apps/web/src/app/docs/integrations/openai/page.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { CodeBlock } from "@/components/code-block";
 
 export const metadata: Metadata = {
   title: "OpenAI Integration",
@@ -6,21 +7,6 @@ export const metadata: Metadata = {
     "Auto-trace all OpenAI API calls with a single wrapper. Captures model, tokens, cost, and latency.",
 };
 
-function CodeBlock({ children, title }: { children: string; title?: string }) {
-  return (
-    <div className="rounded-xl overflow-hidden border border-neutral-800 bg-neutral-900/50 my-4">
-      {title && (
-        <div className="px-4 py-2.5 border-b border-neutral-800 text-xs text-neutral-500 font-mono">
-          {title}
-        </div>
-      )}
-      <pre className="p-4 overflow-x-auto text-sm leading-relaxed">
-        <code className="text-neutral-300">{children}</code>
-      </pre>
-    </div>
-  );
-}
-
 export default function OpenAIIntegrationPage() {
   return (
     <div>
@@ -35,12 +21,12 @@ export default function OpenAIIntegrationPage() {
 
       <section className="mb-12">
         <h2 className="text-2xl font-semibold mb-4">Installation</h2>
-        <CodeBlock title="terminal">{`pip install vectry-agentlens openai`}</CodeBlock>
+        <CodeBlock title="terminal" language="bash">{`pip install vectry-agentlens openai`}</CodeBlock>
       </section>
 
       <section className="mb-12">
         <h2 className="text-2xl font-semibold mb-4">Quick setup</h2>
-        <CodeBlock title="main.py">{`import agentlens
+        <CodeBlock title="main.py" language="python">{`import agentlens
 from agentlens.integrations.openai import wrap_openai
 import openai
 
@@ -113,7 +99,7 @@ response = client.chat.completions.create(
         <p className="text-neutral-400 leading-relaxed mb-4">
           The wrapper works with both sync and async OpenAI clients:
         </p>
-        <CodeBlock title="async_example.py">{`from agentlens.integrations.openai import wrap_openai
+        <CodeBlock title="async_example.py" language="python">{`from agentlens.integrations.openai import wrap_openai
 import openai
 
 async_client = wrap_openai(openai.AsyncOpenAI())
@@ -132,7 +118,7 @@ response = await async_client.chat.completions.create(
           When used inside a <code className="text-emerald-400 font-mono text-xs bg-emerald-500/5 px-1.5 py-0.5 rounded">@trace</code>-decorated
           function, OpenAI calls appear as child spans of the trace:
         </p>
-        <CodeBlock title="combined.py">{`import agentlens
+        <CodeBlock title="combined.py" language="python">{`import agentlens
 from agentlens import trace
 from agentlens.integrations.openai import wrap_openai
 import openai
@@ -160,7 +146,7 @@ async def research(topic: str) -> str:
           automatically captures each tool call as a TOOL_SELECTION decision
           point and the tool execution as a TOOL_CALL span:
         </p>
-        <CodeBlock title="tools.py">{`@trace(name="tool-agent")
+        <CodeBlock title="tools.py" language="python">{`@trace(name="tool-agent")
 async def agent_with_tools(prompt: str):
     response = client.chat.completions.create(
         model="gpt-4o",

apps/web/src/app/docs/opencode-plugin/page.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { CodeBlock } from "@/components/code-block";
 
 export const metadata: Metadata = {
   title: "OpenCode Plugin",
@@ -6,21 +7,6 @@ export const metadata: Metadata = {
     "Capture OpenCode sessions including tool calls, LLM calls, file edits, and git diffs with the AgentLens OpenCode plugin.",
 };
 
-function CodeBlock({ children, title }: { children: string; title?: string }) {
-  return (
-    <div className="rounded-xl overflow-hidden border border-neutral-800 bg-neutral-900/50 my-4">
-      {title && (
-        <div className="px-4 py-2.5 border-b border-neutral-800 text-xs text-neutral-500 font-mono">
-          {title}
-        </div>
-      )}
-      <pre className="p-4 overflow-x-auto text-sm leading-relaxed">
-        <code className="text-neutral-300">{children}</code>
-      </pre>
-    </div>
-  );
-}
-
 export default function OpenCodePluginPage() {
   return (
     <div>
@@ -35,7 +21,7 @@ export default function OpenCodePluginPage() {
 
       <section className="mb-12">
         <h2 className="text-2xl font-semibold mb-4">Installation</h2>
-        <CodeBlock title="terminal">{`npm install opencode-agentlens`}</CodeBlock>
+        <CodeBlock title="terminal" language="bash">{`npm install opencode-agentlens`}</CodeBlock>
       </section>
 
       <section className="mb-12">
@@ -43,13 +29,13 @@ export default function OpenCodePluginPage() {
         <p className="text-neutral-400 leading-relaxed mb-4">
           Add the plugin to your <code className="text-emerald-400 font-mono text-xs bg-emerald-500/5 px-1.5 py-0.5 rounded">opencode.json</code> configuration file:
         </p>
-        <CodeBlock title="opencode.json">{`{
+        <CodeBlock title="opencode.json" language="json">{`{
   "plugin": ["opencode-agentlens"]
 }`}</CodeBlock>
         <p className="text-neutral-400 leading-relaxed mt-4 mb-4">
           Set the required environment variables:
         </p>
-        <CodeBlock title="terminal">{`export AGENTLENS_API_KEY="your-api-key"
+        <CodeBlock title="terminal" language="bash">{`export AGENTLENS_API_KEY="your-api-key"
 export AGENTLENS_ENDPOINT="https://agentlens.vectry.tech"`}</CodeBlock>
 
         <p className="text-neutral-400 leading-relaxed mt-4">
@@ -219,7 +205,7 @@ export AGENTLENS_ENDPOINT="https://agentlens.vectry.tech"`}</CodeBlock>
           By default, the plugin captures full file contents and command outputs.
           To filter sensitive data, set the <code className="text-emerald-400 font-mono text-xs bg-emerald-500/5 px-1.5 py-0.5 rounded">AGENTLENS_REDACT_PATTERNS</code> environment variable with a comma-separated list of regex patterns:
         </p>
-        <CodeBlock title="terminal">{`export AGENTLENS_REDACT_PATTERNS="password=.*,API_KEY=.*,Bearer .*"`}</CodeBlock>
+        <CodeBlock title="terminal" language="bash">{`export AGENTLENS_REDACT_PATTERNS="password=.*,API_KEY=.*,Bearer .*"`}</CodeBlock>
         <p className="text-neutral-400 leading-relaxed mt-4">
           Matched content is replaced with <code className="text-emerald-400 font-mono text-xs bg-emerald-500/5 px-1.5 py-0.5 rounded">[REDACTED]</code> before
           being sent to the server.

apps/web/src/app/docs/python-sdk/page.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { CodeBlock } from "@/components/code-block";
 
 export const metadata: Metadata = {
   title: "Python SDK",
@@ -6,21 +7,6 @@ export const metadata: Metadata = {
     "Full reference for the AgentLens Python SDK: init(), @trace decorator, log_decision(), TraceContext, and configuration.",
 };
 
-function CodeBlock({ children, title }: { children: string; title?: string }) {
-  return (
-    <div className="rounded-xl overflow-hidden border border-neutral-800 bg-neutral-900/50 my-4">
-      {title && (
-        <div className="px-4 py-2.5 border-b border-neutral-800 text-xs text-neutral-500 font-mono">
-          {title}
-        </div>
-      )}
-      <pre className="p-4 overflow-x-auto text-sm leading-relaxed">
-        <code className="text-neutral-300">{children}</code>
-      </pre>
-    </div>
-  );
-}
-
 function ApiSection({
   name,
   signature,
@@ -113,7 +99,7 @@ export default function PythonSdkPage() {
             </tbody>
           </table>
         </div>
-        <CodeBlock title="example.py">{`import agentlens
+        <CodeBlock title="example.py" language="python">{`import agentlens
 
 agentlens.init(
     api_key="al_key_abc123",
@@ -159,7 +145,7 @@ agentlens.init(
             </tbody>
           </table>
         </div>
-        <CodeBlock title="decorator.py">{`from agentlens import trace
+        <CodeBlock title="decorator.py" language="python">{`from agentlens import trace
 
 @trace(name="research-agent", tags=["research", "v2"])
 async def research(topic: str) -> str:
@@ -219,7 +205,7 @@ def simple_agent(prompt: str) -> str:
             </tbody>
           </table>
         </div>
-        <CodeBlock title="decisions.py">{`import agentlens
+        <CodeBlock title="decisions.py" language="python">{`import agentlens
 from agentlens import trace
 
 @trace(name="routing-agent")
@@ -245,7 +231,7 @@ async def route_request(user_input: str):
         signature="agentlens.TraceContext"
         description="Context manager for manual trace lifecycle control. Use this when the @trace decorator does not fit your workflow."
       >
-        <CodeBlock title="context.py">{`import agentlens
+        <CodeBlock title="context.py" language="python">{`import agentlens
 
 async def process_batch(items: list[str]):
     for item in items:
@@ -275,7 +261,7 @@ async def process_batch(items: list[str]):
         signature="agentlens.shutdown(timeout=10.0)"
         description="Flush all pending traces and shut down the background sender. Call this before your application exits to avoid losing data."
       >
-        <CodeBlock title="shutdown.py">{`import agentlens
+        <CodeBlock title="shutdown.py" language="python">{`import agentlens
 import atexit
 
 agentlens.init(api_key="...", endpoint="...")

apps/web/src/app/docs/self-hosting/page.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { CodeBlock } from "@/components/code-block";
 
 export const metadata: Metadata = {
   title: "Self-Hosting",
@@ -6,21 +7,6 @@ export const metadata: Metadata = {
     "Deploy AgentLens with Docker or from source. Configure database, API keys, and environment variables.",
 };
 
-function CodeBlock({ children, title }: { children: string; title?: string }) {
-  return (
-    <div className="rounded-xl overflow-hidden border border-neutral-800 bg-neutral-900/50 my-4">
-      {title && (
-        <div className="px-4 py-2.5 border-b border-neutral-800 text-xs text-neutral-500 font-mono">
-          {title}
-        </div>
-      )}
-      <pre className="p-4 overflow-x-auto text-sm leading-relaxed">
-        <code className="text-neutral-300">{children}</code>
-      </pre>
-    </div>
-  );
-}
-
 export default function SelfHostingPage() {
   return (
     <div>
@@ -32,7 +18,7 @@ export default function SelfHostingPage() {
 
       <section className="mb-12">
         <h2 className="text-2xl font-semibold mb-4">Quick start with Docker</h2>
-        <CodeBlock title="terminal">{`git clone https://gitea.repi.fun/repi/agentlens
+        <CodeBlock title="terminal" language="bash">{`git clone https://gitea.repi.fun/repi/agentlens
 cd agentlens
 docker build -t agentlens .
 docker run -p 3000:3000 \\
@@ -57,7 +43,7 @@ docker run -p 3000:3000 \\
         <p className="text-neutral-400 leading-relaxed mb-4">
           For a complete setup with PostgreSQL included:
         </p>
-        <CodeBlock title="docker-compose.yml">{`version: "3.8"
+        <CodeBlock title="docker-compose.yml" language="yaml">{`version: "3.8"
 
 services:
   db:
@@ -84,7 +70,7 @@ services:
 
 volumes:
   pgdata:`}</CodeBlock>
-        <CodeBlock title="terminal">{`docker compose up -d`}</CodeBlock>
+        <CodeBlock title="terminal" language="bash">{`docker compose up -d`}</CodeBlock>
       </section>
 
       <section className="mb-12">
@@ -92,7 +78,7 @@ volumes:
         <p className="text-neutral-400 leading-relaxed mb-4">
           For development or when you need to customize AgentLens:
         </p>
-        <CodeBlock title="terminal">{`git clone https://gitea.repi.fun/repi/agentlens
+        <CodeBlock title="terminal" language="bash">{`git clone https://gitea.repi.fun/repi/agentlens
 cd agentlens
 
 # Install dependencies (uses npm workspaces)
@@ -172,7 +158,7 @@ npm run dev --workspace=@agentlens/web`}</CodeBlock>
         <h3 className="text-lg font-medium text-neutral-200 mb-2 mt-6">
           Running migrations
         </h3>
-        <CodeBlock title="terminal">{`# Push schema to database (development)
+        <CodeBlock title="terminal" language="bash">{`# Push schema to database (development)
 npm run db:push --workspace=@agentlens/web
 
 # Run migrations (production)
@@ -184,10 +170,10 @@ npm run db:migrate --workspace=@agentlens/web`}</CodeBlock>
         <p className="text-neutral-400 leading-relaxed mb-4">
           For production deployments behind nginx or Caddy:
         </p>
-        <CodeBlock title="Caddyfile">{`agentlens.yourdomain.com {
+        <CodeBlock title="Caddyfile" language="bash">{`agentlens.yourdomain.com {
   reverse_proxy localhost:3000
 }`}</CodeBlock>
-        <CodeBlock title="nginx.conf">{`server {
+        <CodeBlock title="nginx.conf" language="bash">{`server {
     listen 443 ssl;
     server_name agentlens.yourdomain.com;
 
@@ -203,7 +189,7 @@ npm run db:migrate --workspace=@agentlens/web`}</CodeBlock>
 
       <section className="mb-12">
         <h2 className="text-2xl font-semibold mb-4">Updating</h2>
-        <CodeBlock title="terminal">{`# Pull latest changes
+        <CodeBlock title="terminal" language="bash">{`# Pull latest changes
 cd agentlens
 git pull origin main
 

apps/web/src/app/docs/typescript-sdk/page.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { CodeBlock } from "@/components/code-block";
 
 export const metadata: Metadata = {
   title: "TypeScript SDK",
@@ -6,21 +7,6 @@ export const metadata: Metadata = {
     "Full reference for the AgentLens TypeScript SDK: init(), TraceBuilder, createDecision(), and shutdown().",
 };
 
-function CodeBlock({ children, title }: { children: string; title?: string }) {
-  return (
-    <div className="rounded-xl overflow-hidden border border-neutral-800 bg-neutral-900/50 my-4">
-      {title && (
-        <div className="px-4 py-2.5 border-b border-neutral-800 text-xs text-neutral-500 font-mono">
-          {title}
-        </div>
-      )}
-      <pre className="p-4 overflow-x-auto text-sm leading-relaxed">
-        <code className="text-neutral-300">{children}</code>
-      </pre>
-    </div>
-  );
-}
-
 function ApiSection({
   name,
   signature,
@@ -115,7 +101,7 @@ export default function TypeScriptSdkPage() {
             </tbody>
           </table>
         </div>
-        <CodeBlock title="init.ts">{`import { init } from "agentlens-sdk";
+        <CodeBlock title="init.ts" language="typescript">{`import { init } from "agentlens-sdk";
 
 init({
   apiKey: process.env.AGENTLENS_API_KEY!,
@@ -200,7 +186,7 @@ init({
           </div>
         </div>
 
-        <CodeBlock title="trace-builder.ts">{`import { TraceBuilder } from "agentlens-sdk";
+        <CodeBlock title="trace-builder.ts" language="typescript">{`import { TraceBuilder } from "agentlens-sdk";
 
 const trace = new TraceBuilder("customer-support", {
   tags: ["support", "v2"],
@@ -243,7 +229,7 @@ await trace.end();`}</CodeBlock>
         signature='createDecision(type, chosen, alternatives, options?)'
         description="Standalone helper to create a decision point outside of a TraceBuilder. Useful when building traces from raw data."
       >
-        <CodeBlock title="standalone.ts">{`import { createDecision } from "agentlens-sdk";
+        <CodeBlock title="standalone.ts" language="typescript">{`import { createDecision } from "agentlens-sdk";
 
 const decision = createDecision(
   "TOOL_SELECTION",
@@ -261,7 +247,7 @@ const decision = createDecision(
         signature="shutdown(timeout?: number): Promise<void>"
         description="Flush all pending traces and tear down the background sender. Default timeout is 10 seconds."
       >
-        <CodeBlock title="shutdown.ts">{`import { shutdown } from "agentlens-sdk";
+        <CodeBlock title="shutdown.ts" language="typescript">{`import { shutdown } from "agentlens-sdk";
 
 process.on("SIGTERM", async () => {
   await shutdown(30000);

apps/web/src/components/code-block.tsx

@@ -0,0 +1,34 @@
+import { codeToHtml } from "shiki";
+import { CopyButton } from "./copy-button";
+
+export async function CodeBlock({
+  children,
+  title,
+  language = "text",
+}: {
+  children: string;
+  title?: string;
+  language?: string;
+}) {
+  const html = await codeToHtml(children, {
+    lang: language,
+    theme: "github-dark",
+  });
+
+  return (
+    <div className="rounded-xl overflow-hidden border border-neutral-800 bg-neutral-900/50 my-4">
+      {title && (
+        <div className="px-4 py-2.5 border-b border-neutral-800 text-xs text-neutral-500 font-mono">
+          {title}
+        </div>
+      )}
+      <div className="relative">
+        <CopyButton text={children} />
+        <div
+          className="p-4 overflow-x-auto text-sm leading-relaxed [&_pre]:!bg-transparent [&_code]:!bg-transparent"
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
+      </div>
+    </div>
+  );
+}

apps/web/src/components/copy-button.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { useState } from "react";
+import { Copy, Check } from "lucide-react";
+
+export function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <button
+      onClick={handleCopy}
+      className="absolute top-3 right-3 p-1.5 rounded-md text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800/50 transition-colors"
+      aria-label="Copy to clipboard"
+    >
+      {copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
+    </button>
+  );
+}

package-lock.json

@@ -27,7 +27,8 @@
         "lucide-react": "^0.469.0",
         "next": "^15.1.0",
         "react": "^19.0.0",
-        "react-dom": "^19.0.0"
+        "react-dom": "^19.0.0",
+        "shiki": "^3.22.0"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4.0.0",
@@ -1631,6 +1632,73 @@
         "win32"
       ]
     },
+    "node_modules/@shikijs/core": {
+      "version": "3.22.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-3.22.0.tgz",
+      "integrity": "sha512-iAlTtSDDbJiRpvgL5ugKEATDtHdUVkqgHDm/gbD2ZS9c88mx7G1zSYjjOxp5Qa0eaW0MAQosFRmJSk354PRoQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/types": "3.22.0",
+        "@shikijs/vscode-textmate": "^10.0.2",
+        "@types/hast": "^3.0.4",
+        "hast-util-to-html": "^9.0.5"
+      }
+    },
+    "node_modules/@shikijs/engine-javascript": {
+      "version": "3.22.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-3.22.0.tgz",
+      "integrity": "sha512-jdKhfgW9CRtj3Tor0L7+yPwdG3CgP7W+ZEqSsojrMzCjD1e0IxIbwUMDDpYlVBlC08TACg4puwFGkZfLS+56Tw==",
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/types": "3.22.0",
+        "@shikijs/vscode-textmate": "^10.0.2",
+        "oniguruma-to-es": "^4.3.4"
+      }
+    },
+    "node_modules/@shikijs/engine-oniguruma": {
+      "version": "3.22.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-3.22.0.tgz",
+      "integrity": "sha512-DyXsOG0vGtNtl7ygvabHd7Mt5EY8gCNqR9Y7Lpbbd/PbJvgWrqaKzH1JW6H6qFkuUa8aCxoiYVv8/YfFljiQxA==",
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/types": "3.22.0",
+        "@shikijs/vscode-textmate": "^10.0.2"
+      }
+    },
+    "node_modules/@shikijs/langs": {
+      "version": "3.22.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-3.22.0.tgz",
+      "integrity": "sha512-x/42TfhWmp6H00T6uwVrdTJGKgNdFbrEdhaDwSR5fd5zhQ1Q46bHq9EO61SCEWJR0HY7z2HNDMaBZp8JRmKiIA==",
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/types": "3.22.0"
+      }
+    },
+    "node_modules/@shikijs/themes": {
+      "version": "3.22.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-3.22.0.tgz",
+      "integrity": "sha512-o+tlOKqsr6FE4+mYJG08tfCFDS+3CG20HbldXeVoyP+cYSUxDhrFf3GPjE60U55iOkkjbpY2uC3It/eeja35/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/types": "3.22.0"
+      }
+    },
+    "node_modules/@shikijs/types": {
+      "version": "3.22.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.22.0.tgz",
+      "integrity": "sha512-491iAekgKDBFE67z70Ok5a8KBMsQ2IJwOWw3us/7ffQkIBCyOQfm/aNwVMBUriP02QshIfgHCBSIYAl3u2eWjg==",
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/vscode-textmate": "^10.0.2",
+        "@types/hast": "^3.0.4"
+      }
+    },
+    "node_modules/@shikijs/vscode-textmate": {
+      "version": "10.0.2",
+      "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-10.0.2.tgz",
+      "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==",
+      "license": "MIT"
+    },
     "node_modules/@standard-schema/spec": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
@@ -1981,6 +2049,24 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/hast": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/@types/mdast": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
+      "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "22.19.10",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.10.tgz",
@@ -2011,6 +2097,18 @@
         "@types/react": "^19.2.0"
       }
     },
+    "node_modules/@types/unist": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+      "license": "MIT"
+    },
+    "node_modules/@ungap/structured-clone": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
+      "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
+      "license": "ISC"
+    },
     "node_modules/@xyflow/react": {
       "version": "12.10.0",
       "resolved": "https://registry.npmjs.org/@xyflow/react/-/react-12.10.0.tgz",
@@ -2142,6 +2240,36 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/ccount": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+      "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-html4": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
+      "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-legacy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+      "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/chokidar": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
@@ -2180,6 +2308,16 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/comma-separated-tokens": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+      "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -2354,6 +2492,15 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/destr": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/destr/-/destr-2.0.5.tgz",
@@ -2371,6 +2518,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/devlop": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+      "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/dotenv": {
       "version": "16.6.1",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz",
@@ -2561,6 +2721,52 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/hast-util-to-html": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.5.tgz",
+      "integrity": "sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "ccount": "^2.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "html-void-elements": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "stringify-entities": "^4.0.0",
+        "zwitch": "^2.0.4"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-whitespace": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+      "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/html-void-elements": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
+      "integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/jiti": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
@@ -2891,6 +3097,116 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/mdast-util-to-hast": {
+      "version": "13.2.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.1.tgz",
+      "integrity": "sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "trim-lines": "^3.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-util-character": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.1.tgz",
+      "integrity": "sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-encode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.1.tgz",
+      "integrity": "sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-sanitize-uri": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.1.tgz",
+      "integrity": "sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-symbol": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.1.tgz",
+      "integrity": "sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-types": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.2.tgz",
+      "integrity": "sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/mlly": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.8.0.tgz",
@@ -3089,6 +3405,23 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/oniguruma-parser": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/oniguruma-parser/-/oniguruma-parser-0.12.1.tgz",
+      "integrity": "sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w==",
+      "license": "MIT"
+    },
+    "node_modules/oniguruma-to-es": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/oniguruma-to-es/-/oniguruma-to-es-4.3.4.tgz",
+      "integrity": "sha512-3VhUGN3w2eYxnTzHn+ikMI+fp/96KoRSVK9/kMTcFqj1NRDh2IhQCKvYxDnWePKRXY/AqH+Fuiyb7VHSzBjHfA==",
+      "license": "MIT",
+      "dependencies": {
+        "oniguruma-parser": "^0.12.1",
+        "regex": "^6.0.1",
+        "regex-recursion": "^6.0.2"
+      }
+    },
     "node_modules/opencode-agentlens": {
       "resolved": "packages/opencode-plugin",
       "link": true
@@ -3246,6 +3579,16 @@
         }
       }
     },
+    "node_modules/property-information": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.1.0.tgz",
+      "integrity": "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/pure-rand": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/pure-rand/-/pure-rand-6.1.0.tgz",
@@ -3309,6 +3652,30 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/regex": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/regex/-/regex-6.1.0.tgz",
+      "integrity": "sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg==",
+      "license": "MIT",
+      "dependencies": {
+        "regex-utilities": "^2.3.0"
+      }
+    },
+    "node_modules/regex-recursion": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/regex-recursion/-/regex-recursion-6.0.2.tgz",
+      "integrity": "sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==",
+      "license": "MIT",
+      "dependencies": {
+        "regex-utilities": "^2.3.0"
+      }
+    },
+    "node_modules/regex-utilities": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/regex-utilities/-/regex-utilities-2.3.0.tgz",
+      "integrity": "sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==",
+      "license": "MIT"
+    },
     "node_modules/resolve-from": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
@@ -3428,6 +3795,22 @@
         "@img/sharp-win32-x64": "0.34.5"
       }
     },
+    "node_modules/shiki": {
+      "version": "3.22.0",
+      "resolved": "https://registry.npmjs.org/shiki/-/shiki-3.22.0.tgz",
+      "integrity": "sha512-LBnhsoYEe0Eou4e1VgJACes+O6S6QC0w71fCSp5Oya79inkwkm15gQ1UF6VtQ8j/taMDh79hAB49WUk8ALQW3g==",
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/core": "3.22.0",
+        "@shikijs/engine-javascript": "3.22.0",
+        "@shikijs/engine-oniguruma": "3.22.0",
+        "@shikijs/langs": "3.22.0",
+        "@shikijs/themes": "3.22.0",
+        "@shikijs/types": "3.22.0",
+        "@shikijs/vscode-textmate": "^10.0.2",
+        "@types/hast": "^3.0.4"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.7.6",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.6.tgz",
@@ -3447,6 +3830,30 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/space-separated-tokens": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+      "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/stringify-entities": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
+      "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==",
+      "license": "MIT",
+      "dependencies": {
+        "character-entities-html4": "^2.0.0",
+        "character-entities-legacy": "^3.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/styled-jsx": {
       "version": "5.1.6",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz",
@@ -3574,6 +3981,16 @@
         "tree-kill": "cli.js"
       }
     },
+    "node_modules/trim-lines": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+      "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
@@ -3717,6 +4134,74 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/unist-util-is": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.1.tgz",
+      "integrity": "sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+      "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-stringify-position": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.1.0.tgz",
+      "integrity": "sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit-parents": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.2.tgz",
+      "integrity": "sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/use-sync-external-store": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
@@ -3726,6 +4211,34 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/vfile": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
+      "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-message": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.3.tgz",
+      "integrity": "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/zod": {
       "version": "4.1.8",
       "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.8.tgz",
@@ -3764,6 +4277,16 @@
         }
       }
     },
+    "node_modules/zwitch": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+      "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "packages/database": {
       "name": "@agentlens/database",
       "version": "0.0.1",