]' },
+ { name: 'output-style', description: 'Deprecated: use /config to change output style', category: 'customization' },
+ { name: 'stickers', description: 'Order OpenClaude stickers', category: 'customization' },
+
+ // ── help & diagnostics ───────────────────────────────────────────────
+ { name: 'help', description: 'Show help and available commands', category: 'diagnostics' },
+ { name: 'status', description: 'Show status including version, model, account, API connectivity, and tool statuses', category: 'diagnostics' },
+ { name: 'doctor', description: 'Diagnose and verify your OpenClaude installation and settings', category: 'diagnostics' },
+ { name: 'stats', description: 'Show your usage statistics and activity', category: 'diagnostics' },
+ { name: 'insights', description: 'Generate a report analyzing your OpenClaude sessions', category: 'diagnostics' },
+ { name: 'release-notes', description: 'View release notes', category: 'diagnostics' },
+ { name: 'feedback', description: 'Submit feedback about OpenClaude', category: 'diagnostics', args: '[report]' },
+]
+
+export function commandsByCategory(category: CommandCategory): SlashCommand[] {
+ return commands.filter(c => c.category === category)
+}
diff --git a/web/src/data/configuration.ts b/web/src/data/configuration.ts
new file mode 100644
index 000000000..8c8545739
--- /dev/null
+++ b/web/src/data/configuration.ts
@@ -0,0 +1,75 @@
+// Seeded from src/utils/envValidation.ts, src/utils/config.ts, and the README.
+
+export interface SettingsFile {
+ path: string
+ scope: string
+ notes: string
+}
+
+export const settingsFiles: SettingsFile[] = [
+ {
+ path: '~/.claude/settings.json',
+ scope: 'user',
+ notes: 'Global settings for every project on the machine.',
+ },
+ {
+ path: '.claude/settings.json',
+ scope: 'project',
+ notes: 'Shared project settings, committed to the repo.',
+ },
+ {
+ path: '.claude/settings.local.json',
+ scope: 'local',
+ notes: 'Per-machine overrides for one project; typically gitignored.',
+ },
+ {
+ path: '~/.claude/keybindings.json',
+ scope: 'user',
+ notes: 'Keyboard shortcut overrides — see the keybindings page.',
+ },
+ {
+ path: 'CLAUDE.md / .claude/CLAUDE.md',
+ scope: 'project',
+ notes: 'Project instructions loaded into context at session start.',
+ },
+]
+
+export interface SettingOption {
+ key: string
+ description: string
+}
+
+export const settingOptions: SettingOption[] = [
+ { key: 'model', description: "Default model (alias like 'sonnet' or a full model name)." },
+ { key: 'provider', description: 'Default provider preset for new sessions.' },
+ { key: 'effort', description: 'Default effort level: low, medium, high, xhigh, or max.' },
+ { key: 'agent', description: 'Default agent for new sessions.' },
+ { key: 'permissions', description: 'Allow/deny rules for tools, plus the default permission mode.' },
+ { key: 'env', description: 'Environment variables applied to every session.' },
+ { key: 'theme', description: 'Terminal color theme.' },
+ { key: 'verbose', description: 'Verbose output by default.' },
+ { key: 'allowAutoUpdates', description: 'Enable or disable the auto-updater.' },
+ { key: 'hooks', description: 'Shell hooks that run on tool events (PreToolUse, PostToolUse, …).' },
+]
+
+export interface EnvVar {
+ name: string
+ description: string
+}
+
+export const envVars: EnvVar[] = [
+ { name: 'ANTHROPIC_API_KEY', description: 'Anthropic API key (also the strict auth path in --bare mode).' },
+ { name: 'ANTHROPIC_AUTH_TOKEN', description: 'Bearer token alternative to an Anthropic API key.' },
+ { name: 'OPENAI_API_KEY', description: 'Key for OpenAI-compatible providers and gateways (incl. Opengateway).' },
+ { name: 'OPENAI_BASE_URL', description: 'Base URL of an OpenAI-compatible /v1 endpoint (OpenRouter, LM Studio, LiteLLM, …).' },
+ { name: 'OPENAI_MODEL', description: 'Model name to request from the OpenAI-compatible endpoint.' },
+ { name: 'GOOGLE_API_KEY', description: 'Google Gemini API key.' },
+ { name: 'NEARAI_API_KEY', description: 'NEAR AI unified gateway key.' },
+ { name: 'MIMO_API_KEY', description: 'Xiaomi MiMo API key.' },
+ { name: 'OPENCODE_API_KEY', description: 'OpenCode Zen / Go gateway key.' },
+ { name: 'GITHUB_TOKEN', description: 'GitHub token for GitHub Models and PR workflows.' },
+ { name: 'CLAUDE_CONFIG_DIR', description: 'Override the config directory (default ~/.claude).' },
+ { name: 'HTTP_PROXY / HTTPS_PROXY', description: 'Route API traffic through a proxy.' },
+ { name: 'NODE_EXTRA_CA_CERTS', description: 'Extra CA certificates for corporate TLS interception.' },
+ { name: 'CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC', description: 'Disable non-essential network traffic.' },
+]
diff --git a/web/src/data/docsNav.ts b/web/src/data/docsNav.ts
new file mode 100644
index 000000000..425ba075e
--- /dev/null
+++ b/web/src/data/docsNav.ts
@@ -0,0 +1,42 @@
+export interface DocsNavItem {
+ title: string
+ href: string
+}
+
+export interface DocsNavGroup {
+ group: string
+ items: DocsNavItem[]
+}
+
+export const docsNav: DocsNavGroup[] = [
+ {
+ group: 'getting started',
+ items: [
+ { title: 'Overview', href: '/docs/' },
+ { title: 'Installation', href: '/docs/installation/' },
+ { title: 'Quickstart', href: '/docs/quickstart/' },
+ { title: 'Providers', href: '/docs/providers/' },
+ ],
+ },
+ {
+ group: 'reference',
+ items: [
+ { title: 'Slash commands', href: '/docs/slash-commands/' },
+ { title: 'CLI reference', href: '/docs/cli-reference/' },
+ { title: 'Configuration', href: '/docs/configuration/' },
+ { title: 'Keybindings', href: '/docs/keybindings/' },
+ { title: 'Skills', href: '/docs/skills/' },
+ ],
+ },
+]
+
+export const docsPages: DocsNavItem[] = docsNav.flatMap(g => g.items)
+
+export function pagerFor(href: string): { prev?: DocsNavItem; next?: DocsNavItem } {
+ const i = docsPages.findIndex(p => p.href === href)
+ if (i === -1) return {}
+ return {
+ prev: i > 0 ? docsPages[i - 1] : undefined,
+ next: i < docsPages.length - 1 ? docsPages[i + 1] : undefined,
+ }
+}
diff --git a/web/src/data/keybindings.ts b/web/src/data/keybindings.ts
new file mode 100644
index 000000000..198e2d8aa
--- /dev/null
+++ b/web/src/data/keybindings.ts
@@ -0,0 +1,26 @@
+// Seeded from src/keybindings/defaultBindings.ts. User overrides live in
+// ~/.claude/keybindings.json (open it with /keybindings).
+
+export interface Keybinding {
+ keys: string
+ action: string
+ context: string
+}
+
+export const keybindings: Keybinding[] = [
+ { keys: 'Ctrl+C', action: 'Interrupt the current turn', context: 'global' },
+ { keys: 'Ctrl+D', action: 'Exit the REPL', context: 'global' },
+ { keys: 'Ctrl+L', action: 'Redraw the screen', context: 'global' },
+ { keys: 'Ctrl+T', action: 'Toggle the todo list', context: 'global' },
+ { keys: 'Ctrl+O', action: 'Toggle the transcript view', context: 'global' },
+ { keys: 'Ctrl+R', action: 'Search prompt history', context: 'global' },
+ { keys: 'Shift+Tab', action: 'Cycle permission modes', context: 'prompt' },
+ { keys: 'Ctrl+V', action: 'Paste an image from the clipboard (Alt+V on Windows)', context: 'prompt' },
+ { keys: 'Ctrl+S', action: 'Stash the current prompt draft', context: 'prompt' },
+ { keys: 'Ctrl+G', action: 'Edit the prompt in your external $EDITOR', context: 'prompt' },
+ { keys: 'Ctrl+_ / Ctrl+Shift+-', action: 'Undo in the prompt input', context: 'prompt' },
+ { keys: 'Ctrl+P / Ctrl+N', action: 'Previous / next item', context: 'menus & pickers' },
+ { keys: 'Ctrl+E', action: 'Toggle the explanation panel', context: 'permission dialogs' },
+ { keys: 'Esc', action: 'Cancel / close the current dialog', context: 'dialogs' },
+ { keys: 'Shift+Enter', action: 'Insert a newline (install via /terminal-setup)', context: 'prompt' },
+]
diff --git a/web/src/data/providers.ts b/web/src/data/providers.ts
new file mode 100644
index 000000000..1fe8ca4b2
--- /dev/null
+++ b/web/src/data/providers.ts
@@ -0,0 +1,105 @@
+// Seeded from the Supported Providers table in the repo README.
+
+export interface Provider {
+ id: string
+ name: string
+ setup: string
+ envVars?: string[]
+ notes: string
+}
+
+export const providers: Provider[] = [
+ {
+ id: 'openai-compatible',
+ name: 'OpenAI-compatible',
+ setup: '/provider or env vars',
+ envVars: ['OPENAI_API_KEY', 'OPENAI_BASE_URL', 'OPENAI_MODEL'],
+ notes: 'Works with OpenAI, OpenRouter, DeepSeek, Groq, Mistral, LM Studio, and any other compatible /v1 server.',
+ },
+ {
+ id: 'opengateway',
+ name: 'Gitlawb Opengateway',
+ setup: 'startup default, /provider, or env vars',
+ envVars: ['OPENAI_API_KEY', 'OPENAI_MODEL'],
+ notes: 'Smart gateway at https://opengateway.gitlawb.com/v1. Requires an API key from gitlawb.com/opengateway/keys; routes Xiaomi MiMo and GMI Cloud partner models by model name.',
+ },
+ {
+ id: 'gemini',
+ name: 'Google Gemini',
+ setup: '/provider or env vars',
+ envVars: ['GOOGLE_API_KEY'],
+ notes: 'Supports API-key auth only.',
+ },
+ {
+ id: 'github-models',
+ name: 'GitHub Models',
+ setup: '/onboard-github',
+ envVars: ['GITHUB_TOKEN'],
+ notes: 'Interactive onboarding with saved credentials.',
+ },
+ {
+ id: 'codex-oauth',
+ name: 'Codex OAuth',
+ setup: '/provider',
+ notes: 'Opens ChatGPT sign-in in your browser and stores Codex credentials securely. Can also reuse existing Codex CLI auth or env credentials.',
+ },
+ {
+ id: 'near-ai',
+ name: 'NEAR AI',
+ setup: '/provider or env vars',
+ envVars: ['NEARAI_API_KEY'],
+ notes: 'Unified gateway (Claude, GPT, Gemini, plus TEE open models) at https://cloud-api.near.ai/v1.',
+ },
+ {
+ id: 'ollama',
+ name: 'Ollama',
+ setup: '/provider or env vars',
+ notes: 'Local inference with no API key required.',
+ },
+ {
+ id: 'lm-studio',
+ name: 'LM Studio',
+ setup: '/provider or env vars',
+ envVars: ['OPENAI_BASE_URL'],
+ notes: 'Local OpenAI-compatible server; point the base URL at the LM Studio endpoint.',
+ },
+ {
+ id: 'xiaomi-mimo',
+ name: 'Xiaomi MiMo',
+ setup: '/provider or env vars',
+ envVars: ['MIMO_API_KEY'],
+ notes: 'OpenAI-compatible API at https://mimo.mi.com; defaults to mimo-v2.5-pro.',
+ },
+ {
+ id: 'opencode-zen',
+ name: 'OpenCode Zen / Go',
+ setup: '/provider or env vars',
+ envVars: ['OPENCODE_API_KEY'],
+ notes: 'Pay-as-you-go gateway (Zen) and subscription tier for open models (Go); both share one key via opencode.ai.',
+ },
+ {
+ id: 'atomic-chat',
+ name: 'Atomic Chat',
+ setup: '/provider or env vars',
+ notes: 'Local model provider with auto-detection of loaded models.',
+ },
+ {
+ id: 'hicap',
+ name: 'Hicap',
+ setup: '/provider or OpenAI-compatible env vars',
+ notes: 'api-key auth, discovers models from the unauthenticated /models endpoint, supports Responses mode for gpt- models.',
+ },
+ {
+ id: 'anthropic',
+ name: 'Anthropic',
+ setup: '/login or env vars',
+ envVars: ['ANTHROPIC_API_KEY'],
+ notes: 'Sign in with an Anthropic account or use an API key directly.',
+ },
+ {
+ id: 'cloud-routes',
+ name: 'Bedrock / Vertex / Foundry',
+ setup: 'env vars',
+ notes: 'Anthropic-family cloud routes. Vertex is for Claude on Vertex AI, not arbitrary Model Garden models.',
+ },
+]
diff --git a/web/src/data/site.ts b/web/src/data/site.ts
new file mode 100644
index 000000000..1f1f68771
--- /dev/null
+++ b/web/src/data/site.ts
@@ -0,0 +1,15 @@
+export const SITE = {
+ url: 'https://openclaude.gitlawb.com',
+ name: 'openclaude',
+ title: 'openclaude — open-source coding agent CLI for any model',
+ description:
+ 'Open-source coding agent that runs in your terminal and talks to any model: OpenAI, Gemini, Ollama, GitHub Models, and 200+ more. One install, every provider.',
+ installCommand: 'npm install -g @gitlawb/openclaude@latest',
+ npmUrl: 'https://www.npmjs.com/package/@gitlawb/openclaude',
+ github: 'https://github.com/Gitlawb/openclaude',
+ gitlawb: 'https://gitlawb.com',
+ gitlawbRepo: 'https://gitlawb.com/node/repos/z6MkqDnb/openclaude',
+ version: '0.18.0',
+ ogDefault: '/og/default.png',
+ ogDocs: '/og/docs.png',
+} as const
diff --git a/web/src/data/skills.ts b/web/src/data/skills.ts
new file mode 100644
index 000000000..03ef3d927
--- /dev/null
+++ b/web/src/data/skills.ts
@@ -0,0 +1,45 @@
+// Seeded from src/skills/bundledSkills.ts + src/i18n/languages/en.ts.
+
+export interface Skill {
+ name: string
+ invocation: string
+ description: string
+}
+
+export const skills: Skill[] = [
+ {
+ name: 'batch',
+ invocation: '/batch',
+ description:
+ 'Research and plan a large-scale change, then execute it in parallel across 5–30 isolated worktree agents that each open a PR. Use for sweeping, mechanical changes (migrations, refactors, bulk renames) that decompose into independent units.',
+ },
+ {
+ name: 'loop',
+ invocation: '/loop',
+ description:
+ 'Run a prompt on a fixed interval or dynamically reschedule it. Use to poll for status, babysit a workflow, or keep re-running a prompt within the current session.',
+ },
+ {
+ name: 'simplify',
+ invocation: '/simplify',
+ description:
+ 'Review changed code for reuse, quality, and efficiency, then fix any issues found.',
+ },
+ {
+ name: 'debug',
+ invocation: '/debug',
+ description: 'Enable debug logging for this session and help diagnose issues.',
+ },
+ {
+ name: 'update-config',
+ invocation: '/update-config',
+ description:
+ 'Configure the harness via settings.json: permissions, env vars, hooks, and automated behaviors ("from now on when X…").',
+ },
+ {
+ name: 'keybindings-help',
+ invocation: '/keybindings-help',
+ description:
+ 'Customize keyboard shortcuts: rebind keys, add chord bindings, or modify ~/.claude/keybindings.json.',
+ },
+]
diff --git a/web/src/layouts/BaseLayout.astro b/web/src/layouts/BaseLayout.astro
new file mode 100644
index 000000000..5fae8da7b
--- /dev/null
+++ b/web/src/layouts/BaseLayout.astro
@@ -0,0 +1,44 @@
+---
+import '@fontsource-variable/geist-mono'
+import '../styles/global.css'
+import Head from '../components/Head.astro'
+import Nav from '../components/Nav.astro'
+import Footer from '../components/Footer.astro'
+
+interface Props {
+ title: string
+ description: string
+ ogImage?: string
+ type?: 'website' | 'article'
+ jsonLd?: object[]
+}
+---
+
+
+
+
+
+
+
+
+ skip to content
+
+
+
+
+
diff --git a/web/src/layouts/DocsLayout.astro b/web/src/layouts/DocsLayout.astro
new file mode 100644
index 000000000..ca3e3083a
--- /dev/null
+++ b/web/src/layouts/DocsLayout.astro
@@ -0,0 +1,78 @@
+---
+import BaseLayout from './BaseLayout.astro'
+import Breadcrumbs from '../components/Breadcrumbs.astro'
+import DocsSidebar from '../components/DocsSidebar.astro'
+import DocsToc, { type TocEntry } from '../components/DocsToc.astro'
+import { docsPages, pagerFor } from '../data/docsNav'
+import { SITE } from '../data/site'
+
+interface Props {
+ /** Browser tab / SERP title */
+ title: string
+ description: string
+ /** H1 + breadcrumb label (falls back to nav title) */
+ heading: string
+ lede?: string
+ toc?: TocEntry[]
+ /** override the default docs OG card */
+ ogImage?: string
+}
+
+const { title, description, heading, lede, toc = [], ogImage = SITE.ogDocs } = Astro.props
+
+const path = Astro.url.pathname
+const { prev, next } = pagerFor(path)
+const navTitle = docsPages.find(p => p.href === path)?.title ?? heading
+
+const crumbs = [
+ { label: 'home', href: '/' },
+ { label: 'docs', href: '/docs/' },
+ ...(path === '/docs/' ? [] : [{ label: navTitle.toLowerCase(), href: path }]),
+]
+
+const jsonLd = [
+ {
+ '@context': 'https://schema.org',
+ '@type': 'TechArticle',
+ headline: heading,
+ description,
+ url: new URL(path, SITE.url).href,
+ isPartOf: { '@type': 'WebSite', name: SITE.name, url: SITE.url },
+ about: { '@type': 'SoftwareApplication', name: 'openclaude', url: SITE.url },
+ author: { '@type': 'Organization', name: 'GitLawb', url: SITE.gitlawb },
+ },
+]
+---
+
+
+
+
+
+
+ {heading}
+ {lede && {lede}
}
+
+
+
+
diff --git a/web/src/main.tsx b/web/src/main.tsx
deleted file mode 100644
index c4c5b6dfd..000000000
--- a/web/src/main.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App'
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-
- ,
-)
diff --git a/web/src/pages/404.astro b/web/src/pages/404.astro
new file mode 100644
index 000000000..5397a8766
--- /dev/null
+++ b/web/src/pages/404.astro
@@ -0,0 +1,33 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro'
+---
+
+
+
+
+
// 404
+
not found.
+
this page doesn't exist — but the agent probably can't fix this one.
+
+
+
+
+
diff --git a/web/src/pages/docs/cli-reference.astro b/web/src/pages/docs/cli-reference.astro
new file mode 100644
index 000000000..d71419532
--- /dev/null
+++ b/web/src/pages/docs/cli-reference.astro
@@ -0,0 +1,80 @@
+---
+import DocsLayout from '../../layouts/DocsLayout.astro'
+import { flagGroups, subcommands } from '../../data/cliFlags'
+
+const toc = [
+ { id: 'usage', label: 'usage' },
+ ...flagGroups.map(g => ({ id: g.id, label: g.label })),
+ { id: 'subcommands', label: 'subcommands' },
+]
+---
+
+
+ usage
+ openclaude [options] [prompt]
+
+# interactive session in the current repo
+openclaude
+
+# non-interactive: print the result and exit
+openclaude -p "explain the build pipeline" --output-format json
+ Looking for /commands you type inside the session? See the
+ slash commands reference .
+
+
+ {flagGroups.map(group => (
+
+ {group.label}
+ {group.intro && {group.intro}
}
+
+
+
+
+ flag
+ description
+
+
+
+ {group.flags.map(f => (
+
+ {f.flag}{f.arg ? ` ${f.arg}` : ''}{f.description}
+
+ ))}
+
+
+
+ ))}
+
+ subcommands
+
+
+
+
+ subcommand
+ description
+
+
+
+ {subcommands.map(s => (
+
+ {s.usage}{s.description}
+
+ ))}
+
+
+
+ Defaults for most of these flags can be persisted in settings files — see
+ configuration .
+
+
diff --git a/web/src/pages/docs/configuration.astro b/web/src/pages/docs/configuration.astro
new file mode 100644
index 000000000..0bf5c4f2a
--- /dev/null
+++ b/web/src/pages/docs/configuration.astro
@@ -0,0 +1,101 @@
+---
+import DocsLayout from '../../layouts/DocsLayout.astro'
+import { settingsFiles, settingOptions, envVars } from '../../data/configuration'
+
+const toc = [
+ { id: 'settings-files', label: 'settings files' },
+ { id: 'common-options', label: 'common options' },
+ { id: 'environment-variables', label: 'environment variables' },
+ { id: 'project-instructions', label: 'project instructions' },
+]
+---
+
+
+ settings files
+
+ Settings merge in order: user → project → local, with later layers overriding earlier
+ ones. Open the interactive panel with /config, or edit the files directly.
+
+
+
+
+
+ file
+ scope
+ notes
+
+
+
+ {settingsFiles.map(f => (
+
+ {f.path}{f.scope}
+ {f.notes}
+
+ ))}
+
+
+
common options
+ A few of the most-used keys in settings.json:
+
+
+
+
+ key
+ what it does
+
+
+
+ {settingOptions.map(o => (
+
+ {o.key}{o.description}
+
+ ))}
+
+
+
+ One-off overrides beat files: --settings accepts a path or inline JSON,
+ and --setting-sources restricts which layers load — see the
+ CLI reference .
+
+
+ environment variables
+ Auth and transport are driven by environment variables, which makes CI and --print scripting straightforward:
+
+
+
+
+ variable
+ purpose
+
+
+
+ {envVars.map(v => (
+
+ {v.name}{v.description}
+
+ ))}
+
+
+
Provider-specific setup recipes live on the providers page .
+
+ project instructions
+
+ CLAUDE.md (or .claude/CLAUDE.md) is loaded into context at
+ session start — build commands, conventions, and anything the agent should always
+ know about the repo. Generate a starting point with /init, and edit
+ persistent memory with /memory.
+
+
diff --git a/web/src/pages/docs/index.astro b/web/src/pages/docs/index.astro
new file mode 100644
index 000000000..fc45e22f4
--- /dev/null
+++ b/web/src/pages/docs/index.astro
@@ -0,0 +1,46 @@
+---
+import DocsLayout from '../../layouts/DocsLayout.astro'
+import { docsNav } from '../../data/docsNav'
+import { SITE } from '../../data/site'
+
+const toc = [
+ { id: 'what-is-openclaude', label: 'what is openclaude' },
+ { id: 'sections', label: 'documentation sections' },
+]
+---
+
+
+ what is openclaude
+
+ openclaude is an open-source coding agent that runs in your terminal. It reads and edits
+ files, runs shell commands, searches your codebase, and talks to MCP servers — against
+ any model backend you choose: OpenAI-compatible APIs, Google Gemini, GitHub Models,
+ local Ollama, gateways like OpenRouter and LiteLLM, and more.
+
+
+ It is maintained by gitlawb and developed in
+ the open on GitHub (with a mirror on the
+ gitlawb network ).
+
+ {SITE.installCommand}documentation sections
+ {docsNav.map(group => (
+ <>
+ {group.group}
+
+ {group.items
+ .filter(item => item.href !== '/docs/')
+ .map(item => (
+ {item.title}
+
+ ))}
+
diff --git a/web/src/pages/docs/installation.astro b/web/src/pages/docs/installation.astro
new file mode 100644
index 000000000..06efaebfb
--- /dev/null
+++ b/web/src/pages/docs/installation.astro
@@ -0,0 +1,61 @@
+---
+import DocsLayout from '../../layouts/DocsLayout.astro'
+import { SITE } from '../../data/site'
+
+const toc = [
+ { id: 'requirements', label: 'requirements' },
+ { id: 'install', label: 'install with npm' },
+ { id: 'arch-linux', label: 'arch linux (aur)' },
+ { id: 'verify', label: 'verify the install' },
+ { id: 'update', label: 'update' },
+ { id: 'troubleshooting', label: 'troubleshooting' },
+]
+---
+
+
+ requirements
+
+ Node.js 20 or newer — grab it from nodejs.org and confirm with node --version.A terminal: Terminal/iTerm on macOS, any shell on Linux, PowerShell or Windows Terminal on Windows.
+ ripgrep is bundled; if startup reports ripgrep not found, install it system-wide and confirm rg --version works.
+
+ install with npm
+ {SITE.installCommand}
+ This installs the openclaude binary globally. On macOS/Linux you may need
+ a Node installation that doesn't require sudo for global installs (nvm,
+ fnm, or Homebrew node all work).
+
+
+ arch linux (aur)
+
+ A community-maintained AUR package is available:
+
+ paru -S openclaudeverify the install
+ openclaude --version
+ To check which version is the latest published release:
+
+ npm view @gitlawb/openclaude dist-tagsupdate
+ Re-run the install command — @latest always resolves to the newest release:
+ {SITE.installCommand}troubleshooting
+
+ Old version after update — your shell may cache the binary path; run hash -r (bash/zsh) or open a new terminal.Multiple Node versions — global installs are per Node version with nvm/fnm; make sure you installed under the version your shell uses.Anything else — run /doctor inside openclaude to diagnose the installation, or check the issue tracker .
+ Next: run your first session →
+
diff --git a/web/src/pages/docs/keybindings.astro b/web/src/pages/docs/keybindings.astro
new file mode 100644
index 000000000..db9ab1719
--- /dev/null
+++ b/web/src/pages/docs/keybindings.astro
@@ -0,0 +1,62 @@
+---
+import DocsLayout from '../../layouts/DocsLayout.astro'
+import { keybindings } from '../../data/keybindings'
+
+const toc = [
+ { id: 'defaults', label: 'default shortcuts' },
+ { id: 'customizing', label: 'customizing' },
+]
+---
+
+
+ default shortcuts
+
+
+
+
+ keys
+ action
+ context
+
+
+
+ {keybindings.map(k => (
+
+ {k.keys} {k.action}
+ {k.context}
+
+ ))}
+
+
+
+ Some bindings depend on terminal capabilities (e.g. Shift+Enter needs the
+ binding installed by /terminal-setup; some Cmd combos require a
+ kitty-protocol terminal).
+
+
+ customizing
+
+ Run /keybindings to open (or create) ~/.claude/keybindings.json.
+ User bindings are loaded on top of the defaults, so you only need to declare what you
+ change. Chord bindings like ctrl+x ctrl+e are supported.
+
+ {`{
+ "bindings": {
+ "ctrl+u": "chat:undo",
+ "ctrl+x ctrl+k": "chat:killAgents"
+ }
+}`}
+ Inside a session you can also ask the agent itself: the bundled
+ keybindings-help skill knows the schema and can edit the
+ file for you.
+
+
diff --git a/web/src/pages/docs/providers.astro b/web/src/pages/docs/providers.astro
new file mode 100644
index 000000000..c9df74574
--- /dev/null
+++ b/web/src/pages/docs/providers.astro
@@ -0,0 +1,71 @@
+---
+import DocsLayout from '../../layouts/DocsLayout.astro'
+import { providers } from '../../data/providers'
+
+const toc = [
+ { id: 'how-it-works', label: 'how provider setup works' },
+ { id: 'supported-providers', label: 'supported providers' },
+ { id: 'env-setup', label: 'env-var setup' },
+]
+---
+
+
+ how provider setup works
+
+ Run /provider inside a session for guided setup. It walks you through
+ auth, lets you pick a model, and saves the result as a profile so future sessions —
+ and other clones of the repo — boot the same way. You can also configure everything
+ through environment variables , which is handy for
+ CI and scripted --print runs.
+
+
+ Switch models any time with /model, or pass
+ --provider / --model on the command line — see the
+ CLI reference .
+
+
+ supported providers
+
+
+
+
+ provider
+ setup
+ notes
+
+
+
+ {providers.map(p => (
+
+ {p.name}
+ {p.setup}
+
+ {p.notes}
+ {p.envVars && uses {p.envVars.join(', ')} }
+
+
+ ))}
+
+
+
env-var setup
+ The fastest OpenAI-compatible setup (works for OpenRouter, DeepSeek, Groq, LM Studio, LiteLLM, and any /v1 server):
+ export CLAUDE_CODE_USE_OPENAI=1
+export OPENAI_API_KEY=sk-your-key-here
+export OPENAI_BASE_URL=https://openrouter.ai/api/v1 # optional, defaults to OpenAI
+export OPENAI_MODEL=deepseek/deepseek-chat
+
+openclaude
+ Local Ollama needs no key at all — point /provider at it and pick a
+ pulled model. The full environment variable list lives on the
+ configuration page .
+
+
diff --git a/web/src/pages/docs/quickstart.astro b/web/src/pages/docs/quickstart.astro
new file mode 100644
index 000000000..878892282
--- /dev/null
+++ b/web/src/pages/docs/quickstart.astro
@@ -0,0 +1,67 @@
+---
+import DocsLayout from '../../layouts/DocsLayout.astro'
+import { SITE } from '../../data/site'
+
+const toc = [
+ { id: 'start', label: 'start the agent' },
+ { id: 'pick-a-provider', label: 'pick a provider' },
+ { id: 'first-task', label: 'give it a task' },
+ { id: 'review', label: 'review the changes' },
+ { id: 'next-steps', label: 'next steps' },
+]
+---
+
+
+ 1. start the agent
+ Run it inside any repository (or empty directory):
+ cd your-repo
+openclaude
+ If you haven't installed it yet:
+ {SITE.installCommand}
+
+
+ 2. pick a provider
+
+ Inside the session, type /provider for guided setup with saved profiles.
+ It can wire up OpenAI, OpenRouter, Gemini, local Ollama, and a dozen other backends —
+ see the provider guide for the full list.
+
+ Prefer environment variables? The fastest OpenAI-compatible setup:
+ export CLAUDE_CODE_USE_OPENAI=1
+export OPENAI_API_KEY=sk-your-key-here
+export OPENAI_MODEL=gpt-4o
+
+openclaudeFor GitHub Models, run /onboard-github for interactive OAuth onboarding.
+
+ 3. give it a task
+ Write a task the way you'd brief a teammate:
+ > add retry with exponential backoff to the fetch client, then run the tests
+ The agent streams its plan, tool calls, and edits live: reading files, searching,
+ editing, and running commands. Tool use is permission-gated — you approve the first
+ use of anything sensitive, and can manage rules later with /permissions.
+
+
+ 4. review the changes
+
+ /diff — view uncommitted changes and per-turn diffs./rewind — restore code and/or conversation to a previous point./cost — see what the session cost so far.
+ Nothing is committed unless you ask for it; every change stays reviewable.
+
+ next steps
+
+
diff --git a/web/src/pages/docs/skills.astro b/web/src/pages/docs/skills.astro
new file mode 100644
index 000000000..8babb34d4
--- /dev/null
+++ b/web/src/pages/docs/skills.astro
@@ -0,0 +1,46 @@
+---
+import DocsLayout from '../../layouts/DocsLayout.astro'
+import { skills } from '../../data/skills'
+
+const toc = [
+ { id: 'what-are-skills', label: 'what are skills' },
+ { id: 'bundled-skills', label: 'bundled skills' },
+ { id: 'your-own', label: 'writing your own' },
+]
+---
+
+
+ what are skills
+
+ A skill is a markdown instruction pack (plus optional scripts) that teaches the agent
+ a repeatable workflow. Invoke one by typing its slash form — e.g.
+ /simplify — or let the agent activate it when a task matches its
+ description. List everything available in your session with /skills.
+
+
+ bundled skills
+ {skills.map(s => (
+
+
+ {s.invocation}
+ #
+
+
{s.description}
+
writing your own
+
+ Project skills live in .claude/skills/<name>/SKILL.md; user-level
+ skills in ~/.claude/skills/. Each SKILL.md has frontmatter
+ (name, description) followed by the instructions the agent
+ loads when the skill is invoked. Plugins can ship skills too — manage them with
+ /plugin.
+
+
diff --git a/web/src/pages/docs/slash-commands.astro b/web/src/pages/docs/slash-commands.astro
new file mode 100644
index 000000000..626601dfc
--- /dev/null
+++ b/web/src/pages/docs/slash-commands.astro
@@ -0,0 +1,38 @@
+---
+import DocsLayout from '../../layouts/DocsLayout.astro'
+import { commandCategories, commands, commandsByCategory } from '../../data/commands'
+
+const toc = commandCategories.map(c => ({ id: c.id, label: c.label }))
+---
+
+
+
+ Commands run inside an interactive session and start with /. For flags
+ you pass when launching the binary, see the
+ CLI reference instead. You can also extend this
+ list with your own skills .
+
+
+ {commandCategories.map(cat => (
+
+ {cat.label}
+ {cat.blurb}
+ {commandsByCategory(cat.id).map(cmd => (
+
+
+ /{cmd.name}{cmd.args ? ` ${cmd.args}` : ''}
+ #
+
+
{cmd.description}
+
+ ))}
+
diff --git a/web/src/pages/index.astro b/web/src/pages/index.astro
new file mode 100644
index 000000000..650e6bac1
--- /dev/null
+++ b/web/src/pages/index.astro
@@ -0,0 +1,283 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro'
+import CopyCommand from '../components/CopyCommand.astro'
+import Terminal from '../components/Terminal.astro'
+import { SITE } from '../data/site'
+
+const features = [
+ {
+ title: 'any model, one terminal',
+ body: 'local ollama, openai-compatible apis, gemini, github models, gateways — switch providers with one command, no rewrites.',
+ href: '/docs/providers/',
+ link: 'provider setup →',
+ },
+ {
+ title: 'real tools, not just chat',
+ body: 'bash, file edits, grep, glob, mcp servers, skills — wired into the agent loop, not bolted on.',
+ href: '/docs/slash-commands/',
+ link: 'command reference →',
+ },
+ {
+ title: 'scriptable from day one',
+ body: 'non-interactive --print mode with json and stream-json output, tool allowlists, budgets, and session control.',
+ href: '/docs/cli-reference/',
+ link: 'cli reference →',
+ },
+ {
+ title: 'profiles per repo',
+ body: 'save model, base url, auth, and runtime defaults so every clone boots the same way.',
+ href: '/docs/configuration/',
+ link: 'configuration →',
+ },
+ {
+ title: 'streaming, not batch',
+ body: 'watch the agent think, call tools, and produce diffs live. every change stays reviewable.',
+ href: '/docs/quickstart/',
+ link: 'quickstart →',
+ },
+ {
+ title: 'sessions that persist',
+ body: 'resume, branch, and rewind conversations. background tasks, worktree isolation, remote control from your phone.',
+ href: '/docs/slash-commands/#session',
+ link: 'session commands →',
+ },
+]
+
+const providers = [
+ 'OpenAI', 'Gemini', 'Ollama', 'GitHub Models', 'OpenRouter', 'DeepSeek',
+ 'Groq', 'Mistral', 'LM Studio', 'NEAR AI', 'Xiaomi MiMo', 'LiteLLM',
+]
+
+const jsonLd = [
+ {
+ '@context': 'https://schema.org',
+ '@type': 'SoftwareApplication',
+ name: 'openclaude',
+ applicationCategory: 'DeveloperApplication',
+ operatingSystem: 'macOS, Linux, Windows',
+ softwareVersion: SITE.version,
+ url: SITE.url,
+ downloadUrl: SITE.npmUrl,
+ description: SITE.description,
+ offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
+ author: { '@type': 'Organization', name: 'GitLawb', url: SITE.gitlawb },
+ },
+ {
+ '@context': 'https://schema.org',
+ '@type': 'WebSite',
+ name: SITE.name,
+ url: SITE.url,
+ },
+]
+---
+
+
+
+
+
+
+ runs anywhere.
+
+ not a chatbot wrapper or another ide plugin. an open coding agent that runs in
+ your terminal, talks to any model, and keeps every change reviewable.
+
+
+
+
+
+
+
+
+
// in action
+
an agent loop you can watch.
+
+
+ $ openclaudeopenclaude v{SITE.version} · provider: ollama · model: qwen3-coder
+
+ > add retry with backoff to the fetch client
+ ● Read src/lib/fetchClient.ts● Grep "fetchWithTimeout" — 3 matches● Edit src/lib/fetchClient.ts +18 -2 ● Bash bun test fetchClient — 7 pass
+ added exponential backoff (3 retries, jitter). tests green.
+
+
+
+
+
+
+
+
// features
+
built for agents that ship code.
+
+
+
+
+
+
+
+
// providers
+
bring your own model.
+
+ one agent, every backend. wire a provider once with /provider and
+ switch models mid-session.
+
+
+
+ {providers.map(p => {p} )}
+
+
+ plus bedrock, vertex, codex oauth, atomic chat, opengateway, and any
+ openai-compatible endpoint. see all providers →
+
+
+
+
+
+
+
// install
+
one line. then write a task.
+
+
+
+
+
+ 01
+
+
+
+ 02
+
+
start
+
run openclaude in any repo.
+
+
+ 03
+
+
pick a provider
+
type /provider to wire openai, ollama, gemini, or a gateway.
+
+
+
+
+
+
+
diff --git a/web/src/styles.css b/web/src/styles.css
deleted file mode 100644
index cb1daf13b..000000000
--- a/web/src/styles.css
+++ /dev/null
@@ -1,530 +0,0 @@
-/* ── reset + tokens ───────────────────────────────────────────────────── */
-
-* { box-sizing: border-box; }
-
-:root {
- --max: 960px;
-
- /* shared brand */
- --accent: #ff7a1a;
- --accent-2: #ffb15f;
- --accent-soft: rgba(255, 122, 26, 0.14);
- --accent-line: rgba(255, 122, 26, 0.40);
-
- font-family: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Courier New', monospace;
- font-feature-settings: 'ss01', 'ss02', 'cv01', 'cv11';
- font-synthesis: none;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-/* ── light theme (default) ────────────────────────────────────────────── */
-:root,
-:root[data-theme='light'] {
- color-scheme: light;
- --bg: #fbfaf7;
- --bg-elev: rgba(251, 250, 247, 0.88);
- --bg-soft: rgba(255, 122, 26, 0.05);
- --ink: #1a1208;
- --ink-2: rgba(26, 18, 8, 0.88);
- --muted: rgba(26, 18, 8, 0.64);
- --quiet: rgba(26, 18, 8, 0.46);
- --line: rgba(26, 18, 8, 0.10);
- --line-strong: rgba(255, 122, 26, 0.30);
- --hero-glow: rgba(255, 122, 26, 0.28);
- --hero-wash: rgba(255, 122, 26, 0.18);
- --hero-wash-2: rgba(255, 177, 95, 0.10);
- --copy-bg: #ffffff;
- --selection-fg: #ffffff;
- --scroll-thumb: #d8c9bc;
-}
-
-/* ── dark theme ───────────────────────────────────────────────────────── */
-:root[data-theme='dark'] {
- color-scheme: dark;
- --bg: #000000;
- --bg-elev: rgba(0, 0, 0, 0.85);
- --bg-soft: rgba(255, 255, 255, 0.025);
- --ink: #ffffff;
- --ink-2: rgba(255, 255, 255, 0.82);
- --muted: rgba(255, 255, 255, 0.55);
- --quiet: rgba(255, 255, 255, 0.38);
- --line: rgba(255, 255, 255, 0.10);
- --line-strong: rgba(255, 255, 255, 0.20);
- --hero-glow: rgba(255, 122, 26, 0.22);
- --hero-wash: rgba(255, 122, 26, 0.16);
- --hero-wash-2: rgba(255, 122, 26, 0.06);
- --copy-bg: rgba(0, 0, 0, 0.5);
- --selection-fg: #120804;
- --scroll-thumb: #3a2615;
-}
-
-html {
- scroll-behavior: smooth;
- background: var(--bg);
- transition: background-color 0.25s ease;
-}
-
-body {
- min-width: 320px;
- margin: 0;
- background:
- radial-gradient(circle at 78% -4%, var(--hero-wash), transparent 420px),
- radial-gradient(circle at 12% 18%, var(--hero-wash-2), transparent 360px),
- var(--bg);
- color: var(--ink);
- overflow-x: hidden;
- transition: background-color 0.25s ease, color 0.25s ease;
-}
-
-::-webkit-scrollbar { width: 3px; height: 3px; }
-::-webkit-scrollbar-track { background: var(--bg); }
-::-webkit-scrollbar-thumb { background: var(--scroll-thumb); }
-::selection { background: var(--accent); color: var(--selection-fg); }
-
-a {
- color: inherit;
- text-decoration: none;
- transition: color 0.18s ease;
-}
-a:hover { color: var(--ink); }
-
-button, a { -webkit-tap-highlight-color: transparent; }
-
-button:focus-visible,
-a:focus-visible {
- outline: 1px solid var(--accent);
- outline-offset: 3px;
-}
-
-button { font: inherit; }
-code, pre { font-family: inherit; }
-h1, h2, h3, p { margin-top: 0; }
-
-/* ── shell ────────────────────────────────────────────────────────────── */
-
-.site-shell { overflow: hidden; }
-
-.nav,
-.shell-main,
-.footer {
- width: min(100% - 2.5rem, var(--max));
- margin: 0 auto;
-}
-
-@media (max-width: 600px) {
- .nav, .shell-main, .footer {
- width: min(100% - 1.5rem, var(--max));
- }
-}
-
-/* ── header ───────────────────────────────────────────────────────────── */
-
-.site-header {
- position: sticky;
- top: 0;
- z-index: 30;
- background: var(--bg-elev);
- backdrop-filter: blur(14px);
- transition: background-color 0.25s ease;
-}
-
-.nav {
- display: flex;
- height: 64px;
- align-items: center;
- justify-content: space-between;
- gap: 1.5rem;
-}
-
-.nav .brand img {
- width: 36px;
- height: 36px;
-}
-
-.nav .brand {
- font-size: 0.95rem;
- gap: 0.6rem;
-}
-
-@media (max-width: 600px) {
- .nav .brand img { width: 30px; height: 30px; }
- .nav .brand { font-size: 0.85rem; }
-}
-
-.nav-rule {
- width: min(100% - 2.5rem, var(--max));
- margin: 0 auto;
- border-top: 1px dashed var(--line);
-}
-
-.brand {
- display: inline-flex;
- align-items: center;
- gap: 0.5rem;
- color: var(--ink);
- font-size: 0.85rem;
- font-weight: 600;
- letter-spacing: -0.01em;
-}
-
-.brand img {
- width: 22px;
- height: 22px;
- display: block;
-}
-
-.brand .ver {
- margin-left: 0.4rem;
- color: var(--quiet);
- font-size: 0.7rem;
- font-weight: 400;
-}
-
-.nav-right {
- display: flex;
- align-items: center;
- gap: 1.4rem;
-}
-
-.nav-links {
- display: flex;
- align-items: center;
- gap: 1.6rem;
-}
-
-.nav-links a {
- color: var(--muted);
- font-size: 0.78rem;
-}
-.nav-links a:hover { color: var(--ink); }
-
-.theme-toggle {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- height: 28px;
- width: 28px;
- border: 1px solid var(--line);
- background: var(--bg-soft);
- color: var(--muted);
- cursor: pointer;
- font-size: 0.85rem;
- line-height: 1;
- transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
-}
-.theme-toggle:hover {
- border-color: var(--accent);
- color: var(--accent);
-}
-
-@media (max-width: 600px) {
- .nav-right { gap: 0.85rem; }
- .nav-links { gap: 1rem; }
- .nav-links a { font-size: 0.72rem; }
-}
-
-/* ── shared atoms ─────────────────────────────────────────────────────── */
-
-.eyebrow {
- margin: 0 0 0.85rem;
- color: var(--accent);
- font-size: 0.72rem;
- font-weight: 500;
- letter-spacing: 0.04em;
-}
-
-.button {
- display: inline-flex;
- height: 44px;
- align-items: center;
- justify-content: center;
- gap: 0.45rem;
- padding: 0 1.05rem;
- border: 1px solid transparent;
- font-size: 0.8rem;
- font-weight: 500;
- letter-spacing: 0.01em;
- cursor: pointer;
- transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
-}
-
-.button-ghost {
- border-color: var(--line-strong);
- color: var(--ink);
- background: transparent;
-}
-.button-ghost:hover {
- border-color: var(--ink);
- background: rgba(255, 255, 255, 0.04);
-}
-
-.section-head {
- max-width: 38rem;
- margin: 0 auto 2.25rem;
- text-align: center;
-}
-
-.section-head h2 {
- margin: 0;
- color: var(--ink);
- font-size: clamp(1.6rem, 3vw, 2.1rem);
- font-weight: 600;
- line-height: 1.15;
- letter-spacing: -0.025em;
-}
-
-/* ── hero ─────────────────────────────────────────────────────────────── */
-
-.hero {
- display: flex;
- flex-direction: column;
- align-items: center;
- text-align: center;
- padding: clamp(4rem, 12vh, 8rem) 0 clamp(3rem, 8vh, 5.5rem);
- gap: 1.4rem;
-}
-
-.hero-eyebrow {
- display: inline-flex;
- align-items: center;
- gap: 0.55rem;
- padding: 0.4rem 0.85rem;
- border: 1px solid var(--accent-line);
- background: var(--bg-soft);
- color: var(--ink-2);
- font-size: 0.7rem;
- letter-spacing: 0.02em;
-}
-
-.hero-eyebrow .dot {
- width: 6px;
- height: 6px;
- border-radius: 999px;
- background: var(--accent);
- box-shadow: 0 0 0 3px var(--accent-soft);
-}
-
-.hero-title {
- margin: 0;
- font-size: clamp(2.4rem, 6vw, 4.4rem);
- font-weight: 700;
- line-height: 1;
- letter-spacing: -0.04em;
- color: var(--ink);
- text-shadow: 0 0 28px var(--hero-glow);
-}
-
-.hero-sub {
- max-width: 36rem;
- margin: 0;
- color: var(--muted);
- font-size: clamp(0.95rem, 1.4vw, 1.05rem);
- line-height: 1.65;
-}
-
-.hero-cta {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- align-items: stretch;
- gap: 0.75rem;
- margin-top: 0.4rem;
-}
-
-.hero-foot {
- margin: 0.6rem 0 0;
- color: var(--quiet);
- font-size: 0.75rem;
- letter-spacing: 0.02em;
-}
-
-/* ── copyable command ─────────────────────────────────────────────────── */
-
-.copy-cmd {
- display: inline-flex;
- align-items: center;
- gap: 0.7rem;
- height: 44px;
- padding: 0 0.95rem;
- border: 1px solid var(--accent-line);
- background: var(--copy-bg);
- color: var(--ink);
- font-size: 0.82rem;
- cursor: pointer;
- box-shadow: 0 8px 24px -16px var(--accent-soft);
- transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
-}
-.copy-cmd:hover {
- border-color: var(--accent);
- box-shadow: 0 10px 28px -14px var(--accent-soft);
-}
-
-.copy-cmd-hero {
- height: 48px;
- padding: 0 1.1rem;
- font-size: 0.88rem;
-}
-
-.copy-prefix { color: var(--accent); font-weight: 500; }
-.copy-text { color: var(--ink-2); }
-.copy-icon {
- margin-left: 0.4rem;
- color: var(--quiet);
- font-size: 0.7rem;
- letter-spacing: 0.06em;
- text-transform: uppercase;
-}
-
-/* ── features ─────────────────────────────────────────────────────────── */
-
-.features {
- padding: clamp(3rem, 8vh, 5rem) 0;
-}
-
-.feature-list {
- display: grid;
- grid-template-columns: 1fr;
- gap: 0;
- margin: 0;
- padding: 0;
- list-style: none;
- border-top: 1px solid var(--line);
-}
-
-.feature-row {
- display: grid;
- grid-template-columns: minmax(180px, 0.32fr) 1fr;
- gap: 1.5rem;
- padding: 1.4rem 0;
- border-bottom: 1px solid var(--line);
-}
-
-.feature-row h3 {
- margin: 0;
- color: var(--ink);
- font-size: 0.9rem;
- font-weight: 600;
- letter-spacing: -0.005em;
-}
-
-.feature-row p {
- margin: 0;
- color: var(--muted);
- font-size: 0.88rem;
- line-height: 1.65;
-}
-
-@media (max-width: 600px) {
- .feature-row {
- grid-template-columns: 1fr;
- gap: 0.4rem;
- padding: 1.1rem 0;
- }
- .feature-row p { font-size: 0.85rem; }
-}
-
-/* ── install block ────────────────────────────────────────────────────── */
-
-.install-block {
- padding: clamp(3rem, 8vh, 5rem) 0 clamp(4rem, 10vh, 6rem);
-}
-
-.install-grid {
- display: grid;
- grid-template-columns: 1fr;
- gap: 2rem;
- max-width: 36rem;
- margin: 0 auto;
-}
-
-.install-grid .copy-cmd {
- width: 100%;
- justify-content: flex-start;
-}
-
-.install-steps {
- display: grid;
- gap: 0;
- margin: 0;
- padding: 0;
- list-style: none;
- border-top: 1px solid var(--line);
-}
-
-.install-steps li {
- display: grid;
- grid-template-columns: 2.5rem 1fr;
- gap: 1rem;
- padding: 1rem 0;
- border-bottom: 1px solid var(--line);
-}
-
-.step-num {
- color: var(--accent);
- font-size: 0.72rem;
- letter-spacing: 0.18em;
- padding-top: 0.18rem;
-}
-
-.install-steps strong {
- display: block;
- margin-bottom: 0.25rem;
- color: var(--ink);
- font-size: 0.88rem;
- font-weight: 600;
- letter-spacing: -0.005em;
-}
-
-.install-steps p {
- margin: 0;
- color: var(--muted);
- font-size: 0.85rem;
- line-height: 1.6;
-}
-
-.install-steps code {
- padding: 0.05rem 0.35rem;
- border: 1px solid var(--line);
- background: rgba(255, 122, 26, 0.06);
- color: var(--accent-2);
- font-size: 0.8rem;
-}
-
-/* ── footer ───────────────────────────────────────────────────────────── */
-
-.footer {
- padding: 2rem 0 2.5rem;
- border-top: 1px dashed var(--line);
-}
-
-.footer-line {
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- gap: 0.55rem;
- color: var(--quiet);
- font-size: 0.74rem;
-}
-
-.footer-line .brand {
- font-size: 0.78rem;
-}
-
-.footer-line .sep {
- color: var(--line-strong);
-}
-
-.footer-line a {
- color: var(--muted);
-}
-.footer-line a:hover { color: var(--ink); }
-
-@media (prefers-reduced-motion: reduce) {
- *, *::before, *::after {
- scroll-behavior: auto !important;
- animation-duration: 0.001ms !important;
- animation-iteration-count: 1 !important;
- }
-}
diff --git a/web/src/styles/global.css b/web/src/styles/global.css
new file mode 100644
index 000000000..f740f7d23
--- /dev/null
+++ b/web/src/styles/global.css
@@ -0,0 +1,752 @@
+/* ════════════════════════════════════════════════════════════════════════
+ openclaude — gitlawb-aligned design tokens
+ Monochrome surface system driven by --surface-rgb (inverts under light
+ theme) + openclaude orange accent. Dark is the default theme.
+ ════════════════════════════════════════════════════════════════════════ */
+
+* { box-sizing: border-box; }
+
+:root {
+ --max: 1152px;
+ --nav-h: 56px;
+
+ --background: #000000;
+ --foreground: #ffffff;
+ --surface-rgb: 255, 255, 255;
+
+ /* openclaude accent */
+ --accent: #ff7a1a;
+ --accent-strong: #ff8f3d;
+ --accent-soft: rgba(255, 122, 26, 0.14);
+ --accent-line: rgba(255, 122, 26, 0.4);
+
+ /* gitlawb semantic colors */
+ --green: #4ade80;
+ --red: #f87171;
+ --yellow: #facc15;
+ --blue: #60a5fa;
+
+ /* derived surfaces */
+ --ink: var(--foreground);
+ --ink-2: rgba(var(--surface-rgb), 0.85);
+ --muted: rgba(var(--surface-rgb), 0.7);
+ --quiet: rgba(var(--surface-rgb), 0.55);
+ --faint: rgba(var(--surface-rgb), 0.38);
+ --line: rgba(var(--surface-rgb), 0.1);
+ --line-strong: rgba(var(--surface-rgb), 0.2);
+ --card-bg: rgba(var(--surface-rgb), 0.025);
+ --card-bg-hover: rgba(var(--surface-rgb), 0.04);
+ --tile-bg: rgba(var(--surface-rgb), 0.03);
+ --nav-bg: rgba(0, 0, 0, 0.9);
+
+ font-family: 'Geist Mono Variable', ui-monospace, 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;
+ font-synthesis: none;
+ text-rendering: optimizelegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ color-scheme: dark;
+}
+
+[data-theme='light'] {
+ --background: #ffffff;
+ --foreground: #000000;
+ --surface-rgb: 0, 0, 0;
+
+ /* darkened accent for AA contrast on white */
+ --accent: #e85d00;
+ --accent-strong: #c24e00;
+ --accent-soft: rgba(232, 93, 0, 0.1);
+ --accent-line: rgba(232, 93, 0, 0.35);
+
+ --green: #15803d;
+ --red: #b91c1c;
+ --yellow: #a16207;
+ --blue: #2563eb;
+
+ --nav-bg: rgba(255, 255, 255, 0.9);
+
+ color-scheme: light;
+}
+
+html {
+ scroll-behavior: smooth;
+ background: var(--background);
+}
+
+body {
+ min-width: 320px;
+ margin: 0;
+ background: var(--background);
+ color: var(--ink);
+ font-size: 0.875rem;
+ line-height: 1.55;
+ overflow-x: hidden;
+ transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+::selection { background: var(--accent); color: #000; }
+[data-theme='light'] ::selection { color: #fff; }
+
+::-webkit-scrollbar { width: 4px; height: 4px; }
+::-webkit-scrollbar-track { background: var(--background); }
+::-webkit-scrollbar-thumb { background: rgba(var(--surface-rgb), 0.25); }
+
+a {
+ color: inherit;
+ text-decoration: none;
+ transition: color 0.18s ease, border-color 0.18s ease;
+}
+a:hover { color: var(--ink); }
+
+button { font: inherit; cursor: pointer; }
+button, a { -webkit-tap-highlight-color: transparent; }
+
+button:focus-visible,
+a:focus-visible {
+ outline: 1px solid var(--accent);
+ outline-offset: 3px;
+}
+
+code, pre, kbd { font-family: inherit; }
+h1, h2, h3, h4, p { margin-top: 0; }
+img { max-width: 100%; }
+
+h1[id], h2[id], h3[id], h4[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }
+
+.visually-hidden {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ margin: -1px;
+ padding: 0;
+ overflow: hidden;
+ clip: rect(0 0 0 0);
+ white-space: nowrap;
+ border: 0;
+}
+
+.skip-link {
+ position: absolute;
+ left: -9999px;
+ top: 0;
+ z-index: 100;
+ padding: 0.5rem 1rem;
+ background: var(--accent);
+ color: #000;
+}
+.skip-link:focus { left: 0; }
+
+/* ── type scale (gitlawb) ─────────────────────────────────────────────── */
+
+.text-hero {
+ font-size: clamp(2.5rem, 6vw, 3.75rem);
+ font-weight: 700;
+ line-height: 1.02;
+ letter-spacing: -0.02em;
+ color: var(--ink);
+}
+
+.text-heading {
+ font-size: 1.125rem;
+ font-weight: 600;
+ line-height: 1.3;
+ color: var(--ink);
+}
+
+.text-body { font-size: 0.875rem; line-height: 1.55; color: var(--ink-2); }
+.text-body-dim { font-size: 0.875rem; line-height: 1.55; color: var(--muted); }
+
+.text-label {
+ font-size: 0.75rem;
+ font-weight: 500;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+
+.eyebrow {
+ margin: 0 0 0.85rem;
+ color: var(--accent);
+ font-size: 0.72rem;
+ font-weight: 500;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+}
+
+/* ── layout primitives ────────────────────────────────────────────────── */
+
+.container {
+ width: 100%;
+ max-width: var(--max);
+ margin: 0 auto;
+ padding: 0 1.5rem;
+}
+
+.section { padding: 6rem 0; border-top: 1px solid var(--line); }
+.section-tint { background: rgba(var(--surface-rgb), 0.015); }
+
+.section-head { max-width: 40rem; margin-bottom: 2.5rem; }
+.section-head h2 {
+ margin: 0;
+ font-size: clamp(1.5rem, 3vw, 2rem);
+ font-weight: 600;
+ line-height: 1.15;
+ letter-spacing: -0.02em;
+ color: var(--ink);
+}
+.section-head .lede { margin: 0.85rem 0 0; color: var(--muted); }
+
+@media (max-width: 640px) {
+ .section { padding: 4rem 0; }
+}
+
+/* ── grid background (hero signature) ─────────────────────────────────── */
+
+.grid-bg {
+ position: relative;
+}
+.grid-bg::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background-image:
+ linear-gradient(rgba(var(--surface-rgb), 0.05) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(var(--surface-rgb), 0.05) 1px, transparent 1px);
+ background-size: 80px 80px;
+ opacity: 0.5;
+ pointer-events: none;
+ mask-image: linear-gradient(to bottom, black 60%, transparent);
+}
+
+/* ── nav ──────────────────────────────────────────────────────────────── */
+
+.site-nav {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 50;
+ height: var(--nav-h);
+ border-bottom: 1px solid var(--line);
+ background: var(--nav-bg);
+ backdrop-filter: blur(8px);
+ -webkit-backdrop-filter: blur(8px);
+}
+
+.site-nav .container {
+ display: flex;
+ height: 100%;
+ align-items: center;
+ justify-content: space-between;
+ gap: 1.5rem;
+}
+
+.brand {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.55rem;
+ color: var(--ink);
+ font-size: 0.85rem;
+ font-weight: 600;
+}
+.brand img { width: 22px; height: 22px; display: block; }
+.brand .ver {
+ margin-left: 0.25rem;
+ color: var(--faint);
+ font-size: 0.7rem;
+ font-weight: 400;
+}
+
+.nav-links {
+ display: flex;
+ align-items: center;
+ gap: 1.5rem;
+}
+.nav-links a {
+ color: var(--muted);
+ font-size: 0.78rem;
+}
+.nav-links a:hover,
+.nav-links a[aria-current='page'] { color: var(--ink); }
+
+.theme-toggle {
+ border: none;
+ background: none;
+ padding: 0.25rem 0;
+ color: var(--muted);
+ font-size: 0.78rem;
+ letter-spacing: 0.02em;
+}
+.theme-toggle:hover { color: var(--accent); }
+
+.nav-burger {
+ display: none;
+ border: none;
+ background: none;
+ padding: 0.25rem 0;
+ color: var(--muted);
+ font-size: 0.78rem;
+}
+.nav-burger:hover { color: var(--ink); }
+
+.mobile-menu {
+ display: none;
+ border-bottom: 1px solid var(--line);
+ background: var(--background);
+}
+.mobile-menu a {
+ display: block;
+ padding: 0.8rem 1.5rem;
+ border-top: 1px solid var(--line);
+ color: var(--muted);
+ font-size: 0.82rem;
+}
+.mobile-menu a:hover { color: var(--ink); }
+
+@media (max-width: 760px) {
+ .nav-links { display: none; }
+ .nav-burger { display: inline-flex; }
+ .site-nav.menu-open ~ * .mobile-menu,
+ .site-nav.menu-open .mobile-menu {
+ display: block;
+ position: absolute;
+ top: var(--nav-h);
+ left: 0;
+ right: 0;
+ }
+}
+
+/* ── buttons / pills ──────────────────────────────────────────────────── */
+
+.button {
+ display: inline-flex;
+ height: 44px;
+ align-items: center;
+ justify-content: center;
+ gap: 0.45rem;
+ padding: 0 1.1rem;
+ border: 1px solid transparent;
+ font-size: 0.8rem;
+ font-weight: 500;
+ transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
+}
+
+.button-solid {
+ background: var(--accent);
+ color: #000;
+ border-color: var(--accent);
+}
+[data-theme='light'] .button-solid { color: #fff; }
+.button-solid:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: #000; }
+[data-theme='light'] .button-solid:hover { color: #fff; }
+
+.button-ghost {
+ border-color: var(--line-strong);
+ color: var(--ink);
+ background: transparent;
+}
+.button-ghost:hover {
+ border-color: rgba(var(--surface-rgb), 0.4);
+ background: rgba(var(--surface-rgb), 0.04);
+ color: var(--ink);
+}
+
+.pill {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.55rem;
+ padding: 0.35rem 0.85rem;
+ border: 1px solid var(--line-strong);
+ color: var(--ink-2);
+ font-size: 0.7rem;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+}
+.pill .dot {
+ width: 6px;
+ height: 6px;
+ border-radius: 999px;
+ background: var(--accent);
+ box-shadow: 0 0 0 3px var(--accent-soft);
+}
+
+/* ── copyable command ─────────────────────────────────────────────────── */
+
+.copy-cmd {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.7rem;
+ height: 44px;
+ padding: 0 0.95rem;
+ border: 1px solid var(--accent-line);
+ background: var(--card-bg);
+ color: var(--ink);
+ font-size: 0.82rem;
+ transition: border-color 0.2s ease, background-color 0.2s ease;
+}
+.copy-cmd:hover { border-color: var(--accent); background: var(--card-bg-hover); }
+.copy-cmd .prefix { color: var(--accent); font-weight: 500; }
+.copy-cmd .cmd { color: var(--ink-2); white-space: nowrap; }
+.copy-cmd .hint {
+ margin-left: 0.4rem;
+ color: var(--faint);
+ font-size: 0.68rem;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+}
+.copy-cmd.copied .hint { color: var(--green); }
+
+@media (max-width: 640px) {
+ .copy-cmd { font-size: 0.72rem; padding: 0 0.7rem; gap: 0.5rem; }
+}
+
+/* ── cards / grids ────────────────────────────────────────────────────── */
+
+.card-grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 1px;
+ border: 1px solid var(--line);
+ background: var(--line);
+}
+@media (max-width: 900px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
+@media (max-width: 600px) { .card-grid { grid-template-columns: 1fr; } }
+
+.card {
+ display: block;
+ padding: 1.5rem;
+ background: var(--background);
+ transition: background-color 0.18s ease;
+}
+.card:hover { background: var(--card-bg-hover); }
+.card h3 {
+ margin: 0 0 0.5rem;
+ font-size: 0.9rem;
+ font-weight: 600;
+ color: var(--ink);
+}
+.card p { margin: 0; font-size: 0.82rem; line-height: 1.6; color: var(--muted); }
+.card .card-link {
+ display: inline-block;
+ margin-top: 0.85rem;
+ color: var(--accent);
+ font-size: 0.75rem;
+}
+.card:hover .card-link { color: var(--accent-strong); }
+
+/* ── terminal mockup ──────────────────────────────────────────────────── */
+
+.terminal {
+ border: 1px solid var(--line-strong);
+ background: rgba(var(--surface-rgb), 0.02);
+ font-size: 0.78rem;
+ line-height: 1.7;
+}
+.terminal-bar {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.55rem 0.9rem;
+ border-bottom: 1px solid var(--line);
+ color: var(--faint);
+ font-size: 0.68rem;
+ letter-spacing: 0.08em;
+}
+.terminal-bar .dots { display: inline-flex; gap: 0.3rem; }
+.terminal-bar .dots i {
+ width: 8px;
+ height: 8px;
+ border-radius: 999px;
+ background: rgba(var(--surface-rgb), 0.15);
+}
+.terminal-body { padding: 1rem 1.1rem; overflow-x: auto; }
+.terminal-body .ln { display: block; white-space: pre; }
+.t-prompt { color: var(--accent); }
+.t-dim { color: var(--quiet); }
+.t-ok { color: var(--green); }
+.t-info { color: var(--blue); }
+.t-warn { color: var(--yellow); }
+
+.cursor::after {
+ content: '▋';
+ color: var(--accent);
+ animation: blink 1s step-end infinite;
+}
+@keyframes blink { 50% { opacity: 0; } }
+
+/* ── inline code / pre blocks ─────────────────────────────────────────── */
+
+code:not(pre code) {
+ padding: 0.08rem 0.35rem;
+ border: 1px solid var(--line);
+ background: var(--tile-bg);
+ color: var(--accent);
+ font-size: 0.8em;
+ white-space: nowrap;
+}
+
+pre {
+ margin: 1rem 0;
+ padding: 1rem 1.1rem;
+ border: 1px solid var(--line);
+ background: rgba(var(--surface-rgb), 0.02);
+ font-size: 0.78rem;
+ line-height: 1.7;
+ overflow-x: auto;
+ color: var(--ink-2);
+}
+
+kbd {
+ padding: 0.08rem 0.4rem;
+ border: 1px solid var(--line-strong);
+ border-bottom-width: 2px;
+ background: var(--tile-bg);
+ color: var(--ink-2);
+ font-size: 0.78em;
+}
+
+/* ── tables (reference docs) ──────────────────────────────────────────── */
+
+.table-wrap { overflow-x: auto; margin: 1rem 0; }
+
+table {
+ width: 100%;
+ border-collapse: collapse;
+ border: 1px solid var(--line);
+ font-size: 0.8rem;
+}
+th {
+ padding: 0.6rem 0.85rem;
+ border: 1px solid var(--line);
+ background: var(--tile-bg);
+ color: var(--muted);
+ font-size: 0.7rem;
+ font-weight: 500;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ text-align: left;
+}
+td {
+ padding: 0.6rem 0.85rem;
+ border: 1px solid var(--line);
+ color: var(--ink-2);
+ vertical-align: top;
+ line-height: 1.55;
+}
+td:first-child { white-space: nowrap; }
+@media (max-width: 640px) { td:first-child { white-space: normal; } }
+
+/* ── footer ───────────────────────────────────────────────────────────── */
+
+.site-footer {
+ border-top: 1px solid var(--line);
+ padding: 3rem 0;
+}
+.footer-grid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 2rem;
+}
+@media (max-width: 760px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
+
+.footer-col h4 {
+ margin: 0 0 0.9rem;
+ color: var(--muted);
+ font-size: 0.7rem;
+ font-weight: 500;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+}
+.footer-col ul { margin: 0; padding: 0; list-style: none; }
+.footer-col li { margin-bottom: 0.55rem; }
+.footer-col a { color: var(--quiet); font-size: 0.78rem; }
+.footer-col a:hover { color: var(--ink); }
+
+.footer-bottom {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 0.6rem;
+ margin-top: 2.5rem;
+ padding-top: 1.5rem;
+ border-top: 1px solid var(--line);
+ color: var(--faint);
+ font-size: 0.72rem;
+}
+.footer-bottom .sep { color: var(--line-strong); }
+.footer-bottom a { color: var(--quiet); }
+.footer-bottom a:hover { color: var(--ink); }
+
+/* ── docs layout ──────────────────────────────────────────────────────── */
+
+.docs-shell {
+ display: grid;
+ grid-template-columns: 220px minmax(0, 1fr) 200px;
+ gap: 3rem;
+ padding: calc(var(--nav-h) + 2.5rem) 0 5rem;
+}
+@media (max-width: 1024px) {
+ .docs-shell { grid-template-columns: 220px minmax(0, 1fr); }
+ .docs-toc { display: none; }
+}
+@media (max-width: 760px) {
+ .docs-shell { grid-template-columns: 1fr; gap: 1.5rem; }
+ .docs-sidebar { order: 2; border-top: 1px solid var(--line); padding-top: 1.5rem; }
+ .docs-article { order: 1; }
+}
+
+.docs-sidebar nav { position: sticky; top: calc(var(--nav-h) + 2rem); }
+.docs-sidebar h4 {
+ margin: 0 0 0.7rem;
+ color: var(--muted);
+ font-size: 0.68rem;
+ font-weight: 500;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+}
+.docs-sidebar ul { margin: 0 0 1.8rem; padding: 0; list-style: none; }
+.docs-sidebar li { margin-bottom: 0.15rem; }
+.docs-sidebar a {
+ display: block;
+ padding: 0.3rem 0.7rem;
+ border-left: 1px solid var(--line);
+ color: var(--quiet);
+ font-size: 0.78rem;
+}
+.docs-sidebar a:hover { color: var(--ink); border-left-color: var(--line-strong); }
+.docs-sidebar a[aria-current='page'] {
+ color: var(--accent);
+ border-left-color: var(--accent);
+}
+
+.docs-article { min-width: 0; }
+.docs-article h1 {
+ margin: 0 0 0.85rem;
+ font-size: clamp(1.7rem, 3.5vw, 2.25rem);
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ line-height: 1.1;
+}
+.docs-article .lede {
+ margin: 0 0 2.25rem;
+ color: var(--muted);
+ font-size: 0.92rem;
+ line-height: 1.65;
+}
+.docs-article h2 {
+ margin: 2.75rem 0 0.9rem;
+ padding-top: 1.5rem;
+ border-top: 1px solid var(--line);
+ font-size: 1.15rem;
+ font-weight: 600;
+ letter-spacing: -0.01em;
+}
+.docs-article h3 {
+ margin: 1.9rem 0 0.5rem;
+ font-size: 0.95rem;
+ font-weight: 600;
+}
+.docs-article p, .docs-article li { color: var(--ink-2); font-size: 0.85rem; line-height: 1.7; }
+.docs-article ul, .docs-article ol { padding-left: 1.4rem; }
+.docs-article a:not(.button) { color: var(--accent); }
+.docs-article a:not(.button):hover { color: var(--accent-strong); }
+
+.anchor-link {
+ margin-left: 0.45rem;
+ color: var(--faint);
+ font-weight: 400;
+ opacity: 0;
+ transition: opacity 0.15s ease;
+}
+h2:hover .anchor-link, h3:hover .anchor-link { opacity: 1; }
+.anchor-link:hover { color: var(--accent); }
+
+.breadcrumbs {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.45rem;
+ margin-bottom: 1.5rem;
+ color: var(--faint);
+ font-size: 0.72rem;
+}
+.breadcrumbs a { color: var(--quiet); }
+.breadcrumbs a:hover { color: var(--ink); }
+
+.docs-toc nav { position: sticky; top: calc(var(--nav-h) + 2rem); }
+.docs-toc h4 {
+ margin: 0 0 0.7rem;
+ color: var(--muted);
+ font-size: 0.68rem;
+ font-weight: 500;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+}
+.docs-toc ul { margin: 0; padding: 0; list-style: none; max-height: calc(100vh - var(--nav-h) - 8rem); overflow-y: auto; }
+.docs-toc li { margin-bottom: 0.1rem; }
+.docs-toc a {
+ display: block;
+ padding: 0.22rem 0.7rem;
+ border-left: 1px solid var(--line);
+ color: var(--quiet);
+ font-size: 0.72rem;
+ line-height: 1.45;
+}
+.docs-toc a.depth-3 { padding-left: 1.4rem; }
+.docs-toc a:hover { color: var(--ink); }
+.docs-toc a.active { color: var(--accent); border-left-color: var(--accent); }
+
+.docs-pager {
+ display: flex;
+ justify-content: space-between;
+ gap: 1rem;
+ margin-top: 3.5rem;
+ padding-top: 1.5rem;
+ border-top: 1px solid var(--line);
+}
+.docs-pager a {
+ display: block;
+ max-width: 48%;
+ color: var(--muted);
+ font-size: 0.78rem;
+}
+.docs-pager a:hover { color: var(--ink); }
+.docs-pager .label { display: block; color: var(--faint); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.3rem; }
+
+/* command reference entries */
+.cmd-entry h3 {
+ display: flex;
+ align-items: baseline;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+}
+.cmd-entry h3 code { font-size: 0.85rem; }
+.cmd-entry .aliases { color: var(--faint); font-size: 0.7rem; font-weight: 400; }
+.cmd-entry p { margin: 0.35rem 0 0; }
+
+/* ── animations ───────────────────────────────────────────────────────── */
+
+.fade-up {
+ opacity: 0;
+ transform: translateY(20px);
+ animation: fade-up 0.7s ease forwards;
+}
+.fade-up-1 { animation-delay: 0.1s; }
+.fade-up-2 { animation-delay: 0.2s; }
+.fade-up-3 { animation-delay: 0.3s; }
+.fade-up-4 { animation-delay: 0.4s; }
+.fade-up-5 { animation-delay: 0.5s; }
+
+@keyframes fade-up {
+ to { opacity: 1; transform: translateY(0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ *, *::before, *::after {
+ scroll-behavior: auto !important;
+ animation-duration: 0.001ms !important;
+ animation-delay: 0s !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.001ms !important;
+ }
+ .fade-up { opacity: 1; transform: none; }
+}
diff --git a/web/src/vite-env.d.ts b/web/src/vite-env.d.ts
deleted file mode 100644
index 5894ae0b6..000000000
--- a/web/src/vite-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-declare module '*.css'
diff --git a/web/tsconfig.json b/web/tsconfig.json
index 728549628..7feccb219 100644
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -1,20 +1,5 @@
{
- "compilerOptions": {
- "target": "ES2023",
- "useDefineForClassFields": true,
- "lib": ["DOM", "DOM.Iterable", "ES2023"],
- "allowJs": false,
- "skipLibCheck": true,
- "esModuleInterop": true,
- "allowSyntheticDefaultImports": true,
- "strict": true,
- "forceConsistentCasingInFileNames": true,
- "module": "ESNext",
- "moduleResolution": "Bundler",
- "resolveJsonModule": true,
- "isolatedModules": true,
- "noEmit": true,
- "jsx": "react-jsx"
- },
- "include": ["src", "vite.config.ts"]
+ "extends": "astro/tsconfigs/strict",
+ "include": [".astro/types.d.ts", "src/**/*"],
+ "exclude": ["dist"]
}
diff --git a/web/vite.config.ts b/web/vite.config.ts
deleted file mode 100644
index 9ffcc6757..000000000
--- a/web/vite.config.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-
-export default defineConfig({
- plugins: [react()],
-})
+