@jonsoc/app 1.1.34

package/AGENTS.md

@@ -0,0 +1,30 @@
+## Debugging
+
+- NEVER try to restart the app, or the server process, EVER.
+
+## Local Dev
+
+- `jonsoc dev web` proxies `https://app.jonsoc.com`, so local UI/CSS changes will not show there.
+- For local UI changes, run the backend and app dev servers separately.
+- Backend (from `packages/jonsoc`): `bun run --conditions=browser ./src/index.ts serve --port 4096`
+- App (from `packages/app`): `bun dev -- --port 4444`
+- Open `http://localhost:4444` to verify UI changes (it targets the backend at `http://localhost:4096`).
+
+## SolidJS
+
+- Always prefer `createStore` over multiple `createSignal` calls
+
+## Tool Calling
+
+- ALWAYS USE PARALLEL TOOLS WHEN APPLICABLE.
+
+## Browser Automation
+
+Use `agent-browser` for web automation. Run `agent-browser --help` for all commands.
+
+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

package/README.md

@@ -0,0 +1,51 @@
+## Usage
+
+Dependencies for these templates are managed with [pnpm](https://pnpm.io) using `pnpm up -Lri`.
+
+This is the reason you see a `pnpm-lock.yaml`. That said, any package manager will work. This file can safely be removed once you clone a template.
+
+```bash
+$ npm install # or pnpm install or yarn install
+```
+
+### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm run dev` or `npm start`
+
+Runs the app in the development mode.<br>
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br>
+
+### `npm run build`
+
+Builds the app for production to the `dist` folder.<br>
+It correctly bundles Solid in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br>
+Your app is ready to be deployed!
+
+## E2E Testing
+
+Playwright starts the Vite dev server automatically via `webServer`, and UI tests need an jonsoc backend (defaults to `localhost:4096`).
+Use the local runner to create a temp sandbox, seed data, and run the tests.
+
+```bash
+bunx playwright install
+bun run test:e2e:local
+bun run test:e2e:local -- --grep "settings"
+```
+
+Environment options:
+
+- `PLAYWRIGHT_SERVER_HOST` / `PLAYWRIGHT_SERVER_PORT` (backend address, default: `localhost:4096`)
+- `PLAYWRIGHT_PORT` (Vite dev server port, default: `3000`)
+- `PLAYWRIGHT_BASE_URL` (override base URL, default: `http://localhost:<PLAYWRIGHT_PORT>`)
+
+## Deployment
+
+You can deploy the `dist` folder to any static host provider (netlify, surge, now, etc.)

package/bunfig.toml

@@ -0,0 +1,2 @@
+[test]
+preload = ["./happydom.ts"]

package/e2e/context.spec.ts

@@ -0,0 +1,45 @@
+import { test, expect } from "./fixtures"
+import { promptSelector } from "./utils"
+
+test("context panel can be opened from the prompt", async ({ page, sdk, gotoSession }) => {
+  const title = `e2e smoke context ${Date.now()}`
+  const created = await sdk.session.create({ title }).then((r) => r.data)
+
+  if (!created?.id) throw new Error("Session create did not return an id")
+  const sessionID = created.id
+
+  try {
+    await sdk.session.promptAsync({
+      sessionID,
+      noReply: true,
+      parts: [
+        {
+          type: "text",
+          text: "seed context",
+        },
+      ],
+    })
+
+    await expect
+      .poll(async () => {
+        const messages = await sdk.session.messages({ sessionID, limit: 1 }).then((r) => r.data ?? [])
+        return messages.length
+      })
+      .toBeGreaterThan(0)
+
+    await gotoSession(sessionID)
+
+    const contextButton = page
+      .locator('[data-component="button"]')
+      .filter({ has: page.locator('[data-component="progress-circle"]').first() })
+      .first()
+
+    await expect(contextButton).toBeVisible()
+    await contextButton.click()
+
+    const tabs = page.locator('[data-component="tabs"][data-variant="normal"]')
+    await expect(tabs.getByRole("tab", { name: "Context" })).toBeVisible()
+  } finally {
+    await sdk.session.delete({ sessionID }).catch(() => undefined)
+  }
+})

package/e2e/file-open.spec.ts

@@ -0,0 +1,23 @@
+import { test, expect } from "./fixtures"
+import { modKey } from "./utils"
+
+test("can open a file tab from the search palette", async ({ page, gotoSession }) => {
+  await gotoSession()
+
+  await page.keyboard.press(`${modKey}+P`)
+
+  const dialog = page.getByRole("dialog")
+  await expect(dialog).toBeVisible()
+
+  const input = dialog.getByRole("textbox").first()
+  await input.fill("package.json")
+
+  const fileItem = dialog.locator('[data-slot="list-item"][data-key^="file:"]').first()
+  await expect(fileItem).toBeVisible()
+  await fileItem.click()
+
+  await expect(dialog).toHaveCount(0)
+
+  const tabs = page.locator('[data-component="tabs"][data-variant="normal"]')
+  await expect(tabs.locator('[data-slot="tabs-trigger"]').first()).toBeVisible()
+})

package/e2e/file-viewer.spec.ts

@@ -0,0 +1,35 @@
+import { test, expect } from "./fixtures"
+import { modKey } from "./utils"
+
+test("smoke file viewer renders real file content", async ({ page, gotoSession }) => {
+  await gotoSession()
+
+  const sep = process.platform === "win32" ? "\\" : "/"
+  const file = ["packages", "app", "package.json"].join(sep)
+
+  await page.keyboard.press(`${modKey}+P`)
+
+  const dialog = page.getByRole("dialog")
+  await expect(dialog).toBeVisible()
+
+  const input = dialog.getByRole("textbox").first()
+  await input.fill(file)
+
+  const fileItem = dialog
+    .locator(
+      '[data-slot="list-item"][data-key^="file:"][data-key*="packages"][data-key*="app"][data-key$="package.json"]',
+    )
+    .first()
+  await expect(fileItem).toBeVisible()
+  await fileItem.click()
+
+  await expect(dialog).toHaveCount(0)
+
+  const tab = page.getByRole("tab", { name: "package.json" })
+  await expect(tab).toBeVisible()
+  await tab.click()
+
+  const code = page.locator('[data-component="code"]').first()
+  await expect(code).toBeVisible()
+  await expect(code.getByText("@jonsoc/app")).toBeVisible()
+})

package/e2e/fixtures.ts

@@ -0,0 +1,40 @@
+import { test as base, expect } from "@playwright/test"
+import { createSdk, dirSlug, getWorktree, promptSelector, sessionPath } from "./utils"
+
+type TestFixtures = {
+  sdk: ReturnType<typeof createSdk>
+  gotoSession: (sessionID?: string) => Promise<void>
+}
+
+type WorkerFixtures = {
+  directory: string
+  slug: string
+}
+
+export const test = base.extend<TestFixtures, WorkerFixtures>({
+  directory: [
+    async ({}, use) => {
+      const directory = await getWorktree()
+      await use(directory)
+    },
+    { scope: "worker" },
+  ],
+  slug: [
+    async ({ directory }, use) => {
+      await use(dirSlug(directory))
+    },
+    { scope: "worker" },
+  ],
+  sdk: async ({ directory }, use) => {
+    await use(createSdk(directory))
+  },
+  gotoSession: async ({ page, directory }, use) => {
+    const gotoSession = async (sessionID?: string) => {
+      await page.goto(sessionPath(directory, sessionID))
+      await expect(page.locator(promptSelector)).toBeVisible()
+    }
+    await use(gotoSession)
+  },
+})
+
+export { expect }

package/e2e/home.spec.ts

@@ -0,0 +1,21 @@
+import { test, expect } from "./fixtures"
+import { serverName } from "./utils"
+
+test("home renders and shows core entrypoints", async ({ page }) => {
+  await page.goto("/")
+
+  await expect(page.getByRole("button", { name: "Open project" }).first()).toBeVisible()
+  await expect(page.getByRole("button", { name: serverName })).toBeVisible()
+})
+
+test("server picker dialog opens from home", async ({ page }) => {
+  await page.goto("/")
+
+  const trigger = page.getByRole("button", { name: serverName })
+  await expect(trigger).toBeVisible()
+  await trigger.click()
+
+  const dialog = page.getByRole("dialog")
+  await expect(dialog).toBeVisible()
+  await expect(dialog.getByRole("textbox").first()).toBeVisible()
+})

package/e2e/model-picker.spec.ts

@@ -0,0 +1,43 @@
+import { test, expect } from "./fixtures"
+import { promptSelector } from "./utils"
+
+test("smoke model selection updates prompt footer", async ({ page, gotoSession }) => {
+  await gotoSession()
+
+  await page.locator(promptSelector).click()
+  await page.keyboard.type("/model")
+
+  const command = page.locator('[data-slash-id="model.choose"]')
+  await expect(command).toBeVisible()
+  await command.hover()
+
+  await page.keyboard.press("Enter")
+
+  const dialog = page.getByRole("dialog")
+  await expect(dialog).toBeVisible()
+
+  const input = dialog.getByRole("textbox").first()
+
+  const selected = dialog.locator('[data-slot="list-item"][data-selected="true"]').first()
+  await expect(selected).toBeVisible()
+
+  const other = dialog.locator('[data-slot="list-item"]:not([data-selected="true"])').first()
+  const target = (await other.count()) > 0 ? other : selected
+
+  const key = await target.getAttribute("data-key")
+  if (!key) throw new Error("Failed to resolve model key from list item")
+
+  const name = (await target.locator("span").first().innerText()).trim()
+  const model = key.split(":").slice(1).join(":")
+
+  await input.fill(model)
+
+  const item = dialog.locator(`[data-slot="list-item"][data-key="${key}"]`)
+  await expect(item).toBeVisible()
+  await item.click()
+
+  await expect(dialog).toHaveCount(0)
+
+  const form = page.locator(promptSelector).locator("xpath=ancestor::form[1]")
+  await expect(form.locator('[data-component="button"]').filter({ hasText: name }).first()).toBeVisible()
+})

package/e2e/navigation.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from "./fixtures"
+import { dirPath, promptSelector } from "./utils"
+
+test("project route redirects to /session", async ({ page, directory, slug }) => {
+  await page.goto(dirPath(directory))
+
+  await expect(page).toHaveURL(new RegExp(`/${slug}/session`))
+  await expect(page.locator(promptSelector)).toBeVisible()
+})

package/e2e/palette.spec.ts

@@ -0,0 +1,15 @@
+import { test, expect } from "./fixtures"
+import { modKey } from "./utils"
+
+test("search palette opens and closes", async ({ page, gotoSession }) => {
+  await gotoSession()
+
+  await page.keyboard.press(`${modKey}+P`)
+
+  const dialog = page.getByRole("dialog")
+  await expect(dialog).toBeVisible()
+  await expect(dialog.getByRole("textbox").first()).toBeVisible()
+
+  await page.keyboard.press("Escape")
+  await expect(dialog).toHaveCount(0)
+})

package/e2e/prompt-mention.spec.ts

@@ -0,0 +1,26 @@
+import { test, expect } from "./fixtures"
+import { promptSelector } from "./utils"
+
+test("smoke @mention inserts file pill token", async ({ page, gotoSession }) => {
+  await gotoSession()
+
+  await page.locator(promptSelector).click()
+  const sep = process.platform === "win32" ? "\\" : "/"
+  const file = ["packages", "app", "package.json"].join(sep)
+  const filePattern = /packages[\\/]+app[\\/]+\s*package\.json/
+
+  await page.keyboard.type(`@${file}`)
+
+  const suggestion = page.getByRole("button", { name: filePattern }).first()
+  await expect(suggestion).toBeVisible()
+  await suggestion.hover()
+
+  await page.keyboard.press("Tab")
+
+  const pill = page.locator(`${promptSelector} [data-type="file"]`).first()
+  await expect(pill).toBeVisible()
+  await expect(pill).toHaveAttribute("data-path", filePattern)
+
+  await page.keyboard.type(" ok")
+  await expect(page.locator(promptSelector)).toContainText("ok")
+})

package/e2e/prompt-slash-open.spec.ts

@@ -0,0 +1,22 @@
+import { test, expect } from "./fixtures"
+import { promptSelector } from "./utils"
+
+test("smoke /open opens file picker dialog", async ({ page, gotoSession }) => {
+  await gotoSession()
+
+  await page.locator(promptSelector).click()
+  await page.keyboard.type("/open")
+
+  const command = page.locator('[data-slash-id="file.open"]')
+  await expect(command).toBeVisible()
+  await command.hover()
+
+  await page.keyboard.press("Enter")
+
+  const dialog = page.getByRole("dialog")
+  await expect(dialog).toBeVisible()
+  await expect(dialog.getByRole("textbox").first()).toBeVisible()
+
+  await page.keyboard.press("Escape")
+  await expect(dialog).toHaveCount(0)
+})

package/e2e/prompt.spec.ts

@@ -0,0 +1,62 @@
+import { test, expect } from "./fixtures"
+import { promptSelector } from "./utils"
+
+function sessionIDFromUrl(url: string) {
+  const match = /\/session\/([^/?#]+)/.exec(url)
+  return match?.[1]
+}
+
+test("can send a prompt and receive a reply", async ({ page, sdk, gotoSession }) => {
+  test.setTimeout(120_000)
+
+  const pageErrors: string[] = []
+  const onPageError = (err: Error) => {
+    pageErrors.push(err.message)
+  }
+  page.on("pageerror", onPageError)
+
+  await gotoSession()
+
+  const token = `E2E_OK_${Date.now()}`
+
+  const prompt = page.locator(promptSelector)
+  await prompt.click()
+  await page.keyboard.type(`Reply with exactly: ${token}`)
+  await page.keyboard.press("Enter")
+
+  await expect(page).toHaveURL(/\/session\/[^/?#]+/, { timeout: 30_000 })
+
+  const sessionID = (() => {
+    const id = sessionIDFromUrl(page.url())
+    if (!id) throw new Error(`Failed to parse session id from url: ${page.url()}`)
+    return id
+  })()
+
+  try {
+    await expect
+      .poll(
+        async () => {
+          const messages = await sdk.session.messages({ sessionID, limit: 50 }).then((r) => r.data ?? [])
+          return messages
+            .filter((m) => m.info.role === "assistant")
+            .flatMap((m) => m.parts)
+            .filter((p) => p.type === "text")
+            .map((p) => p.text)
+            .join("\n")
+        },
+        { timeout: 90_000 },
+      )
+
+      .toContain(token)
+
+    const reply = page.locator('[data-slot="session-turn-summary-section"]').filter({ hasText: token }).first()
+    await expect(reply).toBeVisible({ timeout: 90_000 })
+  } finally {
+    page.off("pageerror", onPageError)
+    await sdk.session.delete({ sessionID }).catch(() => undefined)
+  }
+
+  if (pageErrors.length > 0) {
+    throw new Error(`Page error(s):\n${pageErrors.join("\n")}`)
+  }
+})

package/e2e/session.spec.ts

@@ -0,0 +1,21 @@
+import { test, expect } from "./fixtures"
+import { promptSelector } from "./utils"
+
+test("can open an existing session and type into the prompt", async ({ page, sdk, gotoSession }) => {
+  const title = `e2e smoke ${Date.now()}`
+  const created = await sdk.session.create({ title }).then((r) => r.data)
+
+  if (!created?.id) throw new Error("Session create did not return an id")
+  const sessionID = created.id
+
+  try {
+    await gotoSession(sessionID)
+
+    const prompt = page.locator(promptSelector)
+    await prompt.click()
+    await page.keyboard.type("hello from e2e")
+    await expect(prompt).toContainText("hello from e2e")
+  } finally {
+    await sdk.session.delete({ sessionID }).catch(() => undefined)
+  }
+})

package/e2e/settings.spec.ts

@@ -0,0 +1,44 @@
+import { test, expect } from "./fixtures"
+import { modKey } from "./utils"
+
+test("smoke settings dialog opens, switches tabs, closes", async ({ page, gotoSession }) => {
+  await gotoSession()
+
+  const dialog = page.getByRole("dialog")
+
+  await page.keyboard.press(`${modKey}+Comma`).catch(() => undefined)
+
+  const opened = await dialog
+    .waitFor({ state: "visible", timeout: 3000 })
+    .then(() => true)
+    .catch(() => false)
+
+  if (!opened) {
+    await page.getByRole("button", { name: "Settings" }).first().click()
+    await expect(dialog).toBeVisible()
+  }
+
+  await dialog.getByRole("tab", { name: "Shortcuts" }).click()
+  await expect(dialog.getByRole("button", { name: "Reset to defaults" })).toBeVisible()
+  await expect(dialog.getByPlaceholder("Search shortcuts")).toBeVisible()
+
+  await page.keyboard.press("Escape")
+
+  const closed = await dialog
+    .waitFor({ state: "detached", timeout: 1500 })
+    .then(() => true)
+    .catch(() => false)
+
+  if (closed) return
+
+  await page.keyboard.press("Escape")
+  const closedSecond = await dialog
+    .waitFor({ state: "detached", timeout: 1500 })
+    .then(() => true)
+    .catch(() => false)
+
+  if (closedSecond) return
+
+  await page.locator('[data-component="dialog-overlay"]').click({ position: { x: 5, y: 5 } })
+  await expect(dialog).toHaveCount(0)
+})

package/e2e/sidebar.spec.ts

@@ -0,0 +1,21 @@
+import { test, expect } from "./fixtures"
+import { modKey } from "./utils"
+
+test("sidebar can be collapsed and expanded", async ({ page, gotoSession }) => {
+  await gotoSession()
+
+  const main = page.locator("main")
+  const closedClass = /xl:border-l/
+  const isClosed = await main.evaluate((node) => node.className.includes("xl:border-l"))
+
+  if (isClosed) {
+    await page.keyboard.press(`${modKey}+B`)
+    await expect(main).not.toHaveClass(closedClass)
+  }
+
+  await page.keyboard.press(`${modKey}+B`)
+  await expect(main).toHaveClass(closedClass)
+
+  await page.keyboard.press(`${modKey}+B`)
+  await expect(main).not.toHaveClass(closedClass)
+})

package/e2e/terminal-init.spec.ts

@@ -0,0 +1,25 @@
+import { test, expect } from "./fixtures"
+import { promptSelector, terminalSelector, terminalToggleKey } from "./utils"
+
+test("smoke terminal mounts and can create a second tab", async ({ page, gotoSession }) => {
+  await gotoSession()
+
+  const terminals = page.locator(terminalSelector)
+  const opened = await terminals.first().isVisible()
+
+  if (!opened) {
+    await page.keyboard.press(terminalToggleKey)
+  }
+
+  await expect(terminals.first()).toBeVisible()
+  await expect(terminals.first().locator("textarea")).toHaveCount(1)
+  await expect(terminals).toHaveCount(1)
+
+  // Ghostty captures a lot of keybinds when focused; move focus back
+  // to the app shell before triggering `terminal.new`.
+  await page.locator(promptSelector).click()
+  await page.keyboard.press("Control+Alt+T")
+
+  await expect(terminals).toHaveCount(2)
+  await expect(terminals.nth(1).locator("textarea")).toHaveCount(1)
+})

package/e2e/terminal.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from "./fixtures"
+import { terminalSelector, terminalToggleKey } from "./utils"
+
+test("terminal panel can be toggled", async ({ page, gotoSession }) => {
+  await gotoSession()
+
+  const terminal = page.locator(terminalSelector)
+  const initiallyOpen = await terminal.isVisible()
+  if (initiallyOpen) {
+    await page.keyboard.press(terminalToggleKey)
+    await expect(terminal).toHaveCount(0)
+  }
+
+  await page.keyboard.press(terminalToggleKey)
+  await expect(terminal).toBeVisible()
+})

package/e2e/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "types": ["node"]
+  },
+  "include": ["./**/*.ts"]
+}

package/e2e/utils.ts

@@ -0,0 +1,38 @@
+import { createOpencodeClient } from "@jonsoc/sdk/v2/client"
+import { base64Encode } from "@jonsoc/util/encode"
+
+export const serverHost = process.env.PLAYWRIGHT_SERVER_HOST ?? "localhost"
+export const serverPort = process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"
+
+export const serverUrl = `http://${serverHost}:${serverPort}`
+export const serverName = `${serverHost}:${serverPort}`
+
+export const modKey = process.platform === "darwin" ? "Meta" : "Control"
+export const terminalToggleKey = "Control+Backquote"
+
+export const promptSelector = '[data-component="prompt-input"]'
+export const terminalSelector = '[data-component="terminal"]'
+
+export function createSdk(directory?: string) {
+  return createOpencodeClient({ baseUrl: serverUrl, directory, throwOnError: true })
+}
+
+export async function getWorktree() {
+  const sdk = createSdk()
+  const result = await sdk.path.get()
+  const data = result.data
+  if (!data?.worktree) throw new Error(`Failed to resolve a worktree from ${serverUrl}/path`)
+  return data.worktree
+}
+
+export function dirSlug(directory: string) {
+  return base64Encode(directory)
+}
+
+export function dirPath(directory: string) {
+  return `/${dirSlug(directory)}`
+}
+
+export function sessionPath(directory: string, sessionID?: string) {
+  return `${dirPath(directory)}/session${sessionID ? `/${sessionID}` : ""}`
+}