# v2 git bundle eb19b4f3cb17ce266ade36c07f83f9e248968ffa refs/heads/bundle eb19b4f3cb17ce266ade36c07f83f9e248968ffa HEAD PACK-xRn@+F!"ݵk*`Hb5nf=k\ 5IPfެڮ\g})R)2 ky}RU5 Pƈ\4EJ$JA&O!(q~\qer^Teb&THxd-1]X9BR~O{V+KTm5ia0kH^"^(F0M`6 |μ M :hvѽ#}lß η'/#+3w9~nB5/9f&q)+V4ӦmBs@0æ tSK*dj ,xowj]ꇋwޫ"o.#̥p(FCG,uex2d wxeB> fc3'@d>C~>Y)QIAeU)UN9iI%^Qa9&IeINFEFAEU\ I99^%ef&%!鎓5R3RRsRKRKSR22K2JJ2RE) 9y\\%@Q]J+ <@ANC~Aj^b^r~oYKbx%tree b42c5a85ea179a450a5a18ea283dddd5260e342f parent 5011a38dfe0169edaeb682dafa964512270dede8 author James Maes 1775396480 -0500 committer James Maes 1775396480 -0500 gpgsig -----BEGIN PGP SIGNATURE----- iQIzBAABCgAdFiEEYoWeir4fwrf8y4kIACF2cFV0Dm0FAmnSZoAACgkQACF2cFV0 Dm0ezg/9GzMBymIDI4IT1dOWKr9uVzXtNFLwXCFoyLtW3w7ivwVmXNtlE6McjQBo 2ncOowZn6snXHiuW3Y3Gv8whrP8tesWE0rKgoE5bKA4FKCOTRHPmDN3K/bRxI4/z J3Sxo57/K2qhiK49SaFW4AJhob+V8lOgPu57PCq8RGwMAdykseuhX93uDEzzZKjj v8hkfoA/JkhnmXDheN4QdTMHNgTkl/IUPA8R2HoKkvXOAY/s2Cx+u4gHWqCTiS73 qevM5f6BwPooLU8UJUrkRHEL38z2BjJTSgmHi1K7AI/a++ES5ZpmmrTF+ajM3hvQ ZapeGY8noHYSDNP0toxb0JhfupjcwAfWvqgg3UdENmRMd6g0aepZqPUJHKPrEd2g 6cZkplLb/wLdmgbWLlCHeQzwgJtWlMiXzM/pqvUvV7cHGb4Zgg1aM5lPJGKm/N95 CIDmp3za4Yyr/LLws4gvkYF93/LqDKAeBmD2O3ss1fY4f1uWwnmQcYCb8IIKZEvC fKUFziXWAJpq+pew7iSScRhV01MzvEN07jEm+7I4wBGZtZ8sayvQ5TMurZhoGZXe l2a+dOdyC5JrehgzHV9fB9uPuxaglketghddClZ6MSKKYRrG3wwVoqmXBwa7CKw9 teIyyr1lFJMI4gb1aLxuo8yw5Hcl3Ou0WymY1/5OAIYCT0Ufbz8= =98Bb -----END PGP SIGNATURE----- feat: initial project setup with design spec and reusability analysis JarvisDoc is an open source interactive AI-assisted design document platform extracted from the Praesidium2 design system. Includes: - README with project overview and quick start - Full design spec (15 sections: CLI generator, config schema, framework components, backend, templates, security, cost model) - Reusability analysis documenting extraction from Praesidium2 Co-Authored-By: Claude Opus 4.6 (1M context) P7>xuΛX<[ ɀ<ؘ<?}tݵ(t1@E1Rfb1MiPDEiJh~zf0/Qɿߓ 0a|Wۖ@)gu9~\,C>9Gh7`)p5y##$'<ټMȦۅ9iѷM (訟de `jlKvf* Lճ>T=R}ʬ5Qxז_Pfefu^-A2 k )/֦ׅ/*s{,GB j[fѺpi jV4:%+5)IS0A(x!QSL"٬rG;x*.IXW(c'dٶُ̹]ZV fZ*|zK7vG}Uq{my5f;ȭ3a\I}jcŅCW/OBa:kdҧ마vBn!3x|0{,eOS/rozW̙"@OƃW+H ?P4=?3`}N'K,J͝2D@(Ԯ)wZStxiRjCX7IlrKO\F@z5Ფr=i %ɢxeUvB F/kRer}Pm~7T _ZQ?;@2!&Ѻr.78x340031QKԫLa`(Tcm?s6=~&Bx:2h\;vrRS35W* rutuMa W]yr})j51b"~mE./Zf2]'82xEP0 +rFbiBFҰEQrDZ"f 5\>,yzbr4Ifh $foFtA6ؒ;uv ZVq0á-"vpD-,#`i#^dqoA>|{>1Hz{7[knYf`n꽵b&ZHp[{pGwS =0$=L@>8kXnpOsD;G,*KL(?A9뇻yh@KiDI;c:+6R~~% 2;Y}DW tUoЛa- uq8ɇwffc>J@S-+ZU/2w l^Uk 8xP-[),ViRLu.dLϰ@\YWR#oTR4DV2z%q.+jL9WPU]53-eT" QGT|@yNRѽ"VV畆Ug "W) \ dbFUȢ]f%DzUI1Ҫ TH+B*FDD5 WZ5|{݈wBϑ!0E|~dS|x # JarvisDoc Interactive AI-assisted design document platform. Create beautiful, collaborative design docs with threaded comments, an AI assistant, cross-document search, and automated change requests. ## What is JarvisDoc? JarvisDoc is an open source framework for creating interactive design document websites. Run one command, answer a few questions, and get a fully working site with: - **Authentication gate** — Google sign-in restricted to your domain - **Threaded comments** — @mentions, resolve/reopen, typing indicators, real-time sync via Firebase - **AI design assistant (Jarvis)** — monitors comments, responds with contextual intelligence, files change requests - **Automated change processor** — Claude Agent SDK implements approved changes, commits, deploys - **Full-text search** — Cmd+K cross-document search with highlighted results and deep linking - **Version tracking** — revision dropdown, version history, archived snapshots - **Dark-theme design system** — cards, grids, stat boxes, badges, tables, responsive breakpoints - **Starter templates** — Executive Summary, System Design, Implementation Plan, Business Review, Presentation ## Quick Start ```bash npx create-jarvisdoc my-project cd my-project # Add your Firebase service account key npx firebase deploy ``` ## How It Works Each JarvisDoc instance is a standalone static site deployed to its own Firebase project. A single `jarvisdoc.config.js` file controls everything — project name, auth domain, document registry, team directory, AI persona, and theme. The framework JS files (`auth-gate.js`, `comments.js`, `jarvis-chat.js`, `search.js`) read from the config at runtime. No build step required. ### The Change Request Pipeline 1. Someone posts a comment with feedback (e.g., "The timeline section should be wider") 2. Jarvis detects actionable language, replies, and files a change request 3. The project owner approves the change request 4. The Change Processor (a full Claude Agent SDK agent) reads the request, edits the files, commits, and deploys 5. Jarvis posts a completion notice and resolves the comment thread ## Prerequisites - [Node.js](https://nodejs.org/) 18+ - A [Firebase](https://firebase.google.com/) project (free Spark plan works) - An [Anthropic API key](https://console.anthropic.com/) (for Jarvis AI features) ## Documentation - [Design Spec](docs/specs/design.md) — Full product design with architecture, config schema, and implementation phases - [Reusability Analysis](docs/specs/reusability-analysis.md) — How JarvisDoc was extracted from the Praesidium2 design system ## Origin Story JarvisDoc was extracted from the [Praesidium2](https://praesidium2-design.web.app) interactive design document — a 35,000+ line design system built by AI agents in a single Claude Code session. The site you see there is the reference implementation: threaded comments, Jarvis AI assistant, change request pipeline, cross-document search — all running in production with real stakeholders. We realized the framework was more valuable than the one-off. JarvisDoc makes it reusable. ## License MIT ## Contributing Contributions welcome. See [docs/specs/design.md](docs/specs/design.md) for the architecture and implementation plan. --- Built by [KofTwentyTwo](https://github.com/KofTwentyTwo) ۨYx 40000 specsvH#%1XxX100644 design.mdgUlQISˏbo100644 reusability-analysis.mdop an, x<8 P"Rx;3# JarvisDoc — Open Source Interactive Design Document Platform **Date**: 2026-04-04 **Status**: Design Spec **Author**: James Maes, CTO — DMD Brands **Org**: KofTwentyTwo (github.com/KofTwentyTwo) **License**: MIT **Package**: `npx create-jarvisdoc` --- ## Executive Summary The Praesidium2 interactive design document site (praesidium2-design.web.app) was built as a one-off — a single-tenant, single-project application with 15+ hardcoded values across 10+ files. It works. The comment system, real-time AI assistant, search, authentication gate, change request pipeline, and dark-theme design system are all production-tested with real stakeholders. JarvisDoc extracts this into a reusable open source product. Any engineering team can run `npx create-jarvisdoc my-project` and get a fully functional, AI-assisted interactive design document site deployed to their own Firebase project in under 30 minutes. This is **Approach 1** from the [reusability analysis](reusability-analysis.md) — config-driven static site with a CLI generator — renamed from "Jarvis Page" to "JarvisDoc." ### What You Get - **Authentication gate** — Google sign-in restricted to your domain - **Threaded comments** — @mentions, resolve/reopen, typing indicators, real-time sync - **AI design assistant** — Jarvis monitors comments, responds with contextual intelligence, files change requests - **Automated change processor** — Claude Agent SDK implements approved changes, commits, deploys - **Full-text search** — Cmd+K cross-document search with highlighted results and deep linking - **Version tracking** — revision dropdown, version history, archived snapshots - **Dark-theme design system** — cards, grids, stat boxes, badges, tables, responsive breakpoints - **Starter templates** — Executive Summary, System Design, Implementation Plan, Business Review, Presentation --- ## 1. CLI Generator (`create-jarvisdoc`) ### 1.1 Package Identity ``` @koftwentytwo/create-jarvisdoc ``` Invoked via: ```bash npx create-jarvisdoc my-project # or npm create jarvisdoc my-project ``` ### 1.2 Interactive Prompts The generator walks the user through project setup. Every prompt has a sensible default. | Prompt | Default | Required | Notes | |--------|---------|----------|-------| | Project name | directory name | Yes | Used for branding, localStorage namespace, collection prefixes | | Project slug | kebab-case of name | Yes | Firebase project ID, CSS class prefix | | Firebase project ID | project slug | Yes | Must match an existing Firebase project | | Firebase API key | — | Yes | From Firebase Console > Project Settings | | Firebase auth domain | `{projectId}.firebaseapp.com` | Yes | | | Firebase storage bucket | `{projectId}.firebasestorage.app` | Yes | | | Firebase messaging sender ID | — | Yes | | | Firebase app ID | — | Yes | | | Allowed auth domain | — | Yes | e.g., `dmdbrands.com` | | Owner email | — | Yes | The approver for change requests | | Owner name | parsed from email | No | Display name in mention directory | | AI assistant name | `Jarvis` | No | Name of the AI persona | | AI assistant email | `{slug}@{assistantName}.ai` | No | | | LLM provider | `anthropic` | No | v1: Anthropic only | | LLM model (chat) | `claude-sonnet-4-6` | No | For comment responses | | LLM model (agent) | `claude-sonnet-4-6` | No | For change processor | | Starter templates | all | No | Multi-select: exec-summary, system-design, implementation, business-review, presentation | ### 1.3 Generated Output After prompts, the generator scaffolds the full project: ``` my-project/ jarvisdoc.config.js # Single source of truth index.html # Executive Summary (starter) system-design.html # System Design (starter) implementation.html # Implementation Plan (starter) business-review.html # Business Review (starter) presentation.html # Presentation (starter) favicon.svg # Generated from project initial + accent color versions.json # Initial version entry docs-manifest.json # Document registry firebase.json # Hosting + Firestore config .firebaserc # Project binding firestore.rules # Parameterized with allowed domain + owner email firestore.indexes.json # Required composite indexes js/ auth-gate.js # Authentication gate (reads window.JD) comments.js # Comment system (reads window.JD) jarvis-chat.js # Chat assistant (reads window.JD) search.js # Full-text search (reads window.JD) version-loader.js # Version dropdown (reads window.JD) built-with.js # "Built with JarvisDoc" attribution config-loader.js # Loads jarvisdoc.config.js → window.JD css/ jarvisdoc.css # Complete design system stylesheet jarvis/ jarvis.js # Comment monitor + chat responder change-processor.js # Claude Agent SDK auto-implementation jarvisdoc.config.json # Node.js config (generated from .js config) PERSONA.md # AI persona definition (templated) package.json # Dependencies: firebase-admin, @anthropic-ai/sdk .env.example # ANTHROPIC_API_KEY=sk-... scripts/ deploy.sh # firebase deploy --only hosting,firestore start-jarvis.sh # Starts jarvis.js + change-processor.js .gitignore # service-account-key.json, node_modules, .env ``` ### 1.4 Post-Generation Instructions The CLI prints clear next steps: ``` Your JarvisDoc project is ready. cd my-project 1. Add your Firebase service account key: cp ~/Downloads/service-account-key.json jarvis/ 2. Deploy Firestore rules + hosting: firebase deploy 3. Start the AI assistant: cd jarvis && npm install ANTHROPIC_API_KEY=sk-... npm start 4. Open your site: https://my-project.web.app ``` --- ## 2. Configuration Schema ### 2.1 `jarvisdoc.config.js` The single source of truth for the entire instance. This file is loaded by `config-loader.js` in the browser and by the backend services in Node.js. ```javascript // jarvisdoc.config.js window.JD = { // ── Project Identity ────────────────────────────────────────── project: { name: "Praesidium2", // Display name slug: "praesidium2-design", // Used for localStorage keys, collection prefixes subtitle: "DMD Brands — Confidential Design Document", logoLetter: "P", // Single character for the logo icon version: "v1.7", // Current version label }, // ── Firebase ────────────────────────────────────────────────── firebase: { apiKey: "YOUR_FIREBASE_API_KEY", authDomain: "your-project.firebaseapp.com", projectId: "your-project", storageBucket: "your-project.firebasestorage.app", messagingSenderId: "000000000000", appId: "1:000000000000:web:abcdef1234567890", }, // ── Authorization ───────────────────────────────────────────── auth: { allowedDomain: "yourcompany.com", // Google Workspace domain ownerEmail: "owner@yourcompany.com", // Change request approver }, // ── Documents ───────────────────────────────────────────────── docs: [ { id: "index", file: "index.html", name: "Executive Summary", color: "#f59e0b", shortName: "EXEC SUMMARY" }, { id: "system-design", file: "system-design.html", name: "System Design", color: "#60a5fa", shortName: "SYSTEM DESIGN" }, { id: "implementation", file: "implementation.html", name: "Implementation", color: "#22d3ee", shortName: "IMPLEMENTATION" }, { id: "business-review", file: "business-review.html", name: "Business Review", color: "#f87171", shortName: "BUSINESS REVIEW" }, ], // ── Team Directory ──────────────────────────────────────────── team: [ { handle: "jmaes", name: "James Maes", title: "CTO", type: "user" }, { handle: "bchupp", name: "Bryan Chupp", title: "CMO", type: "user" }, { handle: "cchupp", name: "Chris Chupp", title: "CEO", type: "user" }, { handle: "bpotter", name: "Bryan Potter", title: "VP Me Health", type: "user" }, { handle: "mcarpenter", name: "Matt Carpenter", title: "VP Product Dev", type: "user" }, { handle: "jarvis", name: "Jarvis", title: "Design review assistant", type: "agent" }, { handle: "friday", name: "F.R.I.D.A.Y.", title: "Code review agent", type: "agent" }, ], // ── AI Assistant (Jarvis) ───────────────────────────────────── assistant: { name: "Jarvis", email: "jarvis@praesidium2.ai", avatarUrl: "data:image/svg+xml,...", // Inline SVG or URL personality: "British, dry wit, technically brilliant, subtly protective of quality", personaFile: "jarvis/PERSONA.md", // Full persona definition model: "claude-sonnet-4-6", // Chat response model agentModel: "claude-sonnet-4-6", // Change processor model maxReplyTokens: 200, replyDelayMs: 15000, // Delay before posting a reply }, // ── Navigation Links ────────────────────────────────────────── // Maps display names to URLs for auto-linking in chat messages linkMap: [ { pattern: "Executive Summary", href: "index.html" }, { pattern: "Implementation Plan", href: "implementation.html" }, { pattern: "Business Review", href: "business-review.html" }, { pattern: "System Design", href: "system-design.html" }, ], // ── Welcome Flow ────────────────────────────────────────────── welcome: { messages: [ { content: "Good day. I'm Jarvis, your guide through the {{PROJECT_NAME}} design documents." }, { content: "A few things that might help:\n* Press **Cmd+K** to search across all documents\n* Hover any card and click the comment icon to leave a note\n* Use the nav bar at top to switch between documents" }, { content: "What's your role? I can suggest where to start.", roleButtons: [ { key: "executive", label: "Executive / C-Suite" }, { key: "technical", label: "Technical / Engineering" }, { key: "product", label: "Product / Operations" }, { key: "browsing", label: "Just Browsing" }, ]}, ], roleResponses: { executive: "Start with the Executive Summary, it is the landing page.", technical: "Head to System Design for the full technical architecture.", product: "The Business Review has deployment examples and ROI analysis.", browsing: "No problem. Start with the Executive Summary and explore from there.", }, }, // ── Theme ───────────────────────────────────────────────────── theme: { primaryColor: "#f59e0b", // Amber — used for buttons, accents, logo gradient start accentColor: "#ef4444", // Red — used for logo gradient end, error states highlightColor: "#22d3ee", // Cyan — used for agent badges, code highlights }, }; ``` ### 2.2 Configuration Loading **Browser (client-side)**: A small `config-loader.js` script is included before all other scripts. It loads `jarvisdoc.config.js` which sets `window.JD`. All framework JS reads from `window.JD` at runtime. ```html ``` **Node.js (backend)**: The CLI generates a parallel `jarvis/jarvisdoc.config.json` from the same source values. Backend services read this JSON file at startup. ```javascript // jarvis/jarvis.js const config = require("./jarvisdoc.config.json"); const FIRESTORE_PROJECT_ID = config.firebase.projectId; const JARVIS_AUTHOR = { authorName: config.assistant.name, authorEmail: config.assistant.email, // ... }; ``` ### 2.3 `docs-manifest.json` A standalone document registry that can be edited independently of the config. Used by the change processor to validate document IDs and map them to file paths. ```json { "documents": [ { "id": "index", "file": "index.html", "name": "Executive Summary", "color": "#f59e0b", "shortName": "EXEC SUMMARY", "editable": true }, { "id": "system-design", "file": "system-design.html", "name": "System Design", "color": "#60a5fa", "shortName": "SYSTEM DESIGN", "editable": true } ], "protectedFiles": [ "js/auth-gate.js", "js/comments.js", "jarvis/jarvis.js", "jarvis/change-processor.js", "firestore.rules", "firebase.json" ] } ``` --- ## 3. Framework Components These are the client-side JavaScript files extracted from the current Praesidium2 implementation. Each is refactored to read all project-specific values from `window.JD` instead of hardcoded constants. ### 3.1 `auth-gate.js` **Current state**: Firebase config (6 values), allowed domain, project name, subtitle, and logo letter are all hardcoded. **Refactored behavior**: ```javascript // Before (hardcoded) const AUTH_GATE_CONFIG = { apiKey: "AIzaSy..._YOUR_HARDCODED_KEY", projectId: "praesidium2-design", // ... }; const AUTH_ALLOWED_DOMAIN = "dmdbrands.com"; logoDiv.textContent = 'P'; title.textContent = 'Praesidium2'; // After (config-driven) const AUTH_GATE_CONFIG = window.JD.firebase; const AUTH_ALLOWED_DOMAIN = window.JD.auth.allowedDomain; logoDiv.textContent = window.JD.project.logoLetter; title.textContent = window.JD.project.name; subtitle.textContent = window.JD.project.subtitle; ``` Primary color for the sign-in button and logo gradient reads from `window.JD.theme.primaryColor` and `window.JD.theme.accentColor`. ### 3.2 `comments.js` **Current state**: Firebase config duplicated (6 values), allowed domain, and 7-person team directory hardcoded. **Refactored behavior**: ```javascript // Before var FIREBASE_CONFIG = { apiKey: "...", projectId: "praesidium2-design", ... }; var ALLOWED_DOMAIN = "dmdbrands.com"; var MENTION_USERS = [ { handle: "jmaes", name: "James Maes", title: "CTO", type: "user" }, // ... ]; // After var FIREBASE_CONFIG = window.JD.firebase; var ALLOWED_DOMAIN = window.JD.auth.allowedDomain; var MENTION_USERS = window.JD.team; ``` Firestore collection names get a project-slug prefix to prevent collision if two instances ever share a Firebase project (not recommended, but defensive): ```javascript var COMMENTS_COLLECTION = window.JD.project.slug + "_comments"; var TYPING_COLLECTION = window.JD.project.slug + "_typing_indicators"; ``` localStorage keys are namespaced: ```javascript var STORAGE_PREFIX = "jf_" + window.JD.project.slug + "_"; ``` ### 3.3 `jarvis-chat.js` **Current state**: Jarvis email, chat collection name, link map (10 entries), welcome messages (3 messages), role responses (4 entries), and localStorage keys are all hardcoded. **Refactored behavior**: ```javascript // Before var JARVIS_EMAIL = "jarvis@praesidium2.ai"; var CHAT_COLLECTION = "jarvis_chats"; var LINK_MAP = [ { re: /Executive Summary/g, href: "index.html" }, // ... ]; // After var JARVIS_EMAIL = window.JD.assistant.email; var CHAT_COLLECTION = window.JD.project.slug + "_jarvis_chats"; // Link map built from config (regex compiled at init time, not per-message) var LINK_MAP = window.JD.linkMap.map(function(entry) { return { re: new RegExp(escapeRegExp(entry.pattern), 'g'), href: entry.href }; }); var WELCOME_MESSAGES = window.JD.welcome.messages.map(function(msg) { return { content: msg.content.replace(/\{\{PROJECT_NAME\}\}/g, window.JD.project.name), roleButtons: msg.roleButtons || null }; }); var ROLE_RESPONSES = window.JD.welcome.roleResponses; ``` Session and chat history localStorage keys use the project slug prefix: ```javascript sessionStorage.getItem("jf_" + window.JD.project.slug + "_session_id"); localStorage.getItem("jf_" + window.JD.project.slug + "_chat_history"); ``` ### 3.4 `search.js` **Current state**: DOCS array hardcoded with 4 Praesidium2-specific pages. Empty-state message says "Praesidium2 documents." **Refactored behavior**: ```javascript // Before var DOCS = [ { id: 'index', file: 'index.html', name: 'Executive Summary', color: '#f59e0b', shortName: 'EXEC SUMMARY' }, // ... ]; // After var DOCS = window.JD.docs; ``` Empty-state message: ```javascript // Before: "Type to search across all Praesidium2 documents" // After: "Type to search across all " + window.JD.project.name + " documents" ``` ### 3.5 `version-loader.js` **Already generic.** Reads `versions.json` dynamically, determines current version from filename. No changes needed — this is the one component that was already reusable from day one. ### 3.6 `built-with.js` **Current state**: Hardcoded "Built with Praesidium1" narrative about how the design doc was created. **Refactored behavior**: Becomes a generic "Built with JarvisDoc" attribution. The modal content is simplified to describe JarvisDoc itself (the platform), not any specific project. ```javascript var MODAL_CONTENT = { title: "Built with JarvisDoc", subtitle: "An open source platform for interactive AI-assisted design documents.", sections: [ { heading: "What is JarvisDoc?", text: "JarvisDoc is an open source toolkit by KofTwentyTwo that turns static design documents into interactive, AI-assisted review environments. Comments, search, version tracking, and a real-time AI assistant — all deployed to your own Firebase project." }, { heading: "Features", items: [ { name: "AI Design Assistant", role: "Monitors comments, answers questions, files change requests" }, { name: "Threaded Comments", role: "Real-time, @mentions, resolve/reopen, typing indicators" }, { name: "Full-Text Search", role: "Cmd+K cross-document search with highlighted results" }, { name: "Change Processor", role: "Claude Agent SDK auto-implements approved changes" }, { name: "Auth Gate", role: "Google sign-in restricted to your domain" }, ] }, { heading: "Learn More", text: "github.com/KofTwentyTwo/jarvisdoc" } ] }; ``` The footer link text reads "Built with JarvisDoc" (always, not configurable — this is the attribution for the open source project). --- ## 4. Jarvis Backend Two Node.js services run alongside the static site, watching Firestore for events and responding autonomously. ### 4.1 `jarvis.js` — Comment Monitor + Chat Responder **Responsibilities**: 1. Listen for new top-level comments in the `{slug}_comments` collection 2. Load relevant design spec context from the HTML file 3. Generate a contextual reply using Claude (model from config) 4. Post the reply back to Firestore 5. Listen for chat messages in `{slug}_jarvis_chats` collection 6. Generate conversational responses for the chat window 7. File change requests when appropriate **Configuration loading**: ```javascript const config = require("./jarvisdoc.config.json"); const FIRESTORE_PROJECT_ID = config.firebase.projectId; const JARVIS_AUTHOR = { authorName: config.assistant.name, authorEmail: config.assistant.email, authorPhoto: config.assistant.avatarUrl, }; const COMMENTS_COLLECTION = config.project.slug + "_comments"; const CHAT_COLLECTION = config.project.slug + "_jarvis_chats"; const MODEL = config.assistant.model; const MAX_REPLY_TOKENS = config.assistant.maxReplyTokens; const REPLY_DELAY_MS = config.assistant.replyDelayMs; ``` **Persona loading**: Reads `PERSONA.md` (generated from template during `create-jarvisdoc`). The persona file uses `{{PROJECT_NAME}}` and `{{ASSISTANT_NAME}}` tokens that are replaced at generation time. ### 4.2 `change-processor.js` — Automated Change Implementation **Responsibilities**: 1. Watch the `{slug}_change_requests` collection for approved changes 2. Spawn a Claude Code agent (via `@anthropic-ai/claude-agent-sdk`) to implement the change 3. Read the target HTML file, make the minimum edit, verify 4. Commit the change to git 5. Deploy via `firebase deploy --only hosting` 6. Post a summary comment back to Firestore **Configuration loading**: ```javascript const config = require("./jarvisdoc.config.json"); const FIRESTORE_PROJECT_ID = config.firebase.projectId; const MODEL = config.assistant.agentModel; // Document file map built from docs-manifest.json const manifest = require("../docs-manifest.json"); const DOCUMENT_FILE_MAP = {}; manifest.documents.forEach(function(doc) { DOCUMENT_FILE_MAP[doc.id] = doc.file; }); const PROTECTED_FILES = new Set(manifest.protectedFiles); ``` **Agent system prompt**: Templated with project name and document list from config, not hardcoded. ```javascript const AGENT_SYSTEM_PROMPT = [ "You are the " + config.project.name + " Change Request Processor.", "You implement approved design changes to the " + config.project.name + " documents.", "", "Your workspace is " + DESIGN_DIR, "", "Available documents:", ...manifest.documents.map(d => "- " + d.file + " (" + d.name + ")"), "", "Rules:", "- Read the target file first to understand current content", "- Make the minimum edit necessary to fulfill the change request", "- Do NOT modify any files listed in protectedFiles", // ... (remaining rules are project-agnostic) ].join("\n"); ``` ### 4.3 Service Account Each instance requires its own Firebase service account key at `jarvis/service-account-key.json`. This file is gitignored. The CLI reminds the user to download it from Firebase Console. ### 4.4 Process Management The generated `scripts/start-jarvis.sh`: ```bash #!/bin/bash cd "$(dirname "$0")/../jarvis" if [ ! -f service-account-key.json ]; then echo "ERROR: jarvis/service-account-key.json not found." echo "Download from: Firebase Console > Project Settings > Service Accounts" exit 1 fi if [ -z "$ANTHROPIC_API_KEY" ]; then echo "ERROR: ANTHROPIC_API_KEY environment variable required." exit 1 fi echo "Starting Jarvis comment monitor..." node jarvis.js & JARVIS_PID=$! echo "Starting change processor..." node change-processor.js & PROCESSOR_PID=$! echo "Jarvis is running. PID: $JARVIS_PID, $PROCESSOR_PID" echo "Press Ctrl+C to stop." trap "kill $JARVIS_PID $PROCESSOR_PID 2>/dev/null" EXIT wait ``` --- ## 5. Starter Templates ### 5.1 Template Design Each starter template is a complete, valid HTML file with: - Proper `` with meta tags, favicon, config loader, auth gate - Header with logo, project name, doc switcher nav, mobile hamburger menu - Content area with placeholder sections - Script tags for comments, search, version loader, chat, built-with - The full design system CSS (linked stylesheet, not inline) ### 5.2 Available Templates | Template | File | Purpose | |----------|------|---------| | Executive Summary | `index.html` | C-suite one-pager with hero, stats grid, team cards | | System Design | `system-design.html` | Tabbed technical architecture with tab navigation groups | | Implementation Plan | `implementation.html` | Phased build plan with task cards, acceptance criteria | | Business Review | `business-review.html` | Independent assessment, findings table, recommendations | | Presentation | `presentation.html` | Slide deck with keyboard navigation, progress bar | ### 5.3 Template Structure Every template follows the same HTML skeleton: ```html <!-- Filled from config -->

