diff --git a/.architecture/ARCHITECTURE.md b/.architecture/ARCHITECTURE.md new file mode 100644 index 0000000..695924d --- /dev/null +++ b/.architecture/ARCHITECTURE.md @@ -0,0 +1,244 @@ +# SynthOS / SynthTabs Architecture + +## Overview + +SynthOS is an AI-powered local web application builder. Users create fully functional +HTML/CSS/JS apps through conversational chat — no manual coding required. **SynthTabs** +is a fork that adds Microsoft Teams integration via the **Customizer** extensibility +layer. + +Installed via `npm install -g synthos`, run with `synthos start`. Node.js v20+. + +--- + +## Tech Stack + +| Layer | Technology | +|------------- |-------------------------------------------------| +| Language | TypeScript (strict, ESNext target) | +| Server | Express.js | +| DOM Engine | cheerio (server-side HTML manipulation) | +| AI Providers | Anthropic SDK, OpenAI SDK, FireworksAI (OpenAI-compat) | +| Agent Protocols | A2A SDK, OpenClaw (WebSocket) | +| CLI | yargs | +| Tests | Mocha + ts-mocha, nyc (coverage) | + +--- + +## Folder Structure + +``` +synthtabs/ +├── bin/ CLI entry (synthos.js) +├── src/ TypeScript source +│ ├── index.ts Public exports +│ ├── init.ts Config creation, first-run setup +│ ├── files.ts File I/O helpers +│ ├── pages.ts Page CRUD, metadata, versioning +│ ├── scripts.ts Shell script execution +│ ├── settings.ts Settings persistence (v2) +│ ├── themes.ts Theme loading & parsing +│ ├── migrations.ts Page version upgrades (v1 → v2) +│ ├── synthos-cli.ts CLI command parser +│ ├── customizer/ +│ │ ├── Customizer.ts Extensibility framework +│ │ └── index.ts Default Customizer instance +│ ├── service/ +│ │ ├── server.ts Express app assembly +│ │ ├── usePageRoutes.ts GET/POST /:page (serve + transform) +│ │ ├── useApiRoutes.ts /api/pages, /api/themes, /api/settings, etc. +│ │ ├── useConnectorRoutes.ts /api/connectors (OAuth2, proxy) +│ │ ├── useAgentRoutes.ts /api/agents (A2A + OpenClaw streaming) +│ │ ├── useDataRoutes.ts /api/data/:page/:table (JSON CRUD) +│ │ ├── transformPage.ts Core page transformation pipeline +│ │ ├── createCompletePrompt.ts Provider-specific prompt routing +│ │ ├── modelInstructions.ts Per-model prompt tuning +│ │ ├── generateImage.ts DALL-E 3 image generation +│ │ ├── requiresSettings.ts Middleware: settings guard +│ │ └── debugLog.ts Colored debug logging +│ ├── models/ LLM provider implementations +│ │ ├── anthropic.ts Claude (Opus/Sonnet/Haiku) +│ │ ├── openai.ts GPT (5.2/5-mini/5-nano) +│ │ └── fireworksai.ts FireworksAI (GLM-5) +│ ├── agents/ Agent protocol implementations +│ │ ├── a2aProvider.ts A2A HTTP protocol +│ │ └── openclawProvider.ts OpenClaw WebSocket + SSH tunnels +│ └── connectors/ Connector registry loader +├── default-pages/ Starter HTML templates (copied on init) +├── default-scripts/ OS-specific shell script templates +├── default-themes/ Theme CSS + JSON (Nebula Dusk/Dawn) +├── page-scripts/ Versioned page scripts (page-v2.js, helpers-v2.js) +├── required-pages/ System pages (builder, settings, pages, scripts, apis) +├── service-connectors/ 28+ connector JSON definitions +├── migration-rules/ Markdown rules for page upgrades +├── tests/ Unit tests +├── teams-default-pages/ [TEAMS] Custom page templates +├── teams-default-scripts/ [TEAMS] Custom shell scripts +├── teams-default-themes/ [TEAMS] Custom themes +├── teams-page-scripts/ [TEAMS] Custom versioned page scripts +├── teams-required-pages/ [TEAMS] Custom system pages +├── teams-service-connectors/ [TEAMS] Custom connectors +└── .synthos/ USER DATA (created at runtime, git-ignored) + ├── settings.json API keys, model config, features + ├── pages// page.html + page.json + data tables + ├── themes/ Local theme copies + └── scripts/ User shell scripts +``` + +--- + +## Core Loop: Page Transformation + +This is the heart of SynthOS — every page edit goes through this pipeline: + +``` +User types message in chat panel + │ + ▼ +POST /:page (usePageRoutes.ts) + │ + ▼ +transformPage() (transformPage.ts) + 1. Assign data-node-id to every element (cheerio) + 2. Build LLM prompt with: + - Annotated HTML + - Theme info (CSS variables, colors) + - Enabled connectors + hints + - Enabled agents + capabilities + - Available scripts + - Custom transform instructions (from Customizer) + 3. Route to provider (Anthropic / OpenAI / FireworksAI) + 4. LLM returns JSON array of change operations: + { op: "update"|"delete"|"insert", nodeId, html, parentId } + 5. Apply changes via cheerio + 6. Strip data-node-id attributes + │ + ▼ +Save updated HTML → Serve to browser +``` + +On error (bad JSON, missing nodes), the original page is returned unchanged +with an injected `