feat(app): Mobile Touch Optimization

.gitignore

@@ -28,3 +28,4 @@ opencode-dev
 logs/
 *.bun-build
 tsconfig.tsbuildinfo
+**/.superpowers

AGENTS.md

@@ -1,128 +1,196 @@
-- To regenerate the JavaScript SDK, run `./packages/sdk/js/script/build.ts`.
-- ALWAYS USE PARALLEL TOOLS WHEN APPLICABLE.
-- The default branch in this repo is `dev`.
-- Local `main` ref may not exist; use `dev` or `origin/dev` for diffs.
-- Prefer automation: execute requested actions without confirmation unless blocked by missing info or safety/irreversibility.
+# OpenCode Agent Guidelines
 
-## Style Guide
+## Project Overview
 
-### General Principles
-
-- Keep things in one function unless composable or reusable
-- Avoid `try`/`catch` where possible
-- Avoid using the `any` type
-- Prefer single word variable names where possible
-- Use Bun APIs when possible, like `Bun.file()`
-- Rely on type inference when possible; avoid explicit type annotations or interfaces unless necessary for exports or clarity
-- Prefer functional array methods (flatMap, filter, map) over for loops; use type guards on filter to maintain type inference downstream
+Monorepo using Bun workspaces. Main packages:
 
-### Naming
+- `packages/opencode` — CLI backend (Node.js/Bun)
+- `packages/app` — SolidJS web app
+- `packages/ui` — Shared UI components
+- `packages/sdk/js` — JavaScript SDK
 
-Prefer single word names for variables and functions. Only use multiple words if necessary.
+## Commands
 
-### Naming Enforcement (Read This)
+### Build & Type Check
 
-THIS RULE IS MANDATORY FOR AGENT WRITTEN CODE.
+```bash
+bun turbo build                           # Build all packages
+bun run --cwd packages/opencode build     # Build opencode only
+bun typecheck                             # Type check all packages
+bun run --cwd packages/opencode typecheck # Type check opencode (never use tsc directly)
+bun run --cwd packages/app typecheck      # Type check app
+```
 
-- Use single word names by default for new locals, params, and helper functions.
-- Multi-word names are allowed only when a single word would be unclear or ambiguous.
-- Do not introduce new camelCase compounds when a short single-word alternative is clear.
-- Before finishing edits, review touched lines and shorten newly introduced identifiers where possible.
-- Good short names to prefer: `pid`, `cfg`, `err`, `opts`, `dir`, `root`, `child`, `state`, `timeout`.
-- Examples to avoid unless truly required: `inputPID`, `existingClient`, `connectTimeout`, `workerPath`.
+### Testing
 
