+
+
`;
+ showState('data');
+ return true;
+};
+```
+
+**🟡 Important: Missing bidirectional communication pattern**
+
+Apps currently only receive data. They should also be able to:
+1. Request data refresh (user clicks "Refresh" button)
+2. Send user actions back to host (user clicks "Delete" on a row)
+3. Navigate to another app (user clicks a contact name → opens contact card)
+
+Add a `sendToHost()` utility:
+```javascript
+function sendToHost(action, payload) {
+ window.parent.postMessage({
+ type: 'mcp_app_action',
+ action,
+ payload,
+ appId: APP_ID
+ }, '*');
+}
+
+// Usage: sendToHost('refresh', {});
+// Usage: sendToHost('navigate', { app: 'contact-card', contactId: '123' });
+// Usage: sendToHost('tool_call', { tool: 'delete_contact', args: { id: '123' } });
+```
+
+**🟢 Nice-to-have: Add micro-interactions**
+
+- Stagger animation on list items appearing (each row fades in 50ms apart)
+- Number counting animation on metric values
+- Smooth transitions when data updates (not a hard re-render)
+
+```css
+.row-enter { animation: fadeSlideIn 0.2s ease-out forwards; opacity: 0; }
+@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
+```
+
+---
+
+### 4. MCP LocalBosses Integrator (Phase 4)
+
+**Strengths:**
+- Extremely detailed file-by-file update guide — truly copy-paste ready
+- Complete Calendly walkthrough example is great
+- Cross-reference check (all 4 files must have every app ID) is critical
+- System prompt engineering section covers the right principles
+
+**Issues & Suggestions:**
+
+**🔴 Critical: System prompt engineering is under-specified**
+
+The current guidance is "describe capabilities in natural language" and "specify when to use each tool." This is insufficient for reliable tool routing. Research from the Prompt Engineering Guide and Statsig's optimization guide shows system prompts need:
+
+1. **Explicit tool routing rules** — Not just "you can manage contacts" but structured decision trees:
+```
+TOOL SELECTION RULES:
+- If user asks to SEE/BROWSE/LIST multiple items → use list_* tools
+- If user asks about ONE specific item by name/ID → use get_* tools
+- If user asks to CREATE/ADD/NEW → use create_* tools
+- If user asks to CHANGE/UPDATE/MODIFY → use update_* tools
+- If user asks to DELETE/REMOVE → use delete_* tools (always confirm first)
+- If user asks for STATS/METRICS/OVERVIEW → use analytics tools
+```
+
+2. **Output formatting instructions** — Tell the AI exactly how to structure APP_DATA:
+```
+When returning data for the contact grid app, your APP_DATA MUST include:
+- "data": array of objects, each with at minimum {name, email, status}
+- "meta": {total, page, pageSize} for pagination
+- "title": descriptive title matching what user asked for
+```
+
+3. **Few-shot examples** — Include 2-3 example interactions showing the full input → tool call → APP_DATA flow. This is the single most effective technique per OpenAI's prompt engineering guide.
+
+4. **Negative instructions** — "Do NOT call tools when the user asks general questions about best practices. Do NOT use list tools when the user clearly knows which specific record they want."
+
+**🟡 Important: Intake questions need A/B testing framework**
+
+The intake question is the first interaction point and hugely impacts user experience. Currently it's hardcoded text with no measurement. Add:
+- Guidance for writing intake questions that are action-oriented not question-oriented
+- Alternative phrasings to test (e.g., "What contacts should I pull up?" vs "Tell me what you're looking for")
+- Skip label should be the most common action (data shows 60%+ users skip — make the default great)
+
+**🟡 Important: System prompt addon is too coupled to data shape**
+
+The `systemPromptAddon` includes exact JSON structures, which means:
+1. If the app's render() function changes, the prompt is stale
+2. The AI treats it as a template, not understanding the data semantics
+3. Complex data requires enormous prompt addons
+
+Better approach: Reference a data contract by name:
+```typescript
+systemPromptAddon: `Generate APP_DATA conforming to the ContactGrid schema.
+Required fields: data[] with {name, email, phone, status, created}, meta with {total, page, pageSize}.
+Include 5-25 records matching the user's request. Realistic data only.`,
+```
+
+**🟢 Nice-to-have: Add channel onboarding flow**
+
+When a user enters a new channel for the first time, show a brief guided tour:
+- What this channel does
+- What apps are available (visual toolbar walkthrough)
+- Example things to try
+
+---
+
+### 5. MCP QA Tester (Phase 5)
+
+**Strengths:**
+- Five testing layers is the right conceptual framework
+- The shell script template for automated static analysis is practical
+- Common issues & fixes table is immediately useful
+- Visual testing with Gemini/Peekaboo is creative
+
+**Issues & Suggestions:**
+
+**🔴 Critical: No quantitative metrics or benchmarks**
+
+The entire testing framework is binary pass/fail checklists. Modern LLM agent evaluation (per Confident AI's DeepEval framework and the Berkeley Function Calling Leaderboard) measures:
+
+1. **Tool Correctness Rate** — What % of natural language messages trigger the correct tool? Target: >95%
+2. **Task Completion Rate** — What % of end-to-end scenarios actually complete? Target: >90%
+3. **First-Attempt Success Rate** — Does the tool work on the first call without retries? Target: >85%
+4. **APP_DATA Accuracy** — Does the generated JSON match the app's expected schema? Target: 100%
+5. **Response Latency** — Time from user message to app render. Target: <3 seconds for reads, <5 for writes
+
+**Add a metrics section:**
+```markdown
+## Performance Metrics (per channel)
+
+| Metric | Target | Method |
+|--------|--------|--------|
+| Tool Correctness | >95% | Run 20 NL messages, count correct tool selections |
+| Task Completion | >90% | Run 10 E2E scenarios, count fully completed |
+| APP_DATA Schema Match | 100% | Validate every APP_DATA block against JSON schema |
+| Response Latency (P50) | <3s | Measure 10 interactions |
+| Response Latency (P95) | <8s | Measure 10 interactions |
+| App Render Success | 100% | All apps render data state without console errors |
+| Accessibility Score | >90 | Run axe-core or Lighthouse on each app |
+```
+
+**🔴 Critical: No regression testing baseline**
+
+The skill has no concept of baselines or regression detection. When you update a tool description, how do you know you didn't break routing for 3 other tools? When you change an app's CSS, how do you detect layout shifts?
+
+**Add:**
+1. **Screenshot baselines** — Store reference screenshots per app. On each test run, compare pixel diff. Tools: BackstopJS (open source), or custom Gemini comparison.
+2. **Tool routing baselines** — Store a fixtures file of 20 NL messages → expected tool mappings. Re-run after any tool description change.
+3. **JSON schema validation** — Define schemas for each app's expected APP_DATA format. Validate every AI response against it.
+
+```bash
+# Screenshot baseline workflow
+backstop init
+backstop reference # Capture current state as baseline
+# ... make changes ...
+backstop test # Compare against baseline, flag regressions
+```
+
+**🔴 Critical: No accessibility testing**
+
+Zero mention of:
+- Color contrast auditing (our #96989d secondary text FAILS WCAG AA)
+- Keyboard navigation testing (Tab through all interactive elements)
+- Screen reader testing (VoiceOver on Mac)
+- axe-core or Lighthouse accessibility audits
+
+**Add Layer 2.5: Accessibility Testing:**
+```markdown
+### Accessibility Checks (per app)
+- [ ] Run axe-core: `axe.run(document).then(results => console.log(results.violations))`
+- [ ] All text passes WCAG AA contrast (4.5:1 normal, 3:1 large)
+- [ ] All interactive elements reachable via Tab key
+- [ ] All interactive elements operable with Enter/Space
+- [ ] Loading/empty/data state changes announced to screen readers
+- [ ] No info conveyed by color alone (icons/text supplement color badges)
+```
+
+**🟡 Important: Testing is entirely manual**
+
+The "automated QA script" only checks file existence and compilation. The functional, visual, and integration layers are all "manual testing required." For 30+ servers, this is unscalable.
+
+**Add automated testing patterns:**
+1. **Tool routing smoke test** — Script that sends 5 NL messages per channel via API and checks tool selection
+2. **APP_DATA schema validator** — Script that parses AI responses and validates JSON against schemas
+3. **App render test** — Playwright script that loads each HTML file, injects sample data, screenshots it
+
+```javascript
+// Automated app render test (Playwright)
+const { chromium } = require('playwright');
+const fs = require('fs');
+
+async function testApp(htmlPath, sampleData) {
+ const browser = await chromium.launch();
+ const page = await browser.newPage({ viewport: { width: 400, height: 600 } });
+ await page.goto(`file://${htmlPath}`);
+
+ // Inject data via postMessage
+ await page.evaluate((data) => {
+ window.postMessage({ type: 'mcp_app_data', data }, '*');
+ }, sampleData);
+
+ await page.waitForTimeout(500);
+
+ // Check no console errors
+ const errors = [];
+ page.on('console', msg => { if (msg.type() === 'error') errors.push(msg.text()); });
+
+ // Screenshot
+ await page.screenshot({ path: `/tmp/test-${path.basename(htmlPath)}.png` });
+
+ // Check content rendered (not still showing loading)
+ const loadingVisible = await page.isVisible('#loading');
+ const contentVisible = await page.isVisible('#content');
+
+ await browser.close();
+ return { errors, loadingVisible, contentVisible };
+}
+```
+
+**🟡 Important: No performance testing**
+
+No guidance on measuring:
+- App file size budgets (should enforce <50KB)
+- Time to first render
+- Memory usage (important for many-app channels like GHL with 65 apps)
+- postMessage throughput (how fast can data update?)
+
+**🟡 Important: No data fixture library**
+
+Each test requires manually crafted sample data. Create a standardized fixture library:
+```
+fixtures/
+ dashboard-sample.json
+ data-grid-sample.json
+ detail-card-sample.json
+ timeline-sample.json
+ calendar-sample.json
+ pipeline-sample.json
+ empty-state.json
+ malformed-data.json
+ huge-dataset.json (1000+ rows)
+```
+
+**🟢 Nice-to-have: Add chaos testing**
+
+What happens when:
+- API returns 500 on every call?
+- postMessage sends data in wrong format?
+- APP_DATA is 500KB+ (huge dataset)?
+- User sends 10 messages rapidly?
+- Two apps try to render simultaneously?
+
+---
+
+## Research Findings
+
+### 1. Tool Calling Optimization (Paragon / Statsig / Berkeley BFCL)
+
+**Key findings:**
+- **LLM model choice matters most.** Paragon's benchmarks showed model selection had the biggest impact on tool correctness. o3 (April 2025 update) performed best, but Claude 3.5 Sonnet was close behind.
+- **Reducing tool count improves accuracy.** The paper "Less is More" (arxiv, Nov 2024) proved that selectively reducing available tools significantly improves function-calling performance. Our lazy loading approach is on the right track, but we should go further — only surface tools relevant to the current conversation context.
+- **Tool descriptions are the #1 lever after model choice.** Better descriptions improved correctness by ~15-25% in Paragon's tests. The "do NOT use when" pattern was particularly impactful.
+- **Router-based architecture outperforms flat tool lists.** Statsig recommends: big model does routing/planning, specialized sub-agents handle execution. This is aligned with our lazy loading but could be extended to per-channel tool pre-filtering.
+- **Requiring a rationale before tool calls improves accuracy.** Adding "Before calling any tool, briefly state which tool you're choosing and why" to system prompts reduces misrouting.
+
+**Recommendations for our pipeline:**
+1. Add "anti-descriptions" (when NOT to use) to every tool
+2. Implement dynamic tool activation — only surface tools relevant to detected user intent
+3. Add rationale requirement to system prompts
+4. Cap active tool count at 15-20 per interaction
+
+### 2. MCP Apps Official Extension (Jan 2026)
+
+**Major protocol update we're not leveraging:**
+- Tools can now declare `_meta.ui.resourceUri` pointing to a `ui://` resource
+- HTML apps communicate with hosts via JSON-RPC over postMessage (not custom protocol)
+- Apps can call server tools directly, receive streaming data, and update context
+- Sandboxed iframe rendering with CSP controls
+- Adopted by Claude Desktop, VS Code Copilot, Gemini CLI, Cline, Goose, Codex
+
+**Impact on our pipeline:**
+- Phase 2 (Server Builder): Should register tools with `_meta.ui` when they have apps
+- Phase 3 (App Designer): Should support the official MCP Apps SDK client-side
+- Phase 4 (Integrator): LocalBosses should support both our custom protocol AND the official one
+- This enables our servers to work in ANY MCP client, not just LocalBosses
+
+### 3. Agent Evaluation Framework (Confident AI / DeepEval)
+
+**Industry standard for agent testing has evolved to:**
+- **Component-level evaluation** — Test each piece (tool selection, parameter extraction, response generation) separately, not just end-to-end
+- **Tool Correctness metric** — Exact matching between expected and actual tool calls
+- **Task Completion metric** — LLM-scored evaluation of whether the full task was completed
+- **Trace-based debugging** — Record every step (tool chosen, params sent, output received) for root cause analysis
+
+**What we should adopt:**
+- Define test cases as `{ prompt, expected_tools, expected_params, expected_data_shape }`
+- Score tool correctness and task completion quantitatively
+- Store traces for debugging failed tests
+- Build a regression test suite that runs on every tool description change
+
+### 4. Visual Regression Tooling (2025-2026 Landscape)
+
+**Top tools for our use case:**
+- **BackstopJS** — Open source, screenshot comparison, perfect for our HTML apps. No external dependencies.
+- **Percy (BrowserStack)** — Cloud-based, AI-powered diff detection, but SaaS cost
+- **Playwright screenshots** — Built into our existing toolchain, can compare programmatically
+
+**Recommended approach:** BackstopJS for baseline management + Gemini multimodal for subjective quality analysis. This is a two-layer approach: pixel diff catches regressions, AI analysis catches design quality issues.
+
+### 5. Best MCP Servers (Competitive Analysis)
+
+**Top-starred MCP servers (June 2025):**
+1. **GitHub MCP** (15.2K ⭐) — Gold standard for API-aware agents with identity/permissions
+2. **Playwright MCP** (11.6K ⭐) — Browser automation via MCP, used for QA
+3. **AWS MCP** (3.7K ⭐) — Documentation, billing, service metadata
+4. **Context7** — Provides LLMs with up-to-date, version-specific documentation
+
+**What they do better than us:**
+- **Scoped permissions** — GitHub MCP integrates with GitHub's auth model. Our servers have flat API keys with no per-tool permission scoping.
+- **Rich error context** — Best servers return errors with suggested fixes, not just error messages
+- **Documentation as tool** — Context7's approach of serving relevant docs as context is something our servers could do (e.g., when a tool fails, suggest the right docs)
+- **Security guardrails** — Pomerium's analysis shows most MCP servers lack security. We should add at least basic rate limiting per-user and audit logging.
+
+---
+
+## UX & Design Gaps
+
+### 1. No Progressive Loading
+
+When a user sends a message and waits 2-5 seconds for the AI to respond with APP_DATA, the app sits in "loading skeleton" state. Users don't know if it's working. We need:
+
+- **Streaming indicator** — Show "AI is thinking..." or typing dots in the app itself
+- **Progressive data** — If possible, stream partial APP_DATA as it's generated
+- **Time expectation** — "Usually loads in 2-3 seconds" text in the loading state
+
+### 2. No Transition Between Data States
+
+When new APP_DATA arrives (user refines their request), the app hard-replaces all content. This is jarring. Better:
+- Cross-fade between old and new content
+- Highlight what changed (new rows, updated values)
+- Animate metric values counting up/down to new numbers
+
+### 3. No User Memory / Preferences
+
+Apps don't remember anything between sessions:
+- Last viewed filters/sort
+- Preferred view mode (grid vs list)
+- Collapsed/expanded sections
+- Recently viewed items
+
+This could use host-mediated storage (not localStorage in the iframe) via postMessage.
+
+### 4. No Mobile Considerations
+
+The responsive breakpoints stop at 280px but don't consider:
+- Touch targets (minimum 44x44px per WCAG)
+- Swipe gestures (swipe to delete, swipe between tabs)
+- Safe area insets (notch/home indicator on mobile)
+- Virtual keyboard pushing content
+
+### 5. No Multi-Language Support
+
+All apps are hardcoded English. At minimum:
+- Date/number formatting should respect locale (`toLocaleDateString` is good but inconsistent)
+- No hardcoded English strings in the templates — use a simple i18n pattern
+- RTL text support for international users
+
+### 6. No Empty State Personalization
+
+Every app's empty state says "Ask me a question in the chat to populate this view with data." This should be contextual:
+- Dashboard: "Ask me for a performance overview or specific metrics"
+- Contact Grid: "Try 'show me all active contacts' or 'contacts added this week'"
+- Pipeline: "Ask to see your sales pipeline or a specific deal stage"
+
+### 7. Missing "Magic Moment" Polish
+
+The transition from "user types message" to "beautiful app appears" should feel magical. Currently it's: loading skeleton → hard pop of content. Better:
+
+1. Typing indicator appears in chat
+2. App shows "Preparing your view..." with subtle animation
+3. Content slides in with staggered row animation
+4. Metric numbers animate from 0 to their values
+5. Charts animate/grow their bars
+
+This takes the experience from "functional" to "delightful."
+
+---
+
+## Testing Methodology Gaps
+
+### 1. No Test Data Management
+
+The QA skill has no concept of:
+- **Fixture files** — Standardized sample data for each app type
+- **Edge case data** — Empty strings, null values, extremely long text, Unicode, HTML entities
+- **Scale data** — 1000+ row datasets to test scroll performance
+- **Adversarial data** — XSS payloads in text fields (currently escaped with `escapeHtml`, but untested)
+
+### 2. No Continuous Testing
+
+Testing is positioned as a one-time phase, not continuous. Need:
+- **Pre-commit hooks** — Run static analysis on every commit
+- **CI/CD integration** — Automated screenshot comparison on PR
+- **Monitoring** — Track tool correctness rate in production over time
+- **Alerting** — If tool misrouting rate exceeds 5%, alert
+
+### 3. No Cross-Browser Testing
+
+Apps are tested in one browser (Safari via Peekaboo). Need:
+- Chrome (most common)
+- Firefox (rendering differences)
+- Mobile Safari (iOS webview)
+- Electron (if LocalBosses is desktop-wrapped)
+
+### 4. No Load Testing
+
+What happens when:
+- 10 users hit the same channel simultaneously?
+- An app receives 50 data updates per minute?
+- 30 threads are open across different channels?
+
+### 5. No Security Testing
+
+Zero mention of:
+- XSS testing (even though apps escape HTML, test it)
+- CSRF considerations in postMessage handling
+- Content Security Policy validation
+- API key exposure in client-side code
+
+### 6. No AI Response Quality Testing
+
+Beyond "did the right tool fire?", test:
+- Is the natural language response helpful?
+- Does the APP_DATA contain realistic, well-formatted data?
+- Does the AI handle ambiguous requests gracefully (asking for clarification vs guessing)?
+- Does the AI handle multi-intent messages? ("Show me contacts and create a new deal")
+
+### 7. Missing Test Types
+
+| Test Type | Current Coverage | Gap |
+|---|---|---|
+| Static analysis | ✅ Basic | No linting, no type coverage |
+| Visual testing | ⚠️ Manual screenshots | No baselines, no automated diff |
+| Functional testing | ⚠️ Manual NL testing | No automated tool routing tests |
+| Integration testing | ⚠️ Manual E2E | No scripted scenarios |
+| Accessibility testing | ❌ None | Need axe-core + keyboard + VoiceOver |
+| Performance testing | ❌ None | Need file size, render time, latency |
+| Security testing | ❌ None | Need XSS, CSP, postMessage validation |
+| Regression testing | ❌ None | Need baselines + automated comparison |
+| Chaos testing | ❌ None | Need error injection, malformed data |
+| AI quality testing | ❌ None | Need response quality scoring |
+
+---
+
+## Priority Recommendations
+
+Ranked by impact on user experience and pipeline reliability:
+
+### P0 — Critical (Do Before Shipping More Servers)
+
+1. **Fix accessibility contrast ratio** — Change secondary text from `#96989d` to `#b0b2b8` across all apps. This is a compliance issue.
+ - *Impact:* High (legal/compliance risk, affects all apps)
+ - *Effort:* Low (CSS find-and-replace)
+
+2. **Upgrade tool description formula** — Add "do NOT use when" disambiguation to every tool description template in the API Analyzer skill.
+ - *Impact:* Very high (directly reduces tool misrouting, the #1 user-facing failure)
+ - *Effort:* Medium (update templates, retroactively fix existing servers)
+
+3. **Add quantitative QA metrics** — Define Tool Correctness Rate, Task Completion Rate, APP_DATA Schema Match, and Response Latency as required metrics. Build the 20-message routing test fixture.
+ - *Impact:* High (enables data-driven quality improvement)
+ - *Effort:* Medium (define metrics, build test fixture)
+
+4. **Create test data fixtures** — Build a fixtures library with sample data for each app type, including edge cases and adversarial data.
+ - *Impact:* High (unblocks automated testing, ensures consistent QA)
+ - *Effort:* Low-medium (one-time creation)
+
+### P1 — High Priority (Next Sprint)
+
+5. **Add MCP Apps extension support** — Update Server Builder to optionally register `_meta.ui.resourceUri`. Update App Designer to support the official SDK client-side protocol.
+ - *Impact:* High (future-proofs servers for all MCP hosts, not just LocalBosses)
+ - *Effort:* Medium-high (new code patterns, update templates)
+
+6. **Add interactive patterns to App Designer** — At minimum: client-side sort, client-side filter/search, copy-to-clipboard, and expand/collapse. These turn apps from views into tools.
+ - *Impact:* High (transforms user experience from "reading" to "working")
+ - *Effort:* Medium (new template code)
+
+7. **Build automated app render tests** — Playwright script that loads each HTML app, injects fixture data, checks for console errors, and captures screenshots.
+ - *Impact:* High (catches visual regressions automatically)
+ - *Effort:* Medium (one-time script, reusable across all servers)
+
+8. **Improve system prompt engineering guidelines** — Add structured tool routing rules, few-shot examples, rationale requirements, and negative instructions to the Integrator skill.
+ - *Impact:* High (directly improves AI interaction quality)
+ - *Effort:* Medium (template updates + example creation)
+
+### P2 — Important (This Quarter)
+
+9. **Add data visualization primitives** — Line charts, donut charts, sparklines, progress bars in pure CSS/SVG. Include as copy-paste snippets in App Designer.
+ - *Impact:* Medium-high (dashboards and analytics apps become much richer)
+ - *Effort:* Medium (design + code for each viz type)
+
+10. **Add accessibility testing layer** — axe-core validation, keyboard navigation testing, color contrast auditing as part of Layer 2 in QA.
+ - *Impact:* Medium-high (compliance + usability)
+ - *Effort:* Medium (add tools, update checklist)
+
+11. **Add screenshot regression baselines** — BackstopJS integration for automated visual comparison.
+ - *Impact:* Medium (catches unintended visual changes)
+ - *Effort:* Medium (setup + baseline capture)
+
+12. **Add error boundaries to all apps** — Global error handler + try/catch in render() so apps never go blank.
+ - *Impact:* Medium (prevents worst-case "blank screen" UX)
+ - *Effort:* Low (small code addition to base template)
+
+### P3 — Nice-to-Have (This Quarter if Time)
+
+13. **Add bidirectional app communication** — `sendToHost()` pattern for refresh, navigate, and tool calls from within apps.
+14. **Add micro-interactions** — Staggered row animations, metric counting, smooth transitions.
+15. **Add dynamic tool activation** — Surface only contextually-relevant tools per interaction.
+16. **Add AI response quality scoring** — Beyond tool correctness, evaluate helpfulness and data quality.
+17. **Add chaos testing** — Error injection, malformed data, rapid-fire interactions.
+18. **Personalize empty states** — Context-specific prompts per app type.
+
+---
+
+## Appendix: Contrast Ratio Audit
+
+| Element | Current Color | Background | Ratio | WCAG AA | Fix |
+|---------|--------------|------------|-------|---------|-----|
+| Primary text | #dcddde | #1a1d23 | 10.4:1 | ✅ Pass | — |
+| Secondary text | #96989d | #1a1d23 | **3.7:1** | ❌ Fail | Use #b0b2b8 (5.0:1) |
+| Secondary text | #96989d | #2b2d31 | **3.2:1** | ❌ Fail | Use #b0b2b8 (4.3:1) or #b8babe (5.0:1) |
+| Heading text | #ffffff | #1a1d23 | 15.0:1 | ✅ Pass | — |
+| Accent | #ff6d5a | #1a1d23 | 4.9:1 | ✅ Pass | — |
+| Accent on card | #ff6d5a | #2b2d31 | 4.2:1 | ⚠️ Fail (normal text) | OK for large text only |
+| Table header | #96989d | #2b2d31 | **3.2:1** | ❌ Fail | Use #b0b2b8 |
+| Success badge text | #43b581 | badge bg | 3.8:1 | ⚠️ Marginal | Use #4cc992 |
+
+---
+
+*End of review. These recommendations are prioritized to maximize impact on user experience while maintaining the pipeline's efficiency for mass-producing MCP servers. The most critical items (contrast fix, tool descriptions, QA metrics) should be addressed before shipping the next batch of servers.*
diff --git a/mcp-jest.generated.json b/mcp-jest.generated.json
new file mode 100644
index 0000000..719ee58
--- /dev/null
+++ b/mcp-jest.generated.json
@@ -0,0 +1,143 @@
+{
+ "server": {
+ "command": "node",
+ "args": [
+ "/Users/jakeshore/.clawdbot/workspace/mcp-diagrams/mcp-servers/calendly/dist/index.js"
+ ],
+ "env": {
+ "CALENDLY_API_KEY": "dummy_for_discovery"
+ }
+ },
+ "tests": {
+ "tools": {
+ "list_events": {
+ "args": {
+ "count": 50,
+ "min_start_time": "test_value",
+ "max_start_time": "test_value",
+ "status": "active",
+ "page_token": "test_value"
+ },
+ "expect": "content && content.length > 0"
+ },
+ "list_events:empty-min_start_time": {
+ "args": {
+ "count": 50,
+ "min_start_time": "",
+ "max_start_time": "test_value",
+ "status": "active",
+ "page_token": "test_value"
+ },
+ "expect": "exists"
+ },
+ "list_events:empty-max_start_time": {
+ "args": {
+ "count": 50,
+ "min_start_time": "test_value",
+ "max_start_time": "",
+ "status": "active",
+ "page_token": "test_value"
+ },
+ "expect": "exists"
+ },
+ "list_events:empty-status": {
+ "args": {
+ "count": 50,
+ "min_start_time": "test_value",
+ "max_start_time": "test_value",
+ "status": "",
+ "page_token": "test_value"
+ },
+ "expect": "exists"
+ },
+ "list_events:empty-page_token": {
+ "args": {
+ "count": 50,
+ "min_start_time": "test_value",
+ "max_start_time": "test_value",
+ "status": "active",
+ "page_token": ""
+ },
+ "expect": "exists"
+ },
+ "get_event": {
+ "args": {
+ "event_uuid": "test-id-123"
+ },
+ "expect": "content && content.length > 0"
+ },
+ "cancel_event": {
+ "args": {
+ "event_uuid": "test-id-123",
+ "reason": "test_value"
+ },
+ "expect": "content && content.length > 0"
+ },
+ "cancel_event:empty-reason": {
+ "args": {
+ "event_uuid": "test-id-123",
+ "reason": ""
+ },
+ "expect": "exists"
+ },
+ "list_event_types": {
+ "args": {
+ "count": 50,
+ "active": true,
+ "page_token": "test_value"
+ },
+ "expect": "content && content.length > 0"
+ },
+ "list_event_types:empty-page_token": {
+ "args": {
+ "count": 50,
+ "active": true,
+ "page_token": ""
+ },
+ "expect": "exists"
+ },
+ "get_availability": {
+ "args": {
+ "event_type_uuid": "test-id-123",
+ "start_time": "test_value",
+ "end_time": "test_value"
+ },
+ "expect": "content && content.length > 0"
+ },
+ "list_invitees": {
+ "args": {
+ "event_uuid": "test-id-123",
+ "count": 50,
+ "status": "active",
+ "page_token": "test_value"
+ },
+ "expect": "content && content.length > 0"
+ },
+ "list_invitees:empty-status": {
+ "args": {
+ "event_uuid": "test-id-123",
+ "count": 50,
+ "status": "",
+ "page_token": "test_value"
+ },
+ "expect": "exists"
+ },
+ "list_invitees:empty-page_token": {
+ "args": {
+ "event_uuid": "test-id-123",
+ "count": 50,
+ "status": "active",
+ "page_token": ""
+ },
+ "expect": "exists"
+ },
+ "get_user": {
+ "args": {},
+ "expect": "content && content.length > 0"
+ }
+ },
+ "resources": {},
+ "prompts": {},
+ "timeout": 30000
+ }
+}
\ No newline at end of file
diff --git a/memory/2026-02-04.md b/memory/2026-02-04.md
new file mode 100644
index 0000000..5c90497
--- /dev/null
+++ b/memory/2026-02-04.md
@@ -0,0 +1,109 @@
+# 2026-02-04
+
+## OpenClaw Upwork Service Launch
+- Jake is creating an Upwork freelance service called "OpenClaw Setup" to set up Clawdbot/OpenClaw for clients
+- Category: Development & IT > AI & Machine Learning > Chatbots
+- **3 pricing tiers decided:**
+ - Starter: $2,499 (1 channel, 3-5 skills, 7-day delivery, 7 days support)
+ - Standard: $7,499 (3 channels, 2 custom MCP integrations, 14-day delivery, 30 days support)
+ - White Glove: $24,999 (5+ channels, 5+ MCP integrations, visual dashboards, 30-day delivery, 90 days support)
+- Jake approved $24,999 for tier 3 (I recommended over his initial $14,999-$19,999 range)
+- Search tags: ai agent development, claude, agentic ai, clawdbot, openclaw
+- Removed Python and HubSpot from dev tech (Clawdbot is Node/TypeScript only)
+- Recommended adding: personal ai assistant, ai automation, mcp server, ai chatbot setup, business automation, ai integration
+
+## OpenClaw Gallery Assets Created
+- **15 Nano Banana Pro graphics** generated across 3 parallel agent batches:
+ - Branded: hero banner, pricing tiers, architecture diagram, MCP tools honeycomb, before/after
+ - Capabilities: live phone monitor, batch funnel generation, AI agent factory, multi-channel command, voice message system
+ - More: screen monitoring, cron scheduled intel, memory system, node pairing, integrations grid
+- **6 polished UI mockups** (regenerated from raw screenshots via Nano Banana Pro — Jake said raw screenshots looked too dev-build)
+- **2 PDFs**: capabilities doc + service packages doc (converted via Pandoc → Puppeteer)
+- **90-second Remotion promo video** (22.3MB, 1080p, H.264):
+ - 10 scenes, 6 reusable animation components
+ - All frame-based animations (no CSS hacks)
+ - Editable Remotion project at `openclaw-gallery/video/openclaw-promo/`
+- All assets in: `~/.clawdbot/workspace/openclaw-gallery/`
+
+## LocalBosses App Fixes (from earlier session)
+- **Fixed channel-to-MCP routing:** CRM was loading n8n apps instead of GHL apps. Same for Google Ads and Meta Ads channels. Fixed mcpApps arrays in channels.ts
+- **Added intent-based smart filtering:** Apps now only open when relevant to user's message (e.g., "show me my pipeline" → Pipeline Board + Opportunity Card only). No apps on generic messages.
+- **Fixed MCP Apps handshake:** GHL apps use full MCP Apps SDK which sends `ui/initialize` request and waits for response. Old bridge was sending one-way notification. Rewrote `useMcpBridge.ts` to properly implement host protocol.
+- **Added all MCP app directories** to APP_DIRS in route.ts and mcp-apps/route.ts
+- **Expired Anthropic API key** in localbosses-app .env.local still needs fixing
+
+## Sub-agent _meta Labels
+- All 643 tools across 5 MCPs (GHL, Google Ads, Meta Ads, Google Console, Twilio) now have proper _meta labels (category/access/complexity)
+- All 5 compiled clean
+
+## Learning Guide
+- Created comprehensive ~50KB learning guide at `jakes-learning-guide.md`
+- 10-module syllabus, 60+ AI prompts, YouTube links, 5 progressive projects
+- Sent to +1 (516) 761-1826 via iMessage per Jake's request
+
+## iMessage Send
+- Sent learning guide file to +15167611826 via imsg CLI (Jake requested from Discord)
+
+## MCP Pipeline Factory (Autonomous Operator System)
+- Built complete autonomous pipeline operator for all 35+ MCP servers
+- **Discord category "MCP PIPELINE"** with 7 channels:
+ - #pipeline-decisions (1468757982140567676) — Jake reacts to approve/reject
+ - #design-reviews (1468757983428083762) — mockup + screenshot approvals
+ - #pipeline-standup (1468757984384389234) — daily 9 AM summary
+ - #build-log (1468757986422820864) — every card movement
+ - #blockers (1468757987412938945) — stuck MCPs
+ - #mcp-strategy (1468757988448669829) — strategic discussions
+ - #shipped (1468757989497507870) — victory laps
+- **Infrastructure:**
+ - `mcp-command-center/state.json` — shared state between dashboard and Buba
+ - `mcp-command-center/PIPELINE-OPERATOR.md` — full operator playbook
+ - Dashboard at `http://192.168.0.25:8888` — drag-drop kanban, dark theme
+- **Cron jobs:**
+ - `mcp-pipeline-standup` — daily 9 AM ET
+ - `mcp-pipeline-heartbeat` — every 2 hours
+- All 35 MCPs loaded at Stage 8 (Integration Complete)
+
+## 8-Week AI Agent Framework Study Plan
+- Created comprehensive 1,497-line curriculum at `agent-repos-study-plan.md` (61KB)
+- 8 weeks covering: Pydantic-AI → MS Agent Framework → Agent-S → GPT Researcher → Yao → MetaGPT → ElizaOS → Capstone
+- Daily structure: Architecture Monday, Hello World Tuesday, Intermediate Wednesday, Source Code Thursday, Integration Project Friday
+- Jake added Week 7 ElizaOS addendum after debate about deployment gap
+- Posted full breakdown to #trending-agent-repos
+
+## CloseBot MCP — Complete
+- **119 tools** across 14 modules (8 tool groups + 6 UI apps)
+- **4,656 lines** of TypeScript, 17 compiled JS files in `dist/`
+- Location: `closebot-mcp/`
+- Needs `CLOSEBOT_API_KEY` env var to test live
+- Not yet tested against live API
+
+## MCP Factory Testing Infrastructure
+- Built complete testing toolchain in `factory-tools/`:
+ - `mcp-jest` (global CLI) — discover, test, validate, watch mode
+ - `mcp-validator` (Python) — formal protocol compliance reports
+ - `mcp-add` (global CLI) — one-liner customer install
+ - MCP Inspector — visual debug UI
+- **Found and fixed protocol bug** in all 30 servers: unknown tool errors returning soft failure instead of proper `McpError(MethodNotFound)`
+- Patched all 30 source files, rebuilt all 30 — zero build failures
+- **Result: 30/30 servers now score 100/100 FULL compliance**
+- 60 test config files, 702 auto-generated test cases ready for live API testing
+
+## Das Projects
+- **Genre Universe Animation:** Delivered 1080p60 Manim animation to #manim
+ - 30 animated sequences, 7 acts (title → coordinate space → genre clusters → Das reveal → bridge connections → attribute radar → finale)
+ - 3Blue1Brown style, shows Das's unique position bridging singer-songwriter and bass music
+ - Location: `manim-mcp/media/videos/das_genre_universe/1080p60/DasGenreUniverse.mp4`
+- **Server Icon:** Set Das Discord server icon via API (dreamy pastel clouds, 3D pink "DAS" letters)
+
+## Decisions Made
+- MCP Apps > old MCP UI terminology (confirmed current as of Feb 4)
+- Two-gate visual approval for Stage 7 (mockup first, then screenshot)
+- Buba is autonomous pipeline operator, Jake is human-in-the-loop for key decisions
+- ElizaOS added to study plan as Week 7 (deployment infrastructure focus)
+- Testing strategy decision pending for Stage 8→9 advancement
+
+## Next Steps
+- Jake reviewing OpenClaw video + gallery for Upwork listing finalization
+- Testing strategy decision needed (structural vs live API vs hybrid)
+- API credentials needed for live MCP testing
+- SongSense build still queued
diff --git a/memory/burton-method-research-intel.md b/memory/burton-method-research-intel.md
index c959466..e450e02 100644
--- a/memory/burton-method-research-intel.md
+++ b/memory/burton-method-research-intel.md
@@ -1,22 +1,30 @@
# Burton Method Competitor Research Intel
-## Week of February 2, 2026
+## Week of February 3, 2026
### Key Developments
-- **7Sage:** Major product change — replacing ALL pre-made problem sets with adaptive drilling on March 1st. Auto-adjusting difficulty in development. Tutor program expanding. Chaos window for displaced students.
-- **PowerScore:** Brand fracture deepening. Jon Denning solo podcast about "vision post-Killoran." Barbri corporate branding more visible. Free webinars Feb 3 & 18. Biggest poach opportunity in years.
-- **LSAT Demon:** Content machine, no new product. Daily podcast Ep 542+. 157→173 success story, veteran outreach. Stealth RC change coverage. Steady-state.
-- **Blueprint:** Full SEO commodity play — "Top Law Schools in [State]" articles. Going wide, not deep. No new features.
-- **Kaplan:** $200 off promo expired Jan 31. Premium Prep 2026 book out. No innovation. Post-promo shoppers available.
-- **Magoosh:** Still asleep. Boilerplate updates only.
-- **Hey Future Lawyer:** Ben Parker active on 31.6% applicant surge. "Prep is junk food" positioning. Most spiritually similar competitor.
-- **LSAC:** Feb LSAT dates Feb 6-7, scores Feb 25. Applicants up 33%, applications up 27%. Black/AA applicants up 38%, first-gen up 38%.
-- **AdeptLR:** Still drilling-only with 52% faster LR improvement claim. LawHub import. PhD algorithm. Complement not replacement — monitor for expansion.
+- **7Sage:** MAJOR REVERSAL — After announcing March 1 deadline to kill pre-made problem sets, backtracked and kept them "for the time being" after community pushback. Still building auto-adjusting difficulty. Trust erosion + platform direction uncertainty.
+- **PowerScore:** Brand fracture confirmed across podcast platforms. Killoran departure official. Denning solo. Barbri corporate creep. Free webinars Feb 3 & 18 = student retention play.
+- **LSAT Demon:** Steady state. Daily podcast Ep 542+. New "Tuition Roll Call" feature in Scholarship Estimator (509 data viz). Live classes running. No core product innovation.
+- **Blueprint:** Published strong article on Jan 2026 RC comparative passage removal. Practice exams updated with tablet mode. Continuing SEO commodity play ("Top Law Schools in [State]").
+- **Kaplan:** $200 off promo STILL running (was supposed to expire Jan 31 — extended). $750 off bar review through Feb 27. Up to 25% off general exam prep. Pure discount play, zero innovation.
+- **Magoosh:** Still asleep. Updated lessons/schedules (boilerplate). Free prep for LSAC fee waiver recipients. No innovation.
+- **Hey Future Lawyer:** Ben Parker back after ~2 week illness. Podcast on 2026 being "most chaotic cycle ever." Anti-corporate "prep is junk food" positioning continues.
+- **LSAC:** Feb LSAT dates Feb 6-7, scores Feb 25. April 2026 dates: Apr 9-11 (reg deadline Feb 26). Remote proctoring continues. Applicant surge: up 33%, applications up 27%.
+- **AdeptLR:** AI-first adaptive drilling expanding question bank. Now includes PrepTests 1-18, 21, 23, 101-159, A, Feb 1997. Still LR + RC only. Monitor for curriculum expansion.
### Top Action Items
-1. Prepare post-Feb LSAT content for Feb 7-25 limbo window
-2. Target PowerScore students during brand fracture
-3. Watch 7Sage March 1 drilling transition for confused students
+1. **Feb 7-25 limbo content** — Post-LSAT content for score-anxious students
+2. **Target PowerScore refugees** — Brand fracture + Barbri energy = displaced students
+3. **RC change content** — Blueprint beat everyone; Burton Method needs own coverage
+4. **7Sage confusion** — Drilling reversal creates trust gap; position stability
+
+---
+
+## Previous Weeks (Compressed)
+
+### Week of February 2, 2026
+- 7Sage announced drilling transition for March 1 (later reversed). PowerScore brand fracture deepening with Denning solo. LSAT Demon content machine, no product changes. Blueprint SEO play. Kaplan $200 off promo supposedly expired. Magoosh dormant. Hey Future Lawyer active on applicant surge. LSAC Feb dates Feb 6-7. AdeptLR monitoring as AI-first drilling competitor.
---
diff --git a/memory/mcp-api-keys-progress.md b/memory/mcp-api-keys-progress.md
new file mode 100644
index 0000000..ec2465e
--- /dev/null
+++ b/memory/mcp-api-keys-progress.md
@@ -0,0 +1,74 @@
+# MCP API Keys Acquisition Progress
+*Started: 2026-02-04 22:35 EST*
+
+## Status Legend
+- ✅ KEY OBTAINED + TESTED
+- 🔑 KEY OBTAINED, NOT YET TESTED
+- 🔄 SIGNUP IN PROGRESS
+- ❌ STUCK — NEED JAKE
+- ⏳ QUEUED
+- 🚫 ENTERPRISE ONLY — SKIPPED
+
+## Already Have Keys
+| MCP | Status | Notes |
+|-----|--------|-------|
+| GoHighLevel | ✅ | GHL_API_KEY already in .env |
+
+## Tier 1 — Free Tier, Simple API Key
+| MCP | Status | Key Var | Notes |
+|-----|--------|---------|-------|
+| Trello | ✅ | TRELLO_API_KEY + TRELLO_TOKEN | TESTED & WORKING 22:48 EST |
+| Mailchimp | ⏳ | MAILCHIMP_API_KEY | |
+| Brevo | ⏳ | BREVO_API_KEY | |
+| ClickUp | ⏳ | CLICKUP_API_KEY | |
+| Calendly | ⏳ | CALENDLY_API_KEY | |
+| Freshdesk | ⏳ | FRESHDESK_API_KEY | |
+
+## Tier 2 — Free Trial
+| MCP | Status | Key Var | Notes |
+|-----|--------|---------|-------|
+| Pipedrive | ⏳ | PIPEDRIVE_API_TOKEN | |
+| Close CRM | ⏳ | CLOSE_API_KEY | |
+| Zendesk | ⏳ | ZENDESK_SUBDOMAIN + EMAIL + TOKEN | |
+| Squarespace | ⏳ | SQUARESPACE_API_KEY | |
+| Wrike | ⏳ | WRIKE_ACCESS_TOKEN | |
+| HelpScout | ⏳ | HELPSCOUT_ACCESS_TOKEN | |
+
+## Tier 3 — Developer App Setup
+| MCP | Status | Key Var | Notes |
+|-----|--------|---------|-------|
+| Twilio | ⏳ | TWILIO_ACCOUNT_SID + API_KEY + API_SECRET | |
+| Wave | ⏳ | WAVE_API_TOKEN | |
+| Meta Ads | ⏳ | META_ACCESS_TOKEN + APP_ID + APP_SECRET | |
+| Google Console | ⏳ | GSC_OAUTH_CLIENT_ID + CLIENT_SECRET | |
+
+## Tier 4 — Enterprise/Business (Likely Need Jake)
+| MCP | Status | Notes |
+|-----|--------|-------|
+| BambooHR | ⏳ | HR platform, business-only |
+| ServiceTitan | ⏳ | Enterprise field service |
+| Toast | ⏳ | Restaurant POS |
+| Clover | ⏳ | Merchant POS |
+| TouchBistro | ⏳ | Restaurant POS |
+| FieldEdge | ⏳ | Field service, enterprise |
+| Rippling | ⏳ | Enterprise HR |
+| Gusto | ⏳ | Payroll, business |
+| HousecallPro | ⏳ | Home services |
+| Jobber | ⏳ | Home services |
+| Keap | ⏳ | CRM, business |
+| Lightspeed | ⏳ | POS, need store |
+| Basecamp | ⏳ | OAuth app needed |
+| BigCommerce | ⏳ | Need store |
+| Constant Contact | ⏳ | Email marketing |
+| FreshBooks | ⏳ | Accounting |
+| Acuity | ⏳ | Squarespace-owned scheduling |
+| CloseBot | ⏳ | GHL chatbot builder |
+
+## Keys Obtained Log
+
+
+### 2026-02-04 22:48 EST — Trello ✅
+- TRELLO_API_KEY=af37c57e81cb415b8f06f6fe9c59ec44
+- TRELLO_TOKEN=ATTA6d77ed10178a36f68f0b8909a195b68bc1572da5cc12314e846152d654c8ccc3FDBE22F8
+- Saved to: mcp-diagrams/mcp-servers/trello/.env
+- API test: SUCCESS (returned username jake32274268)
diff --git a/mixed-use-entertainment-intel.md b/mixed-use-entertainment-intel.md
index 543e5cd..d9f0daa 100644
--- a/mixed-use-entertainment-intel.md
+++ b/mixed-use-entertainment-intel.md
@@ -1,6 +1,6 @@
# Mixed-Use Entertainment Development Intel Report
-**Last Updated:** February 2, 2026
+**Last Updated:** February 4, 2026
**Coverage:** Last 90 days (Nov 2025 – Feb 2026) + key mid-2025 announcements
**Sources:** Bisnow, REBusinessOnline, Sports Business Journal, BizJournals, Blooloop, GlobeSt, Connect CRE, PR Newswire, general news
@@ -120,4 +120,31 @@ These projects are confirmed to be in fundraising, seeking JV partners, or have
---
+## 🆕 NEW FINDS — February 4, 2026 Scan
+
+### 🔴 HIGH PRIORITY — Capital/Partner Opportunities
+
+| Project | Location | Developer | Est. Cost/Size | Stage | Key Details | Capital/Partner Status | Key People | Source |
+|---------|----------|-----------|---------------|-------|-------------|----------------------|------------|--------|
+| **Rock Creek Entertainment District** | Norman, OK (Rock Creek Rd & 24th Ave NW, near I-35) | Team Norman (coalition) / OU Foundation / City of Norman | **$1B** / multi-acre district | **LEGAL CLEARANCE GRANTED FEB 3, 2026** — OK Supreme Court dismissed petition challenge; phasing plan approved 8-1 by city council; construction imminent | New OU arena (basketball + gymnastics), dining district, entertainment venue, retail centers, parking garage. Developer issued notice of default to city (risked $230M lawsuit) forcing the vote forward. | **$600M via TIF (public)** — sales tax revenue from district repays debt. **$400M+ from private donors/investors** — specific private capital partners NOT publicly identified. 80/20 private/public split claimed. With legal challenges now cleared, capital deployment begins immediately. **Significant private capital opportunity** — $400M+ in private investment needed with no named institutional backers yet. | Mayor of Norman; OU Foundation; "Team Norman" coalition | [KOCO](https://www.koco.com/article/norman-rock-creek-entertainment-district-moves-forward-oklahoma-supreme-court/70236302) / [KGOU](https://www.kgou.org/politics-and-government/2026-02-03/oklahoma-supreme-court-clears-path-for-rock-creek-entertainment-district-construction) |
+
+### 🟡 SIGNIFICANT — Recently Announced / Advancing
+
+| Project | Location | Developer | Est. Cost/Size | Stage | Key Details | Capital/Funding Status | Key People | Source |
+|---------|----------|-----------|---------------|-------|-------------|----------------------|------------|--------|
+| **Cascadia Entertainment District** | Greeley, CO (Highway 34, west side) | The Water Valley Company / City of Greeley | **Multi-billion est.** (not publicly specified) / 300 acres | Pre-Development Services Agreement approved Apr 2025; construction starting 2026; major components by mid-2028 | 8,600-seat arena (Colorado Eagles, NHL Avalanche affiliate), year-round indoor waterpark resort, full-service conference hotel, regional transit hub, restaurants/shops, ~11,000 housing units. 50 miles north of Denver with highway/rail/DIA access. | **Public-private partnership** — City incentives + Water Valley Company private investment. Multiple future council actions still required (lease agreement, land acquisition, business incentive agreements). Greeley Merge infrastructure project supporting it. Scale suggests major capital partners needed beyond Water Valley. | Martin Lind (CEO, Water Valley Company); Mayor John Gates; City Manager Raymond C. Lee III | [CCD Magazine](https://ccdmag.com/latest/greeley-eagles-development/) |
+| **USF Fletcher District** | Tampa, FL (former Claw golf course, USF campus) | ACE Fletcher LLC (Capstone Development Partners, Capstone Communities, Aureate Development, Ellison Development) / USF | **$268M** / 138 acres (Phase 1: 27 acres) | Approved by FL Board of Governors Nov 2025; **groundbreaking early 2026** | P3 mixed-use: 700 student housing beds, 150 market-rate multifamily, 150 cottages, hotel, research facilities, conference space, retail. $509M rental revenue to USF over 40 years. Long-term ground subleases. | **Primarily private investment** through ACE Fletcher LLC consortium. P3 structure with university. Development team already assembled (4-company JV). Less entertainment-focused — more academic/institutional mixed-use. | USF Board of Trustees; ACE Fletcher LLC partners | [BldUp](https://www.bldup.com/posts/approved-mixed-use-district-poised-to-transform-usf-campus-landscape-with-2026-groundbreaking) |
+
+---
+
+### Updated Capital Opportunity Scoring
+
+**Added to Tier 1 — ACTIVE CAPITAL NEEDS:**
+- **Rock Creek Entertainment District, Norman, OK** — $1B project with $400M+ private capital needed and NO named institutional backers. Legal clearance just granted Feb 3, 2026. Construction timeline is urgent (developer already issued default notice). Ground-floor opportunity for private capital/equity partner.
+
+**Added to Tier 2 — POSSIBLE CAPITAL/PARTNER NEEDS:**
+- **Cascadia, Greeley, CO** — 300-acre mega-district with arena, waterpark, hotel, 11,000 housing units. Multiple council approvals still needed. Water Valley Company likely needs JV partners for scale of this build-out.
+
+---
+
*Report compiled from public sources. Capital status assessments are analytical inferences — verify directly with principals before outreach.*
diff --git a/openclaw-gallery/UPWORK_REFERENCE.md b/openclaw-gallery/UPWORK_REFERENCE.md
new file mode 100644
index 0000000..1a38845
--- /dev/null
+++ b/openclaw-gallery/UPWORK_REFERENCE.md
@@ -0,0 +1,188 @@
+# MCP Engage — Upwork Listing Reference Pack
+*Everything you need to fill out the Upwork service listing*
+
+---
+
+## Suggested Upwork Title
+**AI Operations System Setup — Custom MCP Integrations, Multi-Channel AI Assistants & Automation (OpenClaw/Clawdbot)**
+
+Alt: **Managed AI System Setup — OpenClaw, Clawdbot, MCP Servers, Business Automation**
+
+---
+
+## One-Liner Tagline
+> We build and deploy fully-managed AI operations systems — connecting all your tools, channels, and workflows under one intelligent assistant.
+
+---
+
+## Service Description (Upwork-ready copy)
+
+### What We Do
+
+**MCP Engage** provides managed setup of AI operations systems for businesses. We specialize in **OpenClaw** (built on the open-source Clawdbot platform) — but we can set up and configure any AI system your business needs.
+
+We don't just install software — we architect, build, and deploy complete AI-powered business operations, including:
+
+- **Custom MCP Server Integrations** — connecting your existing tools (CRM, marketing, support, payments, HR) via Model Context Protocol
+- **Multi-Channel AI Assistants** — one AI brain responding across Discord, iMessage, Telegram, Slack, WhatsApp, SMS, and Web
+- **Visual Dashboards & Apps** — pipeline boards, analytics dashboards, contact grids, and custom business intelligence interfaces
+- **Automation Workflows** — n8n workflows, scheduled intelligence, competitor monitoring, batch generation
+- **AI Agent Factories** — mass-producing MCP projects, funnels, and coding tasks using parallel AI agents
+
+### What Makes Us Different
+
+- **240+ pre-built tools** across 30+ MCP server integrations, ready to connect to your stack
+- **Your infrastructure, your data** — runs on YOUR hardware, no cloud vendor lock-in
+- **Open source foundation** — full transparency, no recurring SaaS fees
+- **Battle-tested** — we've built 30 MCP servers, 643+ tools, 65 visual apps, and deployed production systems
+- **We eat our own cooking** — our AI agents built most of this infrastructure using the same systems we set up for you
+
+### Who This Is For
+
+- Agency owners managing multiple clients
+- SaaS operators needing workflow automation
+- Real estate professionals (CRM, calling, follow-ups)
+- E-commerce businesses (support, marketing, analytics)
+- Solo entrepreneurs wanting team-level operational capacity
+- Any business ready to integrate AI into their daily operations
+
+---
+
+## Pricing Tiers
+
+### Starter — $2,499
+- Clawdbot installed & configured
+- 1 messaging channel connected
+- 3-5 pre-built skills
+- Memory system + 2-3 scheduled tasks
+- 1 hour onboarding + 7 days support
+- **Delivery: 5-7 business days**
+
+### Standard — $7,499
+- Everything in Starter
+- Up to 3 messaging channels
+- 2 custom MCP server integrations
+- 3-5 bespoke skills
+- Smart model routing
+- Node pairing (phone/device control)
+- 2 hours strategy calls + 30 days support
+- **Delivery: 10-14 business days**
+
+### White Glove — $24,999
+- Everything in Standard
+- Up to 5 channels + 5+ MCP integrations
+- Custom visual dashboards
+- Up to 10 n8n automation workflows
+- Competitor research pipeline
+- Sub-agent architecture
+- 5 hours strategy + 90 days support + 3 months maintenance
+- **Delivery: 21-30 business days**
+
+---
+
+## Key Stats & Proof Points
+
+| Metric | Value |
+|--------|-------|
+| MCP Servers Built | 30+ |
+| Total Tools Created | 643+ |
+| Visual Apps Built | 65 |
+| Channels Supported | 7 (Discord, iMessage, Telegram, Slack, WhatsApp, SMS, Web) |
+| Landing Page Funnels | 30+ generated |
+| Pre-built Integrations | GoHighLevel, Twilio, Meta Ads, Google Console, Close, + 25 more |
+
+---
+
+## Upwork Tags / Skills to List
+
+`AI Integration` · `MCP (Model Context Protocol)` · `Business Automation` · `AI Chatbot Development` · `API Integration` · `CRM Integration` · `Node.js` · `TypeScript` · `n8n Automation` · `AI Operations` · `Claude AI` · `OpenAI` · `Discord Bot` · `Telegram Bot` · `Full Stack Development`
+
+---
+
+## Portfolio Assets — File Paths
+
+### Promo Video (LATEST — v4)
+| File | Size | Path |
+|------|------|------|
+| Full quality | 24MB | `video/openclaw-promo-v4.mp4` |
+| Compressed | 6.7MB | `video/openclaw-promo-v4-sm.mp4` |
+
+### AI-Generated Graphics (15 images, ~5MB each)
+| Image | Path |
+|-------|------|
+| Hero Banner | `graphics/hero-banner.png` |
+| Before/After | `graphics/before-after.png` |
+| Architecture Diagram | `graphics/architecture-diagram.png` |
+| AI Agent Factory | `graphics/ai-agent-factory.png` |
+| Batch Funnel Generation | `graphics/batch-funnel-generation.png` |
+| Integrations Grid | `graphics/integrations-grid.png` |
+| MCP Tools Honeycomb | `graphics/mcp-tools-honeycomb.png` |
+| Live Phone Monitor | `graphics/live-phone-monitor.png` |
+| Multi-Channel Command | `graphics/multi-channel-command.png` |
+| Memory System | `graphics/memory-system.png` |
+| Pricing Tiers | `graphics/pricing-tiers.png` |
+| Screen Monitoring | `graphics/screen-monitoring.png` |
+| Voice Message System | `graphics/voice-message-system.png` |
+| Cron Scheduled Intel | `graphics/cron-scheduled-intel.png` |
+| Node Pairing | `graphics/node-pairing.png` |
+
+### Real Platform Screenshots (6 images, ~4.5MB each)
+| Screenshot | Path |
+|------------|------|
+| Full UI Overview | `screenshots/localbosses-full-ui.png` |
+| CRM Channel | `screenshots/crm-channel.png` |
+| Automations Channel | `screenshots/automations-channel.png` |
+| Twilio Channel | `screenshots/twilio-channel.png` |
+| Google Console Channel | `screenshots/google-console-channel.png` |
+| Competitor Research | `screenshots/competitor-research-channel.png` |
+
+### Funnel Screenshots (15 images)
+Located in `video/openclaw-promo/public/funnels/`:
+- funnel-servicetitan.png, funnel-jobber.png, funnel-closecrm.png
+- funnel-rippling.png, funnel-freshbooks.png, funnel-housecallpro.png
+- funnel-touchbistro.png, funnel-wave.png, funnel-bamboohr.png
+- funnel-lightspeed.png, funnel-fieldedge.png, funnel-clover.png
+- funnel-ai-crm.png, funnel-ai-analytics.png, funnel-ai-marketing.png
+
+### PDF Documents
+| Document | Path |
+|----------|------|
+| Service Packages (detailed) | `pdfs/openclaw-packages.pdf` |
+| Capabilities Overview | `pdfs/openclaw-capabilities.pdf` |
+
+### Source Markdown (for copy-paste)
+| Document | Path |
+|----------|------|
+| Packages (full copy) | `pdfs/openclaw-packages.md` |
+| Capabilities (full copy) | `pdfs/openclaw-capabilities.md` |
+
+---
+
+## FAQ Copy (for listing)
+
+**Q: Do I need technical knowledge?**
+A: No. We handle all technical implementation. You just tell us what you want automated.
+
+**Q: What if I want to add more integrations later?**
+A: Most integrations take 3-5 days and cost $500-$2,000 depending on complexity.
+
+**Q: What AI models work with this?**
+A: Anthropic Claude, OpenAI GPT-4, Google Gemini, and any OpenAI-compatible API.
+
+**Q: Do I keep paying after setup?**
+A: No recurring fees to us. Just your AI model API costs (typically $20-$500/month depending on usage). You own the system.
+
+**Q: Is this open source?**
+A: Yes — Clawdbot is MIT licensed. Full code access. We provide professional implementation services.
+
+**Q: Can you set up other AI systems besides OpenClaw?**
+A: Absolutely. MCP Engage provides managed setup for any AI operations system — OpenClaw, custom agents, or whatever your business needs.
+
+---
+
+## All files are relative to:
+`/Users/jakeshore/.clawdbot/workspace/openclaw-gallery/`
+
+---
+
+*Generated by Buba — 2026-02-04*
diff --git a/openclaw-gallery/pdfs/openclaw-capabilities.md b/openclaw-gallery/pdfs/openclaw-capabilities.md
new file mode 100644
index 0000000..3aaf26a
--- /dev/null
+++ b/openclaw-gallery/pdfs/openclaw-capabilities.md
@@ -0,0 +1,194 @@
+# OpenClaw
+## AI Operations Platform Setup Service
+
+---
+
+## What is OpenClaw?
+
+OpenClaw is a **fully-configured AI assistant framework** built on Clawdbot—an open-source platform designed for your business operations.
+
+### Key Differentiators
+
+- **Your Infrastructure, Your Data** — Runs on YOUR hardware with no cloud vendor lock-in and complete data privacy
+- **Universal Tool Integration** — Connects to all your existing tools via MCP (Model Context Protocol)
+- **True Multi-Channel** — Works seamlessly across Discord, iMessage, Telegram, Slack, WhatsApp, SMS, and Web
+- **Open Source Foundation** — Built on Clawdbot, giving you full transparency and control
+
+---
+
+## Core Capabilities
+
+### Multi-Channel AI Assistant
+Your assistant responds intelligently across all your messaging platforms, maintaining context and preferences regardless of where you reach out.
+
+### 240+ Pre-Built Tools
+Access to over 240 tools across 30+ MCP server integrations, ready to connect to your existing business systems.
+
+### Visual Dashboards & Apps
+Custom visual interfaces including:
+- Pipeline boards for deal tracking
+- Real-time analytics dashboards
+- Contact management grids
+- Custom business intelligence views
+
+### Live Phone Call Intelligence
+Monitor calls in real-time with human interrupt capabilities—take over when needed, let AI handle when appropriate.
+
+### Batch Generation Engine
+Generate at scale:
+- 30 complete sales funnels
+- 50 personalized email sequences
+- 100 social media posts
+All with consistent brand voice and strategic alignment.
+
+### AI Agent Factory
+Spawn parallel agents for complex, multi-step tasks. Each sub-agent focuses on its specific objective while the main system orchestrates workflow.
+
+### Persistent Memory System
+Your assistant remembers:
+- Business preferences and decisions
+- Past conversations and context
+- Client details and interaction history
+- Strategic priorities and goals
+
+### Scheduled Intelligence
+Automated insights delivered on your schedule:
+- Morning briefings with actionable priorities
+- Competitor monitoring and market alerts
+- Daily performance reports
+- Weekly strategic summaries
+
+### Device Pairing & Control
+Connect additional devices:
+- Phone camera access for visual tasks
+- Remote Mac control
+- Screen monitoring and automation
+- Multi-device workflow orchestration
+
+### Native Voice Messages
+Generate authentic voice messages as native iMessage and WhatsApp voice bubbles—not attachments, but real voice interface elements.
+
+---
+
+## Integrations
+
+OpenClaw includes pre-built MCP server connectors for 30+ platforms:
+
+### Marketing & Advertising
+- **GoHighLevel** — CRM, pipeline, campaigns
+- **Google Ads** — Campaign management, reporting
+- **Meta Ads** — Facebook & Instagram advertising
+- **Mailchimp** — Email marketing automation
+
+### Communication
+- **Twilio** — SMS, voice, WhatsApp API
+- **Slack** — Team messaging integration
+- **Discord** — Community and team coordination
+
+### CRM & Sales
+- **HubSpot** — Full CRM suite
+- **Close CRM** — Sales-focused CRM
+- **Pipedrive** — Visual pipeline management
+
+### Support & Service
+- **ServiceTitan** — Field service management
+- **Zendesk** — Customer support platform
+- **Intercom** — Customer messaging
+
+### Payments & Finance
+- **Stripe** — Payment processing
+- **QuickBooks** — Accounting integration
+- **Toast** — Restaurant POS
+
+### Productivity & Operations
+- **Calendly** — Scheduling automation
+- **Notion** — Documentation and knowledge base
+- **Trello** — Project management
+- **GitHub** — Code and development workflow
+
+### Analytics & SEO
+- **Google Search Console** — SEO insights
+- **Google Analytics** — Web analytics
+
+### HR & Team Management
+- **Gusto** — Payroll and HR
+- **Rippling** — Unified HR platform
+
+### Automation & Development
+- **n8n** — Workflow automation
+- **Supabase** — Database and backend
+- **Make (Integromat)** — Integration platform
+
+**Plus 10+ additional connectors** for specialized industries and workflows.
+
+---
+
+## Security & Privacy
+
+### Local Infrastructure
+OpenClaw runs on your servers or machines—no data leaves your control except for AI model API calls.
+
+### Minimal Data Transmission
+The only external communication is with your chosen AI model provider (Anthropic Claude, OpenAI, etc.). All other data stays internal.
+
+### Access Control
+- Configurable trusted contacts list
+- Password-gated messaging channels
+- Role-based permissions
+- Channel-specific security rules
+
+### Complete Audit Trail
+Full memory logging system provides transparency:
+- All decisions and actions logged
+- Searchable conversation history
+- Decision rationale tracking
+- Compliance-ready audit capabilities
+
+### Industry Standards
+Built with security best practices:
+- Encrypted credential storage
+- API key isolation
+- Secure environment variable management
+- Regular security updates via open-source community
+
+---
+
+## Who This Is For
+
+### Agency Owners Managing Multiple Clients
+Orchestrate campaigns, reporting, and client communication across dozens of accounts with AI-powered coordination.
+
+### SaaS Operators Needing Automation
+Automate customer onboarding, support workflows, and operational analytics while maintaining the human touch where it matters.
+
+### Real Estate Professionals
+Manage CRM workflows, listing updates, client follow-ups, and calling campaigns with integrated voice and messaging.
+
+### E-commerce Businesses
+Handle customer support, marketing automation, inventory alerts, and sales analytics across multiple channels.
+
+### Solo Entrepreneurs Wanting Leverage
+Get the operational capacity of a team—marketing, operations, customer success—without hiring overhead.
+
+---
+
+## Why OpenClaw?
+
+Traditional AI assistants are **closed platforms** that:
+- Lock you into their ecosystem
+- Limit what tools you can connect
+- Store your data on their servers
+- Charge per-user or per-interaction
+
+**OpenClaw is different:**
+- ✅ Open source foundation
+- ✅ Runs on your infrastructure
+- ✅ Connects to any tool via MCP
+- ✅ One-time setup cost, no recurring SaaS fees
+- ✅ Full customization and control
+
+---
+
+**Ready to build your AI operations platform?**
+
+*OpenClaw Setup Services — Professional implementation by experienced operators.*
diff --git a/openclaw-gallery/pdfs/openclaw-packages.md b/openclaw-gallery/pdfs/openclaw-packages.md
new file mode 100644
index 0000000..f1995f3
--- /dev/null
+++ b/openclaw-gallery/pdfs/openclaw-packages.md
@@ -0,0 +1,200 @@
+# OpenClaw Setup
+## Service Packages
+
+---
+
+## Tier 1: Starter — $2,499
+
+**Perfect for individuals or small teams testing AI operations.**
+
+### What's Included
+
+#### Core Installation
+- Clawdbot installed & configured on your machine or server
+- Environment setup with secure credential management
+- Base AI model integration (Claude, OpenAI, or preferred provider)
+
+#### Messaging Integration
+- **1 messaging channel connected** (Discord, Telegram, or iMessage)
+- Channel-specific identity and response patterns
+- Basic security and access controls
+
+#### Foundation Configuration
+- **Base persona & identity configured** to match your business
+- **3-5 pre-built skills installed** (file management, web search, basic automation)
+- **Memory system configured** for conversation persistence
+- **2-3 scheduled tasks** set up (morning briefing, daily backup, etc.)
+
+#### Support & Training
+- **1 hour onboarding call + walkthrough** to get you operational
+- **7 days post-setup support** via Discord or email
+- Documentation for basic usage and troubleshooting
+
+#### Timeline & Revisions
+- **Delivery:** 5-7 business days
+- **Revisions:** 2 rounds included
+
+---
+
+## Tier 2: Standard — $7,499
+
+**For professionals and teams ready to automate workflows.**
+
+### Everything in Starter, Plus:
+
+#### Expanded Messaging
+- **Up to 3 messaging channels connected** (Discord, iMessage, Telegram, Slack, WhatsApp, SMS, or Web)
+- Per-channel routing and personality customization
+- Cross-channel context awareness
+
+#### Custom Integrations
+- **2 custom MCP server integrations** connecting your actual tools (CRM, email marketing, calendar, project management, etc.)
+- API key setup and configuration for all connected services
+- Integration testing and validation
+
+#### Tailored Skills & Intelligence
+- **3-5 bespoke skills** designed for your specific workflow
+- **Smart model routing** configured for cost-optimized AI usage (intelligent switching between model tiers)
+- Custom system prompts aligned with your business voice and priorities
+
+#### Advanced Features
+- **Node pairing** (connect your phone or secondary machine for device control)
+- **Security rules + trusted contacts** configured
+- Enhanced memory system with domain-specific context
+
+#### Support & Strategy
+- **2 hours strategy calls** (workflow design, integration planning)
+- **30 days post-setup support**
+- Priority response time
+
+#### Timeline & Revisions
+- **Delivery:** 10-14 business days
+- **Revisions:** 4 rounds included
+
+---
+
+## Tier 3: White Glove — $24,999
+
+**For businesses building true AI-powered operations.**
+
+### Everything in Standard, Plus:
+
+#### Maximum Connectivity
+- **Up to 5 messaging channels** with intelligent routing
+- **5+ custom MCP server integrations** (your full tech stack)
+- Multi-channel coordination with per-channel AI personas
+
+#### Visual Systems & Dashboards
+- **Custom visual dashboards** built for your needs:
+ - Pipeline boards for deal tracking
+ - Analytics dashboards for performance monitoring
+ - Contact grids for relationship management
+ - Custom business intelligence interfaces
+
+#### Advanced Automation
+- **Up to 10 n8n automation workflows** designed and deployed
+- **Competitor research pipeline** configured with automated monitoring
+- **Sub-agent architecture** implemented for parallel task processing
+- Batch generation systems for content and campaign creation
+
+#### Strategic Configuration
+- **Multi-channel routing** with context-aware persona switching
+- Complete operational playbook documented
+- Workflow optimization and efficiency analysis
+
+#### Enterprise Support & Training
+- **Complete documentation + team training guide**
+- **5 hours strategy + architecture sessions** (workflow design, system optimization, team onboarding)
+- **90 days support** with priority response
+- **Monthly maintenance for 3 months** (system updates, optimization, new skill development)
+- **Priority support channel** (direct access)
+
+#### Timeline & Revisions
+- **Delivery:** 21-30 business days
+- **Revisions:** Unlimited (within agreed scope)
+
+---
+
+## What Happens After Purchase
+
+### 1. Discovery Call (All Tiers)
+We schedule a call to understand:
+- Your current tech stack
+- Key workflows to automate
+- Team structure and access needs
+- Success metrics and priorities
+
+### 2. Architecture Planning (Standard & White Glove)
+We design your OpenClaw system:
+- Integration architecture diagram
+- Workflow maps
+- Security and access design
+- Phased implementation plan
+
+### 3. Implementation
+We build your system:
+- Install and configure Clawdbot
+- Connect messaging channels
+- Build MCP integrations
+- Develop custom skills
+- Create visual dashboards (White Glove)
+- Configure automation workflows
+
+### 4. Testing & Validation
+Before handoff:
+- Integration testing
+- Security validation
+- Performance optimization
+- User acceptance testing
+
+### 5. Training & Handoff
+We ensure you're ready:
+- Live walkthrough sessions
+- Documentation delivery
+- Q&A and troubleshooting
+- Admin access and credentials
+
+### 6. Post-Setup Support
+We stay available:
+- Bug fixes and adjustments
+- Usage questions
+- Optimization recommendations
+- Additional training as needed
+
+---
+
+## Frequently Asked Questions
+
+### Do I need technical knowledge?
+**Starter:** Basic comfort with command line helpful but not required.
+**Standard/White Glove:** We handle all technical implementation.
+
+### What if I want to add more integrations later?
+We can scope additional MCP servers or skills as standalone projects. Most integrations take 3-5 days and cost $500-$2,000 depending on complexity.
+
+### Can I upgrade from Starter to Standard later?
+Yes—we'll credit your Starter investment and upgrade you to the Standard package.
+
+### What AI models work with OpenClaw?
+Anthropic Claude (Opus, Sonnet), OpenAI (GPT-4, GPT-4o), Google (Gemini), and other OpenAI-compatible APIs.
+
+### Do I need to keep paying after setup?
+No recurring fees to us—just your AI model API costs (typically $20-$500/month depending on usage). You own the system.
+
+### What if I don't have a server?
+We can help you deploy to cloud infrastructure (AWS, Digital Ocean, Vultr) or run on a dedicated Mac/PC. Hosting costs are separate.
+
+### Is this really open source?
+Yes—Clawdbot is open source (MIT license). You have full access to code and can modify anything. We're providing professional implementation and configuration services.
+
+---
+
+## Ready to Get Started?
+
+**Choose your package** and let's build your AI operations platform.
+
+Contact: [Your Upwork Profile or Contact Method]
+
+---
+
+*Packages include implementation only. AI model API costs, hosting infrastructure (if applicable), and third-party tool subscriptions are separate.*
diff --git a/openclaw-gallery/video/openclaw-promo/UPGRADE_SPEC.md b/openclaw-gallery/video/openclaw-promo/UPGRADE_SPEC.md
new file mode 100644
index 0000000..54db886
--- /dev/null
+++ b/openclaw-gallery/video/openclaw-promo/UPGRADE_SPEC.md
@@ -0,0 +1,31 @@
+# OpenClaw Promo Video Upgrade Spec
+
+## Project Path
+`/Users/jakeshore/.clawdbot/workspace/openclaw-gallery/video/openclaw-promo/`
+
+## Shared Components Available (already built)
+- `src/styles/theme.ts` — COLORS, GLASS_CARD, SPRING presets, FONT
+- `src/components/ParticleField.tsx` — Floating particle background layer
+- `src/components/MeshBackground.tsx` — Animated mesh gradient with grid overlay
+- `src/components/GlassCard.tsx` — Glass morphism card + AnimatedGlowBorder
+- `src/components/KineticText.tsx` — Word-by-word stagger reveal + FlipCounter
+- `src/components/ChannelIcons.tsx` — SVG brand icons for Discord/Telegram/Slack/WhatsApp/iMessage/Web/SMS
+
+## IMPORTANT Rules
+- All animations MUST use useCurrentFrame() — NO CSS transitions or animations
+- Import from remotion: useCurrentFrame, interpolate, spring, useVideoConfig, Sequence, staticFile
+- Import from @remotion/transitions: TransitionSeries, linearTiming, springTiming for scene transitions
+- Available transitions: fade, slide, wipe, flip, clockWipe from @remotion/transitions/*
+- Canvas is 1920x1080 at 30fps
+- Use SPRING presets from theme for varied motion (snappy, smooth, heavy, bouncy, gentle)
+- Use GLASS_CARD style for premium card looks
+- Every scene should include MeshBackground + ParticleField for depth
+- Font: Inter (already loaded)
+
+## Scene Timing (tightened from original)
+Target total: ~2700 frames (90s) with transitions overlapping
+
+## Funnel Screenshots
+HTML funnel pages exist at: `/Users/jakeshore/.clawdbot/workspace/mcpengine-repo/landing-pages/`
+30+ funnels: acuity.html, bamboohr.html, closecrm.html, servicetitan.html, jobber.html, etc.
+These need to be screenshotted and saved to `public/funnels/` for use in Scene7 BatchGeneration.
diff --git a/openclaw-gallery/video/openclaw-promo/package.json b/openclaw-gallery/video/openclaw-promo/package.json
new file mode 100644
index 0000000..b85fc7d
--- /dev/null
+++ b/openclaw-gallery/video/openclaw-promo/package.json
@@ -0,0 +1,27 @@
+{
+ "name": "openclaw-promo",
+ "version": "1.0.0",
+ "description": "",
+ "main": "index.js",
+ "scripts": {
+ "studio": "remotion studio",
+ "render": "remotion render OpenClawPromo --output=../openclaw-promo.mp4 --codec=h264",
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "keywords": [],
+ "author": "",
+ "license": "ISC",
+ "type": "commonjs",
+ "dependencies": {
+ "@remotion/cli": "^4.0.417",
+ "@remotion/transitions": "^4.0.417",
+ "react": "^19.2.4",
+ "react-dom": "^19.2.4",
+ "remotion": "^4.0.417"
+ },
+ "devDependencies": {
+ "@types/react": "^19.2.11",
+ "@types/react-dom": "^19.2.3",
+ "typescript": "^5.9.3"
+ }
+}
diff --git a/openclaw-gallery/video/openclaw-promo/remotion.config.ts b/openclaw-gallery/video/openclaw-promo/remotion.config.ts
new file mode 100644
index 0000000..e8d4dba
--- /dev/null
+++ b/openclaw-gallery/video/openclaw-promo/remotion.config.ts
@@ -0,0 +1,4 @@
+import { Config } from "@remotion/cli/config";
+
+Config.setVideoImageFormat("jpeg");
+Config.setOverwriteOutput(true);
diff --git a/openclaw-gallery/video/openclaw-promo/src/OpenClawPromo.tsx b/openclaw-gallery/video/openclaw-promo/src/OpenClawPromo.tsx
new file mode 100644
index 0000000..3064531
--- /dev/null
+++ b/openclaw-gallery/video/openclaw-promo/src/OpenClawPromo.tsx
@@ -0,0 +1,147 @@
+import React from 'react';
+import { TransitionSeries, linearTiming } from '@remotion/transitions';
+import { fade } from '@remotion/transitions/fade';
+import { slide } from '@remotion/transitions/slide';
+import { wipe } from '@remotion/transitions/wipe';
+import { Scene1Hook } from './scenes/Scene1Hook';
+import { Scene2Problem } from './scenes/Scene2Problem';
+import { Scene3LogoReveal } from './scenes/Scene3LogoReveal';
+import { Scene4MultiChannel } from './scenes/Scene4MultiChannel';
+import { Scene5McpTools } from './scenes/Scene5McpTools';
+import { Scene6ProductTour } from './scenes/Scene6ProductTour';
+import { Scene7PowerFeatures } from './scenes/Scene7PowerFeatures';
+import { Scene8Architecture } from './scenes/Scene8Architecture';
+import { Scene9Pricing } from './scenes/Scene9Pricing';
+import { Scene10Cta } from './scenes/Scene10Cta';
+
+/*
+ Scene durations (frames @ 30fps):
+ 1. Hook: 150 (5.0s)
+ 2. Problem: 180 (6.0s)
+ 3. Logo Reveal: 120 (4.0s)
+ 4. Multi-Channel: 240 (8.0s)
+ 5. MCP Tools: 300 (10.0s)
+ 6. Product Tour: 420 (14.0s)
+ 7. Power Features: 420 (14.0s)
+ 8. Architecture: 200 (6.7s)
+ 9. Pricing: 180 (6.0s)
+ 10. CTA: 150 (5.0s)
+
+ Transitions (overlapping):
+ 1→2: fade 15f
+ 2→3: wipe 20f
+ 3→4: slide-right 20f
+ 4→5: fade 15f
+ 5→6: slide-bottom 20f
+ 6→7: fade 15f
+ 7→8: wipe 15f
+ 8→9: slide-right 15f
+ 9→10: fade 20f
+
+ Total transitions: 15+20+20+15+20+15+15+15+20 = 155f overlap
+ Sum of scenes: 2360f
+ Total duration: 2360 - 155 = 2205f (73.5s)
+*/
+
+export const OpenClawPromo: React.FC = () => {
+ return (
+ Display Error
+ The app encountered an issue rendering the data. Try sending a new message.
+
+
+ {/* Scene 1: Hook */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/openclaw-gallery/video/openclaw-promo/src/Root.tsx b/openclaw-gallery/video/openclaw-promo/src/Root.tsx
new file mode 100644
index 0000000..4cb87a3
--- /dev/null
+++ b/openclaw-gallery/video/openclaw-promo/src/Root.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Composition } from 'remotion';
+import { OpenClawPromo } from './OpenClawPromo';
+
+export const RemotionRoot: React.FC = () => {
+ return (
+ <>
+
+ })
+
+ );
+};
diff --git a/openclaw-gallery/video/openclaw-promo/src/components/ChannelIcons.tsx b/openclaw-gallery/video/openclaw-promo/src/components/ChannelIcons.tsx
new file mode 100644
index 0000000..9123e0f
--- /dev/null
+++ b/openclaw-gallery/video/openclaw-promo/src/components/ChannelIcons.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+
+// SVG channel brand icons - clean minimal paths
+export const DiscordIcon: React.FC<{ size?: number; color?: string }> = ({ size = 40, color = '#5865f2' }) => (
+
+);
+
+export const TelegramIcon: React.FC<{ size?: number; color?: string }> = ({ size = 40, color = '#26a5e4' }) => (
+
+);
+
+export const SlackIcon: React.FC<{ size?: number; color?: string }> = ({ size = 40, color = '#e01e5a' }) => (
+
+);
+
+export const WhatsAppIcon: React.FC<{ size?: number; color?: string }> = ({ size = 40, color = '#25d366' }) => (
+
+);
+
+export const MessageIcon: React.FC<{ size?: number; color?: string }> = ({ size = 40, color = '#34c759' }) => (
+
+);
+
+export const WebIcon: React.FC<{ size?: number; color?: string }> = ({ size = 40, color = '#7c3aed' }) => (
+
+);
+
+export const SmsIcon: React.FC<{ size?: number; color?: string }> = ({ size = 40, color = '#ff6d5a' }) => (
+
+);
+
+// Map channel name to icon component
+export const channelIconMap: Record
+ {children}
+
+ );
+};
diff --git a/openclaw-gallery/video/openclaw-promo/src/components/GlassCard.tsx b/openclaw-gallery/video/openclaw-promo/src/components/GlassCard.tsx
new file mode 100644
index 0000000..97361c8
--- /dev/null
+++ b/openclaw-gallery/video/openclaw-promo/src/components/GlassCard.tsx
@@ -0,0 +1,131 @@
+import React from 'react';
+import { useCurrentFrame, spring, useVideoConfig, interpolate } from 'remotion';
+import { COLORS, GLASS_CARD, SPRING } from '../styles/theme';
+
+export const GlassCard: React.FC<{
+ children: React.ReactNode;
+ delay?: number;
+ width?: number | string;
+ height?: number | string;
+ borderColor?: string;
+ glowColor?: string;
+ padding?: number | string;
+ style?: React.CSSProperties;
+ animateFrom?: 'bottom' | 'left' | 'right' | 'scale' | 'none';
+}> = ({
+ children,
+ delay = 0,
+ width,
+ height,
+ borderColor = 'rgba(255, 255, 255, 0.06)',
+ glowColor,
+ padding = 24,
+ style = {},
+ animateFrom = 'bottom',
+}) => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ const progress = spring({
+ frame: frame - delay,
+ fps,
+ config: SPRING.smooth,
+ });
+
+ let transform = '';
+ let opacity = progress;
+
+ switch (animateFrom) {
+ case 'bottom':
+ transform = `translateY(${interpolate(progress, [0, 1], [40, 0])}px)`;
+ break;
+ case 'left':
+ transform = `translateX(${interpolate(progress, [0, 1], [-60, 0])}px)`;
+ break;
+ case 'right':
+ transform = `translateX(${interpolate(progress, [0, 1], [60, 0])}px)`;
+ break;
+ case 'scale':
+ transform = `scale(${interpolate(progress, [0, 1], [0.8, 1])})`;
+ break;
+ case 'none':
+ opacity = 1;
+ break;
+ }
+
+ return (
+
+ {/* Top highlight line */}
+
+ {children}
+
+ );
+};
+
+export const AnimatedGlowBorder: React.FC<{
+ children: React.ReactNode;
+ color1?: string;
+ color2?: string;
+ borderRadius?: number;
+ speed?: number;
+ style?: React.CSSProperties;
+}> = ({
+ children,
+ color1 = COLORS.primary,
+ color2 = COLORS.secondary,
+ borderRadius = 20,
+ speed = 1,
+ style = {},
+}) => {
+ const frame = useCurrentFrame();
+ const angle = (frame * 2 * speed) % 360;
+
+ return (
+
+
+ );
+};
diff --git a/openclaw-gallery/video/openclaw-promo/src/components/KineticText.tsx b/openclaw-gallery/video/openclaw-promo/src/components/KineticText.tsx
new file mode 100644
index 0000000..3f974e8
--- /dev/null
+++ b/openclaw-gallery/video/openclaw-promo/src/components/KineticText.tsx
@@ -0,0 +1,142 @@
+import React from 'react';
+import { useCurrentFrame, spring, useVideoConfig, interpolate } from 'remotion';
+import { SPRING } from '../styles/theme';
+
+// Word-by-word staggered reveal
+export const KineticText: React.FC<{
+ text: string;
+ startDelay?: number;
+ staggerFrames?: number;
+ fontSize?: number;
+ fontWeight?: number;
+ color?: string;
+ highlightWords?: string[];
+ highlightColor?: string;
+ style?: React.CSSProperties;
+ animationType?: 'slideUp' | 'fadeScale' | 'blur';
+}> = ({
+ text,
+ startDelay = 0,
+ staggerFrames = 4,
+ fontSize = 48,
+ fontWeight = 700,
+ color = '#f0f0f5',
+ highlightWords = [],
+ highlightColor = '#ff6d5a',
+ style = {},
+ animationType = 'slideUp',
+}) => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+ const words = text.split(' ');
+
+ return (
+
+ {children}
+
+
+ {words.map((word, i) => {
+ const delay = startDelay + i * staggerFrames;
+ const progress = spring({
+ frame: frame - delay,
+ fps,
+ config: SPRING.snappy,
+ });
+
+ const isHighlighted = highlightWords.some(
+ (hw) => word.toLowerCase().replace(/[^a-z]/g, '') === hw.toLowerCase()
+ );
+
+ let wordStyle: React.CSSProperties = {};
+
+ switch (animationType) {
+ case 'slideUp':
+ wordStyle = {
+ transform: `translateY(${interpolate(progress, [0, 1], [30, 0])}px)`,
+ opacity: progress,
+ };
+ break;
+ case 'fadeScale':
+ wordStyle = {
+ transform: `scale(${interpolate(progress, [0, 1], [0.7, 1])})`,
+ opacity: progress,
+ };
+ break;
+ case 'blur':
+ wordStyle = {
+ opacity: progress,
+ filter: `blur(${interpolate(progress, [0, 1], [8, 0])}px)`,
+ };
+ break;
+ }
+
+ return (
+
+ {word}
+
+ );
+ })}
+
+ );
+};
+
+// Large number counter with flip-style animation
+export const FlipCounter: React.FC<{
+ value: number;
+ startDelay?: number;
+ duration?: number;
+ prefix?: string;
+ suffix?: string;
+ fontSize?: number;
+ color?: string;
+}> = ({
+ value,
+ startDelay = 0,
+ duration = 60,
+ prefix = '',
+ suffix = '',
+ fontSize = 72,
+ color = '#ff6d5a',
+}) => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ const progress = spring({
+ frame: frame - startDelay,
+ fps,
+ config: { damping: 50, stiffness: 100 },
+ durationInFrames: duration,
+ });
+
+ const currentValue = Math.round(interpolate(progress, [0, 1], [0, value]));
+
+ return (
+
+ {prefix}
+ {currentValue.toLocaleString()}
+ {suffix}
+
+ );
+};
diff --git a/openclaw-gallery/video/openclaw-promo/src/components/MeshBackground.tsx b/openclaw-gallery/video/openclaw-promo/src/components/MeshBackground.tsx
new file mode 100644
index 0000000..dd0563c
--- /dev/null
+++ b/openclaw-gallery/video/openclaw-promo/src/components/MeshBackground.tsx
@@ -0,0 +1,100 @@
+import React from 'react';
+import { useCurrentFrame, interpolate } from 'remotion';
+import { COLORS } from '../styles/theme';
+
+export const MeshBackground: React.FC<{
+ color1?: string;
+ color2?: string;
+ color3?: string;
+ speed?: number;
+ intensity?: number;
+}> = ({
+ color1 = COLORS.primary,
+ color2 = COLORS.secondary,
+ color3 = COLORS.accent,
+ speed = 1,
+ intensity = 0.25,
+}) => {
+ const frame = useCurrentFrame();
+ const t = frame * 0.008 * speed;
+
+ // Three orbiting gradient blobs
+ const x1 = 40 + Math.sin(t) * 25;
+ const y1 = 35 + Math.cos(t * 0.7) * 20;
+ const x2 = 60 + Math.sin(t * 1.3 + 2) * 20;
+ const y2 = 65 + Math.cos(t * 0.9 + 1) * 25;
+ const x3 = 50 + Math.sin(t * 0.8 + 4) * 30;
+ const y3 = 50 + Math.cos(t * 1.1 + 3) * 20;
+
+ return (
+
+ {/* Gradient blob 1 */}
+
+ {/* Gradient blob 2 */}
+
+ {/* Gradient blob 3 */}
+
+ {/* Subtle grid pattern */}
+
+
+ );
+};
diff --git a/openclaw-gallery/video/openclaw-promo/src/components/ParticleField.tsx b/openclaw-gallery/video/openclaw-promo/src/components/ParticleField.tsx
new file mode 100644
index 0000000..12181e6
--- /dev/null
+++ b/openclaw-gallery/video/openclaw-promo/src/components/ParticleField.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+import { useCurrentFrame, interpolate } from 'remotion';
+
+interface Particle {
+ x: number;
+ y: number;
+ size: number;
+ speed: number;
+ opacity: number;
+ phase: number;
+}
+
+const generateParticles = (count: number, seed: number): Particle[] => {
+ const particles: Particle[] = [];
+ for (let i = 0; i < count; i++) {
+ const hash = Math.sin(seed + i * 127.1) * 43758.5453;
+ const h2 = Math.sin(seed + i * 269.5) * 76321.123;
+ const h3 = Math.sin(seed + i * 419.2) * 29451.72;
+ particles.push({
+ x: (hash - Math.floor(hash)) * 1920,
+ y: (h2 - Math.floor(h2)) * 1080,
+ size: 1 + (h3 - Math.floor(h3)) * 3,
+ speed: 0.2 + (hash - Math.floor(hash)) * 0.6,
+ opacity: 0.15 + (h2 - Math.floor(h2)) * 0.35,
+ phase: (h3 - Math.floor(h3)) * Math.PI * 2,
+ });
+ }
+ return particles;
+};
+
+export const ParticleField: React.FC<{
+ count?: number;
+ color?: string;
+ seed?: number;
+ drift?: 'up' | 'down' | 'none';
+ fadeIn?: number;
+}> = ({
+ count = 50,
+ color = '#ffffff',
+ seed = 42,
+ drift = 'up',
+ fadeIn = 20,
+}) => {
+ const frame = useCurrentFrame();
+ const particles = React.useMemo(() => generateParticles(count, seed), [count, seed]);
+
+ const globalOpacity = interpolate(frame, [0, fadeIn], [0, 1], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ });
+
+ return (
+
+ {particles.map((p, i) => {
+ const driftY =
+ drift === 'up'
+ ? -frame * p.speed * 0.5
+ : drift === 'down'
+ ? frame * p.speed * 0.5
+ : 0;
+ const floatX = Math.sin(frame * 0.02 + p.phase) * 15;
+ const floatY = Math.cos(frame * 0.015 + p.phase) * 10;
+ const pulse = 0.7 + Math.sin(frame * 0.04 + p.phase) * 0.3;
+
+ const y = ((p.y + driftY + floatY) % 1180) - 50;
+ const x = p.x + floatX;
+
+ return (
+ = ({
+ children,
+ delayPerItem = 3,
+ columns = 6,
+ gap = 12,
+ style = {},
+}) => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ return (
+ = ({
+ text,
+ startFrame = 0,
+ charsPerFrame = 0.5,
+ showCursor = true,
+ style = {},
+ cursorColor = '#ff6d5a',
+}) => {
+ const frame = useCurrentFrame();
+ const elapsed = Math.max(0, frame - startFrame);
+ const charCount = Math.min(text.length, Math.floor(elapsed * charsPerFrame));
+ const displayText = text.slice(0, charCount);
+ const cursorOpacity = frame % 30 < 15 ? 1 : 0;
+
+ return (
+
+ {displayText}
+ {showCursor && (
+
+ |
+
+ )}
+
+ );
+};
diff --git a/openclaw-gallery/video/openclaw-promo/src/index.ts b/openclaw-gallery/video/openclaw-promo/src/index.ts
new file mode 100644
index 0000000..91fa0f3
--- /dev/null
+++ b/openclaw-gallery/video/openclaw-promo/src/index.ts
@@ -0,0 +1,4 @@
+import { registerRoot } from 'remotion';
+import { RemotionRoot } from './Root';
+
+registerRoot(RemotionRoot);
diff --git a/openclaw-gallery/video/openclaw-promo/src/scenes/Scene10Cta.tsx b/openclaw-gallery/video/openclaw-promo/src/scenes/Scene10Cta.tsx
new file mode 100644
index 0000000..7450a86
--- /dev/null
+++ b/openclaw-gallery/video/openclaw-promo/src/scenes/Scene10Cta.tsx
@@ -0,0 +1,199 @@
+import React from 'react';
+import { useCurrentFrame, spring, useVideoConfig, interpolate } from 'remotion';
+import { COLORS, FONT, SPRING } from '../styles/theme';
+import { MeshBackground } from '../components/MeshBackground';
+import { ParticleField } from '../components/ParticleField';
+import { AnimatedGlowBorder } from '../components/GlassCard';
+import { KineticText } from '../components/KineticText';
+
+export const Scene10Cta: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ // Logo entry
+ const logoEntry = spring({ frame: frame - 50, fps, config: SPRING.bouncy });
+ const logoGlow = 0.5 + Math.sin(frame * 0.06) * 0.3;
+
+ // CTA button pulse
+ const btnPulse = 1 + Math.sin(frame * 0.1) * 0.03;
+ const btnEntry = spring({ frame: frame - 70, fps, config: SPRING.smooth });
+
+ // Subtitle
+ const subEntry = spring({ frame: frame - 85, fps, config: SPRING.gentle });
+
+ // Final zoom
+ const finalZoom = interpolate(frame, [100, 150], [1, 1.03], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ });
+
+ // Fade to black
+ const fadeOut = interpolate(frame, [130, 150], [0, 1], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ });
+
+ // Converging particles (move toward center)
+ const particles = React.useMemo(() => {
+ const pts: { x: number; y: number; phase: number }[] = [];
+ for (let i = 0; i < 40; i++) {
+ const angle = (i / 40) * Math.PI * 2;
+ pts.push({
+ x: 960 + Math.cos(angle) * (500 + (i % 3) * 100),
+ y: 540 + Math.sin(angle) * (300 + (i % 4) * 80),
+ phase: i * 0.3,
+ });
+ }
+ return pts;
+ }, []);
+
+ return (
+
2 ? `0 0 ${p.size * 3}px ${color}` : undefined,
+ }}
+ />
+ );
+ })}
+
+ );
+};
diff --git a/openclaw-gallery/video/openclaw-promo/src/components/StaggeredGrid.tsx b/openclaw-gallery/video/openclaw-promo/src/components/StaggeredGrid.tsx
new file mode 100644
index 0000000..a224b50
--- /dev/null
+++ b/openclaw-gallery/video/openclaw-promo/src/components/StaggeredGrid.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { useCurrentFrame, spring, useVideoConfig } from 'remotion';
+
+interface StaggeredGridProps {
+ children: React.ReactNode[];
+ delayPerItem?: number;
+ columns?: number;
+ gap?: number;
+ style?: React.CSSProperties;
+}
+
+export const StaggeredGrid: React.FC
+ {children.map((child, i) => {
+ const scale = spring({
+ frame: frame - i * delayPerItem,
+ fps,
+ config: { damping: 20, stiffness: 200 },
+ });
+ return (
+
+ );
+};
diff --git a/openclaw-gallery/video/openclaw-promo/src/components/TypewriterText.tsx b/openclaw-gallery/video/openclaw-promo/src/components/TypewriterText.tsx
new file mode 100644
index 0000000..151a0e0
--- /dev/null
+++ b/openclaw-gallery/video/openclaw-promo/src/components/TypewriterText.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { useCurrentFrame } from 'remotion';
+
+interface TypewriterTextProps {
+ text: string;
+ startFrame?: number;
+ charsPerFrame?: number;
+ showCursor?: boolean;
+ style?: React.CSSProperties;
+ cursorColor?: string;
+}
+
+export const TypewriterText: React.FC
+ {child}
+
+ );
+ })}
+
+
+ );
+};
diff --git a/openclaw-gallery/video/openclaw-promo/src/scenes/Scene1Hook.tsx b/openclaw-gallery/video/openclaw-promo/src/scenes/Scene1Hook.tsx
new file mode 100644
index 0000000..5eeb12c
--- /dev/null
+++ b/openclaw-gallery/video/openclaw-promo/src/scenes/Scene1Hook.tsx
@@ -0,0 +1,256 @@
+import React from 'react';
+import { useCurrentFrame, spring, useVideoConfig, interpolate } from 'remotion';
+import { COLORS, FONT, SPRING } from '../styles/theme';
+import { MeshBackground } from '../components/MeshBackground';
+import { ParticleField } from '../components/ParticleField';
+import { KineticText } from '../components/KineticText';
+
+/* ─── Circuit Lines: animated SVG connection traces behind text ─── */
+const CircuitLines: React.FC = () => {
+ const frame = useCurrentFrame();
+
+ const paths = [
+ 'M 200,400 L 500,400 L 500,540 L 960,540',
+ 'M 1720,400 L 1420,400 L 1420,540 L 960,540',
+ 'M 960,200 L 960,540',
+ 'M 400,700 L 600,700 L 600,540 L 960,540',
+ 'M 1520,700 L 1320,700 L 1320,540 L 960,540',
+ 'M 200,540 L 500,540',
+ 'M 1420,540 L 1720,540',
+ ];
+
+ return (
+
+ );
+};
+
+/* ─── Pulse ring that expands outward at the end ─── */
+const PulseRing: React.FC = () => {
+ const frame = useCurrentFrame();
+ const startFrame = 115;
+
+ const ringScale = interpolate(frame - startFrame, [0, 35], [0, 6], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ });
+
+ const ringOpacity = interpolate(frame - startFrame, [0, 10, 35], [0, 0.5, 0], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ });
+
+ if (frame < startFrame) return null;
+
+ return (
+
+ );
+};
+
+/* ─── Highlight sweep: glowing bar that slides across highlighted words ─── */
+const HighlightSweep: React.FC = () => {
+ const frame = useCurrentFrame();
+ // Sweep starts after words are revealed (~frame 70), sweeps across
+ const sweepStart = 72;
+ const sweepX = interpolate(frame - sweepStart, [0, 30], [-200, 600], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ });
+
+ const sweepOpacity = interpolate(frame - sweepStart, [0, 5, 25, 30], [0, 0.6, 0.6, 0], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ });
+
+ if (frame < sweepStart) return null;
+
+ return (
+
+ );
+};
+
+/* ─── Main Scene ─── */
+export const Scene1Hook: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ // Global fade in
+ const fadeIn = interpolate(frame, [0, 20], [0, 1], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ });
+
+ // Subtle zoom to add energy
+ const zoom = interpolate(frame, [0, 150], [1, 1.03], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ });
+
+ // Center glow grows as text appears
+ const glowProgress = spring({
+ frame: frame - 10,
+ fps,
+ config: SPRING.heavy,
+ });
+
+ return (
+
+
+
+ {/* Fade to black */}
+
+
+
+
+ {/* Logo */}
+
+
+ MCP
+
+ Engage
+
+
+
+
+ {/* CTA Button */}
+
+ Managed OpenClaw & AI System Setups
+
+
+
+
+
+
+ {/* Contact info */}
+
+ Book a Free Consultation
+
+
+ mcpengage.com
+
+
+
+ {/* Layer 1: Mesh gradient background */}
+
+ );
+};
diff --git a/openclaw-gallery/video/openclaw-promo/src/scenes/Scene2Problem.tsx b/openclaw-gallery/video/openclaw-promo/src/scenes/Scene2Problem.tsx
new file mode 100644
index 0000000..fc05d60
--- /dev/null
+++ b/openclaw-gallery/video/openclaw-promo/src/scenes/Scene2Problem.tsx
@@ -0,0 +1,406 @@
+import React from 'react';
+import { useCurrentFrame, spring, useVideoConfig, interpolate } from 'remotion';
+import { COLORS, FONT, GLASS_CARD, SPRING } from '../styles/theme';
+import { MeshBackground } from '../components/MeshBackground';
+import { ParticleField } from '../components/ParticleField';
+import { GlassCard } from '../components/GlassCard';
+import { KineticText } from '../components/KineticText';
+
+/* ─── App definitions with inline SVG icon renderers ─── */
+interface AppDef {
+ name: string;
+ color: string;
+ badge: string;
+ icon: (size: number, color: string) => React.ReactNode;
+}
+
+const apps: AppDef[] = [
+ {
+ name: 'Email',
+ color: '#4285f4',
+ badge: '+47',
+ icon: (s, c) => (
+
+ ),
+ },
+ {
+ name: 'CRM',
+ color: '#ff6d5a',
+ badge: '+128',
+ icon: (s, c) => (
+
+ ),
+ },
+ {
+ name: 'Sheets',
+ color: '#34a853',
+ badge: '+23',
+ icon: (s, c) => (
+
+ ),
+ },
+ {
+ name: 'Calendar',
+ color: '#fbbc04',
+ badge: 'MISSED',
+ icon: (s, c) => (
+
+ ),
+ },
+ {
+ name: 'Slack',
+ color: '#e01e5a',
+ badge: '+89',
+ icon: (s, c) => (
+
+ ),
+ },
+ {
+ name: 'Phone',
+ color: '#7c3aed',
+ badge: '5 MISSED',
+ icon: (s, c) => (
+
+ ),
+ },
+ {
+ name: 'Analytics',
+ color: '#26a5e4',
+ badge: 'UPDATE',
+ icon: (s, c) => (
+
+ ),
+ },
+ {
+ name: 'Social',
+ color: '#ff4500',
+ badge: '+312',
+ icon: (s, c) => (
+
+ ),
+ },
+];
+
+/* ─── Card positions in a 4×2 scattered grid ─── */
+const positions = [
+ { x: 210, y: 200 },
+ { x: 560, y: 160 },
+ { x: 910, y: 210 },
+ { x: 1260, y: 170 },
+ { x: 290, y: 510 },
+ { x: 640, y: 490 },
+ { x: 990, y: 520 },
+ { x: 1340, y: 500 },
+];
+
+/* ─── Explode angles for cards scattering outward ─── */
+const explodeAngles = [
+ -135, -100, -60, -30, 150, 120, 70, 40,
+];
+
+export const Scene2Problem: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ /* ─── Timing constants ─── */
+ const SHAKE_START = 120;
+ const SHAKE_END = 140;
+ const EXPLODE_START = 138;
+ const EXPLODE_DURATION = 35;
+
+ const isShaking = frame >= SHAKE_START && frame < SHAKE_END;
+
+ /* ─── Screen shake ─── */
+ const shakeX = isShaking
+ ? Math.sin(frame * 2.5) * interpolate(frame, [SHAKE_START, SHAKE_END], [14, 0], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ })
+ : 0;
+ const shakeY = isShaking
+ ? Math.cos(frame * 3.1) * interpolate(frame, [SHAKE_START, SHAKE_END], [10, 0], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ })
+ : 0;
+
+ /* ─── Blur flash on shake ─── */
+ const blurAmount = isShaking
+ ? interpolate(frame, [SHAKE_START, SHAKE_START + 5, SHAKE_END], [0, 3, 0], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ })
+ : 0;
+
+ /* ─── Red flash overlay ─── */
+ const flashOpacity = isShaking
+ ? interpolate(frame, [SHAKE_START, SHAKE_START + 3, SHAKE_START + 10], [0, 0.15, 0], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ })
+ : 0;
+
+ /* ─── Title ─── */
+ const titleOpacity = interpolate(frame, [0, 20], [0, 1], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ });
+
+ return (
+
+
+
+ {/* Highlight sweep over highlighted words */}
+
+ {/* Mesh background – red shifted for "problem" mood */}
+
+ );
+};
diff --git a/openclaw-gallery/video/openclaw-promo/src/scenes/Scene3LogoReveal.tsx b/openclaw-gallery/video/openclaw-promo/src/scenes/Scene3LogoReveal.tsx
new file mode 100644
index 0000000..a404130
--- /dev/null
+++ b/openclaw-gallery/video/openclaw-promo/src/scenes/Scene3LogoReveal.tsx
@@ -0,0 +1,285 @@
+import React from 'react';
+import {
+ useCurrentFrame,
+ spring,
+ useVideoConfig,
+ interpolate,
+ staticFile,
+} from 'remotion';
+import { COLORS, FONT, SPRING } from '../styles/theme';
+import { MeshBackground } from '../components/MeshBackground';
+import { ParticleField } from '../components/ParticleField';
+
+/* ─── Converging particles: rush inward toward center ─── */
+const ConvergingParticles: React.FC = () => {
+ const frame = useCurrentFrame();
+
+ const particles = React.useMemo(() => {
+ const pts: { angle: number; startR: number; speed: number; size: number; phase: number }[] = [];
+ for (let i = 0; i < 80; i++) {
+ const h1 = Math.sin(i * 127.1 + 42) * 43758.5453;
+ const h2 = Math.sin(i * 269.5 + 42) * 76321.123;
+ const h3 = Math.sin(i * 419.2 + 42) * 29451.72;
+ pts.push({
+ angle: (h1 - Math.floor(h1)) * Math.PI * 2,
+ startR: 600 + (h2 - Math.floor(h2)) * 400,
+ speed: 8 + (h3 - Math.floor(h3)) * 12,
+ size: 1.5 + (h1 - Math.floor(h1)) * 2.5,
+ phase: (h2 - Math.floor(h2)) * Math.PI * 2,
+ });
+ }
+ return pts;
+ }, []);
+
+ const cx = 960;
+ const cy = 480;
+
+ return (
+ 0 ? `blur(${blurAmount}px)` : undefined,
+ }}
+ >
+ {/* Title */}
+
+
+ {/* Red flash overlay */}
+
+
+ {/* Bottom text: KineticText stagger */}
+
+ Your daily reality:
+
+
+ {/* App cards */}
+ {apps.map((app, i) => {
+ const entryDelay = 5 + i * 7;
+
+ const entryScale = spring({
+ frame: frame - entryDelay,
+ fps,
+ config: SPRING.bouncy,
+ });
+
+ /* Floating parallax */
+ const floatX = Math.sin(frame * 0.03 + i * 1.2) * 6;
+ const floatY = Math.cos(frame * 0.025 + i * 0.9) * 4;
+
+ /* Badge pop */
+ const badgeDelay = entryDelay + 18;
+ const badgeScale = spring({
+ frame: frame - badgeDelay,
+ fps,
+ config: SPRING.bouncy,
+ });
+
+ /* Second badge pile-up */
+ const badge2Delay = badgeDelay + 20 + i * 3;
+ const badge2Scale = spring({
+ frame: frame - badge2Delay,
+ fps,
+ config: SPRING.bouncy,
+ });
+ const badge2Value = i % 3 === 0 ? '+3' : i % 3 === 1 ? '!' : '+1';
+
+ /* Explode outward */
+ const explodeProgress = interpolate(
+ frame - EXPLODE_START,
+ [0, EXPLODE_DURATION],
+ [0, 1],
+ { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
+ );
+ const angle = (explodeAngles[i] * Math.PI) / 180;
+ const explodeDist = explodeProgress * 800;
+ const explodeX = Math.cos(angle) * explodeDist;
+ const explodeY = Math.sin(angle) * explodeDist;
+ const explodeOpacity = interpolate(explodeProgress, [0, 0.3, 1], [1, 1, 0], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ });
+ const explodeRotate = explodeProgress * (i % 2 === 0 ? 25 : -25);
+
+ return (
+
+ {/* Glass card */}
+
+ );
+ })}
+
+ {/* Icon */}
+
+
+ {/* Primary notification badge */}
+
+ {app.icon(42, app.color)}
+
+
+ {app.name}
+
+
+ {app.badge}
+
+
+ {/* Stacked second badge */}
+
+ {badge2Value}
+
+
+
+
+ {particles.map((p, i) => {
+ const r = Math.max(0, p.startR - frame * p.speed);
+ const wobble = Math.sin(frame * 0.08 + p.phase) * 12;
+ const x = cx + Math.cos(p.angle) * (r + wobble);
+ const y = cy + Math.sin(p.angle) * (r + wobble);
+
+ const opacity = interpolate(r, [0, 50, 200, 600], [0, 0.8, 0.5, 0.15], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ });
+
+ return (
+ ` maps to a tool. Note the SOAPAction header. The server must transform XML responses to JSON — document the response mapping per tool.
+- **gRPC:** Check for an HTTP/JSON gateway (many gRPC services expose one). If available, treat as REST. If not, the server needs a gRPC client — document the `.proto` service and method names.
+- **WebSocket:** These are usually event-driven, not request/response. Map "send message" events to write tools. For incoming events, note them for future resource/subscription support. The server must manage a persistent connection.
+
+### What to READ (priority order):
+
+1. **Authentication page** — Read FIRST, completely. Auth determines everything.
+ - What type? (OAuth2, API key, JWT, session token, basic auth)
+ - Where does the token go? (Authorization header, query param, cookie)
+ - Token refresh flow? (Expiry, refresh tokens, re-auth)
+ - Scopes/permissions model?
+
+2. **Rate limits page** — Read SECOND. This constrains tool design.
+ - Requests per minute/hour/day?
+ - Per-endpoint limits vs global limits?
+ - Burst allowance?
+ - Rate limit headers? (X-RateLimit-Remaining, Retry-After)
+
+3. **API overview / getting started** — Skim for architecture patterns.
+ - REST vs GraphQL vs RPC?
+ - Base URL pattern (versioned? regional?)
+ - Common response envelope (data wrapper, pagination shape)
+ - Error response format
+
+4. **Endpoint reference** — Systematic scan, don't deep-dive yet.
+ - Group endpoints by resource/domain (contacts, deals, invoices, etc.)
+ - Note HTTP methods per endpoint (GET=read, POST=create, PUT=update, DELETE=delete)
+ - Flag endpoints with complex input (nested objects, file uploads, webhooks)
+ - Count total endpoints per group
+
+5. **Pagination docs** — Find the pagination pattern.
+ - Cursor-based vs offset-based vs page-based?
+ - What params? (page, limit, offset, cursor, startAfter)
+ - Max page size?
+ - How to detect "no more pages"?
+
+6. **Webhooks / events** — Note but don't deep-dive.
+ - Available webhook events (for future reference)
+ - Delivery format
+
+7. **Version & deprecation info** — Check for sunset timelines.
+ - Current stable version
+ - Any deprecated endpoints still in use
+ - Version header requirements (e.g., `API-Version: 2024-01-01`)
+ - Breaking changes in recent versions
+
+### What to SKIP (or skim very lightly):
+
+- SDK-specific guides (Python, Ruby, etc.) — we build our own client
+- UI/dashboard tutorials — we only care about the API
+- Community forums / blog posts — too noisy
+- Deprecated endpoints — unless no replacement exists
+- Webhook setup instructions — we consume the API, not webhooks (usually)
+
+### Speed technique for large APIs (50+ endpoints):
+
+1. If OpenAPI spec exists, download it and parse programmatically
+2. Extract all paths + methods into a spreadsheet/list
+3. Group by URL prefix (e.g., `/contacts/*`, `/deals/*`, `/invoices/*`)
+4. Count endpoints per group
+5. Read the 2-3 most important endpoints per group in detail
+6. Note the pattern — most groups follow identical CRUD patterns
+
+### Pagination Pattern Catalog
+
+Different APIs use different pagination strategies. Identify which pattern(s) the API uses and document per the table below.
+
+| Pattern | How It Works | Request Next Page | Detect Last Page | Total Count | Example APIs |
+|---------|-------------|-------------------|------------------|-------------|-------------|
+| **Offset/Limit** | Skip N records, return M | `?offset=25&limit=25` | Results < limit, or offset ≥ total | Usually available | Most REST APIs |
+| **Page Number** | Request page N of size M | `?page=2&pageSize=25` | Empty results, or page ≥ totalPages | Usually available | GHL, HubSpot |
+| **Cursor (opaque)** | Server returns an opaque cursor string | `?cursor=abc123&limit=25` | Cursor is null/absent in response | Rarely available | Slack, Facebook |
+| **Keyset (Stripe-style)** | Use last item's ID as boundary | `?starting_after=obj_xxx&limit=25` | `has_more: false` in response | Rarely available | Stripe, Intercom |
+| **Link Header** | Server returns `Link: ; rel="next"` in headers | Follow the `rel="next"` URL directly | No `rel="next"` link in response | Sometimes via `rel="last"` | GitHub, many REST APIs |
+| **Scroll/Search-After** | Server returns a sort-value array to continue from | `?search_after=[timestamp, id]` | Empty results | Via separate count query | Elasticsearch |
+| **Composite Cursor** | Base64-encoded JSON with multiple sort fields | `?cursor=eyJpZCI6MTIzLCJ...}` | Decoded cursor has `done: true`, or results empty | Rarely available | Internal APIs, GraphQL relay |
+| **Token-Based (AWS-style)** | Server returns a `NextToken` / `NextContinuationToken` | Pass `NextToken` in next request body/params | `NextToken` is absent in response | Sometimes via separate field | AWS (S3, DynamoDB, SQS) |
+
+**For each pattern, document:**
+- How to request the next page
+- How to detect the last page (no more data)
+- Whether total count is available
+- Whether backwards pagination is supported
+- Max page size allowed
+
+---
+
+## 4. Analysis Document Template
+
+Use this EXACT template. Every section is required.
+
+````markdown
+# {Service Name} — MCP API Analysis
+
+**Date:** {YYYY-MM-DD}
+**API Version:** {version}
+**Base URL:** `{base_url}`
+**Documentation:** {docs_url}
+**OpenAPI Spec:** {spec_url or "Not available"}
+
+---
+
+## 1. Service Overview
+
+**What it does:** {1-2 sentence description}
+**Target users:** {Who uses this product}
+**Pricing tiers:** {Free / Starter / Pro / Enterprise — note API access level per tier}
+**API access:** {Which tiers include API access, any costs per call}
+
+---
+
+## 2. Authentication
+
+**Method:** {OAuth2 / API Key / JWT / Basic Auth / Custom}
+
+### Auth Flow:
+```
+{Step-by-step auth flow}
+1. {First step}
+2. {Second step}
+3. {How to get/refresh token}
+```
+
+### OAuth2 Details (if applicable):
+- **Grant type:** {authorization_code / client_credentials / PKCE / device_code}
+- **Authorization URL:** `{url}`
+- **Token URL:** `{url}`
+- **Redirect URI requirements:** {localhost allowed? specific paths?}
+- **Scopes required:** {list scopes and what they grant}
+- **PKCE required?** {yes/no — required for public clients}
+
+### Headers:
+```
+Authorization: {Bearer {token} / Basic {base64} / X-API-Key: {key}}
+Content-Type: application/json
+{Any other required headers, e.g., X-Account-ID}
+```
+
+### Environment Variables Needed:
+```bash
+{SERVICE}_API_KEY=
+{SERVICE}_API_SECRET= # If OAuth2
+{SERVICE}_BASE_URL= # If configurable/sandbox
+{SERVICE}_ACCOUNT_ID= # If multi-tenant
+```
+
+### Token Lifecycle:
+- **Token type:** {access token / API key / JWT}
+- **Expiry:** {duration or "never" for API keys}
+- **Refresh mechanism:** {refresh token endpoint / re-auth / N/A}
+- **Refresh token expiry:** {duration or "never"}
+- **Caching strategy:** {Cache token, refresh 5 min before expiry}
+- **Storage for long-running server:** {Token stored in memory, refresh before expiry. For OAuth2 auth code flow: initial token obtained via browser flow, server stores refresh token and auto-refreshes.}
+
+### Key Rotation / Compromise:
+- **Rotation procedure:** {How to generate new keys/secrets}
+- **Revocation endpoint:** {URL to revoke compromised tokens, or "manual via dashboard"}
+- **Grace period:** {Does old key continue working after rotation? For how long?}
+
+---
+
+## 3. API Patterns
+
+**Style:** {REST / GraphQL / SOAP / gRPC / WebSocket}
+**Non-REST adaptation notes:** {If non-REST, note how tools map — see API Style Detection above}
+**Response envelope:**
+```json
+{
+ "data": [...],
+ "meta": { "total": 100, "page": 1, "pageSize": 25 }
+}
+```
+
+**Pagination:**
+- **Type:** {cursor / offset / page-based / keyset / link-header / token-based}
+- **Parameters:** {page, pageSize / limit, offset / cursor, limit / starting_after}
+- **Max page size:** {number}
+- **End detection:** {empty array / hasMore field / next cursor is null / no Link rel="next"}
+- **Total count available:** {yes — in meta.total / no / separate count endpoint}
+- **Backwards pagination:** {supported / not supported}
+
+**Error format:**
+```json
+{
+ "error": { "code": "NOT_FOUND", "message": "Resource not found" }
+}
+```
+
+**Rate limits:**
+- **Global:** {X requests per Y}
+- **Per-endpoint:** {Any specific limits}
+- **Burst allowance:** {Token bucket / leaky bucket / simple counter}
+- **Rate limit scope:** {per-key / per-endpoint / per-user}
+- **Exceeded penalty:** {429 response / temporary ban / throttled response}
+- **Headers:** {X-RateLimit-Remaining, Retry-After}
+- **Strategy:** {Exponential backoff / fixed delay / queue}
+
+**Sandbox / Test Environment:**
+- **Available:** {yes / no}
+- **Sandbox base URL:** `{sandbox_url or "N/A"}`
+- **How to access:** {Separate API key / toggle in dashboard / different subdomain}
+- **Limitations:** {Rate limits differ? Data resets? Feature parity with production?}
+- **QA impact:** {Can QA use sandbox for live API testing? Any endpoints unavailable in sandbox?}
+
+> **Why this matters:** If a sandbox exists, QA testing (Phase 5) can run against it safely without affecting production data. If no sandbox, QA must use mocks or test carefully with real data. Document this early — it directly affects the testing strategy.
+
+---
+
+## 4. Version & Deprecation
+
+- **Current stable version:** {e.g., v2, 2024-01-01}
+- **Version mechanism:** {URL path (/v2/), header (API-Version: 2024-01-01), query param}
+- **Version header requirements:** {Required header name and format, if any}
+- **Deprecation timeline:** {Any endpoints or versions being sunset — with dates}
+- **Breaking changes in recent versions:** {Notable changes that affect tool design}
+- **Changelog URL:** {Link to changelog/migration guide for reference}
+
+---
+
+## 5. Endpoint Catalog
+
+### Group: {Domain Name} ({count} endpoints)
+
+| Method | Path | Description | Notes |
+|--------|------|-------------|-------|
+| GET | `/resource` | List resources | Paginated, filterable |
+| GET | `/resource/{id}` | Get single resource | |
+| POST | `/resource` | Create resource | Required: name, email |
+| PUT | `/resource/{id}` | Update resource | Partial update supported |
+| DELETE | `/resource/{id}` | Delete resource | Soft delete |
+
+{Repeat for each domain group}
+
+### Group: {Next Domain} ({count} endpoints)
+...
+
+**Total endpoints:** {count}
+
+---
+
+## 6. Tool Groups (for Lazy Loading)
+
+Tools are organized into groups that load on-demand. Each group maps to a domain.
+
+| Group Name | Tools | Load Trigger | Description |
+|------------|-------|--------------|-------------|
+| `contacts` | {count} | User asks about contacts | Contact CRUD, search, tags |
+| `deals` | {count} | User asks about deals/pipeline | Deal management, stages |
+| `invoicing` | {count} | User asks about invoices/payments | Invoice CRUD, payments |
+| `calendar` | {count} | User asks about scheduling | Appointments, availability |
+| `analytics` | {count} | User asks for reports/metrics | Dashboards, KPIs |
+| `admin` | {count} | User asks about settings/config | Users, permissions, webhooks |
+
+**Target:** 5-15 groups, 3-15 tools per group. No group should exceed 20 tools.
+
+---
+
+## 7. Tool Inventory
+
+### Group: {group_name}
+
+#### `list_{resources}`
+- **Title:** List {Resources}
+- **Icon:** `{service-cdn-url}/list-icon.svg` *(or omit if no suitable icon — SVG preferred)*
+- **Description:** List {resources} with optional filters and pagination. Returns `{key_field_1, key_field_2, key_field_3, status}` for each {resource}. Use when the user wants to browse, filter, or get an overview of multiple {resources}. Do NOT use when searching by specific keyword (use `search_{resources}` instead) or for getting full details of one {resource} (use `get_{resource}` instead).
+- **HTTP:** GET `/resource`
+- **Annotations:** `readOnlyHint: true`, `destructiveHint: false`, `idempotentHint: true`, `openWorldHint: false`
+- **Parameters:**
+ | Param | Type | Required | Description |
+ |-------|------|----------|-------------|
+ | page | number | No | Page number (default 1) |
+ | pageSize | number | No | Results per page (default 25, max 100) |
+ | query | string | No | Search by name, email, or phone |
+ | status | string | No | Filter: active, inactive, all |
+ | sortBy | string | No | Sort field: created, updated, name |
+- **Output Schema:** `{ data: Resource[], meta: { total: number, page: number, pageSize: number } }`
+- **Content Annotations:** `audience: ["user", "assistant"]`, `priority: 0.7`
+- **Response shape:** `{ data: Resource[], meta: { total, page, pageSize } }`
+
+#### `get_{resource}`
+- **Title:** Get {Resource} Details
+- **Icon:** `{service-cdn-url}/detail-icon.svg` *(optional)*
+- **Description:** Get complete details for a single {resource} by ID. Returns all fields including `{notable_field_1, notable_field_2, notable_field_3}`. Use when the user references a specific {resource} by name/ID or needs detailed information about one {resource}. Do NOT use when the user wants to browse multiple {resources} (use `list_{resources}` instead).
+- **HTTP:** GET `/resource/{id}`
+- **Annotations:** `readOnlyHint: true`, `destructiveHint: false`, `idempotentHint: true`, `openWorldHint: false`
+- **Parameters:**
+ | Param | Type | Required | Description |
+ |-------|------|----------|-------------|
+ | {resource}_id | string | **Yes** | {Resource} ID |
+- **Output Schema:** `Resource` (full object with all fields)
+- **Content Annotations:** `audience: ["user"]`, `priority: 0.8`
+- **Response shape:** `Resource`
+
+#### `create_{resource}`
+- **Title:** Create New {Resource}
+- **Icon:** `{service-cdn-url}/create-icon.svg` *(optional)*
+- **Description:** Create a new {resource}. Returns the created {resource} with its assigned ID. Use when the user wants to add, create, or set up a new {resource}. Do NOT use when updating an existing {resource} (use `update_{resource}` instead). Side effect: creates a permanent record in the system.
+- **HTTP:** POST `/resource`
+- **Annotations:** `readOnlyHint: false`, `destructiveHint: false`, `idempotentHint: false`, `openWorldHint: false`
+- **Parameters:**
+ | Param | Type | Required | Description |
+ |-------|------|----------|-------------|
+ | name | string | **Yes** | {Resource} name |
+ | email | string | No | Email address |
+ | {etc.} | | | |
+- **Output Schema:** `Resource` (created object with ID)
+- **Content Annotations:** `audience: ["user"]`, `priority: 0.9`
+- **Response shape:** `Resource`
+
+#### `update_{resource}`
+- **Title:** Update {Resource}
+- **Icon:** `{service-cdn-url}/edit-icon.svg` *(optional)*
+- **Description:** Update an existing {resource}. Only include fields to change — omitted fields remain unchanged. Returns the updated {resource}. Use when the user wants to modify, change, or edit a {resource}. Do NOT use when creating a new {resource} (use `create_{resource}` instead). Side effect: modifies the existing record.
+- **HTTP:** PUT `/resource/{id}`
+- **Annotations:** `readOnlyHint: false`, `destructiveHint: false`, `idempotentHint: true`, `openWorldHint: false`
+- **Parameters:**
+ | Param | Type | Required | Description |
+ |-------|------|----------|-------------|
+ | {resource}_id | string | **Yes** | {Resource} ID |
+ | {fields...} | | No | Fields to update |
+- **Output Schema:** `Resource` (updated object)
+- **Content Annotations:** `audience: ["user"]`, `priority: 0.9`
+- **Response shape:** `Resource`
+
+#### `delete_{resource}`
+- **Title:** Delete {Resource}
+- **Icon:** `{service-cdn-url}/delete-icon.svg` *(optional)*
+- **Description:** Delete a {resource} permanently. This cannot be undone. Use only when the user explicitly asks to delete or remove a {resource}. Do NOT use for archiving, deactivating, or hiding (use `update_{resource}` with status change instead, if available). Side effect: permanently removes the record.
+- **HTTP:** DELETE `/resource/{id}`
+- **Annotations:** `readOnlyHint: false`, `destructiveHint: true`, `idempotentHint: true`, `openWorldHint: false`
+- **Parameters:**
+ | Param | Type | Required | Description |
+ |-------|------|----------|-------------|
+ | {resource}_id | string | **Yes** | {Resource} ID |
+- **Output Schema:** `{ success: boolean }`
+- **Content Annotations:** `audience: ["user"]`, `priority: 1.0`
+- **Response shape:** `{ success: true }`
+
+{Repeat for each tool in each group}
+
+### Disambiguation Table (per group)
+
+For each tool group, produce a disambiguation matrix to guide tool routing:
+
+| User says... | Correct tool | Why not others |
+|---|---|---|
+| "Show me all {resources}" | `list_{resources}` | Not `search_` (no keyword), not `get_` (not one specific item) |
+| "Find {name}" | `search_{resources}` | Not `list_` (specific name = search), not `get_` (no ID provided) |
+| "What's {name}'s email?" | `get_{resource}` | Not `list_`/`search_` (asking about a specific known {resource}) |
+| "Add a new {resource}" | `create_{resource}` | Not `update_` (new, not existing) |
+| "Change {name}'s phone number" | `update_{resource}` | Not `create_` (modifying existing) |
+| "Remove {name}" | `delete_{resource}` | Not `update_` (user said remove/delete, not deactivate) |
+
+### Common User Intent Clustering
+
+For each disambiguation entry, consider **diverse phrasings** real users would type. Cluster by intent to ensure the tool description handles all variants:
+
+| Intent | Common Phrasings | Target Tool |
+|--------|-----------------|-------------|
+| Browse/overview | "show me", "list", "what are my", "pull up", "let me see", "give me all" | `list_{resources}` |
+| Search/find | "find", "search for", "look up", "where is", "do I have a" | `search_{resources}` |
+| Detail/inspect | "tell me about", "what's the status of", "show me details for", "more info on" | `get_{resource}` |
+| Create/add | "add", "create", "new", "set up", "register", "make a" | `create_{resource}` |
+| Modify/edit | "change", "update", "edit", "modify", "fix", "set X to Y" | `update_{resource}` |
+| Remove/delete | "delete", "remove", "get rid of", "cancel", "drop" | `delete_{resource}` |
+
+> **Tip:** When writing tool descriptions, ensure the "When to use" clause covers the most common phrasings for that intent. The "When NOT to use" clause should address the top misrouting risk (e.g., `list_` vs `search_` is the most common confusion).
+
+---
+
+## 8. App Candidates
+
+### Dashboard Apps
+| App ID | Name | Data Source Tools | Description |
+|--------|------|-------------------|-------------|
+| `{svc}-dashboard` | {Service} Dashboard | `get_analytics`, `list_*` | Overview KPIs, recent activity |
+
+### Data Grid Apps
+| App ID | Name | Data Source Tools | Description |
+|--------|------|-------------------|-------------|
+| `{svc}-contact-grid` | Contacts | `list_contacts`, `search_contacts` | Searchable contact list |
+
+### Detail Card Apps
+| App ID | Name | Data Source Tools | Description |
+|--------|------|-------------------|-------------|
+| `{svc}-contact-card` | Contact Card | `get_contact` | Single contact deep-dive |
+
+### Form/Wizard Apps
+| App ID | Name | Data Source Tools | Description |
+|--------|------|-------------------|-------------|
+| `{svc}-contact-creator` | New Contact | `create_contact` | Contact creation form |
+
+### Specialized Apps
+| App ID | Name | Type | Data Source Tools | Description |
+|--------|------|------|-------------------|-------------|
+| `{svc}-calendar` | Calendar | calendar | `list_appointments` | Appointment calendar |
+| `{svc}-pipeline` | Pipeline | funnel | `list_deals` | Deal pipeline kanban |
+| `{svc}-timeline` | Activity | timeline | `get_activity` | Activity feed |
+
+---
+
+## 9. Elicitation Candidates
+
+Identify flows where the MCP server should request user input mid-operation using the MCP Elicitation capability (`elicitation/create`). These are interactions where the server needs information or confirmation from the user before proceeding.
+
+### When to flag a flow for elicitation:
+
+- **OAuth account selection** — API supports multiple connected accounts; server needs user to choose which one
+- **Destructive operation confirmation** — DELETE or irreversible actions should confirm before executing
+- **Ambiguous input resolution** — User says "delete the contact" but there are 3 matches; server asks which one
+- **Multi-step wizards** — Creating a complex resource that requires sequential input (e.g., create event → pick calendar → set time → invite attendees)
+- **Scope/permission escalation** — Action requires additional OAuth scopes the user hasn't granted
+- **Payment/billing actions** — Any action that costs money should confirm amount and target
+
+### Elicitation Candidate Template:
+
+| Flow | Trigger | Elicitation Type | User Input Needed | Fallback (if elicitation unsupported) |
+|------|---------|-----------------|--------------------|-----------------------------------------|
+| Delete {resource} | `delete_{resource}` called | Confirmation | "Confirm delete {name}? (yes/no)" | Return warning text, require second call |
+| Connect account | First API call with OAuth | Selection | "Which account? (list options)" | Use default/first account |
+| Bulk action | `bulk_update` with >10 items | Confirmation | "Update {N} records? (yes/no)" | Cap at 10, warn about limit |
+| {Describe flow} | {What triggers it} | {Confirmation / Selection / Form} | {What the user sees} | {What happens if client doesn't support elicitation} |
+
+**Important:** Always plan a fallback for clients that don't support elicitation. The server should still function — it just may require the user to provide the information in their original message or via a follow-up tool call.
+
+---
+
+## 10. Task Candidates (Async Operations)
+
+Identify tools where the operation may take >10 seconds and should be executed asynchronously using MCP Tasks (spec 2025-11-25, experimental SEP-1686).
+
+### When to flag a tool for async/task support:
+- **Report generation** — compiling analytics, PDFs, exports
+- **Bulk operations** — updating 100+ records, mass imports
+- **External processing** — waiting on third-party webhooks, payment processing
+- **Data migration** — moving large datasets between systems
+- **File generation** — creating CSVs, spreadsheets, archives
+
+### Task Candidate Template:
+
+| Tool | Typical Duration | Task Support | Recommended Polling Interval |
+|------|-----------------|-------------|------------------------------|
+| `export_report` | 30-120s | required | 5000ms |
+| `bulk_update` | 10-60s | optional | 3000ms |
+| `generate_invoice_pdf` | 5-15s | optional | 2000ms |
+| `{tool_name}` | {duration} | {required/optional/forbidden} | {interval} |
+
+> **Note:** Most tools should be `forbidden` for task support — only flag tools that genuinely need async execution. If the operation completes in <5 seconds, don't use tasks.
+
+---
+
+## 11. Data Shape Contracts
+
+For each app candidate, define the exact mapping from tool `outputSchema` to what the app's `render()` function expects. This contract prevents silent data shape mismatches.
+
+### Contract Template:
+
+| App | Source Tool | Tool outputSchema Key Fields | App Expected Fields | Transform Notes |
+|-----|------------|------------------------------|---------------------|-----------------|
+| `{svc}-contact-grid` | `list_contacts` | `data[].{name,email,status}`, `meta.{total,page,pageSize}` | `data[].{name,email,status}`, `meta.{total,page,pageSize}` | Direct pass-through |
+| `{svc}-dashboard` | `get_analytics` | `{revenue,contacts,deals}` | `metrics.{revenue,contacts,deals}`, `recent[]` | LLM restructures into metrics + recent |
+| `{svc}-{type}` | `{tool}` | `{fields}` | `{fields}` | `{notes}` |
+
+### Contract Rules:
+1. **Direct pass-through** — When tool output matches app input exactly. Preferred.
+2. **LLM transform** — When the LLM must restructure data (via APP_DATA). Document the mapping explicitly so system prompts can reference it.
+3. **Aggregation** — When an app needs data from multiple tools. List all source tools and how their outputs combine.
+
+### Validation:
+- The builder should set `outputSchema` to match the contract
+- The designer should set `validateData()` to check for the contracted fields
+- The integrator's `systemPromptAddon` should reference these contracts for APP_DATA generation
+
+---
+
+## 12. Naming Conventions
+
+### Tool names: `{verb}_{noun}`
+- `list_contacts`, `get_contact`, `create_contact`, `update_contact`, `delete_contact`
+- `search_contacts` (if separate from list)
+- `send_message`, `schedule_appointment`, `export_report`
+
+### Semantic Clustering — Verb Prefix Conventions
+
+Use consistent verb prefixes to signal intent. This helps the LLM distinguish between tools with related names and reduces misrouting.
+
+| Prefix | Intent | Maps to HTTP | Examples |
+|--------|--------|-------------|----------|
+| `browse_` or `list_` | List/overview of multiple items | GET (collection) | `list_contacts`, `browse_invoices` |
+| `inspect_` or `get_` | Deep-dive into a single item | GET (single) | `get_contact`, `inspect_deal` |
+| `modify_` or `create_` / `update_` | Create or change a resource | POST / PUT | `create_contact`, `update_deal` |
+| `remove_` or `delete_` | Delete a resource | DELETE | `delete_contact`, `remove_tag` |
+| `search_` | Full-text or keyword search | GET (with query) | `search_contacts` |
+| `send_` | Dispatch a message/notification | POST (side effect) | `send_email`, `send_sms` |
+| `export_` | Generate a report/file | GET or POST | `export_report` |
+
+**Guidelines:**
+- Pick ONE prefix style per server and be consistent (either `list_`/`get_` or `browse_`/`inspect_`, not both)
+- The standard `list_`/`get_`/`create_`/`update_`/`delete_` is recommended for most APIs
+- Use `browse_`/`inspect_`/`modify_`/`remove_` only if you need to avoid ambiguity with existing tool names or if the API's language uses these verbs naturally
+- For mutually exclusive tools, add "INSTEAD OF" notes in descriptions (e.g., "Use `search_contacts` INSTEAD OF `list_contacts` when the user provides a keyword")
+
+### App IDs: `{service}-{type}-{optional-qualifier}`
+- `{svc}-dashboard`, `{svc}-contact-grid`, `{svc}-contact-card`
+- `{svc}-pipeline-kanban`, `{svc}-calendar-view`, `{svc}-activity-timeline`
+
+### Tool group names: lowercase, domain-based
+- `contacts`, `deals`, `invoicing`, `calendar`, `analytics`, `admin`
+
+---
+
+## 13. Quirks & Gotchas
+
+{List any API-specific issues discovered during analysis}
+
+- {e.g., "Delete endpoint returns 200 with empty body, not 204"}
+- {e.g., "Pagination starts at 0, not 1"}
+- {e.g., "Date fields use Unix timestamps, not ISO 8601"}
+- {e.g., "Rate limit resets at midnight UTC, not rolling window"}
+- {e.g., "Sandbox environment has different base URL"}
+
+---
+
+## 14. Implementation Priority
+
+### Phase 1 (Core — build first):
+1. {most-used-group} — {why}
+2. {second-group} — {why}
+
+### Phase 2 (Important — build second):
+3. {third-group} — {why}
+4. {fourth-group} — {why}
+
+### Phase 3 (Nice-to-have — build if time):
+5. {remaining-groups}
+
+### App Priority:
+1. {svc}-dashboard — Always build the dashboard first
+2. {svc}-{most-used-grid} — Most common data view
+3. {svc}-{most-used-detail} — Detail for most common entity
+
+---
+
+## 5. Tool Description Best Practices
+
+Tool descriptions are the #1 factor in whether an LLM correctly routes to the right tool. Follow these rules:
+
+### The Description Formula (6-part):
+
+```
+{What it does}. {What it returns — include 2-3 key field names}.
+{When to use it — specific user intents}. {When NOT to use it — disambiguation}.
+{Side effects — if any}.
+```
+
+Every tool description MUST include the "When NOT to use" clause. Research shows this single addition reduces tool misrouting by ~30%.
+
+### Before/After Example:
+
+**❌ BEFORE (too vague, no disambiguation):**
+```
+"List contacts with optional filters. Returns paginated results including name, email, phone,
+and status. Use when the user wants to see, search, or browse their contact list."
+```
+
+**✅ AFTER (specific, disambiguated, actionable):**
+```
+"List contacts with optional filters and pagination. Returns {name, email, phone, status,
+created_date} for each contact, plus {total, page, pageSize} metadata. Use when the user
+wants to browse, filter, or get an overview of multiple contacts. Do NOT use when searching
+by specific keyword (use search_contacts instead) or for getting full details of one contact
+(use get_contact instead). Read-only, no side effects."
+```
+
+### For similar tools, differentiate clearly:
+```
+list_contacts: "...browse, filter, or get an overview of multiple contacts.
+ Do NOT use when searching by keyword (use search_contacts) or looking up one contact (use get_contact)."
+search_contacts: "...full-text search across all contact fields by keyword.
+ Do NOT use when browsing without a search term (use list_contacts) or when the user has a specific ID (use get_contact)."
+get_contact: "...get complete details for one contact by ID.
+ Do NOT use when the user wants multiple contacts (use list_contacts) or is searching by name (use search_contacts)."
+```
+
+### Token Budget Awareness
+
+Tool descriptions consume context window tokens. Every tool definition averages 50-200 tokens depending on schema complexity. With 50+ tools, this is 10,000+ tokens before any work begins.
+
+**Targets:**
+- **Total tool definition tokens per server:** Under 5,000 tokens
+- **Per-tool target:** ~200 tokens (description + schema combined)
+- **Active tools per interaction:** Cap at 15-20 via lazy loading
+
+**Optimization techniques:**
+- Be concise — every word must earn its place
+- Eliminate redundant descriptions between the tool description and parameter descriptions
+- Use field name lists (`{name, email, phone}`) instead of prose descriptions of return values
+- Combine overlapping tools when the distinction is minor (e.g., `list_contacts` with optional `query` param instead of separate `list_contacts` + `search_contacts`)
+
+### Tool Count Optimization
+
+If a tool group exceeds 15 tools, consider combining:
+
+| Instead of... | Combine into... | How |
+|---------------|-----------------|-----|
+| `list_contacts` + `search_contacts` | `list_contacts` with optional `query` param | Add `query` as optional filter |
+| `get_contact_email` + `get_contact_phone` + `get_contact_address` | `get_contact` (returns all fields) | Single tool, all fields returned |
+| `create_contact` + `create_lead` + `create_prospect` | `create_contact` with `type` param | Use enum parameter for type |
+| `get_report_daily` + `get_report_weekly` + `get_report_monthly` | `get_report` with `period` param | Use enum parameter for period |
+
+**Rule of thumb:** If two tools share >80% of their parameters and the same endpoint pattern, they should be one tool with a distinguishing parameter.
+
+---
+
+## 6. MCP Annotation Rules
+
+Every tool MUST have annotations. Use this decision tree:
+
+```
+Is it a GET/read operation?
+ → readOnlyHint: true, destructiveHint: false
+
+Is it a DELETE operation?
+ → readOnlyHint: false, destructiveHint: true
+
+Is it a POST/create operation?
+ → readOnlyHint: false, destructiveHint: false, idempotentHint: false
+
+Is it a PUT/upsert operation?
+ → readOnlyHint: false, destructiveHint: false, idempotentHint: true
+
+Does it affect external systems outside this API?
+ → openWorldHint: true (rare — most API tools are openWorldHint: false)
+```
+
+---
+
+## 7. Content Annotations Planning
+
+MCP content blocks can carry `audience` and `priority` annotations that control how tool outputs are routed. Plan these during analysis — they feed directly into the server builder.
+
+### Audience Annotation:
+- `["user"]` — Output is for the end user (show in UI/app, don't feed back to LLM for reasoning)
+- `["assistant"]` — Output is for the LLM (feed into context for multi-step reasoning, don't show to user)
+- `["user", "assistant"]` — Both (show to user AND available for LLM reasoning — the default)
+
+### Priority Annotation (0.0 to 1.0):
+- `1.0` — Critical, always show prominently (destructive operation results, errors, confirmations)
+- `0.7-0.9` — Important, show normally (most tool results)
+- `0.3-0.6` — Supplementary, can be collapsed/summarized (metadata, pagination info)
+- `0.0-0.2` — Low priority, assistant-only (debug info, internal state)
+
+### Planning Guidelines:
+
+| Tool Type | Audience | Priority | Rationale |
+|-----------|----------|----------|-----------|
+| `list_*` | `["user", "assistant"]` | 0.7 | User sees data, LLM may use for follow-up |
+| `get_*` | `["user"]` | 0.8 | Primarily for user display |
+| `create_*` / `update_*` | `["user"]` | 0.9 | User needs confirmation of changes |
+| `delete_*` | `["user"]` | 1.0 | Critical — user must see result |
+| `search_*` | `["user", "assistant"]` | 0.7 | User sees results, LLM may refine |
+| Analytics/aggregation | `["user"]` | 0.8 | Dashboard-type data, primarily visual |
+| Internal/helper tools | `["assistant"]` | 0.3 | LLM uses for reasoning, user doesn't need to see |
+
+---
+
+## 8. App Candidate Selection Criteria
+
+Not every endpoint deserves an app. Use this checklist:
+
+### BUILD an app when:
+- ✅ The data is a **list** that benefits from search/filter UI (data grid)
+- ✅ The data is **complex** with many fields (detail card)
+- ✅ There are **aggregate metrics** or KPIs (dashboard)
+- ✅ The data is **date-based** and benefits from calendar layout (calendar)
+- ✅ The data has **stages/phases** (funnel/kanban)
+- ✅ The data is **chronological events** (timeline)
+- ✅ There's a **multi-step creation flow** (form/wizard)
+
+### SKIP an app when:
+- ❌ It's a simple CRUD with 2-3 fields (just use the tool directly)
+- ❌ The response is a simple success/fail (no visual benefit)
+- ❌ It's a settings/config endpoint (rarely needed in UI)
+- ❌ It's a batch/background operation (status check is enough)
+
+### App count targets:
+- **Small API (10-20 endpoints):** 3-5 apps
+- **Medium API (20-50 endpoints):** 5-10 apps
+- **Large API (50+ endpoints):** 10-20 apps
+- **Never exceed 25 apps** for a single service — diminishing returns
+
+---
+
+## 9. Quality Gate Checklist
+
+Before passing the analysis doc to Phase 2, verify:
+
+### Core Completeness:
+- [ ] **API style identified** — REST/GraphQL/SOAP/gRPC/WebSocket documented with adaptation notes if non-REST
+- [ ] **Every endpoint is cataloged** — no missing endpoints from the API reference
+- [ ] **Tool groups are balanced** — no group with 50+ tools, aim for 3-15 per group
+- [ ] **Active tool count is manageable** — total tools ≤ 60, each lazy-loaded group ≤ 20, active per interaction ≤ 15-20
+
+### Tool Quality:
+- [ ] **Tool descriptions follow 6-part formula** — What / Returns (field names) / When to use / When NOT to use / Side effects
+- [ ] **Every tool has a `title` field** — Human-readable display name separate from machine name
+- [ ] **Every tool has an `outputSchema` planned** — Expected response structure documented
+- [ ] **Every tool has annotations planned** — readOnlyHint, destructiveHint, idempotentHint, openWorldHint
+- [ ] **Content annotations planned** — audience and priority assigned per tool type
+- [ ] **Disambiguation tables exist** — For each tool group with similar tools, "User says X → Correct tool → Why not others"
+- [ ] **Semantic verb prefixes are consistent** — list_/get_/create_/update_/delete_ (or chosen alternative) used uniformly
+
+### Auth & Infrastructure:
+- [ ] **Auth flow is complete** — Step-by-step, env vars listed, refresh strategy documented
+- [ ] **OAuth2 subtype identified** — If OAuth2: grant type, PKCE, scopes, token lifetime documented
+- [ ] **Token lifecycle documented** — Expiry, refresh, storage strategy for long-running server, key rotation procedure
+- [ ] **Pagination pattern identified** — Type, params, max size, end detection, total count availability
+- [ ] **Rate limits are documented** — Global + per-endpoint, burst behavior, scope, penalty
+
+### Planning:
+- [ ] **Version & deprecation documented** — Current version, sunset timelines, version header requirements
+- [ ] **App candidates have clear data sources** — Each app maps to specific tool(s)
+- [ ] **Data shape contracts defined** — Tool outputSchema → app expected input mapped per app candidate
+- [ ] **Elicitation candidates identified** — Destructive operations, ambiguous inputs, multi-step flows, account selection
+- [ ] **Task candidates identified** — Long-running operations flagged with polling intervals
+- [ ] **Icon planning noted per tool** — SVG preferred, at least noted even if deferred
+- [ ] **Sandbox/test environment documented** — Availability, URL, QA impact
+- [ ] **Error format is documented** — Response shape, common error codes
+- [ ] **Naming follows conventions** — verb_noun tools, service-type app IDs, consistent verb prefixes
+- [ ] **User intent clustering done** — Diverse phrasings per disambiguation entry
+- [ ] **Quirks & gotchas captured** — API-specific oddities that affect implementation
+
+---
+
+## 10. Example: Completed Analysis (abbreviated)
+
+```markdown
+# Calendly — MCP API Analysis
+
+**Date:** 2026-02-04
+**API Version:** v2
+**Base URL:** `https://api.calendly.com`
+**Documentation:** https://developer.calendly.com/api-docs
+
+## 1. Service Overview
+**What it does:** Scheduling automation platform
+**API Style:** REST
+
+## 2. Authentication
+**Method:** OAuth2 (Personal Access Token also available)
+**OAuth2 Grant Type:** authorization_code (PKCE recommended for public clients)
+**Token Expiry:** 2 hours (refresh token: 30 days)
+Headers: `Authorization: Bearer {token}`
+
+## 4. Version & Deprecation
+**Current Version:** v2 (v1 sunset: 2024-06-01)
+**Version Mechanism:** URL path (/api/v2/)
+
+## 6. Tool Groups
+| Group | Tools | Description |
+|-------|-------|-------------|
+| `scheduling` | 8 | Event types, scheduling links |
+| `events` | 6 | Scheduled events, invitees |
+| `users` | 4 | User profiles, org membership |
+| `webhooks` | 3 | Webhook subscriptions |
+
+## 7. Tool Inventory (example tool)
+### `list_events`
+- **Title:** List Scheduled Events
+- **Description:** List scheduled events with date range and status filters. Returns {name, start_time, end_time, status, invitee_count} per event. Use when user wants to see upcoming or past events. Do NOT use for event type management (use list_event_types) or single event details (use get_event). Read-only.
+- **Output Schema:** `{ collection: Event[], pagination: { count, next_page_token } }`
+- **Content Annotations:** `audience: ["user", "assistant"]`, `priority: 0.7`
+
+## 8. App Candidates
+- calendly-dashboard (Dashboard) — event counts, upcoming schedule
+- calendly-event-grid (Data Grid) — list scheduled events
+- calendly-event-detail (Detail Card) — single event with invitee info
+- calendly-calendar (Calendar) — visual calendar of events
+- calendly-availability (Form) — set availability preferences
+
+## 9. Elicitation Candidates
+| Flow | Trigger | Type | User Input | Fallback |
+|------|---------|------|------------|----------|
+| Cancel event | `cancel_event` | Confirmation | "Cancel event with {invitee}?" | Require explicit confirmation in message |
+| Connect calendar | Initial setup | Selection | "Which calendar provider?" | Default to primary calendar |
+```
+
+---
+
+## 11. Execution Workflow
+
+```
+1. Receive API docs URL(s) from user
+2. Identify API style (REST/GraphQL/SOAP/gRPC/WebSocket)
+3. Read auth page → Document auth flow (including OAuth2 subtype, token lifecycle, key rotation)
+4. Read rate limits → Document constraints (including burst, scope, penalty)
+5. Check sandbox/test environment → Document availability, URL, and QA impact
+6. Check version/deprecation → Document current version and sunset timelines
+7. Scan all endpoints → Build endpoint catalog
+8. Group endpoints by domain → Define tool groups (cap at 15-20 active per interaction)
+9. Name each tool → Write 6-part descriptions with annotations, title, outputSchema, content annotations, icon
+10. Build disambiguation tables with user intent clustering for each tool group
+11. Identify elicitation candidates (destructive ops, ambiguous inputs, multi-step flows)
+12. Identify task candidates (long-running operations >10s)
+13. Identify app candidates → Map to data source tools
+14. Define data shape contracts (tool outputSchema → app expected input)
+15. Document quirks/gotchas
+16. Set implementation priority
+17. Run quality gate checklist
+18. Output: {service}-api-analysis.md
+```
+
+**Estimated time:** 30-60 minutes for small APIs, 1-2 hours for large APIs (50+ endpoints)
+
+**Agent model recommendation:** Opus — requires deep reading comprehension and strategic judgment for tool grouping and app candidate selection.
+
+---
+
+*This skill is Phase 1 of the MCP Factory pipeline. The analysis document it produces is the single source of truth for all subsequent phases.*
diff --git a/skills/mcp-app-designer/SKILL.md b/skills/mcp-app-designer/SKILL.md
new file mode 100644
index 0000000..b35fd05
--- /dev/null
+++ b/skills/mcp-app-designer/SKILL.md
@@ -0,0 +1,2170 @@
+# MCP App Designer — Phase 3: Design & Build HTML Apps
+
+**When to use this skill:** You have a `{service}-api-analysis.md` (specifically the App Candidates section) and optionally a built MCP server, and need to create the visual HTML apps that render in LocalBosses. Each app is a single self-contained HTML file.
+
+**What this covers:** Dark theme design specs, 9 app type patterns (including Interactive Data Grid), data visualization primitives, accessibility fundamentals, micro-interactions, bidirectional communication, the exact HTML template with data reception, responsive design, three-state rendering (loading/empty/data), and data flow architecture.
+
+**Pipeline position:** Phase 3 of 6 → Input from `mcp-api-analyzer` (Phase 1), can run parallel with `mcp-server-builder` (Phase 2). Output feeds `mcp-localbosses-integrator` (Phase 4).
+
+---
+
+## 1. Inputs & Outputs
+
+**Inputs:**
+- `{service}-api-analysis.md` — App Candidates section (which apps to build, data sources)
+- Tool definitions (from Phase 2 server or analysis doc) — what data shapes to expect
+
+**Output:** HTML app files in `{service}-mcp/app-ui/`:
+```
+{service}-mcp/
+└── app-ui/
+ ├── dashboard.html
+ ├── contact-grid.html
+ ├── contact-card.html
+ ├── contact-creator.html
+ ├── calendar-view.html
+ ├── pipeline-kanban.html
+ ├── activity-timeline.html
+ ├── data-explorer.html ← Interactive Data Grid (new)
+ └── ...
+```
+
+Each file is a **single, self-contained HTML file** with all CSS and JS inline. Zero external dependencies.
+
+---
+
+## 2. Design System — LocalBosses Dark Theme
+
+### Color Palette
+
+> **WCAG AA Compliance Note:** All text colors must maintain a minimum contrast ratio of **4.5:1** against their background for normal text (under 18px/14px bold), and **3:1** for large text. The secondary text color `#b0b2b8` achieves **5.0:1** on `#1a1d23` and **4.3:1** on `#2b2d31`, meeting AA for normal text. The previous value `#96989d` (3.7:1) failed this requirement and must not be used.
+
+| Token | Hex | Usage |
+|-------|-----|-------|
+| `--bg-primary` | `#1a1d23` | Page/body background |
+| `--bg-secondary` | `#2b2d31` | Cards, panels, containers |
+| `--bg-tertiary` | `#232529` | Nested elements, table rows alt |
+| `--bg-hover` | `#35373c` | Hover states on interactive elements |
+| `--bg-input` | `#1e2024` | Form inputs, text areas |
+| `--accent` | `#ff6d5a` | Primary accent, buttons, active states |
+| `--accent-hover` | `#ff8574` | Accent hover state |
+| `--accent-subtle` | `rgba(255, 109, 90, 0.15)` | Accent backgrounds, badges |
+| `--text-primary` | `#dcddde` | Primary text |
+| `--text-secondary` | `#b0b2b8` | Muted/secondary text, labels (WCAG AA 5.0:1 on #1a1d23) |
+| `--text-heading` | `#ffffff` | Headings, emphasis |
+| `--border` | `#3a3c41` | Borders, dividers |
+| `--success` | `#43b581` | Success states, positive metrics |
+| `--warning` | `#faa61a` | Warning states, caution |
+| `--danger` | `#f04747` | Error states, destructive actions |
+| `--info` | `#5865f2` | Info states, links |
+
+### Typography
+
+```css
+font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+```
+
+| Element | Size | Weight | Color |
+|---------|------|--------|-------|
+| Page title | 18px | 700 | #ffffff |
+| Section heading | 14px | 600 | #ffffff |
+| Body text | 13px | 400 | #dcddde |
+| Small/muted | 12px | 400 | #b0b2b8 |
+| Metric value | 24px | 700 | #ff6d5a |
+| Table header | 11px | 600 | #b0b2b8 (uppercase, letter-spacing: 0.5px) |
+
+### Spacing & Layout
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| `--gap-xs` | 4px | Tight spacing (icon + label) |
+| `--gap-sm` | 8px | Compact spacing |
+| `--gap-md` | 12px | Standard spacing |
+| `--gap-lg` | 16px | Section spacing |
+| `--gap-xl` | 24px | Major section breaks |
+| `--radius-sm` | 4px | Small elements (badges, chips) |
+| `--radius-md` | 8px | Cards, panels |
+| `--radius-lg` | 12px | Large containers, modals |
+
+### Components
+
+#### Cards
+```css
+.card {
+ background: #2b2d31;
+ border-radius: 8px;
+ padding: 16px;
+ border: 1px solid #3a3c41;
+}
+```
+
+#### Buttons
+```css
+.btn-primary {
+ background: #ff6d5a;
+ color: #ffffff;
+ border: none;
+ padding: 8px 16px;
+ border-radius: 6px;
+ font-size: 13px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: background 0.15s;
+}
+.btn-primary:hover { background: #ff8574; }
+.btn-primary:focus-visible { outline: 2px solid #ff6d5a; outline-offset: 2px; }
+
+.btn-secondary {
+ background: transparent;
+ color: #dcddde;
+ border: 1px solid #3a3c41;
+ padding: 8px 16px;
+ border-radius: 6px;
+ font-size: 13px;
+ cursor: pointer;
+ transition: all 0.15s;
+}
+.btn-secondary:hover { background: #35373c; border-color: #4a4c51; }
+.btn-secondary:focus-visible { outline: 2px solid #ff6d5a; outline-offset: 2px; }
+```
+
+#### Status badges
+```css
+.badge { padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
+.badge-success { background: rgba(67, 181, 129, 0.15); color: #43b581; }
+.badge-warning { background: rgba(250, 166, 26, 0.15); color: #faa61a; }
+.badge-danger { background: rgba(240, 71, 71, 0.15); color: #f04747; }
+.badge-info { background: rgba(88, 101, 242, 0.15); color: #5865f2; }
+.badge-accent { background: rgba(255, 109, 90, 0.15); color: #ff6d5a; }
+.badge-neutral { background: rgba(176, 178, 184, 0.15); color: #b0b2b8; }
+```
+
+---
+
+## 3. Data Visualization Primitives
+
+All visualizations use pure CSS/SVG — zero external dependencies. Copy these snippets into any app template.
+
+### 3.1 Line / Area Chart (SVG Polyline)
+
+```html
+
+
+```
+
+**JS helper to generate points from data:**
+```javascript
+function makeLinePoints(data, width, height) {
+ const max = Math.max(...data.map(d => d.value), 1);
+ const step = width / Math.max(data.length - 1, 1);
+ return data.map((d, i) => `${i * step},${height - (d.value / max) * (height - 10)}`).join(' ');
+}
+// Usage: {App Name}
+
+
+
+
+ ${cellContent} `;
+ }).join('')}
+
+
+
+
+
+
+
+
+ `;
+ }).join('');
+
+ // Update count
+ const countEl = document.getElementById('grid-count');
+ if (countEl) countEl.textContent = items.length;
+}
+
+// ── Apply Sort (without toggling direction) ──
+// Extracted so handleSearch can re-apply the current sort without side effects
+function applySort() {
+ const colKey = gridState.sortCol;
+ if (!colKey) return;
+ gridState.filteredItems.sort((a, b) => {
+ let aVal = a[colKey], bVal = b[colKey];
+ if (aVal == null) return 1;
+ if (bVal == null) return -1;
+ if (typeof aVal === 'number' && typeof bVal === 'number') {
+ return gridState.sortDir === 'asc' ? aVal - bVal : bVal - aVal;
+ }
+ aVal = String(aVal).toLowerCase();
+ bVal = String(bVal).toLowerCase();
+ const cmp = aVal.localeCompare(bVal);
+ return gridState.sortDir === 'asc' ? cmp : -cmp;
+ });
+}
+
+// ── Sorting (user clicks column header) ──
+function handleSort(colKey) {
+ if (gridState.sortCol === colKey) {
+ gridState.sortDir = gridState.sortDir === 'asc' ? 'desc' : 'asc';
+ } else {
+ gridState.sortCol = colKey;
+ gridState.sortDir = 'asc';
+ }
+
+ // Update header classes
+ document.querySelectorAll('.sortable').forEach(th => th.classList.remove('asc', 'desc'));
+ const activeHeader = document.getElementById(`col-${colKey}`);
+ if (activeHeader) activeHeader.classList.add(gridState.sortDir);
+
+ applySort();
+ renderRows();
+}
+
+// ── Filtering / Search ──
+function handleSearch(query) {
+ gridState.searchQuery = query.toLowerCase().trim();
+ if (!gridState.searchQuery) {
+ gridState.filteredItems = [...gridState.items];
+ } else {
+ gridState.filteredItems = gridState.items.filter(item =>
+ Object.values(item).some(v =>
+ v != null && String(v).toLowerCase().includes(gridState.searchQuery)
+ )
+ );
+ }
+ // Re-apply current sort without toggling direction
+ if (gridState.sortCol) {
+ applySort();
+ }
+ renderRows();
+}
+
+// ── Bulk Selection ──
+function toggleSelect(id, checked) {
+ if (checked) {
+ gridState.selectedIds.add(id);
+ } else {
+ gridState.selectedIds.delete(id);
+ }
+ updateBulkBar();
+}
+
+function toggleSelectAll(checked) {
+ if (checked) {
+ gridState.filteredItems.forEach(item => gridState.selectedIds.add(item._id));
+ } else {
+ gridState.selectedIds.clear();
+ }
+ // Update all checkboxes
+ document.querySelectorAll('#grid-body .grid-check').forEach(cb => cb.checked = checked);
+ updateBulkBar();
+}
+
+function clearSelection() {
+ gridState.selectedIds.clear();
+ document.querySelectorAll('.grid-check').forEach(cb => cb.checked = false);
+ updateBulkBar();
+}
+
+function updateBulkBar() {
+ const bar = document.getElementById('bulk-bar');
+ const count = gridState.selectedIds.size;
+ if (bar) {
+ bar.style.display = count > 0 ? 'flex' : 'none';
+ document.getElementById('bulk-count').textContent = count;
+ }
+}
+
+function handleBulkAction(action) {
+ const selectedItems = gridState.items.filter(item => gridState.selectedIds.has(item._id));
+ sendToHost('tool_call', { action, items: selectedItems.map(i => ({ ...i, _idx: undefined, _id: undefined })) });
+}
+
+// ── Expand/Collapse ──
+function toggleExpand(id) {
+ if (gridState.expandedIds.has(id)) {
+ gridState.expandedIds.delete(id);
+ } else {
+ gridState.expandedIds.add(id);
+ }
+ const detailRow = document.getElementById(`detail-${id}`);
+ const icon = document.querySelector(`tr[data-id="${id}"] .expand-icon`);
+ if (detailRow) detailRow.classList.toggle('open');
+ if (icon) {
+ icon.classList.toggle('open');
+ icon.setAttribute('aria-expanded', gridState.expandedIds.has(id));
+ }
+}
+```
+
+> **Performance Note (100+ rows):** For datasets over 100 rows, the full DOM render becomes slow. Two mitigation strategies:
+> 1. **Client-side pagination:** Render 50 rows at a time with prev/next controls. All data is already loaded — just slice the array.
+> 2. **Virtual scrolling:** Only render visible rows + a buffer zone (±10 rows). Recalculate on scroll. More complex but handles 10K+ rows.
+>
+> For most MCP apps, client-side pagination is sufficient. The tool's `meta.pageSize` already limits server-side results to 25-50 rows.
+
+**Interactive Data Grid empty state customization:**
+```html
+
+```
+
+---
+
+## 7. Bidirectional Communication Patterns
+
+Apps can send actions back to the LocalBosses host using `sendToHost()`. The host listens for `mcp_app_action` messages on the iframe's parent window.
+
+### Pattern 1: Request Data Refresh
+
+```javascript
+// User clicks a "Refresh" button in the app
+document.getElementById('refreshBtn').addEventListener('click', () => {
+ sendToHost('refresh', {});
+ showState('loading'); // Show loading while refresh happens
+});
+```
+
+### Pattern 2: Navigate to Another App (Drill-Down)
+
+```javascript
+// User clicks a contact name → open their detail card
+function openContact(contactId, contactName) {
+ sendToHost('navigate', {
+ app: 'contact-card',
+ params: { id: contactId, name: contactName }
+ });
+}
+
+// In a table row:
+// ${escapeHtml(item.name)}
+```
+
+> **App-to-App Navigation (Drill-Down):** The `sendToHost('navigate', ...)` pattern enables interconnected apps. Example flows:
+> - **Data Grid → Detail Card:** Click a contact name in the grid → host opens the contact-card app with that contact's data
+> - **Dashboard → Data Grid:** Click a metric card → host opens the grid filtered to that metric
+> - **Detail Card → Form:** Click "Edit" → host opens the form pre-filled with the entity's data
+>
+> The host must listen for `mcp_app_action` messages with `action: 'navigate'` and handle the app switch (see `mcp-localbosses-integrator` Phase 4 for host-side wiring).
+
+### Pattern 3: Trigger a Tool Call
+
+```javascript
+// User clicks "Delete" on a row
+function deleteItem(itemId) {
+ if (confirm('Are you sure you want to delete this item?')) {
+ sendToHost('tool_call', {
+ tool: 'delete_contact',
+ args: { id: itemId }
+ });
+ }
+}
+```
+
+---
+
+## 8. Responsive Design Requirements
+
+Apps must work from **280px to 800px width**.
+
+### Breakpoints:
+
+| Width | Behavior |
+|-------|----------|
+| 280-399px | Single column. Compact padding. Smaller fonts. Horizontal scroll for tables. |
+| 400-599px | Two columns for metrics. Standard padding. |
+| 600-800px | Full layout. Three+ metric columns. Tables without scroll. |
+
+### Required CSS:
+```css
+@media (max-width: 400px) {
+ body { padding: 12px; }
+ .metrics-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
+ .app-title { font-size: 16px; }
+ .data-table { font-size: 12px; }
+}
+@media (max-width: 300px) {
+ .metrics-row { grid-template-columns: 1fr; }
+ body { padding: 8px; }
+}
+```
+
+### Key rules:
+- Use `grid-template-columns: repeat(auto-fit, minmax(Xpx, 1fr))` for adaptive grids
+- Tables get `overflow-x: auto` on the container
+- Pipeline columns scroll horizontally on narrow screens
+- All text uses `word-break: break-word` or `text-overflow: ellipsis`
+
+---
+
+## 9. Three Required States
+
+Every app MUST implement all three:
+
+### 1. Loading State (visible on page load)
+- Use CSS skeleton animations (shimmer effect)
+- Match the layout of the data state (skeletons should look like the content)
+- Default state — visible when page first loads
+- Must include `role="status"` and `aria-label="Loading content"` for screen readers
+- Must include `Loading content, please wait…`
+- Skeleton animation respects `prefers-reduced-motion` (degrades to static background)
+
+### 2. Empty State (when data is null or empty)
+- Center-aligned with large icon, title, and description
+- **Context-specific prompt per app type** (NOT generic "Ask me a question"):
+ - Dashboard: "Ask me for a performance overview, KPIs, or a metrics summary."
+ - Data Grid: "Try 'show me all active contacts' or 'list recent invoices.'"
+ - Detail Card: "Ask about a specific record by name or ID to see its details."
+ - Form: "Tell me what you'd like to create and I'll set up the form."
+ - Timeline: "Ask to see recent activity, event history, or an audit trail."
+ - Pipeline: "Ask to see your sales pipeline or a specific deal stage."
+ - Calendar: "Ask to see upcoming appointments or your calendar for a date range."
+ - Analytics: "Ask for analytics, performance trends, or a data breakdown."
+ - Interactive Grid: "Try 'show me all contacts' to load data you can sort and explore."
+- Friendly, not error-like
+
+### 3. Data State (when data is received)
+- Full app rendering with `aria-live="polite"` on the content container
+- Handle missing/null fields gracefully (show "—" not "undefined")
+- Handle unexpected data shapes (arrays where objects expected, etc.)
+- Validate data shape with `validateData()` before rendering
+- Apply staggered row entrance animations where appropriate
+- Focus moves to content container when data loads
+
+---
+
+## 10. Rules & Constraints
+
+### MUST:
+- [x] Single HTML file — all CSS/JS inline
+- [x] Zero external dependencies — no CDN links, no fetch to external URLs
+- [x] Dark theme matching LocalBosses palette
+- [x] All three states (loading, empty, data)
+- [x] Both data reception methods (postMessage + polling with exponential backoff)
+- [x] HTML escaping on all user data (`escapeHtml()`)
+- [x] Responsive from 280px to 800px
+- [x] Graceful with missing fields (never show "undefined")
+- [x] Error boundary — `window.onerror` handler, try/catch in render
+- [x] WCAG AA contrast — secondary text `#b0b2b8` (5.0:1), never `#96989d`
+- [x] Accessibility — ARIA attributes, keyboard navigation, focus management
+- [x] Data validation — `validateData()` before rendering
+- [x] Context-specific empty state prompts per app type
+- [x] `prefers-reduced-motion` respected for all animations
+- [x] File size under 50KB per app (ideally under 30KB) — budget enforced during QA
+
+### MUST NOT:
+- [ ] No external CSS/JS files
+- [ ] No CDN links (Chart.js, D3, etc.)
+- [ ] No `
2.5 ? `0 0 ${p.size * 4}px ${COLORS.primary}` : undefined,
+ }}
+ />
+ );
+ })}
+
+ );
+};
+
+/* ─── Animated gradient underline sweep ─── */
+const GradientUnderline: React.FC = () => {
+ const frame = useCurrentFrame();
+
+ const sweepStart = 35;
+ const sweepProgress = interpolate(frame - sweepStart, [0, 30], [0, 100], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ });
+
+ const opacity = interpolate(frame - sweepStart, [0, 10], [0, 1], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ });
+
+ if (frame < sweepStart) return null;
+
+ return (
+
+
+
+ );
+};
+
+/* ─── Expanding ring of light ─── */
+const ExpandingRing: React.FC = () => {
+ const frame = useCurrentFrame();
+ const ringStart = 85;
+
+ if (frame < ringStart) return null;
+
+ const ringScale = interpolate(frame - ringStart, [0, 35], [0, 8], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ });
+
+ const ringOpacity = interpolate(frame - ringStart, [0, 8, 35], [0, 0.5, 0], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ });
+
+ return (
+
+ );
+};
+
+/* ─── Main Scene ─── */
+export const Scene3LogoReveal: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ /* Logo snap-in at frame ~30 with snappy spring */
+ const logoProgress = spring({
+ frame: frame - 28,
+ fps,
+ config: SPRING.snappy,
+ });
+
+ const logoScale = interpolate(logoProgress, [0, 1], [0.3, 1]);
+ const logoOpacity = logoProgress;
+
+ /* Glow shadow behind "Claw" intensifies */
+ const glowIntensity = interpolate(frame, [30, 60], [0, 1], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ });
+
+ /* Subtitle: blur-to-sharp */
+ const subtitleDelay = 55;
+ const subtitleProgress = spring({
+ frame: frame - subtitleDelay,
+ fps,
+ config: SPRING.smooth,
+ });
+ const subtitleBlur = interpolate(subtitleProgress, [0, 1], [12, 0]);
+ const subtitleOpacity = subtitleProgress;
+ const subtitleY = interpolate(subtitleProgress, [0, 1], [15, 0]);
+
+ return (
+
+ {/* Dark mesh background */}
+ })
+
+ {/* Converging particles */}
+
+ );
+};
diff --git a/openclaw-gallery/video/openclaw-promo/src/scenes/Scene4MultiChannel.tsx b/openclaw-gallery/video/openclaw-promo/src/scenes/Scene4MultiChannel.tsx
new file mode 100644
index 0000000..4e17d52
--- /dev/null
+++ b/openclaw-gallery/video/openclaw-promo/src/scenes/Scene4MultiChannel.tsx
@@ -0,0 +1,359 @@
+import React from 'react';
+import { useCurrentFrame, spring, useVideoConfig, interpolate } from 'remotion';
+import { COLORS, FONT, GLASS_CARD, SPRING } from '../styles/theme';
+import { MeshBackground } from '../components/MeshBackground';
+import { ParticleField } from '../components/ParticleField';
+import { GlassCard } from '../components/GlassCard';
+import { AnimatedGlowBorder } from '../components/GlassCard';
+import { KineticText } from '../components/KineticText';
+import {
+ DiscordIcon,
+ TelegramIcon,
+ SlackIcon,
+ WhatsAppIcon,
+ MessageIcon,
+ WebIcon,
+ SmsIcon,
+} from '../components/ChannelIcons';
+
+/* ─── Channel data ─── */
+const channels = [
+ { name: 'Discord', color: '#5865f2', Icon: DiscordIcon },
+ { name: 'iMessage', color: '#34c759', Icon: MessageIcon },
+ { name: 'Telegram', color: '#26a5e4', Icon: TelegramIcon },
+ { name: 'Slack', color: '#e01e5a', Icon: SlackIcon },
+ { name: 'WhatsApp', color: '#25d366', Icon: WhatsAppIcon },
+ { name: 'SMS', color: '#ff6d5a', Icon: SmsIcon },
+ { name: 'Web', color: '#7c3aed', Icon: WebIcon },
+];
+
+const chatBubbles = [
+ { channelIdx: 0, text: '"Schedule all meetings for next week"', offsetX: 130, offsetY: -50 },
+ { channelIdx: 2, text: '"Send Q4 report to the team"', offsetX: -200, offsetY: 35 },
+ { channelIdx: 4, text: '"Update CRM with new leads"', offsetX: 140, offsetY: 30 },
+];
+
+const CX = 960;
+const CY = 490;
+const RADIUS = 300;
+
+/* ─── Data packets: glowing dots traveling along connection lines ─── */
+const DataPackets: React.FC = () => {
+ const frame = useCurrentFrame();
+ const packetStart = 90;
+
+ if (frame < packetStart) return null;
+
+ return (
+ <>
+ {channels.map((ch, i) => {
+ const angle = (i / channels.length) * Math.PI * 2 - Math.PI / 2;
+ const tx = CX + Math.cos(angle) * RADIUS;
+ const ty = CY + Math.sin(angle) * RADIUS;
+
+ // Multiple packets per line, offset in time
+ return [0, 30, 60].map((offset, j) => {
+ const packetFrame = frame - packetStart - i * 6 - offset;
+ const cycle = 50; // frames per full trip
+ const t = ((packetFrame % cycle) + cycle) % cycle;
+ const progress = t / cycle;
+
+ const px = tx + (CX - tx) * progress;
+ const py = ty + (CY - ty) * progress;
+
+ const packetOpacity =
+ packetFrame > 0
+ ? interpolate(progress, [0, 0.1, 0.9, 1], [0, 0.8, 0.8, 0], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ })
+ : 0;
+
+ return (
+
+ );
+ });
+ })}
+
+ );
+};
+
+/* ─── Main Scene ─── */
+export const Scene4MultiChannel: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ /* Center hub */
+ const hubScale = spring({
+ frame,
+ fps,
+ config: SPRING.smooth,
+ });
+
+ const pulse = 1 + Math.sin(frame * 0.08) * 0.04;
+
+ /* Center glow ring */
+ const coreGlow = 0.4 + Math.sin(frame * 0.1) * 0.2;
+
+ return (
+
+
+ {/* Converging particles */}
+
+ {/* Logo */}
+
+
+ {/* Expanding ring */}
+
+ Open
+
+ Claw
+
+
+
+ {/* Gradient underline */}
+
+ Managed AI Systems by MCP Engage
+
+
+
+ );
+};
diff --git a/openclaw-gallery/video/openclaw-promo/src/scenes/Scene5McpTools.tsx b/openclaw-gallery/video/openclaw-promo/src/scenes/Scene5McpTools.tsx
new file mode 100644
index 0000000..ef4cefb
--- /dev/null
+++ b/openclaw-gallery/video/openclaw-promo/src/scenes/Scene5McpTools.tsx
@@ -0,0 +1,349 @@
+import React from 'react';
+import { useCurrentFrame, spring, useVideoConfig, interpolate } from 'remotion';
+import { COLORS, FONT, GLASS_CARD, SPRING } from '../styles/theme';
+import { MeshBackground } from '../components/MeshBackground';
+import { ParticleField } from '../components/ParticleField';
+import { FlipCounter, KineticText } from '../components/KineticText';
+import { GlassCard } from '../components/GlassCard';
+
+/* ─── Tool data ─── */
+const toolNames = [
+ 'GoHighLevel', 'Google Ads', 'Meta Ads', 'Twilio', 'n8n', 'Stripe',
+ 'HubSpot', 'Calendly', 'Mailchimp', 'ServiceTitan', 'Zendesk', 'Close',
+ 'Pipedrive', 'Trello', 'Gusto', 'Rippling', 'Toast', 'QuickBooks',
+ 'Slack', 'GitHub', 'Notion', 'Supabase', 'Salesforce', 'Shopify',
+ 'Freshdesk', 'Monday', 'Asana', 'Jira', 'Linear', 'Intercom',
+];
+
+const toolColors = [
+ '#ff6d5a', '#4285f4', '#1877f2', '#f22f46', '#ea5515', '#635bff',
+ '#ff7a59', '#006bff', '#ffe01b', '#f77f00', '#03363d', '#5055e8',
+ '#21313c', '#0079bf', '#ff5e57', '#24a148', '#ff6600', '#2ca01c',
+ '#e01e5a', '#24292e', '#787878', '#3ecf8e', '#00a1e0', '#7ab55c',
+ '#25c16f', '#f04095', '#fc636b', '#0065ff', '#5e6ad2', '#286efa',
+];
+
+/* ─── Hex / honeycomb layout calculator ─── */
+const COLS = 6;
+const CARD_W = 220;
+const CARD_H = 56;
+const GAP_X = 18;
+const GAP_Y = 14;
+const GRID_TOP = 310;
+
+const getHexPos = (index: number) => {
+ const row = Math.floor(index / COLS);
+ const col = index % COLS;
+ const isOffsetRow = row % 2 === 1;
+ const totalGridW = COLS * (CARD_W + GAP_X) - GAP_X;
+ const gridLeft = (1920 - totalGridW) / 2;
+
+ const x = gridLeft + col * (CARD_W + GAP_X) + (isOffsetRow ? (CARD_W + GAP_X) / 2 : 0);
+ const y = GRID_TOP + row * (CARD_H + GAP_Y);
+ return { x, y, row, col };
+};
+
+/* ─── Distance from grid center for radial wave ─── */
+const CENTER_ROW = 2.5;
+const CENTER_COL = 2.5;
+
+const getDistFromCenter = (index: number) => {
+ const row = Math.floor(index / COLS);
+ const col = index % COLS;
+ return Math.sqrt((row - CENTER_ROW) ** 2 + (col - CENTER_COL) ** 2);
+};
+
+/* ─── Honeycomb SVG background ─── */
+const HoneycombBg: React.FC = () => {
+ const frame = useCurrentFrame();
+ const opacity = interpolate(frame, [0, 40], [0, 0.04], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ });
+
+ // Hexagon path (pointy-top)
+ const hexSize = 40;
+ const hexH = hexSize * Math.sqrt(3);
+ const cols = 30;
+ const rows = 18;
+
+ const hexPoints = (cx: number, cy: number) => {
+ const pts: string[] = [];
+ for (let a = 0; a < 6; a++) {
+ const angle = (Math.PI / 3) * a - Math.PI / 6;
+ pts.push(`${cx + hexSize * Math.cos(angle)},${cy + hexSize * Math.sin(angle)}`);
+ }
+ return pts.join(' ');
+ };
+
+ return (
+
+ );
+};
+
+/* ─── Scan line effect ─── */
+const ScanLine: React.FC = () => {
+ const frame = useCurrentFrame();
+ const scanStart = 100;
+ const scanDuration = 120;
+
+ if (frame < scanStart) return null;
+
+ const y = interpolate(frame - scanStart, [0, scanDuration], [GRID_TOP - 20, GRID_TOP + 420], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ });
+
+ const opacity = interpolate(frame - scanStart, [0, 10, scanDuration - 10, scanDuration], [0, 0.4, 0.4, 0], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ });
+
+ return (
+
+ );
+};
+
+/* ─── Spring config selector for variety ─── */
+const springConfigs = [SPRING.snappy, SPRING.smooth, SPRING.bouncy, SPRING.gentle, SPRING.heavy];
+
+/* ─── Main Scene ─── */
+export const Scene5McpTools: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ /* Counter section fade-in */
+ const counterOpacity = interpolate(frame, [0, 20], [0, 1], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ });
+
+ return (
+
+
+
+ {/* Connection lines SVG */}
+
+
+ {/* Center hub with animated glow border */}
+
+
+
+
+
+ {/* Channel nodes */}
+ {channels.map((ch, i) => {
+ const angle = (i / channels.length) * Math.PI * 2 - Math.PI / 2;
+
+ /* Floating / breathing motion */
+ const breathX = Math.sin(frame * 0.025 + i * 1.3) * 8;
+ const breathY = Math.cos(frame * 0.02 + i * 0.9) * 6;
+
+ const tx = CX + Math.cos(angle) * RADIUS + breathX;
+ const ty = CY + Math.sin(angle) * RADIUS + breathY;
+
+ const nodeDelay = 15 + i * 8;
+ const nodeScale = spring({
+ frame: frame - nodeDelay,
+ fps,
+ config: SPRING.bouncy,
+ });
+
+ return (
+
+ {/* Pulsing core glow */}
+
+
+ AI
+
+
+
+
+ );
+ })}
+
+ {/* Data packets */}
+
+ {bubble.text}
+
+ );
+ })}
+
+ {/* Bottom subtitle */}
+
+ Same AI brain. Any platform. Instant response.
+
+
+
+ );
+};
diff --git a/openclaw-gallery/video/openclaw-promo/src/scenes/Scene6ProductTour.tsx b/openclaw-gallery/video/openclaw-promo/src/scenes/Scene6ProductTour.tsx
new file mode 100644
index 0000000..dd96ba1
--- /dev/null
+++ b/openclaw-gallery/video/openclaw-promo/src/scenes/Scene6ProductTour.tsx
@@ -0,0 +1,373 @@
+import React from 'react';
+import {
+ useCurrentFrame,
+ interpolate,
+ spring,
+ useVideoConfig,
+} from 'remotion';
+import { COLORS, FONT, SPRING } from '../styles/theme';
+import { MeshBackground } from '../components/MeshBackground';
+import { ParticleField } from '../components/ParticleField';
+import { GlassCard, AnimatedGlowBorder } from '../components/GlassCard';
+import { KineticText, FlipCounter } from '../components/KineticText';
+
+/* ── Kanban column data ──────────────────────────────────────── */
+const columns = [
+ {
+ title: 'Queued',
+ color: COLORS.gray,
+ cards: [
+ { name: 'Toast POS MCP', tag: '54 tools' },
+ { name: 'Wave MCP', tag: '38 tools' },
+ { name: 'Gusto HR MCP', tag: '42 tools' },
+ ],
+ },
+ {
+ title: 'Building',
+ color: COLORS.accent,
+ cards: [
+ { name: 'Pipedrive MCP', tag: '46 tools' },
+ { name: 'Zendesk MCP', tag: '62 tools' },
+ ],
+ },
+ {
+ title: 'Testing',
+ color: COLORS.secondary,
+ cards: [
+ { name: 'ServiceTitan MCP', tag: '71 tools' },
+ { name: 'Jobber MCP', tag: '58 tools' },
+ ],
+ },
+ {
+ title: 'Shipped',
+ color: COLORS.green,
+ cards: [
+ { name: 'GoHighLevel MCP', tag: '240+ tools' },
+ { name: 'Twilio MCP', tag: '54 tools' },
+ { name: 'CloseBot MCP', tag: '119 tools' },
+ { name: 'Meta Ads MCP', tag: '55 tools' },
+ ],
+ },
+];
+
+/* ── AI agent icons ──────────────────────────────────────────── */
+const agentEmojis = ['🤖', '⚡', '🧠', '🔧'];
+
+/* ── Scene 6: AI Factory + Kanban ────────────────────────────── */
+export const Scene6ProductTour: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ // Board entry
+ const boardEntry = spring({ frame: frame - 30, fps, config: SPRING.smooth });
+
+ // Stats counters
+ const projectCount = Math.min(30, Math.floor(
+ interpolate(frame, [60, 150], [0, 30], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ })
+ ));
+
+ const toolCount = Math.min(643, Math.floor(
+ interpolate(frame, [80, 180], [0, 643], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ })
+ ));
+
+ // Conveyor animation — cards shift right over time
+ const conveyorShift = interpolate(frame, [200, 380], [0, 1], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ });
+
+ return (
+
+ {/* MCP Tools counter */}
+
+
+ {/* Divider line */}
+
+
+ {/* Section label */}
+
+
+
+ {/* MCP Servers counter */}
+
+ MCP Tools
+
+
+
+
+ {/* Zero manual work */}
+
+ MCP Servers
+
+
+
+
+ Integrations
+
+
+ {/* ─── Tool Grid: Hex layout with radial wave ─── */}
+ {toolNames.map((name, i) => {
+ const pos = getHexPos(i);
+ const dist = getDistFromCenter(i);
+
+ // Radial wave: center cards first, edges last
+ const waveDelay = 55 + dist * 10;
+
+ // Pick varied spring config
+ const configIdx = i % springConfigs.length;
+ const cardProgress = spring({
+ frame: frame - waveDelay,
+ fps,
+ config: springConfigs[configIdx],
+ });
+
+ // Fly in from edges: compute direction from center
+ const row = Math.floor(i / COLS);
+ const col = i % COLS;
+ const dirX = col - CENTER_COL;
+ const dirY = row - CENTER_ROW;
+ const mag = Math.sqrt(dirX * dirX + dirY * dirY) || 1;
+ const flyDist = 300;
+ const startX = pos.x + (dirX / mag) * flyDist * (1 - cardProgress);
+ const startY = pos.y + (dirY / mag) * flyDist * (1 - cardProgress);
+
+ return (
+
+ {/* Colored left accent bar */}
+
+
+ {name}
+
+
+ );
+ })}
+
+ {/* Scan line */}
+
+
+ );
+};
diff --git a/openclaw-gallery/video/openclaw-promo/src/scenes/Scene7PowerFeatures.tsx b/openclaw-gallery/video/openclaw-promo/src/scenes/Scene7PowerFeatures.tsx
new file mode 100644
index 0000000..2f2759a
--- /dev/null
+++ b/openclaw-gallery/video/openclaw-promo/src/scenes/Scene7PowerFeatures.tsx
@@ -0,0 +1,769 @@
+import React from 'react';
+import {
+ useCurrentFrame,
+ spring,
+ useVideoConfig,
+ interpolate,
+ Sequence,
+ staticFile,
+ Img,
+} from 'remotion';
+import { COLORS, FONT, SPRING } from '../styles/theme';
+import { MeshBackground } from '../components/MeshBackground';
+import { ParticleField } from '../components/ParticleField';
+import { GlassCard, AnimatedGlowBorder } from '../components/GlassCard';
+import { KineticText } from '../components/KineticText';
+
+/* ═══════════════════════════════════════════════════════════════
+ 7a Phone Monitor (105 frames ≈ 3.5 s)
+ ═══════════════════════════════════════════════════════════════ */
+const PhoneMonitor: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ const entryScale = spring({ frame, fps, config: SPRING.smooth });
+
+ /* ── audio-style waveform bars ── */
+ const BAR_COUNT = 35;
+ const bars = Array.from({ length: BAR_COUNT }, (_, i) => {
+ const phase = i * 0.4;
+ const h =
+ 20 +
+ Math.sin(i * 0.3) * 10 +
+ Math.sin(frame * 0.12 + phase) * 25 +
+ Math.cos(frame * 0.08 + phase * 1.3) * 15;
+ return Math.max(4, h);
+ });
+
+ /* ── transcript lines ── */
+ const lines = [
+ { speaker: 'Customer', text: '"I need to cancel my subscription…"', isAI: false },
+ { speaker: 'AI Agent', text: '"I understand. Let me check options…"', isAI: true },
+ { speaker: 'Customer', text: '"The price is just too high."', isAI: false },
+ { speaker: 'AI Agent', text: '"I can offer a 30 % loyalty discount…"', isAI: true },
+ { speaker: 'Customer', text: '"That actually sounds great!"', isAI: false },
+ ];
+
+ /* ── pulsing glow ring ── */
+ const glowPulse = 0.8 + Math.sin(frame * 0.1) * 0.2;
+ const glowSize = 130 + Math.sin(frame * 0.08) * 10;
+
+ /* ── INTERRUPT button ── */
+ const buttonScale = 1 + Math.sin(frame * 0.12) * 0.06;
+ const buttonEntry = spring({ frame: frame - 50, fps, config: SPRING.bouncy });
+
+ return (
+
+
+
+ {/* ── Stats bar ──────────────────────────────────── */}
+
+ {[
+ { label: 'MCP Servers Built', val: projectCount, suffix: '+', color: COLORS.primary },
+ { label: 'Total Tools', val: toolCount, suffix: '', color: COLORS.secondary },
+ { label: 'AI Agents Active', val: 4, suffix: '', color: COLORS.accent },
+ ].map((stat, i) => {
+ const op = interpolate(frame, [40 + i * 10, 55 + i * 10], [0, 1], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ });
+ return (
+
+
+ {/* ── Kanban Board ───────────────────────────────── */}
+
+
+ );
+ })}
+
+ {stat.val.toLocaleString()}{stat.suffix}
+
+ {stat.label}
+
+ {columns.map((col, ci) => {
+ const colDelay = 40 + ci * 12;
+ const colEntry = spring({ frame: frame - colDelay, fps, config: SPRING.smooth });
+
+ // For "Shipped" column, cards slide in during conveyor phase
+ const isShipped = ci === 3;
+
+ return (
+
+
+ {/* ── Progress conveyor line at bottom ────────────── */}
+
+ {/* Column header */}
+
+ );
+ })}
+
+
+
+ {/* AI agent indicator for "Building" column */}
+ {ci === 1 && (
+
+
+ {col.title}
+
+ {col.cards.length}
+
+ {agentEmojis.map((emoji, ai) => {
+ const pulse = 0.85 + Math.sin(frame * 0.15 + ai * 1.5) * 0.15;
+ const agentOp = interpolate(frame, [80 + ai * 8, 90 + ai * 8], [0, 1], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ });
+ return (
+
+ )}
+
+ {/* Cards */}
+ {col.cards.map((card, ki) => {
+ const cardDelay = colDelay + 15 + ki * 8;
+ const cardEntry = spring({ frame: frame - cardDelay, fps, config: SPRING.snappy });
+
+ // Card slide effect for conveyor
+ const slideX = isShipped && ki >= 2
+ ? interpolate(conveyorShift, [0, 0.3 + ki * 0.15, 0.5 + ki * 0.15], [80, 80, 0], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ })
+ : 0;
+ const slideOp = isShipped && ki >= 2
+ ? interpolate(conveyorShift, [0.3 + ki * 0.1, 0.5 + ki * 0.1], [0, 1], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ })
+ : 1;
+
+ // Checkmark for shipped items
+ const isComplete = isShipped;
+ const checkOp = isComplete ? interpolate(frame, [cardDelay + 20, cardDelay + 28], [0, 1], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ }) : 0;
+
+ // Breathing glow for building items
+ const isBuilding = ci === 1;
+ const buildGlow = isBuilding ? 0.3 + Math.sin(frame * 0.1 + ki * 2) * 0.2 : 0;
+
+ return (
+
+ {emoji}
+
+ );
+ })}
+
+
+
+
+ );
+ })}
+
+
+
+
+ {isComplete && checkOp > 0 && (
+ {card.name}
+ {card.tag}
+
+ ✓
+
+ )}
+ {isBuilding && (
+
+ {agentEmojis[ki % agentEmojis.length]}
+
+ )}
+
+
+ {/* Traveling dot on conveyor */}
+
+
+
+
+
+ );
+};
+
+/* ═══════════════════════════════════════════════════════════════
+ 7b Batch Generation (105 frames ≈ 3.5 s)
+ ═══════════════════════════════════════════════════════════════ */
+const BatchGeneration: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ const funnels = [
+ { name: 'ServiceTitan', img: 'funnel-servicetitan.png' },
+ { name: 'Jobber', img: 'funnel-jobber.png' },
+ { name: 'CloseCRM', img: 'funnel-closecrm.png' },
+ { name: 'Rippling', img: 'funnel-rippling.png' },
+ { name: 'FreshBooks', img: 'funnel-freshbooks.png' },
+ { name: 'HouseCall Pro', img: 'funnel-housecallpro.png' },
+ { name: 'TouchBistro', img: 'funnel-touchbistro.png' },
+ { name: 'Wave', img: 'funnel-wave.png' },
+ { name: 'BambooHR', img: 'funnel-bamboohr.png' },
+ { name: 'Lightspeed', img: 'funnel-lightspeed.png' },
+ { name: 'FieldEdge', img: 'funnel-fieldedge.png' },
+ { name: 'Clover', img: 'funnel-clover.png' },
+ ];
+
+ const totalTarget = 30;
+ const completed = Math.min(
+ totalTarget,
+ Math.floor(
+ interpolate(frame, [15, 90], [0, 30], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ }),
+ ),
+ );
+ const progressPct = interpolate(frame, [15, 90], [0, 100], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ });
+
+ return (
+
+
+
+ {/* phone icon + glow ring */}
+
+
+
+
+ {/* waveform */}
+
+ 📞
+
+
+ {bars.map((h, i) => {
+ const barEntry = spring({ frame: frame - i * 1, fps, config: SPRING.snappy });
+ return (
+
+ );
+ })}
+
+
+ {/* transcript card */}
+
+
+
+
+
+ {/* INTERRUPT button */}
+
+ {lines.map((l, i) => {
+ const op = interpolate(frame, [15 + i * 14, 25 + i * 14], [0, 1], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ });
+ const ty = interpolate(frame, [15 + i * 14, 25 + i * 14], [12, 0], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ });
+ return (
+
+
+
+ );
+ })}
+
+ {l.speaker}
+
+ {l.text}
+
+
+
+
+
+
+ ⚡ INTERRUPT
+
+
+
+ );
+};
+
+/* ═══════════════════════════════════════════════════════════════
+ 7c Agent Factory (105 frames ≈ 3.5 s)
+ ═══════════════════════════════════════════════════════════════ */
+const AgentFactory: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ const agents = [
+ { name: 'Research', icon: '🔍' },
+ { name: 'Writer', icon: '✍️' },
+ { name: 'Coder', icon: '💻' },
+ { name: 'Analyst', icon: '📊' },
+ { name: 'Designer', icon: '🎨' },
+ { name: 'QA', icon: '🧪' },
+ ];
+
+ const cx = 960;
+ const cy = 500;
+ const orbit = 250;
+
+ const coreEntry = spring({ frame, fps, config: SPRING.bouncy });
+ const corePulse = 1 + Math.sin(frame * 0.08) * 0.03;
+
+ return (
+
+
+
+ {/* funnel card grid (4 × 3) */}
+
+ {funnels.map((funnel, i) => {
+ const row = Math.floor(i / 4);
+ const col = i % 4;
+ const delay = 8 + (row + col) * 4;
+ const cardProg = spring({ frame: frame - delay, fps, config: SPRING.snappy });
+ const isDone = frame > delay + 20;
+ const checkOp = interpolate(frame, [delay + 20, delay + 30], [0, 1], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ });
+
+ return (
+
+
+ {/* progress bar */}
+
+
+
+
+ );
+ })}
+
+ {/* Real funnel screenshot */}
+ })
+ {/* Dark overlay with name */}
+
+
+
+
+ {/* green checkmark overlay */}
+ {isDone && (
+
+ {funnel.name}
+
+
+ ✓
+
+ )}
+
+
+
+
+
+
+
+ {completed}/{totalTarget}{' '}
+ Complete
+
+
+
+ );
+};
+
+/* ═══════════════════════════════════════════════════════════════
+ 7d Memory System (105 frames ≈ 3.5 s)
+ ═══════════════════════════════════════════════════════════════ */
+const MemorySystem: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ const timelineLeft = 200;
+ const timelineRight = 1720;
+ const timelineW = timelineRight - timelineLeft;
+ const timelineY = 580;
+
+ const drawProg = interpolate(frame, [5, 60], [0, 1], {
+ extrapolateLeft: 'clamp',
+ extrapolateRight: 'clamp',
+ });
+
+ const nodes = [
+ { pct: 0.1, label: 'Jan 15', detail: 'Client prefers email' },
+ { pct: 0.3, label: 'Feb 3', detail: 'Pricing updated' },
+ { pct: 0.5, label: 'Mar 12', detail: 'New workflow added' },
+ { pct: 0.7, label: 'Apr 8', detail: 'Team expanded' },
+ { pct: 0.9, label: 'May 1', detail: 'Revenue milestone' },
+ ];
+
+ const currentPulse = 0.8 + Math.sin(frame * 0.12) * 0.2;
+ const currentScale = 1 + Math.sin(frame * 0.1) * 0.15;
+
+ return (
+
+
+
+ {/* connection lines + flowing dots */}
+
+
+ {/* centre Core node */}
+
+
+
+
+
+ {/* orbiting agent nodes */}
+ {agents.map((a, i) => {
+ const angle = (i / agents.length) * Math.PI * 2 - Math.PI / 2 + frame * 0.008;
+ const ax = cx + Math.cos(angle) * orbit;
+ const ay = cy + Math.sin(angle) * orbit * 0.55;
+ const depth = Math.sin(angle + Math.PI / 2);
+ const nodeScale = 0.75 + depth * 0.25;
+ const zIdx = depth > 0 ? 10 : 1;
+
+ const nodeEntry = spring({ frame: frame - 15 - i * 8, fps, config: SPRING.bouncy });
+ const checkEntry = spring({ frame: frame - 55 - i * 7, fps, config: SPRING.snappy });
+ const ringOff = (frame * 2 + i * 60) % 283;
+
+ return (
+
+
+ 🧠
+ Core
+
+ {/* spinning ring */}
+
+
+ {/* node pill */}
+
+
+
+ );
+ })}
+
+ {a.icon}
+
+ {a.name}
+
+ {checkEntry > 0.1 && (
+
+ ✓
+
+ )}
+
+
+ );
+};
+
+/* ═══════════════════════════════════════════════════════════════
+ Main Scene 7 wrapper (420 frames total)
+ ═══════════════════════════════════════════════════════════════ */
+export const Scene7PowerFeatures: React.FC = () => {
+ const SUB = 105;
+ return (
+
+
+
+ {/* animated gradient timeline */}
+
+
+ {/* memory node cards + dots */}
+ {nodes.map((n, i) => {
+ const nodeX = timelineLeft + n.pct * timelineW;
+ const nodeEntry = spring({ frame: frame - 15 - i * 10, fps, config: SPRING.bouncy });
+ const dotGlow = 0.6 + Math.sin(frame * 0.1 + i * 1.5) * 0.4;
+
+ return (
+
+ {/* card */}
+
+ );
+ })}
+
+ {/* pulsing "current" indicator */}
+
+
+
+
+
+
+
+ {/* connector line */}
+
+
+ {/* glowing dot */}
+
+ {n.label}
+
+ {n.detail}
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/openclaw-gallery/video/openclaw-promo/src/scenes/Scene8Architecture.tsx b/openclaw-gallery/video/openclaw-promo/src/scenes/Scene8Architecture.tsx
new file mode 100644
index 0000000..9e852d1
--- /dev/null
+++ b/openclaw-gallery/video/openclaw-promo/src/scenes/Scene8Architecture.tsx
@@ -0,0 +1,218 @@
+import React from 'react';
+import { useCurrentFrame, spring, useVideoConfig, interpolate } from 'remotion';
+import { COLORS, FONT, SPRING } from '../styles/theme';
+import { MeshBackground } from '../components/MeshBackground';
+import { ParticleField } from '../components/ParticleField';
+import { GlassCard, AnimatedGlowBorder } from '../components/GlassCard';
+import { KineticText } from '../components/KineticText';
+
+const channels = [
+ { name: 'Discord', color: '#5865f2' },
+ { name: 'iMessage', color: '#34c759' },
+ { name: 'Telegram', color: '#26a5e4' },
+ { name: 'Slack', color: '#e01e5a' },
+ { name: 'Web', color: '#7c3aed' },
+];
+
+const bottomNodes = [
+ { name: 'MCP Servers', color: COLORS.primary, icon: '⚡' },
+ { name: 'Memory', color: '#22c55e', icon: '🧠' },
+ { name: 'Cron Jobs', color: '#eab308', icon: '⏰' },
+ { name: 'Sub-Agents', color: COLORS.secondary, icon: '🤖' },
+];
+
+export const Scene8Architecture: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ const cx = 960;
+ const topY = 170;
+ const coreY = 470;
+ const bottomY = 740;
+
+ return (
+
+
+ );
+};
diff --git a/openclaw-gallery/video/openclaw-promo/src/scenes/Scene9Pricing.tsx b/openclaw-gallery/video/openclaw-promo/src/scenes/Scene9Pricing.tsx
new file mode 100644
index 0000000..cdec9a3
--- /dev/null
+++ b/openclaw-gallery/video/openclaw-promo/src/scenes/Scene9Pricing.tsx
@@ -0,0 +1,183 @@
+import React from 'react';
+import { useCurrentFrame, spring, useVideoConfig, interpolate } from 'remotion';
+import { COLORS, FONT, SPRING } from '../styles/theme';
+import { MeshBackground } from '../components/MeshBackground';
+import { ParticleField } from '../components/ParticleField';
+import { GlassCard, AnimatedGlowBorder } from '../components/GlassCard';
+import { KineticText, FlipCounter } from '../components/KineticText';
+
+const plans = [
+ {
+ name: 'Starter',
+ price: 2499,
+ color: COLORS.accent,
+ featured: false,
+ features: ['3 MCP Servers', '1 Channel', 'Basic Memory', 'Setup & Training'],
+ },
+ {
+ name: 'Standard',
+ price: 7499,
+ color: COLORS.primary,
+ featured: false,
+ features: ['15 MCP Servers', '5 Channels', 'Full Memory', 'Managed Support'],
+ },
+ {
+ name: 'White Glove',
+ price: 24999,
+ color: COLORS.primary,
+ featured: true,
+ features: ['30+ MCP Servers', 'All Channels', 'Custom AI Systems', 'Dedicated Team'],
+ },
+];
+
+export const Scene9Pricing: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ return (
+
+
+
+ {/* SVG connection lines + flowing dots */}
+
+
+ {/* Channel nodes at top */}
+ {channels.map((ch, i) => {
+ const iconX = 280 + i * 340;
+ const entry = spring({ frame: frame - i * 6, fps, config: SPRING.bouncy });
+ return (
+
+
+
+
+ );
+ })}
+
+ {/* Core node */}
+ {ch.name}
+
+
+
+
+
+ {/* Bottom service nodes */}
+ {bottomNodes.map((node, i) => {
+ const nodeX = 280 + i * 450;
+ const entry = spring({ frame: frame - 100 - i * 8, fps, config: SPRING.smooth });
+ return (
+
+
+ 🦀
+ OpenClaw Core
+
+
+
+
+ );
+ })}
+
+ {/* Bottom label */}
+ {node.icon}
+ {node.name}
+
+ Modular. Extensible. Built for scale.
+
+
+
+
+ );
+};
diff --git a/openclaw-gallery/video/openclaw-promo/src/styles/theme.ts b/openclaw-gallery/video/openclaw-promo/src/styles/theme.ts
new file mode 100644
index 0000000..0071a95
--- /dev/null
+++ b/openclaw-gallery/video/openclaw-promo/src/styles/theme.ts
@@ -0,0 +1,52 @@
+import React from 'react';
+
+export const COLORS = {
+ bg: '#0a0b10',
+ bgAlt: '#0f1019',
+ primary: '#ff6d5a',
+ primaryGlow: '#ff6d5a40',
+ secondary: '#7c3aed',
+ secondaryGlow: '#7c3aed40',
+ accent: '#38bdf8',
+ accentGlow: '#38bdf840',
+ white: '#f0f0f5',
+ gray: '#7a7d8a',
+ lightGray: '#b0b3be',
+ darkCard: '#14151f',
+ cardBorder: '#1f2030',
+ discord: '#5865f2',
+ imessage: '#34c759',
+ telegram: '#26a5e4',
+ slack: '#e01e5a',
+ whatsapp: '#25d366',
+ sms: '#ff6d5a',
+ web: '#7c3aed',
+ red: '#ef4444',
+ green: '#22c55e',
+ gold: '#f59e0b',
+} as const;
+
+export const GLASS_CARD: React.CSSProperties = {
+ background: 'rgba(20, 21, 31, 0.6)',
+ backdropFilter: 'blur(24px)',
+ WebkitBackdropFilter: 'blur(24px)',
+ borderRadius: 20,
+ border: '1px solid rgba(255, 255, 255, 0.06)',
+ boxShadow: '0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04)',
+};
+
+export const CARD_STYLE: React.CSSProperties = {
+ borderRadius: 16,
+ boxShadow: '0 4px 24px rgba(0,0,0,0.3)',
+};
+
+export const FONT = "'Inter', -apple-system, BlinkMacSystemFont, sans-serif";
+
+// Spring presets for varied motion
+export const SPRING = {
+ snappy: { damping: 30, stiffness: 400 },
+ smooth: { damping: 25, stiffness: 150 },
+ heavy: { damping: 40, stiffness: 100 },
+ bouncy: { damping: 12, stiffness: 200 },
+ gentle: { damping: 35, stiffness: 120 },
+} as const;
diff --git a/openclaw-gallery/video/openclaw-promo/tsconfig.json b/openclaw-gallery/video/openclaw-promo/tsconfig.json
new file mode 100644
index 0000000..e7e95e4
--- /dev/null
+++ b/openclaw-gallery/video/openclaw-promo/tsconfig.json
@@ -0,0 +1,16 @@
+{
+ "compilerOptions": {
+ "target": "ES2018",
+ "module": "commonjs",
+ "jsx": "react-jsx",
+ "strict": true,
+ "esModuleInterop": true,
+ "skipLibCheck": true,
+ "forceConsistentCasingInFileNames": true,
+ "moduleResolution": "node",
+ "outDir": "./dist",
+ "rootDir": "./src"
+ },
+ "include": ["src/**/*"],
+ "exclude": ["node_modules"]
+}
diff --git a/pickle_history.txt b/pickle_history.txt
index a2dc28e..ebfef52 100644
--- a/pickle_history.txt
+++ b/pickle_history.txt
@@ -16,3 +16,4 @@
2026-02-01: You're built for this! Did you know about pickles? Why are pickles such good friends? They're always there when you're in a jam...or jar.
2026-02-02: Keep your eyes on the prize! Bringing the pickle energy: What's a pickle's favorite day of the week? Fri-dill of course.
2026-02-03: The world needs what you've got! Why are pickles so funny? Why are pickles so resilient? They've been through a lot - literally submerged and came out crunchier.
+2026-02-04: You've got this, Stevan! Pickle vibes: What do you call a pickle that's really stressed? A dill-lemma.
diff --git a/skills/mcp-api-analyzer/SKILL.md b/skills/mcp-api-analyzer/SKILL.md
new file mode 100644
index 0000000..7c6434c
--- /dev/null
+++ b/skills/mcp-api-analyzer/SKILL.md
@@ -0,0 +1,869 @@
+# MCP API Analyzer — Phase 1: API Discovery & Analysis
+
+**When to use this skill:** You have API documentation (URLs, OpenAPI specs, user guides) for a service and need to produce a structured analysis document that feeds into the MCP Factory pipeline. This is always the FIRST step before building anything.
+
+**What this covers:** Reading API docs efficiently, cataloging endpoints, designing tool groups, naming tools, identifying app candidates, documenting auth flows and rate limits. Output is a single `{service}-api-analysis.md` file.
+
+**Pipeline position:** Phase 1 of 6 → Output feeds into `mcp-server-builder` (Phase 2) and `mcp-app-designer` (Phase 3)
+
+---
+
+## 1. Inputs
+
+| Input | Required | Description |
+|-------|----------|-------------|
+| API documentation URL(s) | **Yes** | Primary reference docs |
+| OpenAPI/Swagger spec | Preferred | Machine-readable endpoint catalog |
+| User guides / tutorials | Nice-to-have | Helps understand real-world usage |
+| Marketing / pricing page | Nice-to-have | Tier limits, feature gates |
+| Existing SDK examples | Nice-to-have | Reveals common patterns |
+
+## 2. Output
+
+A single file: **`{service}-api-analysis.md`**
+
+Place it in the workspace root or alongside the future server directory:
+```
+~/.clawdbot/workspace/{service}-api-analysis.md
+```
+
+This file is the sole input for Phase 2 (server build) and Phase 3 (app design).
+
+---
+
+## 3. How to Read API Docs Efficiently
+
+### Step 0: API Style Detection
+
+**Identify the API style FIRST.** This determines how you read the docs and how tools are designed.
+
+| Style | Detection Signals | Tool Mapping |
+|-------|-------------------|--------------|
+| **REST** | Multiple URL paths, standard HTTP verbs (GET/POST/PUT/DELETE), resource-oriented URLs | 1 endpoint → 1 tool (standard) |
+| **GraphQL** | Single `/graphql` endpoint, `query`/`mutation` in request body, schema introspection | Queries → read tools, Mutations → write tools, Subscriptions → skip (note for future) |
+| **SOAP/XML** | WSDL file, XML request/response, `Content-Type: text/xml`, `.asmx` endpoints | Each WSDL operation → 1 tool, note XML→JSON transform needed |
+| **gRPC** | `.proto` files, binary protocol, service/method definitions | Each RPC method → 1 tool, note HTTP/gRPC gateway if available |
+| **WebSocket** | `ws://` or `wss://` URLs, persistent connections, event-based messaging | Message types → tools, note connection lifecycle management |
+
+**Adaptation notes for non-REST APIs:**
+
+- **GraphQL:** Download the schema (`{ __schema { types { name fields { name } } } }`). Group by query vs mutation. Each meaningful query/mutation becomes a tool. Combine related queries if they share variables. The server's API client sends POST requests with `{ query, variables }` — document the query string per tool.
+- **SOAP:** Locate the WSDL. Each `
+
+
+ {/* Cards */}
+
+ {plans.map((plan, i) => {
+ const delay = 20 + i * 12;
+ const entry = spring({ frame: frame - delay, fps, config: SPRING.smooth });
+ const translateY = interpolate(entry, [0, 1], [80, 0]);
+
+ const cardWidth = plan.featured ? 420 : 370;
+ const cardInner = (
+
+
+
+ {/* Badge */}
+ {plan.featured && (
+
+ );
+
+ return (
+
+ MOST POPULAR
+
+ )}
+
+ {plan.name}
+
+
+ $
+
+ managed setup
+
+ {/* Feature list */}
+
+ {plan.features.map((feat, fi) => {
+ const featOp = interpolate(
+ frame,
+ [delay + 30 + fi * 6, delay + 38 + fi * 6],
+ [0, 1],
+ { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' },
+ );
+ const featY = interpolate(
+ frame,
+ [delay + 30 + fi * 6, delay + 38 + fi * 6],
+ [10, 0],
+ { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' },
+ );
+
+ return (
+
+
+ ✓
+ {feat}
+
+ );
+ })}
+
+ {plan.featured ? (
+
+ {cardInner}
+
+ ) : (
+
+ {cardInner}
+
+ )}
+
+ );
+ })}
+
+ Conversion
+
+ 45%
+
+```
+
+### 3.5 Horizontal Bar Charts (CSS Flexbox)
+
+```html
+
+
+
+```
+
+**JS helper for horizontal bars from data:**
+```javascript
+function renderHorizontalBars(items, colorFn) {
+ const max = Math.max(...items.map(d => d.value), 1);
+ return items.map(d => {
+ const pct = Math.round((d.value / max) * 100);
+ const color = colorFn ? colorFn(d) : '#ff6d5a';
+ return `
+
+ Email
+
+
+
+ Social
+
+
+
+ Direct
+
+
+
+
+
+
`;
+ }).join('');
+}
+```
+
+---
+
+## 4. Data Flow: How Data Gets to the App
+
+### Architecture
+
+```
+User sends message in thread
+ │
+ ▼
+AI calls MCP tool → tool returns result
+ │
+ ├─── structuredContent (MCP protocol) ← typed JSON data from tool
+ └─── content (text fallback) ← human-readable text
+ │
+ ▼
+AI generates response + APP_DATA block
+ │
+ ▼
+
+ │
+ ▼
+LocalBosses chat/route.ts parses APP_DATA
+ │
+ ▼
+Stores in app-data endpoint & sends via postMessage
+ │
+ ▼
+iframe receives data → app renders
+```
+
+### MCP `structuredContent` Context
+
+> **Important distinction:** The `APP_DATA` block format (``) is a **LocalBosses-specific** pattern for passing structured data from the AI's text response to the app iframe. It is NOT part of the MCP protocol.
+>
+> In the MCP protocol (spec 2025-06-18+), tools return typed data via `structuredContent` alongside a text fallback in `content`. The flow is:
+>
+> 1. **MCP tool** returns `{ content: [...], structuredContent: { data: [...], meta: {...} } }`
+> 2. **LocalBosses** receives the tool result — the `structuredContent` is the typed data
+> 3. **AI** uses `structuredContent` to generate the `APP_DATA` block in its response text
+> 4. **LocalBosses route.ts** parses `APP_DATA` from the AI's response and sends it to the iframe
+>
+> The app itself doesn't interact with MCP directly — it receives data via `postMessage` or polling, regardless of whether the data originally came from `structuredContent` or was generated by the AI. The apps are a pure rendering layer.
+
+### Two data reception methods (apps MUST support both):
+
+1. **postMessage** — Primary. Host sends data to iframe.
+2. **Polling** — Fallback. App fetches from `/api/app-data` with exponential backoff.
+
+---
+
+## 5. The HTML App Template
+
+This is the EXACT base template for every app. Copy and customize.
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+---
+
+## 6. App Type Templates
+
+### 6.1 Dashboard
+
+**Use when:** Aggregate KPIs, overview metrics, recent activity summary.
+
+**Expected data shape:** `{ title?, timeFrame?, metrics: { [key]: number }, recent?: { title, description?, date }[] }`
+
+**Empty state:** "Ask me for a performance overview, KPIs, or a metrics summary."
+
+```javascript
+function render(data) {
+ showState('data');
+ const el = document.getElementById('content');
+
+ // Validate expected shape
+ validateData(data, ['metrics']);
+
+ const metrics = data.metrics || {};
+ const recentItems = Array.isArray(data.recent) ? data.recent : [];
+
+ el.innerHTML = `
+
+ Loading content, please wait…
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ${escapeHtml(data.title || '{Service} Dashboard')}
+ ${escapeHtml(data.timeFrame || 'Last 30 days')}
+
+ ${Object.entries(metrics).map(([key, val]) => `
+
+
+ ${recentItems.length > 0 ? `
+
+
+ `).join('')}
+ ${escapeHtml(key.replace(/_/g, ' '))}
+ ${typeof val === 'number' && key.includes('revenue') ? formatCurrency(val) : formatNumber(val)}
+
+
+ ` : ''}
+ `;
+
+ // Animate metric numbers
+ el.querySelectorAll('.metric-value[data-count]').forEach(el => {
+ const target = parseFloat(el.dataset.count);
+ if (!isNaN(target)) {
+ const isCurrency = el.textContent.startsWith('$');
+ animateCount(el, target, 600, isCurrency ? formatCurrency : formatNumber);
+ }
+ });
+}
+```
+
+**Dashboard empty state customization:**
+```html
+
+```
+
+### 6.2 Data Grid
+
+**Use when:** Searchable/filterable lists, table views.
+
+**Expected data shape:** `{ title?, data|items|contacts|results: object[], meta?: { total, page, pageSize } }`
+
+**Empty state:** "Try 'show me all active contacts' or 'list recent invoices.'"
+
+```javascript
+function render(data) {
+ showState('data');
+ const el = document.getElementById('content');
+
+ const items = Array.isArray(data) ? data : (data.data || data.items || data.contacts || data.results || []);
+ const total = data.meta?.total || data.total || items.length;
+
+ // Validate
+ if (!Array.isArray(items)) {
+ console.warn('[DataGrid] Expected array for items, got:', typeof items);
+ }
+
+ // Auto-detect columns from first item
+ const columns = items.length > 0
+ ? Object.keys(items[0]).filter(k => !['id', '_id', '__v'].includes(k)).slice(0, 6)
+ : [];
+
+ el.innerHTML = `
+ Recent Activity
+ ${recentItems.slice(0, 10).map((item, i) => `
+
+
+ `).join('')}
+
+
+ ${escapeHtml(item.title || item.name || '—')}
+ ${escapeHtml(item.description || item.type || '')}
+ ${formatDateTime(item.date || item.createdAt)}
+
+
+
+
+
+ ${escapeHtml(data.title || 'Results')}
+ ${total} record${total !== 1 ? 's' : ''}
+
+
+
+
+
+ `;
+}
+```
+
+**Data Grid empty state customization:**
+```html
+
+```
+
+### 6.3 Detail Card
+
+**Use when:** Single entity deep-dive (contact, invoice, appointment).
+
+**Expected data shape:** `{ data|contact|item: { name?, title?, email?, status?, ...fields } }`
+
+**Empty state:** "Ask about a specific record by name or ID to see its details."
+
+```javascript
+function render(data) {
+ showState('data');
+ const el = document.getElementById('content');
+
+ // Flatten data — support nested formats
+ const item = data.data || data.contact || data.item || data;
+ const fields = Object.entries(item).filter(([k]) => !['id', '_id', '__v'].includes(k));
+
+ // Validate
+ validateData(item, ['name']);
+
+ el.innerHTML = `
+ | ${escapeHtml(col.replace(/_/g, ' '))} | `).join('')}|||
|---|---|---|---|
| Status: ${escapeHtml(String(val || '—'))} | `; + } + if (typeof val === 'number' && (col.includes('amount') || col.includes('revenue') || col.includes('price'))) { + return `${formatCurrency(val)} | `; + } + if (typeof val === 'string' && val.match(/^\d{4}-\d{2}-\d{2}/)) { + return `${formatDate(val)} | `; + } + return `${escapeHtml(String(val ?? '—'))} | `; + }).join('')} +
+
+
+
+
+ ${item.status ? `Status: ${escapeHtml(item.status)}` : ''}
+ ${escapeHtml(item.name || item.title || 'Details')}
+ ${escapeHtml(item.email || item.type || item.status || '')}
+
+ ${fields.map(([key, val], i) => {
+ if (val == null || val === '') return '';
+ if (typeof val === 'object') val = JSON.stringify(val);
+ return `
+
+ `;
+}
+```
+
+**Detail Card empty state customization:**
+```html
+
+```
+
+### 6.4 Form / Wizard
+
+**Use when:** Multi-step creation or edit flows.
+
+**Expected data shape:** `{ title?, description?, fields: { name, label?, type?, required?, placeholder?, options?: {value, label}[] }[] }`
+
+**Empty state:** "Tell me what you'd like to create and I'll set up the form."
+
+```javascript
+function render(data) {
+ showState('data');
+ const el = document.getElementById('content');
+
+ // Validate
+ validateData(data, ['fields']);
+
+ const fields = data.fields || [];
+ const title = data.title || 'Create New';
+
+ el.innerHTML = `
+
+ ${escapeHtml(key.replace(/_/g, ' '))}
+ ${escapeHtml(String(val))}
+
+ `;
+ }).join('')}
+
+
+
+
+
+ ${escapeHtml(title)}
+ ${escapeHtml(data.description || 'Fill in the details below')}
+
+
+
+ `;
+}
+
+// Form submit handler — collects values, validates required fields, sends to host
+function submitForm() {
+ const form = document.getElementById('appForm');
+ if (!form) return;
+ const formData = {};
+ const fields = form.querySelectorAll('input, select, textarea');
+
+ // Reset field borders
+ fields.forEach(f => { f.style.borderColor = '#3a3c41'; });
+
+ // Collect values
+ fields.forEach(field => {
+ if (field.name) formData[field.name] = field.value;
+ });
+
+ // Validate required fields
+ const missing = [...fields].filter(f => f.required && !f.value);
+ if (missing.length > 0) {
+ missing.forEach(f => { f.style.borderColor = '#f04747'; });
+ missing[0].focus();
+ return;
+ }
+
+ // Send to host for tool execution
+ sendToHost('tool_call', {
+ tool: 'create_' + APP_ID.split('-').pop(),
+ args: formData
+ });
+
+ // Show confirmation state
+ showState('empty');
+ document.querySelector('#empty .empty-state-icon').textContent = '✅';
+ document.querySelector('#empty .empty-state-title').textContent = 'Submitted!';
+ document.querySelector('#empty .empty-state-text').textContent = 'Your request has been sent. Check the chat for confirmation.';
+}
+```
+
+**Form empty state customization:**
+```html
+
+```
+
+### 6.5 Timeline
+
+**Use when:** Chronological events, activity feeds, audit logs.
+
+**Expected data shape:** `{ title?, events|activities|timeline: { title, description?, date|timestamp, user|actor? }[] }`
+
+**Empty state:** "Ask to see recent activity, event history, or an audit log."
+
+```javascript
+function render(data) {
+ showState('data');
+ const el = document.getElementById('content');
+
+ const events = Array.isArray(data) ? data : (data.events || data.activities || data.timeline || []);
+
+ // Validate
+ if (events.length > 0) validateData(events[0], ['title']);
+
+ el.innerHTML = `
+
+
+
+
+
+ ${escapeHtml(data.title || 'Activity Timeline')}
+ ${events.length} event${events.length !== 1 ? 's' : ''}
+
+
+ ${events.map((event, i) => `
+
+ `;
+}
+```
+
+**Timeline empty state customization:**
+```html
+
+```
+
+### 6.6 Funnel / Pipeline
+
+**Use when:** Stage-based progression (sales pipeline, deal stages).
+
+**Expected data shape:** `{ title?, stages|pipeline: { name|title, items|deals: { name|title, value|amount?, contact|company? }[] }[] }`
+
+**Empty state:** "Ask to see your sales pipeline or a specific deal stage."
+
+```javascript
+function render(data) {
+ showState('data');
+ const el = document.getElementById('content');
+
+ const stages = Array.isArray(data) ? data : (data.stages || data.pipeline || []);
+
+ // Validate
+ if (stages.length > 0) validateData(stages[0], ['name']);
+
+ el.innerHTML = `
+
+
+
+ `).join('')}
+
+
+
+
+ ${event.user || event.actor ? `
+
+ ${escapeHtml(event.title || event.type || event.action || '—')}
+ ${escapeHtml(event.description || event.details || '')}
+ ${formatDateTime(event.date || event.timestamp || event.createdAt)}
+ by ${escapeHtml(event.user || event.actor)}
` : ''}
+
+
+
+
+
+ ${escapeHtml(data.title || 'Pipeline')}
+ ${escapeHtml(data.subtitle || '')}
+
+ ${stages.map((stage, i) => {
+ const items = stage.items || stage.deals || stage.opportunities || [];
+ return `
+
+ `;
+}
+```
+
+**Pipeline empty state customization:**
+```html
+
+```
+
+### 6.7 Calendar
+
+**Use when:** Date-based data (appointments, events, schedules).
+
+**Expected data shape:** `{ title?, events|appointments: { title|name, date|start|startTime, description?, location?, attendee|contact?, status? }[] }`
+
+**Empty state:** "Ask to see upcoming appointments, scheduled events, or your calendar."
+
+```javascript
+function render(data) {
+ showState('data');
+ const el = document.getElementById('content');
+
+ const events = Array.isArray(data) ? data : (data.events || data.appointments || []);
+ const today = new Date();
+
+ // Validate
+ if (events.length > 0) validateData(events[0], ['title']);
+
+ // Group events by date
+ const byDate = {};
+ events.forEach(evt => {
+ const dateStr = new Date(evt.date || evt.start || evt.startTime).toISOString().split('T')[0];
+ if (!byDate[dateStr]) byDate[dateStr] = [];
+ byDate[dateStr].push(evt);
+ });
+
+ const sortedDates = Object.keys(byDate).sort();
+
+ el.innerHTML = `
+
+
+ `;
+ }).join('')}
+
+ ${escapeHtml(stage.name || stage.title)}
+ ${items.length}
+
+
+ ${items.map((item, j) => `
+
+
+
+ `).join('')}
+ ${items.length === 0 ? '${escapeHtml(item.name || item.title)}
+ ${item.value || item.amount ? `${formatCurrency(item.value || item.amount)}
` : ''}
+ ${item.contact || item.company ? `${escapeHtml(item.contact || item.company)}
` : ''}
+ No items
' : ''}
+
+
+
+
+
+ ${escapeHtml(data.title || 'Calendar')}
+ ${events.length} event${events.length !== 1 ? 's' : ''}
+
+ ${sortedDates.map(dateStr => {
+ const d = new Date(dateStr + 'T12:00:00');
+ const isToday = dateStr === today.toISOString().split('T')[0];
+ return `
+
+ `;
+}
+
+function formatTime(dateStr) {
+ if (!dateStr) return '';
+ try {
+ return new Date(dateStr).toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
+ } catch { return ''; }
+}
+```
+
+**Calendar empty state customization:**
+```html
+
+```
+
+### 6.8 Analytics / Chart
+
+**Use when:** Data visualization, trends, comparisons. Pure CSS charts (no external libs).
+
+**Expected data shape:** `{ title?, subtitle|timeFrame?, metrics?: { [key]: number }, chart|series: { label|name, value|count }[], chartTitle? }`
+
+**Empty state:** "Ask for analytics, performance trends, or a breakdown of your data."
+
+```javascript
+function render(data) {
+ showState('data');
+ const el = document.getElementById('content');
+
+ // Validate
+ validateData(data, ['chart']);
+
+ const chartData = data.chart || data.series || [];
+ const maxVal = Math.max(...chartData.map(d => d.value || d.count || 0), 1);
+
+ el.innerHTML = `
+
+
+ `;
+ }).join('')}
+
+ ${isToday ? '📍 Today — ' : ''}${d.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })}
+
+ ${byDate[dateStr].map((evt, i) => `
+
+
+ `).join('')}
+
+ ${formatTime(evt.start || evt.startTime || evt.date)}
+
+
+
+ ${evt.status ? `Status: ${escapeHtml(evt.status)}` : ''}
+ ${escapeHtml(evt.title || evt.name || '—')}
+ ${evt.description || evt.location ? `${escapeHtml(evt.description || evt.location || '')}
` : ''}
+ ${evt.attendee || evt.contact ? `👤 ${escapeHtml(evt.attendee || evt.contact)}
` : ''}
+
+
+
+ ${data.metrics ? `
+
+
+ ${escapeHtml(data.title || 'Analytics')}
+ ${escapeHtml(data.subtitle || data.timeFrame || '')}
+
+ ${Object.entries(data.metrics).map(([key, val]) => `
+
+ ` : ''}
+
+
+
+ `).join('')}
+ ${escapeHtml(key.replace(/_/g, ' '))}
+ ${formatNumber(val)}
+
+
+ `;
+
+ // Animate metric numbers
+ el.querySelectorAll('.metric-value[data-count]').forEach(el => {
+ const target = parseFloat(el.dataset.count);
+ if (!isNaN(target)) animateCount(el, target);
+ });
+}
+```
+
+**Analytics empty state customization:**
+```html
+
+```
+
+### 6.9 Interactive Data Grid
+
+**Use when:** Data tables that need client-side sorting, filtering, searching, copy-to-clipboard, expand/collapse, or bulk selection. Use this instead of the basic Data Grid (6.2) when users need to interact with the data beyond reading it.
+
+**Expected data shape:** `{ title?, data|items: object[], columns?: { key, label, sortable?, copyable? }[], meta?: { total } }`
+
+**Empty state:** "Try 'show me all contacts' or 'list invoices from this month.'"
+
+This template includes all 5 interactive patterns. Include only the patterns your app needs.
+
+```html
+
+
+```
+
+```javascript
+// ═══ Interactive Data Grid — Full Implementation ═══
+
+let gridState = {
+ items: [],
+ filteredItems: [],
+ sortCol: null,
+ sortDir: 'asc',
+ searchQuery: '',
+ selectedIds: new Set(),
+ expandedIds: new Set()
+};
+
+function render(data) {
+ showState('data');
+ const el = document.getElementById('content');
+
+ // Parse items from various data shapes
+ const rawItems = Array.isArray(data) ? data : (data.data || data.items || data.contacts || data.results || []);
+ gridState.items = rawItems.map((item, i) => ({ ...item, _idx: i, _id: item.id || item._id || `row-${i}` }));
+ gridState.filteredItems = [...gridState.items];
+
+ // Auto-detect columns (or use provided columns config)
+ const columnConfig = data.columns || (rawItems.length > 0
+ ? Object.keys(rawItems[0])
+ .filter(k => !['id', '_id', '__v', '_idx'].includes(k))
+ .slice(0, 6)
+ .map(k => ({ key: k, label: k.replace(/_/g, ' '), sortable: true, copyable: k === 'email' || k === 'id' }))
+ : []);
+
+ const total = data.meta?.total || data.total || rawItems.length;
+
+ el.innerHTML = `
+ ${escapeHtml(data.chartTitle || 'Overview')}
+
+ ${chartData.map((d, i) => {
+ const pct = ((d.value || d.count || 0) / maxVal) * 100;
+ return `
+
+
+
+ `;
+ }).join('')}
+ ${formatNumber(d.value || d.count)}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ${escapeHtml(data.title || 'Data Explorer')}
+ ${total} record${total !== 1 ? 's' : ''}
+
+
+
+
+
+ `;
+
+ // Store column config for re-renders
+ gridState.columns = columnConfig;
+ renderRows();
+}
+
+function renderRows() {
+ const tbody = document.getElementById('grid-body');
+ if (!tbody) return;
+
+ const items = gridState.filteredItems;
+ const cols = gridState.columns;
+
+ tbody.innerHTML = items.map((item, i) => {
+ const isSelected = gridState.selectedIds.has(item._id);
+ const isExpanded = gridState.expandedIds.has(item._id);
+
+ return `
+ | + ${columnConfig.map(col => ` + | + ${escapeHtml(col.label)} + | + `).join('')} +Expand | +
|---|
+ ${Object.entries(item).filter(([k]) => !k.startsWith('_')).map(([k, v]) => `
+
+
+ ${escapeHtml(k.replace(/_/g, ' '))}
+ ${escapeHtml(String(v ?? '—'))} +
+ `).join('')}
+ + ${escapeHtml(String(v ?? '—'))} +