diff --git a/README.md b/README.md index 57a4cf5..728116e 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@

Open Agent SDK

-

Minimal, production-ready TypeScript SDK for building tool-using AI agents.

+

Open agent runtime and first-party CLI for tool-using AI workflows.

License: MIT @@ -12,7 +12,9 @@

-Build agents with a ReAct loop, tool permissions, hooks, subagents, session persistence, and multi-provider support. +Open Agent SDK gives you a ready-to-run terminal agent via `oas` and an embeddable TypeScript runtime for building your own agent products. + +The default story is product-first: start with the CLI when you want an end-to-end agent surface, then drop to the SDK when you need custom UX, policies, or infrastructure. For Codex OAuth, run `codex login` once, then use `provider: 'codex'` in the SDK or `oas --provider codex` in the CLI. The SDK will reuse your local Codex login state from `~/.codex/auth.json`. @@ -44,9 +46,10 @@ More runnable demos: [Demo Gallery](./DEMO_GALLERY.md). ## Why Open Agent SDK +- Product-shaped entry point: `oas` gives you a first-party terminal agent, while the SDK exposes the same runtime for embedding. - Production safety controls: permission modes (`default`, `plan`, `acceptEdits`, `bypassPermissions`) and per-tool gating via `canUseTool`. - Agent extensibility core: hooks, skills, subagents, and MCP-compatible tool integration. -- Reproducible evaluation path: local SWE-bench and Terminal-bench harnesses in `benchmark/`. +- Reproducible evaluation path: benchmark the CLI like an agent product and reuse the runtime in custom apps. See details in: - [API Reference](./docs/api-reference.md) @@ -56,6 +59,7 @@ See details in: ## Concepts +- `CLI surface`: `oas` runs the same core runtime exposed by the SDK. - `Agent loop`: multi-turn ReAct with tool execution. - `Tool permissions`: explicit allow/deny policy hooks. - `Hooks`: lifecycle/tool events for observability and control. @@ -73,12 +77,17 @@ See details in: ## Evaluation - SWE-bench Lite smoke/batch runners: `benchmark/swebench/scripts/` -- Terminal-bench Harbor adapter and runbook: `benchmark/terminalbench/` +- Terminal-bench Harbor adapter and runbook for the CLI agent surface: `benchmark/terminalbench/` - Result summarization scripts and artifacts: see [BENCHMARKS.md](./BENCHMARKS.md) ## Integrations -Current provider support in core SDK: +Primary surfaces: + +- `oas` first-party CLI +- TypeScript SDK API + +Current provider support in the runtime: - Codex OAuth - OpenAI @@ -96,7 +105,7 @@ Ecosystem integrations: - Docs: https://docs.openagentsdk.dev - GitHub: https://github.com/OasAIStudio/open-agent-sdk - [Introduction](./docs/introduction.md) -- [Comparison with Claude Agent SDK](./docs/claude-agent-sdk-comparison.md) +- [Migration and Claude Agent SDK comparison](./docs/claude-agent-sdk-comparison.md) ## Monorepo Layout diff --git a/docs/branding/pixel-banner-option23.svg b/docs/branding/pixel-banner-option23.svg index 53ec114..4973489 100644 --- a/docs/branding/pixel-banner-option23.svg +++ b/docs/branding/pixel-banner-option23.svg @@ -228,7 +228,7 @@ - An open-source alternative to Claude Agent SDK + First-party CLI, open runtime, embeddable SDK > Initializing Agent Loop... โ–ˆ diff --git a/docs/branding/pixel-banner-option24.svg b/docs/branding/pixel-banner-option24.svg index fe734e8..bb58509 100644 --- a/docs/branding/pixel-banner-option24.svg +++ b/docs/branding/pixel-banner-option24.svg @@ -228,7 +228,7 @@ - An open-source alternative to Claude Agent SDK + First-party CLI, open runtime, embeddable SDK > Initializing Agent Loop... โ–ˆ diff --git a/docs/branding/pixel-banner.svg b/docs/branding/pixel-banner.svg index 53ec114..4973489 100644 --- a/docs/branding/pixel-banner.svg +++ b/docs/branding/pixel-banner.svg @@ -228,7 +228,7 @@ - An open-source alternative to Claude Agent SDK + First-party CLI, open runtime, embeddable SDK > Initializing Agent Loop... โ–ˆ diff --git a/docs/claude-agent-sdk-comparison.md b/docs/claude-agent-sdk-comparison.md index bd79922..e42f7e3 100644 --- a/docs/claude-agent-sdk-comparison.md +++ b/docs/claude-agent-sdk-comparison.md @@ -1,17 +1,19 @@ # Open Agent SDK vs Claude Agent SDK -This document summarizes the current comparison at the time of writing for the `0.1.0-alpha.x` line. +This page is for migration and market context, not the primary product overview. At the `0.1.0-alpha.x` line, Open Agent SDK is positioned as an open agent runtime with a first-party CLI (`oas`) and an embeddable TypeScript SDK. ## Scope - Focuses on SDK capabilities relevant to application developers - Reflects the current implementation in this repository - Does not attempt to evaluate model quality or vendor service quality +- Should be read as migration guidance, not as a drop-in parity claim ## Feature Comparison | Area | Open Agent SDK | Claude Agent SDK | |------|----------------|------------------| +| Primary entry point | First-party CLI + embeddable TypeScript runtime | Vendor-maintained SDK | | Source model | Open source (MIT) | Closed source | | Provider strategy | Multi-provider (OpenAI / Google / Anthropic) | Primarily Anthropic ecosystem | | Agent loop model | Aligned: ReAct-style loop with tool execution | ReAct-style loop with tool execution | @@ -25,6 +27,7 @@ This document summarizes the current comparison at the time of writing for the ` ## Compatibility Notes - Open Agent SDK intentionally adopts familiar concepts from Claude Agent SDK: sessions, tool-first execution, permission gating, and extensibility hooks. +- The main product story is different: Open Agent SDK centers a first-party agent surface (`oas`) and exposes the runtime underneath. - API-level parity is not guaranteed for every release. Treat compatibility as directional, not binary. - For migration-critical scenarios, validate specific APIs in your target version before rollout. @@ -32,6 +35,7 @@ This document summarizes the current comparison at the time of writing for the ` Open Agent SDK is best suited for teams that need: +- A ready-to-run terminal agent plus an embeddable runtime - Source-level control and customizability - Flexibility to run across providers - A transparent agent runtime that can be adapted to internal infrastructure diff --git a/docs/introduction.md b/docs/introduction.md index ee732ca..39de03e 100644 --- a/docs/introduction.md +++ b/docs/introduction.md @@ -4,10 +4,20 @@ ## Overview -Open Agent SDK is an open-source TypeScript framework for building AI agents. It provides a developer experience similar to Claude Agent SDK but with full transparency and no vendor lock-in. +Open Agent SDK is an open agent runtime for tool-using workflows. It ships with a first-party terminal agent, `oas`, and exposes the same core as a TypeScript SDK when you need to embed, customize, or self-host more of the runtime. + +## Primary Surfaces + +- **`oas` CLI**: the default entry point for running and benchmarking a complete terminal agent +- **TypeScript SDK**: the embeddable runtime surface for custom apps, automation, and internal products ## What Makes It Different? +### ๐Ÿงญ Product-First Shape +- Start with a working terminal agent instead of only a low-level library +- Reuse the same runtime beneath the CLI in your own product surfaces +- Keep benchmark and product messaging centered on an actual agent surface + ### ๐Ÿ”“ Open Source & Transparent - Full source code visibility - MIT License @@ -280,10 +290,13 @@ const session = createSession({ }); ``` -## Comparison with Claude Agent SDK +## Comparison and Migration Context + +Claude Agent SDK is a useful migration reference for this project, but it is not the primary way to understand Open Agent SDK. The main product shape here is `oas` plus an embeddable runtime. | Feature | Open Agent SDK | Claude Agent SDK | |---------|---------------|------------------| +| Primary Surface | First-party CLI + embeddable runtime | Vendor-maintained SDK | | Open Source | โœ… Yes | โŒ No | | Multi-Provider | โœ… OpenAI/Gemini/Anthropic | โŒ Anthropic only | | Agent Loop | โœ… | โœ… | @@ -299,12 +312,17 @@ const session = createSession({ ## Getting Started -1. **Installation** +1. **Choose your entry point** + ```bash + npx open-agent-sdk@alpha init my-agent + ``` + +2. **Install the SDK when you want to embed the runtime** ```bash npm install open-agent-sdk@alpha ``` -2. **Quick Example** +3. **SDK Example** ```bash codex login ``` @@ -320,7 +338,7 @@ const session = createSession({ console.log(result.result); ``` -3. **Next Steps** +4. **Next Steps** - Check out the [API Reference](./api-reference.md) - Explore [examples](../examples/) - Join the [community discussions](https://github.com/Octane0411/open-agent-sdk/discussions) diff --git a/package.json b/package.json index b353365..ed7028a 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "open-agent-sdk-monorepo", "version": "0.1.0-alpha.1", "private": true, - "description": "Open source agent SDK compatible with Claude Agent SDK (monorepo root)", + "description": "Open agent runtime monorepo with a first-party CLI and TypeScript SDK", "scripts": { "build": "cd packages/core && bun run build", "docs:dev": "cd packages/docs && bun run dev", diff --git a/packages/cli/package.json b/packages/cli/package.json index 97b2c01..4b670c7 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -1,7 +1,7 @@ { "name": "@open-agent-sdk/cli", "version": "0.1.0-alpha.1", - "description": "CLI agent built on open-agent-sdk", + "description": "First-party CLI for the Open Agent SDK runtime", "bin": { "oas": "./src/index.ts" }, diff --git a/packages/core/package.json b/packages/core/package.json index e5ea804..842b47f 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,7 +1,7 @@ { "name": "open-agent-sdk", "version": "0.1.0-alpha.1", - "description": "Open source agent SDK compatible with Claude Agent SDK", + "description": "Open agent runtime and TypeScript SDK for tool-using AI agents", "main": "dist/index.js", "types": "dist/index.d.ts", "bin": { diff --git a/packages/docs/src/content/docs/getting-started/quickstart.mdx b/packages/docs/src/content/docs/getting-started/quickstart.mdx index 7fbf1c6..be96c10 100644 --- a/packages/docs/src/content/docs/getting-started/quickstart.mdx +++ b/packages/docs/src/content/docs/getting-started/quickstart.mdx @@ -1,8 +1,19 @@ --- title: Quickstart -description: Run your first prompt and session with Open Agent SDK. +description: Start with the CLI, then embed the runtime through the SDK. --- +## CLI first + +```bash +npx open-agent-sdk@alpha init my-agent +cd my-agent +npm install +npm run dev +``` + +Use the scaffolded project when you want a ready-to-run agent surface first. + ## One-shot prompt Run `codex login` once first if you want to use Codex OAuth. diff --git a/packages/docs/src/content/docs/index.mdx b/packages/docs/src/content/docs/index.mdx index 7446767..1e4aaa1 100644 --- a/packages/docs/src/content/docs/index.mdx +++ b/packages/docs/src/content/docs/index.mdx @@ -1,14 +1,15 @@ --- title: Open Agent SDK Documentation -description: Open-source docs for Claude Agent SDK-style APIs, TypeScript integration, and multi-provider agent workflows. +description: Docs for the Open Agent SDK runtime, first-party CLI, and TypeScript APIs for multi-provider agent workflows. --- -Open Agent SDK is an open-source TypeScript agent SDK implemented around Claude Agent SDK API patterns, with broader provider and extension options for production teams. +Open Agent SDK is an open agent runtime with two public entry points: the first-party `oas` CLI for complete terminal-agent workflows and the TypeScript SDK for embedding the same runtime in your own product. Use this documentation to move from install to production-ready workflows: -- Learn the runtime model and API surface quickly +- Learn the CLI and runtime model quickly - Implement tools, sessions, permissions, and hooks with confidence +- Embed or extend the runtime without rewriting agent logic - Migrate Claude Agent SDK-style code with minimal friction ## Quick links @@ -23,8 +24,9 @@ Use this documentation to move from install to production-ready workflows: ## Why teams adopt Open Agent SDK +- **Product-shaped entry points:** Start with `oas`, then embed the same runtime through the SDK - **Open-source by default:** MIT-licensed core and transparent implementation -- **Claude-style API ergonomics:** Familiar mental model and aligned workflow patterns +- **Migration-friendly API ergonomics:** Familiar mental model and aligned workflow patterns - **Provider flexibility:** Integrate OpenAI, Gemini, and Anthropic without architecture rewrites - **Production controls:** First-class tooling for sessions, permissions, hooks, and MCP diff --git a/packages/web/app/globals.css b/packages/web/app/globals.css index a38d495..4058c87 100644 --- a/packages/web/app/globals.css +++ b/packages/web/app/globals.css @@ -1,10 +1,18 @@ :root { - --bg-0: #06080f; - --bg-1: #0a1020; - --line: #26324f; - --text-0: #eef2ff; - --text-1: #b3bedb; - --accent: #84a9ff; + --surface-default: #ffffff; + --surface-muted: #f6f8fa; + --border-default: #d0d7de; + --border-strong: #8c959f; + --text-primary: #1f2328; + --text-secondary: #59636e; + --text-link: #0969da; + --text-link-hover: #0550ae; + --button-primary: #24292f; + --button-primary-hover: #32383f; + --shadow-subtle: 0 1px 0 rgba(31, 35, 40, 0.04); + --shadow-button: + 0 1px 0 rgba(31, 35, 40, 0.04), + inset 0 1px 0 rgba(255, 255, 255, 0.25); } * { @@ -15,312 +23,393 @@ html, body { margin: 0; min-height: 100%; - font-family: 'Segoe UI', 'SF Pro Display', 'Avenir Next', Arial, sans-serif; - color: var(--text-0); - background: - radial-gradient(900px 500px at 20% -10%, rgba(61, 99, 202, 0.35), transparent 64%), - radial-gradient(900px 560px at 92% 0%, rgba(62, 115, 228, 0.22), transparent 58%), - linear-gradient(180deg, var(--bg-1), var(--bg-0)); + background: var(--surface-default); +} + +body { + color: var(--text-primary); + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; } a { color: inherit; } -.shell { - width: min(1120px, 92vw); - margin: 0 auto; - padding: 28px 0 80px; - position: relative; +code { + font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; } -.aurora { - position: absolute; - right: -140px; - top: -110px; - width: 400px; - height: 400px; - pointer-events: none; - background: radial-gradient(circle, rgba(132, 169, 255, 0.35) 0%, transparent 72%); - filter: blur(10px); +.home { + min-height: 100vh; + background: var(--surface-default); +} + +.home-shell { + width: min(920px, calc(100vw - 32px)); + margin: 0 auto; + padding: 24px 0 56px; } -.topbar { +.home-header { display: flex; + align-items: center; justify-content: space-between; + gap: 20px; + padding-bottom: 14px; + border-bottom: 1px solid var(--border-default); +} + +.brand-link { + display: inline-flex; align-items: center; - border: 1px solid var(--line); - padding: 12px 14px; - background: rgba(8, 12, 22, 0.7); - backdrop-filter: blur(10px); + gap: 10px; + color: var(--text-primary); + text-decoration: none; + font-size: 13px; + font-weight: 600; + letter-spacing: -0.01em; } -.brand { - font-weight: 700; - letter-spacing: 0.02em; +.brand-mark { + width: 16px; + height: 16px; + border: 1px solid var(--border-default); + border-radius: 4px; + background: linear-gradient(180deg, #ffffff, #f6f8fa); } -.nav { +.home-nav { display: flex; + flex-wrap: wrap; gap: 16px; } -.nav a { - font-size: 14px; - color: var(--text-1); +.home-nav a, +.home-footer-nav a { + color: var(--text-secondary); text-decoration: none; + font-size: 13px; } -.hero { - margin-top: 72px; - max-width: 760px; +.home-nav a:hover, +.home-footer-nav a:hover, +.home-link-row:hover h2, +.list-item h2 a:hover { + color: var(--text-link-hover); } -.eyebrow { - margin: 0; +.home-hero { + padding: 76px 0 42px; +} + +.home-kicker { + margin: 0 0 14px; + color: var(--text-secondary); font-size: 12px; + font-weight: 600; + letter-spacing: 0.06em; text-transform: uppercase; - letter-spacing: 0.08em; - font-weight: 700; - color: var(--accent); } -.hero h1 { - margin: 14px 0 10px; - font-size: clamp(38px, 6vw, 74px); - line-height: 0.95; +.home-hero h1 { + margin: 0; + display: flex; + flex-direction: column; + gap: 8px; + max-width: 820px; + font-size: clamp(42px, 8vw, 72px); + font-weight: 600; + line-height: 0.98; + letter-spacing: -0.04em; +} + +.home-title-subtle { + color: var(--text-secondary); + font-size: clamp(26px, 4.7vw, 42px); + font-weight: 500; letter-spacing: -0.03em; } -.hero p { - margin: 0; - color: var(--text-1); - font-size: clamp(16px, 2.2vw, 20px); - line-height: 1.5; +.home-lede { + margin: 24px 0 0; + max-width: 620px; + color: var(--text-secondary); + font-size: clamp(18px, 2vw, 20px); + line-height: 1.65; } -.hero-cta { - margin-top: 24px; +.home-actions { display: flex; flex-wrap: wrap; - gap: 10px; + gap: 12px; + margin-top: 28px; } -.btn { +.button { display: inline-flex; align-items: center; justify-content: center; - border: 1px solid var(--line); - text-decoration: none; - font-size: 14px; + min-height: 36px; + padding: 0 14px; + border: 1px solid var(--border-default); + border-radius: 6px; + font-size: 13px; font-weight: 600; - padding: 10px 14px; - transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; + letter-spacing: -0.01em; + text-decoration: none; + box-shadow: var(--shadow-button); + transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; } -.btn:hover { - transform: translateY(-1px); - border-color: #3e5486; +.button:hover { + border-color: var(--border-strong); } -.btn-primary { - color: #081020; - background: linear-gradient(180deg, #a6beff, #86a9ff); +.button-primary { + border-color: var(--button-primary); + color: #ffffff; + background: linear-gradient(180deg, #2f363d, var(--button-primary)); } -.btn-secondary { - color: var(--text-0); - background: rgba(12, 18, 31, 0.82); +.button-primary:hover { + border-color: var(--button-primary-hover); + background: linear-gradient(180deg, #3a4148, var(--button-primary-hover)); } -.portal-grid { - margin-top: 44px; - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 14px; +.button-secondary { + background: linear-gradient(180deg, #ffffff, #f6f8fa); + color: var(--text-primary); } -.portal-card { - text-decoration: none; - border: 1px solid var(--line); - background: linear-gradient(180deg, rgba(14, 20, 36, 0.96), rgba(9, 13, 25, 0.94)); - padding: 20px; - min-height: 210px; - display: flex; - flex-direction: column; - gap: 10px; - transition: transform 0.2s ease, border-color 0.2s ease; -} - -.portal-card:hover { - transform: translateY(-3px); - border-color: #3e5486; +.home-command { + display: inline-flex; + align-items: center; + gap: 12px; + max-width: 100%; + margin-top: 18px; + padding: 12px 14px; + border: 1px solid var(--border-default); + border-radius: 8px; + background: var(--surface-muted); + box-shadow: var(--shadow-subtle); + overflow-x: auto; + white-space: nowrap; } -.portal-card h2 { - margin: 0; - font-size: 26px; - letter-spacing: -0.02em; +.home-command-prefix { + color: var(--text-secondary); + font-size: 13px; } -.portal-card p { - margin: 0; - color: var(--text-1); - line-height: 1.5; +.home-command code { + font-size: 13px; } -.portal-card span { - margin-top: auto; - color: var(--accent); - font-size: 14px; - font-weight: 600; +.home-summary { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + border-top: 1px solid var(--border-default); + border-bottom: 1px solid var(--border-default); } -.portal-card-primary { - border-color: #405a95; +.home-summary-item { + padding: 22px 24px 22px 0; } -.faq { - margin-top: 14px; - border: 1px solid var(--line); - background: rgba(9, 13, 24, 0.72); - padding: 20px; +.home-summary-item + .home-summary-item { + padding-left: 24px; + border-left: 1px solid var(--border-default); } -.faq h2 { - margin: 0 0 10px; - font-size: 24px; - letter-spacing: -0.01em; +.home-summary-title, +.home-link-label { + margin: 0; + color: var(--text-secondary); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.07em; + text-transform: uppercase; } -.faq details { - border-top: 1px solid var(--line); - padding: 10px 0; +.home-summary-copy { + margin: 10px 0 0; + max-width: 280px; + color: var(--text-secondary); + font-size: 15px; + line-height: 1.65; } -.faq details:first-of-type { - border-top: 0; - padding-top: 0; +.home-links { + margin-top: 22px; + border-top: 1px solid var(--border-default); } -.faq summary { - cursor: pointer; - font-weight: 600; +.home-link-row { + display: flex; + align-items: center; + justify-content: space-between; + gap: 24px; + padding: 22px 0; + border-bottom: 1px solid var(--border-default); + color: inherit; + text-decoration: none; + transition: background-color 0.18s ease; } -.faq p { - margin: 8px 0 0; - color: var(--text-1); - line-height: 1.55; +.home-link-row:hover { + background: linear-gradient(180deg, rgba(246, 248, 250, 0.9), rgba(246, 248, 250, 0.9)); } -.final-cta { - margin-top: 14px; - border: 1px solid var(--line); - padding: 28px; - background: - radial-gradient(540px 220px at 88% -20%, rgba(132, 169, 255, 0.22), transparent 70%), - rgba(7, 11, 21, 0.92); +.home-link-copy h2 { + margin: 8px 0 6px; + font-size: clamp(24px, 3vw, 30px); + font-weight: 600; + letter-spacing: -0.025em; } -.final-cta h2 { +.home-link-copy p:last-child { margin: 0; - font-size: clamp(28px, 4.2vw, 42px); - letter-spacing: -0.02em; - line-height: 1.05; + max-width: 600px; + color: var(--text-secondary); + font-size: 15px; + line-height: 1.65; } -.final-cta p { - margin: 10px 0 0; - color: var(--text-1); - font-size: 18px; - line-height: 1.55; - max-width: 760px; +.home-link-action { + color: var(--text-primary); + font-size: 12px; + font-weight: 600; + white-space: nowrap; + padding: 5px 10px; + border: 1px solid var(--border-default); + border-radius: 999px; + background: var(--surface-muted); } -.site-footer { - margin-top: 12px; - padding: 14px 4px 0; +.home-footer { + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + margin-top: 28px; + padding-top: 16px; + border-top: 1px solid var(--border-default); } -.site-footer p { +.home-footer p { margin: 0; - color: #99a8cd; + color: var(--text-secondary); font-size: 13px; - line-height: 1.5; } -.site-footer a { - color: var(--text-1); - text-decoration: none; -} - -.site-footer a:hover { - color: var(--text-0); - text-decoration: underline; +.home-footer-nav { + display: flex; + flex-wrap: wrap; + gap: 16px; + font-size: 13px; } .page { - width: min(860px, 92vw); + width: min(760px, calc(100vw - 32px)); margin: 0 auto; padding: 48px 0 72px; } +.page-header { + padding-bottom: 20px; + border-bottom: 1px solid var(--border-default); +} + .page-header h1, .post h1 { margin: 0; - font-size: clamp(32px, 5vw, 52px); - letter-spacing: -0.02em; + font-size: clamp(34px, 5vw, 52px); + letter-spacing: -0.025em; } .page-header p, .list-item p, .post p { - color: var(--text-1); + color: var(--text-secondary); line-height: 1.7; } .list { display: grid; - gap: 14px; - margin-top: 28px; + gap: 12px; + margin-top: 24px; } .list-item, .post { - border: 1px solid var(--line); - background: rgba(10, 14, 27, 0.78); - padding: 18px; + padding: 20px; + border: 1px solid var(--border-default); + border-radius: 12px; + background: var(--surface-default); + box-shadow: var(--shadow-subtle); } .list-item h2 { margin: 0; font-size: 24px; + letter-spacing: -0.02em; } .list-item h2 a { + color: var(--text-primary); text-decoration: none; } time { display: inline-block; - margin-top: 6px; + margin-top: 8px; + color: var(--text-link); font-size: 12px; + font-weight: 600; + letter-spacing: 0.08em; text-transform: uppercase; - letter-spacing: 0.06em; - color: var(--accent); } -@media (max-width: 920px) { - .portal-grid { +@media (max-width: 860px) { + .home-summary { grid-template-columns: 1fr; } - .final-cta { - padding: 22px; + .home-summary-item { + padding: 20px 0; + } + + .home-summary-item + .home-summary-item { + padding-left: 0; + border-top: 1px solid var(--border-default); + border-left: 0; + } + + .home-link-row { + align-items: flex-start; + flex-direction: column; + } + + .home-footer { + align-items: flex-start; + flex-direction: column; + } +} + +@media (max-width: 640px) { + .home-shell, + .page { + width: calc(100vw - 24px); + } + + .home-header { + align-items: flex-start; + flex-direction: column; } - .hero { - margin-top: 48px; + .home-hero { + padding: 56px 0 32px; } } diff --git a/packages/web/app/page.tsx b/packages/web/app/page.tsx index f11bcae..3217cd9 100644 --- a/packages/web/app/page.tsx +++ b/packages/web/app/page.tsx @@ -14,114 +14,124 @@ const navItems = [ { href: githubUrl, label: 'GitHub', external: true } ]; +const summaryItems = [ + { + title: 'CLI surface', + description: 'Use oas to run and benchmark a complete terminal agent.' + }, + { + title: 'Runtime API', + description: 'Reuse sessions, permissions, tools, and hooks from TypeScript.' + }, + { + title: 'Provider layer', + description: 'OpenAI, Gemini, Anthropic, and Codex-oriented workflows in one core.' + } +]; + +const entryLinks = [ + { + href: docsQuickstartUrl, + label: 'Start here', + title: 'Quickstart', + description: 'Scaffold a project, run the CLI, and get to a working agent fast.', + action: 'Open' + }, + { + href: docsApiUrl, + label: 'For builders', + title: 'API reference', + description: 'Use the runtime directly when you need custom UX, policies, or infrastructure.', + action: 'Browse' + }, + { + href: docsMigrationUrl, + label: 'For migration', + title: 'Coming from Claude Agent SDK?', + description: 'Map the familiar concepts, then move to a runtime you can own end to end.', + action: 'Compare' + } +]; + export default function HomePage() { return ( -
-
); }