diff --git a/website/.gitignore b/website/.gitignore new file mode 100644 index 00000000..5ef6a520 --- /dev/null +++ b/website/.gitignore @@ -0,0 +1,41 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.* +.yarn/* +!.yarn/patches +!.yarn/plugins +!.yarn/releases +!.yarn/versions + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# env files (can opt-in for committing if needed) +.env* + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/website/AGENTS.md b/website/AGENTS.md new file mode 100644 index 00000000..8bd0e390 --- /dev/null +++ b/website/AGENTS.md @@ -0,0 +1,5 @@ + +# This is NOT the Next.js you know + +This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices. + diff --git a/website/CLAUDE.md b/website/CLAUDE.md new file mode 100644 index 00000000..3fd3af3d --- /dev/null +++ b/website/CLAUDE.md @@ -0,0 +1,10 @@ +@AGENTS.md + + + +# Recent Activity + + + +*No recent activity* + \ No newline at end of file diff --git a/website/README.md b/website/README.md new file mode 100644 index 00000000..e215bc4c --- /dev/null +++ b/website/README.md @@ -0,0 +1,36 @@ +This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). + +## Getting Started + +First, run the development server: + +```bash +npm run dev +# or +yarn dev +# or +pnpm dev +# or +bun dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. + +This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. + +## Learn More + +To learn more about Next.js, take a look at the following resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. + +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! + +## Deploy on Vercel + +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. + +Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. diff --git a/website/app/favicon.ico b/website/app/favicon.ico new file mode 100644 index 00000000..718d6fea Binary files /dev/null and b/website/app/favicon.ico differ diff --git a/website/app/globals.css b/website/app/globals.css new file mode 100644 index 00000000..ac547435 --- /dev/null +++ b/website/app/globals.css @@ -0,0 +1,72 @@ +@import "tailwindcss"; + +@theme { + --color-background: #131313; + --color-surface: #131313; + --color-surface-dim: #131313; + --color-surface-bright: #393939; + --color-surface-container-lowest: #0e0e0e; + --color-surface-container-low: #1c1b1b; + --color-surface-container: #201f1f; + --color-surface-container-high: #2a2a2a; + --color-surface-container-highest: #353534; + --color-surface-variant: #353534; + + --color-primary: #ff8c00; + --color-primary-dim: #ffb77d; + --color-on-primary: #4d2600; + + --color-on-surface: #e5e2e1; + --color-on-surface-variant: #ddc1ae; + --color-on-background: #e5e2e1; + + --color-secondary: #bdf4ff; + --color-tertiary: #85cfff; + + --color-outline: #a48c7a; + --color-outline-variant: #564334; + + --font-sans: var(--font-inter), "Inter", system-ui, sans-serif; + --font-display: var(--font-geist), "Geist", system-ui, sans-serif; + --font-mono: var(--font-jetbrains-mono), "JetBrains Mono", ui-monospace, + monospace; + + --container-max: 1280px; + + --radius-xl: 0.5rem; + --radius-2xl: 0.75rem; +} + +html { + background-color: var(--color-background); + color-scheme: dark; +} + +body { + background-color: var(--color-background); + color: var(--color-on-background); + font-family: var(--font-sans); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.text-gradient-primary { + background: linear-gradient(135deg, #ff8c00 0%, #ffb77d 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.bg-grid { + background-image: + linear-gradient(to right, rgba(255, 140, 0, 0.06) 1px, transparent 1px), + linear-gradient(to bottom, rgba(255, 140, 0, 0.06) 1px, transparent 1px); + background-size: 32px 32px; +} + +.scrollbar-hide::-webkit-scrollbar { + display: none; +} +.scrollbar-hide { + scrollbar-width: none; +} diff --git a/website/app/layout.tsx b/website/app/layout.tsx new file mode 100644 index 00000000..0096a23c --- /dev/null +++ b/website/app/layout.tsx @@ -0,0 +1,48 @@ +import type { Metadata } from "next"; +import { Geist, Inter, JetBrains_Mono } from "next/font/google"; +import "./globals.css"; + +const inter = Inter({ + variable: "--font-inter", + subsets: ["latin"], + display: "swap", +}); + +const geist = Geist({ + variable: "--font-geist", + subsets: ["latin"], + display: "swap", +}); + +const jetbrainsMono = JetBrains_Mono({ + variable: "--font-jetbrains-mono", + subsets: ["latin"], + display: "swap", +}); + +export const metadata: Metadata = { + title: "RxCode — The Visual Command Center for AI Coding Agents", + description: + "A native macOS desktop client that supercharges your AI coding workflow. Manage sessions, visualize project architecture, and review AI-generated code without leaving your desktop.", + openGraph: { + title: "RxCode — The Visual Command Center for AI Coding Agents", + description: + "A native macOS desktop client for AI coding agents. Visual sessions, project tree, and code review in one place.", + type: "website", + }, +}; + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return ( + + {children} + + ); +} diff --git a/website/app/lib/release.ts b/website/app/lib/release.ts new file mode 100644 index 00000000..1b9553f7 --- /dev/null +++ b/website/app/lib/release.ts @@ -0,0 +1,76 @@ +import "server-only"; + +const RELEASE_API = + "https://api.github.com/repos/rxtech-lab/rxcode/releases/latest"; +const FALLBACK_TAG = "v1.0.1"; +const FALLBACK_DMG = + "https://github.com/rxtech-lab/rxcode/releases/download/v1.0.1/RxCode.dmg"; +const FALLBACK_PAGE = + "https://github.com/rxtech-lab/rxcode/releases/tag/v1.0.1"; + +export type ReleaseInfo = { + tag: string; + version: string; + publishedAt: string | null; + dmgUrl: string; + releasePageUrl: string; + sizeBytes: number | null; +}; + +type GitHubAsset = { + name: string; + browser_download_url: string; + size: number; +}; + +type GitHubRelease = { + tag_name: string; + name: string; + html_url: string; + published_at: string; + assets: GitHubAsset[]; +}; + +export async function getLatestRelease(): Promise { + try { + const res = await fetch(RELEASE_API, { + headers: { + Accept: "application/vnd.github+json", + "X-GitHub-Api-Version": "2022-11-28", + }, + next: { revalidate: 600 }, + }); + + if (!res.ok) throw new Error(`GitHub API ${res.status}`); + + const data = (await res.json()) as GitHubRelease; + const dmg = + data.assets.find((a) => a.name.toLowerCase().endsWith(".dmg")) ?? null; + + return { + tag: data.tag_name, + version: data.tag_name.replace(/^v/, ""), + publishedAt: data.published_at ?? null, + dmgUrl: + dmg?.browser_download_url ?? + `https://github.com/rxtech-lab/rxcode/releases/download/${data.tag_name}/RxCode.dmg`, + releasePageUrl: data.html_url, + sizeBytes: dmg?.size ?? null, + }; + } catch { + return { + tag: FALLBACK_TAG, + version: FALLBACK_TAG.replace(/^v/, ""), + publishedAt: null, + dmgUrl: FALLBACK_DMG, + releasePageUrl: FALLBACK_PAGE, + sizeBytes: null, + }; + } +} + +export function formatSize(bytes: number | null): string | null { + if (!bytes) return null; + const mb = bytes / (1024 * 1024); + return `${mb.toFixed(1)} MB`; +} diff --git a/website/app/page.tsx b/website/app/page.tsx new file mode 100644 index 00000000..2819d470 --- /dev/null +++ b/website/app/page.tsx @@ -0,0 +1,487 @@ +import Image from "next/image"; +import Link from "next/link"; +import { formatSize, getLatestRelease } from "./lib/release"; + +const GITHUB_REPO_URL = "https://github.com/rxtech-lab/rxcode"; + +const FEATURE_CARDS = [ + { + eyebrow: "Agent Runtime", + title: "Support multiple agents", + description: + "Run Claude Code, Codex, and future agent runtimes from the same native workspace. Pick the client and model per session without changing how you manage projects.", + image: "/screenshot/screenshot1.png", + alt: "RxCode running a Codex session with model and usage controls visible", + width: 3714, + height: 2228, + className: "md:col-span-7", + }, + { + eyebrow: "Native macOS", + title: "Liquid glass, pure SwiftUI", + description: + "A lightweight native app with macOS materials, responsive SwiftUI views, and no bundled browser runtime. Fast to launch, fast to stream, and designed for the desktop.", + image: "/screenshot/screenshot2.png", + alt: "RxCode native macOS workspace with sidebar, prompt composer, and status bar", + width: 3638, + height: 2196, + className: "md:col-span-5", + }, + { + eyebrow: "Menu Bar Extra", + title: "Track progress and usage at a glance", + description: + "Monitor active sessions, pending checks, and Claude Code or Codex usage limits from the menu bar without opening the main window.", + image: "/screenshot/menubar.png", + alt: "RxCode menu bar extra showing Codex usage limits and session progress", + width: 726, + height: 648, + className: "md:col-span-4", + }, + { + eyebrow: "MCP", + title: "MCP support built in", + description: + "Configure, inspect, and test Model Context Protocol servers from Settings, including local and project-scoped servers.", + image: "/screenshot/mcp.png", + alt: "RxCode Settings window showing MCP server configuration", + width: 1334, + height: 1024, + className: "md:col-span-8", + }, + { + eyebrow: "Thread Review", + title: "Track changes easily", + description: + "See every file changed in a thread with additions and deletions summarized together, even while multiple sessions keep running in parallel.", + image: "/screenshot/changes-track.png", + alt: "RxCode thread review panel listing files changed by an agent session", + width: 1094, + height: 1850, + className: "md:col-span-7", + }, + { + eyebrow: "Editor Handoff", + title: "Open in your code editor", + description: + "Jump directly into VS Code, Cursor, Zed, Xcode, JetBrains IDEs, Finder, Terminal, or Warp so you can manage code in the editor you choose.", + image: "/screenshot/openineditor.png", + alt: "RxCode editor menu with VS Code, Cursor, Zed, Finder, Terminal, and Xcode options", + width: 346, + height: 722, + className: "md:col-span-5", + }, +]; + +export default async function Home() { + const release = await getLatestRelease(); + const sizeLabel = formatSize(release.sizeBytes); + + return ( + <> + +
+ + + + + +
+