mirror of
https://github.com/harivansh-afk/sandbox-agent.git
synced 2026-04-17 12:04:15 +00:00
chore(site): updated graph and wording
This commit is contained in:
Nicholas Kissel
parent
f79019e786
commit
65513f9086
9 changed files with 274 additions and 451 deletions
|
|
@ -1,124 +1,31 @@
|
|||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { X, Check } from 'lucide-react';
|
||||
|
||||
const frictions = [
|
||||
{
|
||||
number: '01',
|
||||
title: 'Fragmented Agent Scaffolds',
|
||||
description:
|
||||
'Claude Code, Codex, OpenCode, and Amp each have proprietary APIs. Swapping agents means rewriting your entire integration.',
|
||||
solution: 'Unified control plane for all agent engines.',
|
||||
visual: (
|
||||
<div className="mt-6 space-y-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-px flex-1 bg-gradient-to-r from-red-500/50 to-transparent" />
|
||||
<span className="text-xs text-zinc-500">Claude Bridge</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-px flex-1 bg-gradient-to-r from-red-500/50 to-transparent" />
|
||||
<span className="text-xs text-zinc-500">Amp Bridge</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 mt-4">
|
||||
<div className="h-px flex-1 bg-gradient-to-r from-green-500 to-green-500/20" />
|
||||
<span className="text-xs text-green-400 font-medium">API</span>
|
||||
</div>
|
||||
<div className="mt-4 bg-black/60 rounded-lg border border-white/5 p-3 font-mono text-xs">
|
||||
<div className="text-zinc-500">
|
||||
<span className="text-zinc-600">01</span>{' '}
|
||||
<span className="text-purple-400">agent</span>
|
||||
<span className="text-zinc-400">.</span>
|
||||
<span className="text-blue-400">spawn</span>
|
||||
<span className="text-zinc-400">(</span>
|
||||
<span className="text-green-400">"claude-code"</span>
|
||||
<span className="text-zinc-400">)</span>
|
||||
</div>
|
||||
<div className="text-zinc-500">
|
||||
<span className="text-zinc-600">02</span>{' '}
|
||||
<span className="text-purple-400">agent</span>
|
||||
<span className="text-zinc-400">.</span>
|
||||
<span className="text-blue-400">spawn</span>
|
||||
<span className="text-zinc-400">(</span>
|
||||
<span className="text-green-400">"amp"</span>
|
||||
<span className="text-zinc-400">)</span>
|
||||
</div>
|
||||
<div className="text-zinc-600 mt-2">// Exactly same methods</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
title: 'Coding Agents Need Sandboxes',
|
||||
problem:
|
||||
"You can't let AI execute arbitrary code on your production servers. Coding agents need isolated environments, but existing SDKs assume local execution.",
|
||||
solution: 'A server that runs inside the sandbox and exposes HTTP/SSE.',
|
||||
accentColor: 'orange',
|
||||
},
|
||||
{
|
||||
number: '02',
|
||||
title: 'Deploy Anywhere',
|
||||
description:
|
||||
"Whether you're running locally, in Docker, or with E2B, Daytona, and Vercel — you shouldn't need different integration code for each.",
|
||||
solution: 'One SDK, any environment. Deploy locally or to any cloud provider with a single config change.',
|
||||
visual: (
|
||||
<div className="mt-6">
|
||||
<div className="flex items-center justify-between gap-2 text-xs">
|
||||
<div className="flex-1 text-center py-2 px-3 rounded-lg bg-zinc-800/50 border border-white/5 text-zinc-400">
|
||||
E2B
|
||||
</div>
|
||||
<div className="text-zinc-500">+</div>
|
||||
<div className="flex-1 text-center py-2 px-3 rounded-lg bg-zinc-800/50 border border-white/5 text-zinc-400">
|
||||
Daytona
|
||||
</div>
|
||||
<div className="text-zinc-500">+</div>
|
||||
<div className="flex-1 text-center py-2 px-3 rounded-lg bg-zinc-800/50 border border-white/5 text-zinc-400">
|
||||
Vercel
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 bg-black/60 rounded-lg border border-white/5 p-3 font-mono text-xs">
|
||||
<div className="text-zinc-500 mb-1"># Works with all providers</div>
|
||||
<div>
|
||||
<span className="text-green-400">SANDBOX_PROVIDER</span>
|
||||
<span className="text-zinc-400">=</span>
|
||||
<span className="text-amber-400">"daytona"</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
title: 'Every Coding Agent is Different',
|
||||
problem:
|
||||
'Claude Code, Codex, OpenCode, and Amp each have proprietary APIs, event formats, and behaviors. Swapping coding agents means rewriting your entire integration.',
|
||||
solution: 'One HTTP API. Write your code once, swap coding agents with a config change.',
|
||||
accentColor: 'purple',
|
||||
},
|
||||
{
|
||||
number: '03',
|
||||
title: 'Transient State',
|
||||
description:
|
||||
'Transcripts and session data are usually lost when the agent process ends. Debugging and replay become impossible.',
|
||||
solution: 'Standardized session JSON. Stream events to your own storage in real-time.',
|
||||
visual: (
|
||||
<div className="mt-6">
|
||||
<div className="bg-black/60 rounded-lg border border-white/5 p-3 font-mono text-xs overflow-hidden">
|
||||
<div className="text-zinc-500 mb-2"># Session persisted automatically</div>
|
||||
<div className="space-y-1">
|
||||
<div>
|
||||
<span className="text-blue-400">"events"</span>
|
||||
<span className="text-zinc-400">: [</span>
|
||||
</div>
|
||||
<div className="pl-4">
|
||||
<span className="text-zinc-400">{'{ '}</span>
|
||||
<span className="text-blue-400">"type"</span>
|
||||
<span className="text-zinc-400">: </span>
|
||||
<span className="text-green-400">"tool_call"</span>
|
||||
<span className="text-zinc-400">{' }'}</span>
|
||||
</div>
|
||||
<div className="pl-4">
|
||||
<span className="text-zinc-400">{'{ '}</span>
|
||||
<span className="text-blue-400">"type"</span>
|
||||
<span className="text-zinc-400">: </span>
|
||||
<span className="text-green-400">"message"</span>
|
||||
<span className="text-zinc-400">{' }'}</span>
|
||||
</div>
|
||||
<div className="text-zinc-400">]</div>
|
||||
</div>
|
||||
<div className="mt-3 flex items-center gap-2 text-zinc-500">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" />
|
||||
<span>Streaming to Rivet Actors</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
title: 'Sessions Are Ephemeral',
|
||||
problem:
|
||||
'Coding agent transcripts live in the sandbox. When the process ends, you lose everything. Debugging and replay become impossible.',
|
||||
solution: 'Universal event schema streams to your storage. Persist to Postgres or Rivet, replay later, audit everything.',
|
||||
accentColor: 'blue',
|
||||
},
|
||||
];
|
||||
|
|
@ -156,11 +63,10 @@ export function PainPoints() {
|
|||
className="mb-16"
|
||||
>
|
||||
<h2 className="mb-6 text-3xl font-medium tracking-tight text-white md:text-5xl">
|
||||
Integrating coding agents is hard.
|
||||
Running coding agents remotely is hard.
|
||||
</h2>
|
||||
<p className="max-w-2xl text-lg leading-relaxed text-zinc-400">
|
||||
Every agent has its own API, event format, and session model. Swapping agents means
|
||||
rewriting your entire integration.
|
||||
Coding agents need sandboxes, but existing SDKs assume local execution. SSH breaks, CLI wrappers are fragile, and building from scratch means reimplementing everything for each coding agent.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
|
|
@ -192,20 +98,31 @@ export function PainPoints() {
|
|||
className={`pointer-events-none absolute left-0 top-0 z-20 h-24 w-24 rounded-tl-2xl border-l border-t ${styles.border} opacity-0 transition-opacity duration-500 [mask-image:linear-gradient(135deg,black_0%,transparent_50%)] group-hover:opacity-100`}
|
||||
/>
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="relative z-10 flex flex-col h-full">
|
||||
{/* Title */}
|
||||
<h3 className="mb-3 text-xl font-medium text-white">{friction.title}</h3>
|
||||
<h3 className="mb-4 text-xl font-medium text-white">{friction.title}</h3>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-sm leading-relaxed text-zinc-500">{friction.description}</p>
|
||||
|
||||
{/* Solution */}
|
||||
<div className="mt-4 border-t border-white/5 pt-4">
|
||||
<p className="text-sm font-medium text-zinc-300">{friction.solution}</p>
|
||||
{/* Problem */}
|
||||
<div className="mb-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<div className="flex items-center justify-center w-5 h-5 rounded-full bg-red-500/20">
|
||||
<X className="w-3 h-3 text-red-400" />
|
||||
</div>
|
||||
<span className="text-xs font-semibold uppercase tracking-wider text-red-400">Problem</span>
|
||||
</div>
|
||||
<p className="text-sm leading-relaxed text-zinc-500">{friction.problem}</p>
|
||||
</div>
|
||||
|
||||
{/* Visual */}
|
||||
{friction.visual}
|
||||
{/* Solution */}
|
||||
<div className="mt-auto pt-4 border-t border-white/5">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<div className="flex items-center justify-center w-5 h-5 rounded-full bg-green-500/20">
|
||||
<Check className="w-3 h-3 text-green-400" />
|
||||
</div>
|
||||
<span className="text-xs font-semibold uppercase tracking-wider text-green-400">Solution</span>
|
||||
</div>
|
||||
<p className="text-sm font-medium leading-relaxed text-zinc-300">{friction.solution}</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue