+```
+
+CSS maintains clean hierarchy regardless of DOM nesting:
+
+```css
+[data-page="home"] {
+ [data-component="screenshots"] {
+ [data-slot="left"] {
+ /* styles */
+ }
+ [data-slot="content"] {
+ /* styles */
+ }
+ }
+
+ [data-component="title"] {
+ /* can be at same level even though nested in DOM */
+ }
+}
+```
+
+## Reusable Components
+
+If a component is reused across multiple sections of the same page, define it at the page level:
+
+```jsx
+
+
+
+
npm
+
+
+
bun
+
+
+
+
+
+
Screenshot Title
+
+
+```
+
+```css
+[data-page="home"] {
+ /* Reusable title component defined at page level since it's used in multiple components */
+ [data-component="title"] {
+ text-transform: uppercase;
+ font-weight: 400;
+ }
+
+ [data-component="install"] {
+ /* install-specific styles */
+ }
+
+ [data-component="screenshots"] {
+ /* screenshots-specific styles */
+ }
+}
+```
+
+This is correct because the `title` component has consistent styling and behavior across the page.
+
+## Key Clarifications
+
+1. **JSX Nesting is Flexible**: Components can be nested inside slots, slots can contain components - whatever makes semantic sense
+2. **CSS Hierarchy is Strict**: Follow pages → components → slots structure in CSS
+3. **Reusable Components**: Define at the appropriate level where they're shared (page level if used across the page, component level if only used within that component)
+4. **DOM vs CSS Structure**: These don't need to match - optimize each for its purpose
+
+See ./src/routes/index.css and ./src/routes/index.tsx for a complete example.
diff --git a/cloud/app/README.md b/cloud/app/README.md
new file mode 100644
index 000000000..9337430cf
--- /dev/null
+++ b/cloud/app/README.md
@@ -0,0 +1,32 @@
+# SolidStart
+
+Everything you need to build a Solid project, powered by [`solid-start`](https://start.solidjs.com);
+
+## Creating a project
+
+```bash
+# create a new project in the current directory
+npm init solid@latest
+
+# create a new project in my-app
+npm init solid@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+Solid apps are built with _presets_, which optimise your project for deployment to different environments.
+
+By default, `npm run build` will generate a Node app that you can run with `npm start`. To use a different preset, add it to the `devDependencies` in `package.json` and specify in your `app.config.js`.
+
+## This project was created with the [Solid CLI](https://github.com/solidjs-community/solid-cli)
diff --git a/cloud/app/app.config.ts b/cloud/app/app.config.ts
new file mode 100644
index 000000000..0ffa557f9
--- /dev/null
+++ b/cloud/app/app.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from "@solidjs/start/config"
+
+export default defineConfig({
+ vite: {
+ server: {
+ allowedHosts: true,
+ },
+ },
+})
diff --git a/cloud/app/package.json b/cloud/app/package.json
new file mode 100644
index 000000000..61b3522a7
--- /dev/null
+++ b/cloud/app/package.json
@@ -0,0 +1,21 @@
+{
+ "name": "@opencode/cloud-app",
+ "type": "module",
+ "scripts": {
+ "dev": "vinxi dev --host 0.0.0.0",
+ "build": "vinxi build",
+ "start": "vinxi start",
+ "version": "0.5.6"
+ },
+ "dependencies": {
+ "@ibm/plex": "6.4.1",
+ "@solidjs/meta": "^0.29.4",
+ "@solidjs/router": "^0.15.0",
+ "@solidjs/start": "^1.1.0",
+ "solid-js": "^1.9.5",
+ "vinxi": "^0.5.7"
+ },
+ "engines": {
+ "node": ">=22"
+ }
+}
diff --git a/cloud/app/public/favicon.ico b/cloud/app/public/favicon.ico
new file mode 100644
index 000000000..fb282da07
Binary files /dev/null and b/cloud/app/public/favicon.ico differ
diff --git a/cloud/app/src/app.css b/cloud/app/src/app.css
new file mode 100644
index 000000000..c0261c422
--- /dev/null
+++ b/cloud/app/src/app.css
@@ -0,0 +1 @@
+@import "./style/index.css";
diff --git a/cloud/app/src/app.tsx b/cloud/app/src/app.tsx
new file mode 100644
index 000000000..04c569b91
--- /dev/null
+++ b/cloud/app/src/app.tsx
@@ -0,0 +1,21 @@
+import { MetaProvider, Title } from "@solidjs/meta";
+import { Router } from "@solidjs/router";
+import { FileRoutes } from "@solidjs/start/router";
+import { Suspense } from "solid-js";
+import "@ibm/plex/css/ibm-plex.css";
+import "./app.css";
+
+export default function App() {
+ return (
+ (
+
+ SolidStart - Basic
+ {props.children}
+
+ )}
+ >
+
+
+ );
+}
diff --git a/cloud/app/src/asset/logo-ornate-dark.svg b/cloud/app/src/asset/logo-ornate-dark.svg
new file mode 100644
index 000000000..2efda934d
--- /dev/null
+++ b/cloud/app/src/asset/logo-ornate-dark.svg
@@ -0,0 +1,19 @@
+
+
diff --git a/cloud/app/src/asset/screenshot-github.webp b/cloud/app/src/asset/screenshot-github.webp
new file mode 100644
index 000000000..fda74e641
Binary files /dev/null and b/cloud/app/src/asset/screenshot-github.webp differ
diff --git a/cloud/app/src/asset/screenshot-splash.webp b/cloud/app/src/asset/screenshot-splash.webp
new file mode 100644
index 000000000..e900673ef
Binary files /dev/null and b/cloud/app/src/asset/screenshot-splash.webp differ
diff --git a/cloud/app/src/asset/screenshot-vscode.webp b/cloud/app/src/asset/screenshot-vscode.webp
new file mode 100644
index 000000000..b8966a6b8
Binary files /dev/null and b/cloud/app/src/asset/screenshot-vscode.webp differ
diff --git a/cloud/app/src/component/icon.tsx b/cloud/app/src/component/icon.tsx
new file mode 100644
index 000000000..5a565ab9a
--- /dev/null
+++ b/cloud/app/src/component/icon.tsx
@@ -0,0 +1,24 @@
+
+import { JSX } from "solid-js"
+
+
+export function IconCopy(props: JSX.SvgSVGAttributes) {
+ return (
+
+ )
+}
+
+export function IconCheck(props: JSX.SvgSVGAttributes) {
+ return (
+
+ )
+}
diff --git a/cloud/app/src/entry-client.tsx b/cloud/app/src/entry-client.tsx
new file mode 100644
index 000000000..0ca4e3c30
--- /dev/null
+++ b/cloud/app/src/entry-client.tsx
@@ -0,0 +1,4 @@
+// @refresh reload
+import { mount, StartClient } from "@solidjs/start/client";
+
+mount(() => , document.getElementById("app")!);
diff --git a/cloud/app/src/entry-server.tsx b/cloud/app/src/entry-server.tsx
new file mode 100644
index 000000000..eb8aea1e8
--- /dev/null
+++ b/cloud/app/src/entry-server.tsx
@@ -0,0 +1,21 @@
+// @refresh reload
+import { createHandler, StartServer } from "@solidjs/start/server";
+
+export default createHandler(() => (
+ (
+
+
+
+
+
+ {assets}
+
+
+
{children}
+ {scripts}
+
+
+ )}
+ />
+));
diff --git a/cloud/app/src/global.d.ts b/cloud/app/src/global.d.ts
new file mode 100644
index 000000000..dc6f10c22
--- /dev/null
+++ b/cloud/app/src/global.d.ts
@@ -0,0 +1 @@
+///
diff --git a/cloud/app/src/routes/[...404].tsx b/cloud/app/src/routes/[...404].tsx
new file mode 100644
index 000000000..4ea71ec7f
--- /dev/null
+++ b/cloud/app/src/routes/[...404].tsx
@@ -0,0 +1,19 @@
+import { Title } from "@solidjs/meta";
+import { HttpStatusCode } from "@solidjs/start";
+
+export default function NotFound() {
+ return (
+
+ Not Found
+
+
+ 
+ 
+ 
+ 
\n`
+ })()
+ const shareUrl = shareId ? `[opencode session](${useShareUrl()}/s/${shareId}) | ` : ""
+ return `\n\n${image}${shareUrl}[github run](${useEnvRunUrl()})`
+}
+
+async function fetchRepo() {
+ const { repo } = useContext()
+ return await octoRest.rest.repos.get({ owner: repo.owner, repo: repo.repo })
+}
+
+async function fetchIssue() {
+ console.log("Fetching prompt data for issue...")
+ const { repo } = useContext()
+ const issueResult = await octoGraph