From fde765a5a882ed7605db78e07e2b011addc39254 Mon Sep 17 00:00:00 2001
From: Kai <kai@itskai.dev>
Date: Mon, 9 Feb 2026 17:59:03 -0800
Subject: [PATCH] Wire roadmap page to API data with voting

---
 __tests__/roadmap-page.test.tsx   | 136 +++++-------
 data/roadmap.json                 | 107 +++++++++
 src/app/api/roadmap/route.ts      |  26 +++
 src/app/api/roadmap/vote/route.ts |  45 ++++
 src/app/roadmap/[id]/page.tsx     |  22 +-
 src/app/roadmap/page.tsx          | 353 ++++++++++++------------------
 src/lib/server/roadmapStore.ts    |  55 +++++
 7 files changed, 445 insertions(+), 299 deletions(-)
 create mode 100644 data/roadmap.json
 create mode 100644 src/app/api/roadmap/route.ts
 create mode 100644 src/app/api/roadmap/vote/route.ts
 create mode 100644 src/lib/server/roadmapStore.ts

diff --git a/__tests__/roadmap-page.test.tsx b/__tests__/roadmap-page.test.tsx
index 3a87b2d3..e96ea391 100644
--- a/__tests__/roadmap-page.test.tsx
+++ b/__tests__/roadmap-page.test.tsx
@@ -1,104 +1,82 @@
 /** @jest-environment jsdom */
 
 import React from "react";
-import { render, screen, fireEvent } from "@testing-library/react";
+import { render, screen, waitFor, fireEvent } from "@testing-library/react";
 import RoadmapPage from "../src/app/roadmap/page";
 
-type LinkProps = {
-  href: string;
-  children?: React.ReactNode;
-} & React.AnchorHTMLAttributes<HTMLAnchorElement>;
+const mockItems = [
+  {
+    id: "workspace-profiles",
+    title: "Workspace Profiles",
+    description: "Save and switch between project-specific agent configurations.",
+    status: "planned",
+    votes: 42,
+  },
+  {
+    id: "roadmap-voting-api",
+    title: "Roadmap Voting API",
+    description: "Public API support for roadmap voting and analytics.",
+    status: "in-progress",
+    votes: 74,
+  },
+  {
+    id: "public-skill-registry",
+    title: "Public Skill Registry",
+    description: "Searchable index of verified skills and metadata.",
+    status: "completed",
+    votes: 96,
+  },
+];
 
