Responsive UI

package.json

@@ -9,7 +9,8 @@
     "build:dev": "vite build --mode development",
     "preview": "vite preview",
     "lint": "eslint .",
-    "format": "prettier --write ."
+    "format": "prettier --write .",
+    "postinstall": "node scripts/patch-lovable-config.cjs"
   },
   "dependencies": {
     "@cloudflare/vite-plugin": "^1.25.5",

scripts/patch-lovable-config.cjs

@@ -0,0 +1,37 @@
+// Patches @lovable.dev/vite-tanstack-config to prefer the ESM entrypoint
+// (dist/index.js) over the CJS one (dist/index.cjs) for import contexts.
+// Required for Node.js >=22.12 compat — the CJS file does require("vite"),
+// which is ESM-only, causing ERR_REQUIRE_CYCLE_MODULE.
+const fs = require("fs");
+const path = require("path");
+
+const pkgPath = path.resolve(
+  __dirname,
+  "..",
+  "node_modules",
+  "@lovable.dev",
+  "vite-tanstack-config",
+  "package.json",
+);
+
+if (!fs.existsSync(pkgPath)) {
+  console.warn("[patch-lovable-config] package not found — skipping");
+  process.exit(0);
+}
+
+const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf8"));
+
+if (pkg.exports) {
+  console.log("[patch-lovable-config] exports already present — nothing to do");
+  process.exit(0);
+}
+
+pkg.exports = {
+  ".": {
+    import: "./dist/index.js",
+    require: "./dist/index.cjs",
+  },
+};
+
+fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + "\n");
+console.log("[patch-lovable-config] added exports field to prefer ESM entrypoint");

src/components/Commands.tsx

