131 lines
7.6 KiB
TypeScript
131 lines
7.6 KiB
TypeScript
|
|
export function Problem() {
|
|
return (
|
|
<section className="pb-12 sm:pb-16 px-4 sm:px-6">
|
|
<div className="mx-auto max-w-5xl">
|
|
<div className="mb-12 sm:mb-16">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
|
|
{/* Without Greywall */}
|
|
<div className="flex flex-col">
|
|
<span className="text-sm font-sans uppercase tracking-[0.16em] text-red-500 font-semibold mb-3 block">
|
|
Without Greywall
|
|
</span>
|
|
<div className="code-block p-5 sm:p-6 flex-1">
|
|
<div className="mb-5">
|
|
<span className="text-xs font-mono text-muted-foreground">~/project</span>
|
|
</div>
|
|
<div className="space-y-3 font-mono text-[11px] sm:text-xs">
|
|
<div>
|
|
<span className="text-muted-foreground">$ </span>
|
|
<span className="text-greyhaven-offwhite">claude </span>
|
|
<span className="text-red-400/80">--dangerously-skip-permissions</span>
|
|
</div>
|
|
|
|
<div className="border-l-2 border-primary/40 pl-3">
|
|
<div className="text-primary font-semibold text-[11px] uppercase tracking-wider mb-1">You</div>
|
|
<div className="text-greyhaven-offwhite">add rate limiting to the API client</div>
|
|
</div>
|
|
|
|
<div className="border-l-2 border-muted-foreground/30 pl-3">
|
|
<div className="text-muted-foreground font-semibold text-[11px] uppercase tracking-wider mb-1">Agent</div>
|
|
<div className="text-muted-foreground italic">thinking...</div>
|
|
</div>
|
|
|
|
<div className="pl-4 space-y-1.5 text-muted-foreground/60">
|
|
<div><span className="text-muted-foreground/40">$ </span><span className="text-red-400/80">cat .env</span></div>
|
|
<div><span className="text-muted-foreground/40">$ </span><span className="text-red-400/80">curl -H "Authorization: Bearer sk-prod-..." https://api.stripe.com/v1/charges</span></div>
|
|
</div>
|
|
|
|
<div className="border-l-2 border-muted-foreground/30 pl-3">
|
|
<div className="text-muted-foreground font-semibold text-[11px] uppercase tracking-wider mb-1">Agent</div>
|
|
<div className="text-greyhaven-offwhite">Done! I read your .env to grab the API key and tested against the live endpoint to make sure rate limits work correctly.</div>
|
|
</div>
|
|
|
|
<div className="border-l-2 border-primary/40 pl-3">
|
|
<div className="text-primary font-semibold text-[11px] uppercase tracking-wider mb-1">You</div>
|
|
<div className="text-greyhaven-offwhite">WHAT ARE THESE CHARGES ON MY STRIPE??? (╯°□°)╯︵ ┻━┻</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p className="text-xs text-muted-foreground font-serif mt-3 leading-relaxed">
|
|
The agent read a production key from <code className="font-mono text-[11px]">.env</code> and called the live API to test its changes. The action was plausible. The boundary was missing.
|
|
</p>
|
|
</div>
|
|
|
|
{/* With Greywall */}
|
|
<div className="flex flex-col">
|
|
<span className="text-sm font-sans uppercase tracking-[0.16em] text-primary font-semibold mb-3 block">
|
|
With Greywall
|
|
</span>
|
|
<div className="code-block p-5 sm:p-6 border-primary/20 flex-1">
|
|
<div className="mb-5">
|
|
<span className="text-xs font-mono text-muted-foreground">~/project</span>
|
|
</div>
|
|
<div className="space-y-3 font-mono text-[11px] sm:text-xs">
|
|
<div>
|
|
<span className="text-muted-foreground">$ </span>
|
|
<span className="text-primary">greywall --</span>
|
|
<span className="text-greyhaven-offwhite"> claude </span>
|
|
<span className="text-primary">--dangerously-skip-permissions</span>
|
|
</div>
|
|
|
|
<div className="border-l-2 border-primary/40 pl-3">
|
|
<div className="text-primary font-semibold text-[11px] uppercase tracking-wider mb-1">You</div>
|
|
<div className="text-greyhaven-offwhite">add rate limiting to the API client</div>
|
|
</div>
|
|
|
|
<div className="border-l-2 border-muted-foreground/30 pl-3">
|
|
<div className="text-muted-foreground font-semibold text-[11px] uppercase tracking-wider mb-1">Agent</div>
|
|
<div className="text-muted-foreground italic">thinking...</div>
|
|
</div>
|
|
|
|
<div className="pl-4 space-y-1.5">
|
|
<div><span className="text-muted-foreground/40">$ </span><span className="text-muted-foreground">cat .env</span></div>
|
|
<div className="text-red-400/80 pl-4">← Operation not permitted</div>
|
|
<div><span className="text-muted-foreground/40">$ </span><span className="text-muted-foreground">curl -H "Authorization: ..." https://api.stripe.com/v1/charges</span></div>
|
|
<div className="text-red-400/80 pl-4">← Connection denied by proxy</div>
|
|
</div>
|
|
|
|
<div className="border-l-2 border-muted-foreground/30 pl-3">
|
|
<div className="text-muted-foreground font-semibold text-[11px] uppercase tracking-wider mb-1">Agent</div>
|
|
<div className="text-greyhaven-offwhite">Added rate limiting. I couldn't access .env, so I used placeholder values in the tests.</div>
|
|
</div>
|
|
|
|
<div className="border-l-2 border-primary/40 pl-3">
|
|
<div className="text-primary font-semibold text-[11px] uppercase tracking-wider mb-1">You</div>
|
|
<div className="text-greyhaven-offwhite">👍 (•̀ᴗ•́) 👍</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p className="text-xs text-muted-foreground font-serif mt-3 leading-relaxed">
|
|
The boundary holds at the OS layer, so the agent has to continue without secrets or production access.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Resolution: Verification creates trust */}
|
|
<div className="text-center max-w-3xl mx-auto">
|
|
<blockquote className="title-serif text-[22px] md:text-[28px] leading-[1.1] mb-6">
|
|
<span className="text-primary">“</span>The act of verification creates trust.<span className="text-primary">”</span>
|
|
</blockquote>
|
|
<p className="text-serif font-normal text-[15px] md:text-[16px] leading-[1.55] text-muted-foreground max-w-2xl mx-auto mb-10">
|
|
Greywall shows the attempted reads, writes, and connections as they happen, then lets you decide what stays allowed.
|
|
</p>
|
|
<div className="mx-auto max-w-3xl rounded-lg border border-border/40 overflow-hidden">
|
|
<div className="relative w-full" style={{ paddingBottom: '56.25%' }}>
|
|
<iframe
|
|
src="https://www.youtube.com/embed/u7YFVGGpPRI"
|
|
title="Greywall Demo"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
allowFullScreen
|
|
className="absolute inset-0 w-full h-full"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|