1- import { useRef } from " react" ;
2- import { motion , useInView } from " framer-motion" ;
3- import { Badge } from " @/components/ui/Badge" ;
1+ import { useRef } from ' react' ;
2+ import { motion , useInView } from ' framer-motion' ;
3+ import { Badge } from ' @/components/ui/Badge' ;
44
55const packages = [
66 {
7- name : "@ownpilot/core" ,
8- size : "~62K LOC" ,
9- files : "160+ files" ,
10- color : "border-purple-500/30 bg-purple-500/5" ,
11- badge : "bg-purple-500/10 text-purple-500" ,
12- description : "AI engine, tool framework, plugin architecture, security primitives, sandboxed code execution, AES-256-GCM encryption, tamper-evident audit, PII detection. Minimal dependencies." ,
13- modules : [ "agent/ — Multi-provider AI engine" , "agent/orchestra/ — Fan-out, race, pipeline" , "agent/tools/ — 190+ tool definitions" , "plugins/ — Isolation + marketplace" , "sandbox/ — VM, Docker, Worker threads" , "crypto/ — Zero-dep AES-256-GCM" , "privacy/ — PII detection (15+ types)" ] ,
7+ name : '@ownpilot/core' ,
8+ size : '~62K LOC' ,
9+ files : '160+ files' ,
10+ color : 'border-purple-500/30 bg-purple-500/5' ,
11+ badge : 'bg-purple-500/10 text-purple-500' ,
12+ description :
13+ 'AI engine, tool framework, plugin architecture, security primitives, sandboxed code execution, AES-256-GCM encryption, tamper-evident audit, PII detection. Minimal dependencies.' ,
14+ modules : [
15+ 'agent/ — Multi-provider AI engine' ,
16+ 'agent/orchestra/ — Fan-out, race, pipeline' ,
17+ 'agent/tools/ — 190+ tool definitions' ,
18+ 'plugins/ — Isolation + marketplace' ,
19+ 'sandbox/ — VM, Docker, Worker threads' ,
20+ 'crypto/ — Zero-dep AES-256-GCM' ,
21+ 'privacy/ — PII detection (15+ types)' ,
22+ ] ,
1423 } ,
1524 {
16- name : "@ownpilot/gateway" ,
17- size : "~76K LOC" ,
18- files : "389 test files" ,
19- color : "border-blue-500/30 bg-blue-500/5" ,
20- badge : "bg-blue-500/10 text-blue-500" ,
21- description : "Hono HTTP API server. Routes, services, DB repositories, agent runners, WebSocket, channels (Telegram + WhatsApp), MCP client/server, plugin init, triggers." ,
22- modules : [ "routes/ — 55+ route modules" , "services/ — 60+ business services" , "db/repositories/ — 45+ repos" , "channels/ — Telegram + WhatsApp" , "services/workflow/ — 23 node executors" , "services/soul-heartbeat-service.ts" , "tools/ — CLI, edge, browser, coding" ] ,
25+ name : '@ownpilot/gateway' ,
26+ size : '~76K LOC' ,
27+ files : '389 test files' ,
28+ color : 'border-blue-500/30 bg-blue-500/5' ,
29+ badge : 'bg-blue-500/10 text-blue-500' ,
30+ description :
31+ 'Hono HTTP API server. Routes, services, DB repositories, agent runners, WebSocket, channels (Telegram + WhatsApp), MCP client/server, plugin init, triggers.' ,
32+ modules : [
33+ 'routes/ — 55+ route modules' ,
34+ 'services/ — 60+ business services' ,
35+ 'db/repositories/ — 45+ repos' ,
36+ 'channels/ — Telegram + WhatsApp' ,
37+ 'services/workflow/ — 23 node executors' ,
38+ 'services/soul-heartbeat-service.ts' ,
39+ 'tools/ — CLI, edge, browser, coding' ,
40+ ] ,
2341 } ,
2442 {
25- name : "@ownpilot/ui" ,
26- size : "~40K LOC" ,
27- files : "57+ pages" ,
28- color : "border-emerald-500/30 bg-emerald-500/5" ,
29- badge : "bg-emerald-500/10 text-emerald-500" ,
30- description : "React 19 + Vite 7 + Tailwind CSS 4 frontend. Code-split with lazy loading, dark mode, 120+ components, real-time WebSocket updates." ,
31- modules : [ "pages/ — 57+ page components" , "components/ — 120+ reusable UI" , "hooks/ — WebSocket, chat store, theme" , "api/ — Typed fetch wrapper + endpoints" , "App.tsx — Route definitions" ] ,
43+ name : '@ownpilot/ui' ,
44+ size : '~40K LOC' ,
45+ files : '57+ pages' ,
46+ color : 'border-emerald-500/30 bg-emerald-500/5' ,
47+ badge : 'bg-emerald-500/10 text-emerald-500' ,
48+ description :
49+ 'React 19 + Vite 7 + Tailwind CSS 4 frontend. Code-split with lazy loading, dark mode, 120+ components, real-time WebSocket updates.' ,
50+ modules : [
51+ 'pages/ — 57+ page components' ,
52+ 'components/ — 120+ reusable UI' ,
53+ 'hooks/ — WebSocket, chat store, theme' ,
54+ 'api/ — Typed fetch wrapper + endpoints' ,
55+ 'App.tsx — Route definitions' ,
56+ ] ,
3257 } ,
3358 {
34- name : "@ownpilot/cli" ,
35- size : "CLI tools" ,
36- files : "293 tests" ,
37- color : "border-orange-500/30 bg-orange-500/5" ,
38- badge : "bg-orange-500/10 text-orange-500" ,
39- description : "Commander.js CLI for server management, bot control, workspace operations, configuration, and channel management." ,
40- modules : [ "commands/start — Start server" , "commands/config — Manage settings" , "commands/bot — Telegram bot control" , "commands/workspace — Isolation" , "commands/skill — Install/remove skills" ] ,
59+ name : '@ownpilot/cli' ,
60+ size : 'CLI tools' ,
61+ files : '293 tests' ,
62+ color : 'border-orange-500/30 bg-orange-500/5' ,
63+ badge : 'bg-orange-500/10 text-orange-500' ,
64+ description :
65+ 'Commander.js CLI for server management, bot control, workspace operations, configuration, and channel management.' ,
66+ modules : [
67+ 'commands/start — Start server' ,
68+ 'commands/config — Manage settings' ,
69+ 'commands/bot — Telegram bot control' ,
70+ 'commands/workspace — Isolation' ,
71+ 'commands/skill — Install/remove skills' ,
72+ ] ,
4173 } ,
4274] ;
4375
4476export function Architecture ( ) {
4577 const ref = useRef < HTMLDivElement > ( null ) ;
46- const isInView = useInView ( ref , { once : true , margin : " -100px" } ) ;
78+ const isInView = useInView ( ref , { once : true , margin : ' -100px' } ) ;
4779
4880 return (
4981 < section className = "py-24 bg-[var(--color-bg)]" >
@@ -57,11 +89,11 @@ export function Architecture() {
5789 Architecture
5890 </ Badge >
5991 < h2 className = "text-3xl sm:text-4xl font-bold tracking-tight text-[var(--color-text)] mb-4" >
60- TypeScript monorepo,{ " " }
61- < span className = "text-gradient" > built to scale</ span >
92+ TypeScript monorepo, < span className = "text-gradient" > built to scale</ span >
6293 </ h2 >
6394 < p className = "text-[var(--color-text-muted)]" >
64- 4 packages, single port in production. Gateway serves the bundled UI, REST API, WebSocket, and SSE — all on port 8080.
95+ 4 packages, single port in production. Gateway serves the bundled UI, REST API,
96+ WebSocket, and SSE — all on port 8080.
6597 </ p >
6698 </ motion . div >
6799 </ div >
@@ -110,7 +142,10 @@ export function Architecture() {
110142 </ p >
111143 < ul className = "space-y-1" >
112144 { pkg . modules . map ( ( mod ) => (
113- < li key = { mod } className = "flex items-start gap-2 text-xs text-[var(--color-text-muted)]" >
145+ < li
146+ key = { mod }
147+ className = "flex items-start gap-2 text-xs text-[var(--color-text-muted)]"
148+ >
114149 < span className = "text-[var(--color-text-subtle)] mt-0.5 shrink-0" > —</ span >
115150 < code className = "font-mono" > { mod } </ code >
116151 </ li >
@@ -131,7 +166,15 @@ export function Architecture() {
131166 Message Pipeline
132167 </ h3 >
133168 < div className = "flex flex-wrap items-center gap-2" >
134- { [ "Request" , "Audit" , "Persistence" , "Post-Processing" , "Context-Injection" , "Agent-Execution" , "Response" ] . map ( ( stage , i , arr ) => (
169+ { [
170+ 'Request' ,
171+ 'Audit' ,
172+ 'Persistence' ,
173+ 'Post-Processing' ,
174+ 'Context-Injection' ,
175+ 'Agent-Execution' ,
176+ 'Response' ,
177+ ] . map ( ( stage , i , arr ) => (
135178 < div key = { stage } className = "flex items-center gap-2" >
136179 < div className = "px-3 py-1.5 rounded-lg bg-[var(--color-surface)] border border-[var(--color-border)] text-sm text-[var(--color-text-muted)] font-medium" >
137180 { stage }
@@ -143,7 +186,8 @@ export function Architecture() {
143186 ) ) }
144187 </ div >
145188 < p className = "mt-3 text-xs text-[var(--color-text-subtle)]" >
146- All messages (web UI, Telegram, WhatsApp, triggers) flow through the same MessageBus pipeline.
189+ All messages (web UI, Telegram, WhatsApp, triggers) flow through the same MessageBus
190+ pipeline.
147191 </ p >
148192 </ motion . div >
149193 </ div >
0 commit comments