store.terminal.opened),
+ open() {
+ setStore("terminal", "opened", true)
+ },
+ close() {
+ setStore("terminal", "opened", false)
+ },
+ toggle() {
+ setStore("terminal", "opened", (x) => !x)
+ },
+ height: createMemo(() => store.terminal.height),
+ resize(height: number) {
+ setStore("terminal", "height", height)
+ },
+ },
review: {
state: createMemo(() => store.review?.state ?? "closed"),
pane() {
diff --git a/packages/desktop/src/context/session.tsx b/packages/desktop/src/context/session.tsx
index 8efb354e11d8..4e9fe71f8a73 100644
--- a/packages/desktop/src/context/session.tsx
+++ b/packages/desktop/src/context/session.tsx
@@ -8,14 +8,25 @@ import { pipe, sumBy } from "remeda"
import { AssistantMessage, UserMessage } from "@opencode-ai/sdk"
import { useParams } from "@solidjs/router"
import { base64Encode } from "@/utils"
+import { useSDK } from "./sdk"
+
+export type LocalPTY = {
+ id: string
+ title: string
+ rows?: number
+ cols?: number
+ buffer?: string
+ scrollY?: number
+}
export const { use: useSession, provider: SessionProvider } = createSimpleContext({
name: "Session",
init: () => {
+ const sdk = useSDK()
const params = useParams()
const sync = useSync()
const name = createMemo(
- () => `___${base64Encode(sync.data.project.worktree)}/session${params.id ? "/" + params.id : ""}`,
+ () => `______${base64Encode(sync.data.project.worktree)}/session${params.id ? "/" + params.id : ""}`,
)
const [store, setStore] = makePersisted(
@@ -23,16 +34,21 @@ export const { use: useSession, provider: SessionProvider } = createSimpleContex
messageId?: string
tabs: {
active?: string
- opened: string[]
+ all: string[]
}
prompt: Prompt
cursor?: number
+ terminals: {
+ active?: string
+ all: LocalPTY[]
+ }
}>({
tabs: {
- opened: [],
+ all: [],
},
prompt: clonePrompt(DEFAULT_PROMPT),
cursor: undefined,
+ terminals: { all: [] },
}),
{
name: name(),
@@ -138,16 +154,16 @@ export const { use: useSession, provider: SessionProvider } = createSimpleContex
setStore("tabs", "active", tab)
},
setOpenedTabs(tabs: string[]) {
- setStore("tabs", "opened", tabs)
+ setStore("tabs", "all", tabs)
},
async openTab(tab: string) {
if (tab === "chat") {
setStore("tabs", "active", undefined)
return
}
- if (tab !== "review" && tab !== "terminal") {
- if (!store.tabs.opened.includes(tab)) {
- setStore("tabs", "opened", [...store.tabs.opened, tab])
+ if (tab !== "review") {
+ if (!store.tabs.all.includes(tab)) {
+ setStore("tabs", "all", [...store.tabs.all, tab])
}
}
setStore("tabs", "active", tab)
@@ -156,28 +172,88 @@ export const { use: useSession, provider: SessionProvider } = createSimpleContex
batch(() => {
setStore(
"tabs",
- "opened",
- store.tabs.opened.filter((x) => x !== tab),
+ "all",
+ store.tabs.all.filter((x) => x !== tab),
)
if (store.tabs.active === tab) {
- const index = store.tabs.opened.findIndex((f) => f === tab)
- const previous = store.tabs.opened[Math.max(0, index - 1)]
+ const index = store.tabs.all.findIndex((f) => f === tab)
+ const previous = store.tabs.all[Math.max(0, index - 1)]
setStore("tabs", "active", previous)
}
})
},
moveTab(tab: string, to: number) {
- const index = store.tabs.opened.findIndex((f) => f === tab)
+ const index = store.tabs.all.findIndex((f) => f === tab)
if (index === -1) return
setStore(
"tabs",
- "opened",
+ "all",
produce((opened) => {
opened.splice(to, 0, opened.splice(index, 1)[0])
}),
)
},
},
+ terminal: {
+ all: createMemo(() => Object.values(store.terminals.all)),
+ active: createMemo(() => store.terminals.active),
+ new() {
+ sdk.client.pty.create({ body: { title: `Terminal ${store.terminals.all.length + 1}` } }).then((pty) => {
+ const id = pty.data?.id
+ if (!id) return
+ batch(() => {
+ setStore("terminals", "all", [
+ ...store.terminals.all,
+ {
+ id,
+ title: pty.data?.title ?? "Terminal",
+ // rows: pty.data?.rows ?? 24,
+ // cols: pty.data?.cols ?? 80,
+ // buffer: "",
+ // scrollY: 0,
+ },
+ ])
+ setStore("terminals", "active", id)
+ })
+ })
+ },
+ update(pty: Partial
& { id: string }) {
+ setStore("terminals", "all", (x) => x.map((x) => (x.id === pty.id ? { ...x, ...pty } : x)))
+ sdk.client.pty.update({
+ path: { id: pty.id },
+ body: { title: pty.title, size: pty.cols && pty.rows ? { rows: pty.rows, cols: pty.cols } : undefined },
+ })
+ },
+ open(id: string) {
+ setStore("terminals", "active", id)
+ },
+ async close(id: string) {
+ batch(() => {
+ setStore(
+ "terminals",
+ "all",
+ store.terminals.all.filter((x) => x.id !== id),
+ )
+ if (store.terminals.active === id) {
+ const index = store.terminals.all.findIndex((f) => f.id === id)
+ const previous = store.tabs.all[Math.max(0, index - 1)]
+ setStore("terminals", "active", previous)
+ }
+ })
+ await sdk.client.pty.remove({ path: { id } })
+ },
+ move(id: string, to: number) {
+ const index = store.terminals.all.findIndex((f) => f.id === id)
+ if (index === -1) return
+ setStore(
+ "terminals",
+ "all",
+ produce((all) => {
+ all.splice(to, 0, all.splice(index, 1)[0])
+ }),
+ )
+ },
+ },
}
},
})
diff --git a/packages/desktop/src/pages/layout.tsx b/packages/desktop/src/pages/layout.tsx
index 15180c885660..377545ab9f5c 100644
--- a/packages/desktop/src/pages/layout.tsx
+++ b/packages/desktop/src/pages/layout.tsx
@@ -1,9 +1,9 @@
import { createMemo, For, ParentProps, Show } from "solid-js"
import { DateTime } from "luxon"
-import { A, useParams } from "@solidjs/router"
+import { A, useNavigate, useParams } from "@solidjs/router"
import { useLayout } from "@/context/layout"
import { useGlobalSync } from "@/context/global-sync"
-import { base64Encode } from "@/utils"
+import { base64Decode, base64Encode } from "@/utils"
import { Mark } from "@opencode-ai/ui/logo"
import { Button } from "@opencode-ai/ui/button"
import { Icon } from "@opencode-ai/ui/icon"
@@ -12,11 +12,21 @@ import { Tooltip } from "@opencode-ai/ui/tooltip"
import { Collapsible } from "@opencode-ai/ui/collapsible"
import { DiffChanges } from "@opencode-ai/ui/diff-changes"
import { getFilename } from "@opencode-ai/util/path"
+import { Select } from "@opencode-ai/ui/select"
+import { Session } from "@opencode-ai/sdk/client"
export default function Layout(props: ParentProps) {
+ const navigate = useNavigate()
const params = useParams()
const globalSync = useGlobalSync()
const layout = useLayout()
+ const currentDirectory = createMemo(() => base64Decode(params.dir ?? ""))
+ const sessions = createMemo(() => globalSync.child(currentDirectory())[0].session ?? [])
+ const currentSession = createMemo(() => sessions().find((s) => s.id === params.id) ?? sessions().at(0))
+
+ function navigateToSession(session: Session | undefined) {
+ navigate(`/${params.dir}/session/${session?.id}`)
+ }
const handleOpenProject = async () => {
// layout.projects.open(dir.)
@@ -24,7 +34,7 @@ export default function Layout(props: ParentProps) {
return (
-
+
+
+
+
+
+
+
+
+
+ Toggle terminal
+ Ctrl `
+
+ }
+ >
+
+
+