Add roadmap page

app/changelog/page.tsx

@@ -2,9 +2,9 @@ import type { Metadata } from "next";
 import Link from "next/link";
 import { Fragment } from "react";
 import { Terminal, ArrowLeft, Github, ExternalLink } from "lucide-react";
-import { ArcadeSplash } from "@/components/changelog/ArcadeSplash";
-import { ArcadeBackground } from "@/components/changelog/ArcadeBackground";
-import { InstallBlock } from "@/components/changelog/InstallBlock";
+import { ArcadeSplash } from "@/components/marketing/arcade/ArcadeSplash";
+import { ArcadeBackground } from "@/components/marketing/arcade/ArcadeBackground";
+import { InstallBlock } from "@/components/marketing/changelog/InstallBlock";
 
 export const dynamic = "force-static";
 

app/roadmap/page.tsx

@@ -0,0 +1,105 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { Terminal, ArrowLeft, Github } from "lucide-react";
+import { ArcadeBackground } from "@/components/marketing/arcade/ArcadeBackground";
+import { RoadmapBoard } from "@/components/marketing/roadmap/RoadmapBoard";
+
+export const dynamic = "force-static";
+
+export const metadata: Metadata = {
+  title: "Roadmap · AI DevKit Skills",
+  description: "What's in progress on AI DevKit Skills, and what's already shipped.",
+};
+
+const ACCENT = "#82AAFF";
+const REPO = "https://github.com/CommandOSSLabs/ai-devkit";
+
+// Same corner-mark decoration as the changelog page's "Back to site" link —
+// reused directly, not re-derived, so the two pages read as one site.
+function CornerMark({ className }: { className?: string }) {
+  return (
+    <svg
+      width="8"
+      height="8"
+      viewBox="0 0 8 8"
+      className={`pointer-events-none absolute text-[var(--border-strong)] opacity-40 transition-opacity duration-300 group-hover:opacity-100 ${className ?? ""}`}
+    >
+      <path d="M1 8 V1 H8" stroke="currentColor" strokeWidth="1" fill="none" />
+      <circle cx="1" cy="1" r="1.2" fill="currentColor" className="animate-pulse" />
+    </svg>
+  );
+}
+
+export default function RoadmapPage() {
+  return (
+    <div className="relative min-h-screen bg-[var(--bg-base)] text-[var(--text-primary)]">
+      {/* Same ambient background as /changelog, no splash — the reveal
+          moment belongs to the changelog; landing here should feel calm. */}
+      <ArcadeBackground className="fixed inset-0 z-0" word="" opacity={0.4} />
+
+      <div className="relative z-10">
+        <header className="border-b border-[var(--border-subtle)] px-4 py-4 sm:px-6">
+          <div className="mx-auto flex max-w-5xl items-center justify-between">
+            <Link href="/" className="flex items-center gap-2">
+              <div className="flex h-7 w-7 items-center justify-center rounded-md border border-[var(--border-strong)] bg-[var(--bg-surface)]">
+                <Terminal size={14} style={{ color: ACCENT }} />
+              </div>
+              <span className="whitespace-nowrap font-mono text-[14px] font-semibold">ai-devkit</span>
+            </Link>
+            <Link
+              href="/"
+              className="group relative inline-flex items-center gap-1.5 px-2 py-1 text-[13px] text-[var(--text-secondary)] transition-colors hover:text-[var(--text-primary)]"
+            >
+              <CornerMark className="left-0 top-0" />
+              <CornerMark className="right-0 top-0 -scale-x-100" />
+              <CornerMark className="bottom-0 left-0 -scale-y-100" />
+              <CornerMark className="bottom-0 right-0 -scale-100" />
+              <ArrowLeft size={14} />
+              <span>Back to site</span>
+            </Link>
+          </div>
+        </header>
+
+        <main className="mx-auto max-w-3xl px-4 py-16 sm:px-6 sm:py-20">
+          <div className="mb-14">
+            <span className="font-mono text-[13px] uppercase tracking-wider text-[var(--text-secondary)]">
+              Roadmap
+            </span>
+            <h1 className="mt-3 text-[clamp(28px,4vw,40px)] font-medium tracking-tight text-[var(--text-primary)]">
+              What&apos;s In Progress
+            </h1>
+            <p className="mt-2 max-w-md text-[15px] text-[var(--text-secondary)]">
+              What&apos;s being worked on right now, and what&apos;s already shipped. Next and Later are open —
+              there&apos;s no fixed plan for them yet.
+            </p>
+            <p className="mt-3 text-[13px] text-[var(--text-secondary)]">
+              Want something prioritized?{" "}
+              <Link
+                href={`${REPO}/issues`}
+                target="_blank"
+                rel="noreferrer"
+                className="font-medium underline decoration-current/30 underline-offset-4 transition-colors hover:decoration-current"
+                style={{ color: ACCENT }}
+              >
+                Open an issue on GitHub
+              </Link>
+              .
+            </p>
+            <Link
+              href={REPO}
+              target="_blank"
+              rel="noreferrer"
+              className="mt-3 inline-flex w-fit items-center gap-1.5 text-[13px] text-[var(--text-secondary)] transition-colors hover:text-[var(--text-primary)]"
+            >
+              <Github size={14} />
+              View the repo on GitHub
+              <span aria-hidden="true">&rarr;</span>
+            </Link>
+          </div>
+
+          <RoadmapBoard />
+        </main>
+      </div>
+    </div>
+  );
+}

