dev3000 0.0.66 → 0.0.67

package/mcp-server/app/page.tsx

@@ -2,6 +2,8 @@
 
 import Link from "next/link"
 import { useEffect, useState } from "react"
+import { DarkModeToggle } from "@/components/dark-mode-toggle"
+import { useDarkMode } from "@/hooks/use-dark-mode"
 
 interface MCPTool {
   name: string
@@ -22,9 +24,109 @@ interface ToolsResponse {
   categories: string[]
 }
 
+// Format tool descriptions by parsing markdown-style sections
+function formatToolDescription(description: string) {
+  const slugify = (value: string) =>
+    value
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/(^-|-$)/g, "")
+
+  // Split by double newline to get sections
+  const sections = description.split("\n\n").filter((section) => section.trim())
+  const keyCounts = new Map<string, number>()
+
+  const getUniqueKey = (base: string) => {
+    const count = keyCounts.get(base) ?? 0
+    keyCounts.set(base, count + 1)
+    return count === 0 ? base : `${base}-${count}`
+  }
+
+  return sections.map((rawSection, _idx) => {
+    const normalizedKey = getUniqueKey(slugify(rawSection) || "section")
+    let section = rawSection
+
+    // Remove excessive emojis
+    // Simple emoji reduction - just remove most emojis except the first in sequences
+    section = section.replace(/(\u{1F300}-\u{1F9FF}|\u{2600}-\u{26FF}|\u{1F900}-\u{1F9FF})+/gu, (match) => {
+      // Keep only the first emoji in a sequence
+      return match.charAt(0)
+    })
+
+    // Handle different section types
+    if (section.includes("**") && section.includes(":")) {
+      // This is a header with content
+      const [header, ...contentParts] = section.split(":")
+      const cleanHeader = header.replace(/\*\*/g, "").trim()
+      const content = contentParts.join(":").trim()
+
+      // Check if content has bullet points
+      if (content.includes("•")) {
+        const items = content.split("•").filter((item) => item.trim())
+        const sectionKey = `${normalizedKey}-bullets`
+        return (
+          <div key={sectionKey}>
+            <h5 className="font-semibold mb-2">{cleanHeader}</h5>
+            <ul className="space-y-1 ml-4">
+              {items.map((item) => {
+                const itemKey = getUniqueKey(`${sectionKey}-item-${slugify(item).slice(0, 40) || "bullet"}`)
+                return (
+                  <li key={itemKey} className="flex items-start">
+                    <span className="text-muted-foreground mr-2">•</span>
+                    <span className="text-muted-foreground text-sm">{item.trim()}</span>
+                  </li>
+                )
+              })}
+            </ul>
+          </div>
+        )
+      }
+
+      return (
+        <div key={`${normalizedKey}-content`}>
+          <h5 className="font-semibold mb-1">{cleanHeader}</h5>
+          <p className="text-muted-foreground text-sm ml-4">{content}</p>
+        </div>
+      )
+    }
+
+    // Handle numbered lists (like workflow steps)
+    if (section.match(/^\d+[\ud83c-\ud83e][\udc00-\udfff]|^\d+\./m)) {
+      const items = section.split(/\n/).filter((item) => item.trim())
+      return (
+        <ol className="space-y-1 ml-4" key={`${normalizedKey}-steps`}>
+          {items.map((item, itemIdx) => {
+            // Clean up the item text
+            const cleanItem = item
+              .replace(/^\d+[\ud83c-\ud83e][\udc00-\udfff]\s*/, "")
+              .replace(/^\d+\.\s*/, "")
+              .trim()
+            return (
+              <li
+                key={getUniqueKey(`${normalizedKey}-step-${slugify(cleanItem).slice(0, 40) || "step"}`)}
+                className="text-muted-foreground text-sm"
+              >
+                {itemIdx + 1}. {cleanItem}
+              </li>
+            )
+          })}
+        </ol>
+      )
+    }
+
+    // Default paragraph
+    return (
+      <p key={`${normalizedKey}-paragraph`} className="text-muted-foreground text-sm leading-relaxed">
+        {section}
+      </p>
+    )
+  })
+}
+
 export default function HomePage() {
   const [tools, setTools] = useState<ToolsResponse | null>(null)
   const [loading, setLoading] = useState(true)
+  const [darkMode, setDarkMode] = useDarkMode()
 
   useEffect(() => {
     fetch("/api/tools")
@@ -39,25 +141,25 @@ export default function HomePage() {
   }, [])
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-background text-foreground">
       {/* Header */}
-      <header className="bg-gray-50 border-b border-gray-200">
+      <header className="bg-muted/30 border-b border-border">
         <div className="max-w-7xl mx-auto px-6 py-8">
           <div className="flex items-center justify-between">
             <div>
               <div className="flex items-center gap-4 mb-3">
-                <div className="w-12 h-12 bg-black rounded flex items-center justify-center">
-                  <span className="text-white font-mono font-bold">d3k</span>
+                <div className="w-12 h-12 bg-foreground rounded flex items-center justify-center">
+                  <span className="text-background font-mono font-bold">d3k</span>
                 </div>
                 <div>
-                  <h1 className="text-3xl font-bold text-gray-900">dev3000 MCP Server</h1>
+                  <h1 className="text-3xl font-bold">dev3000 MCP Server</h1>
                   <div className="flex items-center gap-3 mt-2">
                     <span className="inline-flex items-center gap-2 text-sm text-green-600 font-medium">
                       <span className="w-2 h-2 bg-green-500 rounded-full"></span>
                       Server Running
                     </span>
-                    <span className="text-gray-300">•</span>
-                    <span className="text-sm text-gray-600">Port {process.env.PORT || "3684"}</span>
+                    <span className="text-muted-foreground">•</span>
+                    <span className="text-sm text-muted-foreground">Port {process.env.PORT || "3684"}</span>
                   </div>
                 </div>
               </div>
@@ -65,7 +167,7 @@ export default function HomePage() {
             <div className="flex items-center gap-4">
               <Link
                 href="/logs"
-                className="inline-flex items-center gap-2 px-5 py-3 bg-blue-600 text-white text-sm font-medium rounded hover:bg-blue-700 transition-colors"
+                className="inline-flex items-center gap-2 px-5 py-3 bg-primary text-primary-foreground text-sm font-medium rounded hover:bg-primary/90 transition-colors"
               >
                 📊 View Logs
               </Link>
@@ -73,190 +175,163 @@ export default function HomePage() {
                 href="https://github.com/vercel-labs/dev3000#setup"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="inline-flex items-center gap-2 px-5 py-3 border border-gray-300 text-gray-700 text-sm font-medium rounded hover:bg-gray-50 transition-colors"
+                className="inline-flex items-center gap-2 px-5 py-3 border border-border text-foreground text-sm font-medium rounded hover:bg-accent hover:text-accent-foreground transition-colors"
               >
                 📖 Setup Guide
               </a>
+              <DarkModeToggle darkMode={darkMode} setDarkMode={setDarkMode} />
             </div>
           </div>
         </div>
       </header>
 
-      <div className="flex max-w-7xl mx-auto">
-        {/* Main Content */}
-        <main className="flex-1 px-6 py-8 min-w-0 lg:pr-80">
-          {/* Quick Start */}
-          <section className="mb-16">
-            <div className="bg-blue-50 border border-blue-200 rounded p-8">
-              <h2 className="text-xl font-semibold text-blue-900 mb-4">🚀 Quick Start</h2>
-              <div className="space-y-4">
-                <div>
-                  <span className="text-sm font-medium text-blue-800">MCP Endpoint:</span>
-                  <code className="ml-3 px-4 py-2 bg-blue-100 text-blue-800 text-sm font-mono rounded">
-                    {tools?.endpoint || "http://localhost:3684/mcp"}
-                  </code>
-                </div>
-                <div className="text-sm text-blue-700">
-                  <p className="mb-3">Connect your AI tools to this MCP server for real-time development debugging:</p>
-                  <div className="flex gap-6">
-                    <a
-                      href="https://github.com/vercel-labs/dev3000#claude-desktop"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-blue-600 hover:text-blue-800 font-medium"
-                    >
-                      Claude Desktop Setup →
-                    </a>
-                    <a
-                      href="https://github.com/vercel-labs/dev3000#cursor"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-blue-600 hover:text-blue-800 font-medium"
-                    >
-                      Cursor Setup →
-                    </a>
-                  </div>
+      {/* Main Content - no sidebar needed with only 2 tools */}
+      <main className="max-w-7xl mx-auto px-6 py-8">
+        {/* Quick Start */}
+        <section className="mb-16">
+          <div className="bg-primary/10 border border-primary/20 rounded p-8">
+            <h2 className="text-xl font-semibold mb-4">🚀 Quick Start</h2>
+            <div className="space-y-4">
+              <div>
+                <span className="text-sm font-medium">MCP Endpoint:</span>
+                <code className="ml-3 px-4 py-2 bg-primary/20 text-foreground text-sm font-mono rounded">
+                  {tools?.endpoint || "http://localhost:3684/mcp"}
+                </code>
+              </div>
+              <div className="text-sm">
+                <p className="mb-3">Connect your AI tools to this MCP server for real-time development debugging:</p>
+                <div className="flex gap-6">
+                  <a
+                    href="https://github.com/vercel-labs/dev3000#claude-desktop"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-primary hover:text-primary/80 font-medium"
+                  >
+                    Claude Desktop Setup →
+                  </a>
+                  <a
+                    href="https://github.com/vercel-labs/dev3000#cursor"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-primary hover:text-primary/80 font-medium"
+                  >
+                    Cursor Setup →
+                  </a>
                 </div>
               </div>
             </div>
-          </section>
+          </div>
+        </section>
 
-          {/* Tools Documentation */}
-          <section>
-            <div className="mb-12">
-              <div>
-                <h2 className="text-3xl font-bold text-gray-900 mb-3">Available Tools</h2>
-                <p className="text-gray-600 text-lg">
-                  {loading
-                    ? "Loading MCP tools..."
-                    : `${tools?.totalTools || 0} tools across ${
-                        tools?.categories.length || 0
-                      } categories for AI-powered development debugging`}
-                </p>
-              </div>
+        {/* Tools Documentation */}
+        <section>
+          <div className="mb-12">
+            <div>
+              <h2 className="text-3xl font-bold mb-3">Available Tools</h2>
+              <p className="text-muted-foreground text-lg">
+                {loading
+                  ? "Loading MCP tools..."
+                  : `${tools?.totalTools || 0} tools across ${
+                      tools?.categories.length || 0
+                    } categories for AI-powered development debugging`}
+              </p>
             </div>
+          </div>
 
-            {loading ? (
-              <div className="text-center py-16">
-                <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
-                <p className="mt-6 text-gray-600">Loading tool documentation...</p>
-              </div>
-            ) : tools ? (
-              <div className="grid gap-6 lg:grid-cols-2">
-                {tools.tools.map((tool) => (
-                  <div
-                    key={tool.name}
-                    id={tool.name}
-                    className="border border-gray-200 rounded-lg p-6 hover:border-gray-300 transition-colors"
-                  >
-                    <div className="mb-4">
-                      <h4 className="text-xl font-semibold text-gray-900 font-mono mb-3">{tool.name}</h4>
-                      <p className="text-gray-600 leading-relaxed">
-                        {tool.description.replace(/🚨|⏰|🔍|🪄|📊|🌐|⚙️/g, "").trim()}
-                      </p>
-                    </div>
-                    {tool.parameters.length > 0 && (
-                      <div>
-                        <h5 className="text-sm font-semibold text-gray-800 mb-3">Parameters:</h5>
-                        <div className="space-y-2">
-                          {tool.parameters.map((param) => (
-                            <div key={param.name} className="text-sm">
-                              <div className="flex items-start gap-2">
-                                <span className="font-mono text-blue-600 font-medium">{param.name}</span>
-                                <span className="text-gray-500 text-xs">
-                                  {param.optional ? "(optional)" : "(required)"}
-                                </span>
-                                <span className="text-gray-400 text-xs">- {param.type}</span>
-                              </div>
-                              {param.description && (
-                                <div className="text-gray-600 ml-1 mt-1 text-sm">{param.description}</div>
-                              )}
+          {loading ? (
+            <div className="text-center py-16">
+              <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+              <p className="mt-6 text-muted-foreground">Loading tool documentation...</p>
+            </div>
+          ) : tools ? (
+            <div className="grid gap-6 lg:grid-cols-2">
+              {tools.tools.map((tool) => (
+                <div
+                  key={tool.name}
+                  id={tool.name}
+                  className="border border-border rounded-lg p-6 hover:border-muted-foreground/50 transition-colors"
+                >
+                  <div className="mb-4">
+                    <h4 className="text-xl font-semibold font-mono mb-3">{tool.name}</h4>
+                    <div className="text-muted-foreground space-y-3">{formatToolDescription(tool.description)}</div>
+                  </div>
+                  {tool.parameters.length > 0 && (
+                    <div>
+                      <h5 className="text-sm font-semibold mb-3">Parameters:</h5>
+                      <div className="space-y-2">
+                        {tool.parameters.map((param) => (
+                          <div key={param.name} className="text-sm">
+                            <div className="flex items-start gap-2">
+                              <span className="font-mono text-primary font-medium">{param.name}</span>
+                              <span className="text-muted-foreground text-xs">
+                                {param.optional ? "(optional)" : "(required)"}
+                              </span>
+                              <span className="text-muted-foreground/70 text-xs">- {param.type}</span>
                             </div>
-                          ))}
-                        </div>
+                            {param.description && (
+                              <div className="text-muted-foreground ml-1 mt-1 text-sm">{param.description}</div>
+                            )}
+                          </div>
+                        ))}
                       </div>
-                    )}
-                  </div>
-                ))}
-              </div>
-            ) : (
-              <div className="text-center py-16">
-                <p className="text-red-600 mb-6">Failed to load tool documentation</p>
-                <button
-                  onClick={() => window.location.reload()}
-                  className="px-6 py-3 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 transition-colors"
-                  type="button"
-                >
-                  Retry
-                </button>
-              </div>
-            )}
-          </section>
-
-          {/* Magic Workflow */}
-          <section className="mt-20 bg-gradient-to-r from-purple-50 to-blue-50 border border-purple-200 rounded-lg p-10">
-            <h2 className="text-2xl font-semibold text-gray-900 mb-6 flex items-center gap-3">🪄 The Magic Workflow</h2>
-            <div className="grid md:grid-cols-3 gap-8">
-              <div className="text-center">
-                <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4 shadow-md">
-                  <span className="text-blue-600 font-bold text-2xl">1</span>
+                    </div>
+                  )}
                 </div>
-                <h3 className="font-semibold mb-3 text-lg">AI Finds Issues</h3>
-                <p className="text-gray-600 leading-relaxed">
-                  Tools like debug_my_app and monitor_for_new_errors automatically detect problems
-                </p>
+              ))}
+            </div>
+          ) : (
+            <div className="text-center py-16">
+              <p className="text-destructive mb-6">Failed to load tool documentation</p>
+              <button
+                onClick={() => window.location.reload()}
+                className="px-6 py-3 bg-primary text-primary-foreground text-sm rounded hover:bg-primary/90 transition-colors"
+                type="button"
+              >
+                Retry
+              </button>
+            </div>
+          )}
+        </section>
+
+        {/* Magic Workflow */}
+        <section className="mt-20 bg-gradient-to-r from-primary/10 to-secondary/10 border border-border rounded-lg p-10">
+          <h2 className="text-2xl font-semibold mb-6 flex items-center gap-3">🪄 The Magic Workflow</h2>
+          <div className="grid md:grid-cols-3 gap-8">
+            <div className="text-center">
+              <div className="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center mx-auto mb-4 shadow-md">
+                <span className="text-primary font-bold text-2xl">1</span>
               </div>
-              <div className="text-center">
-                <div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4 shadow-md">
-                  <span className="text-purple-600 font-bold text-2xl">2</span>
-                </div>
-                <h3 className="font-semibold mb-3 text-lg">AI Fixes Code</h3>
-                <p className="text-gray-600 leading-relaxed">
-                  AI analyzes errors and edits your code files to resolve issues
-                </p>
+              <h3 className="font-semibold mb-3 text-lg">AI Finds Issues</h3>
+              <p className="text-muted-foreground leading-relaxed">
+                fix_my_app automatically detects all types of errors and problems in your app
+              </p>
+            </div>
+            <div className="text-center">
+              <div className="w-16 h-16 bg-accent/20 rounded-full flex items-center justify-center mx-auto mb-4 shadow-md">
+                <span className="text-accent-foreground font-bold text-2xl">2</span>
               </div>
-              <div className="text-center">
-                <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4 shadow-md">
-                  <span className="text-green-600 font-bold text-2xl">3</span>
-                </div>
-                <h3 className="font-semibold mb-3 text-lg">AI Verifies Fixes</h3>
-                <p className="text-gray-600 leading-relaxed">
-                  execute_browser_action tests the fixes in real-time with screenshots
-                </p>
+              <h3 className="font-semibold mb-3 text-lg">AI Fixes Code</h3>
+              <p className="text-muted-foreground leading-relaxed">
+                AI analyzes errors and edits your code files to resolve issues
+              </p>
+            </div>
+            <div className="text-center">
+              <div className="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4 shadow-md">
+                <span className="text-green-600 dark:text-green-400 font-bold text-2xl">3</span>
               </div>
+              <h3 className="font-semibold mb-3 text-lg">AI Verifies Fixes</h3>
+              <p className="text-muted-foreground leading-relaxed">
+                execute_browser_action tests the fixes in real-time with screenshots
+              </p>
             </div>
-          </section>
-        </main>
-
-        {/* Table of Contents - Sticky Sidebar (Right) */}
-        <aside className="lg:block w-72 flex-shrink-0 fixed right-0 top-0 h-screen overflow-y-auto z-10">
-          <div className="p-6 bg-gray-50 border-l border-gray-200 h-full">
-            <h3 className="text-sm font-semibold text-gray-900 mb-4">Tools</h3>
-            {loading ? (
-              <div className="text-sm text-gray-500">Loading tools...</div>
-            ) : tools ? (
-              <nav className="space-y-1 text-sm">
-                {tools.tools.map((tool) => (
-                  <a
-                    key={tool.name}
-                    href={`#${tool.name}`}
-                    className="text-gray-600 hover:text-blue-600 transition-colors block py-2 px-3 rounded hover:bg-white"
-                  >
-                    {tool.name}
-                  </a>
-                ))}
-              </nav>
-            ) : (
-              <div className="text-sm text-gray-500">Failed to load tools</div>
-            )}
           </div>
-        </aside>
-      </div>
+        </section>
+      </main>
 
       {/* Footer */}
-      <footer className="border-t border-gray-200 mt-20">
+      <footer className="border-t border-border mt-20">
         <div className="max-w-7xl mx-auto px-6 py-8">
-          <div className="flex items-center justify-between text-sm text-gray-600">
+          <div className="flex items-center justify-between text-sm text-muted-foreground">
             <div>
               <span className="font-semibold">dev3000 MCP Server</span> - AI-powered development monitoring
             </div>
@@ -265,7 +340,7 @@ export default function HomePage() {
                 href="https://github.com/vercel-labs/dev3000"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="hover:text-gray-900 transition-colors"
+                className="hover:text-foreground transition-colors"
               >
                 GitHub
               </a>
@@ -273,7 +348,7 @@ export default function HomePage() {
                 href="https://dev3000.ai"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="hover:text-gray-900 transition-colors"
+                className="hover:text-foreground transition-colors"
               >
                 Homepage
               </a>

package/mcp-server/next.config.ts

@@ -3,7 +3,7 @@ import path from "path"
 
 const nextConfig: NextConfig = {
   reactStrictMode: true,
-  experimental: { reactCompiler: true },
+  experimental: { reactCompiler: true, turbopackPersistentCaching: true },
   devIndicators: false,
   turbopack: {
     root: path.join(__dirname, "..")

package/mcp-server/package.json

@@ -7,14 +7,22 @@
     "build": "next build --turbopack",
     "start": "next start",
     "typegen": "next typegen",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "tools": "tsx tools-cli.ts"
   },
   "dependencies": {
+    "@modelcontextprotocol/sdk": "catalog:",
+    "@radix-ui/react-slot": "catalog:",
     "autoprefixer": "catalog:",
+    "class-variance-authority": "catalog:",
+    "clsx": "catalog:",
+    "commander": "^11.1.0",
+    "lucide-react": "catalog:",
     "mcp-handler": "^1.0.2",
     "next": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:",
+    "tailwind-merge": "catalog:",
     "ws": "^8.18.3",
     "zod": "catalog:"
   },

package/mcp-server/public/favicon-16.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <rect width="16" height="16" fill="#ffffff" rx="1"/>
+  <text x="8" y="11" font-family="monospace" font-size="5" font-weight="bold" text-anchor="middle" fill="#000000">d3k</text>
+</svg>

package/mcp-server/public/favicon-64.svg

@@ -0,0 +1,4 @@
+<svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+  <rect width="64" height="64" fill="#ffffff" rx="4"/>
+  <text x="32" y="44" font-family="monospace" font-size="20" font-weight="bold" text-anchor="middle" fill="#000000">d3k</text>
+</svg>

package/mcp-server/public/favicon-preview.html

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>dev3000 Favicon Preview - Bold & Readable</title>
+    <style>
+        body { font-family: monospace; background: #f0f0f0; padding: 20px; }
+        .favicon-preview { display: inline-block; margin: 10px; padding: 10px; background: white; border: 1px solid #ccc; }
+        svg { border: 1px solid #000; }
+        .browser-tab-demo { background: #e8e8e8; padding: 10px; border-radius: 8px; margin: 20px 0; }
+        .tab { display: inline-block; background: #d0d0d0; padding: 4px 8px; border-radius: 4px 4px 0 0; margin-right: 2px; font-size: 12px; }
+        .tab svg { vertical-align: middle; margin-right: 4px; border: none; }
+    </style>
+</head>
+<body>
+    <h2>dev3000 Favicon Preview - Bold & Readable Design</h2>
+    <p>Simplified design with larger white rectangle and bold text for maximum readability at small sizes.</p>
+    
+    <div class="browser-tab-demo">
+        <h3>How it looks in browser tabs:</h3>
+        <div class="tab">
+            <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+                <rect width="16" height="16" fill="#000000"/>
+                <rect x="2" y="2" width="12" height="12" fill="#ffffff" rx="1"/>
+                <text x="8" y="12" font-family="monospace" font-size="6" font-weight="900" text-anchor="middle" fill="#000000">d3k</text>
+            </svg>
+            dev3000 - AI Debugging
+        </div>
+        <div class="tab">
+            <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+                <rect width="16" height="16" fill="#000000"/>
+                <rect x="2" y="2" width="12" height="12" fill="#ffffff" rx="1"/>
+                <text x="8" y="12" font-family="monospace" font-size="6" font-weight="900" text-anchor="middle" fill="#000000">d3k</text>
+            </svg>
+            localhost:3684/logs
+        </div>
+    </div>
+    
+    <div class="favicon-preview">
+        <h3>16x16 (Browser Tab) - NEW BOLD DESIGN</h3>
+        <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+            <rect width="16" height="16" fill="#000000"/>
+            <rect x="2" y="2" width="12" height="12" fill="#ffffff" rx="1"/>
+            <text x="8" y="12" font-family="monospace" font-size="6" font-weight="900" text-anchor="middle" fill="#000000">d3k</text>
+        </svg>
+        <p>Bold, simple rectangle with large text - clearly readable!</p>
+    </div>
+
+    <div class="favicon-preview">
+        <h3>32x32 (Standard)</h3>
+        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+            <rect width="32" height="32" fill="#000000"/>
+            <rect x="4" y="4" width="24" height="24" fill="#ffffff" rx="2"/>
+            <text x="16" y="24" font-family="monospace" font-size="12" font-weight="900" text-anchor="middle" fill="#000000">d3k</text>
+        </svg>
+    </div>
+
+    <div class="favicon-preview">
+        <h3>64x64 (High-DPI)</h3>
+        <svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+            <rect width="64" height="64" fill="#000000"/>
+            <rect x="8" y="8" width="48" height="48" fill="#ffffff" rx="4"/>
+            <text x="32" y="48" font-family="monospace" font-size="24" font-weight="900" text-anchor="middle" fill="#000000">d3k</text>
+        </svg>
+    </div>
+
+</body>
+</html>

package/mcp-server/public/favicon.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <rect width="32" height="32" fill="#ffffff" rx="2"/>
+  <text x="16" y="22" font-family="monospace" font-size="10" font-weight="bold" text-anchor="middle" fill="#000000">d3k</text>
+</svg>

package/mcp-server/public/screenshots/test.txt

@@ -0,0 +1 @@
+test