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.
@@ -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
- ## When to Suggest a ClawApp
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
- ### Design Rules (14 Hard Rules + 2 Soft Rules)
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
- ## 7. When To Submit Feedback
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
- Workspace: apps/my-app/ | Save files after changes (RelayAgent polls for preview).
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 specSystemContent() {
4049
+ function specReference() {
5198
4050
  return [
5199
- "# ClawApp Specification (CLAWAPP_SPEC.md)",
4051
+ "# EchoClaw Development Reference",
5200
4052
  "",
5201
- OPENCLAW_SPEC,
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: specSystemContent(),
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: specSystemContent(),
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: specSystemContent(),
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: specSystemContent(),
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);