components/changelog/ArcadeBackground.tsx → components/marketing/arcade/ArcadeBackground.tsx

@@ -8,8 +8,8 @@
 
 import { useEffect, useRef } from "react";
 import { cn } from "@/lib/utils";
-import { Arcade } from "./arcade/engine";
-import { COLORWAYS } from "./arcade/params";
+import { Arcade } from "./engine";
+import { COLORWAYS } from "./params";
 
 const DARK_COLORWAY = COLORWAYS.findIndex((c) => c.name === "Cyanide Dark");
 

components/changelog/ArcadeSplash.tsx → components/marketing/arcade/ArcadeSplash.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
-import { Arcade } from "./arcade/engine";
+import { Arcade } from "./engine";
 
 const TOTAL_MS = 5000;
 const FADE_MS = 600;

components/marketing/roadmap/RoadmapBoard.tsx

@@ -0,0 +1,165 @@
+"use client";
+
+// Three-column board (Now / Next / Later) plus a Shipped section that
+// mirrors the real /changelog. Same bordered-card, mono-label visual
+// language as the changelog page — border-subtle cards, "$ ref"-style
+// commit/PR chips, accent color reused from there.
+
+import { useState } from "react";
+import Link from "next/link";
+import { CATEGORIES, ROADMAP_ITEMS, STATUS_DESCRIPTIONS, STATUS_LABELS, type RoadmapCategory, type RoadmapItem, type RoadmapStatus } from "./data";
+
+const COLUMNS: RoadmapStatus[] = ["now", "next", "later"];
+
+const STATUS_DOT: Record<RoadmapStatus, string> = {
+  now: "bg-emerald-400 animate-pulse",
+  next: "bg-amber-400",
+  later: "bg-[var(--text-disabled)]",
+  shipped: "bg-emerald-400",
+};
+
+function StatusDot({ status }: { status: RoadmapStatus }) {
+  return <span aria-hidden className={`h-1.5 w-1.5 rounded-full ${STATUS_DOT[status]}`} />;
+}
+
+function RefChip({ label, url }: { label: string; url: string }) {
+  return (
+    <Link
+      href={url}
+      target="_blank"
+      rel="noreferrer"
+      className="mt-2 inline-flex w-fit items-center gap-1.5 rounded border border-[var(--border-subtle)] bg-[var(--bg-base)] px-1.5 py-0.5 font-mono text-[11px] text-[var(--text-secondary)] transition-colors hover:border-[var(--border-strong)] hover:text-[var(--text-primary)]"
+    >
+      <span className="select-none text-[var(--text-tertiary)]">$</span>
+      {label}
+    </Link>
+  );
+}
+
+function ActiveCard({ item }: { item: Extract<RoadmapItem, { status: "now" | "next" | "later" }> }) {
+  return (
+    <div className="border border-[var(--border-subtle)] p-4 transition-colors hover:border-[var(--border-strong)]">
+      <h3 className="text-[14px] font-medium text-[var(--text-primary)]">{item.title}</h3>
+      <p className="mt-1.5 text-[13px] leading-relaxed text-[var(--text-secondary)]">{item.description}</p>
+      <div className="mt-2 flex items-center justify-between gap-2">
+        <span className="font-mono text-[11px] uppercase tracking-wider text-[var(--text-tertiary)]">{item.category}</span>
+        {item.pr && <RefChip label="gh pr" url={item.pr} />}
+      </div>
+    </div>
+  );
+}
+
+function ShippedCard({ item }: { item: Extract<RoadmapItem, { status: "shipped" }> }) {
+  const content = (
+    <>
+      <div className="min-w-0 flex-1">
+        <h3 className="text-[14px] font-medium text-[var(--text-primary)] transition-colors group-hover:text-[var(--text-primary)]/80">
+          {item.title}
+        </h3>
+        <p className="mt-1.5 text-[13px] leading-relaxed text-[var(--text-secondary)] line-clamp-2">{item.description}</p>
+        {/* A ref chip is itself a link — only shown when the card isn't
+            already wrapped in one, since an <a> can't nest inside an <a>. */}
+        {!item.href && item.ref && <RefChip label={item.ref.label} url={item.ref.url} />}
+      </div>
+      <span className="mt-0.5 whitespace-nowrap font-mono text-[11px] text-[var(--text-tertiary)]">{item.shippedDate}</span>
+    </>
+  );
+
+  const className = "group flex items-start gap-3 border border-[var(--border-subtle)] p-4 transition-colors hover:border-[var(--border-strong)]";
+
+  if (item.href) {
+    return (
+      <Link href={item.href} className={className}>
+        {content}
+      </Link>
+    );
+  }
+  return <div className={className}>{content}</div>;
+}
+
+export function RoadmapBoard() {
+  const [filter, setFilter] = useState<RoadmapCategory | null>(null);
+
+  const filtered = filter ? ROADMAP_ITEMS.filter((item) => item.category === filter) : ROADMAP_ITEMS;
+  const itemsFor = (status: RoadmapStatus) =>
+    filtered.filter((item): item is Extract<RoadmapItem, { status: "now" | "next" | "later" }> => item.status !== "shipped" && item.status === status);
+  const shipped = filtered.filter((item): item is Extract<RoadmapItem, { status: "shipped" }> => item.status === "shipped");
+
+  return (
+    <div>
+      <div className="mb-8 flex flex-wrap items-center gap-x-4 gap-y-2">
+        <button
+          type="button"
+          onClick={() => setFilter(null)}
+          className={`text-[13px] transition-colors ${filter === null ? "text-[var(--text-primary)]" : "text-[var(--text-secondary)] hover:text-[var(--text-primary)]"}`}
+        >
+          All
+        </button>
+        <div className="h-4 w-px bg-[var(--border-subtle)]" />
+        {CATEGORIES.map((cat) => (
+          <button
+            key={cat}
+            type="button"
+            onClick={() => setFilter(filter === cat ? null : cat)}
+            className={`text-[13px] transition-colors ${filter === cat ? "text-[var(--text-primary)]" : "text-[var(--text-secondary)] hover:text-[var(--text-primary)]"}`}
+          >
+            {cat}
+          </button>
+        ))}
+      </div>
+
+      <div className="grid grid-cols-1 gap-px border border-[var(--border-subtle)] bg-[var(--border-subtle)] md:grid-cols-3">
+        {COLUMNS.map((status) => {
+          const items = itemsFor(status);
+          return (
+            <div key={status} className="bg-[var(--bg-base)]">
+              <div className="border-b border-[var(--border-subtle)] px-4 py-3">
+                <h2 className="flex items-center gap-2 font-mono text-[11px] font-medium uppercase tracking-wider text-[var(--text-secondary)]">
+                  <StatusDot status={status} />
+                  {STATUS_LABELS[status]}
+                  <span className="text-[var(--text-disabled)]">{items.length}</span>
+                </h2>
+                <p className="mt-1 text-[11px] text-[var(--text-tertiary)]">{STATUS_DESCRIPTIONS[status]}</p>
+              </div>
+              <div className="flex min-h-[120px] flex-col gap-px bg-[var(--border-subtle)]">
+                {items.map((item) => (
+                  <div key={item.id} className="bg-[var(--bg-base)]">
+                    <ActiveCard item={item} />
+                  </div>
+                ))}
+                {items.length === 0 && (
+                  <p className="px-4 py-8 text-center text-[12px] text-[var(--text-disabled)]">Nothing here yet</p>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {shipped.length > 0 && (
+        <div className="mt-12">
+          <div className="mb-4 flex items-baseline justify-between">
+            <h2 className="flex items-center gap-2 font-mono text-[11px] font-medium uppercase tracking-wider text-[var(--text-secondary)]">
+              <StatusDot status="shipped" />
+              {STATUS_LABELS.shipped}
+              <span className="text-[var(--text-disabled)]">{shipped.length}</span>
+            </h2>
+            <Link
+              href="/changelog"
+              className="text-[12px] text-[var(--text-secondary)] transition-colors hover:text-[var(--text-primary)]"
+            >
+              Full changelog &rarr;
+            </Link>
+          </div>
+          <div className="grid grid-cols-1 gap-px border border-[var(--border-subtle)] bg-[var(--border-subtle)] md:grid-cols-2">
+            {shipped.map((item) => (
+              <div key={item.id} className="bg-[var(--bg-base)]">
+                <ShippedCard item={item} />
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}