You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
chore: update copilot agent config for modular architecture
Rewrite copilot-instructions.md to reflect the current 55-module
src/modules/ architecture (was describing the old monolithic app.js
with 21 modules). Update file tree, module catalog, conventions,
and 'how to add a module' instructions.
Update copilot-setup-steps.yml to include the build step (npm run
build) and report accurate module/test/page counts.
Copy file name to clipboardExpand all lines: .github/copilot-instructions.md
+70-81Lines changed: 70 additions & 81 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
3
3
## Project Overview
4
4
5
-
**getagentbox** is the landing page and npm package for [AgentBox](https://t.me/AgentBox11Bot), a personal AI agent that lives in Telegram. The site is a vanilla HTML/CSS/JS project — no build step, no framework, no runtime dependencies.
5
+
**getagentbox** is the landing page and npm package for [AgentBox](https://t.me/AgentBox11Bot), a personal AI agent that lives in Telegram. The site is a vanilla HTML/CSS/JS project — no framework, no transpiler, no runtime dependencies. A simple `build.js` concatenates modules into `dist/bundle.js`.
Each module follows the IIFE pattern and exposes an object with `init()` plus module-specific methods. Most also have `reset()` for test cleanup.
48
+
All interactive components live in `src/modules/` as individual ES5 IIFE files. The build script (`build.js`) concatenates them in dependency order into `dist/bundle.js`.
54
49
50
+
### Core Infrastructure (load first)
55
51
| Module | Purpose |
56
52
|--------|---------|
57
-
|`ChatDemo`| Animated chat scenario player (4 scenarios) |
58
-
|`Testimonials`| Auto-rotating testimonials carousel with dots |
|`Playground`| Interactive chat demo with pattern-matched responses |
78
-
79
-
**Two DOMContentLoaded blocks:** Modules are initialized in two separate `DOMContentLoaded` listeners (lines ~979 and ~2292). The first handles the core set; the second handles later additions.
53
+
|`storage.js`| Safe localStorage wrapper |
54
+
|`dom-utils.js`| Shared DOM helper functions |
55
+
|`globals.js`| Global state and `prefersReducedMotion` flag |
Individual page scripts (e.g., `roi-calculator.js`, `benchmarks.js`, `workflow-builder.js`) power standalone HTML pages. They are also included in the bundle build.
80
74
81
75
## src/index.js (npm Package)
82
76
@@ -85,36 +79,33 @@ UMD module exporting `AgentBoxComponents` with three reusable components:
85
79
-**Pricing** — Billing toggle
86
80
-**Stats** — Animated counters
87
81
88
-
Tests in `__tests__/lib.test.js`. Methods can be called without `init()` for backward compatibility.
82
+
Tests in `__tests__/lib.test.js`.
89
83
90
84
## Conventions
91
85
92
86
### JavaScript
93
87
-**ES5 only** — no `let`/`const`, no arrow functions, no template literals
94
-
- Modules are global IIFEs (e.g., `var ChatDemo = (function () { ... })();`)
95
-
-`/* exported ... */` comments for linter hints
96
-
- All DOM content creation uses `document.createElement()` / `createTextNode()` — avoid `innerHTML` with dynamic content (see Security)
97
-
-`prefersReducedMotion` global for WCAG 2.3.3 compliance
88
+
- Modules are global IIFEs with `/* exported ... */` JSDoc comments
89
+
- All DOM content creation uses `document.createElement()` / `createTextNode()` — never `innerHTML` with dynamic content
90
+
-`prefersReducedMotion` global (from `globals.js`) for WCAG 2.3.3 compliance
98
91
99
92
### CSS
100
-
- CSS custom properties (variables) in `:root` for theming
93
+
- CSS custom properties in `:root` for theming
101
94
- Dark theme default, light mode via `.light-mode` body class
102
95
- Breakpoints: 768px (tablet), 480px (phone)
103
96
-`contain: content` on independent sections for layout isolation
104
-
-`will-change` on animated elements for GPU compositing
105
97
106
98
### Testing
107
-
-**Jest + jsdom** — configured in `jest.config.js`
99
+
-**Jest + jsdom** — 70 test files in `__tests__/`
108
100
-`npm test` runs all suites; `npm run test:coverage` for coverage
109
101
- Test files use `@jest-environment jsdom` pragma when needed
110
-
- Functions are copied/re-evaluated in test files (jsdom can't `require` browser globals)
111
-
-**Jest exit code is consistently 1 even when all tests pass** (pre-existing config issue)
102
+
- Functions are re-evaluated in test files (jsdom can't `require` browser globals)
103
+
-**Known:**Jest exit code is 1 even when all tests pass (pre-existing config issue)
112
104
113
105
### Security
114
106
- Strict CSP via `<meta>` tag — `script-src 'self'`, `style-src 'self'`
115
107
- No `innerHTML` for user-facing content — use safe DOM APIs
116
108
-`vendor/count.js` is vendored GoatCounter — **do not modify**
117
-
- XSS prevention: `createElement` + `createTextNode` for dynamic content
118
109
- See `SECURITY.md` for full policy
119
110
120
111
## How to Work on This
@@ -126,31 +117,29 @@ npm install
126
117
# Run tests
127
118
npm test
128
119
120
+
# Build the bundle
121
+
npm run build
122
+
129
123
# Serve locally
130
124
npx serve .
131
125
# Then open http://localhost:3000
132
126
```
133
127
134
-
### Adding a New Module to app.js
135
-
136
-
1. Create an IIFE following the existing pattern:
137
-
```javascript
138
-
var MyModule = (function () {
139
-
functioninit() { /* DOM setup */ }
140
-
functionreset() { /* cleanup for tests */ }
141
-
return { init: init, reset: reset };
142
-
})();
143
-
```
144
-
2. Call `MyModule.init()` in the DOMContentLoaded block (line ~2292)
145
-
3. Add corresponding HTML in `index.html`
146
-
4. Add styles in `styles.css` (section-based organization)
147
-
5. Add tests in `__tests__/`
128
+
### Adding a New Module
129
+
130
+
1. Create `src/modules/my-module.js` following the IIFE pattern above
131
+
2. Add it to the file list in `build.js` (order matters — after dependencies)
132
+
3. If it needs explicit init, add it to `src/modules/init.js`
133
+
4. Add corresponding HTML section in `index.html` (or a new page)
134
+
5. Add styles in `styles.css`
135
+
6. Add tests in `__tests__/my-module.test.js`
136
+
7. Run `npm run build` and `npm test` to verify
148
137
149
138
### What NOT to Do
150
139
151
140
- Do not add build tools, transpilers, or frameworks (keep vanilla)
152
141
- Do not modify `vendor/count.js` (third-party GoatCounter)
153
142
- Do not use `innerHTML` with any dynamic or user-influenced content
154
143
- Do not break the CSP policy (no inline scripts/styles, no external CDNs)
155
-
- Do not remove existing functionality without discussion
144
+
- Do not edit `dist/bundle.js` directly (it's auto-generated by `build.js`)
156
145
- Do not use ES6+ syntax (the codebase is ES5 for broad compatibility)
0 commit comments