-jest.mock("next/link", () => {
-  const LinkMock = ({ href, children, ...props }: LinkProps) => (
-    <a href={href} {...props}>
-      {children}
-    </a>
-  );
-  LinkMock.displayName = "Link";
-  return LinkMock;
-});
+describe("Roadmap Page", () => {
+  beforeEach(() => {
+    global.fetch = jest.fn((input: RequestInfo | URL, init?: RequestInit) => {
+      const url = String(input);
 
-jest.mock("next/navigation", () => ({
-  usePathname: jest.fn(() => "/roadmap"),
-}));
+      if (url === "/api/roadmap" && (!init || init.method === undefined)) {
+        return Promise.resolve({
+          ok: true,
+          json: async () => ({ items: mockItems, total: mockItems.length }),
+        } as Response);
+      }
 
-describe("Roadmap Page", () => {
-  it("renders the roadmap page", () => {
-    const { container } = render(<RoadmapPage />);
-    expect(container).toBeInTheDocument();
-  });
+      if (url === "/api/roadmap/vote" && init?.method === "POST") {
+        return Promise.resolve({
+          ok: true,
+          json: async () => ({ id: "workspace-profiles", votes: 43 }),
+        } as Response);
+      }
 
-  it("displays the page title", () => {
-    render(<RoadmapPage />);
-    expect(screen.getByText("Product Roadmap")).toBeInTheDocument();
+      return Promise.resolve({ ok: false } as Response);
+    }) as jest.Mock;
   });
 
-  it("displays the page description", () => {
-    render(<RoadmapPage />);
-    expect(
-      screen.getByText(/See what we're building/i)
-    ).toBeInTheDocument();
+  afterEach(() => {
+    jest.resetAllMocks();
   });
 
-  it("displays category filter buttons", () => {
+  it("renders roadmap columns from API data", async () => {
     render(<RoadmapPage />);
-    expect(screen.getByRole("button", { name: "All" })).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Platform" })).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Skills" })).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Community" })).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "API" })).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Enterprise" })).toBeInTheDocument();
-  });
 
-  it("displays sort dropdown", () => {
-    render(<RoadmapPage />);
-    expect(screen.getByText("Sort by:")).toBeInTheDocument();
-    const select = screen.getByRole("combobox");
-    expect(select).toBeInTheDocument();
-  });
+    await waitFor(() => {
+      expect(screen.getByText("Workspace Profiles")).toBeInTheDocument();
+    });
 
-  it("displays all status columns", () => {
-    render(<RoadmapPage />);
-    expect(screen.getByText("Planned")).toBeInTheDocument();
     expect(screen.getByText("In Progress")).toBeInTheDocument();
-    expect(screen.getByText("Shipped")).toBeInTheDocument();
-    expect(screen.getByText("Considering")).toBeInTheDocument();
+    expect(screen.getByText("Completed")).toBeInTheDocument();
   });
 
-  it("displays roadmap items", () => {
+  it("votes on planned items", async () => {
     render(<RoadmapPage />);
-    // Check for at least one item from the seed data
-    expect(screen.getByText("Real-time Agent Monitoring")).toBeInTheDocument();
-  });
 
-  it("allows filtering by category", () => {
-    render(<RoadmapPage />);
-    const platformButton = screen.getByRole("button", { name: "Platform" });
-    fireEvent.click(platformButton);
-    expect(screen.getByText("Real-time Agent Monitoring")).toBeInTheDocument();
-  });
+    await waitFor(() => {
+      expect(screen.getByText("Workspace Profiles")).toBeInTheDocument();
+    });
 
-  it("allows sorting items", () => {
-    render(<RoadmapPage />);
-    const select = screen.getByRole("combobox");
-    fireEvent.change(select, { target: { value: "newest" } });
-    expect(select).toHaveValue("newest");
-  });
+    fireEvent.click(screen.getByRole("button", { name: "Vote" }));
 
-  it("displays upvote and comment counts", () => {
-    render(<RoadmapPage />);
-    // Check that vote/comment icons and counts are rendered
-    const cards = screen.getAllByRole("link");
-    expect(cards.length).toBeGreaterThan(0);
-  });
-
-  it("items link to detail pages", () => {
-    render(<RoadmapPage />);
-    const links = screen.getAllByRole("link");
-    const roadmapLink = links.find((link) =>
-      link.getAttribute("href")?.startsWith("/roadmap/")
-    );
-    expect(roadmapLink).toBeTruthy();
+    await waitFor(() => {
+      expect(screen.getByText("43 votes")).toBeInTheDocument();
+    });
   });
 });
diff --git a/data/roadmap.json b/data/roadmap.json
new file mode 100644
index 00000000..ec4d439e
--- /dev/null
+++ b/data/roadmap.json
@@ -0,0 +1,107 @@
+[
+  {
+    "id": "workspace-profiles",
+    "title": "Workspace Profiles",
+    "description": "Save and switch between project-specific agent configurations.",
+    "status": "planned",
+    "votes": 42
+  },
+  {
+    "id": "smart-context-packs",
+    "title": "Smart Context Packs",
+    "description": "Auto-load relevant docs and memories based on the current task.",
+    "status": "planned",
+    "votes": 57
+  },
+  {
+    "id": "voice-story-mode",
+    "title": "Voice Story Mode",
+    "description": "One-click narrated summaries and updates using built-in TTS.",
+    "status": "planned",
+    "votes": 33
+  },
+  {
+    "id": "team-handoffs",
+    "title": "Team Handoffs",
+    "description": "Structured lane handoff notes between agents and teammates.",
+    "status": "planned",
+    "votes": 61
+  },
+  {
+    "id": "prompt-diff-view",
+    "title": "Prompt Diff View",
+    "description": "Compare instruction changes over time with inline highlights.",
+    "status": "planned",
+    "votes": 25
+  },
+  {
+    "id": "roadmap-voting-api",
+    "title": "Roadmap Voting API",
+    "description": "Public API support for roadmap voting and analytics.",
+    "status": "in-progress",
+    "votes": 74
+  },
+  {
+    "id": "agent-observability",
+    "title": "Agent Observability",
+    "description": "Latency, token, and failure dashboards for agent runs.",
+    "status": "in-progress",
+    "votes": 89
+  },
+  {
+    "id": "marketplace-reviews",
+    "title": "Marketplace Reviews",
+    "description": "Community ratings and written reviews for shared artifacts.",
+    "status": "in-progress",
+    "votes": 52
+  },
+  {
+    "id": "premium-entitlements-v2",
+    "title": "Premium Entitlements v2",
+    "description": "Granular usage limits and team-level premium features.",
+    "status": "in-progress",
+    "votes": 48
+  },
+  {
+    "id": "changelog-digests",
+    "title": "Changelog Digests",
+    "description": "Weekly digest emails and API feed summaries.",
+    "status": "in-progress",
+    "votes": 40
+  },
+  {
+    "id": "public-skill-registry",
+    "title": "Public Skill Registry",
+    "description": "Searchable index of verified skills and metadata.",
+    "status": "completed",
+    "votes": 96
+  },
+  {
+    "id": "agent-verification-badges",
+    "title": "Agent Verification Badges",
+    "description": "Visual trust indicators for validated agents and MCP servers.",
+    "status": "completed",
+    "votes": 87
+  },
+  {
+    "id": "digest-api",
+    "title": "Digest API",
+    "description": "Programmatic digest endpoint for external clients.",
+    "status": "completed",
+    "votes": 65
+  },
+  {
+    "id": "artifacts-rss-feeds",
+    "title": "Artifacts RSS Feeds",
+    "description": "RSS/JSON feeds for artifact publishing and updates.",
+    "status": "completed",
+    "votes": 58
+  },
+  {
+    "id": "search-quota-controls",
+    "title": "Search Quota Controls",
+    "description": "Per-user search quota tracking and upgrade prompts.",
+    "status": "completed",
+    "votes": 71
+  }
+]
diff --git a/src/app/api/roadmap/route.ts b/src/app/api/roadmap/route.ts
new file mode 100644
index 00000000..87599ad4
--- /dev/null
+++ b/src/app/api/roadmap/route.ts
@@ -0,0 +1,26 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getRoadmapItems, isRoadmapStatus } from "@/lib/server/roadmapStore";
+
+export async function GET(request: NextRequest) {
+  try {
+    const items = await getRoadmapItems();
+    const status = request.nextUrl.searchParams.get("status");
+
+    if (status && !isRoadmapStatus(status)) {
+      return NextResponse.json(
+        { error: "Invalid status. Use planned, in-progress, or completed." },
+        { status: 400 }
+      );
+    }
+
+    const filteredItems = status ? items.filter((item) => item.status === status) : items;
+
+    return NextResponse.json(
+      { items: filteredItems, total: filteredItems.length },
+      { headers: { "Cache-Control": "no-store" } }
+    );
+  } catch (error) {
+    console.error("Failed to load roadmap items", error);
+    return NextResponse.json({ error: "Failed to load roadmap" }, { status: 500 });
+  }
+}
diff --git a/src/app/api/roadmap/vote/route.ts b/src/app/api/roadmap/vote/route.ts
new file mode 100644
index 00000000..b0bb6ef4
--- /dev/null
+++ b/src/app/api/roadmap/vote/route.ts
@@ -0,0 +1,45 @@
+import { NextRequest, NextResponse } from "next/server";
+import { checkRateLimit, getClientIp } from "@/lib/requestLimits";
+import { incrementRoadmapVote } from "@/lib/server/roadmapStore";
+
+const RATE_LIMIT_WINDOW_MS = 60 * 60 * 1000;
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = (await request.json()) as { itemId?: unknown };
+    const itemId = typeof body.itemId === "string" ? body.itemId.trim() : "";
+
+    if (!itemId) {
+      return NextResponse.json({ error: "itemId is required" }, { status: 400 });
+    }
+
+    const ip = getClientIp(request);
+    const limited = checkRateLimit(`roadmap-vote:${ip}:${itemId}`, {
+      windowMs: RATE_LIMIT_WINDOW_MS,
+      max: 1,
+    });
+
+    if (!limited.ok) {
+      return NextResponse.json(
+        { error: "Vote limit reached for this item. Try again later." },
+        {
+          status: 429,
+          headers: {
+            "Retry-After": String(limited.retryAfterSec),
+          },
+        }
+      );
+    }
+
+    const vote = await incrementRoadmapVote(itemId);
+
+    if (!vote) {
+      return NextResponse.json({ error: "Roadmap item not found" }, { status: 404 });
+    }
+
+    return NextResponse.json(vote);
+  } catch (error) {
+    console.error("Failed to vote on roadmap item", error);
+    return NextResponse.json({ error: "Invalid request body" }, { status: 400 });
+  }
+}
diff --git a/src/app/roadmap/[id]/page.tsx b/src/app/roadmap/[id]/page.tsx
index 873c7816..cd800fcd 100644
--- a/src/app/roadmap/[id]/page.tsx
+++ b/src/app/roadmap/[id]/page.tsx
@@ -7,7 +7,27 @@ import { Badge } from "@/components/ui/badge";
 import { Card, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import roadmapData from "@/data/roadmap.json";
-import type { RoadmapItem, RoadmapStatus, RoadmapCategory } from "../page";
+
+type RoadmapStatus = "Planned" | "In Progress" | "Shipped" | "Considering";
+type RoadmapCategory = "Platform" | "Skills" | "Community" | "API" | "Enterprise";
+
+type RoadmapItem = {
+  id: string;
+  title: string;
+  description: string;
+  fullDescription: string;
+  category: RoadmapCategory;
+  status: RoadmapStatus;
+  upvotes: number;
+  commentCount: number;
+  createdAt: string;
+  updatedAt: string;
+  timeline: Array<{
+    date: string;
+    status: RoadmapStatus;
+    note: string;
+  }>;
+};
 
 const categoryColors: Record<RoadmapCategory, string> = {
   Platform: "bg-cyan/10 text-cyan border-cyan/30",
diff --git a/src/app/roadmap/page.tsx b/src/app/roadmap/page.tsx
index f929cd22..87f626e6 100644
--- a/src/app/roadmap/page.tsx
+++ b/src/app/roadmap/page.tsx
@@ -1,256 +1,171 @@
 "use client";
 
-import { useState, useMemo } from "react";
-import Link from "next/link";
-import { Badge } from "@/components/ui/badge";
+import { useEffect, useMemo, useState } from "react";
 import { Card, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
-import roadmapData from "@/data/roadmap.json";
 
-export type RoadmapStatus = "Planned" | "In Progress" | "Shipped" | "Considering";
-export type RoadmapCategory = "Platform" | "Skills" | "Community" | "API" | "Enterprise";
+type RoadmapStatus = "planned" | "in-progress" | "completed";
 
-export interface RoadmapItem {
+type RoadmapItem = {
   id: string;
   title: string;
   description: string;
-  fullDescription: string;
-  category: RoadmapCategory;
   status: RoadmapStatus;
-  upvotes: number;
-  commentCount: number;
-  createdAt: string;
-  updatedAt: string;
-  timeline: Array<{
-    date: string;
-    status: RoadmapStatus;
-    note: string;
-  }>;
-}
-
-type SortOption = "most-voted" | "recently-updated" | "newest";
-
-const categoryColors: Record<RoadmapCategory, string> = {
-  Platform: "bg-cyan/10 text-cyan border-cyan/30",
-  Skills: "bg-purple/10 text-purple border-purple/30",
-  Community: "bg-green/10 text-green border-green/30",
-  API: "bg-orange/10 text-orange border-orange/30",
-  Enterprise: "bg-blue/10 text-blue border-blue/30",
+  votes: number;
 };
 
-const statusColumns: RoadmapStatus[] = ["Planned", "In Progress", "Shipped", "Considering"];
-
-const statusColors: Record<RoadmapStatus, string> = {
-  Planned: "border-slate-600/50 bg-slate-900/40",
-  "In Progress": "border-cyan/30 bg-cyan/5",
-  Shipped: "border-green/30 bg-green/5",
-  Considering: "border-purple/30 bg-purple/5",
-};
+const statusColumns: Array<{ key: RoadmapStatus; label: string; cardClass: string }> = [
+  {
+    key: "planned",
+    label: "Planned",
+    cardClass: "border-slate-600/50 bg-slate-900/40",
+  },
+  {
+    key: "in-progress",
+    label: "In Progress",
+    cardClass: "border-cyan/30 bg-cyan/5",
+  },
+  {
+    key: "completed",
+    label: "Completed",
+    cardClass: "border-green/30 bg-green/5",
+  },
+];
 
 export default function RoadmapPage() {
-  const [selectedCategory, setSelectedCategory] = useState<RoadmapCategory | "all">("all");
-  const [sortBy, setSortBy] = useState<SortOption>("most-voted");
-
-  const items = roadmapData as RoadmapItem[];
-
-  // Filter items by category
-  const filteredItems = useMemo(() => {
-    if (selectedCategory === "all") return items;
-    return items.filter((item) => item.category === selectedCategory);
-  }, [selectedCategory, items]);
-
-  // Sort items
-  const sortedItems = useMemo(() => {
-    const sorted = [...filteredItems];
-    switch (sortBy) {
-      case "most-voted":
-        return sorted.sort((a, b) => b.upvotes - a.upvotes);
-      case "recently-updated":
-        return sorted.sort(
-          (a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
-        );
-      case "newest":
-        return sorted.sort(
-          (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
-        );
-      default:
-        return sorted;
+  const [items, setItems] = useState<RoadmapItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [votingIds, setVotingIds] = useState<Set<string>>(new Set());
+
+  useEffect(() => {
+    async function loadRoadmap() {
+      try {
+        const response = await fetch("/api/roadmap", { cache: "no-store" });
+
+        if (!response.ok) {
+          throw new Error("Failed to fetch roadmap");
+        }
+
+        const data = (await response.json()) as { items: RoadmapItem[] };
+        setItems(data.items);
+      } catch (err) {
+        console.error(err);
+        setError("Unable to load roadmap right now.");
+      } finally {
+        setLoading(false);
+      }
     }
-  }, [filteredItems, sortBy]);
 
-  // Group items by status
+    void loadRoadmap();
+  }, []);
+
   const itemsByStatus = useMemo(() => {
-    const grouped: Record<RoadmapStatus, RoadmapItem[]> = {
-      Planned: [],
-      "In Progress": [],
-      Shipped: [],
-      Considering: [],
+    return {
+      planned: items.filter((item) => item.status === "planned"),
+      "in-progress": items.filter((item) => item.status === "in-progress"),
+      completed: items.filter((item) => item.status === "completed"),
     };
-    sortedItems.forEach((item) => {
-      grouped[item.status].push(item);
-    });
-    return grouped;
-  }, [sortedItems]);
+  }, [items]);
 
-  const categories: Array<RoadmapCategory | "all"> = [
-    "all",
-    "Platform",
-    "Skills",
-    "Community",
-    "API",
-    "Enterprise",
-  ];
+  const handleVote = async (itemId: string) => {
+    if (votingIds.has(itemId)) {
+      return;
+    }
+
+    setVotingIds((prev) => new Set(prev).add(itemId));
+
+    try {
+      const response = await fetch("/api/roadmap/vote", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ itemId }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Vote failed");
+      }
+
+      const updated = (await response.json()) as { id: string; votes: number };
+
+      setItems((prev) =>
+        prev.map((item) =>
+          item.id === updated.id ? { ...item, votes: updated.votes } : item
+        )
+      );
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setVotingIds((prev) => {
+        const next = new Set(prev);
+        next.delete(itemId);
+        return next;
+      });
+    }
+  };
 
   return (
     <main className="min-h-screen bg-[#0A0E17]">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-        {/* Header */}
         <div className="mb-8">
-          <h1 className="text-4xl font-bold text-white mb-3">
-            Product Roadmap
-          </h1>
+          <h1 className="text-4xl font-bold text-white mb-3">Product Roadmap</h1>
           <p className="text-lg text-slate-400 max-w-3xl">
-            See what we&apos;re building, what&apos;s shipped, and what we&apos;re considering next. 
-            Vote on features you want to see and join the discussion.
+            See what we&apos;re building and what&apos;s already shipped. Vote on planned features to help us prioritize.
           </p>
         </div>
 
-        {/* Filters and Sort */}
-        <div className="mb-8 flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
-          {/* Category Filter */}
-          <div className="flex flex-wrap gap-2">
-            {categories.map((category) => (
-              <Button
-                key={category}
-                onClick={() => setSelectedCategory(category)}
-                variant={selectedCategory === category ? "default" : "outline"}
-                size="sm"
-                className={
-                  selectedCategory === category
-                    ? "bg-cyan text-[#0a0a0a] hover:bg-cyan/90"
-                    : "border-white/10 text-slate-300 hover:text-white hover:bg-white/5"
-                }
-              >
-                {category === "all" ? "All" : category}
-              </Button>
-            ))}
-          </div>
-
-          {/* Sort Options */}
-          <div className="flex items-center gap-2">
-            <span className="text-sm text-slate-400">Sort by:</span>
-            <select
-              value={sortBy}
-              onChange={(e) => setSortBy(e.target.value as SortOption)}
-              className="px-3 py-1.5 text-sm bg-slate-900/60 border border-white/10 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-cyan/50"
-            >
-              <option value="most-voted">Most Voted</option>
-              <option value="recently-updated">Recently Updated</option>
-              <option value="newest">Newest</option>
-            </select>
-          </div>
-        </div>
-
-        {/* Kanban Board */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-          {statusColumns.map((status) => (
-            <div key={status} className="flex flex-col">
-              {/* Column Header */}
-              <div className="mb-4 pb-3 border-b border-white/10">
-                <h2 className="text-lg font-semibold text-white flex items-center justify-between">
-                  {status}
-                  <span className="text-sm font-normal text-slate-400 ml-2">
-                    {itemsByStatus[status].length}
-                  </span>
-                </h2>
-              </div>
-
-              {/* Column Items */}
-              <div className="flex flex-col gap-4 flex-1">
-                {itemsByStatus[status].map((item) => (
-                  <Link
-                    key={item.id}
-                    href={`/roadmap/${item.id}`}
-                    className="block group"
-                  >
-                    <Card
-                      className={`${statusColors[status]} border transition-all hover:border-cyan/50 hover:shadow-lg hover:shadow-cyan/10`}
-                    >
+        {loading ? (
+          <p className="text-slate-400">Loading roadmap...</p>
+        ) : error ? (
+          <p className="text-red-400">{error}</p>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            {statusColumns.map((column) => (
+              <div key={column.key} className="flex flex-col">
+                <div className="mb-4 pb-3 border-b border-white/10">
+                  <h2 className="text-lg font-semibold text-white flex items-center justify-between">
+                    {column.label}
+                    <span className="text-sm font-normal text-slate-400 ml-2">
+                      {itemsByStatus[column.key].length}
+                    </span>
+                  </h2>
+                </div>
+
+                <div className="flex flex-col gap-4">
+                  {itemsByStatus[column.key].map((item) => (
+                    <Card key={item.id} className={`${column.cardClass} border`}>
                       <CardContent className="p-4">
-                        {/* Category Badge */}
-                        <Badge
-                          variant="outline"
-                          className={`${categoryColors[item.category]} text-xs mb-3`}
-                        >
-                          {item.category}
-                        </Badge>
-
-                        {/* Title */}
-                        <h3 className="text-base font-semibold text-white mb-2 group-hover:text-cyan transition-colors">
-                          {item.title}
-                        </h3>
-
-                        {/* Description */}
-                        <p className="text-sm text-slate-400 mb-4 line-clamp-3">
-                          {item.description}
-                        </p>
-
-                        {/* Metadata */}
-                        <div className="flex items-center gap-4 text-xs text-slate-500">
-                          <div className="flex items-center gap-1">
-                            <svg
-                              className="w-4 h-4"
-                              fill="none"
-                              stroke="currentColor"
-                              viewBox="0 0 24 24"
+                        <h3 className="text-base font-semibold text-white mb-2">{item.title}</h3>
+                        <p className="text-sm text-slate-400 mb-4">{item.description}</p>
+
+                        <div className="flex items-center justify-between gap-3">
+                          <span className="text-xs text-slate-400">{item.votes} votes</span>
+
+                          {item.status === "planned" && (
+                            <Button
+                              size="sm"
+                              onClick={() => handleVote(item.id)}
+                              disabled={votingIds.has(item.id)}
+                              className="bg-cyan text-[#0a0a0a] hover:bg-cyan/90"
                             >
-                              <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={2}
-                                d="M5 15l7-7 7 7"
-                              />
-                            </svg>
-                            <span>{item.upvotes}</span>
-                          </div>
-                          <div className="flex items-center gap-1">
-                            <svg
-                              className="w-4 h-4"
-                              fill="none"
-                              stroke="currentColor"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={2}
-                                d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
-                              />
-                            </svg>
-                            <span>{item.commentCount}</span>
-                          </div>
+                              {votingIds.has(item.id) ? "Voting..." : "Vote"}
+                            </Button>
+                          )}
                         </div>
                       </CardContent>
                     </Card>
-                  </Link>
-                ))}
-
-                {itemsByStatus[status].length === 0 && (
-                  <div className="flex-1 flex items-center justify-center p-8 border border-dashed border-white/10 rounded-lg">
-                    <p className="text-sm text-slate-500">No items</p>
-                  </div>
-                )}
+                  ))}
+
+                  {itemsByStatus[column.key].length === 0 && (
+                    <div className="flex-1 flex items-center justify-center p-8 border border-dashed border-white/10 rounded-lg">
+                      <p className="text-sm text-slate-500">No items</p>
+                    </div>
+                  )}
+                </div>
               </div>
-            </div>
-          ))}
-        </div>
-
-        {/* Empty State */}
-        {sortedItems.length === 0 && (
-          <div className="text-center py-12">
-            <p className="text-lg text-slate-400">
-              No roadmap items found for this category.
-            </p>
+            ))}
           </div>
         )}
       </div>
diff --git a/src/lib/server/roadmapStore.ts b/src/lib/server/roadmapStore.ts
new file mode 100644
index 00000000..c9eb1321
--- /dev/null
+++ b/src/lib/server/roadmapStore.ts
@@ -0,0 +1,55 @@
+import "server-only";
+
+import { promises as fs } from "fs";
+import path from "path";
+
+export type RoadmapStatus = "planned" | "in-progress" | "completed";
+
+export type RoadmapItem = {
+  id: string;
+  title: string;
+  description: string;
+  status: RoadmapStatus;
+  votes: number;
+};
+
+const ROADMAP_PATH = path.join(process.cwd(), "data", "roadmap.json");
+
+// In-memory vote deltas so votes can change without mutating source files.
+const voteDeltas = new Map<string, number>();
+
+export function isRoadmapStatus(value: string | null): value is RoadmapStatus {
+  return value === "planned" || value === "in-progress" || value === "completed";
+}
+
+async function readRoadmapFile(): Promise<RoadmapItem[]> {
+  const raw = await fs.readFile(ROADMAP_PATH, "utf-8");
+  return JSON.parse(raw) as RoadmapItem[];
+}
+
+export async function getRoadmapItems(): Promise<RoadmapItem[]> {
+  const items = await readRoadmapFile();
+
+  return items.map((item) => ({
+    ...item,
+    votes: item.votes + (voteDeltas.get(item.id) ?? 0),
+  }));
+}
+
+export async function incrementRoadmapVote(itemId: string): Promise<{ id: string; votes: number } | null> {
+  const items = await readRoadmapFile();
+  const item = items.find((candidate) => candidate.id === itemId);
+
+  if (!item) {
+    return null;
+  }
+
+  const currentDelta = voteDeltas.get(itemId) ?? 0;
+  const nextDelta = currentDelta + 1;
+  voteDeltas.set(itemId, nextDelta);
+
+  return {
+    id: itemId,
+    votes: item.votes + nextDelta,
+  };
+}