feat: messaging revamp
This commit is contained in:
Nik L
@@ -1,66 +1,101 @@
|
||||
import { AlertTriangle, KeyRound, FolderOpen, FileCode } from 'lucide-react'
|
||||
|
||||
const exposures = [
|
||||
{
|
||||
icon: KeyRound,
|
||||
path: '~/.ssh/',
|
||||
label: 'SSH keys',
|
||||
desc: 'Private keys, known hosts, agent configs',
|
||||
},
|
||||
{
|
||||
icon: FileCode,
|
||||
path: '.env',
|
||||
label: 'Environment secrets',
|
||||
desc: 'API keys, database URLs, auth tokens',
|
||||
},
|
||||
{
|
||||
icon: FolderOpen,
|
||||
path: '~/*',
|
||||
label: 'Full filesystem',
|
||||
desc: 'Every repo, document, and config file',
|
||||
},
|
||||
]
|
||||
import { AlertTriangle, ShieldOff } from 'lucide-react'
|
||||
|
||||
export function Problem() {
|
||||
return (
|
||||
<section className="py-24 px-6 border-t border-border/30">
|
||||
<section className="pt-24 sm:pt-32 pb-20 sm:pb-28 px-4 sm:px-6">
|
||||
<div className="mx-auto max-w-5xl">
|
||||
<div className="max-w-2xl mb-16">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<AlertTriangle className="h-4 w-4 text-primary" />
|
||||
<span className="text-xs font-sans uppercase tracking-wider text-primary font-medium">
|
||||
The problem
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="font-serif text-3xl sm:text-4xl font-semibold tracking-tight mb-4">
|
||||
Every agent inherits everything.
|
||||
{/* Section 1: Stochastic risk */}
|
||||
<div className="mb-20 sm:mb-28">
|
||||
<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-lg leading-relaxed">
|
||||
AI coding agents run as your user. They see your SSH keys, cloud tokens, env files, and
|
||||
entire home directory. The model decides what to access at runtime, guided by weights
|
||||
you didn't train, at machine speed. One wrong inference is all it takes.
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||
{exposures.map((item) => (
|
||||
<div
|
||||
key={item.path}
|
||||
className="group p-5 rounded-lg border border-border/40 bg-card/30 hover:border-destructive/30 hover:bg-destructive/[0.03] transition-all"
|
||||
>
|
||||
<item.icon className="h-5 w-5 text-muted-foreground group-hover:text-destructive/70 mb-3 transition-colors" />
|
||||
<code className="text-sm font-mono text-foreground block mb-1">{item.path}</code>
|
||||
<p className="text-xs text-muted-foreground font-sans">{item.desc}</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">
|
||||
<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.
|
||||
</p>
|
||||
<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>
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-10 p-5 rounded-lg border border-border/30 bg-card/20">
|
||||
<p className="text-sm text-muted-foreground font-serif leading-relaxed">
|
||||
<span className="text-foreground font-medium">Most setups rely on promises:</span>{' '}
|
||||
trust the model provider's policies, trust the application code, trust that the
|
||||
agent respects boundaries. Greywall replaces trust with enforcement. Constraints are
|
||||
applied at the kernel level, below anything the agent or model can circumvent.
|
||||
{/* Resolution: Verification creates trust */}
|
||||
<div className="text-center max-w-3xl mx-auto">
|
||||
<blockquote className="font-serif text-xl sm:text-2xl md:text-3xl font-semibold tracking-tight leading-snug mb-6">
|
||||
<span className="text-primary">“</span>The act of verification creates trust.<span className="text-primary">”</span>
|
||||
</blockquote>
|
||||
<p className="text-muted-foreground font-serif text-base sm:text-lg leading-relaxed max-w-2xl mx-auto">
|
||||
Greywall gives you two pillars: <span className="text-foreground font-medium">control</span> over
|
||||
what agents can reach, and <span className="text-foreground font-medium">clarity</span> into
|
||||
every operation they perform.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user