Executive Summary

Executive Summary

Add your project overview here.

Section Title

Your content goes here. Use the design system's card, grid, stat-box, and table classes to structure your document.

``` ### 5.4 Content Patterns Templates include commented examples of design system patterns: ```html
42
Your Metric

Card Title

Card content with the dark theme design system.

ColumnColumn
ValueValue
``` --- ## 6. Firestore Rules Template ### 6.1 Parameterization The CLI generates `firestore.rules` from a template, replacing two tokens: | Token | Source | Example | |-------|--------|---------| | `{{ALLOWED_DOMAIN}}` | `auth.allowedDomain` from config | `dmdbrands.com` | | `{{OWNER_EMAIL}}` | `auth.ownerEmail` from config | `jmaes@dmdbrands.com` | | `{{SLUG}}` | `project.slug` from config | `praesidium2-design` | ### 6.2 Template ``` rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { // Comments — restricted to @{{ALLOWED_DOMAIN}} match /{{SLUG}}_comments/{commentId} { allow read: if request.auth != null && request.auth.token.email.matches('.*@{{ALLOWED_DOMAIN_ESCAPED}}'); allow create: if request.auth != null && request.auth.token.email.matches('.*@{{ALLOWED_DOMAIN_ESCAPED}}') && request.resource.data.authorEmail == request.auth.token.email && request.resource.data.keys().hasAll([ 'documentId', 'pageId', 'sectionId', 'content', 'authorName', 'authorEmail', 'parentId', 'status', 'docVersion', 'createdAt' ]); allow update: if request.auth != null && request.auth.token.email.matches('.*@{{ALLOWED_DOMAIN_ESCAPED}}') && request.resource.data.diff(resource.data).affectedKeys() .hasOnly(['status', 'resolvedBy', 'resolvedAt']) && request.resource.data.status in ['open', 'resolved']; allow delete: if false; } // Chat messages — restricted to @{{ALLOWED_DOMAIN}} match /{{SLUG}}_jarvis_chats/{chatId} { allow read: if request.auth != null && request.auth.token.email.matches('.*@{{ALLOWED_DOMAIN_ESCAPED}}'); allow create: if request.auth != null && request.auth.token.email.matches('.*@{{ALLOWED_DOMAIN_ESCAPED}}') && request.resource.data.keys().hasAll([ 'sessionId', 'role', 'content', 'authorName', 'authorEmail', 'createdAt' ]); allow update: if false; allow delete: if false; } // Change requests — owner-approved workflow match /{{SLUG}}_change_requests/{crId} { allow read: if request.auth != null && request.auth.token.email.matches('.*@{{ALLOWED_DOMAIN_ESCAPED}}'); allow update: if request.auth != null && request.auth.token.email == '{{OWNER_EMAIL}}' && request.resource.data.diff(resource.data).affectedKeys() .hasOnly(['status', 'updatedAt']); } // Typing indicators — ephemeral match /{{SLUG}}_typing_indicators/{indicatorId} { allow read, write: if request.auth != null && request.auth.token.email.matches('.*@{{ALLOWED_DOMAIN_ESCAPED}}'); } } } ``` `{{ALLOWED_DOMAIN_ESCAPED}}` is the regex-escaped domain (dots escaped: `dmdbrands[.]com`). Collection names are prefixed with the project slug to prevent data collision in the (unlikely) scenario of shared Firebase projects. --- ## 7. Design System ### 7.1 Extracted Stylesheet: `jarvisdoc.css` The complete dark-theme CSS is extracted from the inline `