Merge pull request #22 from nirukk52/final/green-tests-to-main

Final/green tests to main

Author: nirukk52

.claude-skills/frontend-debugging_skill/SKILL.md

@@ -35,11 +35,10 @@ task founder:workflows:regen-client
 ```
 
 ### Phase 4: Svelte 5 Runes
-- Check proper rune usage
-- $state for reactive state
-- $derived for computed values
-- $effect for side effects
-- $props for component props
+- Check proper rune usage **and declaration**
+- `$state`, `$derived`, `$bindable`, `$props` that you mutate must use `let` (never `const`)
+- `$bindable` requires `{value}` with `oninput` instead of `bind:value`
+- `$effect` for side effects only (no async return)
 
 ### Phase 5: Routing
 - Verify +page.svelte structure
@@ -74,11 +73,25 @@ task frontend:build
 
 ## Common Issues
 
+### Rune Const vs Let (Critical 2025-11-12)
+- **Symptom**: Browser shows Vite overlay `[plugin:vite-plugin-svelte] Cannot assign/bind to constant` and Playwright screenshots display the 500 Internal Error page.
+- **Fix workflow**:
+  1. Search `src/lib` and `src/routes` for `const .* $state`, `const .* $bindable`, `const { .* = $props`.
+  2. Replace with `let` if the value is mutated or bound.
+  3. Restart `bun run dev` to clear cached overlay.
+  4. Re-run `grep -R "\\$state" src | grep 'const'` to confirm there are no remaining matches.
+- **Remember**: `$bindable` inputs must use `{value}` + `oninput={(e) => value = e.currentTarget.value}` (no `bind:value`).
+
 ### Rune Misuse
 - Can't use runes in `.ts` files (only `.svelte`)
 - Must be top-level declarations
 - No conditional runes
 
+### Fast-Fail Signals
+- Landing page sticks at `page.waitForURL` → backend `startRun` likely failed (check backend logs, ensure Appium/device online).
+- Timeline shows `agent.app.launch_failed` → Appium/device misconfiguration (fails in ~2s with detailed payload).
+- Backend integration test `encore test run/start.integration.test.ts` must pass before Playwright has a chance to render screenshots.
+
 ### API Type Errors
 - Regenerate client after backend changes
 - Verify import paths use `~encore/clients`

.claude-skills/frontend-development_skill/SKILL.md

@@ -606,6 +606,121 @@ console.log('User logged in:', user);
 - Cause: Client not regenerated after backend changes
 - Fix: `cd frontend && bun run gen`
 
+**5. "Cannot assign to constant" with $props() or $bindable()**
+- **Cause:** Using `const` instead of `let` in destructuring assignment with Svelte 5 runes
+- **Symptom:** `[plugin:vite-plugin-svelte] Cannot assign to constant https://svelte.dev/e/constant_assignment`
+- **Fix:** Use `let` for destructuring when you need to reassign values
+
+```typescript
+// ❌ WRONG - Cannot mutate const
+const {
+  value = $bindable(""),
+  items = $state([])
+} = $props();
+
+// ✅ CORRECT - Use let for mutable runes
+let {
+  value = $bindable(""),
+  items = $state([])
+} = $props();
+
+// For $bindable in components:
+let {
+  value = $bindable("")
+} = $props();
+
+// Then in template:
+<input
+  {value}
+  oninput={(e) => {
+    value = e.currentTarget.value; // This requires 'let'
+  }}
+/>
+```
+
+**6. "Cannot bind to constant" with bind: directives**
+- **Cause:** Trying to use `bind:value` with $bindable() (Svelte 5 two-way binding)
+- **Fix:** Use value + oninput pattern instead
+
+```svelte
+<!-- ❌ WRONG - Can't use bind: with $bindable -->
+<input bind:value />
+
+<!-- ✅ CORRECT - Manual two-way binding -->
+<input
+  {value}
+  oninput={(e) => {
+    value = e.currentTarget.value;
+    oninput?.(e); // Call optional handler
+  }}
+/>
+```
+
+**7. Missing page title in E2E tests**
+- **Cause:** No `<svelte:head>` with `<title>` in root layout
+- **Symptom:** Playwright tests fail with `expected page to have title`
+- **Fix:** Add title in root layout AFTER closing `</script>` tag
+
+```svelte
+<script lang="ts">
+  // ... your code
+</script>
+
+<svelte:head>
+  <title>ScreenGraph</title>
+</svelte:head>
+
+<!-- rest of layout -->
+```
+
+---
+
+## Svelte 5 Runes Critical Rules
+
+### $props() Destructuring
+
+**ALWAYS use `let` not `const`:**
+```typescript
+// ❌ BAD - causes "cannot assign to constant"
+const { value = $bindable("") } = $props();
+
+// ✅ GOOD  
+let { value = $bindable("") } = $props();
+```
+
+### $bindable() Two-Way Binding
+
+**Cannot use `bind:` directive:**
+```svelte
+<!-- ❌ BAD -->
+<script lang="ts">
+let { value = $bindable("") } = $props();
+</script>
+<input bind:value />
+
+<!-- ✅ GOOD -->
+<script lang="ts">
+let { value = $bindable("") } = $props();
+</script>
+<input
+  {value}
+  oninput={(e) => value = e.currentTarget.value}
+/>
+```
+
+### $state() Reactive Variables
+
+**Use `let` for mutable state:**
+```typescript
+// ❌ BAD
+const count = $state(0);
+count++; // Error: cannot assign
+
+// ✅ GOOD
+let count = $state(0);
+count++; // Works!
+```
+
 ---
 
 ## Quality Checklist

.claude-skills/webapp-testing_skill/SKILL.md

@@ -32,35 +32,50 @@ bun run test:e2e:ui
 - **Helpers**: `frontend/tests/e2e/helpers.ts` (reusable utilities)
 - **Default Timeout**: 30 seconds (Playwright default, no override)
 
-### Timeout Policy (Standardized 2025-11-09)
-All Playwright tests must complete within **30 seconds total**. Individual waits must fit within this budget:
+### Timeout Policy (Standardized 2025-11-12)
+All Playwright tests must complete within **60 seconds total**. The primary integration test (`should discover and display screenshots`) sets `test.setTimeout(60000)` to give the agent time to explore while still keeping runs deterministic. Individual waits must fit within this budget:
 
 | Operation | Timeout | Notes |
 |-----------|---------|-------|
-| Test Total | 30s | Playwright default, no `test.setTimeout()` override |
+| Test Total | 60s | `test.setTimeout(60000)` for screenshot discovery test |
 | Page Navigation | 30s | Initial page load via `page.goto()` |
 | Element Visibility | 10s | Headings, buttons, basic UI elements |
 | Agent Events | 15s | Screenshot capture, graph events (SSE) |
 | Image Rendering | 10s | Screenshots in gallery, artifacts |
 
 **Example Breakdown:**
 ```typescript
-test("example", async ({ page }) => {
-  // No test.setTimeout() - use 30s default
-  await page.goto("/");                              // ~2s
-  await page.getByRole("button").click();            // ~1s
-  await page.waitForURL(/\/run\/.+/);                // ~3s
-  await expect(heading).toBeVisible({ timeout: 10000 }); // max 10s
-  await page.waitForSelector('[data-event="..."]', { timeout: 15000 }); // max 15s
-  // Total: ~31s max (fits in 30s with fast agent)
+test.describe("/run page smoke tests", () => {
+  test.setTimeout(60_000); // keep total budget bounded
+
+  test("should discover and display screenshots", async ({ page }) => {
+    await page.goto("/");
+    await page.getByRole("button", { name: /detect.*drift/i }).click();
+    await page.waitForURL(/\/run\/[a-f0-9-]+/i, { waitUntil: "domcontentloaded", timeout: 30_000 });
+    await expect(
+      page.locator("[data-testid='run-events'] [data-event-kind='agent.event.screenshot_captured']").first(),
+    ).toBeVisible({ timeout: 15_000 });
+    await expect(page.locator("[data-testid='discovered-screens'] img").first()).toBeVisible({ timeout: 10_000 });
+  });
 });
 ```
 
+### Svelte 5 Runes Pitfalls (Critical 2025-11-12)
+- **`const` vs `let`**: Any rune created with `$state`, `$derived`, `$bindable`, or `$props` that you mutate later MUST use `let`. Using `const` triggers `[plugin:vite-plugin-svelte] Cannot assign/bind to constant` and the entire app shows a 500 overlay, causing Playwright to fail instantly.
+  - ✅ `let { value = $bindable("") } = $props();`
+  - ✅ `let showSlackPreview = $state(false);`
+  - ❌ `const ... = $state(...)`
+- **`bind:value` + `$bindable`**: You cannot combine `bind:value` with `$bindable`. Use `{value}` + `oninput={(e) => value = e.currentTarget.value}`.
+- **Symptoms in tests**: Playwright screenshot shows `500 Internal Error` overlay with the exact file/line from Vite. If you see this, fix the rune declaration first before debugging Playwright.
+- **Skill updates**: See `frontend-development_skill` and `frontend-debugging_skill` for the full playbook.
+
 ### Current Tests
 1. **Landing Page Load** - Verifies frontend health (no agent required)
 2. **Run Page Navigation** - Clicks "Detect My First Drift" → verifies Run Timeline heading (no agent required)
 3. **Screenshot Discovery** - Full integration test: start run → wait for screenshots → verify images visible (requires agent + Appium)
 
+> ℹ️ Fast-fail guard: the test polls the `run_events` timeline for `agent.app.launch_failed`. If Appium/device is missing it fails in ~2s with a detailed error (package, attempt, duration, hints). Use this signal before chasing 30s timeouts.
+
 ### Pre-Push Hook Integration
 E2E tests run automatically before every push:
 ```bash
@@ -112,6 +127,14 @@ test("my new test", async ({ page }) => {
    ```
 4. Keep a clean workspace: run Playwright scripts from `/tmp` or a disposable directory—never add dependencies to the repo.
 
+5. **Diagnosing stuck runs**  
+   ```bash
+   DEBUG=pw:api HEADLESS=true bun run playwright test --config=playwright.config.temp.ts --max-failures=1
+   ```
+   - Watch for `page.waitForURL` timeouts → check backend logs for `startRun` failures and confirm Appium/device is online.
+   - If screenshot gallery waits time out, ensure the backend test `encore test run/start.integration.test.ts` passes (agent must be healthy).
+   - Use the generated error-context.md to confirm whether the page shows the 500 overlay (rune issues) or a healthy landing page (run start failing).
+
 ---
 
 ## 2. Playwright Workflow (Recommended)