feat: add vitest test infrastructure and configuration (STARTUP-139)

.github/workflows/deploy-pro-workers.yml

@@ -0,0 +1,89 @@
+name: Deploy Pro Workers
+
+on:
+  push:
+    branches:
+      - main
+      - feat/skills-driven-arch
+    paths:
+      - "workers/pro/**"
+  pull_request:
+    paths:
+      - "workers/pro/**"
+
+jobs:
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Run tests
+        run: pnpm test:run
+        working-directory: workers/pro
+
+  deploy-staging:
+    name: Deploy to Staging
+    runs-on: ubuntu-latest
+    needs: test
+    if: github.ref == 'refs/heads/feat/skills-driven-arch'
+    environment: staging
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Deploy to staging
+        run: pnpm deploy:staging
+        working-directory: workers/pro
+        env:
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+
+  deploy-production:
+    name: Deploy to Production
+    runs-on: ubuntu-latest
+    needs: test
+    if: github.ref == 'refs/heads/main'
+    environment: production
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Deploy to production
+        run: pnpm deploy:production
+        working-directory: workers/pro
+        env:
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}

.ruler/ruler.toml

@@ -38,3 +38,13 @@ default_agents = ["Cursor", "OpenCode"]
 # [mcp_servers.example_remote]
 # url = "https://api.example.com/mcp"
 # headers = { Authorization = "Bearer REPLACE_ME" }
+
+# --- StartupKit Pro MCP Server ---
+[mcp_servers.startupkit_pro_stdio]
+command = "node"
+args = ["packages/mcp-pro/dist/index.js"]
+env = { STARTUPKIT_API_KEY = "your-api-key-here" }
+
+[mcp_servers.startupkit_pro_remote]
+url = "https://pro.startupkit.com/mcp"
+headers = { Authorization = "Bearer YOUR_API_KEY" }

apps/home/src/app/pro/api-keys/page.tsx

@@ -0,0 +1,142 @@
+"use client"
+
+import { useState } from "react"
+
+interface ApiKey {
+	id: string
+	name: string
+	key: string
+	createdAt: string
+	lastUsedAt: string | null
+}
+
+export default function ApiKeysPage() {
+	const [keys, setKeys] = useState<ApiKey[]>([])
+	const [showCreate, setShowCreate] = useState(false)
+	const [newKeyName, setNewKeyName] = useState("")
+
+	return (
+		<div className="space-y-8">
+			<div className="flex items-center justify-between">
+				<div>
+					<h1 className="text-3xl font-bold">API Keys</h1>
+					<p className="mt-2 text-zinc-400">
+						Manage API keys for CLI and MCP access
+					</p>
+				</div>
+				<button
+					onClick={() => setShowCreate(true)}
+					className="rounded bg-cyan-500 px-4 py-2 font-medium text-black transition-colors hover:bg-cyan-400"
+				>
+					Create New Key
+				</button>
+			</div>
+
+			{showCreate && (
+				<div className="rounded-lg border border-zinc-800 bg-zinc-900 p-6">
+					<h3 className="text-lg font-semibold">Create API Key</h3>
+					<div className="mt-4">
+						<label className="block text-sm text-zinc-400">
+							Key Name
+							<input
+								type="text"
+								value={newKeyName}
+								onChange={(e) => setNewKeyName(e.target.value)}
+								placeholder="My API Key"
+								className="mt-1 block w-full rounded border border-zinc-700 bg-zinc-800 px-3 py-2"
+							/>
+						</label>
+					</div>
+					<div className="mt-4 flex gap-3">
+						<button
+							onClick={() => {
+								setShowCreate(false)
+								setNewKeyName("")
+							}}
+							className="rounded border border-zinc-700 px-4 py-2 transition-colors hover:bg-zinc-800"
+						>
+							Cancel
+						</button>
+						<button className="rounded bg-cyan-500 px-4 py-2 font-medium text-black transition-colors hover:bg-cyan-400">
+							Create
+						</button>
+					</div>
+				</div>
+			)}
+
+			<div className="overflow-hidden rounded-lg border border-zinc-800">
+				<table className="w-full">
+					<thead className="bg-zinc-900">
+						<tr>
+							<th className="px-4 py-3 text-left text-sm font-medium text-zinc-400">
+								Name
+							</th>
+							<th className="px-4 py-3 text-left text-sm font-medium text-zinc-400">
+								API Key
+							</th>
+							<th className="px-4 py-3 text-left text-sm font-medium text-zinc-400">
+								Created
+							</th>
+							<th className="px-4 py-3 text-left text-sm font-medium text-zinc-400">
+								Last Used
+							</th>
+							<th className="px-4 py-3 text-right text-sm font-medium text-zinc-400">
+								Actions
+							</th>
+						</tr>
+					</thead>
+					<tbody className="divide-y divide-zinc-800">
+						{keys.length === 0 ? (
+							<tr>
+								<td className="px-4 py-8 text-center text-zinc-400" colSpan={5}>
+									No API keys yet. Create one to get started.
+								</td>
+							</tr>
+						) : (
+							keys.map((key) => (
+								<tr key={key.id}>
+									<td className="px-4 py-3 font-medium">{key.name}</td>
+									<td className="px-4 py-3 font-mono text-sm text-zinc-400">
+										sk_pro_••••••••••••••••
+									</td>
+									<td className="px-4 py-3 text-zinc-400">
+										{new Date(key.createdAt).toLocaleDateString()}
+									</td>
+									<td className="px-4 py-3 text-zinc-400">
+										{key.lastUsedAt
+											? new Date(key.lastUsedAt).toLocaleDateString()
+											: "Never"}
+									</td>
+									<td className="px-4 py-3 text-right">
+										<button className="text-red-400 hover:text-red-300">
+											Delete
+										</button>
+									</td>
+								</tr>
+							))
+						)}
+					</tbody>
+				</table>
+			</div>
+
+			<div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-6">
+				<h3 className="text-lg font-semibold">Using Your API Key</h3>
+				<p className="mt-2 text-zinc-400">
+					Configure your API key for CLI usage:
+				</p>
+				<pre className="mt-3 rounded bg-zinc-950 p-4 font-mono text-sm">
+					<code>export STARTUPKIT_API_KEY=&quot;sk_pro_your_key_here&quot;</code>
+				</pre>
+				<p className="mt-4 text-zinc-400">
+					Or add it to your MCP configuration:
+				</p>
+				<pre className="mt-3 rounded bg-zinc-950 p-4 font-mono text-sm">
+					<code>{`[mcp_servers.startupkit_pro]
+command = "node"
+args = ["packages/mcp-pro/dist/index.js"]
+env = { STARTUPKIT_API_KEY = "sk_pro_your_key_here" }`}</code>
+				</pre>
+			</div>
+		</div>
+	)
+}

