From d806a51599ee47b6c6d930beeead3fa2f4ff21db Mon Sep 17 00:00:00 2001 From: Ajax Davis Date: Sun, 28 Dec 2025 12:05:49 +1000 Subject: [PATCH] feat: replace ASCII architecture diagram with SVG component --- apps/web/src/app/how-it-works/page.tsx | 51 +- .../src/components/ArchitectureDiagram.tsx | 535 ++++++++++++++++++ 2 files changed, 538 insertions(+), 48 deletions(-) create mode 100644 apps/web/src/components/ArchitectureDiagram.tsx diff --git a/apps/web/src/app/how-it-works/page.tsx b/apps/web/src/app/how-it-works/page.tsx index 9f62845..4d03df2 100644 --- a/apps/web/src/app/how-it-works/page.tsx +++ b/apps/web/src/app/how-it-works/page.tsx @@ -3,6 +3,7 @@ import { CodeBlock } from '@tpmjs/ui/CodeBlock/CodeBlock'; import { Container } from '@tpmjs/ui/Container/Container'; import Link from 'next/link'; import { AppHeader } from '~/components/AppHeader'; +import { ArchitectureDiagram } from '~/components/ArchitectureDiagram'; export const metadata = { title: 'How It Works | TPMJS', @@ -357,54 +358,8 @@ const result = await streamText({ {/* Architecture Diagram */}

System Architecture

-
- 
-                {`┌─────────────────────────────────────────────────────────────────┐
-│                         NPM Registry                            │
-└────────────┬────────────────────────┬───────────────────────────┘
-             │                        │
-    ┌────────▼────────┐      ┌────────▼────────┐      ┌──────────────┐
-    │ Changes Feed    │      │ Keyword Search  │      │ Manual Tools │
-    │ Every 2 min     │      │ Every 15 min    │      │ As needed    │
-    └────────┬────────┘      └────────┬────────┘      └──────┬───────┘
-             │                        │                       │
-             └────────────────────────┴───────────────────────┘
-                                      │
-                              ┌───────▼────────┐
-                              │   Validation   │
-                              │ Schema Check   │
-                              └───────┬────────┘
-                                      │
-                    ┌─────────────────┴─────────────────┐
-                    │                                   │
-            ┌───────▼────────┐              ┌──────────▼──────────┐
-            │   PostgreSQL   │              │   Health Checks     │
-            │   Database     │              │ Import + Execution  │
-            └───────┬────────┘              └──────────┬──────────┘
-                    │                                   │
-                    └─────────────────┬─────────────────┘
-                                      │
-                              ┌───────▼────────┐
-                              │ Metrics Sync   │
-                              │ Quality Score  │
-                              │ Every hour     │
-                              └───────┬────────┘
-                                      │
-                    ┌─────────────────┴─────────────────┐
-                    │                                   │
-            ┌───────▼────────┐              ┌──────────▼──────────┐
-            │   Search API   │              │   Execution API     │
-            │  /api/tools    │              │ /api/tools/execute  │
-            └───────┬────────┘              └──────────┬──────────┘
-                    │                                   │
-                    └─────────────────┬─────────────────┘
-                                      │
-                              ┌───────▼────────┐
-                              │  Frontend UI   │
-                              │ Search, Detail │
-                              │  Playground    │
-                              └────────────────┘`}
-
+
+
diff --git a/apps/web/src/components/ArchitectureDiagram.tsx b/apps/web/src/components/ArchitectureDiagram.tsx new file mode 100644 index 0000000..216f770 --- /dev/null +++ b/apps/web/src/components/ArchitectureDiagram.tsx @@ -0,0 +1,535 @@ +'use client'; + +/** + * ArchitectureDiagram Component + * + * SVG diagram showing TPMJS system architecture with animated flow paths. + * Replaces ASCII art with a clean, themed visual. + */ + +export function ArchitectureDiagram(): React.ReactElement { + return ( +
+ + {/* Definitions */} + + + + + + + + + + {/* NPM Registry (Top) */} + + + + NPM Registry + + + + {/* Arrows from NPM to three sources */} + + + + + {/* Three Discovery Sources */} + + + + Changes Feed + + + Every 2 min + + + + + + + Keyword Search + + + Every 15 min + + + + + + + Manual Tools + + + As needed + + + + {/* Arrows converging to Validation */} + + + + + {/* Validation */} + + + + Validation + + + Schema Check + + + + {/* Arrow from Validation splitting */} + + + + + {/* Database and Health Checks */} + + + + PostgreSQL + + + Database + + + + + + + Health Checks + + + Import + Execution + + + + {/* Arrows converging to Metrics */} + + + + {/* Metrics Sync */} + + + + Metrics Sync + Quality Score + + + Every hour + + + + {/* Arrow from Metrics splitting to APIs */} + + + + + {/* API Endpoints */} + + + + Search API + + + /api/tools + + + + + + + Execution API + + + /api/tools/execute + + + + {/* Arrows to Frontend */} + + + + {/* Frontend UI */} + + + + Frontend UI: Search, Detail, Playground + + + + {/* Animations */} + + +
+ ); +}