summaryrefslogtreecommitdiffhomepage
path: root/cloud/app/src
diff options
context:
space:
mode:
Diffstat (limited to 'cloud/app/src')
-rw-r--r--cloud/app/src/app.tsx16
-rw-r--r--cloud/app/src/component/icon.tsx58
-rw-r--r--cloud/app/src/entry-client.tsx4
-rw-r--r--cloud/app/src/entry-server.tsx48
-rw-r--r--cloud/app/src/routes/index.tsx7
-rw-r--r--cloud/app/src/routes/workspace.tsx12
-rw-r--r--cloud/app/src/routes/workspace/[id].tsx89
-rw-r--r--cloud/app/src/style/token/font.css3
8 files changed, 140 insertions, 97 deletions
diff --git a/cloud/app/src/app.tsx b/cloud/app/src/app.tsx
index 17385c4a5..bc3961214 100644
--- a/cloud/app/src/app.tsx
+++ b/cloud/app/src/app.tsx
@@ -1,15 +1,15 @@
-import { MetaProvider, Title, Meta } from "@solidjs/meta";
-import { Router } from "@solidjs/router";
-import { FileRoutes } from "@solidjs/start/router";
-import { ErrorBoundary, Suspense } from "solid-js";
-import "@ibm/plex/css/ibm-plex.css";
-import "./app.css";
+import { MetaProvider, Title, Meta } from "@solidjs/meta"
+import { Router } from "@solidjs/router"
+import { FileRoutes } from "@solidjs/start/router"
+import { ErrorBoundary, Suspense } from "solid-js"
+import "@ibm/plex/css/ibm-plex.css"
+import "./app.css"
export default function App() {
return (
<Router
explicitLinks={true}
- root={props => (
+ root={(props) => (
<MetaProvider>
<Title>opencode</Title>
<Meta name="description" content="opencode - The AI coding agent built for the terminal." />
@@ -19,5 +19,5 @@ export default function App() {
>
<FileRoutes />
</Router>
- );
+ )
}
diff --git a/cloud/app/src/component/icon.tsx b/cloud/app/src/component/icon.tsx
index d73c178bc..c91c4937d 100644
--- a/cloud/app/src/component/icon.tsx
+++ b/cloud/app/src/component/icon.tsx
@@ -6,34 +6,66 @@ export function IconLogo(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
<path d="M264.5 0H288.5V8.5H272.5V16.5H288.5V25H272.5V33H288.5V41.5H264.5V0Z" fill="currentColor" />
<path d="M248.5 0H224.5V41.5H248.5V33H232.5V8.5H248.5V0Z" fill="currentColor" />
<path d="M256.5 8.5H248.5V33H256.5V8.5Z" fill="currentColor" />
- <path fill-rule="evenodd" clip-rule="evenodd" d="M184.5 0H216.5V41.5H184.5V0ZM208.5 8.5H192.5V33H208.5V8.5Z" fill="currentColor" />
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M184.5 0H216.5V41.5H184.5V0ZM208.5 8.5H192.5V33H208.5V8.5Z"
+ fill="currentColor"
+ />
<path d="M144.5 8.5H136.5V41.5H144.5V8.5Z" fill="currentColor" />
<path d="M136.5 0H112.5V41.5H120.5V8.5H136.5V0Z" fill="currentColor" />
<path d="M80.5 0H104.5V8.5H88.5V16.5H104.5V25H88.5V33H104.5V41.5H80.5V0Z" fill="currentColor" />
- <path fill-rule="evenodd" clip-rule="evenodd" d="M40.5 0H72.5V41.5H48.5V49.5H40.5V0ZM64.5 8.5H48.5V33H64.5V8.5Z" fill="currentColor" />
- <path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 0H32.5V41.5955H0.5V0ZM24.5 8.5H8.5V33H24.5V8.5Z" fill="currentColor" />
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M40.5 0H72.5V41.5H48.5V49.5H40.5V0ZM64.5 8.5H48.5V33H64.5V8.5Z"
+ fill="currentColor"
+ />
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M0.5 0H32.5V41.5955H0.5V0ZM24.5 8.5H8.5V33H24.5V8.5Z"
+ fill="currentColor"
+ />
<path d="M152.5 0H176.5V8.5H160.5V33H176.5V41.5H152.5V0Z" fill="currentColor" />
</svg>
- );
+ )
}
export function IconCopy(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
return (
- <svg
- {...props}
- viewBox="0 0 512 512" >
- <rect width="336" height="336" x="128" y="128" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" rx="57" ry="57"></rect>
- <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="m383.5 128l.5-24a56.16 56.16 0 0 0-56-56H112a64.19 64.19 0 0 0-64 64v216a56.16 56.16 0 0 0 56 56h24"></path>
+ <svg {...props} viewBox="0 0 512 512">
+ <rect
+ width="336"
+ height="336"
+ x="128"
+ y="128"
+ fill="none"
+ stroke="currentColor"
+ stroke-linejoin="round"
+ stroke-width="32"
+ rx="57"
+ ry="57"
+ ></rect>
+ <path
+ fill="none"
+ stroke="currentColor"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ stroke-width="32"
+ d="m383.5 128l.5-24a56.16 56.16 0 0 0-56-56H112a64.19 64.19 0 0 0-64 64v216a56.16 56.16 0 0 0 56 56h24"
+ ></path>
</svg>
)
}
export function IconCheck(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
return (
- <svg
- {...props}
- viewBox="0 0 24 24" >
- <path fill="currentColor" d="M9 16.17L5.53 12.7a.996.996 0 1 0-1.41 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71a.996.996 0 1 0-1.41-1.41z"></path>
+ <svg {...props} viewBox="0 0 24 24">
+ <path
+ fill="currentColor"
+ d="M9 16.17L5.53 12.7a.996.996 0 1 0-1.41 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71a.996.996 0 1 0-1.41-1.41z"
+ ></path>
</svg>
)
}
diff --git a/cloud/app/src/entry-client.tsx b/cloud/app/src/entry-client.tsx
index 0ca4e3c30..642deacf7 100644
--- a/cloud/app/src/entry-client.tsx
+++ b/cloud/app/src/entry-client.tsx
@@ -1,4 +1,4 @@
// @refresh reload
-import { mount, StartClient } from "@solidjs/start/client";
+import { mount, StartClient } from "@solidjs/start/client"
-mount(() => <StartClient />, document.getElementById("app")!);
+mount(() => <StartClient />, document.getElementById("app")!)
diff --git a/cloud/app/src/entry-server.tsx b/cloud/app/src/entry-server.tsx
index d2e6044aa..d5fca6aa5 100644
--- a/cloud/app/src/entry-server.tsx
+++ b/cloud/app/src/entry-server.tsx
@@ -1,26 +1,28 @@
// @refresh reload
import { createHandler, StartServer } from "@solidjs/start/server"
-
-export default createHandler(() => (
- <StartServer
- document={({ assets, children, scripts }) => (
- <html lang="en">
- <head>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <link rel="icon" href="/favicon.svg" />
- <meta property="og:image" content="/social-share.png" />
- <meta property="twitter:image" content="/social-share.png" />
- {assets}
- </head>
- <body>
- <div id="app">{children}</div>
- {scripts}
- </body>
- </html>
- )}
- />
-), {
- mode: "async",
-})
+export default createHandler(
+ () => (
+ <StartServer
+ document={({ assets, children, scripts }) => (
+ <html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <link rel="icon" href="/favicon.svg" />
+ <meta property="og:image" content="/social-share.png" />
+ <meta property="twitter:image" content="/social-share.png" />
+ {assets}
+ </head>
+ <body>
+ <div id="app">{children}</div>
+ {scripts}
+ </body>
+ </html>
+ )}
+ />
+ ),
+ {
+ mode: "async",
+ },
+)
diff --git a/cloud/app/src/routes/index.tsx b/cloud/app/src/routes/index.tsx
index 23e870a55..fe355d79e 100644
--- a/cloud/app/src/routes/index.tsx
+++ b/cloud/app/src/routes/index.tsx
@@ -64,9 +64,7 @@ export default function Home() {
<section data-component="cta">
<div data-slot="left">
- <a href="/docs">
- Get Started
- </a>
+ <a href="/docs">Get Started</a>
</div>
<div data-slot="right">
<button data-copy data-slot="command">
@@ -90,7 +88,8 @@ export default function Home() {
<strong>LSP enabled</strong> Automatically loads the right LSPs for the LLM
</li>
<li>
- <strong>opencode zen</strong> A <a href="/docs/zen">curated list of models</a> provided by opencode <label>New</label>
+ <strong>opencode zen</strong> A <a href="/docs/zen">curated list of models</a> provided by opencode{" "}
+ <label>New</label>
</li>
<li>
<strong>Multi-session</strong> Start multiple agents in parallel on the same project
diff --git a/cloud/app/src/routes/workspace.tsx b/cloud/app/src/routes/workspace.tsx
index 746a3adcd..3f08a70a0 100644
--- a/cloud/app/src/routes/workspace.tsx
+++ b/cloud/app/src/routes/workspace.tsx
@@ -2,7 +2,17 @@ import "./workspace.css"
import { useAuthSession } from "~/context/auth.session"
import { IconLogo } from "../component/icon"
import { withActor } from "~/context/auth.withActor"
-import { query, action, redirect, createAsync, RouteSectionProps, Navigate, useNavigate, useParams, A } from "@solidjs/router"
+import {
+ query,
+ action,
+ redirect,
+ createAsync,
+ RouteSectionProps,
+ Navigate,
+ useNavigate,
+ useParams,
+ A,
+} from "@solidjs/router"
import { User } from "@opencode/cloud-core/user.js"
import { Actor } from "@opencode/cloud-core/actor.js"
import { getRequestEvent } from "solid-js/web"
diff --git a/cloud/app/src/routes/workspace/[id].tsx b/cloud/app/src/routes/workspace/[id].tsx
index 61e9c1db6..959799c63 100644
--- a/cloud/app/src/routes/workspace/[id].tsx
+++ b/cloud/app/src/routes/workspace/[id].tsx
@@ -1,15 +1,7 @@
import "./[id].css"
import { Billing } from "@opencode/cloud-core/billing.js"
import { Key } from "@opencode/cloud-core/key.js"
-import {
- json,
- query,
- action,
- useParams,
- useAction,
- createAsync,
- useSubmission,
-} from "@solidjs/router"
+import { json, query, action, useParams, useAction, createAsync, useSubmission } from "@solidjs/router"
import { createMemo, createSignal, For, Show } from "solid-js"
import { withActor } from "~/context/auth.withActor"
import { IconCopy, IconCheck } from "~/component/icon"
@@ -432,50 +424,57 @@ function PaymentsSection() {
const payments = createAsync(() => getPaymentsInfo(params.id))
// const payments = () => dummyPayments
- return payments() && payments()!.length > 0 && (
- <section data-component="payments-section">
- <div data-slot="section-title">
- <h2>Payments History</h2>
- <p>Recent payment transactions.</p>
- </div>
- <div data-slot="payments-table">
- <table data-slot="payments-table-element">
- <thead>
- <tr>
- <th>Date</th>
- <th>Payment ID</th>
- <th>Amount</th>
- </tr>
- </thead>
- <tbody>
- <For each={payments()!}>
- {(payment) => {
- const date = new Date(payment.timeCreated)
- return (
- <tr>
- <td data-slot="payment-date" title={formatDateUTC(date)}>
- {formatDateForTable(date)}
- </td>
- <td data-slot="payment-id">{payment.id}</td>
- <td data-slot="payment-amount">${((payment.amount ?? 0) / 100000000).toFixed(2)}</td>
- </tr>
- )
- }}
- </For>
- </tbody>
- </table>
- </div>
- </section>
+ return (
+ payments() &&
+ payments()!.length > 0 && (
+ <section data-component="payments-section">
+ <div data-slot="section-title">
+ <h2>Payments History</h2>
+ <p>Recent payment transactions.</p>
+ </div>
+ <div data-slot="payments-table">
+ <table data-slot="payments-table-element">
+ <thead>
+ <tr>
+ <th>Date</th>
+ <th>Payment ID</th>
+ <th>Amount</th>
+ </tr>
+ </thead>
+ <tbody>
+ <For each={payments()!}>
+ {(payment) => {
+ const date = new Date(payment.timeCreated)
+ return (
+ <tr>
+ <td data-slot="payment-date" title={formatDateUTC(date)}>
+ {formatDateForTable(date)}
+ </td>
+ <td data-slot="payment-id">{payment.id}</td>
+ <td data-slot="payment-amount">${((payment.amount ?? 0) / 100000000).toFixed(2)}</td>
+ </tr>
+ )
+ }}
+ </For>
+ </tbody>
+ </table>
+ </div>
+ </section>
+ )
)
}
-export default function() {
+export default function () {
return (
<div data-page="workspace-[id]">
<section data-component="title-section">
<h1>Zen</h1>
<p>
- Curated list of models provided by opencode. <a target="_blank" href="/docs/zen">Learn more</a>.
+ Curated list of models provided by opencode.{" "}
+ <a target="_blank" href="/docs/zen">
+ Learn more
+ </a>
+ .
</p>
</section>
diff --git a/cloud/app/src/style/token/font.css b/cloud/app/src/style/token/font.css
index 4d20e324c..67143e662 100644
--- a/cloud/app/src/style/token/font.css
+++ b/cloud/app/src/style/token/font.css
@@ -14,6 +14,7 @@ body {
--font-size-8xl: 6rem;
--font-size-9xl: 8rem;
- --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+ --font-mono:
+ "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--font-sans: var(--font-mono);
}
generated by cgit v1.2.3 (git 2.39.1) at 2026-06-29 09:41:41 +0000