apps/home/src/app/pro/credits/page.tsx

@@ -0,0 +1,104 @@
+"use client"
+
+import { useState } from "react"
+
+interface CreditTransaction {
+	id: string
+	amount: number
+	type: string
+	tool: string | null
+	description: string | null
+	createdAt: string
+}
+
+export default function CreditsPage() {
+	const [timeframe, setTimeframe] = useState<"7d" | "30d" | "90d">("30d")
+
+	return (
+		<div className="space-y-8">
+			<div>
+				<h1 className="text-3xl font-bold">Credits</h1>
+				<p className="mt-2 text-zinc-400">
+					Monitor your credit usage and transaction history
+				</p>
+			</div>
+
+			<div className="grid gap-6 md:grid-cols-3">
+				<div className="rounded-lg border border-zinc-800 bg-zinc-900 p-6">
+					<div className="text-sm text-zinc-400">Monthly Allocation</div>
+					<div className="mt-2 text-4xl font-bold">10</div>
+					<div className="mt-1 text-sm text-zinc-500">starter plan</div>
+				</div>
+
+				<div className="rounded-lg border border-zinc-800 bg-zinc-900 p-6">
+					<div className="text-sm text-zinc-400">Bonus Credits</div>
+					<div className="mt-2 text-4xl font-bold">10</div>
+					<div className="mt-1 text-sm text-zinc-500">new user bonus</div>
+				</div>
+
+				<div className="rounded-lg border border-zinc-800 bg-zinc-900 p-6">
+					<div className="text-sm text-zinc-400">Available</div>
+					<div className="mt-2 text-4xl font-bold text-green-400">20</div>
+					<div className="mt-1 text-sm text-zinc-500">total available</div>
+				</div>
+			</div>
+
+			<div>
+				<div className="flex items-center justify-between">
+					<h2 className="text-xl font-semibold">Transaction History</h2>
+					<select
+						value={timeframe}
+						onChange={(e) =>
+							setTimeframe(e.target.value as "7d" | "30d" | "90d")
+						}
+						className="rounded border border-zinc-700 bg-zinc-800 px-3 py-1.5 text-sm"
+					>
+						<option value="7d">Last 7 days</option>
+						<option value="30d">Last 30 days</option>
+						<option value="90d">Last 90 days</option>
+					</select>
+				</div>
+
+				<div className="mt-4 overflow-hidden rounded-lg border border-zinc-800">
+					<table className="w-full">
+						<thead className="bg-zinc-900">
+							<tr>
+								<th className="px-4 py-3 text-left text-sm font-medium text-zinc-400">
+									Date
+								</th>
+								<th className="px-4 py-3 text-left text-sm font-medium text-zinc-400">
+									Description
+								</th>
+								<th className="px-4 py-3 text-left text-sm font-medium text-zinc-400">
+									Tool
+								</th>
+								<th className="px-4 py-3 text-right text-sm font-medium text-zinc-400">
+									Amount
+								</th>
+							</tr>
+						</thead>
+						<tbody className="divide-y divide-zinc-800">
+							<tr>
+								<td className="px-4 py-3 text-zinc-400" colSpan={4}>
+									No transactions yet. Start using the tools to see your
+									history.
+								</td>
+							</tr>
+						</tbody>
+					</table>
+				</div>
+			</div>
+
+			<div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-6">
+				<h3 className="text-lg font-semibold">Need More Credits?</h3>
+				<p className="mt-2 text-zinc-400">
+					Upgrade to Pro for 1,000 credits/month or Enterprise for 10,000
+					credits/month.
+				</p>
+				<button className="mt-4 rounded bg-cyan-500 px-4 py-2 font-medium text-black transition-colors hover:bg-cyan-400">
+					Upgrade Plan
+				</button>
+			</div>
+		</div>
+	)
+}