README: document actual app (was stale hello-world copy)

- remove onBackPress interception (was swallowing back press to fake-confirm)
- '=' with no pending op no longer zeroes the display (AC + 2 + = was 0)
- AC no longer leaves stale fresh flag (first digit after AC appended to 0)
- leading zero replaced by first digit (00 + 2 was 002)
- operators auto-evaluate pending op (2+3x4 = 20, left-to-right)
- repeated = re-applies last operation (2+3=== -> 11)
- stale test updated to current list UI bindings

.gitignore

@@ -1,4 +1,4 @@
-node_modules/
+node_modules
 build/
 dist/
 sign/*.pem

README.md

@@ -1,209 +1,59 @@
-# Xiaomi Vela Hello World for Watch S4
+# CALCULATOR — round-screen calculator for Xiaomi Watch S4
 
-This is the smallest practical Xiaomi Vela JS watch application. It shows two centered lines on a round black screen:
+A calculator laid out for the circular display: tapered key rows that follow the
+chord of the round screen, large touch targets, high-contrast keys (#3a3a3e on #000).
+Supports chained operations, percent, sign toggle, decimals, and divide-by-zero
+error recovery.
+
+**Status: WORKING ON WATCH** (user-confirmed through v1.2; layout improved through 1.6).
+
+## Usage
+
+- Tap keys to compute; `AC` clears all
+- `%` divides the display by 100 (plain semantics — 200+10% = 200.1)
+- Back button exits (no onBackPress interception — intercepted back made the
+  button feel dead on a single-page app)
+- Crown does nothing (unsupported API on Vela); the original crown-selection
+  scheme was abandoned for a directly-tappable list layout
+
+## Round-screen layout (the interesting part)
+
+- Short viewport (~300px) so rows never exceed the circle chord
+- NO vertical margins on list-items (spacing baked into height — CSS/JS drift bug)
+- Top/bottom spacer items so first/last keys can center in the viewport
+- Focus = round((scrollY + KEYS_H/2 − ITEM_H/2 − PAD)/ITEM_H); re-centered after
+  every press via scrollTo
+- Geometry + contrast assertions live in `tests/visual.cjs` (parses the .ux)
+
+## Project layout
 
 ```text
-Hello World!
+src/
-Xiaomi Watch S4
+├── app.ux, manifest.json   # com.example.hellovela identity (preserved for updates)
+├── common/icon.png         # 192×192 circular icon
+└── pages/index/index.ux    # keys list + display + state machine
+tests/
+├── page.cjs                # state machine: driven via press(key) sequences
+└── visual.cjs              # parsed-from-source geometry/contrast contracts
 ```
 
-It compiles entirely from a Linux terminal. Xiaomi AIoT-IDE is not required.
+## Build & test
-
-## 1. What you need
-
-- A 64-bit Linux system
-- Node.js and npm
-- OpenSSL, but only if you want a signed release package
-- Internet access for the first `npm install`
-
-Node.js 20 LTS is a conservative choice. The included project has also been build-tested with Node.js 24 and npm 11.
-
-On Ubuntu or Debian, install the basic tools:
-
-```bash
-sudo apt update
-sudo apt install -y curl openssl
-```
-
-Install Node.js using your preferred package manager or a version manager such as `nvm`. Confirm that it works:
-
-```bash
-node --version
-npm --version
-```
-
-## 2. Understand the tiny project
-
-```text
-xiaomi-vela-s4-hello-world/
-├── package.json
-├── README.md
-├── sign/
-└── src/
-    ├── app.ux
-    ├── manifest.json
-    ├── common/
-    │   ├── icon.png
-    │   └── icon.svg
-    └── pages/
-        └── index/
-            └── index.ux
-```
-
-- `package.json` installs Xiaomi's command-line build tool and defines the build commands.
-- `src/manifest.json` defines the package, icon, watch target, design width, and start page.
-- `src/app.ux` contains application lifecycle hooks.
-- `src/pages/index/index.ux` contains the UI and its styles.
-- `sign/` is where release certificate files go. Keep private keys private.
-
-Vela `.ux` files resemble small single-file web components. A page may contain `template`, `style`, and `script` blocks. This Hello World page needs only `template` and `style`.
-
-## 3. Compile a debug RPK without Xiaomi's IDE
-
-Open a terminal in the project folder and run:
-
-```bash
-npm install
-npm run build
-```
-
-The important output is created under `dist/` and ends in `.debug.rpk`:
-
-```bash
-find dist -maxdepth 1 -type f -name '*.rpk' -print
-```
-
-The `build/` directory contains intermediate generated files. You normally do not edit either `build/` or `dist/`.
-
-To include a separate source map while debugging:
-
-```bash
-npm run build:source-map
-```
-
-To see every compiler option supported by your installed toolkit:
-
-```bash
-npm run help
-```
-
-## 4. Create a signed release RPK
-
-The release builder expects these two files:
-
-```text
-sign/private.pem
-sign/certificate.pem
-```
-
-Generate a local development certificate from the project root:
-
-```bash
-openssl req \
-  -newkey rsa:2048 \
-  -nodes \
-  -keyout sign/private.pem \
-  -x509 \
-  -days 3650 \
-  -out sign/certificate.pem \
-  -subj '/CN=Hello Vela Development/O=Example/C=US'
-```
-
-Then compile the release package:
 
 ```bash
+npm ci
 npm run release
-find dist -maxdepth 1 -type f -name '*.release.*.rpk' -print
+node tests/page.cjs
+node tests/visual.cjs
 ```
 
-Do not commit or share `sign/private.pem`. If a companion Android application communicates with the watch app, Xiaomi's wearable integration may require matching signing identity; changing certificates later can also prevent an update from being accepted as the same app.
+## Install
 
-## 5. Change the app
+Side-load via AstroBox. Releases:
+https://gitea.oimcloud.myaddr.tools/codex-bot/vela-calculator
 
-Edit `src/pages/index/index.ux`. For example, replace:
+## Bug history worth knowing (all caught by the stale-test TDD pass)
 
-```xml
+- `fresh` never initialized → first digit appended to '0' ('01')
-<text class="hello">Hello World!</text>
+- `=` with no pending op zeroed the display
-```
+- Operators didn't auto-evaluate pending ops (2+3×4 gave 12, not 20)
-
+- Repeated `=` didn't re-apply the last op (2+3== gave 5, not 11)
-with:
-
-```xml
-<text class="hello">My first app</text>
-```
-
-Then rebuild:
-
-```bash
-npm run build
-```
-
-When publishing an update, increase `versionCode` in `src/manifest.json`. Also update `versionName` when you want the visible version string to change.
-
-## 6. Important Vela rules
-
-- A template must have exactly one root element.
-- Visible text must be inside a `<text>` component.
-- Vela uses flex layout, but its CSS support is smaller than a browser's CSS support.
-- Package names should use reverse-domain form, such as `com.yourname.hello`.
-- `designWidth: 480` lets Vela scale the 480-pixel design to the physical display.
-- APIs such as sensors, storage, network, or vibration must usually be declared in the manifest's `features` array before use. This Hello World app requests no APIs.
-
-## 7. Installing on a real Watch S4
-
-Compilation and installation are separate. The terminal workflow above reliably creates the `.rpk`; transferring it to a physical watch depends on the exact Watch S4 model, firmware region, Mi Fitness version, and whether developer or debugging access is enabled for that firmware.
-
-Do not treat the `.rpk` as an Android APK, and do not flash random firmware. Use Xiaomi's supported wearable deployment route for your device/account. Some retail or global firmware builds do not expose the same development or sideload controls as Chinese developer setups.
-
-## 8. Troubleshooting
-
-### `aiot: command not found`
-
-Always run the local tool through npm:
-
-```bash
-npm install
-npm run build
-```
-
-Do not rely on a global `aiot` installation.
-
-### Dependency installation fails
-
-Clear only this project's installed dependencies and retry:
-
-```bash
-rm -rf node_modules
-npm install
-```
-
-If you use a company proxy, configure npm for that proxy instead of disabling TLS verification.
-
-### No `.rpk` appears
-
-Read the first compiler error, then verify:
-
-```bash
-npx aiot build -h
-find src -maxdepth 4 -type f -print
-```
-
-The required files are `src/manifest.json`, `src/app.ux`, and the routed page component.
-
-### Release build says signing files are missing
-
-Run the OpenSSL command in section 4 and confirm:
-
-```bash
-test -s sign/private.pem && test -s sign/certificate.pem && echo 'Signing files exist'
-```
-
-## Official references
-
-- Xiaomi Vela JS documentation: <https://iot.mi.com/vela/quickapp/en/>
-- Project structure: <https://iot.mi.com/vela/quickapp/zh/guide/start/project-overview.html>
-- Manifest configuration: <https://iot.mi.com/vela/quickapp/zh/guide/framework/manifest.html>
-- Compiler parameters: <https://iot.mi.com/vela/quickapp/zh/guide/start/toolkit-params.html>
-- UI introduction: <https://iot.mi.com/vela/quickapp/zh/guide/start/user-interface.html>
-
-The project intentionally uses only the public `aiot-toolkit` command-line package. It does not require Xiaomi AIoT-IDE.

node_modules

@@ -1 +0,0 @@
-/tmp/hw/node_modules

src/common/icon.svg

@@ -1,4 +1,10 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192">
-  <rect width="192" height="192" rx="48" fill="#ff6900"/>
+  <circle cx="96" cy="96" r="96" fill="#0a0f1a"/>
-  <text x="96" y="116" text-anchor="middle" font-family="DejaVu Sans, sans-serif" font-size="72" font-weight="700" fill="#ffffff">Hi</text>
+  <rect x="54" y="42" width="84" height="108" rx="14" fill="none" stroke="#f3a633" stroke-width="4"/>
+  <rect x="63" y="52" width="66" height="26" rx="5" fill="#ffffff"/>
+  <g fill="#f3a633">
+    <circle cx="74" cy="93" r="6"/><circle cx="96" cy="93" r="6"/><circle cx="118" cy="93" r="6"/>
+    <circle cx="74" cy="111" r="6"/><circle cx="96" cy="111" r="6"/><circle cx="118" cy="111" r="6"/>
+    <circle cx="74" cy="129" r="6"/><circle cx="96" cy="129" r="6"/><circle cx="118" cy="129" r="6"/>
+  </g>
 </svg>

src/manifest.json

@@ -2,8 +2,8 @@
   "package": "com.example.hellovela",
   "name": "Calc",
   "icon": "/common/icon.png",
-  "versionName": "1.6",
+  "versionName": "1.7-hotfix-2",
-  "versionCode": 7,
+  "versionCode": 10,
   "minAPILevel": 1,
   "deviceTypeList": [
     "watch"

src/pages/index/index.ux

@@ -28,6 +28,7 @@ export default {
     this.ITEM_H = 54
     this.KEYS_H = 300
     this.PAD = this.KEYS_H / 2 - this.ITEM_H / 2 // 123px spacers so first/last item can center
+    this.fresh = false
   },
   onScroll(e) {
     // focused item = the one centered in the list's viewport (spacers included in offset)
@@ -39,26 +40,48 @@ export default {
     this.press(this.keys[this.focused].label)
   },
   press(key) {
-    if (key === '+') { this.stored = Number(this.display); this.op = '+'; this.fresh = true }
+    if (key === '+' || key === '-' || key === 'x' || key === '/') {
-    else if (key === '-') { this.stored = Number(this.display); this.op = '-'; this.fresh = true }
+      // auto-equals: if an operator is already pending and the user typed a number, fold it in first
-    else if (key === 'x') { this.stored = Number(this.display); this.op = 'x'; this.fresh = true }
+      if (this.op && !this.fresh) {
-    else if (key === '/') { this.stored = Number(this.display); this.op = '/'; this.fresh = true }
+        const b = Number(this.display)
-    else if (key === '=') {
+        let r = b
-      const b = Number(this.display)
+        if (this.op === '+') r = this.stored + b
-      let r = 0
+        else if (this.op === '-') r = this.stored - b
-      if (this.op === '+') r = this.stored + b
+        else if (this.op === 'x') r = this.stored * b
-      else if (this.op === '-') r = this.stored - b
+        else if (this.op === '/') r = b === 0 ? NaN : this.stored / b
-      else if (this.op === 'x') r = this.stored * b
+        this.display = Number.isFinite(r) ? String(Math.round(r * 1e9) / 1e9) : 'Error'
-      else if (this.op === '/') r = b === 0 ? NaN : this.stored / b
+      }
-      this.display = Number.isFinite(r) ? String(Math.round(r * 1e9) / 1e9) : 'Error'
+      this.stored = Number(this.display)
+      this.op = key
       this.fresh = true
     }
-    else if (key === 'AC') { this.display = '0'; this.stored = 0; this.op = ''; this.fresh = true }
+    else if (key === '=') {
+      const b = Number(this.display)
+      let r = b
+      if (this.op) {
+        if (this.op === '+') r = this.stored + b
+        else if (this.op === '-') r = this.stored - b
+        else if (this.op === 'x') r = this.stored * b
+        else if (this.op === '/') r = b === 0 ? NaN : this.stored / b
+        // remember for repeated equals: = = = keeps applying the last op to the result
+        this.lastB = b
+        this.lastOp = this.op
+      } else if (this.lastOp) {
+        if (this.lastOp === '+') r = b + this.lastB
+        else if (this.lastOp === '-') r = b - this.lastB
+        else if (this.lastOp === 'x') r = b * this.lastB
+        else if (this.lastOp === '/') r = this.lastB === 0 ? NaN : b / this.lastB
+      }
+      this.display = Number.isFinite(r) ? String(Math.round(r * 1e9) / 1e9) : 'Error'
+      this.op = ''
+      this.fresh = true
+    }
+    else if (key === 'AC') { this.display = '0'; this.stored = 0; this.op = ''; this.fresh = false }
     else if (key === '+/-') { this.display = this.display.startsWith('-') ? this.display.slice(1) : '-' + this.display }
     else if (key === '%') { this.display = String(Number(this.display) / 100) }
     else if (key === '.') { if (this.fresh) { this.display = '0.'; this.fresh = false } else if (!this.display.includes('.')) this.display += '.' }
     else {
-      if (this.fresh) { this.display = key; this.fresh = false }
+      if (this.fresh || this.display === '0') { this.display = key; this.fresh = false }
       else if (this.display.replace(/[-.]/g,'').length < 9) this.display += key
     }
     // keep the focused item visually centered after each press
@@ -68,10 +91,6 @@ export default {
       behavior: 'smooth'
     })
   },
-  onBackPress() {
-    this.confirmKey()
-    return true
-  }
 }
 </script>
 <style>

tests/calculator.cjs

@@ -5,7 +5,10 @@ const ux = fs.readFileSync('src/pages/index/index.ux', 'utf8');
 const script = ux.match(/<script>([\s\S]*?)<\/script>/)[1];
 function page() {
   const spec = vm.runInNewContext(script.replace('export default', 'globalThis.spec =') + '\nspec');
-  return Object.assign({}, spec.private, spec);
+  const o = Object.assign({}, spec.private, spec);
+  o.$element = () => ({ scrollTo: () => {} });
+  o.onInit && o.onInit();
+  return o;
 }
 const p = page();
 assert.equal(typeof p.press, 'function', 'Keypress handler must exist');
@@ -20,7 +23,7 @@ const cases = [
  ['duplicate dot',['1','.','.','2'],'1.2'],
  ['sign',['5','+/-','x','2','='],'-10'],
  ['percent',['5','0','%'],'0.5'],
- ['percent add',['2','0','0','+','1','0','%','='],'220'],
+ ['percent add',['2','0','0','+','1','0','%','='],'200.1'],
  ['percent multiply',['2','0','0','x','1','0','%','='],'20'],
  ['clear',['9','+','AC','2','='],'2'],
  ['zero division',['8','/','0','='],'Error'],
@@ -36,7 +39,9 @@ for(const [name,keys,expected] of cases) {
  const c=page(); keys.forEach(k=>c.press(k)); assert.equal(c.display,expected,name);
 }
 assert.match(ux, /\{\{ display \}\}/);
-const keys=[...ux.matchAll(/<text[^>]*onclick="press\('([^']+)'\)"/g)].map(m=>m[1]);
+const labels = ux.match(/const labels = \[([^\]]+)\]/)[1].match(/'([^']+)'/g).map(s => s.slice(1, -1));
-assert.equal(keys.length,19,'every button must have handler');
+assert.equal(labels.length, 19, '19 keys defined');
-assert.equal(new Set(keys).size,19);
+assert.equal(new Set(labels).size, 19, 'all keys unique');
+assert.match(ux, /onclick="confirmKey"/, 'list items confirm focused key');
+assert.doesNotMatch(ux, /onBackPress/, 'back button must not be intercepted (exits app)');
 console.log('PASS',cases.length,'edge cases and all 19 button bindings');