@@ -63,12 +63,12 @@ export const Commands = () => {
         </div>
 
         <div className="grid lg:grid-cols-[320px_1fr] gap-6">
-          <div className="flex lg:flex-col gap-px bg-border">
+          <div className="flex lg:flex-col gap-px bg-border overflow-x-auto">
             {commands.map((c, i) => (
               <button
                 key={c.name}
                 onClick={() => setActive(i)}
-                className={`text-left p-5 transition-colors whitespace-nowrap lg:whitespace-normal flex-1 ${
+                className={`text-left p-5 transition-colors whitespace-nowrap lg:whitespace-normal flex-1 min-h-[44px] ${
                   active === i
                     ? "bg-[rgba(255,255,255,0.05)] border-l-2 border-l-foreground"
                     : "bg-background hover:bg-[rgba(255,255,255,0.03)]"

src/components/Hero.tsx

@@ -52,17 +52,17 @@ export const Hero = () => {
               </a>
             </div>
 
-            <div className="grid grid-cols-3 gap-6 pt-8 border-t border-border">
+            <div className="grid grid-cols-1 sm:grid-cols-3 gap-6 pt-8 border-t border-border">
               <div>
-                <div className="font-mono text-3xl font-light">12k+</div>
+                <div className="font-mono text-2xl sm:text-3xl font-light">12k+</div>
                 <div className="text-xs text-foreground/50 mt-1">Active clusters</div>
               </div>
               <div>
-                <div className="font-mono text-3xl font-light">99.99%</div>
+                <div className="font-mono text-2xl sm:text-3xl font-light">99.99%</div>
                 <div className="text-xs text-foreground/50 mt-1">Uptime SLA</div>
               </div>
               <div>
-                <div className="font-mono text-3xl font-light">&lt;50ms</div>
+                <div className="font-mono text-2xl sm:text-3xl font-light">&lt;50ms</div>
                 <div className="text-xs text-foreground/50 mt-1">Stream latency</div>
               </div>
             </div>

src/components/Navbar.tsx

@@ -1,5 +1,12 @@
 import { Link } from "@tanstack/react-router";
-import { Star } from "lucide-react";
+import { Menu, Star } from "lucide-react";
+
+import {
+  Sheet,
+  SheetTrigger,
+  SheetContent,
+  SheetClose,
+} from "@/components/ui/sheet";
 
 export const Navbar = () => {
   return (
@@ -15,11 +22,65 @@ export const Navbar = () => {
           <Link to="/docs" className="text-foreground hover:text-foreground/50 transition-colors">Docs</Link>
         </div>
         <div className="flex items-center gap-3">
+          {/* Mobile hamburger trigger — visible only below md */}
+          <Sheet>
+            <SheetTrigger asChild>
+              <button
+                className="md:hidden p-2 text-foreground hover:text-foreground/50 transition-colors"
+                aria-label="Open navigation menu"
+              >
+                <Menu className="h-5 w-5" />
+              </button>
+            </SheetTrigger>
+            <SheetContent side="right" className="w-[280px] sm:w-[350px]">
+              <nav className="flex flex-col gap-6 mt-12">
+                <SheetClose asChild>
+                  <a
+                    href="#features"
+                    className="font-mono text-sm uppercase tracking-[1.4px] text-foreground hover:text-foreground/50 transition-colors"
+                  >
+                    Features
+                  </a>
+                </SheetClose>
+                <SheetClose asChild>
+                  <a
+                    href="#commands"
+                    className="font-mono text-sm uppercase tracking-[1.4px] text-foreground hover:text-foreground/50 transition-colors"
+                  >
+                    Commands
+                  </a>
+                </SheetClose>
+                <SheetClose asChild>
+                  <Link
+                    to="/docs"
+                    className="font-mono text-sm uppercase tracking-[1.4px] text-foreground hover:text-foreground/50 transition-colors"
+                  >
+                    Docs
+                  </Link>
+                </SheetClose>
+                <div className="pt-4 border-t border-border">
+                  <SheetClose asChild>
+                    <a
+                      href="https://github.com/KDM-cli/kdm-cli"
+                      target="_blank"
+                      rel="noreferrer"
+                      className="btn-mono px-4 py-2 inline-flex items-center gap-2 border border-[rgba(255,255,255,0.2)] text-foreground hover:bg-[rgba(255,255,255,0.05)] transition-colors"
+                    >
+                      <Star className="h-4 w-4" />
+                      Star us
+                    </a>
+                  </SheetClose>
+                </div>
+              </nav>
+            </SheetContent>
+          </Sheet>
+
+          {/* Desktop GitHub CTA — hidden on mobile (replaced by Sheet) */}
           <a
             href="https://github.com/KDM-cli/kdm-cli"
             target="_blank"
             rel="noreferrer"
-            className="btn-mono px-4 py-2 inline-flex items-center gap-2 border border-[rgba(255,255,255,0.2)] text-foreground hover:bg-[rgba(255,255,255,0.05)] transition-colors"
+            className="hidden md:inline-flex btn-mono px-4 py-2 items-center gap-2 border border-[rgba(255,255,255,0.2)] text-foreground hover:bg-[rgba(255,255,255,0.05)] transition-colors"
           >
             <Star className="h-4 w-4" />
             Star us

src/components/Terminal.tsx

@@ -30,7 +30,7 @@ export const Terminal = () => {
           ~/cluster — kdm
         </span>
       </div>
-      <div className="p-5 font-mono text-sm leading-relaxed min-h-[360px]">
+      <div className="p-5 font-mono text-sm leading-relaxed min-h-[240px] md:min-h-[360px]">
         {lines.slice(0, visible).map((l, i) => (
           <div key={i} className="flex gap-2">
             {l.prompt && <span className="text-foreground/50">{l.prompt}</span>}

vite.config.ts

@@ -12,7 +12,7 @@ const isVercel = process.env.VERCEL === "1";
 // Redirect TanStack Start's bundled server entry to src/server.ts (our SSR error wrapper).
 // @cloudflare/vite-plugin builds from this — wrangler.jsonc main alone is insufficient.
 export default defineConfig({
-  cloudflare: !isVercel, // Disable cloudflare plugin on Vercel
+  cloudflare: isVercel ? false : {}, // Disable cloudflare plugin on Vercel
   vite: {
     plugins: isVercel ? [nitro({ preset: "vercel" })] : [],
   },