The open source AI coding agent.
+The AI coding agent built for the terminal.
-
- 
-
開源的 AI Coding Agent。
-
- 
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser. - -The page will reload if you make edits.
- -### `npm run build` - -Builds the app for production to the `dist` folder.
-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.
-Your app is ready to be deployed! - -## Deployment - -You can deploy the `dist` folder to any static host provider (netlify, surge, now, etc.) diff --git a/packages/app/bunfig.toml b/packages/app/bunfig.toml deleted file mode 100644 index 363990451..000000000 --- a/packages/app/bunfig.toml +++ /dev/null @@ -1,2 +0,0 @@ -[test] -preload = ["./happydom.ts"] diff --git a/packages/app/happydom.ts b/packages/app/happydom.ts deleted file mode 100644 index de726718f..000000000 --- a/packages/app/happydom.ts +++ /dev/null @@ -1,75 +0,0 @@ -import { GlobalRegistrator } from "@happy-dom/global-registrator" - -GlobalRegistrator.register() - -const originalGetContext = HTMLCanvasElement.prototype.getContext -// @ts-expect-error - we're overriding with a simplified mock -HTMLCanvasElement.prototype.getContext = function (contextType: string, _options?: unknown) { - if (contextType === "2d") { - return { - canvas: this, - fillStyle: "#000000", - strokeStyle: "#000000", - font: "12px monospace", - textAlign: "start", - textBaseline: "alphabetic", - globalAlpha: 1, - globalCompositeOperation: "source-over", - imageSmoothingEnabled: true, - lineWidth: 1, - lineCap: "butt", - lineJoin: "miter", - miterLimit: 10, - shadowBlur: 0, - shadowColor: "rgba(0, 0, 0, 0)", - shadowOffsetX: 0, - shadowOffsetY: 0, - fillRect: () => {}, - strokeRect: () => {}, - clearRect: () => {}, - fillText: () => {}, - strokeText: () => {}, - measureText: (text: string) => ({ width: text.length * 8 }), - drawImage: () => {}, - save: () => {}, - restore: () => {}, - scale: () => {}, - rotate: () => {}, - translate: () => {}, - transform: () => {}, - setTransform: () => {}, - resetTransform: () => {}, - createLinearGradient: () => ({ addColorStop: () => {} }), - createRadialGradient: () => ({ addColorStop: () => {} }), - createPattern: () => null, - beginPath: () => {}, - closePath: () => {}, - moveTo: () => {}, - lineTo: () => {}, - bezierCurveTo: () => {}, - quadraticCurveTo: () => {}, - arc: () => {}, - arcTo: () => {}, - ellipse: () => {}, - rect: () => {}, - fill: () => {}, - stroke: () => {}, - clip: () => {}, - isPointInPath: () => false, - isPointInStroke: () => false, - getTransform: () => ({}), - getImageData: () => ({ - data: new Uint8ClampedArray(0), - width: 0, - height: 0, - }), - putImageData: () => {}, - createImageData: () => ({ - data: new Uint8ClampedArray(0), - width: 0, - height: 0, - }), - } as unknown as CanvasRenderingContext2D - } - return originalGetContext.call(this, contextType as "2d", _options) -} diff --git a/packages/app/index.html b/packages/app/index.html deleted file mode 100644 index 9803517a0..000000000 --- a/packages/app/index.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - - -
-
-
- )
-}
diff --git a/packages/app/src/components/dialog-manage-models.tsx b/packages/app/src/components/dialog-manage-models.tsx
deleted file mode 100644
index 66d125288..000000000
--- a/packages/app/src/components/dialog-manage-models.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { Dialog } from "@opencode-ai/ui/dialog"
-import { List } from "@opencode-ai/ui/list"
-import { Switch } from "@opencode-ai/ui/switch"
-import type { Component } from "solid-js"
-import { useLocal } from "@/context/local"
-import { popularProviders } from "@/hooks/use-providers"
-
-export const DialogManageModels: Component = () => {
- const local = useLocal()
- return (
-
- )
-}
diff --git a/packages/app/src/components/dialog-select-file.tsx b/packages/app/src/components/dialog-select-file.tsx
deleted file mode 100644
index b27afdc8b..000000000
--- a/packages/app/src/components/dialog-select-file.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { Dialog } from "@opencode-ai/ui/dialog"
-import { FileIcon } from "@opencode-ai/ui/file-icon"
-import { List } from "@opencode-ai/ui/list"
-import { getDirectory, getFilename } from "@opencode-ai/util/path"
-import { useParams } from "@solidjs/router"
-import { createMemo } from "solid-js"
-import { useLayout } from "@/context/layout"
-import { useLocal } from "@/context/local"
-
-export function DialogSelectFile() {
- const layout = useLayout()
- const local = useLocal()
- const dialog = useDialog()
- const params = useParams()
- const sessionKey = createMemo(() => `${params.dir}${params.id ? "/" + params.id : ""}`)
- const tabs = createMemo(() => layout.tabs(sessionKey()))
- return (
-
- )
-}
diff --git a/packages/app/src/components/dialog-select-model-unpaid.tsx b/packages/app/src/components/dialog-select-model-unpaid.tsx
deleted file mode 100644
index 24ec8092d..000000000
--- a/packages/app/src/components/dialog-select-model-unpaid.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import { Button } from "@opencode-ai/ui/button"
-import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { Dialog } from "@opencode-ai/ui/dialog"
-import type { IconName } from "@opencode-ai/ui/icons/provider"
-import { List, type ListRef } from "@opencode-ai/ui/list"
-import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
-import { Tag } from "@opencode-ai/ui/tag"
-import { type Component, onCleanup, onMount, Show } from "solid-js"
-import { useLocal } from "@/context/local"
-import { popularProviders, useProviders } from "@/hooks/use-providers"
-import { DialogConnectProvider } from "./dialog-connect-provider"
-import { DialogSelectProvider } from "./dialog-select-provider"
-
-export const DialogSelectModelUnpaid: Component = () => {
- const local = useLocal()
- const dialog = useDialog()
- const providers = useProviders()
-
- let listRef: ListRef | undefined
- const handleKey = (e: KeyboardEvent) => {
- if (e.key === "Escape") return
- listRef?.onKeyDown(e)
- }
-
- onMount(() => {
- document.addEventListener("keydown", handleKey)
- onCleanup(() => {
- document.removeEventListener("keydown", handleKey)
- })
- })
-
- return (
-
- )
-}
diff --git a/packages/app/src/components/dialog-select-model.tsx b/packages/app/src/components/dialog-select-model.tsx
deleted file mode 100644
index 54783386a..000000000
--- a/packages/app/src/components/dialog-select-model.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { Component, createMemo, Show } from "solid-js"
-import { useLocal } from "@/context/local"
-import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { popularProviders } from "@/hooks/use-providers"
-import { Button } from "@opencode-ai/ui/button"
-import { Tag } from "@opencode-ai/ui/tag"
-import { Dialog } from "@opencode-ai/ui/dialog"
-import { List } from "@opencode-ai/ui/list"
-import { DialogSelectProvider } from "./dialog-select-provider"
-import { DialogManageModels } from "./dialog-manage-models"
-
-export const DialogSelectModel: Component<{ provider?: string }> = (props) => {
- const local = useLocal()
- const dialog = useDialog()
-
- const models = createMemo(() =>
- local.model
- .list()
- .filter((m) => local.model.visible({ modelID: m.id, providerID: m.provider.id }))
- .filter((m) => (props.provider ? m.provider.id === props.provider : true)),
- )
-
- return (
-
- )
-}
diff --git a/packages/app/src/components/dialog-select-provider.tsx b/packages/app/src/components/dialog-select-provider.tsx
deleted file mode 100644
index 5bbde5d41..000000000
--- a/packages/app/src/components/dialog-select-provider.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { Component, Show } from "solid-js"
-import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { popularProviders, useProviders } from "@/hooks/use-providers"
-import { Dialog } from "@opencode-ai/ui/dialog"
-import { List } from "@opencode-ai/ui/list"
-import { Tag } from "@opencode-ai/ui/tag"
-import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
-import { IconName } from "@opencode-ai/ui/icons/provider"
-import { DialogConnectProvider } from "./dialog-connect-provider"
-
-export const DialogSelectProvider: Component = () => {
- const dialog = useDialog()
- const providers = useProviders()
-
- return (
-
- )
-}
diff --git a/packages/app/src/components/header.tsx b/packages/app/src/components/header.tsx
deleted file mode 100644
index ec7cdfa25..000000000
--- a/packages/app/src/components/header.tsx
+++ /dev/null
@@ -1,209 +0,0 @@
-import { useGlobalSync } from "@/context/global-sync"
-import { useGlobalSDK } from "@/context/global-sdk"
-import { useLayout } from "@/context/layout"
-import { Session } from "@opencode-ai/sdk/v2/client"
-import { Button } from "@opencode-ai/ui/button"
-import { Icon } from "@opencode-ai/ui/icon"
-import { Mark } from "@opencode-ai/ui/logo"
-import { Popover } from "@opencode-ai/ui/popover"
-import { Select } from "@opencode-ai/ui/select"
-import { TextField } from "@opencode-ai/ui/text-field"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
-import { base64Decode } from "@opencode-ai/util/encode"
-import { useCommand } from "@/context/command"
-import { getFilename } from "@opencode-ai/util/path"
-import { A, useParams } from "@solidjs/router"
-import { createMemo, createResource, Show } from "solid-js"
-import { IconButton } from "@opencode-ai/ui/icon-button"
-import { iife } from "@opencode-ai/util/iife"
-
-export function Header(props: {
- navigateToProject: (directory: string) => void
- navigateToSession: (session: Session | undefined) => void
- onMobileMenuToggle?: () => void
-}) {
- const globalSync = useGlobalSync()
- const globalSDK = useGlobalSDK()
- const layout = useLayout()
- const params = useParams()
- const command = useCommand()
-
- return (
-
-
-
-
-
- Login with Claude Pro/Max
-
- Connect {provider().name}
-
-
-
-
-
-
-
-
-
-
-
- {iife(() => {
- const [formStore, setFormStore] = createStore({
- value: "",
- error: undefined as string | undefined,
- })
-
- async function handleSubmit(e: SubmitEvent) {
- e.preventDefault()
-
- const form = e.currentTarget as HTMLFormElement
- const formData = new FormData(form)
- const apiKey = formData.get("apiKey") as string
-
- if (!apiKey?.trim()) {
- setFormStore("error", "API key is required")
- return
- }
-
- setFormStore("error", undefined)
- await globalSDK.client.auth.set({
- providerID: props.provider,
- auth: {
- type: "api",
- key: apiKey,
- },
- })
- await complete()
- }
-
- return (
-
-
-
-
- {iife(() => {
- const [formStore, setFormStore] = createStore({
- value: "",
- error: undefined as string | undefined,
- })
-
- onMount(() => {
- if (store.authorization?.method === "code" && store.authorization?.url) {
- platform.openLink(store.authorization.url)
- }
- })
-
- async function handleSubmit(e: SubmitEvent) {
- e.preventDefault()
-
- const form = e.currentTarget as HTMLFormElement
- const formData = new FormData(form)
- const code = formData.get("code") as string
-
- if (!code?.trim()) {
- setFormStore("error", "Authorization code is required")
- return
- }
-
- setFormStore("error", undefined)
- const { error } = await globalSDK.client.provider.oauth.callback({
- providerID: props.provider,
- method: store.methodIndex,
- code,
- })
- if (!error) {
- await complete()
- return
- }
- setFormStore("error", "Invalid authorization code")
- }
-
- return (
-
-
- {iife(() => {
- const code = createMemo(() => {
- const instructions = store.authorization?.instructions
- if (instructions?.includes(":")) {
- return instructions?.split(":")[1]?.trim()
- }
- return instructions
- })
-
- onMount(async () => {
- const result = await globalSDK.client.provider.oauth.callback({
- providerID: props.provider,
- method: store.methodIndex,
- })
- if (result.error) {
- // TODO: show error
- dialog.close()
- return
- }
- await complete()
- })
-
- return (
-
-
-
-
-
- Select login method for {provider().name}.
-
-
- - {
- listRef = ref
- }}
- items={methods}
- key={(m) => m?.label}
- onSelect={async (method, index) => {
- if (!method) return
- selectMethod(index)
- }}
- >
- {(i) => (
-
-
- )}
-
-
-
- {i.label}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )
- })}
-
-
-
- OpenCode Zen gives you access to a curated set of reliable optimized models for coding
- agents.
-
-
- With a single API key you'll get access to models such as Claude, GPT, Gemini, GLM and more.
-
-
- Visit{" "}
-
- opencode.ai/zen
- {" "}
- to collect your API key.
-
-
- Enter your {provider().name} API key to connect your account and use {provider().name} models
- in OpenCode.
-
-
-
- )
- })}
-
- Visit this link to collect your authorization
- code to connect your account and use {provider().name} models in OpenCode.
-
-
-
-
- )
- })}
-
- Visit this link and enter the code below to
- connect your account and use {provider().name} models in OpenCode.
-
-
-
-
- 0 && params.dir}>
- {(directory) => {
- const currentDirectory = createMemo(() => base64Decode(directory()))
- const store = createMemo(() => globalSync.child(currentDirectory())[0])
- const sessions = createMemo(() => (store().session ?? []).filter((s) => !s.parentID))
- const currentSession = createMemo(() => sessions().find((s) => s.id === params.id))
- const shareEnabled = createMemo(() => store().config.share !== "disabled")
- return (
- <>
-
-
-
-
-
- New session
-
-
- }
- >
-
-
-
-
-
-
-
- /
-
-
- Toggle review
-
-
- }
- >
-
-
-
-
-
-
-
-
-
-
- {
- editorRef = el
- props.ref?.(el)
- }}
- contenteditable="true"
- onInput={handleInput}
- onKeyDown={handleKeyDown}
- classList={{
- "w-full px-5 py-3 text-14-regular text-text-strong focus:outline-none whitespace-pre-wrap": true,
- "[&>[data-type=file]]:text-icon-info-active": true,
- "font-mono!": store.mode === "shell",
- }}
- />
-
-
-
-
- {store.mode === "shell"
- ? "Enter shell command..."
- : `Ask anything... "${PLACEHOLDERS[store.placeholder]}"`}
-
-
-
- }
- >
-
-
-
-
-
-
-
-
-
-
- Cycle agent
-
-
- }
- >
-
-
-
- {
- const file = e.currentTarget.files?.[0]
- if (file) addImageAttachment(file)
- e.currentTarget.value = ""
- }}
- />
-
-
- fileInputRef.click()}
- />
-
-
-
-
-
-
-
-
- }
- >
-
-
-
-
-
- )
-}
-
-function getCursorPosition(parent: HTMLElement): number {
- const selection = window.getSelection()
- if (!selection || selection.rangeCount === 0) return 0
- const range = selection.getRangeAt(0)
- const preCaretRange = range.cloneRange()
- preCaretRange.selectNodeContents(parent)
- preCaretRange.setEnd(range.startContainer, range.startOffset)
- return preCaretRange.toString().length
-}
-
-function setCursorPosition(parent: HTMLElement, position: number) {
- let remaining = position
- let node = parent.firstChild
- while (node) {
- const length = node.textContent ? node.textContent.length : 0
- const isText = node.nodeType === Node.TEXT_NODE
- const isFile = node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).dataset.type === "file"
-
- if (isText && remaining <= length) {
- const range = document.createRange()
- const selection = window.getSelection()
- range.setStart(node, remaining)
- range.collapse(true)
- selection?.removeAllRanges()
- selection?.addRange(range)
- return
- }
-
- if (isFile && remaining <= length) {
- const range = document.createRange()
- const selection = window.getSelection()
- range.setStartAfter(node)
- range.collapse(true)
- selection?.removeAllRanges()
- selection?.addRange(range)
- return
- }
-
- remaining -= length
- node = node.nextSibling
- }
-
- const fallbackRange = document.createRange()
- const fallbackSelection = window.getSelection()
- const last = parent.lastChild
- if (last && last.nodeType === Node.TEXT_NODE) {
- const len = last.textContent ? last.textContent.length : 0
- fallbackRange.setStart(last, len)
- }
- if (!last || last.nodeType !== Node.TEXT_NODE) {
- fallbackRange.selectNodeContents(parent)
- }
- fallbackRange.collapse(false)
- fallbackSelection?.removeAllRanges()
- fallbackSelection?.addRange(fallbackRange)
-}
diff --git a/packages/app/src/components/session-context-usage.tsx b/packages/app/src/components/session-context-usage.tsx
deleted file mode 100644
index 5474005c7..000000000
--- a/packages/app/src/components/session-context-usage.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { createMemo, Show } from "solid-js"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
-import { ProgressCircle } from "@opencode-ai/ui/progress-circle"
-import { useSync } from "@/context/sync"
-import { useParams } from "@solidjs/router"
-import { AssistantMessage } from "@opencode-ai/sdk/v2"
-
-export function SessionContextUsage() {
- const sync = useSync()
- const params = useParams()
- const messages = createMemo(() => (params.id ? (sync.data.message[params.id] ?? []) : []))
-
- const cost = createMemo(() => {
- const total = messages().reduce((sum, x) => sum + (x.role === "assistant" ? x.cost : 0), 0)
- return new Intl.NumberFormat("en-US", {
- style: "currency",
- currency: "USD",
- }).format(total)
- })
-
- const context = createMemo(() => {
- const last = messages().findLast((x) => x.role === "assistant" && x.tokens.output > 0) as AssistantMessage
- if (!last) return
- const total =
- last.tokens.input + last.tokens.output + last.tokens.reasoning + last.tokens.cache.read + last.tokens.cache.write
- const model = sync.data.provider.all.find((x) => x.id === last.providerID)?.models[last.modelID]
- return {
- tokens: total.toLocaleString(),
- percentage: model?.limit.context ? Math.round((total / model.limit.context) * 100) : null,
- }
- })
-
- return (
-
- Stop
-
-
-
- Send
-
-
- Tokens
- {ctx().tokens}
-
-
- Usage
- {ctx().percentage ?? 0}%
-
-
- Cost
- {cost()}
-
-
- }
- placement="top"
- >
-
- {`${ctx().percentage ?? 0}%`}
-
-
-
- )
-}
diff --git a/packages/app/src/pages/home.tsx b/packages/app/src/pages/home.tsx
deleted file mode 100644
index 7cd2916e8..000000000
--- a/packages/app/src/pages/home.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import { useGlobalSync } from "@/context/global-sync"
-import { createMemo, For, Match, Show, Switch } from "solid-js"
-import { Button } from "@opencode-ai/ui/button"
-import { Logo } from "@opencode-ai/ui/logo"
-import { useLayout } from "@/context/layout"
-import { useNavigate } from "@solidjs/router"
-import { base64Encode } from "@opencode-ai/util/encode"
-import { Icon } from "@opencode-ai/ui/icon"
-import { usePlatform } from "@/context/platform"
-import { DateTime } from "luxon"
-
-export default function Home() {
- const sync = useGlobalSync()
- const layout = useLayout()
- const platform = usePlatform()
- const navigate = useNavigate()
- const homedir = createMemo(() => sync.data.path.home)
-
- function openProject(directory: string) {
- layout.projects.open(directory)
- navigate(`/${base64Encode(directory)}`)
- }
-
- async function chooseProject() {
- const result = await platform.openDirectoryPickerDialog?.({
- title: "Open project",
- multiple: true,
- })
- if (Array.isArray(result)) {
- for (const directory of result) {
- openProject(directory)
- }
- } else if (result) {
- openProject(result)
- }
- }
-
- return (
-
-
-
-
- Something went wrong
-An error occurred while loading the application.
-
- Please report this error to the OpenCode team
-
-
-
-
- 0}>
-
-
-
-
-
- )
-}
diff --git a/packages/app/src/pages/layout.tsx b/packages/app/src/pages/layout.tsx
deleted file mode 100644
index 489899f88..000000000
--- a/packages/app/src/pages/layout.tsx
+++ /dev/null
@@ -1,904 +0,0 @@
-import {
- createEffect,
- createMemo,
- createSignal,
- For,
- Match,
- onCleanup,
- onMount,
- ParentProps,
- Show,
- Switch,
- type JSX,
-} from "solid-js"
-import { DateTime } from "luxon"
-import { A, useNavigate, useParams } from "@solidjs/router"
-import { useLayout, getAvatarColors, LocalProject } from "@/context/layout"
-import { useGlobalSync } from "@/context/global-sync"
-import { base64Decode, base64Encode } from "@opencode-ai/util/encode"
-import { Avatar } from "@opencode-ai/ui/avatar"
-import { ResizeHandle } from "@opencode-ai/ui/resize-handle"
-import { Button } from "@opencode-ai/ui/button"
-import { Icon } from "@opencode-ai/ui/icon"
-import { IconButton } from "@opencode-ai/ui/icon-button"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
-import { Collapsible } from "@opencode-ai/ui/collapsible"
-import { DiffChanges } from "@opencode-ai/ui/diff-changes"
-import { Spinner } from "@opencode-ai/ui/spinner"
-import { getFilename } from "@opencode-ai/util/path"
-import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
-import { Session } from "@opencode-ai/sdk/v2/client"
-import { usePlatform } from "@/context/platform"
-import { createStore, produce } from "solid-js/store"
-import {
- DragDropProvider,
- DragDropSensors,
- DragOverlay,
- SortableProvider,
- closestCenter,
- createSortable,
-} from "@thisbeyond/solid-dnd"
-import type { DragEvent } from "@thisbeyond/solid-dnd"
-import { useProviders } from "@/hooks/use-providers"
-import { showToast, Toast } from "@opencode-ai/ui/toast"
-import { useGlobalSDK } from "@/context/global-sdk"
-import { useNotification } from "@/context/notification"
-import { Binary } from "@opencode-ai/util/binary"
-import { Header } from "@/components/header"
-import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { DialogSelectProvider } from "@/components/dialog-select-provider"
-import { useCommand } from "@/context/command"
-import { ConstrainDragXAxis } from "@/utils/solid-dnd"
-
-export default function Layout(props: ParentProps) {
- const [store, setStore] = createStore({
- lastSession: {} as { [directory: string]: string },
- activeDraggable: undefined as string | undefined,
- mobileSidebarOpen: false,
- mobileProjectsExpanded: {} as Record
-
-
-
-
-
-
- Recent projects
- -
-
-
-
-
-
-
-
-
- No recent projects
- Get started by opening a local project
-
- 0 && props.notify ? { "-webkit-mask-image": mask, "mask-image": mask } : undefined
- }
- />
-
-
- 0 && props.notify}>
-
-
-
- )
- }
-
- const ProjectVisual = (props: { project: LocalProject; class?: string }): JSX.Element => {
- const name = createMemo(() => getFilename(props.project.worktree))
- const current = createMemo(() => base64Decode(params.dir ?? ""))
- return (
-
-
-
-
-
-
-
-
-
-
- {props.session.title}
-
-
-
-
-
-
-
-
-
- 0}>
-
-
-
-
- {Math.abs(updated().diffNow().as("seconds")) < 60
- ? "Now"
- : updated()
- .toRelative({
- style: "short",
- unit: ["days", "hours", "minutes"],
- })
- ?.replace(" ago", "")
- ?.replace(/ days?/, "d")
- ?.replace(" min.", "m")
- ?.replace(" hr.", "h")}
-
-
-
-
-
- {`${props.session.summary?.files || "No"} file${props.session.summary?.files !== 1 ? "s" : ""} changed`}
- {(summary) =>
-
-
-
- archiveSession(props.session)} />
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )
- }
-
- const ProjectDragOverlay = (): JSX.Element => {
- const project = createMemo(() => layout.projects.list().find((p) => p.worktree === store.activeDraggable))
- return (
-
-
- )}
-
-
-
- Toggle sidebar
-
-
- }
- inactive={expanded()}
- >
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Open project
-
-
-
-
- }
- inactive={expanded()}
- >
-
-
-
-
-
-
-
-
-
-
- Getting started
- OpenCode includes free models so you can start immediately.
- Connect any provider to use models, inc. Claude, GPT, Gemini etc.
-
- ,
- messageId: undefined as string | undefined,
- })
-
- const activeMessage = createMemo(() => {
- if (!store.messageId) return lastUserMessage()
- // If the stored message is no longer visible (e.g., was reverted), fall back to last visible
- const found = visibleUserMessages()?.find((m) => m.id === store.messageId)
- return found ?? lastUserMessage()
- })
- const setActiveMessage = (message: UserMessage | undefined) => {
- setStore("messageId", message?.id)
- }
-
- function navigateMessageByOffset(offset: number) {
- const msgs = visibleUserMessages()
- if (msgs.length === 0) return
-
- const current = activeMessage()
- const currentIndex = current ? msgs.findIndex((m) => m.id === current.id) : -1
-
- let targetIndex: number
- if (currentIndex === -1) {
- targetIndex = offset > 0 ? 0 : msgs.length - 1
- } else {
- targetIndex = currentIndex + offset
- }
-
- if (targetIndex < 0 || targetIndex >= msgs.length) return
-
- setActiveMessage(msgs[targetIndex])
- }
-
- const diffs = createMemo(() => (params.id ? (sync.data.session_diff[params.id] ?? []) : []))
-
- let inputRef!: HTMLDivElement
-
- createEffect(() => {
- if (!params.id) return
- sync.session.sync(params.id)
- })
-
- createEffect(() => {
- if (layout.terminal.opened()) {
- if (terminal.all().length === 0) {
- terminal.new()
- }
- }
- })
-
- createEffect(
- on(
- () => visibleUserMessages().at(-1)?.id,
- (lastId, prevLastId) => {
- if (lastId && prevLastId && lastId > prevLastId) {
- setStore("messageId", undefined)
- }
- },
- { defer: true },
- ),
- )
-
- createEffect(() => {
- params.id
- const status = sync.data.session_status[params.id ?? ""] ?? { type: "idle" }
- batch(() => {
- setStore("userInteracted", false)
- setStore("stepsExpanded", status.type !== "idle")
- })
- })
-
- const status = createMemo(() => sync.data.session_status[params.id ?? ""] ?? { type: "idle" })
- const working = createMemo(() => status().type !== "idle" && activeMessage()?.id === lastUserMessage()?.id)
-
- createRenderEffect((prev) => {
- const isWorking = working()
- if (!prev && isWorking) {
- setStore("stepsExpanded", true)
- }
- if (prev && !isWorking && !store.userInteracted) {
- setStore("stepsExpanded", false)
- }
- return isWorking
- }, working())
-
- command.register(() => [
- {
- id: "session.new",
- title: "New session",
- description: "Create a new session",
- category: "Session",
- keybind: "mod+shift+s",
- slash: "new",
- onSelect: () => navigate(`/${params.dir}/session`),
- },
- {
- id: "file.open",
- title: "Open file",
- description: "Search and open a file",
- category: "File",
- keybind: "mod+p",
- slash: "open",
- onSelect: () => dialog.show(() =>
-
-
-
-
-
- )
-
- return (
-
-
- {(pty) => (
-
- terminal.clone(pty.id)} />
-
- )}
-
-
-
-
- {(draggedId) => {
- const pty = createMemo(() => terminal.all().find((t: LocalPTY) => t.id === draggedId()))
- return (
-
- {(t) => (
-
- )
- }}
-
-
-
-
-
-
- )
-}
diff --git a/packages/app/src/utils/id.ts b/packages/app/src/utils/id.ts
deleted file mode 100644
index fa27cf4c5..000000000
--- a/packages/app/src/utils/id.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-import z from "zod"
-
-const prefixes = {
- session: "ses",
- message: "msg",
- permission: "per",
- user: "usr",
- part: "prt",
- pty: "pty",
-} as const
-
-const LENGTH = 26
-let lastTimestamp = 0
-let counter = 0
-
-type Prefix = keyof typeof prefixes
-export namespace Identifier {
- export function schema(prefix: Prefix) {
- return z.string().startsWith(prefixes[prefix])
- }
-
- export function ascending(prefix: Prefix, given?: string) {
- return generateID(prefix, false, given)
- }
-
- export function descending(prefix: Prefix, given?: string) {
- return generateID(prefix, true, given)
- }
-}
-
-function generateID(prefix: Prefix, descending: boolean, given?: string): string {
- if (!given) {
- return create(prefix, descending)
- }
-
- if (!given.startsWith(prefixes[prefix])) {
- throw new Error(`ID ${given} does not start with ${prefixes[prefix]}`)
- }
-
- return given
-}
-
-function create(prefix: Prefix, descending: boolean, timestamp?: number): string {
- const currentTimestamp = timestamp ?? Date.now()
-
- if (currentTimestamp !== lastTimestamp) {
- lastTimestamp = currentTimestamp
- counter = 0
- }
-
- counter += 1
-
- let now = BigInt(currentTimestamp) * BigInt(0x1000) + BigInt(counter)
-
- if (descending) {
- now = ~now
- }
-
- const timeBytes = new Uint8Array(6)
- for (let i = 0; i < 6; i += 1) {
- timeBytes[i] = Number((now >> BigInt(40 - 8 * i)) & BigInt(0xff))
- }
-
- return prefixes[prefix] + "_" + bytesToHex(timeBytes) + randomBase62(LENGTH - 12)
-}
-
-function bytesToHex(bytes: Uint8Array): string {
- let hex = ""
- for (let i = 0; i < bytes.length; i += 1) {
- hex += bytes[i].toString(16).padStart(2, "0")
- }
- return hex
-}
-
-function randomBase62(length: number): string {
- const chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"
- const bytes = getRandomBytes(length)
- let result = ""
- for (let i = 0; i < length; i += 1) {
- result += chars[bytes[i] % 62]
- }
- return result
-}
-
-function getRandomBytes(length: number): Uint8Array {
- const bytes = new Uint8Array(length)
- const cryptoObj = typeof globalThis !== "undefined" ? globalThis.crypto : undefined
-
- if (cryptoObj && typeof cryptoObj.getRandomValues === "function") {
- cryptoObj.getRandomValues(bytes)
- return bytes
- }
-
- for (let i = 0; i < length; i += 1) {
- bytes[i] = Math.floor(Math.random() * 256)
- }
-
- return bytes
-}
diff --git a/packages/app/src/utils/index.ts b/packages/app/src/utils/index.ts
deleted file mode 100644
index d87053269..000000000
--- a/packages/app/src/utils/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./dom"
diff --git a/packages/app/src/utils/persist.ts b/packages/app/src/utils/persist.ts
deleted file mode 100644
index 12b334f9f..000000000
--- a/packages/app/src/utils/persist.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { usePlatform } from "@/context/platform"
-import { makePersisted } from "@solid-primitives/storage"
-import { createResource, type Accessor } from "solid-js"
-import type { SetStoreFunction, Store } from "solid-js/store"
-
-type InitType = Promise
-
- )
-}
diff --git a/packages/app/src/pages/session.tsx b/packages/app/src/pages/session.tsx
deleted file mode 100644
index 42e43232a..000000000
--- a/packages/app/src/pages/session.tsx
+++ /dev/null
@@ -1,927 +0,0 @@
-import {
- For,
- onCleanup,
- onMount,
- Show,
- Match,
- Switch,
- createResource,
- createMemo,
- createEffect,
- on,
- createRenderEffect,
- batch,
-} from "solid-js"
-
-import { Dynamic } from "solid-js/web"
-import { useLocal, type LocalFile } from "@/context/local"
-import { createStore } from "solid-js/store"
-import { PromptInput } from "@/components/prompt-input"
-import { DateTime } from "luxon"
-import { FileIcon } from "@opencode-ai/ui/file-icon"
-import { IconButton } from "@opencode-ai/ui/icon-button"
-import { Icon } from "@opencode-ai/ui/icon"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
-import { DiffChanges } from "@opencode-ai/ui/diff-changes"
-import { ResizeHandle } from "@opencode-ai/ui/resize-handle"
-import { Tabs } from "@opencode-ai/ui/tabs"
-import { useCodeComponent } from "@opencode-ai/ui/context/code"
-import { SessionTurn } from "@opencode-ai/ui/session-turn"
-import { createAutoScroll } from "@opencode-ai/ui/hooks"
-import { SessionMessageRail } from "@opencode-ai/ui/session-message-rail"
-import { SessionReview } from "@opencode-ai/ui/session-review"
-import {
- DragDropProvider,
- DragDropSensors,
- DragOverlay,
- SortableProvider,
- closestCenter,
- createSortable,
-} from "@thisbeyond/solid-dnd"
-import type { DragEvent } from "@thisbeyond/solid-dnd"
-import type { JSX } from "solid-js"
-import { useSync } from "@/context/sync"
-import { useTerminal, type LocalPTY } from "@/context/terminal"
-import { useLayout } from "@/context/layout"
-import { getDirectory, getFilename } from "@opencode-ai/util/path"
-import { Terminal } from "@/components/terminal"
-import { checksum } from "@opencode-ai/util/encode"
-import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { DialogSelectFile } from "@/components/dialog-select-file"
-import { DialogSelectModel } from "@/components/dialog-select-model"
-import { useCommand } from "@/context/command"
-import { useNavigate, useParams } from "@solidjs/router"
-import { UserMessage } from "@opencode-ai/sdk/v2"
-import { useSDK } from "@/context/sdk"
-import { usePrompt } from "@/context/prompt"
-import { extractPromptFromParts } from "@/utils/prompt"
-import { ConstrainDragYAxis, getDraggableId } from "@/utils/solid-dnd"
-
-export default function Page() {
- const layout = useLayout()
- const local = useLocal()
- const sync = useSync()
- const terminal = useTerminal()
- const dialog = useDialog()
- const codeComponent = useCodeComponent()
- const command = useCommand()
- const params = useParams()
- const navigate = useNavigate()
- const sdk = useSDK()
- const prompt = usePrompt()
-
- const sessionKey = createMemo(() => `${params.dir}${params.id ? "/" + params.id : ""}`)
- const tabs = createMemo(() => layout.tabs(sessionKey()))
- const info = createMemo(() => (params.id ? sync.session.get(params.id) : undefined))
- const revertMessageID = createMemo(() => info()?.revert?.messageID)
- const messages = createMemo(() => (params.id ? (sync.data.message[params.id] ?? []) : []))
- const userMessages = createMemo(() =>
- messages()
- .filter((m) => m.role === "user")
- .sort((a, b) => a.id.localeCompare(b.id)),
- )
- const visibleUserMessages = createMemo(() => {
- const revert = revertMessageID()
- if (!revert) return userMessages()
- return userMessages().filter((m) => m.id < revert)
- })
- const lastUserMessage = createMemo(() => visibleUserMessages()?.at(-1))
-
- const [store, setStore] = createStore({
- clickTimer: undefined as number | undefined,
- activeDraggable: undefined as string | undefined,
- activeTerminalDraggable: undefined as string | undefined,
- userInteracted: false,
- stepsExpanded: true,
- mobileStepsExpanded: {} as Record
-
-
-
-
- {props.children}
-
- {
- if (e.target === e.currentTarget) mobileSidebar.hide()
- }}
- />
-
-
- e.stopPropagation()}
- >
-
-
-
- )
- }
-
- const FileVisual = (props: { file: LocalFile; active?: boolean }): JSX.Element => {
- return (
-
- 1 && (
- terminal.close(props.terminal.id)} />
- )
- }
- >
- {props.terminal.title}
-
-
-
-
-
- M
-
-
- A
-
-
- D
-
-
-
-
- )
- }
-
- const SortableTab = (props: {
- tab: string
- onTabClick: (tab: string) => void
- onTabClose: (tab: string) => void
- }): JSX.Element => {
- const sortable = createSortable(props.tab)
- const [file] = createResource(
- () => props.tab,
- async (tab) => {
- if (tab.startsWith("file://")) {
- return local.file.node(tab.replace("file://", ""))
- }
- return undefined
- },
- )
- return (
- // @ts-ignore
-
-
- )
- }
-
- const showTabs = createMemo(() => layout.review.opened() && (diffs().length > 0 || tabs().all().length > 0))
-
- const mobileWorking = createMemo(() => status().type !== "idle")
- const mobileAutoScroll = createAutoScroll({
- working: mobileWorking,
- onUserInteracted: () => setStore("userInteracted", true),
- })
-
- const MobileTurns = () => (
-
- )
-
- const NewSessionView = () => (
-
-
- props.onTabClose(props.tab)} />
-
- }
- hideCloseButton
- onClick={() => props.onTabClick(props.tab)}
- >
-
- {(f) =>
-
-
-
-
-
- {(project) => (
-
-
- )
-
- const DesktopSessionContent = () => (
- New session
-
-
-
- {getDirectory(sync.data.path.directory)}
- {getFilename(sync.data.path.directory)}
-
-
-
- )}
-
- Last modified
-
- {DateTime.fromMillis(project().time.updated ?? project().time.created).toRelative()}
-
-
-
-
- setStore("stepsExpanded", (x) => !x)}
- onUserInteracted={() => setStore("userInteracted", true)}
- classes={{
- root: "pb-20 flex-1 min-w-0",
- content: "pb-20",
- container:
- "w-full " +
- (!showTabs() ? "max-w-200 mx-auto px-6" : visibleUserMessages().length > 1 ? "pr-6 pl-18" : "px-6"),
- }}
- />
-
-
-
-
-
-
-
-
-
- 0}>
-
-
-
- Session
-
-
- {diffs().length} Files Changed
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {
- inputRef = el
- }}
- />
-
-
-
-
-
-
-
-
- {(tab) => {
- const [file] = createResource(
- () => tab,
- async (tab) => {
- if (tab.startsWith("file://")) {
- return local.file.node(tab.replace("file://", ""))
- }
- return undefined
- },
- )
- return (
-
-
-
- {(f) => (
-
-
-
- )
- }}
-
-
-
-
- {(draggedFile) => {
- const [file] = createResource(
- () => draggedFile(),
- async (tab) => {
- if (tab.startsWith("file://")) {
- return local.file.node(tab.replace("file://", ""))
- }
- return undefined
- },
- )
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {
- inputRef = el
- }}
- />
-
-
-
-
-
-
-
-
-
-
-
-
-
- {(tab) =>
-
- dialog.show(() =>
-
-
-
-
-
-
-
-
-
- Review
-
- {info()?.summary?.files ?? 0}
-
-
-
- Open file
-
-
- }
- class="flex items-center"
- >
-
-
-
- {(f) =>
-
- )
- }}
-
-
-
-
- t.id)}>
- {(pty) =>
-
-
-
-
-
- New terminal
-
-
- }
- class="flex items-center"
- >
-
- {t().title}
-
- )}
-
+ 
+
-
Be the first to know when we release new products
+OpenCode will be available on desktop soon
Join the waitlist for early access.