-```ts
-// Good
-const foo = 1
-function journal(dir: string) {}
+```bash
+# OpenCode package tests
+bun run --cwd packages/opencode test                              # Run all tests
+bun test --cwd packages/opencode test/agent/agent.test.ts         # Run single test file
+bun test --cwd packages/opencode -t "timeout"                     # Run tests matching pattern
+bun test --cwd packages/opencode -t "should resolve" test/util/*  # Run specific test in file
 
-// Bad
-const fooBar = 1
-function prepareJournal(dir: string) {}
+# App tests
+bun run --cwd packages/app test:unit      # Unit tests
+bun run --cwd packages/app test:unit:watch # Unit tests (watch mode)
+bun run --cwd packages/app test:e2e       # E2E tests (Playwright)
+bun run --cwd packages/app test:e2e:ui    # E2E tests with UI
 ```
 
-Reduce total variable count by inlining when a value is only used once.
+**CRITICAL**: Tests cannot run from repo root. Always run from package directories.
 
-```ts
-// Good
-const journal = await Bun.file(path.join(dir, "journal.json")).json()
+### Formatting & Database
 
-// Bad
-const journalPath = path.join(dir, "journal.json")
-const journal = await Bun.file(journalPath).json()
+```bash
+bunx prettier --write <file>              # Format file (semi: false, printWidth: 120)
+bun run db generate --name <slug>         # Generate migration (from packages/opencode)
+bun ./packages/sdk/js/script/build.ts     # SDK generation
 ```
 
-### Destructuring
+## Local Development
 
-Avoid unnecessary destructuring. Use dot notation to preserve context.
+`opencode dev web` proxies `https://app.opencode.ai` — local UI changes won't appear. For local UI changes, run servers separately:
 
-```ts
-// Good
-obj.a
-obj.b
+```bash
+# Terminal 1 - Backend (from packages/opencode)
+bun run --conditions=browser ./src/index.ts serve --port 4096
 
-// Bad
-const { a, b } = obj
+# Terminal 2 - App (from packages/app)
+bun dev -- --port 4444
+
+# Open http://localhost:4444 (targets backend at localhost:4096)
 ```
 
-### Variables
+- **NEVER** restart the app or server process during debugging
+
+## Code Style
+
+### General Principles
+
+- Keep logic in one function unless composable/reusable
+- Avoid `try`/`catch` — prefer Effect's error handling
+- Avoid `any` type
+- Use Bun APIs when possible (e.g., `Bun.file()`)
+- Rely on type inference; explicit types only for exports
+- Prefer functional array methods (flatMap, filter, map) over for loops
 
-Prefer `const` over `let`. Use ternaries or early returns instead of reassignment.
+### Naming (MANDATORY)
+
+Single word by default. Multi-word only when clarity requires it.
 
 ```ts
+// Good: pid, cfg, err, opts, dir, root, child, state, timeout
+// Bad: inputPID, existingClient, connectTimeout, workerPath
+
 // Good
-const foo = condition ? 1 : 2
+const foo = 1
+function journal(dir: string) {}
+const data = await Bun.file(path.join(dir, "file.json")).json()
 
 // Bad
-let foo
-if (condition) foo = 1
-else foo = 2
+const fooBar = 1
+function prepareJournal(dir: string) {}
+const filePath = path.join(dir, "file.json")
 ```
 
-### Control Flow
-
-Avoid `else` statements. Prefer early returns.
+### Destructuring & Control Flow
 
 ```ts
-// Good
+// Prefer dot notation
+obj.a // Good
+const { a } = obj // Bad
+
+// Prefer const with ternary
+const foo = condition ? 1 : 2 // Good
+
+// Prefer early returns (no else after return)
 function foo() {
   if (condition) return 1
   return 2
 }
+```
 
-// Bad
-function foo() {
-  if (condition) return 1
-  else return 2
-}
+### Imports
+
+Group: external packages → internal (`@/`) → relative:
+
+```ts
+import { Effect, Schema } from "effect"
+import { Database } from "@/storage/db"
+import { AccountTable } from "./account.sql"
 ```
 
 ### Schema Definitions (Drizzle)
 
-Use snake_case for field names so column names don't need to be redefined as strings.
+Use snake_case for field names:
 
 ```ts
 // Good
 const table = sqliteTable("session", {
   id: text().primaryKey(),
   project_id: text().notNull(),
-  created_at: integer().notNull(),
 })
+```
 
-// Bad
-const table = sqliteTable("session", {
-  id: text("id").primaryKey(),
-  projectID: text("project_id").notNull(),
-  createdAt: integer("created_at").notNull(),
-})
+## Effect Library (Backend)
+
+- Use `Effect.gen(function* () { ... })` for composition
+- Use `Effect.fn("Domain.method")` for named effects
+- Use `Schema.Class` for multi-field data, `Schema.brand` for single-value types
+- Use `Schema.TaggedErrorClass` for typed errors
+- Prefer Effect services: `FileSystem`, `ChildProcessSpawner`, `HttpClient`, `Path`, `Clock`
+
+## SolidJS (App/UI)
+
+- Always prefer `createStore` over multiple `createSignal` calls
+- Use `splitProps` to separate local props from rest props
+- Use `createMemo` for derived state
+- Use `createSimpleContext` from `@opencode-ai/ui/context` for context creation
+
+```tsx
+export function Link(props: LinkProps) {
+  const platform = usePlatform()
+  const [local, rest] = splitProps(props, ["href", "children", "class"])
+
+  return (
+    <a href={local.href} class={`text-text-strong underline ${local.class ?? ""}`} {...rest}>
+      {local.children}
+    </a>
+  )
+}
 ```
 
+## Browser Automation (App)
+
+Use `agent-browser` for web automation. Core workflow:
+
+1. `agent-browser open <url>` - Navigate to page
+2. `agent-browser snapshot -i` - Get interactive elements with refs (@e1, @e2)
+3. `agent-browser click @e1` / `fill @e2 "text"` - Interact using refs
+4. Re-snapshot after page changes
+
 ## Testing
 
-- Avoid mocks as much as possible
-- Test actual implementation, do not duplicate logic into tests
-- Tests cannot run from repo root (guard: `do-not-run-tests-from-root`); run from package dirs like `packages/opencode`.
+- Avoid mocks; test actual implementation
+- Use `tmpdir` fixture for temporary directories:
+
+```ts
+import { describe, expect, test } from "bun:test"
+import { tmpdir } from "../fixture/fixture"
+
+test("example", async () => {
+  await using tmp = await tmpdir({ git: true })
+})
+```
+
+## Git
+
+- Default branch is `dev` (not `main`)
+- Local `main` may not exist; use `dev` or `origin/dev` for diffs
 
-## Type Checking
+## Notes
 
-- Always run `bun typecheck` from package directories (e.g., `packages/opencode`), never `tsc` directly.
+- ALWAYS USE PARALLEL TOOLS WHEN APPLICABLE
+- Package manager: Bun 1.3.11
+- TypeScript: 5.8.2
+- Prettier: `semi: false`, `printWidth: 120`