echoclaw-relay-agent 0.26.0 → 0.27.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-KNVTSHSR.js → chunk-6F5HKU53.js} +116 -1175
- package/dist/cli.js +1 -1
- package/dist/index.js +1 -1
- package/dist/install/InstallHandler.d.ts +10 -0
- package/package.json +1 -1
|
@@ -2300,6 +2300,8 @@ var OpenClawWsClient = class extends EventEmitter7 {
|
|
|
2300
2300
|
}
|
|
2301
2301
|
this._setupMessageHandling();
|
|
2302
2302
|
this._startPing();
|
|
2303
|
+
this.request("sessions.subscribe", {}).catch(() => {
|
|
2304
|
+
});
|
|
2303
2305
|
this.emit("connected");
|
|
2304
2306
|
resolve();
|
|
2305
2307
|
} else {
|
|
@@ -2430,6 +2432,8 @@ var OpenClawWsClient = class extends EventEmitter7 {
|
|
|
2430
2432
|
this.emit("chat.side_result", msg.payload);
|
|
2431
2433
|
} else if (msg.event === "agent") {
|
|
2432
2434
|
this.emit("agent", msg.payload);
|
|
2435
|
+
} else if (msg.event === "session.tool") {
|
|
2436
|
+
this.emit("agent", msg.payload);
|
|
2433
2437
|
}
|
|
2434
2438
|
return;
|
|
2435
2439
|
}
|
|
@@ -3758,11 +3762,13 @@ var CRITICAL_RULES = [
|
|
|
3758
3762
|
title: "Bilingual i18n",
|
|
3759
3763
|
must: [
|
|
3760
3764
|
"ALL user-facing text through `t()` function with `en` + `zh-CN` dictionaries",
|
|
3761
|
-
'`manifest.name` and `manifest.description` as `{ "en": "...", "zh-CN": "..." }` objects'
|
|
3765
|
+
'`manifest.name` and `manifest.description` as `{ "en": "...", "zh-CN": "..." }` objects',
|
|
3766
|
+
"Language is switched globally by the EchoClaw system \u2014 do NOT add a language toggle/selector UI in the app"
|
|
3762
3767
|
],
|
|
3763
3768
|
never: [
|
|
3764
3769
|
"Hardcoded Chinese or English strings in HTML",
|
|
3765
|
-
"Plain string manifest.name or manifest.description"
|
|
3770
|
+
"Plain string manifest.name or manifest.description",
|
|
3771
|
+
"In-app language switcher UI (language is controlled by the host, not the app)"
|
|
3766
3772
|
],
|
|
3767
3773
|
severity: "error"
|
|
3768
3774
|
},
|
|
@@ -3939,1168 +3945,14 @@ Do NOT rely on memory \u2014 verify against this list every time you output an a
|
|
|
3939
3945
|
${rulesBlock}
|
|
3940
3946
|
${checklistBlock}
|
|
3941
3947
|
|
|
3942
|
-
##
|
|
3943
|
-
|
|
3944
|
-
Any user request that is "visible, interactive, and shareable" \u2014 dashboards, tools, forms, games, landing pages, portfolios \u2014 SHOULD be a .claw app. See ECHOCLAW_DEV_GUIDE.md \xA72 for the full 20-category list.
|
|
3945
|
-
\`\`\`
|
|
3946
|
-
`;
|
|
3947
|
-
|
|
3948
|
-
// ../claw-engine/src/authoring/openclaw-guides/index.ts
|
|
3949
|
-
var OPENCLAW_SPEC = `# ClawApp Visual & Technical Specification
|
|
3950
|
-
|
|
3951
|
-
> This file is automatically written by the EchoClaw Relay Agent, based on claw-engine v3.1.0.
|
|
3952
|
-
> Last updated: {{TIMESTAMP}}
|
|
3953
|
-
> For the complete specification, refer to \`claw-html-design.md\` and \`ARCHITECTURE.md\` in the claw-engine source.
|
|
3954
|
-
|
|
3955
|
-
---
|
|
3956
|
-
|
|
3957
|
-
## 1. Platform Context
|
|
3958
|
-
|
|
3959
|
-
- **Target Platform:** Electron desktop (macOS/Windows)
|
|
3960
|
-
- **Rendering:** \`<iframe>\` sandbox with dynamic \`sandbox\` + \`allow\` attributes
|
|
3961
|
-
- **Theme:** Dark mode only; CSS variables injected by the host shell
|
|
3962
|
-
- **Bridge:** \`window.echoclaw\` for host communication
|
|
3963
|
-
- **Constraint:** Self-contained HTML (inline CSS+JS, no CDN, \u2264500 KB)
|
|
3964
|
-
|
|
3965
|
-
---
|
|
3966
|
-
|
|
3967
|
-
## 2. Viewport Standard
|
|
3968
|
-
|
|
3969
|
-
\`\`\`
|
|
3970
|
-
\u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510
|
|
3971
|
-
\u2502 EchoClaw Window: 1280 \xD7 820 (default) \u2502
|
|
3972
|
-
\u2502 \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u2502
|
|
3973
|
-
\u2502 \u2502 Sidebar \u2502 TitleBar 52px \u2502\u2502
|
|
3974
|
-
\u2502 \u2502 256px \u251C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\u2502
|
|
3975
|
-
\u2502 \u2502 (shell) \u2502 \u2502\u2502
|
|
3976
|
-
\u2502 \u2502 \u2502 .claw iframe: 1024 \xD7 768 \u2502\u2502
|
|
3977
|
-
\u2502 \u2502 \u2502 (your design canvas) \u2502\u2502
|
|
3978
|
-
\u2502 \u2502 \u2502 \u2502\u2502
|
|
3979
|
-
\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u2502
|
|
3980
|
-
\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518
|
|
3981
|
-
\`\`\`
|
|
3982
|
-
|
|
3983
|
-
| Parameter | Value | Description |
|
|
3984
|
-
|-----------|-------|-------------|
|
|
3985
|
-
| **Design target** | **1024 \xD7 768** | XGA, 4:3 aspect ratio |
|
|
3986
|
-
| **Minimum safe area** | **544 \xD7 548** | When the window is 800\xD7600 |
|
|
3987
|
-
| Window default | 1280 \xD7 820 | 13\u2033 MacBook Air |
|
|
3988
|
-
| Window minimum | 800 \xD7 600 | Hard lower limit |
|
|
3989
|
-
| Sidebar | 256 px fixed | Occupied by the shell; unavailable to apps |
|
|
3990
|
-
| Title bar | 52 px fixed | macOS traffic lights |
|
|
3991
|
-
|
|
3992
|
-
**Calculation:** \`iframe width = window width \u2212 256\`, \`iframe height = window height \u2212 52\`
|
|
3993
|
-
|
|
3994
|
-
**Reserved area:** The bottom-right 64\xD764 px region is occupied by the host Info button. Apps MUST NOT place interactive elements in this area.
|
|
3995
|
-
|
|
3996
|
-
### Font Size Reference (at 1024 px width)
|
|
3997
|
-
| Role | Size |
|
|
3998
|
-
|------|------|
|
|
3999
|
-
| Title | 20\u201324 px |
|
|
4000
|
-
| Subtitle | 16\u201318 px |
|
|
4001
|
-
| Body text | 13\u201314 px |
|
|
4002
|
-
| Caption | 11\u201312 px |
|
|
4003
|
-
| Minimum touch target | 32\xD732 px |
|
|
4004
|
-
|
|
4005
|
-
---
|
|
4006
|
-
|
|
4007
|
-
## 3. CSS Variable System (59 Variables)
|
|
4008
|
-
|
|
4009
|
-
Injected by the host. Apps MUST use these variables. **Hard-coding color values is strictly forbidden.**
|
|
4010
|
-
|
|
4011
|
-
### Core Colors
|
|
4012
|
-
\`\`\`
|
|
4013
|
-
--ec-agent /* App brand color (from manifest.color) */
|
|
4014
|
-
--ec-agent-text /* Auto-contrast text color on the agent background */
|
|
4015
|
-
--ec-bg-page /* Deepest background */
|
|
4016
|
-
--ec-bg-base /* Base surface */
|
|
4017
|
-
--ec-bg-raised /* Raised surface (cards) */
|
|
4018
|
-
--ec-bg-overlay /* Floating / overlay surface */
|
|
4019
|
-
\`\`\`
|
|
4020
|
-
|
|
4021
|
-
### Text Hierarchy
|
|
4022
|
-
\`\`\`
|
|
4023
|
-
--ec-txt-primary /* High-contrast text */
|
|
4024
|
-
--ec-txt-secondary /* Medium-contrast text */
|
|
4025
|
-
--ec-txt-tertiary /* Low-contrast (hints, metadata) */
|
|
4026
|
-
--ec-txt-disabled /* Disabled text */
|
|
4027
|
-
\`\`\`
|
|
4028
|
-
|
|
4029
|
-
### Status Colors
|
|
4030
|
-
\`\`\`
|
|
4031
|
-
--ec-status-done /* Green (success) */
|
|
4032
|
-
--ec-status-active /* Blue/cyan (running) */
|
|
4033
|
-
--ec-status-warning /* Orange (caution) */
|
|
4034
|
-
--ec-status-error /* Red (danger) */
|
|
4035
|
-
--ec-status-done-bg / error-bg / warning-bg / active-bg /* 12% opacity tint */
|
|
4036
|
-
\`\`\`
|
|
4037
|
-
|
|
4038
|
-
### Borders & Dividers
|
|
4039
|
-
\`\`\`
|
|
4040
|
-
--ec-card-bg / --ec-card-border /* Card */
|
|
4041
|
-
--ec-border-strong / mid / subtle /* Three-tier borders */
|
|
4042
|
-
--ec-divider /* Divider line */
|
|
4043
|
-
\`\`\`
|
|
4044
|
-
|
|
4045
|
-
### Interactive Components
|
|
4046
|
-
\`\`\`
|
|
4047
|
-
--ec-interactive-bg / bdr / fg / hover / active /* Button states */
|
|
4048
|
-
--ec-input-bg / bdr /* Input fields */
|
|
4049
|
-
--ec-toggle-off / on / knob /* Toggle switch */
|
|
4050
|
-
\`\`\`
|
|
4051
|
-
|
|
4052
|
-
### Spacing & Animation
|
|
4053
|
-
\`\`\`
|
|
4054
|
-
--ec-space-xs/sm/md/lg/xl/2xl /* 4/8/16/24/32/48px \u2014 8px grid */
|
|
4055
|
-
--ec-radius-xs(4)/sm(6)/md(10)/lg(14)/xl(20) /* Border radius */
|
|
4056
|
-
--ec-duration-fast/normal/slow /* 120/200/350ms */
|
|
4057
|
-
--ec-ease-standard /* cubic-bezier(0.4, 0, 0.2, 1) */
|
|
4058
|
-
--ec-ease-decelerate / accelerate /* Enter / exit easing */
|
|
4059
|
-
--ec-shadow-sm / md /* Shadows */
|
|
4060
|
-
--ec-font-family /* System font stack */
|
|
4061
|
-
--ec-focus-ring / focus-ring-offset /* Focus ring */
|
|
4062
|
-
\`\`\`
|
|
4063
|
-
|
|
4064
|
-
### Color Usage Rules
|
|
4065
|
-
- \`var(--ec-agent)\` = brand accent color. Use 3\u20135 times: hero, active tab, primary button, key highlight.
|
|
4066
|
-
- \`var(--ec-agent-text)\` = text on the agent background; automatically computed for WCAG contrast.
|
|
4067
|
-
- Status colors = semantic use only: success=green, running=blue, warning=orange, error=red.
|
|
4068
|
-
- Text hierarchy: primary \u2192 secondary \u2192 tertiary.
|
|
4069
|
-
|
|
4070
|
-
---
|
|
4071
|
-
|
|
4072
|
-
## 4. Hard Rules (Violation = Rejection)
|
|
4073
|
-
|
|
4074
|
-
| # | Rule | Severity |
|
|
4075
|
-
|---|------|----------|
|
|
4076
|
-
| 1 | **Use CSS variables only.** Hard-coded hex colors are forbidden. | CRITICAL |
|
|
4077
|
-
| 2 | **No left-side navigation.** The shell owns the left sidebar. Apps MUST NOT render any left-side navigation UI. Apps MAY implement top navigation and/or a right-side panel. | CRITICAL |
|
|
4078
|
-
| 3 | **Self-contained.** CSS in \`<style>\`, JS in \`<script>\`, icons as inline SVG. Zero external resources. | CRITICAL |
|
|
4079
|
-
| 4 | **\`allow-same-origin\` is forbidden.** All host communication MUST go through the \`window.echoclaw\` Bridge. | CRITICAL |
|
|
4080
|
-
| 5 | **Declare capabilities.** Usage of audio/camera/mic/clipboard/location/fullscreen MUST be declared in manifest.capabilities. | HIGH |
|
|
4081
|
-
| 6 | **Prompt-level permissions require requestPermission.** Call \`echoclaw.requestPermission()\` before use and handle denial. | HIGH |
|
|
4082
|
-
| 7 | **Desktop-first layout.** Design target is 1024\xD7768 with multi-column layout. At viewport 544\xD7548, all core functions MUST remain usable without layout overlap, clipped primary actions, or horizontal overflow. | HIGH |
|
|
4083
|
-
| 8 | **Dark theme only.** Colors are controlled by CSS variables. \`prefers-color-scheme\` media queries are forbidden. | HIGH |
|
|
4084
|
-
| 9 | **Hover + Focus states.** All interactive elements MUST have hover/focus styles and \`cursor: pointer\`. | MEDIUM |
|
|
4085
|
-
| 10 | **\u2264500 KB.** | MEDIUM |
|
|
4086
|
-
| 11 | **\`javascript:\` URLs are forbidden.** | CRITICAL |
|
|
4087
|
-
| 14 | **Tiered credential storage.** Tokens/passwords MUST use \`echoclaw.auth.setSecret()\`. Storing them via \`echoclaw.storage\` is forbidden. | CRITICAL |
|
|
4088
|
-
| 15 | **Auth capability declaration.** Any use of \`echoclaw.auth.*\` MUST declare the auth capability and an auth_profile. | HIGH |
|
|
4089
|
-
| 16 | **Bottom-right reserved area.** The host places a 36\xD736 px Info button at \`bottom: 20px; right: 20px\` (z-index: 10). Apps MUST NOT place interactive elements (buttons, links, FABs) in this area. Safe practice: leave at least **64\xD764 px** clear in the bottom-right corner. | MEDIUM |
|
|
4090
|
-
|
|
4091
|
-
### Soft Rules (Warning, Non-blocking)
|
|
4092
|
-
|
|
4093
|
-
| # | Rule | Severity |
|
|
4094
|
-
|---|------|----------|
|
|
4095
|
-
| 12 | **Bridge-only API.** Direct \`new WebSocket()\`, \`fetch()\` to external URLs, \`localStorage\`, etc. are forbidden. Use Bridge equivalents. | WARNING |
|
|
4096
|
-
| 13 | **\`<img>\` elements MUST have an \`alt\` attribute.** | WARNING |
|
|
4097
|
-
|
|
4098
|
-
---
|
|
4099
|
-
|
|
4100
|
-
## 5. Design Principles
|
|
4101
|
-
|
|
4102
|
-
### 1. Visual Hierarchy
|
|
4103
|
-
- Each screen MUST have **one hero element** (large number, chart, status indicator), 2\u20133\xD7 the size of surrounding elements.
|
|
4104
|
-
- Typographic scale: hero (36\u201348 px/700) \u2192 page title (22 px/700) \u2192 section (17 px/600) \u2192 body (14 px/400) \u2192 caption (13 px/500) \u2192 footnote (11 px/400).
|
|
4105
|
-
|
|
4106
|
-
### 2. Aesthetic Defaults
|
|
4107
|
-
- **Frosted glass effect:** \`backdrop-filter: blur(20px)\` + semi-transparent background.
|
|
4108
|
-
- **Micro-animations:** \`transition: all 0.2s ease\`.
|
|
4109
|
-
- **Border radius:** cards 10\u201314 px, buttons/inputs 6\u20138 px, badges 4 px.
|
|
4110
|
-
- **Shadows:** cards \`var(--ec-shadow-sm)\`, modals \`var(--ec-shadow-md)\`.
|
|
4111
|
-
|
|
4112
|
-
### 3. Spacing (8 px Grid)
|
|
4113
|
-
| Element | Value |
|
|
4114
|
-
|---------|-------|
|
|
4115
|
-
| Page padding | 24\u201332 px |
|
|
4116
|
-
| Card padding | 16\u201324 px |
|
|
4117
|
-
| Section gap | 16\u201324 px |
|
|
4118
|
-
| Item gap | 8\u201312 px |
|
|
4119
|
-
| Button padding | 8 px 16 px (small), 12 px 24 px (medium) |
|
|
4120
|
-
|
|
4121
|
-
### 4. Z-Index Layers
|
|
4122
|
-
| Layer | z-index | Usage |
|
|
4123
|
-
|-------|---------|-------|
|
|
4124
|
-
| Base content | 0 | Normal flow |
|
|
4125
|
-
| Fixed header | 10 | Sticky headers, tab bars |
|
|
4126
|
-
| Dropdown | 20 | Select menus, autocomplete |
|
|
4127
|
-
| Overlay / backdrop | 40 | Dimmed background |
|
|
4128
|
-
| Modal / dialog | 50 | Centered dialogs |
|
|
4129
|
-
| Toast / notification | 100 | Top-right toasts |
|
|
4130
|
-
|
|
4131
|
-
### 5. Scrollbar Styling (MUST Include)
|
|
4132
|
-
\`\`\`css
|
|
4133
|
-
::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
4134
|
-
::-webkit-scrollbar-track { background: transparent; }
|
|
4135
|
-
::-webkit-scrollbar-thumb {
|
|
4136
|
-
background: var(--ec-border-mid);
|
|
4137
|
-
border-radius: 3px;
|
|
4138
|
-
}
|
|
4139
|
-
::-webkit-scrollbar-thumb:hover { background: var(--ec-border-strong); }
|
|
4140
|
-
\`\`\`
|
|
4141
|
-
|
|
4142
|
-
### 6. Empty / Loading / Error States (MUST Handle)
|
|
4143
|
-
- **Loading:** Skeleton screen or spinner using \`var(--ec-txt-tertiary)\`.
|
|
4144
|
-
- **Empty:** Centered icon + message + optional action button.
|
|
4145
|
-
- **Error:** \`var(--ec-status-error)\` banner + retry action.
|
|
4146
|
-
|
|
4147
|
-
---
|
|
4148
|
-
|
|
4149
|
-
## 6. Layout Patterns
|
|
4150
|
-
|
|
4151
|
-
### Dashboard Layout
|
|
4152
|
-
\`\`\`
|
|
4153
|
-
\u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510
|
|
4154
|
-
\u2502 Header: Title + Status + Actions \u2502
|
|
4155
|
-
\u251C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524
|
|
4156
|
-
\u2502 KPI 1 \u2502 KPI 2 \u2502 KPI 3 \u2502 KPI 4 \u2502
|
|
4157
|
-
\u251C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524
|
|
4158
|
-
\u2502 Main Chart \u2502 Side Panel \u2502
|
|
4159
|
-
\u251C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524
|
|
4160
|
-
\u2502 Detail Table / List \u2502
|
|
4161
|
-
\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518
|
|
4162
|
-
\`\`\`
|
|
4163
|
-
|
|
4164
|
-
### List-Detail Layout (No Left Sidebar)
|
|
4165
|
-
\`\`\`
|
|
4166
|
-
\u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510
|
|
4167
|
-
\u2502 Header: Title + Search + Filters \u2502
|
|
4168
|
-
\u251C\u2500\u2500\u2500\u2500\u2500\u2500\u252C\u2500\u2500\u2500\u2500\u2500\u2500\u252C\u2500\u2500\u2500\u2500\u2500\u2500\u252C\u2500\u2500\u2500\u2500\u2500\u2500\u252C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524
|
|
4169
|
-
\u2502 Card \u2502 Card \u2502 Card \u2502 Card \u2502 ...\u2192 \u2502
|
|
4170
|
-
\u251C\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524
|
|
4171
|
-
\u2502 Detail: Fields \u2502 Activity \u2502
|
|
4172
|
-
\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518
|
|
4173
|
-
\`\`\`
|
|
4174
|
-
|
|
4175
|
-
### Form Layout (Centered, max-width 640 px)
|
|
4176
|
-
\`\`\`
|
|
4177
|
-
\u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510
|
|
4178
|
-
\u2502 Title + Step Indicator \u2502
|
|
4179
|
-
\u2502 \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502
|
|
4180
|
-
\u2502 \u2502 Label [ Input ] \u2502 \u2502
|
|
4181
|
-
\u2502 \u2502 Label [ Select \u25BC ] \u2502 \u2502
|
|
4182
|
-
\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2502
|
|
4183
|
-
\u2502 [ Cancel ] [ Submit ] \u2502
|
|
4184
|
-
\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518
|
|
4185
|
-
\`\`\`
|
|
4186
|
-
|
|
4187
|
-
### Settings Layout (Top Tabs, No Left Sidebar)
|
|
4188
|
-
\`\`\`
|
|
4189
|
-
\u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510
|
|
4190
|
-
\u2502 Settings \u2502
|
|
4191
|
-
\u2502 [General] [Appearance] [Privacy] \u2502
|
|
4192
|
-
\u251C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524
|
|
4193
|
-
\u2502 SECTION HEADER \u2502
|
|
4194
|
-
\u2502 \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502
|
|
4195
|
-
\u2502 \u2502 Label [Toggle] \u2502 \u2502
|
|
4196
|
-
\u2502 \u2502 Label [Select \u25BC] \u2502 \u2502
|
|
4197
|
-
\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2502
|
|
4198
|
-
\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518
|
|
4199
|
-
\`\`\`
|
|
4200
|
-
|
|
4201
|
-
---
|
|
4202
|
-
|
|
4203
|
-
## 7. Quality Gate (Score \u226514/20 or Redo)
|
|
4204
|
-
|
|
4205
|
-
| # | Check | 0 | 1 | 2 |
|
|
4206
|
-
|---|-------|---|---|---|
|
|
4207
|
-
| 1 | Hero element | None | Has a large element | Stunning hero |
|
|
4208
|
-
| 2 | CSS variables | Hard-coded | Mostly variables | 100% variables |
|
|
4209
|
-
| 3 | Dark theme | Broken in dark mode | Acceptable | Polished dark theme |
|
|
4210
|
-
| 4 | Desktop layout | Narrow single column | Reasonable | Full-width multi-column |
|
|
4211
|
-
| 5 | Hover states | None | Partial | Fully interactive |
|
|
4212
|
-
| 6 | Transitions | None | Partial | Globally smooth |
|
|
4213
|
-
| 7 | Typographic hierarchy | Flat | Some variation | 4+ level scale |
|
|
4214
|
-
| 8 | Spacing | Arbitrary | Mostly consistent | 8 px grid |
|
|
4215
|
-
| 9 | State visibility | None | Partial | All states clearly shown |
|
|
4216
|
-
| 10 | Self-contained | External dependencies | Minimal | Zero external |
|
|
4217
|
-
|
|
4218
|
-
---
|
|
4219
|
-
|
|
4220
|
-
## 8. EC Toolkit (Optional CSS Component Library)
|
|
4221
|
-
|
|
4222
|
-
The host injects a pre-built CSS component library alongside the theme variables. You MAY use \`ec-*\` classes to rapidly build polished UI, or ignore them entirely and write your own CSS.
|
|
4223
|
-
|
|
4224
|
-
**Core classes:** \`ec-card\`, \`ec-card-glass\`, \`ec-btn ec-btn-primary\`, \`ec-btn ec-btn-secondary\`, \`ec-input\`, \`ec-select\`, \`ec-toggle\`, \`ec-badge ec-badge-done\`, \`ec-tabs\`/\`ec-tab\`, \`ec-table\`, \`ec-modal\`, \`ec-toast\`, \`ec-toolbar\`, \`ec-progress\`, \`ec-ring\`, \`ec-kpi\`, \`ec-list\`/\`ec-list-item\`, \`ec-skeleton\`, \`ec-empty\`, \`ec-error-banner\`, \`ec-dot\`, \`ec-avatar\`, \`ec-dropdown\`
|
|
4225
|
-
|
|
4226
|
-
**Animation classes:** \`ec-animate-fade-in\`, \`ec-animate-scale-in\`, \`ec-animate-slide-up\`, \`ec-animate-bounce-in\`, \`ec-animate-spin\`, \`ec-stagger\`
|
|
4227
|
-
|
|
4228
|
-
**Layout utilities:** \`ec-flex\`, \`ec-flex-col\`, \`ec-grid ec-grid-4\`, \`ec-gap-md\`, \`ec-flex-1\`, \`ec-truncate\`
|
|
4229
|
-
|
|
4230
|
-
---
|
|
4231
|
-
|
|
4232
|
-
## 9. Icon SVG Rules
|
|
4233
|
-
|
|
4234
|
-
- \`icon_svg\`: Inner SVG elements ONLY \u2014 **no \`<svg>\` wrapper, no \`xmlns\`, no \`viewBox\`**
|
|
4235
|
-
- The host wraps your content in \`<svg viewBox="0 0 40 40">\`. You provide ONLY the inner elements (path, circle, rect, etc.)
|
|
4236
|
-
- Use \`currentColor\` for fill/stroke \u2014 **no hardcoded colors** (no hex, no rgb, no named colors in icon_svg)
|
|
4237
|
-
- Maximum 3\u20134 elements; outlines MUST be legible at 20\xD720 px
|
|
4238
|
-
- Every app **MUST** generate an \`icon_svg\`
|
|
4239
|
-
|
|
4240
|
-
**\u2705 CORRECT:**
|
|
4241
|
-
\`\`\`json
|
|
4242
|
-
"icon_svg": "<path d=\\"M8 6h24v4H8zm0 10h24v4H8zm0 10h18v4H8z\\" fill=\\"currentColor\\"/>"
|
|
4243
|
-
\`\`\`
|
|
4244
|
-
|
|
4245
|
-
**\u274C WRONG (all of these errors together):**
|
|
4246
|
-
\`\`\`json
|
|
4247
|
-
"icon_svg": "<svg xmlns=\\"...\\" viewBox=\\"0 0 64 64\\"><rect fill=\\"#0c4a6e\\"/>...</svg>"
|
|
4248
|
-
\`\`\`
|
|
4249
|
-
Errors: outer \`<svg>\` tag, \`xmlns\` attribute, custom viewBox, hardcoded hex color.
|
|
4250
|
-
|
|
4251
|
-
---
|
|
4252
|
-
|
|
4253
|
-
## 10. Internationalization (i18n) \u2014 Mandatory
|
|
4254
|
-
|
|
4255
|
-
All .claw apps MUST embed both Chinese and English (zh-CN + en) at generation time.
|
|
4256
|
-
|
|
4257
|
-
\`\`\`javascript
|
|
4258
|
-
const I18N = {
|
|
4259
|
-
'en': { 'title': 'Dashboard', ... },
|
|
4260
|
-
'zh-CN': { 'title': '\u4EEA\u8868\u76D8', ... }
|
|
4261
|
-
};
|
|
4262
|
-
let currentLocale = 'en';
|
|
4263
|
-
function t(key) { return (I18N[currentLocale] || I18N['en'])[key] || key; }
|
|
4264
|
-
\`\`\`
|
|
4265
|
-
|
|
4266
|
-
Rules:
|
|
4267
|
-
1. All user-visible text MUST go through \`t()\` \u2014 hard-coded Chinese or English strings are forbidden.
|
|
4268
|
-
2. Both languages MUST be generated at creation time \u2014 do NOT rely on runtime translation APIs.
|
|
4269
|
-
3. Technical terms (API, WebSocket) SHALL remain in English in both locales.
|
|
4270
|
-
4. Default locale is \`'en'\`; gracefully fall back when the Bridge is unavailable.
|
|
4271
|
-
|
|
4272
|
-
---
|
|
4273
|
-
|
|
4274
|
-
## 11. Anti-Patterns
|
|
4275
|
-
|
|
4276
|
-
| Wrong | Correct |
|
|
4277
|
-
|-------|---------|
|
|
4278
|
-
| Hard-coded hex colors | \`var(--ec-xxx)\` |
|
|
4279
|
-
| Left-side navigation | Top bar or right-side panel |
|
|
4280
|
-
| External CDN / fonts | Inline everything |
|
|
4281
|
-
| Mobile-first single column | Multi-column desktop layout |
|
|
4282
|
-
| No hover states | \`transition\` + \`:hover\` on all interactive elements |
|
|
4283
|
-
| Direct fetch/XHR | \`echoclaw.invoke('fetch', ...)\` |
|
|
4284
|
-
| Direct WebSocket | \`echoclaw.ws.connect()\` |
|
|
4285
|
-
| localStorage | \`echoclaw.storage.*\` or \`echoclaw.db.*\` |
|
|
4286
|
-
| \`echoclaw.storage.set('token', ...)\` | \`echoclaw.auth.setSecret('token', ...)\` |
|
|
4287
|
-
| Show error on token expiry | \`echoclaw.auth.getValidToken()\` with auto-refresh |
|
|
4288
|
-
| Hard-coded token in HTML | Obtain at runtime via auth flow |
|
|
4289
|
-
|
|
4290
|
-
---
|
|
4291
|
-
|
|
4292
|
-
## 12. Output Format
|
|
4293
|
-
|
|
4294
|
-
\`\`\`json
|
|
4295
|
-
{
|
|
4296
|
-
"manifest": {
|
|
4297
|
-
"id": "kebab-case-id",
|
|
4298
|
-
"name": { "en": "Display Name", "zh-CN": "\u663E\u793A\u540D\u79F0" },
|
|
4299
|
-
"version": "1.0.0",
|
|
4300
|
-
"color": "#hex",
|
|
4301
|
-
"icon_svg": "<path ... />",
|
|
4302
|
-
"description": { "en": "One-line", "zh-CN": "\u4E00\u884C\u63CF\u8FF0" },
|
|
4303
|
-
"capabilities": ["ui", "storage"],
|
|
4304
|
-
"auth_profile": { ... }
|
|
4305
|
-
},
|
|
4306
|
-
"html": "<!DOCTYPE html>...",
|
|
4307
|
-
"prompt": {
|
|
4308
|
-
"seed": {
|
|
4309
|
-
"goal": "Verb-first purpose sentence",
|
|
4310
|
-
"constraints": ["self-contained", "..."],
|
|
4311
|
-
"acceptance_tests": ["User can ...", "User can ..."]
|
|
4312
|
-
},
|
|
4313
|
-
"current": { "goal": "Same as seed for v1" }
|
|
4314
|
-
}
|
|
4315
|
-
}
|
|
4316
|
-
\`\`\`
|
|
4317
|
-
|
|
4318
|
-
### Delivery Format \u2014 File-Based (v3.1.0)
|
|
4319
|
-
|
|
4320
|
-
Save your app as workspace files:
|
|
4321
|
-
- \`apps/{appId}/claw.json\` \u2014 the ClawAppPackage JSON (manifest + prompt + setup + meta, WITHOUT the html field)
|
|
4322
|
-
- \`apps/{appId}/index.html\` \u2014 the complete self-contained HTML
|
|
4323
|
-
|
|
4324
|
-
Then notify in your chat response:
|
|
4325
|
-
\`\`\`
|
|
4326
|
-
<!--CLAW_APP_READY:{"appId":"my-app","op":"create"}-->
|
|
4327
|
-
\`\`\`
|
|
4328
|
-
|
|
4329
|
-
- The claw.json must conform to the schema above (manifest + prompt required)
|
|
4330
|
-
- RelayAgent pulls the files from your workspace and delivers to Desktop
|
|
4331
|
-
- You may include explanation text alongside the notification marker
|
|
4332
|
-
- During processing, you may emit progress markers: \`<!--CLAW_STATUS:{"action":"creating","progress":50,"message":"..."}-->\`
|
|
4333
|
-
|
|
4334
|
-
**The workspace files + CLAW_APP_READY marker is the delivery mechanism.** Always save files first, then notify.
|
|
4335
|
-
|
|
4336
|
-
### Pre-Output Self-Check (MANDATORY \u2014 Do NOT Skip)
|
|
4337
|
-
|
|
4338
|
-
The engine validator runs automatically. Items marked with R-IDs correspond to MEMORY.md Critical Rules.
|
|
4339
|
-
|
|
4340
|
-
1. **(R1) Colors:** Search HTML for \`#\` + hex, \`rgb(\`, \`rgba(\`, \`hsl(\`, named colors. ONLY \`manifest.color\` MAY be hex. ALL others MUST use \`var(--ec-xxx)\`. Custom variables like \`--bg\`, \`--card\`, \`--btn\` are also violations \u2014 replace with platform variables.
|
|
4341
|
-
2. **(R6) External URLs:** Zero \`<link href="http...">\`, \`<script src="http...">\`, \`@import url("http...")\`.
|
|
4342
|
-
3. **Left sidebar:** No class or id named \`left-panel\`, \`left-sidebar\`, or \`left-nav\`.
|
|
4343
|
-
4. **Capabilities:** Every Bridge API and browser API used MUST be declared in manifest.capabilities.
|
|
4344
|
-
5. **Permissions:** A \`requestPermission()\` call with denial handling MUST precede every prompt-level API call.
|
|
4345
|
-
6. **Bridge-only:** No direct \`new WebSocket()\`, \`fetch()\` to external URLs, or \`localStorage\`.
|
|
4346
|
-
7. **(R6) Size:** Total HTML MUST be < 500 KB.
|
|
4347
|
-
8. **(R5) Interactivity:** Every \`<button>\` and clickable element MUST have \`:hover\` + \`:focus\` CSS and \`cursor: pointer\`.
|
|
4348
|
-
9. **Credentials:** No token or password stored via \`echoclaw.storage\`.
|
|
4349
|
-
10. **Auth:** Apps using auth APIs MUST declare the auth capability and an auth_profile.
|
|
4350
|
-
11. **(R2) i18n:** ALL user-visible text uses \`t()\` function. No hardcoded Chinese or English strings. Both \`en\` and \`zh-CN\` dictionaries present.
|
|
4351
|
-
12. **(R3) icon_svg:** Inner elements only (no \`<svg>\` wrapper), uses \`currentColor\` (no hardcoded colors).
|
|
4352
|
-
13. **(R2) manifest.name & description:** Both MUST be \`{ "en": "...", "zh-CN": "..." }\` objects, NOT plain strings.
|
|
4353
|
-
14. **(R4) File delivery:** Save app to workspace files (\`apps/{appId}/claw.json\` + \`index.html\`) and include \`<!--CLAW_APP_READY:...-->\` notification in response.
|
|
4354
|
-
|
|
4355
|
-
---
|
|
4356
|
-
|
|
4357
|
-
## 13. Design for Sharing (v1.9.3 \u2014 Mandatory)
|
|
4358
|
-
|
|
4359
|
-
Every .claw app MUST be designed for sharing from the moment of creation. The receiving party's AI **SHALL NOT modify the HTML structure** \u2014 it SHALL only populate configuration values.
|
|
4360
|
-
|
|
4361
|
-
### Core Principles
|
|
4362
|
-
|
|
4363
|
-
1. **HTML is a finished artifact.** Once created, the HTML/CSS/JS is an immutable design artifact. It MUST NOT be redone by another AI after sharing.
|
|
4364
|
-
2. **Environment-dependent values = config_fields.** API endpoints, usernames, preferences, etc. MUST be written as \`{{KEY}}\` placeholders.
|
|
4365
|
-
3. **Sensitive values go through the Bridge.** API keys, tokens, and passwords MUST be declared via \`config_fields\` (\`sensitive: true\`) and MUST NOT be injected into HTML via \`{{KEY}}\`. At runtime, retrieve them through \`echoclaw.invoke('getSecret', { key })\`.
|
|
4366
|
-
4. **install_contract protects integrity.** Declare \`mode: 'ready'\` + \`immutable_segments\` so the system can verify the HTML has not been tampered with after installation.
|
|
4367
|
-
|
|
4368
|
-
### Scenarios config_fields MUST Cover
|
|
4369
|
-
|
|
4370
|
-
| Scenario | config_field example | sensitive? |
|
|
4371
|
-
|----------|---------------------|-----------|
|
|
4372
|
-
| External API endpoint | \`api_url\` (type: url) | No |
|
|
4373
|
-
| API Key / Token | \`api_key\` (type: password) | Yes |
|
|
4374
|
-
| User display name | \`display_name\` (type: text) | No |
|
|
4375
|
-
| Timezone / language preference | \`timezone\` (type: select) | No |
|
|
4376
|
-
| Local service endpoint | \`ollama_url\` (type: url, auto_resolve: from_env) | No |
|
|
4377
|
-
| Gateway Agent ID | \`agent_id\` (type: text, auto_resolve: from_gateway) | No |
|
|
4378
|
-
|
|
4379
|
-
### auto_resolve Strategy
|
|
4380
|
-
|
|
4381
|
-
Minimize manual user input. Declare \`auto_resolve\` for any value that can be obtained automatically:
|
|
4382
|
-
|
|
4383
|
-
\`\`\`json
|
|
4384
|
-
{
|
|
4385
|
-
"key": "agent_id",
|
|
4386
|
-
"auto_resolve": {
|
|
4387
|
-
"strategy": "from_gateway",
|
|
4388
|
-
"source": "agentId",
|
|
4389
|
-
"fallback": "ask_user"
|
|
4390
|
-
}
|
|
4391
|
-
}
|
|
4392
|
-
\`\`\`
|
|
4393
|
-
|
|
4394
|
-
Strategies: \`from_gateway\` (Gateway connection info), \`from_openclaw_config\` (local configuration), \`from_env\` (environment variables), \`from_context\` (conversation context), \`detect_installed\` (detect installed Skills).
|
|
4395
|
-
|
|
4396
|
-
### Installation Paths (Determined Automatically by the Engine)
|
|
4397
|
-
|
|
4398
|
-
The engine provides a \`resolveInstallAction(pkg)\` function. Clients **MUST** call it before installation:
|
|
4399
|
-
|
|
4400
|
-
| Return value | Meaning | AI involvement? |
|
|
4401
|
-
|--------------|---------|-----------------|
|
|
4402
|
-
| \`install_direct\` | HTML is complete, no configuration needed | No |
|
|
4403
|
-
| \`install_with_config\` | HTML is complete, config fields need filling | Only resolving config values |
|
|
4404
|
-
| \`complete_template\` | Template mode, ai_tasks need completion | Yes \u2014 work within designated slots |
|
|
4405
|
-
| \`generate_fresh\` | No HTML, generate from DNA | Yes \u2014 full generation |
|
|
4406
|
-
|
|
4407
|
-
### Self-Check Checklist (Appended to the Checklist Above)
|
|
4408
|
-
|
|
4409
|
-
- [ ] **All environment-dependent values** are declared as config_fields. No hard-coded URLs/IDs/usernames in HTML.
|
|
4410
|
-
- [ ] **Sensitive fields** are marked \`sensitive: true\` and are NOT injected into HTML via \`{{KEY}}\`.
|
|
4411
|
-
- [ ] **install_contract** is declared (mode: 'ready' or 'template').
|
|
4412
|
-
- [ ] **share_profile** is populated (value_prop + ai_handoff_notes).
|
|
4413
|
-
- [ ] **Out-of-the-box apps** have an empty config_fields array (no configuration needed = install_direct path).
|
|
4414
|
-
|
|
4415
|
-
---
|
|
4416
|
-
|
|
4417
|
-
### Mandatory Pre-Generation Checklist (v1.9.3)
|
|
4418
|
-
|
|
4419
|
-
Verify each item before every HTML output. Failure of ANY item = automatic rejection by the engine:
|
|
4420
|
-
|
|
4421
|
-
- [ ] **Zero hard-coded color literals in app HTML/CSS/JS.** This includes hex (#xxx), rgb(), rgba(), hsl(), hsla(), and named colors. Only CSS variables \`var(--ec-xxx)\` are allowed. \`manifest.color\` MAY be hex.
|
|
4422
|
-
- [ ] **Agent theme color** uses \`var(--ec-agent)\` / \`var(--ec-agent-text)\`. Hard-coding any color is forbidden.
|
|
4423
|
-
- [ ] **All network requests** use \`echoclaw.invoke('fetch', ...)\`. Direct fetch/XHR/axios/WebSocket/EventSource to external URLs is forbidden.
|
|
4424
|
-
- [ ] **Tokens/passwords** use \`echoclaw.auth.setSecret()\`. Storing credentials via localStorage/sessionStorage/indexedDB/echoclaw.storage is forbidden.
|
|
4425
|
-
- [ ] **All visible text** uses the \`t()\` i18n function. This includes aria-label, title, placeholder, empty-state, and error-state copy.
|
|
4426
|
-
- [ ] **No left-side navigation.** The shell owns the left sidebar. Apps MUST use only a top bar or right-side panel.
|
|
4427
|
-
- [ ] **All capabilities are declared and minimized.** Declare only capabilities that are actually used.
|
|
4428
|
-
- [ ] **No dangerous code** \u2014 no eval(), new Function(), unsanitized innerHTML, or remote script injection.
|
|
4429
|
-
|
|
4430
|
-
---
|
|
4431
|
-
|
|
4432
|
-
## 14. App Delivery Format (v3.1.0)
|
|
4433
|
-
|
|
4434
|
-
When creating or updating an app, save the files to your workspace and notify via chat.
|
|
4435
|
-
|
|
4436
|
-
### Workspace File Layout
|
|
4437
|
-
|
|
4438
|
-
Save your app as two separate files in \`apps/{appId}/\`:
|
|
4439
|
-
- \`claw.json\` \u2014 ClawAppPackage JSON (manifest + prompt + setup + meta, WITHOUT the html field)
|
|
4440
|
-
- \`index.html\` \u2014 complete self-contained HTML (the content that was previously in the \`html\` field)
|
|
4441
|
-
|
|
4442
|
-
### Notification Marker
|
|
4443
|
-
|
|
4444
|
-
After saving files, include this notification in your chat response:
|
|
4445
|
-
\`\`\`
|
|
4446
|
-
<!--CLAW_APP_READY:{"appId":"my-app","op":"create"}-->
|
|
4447
|
-
\`\`\`
|
|
4448
|
-
RelayAgent pulls the files from your workspace and delivers to Desktop.
|
|
4449
|
-
|
|
4450
|
-
### Schema
|
|
4451
|
-
|
|
4452
|
-
\`claw.json\` must contain a valid JSON object (ClawAppPackage minus html):
|
|
4453
|
-
|
|
4454
|
-
\`\`\`json
|
|
4455
|
-
{
|
|
4456
|
-
"manifest": {
|
|
4457
|
-
"id": "kebab-case-id",
|
|
4458
|
-
"name": { "en": "Display Name", "zh-CN": "\u663E\u793A\u540D\u79F0" },
|
|
4459
|
-
"version": "1.0.0",
|
|
4460
|
-
"color": "#3b82f6",
|
|
4461
|
-
"icon_svg": "<path d=\\"M12 2...\\"/>",
|
|
4462
|
-
"description": { "en": "One-line description", "zh-CN": "\u4E00\u884C\u63CF\u8FF0" },
|
|
4463
|
-
"capabilities": ["ui", "storage"]
|
|
4464
|
-
},
|
|
4465
|
-
"prompt": {
|
|
4466
|
-
"seed": {
|
|
4467
|
-
"goal": "Verb-first purpose sentence",
|
|
4468
|
-
"constraints": ["self-contained", "dark-theme-first"],
|
|
4469
|
-
"acceptance_tests": ["User can ...", "..."]
|
|
4470
|
-
},
|
|
4471
|
-
"current": { "goal": "Same as seed for v1" }
|
|
4472
|
-
},
|
|
4473
|
-
"setup": {
|
|
4474
|
-
"app_mode": "ready",
|
|
4475
|
-
"services": [],
|
|
4476
|
-
"config_fields": [],
|
|
4477
|
-
"share_profile": {
|
|
4478
|
-
"value_prop": { "en": "...", "zh-CN": "..." },
|
|
4479
|
-
"ai_handoff_notes": "..."
|
|
4480
|
-
},
|
|
4481
|
-
"install_contract": {
|
|
4482
|
-
"mode": "ready",
|
|
4483
|
-
"immutable_segments": []
|
|
4484
|
-
}
|
|
4485
|
-
},
|
|
4486
|
-
"meta": {
|
|
4487
|
-
"claw_spec_version": "2.0.0",
|
|
4488
|
-
"built_at": "2026-03-20T10:00:00Z"
|
|
4489
|
-
}
|
|
4490
|
-
}
|
|
4491
|
-
\`\`\`
|
|
4492
|
-
|
|
4493
|
-
\`index.html\` is a complete self-contained HTML document (the content that was previously JSON-escaped in the \`html\` field).
|
|
4494
|
-
|
|
4495
|
-
### Required Fields
|
|
4496
|
-
|
|
4497
|
-
| Field | Required | Notes |
|
|
4498
|
-
|-------|----------|-------|
|
|
4499
|
-
| \`manifest.id\` | Yes | kebab-case, unique identifier |
|
|
4500
|
-
| \`manifest.name\` | Yes | \`{ "en": "...", "zh-CN": "..." }\` |
|
|
4501
|
-
| \`manifest.version\` | Yes | semver, default \`"1.0.0"\` for new apps |
|
|
4502
|
-
| \`manifest.color\` | Yes | hex color like \`"#3b82f6"\` |
|
|
4503
|
-
| \`manifest.icon_svg\` | Yes | inline SVG path string |
|
|
4504
|
-
| \`manifest.description\` | Yes | \`{ "en": "...", "zh-CN": "..." }\` |
|
|
4505
|
-
| \`manifest.capabilities\` | Yes | array of needed capabilities |
|
|
4506
|
-
| \`html\` | Yes (create/update) | Full self-contained HTML, \u2264500KB |
|
|
4507
|
-
| \`prompt.seed.goal\` | Yes | Verb-first purpose sentence |
|
|
4508
|
-
| \`setup\` | Recommended | Required for shareable apps |
|
|
4509
|
-
| \`meta\` | Recommended | Include claw_spec_version and built_at |
|
|
4510
|
-
|
|
4511
|
-
### Output Rules
|
|
4512
|
-
|
|
4513
|
-
- Output complete files \u2014 not patches or diffs
|
|
4514
|
-
- No placeholder values (\`TODO\`, \`FIXME\`, \`...\`)
|
|
4515
|
-
- \`html\` must be a complete self-contained HTML document string
|
|
4516
|
-
- All CSS and JS must be inline (no external links)
|
|
4517
|
-
- You may include explanation text outside the marker \u2014 Connection only extracts the marker content
|
|
4518
|
-
|
|
4519
|
-
### Validation Chain
|
|
4520
|
-
|
|
4521
|
-
The engine validates your output in this order:
|
|
4522
|
-
1. **validateClawHtml** \u2014 checks 16 hard rules (hardcoded colors, external resources, layout, etc.)
|
|
4523
|
-
2. **validateInstallResult** \u2014 verifies immutable segment integrity (adapt tasks only)
|
|
4524
|
-
3. **validateSlotMarkers** \u2014 checks slot marker integrity (template tasks only)
|
|
4525
|
-
4. **diagnoseAppCompliance** \u2014 computes overall compliance scoring
|
|
4526
|
-
5. **autoFixClawHtml** \u2014 identifies auto-fixable items as suggestions (not auto-applied)
|
|
4527
|
-
|
|
4528
|
-
### Pass Condition
|
|
4529
|
-
|
|
4530
|
-
All critical errors must be zero for the output to pass. Warnings are reported but do not block delivery.
|
|
4531
|
-
`;
|
|
4532
|
-
var OPENCLAW_DEV_GUIDE = `# EchoClaw Application Development Guide
|
|
4533
|
-
|
|
4534
|
-
> This file is automatically written by the EchoClaw Relay Agent, based on claw-engine v3.1.0.
|
|
4535
|
-
> Last updated: {{TIMESTAMP}}
|
|
4536
|
-
|
|
4537
|
-
## 1. What Is EchoClaw
|
|
4538
|
-
|
|
4539
|
-
EchoClaw is an open-source, AI-native application platform. You can create .claw applications for users \u2014 self-contained HTML pages that run inside a secure sandbox.
|
|
4540
|
-
|
|
4541
|
-
**Benefits for you (the AI):**
|
|
4542
|
-
- You are no longer limited to plain-text responses; you can create fully visual, interactive applications
|
|
4543
|
-
- Applications have a complete lifecycle: create, install, update, share, rollback
|
|
4544
|
-
- The DevLog system enables any AI to understand the full context and history of an application
|
|
4545
|
-
|
|
4546
|
-
**Benefits for the user:**
|
|
4547
|
-
- AI-generated tools become persistent, installable desktop applications
|
|
4548
|
-
- Multiple AIs can collaboratively maintain the same application
|
|
4549
|
-
- All applications have quality assurance (structural validation + secure sandbox)
|
|
4550
|
-
|
|
4551
|
-
---
|
|
4552
|
-
|
|
4553
|
-
## 2. Recommended Scenarios (20 Categories)
|
|
4554
|
-
|
|
4555
|
-
When a user's request matches any of the following scenarios, you MUST proactively suggest creating a .claw application:
|
|
4556
|
-
|
|
4557
|
-
**Data & Visualization**
|
|
4558
|
-
01. Dashboards & KPI reports (sales, product metrics, team statistics)
|
|
4559
|
-
02. Real-time monitoring panels (API health, cloud costs, smart home status)
|
|
4560
|
-
03. Data exploration & visualization (CSV/database analysis, interactive charts)
|
|
4561
|
-
|
|
4562
|
-
**Management & Productivity**
|
|
4563
|
-
04. Project/task management boards (Kanban, to-do lists, OKR tracking)
|
|
4564
|
-
05. Roadmaps & timelines (product planning, Gantt charts, study plans)
|
|
4565
|
-
06. Calendars & scheduling (weekly calendars, travel itineraries, shift rosters, class schedules)
|
|
4566
|
-
07. Pipeline tracking (CRM, recruiting, job search, fundraising progress)
|
|
4567
|
-
08. Ticket & queue management (customer support, bug tracking, incident triage)
|
|
4568
|
-
|
|
4569
|
-
**Web Pages & Presentations**
|
|
4570
|
-
09. Marketing landing pages & event pages (product launches, conferences, promotions)
|
|
4571
|
-
10. Personal homepages & portfolios (online resumes, design galleries, single-page blogs)
|
|
4572
|
-
11. Presentations & reports (client proposals, weekly reports, investor updates)
|
|
4573
|
-
|
|
4574
|
-
**Tools & Calculators**
|
|
4575
|
-
12. Productivity tools (calculators, converters, countdowns, password generators)
|
|
4576
|
-
13. Finance & budget tracking (personal budgets, subscription management, savings goals)
|
|
4577
|
-
14. Decision comparison tools (product selection, school selection, housing, vendor comparison)
|
|
4578
|
-
15. Business simulators (mortgage calculators, pricing models, nutrition calculators, shift optimization)
|
|
4579
|
-
|
|
4580
|
-
**Forms & Data Collection**
|
|
4581
|
-
16. Forms & approval workflows (client onboarding, audit checklists, daily reports)
|
|
4582
|
-
17. Inventory & collection management (equipment, books, ingredients, lab supplies)
|
|
4583
|
-
|
|
4584
|
-
**Learning & Entertainment**
|
|
4585
|
-
18. Learning & exam prep apps (course tracking, flashcards, spaced repetition)
|
|
4586
|
-
19. Interactive mini-games (lotteries, text adventures, quizzes, casual games)
|
|
4587
|
-
20. Media galleries & mood boards (inspiration boards, content calendars, recipes, maps)
|
|
4588
|
-
|
|
4589
|
-
**Heuristic Rules** \u2014 You SHOULD suggest a .claw application when the request exhibits any of the following characteristics:
|
|
4590
|
-
- Persistent state (not a one-off answer)
|
|
4591
|
-
- Repeated use (the user will return to use it)
|
|
4592
|
-
- Visual structure (charts, cards, maps, timelines, calendars)
|
|
4593
|
-
- Interactive operations (filtering, editing, toggling, forms, drill-down)
|
|
4594
|
-
- Ongoing updates (real-time data or periodic data entry)
|
|
4595
|
-
- Sharing & presentation (intended to be shown to others)
|
|
4596
|
-
- **Fallback rule: any request that is "visible and operable" SHALL default to a ClawApp recommendation**
|
|
4597
|
-
|
|
4598
|
-
---
|
|
4599
|
-
|
|
4600
|
-
## 3. Technical Specification Summary
|
|
4601
|
-
|
|
4602
|
-
### Package Structure
|
|
4603
|
-
| Field | Description |
|
|
4604
|
-
|-------|-------------|
|
|
4605
|
-
| manifest | Identity: id, name, version, icon_svg, capabilities, auth_profile |
|
|
4606
|
-
| html | PC rendering: complete HTML/CSS/JS (sandboxed iframe, MUST NOT exceed 500KB) |
|
|
4607
|
-
| code | RTOS rendering: Protocol JSON UI tree (32 primitives) |
|
|
4608
|
-
| dna | AI memory: seed + current + history |
|
|
4609
|
-
| setup | Installation configuration: app_mode, config_fields, ai_tasks, share_profile, install_contract |
|
|
4610
|
-
| meta | Metadata: spec_version, generated_at, package_hash |
|
|
4611
|
-
|
|
4612
|
-
### Capability System (21 Capabilities)
|
|
4613
|
-
- **Auto-granted (10):** ui, timer, storage, notification, network, audio, fullscreen, app_comm, database, secure_credential
|
|
4614
|
-
- **Requires user confirmation (10):** clipboard, microphone, camera, location, media_capture, filesystem, local_network, lan_network, background_task, auth
|
|
4615
|
-
- **Bridge-exclusive (1):** device_control
|
|
4616
|
-
|
|
4617
|
-
### Local Network Access Capabilities (Added in v1.9.1)
|
|
4618
|
-
- \`local_network\`: localhost only (127.0.0.1, ::1) \u2014 local services (Ollama, dev servers)
|
|
4619
|
-
- \`lan_network\`: private LAN (10.x, 172.16-31.x, 192.168.x, .local) \u2014 NAS, home automation, LAN services
|
|
4620
|
-
- Both MUST declare specific target addresses in \`manifest.network_allow\`
|
|
4621
|
-
- Link-local addresses (169.254.x) and cloud metadata endpoints are ALWAYS blocked
|
|
4622
|
-
|
|
4623
|
-
### Authentication Capability (Added in v1.9.0)
|
|
4624
|
-
- \`auth\` is a prompt-level capability; it MUST be confirmed by the user before the \`echoclaw.auth.*\` API can be used
|
|
4625
|
-
- **Three-tier storage model:**
|
|
4626
|
-
- Tier 1 (Plaintext session): \`echoclaw.auth.setSession()\` \u2014 non-sensitive fields such as userId, displayName
|
|
4627
|
-
- Tier 2 (Keychain read-only): \`echoclaw.invoke('getSecret')\` \u2014 API keys entered at install time
|
|
4628
|
-
- Tier 3 (Keychain read-write): \`echoclaw.auth.setSecret()\` \u2014 runtime credentials such as OAuth tokens
|
|
4629
|
-
- **manifest.auth_profile:** declares the authentication model (strategy, token_tier, providers, session_fields, unauthenticated_behavior)
|
|
4630
|
-
- **Token naming convention:** \`{providerId}.{tokenType}\`, e.g., \`google.access_token\`
|
|
4631
|
-
- **config_fields vs auth_profile:** config_fields = what values to collect at install time (UI layer); auth_profile = how the application manages authentication (security/lifecycle layer)
|
|
4632
|
-
|
|
4633
|
-
### Resource Limits
|
|
4634
|
-
| Resource | Limit |
|
|
4635
|
-
|----------|-------|
|
|
4636
|
-
| HTML size | 500KB hard limit / 400KB warning threshold |
|
|
4637
|
-
| Bridge calls | 60/sec + 120 burst/1sec |
|
|
4638
|
-
| SQLite | 10MB \u2192 50MB \u2192 200MB (tiered) |
|
|
4639
|
-
| KV storage | 5MB / 1000 keys |
|
|
4640
|
-
| WebSocket | 1MB/message, 3 connections default |
|
|
3948
|
+
## i18n Note
|
|
4641
3949
|
|
|
4642
|
-
|
|
4643
|
-
1. Design for a 1024\xD7768 iframe; minimum compatible size is 544\xD7548
|
|
4644
|
-
2. Use ONLY CSS variables \`var(--ec-xxx)\` for theming
|
|
4645
|
-
3. Self-contained HTML (inline CSS+JS, no CDN references)
|
|
4646
|
-
4. Dark theme first (all colors MUST be controlled via CSS variables)
|
|
4647
|
-
5. MUST NOT use a left sidebar (reserved by the shell)
|
|
4648
|
-
6. manifest MUST declare all capabilities
|
|
4649
|
-
7. All interactive elements MUST have hover + focus states
|
|
4650
|
-
8. Communicate with the host via the \`window.echoclaw\` Bridge
|
|
4651
|
-
9. SVG icons (inline only; MUST NOT use emoji or icon fonts)
|
|
4652
|
-
10. State MUST be visible at a glance
|
|
4653
|
-
11. Bilingual (en + zh-CN); use the \`t()\` function for all user-facing strings
|
|
4654
|
-
12. Every application MUST generate an \`icon_svg\`
|
|
4655
|
-
13. MUST request permission before using any prompt-level capability
|
|
4656
|
-
14. Credential storage MUST be tiered \u2014 tokens/secrets/passwords MUST use \`echoclaw.auth.setSecret()\`; using \`echoclaw.storage\` for credentials is PROHIBITED
|
|
4657
|
-
15. Any application that uses \`echoclaw.auth.*\` MUST declare the \`auth\` capability and provide an \`auth_profile\`
|
|
4658
|
-
16. The bottom-right 64\xD764px area is reserved \u2014 the host Info button occupies this zone; you MUST NOT place any interactive elements there
|
|
4659
|
-
|
|
4660
|
-
### Bridge API
|
|
4661
|
-
\`\`\`javascript
|
|
4662
|
-
// Core
|
|
4663
|
-
echoclaw.getContext() // Theme, device, capabilities
|
|
4664
|
-
echoclaw.invoke(action, payload) // Invoke host services
|
|
4665
|
-
echoclaw.subscribe(event, cb) // Listen for events
|
|
4666
|
-
echoclaw.storage.get/set/remove // KV storage
|
|
4667
|
-
echoclaw.emit(action, payload) // Emit actions
|
|
4668
|
-
echoclaw.log(level, ...args) // Logging
|
|
4669
|
-
|
|
4670
|
-
// Database
|
|
4671
|
-
echoclaw.db.exec(sql, params) // SQLite execute
|
|
4672
|
-
echoclaw.db.query(sql, params) // SQLite query
|
|
4673
|
-
|
|
4674
|
-
// File System
|
|
4675
|
-
echoclaw.fs.appRead/appWrite/appList/appRemove // Sandboxed files
|
|
4676
|
-
echoclaw.fs.pick(options) // External file picker (requires filesystem capability)
|
|
4677
|
-
echoclaw.fs.save(options) // External file save
|
|
4678
|
-
|
|
4679
|
-
// WebSocket
|
|
4680
|
-
echoclaw.ws.connect/send/close // WebSocket proxy
|
|
4681
|
-
|
|
4682
|
-
// Authentication (requires auth capability)
|
|
4683
|
-
echoclaw.auth.setSecret(key, value) // Keychain write
|
|
4684
|
-
echoclaw.auth.getSecret(key) // Keychain read
|
|
4685
|
-
echoclaw.auth.deleteSecret(key) // Keychain delete
|
|
4686
|
-
echoclaw.auth.setSession(fields) // Plaintext session write
|
|
4687
|
-
echoclaw.auth.getSession() // Plaintext session read
|
|
4688
|
-
echoclaw.auth.clearSession() // Clear session
|
|
4689
|
-
echoclaw.auth.isAuthenticated({...}) // Check authentication status
|
|
4690
|
-
echoclaw.auth.getValidToken(key) // Get valid token (auto-refresh)
|
|
4691
|
-
echoclaw.auth.logout() // Logout (preserves install-time Tier 2 secrets)
|
|
4692
|
-
|
|
4693
|
-
// Authentication Events
|
|
4694
|
-
echoclaw.subscribe('auth:sessionExpired', ({ reason, key, providerId }) => {...})
|
|
4695
|
-
echoclaw.subscribe('auth:tokenRefreshed', ({ key, providerId, expiresAt }) => {...})
|
|
4696
|
-
\`\`\`
|
|
4697
|
-
|
|
4698
|
-
### DevLog Discipline
|
|
4699
|
-
- On creation: initialize \`original_intent\` (AI-abstracted summary; MUST NOT store the user's raw words)
|
|
4700
|
-
- After every iteration: update immediately (MUST NOT batch updates)
|
|
4701
|
-
- All text MUST be AI-abstracted and sanitized; MUST NOT contain PII, secrets, or raw conversation content
|
|
4702
|
-
|
|
4703
|
-
---
|
|
4704
|
-
|
|
4705
|
-
## 4. Design for Sharing (v1.9.3)
|
|
4706
|
-
|
|
4707
|
-
**Every application MUST be prepared for sharing at creation time.** The app you build will be installed by other users in the future; their AI MUST NOT need to rewrite your HTML.
|
|
4708
|
-
|
|
4709
|
-
Key rules:
|
|
4710
|
-
1. **Environment-specific values \u2192 config_fields + \`{{KEY}}\` placeholders.** API addresses, usernames, and preferences MUST go through configuration.
|
|
4711
|
-
2. **Sensitive values \u2192 \`sensitive: true\`.** API keys/tokens MUST NOT be injected into HTML; they MUST be retrieved at runtime via the Bridge.
|
|
4712
|
-
3. **Declare an install_contract.** This protects HTML integrity and prevents the receiving AI from tampering with the markup.
|
|
4713
|
-
4. **Populate share_profile.** This tells the receiving AI what the application does and what caveats to be aware of.
|
|
4714
|
-
5. **Applications that do not depend on external services \u2192 config_fields MUST be an empty array.** These applications are "ready to use out of the box" and require no AI involvement at install time.
|
|
4715
|
-
|
|
4716
|
-
See \`CLAWAPP_SPEC.md\` Chapter 13 for full details.
|
|
4717
|
-
|
|
4718
|
-
---
|
|
4719
|
-
|
|
4720
|
-
## 5. Quality Standards
|
|
4721
|
-
|
|
4722
|
-
When generating a .claw application, you MUST target Grade B+ (>=70 points):
|
|
4723
|
-
- All colors MUST use CSS variables
|
|
4724
|
-
- MUST be bilingual (en + zh-CN)
|
|
4725
|
-
- MUST include hover/focus interaction states on all interactive elements
|
|
4726
|
-
- MUST NOT leave any TODO/FIXME/placeholder in the output
|
|
4727
|
-
- Design target is 1024\xD7768; minimum safe area is 544\xD7548
|
|
4728
|
-
- Credentials MUST use tiered storage (Rule 14)
|
|
4729
|
-
- Applications with authentication requirements MUST include an auth_profile (Rule 15)
|
|
4730
|
-
|
|
4731
|
-
---
|
|
4732
|
-
|
|
4733
|
-
## 6. Known Platform Limitations (Updated with CLAW_DOC_VERSION)
|
|
4734
|
-
|
|
4735
|
-
The following are **temporary Bridge feature gaps** \u2014 the desktop platform (Electron) natively supports these capabilities, but the Bridge API layer has not yet implemented them. All items are scheduled for implementation. When encountered, inform the user and provide the listed workaround. Do NOT submit feedback for these items.
|
|
4736
|
-
|
|
4737
|
-
| Limitation | Current Status | Workaround |
|
|
4738
|
-
|------------|----------------|------------|
|
|
4739
|
-
| WebSocket proxy | Stub \u2014 \`ws.connect()\` throws error | Use fetch polling via \`echoclaw.invoke('fetch', ...)\` instead |
|
|
4740
|
-
| SQLite database | KV-emulated \u2014 no SQL query capability | Use \`echoclaw.storage\` KV store |
|
|
4741
|
-
| File system picker | Stub \u2014 \`fs.pick()\` / \`fs.save()\` unavailable | Use \`echoclaw.fs.appRead\` / \`appWrite\` sandbox files |
|
|
4742
|
-
| Secret encryption | Plaintext localStorage | Functional but security pending upgrade |
|
|
4743
|
-
| Light theme | Hard-coded dark mode | Design for dark theme only |
|
|
4744
|
-
| Permission prompts | All permissions auto-approved | Functional but missing user confirmation step |
|
|
4745
|
-
| Inter-app broadcast | Stub \u2014 \`broadcast()\` logs only | N/A \u2014 apps run independently |
|
|
4746
|
-
| Keyboard shortcuts | Stub \u2014 \`registerShortcut()\` logs only | Use button interactions instead |
|
|
4747
|
-
| 14 deprecated node types | stat / tabs / table / slider etc. unavailable | Use composition recipes to build equivalent UI |
|
|
4748
|
-
|
|
4749
|
-
---
|
|
3950
|
+
Language switching is handled globally by the EchoClaw host system. Your app MUST support bilingual text via \`t()\` function + dictionaries, but MUST NOT render a language toggle/selector UI. The host tells the iframe which language to use.
|
|
4750
3951
|
|
|
4751
|
-
##
|
|
4752
|
-
|
|
4753
|
-
You SHOULD ask the user for consent and submit feedback ONLY in these scenarios:
|
|
4754
|
-
|
|
4755
|
-
1. **New issue not in the known limitations list** \u2014 you encountered a platform limitation not listed above
|
|
4756
|
-
2. **Documentation vs reality mismatch** \u2014 the spec says a feature is supported, but the actual call errors or behaves unexpectedly
|
|
4757
|
-
3. **Overly strict validation** \u2014 an existing validation rule blocks a reasonable user requirement
|
|
4758
|
-
4. **Spec blind spot** \u2014 the user's request exposes a scenario the current spec does not cover
|
|
4759
|
-
5. **Client rendering anomaly** \u2014 after receiving render diagnostics, you confirmed the issue is on the client/platform side, not in your generated code
|
|
4760
|
-
|
|
4761
|
-
**Critical:** If the client relays render diagnostics (JS errors, Bridge call failures, layout anomalies), you MUST first attempt to fix your own code. Only submit feedback if you confirm the issue is a platform problem (e.g., Bridge method itself errors, CSS variables not injected). Do NOT blame the platform for your own generation quality issues.
|
|
4762
|
-
|
|
4763
|
-
---
|
|
4764
|
-
|
|
4765
|
-
## 8. User Communication Guidelines
|
|
4766
|
-
|
|
4767
|
-
When hitting a platform limitation, follow this flow: **Empathize \u2192 Workaround \u2192 Then ask about feedback.**
|
|
4768
|
-
|
|
4769
|
-
**Correct examples:**
|
|
4770
|
-
> "This feature is still being developed. Let me use [specific workaround] to implement it \u2014 the result will be very similar. If you think this capability is important, I can report it to the dev team to prioritize. Would you like that?"
|
|
4771
|
-
|
|
4772
|
-
> "I noticed this isn't working as smoothly as it should \u2014 let me try a different approach."
|
|
4773
|
-
|
|
4774
|
-
**After submission:**
|
|
4775
|
-
> "Reported to the dev team. They'll evaluate and schedule it."
|
|
4776
|
-
|
|
4777
|
-
**Prohibited language:**
|
|
4778
|
-
- MUST NOT say "This is a platform limitation", "The platform can't do this", "EchoClaw doesn't support this"
|
|
4779
|
-
- MUST NOT ask about feedback without providing a workaround first
|
|
4780
|
-
- MUST NOT proactively mention feedback when the user has not encountered a problem
|
|
4781
|
-
- MUST NOT expose technical details: error codes, stack traces, diagnostic JSON, Bridge method names
|
|
4782
|
-
- MUST NOT tell the user "JS error detected", "Bridge call failed", "layout anomaly found"
|
|
4783
|
-
|
|
4784
|
-
**When self-correcting after receiving render diagnostics:**
|
|
4785
|
-
- CORRECT: "I noticed something looks off \u2014 let me adjust that"
|
|
4786
|
-
- CORRECT: "This feature is still being refined, let me use a different approach"
|
|
4787
|
-
- WRONG: "I received a runtime diagnostic showing ReferenceError on line 42"
|
|
4788
|
-
|
|
4789
|
-
---
|
|
4790
|
-
|
|
4791
|
-
## 9. Feedback Frequency Control
|
|
4792
|
-
|
|
4793
|
-
- **Same issue** (identical \`issue_type\` + \`spec_reference\`): submit only once per conversation session
|
|
4794
|
-
- **User consent prompt**: ask "would you like me to report this?" at most ONCE per session; for subsequent limitations, just explain and provide the workaround without asking again
|
|
4795
|
-
- **Maximum 3 feedback submissions per session**
|
|
4796
|
-
|
|
4797
|
-
---
|
|
4798
|
-
|
|
4799
|
-
## 10. CLAW_FEEDBACK Marker Format
|
|
4800
|
-
|
|
4801
|
-
After receiving user consent, embed the following marker in your response. The client will parse it and auto-attach runtime data before submitting to the feedback server.
|
|
4802
|
-
|
|
4803
|
-
\`\`\`
|
|
4804
|
-
<!--CLAW_FEEDBACK:{"schema_version":1,"issue_type":"capability_not_implemented|spec_gap|toolkit_gap|validation_too_strict|client_rendering_bug|api_inconsistency","severity":"blocker|degraded|cosmetic","spec_reference":"e.g. CLAWAPP_SPEC.md#bridge-api / echoclaw.ws.connect","user_request":"One-line summary of user's original request","attempted":"What implementation approach you tried","failure":"Specific failure reason","suggestion":"Your recommendation for how the platform should improve","code_snippet":"Key code you wanted to write but couldn't (max 5 lines)","workaround":"The workaround you provided to user","workaround_accepted":true,"confidence":0.9,"conversation_summary":"Summary of last 3-5 conversation turns (sanitized, no PII)"}-->
|
|
4805
|
-
\`\`\`
|
|
4806
|
-
|
|
4807
|
-
**Field descriptions:**
|
|
4808
|
-
- \`issue_type\`: one of \`capability_not_implemented\`, \`spec_gap\`, \`toolkit_gap\`, \`validation_too_strict\`, \`client_rendering_bug\`, \`api_inconsistency\`
|
|
4809
|
-
- \`severity\`: \`blocker\` = user request completely impossible; \`degraded\` = achievable but noticeably compromised; \`cosmetic\` = minor impact
|
|
4810
|
-
- \`confidence\`: your confidence (0\u20131) that this is a platform issue, not your own generation problem
|
|
4811
|
-
- \`conversation_summary\`: MUST be sanitized \u2014 do NOT include user personal info, API keys, or any sensitive content
|
|
4812
|
-
|
|
4813
|
-
**Marker rules:**
|
|
4814
|
-
- MUST be on its own line, not embedded within other text
|
|
4815
|
-
- JSON MUST be valid single-line JSON with no line breaks
|
|
4816
|
-
- Maximum one CLAW_FEEDBACK marker per message
|
|
4817
|
-
- The marker will be stripped from chat display by the client \u2014 the user will not see it
|
|
4818
|
-
|
|
4819
|
-
---
|
|
4820
|
-
|
|
4821
|
-
## 11. Handling Render Diagnostics
|
|
4822
|
-
|
|
4823
|
-
The client may relay render diagnostics for the current app via an internal channel (NOT chat messages), in this format:
|
|
4824
|
-
|
|
4825
|
-
\`\`\`json
|
|
4826
|
-
{
|
|
4827
|
-
"type": "runtime_diagnostic",
|
|
4828
|
-
"appId": "xxx",
|
|
4829
|
-
"diagnostics": [
|
|
4830
|
-
{ "kind": "js_error", "message": "ReferenceError: xxx is not defined", "line": 42 },
|
|
4831
|
-
{ "kind": "bridge_error", "method": "db.query", "error": "not implemented" },
|
|
4832
|
-
{ "kind": "layout_warning", "message": "Root container has zero dimensions" }
|
|
4833
|
-
]
|
|
4834
|
-
}
|
|
4835
|
-
\`\`\`
|
|
4836
|
-
|
|
4837
|
-
Upon receiving diagnostics:
|
|
4838
|
-
1. **First check if it is your own code issue** (typo, syntax error, calling a nonexistent method)
|
|
4839
|
-
2. If it is your issue \u2192 fix the code. Do NOT submit feedback.
|
|
4840
|
-
3. If confirmed as a platform issue (Bridge method itself errors, CSS variables not injected, etc.) \u2192 follow the feedback flow described in Sections 7\u201310
|
|
4841
|
-
|
|
4842
|
-
**Critical requirement: NEVER expose technical details to the user in conversation.**
|
|
4843
|
-
- MUST NOT tell the user "JS error detected", "Bridge call failed", "layout anomaly"
|
|
4844
|
-
- MUST NOT show error codes, stack traces, or diagnostic JSON
|
|
4845
|
-
- CORRECT: use natural language such as "I noticed something looks off with the display \u2014 let me fix that"
|
|
4846
|
-
- CORRECT: for platform issues, say "This feature is still being refined, let me use a different approach"
|
|
4847
|
-
|
|
4848
|
-
---
|
|
4849
|
-
|
|
4850
|
-
## 12. Iterating Existing Apps
|
|
4851
|
-
|
|
4852
|
-
When a user asks to modify an installed app (e.g., "change the color of my dashboard", "add a filter to my tracker"):
|
|
4853
|
-
|
|
4854
|
-
1. **Identify the target app** from the \`ClientInventorySnapshot\` sent on connection. Match by app name, ID, or user description.
|
|
4855
|
-
2. **Read the app's DevLog** before making any changes. The DevLog contains: original intent, current state, feature list, design decisions, iteration history, and trade-offs. This is your full context \u2014 you MUST understand it before touching the code.
|
|
4856
|
-
3. **Use the Edit Protocol** to submit changes. Do NOT regenerate the entire HTML. Submit structured \`ClawEditPatch\` operations (insert, replace, delete) targeting specific code regions. The client applies patches and verifies integrity.
|
|
4857
|
-
4. **Update the DevLog immediately** after every successful change:
|
|
4858
|
-
- Add an entry to \`iterations[]\` with: type, description, what changed, what was preserved
|
|
4859
|
-
- Update \`current_state\` to reflect the new behavior
|
|
4860
|
-
- Add to \`features[]\` or \`decisions[]\` if the change introduces new functionality or design choices
|
|
4861
|
-
5. **Increment the app version** (patch bump for small changes, minor bump for new features).
|
|
4862
|
-
6. **Do NOT reset or discard** the user's existing data, config, or customizations unless explicitly requested.
|
|
4863
|
-
|
|
4864
|
-
---
|
|
4865
|
-
|
|
4866
|
-
## 13. Multi-AI Collaboration
|
|
4867
|
-
|
|
4868
|
-
Multiple AI instances (different OpenClaw sessions, or different AI models) may work on the same app over time. The DevLog is the shared context that makes this possible.
|
|
4869
|
-
|
|
4870
|
-
**When taking over an app you did not create:**
|
|
4871
|
-
1. **Read the full DevLog first.** Pay special attention to \`original_intent\`, \`current_state\`, \`decisions[]\`, and \`trade_offs[]\`. These tell you WHY the app is built the way it is.
|
|
4872
|
-
2. **Respect existing design decisions.** Do NOT refactor or "improve" code unless the user explicitly asks. The previous AI made deliberate choices \u2014 the DevLog explains them.
|
|
4873
|
-
3. **Update the DevLog after every change.** Your iteration entry MUST include what you changed and why. The next AI (or your future self) depends on this record.
|
|
4874
|
-
|
|
4875
|
-
**Concurrency protection:**
|
|
4876
|
-
- The client enforces \`AppWriteLock\`. If another agent is currently modifying the app, your edit will be rejected. Wait and retry.
|
|
4877
|
-
- On reconnection, the client sends \`AgentHandoverContext\` with: which apps you installed, which you last modified, and when you disconnected. Use this to resume context.
|
|
4878
|
-
|
|
4879
|
-
**DevLog discipline reminder:**
|
|
4880
|
-
- All text MUST be AI-abstracted and sanitized \u2014 no PII, no secrets, no raw user conversation
|
|
4881
|
-
- Initialize \`original_intent\` on creation (summarize, do not quote the user)
|
|
4882
|
-
- Update after EVERY iteration \u2014 do NOT batch updates
|
|
4883
|
-
|
|
4884
|
-
---
|
|
4885
|
-
|
|
4886
|
-
## 14. File-Driven App Delivery & Communication Protocol (v3.1.0)
|
|
4887
|
-
|
|
4888
|
-
You work directly with files in your workspace. The EchoClaw client and RelayAgent sync files between your workspace and the user's Desktop. **The client and RelayAgent have no AI capability** \u2014 all feedback from them is rule-based and standardized.
|
|
4889
|
-
|
|
4890
|
-
### Workspace Structure
|
|
4891
|
-
|
|
4892
|
-
Your app files live at \`apps/{appId}/\`:
|
|
4893
|
-
- \`claw.json\` \u2014 manifest + prompt + setup + meta (NO html field)
|
|
4894
|
-
- \`index.html\` \u2014 complete self-contained HTML
|
|
4895
|
-
- \`session.json\` \u2014 conversation record (requirement evolution, decisions \u2014 YOU maintain this)
|
|
4896
|
-
- \`devlog.json\` \u2014 optional development log
|
|
4897
|
-
- \`.status\` \u2014 "draft" (creating) or "published" (installed)
|
|
4898
|
-
|
|
4899
|
-
### Communication Protocol \u2014 Three Markers
|
|
4900
|
-
|
|
4901
|
-
| Marker | Direction | Purpose |
|
|
4902
|
-
|--------|-----------|---------|
|
|
4903
|
-
| \`CLAW_TASK_ACK\` | You \u2192 Client | Confirm you received a task. Client updates UI: "AI working..." |
|
|
4904
|
-
| \`CLAW_APP_READY\` | You \u2192 Client | Signal files are ready. Client tells RelayAgent to pull. |
|
|
4905
|
-
| \`CLAW_FEEDBACK\` | Client \u2192 You | Rule-based error report. Something went wrong, fix it. |
|
|
4906
|
-
|
|
4907
|
-
#### CLAW_TASK_ACK \u2014 Confirm Receipt
|
|
4908
|
-
When you receive a task, include this marker in your response:
|
|
4909
|
-
\`\`\`
|
|
4910
|
-
<!--CLAW_TASK_ACK:{"appId":"my-app","op":"create","status":"received"}-->
|
|
4911
|
-
\`\`\`
|
|
4912
|
-
The client needs this to show "AI is working" in the UI. Do NOT skip this.
|
|
4913
|
-
**Note:** For simple tasks, you may include both CLAW_TASK_ACK and CLAW_APP_READY in the same response. For longer tasks (Studio, multi-step), ACK first, then READY when files are saved.
|
|
4914
|
-
|
|
4915
|
-
#### CLAW_APP_READY \u2014 Signal Completion
|
|
4916
|
-
After saving files, include in your response:
|
|
4917
|
-
\`\`\`
|
|
4918
|
-
<!--CLAW_APP_READY:{"appId":"my-app","op":"create","contentHash":"optional"}-->
|
|
4919
|
-
\`\`\`
|
|
4920
|
-
- \`op\`: "create", "adapt", "update", "comply", or "publish"
|
|
4921
|
-
- \`contentHash\`: optional hash of index.html for integrity verification
|
|
4922
|
-
|
|
4923
|
-
#### CLAW_FEEDBACK \u2014 Client Error Reports
|
|
4924
|
-
If something goes wrong, the client sends a \`<!--CLAW_FEEDBACK:...-->\` marker. Error codes:
|
|
4925
|
-
|
|
4926
|
-
| Code | Meaning | What to do |
|
|
4927
|
-
|------|---------|------------|
|
|
4928
|
-
| \`file_not_found\` | You notified but files don't exist at the path | Check path, re-save files, re-notify |
|
|
4929
|
-
| \`json_parse_error\` | claw.json has invalid JSON syntax | Fix JSON, re-save |
|
|
4930
|
-
| \`html_empty\` | index.html is empty (0 bytes) | Write complete HTML, re-save |
|
|
4931
|
-
| \`schema_invalid\` | claw.json missing required fields | Add missing manifest/prompt fields |
|
|
4932
|
-
| \`task_timeout\` | No ACK or READY within timeout | Send CLAW_TASK_ACK if still working |
|
|
4933
|
-
| \`task_ack_missing\` | You're working but didn't send ACK | Send CLAW_TASK_ACK immediately |
|
|
4934
|
-
| \`hash_mismatch\` | contentHash doesn't match actual file | Verify file, re-notify |
|
|
4935
|
-
| \`validation_failed\` | Engine validation failed | Fix issues per feedback (comply flow) |
|
|
4936
|
-
|
|
4937
|
-
**Always respond to CLAW_FEEDBACK by fixing the issue and re-notifying.** The client cannot interpret your text \u2014 it only understands markers.
|
|
4938
|
-
|
|
4939
|
-
### How It Works
|
|
4940
|
-
|
|
4941
|
-
1. **Client sends task** \u2014 first message has full context + framework; follow-ups are lightweight.
|
|
4942
|
-
2. **You confirm** \u2014 reply with \`CLAW_TASK_ACK\` immediately.
|
|
4943
|
-
3. **You create/modify files** \u2014 work directly in \`apps/{appId}/\`.
|
|
4944
|
-
4. **You notify** \u2014 include \`CLAW_APP_READY\` in your chat response.
|
|
4945
|
-
5. **RelayAgent syncs** \u2014 pulls files and delivers to Desktop.
|
|
4946
|
-
6. **Desktop validates** \u2014 runs 16-rule validator.
|
|
4947
|
-
7. **If error** \u2014 client sends \`CLAW_FEEDBACK\`. Fix and re-notify.
|
|
4948
|
-
|
|
4949
|
-
### Session Record \u2014 session.json
|
|
4950
|
-
|
|
4951
|
-
You maintain \`apps/{appId}/session.json\` \u2014 a summarized record of conversation context:
|
|
4952
|
-
- User requirements and how they evolved
|
|
4953
|
-
- Key design decisions and why
|
|
4954
|
-
- NO raw user conversation, NO PII \u2014 always AI-summarized
|
|
4955
|
-
|
|
4956
|
-
This provides continuity when:
|
|
4957
|
-
- Resuming after a long break
|
|
4958
|
-
- Switching between channels (user talks to you in multiple threads)
|
|
4959
|
-
- Building the DNA (prompt.seed) \u2014 session history is your reference
|
|
4960
|
-
|
|
4961
|
-
### Message Format \u2014 Two Tiers
|
|
4962
|
-
|
|
4963
|
-
**First message / resume after break** \u2014 full context:
|
|
4964
|
-
- Identity: "I'm the EchoClaw client..."
|
|
4965
|
-
- Task scope: what to do and what NOT to touch
|
|
4966
|
-
- Framework: code structure template (create) or file index (update/adapt)
|
|
4967
|
-
- Protocol: TASK_ACK + APP_READY markers
|
|
4968
|
-
- Doc reference: where to find specs
|
|
4969
|
-
|
|
4970
|
-
**Follow-up messages** \u2014 lightweight wrapper:
|
|
4971
|
-
\`\`\`
|
|
4972
|
-
<App Update:weather-app>
|
|
4973
|
-
User's message here
|
|
4974
|
-
</App Update:weather-app>
|
|
4975
|
-
|
|
4976
|
-
Workspace: apps/weather-app/ | Rules: R1-R8 reminder
|
|
4977
|
-
Done \u2192 <!--CLAW_APP_READY:{"appId":"weather-app","op":"update"}-->
|
|
4978
|
-
\`\`\`
|
|
4979
|
-
The routing tag tells you which app this message is about (you may be working on multiple apps across channels).
|
|
4980
|
-
|
|
4981
|
-
### Operation Types
|
|
4982
|
-
|
|
4983
|
-
| Operation | What you receive | Scope | What to do |
|
|
4984
|
-
|-----------|-----------------|-------|------------|
|
|
4985
|
-
| **create** | User request + code framework | Full build | Build all files, notify CLAW_APP_READY |
|
|
4986
|
-
| **adapt** | Files in workspace + install contract | Config only | Fill config values ONLY, do NOT modify UI/HTML structure |
|
|
4987
|
-
| **update** | Files in workspace + user request | User's changes only | Modify only what was requested, preserve everything else |
|
|
4988
|
-
| **comply** | CLAW_FEEDBACK with issues | Fix only | Fix ONLY listed issues, do NOT touch "correct" parts |
|
|
4989
|
-
| **publish** | Client signals "user confirmed publish" | Finalize | Set .status to "published", bump version if needed, notify CLAW_APP_READY |
|
|
4990
|
-
|
|
4991
|
-
### Forbidden Actions (all operations)
|
|
4992
|
-
|
|
4993
|
-
- Do NOT use placeholder values like \`TODO\`, \`FIXME\`, or \`...\`
|
|
4994
|
-
- Do NOT add external CDN links or remote resource URLs
|
|
4995
|
-
- Do NOT include \`allow-same-origin\` in any sandbox attribute
|
|
4996
|
-
- Do NOT skip CLAW_TASK_ACK \u2014 the client needs it for UI status
|
|
4997
|
-
- Do NOT skip CLAW_APP_READY \u2014 the client cannot receive your work without it
|
|
4998
|
-
|
|
4999
|
-
### Create: Step-by-Step Guide
|
|
5000
|
-
|
|
5001
|
-
1. Send CLAW_TASK_ACK
|
|
5002
|
-
2. Build the manifest \u2014 id, name, version, color, icon_svg, description, capabilities
|
|
5003
|
-
3. Build the HTML \u2014 \`<!DOCTYPE html>\`, dark theme, 1024\xD7768, CSS variables
|
|
5004
|
-
4. Add styles section by section \u2014 var(--ec-*) only, :hover + :focus on interactive
|
|
5005
|
-
5. Add JavaScript \u2014 state object, event listeners, i18n (t() + en/zh-CN)
|
|
5006
|
-
6. Handle edge cases \u2014 empty states, errors, loading
|
|
5007
|
-
7. Self-check against CLAWAPP_SPEC.md (no hardcoded colors, no external resources, size \u2264500KB)
|
|
5008
|
-
8. Initialize session.json with original intent
|
|
5009
|
-
9. Save claw.json + index.html + session.json, notify CLAW_APP_READY
|
|
5010
|
-
|
|
5011
|
-
### Update: Step-by-Step Guide
|
|
5012
|
-
|
|
5013
|
-
1. Send CLAW_TASK_ACK
|
|
5014
|
-
2. Read existing files at \`apps/{appId}/\` + session.json for context
|
|
5015
|
-
3. Identify what to change based on user request
|
|
5016
|
-
4. Modify only the requested parts \u2014 preserve functionality, config, i18n
|
|
5017
|
-
5. Bump version (patch for fixes, minor for features)
|
|
5018
|
-
6. Update session.json with this change
|
|
5019
|
-
7. Self-check, save, notify CLAW_APP_READY
|
|
5020
|
-
|
|
5021
|
-
### Adapt: Step-by-Step Guide
|
|
5022
|
-
|
|
5023
|
-
1. Send CLAW_TASK_ACK
|
|
5024
|
-
2. Read existing files at \`apps/{appId}/\` \u2014 understand the app
|
|
5025
|
-
3. Review install contract and config_fields
|
|
5026
|
-
4. Fill config values, localize where needed
|
|
5027
|
-
5. Do NOT modify HTML structure, UI, or UE \u2014 only config/setup
|
|
5028
|
-
6. Save, notify CLAW_APP_READY
|
|
5029
|
-
|
|
5030
|
-
### Comply: Step-by-Step Guide
|
|
5031
|
-
|
|
5032
|
-
1. Send CLAW_TASK_ACK
|
|
5033
|
-
2. Read CLAW_FEEDBACK \u2014 note error code and details
|
|
5034
|
-
3. Fix ALL listed issues in workspace files
|
|
5035
|
-
4. Do NOT modify anything not mentioned in feedback
|
|
5036
|
-
5. Save, notify CLAW_APP_READY with op="comply"
|
|
5037
|
-
|
|
5038
|
-
### Publish: Step-by-Step Guide
|
|
5039
|
-
|
|
5040
|
-
Triggered when the user confirms a draft is ready to install.
|
|
5041
|
-
1. Send CLAW_TASK_ACK
|
|
5042
|
-
2. Ensure all files are complete and self-checked
|
|
5043
|
-
3. Set \`.status\` to "published"
|
|
5044
|
-
4. Bump version if this is an update to an existing published app
|
|
5045
|
-
5. Finalize session.json with a publish entry
|
|
5046
|
-
6. Save, notify CLAW_APP_READY with op="publish"
|
|
5047
|
-
|
|
5048
|
-
---
|
|
5049
|
-
|
|
5050
|
-
## 15. Studio Mode \u2014 Interactive App Creation/Editing (v3.1.0)
|
|
5051
|
-
|
|
5052
|
-
Studio mode enables real-time interactive development. The user chats with you while previewing changes live via RelayAgent file sync.
|
|
5053
|
-
|
|
5054
|
-
### How Studio Mode Differs from Normal Chat
|
|
5055
|
-
|
|
5056
|
-
| Aspect | Normal Chat | Studio Mode |
|
|
5057
|
-
|--------|------------|-------------|
|
|
5058
|
-
| Interaction | One-shot: create/modify and notify | Conversational: multi-turn with user |
|
|
5059
|
-
| Preview | No preview \u2014 user sees app after install | Live: RelayAgent polls files, pushes to Desktop |
|
|
5060
|
-
| Delivery | Save files + CLAW_APP_READY | Save after each change; "Publish" for final |
|
|
5061
|
-
| Draft | Created apps start as drafts | Same \u2014 draft until user publishes |
|
|
5062
|
-
| Session | session.json updated per task | session.json updated continuously |
|
|
5063
|
-
|
|
5064
|
-
### Key Rule: Save Complete HTML After Every Change
|
|
5065
|
-
|
|
5066
|
-
**Every time you modify the HTML, save the complete updated file to \`apps/{appId}/index.html\`.**
|
|
5067
|
-
RelayAgent detects the file change and pushes the updated HTML to Desktop for live preview.
|
|
5068
|
-
|
|
5069
|
-
### Message Format in Studio
|
|
5070
|
-
|
|
5071
|
-
**First message**: Full context with code framework, rules, and Studio mode instructions.
|
|
5072
|
-
**Follow-up messages**: Lightweight routing tags:
|
|
5073
|
-
\`\`\`
|
|
5074
|
-
<Studio Create:my-app>
|
|
5075
|
-
User's request
|
|
5076
|
-
</Studio Create:my-app>
|
|
3952
|
+
## When to Suggest a ClawApp
|
|
5077
3953
|
|
|
5078
|
-
|
|
3954
|
+
Any user request that is "visible, interactive, and shareable" \u2014 dashboards, tools, forms, games, landing pages, portfolios \u2014 SHOULD be a .claw app. See ECHOCLAW_DEV_GUIDE.md \xA72 for the full 20-category list.
|
|
5079
3955
|
\`\`\`
|
|
5080
|
-
|
|
5081
|
-
### Resuming a Saved Draft
|
|
5082
|
-
|
|
5083
|
-
When a user returns to continue a saved draft, the client sends full context again with:
|
|
5084
|
-
- Draft state (taskId, version, last edited time)
|
|
5085
|
-
- Reference to session.json for previous context
|
|
5086
|
-
- "Check session.json for previous conversation and requirements"
|
|
5087
|
-
|
|
5088
|
-
You should read session.json first, then wait for the user's next instruction.
|
|
5089
|
-
|
|
5090
|
-
### Delivery \u2014 File-Based (v3.1.0)
|
|
5091
|
-
|
|
5092
|
-
#### Normal Chat
|
|
5093
|
-
- Save files to \`apps/{appId}/\` and include \`<!--CLAW_APP_READY:...-->\` in your response
|
|
5094
|
-
- RelayAgent pulls the files and delivers to Desktop
|
|
5095
|
-
|
|
5096
|
-
#### Studio Mode
|
|
5097
|
-
- Save updated files after each change (RelayAgent pushes to Desktop for preview)
|
|
5098
|
-
- When user clicks "Publish", Desktop runs full validation and installs
|
|
5099
|
-
|
|
5100
|
-
**\u26A0\uFE0F CRITICAL: Always save your app files to the workspace. Always include CLAW_APP_READY when the app is ready.**
|
|
5101
|
-
**If you respond with app content only in chat without saving to workspace files, the client cannot receive it.**
|
|
5102
|
-
|
|
5103
|
-
Both paths use the same CLAWAPP_SPEC rules and quality standards (CSS variables, bilingual i18n, icon_svg format, self-check, etc.).
|
|
5104
3956
|
`;
|
|
5105
3957
|
|
|
5106
3958
|
// ../claw-engine/src/studio/prompt.ts
|
|
@@ -5172,7 +4024,7 @@ var CLAWAPP_FRAMEWORK = `### claw.json
|
|
|
5172
4024
|
<!-- App UI structure -->
|
|
5173
4025
|
</body>
|
|
5174
4026
|
<script>
|
|
5175
|
-
// i18n: const dict = { en: {...}, 'zh-CN': {...} }; function t(key) {...}
|
|
4027
|
+
// i18n: const dict = { en: {...}, 'zh-CN': {...} }; function t(key) {...} // NO language toggle UI \u2014 host switches globally
|
|
5176
4028
|
// State: app state object + init
|
|
5177
4029
|
// Events: addEventListener for all interactive elements
|
|
5178
4030
|
// Bridge: window.echoclaw calls (if capabilities declared)
|
|
@@ -5194,17 +4046,15 @@ function completionProtocol(appId, op) {
|
|
|
5194
4046
|
`- Session: Update \`apps/${appId}/session.json\` with this task's context`
|
|
5195
4047
|
].join("\n");
|
|
5196
4048
|
}
|
|
5197
|
-
function
|
|
4049
|
+
function specReference() {
|
|
5198
4050
|
return [
|
|
5199
|
-
"#
|
|
4051
|
+
"# EchoClaw Development Reference",
|
|
5200
4052
|
"",
|
|
5201
|
-
|
|
4053
|
+
"Before generating ANY app code, you MUST open and read these workspace files:",
|
|
4054
|
+
"- `CLAWAPP_SPEC.md` \u2014 Visual & technical specification (CSS variables, hard rules, viewport, Bridge API)",
|
|
4055
|
+
"- `ECHOCLAW_DEV_GUIDE.md` \u2014 Development guide (20 scenarios, package structure, capabilities, design rules)",
|
|
5202
4056
|
"",
|
|
5203
|
-
"
|
|
5204
|
-
"",
|
|
5205
|
-
"# Development Guide (ECHOCLAW_DEV_GUIDE.md)",
|
|
5206
|
-
"",
|
|
5207
|
-
OPENCLAW_DEV_GUIDE
|
|
4057
|
+
"These files are in your workspace root. Do NOT guess \u2014 read them first."
|
|
5208
4058
|
].join("\n");
|
|
5209
4059
|
}
|
|
5210
4060
|
function rulesBlock2() {
|
|
@@ -5216,7 +4066,7 @@ function rulesReminder() {
|
|
|
5216
4066
|
function getCreateSessionStart(userRequest, appId) {
|
|
5217
4067
|
const id = appId ?? "{appId}";
|
|
5218
4068
|
return {
|
|
5219
|
-
systemContent:
|
|
4069
|
+
systemContent: specReference(),
|
|
5220
4070
|
userContent: [
|
|
5221
4071
|
`[EchoClaw Client \u2192 Create Task]`,
|
|
5222
4072
|
"",
|
|
@@ -5249,7 +4099,7 @@ function getAdaptTask(appId, appName, installContract) {
|
|
|
5249
4099
|
"```"
|
|
5250
4100
|
].join("\n") : "";
|
|
5251
4101
|
return {
|
|
5252
|
-
systemContent:
|
|
4102
|
+
systemContent: specReference(),
|
|
5253
4103
|
userContent: [
|
|
5254
4104
|
`[EchoClaw Client \u2192 Adapt Task]`,
|
|
5255
4105
|
"",
|
|
@@ -5301,7 +4151,7 @@ function getComplyTask(appId, anchors, criticalIssues) {
|
|
|
5301
4151
|
function getStudioCreateTask(draft, userRequest) {
|
|
5302
4152
|
const studioPrompt = buildStudioSystemPrompt(draft);
|
|
5303
4153
|
return {
|
|
5304
|
-
systemContent:
|
|
4154
|
+
systemContent: specReference(),
|
|
5305
4155
|
userContent: [
|
|
5306
4156
|
studioPrompt,
|
|
5307
4157
|
"",
|
|
@@ -5332,7 +4182,7 @@ function getStudioCreateTask(draft, userRequest) {
|
|
|
5332
4182
|
}
|
|
5333
4183
|
function getStudioResumeTask(draft) {
|
|
5334
4184
|
return {
|
|
5335
|
-
systemContent:
|
|
4185
|
+
systemContent: specReference(),
|
|
5336
4186
|
userContent: [
|
|
5337
4187
|
`[EchoClaw Client \u2192 Studio Resume]`,
|
|
5338
4188
|
"",
|
|
@@ -5365,7 +4215,7 @@ function getFollowUp(appId, op, userInput) {
|
|
|
5365
4215
|
userInput,
|
|
5366
4216
|
`</${opLabel}:${appId}>`,
|
|
5367
4217
|
"",
|
|
5368
|
-
`Workspace: \`apps/${appId}/\` | Rules: ${rulesReminder()}`,
|
|
4218
|
+
`Workspace: \`apps/${appId}/\` | Rules: ${rulesReminder()} | Ref: CLAWAPP_SPEC.md + ECHOCLAW_DEV_GUIDE.md in workspace`,
|
|
5369
4219
|
op !== "create" ? `Done \u2192 \`<!--CLAW_APP_READY:{"appId":"${appId}","op":"${op}"}-->\`` : "Save files after changes (RelayAgent polls for preview)."
|
|
5370
4220
|
].join("\n"),
|
|
5371
4221
|
docReference: "CLAWAPP_SPEC.md",
|
|
@@ -7958,6 +6808,7 @@ var StudioHandler = class {
|
|
|
7958
6808
|
|
|
7959
6809
|
// src/install/InstallHandler.ts
|
|
7960
6810
|
import crypto5 from "node:crypto";
|
|
6811
|
+
import fs5 from "node:fs";
|
|
7961
6812
|
|
|
7962
6813
|
// src/install/MarkerParser.ts
|
|
7963
6814
|
var MARKER_OPEN = "<!--";
|
|
@@ -8164,7 +7015,8 @@ var InstallHandler = class {
|
|
|
8164
7015
|
lastStatusAt: 0,
|
|
8165
7016
|
streamMarkers: [],
|
|
8166
7017
|
hasConfirmedPlan: !!(action === "install" && payload.confirmedPlan),
|
|
8167
|
-
retryRound: 1
|
|
7018
|
+
retryRound: 1,
|
|
7019
|
+
appId: payload.appId
|
|
8168
7020
|
};
|
|
8169
7021
|
this._activeInstalls.set(requestId, install);
|
|
8170
7022
|
let prompt;
|
|
@@ -8526,6 +7378,10 @@ var InstallHandler = class {
|
|
|
8526
7378
|
aiText: cleanText
|
|
8527
7379
|
});
|
|
8528
7380
|
}
|
|
7381
|
+
} else if (install.appId && (install.action === "adapt" || install.action === "install" || install.action === "generate_fresh")) {
|
|
7382
|
+
this._sendStatus(requestId, "ai_processing", "Waiting for app files...").catch(() => {
|
|
7383
|
+
});
|
|
7384
|
+
this._startWorkspaceWatch(requestId, install);
|
|
8529
7385
|
} else {
|
|
8530
7386
|
this._completeInstall(requestId, {
|
|
8531
7387
|
status: "failed",
|
|
@@ -8535,6 +7391,90 @@ var InstallHandler = class {
|
|
|
8535
7391
|
});
|
|
8536
7392
|
}
|
|
8537
7393
|
}
|
|
7394
|
+
/**
|
|
7395
|
+
* v3.1: Watch workspace directory for file changes (subagent deferred delivery).
|
|
7396
|
+
* When OpenClaw's subagent writes files to workspace, pick them up and complete install.
|
|
7397
|
+
*/
|
|
7398
|
+
_startWorkspaceWatch(requestId, install) {
|
|
7399
|
+
const appId = install.appId;
|
|
7400
|
+
const wsRoot = this._workspaceReader.appDir(appId);
|
|
7401
|
+
if (install.timeoutTimer) clearTimeout(install.timeoutTimer);
|
|
7402
|
+
install.timeoutTimer = setTimeout(() => {
|
|
7403
|
+
this._stopWorkspaceWatch(install);
|
|
7404
|
+
this._completeInstall(requestId, {
|
|
7405
|
+
status: "failed",
|
|
7406
|
+
error: "Timeout waiting for app files from subagent",
|
|
7407
|
+
code: INSTALL_ERROR_CODES.TIMEOUT
|
|
7408
|
+
});
|
|
7409
|
+
}, 18e4);
|
|
7410
|
+
try {
|
|
7411
|
+
fs5.mkdirSync(wsRoot, { recursive: true });
|
|
7412
|
+
install.watcher = fs5.watch(wsRoot, (_eventType, filename) => {
|
|
7413
|
+
if (filename !== "index.html" && filename !== "claw.json") return;
|
|
7414
|
+
if (install.watcherDebounce) clearTimeout(install.watcherDebounce);
|
|
7415
|
+
install.watcherDebounce = setTimeout(() => {
|
|
7416
|
+
this._onWorkspaceFileChanged(requestId, install);
|
|
7417
|
+
}, 1500);
|
|
7418
|
+
});
|
|
7419
|
+
install.watcher.unref?.();
|
|
7420
|
+
} catch {
|
|
7421
|
+
const pollInterval = setInterval(() => {
|
|
7422
|
+
this._onWorkspaceFileChanged(requestId, install);
|
|
7423
|
+
}, 3e3);
|
|
7424
|
+
install.watcherDebounce = pollInterval;
|
|
7425
|
+
}
|
|
7426
|
+
}
|
|
7427
|
+
/**
|
|
7428
|
+
* v3.1: Called when workspace files change — try to assemble and deliver.
|
|
7429
|
+
*/
|
|
7430
|
+
async _onWorkspaceFileChanged(requestId, install) {
|
|
7431
|
+
if (!this._activeInstalls.has(requestId)) return;
|
|
7432
|
+
const appId = install.appId;
|
|
7433
|
+
try {
|
|
7434
|
+
const result = await this._workspaceReader.assemblePackage(appId);
|
|
7435
|
+
if ("error" in result) return;
|
|
7436
|
+
this._stopWorkspaceWatch(install);
|
|
7437
|
+
const { html: pkgHtml, ...packageMeta } = result;
|
|
7438
|
+
const pipelineResult = runFilePipeline({
|
|
7439
|
+
html: pkgHtml ?? "",
|
|
7440
|
+
packageMeta,
|
|
7441
|
+
context: {
|
|
7442
|
+
operation: "adapt",
|
|
7443
|
+
appId,
|
|
7444
|
+
maxHtmlSize: 512e3
|
|
7445
|
+
},
|
|
7446
|
+
round: install.retryRound
|
|
7447
|
+
});
|
|
7448
|
+
if (pipelineResult.action === "deliver" || pipelineResult.action === "fallback") {
|
|
7449
|
+
this._completeInstall(requestId, {
|
|
7450
|
+
status: "success",
|
|
7451
|
+
app: {
|
|
7452
|
+
manifest: result.manifest,
|
|
7453
|
+
html: result.html ?? ""
|
|
7454
|
+
}
|
|
7455
|
+
});
|
|
7456
|
+
} else {
|
|
7457
|
+
this._completeInstall(requestId, {
|
|
7458
|
+
status: "success",
|
|
7459
|
+
app: {
|
|
7460
|
+
manifest: result.manifest,
|
|
7461
|
+
html: result.html ?? ""
|
|
7462
|
+
}
|
|
7463
|
+
});
|
|
7464
|
+
}
|
|
7465
|
+
} catch {
|
|
7466
|
+
}
|
|
7467
|
+
}
|
|
7468
|
+
_stopWorkspaceWatch(install) {
|
|
7469
|
+
if (install.watcher) {
|
|
7470
|
+
install.watcher.close();
|
|
7471
|
+
install.watcher = null;
|
|
7472
|
+
}
|
|
7473
|
+
if (install.watcherDebounce) {
|
|
7474
|
+
clearTimeout(install.watcherDebounce);
|
|
7475
|
+
install.watcherDebounce = null;
|
|
7476
|
+
}
|
|
7477
|
+
}
|
|
8538
7478
|
// ── Private: Install Lifecycle ─────────────────────────────────
|
|
8539
7479
|
/**
|
|
8540
7480
|
* Complete an install request with a result.
|
|
@@ -8597,6 +7537,7 @@ var InstallHandler = class {
|
|
|
8597
7537
|
if (install.timeoutTimer) {
|
|
8598
7538
|
clearTimeout(install.timeoutTimer);
|
|
8599
7539
|
}
|
|
7540
|
+
this._stopWorkspaceWatch(install);
|
|
8600
7541
|
if (install.runId) {
|
|
8601
7542
|
this._chatHandler.unregisterExternalRun(install.runId);
|
|
8602
7543
|
this._runToRequest.delete(install.runId);
|