ugly-app 0.1.804 → 0.1.805

package/dist/cli/version.d.ts

@@ -1,2 +1,2 @@
-export declare const CLI_VERSION = "0.1.804";
+export declare const CLI_VERSION = "0.1.805";
 //# sourceMappingURL=version.d.ts.map

package/dist/cli/version.js

@@ -1,3 +1,3 @@
 // Auto-generated by prebuild — do not edit manually
-export const CLI_VERSION = "0.1.804";
+export const CLI_VERSION = "0.1.805";
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugly-app",
-  "version": "0.1.804",
+  "version": "0.1.805",
   "type": "module",
   "comment:files": "Allowlist what ships to npm. dist = runtime; src = sourcemap targets (dist/*.js.map reference ../../src/); templates = CLI scaffold. Everything else at repo root (.pgdata local Postgres, coverage, assets/icons sources, test/, test-results/) is excluded by omission. The !negations strip the scaffold's installed deps + cruft (templates/node_modules is 200MB+ and must never ship). package.json/README/LICENSE ship automatically.",
   "files": [
@@ -80,7 +80,8 @@
     "release": "npm version patch --force && pnpm run build && npm publish && git push --follow-tags",
     "release:quick": "SKIP_README=1 pnpm run release",
     "test:e2e-pages": "playwright test --config playwright.e2e-pages.config.ts",
-    "test:full": "pnpm run test:parity && pnpm run test:e2e-pages"
+    "test:full": "pnpm run test:parity && pnpm run test:e2e-pages",
+    "test:template": "node scripts/test-template.mjs"
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.700.0",

package/src/cli/version.ts

@@ -1,2 +1,2 @@
 // Auto-generated by prebuild — do not edit manually
-export const CLI_VERSION = "0.1.804";
+export const CLI_VERSION = "0.1.805";

package/templates/CLAUDE.md

@@ -123,6 +123,20 @@ Every endpoint is accessible via both WebSocket (`socket.request(name, input)`)
   versions which include accessibility attributes and element map support
 - **Always** set `aria-label` on icon-only buttons and non-text interactive elements
 
+## Verify UI changes by actually running them
+
+A clean `tsc` and passing unit tests do NOT prove a page works — the #1 failure is
+an app that compiles but crashes or does nothing when you open it. For any UI or
+interactive work (a game, canvas, animation, form flow), run the Playwright e2e:
+
+- `npm run test:e2e` (or `npx playwright test`) — runs `tests/e2e/`. The shipped
+  `smoke.spec.ts` loads the home route and FAILS on any console/page error, so a
+  runtime crash is caught immediately.
+- For interactive pages, adapt `tests/e2e/example-interactive.spec.ts` (a skipped
+  template): it loads your page, drives real keyboard/pointer input for several
+  frames, and fails on any runtime error — the only way to catch gameplay/render
+  bugs a unit test on your engine logic will miss.
+
 ## UX inspection (`window.__uglyInspect()`)
 
 Every page exposes a runtime inspection API installed by `bootstrapApp` at boot. It reports objective UX defects: layout shift (CLS), animation jank, overlapping interactive controls, safe-area violations, mobile keyboard coverage, popup mount cost, SPA route transitions. Observers run continuously from page load and keep a rolling 500-entry ring buffer per signal.
@@ -140,8 +154,8 @@ Every page exposes a runtime inspection API installed by `bootstrapApp` at boot.
 - The expensive scans (overlap, safe-area) only run when `__uglyInspect()` is called — observers themselves are essentially free
 
 ## Feedback system
-Feedback button is always at `[data-id="feedback-button"]` (bottom-right).
-User feedback history: `GET /my_feedback` (requires auth cookie).
+User feedback is collected by the Ugly Studio host (not by your app — do not add a
+feedback UI). User feedback history: `GET /my_feedback` (requires auth cookie).
 
 ## Handling "needs images" feedback
 When user feedback mentions missing or needed images:

package/templates/_features/tests/pages/UIComponentsPage.tsx

@@ -957,10 +957,10 @@ function AdvancedTab(): React.ReactElement {
         <Section title="Feedback" description="Feedback is a Ugly Studio–only feature">
           <span style={{ opacity: 0.6, display: 'block', marginBottom: 12 }}>
             <Text size="sm">
-              There is no in-app feedback button. When the app runs inside Ugly Studio,
-              the framework registers a feedback handler over the UglyNative bridge and
-              Studio provides the feedback UI (capturing a screenshot + the page's
-              structured data), which is posted back to this app&rsquo;s own server.
+              Your app renders no feedback UI of its own. When the app runs inside Ugly
+              Studio, the framework registers a feedback handler over the UglyNative
+              bridge and Studio provides the feedback UI (capturing a screenshot + the
+              page&rsquo;s structured data), which is posted back to this app&rsquo;s own server.
             </Text>
           </span>
         </Section>

package/templates/tests/e2e/example-interactive.spec.ts

@@ -0,0 +1,45 @@
+import { expect, test } from '@playwright/test';
+
+/**
+ * EXAMPLE (skipped) — how to test an interactive / canvas page (a game, a drawing
+ * tool, anything with a render loop + input). Delete this file or unskip + adapt it
+ * to YOUR page. A unit test on your engine logic is not enough: it won't catch the
+ * "builds fine but crashes / does nothing when you actually open and use it" bug.
+ * This pattern loads the real page, drives real input, and fails on any runtime error.
+ *
+ * Change `ROUTE`, the canvas/root selector, and the interactions to match your app.
+ */
+test.describe('interactive page (example — unskip + adapt)', () => {
+  const ROUTE = '/'; // e.g. '/' if your game IS the home page, or '/game'
+
+  test.skip('renders a canvas, takes input, and never throws', async ({ page }) => {
+    // 1. Fail on ANY uncaught error or console.error during the whole test.
+    const errors: string[] = [];
+    page.on('pageerror', (e) => errors.push(`pageerror: ${e.message}`));
+    page.on('console', (m) => { if (m.type() === 'error') errors.push(`console.error: ${m.text()}`); });
+
+    // 2. Load the page and confirm the canvas actually mounted.
+    await page.goto(ROUTE);
+    const canvas = page.locator('canvas').first();
+    await expect(canvas).toBeVisible();
+
+    // 3. Drive real input — keyboard, pointer/mouse, clicks. For a game, start it and
+    //    play a few frames so the render loop + collision code actually execute.
+    await canvas.click(); // focus / start
+    await page.keyboard.press('Space'); // e.g. launch/serve
+    for (let i = 0; i < 8; i++) {
+      await page.keyboard.down('ArrowRight');
+      await page.waitForTimeout(60); // let requestAnimationFrame tick
+      await page.keyboard.up('ArrowRight');
+    }
+    // Pointer control (paddle-follows-mouse style):
+    const box = await canvas.boundingBox();
+    if (box) await page.mouse.move(box.x + box.width * 0.7, box.y + box.height * 0.9);
+
+    // 4. Assert something OBSERVABLE changed (score/lives/UI text), and no error fired.
+    //    Replace with a real signal from your UI, e.g.:
+    //    await expect(page.getByTestId('score')).not.toHaveText('0');
+    await page.waitForTimeout(200);
+    expect(errors, `runtime errors while playing:\n${errors.join('\n')}`).toEqual([]);
+  });
+});

package/templates/tests/e2e/smoke.spec.ts

@@ -1,7 +1,25 @@
 import { expect, test } from '@playwright/test';
 
-test('feedback button is present on the home page', async ({ page }) => {
+// App-agnostic smoke test. Asserts the app boots and the home route renders WITHOUT
+// asserting any specific content — apps are meant to replace the home page with their
+// own UI, so this test must never pin scaffold-specific elements (a test that does
+// would punish you for building your actual app). It also fails on any uncaught error
+// thrown during load, which catches the most common "looks built but crashes when you
+// open it" bug. Use this as the pattern for your own page tests: navigate, assert your
+// UI rendered, and assert no console/page errors.
+test('home page boots and renders without errors', async ({ page }) => {
+  const errors: string[] = [];
+  page.on('pageerror', (err) => errors.push(`pageerror: ${err.message}`));
+  page.on('console', (msg) => {
+    if (msg.type() === 'error') errors.push(`console.error: ${msg.text()}`);
+  });
+
   await page.goto('/');
-  const feedbackBtn = page.locator('[data-id="feedback-button"]');
-  await expect(feedbackBtn).toBeVisible();
+
+  // The app mounts into #root (see client/index.html). Assert it rendered something.
+  const root = page.locator('#root');
+  await expect(root).toBeVisible();
+  await expect(root).not.toBeEmpty();
+
+  expect(errors, `App logged errors on load:\n${errors.join('\n')}`).toEqual([]);
 });