mirror of
https://github.com/anomalyco/opencode.git
synced 2026-09-11 11:26:24 +00:00
Compare commits
16
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 LukeParkerDev
|
d4539ff55c | ||
|
LukeParkerDev
|
7acdea1437 | ||
|
LukeParkerDev
|
890f8fe863 | ||
|
LukeParkerDev
|
fa4bce6f7a | ||
|
LukeParkerDev
|
d8804ffd65 | ||
|
LukeParkerDev
|
7bb391582b | ||
|
LukeParkerDev
|
07dcde43c6 | ||
|
LukeParkerDev
|
66b16d40f0 | ||
|
LukeParkerDev
|
de7ab3b082 | ||
|
LukeParkerDev
|
29a05fa343 | ||
|
LukeParkerDev
|
0dc7aa2411 | ||
|
LukeParkerDev
|
b5222ef904 | ||
|
LukeParkerDev
|
30c25008ac | ||
|
LukeParkerDev
|
7466567c51 | ||
|
LukeParkerDev
|
39310ee609 | ||
|
LukeParkerDev
|
cc40f5844c |
@@ -63,6 +63,7 @@
|
||||
"@ibm/plex": "6.4.1",
|
||||
"@kobalte/core": "catalog:",
|
||||
"@opencode/client": "workspace:*",
|
||||
"@opencode/plugin": "workspace:*",
|
||||
"@opencode/plugin-browser": "workspace:*",
|
||||
"@opencode/schema": "workspace:*",
|
||||
"@opencode/session-ui": "workspace:*",
|
||||
@@ -426,6 +427,7 @@
|
||||
"@lydell/node-pty": "catalog:",
|
||||
"@opencode/app": "workspace:*",
|
||||
"@opencode/client": "workspace:*",
|
||||
"@opencode/plugin": "workspace:*",
|
||||
"@opencode/plugin-browser": "workspace:*",
|
||||
"@opencode/schema": "workspace:*",
|
||||
"@opencode/ui": "workspace:*",
|
||||
@@ -597,8 +599,12 @@
|
||||
"@types/bun": "catalog:",
|
||||
"@types/node": "catalog:",
|
||||
"@typescript/native-preview": "catalog:",
|
||||
"@zip.js/zip.js": "2.7.62",
|
||||
"electron": "42.10.1",
|
||||
"solid-js": "catalog:",
|
||||
"typescript": "catalog:",
|
||||
"vite": "8.2.2",
|
||||
"vite-plugin-solid": "2.11.14",
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@opencode/theme": "workspace:*",
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
<!doctype html><html><head><meta charset="UTF-8" /><style>html,body,#root{height:100%;margin:0}#root{display:flex;flex-direction:column}</style></head><body><div id="root"></div><script type="module" src="./fixture.tsx"></script></body></html>
|
||||
@@ -0,0 +1,81 @@
|
||||
import { AppBaseProviders, AppInterface } from "../../src/app"
|
||||
import { PlatformProvider } from "../../src/runtime/platform/platform"
|
||||
import { createWebPlatform } from "../../src/runtime/platform/web"
|
||||
import { ServerConnection } from "../../src/runtime/server/registry"
|
||||
import { Plugin } from "@opencode/plugin/desktop"
|
||||
import { Panel } from "@opencode/plugin/desktop/solid"
|
||||
import { Button } from "@opencode/ui/button"
|
||||
import { TextInput } from "@opencode/ui/text-input"
|
||||
import { Stack, Text } from "@opencode/ui/layout"
|
||||
import { createMemoryHistory, MemoryRouter } from "@solidjs/router"
|
||||
import { createStore } from "solid-js/store"
|
||||
import { render } from "solid-js/web"
|
||||
import { base64Encode } from "@opencode/util/encode"
|
||||
import { fixture } from "../performance/timeline/session-timeline-stress.fixture"
|
||||
|
||||
const plugin = Plugin.define({
|
||||
id: "test.panels",
|
||||
setup(ctx) {
|
||||
const [state, setState] = createStore({ available: true, closed: 0 })
|
||||
const [draft, saveDraft] = ctx.storage.memory("draft", { initial: { text: "" } })
|
||||
ctx.ui.slot({
|
||||
append: "titlebar.actions",
|
||||
render: () => (
|
||||
<>
|
||||
<Button
|
||||
onClick={() => {
|
||||
const session = ctx.sessions.current()
|
||||
if (session) ctx.ui.panel.open("notes", session)
|
||||
}}
|
||||
>
|
||||
Open notes
|
||||
</Button>
|
||||
<Button onClick={() => setState("available", !state.available)}>Toggle contribution</Button>
|
||||
</>
|
||||
),
|
||||
})
|
||||
ctx.ui.slot({
|
||||
append: "session.panel",
|
||||
when: () => state.available,
|
||||
render: () => (
|
||||
<>
|
||||
<Panel id="notes" title="Notes" onClose={() => setState("closed", (count) => count + 1)}>
|
||||
<Stack padding="medium">
|
||||
<TextInput
|
||||
aria-label="Notes draft"
|
||||
value={draft.text}
|
||||
onInput={(event) =>
|
||||
saveDraft((draft) => {
|
||||
draft.text = event.currentTarget.value
|
||||
})
|
||||
}
|
||||
/>
|
||||
</Stack>
|
||||
</Panel>
|
||||
<Panel id="results" title="Results">
|
||||
<Stack padding="medium">
|
||||
<Text>Closed notes: {state.closed}</Text>
|
||||
</Stack>
|
||||
</Panel>
|
||||
</>
|
||||
),
|
||||
})
|
||||
},
|
||||
})
|
||||
const web = createWebPlatform("test")
|
||||
const history = createMemoryHistory()
|
||||
history.set({ value: `/server/${base64Encode(web.currentServerUrl!)}/session/${fixture.sourceID}` })
|
||||
render(
|
||||
() => (
|
||||
<PlatformProvider value={{ ...web.platform, extensionPlugins: [plugin] }}>
|
||||
<AppBaseProviders>
|
||||
<AppInterface
|
||||
servers={[{ type: "http", http: { url: web.currentServerUrl! } }]}
|
||||
defaultServer={ServerConnection.Key.make(web.currentServerUrl!)}
|
||||
router={(props) => <MemoryRouter {...props} history={history} />}
|
||||
/>
|
||||
</AppBaseProviders>
|
||||
</PlatformProvider>
|
||||
),
|
||||
document.getElementById("root")!,
|
||||
)
|
||||
@@ -0,0 +1 @@
|
||||
<!doctype html><html><head><meta charset="UTF-8" /><style>html,body,#root{height:100%;margin:0}#root{display:flex;flex-direction:column}</style></head><body><div id="root"></div><script type="module" src="./manager-fixture.tsx"></script></body></html>
|
||||
@@ -0,0 +1,53 @@
|
||||
import { AppBaseProviders, AppInterface } from "../../src/app"
|
||||
import { PlatformProvider } from "../../src/runtime/platform/platform"
|
||||
import { createWebPlatform } from "../../src/runtime/platform/web"
|
||||
import { ServerConnection } from "../../src/runtime/server/registry"
|
||||
import { createMemoryHistory, MemoryRouter } from "@solidjs/router"
|
||||
import { render } from "solid-js/web"
|
||||
import { Schema } from "effect"
|
||||
import { ExtensionManager } from "@opencode/plugin/desktop/manager"
|
||||
|
||||
const web = createWebPlatform("test")
|
||||
const history = createMemoryHistory()
|
||||
history.set({ value: "/settings" })
|
||||
const inventory = Schema.Array(ExtensionManager.Installed)
|
||||
async function request(name: string, body?: BodyInit) {
|
||||
const response = await fetch(`/__desktop-extensions/${name}`, { method: body ? "POST" : "GET", body })
|
||||
const value: unknown = await response.json()
|
||||
if (!response.ok)
|
||||
throw new ExtensionManager.ManagerError(Schema.decodeUnknownSync(ExtensionManager.Failure)(value).code)
|
||||
return value
|
||||
}
|
||||
const manager: ExtensionManager.Transport = {
|
||||
list: async () => Schema.decodeUnknownSync(inventory)(await request("list")),
|
||||
install: async (data) =>
|
||||
Schema.decodeUnknownSync(inventory)(await request("install", data as Uint8Array<ArrayBuffer>)),
|
||||
installURL: async (url) => Schema.decodeUnknownSync(inventory)(await request("url", JSON.stringify({ url }))),
|
||||
enable: async (id, enabled) =>
|
||||
Schema.decodeUnknownSync(inventory)(await request("enable", JSON.stringify({ id, enabled }))),
|
||||
reload: async (id) => Schema.decodeUnknownSync(inventory)(await request("reload", JSON.stringify({ id }))),
|
||||
source: async (id, revision) =>
|
||||
Schema.decodeUnknownSync(ExtensionManager.Source)(await request("source", JSON.stringify({ id, revision }))),
|
||||
assetURL: (id, revision, path) => `/__desktop-extensions/assets/${id}/${revision}/${path}`,
|
||||
onChange(callback) {
|
||||
const listener = (event: Event) => {
|
||||
if (event instanceof CustomEvent) callback(Schema.decodeUnknownSync(inventory)(event.detail))
|
||||
}
|
||||
window.addEventListener("test-extensions-changed", listener)
|
||||
return () => window.removeEventListener("test-extensions-changed", listener)
|
||||
},
|
||||
}
|
||||
render(
|
||||
() => (
|
||||
<PlatformProvider value={{ ...web.platform, extensionManager: manager }}>
|
||||
<AppBaseProviders>
|
||||
<AppInterface
|
||||
servers={[{ type: "http", http: { url: web.currentServerUrl! } }]}
|
||||
defaultServer={ServerConnection.Key.make(web.currentServerUrl!)}
|
||||
router={(props) => <MemoryRouter {...props} history={history} />}
|
||||
/>
|
||||
</AppBaseProviders>
|
||||
</PlatformProvider>
|
||||
),
|
||||
document.getElementById("root")!,
|
||||
)
|
||||
@@ -0,0 +1,264 @@
|
||||
import { expect, test } from "@playwright/test"
|
||||
import { Schema } from "effect"
|
||||
import { createServer } from "node:http"
|
||||
import { once } from "node:events"
|
||||
import { openDatabase } from "../../../desktop/src/main/storage/database"
|
||||
import { createExtensionManager, readExtensionAsset } from "../../../desktop/src/main/extensions/manager"
|
||||
import { ExtensionManager } from "@opencode/plugin/desktop/manager"
|
||||
import { extensionArchive } from "../../../desktop/test/extensions/fixture"
|
||||
import { mockOpenCodeServer } from "../utils/mock-server"
|
||||
import { fixture } from "../performance/timeline/session-timeline-stress.fixture"
|
||||
import { installStressSessionTabs } from "../performance/timeline/timeline-test-helpers"
|
||||
|
||||
const renderer = (version: string) => `
|
||||
const { usePlugin } = require('@opencode/plugin/desktop');
|
||||
const { createEffect, createComponent } = require('solid-js');
|
||||
const { Panel } = require('@opencode/plugin/desktop/solid');
|
||||
const { Schema } = require('effect');
|
||||
module.exports.default = { id: 'test.lifecycle', setup(ctx) {
|
||||
const [documentState, setDocument, ready] = ctx.storage.persist('document', Schema.Struct({ text: Schema.String }), { text: 'empty' }, { legacyKey: 'extension-fixture-legacy' });
|
||||
const [state, update] = ctx.storage.memory('counts', { initial: { starts: 0, stops: 0 } });
|
||||
update(state => state.starts++);
|
||||
ctx.lifecycle.own(() => update(state => state.stops++));
|
||||
const marker = (id) => {
|
||||
const output = document.createElement('output'); output.hidden = true; output.dataset.testid = id;
|
||||
createEffect(() => output.textContent = ${JSON.stringify(version)} + ':' + state.starts + ':' + state.stops);
|
||||
return output;
|
||||
};
|
||||
ctx.commands.register(() => [
|
||||
{ id: 'show', title: 'Show extension fixture', bind: 'mod+shift+y', run() { const session = ctx.sessions.current(); if (session) ctx.ui.panel.open('state', session) } },
|
||||
{ id: 'save', title: 'Save extension fixture', bind: 'mod+shift+x', run() { setDocument('text', 'saved') } },
|
||||
]);
|
||||
ctx.ui.slot({ append: 'session.panel', render: () => createComponent(Panel, { id: 'state', title: 'File utilities', group: 'state', get children() { return marker('extension-panel-lifecycle') } }) });
|
||||
ctx.ui.slot({ append: 'app', render() {
|
||||
if (usePlugin().lifecycle.signal !== ctx.lifecycle.signal) throw new Error('Shared plugin context identity was lost');
|
||||
const stored = document.createElement('output'); stored.hidden = true; stored.dataset.testid = 'extension-persisted';
|
||||
createEffect(() => stored.textContent = ready() ? documentState.text : 'loading');
|
||||
return [marker('extension-lifecycle'), stored];
|
||||
} });
|
||||
} };`
|
||||
const payload = Schema.Struct({
|
||||
id: Schema.optionalKey(Schema.String),
|
||||
revision: Schema.optionalKey(Schema.String),
|
||||
enabled: Schema.optionalKey(Schema.Boolean),
|
||||
url: Schema.optionalKey(Schema.String),
|
||||
})
|
||||
|
||||
for (const direction of ["ltr", "rtl"] as const)
|
||||
test(`manager installs, hot-replaces, reloads, and disables across windows in ${direction}`, async ({
|
||||
page,
|
||||
context,
|
||||
}, info) => {
|
||||
const database = openDatabase(":memory:")
|
||||
const manager = createExtensionManager({
|
||||
db: database.db,
|
||||
fetch,
|
||||
changed(_id, entries) {
|
||||
context.pages().forEach((page) => {
|
||||
void page.evaluate(
|
||||
(entries) => window.dispatchEvent(new CustomEvent("test-extensions-changed", { detail: entries })),
|
||||
entries,
|
||||
)
|
||||
})
|
||||
},
|
||||
})
|
||||
const archive = async (version: string, code = renderer(version)) =>
|
||||
extensionArchive({
|
||||
version,
|
||||
renderer: code,
|
||||
files: { "assets/style.css": ":root { --installed-extension-marker: 1; }" },
|
||||
manifest: {
|
||||
imports: ["@opencode/plugin/desktop", "@opencode/plugin/desktop/solid", "solid-js", "effect"],
|
||||
style: "assets/style.css",
|
||||
},
|
||||
})
|
||||
const first = await archive("1.0.0")
|
||||
const http = createServer((_request, response) => {
|
||||
response.setHeader("Content-Type", "application/vnd.ocdx")
|
||||
response.end(first)
|
||||
})
|
||||
http.listen(0, "127.0.0.1")
|
||||
await once(http, "listening")
|
||||
const address = http.address()
|
||||
if (!address || typeof address === "string") throw new Error("Fixture address is unavailable")
|
||||
await context.route("**/__desktop-extensions/**", async (route) => {
|
||||
const path = new URL(route.request().url()).pathname.split("/").slice(2)
|
||||
try {
|
||||
if (path[0] === "assets") {
|
||||
const bytes = readExtensionAsset(database.db, path[1], path[2], path.slice(3).join("/"))
|
||||
await route.fulfill({ status: bytes ? 200 : 404, body: bytes, contentType: "text/css" })
|
||||
return
|
||||
}
|
||||
const data = Schema.decodeUnknownSync(payload)(
|
||||
JSON.parse(path[0] === "install" ? "{}" : (route.request().postData() ?? "{}")),
|
||||
)
|
||||
const result =
|
||||
path[0] === "install"
|
||||
? await manager.install(route.request().postDataBuffer()!)
|
||||
: path[0] === "url"
|
||||
? await manager.installURL(data.url ?? "")
|
||||
: path[0] === "enable"
|
||||
? manager.enable(data.id ?? "", data.enabled ?? false)
|
||||
: path[0] === "reload"
|
||||
? manager.reload(data.id ?? "")
|
||||
: path[0] === "source"
|
||||
? manager.source(data.id ?? "", data.revision)
|
||||
: manager.list()
|
||||
await route.fulfill({ json: result })
|
||||
} catch (error) {
|
||||
await route.fulfill({
|
||||
status: 400,
|
||||
json: { code: error instanceof ExtensionManager.ManagerError ? error.code : "storage" },
|
||||
})
|
||||
}
|
||||
})
|
||||
const open = async (target: typeof page) => {
|
||||
await mockOpenCodeServer(target, {
|
||||
sessions: fixture.sessions,
|
||||
provider: fixture.provider,
|
||||
directory: fixture.directory,
|
||||
project: fixture.project,
|
||||
pageMessages: () => ({ items: [] }),
|
||||
})
|
||||
await installStressSessionTabs(target)
|
||||
await target.addInitScript(() =>
|
||||
localStorage.setItem("opencode.global.dat:extension-fixture-legacy", JSON.stringify({ text: "legacy" })),
|
||||
)
|
||||
await target.goto("/e2e/extensions/manager-fixture.html")
|
||||
await target.getByTestId("settings-screen").getByRole("tab", { name: "Extensions", exact: true }).click()
|
||||
await expect(target.getByRole("heading", { name: "Install extensions", exact: true })).toBeVisible()
|
||||
const settings = target.getByTestId("settings-screen")
|
||||
const navigation = settings.locator(".settings-nav")
|
||||
await expect(
|
||||
navigation
|
||||
.locator('[data-slot="settings-nav-group"]')
|
||||
.filter({ has: target.getByRole("tab", { name: "Extensions", exact: true }) })
|
||||
.getByRole("tab"),
|
||||
).toHaveText(["Extensions", "Experimental"])
|
||||
await expect(
|
||||
navigation
|
||||
.locator('[data-slot="settings-nav-group"]')
|
||||
.filter({ has: target.getByRole("tab", { name: "Tools", exact: true }) })
|
||||
.getByRole("tab"),
|
||||
).toHaveText(["Providers", "Models", "Tools"])
|
||||
await expect(settings.getByRole("tab", { name: "Desktop", exact: true })).toHaveCount(0)
|
||||
await expect(settings.getByRole("tab", { name: "MCPs", exact: true })).toHaveCount(0)
|
||||
await settings.getByRole("tab", { name: "Tools", exact: true }).click()
|
||||
await expect(settings.getByRole("heading", { name: "Tools", exact: true })).toBeVisible()
|
||||
await expect(settings.getByRole("tab", { name: "MCPs", exact: true })).toBeVisible()
|
||||
await expect(settings.getByRole("tab", { name: "Plugins", exact: true })).toBeVisible()
|
||||
await expect(settings.getByRole("tab", { name: "Skills", exact: true })).toBeVisible()
|
||||
await expect(settings.getByRole("heading", { name: "Install extensions", exact: true })).toHaveCount(0)
|
||||
await settings.getByRole("tab", { name: "Extensions", exact: true }).click()
|
||||
await target.evaluate((direction) => {
|
||||
document.documentElement.dir = direction
|
||||
}, direction)
|
||||
}
|
||||
try {
|
||||
await open(page)
|
||||
await page.setViewportSize({ width: 640, height: 900 })
|
||||
await page.getByRole("button", { name: "Extensions", exact: true }).click()
|
||||
await page.getByRole("menuitemradio", { name: "Tools", exact: true }).click()
|
||||
await expect(page.getByRole("heading", { name: "Tools", exact: true })).toBeVisible()
|
||||
await page.getByRole("button", { name: "Tools", exact: true }).click()
|
||||
await page.getByRole("menuitemradio", { name: "Extensions", exact: true }).click()
|
||||
await expect(page.getByRole("heading", { name: "Install extensions", exact: true })).toBeVisible()
|
||||
await page.setViewportSize({ width: 1280, height: 720 })
|
||||
await expect(page.locator('[data-component="desktop-extension-manager"]').getByRole("status")).toHaveCount(0)
|
||||
await page.screenshot({ path: info.outputPath("extensions-manager-empty.png") })
|
||||
await page
|
||||
.getByRole("textbox", { name: "Extension URL", exact: true })
|
||||
.fill(`http://127.0.0.1:${address.port}/extension.ocdx`)
|
||||
await page.getByRole("textbox", { name: "Extension URL", exact: true }).press("Enter")
|
||||
const enabled = page.getByRole("switch", { name: "Enable File utilities", exact: true })
|
||||
await expect(enabled).toBeChecked()
|
||||
await expect(page.getByTestId("extension-lifecycle")).toHaveText("1.0.0:1:0")
|
||||
await expect(page.getByTestId("extension-persisted")).toHaveText("legacy")
|
||||
await page.keyboard.press("Control+Shift+x")
|
||||
await expect(page.getByTestId("extension-persisted")).toHaveText("saved")
|
||||
await page.screenshot({ path: info.outputPath("extensions-manager.png") })
|
||||
await page.getByRole("button", { name: "Reload File utilities", exact: true }).click()
|
||||
await expect(page.getByTestId("extension-lifecycle")).toHaveText("1.0.0:2:1")
|
||||
await expect(page.getByTestId("extension-persisted")).toHaveText("saved")
|
||||
await expect(page.locator('link[href*="/__desktop-extensions/assets/"]')).toHaveCount(1)
|
||||
const second = await context.newPage()
|
||||
await open(second)
|
||||
await expect(second.getByTestId("extension-lifecycle")).toHaveText("1.0.0:1:0")
|
||||
await expect(second.getByTestId("extension-persisted")).toHaveText("saved")
|
||||
await second.locator('header a[href$="/ses_smoke_source"]').click()
|
||||
await expect(second.getByRole("heading", { name: fixture.expected.sourceTitle, exact: true })).toBeVisible()
|
||||
await expect(second.getByRole("button", { name: "Toggle review", exact: true })).toBeEnabled()
|
||||
await second.keyboard.press("Control+Shift+y")
|
||||
await expect(second.getByTestId("extension-panel-lifecycle")).toHaveText("1.0.0:1:0")
|
||||
await page.getByLabel("Extension files", { exact: true }).setInputFiles({
|
||||
name: "update.ocdx",
|
||||
mimeType: "application/vnd.ocdx",
|
||||
buffer: Buffer.from(await archive("2.0.0")),
|
||||
})
|
||||
await expect(page.getByTestId("extension-lifecycle")).toHaveText("2.0.0:3:2")
|
||||
await expect(page.getByTestId("extension-persisted")).toHaveText("saved")
|
||||
await expect(second.getByTestId("extension-lifecycle")).toHaveText("2.0.0:2:1")
|
||||
await expect(second.getByTestId("extension-panel-lifecycle")).toHaveText("2.0.0:2:1")
|
||||
await page.getByLabel("Extension files", { exact: true }).setInputFiles({
|
||||
name: "broken.ocdx",
|
||||
mimeType: "application/vnd.ocdx",
|
||||
buffer: Buffer.from(
|
||||
await archive(
|
||||
"3.0.0",
|
||||
`module.exports.default = { id: 'test.lifecycle', setup(ctx) { ctx.ui.slot({ append: 'app', render() { const node = document.createElement('output'); node.hidden = true; node.dataset.testid = 'partial-load'; return node } }); throw new Error('broken update') } }`,
|
||||
),
|
||||
),
|
||||
})
|
||||
await expect(page.getByRole("alert")).toHaveText("Unable to activate File utilities.")
|
||||
await expect(page.getByTestId("extension-lifecycle")).toHaveText("2.0.0:3:2")
|
||||
await expect(page.getByTestId("partial-load")).toHaveCount(0)
|
||||
await expect(page.locator('link[href*="/__desktop-extensions/assets/"]')).toHaveCount(1)
|
||||
await page.getByLabel("Extension files", { exact: true }).setInputFiles({
|
||||
name: "fixed.ocdx",
|
||||
mimeType: "application/vnd.ocdx",
|
||||
buffer: Buffer.from(await archive("4.0.0")),
|
||||
})
|
||||
await expect(page.getByTestId("extension-lifecycle")).toHaveText("4.0.0:4:3")
|
||||
await second.keyboard.press("Control+,")
|
||||
await second.getByTestId("settings-screen").getByRole("tab", { name: "Extensions", exact: true }).click()
|
||||
await page
|
||||
.locator('[data-component="settings-row"]')
|
||||
.filter({ has: enabled })
|
||||
.locator('[data-slot="switch-control"]')
|
||||
.click()
|
||||
await expect(second.getByRole("switch", { name: "Enable File utilities", exact: true })).not.toBeChecked()
|
||||
await expect(page.getByTestId("extension-lifecycle")).toHaveCount(0)
|
||||
await expect(page.getByTestId("extension-persisted")).toHaveCount(0)
|
||||
await expect(second.getByTestId("extension-lifecycle")).toHaveCount(0)
|
||||
await expect(page.locator('link[href*="/__desktop-extensions/assets/"]')).toHaveCount(0)
|
||||
await enabled.press("Space")
|
||||
await expect(page.getByTestId("extension-lifecycle")).toHaveText("4.0.0:5:4")
|
||||
await expect(page.getByTestId("extension-persisted")).toHaveText("saved")
|
||||
await expect(second.getByTestId("extension-lifecycle")).toHaveText("4.0.0:4:3")
|
||||
const archives = await Promise.all(
|
||||
["Text helpers", "Path helpers"].map(async (name, index) => ({
|
||||
name: `helper-${index}.ocdx`,
|
||||
bytes: Buffer.from(await extensionArchive({ id: `test.helper-${index}`, manifest: { name } })).toString(
|
||||
"base64",
|
||||
),
|
||||
})),
|
||||
)
|
||||
const drop = await page.evaluateHandle((archives) => {
|
||||
const transfer = new DataTransfer()
|
||||
archives.forEach((archive) =>
|
||||
transfer.items.add(
|
||||
new File([Uint8Array.from(atob(archive.bytes), (char) => char.charCodeAt(0))], archive.name),
|
||||
),
|
||||
)
|
||||
return transfer
|
||||
}, archives)
|
||||
await page.locator(".desktop-extension-drop").dispatchEvent("drop", { dataTransfer: drop })
|
||||
await expect(page.getByRole("switch", { name: "Enable Text helpers", exact: true })).toBeChecked()
|
||||
await expect(second.getByRole("switch", { name: "Enable Path helpers", exact: true })).toBeChecked()
|
||||
await drop.dispose()
|
||||
await second.close()
|
||||
} finally {
|
||||
http.close()
|
||||
database.close()
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,48 @@
|
||||
import { test, expect } from "@playwright/test"
|
||||
import { mockOpenCodeServer } from "../utils/mock-server"
|
||||
import { fixture } from "../performance/timeline/session-timeline-stress.fixture"
|
||||
import { installStressSessionTabs } from "../performance/timeline/timeline-test-helpers"
|
||||
|
||||
test("independent panel instances retain drafts, close explicitly, and obey plugin availability", async ({
|
||||
page,
|
||||
}, info) => {
|
||||
await mockOpenCodeServer(page, {
|
||||
sessions: fixture.sessions,
|
||||
provider: fixture.provider,
|
||||
directory: fixture.directory,
|
||||
project: fixture.project,
|
||||
pageMessages: () => ({ items: [] }),
|
||||
})
|
||||
await installStressSessionTabs(page)
|
||||
await page.goto("/e2e/extensions/fixture.html")
|
||||
await expect(page.getByRole("heading", { name: fixture.expected.sourceTitle, exact: true })).toBeVisible()
|
||||
await page.getByRole("button", { name: "Open notes", exact: true }).click()
|
||||
await page.getByRole("textbox", { name: "Notes draft", exact: true }).fill("Retained draft")
|
||||
await page.getByRole("tab", { name: "Results", exact: true }).click()
|
||||
await expect(page.getByText("Closed notes: 0", { exact: true })).toBeVisible()
|
||||
await page.getByRole("tab", { name: "Notes", exact: true }).click()
|
||||
await expect(page.getByRole("textbox", { name: "Notes draft", exact: true })).toHaveValue("Retained draft")
|
||||
await page
|
||||
.locator('[data-slot="tabs-trigger-wrapper"][data-value="extension:test.panels:notes"]')
|
||||
.getByRole("button", { name: "Close tab", exact: true })
|
||||
.click()
|
||||
await page.getByRole("tab", { name: "Results", exact: true }).click()
|
||||
await expect(page.getByText("Closed notes: 1", { exact: true })).toBeVisible()
|
||||
await page.getByRole("button", { name: "Open notes", exact: true }).click()
|
||||
await expect(page.getByRole("textbox", { name: "Notes draft", exact: true })).toHaveValue("Retained draft")
|
||||
await page.screenshot({ path: info.outputPath("extension-panels.png") })
|
||||
await page
|
||||
.getByRole("tab", { name: "Results", exact: true })
|
||||
.dragTo(page.getByRole("tab", { name: "Notes", exact: true }))
|
||||
await expect(page.getByRole("tab", { name: /^(Notes|Results)$/ })).toHaveText(["Results", "Notes"])
|
||||
await page.getByRole("button", { name: "Home", exact: true }).click()
|
||||
await page.locator('header a[href$="/ses_smoke_source"]').click()
|
||||
await page.getByRole("button", { name: "Open notes", exact: true }).click()
|
||||
await expect(page.getByRole("tab", { name: /^(Notes|Results)$/ })).toHaveText(["Results", "Notes"])
|
||||
await expect(page.getByRole("textbox", { name: "Notes draft", exact: true })).toHaveValue("Retained draft")
|
||||
await page.getByRole("button", { name: "Toggle contribution", exact: true }).click()
|
||||
await expect(page.getByRole("tab", { name: "Notes", exact: true })).toHaveCount(0)
|
||||
await page.getByRole("button", { name: "Toggle contribution", exact: true }).click()
|
||||
await page.getByRole("button", { name: "Open notes", exact: true }).click()
|
||||
await expect(page.getByRole("textbox", { name: "Notes draft", exact: true })).toHaveValue("Retained draft")
|
||||
})
|
||||
@@ -0,0 +1,26 @@
|
||||
import { expect, test } from "@playwright/test"
|
||||
import { mockOpenCodeServer } from "../utils/mock-server"
|
||||
import { fixture } from "../performance/timeline/session-timeline-stress.fixture"
|
||||
import { installStressSessionTabs } from "../performance/timeline/timeline-test-helpers"
|
||||
|
||||
test.use({ viewport: { width: 1280, height: 720 }, serviceWorkers: "block" })
|
||||
test("server tools remain available without a native extension manager", async ({ page }, info) => {
|
||||
await mockOpenCodeServer(page, {
|
||||
sessions: fixture.sessions,
|
||||
provider: fixture.provider,
|
||||
directory: fixture.directory,
|
||||
project: fixture.project,
|
||||
pageMessages: () => ({ items: [] }),
|
||||
})
|
||||
await installStressSessionTabs(page)
|
||||
await page.goto("/")
|
||||
await page.getByRole("button", { name: "Settings", exact: true }).click()
|
||||
const settings = page.getByTestId("settings-screen")
|
||||
await settings.getByRole("tab", { name: "Tools", exact: true }).click()
|
||||
await expect(settings.getByRole("heading", { name: "Tools", exact: true })).toBeVisible()
|
||||
await expect(settings.getByRole("tab", { name: "MCPs", exact: true })).toHaveAttribute("aria-selected", "true")
|
||||
await expect(settings.getByRole("tab", { name: "Plugins", exact: true })).toBeVisible()
|
||||
await expect(settings.getByRole("tab", { name: "Skills", exact: true })).toBeVisible()
|
||||
await expect(settings.getByRole("tab", { name: "Extensions", exact: true })).toHaveCount(0)
|
||||
await page.screenshot({ path: info.outputPath("tools-settings.png") })
|
||||
})
|
||||
@@ -28,7 +28,9 @@ resizing reduces the effective row capacity. The report records actual retained
|
||||
rows and the first retained fixture record rather than assuming 10,000 rows. Completion
|
||||
requires the final marker in Ghostty and completion of its write callbacks, not
|
||||
just WebSocket delivery. Teardown requires Home readiness and the final serialized
|
||||
snapshot. Input, focus, resizing, and native process survival are checked.
|
||||
snapshot, capped at the production limit of 2,000 scrollback rows plus the screen.
|
||||
The snapshot must contain the same ordered workload records as that retained tail.
|
||||
Input, focus, resizing, and native process survival are checked.
|
||||
|
||||
`probe.ts` is included only by this benchmark build. It observes actual writes,
|
||||
renderer calls, and serialization. Chrome `TaskDuration` measures renderer task
|
||||
|
||||
@@ -236,6 +236,15 @@ for (const scenario of ["visible-output", "hidden-output", "full-scrollback-tear
|
||||
const close = page.locator(`[data-titlebar-tab-slot]:has(a[href="${href}"]) [data-component="icon-button-v2"]`)
|
||||
await expect(close).toBeVisible()
|
||||
const cpuBefore = await cdp.send("Performance.getMetrics")
|
||||
const retained = await page.evaluate(() => {
|
||||
const term = window.terminalProbe.term!
|
||||
const buffer = term.buffer.normal
|
||||
const start = Math.max(0, buffer.length - term.rows - 2_000)
|
||||
return Array.from(
|
||||
{ length: buffer.length - start },
|
||||
(_, index) => buffer.getLine(start + index)?.translateToString(true) ?? "",
|
||||
).join("\n")
|
||||
})
|
||||
const start = await page.evaluate(() => performance.now())
|
||||
await close.click()
|
||||
await expect(page).toHaveURL("/")
|
||||
@@ -256,9 +265,11 @@ for (const scenario of ["visible-output", "hidden-output", "full-scrollback-tear
|
||||
cpuBefore.metrics.find((x) => x.name === "TaskDuration")!.value) *
|
||||
1000
|
||||
const snapshot = await page.evaluate(() => window.terminalProbe.serialized[0].value)
|
||||
expect(Array.from(snapshot.matchAll(/-(\d{5})\.test\.ts/g), (match) => Number(match[1]))).toEqual(
|
||||
Array.from({ length: 12_000 - produced.firstRecord }, (_, index) => produced.firstRecord + index),
|
||||
)
|
||||
const records = (text: string) => Array.from(text.matchAll(/-(\d{5})\.test\.ts/g), (match) => Number(match[1]))
|
||||
const expected = records(retained)
|
||||
const actual = records(snapshot)
|
||||
expect(actual.length).toBe(expected.length)
|
||||
expect(actual.every((record, index) => record === expected[index])).toBe(true)
|
||||
expect(snapshot).toContain("TERMINAL_WORKLOAD_DONE")
|
||||
await writeFile(
|
||||
path.join(
|
||||
@@ -301,6 +312,7 @@ for (const scenario of ["visible-output", "hidden-output", "full-scrollback-tear
|
||||
await expect
|
||||
.poll(async () => sizes.at(-1)?.cols === (await page.evaluate(() => window.terminalProbe.term!.cols)))
|
||||
.toBe(true)
|
||||
await expect(page.locator('#terminal-panel [data-slot="tabs-list"]')).toHaveCSS("padding-inline-start", "12px")
|
||||
expect(closed).toBe(0)
|
||||
}
|
||||
if (process.env.TERMINAL_SCREENSHOTS && scenario !== "full-scrollback-teardown") {
|
||||
|
||||
@@ -169,7 +169,7 @@ test("worktree deletion sends the project location separately from the target",
|
||||
await expect(settings.getByText("11 worktrees", { exact: true })).toBeVisible()
|
||||
})
|
||||
|
||||
test("extensions opens without waiting for MCPs", async ({ page }) => {
|
||||
test("tools opens without waiting for MCPs", async ({ page }) => {
|
||||
const mcps = Promise.withResolvers<void>()
|
||||
await page.route("**/api/mcp", async (route) => {
|
||||
await mcps.promise
|
||||
@@ -179,9 +179,9 @@ test("extensions opens without waiting for MCPs", async ({ page }) => {
|
||||
})
|
||||
const settings = page.getByTestId("settings-screen")
|
||||
const requested = page.waitForRequest((request) => new URL(request.url()).pathname === "/api/mcp")
|
||||
await settings.getByRole("tab", { name: "Extensions", exact: true }).click()
|
||||
await settings.getByRole("tab", { name: "Tools", exact: true }).click()
|
||||
await requested
|
||||
await expect(settings.getByRole("heading", { name: "Extensions", exact: true })).toBeVisible()
|
||||
await expect(settings.getByRole("heading", { name: "Tools", exact: true })).toBeVisible()
|
||||
await expect(settings.getByRole("button", { name: "Back to app" })).toBeVisible()
|
||||
mcps.resolve()
|
||||
await settings.getByRole("tab", { name: "MCPs", exact: true }).click()
|
||||
|
||||
@@ -55,7 +55,7 @@ for (const viewport of [
|
||||
"Worktrees",
|
||||
"Providers",
|
||||
"Models",
|
||||
"Extensions",
|
||||
"Tools",
|
||||
"Experimental",
|
||||
"About",
|
||||
]) {
|
||||
|
||||
@@ -206,9 +206,9 @@ test("animates review and terminal panels while caching hidden terminal content"
|
||||
|
||||
await page.keyboard.press("Control+Backquote")
|
||||
await expect(panel).toBeVisible()
|
||||
await expectAnimation(page, "terminal-panel-size-in")
|
||||
await expectAnimation(page, "auxiliary-panel-size-in")
|
||||
await page.keyboard.press("Control+Backquote")
|
||||
await expectAnimation(page, "terminal-panel-size-out")
|
||||
await expectAnimation(page, "auxiliary-panel-size-out")
|
||||
await expect(panel).toBeHidden()
|
||||
await expect(page.locator('[data-component="terminal"]')).toBeAttached()
|
||||
})
|
||||
|
||||
@@ -64,6 +64,7 @@
|
||||
"@ibm/plex": "6.4.1",
|
||||
"@kobalte/core": "catalog:",
|
||||
"@opencode/client": "workspace:*",
|
||||
"@opencode/plugin": "workspace:*",
|
||||
"@opencode/schema": "workspace:*",
|
||||
"@opencode/plugin-browser": "workspace:*",
|
||||
"@opencode/session-ui": "workspace:*",
|
||||
|
||||
@@ -0,0 +1,49 @@
|
||||
import path from "node:path"
|
||||
|
||||
const packages = path.resolve(import.meta.dirname, "../..")
|
||||
const imports = new Set([
|
||||
"solid-js",
|
||||
"solid-js/store",
|
||||
"solid-js/web",
|
||||
"@tanstack/solid-query",
|
||||
"effect",
|
||||
"@opencode/plugin/desktop",
|
||||
"@opencode/plugin/desktop/solid",
|
||||
"@opencode/plugin/desktop/manager",
|
||||
"@opencode/plugin/desktop/persistence",
|
||||
"@opencode/schema/rpc",
|
||||
"@opencode/client",
|
||||
"@opencode/client/solid",
|
||||
"@opencode/util/encode",
|
||||
"@opencode/util/path",
|
||||
])
|
||||
for (const name of ["ui", "session-ui"]) {
|
||||
const directory = path.join(packages, name)
|
||||
const manifest: { name: string; exports: Record<string, string> } = await Bun.file(
|
||||
path.join(directory, "package.json"),
|
||||
).json()
|
||||
for (const [key, target] of Object.entries(manifest.exports)) {
|
||||
if (!/\.tsx?$/.test(target) || /storybook/.test(key)) continue
|
||||
if (!key.includes("*")) {
|
||||
imports.add(key === "." ? manifest.name : manifest.name + key.slice(1))
|
||||
continue
|
||||
}
|
||||
const [prefix, suffix] = target.split("*")
|
||||
for await (const file of new Bun.Glob(target.slice(2)).scan(directory)) {
|
||||
if (/(\.test\.|\.stories\.|\.story\.)/.test(file)) continue
|
||||
imports.add(
|
||||
manifest.name +
|
||||
key.slice(1).replace("*", ("./" + file.replaceAll("\\", "/")).slice(prefix.length, -suffix.length)),
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
await Bun.write(
|
||||
path.join(packages, "app/src/extensions/modules.gen.ts"),
|
||||
`// Generated by script/generate-extension-modules.ts. Shared renderer modules only.\nexport const modules: Record<string, () => Promise<unknown>> = {\n${Array.from(
|
||||
imports,
|
||||
)
|
||||
.sort()
|
||||
.map((name) => ` ${JSON.stringify(name)}: () => import(${JSON.stringify(name)}),`)
|
||||
.join("\n")}\n}\n`,
|
||||
)
|
||||
@@ -0,0 +1,56 @@
|
||||
import { createEffect, createMemo, createSignal, For, Show } from "solid-js"
|
||||
import type { RegisteredPanel } from "./provider"
|
||||
|
||||
/** Grouped content stays mounted while any declaration in its group is available. */
|
||||
export function ExtensionPanelContent(props: { panels: readonly RegisteredPanel[]; active: string | undefined }) {
|
||||
const selected = createMemo(() => props.panels.find((panel) => panel.key === props.active))
|
||||
const groups = createMemo(() => Array.from(new Set(props.panels.filter((panel) => panel.props.group).map(groupKey))))
|
||||
const single = createMemo(() => {
|
||||
const panel = selected()
|
||||
return panel && !panel.props.group ? panel : undefined
|
||||
})
|
||||
return (
|
||||
<>
|
||||
<For each={groups()}>
|
||||
{(key) => {
|
||||
const [mounted, setMounted] = createSignal(false)
|
||||
const active = () => !!selected() && groupKey(selected()!) === key
|
||||
const declaration = props.panels.find((panel) => groupKey(panel) === key)!
|
||||
createEffect(() => {
|
||||
if (active()) setMounted(true)
|
||||
})
|
||||
return (
|
||||
<Show when={mounted()}>
|
||||
<div
|
||||
role="tabpanel"
|
||||
data-slot="tabs-content"
|
||||
class="h-full min-h-0 overflow-hidden flex flex-col"
|
||||
classList={{ hidden: !active() }}
|
||||
inert={!active()}
|
||||
aria-label={selected()?.props.title}
|
||||
>
|
||||
{declaration.render()}
|
||||
</div>
|
||||
</Show>
|
||||
)
|
||||
}}
|
||||
</For>
|
||||
<Show when={single()} keyed>
|
||||
{(panel) => (
|
||||
<div
|
||||
role="tabpanel"
|
||||
data-slot="tabs-content"
|
||||
class="h-full min-h-0 overflow-hidden flex flex-col"
|
||||
aria-label={panel.props.title}
|
||||
>
|
||||
{panel.render()}
|
||||
</div>
|
||||
)}
|
||||
</Show>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function groupKey(panel: RegisteredPanel) {
|
||||
return `${panel.session.key}/${panel.plugin}/${panel.generation}/${panel.props.group ?? panel.key}`
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
export const extensionTabKey = (plugin: string, id: string) => `extension:${plugin}:${id}`
|
||||
export const isExtensionTab = (id: string | undefined) => !!id?.startsWith("extension:")
|
||||
@@ -0,0 +1,36 @@
|
||||
import { Schema } from "effect"
|
||||
import { Plugin } from "@opencode/plugin/desktop"
|
||||
import { ExtensionManager } from "@opencode/plugin/desktop/manager"
|
||||
import { evaluateBundle } from "@opencode/plugin/desktop/bundle"
|
||||
|
||||
export async function loadExtension(input: ExtensionManager.Source) {
|
||||
const { modules } = await import("./modules.gen")
|
||||
const shared = new Map(
|
||||
await Promise.all(
|
||||
input.manifest.imports.map(async (name) => {
|
||||
const load = modules[name]
|
||||
if (!load) throw new ExtensionManager.ManagerError("invalidModule")
|
||||
return [name, await load()] as const
|
||||
}),
|
||||
),
|
||||
)
|
||||
const value = Schema.decodeUnknownOption(Schema.Struct({ default: Plugin.Definition }))(
|
||||
evaluateBundle(input.source, shared),
|
||||
)
|
||||
if (value._tag === "None" || value.value.default.id !== input.manifest.id)
|
||||
throw new ExtensionManager.ManagerError("invalidModule")
|
||||
const definition = value.value.default
|
||||
return {
|
||||
...definition,
|
||||
setup(context) {
|
||||
if (input.manifest.style) {
|
||||
const stylesheet = document.createElement("link")
|
||||
stylesheet.rel = "stylesheet"
|
||||
stylesheet.href = context.assets.url(input.manifest.style)
|
||||
document.head.append(stylesheet)
|
||||
context.lifecycle.own(() => stylesheet.remove())
|
||||
}
|
||||
return definition.setup(context)
|
||||
},
|
||||
} satisfies Plugin.Definition
|
||||
}
|
||||
@@ -0,0 +1,216 @@
|
||||
// Generated by script/generate-extension-modules.ts. Shared renderer modules only.
|
||||
export const modules: Record<string, () => Promise<unknown>> = {
|
||||
"@opencode/client": () => import("@opencode/client"),
|
||||
"@opencode/client/solid": () => import("@opencode/client/solid"),
|
||||
"@opencode/plugin/desktop": () => import("@opencode/plugin/desktop"),
|
||||
"@opencode/plugin/desktop/manager": () => import("@opencode/plugin/desktop/manager"),
|
||||
"@opencode/plugin/desktop/persistence": () => import("@opencode/plugin/desktop/persistence"),
|
||||
"@opencode/plugin/desktop/solid": () => import("@opencode/plugin/desktop/solid"),
|
||||
"@opencode/schema/rpc": () => import("@opencode/schema/rpc"),
|
||||
"@opencode/session-ui/actions": () => import("@opencode/session-ui/actions"),
|
||||
"@opencode/session-ui/attachment-card": () => import("@opencode/session-ui/attachment-card"),
|
||||
"@opencode/session-ui/basic-tool": () => import("@opencode/session-ui/basic-tool"),
|
||||
"@opencode/session-ui/comment-card": () => import("@opencode/session-ui/comment-card"),
|
||||
"@opencode/session-ui/context": () => import("@opencode/session-ui/context"),
|
||||
"@opencode/session-ui/context/data": () => import("@opencode/session-ui/context/data"),
|
||||
"@opencode/session-ui/context/markdown": () => import("@opencode/session-ui/context/markdown"),
|
||||
"@opencode/session-ui/dock-prompt": () => import("@opencode/session-ui/dock-prompt"),
|
||||
"@opencode/session-ui/document": () => import("@opencode/session-ui/document"),
|
||||
"@opencode/session-ui/file": () => import("@opencode/session-ui/file"),
|
||||
"@opencode/session-ui/file-media": () => import("@opencode/session-ui/file-media"),
|
||||
"@opencode/session-ui/file-search": () => import("@opencode/session-ui/file-search"),
|
||||
"@opencode/session-ui/file-ssr": () => import("@opencode/session-ui/file-ssr"),
|
||||
"@opencode/session-ui/line-comment": () => import("@opencode/session-ui/line-comment"),
|
||||
"@opencode/session-ui/line-comment-annotations": () => import("@opencode/session-ui/line-comment-annotations"),
|
||||
"@opencode/session-ui/line-comment-styles": () => import("@opencode/session-ui/line-comment-styles"),
|
||||
"@opencode/session-ui/markdown": () => import("@opencode/session-ui/markdown"),
|
||||
"@opencode/session-ui/markdown-cache": () => import("@opencode/session-ui/markdown-cache"),
|
||||
"@opencode/session-ui/markdown-stream": () => import("@opencode/session-ui/markdown-stream"),
|
||||
"@opencode/session-ui/message": () => import("@opencode/session-ui/message"),
|
||||
"@opencode/session-ui/message-file": () => import("@opencode/session-ui/message-file"),
|
||||
"@opencode/session-ui/message-nav": () => import("@opencode/session-ui/message-nav"),
|
||||
"@opencode/session-ui/message-part": () => import("@opencode/session-ui/message-part"),
|
||||
"@opencode/session-ui/pierre": () => import("@opencode/session-ui/pierre"),
|
||||
"@opencode/session-ui/pierre/comment-hover": () => import("@opencode/session-ui/pierre/comment-hover"),
|
||||
"@opencode/session-ui/pierre/commented-lines": () => import("@opencode/session-ui/pierre/commented-lines"),
|
||||
"@opencode/session-ui/pierre/diff-selection": () => import("@opencode/session-ui/pierre/diff-selection"),
|
||||
"@opencode/session-ui/pierre/file-find": () => import("@opencode/session-ui/pierre/file-find"),
|
||||
"@opencode/session-ui/pierre/file-runtime": () => import("@opencode/session-ui/pierre/file-runtime"),
|
||||
"@opencode/session-ui/pierre/file-selection": () => import("@opencode/session-ui/pierre/file-selection"),
|
||||
"@opencode/session-ui/pierre/index": () => import("@opencode/session-ui/pierre/index"),
|
||||
"@opencode/session-ui/pierre/media": () => import("@opencode/session-ui/pierre/media"),
|
||||
"@opencode/session-ui/pierre/selection-bridge": () => import("@opencode/session-ui/pierre/selection-bridge"),
|
||||
"@opencode/session-ui/pierre/virtualizer": () => import("@opencode/session-ui/pierre/virtualizer"),
|
||||
"@opencode/session-ui/pierre/worker": () => import("@opencode/session-ui/pierre/worker"),
|
||||
"@opencode/session-ui/session-diff": () => import("@opencode/session-ui/session-diff"),
|
||||
"@opencode/session-ui/session-retry": () => import("@opencode/session-ui/session-retry"),
|
||||
"@opencode/session-ui/session-review": () => import("@opencode/session-ui/session-review"),
|
||||
"@opencode/session-ui/timeline": () => import("@opencode/session-ui/timeline"),
|
||||
"@opencode/session-ui/timeline/detail": () => import("@opencode/session-ui/timeline/detail"),
|
||||
"@opencode/session-ui/timeline/projection": () => import("@opencode/session-ui/timeline/projection"),
|
||||
"@opencode/session-ui/timeline/row": () => import("@opencode/session-ui/timeline/row"),
|
||||
"@opencode/session-ui/tool-count-label": () => import("@opencode/session-ui/tool-count-label"),
|
||||
"@opencode/session-ui/tool-count-summary": () => import("@opencode/session-ui/tool-count-summary"),
|
||||
"@opencode/session-ui/tool-error-card": () => import("@opencode/session-ui/tool-error-card"),
|
||||
"@opencode/session-ui/tool-status-title": () => import("@opencode/session-ui/tool-status-title"),
|
||||
"@opencode/session-ui/v2/line-comment-annotations-v2": () => import("@opencode/session-ui/v2/line-comment-annotations-v2"),
|
||||
"@opencode/session-ui/v2/session-file-panel-v2": () => import("@opencode/session-ui/v2/session-file-panel-v2"),
|
||||
"@opencode/session-ui/v2/session-progress-indicator-v2": () => import("@opencode/session-ui/v2/session-progress-indicator-v2"),
|
||||
"@opencode/session-ui/v2/session-review-empty-changes-v2": () => import("@opencode/session-ui/v2/session-review-empty-changes-v2"),
|
||||
"@opencode/session-ui/v2/session-review-empty-no-git-v2": () => import("@opencode/session-ui/v2/session-review-empty-no-git-v2"),
|
||||
"@opencode/session-ui/v2/session-review-file-preview-v2": () => import("@opencode/session-ui/v2/session-review-file-preview-v2"),
|
||||
"@opencode/session-ui/v2/session-review-v2": () => import("@opencode/session-ui/v2/session-review-v2"),
|
||||
"@opencode/ui/accordion": () => import("@opencode/ui/accordion"),
|
||||
"@opencode/ui/animated-number": () => import("@opencode/ui/animated-number"),
|
||||
"@opencode/ui/app-icon": () => import("@opencode/ui/app-icon"),
|
||||
"@opencode/ui/auxiliary-panel": () => import("@opencode/ui/auxiliary-panel"),
|
||||
"@opencode/ui/avatar": () => import("@opencode/ui/avatar"),
|
||||
"@opencode/ui/badge": () => import("@opencode/ui/badge"),
|
||||
"@opencode/ui/button": () => import("@opencode/ui/button"),
|
||||
"@opencode/ui/card": () => import("@opencode/ui/card"),
|
||||
"@opencode/ui/checkbox": () => import("@opencode/ui/checkbox"),
|
||||
"@opencode/ui/collapsible": () => import("@opencode/ui/collapsible"),
|
||||
"@opencode/ui/context": () => import("@opencode/ui/context"),
|
||||
"@opencode/ui/context-menu": () => import("@opencode/ui/context-menu"),
|
||||
"@opencode/ui/context/dialog": () => import("@opencode/ui/context/dialog"),
|
||||
"@opencode/ui/context/file": () => import("@opencode/ui/context/file"),
|
||||
"@opencode/ui/context/helper": () => import("@opencode/ui/context/helper"),
|
||||
"@opencode/ui/context/i18n": () => import("@opencode/ui/context/i18n"),
|
||||
"@opencode/ui/context/marked": () => import("@opencode/ui/context/marked"),
|
||||
"@opencode/ui/context/marked-base": () => import("@opencode/ui/context/marked-base"),
|
||||
"@opencode/ui/context/marked-parser": () => import("@opencode/ui/context/marked-parser"),
|
||||
"@opencode/ui/context/marked-theme": () => import("@opencode/ui/context/marked-theme"),
|
||||
"@opencode/ui/context/marked-theme-register": () => import("@opencode/ui/context/marked-theme-register"),
|
||||
"@opencode/ui/context/worker-pool": () => import("@opencode/ui/context/worker-pool"),
|
||||
"@opencode/ui/dialog": () => import("@opencode/ui/dialog"),
|
||||
"@opencode/ui/diff-changes": () => import("@opencode/ui/diff-changes"),
|
||||
"@opencode/ui/divider": () => import("@opencode/ui/divider"),
|
||||
"@opencode/ui/dock-surface": () => import("@opencode/ui/dock-surface"),
|
||||
"@opencode/ui/favicon": () => import("@opencode/ui/favicon"),
|
||||
"@opencode/ui/field": () => import("@opencode/ui/field"),
|
||||
"@opencode/ui/file-icon": () => import("@opencode/ui/file-icon"),
|
||||
"@opencode/ui/file-tree-item": () => import("@opencode/ui/file-tree-item"),
|
||||
"@opencode/ui/font": () => import("@opencode/ui/font"),
|
||||
"@opencode/ui/hooks": () => import("@opencode/ui/hooks"),
|
||||
"@opencode/ui/hover-card": () => import("@opencode/ui/hover-card"),
|
||||
"@opencode/ui/i18n/am": () => import("@opencode/ui/i18n/am"),
|
||||
"@opencode/ui/i18n/ar": () => import("@opencode/ui/i18n/ar"),
|
||||
"@opencode/ui/i18n/az": () => import("@opencode/ui/i18n/az"),
|
||||
"@opencode/ui/i18n/bg": () => import("@opencode/ui/i18n/bg"),
|
||||
"@opencode/ui/i18n/bn": () => import("@opencode/ui/i18n/bn"),
|
||||
"@opencode/ui/i18n/br": () => import("@opencode/ui/i18n/br"),
|
||||
"@opencode/ui/i18n/bs": () => import("@opencode/ui/i18n/bs"),
|
||||
"@opencode/ui/i18n/ca": () => import("@opencode/ui/i18n/ca"),
|
||||
"@opencode/ui/i18n/cs": () => import("@opencode/ui/i18n/cs"),
|
||||
"@opencode/ui/i18n/da": () => import("@opencode/ui/i18n/da"),
|
||||
"@opencode/ui/i18n/de": () => import("@opencode/ui/i18n/de"),
|
||||
"@opencode/ui/i18n/dv": () => import("@opencode/ui/i18n/dv"),
|
||||
"@opencode/ui/i18n/dz": () => import("@opencode/ui/i18n/dz"),
|
||||
"@opencode/ui/i18n/el": () => import("@opencode/ui/i18n/el"),
|
||||
"@opencode/ui/i18n/en": () => import("@opencode/ui/i18n/en"),
|
||||
"@opencode/ui/i18n/es": () => import("@opencode/ui/i18n/es"),
|
||||
"@opencode/ui/i18n/et": () => import("@opencode/ui/i18n/et"),
|
||||
"@opencode/ui/i18n/fa": () => import("@opencode/ui/i18n/fa"),
|
||||
"@opencode/ui/i18n/fi": () => import("@opencode/ui/i18n/fi"),
|
||||
"@opencode/ui/i18n/fo": () => import("@opencode/ui/i18n/fo"),
|
||||
"@opencode/ui/i18n/fr": () => import("@opencode/ui/i18n/fr"),
|
||||
"@opencode/ui/i18n/he": () => import("@opencode/ui/i18n/he"),
|
||||
"@opencode/ui/i18n/hi": () => import("@opencode/ui/i18n/hi"),
|
||||
"@opencode/ui/i18n/hr": () => import("@opencode/ui/i18n/hr"),
|
||||
"@opencode/ui/i18n/hu": () => import("@opencode/ui/i18n/hu"),
|
||||
"@opencode/ui/i18n/hy": () => import("@opencode/ui/i18n/hy"),
|
||||
"@opencode/ui/i18n/id": () => import("@opencode/ui/i18n/id"),
|
||||
"@opencode/ui/i18n/is": () => import("@opencode/ui/i18n/is"),
|
||||
"@opencode/ui/i18n/it": () => import("@opencode/ui/i18n/it"),
|
||||
"@opencode/ui/i18n/ja": () => import("@opencode/ui/i18n/ja"),
|
||||
"@opencode/ui/i18n/ka": () => import("@opencode/ui/i18n/ka"),
|
||||
"@opencode/ui/i18n/km": () => import("@opencode/ui/i18n/km"),
|
||||
"@opencode/ui/i18n/ko": () => import("@opencode/ui/i18n/ko"),
|
||||
"@opencode/ui/i18n/lo": () => import("@opencode/ui/i18n/lo"),
|
||||
"@opencode/ui/i18n/lt": () => import("@opencode/ui/i18n/lt"),
|
||||
"@opencode/ui/i18n/lv": () => import("@opencode/ui/i18n/lv"),
|
||||
"@opencode/ui/i18n/mk": () => import("@opencode/ui/i18n/mk"),
|
||||
"@opencode/ui/i18n/mn": () => import("@opencode/ui/i18n/mn"),
|
||||
"@opencode/ui/i18n/ms": () => import("@opencode/ui/i18n/ms"),
|
||||
"@opencode/ui/i18n/my": () => import("@opencode/ui/i18n/my"),
|
||||
"@opencode/ui/i18n/ne": () => import("@opencode/ui/i18n/ne"),
|
||||
"@opencode/ui/i18n/nl": () => import("@opencode/ui/i18n/nl"),
|
||||
"@opencode/ui/i18n/no": () => import("@opencode/ui/i18n/no"),
|
||||
"@opencode/ui/i18n/pa": () => import("@opencode/ui/i18n/pa"),
|
||||
"@opencode/ui/i18n/pl": () => import("@opencode/ui/i18n/pl"),
|
||||
"@opencode/ui/i18n/ro": () => import("@opencode/ui/i18n/ro"),
|
||||
"@opencode/ui/i18n/ru": () => import("@opencode/ui/i18n/ru"),
|
||||
"@opencode/ui/i18n/si": () => import("@opencode/ui/i18n/si"),
|
||||
"@opencode/ui/i18n/sk": () => import("@opencode/ui/i18n/sk"),
|
||||
"@opencode/ui/i18n/sl": () => import("@opencode/ui/i18n/sl"),
|
||||
"@opencode/ui/i18n/sq": () => import("@opencode/ui/i18n/sq"),
|
||||
"@opencode/ui/i18n/sr": () => import("@opencode/ui/i18n/sr"),
|
||||
"@opencode/ui/i18n/sv": () => import("@opencode/ui/i18n/sv"),
|
||||
"@opencode/ui/i18n/tg": () => import("@opencode/ui/i18n/tg"),
|
||||
"@opencode/ui/i18n/th": () => import("@opencode/ui/i18n/th"),
|
||||
"@opencode/ui/i18n/tk": () => import("@opencode/ui/i18n/tk"),
|
||||
"@opencode/ui/i18n/tr": () => import("@opencode/ui/i18n/tr"),
|
||||
"@opencode/ui/i18n/uk": () => import("@opencode/ui/i18n/uk"),
|
||||
"@opencode/ui/i18n/ur": () => import("@opencode/ui/i18n/ur"),
|
||||
"@opencode/ui/i18n/uz": () => import("@opencode/ui/i18n/uz"),
|
||||
"@opencode/ui/i18n/vi": () => import("@opencode/ui/i18n/vi"),
|
||||
"@opencode/ui/i18n/zh": () => import("@opencode/ui/i18n/zh"),
|
||||
"@opencode/ui/i18n/zht": () => import("@opencode/ui/i18n/zht"),
|
||||
"@opencode/ui/icon": () => import("@opencode/ui/icon"),
|
||||
"@opencode/ui/icon-button": () => import("@opencode/ui/icon-button"),
|
||||
"@opencode/ui/icons/app": () => import("@opencode/ui/icons/app"),
|
||||
"@opencode/ui/icons/file-type": () => import("@opencode/ui/icons/file-type"),
|
||||
"@opencode/ui/icons/provider": () => import("@opencode/ui/icons/provider"),
|
||||
"@opencode/ui/image-preview": () => import("@opencode/ui/image-preview"),
|
||||
"@opencode/ui/inline-input": () => import("@opencode/ui/inline-input"),
|
||||
"@opencode/ui/keybind": () => import("@opencode/ui/keybind"),
|
||||
"@opencode/ui/layout": () => import("@opencode/ui/layout"),
|
||||
"@opencode/ui/line-comment": () => import("@opencode/ui/line-comment"),
|
||||
"@opencode/ui/list": () => import("@opencode/ui/list"),
|
||||
"@opencode/ui/loader": () => import("@opencode/ui/loader"),
|
||||
"@opencode/ui/logo": () => import("@opencode/ui/logo"),
|
||||
"@opencode/ui/menu": () => import("@opencode/ui/menu"),
|
||||
"@opencode/ui/motion-spring": () => import("@opencode/ui/motion-spring"),
|
||||
"@opencode/ui/popover": () => import("@opencode/ui/popover"),
|
||||
"@opencode/ui/progress": () => import("@opencode/ui/progress"),
|
||||
"@opencode/ui/progress-circle": () => import("@opencode/ui/progress-circle"),
|
||||
"@opencode/ui/project-avatar": () => import("@opencode/ui/project-avatar"),
|
||||
"@opencode/ui/provider-icon": () => import("@opencode/ui/provider-icon"),
|
||||
"@opencode/ui/radio": () => import("@opencode/ui/radio"),
|
||||
"@opencode/ui/resize-handle": () => import("@opencode/ui/resize-handle"),
|
||||
"@opencode/ui/resize-state": () => import("@opencode/ui/resize-state"),
|
||||
"@opencode/ui/scroll-view": () => import("@opencode/ui/scroll-view"),
|
||||
"@opencode/ui/segmented-control": () => import("@opencode/ui/segmented-control"),
|
||||
"@opencode/ui/select": () => import("@opencode/ui/select"),
|
||||
"@opencode/ui/spinner": () => import("@opencode/ui/spinner"),
|
||||
"@opencode/ui/split-button": () => import("@opencode/ui/split-button"),
|
||||
"@opencode/ui/sticky-accordion-header": () => import("@opencode/ui/sticky-accordion-header"),
|
||||
"@opencode/ui/switch": () => import("@opencode/ui/switch"),
|
||||
"@opencode/ui/tab-state-indicator": () => import("@opencode/ui/tab-state-indicator"),
|
||||
"@opencode/ui/tabs": () => import("@opencode/ui/tabs"),
|
||||
"@opencode/ui/text-field": () => import("@opencode/ui/text-field"),
|
||||
"@opencode/ui/text-input": () => import("@opencode/ui/text-input"),
|
||||
"@opencode/ui/text-reveal": () => import("@opencode/ui/text-reveal"),
|
||||
"@opencode/ui/text-shimmer": () => import("@opencode/ui/text-shimmer"),
|
||||
"@opencode/ui/text-strikethrough": () => import("@opencode/ui/text-strikethrough"),
|
||||
"@opencode/ui/textarea": () => import("@opencode/ui/textarea"),
|
||||
"@opencode/ui/theme": () => import("@opencode/ui/theme"),
|
||||
"@opencode/ui/theme/color": () => import("@opencode/ui/theme/color"),
|
||||
"@opencode/ui/theme/context": () => import("@opencode/ui/theme/context"),
|
||||
"@opencode/ui/theme/default-themes": () => import("@opencode/ui/theme/default-themes"),
|
||||
"@opencode/ui/theme/index": () => import("@opencode/ui/theme/index"),
|
||||
"@opencode/ui/theme/loader": () => import("@opencode/ui/theme/loader"),
|
||||
"@opencode/ui/theme/resolve": () => import("@opencode/ui/theme/resolve"),
|
||||
"@opencode/ui/theme/types": () => import("@opencode/ui/theme/types"),
|
||||
"@opencode/ui/toast": () => import("@opencode/ui/toast"),
|
||||
"@opencode/ui/tooltip": () => import("@opencode/ui/tooltip"),
|
||||
"@opencode/ui/typewriter": () => import("@opencode/ui/typewriter"),
|
||||
"@opencode/ui/wordmark": () => import("@opencode/ui/wordmark"),
|
||||
"@opencode/util/encode": () => import("@opencode/util/encode"),
|
||||
"@opencode/util/path": () => import("@opencode/util/path"),
|
||||
"@tanstack/solid-query": () => import("@tanstack/solid-query"),
|
||||
"effect": () => import("effect"),
|
||||
"solid-js": () => import("solid-js"),
|
||||
"solid-js/store": () => import("solid-js/store"),
|
||||
"solid-js/web": () => import("solid-js/web"),
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
import { createEffect, onCleanup } from "solid-js"
|
||||
import { createResizeObserver } from "@solid-primitives/resize-observer"
|
||||
import { createEventListener } from "@solid-primitives/event-listener"
|
||||
import { useDialog } from "@opencode/ui/context/dialog"
|
||||
import { useDesktopExtensions } from "./provider"
|
||||
|
||||
/** Native geometry, clipping and portal occlusion are host behavior shared by all extensions. */
|
||||
export function ExtensionNativeSurface(props: { extensionID: string; id: string }) {
|
||||
const host = useDesktopExtensions()
|
||||
const dialog = useDialog()
|
||||
let surface: HTMLDivElement | undefined
|
||||
let frame: number | undefined
|
||||
let until = 0
|
||||
let last = ""
|
||||
const canvas = document.createElement("canvas")
|
||||
canvas.width = canvas.height = 1
|
||||
const paint = canvas.getContext("2d", { willReadFrequently: true })
|
||||
const measure = () => {
|
||||
if (!surface) return
|
||||
const rect = surface.getBoundingClientRect()
|
||||
const covered = Array.from(document.querySelectorAll('[data-popper-positioner]:not(:has([role="tooltip"]))')).some(
|
||||
(element) => {
|
||||
const other = element.getBoundingClientRect()
|
||||
return (
|
||||
other.width > 0 &&
|
||||
other.left < rect.right &&
|
||||
other.right > rect.left &&
|
||||
other.top < rect.bottom &&
|
||||
other.bottom > rect.top
|
||||
)
|
||||
},
|
||||
)
|
||||
const zoom = host.zoom()
|
||||
const visible =
|
||||
document.visibilityState === "visible" &&
|
||||
!dialog.active &&
|
||||
!covered &&
|
||||
surface.checkVisibility({ checkVisibilityCSS: true })
|
||||
const color = getComputedStyle(
|
||||
surface.closest(".bg-v2-background-bg-deep") ?? document.documentElement,
|
||||
).backgroundColor
|
||||
const key = `${props.id}:${visible}:${rect.x}:${rect.y}:${rect.width}:${rect.height}:${zoom}:${color}:${devicePixelRatio}`
|
||||
if (key === last) return
|
||||
last = key
|
||||
if (paint) {
|
||||
paint.clearRect(0, 0, 1, 1)
|
||||
paint.fillStyle = color
|
||||
paint.fillRect(0, 0, 1, 1)
|
||||
}
|
||||
const rgba = paint?.getImageData(0, 0, 1, 1).data
|
||||
host.transport?.surface(props.extensionID, props.id, {
|
||||
visible,
|
||||
bounds: {
|
||||
x: Math.round(rect.left * zoom),
|
||||
y: Math.round(rect.top * zoom),
|
||||
width: Math.max(0, Math.round(rect.right * zoom) - Math.round(rect.left * zoom)),
|
||||
height: Math.max(0, Math.round(rect.bottom * zoom) - Math.round(rect.top * zoom)),
|
||||
},
|
||||
background: rgba ? [rgba[0], rgba[1], rgba[2], rgba[3]] : undefined,
|
||||
radius: Math.round(10 * zoom),
|
||||
})
|
||||
}
|
||||
const tick = () => {
|
||||
frame = undefined
|
||||
measure()
|
||||
if (performance.now() < until) frame = requestAnimationFrame(tick)
|
||||
}
|
||||
const schedule = () => {
|
||||
until = performance.now() + 300
|
||||
if (frame === undefined) frame = requestAnimationFrame(tick)
|
||||
}
|
||||
createEffect(() => {
|
||||
props.id
|
||||
dialog.active
|
||||
host.zoom()
|
||||
schedule()
|
||||
})
|
||||
createResizeObserver(() => surface, measure)
|
||||
createEventListener(window, "resize", schedule)
|
||||
createEventListener(document, "visibilitychange", schedule)
|
||||
const portals = new MutationObserver(schedule)
|
||||
portals.observe(document.body, { childList: true })
|
||||
const theme = new MutationObserver(schedule)
|
||||
theme.observe(document.documentElement, { attributes: true, attributeFilter: ["style", "data-theme"] })
|
||||
onCleanup(() => {
|
||||
portals.disconnect()
|
||||
theme.disconnect()
|
||||
if (frame !== undefined) cancelAnimationFrame(frame)
|
||||
host.transport?.surface(props.extensionID, props.id)
|
||||
})
|
||||
return <div ref={surface} data-component="native-surface" class="min-h-0 min-w-0 flex-1 bg-v2-background-bg-base" />
|
||||
}
|
||||
@@ -0,0 +1,548 @@
|
||||
import {
|
||||
createContext,
|
||||
createEffect,
|
||||
createMemo,
|
||||
createRoot,
|
||||
getOwner,
|
||||
onCleanup,
|
||||
runWithOwner,
|
||||
untrack,
|
||||
batch,
|
||||
useContext,
|
||||
type ParentProps,
|
||||
type JSX,
|
||||
} from "solid-js"
|
||||
import { createStore, produce, reconcile, type Store, type SetStoreFunction } from "solid-js/store"
|
||||
import { Schema } from "effect"
|
||||
import type { Context, PanelProps, SessionContext, SlotClaim, Plugin } from "@opencode/plugin/desktop"
|
||||
import type { Server, StorageOptions } from "@opencode/plugin/desktop/context"
|
||||
import { ExtensionManager } from "@opencode/plugin/desktop/manager"
|
||||
import { createLifecycle } from "@opencode/plugin/desktop/lifecycle"
|
||||
import { client } from "@opencode/plugin/desktop/rpc"
|
||||
import { resolveSlots, type Claim, type PlacementKind } from "@opencode/plugin/slots"
|
||||
import { usePlatform } from "@/runtime/platform/platform"
|
||||
import { useGlobal } from "@/runtime/server/runtime"
|
||||
import { ServerConnection } from "@/runtime/server/registry"
|
||||
import { useTabs, tabKey } from "@/shell/tabs/tabs"
|
||||
import { useCurrentRoute } from "@/shell/state/layout"
|
||||
import { useCommand } from "@/shell/commands/command"
|
||||
import { useLanguage } from "@/runtime/i18n/language"
|
||||
import { persisted, Persist, removePersisted } from "@/runtime/persistence/storage"
|
||||
import { base64Encode } from "@opencode/util/encode"
|
||||
import { terminalFontFamily, useSettings } from "@/settings/model"
|
||||
import { extensionTabKey } from "./keys"
|
||||
import { showToast } from "@/shell/notifications/toast"
|
||||
import type { SessionServices } from "@opencode/plugin/desktop/workspace"
|
||||
|
||||
export type Contribution = Claim<{
|
||||
context: Context
|
||||
generation: number
|
||||
when?: () => boolean
|
||||
render: SlotClaim["render"]
|
||||
}>
|
||||
export type RegisteredPanel = {
|
||||
key: string
|
||||
plugin: string
|
||||
generation: number
|
||||
session: SessionContext
|
||||
props: PanelProps
|
||||
render: () => JSX.Element
|
||||
icon: () => JSX.Element
|
||||
}
|
||||
type PanelHost = { open(id: string): void; close(id: string): void; active(): string | undefined; visible?(): boolean }
|
||||
const HostContext = createContext<ReturnType<typeof createHost>>()
|
||||
|
||||
export function DesktopExtensionsProvider(props: ParentProps) {
|
||||
const host = createHost()
|
||||
return <HostContext.Provider value={host}>{props.children}</HostContext.Provider>
|
||||
}
|
||||
|
||||
export function useDesktopExtensions() {
|
||||
const host = useContext(HostContext)
|
||||
if (!host) throw new Error("Desktop extension host is unavailable")
|
||||
return host
|
||||
}
|
||||
|
||||
export const useOptionalDesktopExtensions = () => useContext(HostContext)
|
||||
|
||||
function createHost() {
|
||||
const platform = usePlatform()
|
||||
const global = useGlobal()
|
||||
const tabs = useTabs()
|
||||
const route = useCurrentRoute()
|
||||
const commands = useCommand()
|
||||
const language = useLanguage()
|
||||
const settings = useSettings()
|
||||
const owner = getOwner()
|
||||
const [state, setState] = createStore({
|
||||
claims: [] as Contribution[],
|
||||
panels: [] as RegisteredPanel[],
|
||||
sessions: [] as SessionContext[],
|
||||
servers: [] as Server[],
|
||||
services: {} as Record<string, SessionServices | undefined>,
|
||||
installed: [] as readonly ExtensionManager.Installed[],
|
||||
// Definitions are opaque: storing a factory prevents Solid from merging a
|
||||
// replacement into the previous definition and hiding its identity change.
|
||||
loaded: {} as Record<string, (() => Plugin.Definition) | undefined>,
|
||||
failures: {} as Record<string, boolean | undefined>,
|
||||
managerReady: false,
|
||||
managerError: undefined as ExtensionManager.ErrorCode | undefined,
|
||||
})
|
||||
const sessions = new Map<string, SessionContext>()
|
||||
const hosts = new Map<string, PanelHost>()
|
||||
const instances = new Map<string, { definition: object; dispose: () => void }>()
|
||||
const storage = new Map<string, unknown>()
|
||||
const memories = new Map<string, unknown>()
|
||||
const persistent = new Map<string, { value: unknown; users: number; reset(): void; dispose(): void }>()
|
||||
const workspaceRemoved = new Set<(value: { serverID: string; directory: string }) => void>()
|
||||
const attempted = new WeakSet<Plugin.Definition>()
|
||||
let instanceID = 0
|
||||
const builtins = () => platform.extensionPlugins ?? []
|
||||
createEffect(() => {
|
||||
const manager = platform.extensionManager
|
||||
if (!manager) return
|
||||
let changed = false
|
||||
let disposed = false
|
||||
onCleanup(
|
||||
manager.onChange((entries) => {
|
||||
changed = true
|
||||
setState("installed", entries)
|
||||
setState("managerReady", true)
|
||||
}),
|
||||
)
|
||||
onCleanup(() => {
|
||||
disposed = true
|
||||
})
|
||||
void manager
|
||||
.list()
|
||||
.then((entries) => {
|
||||
if (disposed || changed) return
|
||||
setState("installed", entries)
|
||||
setState("managerReady", true)
|
||||
})
|
||||
.catch(() => {
|
||||
if (!disposed && !changed) {
|
||||
setState("managerError", "storage")
|
||||
setState("managerReady", true)
|
||||
}
|
||||
})
|
||||
})
|
||||
const pending = new Map<string, string>()
|
||||
createEffect(() => {
|
||||
const manager = platform.extensionManager
|
||||
if (!manager) return
|
||||
state.installed.forEach((entry) => {
|
||||
if (!entry.enabled) {
|
||||
pending.delete(entry.id)
|
||||
setState("loaded", entry.id, undefined)
|
||||
setState("failures", entry.id, undefined)
|
||||
return
|
||||
}
|
||||
const token = `${entry.revision}/${entry.generation}`
|
||||
if (pending.get(entry.id) === token) return
|
||||
pending.set(entry.id, token)
|
||||
setState("failures", entry.id, undefined)
|
||||
void (async () => {
|
||||
const { loadExtension } = await import("./load")
|
||||
const value = await loadExtension(await manager.source(entry.id, entry.revision))
|
||||
if (pending.get(entry.id) !== token) return
|
||||
setState("loaded", entry.id, () => () => value)
|
||||
})().catch((error) => {
|
||||
if (pending.get(entry.id) === token) {
|
||||
console.debug("[desktop-extensions] load failed", { id: entry.id, error })
|
||||
setState("failures", entry.id, true)
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
onCleanup(() => pending.clear())
|
||||
const resolved = createMemo(() =>
|
||||
resolveSlots({
|
||||
paths: new Set([
|
||||
"app",
|
||||
"titlebar.actions",
|
||||
"settings.experimental",
|
||||
"session.panel",
|
||||
"session.panel.actions",
|
||||
"session.composer.top",
|
||||
"session.header.actions",
|
||||
"session.panel.toolbar",
|
||||
"session.panel.tools",
|
||||
"session.sidebar",
|
||||
"session.auxiliary",
|
||||
"session.mobile.actions",
|
||||
]),
|
||||
claims: state.claims.filter((claim) => claim.render.when?.() ?? true),
|
||||
}),
|
||||
)
|
||||
|
||||
createEffect(() => {
|
||||
const all = global.servers.list()
|
||||
const available = all.map((connection): Server => {
|
||||
const id = ServerConnection.key(connection)
|
||||
const data = global.ensureServerCtx(connection)
|
||||
return {
|
||||
id,
|
||||
local: ServerConnection.local(connection),
|
||||
get url() {
|
||||
return data.sdk.url
|
||||
},
|
||||
get client() {
|
||||
return data.sdk.api
|
||||
},
|
||||
data: data.data,
|
||||
get compatible() {
|
||||
return !global.servers.health[id]?.incompatible
|
||||
},
|
||||
}
|
||||
})
|
||||
setState("servers", available)
|
||||
platform.extensions?.configure(
|
||||
all.map((connection) => ({
|
||||
id: ServerConnection.key(connection),
|
||||
...connection.http,
|
||||
url: global.ensureServerCtx(connection).sdk.url,
|
||||
})),
|
||||
)
|
||||
const owned = new Set(tabs.store.filter((tab) => tab.type === "session").map(tabKey))
|
||||
Array.from(sessions).forEach(([key, session]) => {
|
||||
if (!owned.has(session.ownerID)) sessions.delete(key)
|
||||
})
|
||||
tabs.store.forEach((tab) => {
|
||||
if (tab.type !== "session") return
|
||||
const connection = all.find((connection) => ServerConnection.key(connection) === tab.server)
|
||||
if (!connection) return
|
||||
const data = global.ensureServerCtx(connection)
|
||||
const server = available.find((server) => server.id === tab.server)!
|
||||
Array.from(new Set([tab.sessionId, tab.routeSessionId ?? tab.sessionId])).forEach((id) => {
|
||||
const key = `${tab.server}\n${id}`
|
||||
if (sessions.has(key)) return
|
||||
sessions.set(key, {
|
||||
key,
|
||||
ownerID: tabKey(tab),
|
||||
sessionID: id,
|
||||
server,
|
||||
get creating() {
|
||||
return data.data.session.creating(id)
|
||||
},
|
||||
get location() {
|
||||
return data.data.session.get(id)?.location
|
||||
},
|
||||
get services() {
|
||||
return state.services[key]
|
||||
},
|
||||
})
|
||||
})
|
||||
})
|
||||
setState("sessions", Array.from(sessions.values()))
|
||||
})
|
||||
|
||||
const current = createMemo(() => {
|
||||
const value = route()
|
||||
if (value.type !== "session") return
|
||||
return state.sessions.find((session) => session.server.id === value.server && session.sessionID === value.sessionId)
|
||||
})
|
||||
|
||||
const stateFor = <Value extends object>(id: string, key: string, initial: Value, durable: boolean) => {
|
||||
const cache = durable ? storage : memories
|
||||
const name = `${id}.${key}`
|
||||
const previous = cache.get(name)
|
||||
if (previous) return previous as readonly [Store<Value>, (update: (draft: Value) => void) => void]
|
||||
// Storage decodes JSON objects at the boundary; each plugin owns its value's shape and migrations.
|
||||
const pair = runWithOwner(owner, () =>
|
||||
durable
|
||||
? persisted(
|
||||
Persist.global(`extension.${name}`),
|
||||
Schema.Record(Schema.String, Schema.Json),
|
||||
Schema.decodeUnknownSync(Schema.Record(Schema.String, Schema.Json))(initial),
|
||||
)
|
||||
: createStore(initial),
|
||||
) as unknown as readonly [Store<Value>, SetStoreFunction<Value>]
|
||||
const value = [pair[0], (update: (draft: Value) => void) => pair[1](produce(update))] as const
|
||||
cache.set(name, value)
|
||||
return value
|
||||
}
|
||||
|
||||
const persistTarget = (id: string, key: string, options?: StorageOptions) => {
|
||||
if (!options?.scope)
|
||||
return {
|
||||
...Persist.global(`extension.${id}.${key}`),
|
||||
previousKeys: options?.legacyKey ? [options.legacyKey] : undefined,
|
||||
}
|
||||
const connection = global.servers.list().find((server) => ServerConnection.key(server) === options.scope!.serverID)
|
||||
if (!connection) throw new Error("Extension storage server is unavailable")
|
||||
return {
|
||||
...Persist.serverWorkspace(
|
||||
global.ensureServerCtx(connection).sdk.scope,
|
||||
base64Encode(options.scope.directory),
|
||||
`extension.${id}.${key}`,
|
||||
),
|
||||
previousKeys: options.legacyKey ? [`workspace:${options.legacyKey}`] : undefined,
|
||||
}
|
||||
}
|
||||
const persistFor = <S extends Schema.ConstraintCodec<object, unknown>>(
|
||||
id: string,
|
||||
key: string,
|
||||
schema: S,
|
||||
initial: NoInfer<S["Type"]>,
|
||||
options?: StorageOptions,
|
||||
) => {
|
||||
const target = persistTarget(id, key, options)
|
||||
const name = JSON.stringify([target.storage, target.key])
|
||||
const previous = persistent.get(name)
|
||||
type Value = readonly [Store<S["Type"]>, SetStoreFunction<S["Type"]>, () => boolean]
|
||||
const entry =
|
||||
previous ??
|
||||
createRoot((dispose) => {
|
||||
const pair = persisted(target, schema, initial)
|
||||
return {
|
||||
value: [pair[0], pair[1], pair[3]] as const,
|
||||
users: 0,
|
||||
reset: () => pair[1](reconcile(initial)),
|
||||
dispose,
|
||||
}
|
||||
}, owner)
|
||||
persistent.set(name, entry)
|
||||
entry.users++
|
||||
// Overlapping activation generations share state. Evicted workspace owners
|
||||
// release their hydrated buffers; the persistence layer flushes before disposal.
|
||||
onCleanup(() => {
|
||||
if (--entry.users) return
|
||||
entry.dispose()
|
||||
persistent.delete(name)
|
||||
})
|
||||
return entry.value as Value
|
||||
}
|
||||
|
||||
const activate = (definition: NonNullable<typeof platform.extensionPlugins>[number]) =>
|
||||
createRoot((dispose) => {
|
||||
const lifecycle = createLifecycle()
|
||||
const id = definition.id
|
||||
const generation = ++instanceID
|
||||
let activated = false
|
||||
let nextClaim = 0
|
||||
const context: Context = {
|
||||
assets: {
|
||||
url(path) {
|
||||
const entry = state.installed.find((entry) => entry.id === id)
|
||||
if (!entry || !platform.extensionManager) throw new Error("Extension assets are unavailable")
|
||||
return platform.extensionManager.assetURL(id, entry.revision, path)
|
||||
},
|
||||
},
|
||||
app: { version: platform.version, windowID: platform.windowID, native: !!platform.extensions },
|
||||
lifecycle,
|
||||
platform: {
|
||||
...platform,
|
||||
async saveFile(options, content) {
|
||||
if (platform.saveFile) return platform.saveFile(options, content)
|
||||
const url = URL.createObjectURL(new Blob([content], { type: "application/octet-stream" }))
|
||||
const link = document.createElement("a")
|
||||
link.href = url
|
||||
link.download = options.defaultPath ?? "download"
|
||||
link.click()
|
||||
URL.revokeObjectURL(url)
|
||||
return true
|
||||
},
|
||||
},
|
||||
sessions: { list: () => state.sessions, current },
|
||||
servers: { list: () => state.servers },
|
||||
workspaces: {
|
||||
onRemoved(handler) {
|
||||
workspaceRemoved.add(handler)
|
||||
return lifecycle.own(() => workspaceRemoved.delete(handler))
|
||||
},
|
||||
},
|
||||
fonts: { console: () => terminalFontFamily(settings.appearance.terminalFont()) },
|
||||
storage: {
|
||||
persist: (key, schema, initial, options) => persistFor(id, key, schema, initial, options),
|
||||
remove(key, options) {
|
||||
const target = persistTarget(id, key, options)
|
||||
const name = JSON.stringify([target.storage, target.key])
|
||||
persistent.get(name)?.reset()
|
||||
removePersisted(target, platform)
|
||||
target.previousKeys?.forEach((key) => removePersisted({ ...target, key }, platform))
|
||||
},
|
||||
store: (key, options) => stateFor(id, key, options.initial, true),
|
||||
memory: (key, options) => stateFor(id, key, options.initial, false),
|
||||
},
|
||||
i18n: {
|
||||
locale: language.locale,
|
||||
intl: language.intl,
|
||||
plural: (key, count, params) => language.plural(key as Parameters<typeof language.plural>[0], count, params),
|
||||
t: (key, params) => language.t(key as Parameters<typeof language.t>[0], params) ?? key,
|
||||
},
|
||||
commands: {
|
||||
register(values) {
|
||||
return lifecycle.own(
|
||||
createRoot((dispose) => {
|
||||
commands.register(`${id}/${generation}/${nextClaim++}`, () =>
|
||||
values().map((command) => ({
|
||||
id: command.reference ?? `${id}.${command.id}`,
|
||||
title: command.title,
|
||||
description: command.description,
|
||||
category: command.group,
|
||||
disabled: command.enabled === false,
|
||||
hidden: command.palette === false,
|
||||
keybind: command.bind,
|
||||
slash: command.slash,
|
||||
when: command.when,
|
||||
onSelect: () => {
|
||||
void command.run()
|
||||
},
|
||||
})),
|
||||
)
|
||||
return dispose
|
||||
}),
|
||||
)
|
||||
},
|
||||
dispatch: (commandID) => commands.trigger(`${id}.${commandID}`),
|
||||
keys: commands.keybindParts,
|
||||
matches: commands.matches,
|
||||
},
|
||||
main: {
|
||||
rpc(definition) {
|
||||
const transport = platform.extensions
|
||||
if (!transport) throw new Error("Native desktop extensions are unavailable on this platform")
|
||||
return client(id, definition, transport, lifecycle.signal, lifecycle.own)
|
||||
},
|
||||
},
|
||||
ui: {
|
||||
toast: {
|
||||
show: (options) =>
|
||||
showToast({ title: options.title, description: options.message, variant: options.variant }),
|
||||
},
|
||||
slot(claim) {
|
||||
const placements = ["append", "prepend", "before", "after", "replace"] as const
|
||||
const kinds = placements.filter((kind) => claim[kind] !== undefined)
|
||||
if (kinds.length !== 1) throw new Error("A slot requires exactly one placement")
|
||||
const kind: PlacementKind = kinds[0]
|
||||
const value: Contribution = {
|
||||
key: `${id}/${generation}/${nextClaim++}`,
|
||||
plugin: id,
|
||||
placement: { kind, target: claim[kind]! },
|
||||
render: { context, generation, when: claim.when, render: claim.render },
|
||||
}
|
||||
setState("claims", (items) => [...items, value])
|
||||
return lifecycle.own(() => setState("claims", (items) => items.filter((item) => item.key !== value.key)))
|
||||
},
|
||||
panel: {
|
||||
open(localID, session) {
|
||||
const panel = state.panels.find(
|
||||
(panel) => panel.plugin === id && panel.props.id === localID && panel.session.key === session.key,
|
||||
)
|
||||
const key = panel?.key ?? extensionTabKey(id, localID)
|
||||
const host = hosts.get(session.key)
|
||||
if (!host || !state.panels.some((panel) => panel.session.key === session.key && panel.key === key))
|
||||
return false
|
||||
host.open(key)
|
||||
return true
|
||||
},
|
||||
close(localID, session) {
|
||||
const key =
|
||||
state.panels.find(
|
||||
(panel) => panel.plugin === id && panel.props.id === localID && panel.session.key === session.key,
|
||||
)?.key ?? extensionTabKey(id, localID)
|
||||
const host = hosts.get(session.key)
|
||||
if (!host) return false
|
||||
host.close(key)
|
||||
return true
|
||||
},
|
||||
selected: (localID, session) => {
|
||||
const panel = state.panels.find(
|
||||
(panel) => panel.plugin === id && panel.props.id === localID && panel.session.key === session.key,
|
||||
)
|
||||
return !!panel && hosts.get(session.key)?.active() === panel.key
|
||||
},
|
||||
visible: (localID, session) => {
|
||||
const panel = state.panels.find(
|
||||
(panel) => panel.plugin === id && panel.props.id === localID && panel.session.key === session.key,
|
||||
)
|
||||
const host = hosts.get(session.key)
|
||||
return !!panel && host?.active() === panel.key && (host.visible?.() ?? true)
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
onCleanup(() => {
|
||||
try {
|
||||
lifecycle.dispose()
|
||||
} finally {
|
||||
if (activated) platform.extensions?.release(id)
|
||||
}
|
||||
})
|
||||
try {
|
||||
const cleanup = definition.setup(context)
|
||||
if (cleanup) lifecycle.own(cleanup)
|
||||
activated = true
|
||||
return dispose
|
||||
} catch (error) {
|
||||
dispose()
|
||||
throw error
|
||||
}
|
||||
})
|
||||
|
||||
createEffect(() => {
|
||||
const definitions = [
|
||||
...builtins(),
|
||||
...Object.values(state.loaded)
|
||||
.flatMap((load) => (load ? [load()] : []))
|
||||
.filter((value) => !builtins().some((builtin) => builtin.id === value.id)),
|
||||
]
|
||||
Array.from(instances).forEach(([id, instance]) => {
|
||||
if (definitions.some((definition) => definition.id === id)) return
|
||||
instance.dispose()
|
||||
instances.delete(id)
|
||||
})
|
||||
definitions.forEach((definition) => {
|
||||
if (instances.get(definition.id)?.definition === definition || attempted.has(definition)) return
|
||||
try {
|
||||
batch(() => {
|
||||
const dispose = untrack(() => activate(definition))
|
||||
instances.get(definition.id)?.dispose()
|
||||
instances.set(definition.id, { definition, dispose })
|
||||
})
|
||||
} catch (error) {
|
||||
if (builtins().includes(definition)) throw error
|
||||
console.debug("[desktop-extensions] activation failed", {
|
||||
id: definition.id,
|
||||
error: error instanceof Error ? error.stack : String(error),
|
||||
})
|
||||
setState("failures", definition.id, true)
|
||||
attempted.add(definition)
|
||||
}
|
||||
})
|
||||
})
|
||||
onCleanup(() => instances.forEach((instance) => instance.dispose()))
|
||||
return {
|
||||
state,
|
||||
resolved,
|
||||
current,
|
||||
transport: platform.extensions,
|
||||
manager: platform.extensionManager,
|
||||
builtins: (): readonly Plugin.Definition[] => builtins(),
|
||||
failed: (id: string) => setState("failures", id, true),
|
||||
workspaceRemoved(value: { serverID: string; directory: string }) {
|
||||
workspaceRemoved.forEach((handler) => handler(value))
|
||||
},
|
||||
zoom: () => platform.webviewZoom?.() ?? 1,
|
||||
bind(session: SessionContext, host: PanelHost, services?: SessionServices) {
|
||||
hosts.set(session.key, host)
|
||||
setState("services", session.key, services)
|
||||
return () => {
|
||||
if (hosts.get(session.key) === host) {
|
||||
hosts.delete(session.key)
|
||||
setState("services", session.key, undefined)
|
||||
}
|
||||
}
|
||||
},
|
||||
register(panel: RegisteredPanel) {
|
||||
if (state.panels.some((item) => item.key === panel.key && item.session.key === panel.session.key))
|
||||
throw new Error(`Duplicate extension panel: ${panel.key}`)
|
||||
setState("panels", (items) => [...items, panel])
|
||||
return () =>
|
||||
setState("panels", (items) =>
|
||||
items.filter((item) => item.key !== panel.key || item.session.key !== panel.session.key),
|
||||
)
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,176 @@
|
||||
import { createEffect, createMemo, on, onCleanup, Show } from "solid-js"
|
||||
import { useOptionalDesktopExtensions } from "./provider"
|
||||
import { ExtensionSlot } from "./slot"
|
||||
import type { SessionServices } from "@opencode/plugin/desktop/workspace"
|
||||
import type { AuxiliaryPresentation } from "@opencode/plugin/desktop/context"
|
||||
|
||||
export function useExtensionPanels(input: {
|
||||
serverID: () => string
|
||||
sessionID: () => string | undefined
|
||||
tabs: () => {
|
||||
all(): string[]
|
||||
setAll(value: string[]): void
|
||||
active(): string | undefined
|
||||
setActive(value: string): void
|
||||
close(id: string): void
|
||||
}
|
||||
open(): void
|
||||
services?: SessionServices
|
||||
active?: () => string | undefined
|
||||
}) {
|
||||
const host = useOptionalDesktopExtensions()
|
||||
const session = createMemo(() =>
|
||||
host?.state.sessions.find(
|
||||
(session) => session.sessionID === input.sessionID() && session.server.id === input.serverID(),
|
||||
),
|
||||
)
|
||||
const panels = createMemo(() => host?.state.panels.filter((panel) => panel.session.key === session()?.key) ?? [])
|
||||
createEffect(() => {
|
||||
const current = session()
|
||||
if (!current || !host) return
|
||||
onCleanup(
|
||||
host.bind(
|
||||
current,
|
||||
{
|
||||
open(id) {
|
||||
input.open()
|
||||
const tabs = input.tabs()
|
||||
if (!tabs.all().includes(id)) tabs.setAll([...tabs.all(), id])
|
||||
tabs.setActive(id)
|
||||
},
|
||||
close: (id) => input.tabs().close(id),
|
||||
active: () => input.active?.() ?? input.tabs().active(),
|
||||
visible: () => input.services?.view.panel.opened() ?? true,
|
||||
},
|
||||
input.services,
|
||||
),
|
||||
)
|
||||
})
|
||||
createEffect(
|
||||
on(
|
||||
() => panels().map((panel) => panel.key),
|
||||
(keys, previous) => {
|
||||
const old = new Set(previous ?? [])
|
||||
const tabs = input.tabs()
|
||||
// Persisted instances can be waiting for their declarations to mount. Only
|
||||
// remove contributions observed disappearing during this route lifetime.
|
||||
const removed = new Set(previous?.filter((key) => !keys.includes(key)))
|
||||
const current = tabs.all().filter((key) => !removed.has(key))
|
||||
const added = keys.filter(
|
||||
(key) =>
|
||||
!old.has(key) &&
|
||||
!current.includes(key) &&
|
||||
panels().find((panel) => panel.key === key)?.props.initial !== "closed",
|
||||
)
|
||||
if (added.length || current.length !== tabs.all().length) tabs.setAll([...current, ...added])
|
||||
},
|
||||
),
|
||||
)
|
||||
createEffect(
|
||||
on(
|
||||
() => input.tabs().all(),
|
||||
(current, previous) => {
|
||||
previous
|
||||
?.filter((key) => !current.includes(key))
|
||||
.forEach((key) =>
|
||||
panels()
|
||||
.find((panel) => panel.key === key)
|
||||
?.props.onClose?.(),
|
||||
)
|
||||
},
|
||||
),
|
||||
)
|
||||
createEffect(
|
||||
on(
|
||||
() => input.tabs().active(),
|
||||
(active) =>
|
||||
panels()
|
||||
.find((panel) => panel.key === active)
|
||||
?.props.onSelect?.(),
|
||||
),
|
||||
)
|
||||
return {
|
||||
hasAuxiliary: () => {
|
||||
const value = host?.resolved().slotted.get("session.auxiliary")
|
||||
return (
|
||||
!!value &&
|
||||
(!!value.replace || value.before.length + value.prepend.length + value.append.length + value.after.length > 0)
|
||||
)
|
||||
},
|
||||
auxiliary: (presentation: AuxiliaryPresentation) => (
|
||||
// A secondary surface can span multiple sessions in the same workspace.
|
||||
// Keep its owner and pass reactive identity instead of keying on the route.
|
||||
<Show when={input.services && session()}>
|
||||
{(current) => (
|
||||
<ExtensionSlot
|
||||
path="session.auxiliary"
|
||||
input={{
|
||||
get session() {
|
||||
return current()
|
||||
},
|
||||
services: input.services!,
|
||||
presentation,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Show>
|
||||
),
|
||||
mobileActions: () => (
|
||||
<Show when={session()}>
|
||||
{(current) => (
|
||||
<ExtensionSlot
|
||||
path="session.mobile.actions"
|
||||
input={{
|
||||
get session() {
|
||||
return current()
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Show>
|
||||
),
|
||||
panels,
|
||||
keys: () => panels().map((panel) => panel.key),
|
||||
canClose: (key: string) => panels().find((panel) => panel.key === key)?.props.closable !== false,
|
||||
defaultPanel: () => panels().find((panel) => panel.props.default)?.key,
|
||||
hasActions: () => {
|
||||
const value = host?.resolved().slotted.get("session.panel.actions")
|
||||
return (
|
||||
!!value &&
|
||||
(!!value.replace || value.before.length + value.prepend.length + value.append.length + value.after.length > 0)
|
||||
)
|
||||
},
|
||||
declarations: () => (
|
||||
<Show when={session()} keyed>
|
||||
{(session) => <ExtensionSlot path="session.panel" input={{ session }} />}
|
||||
</Show>
|
||||
),
|
||||
actions: () => (
|
||||
<Show when={session()} keyed>
|
||||
{(session) => <ExtensionSlot path="session.panel.actions" input={{ session }} />}
|
||||
</Show>
|
||||
),
|
||||
toolbar: () => (
|
||||
<Show when={session()} keyed>
|
||||
{(session) => <ExtensionSlot path="session.panel.toolbar" input={{ session }} />}
|
||||
</Show>
|
||||
),
|
||||
tools: () => (
|
||||
<Show when={session()} keyed>
|
||||
{(session) => <ExtensionSlot path="session.panel.tools" input={{ session }} />}
|
||||
</Show>
|
||||
),
|
||||
sidebar: () => (
|
||||
<Show when={session()} keyed>
|
||||
{(session) => <ExtensionSlot path="session.sidebar" input={{ session }} />}
|
||||
</Show>
|
||||
),
|
||||
header: () => (
|
||||
<Show when={session()} keyed>
|
||||
{(session) => <ExtensionSlot path="session.header.actions" input={{ session }} />}
|
||||
</Show>
|
||||
),
|
||||
}
|
||||
}
|
||||
|
||||
export type SessionExtensions = ReturnType<typeof useExtensionPanels>
|
||||
@@ -0,0 +1,103 @@
|
||||
import {
|
||||
createComponent,
|
||||
createMemo,
|
||||
createRoot,
|
||||
ErrorBoundary,
|
||||
For,
|
||||
getOwner,
|
||||
onCleanup,
|
||||
onMount,
|
||||
Show,
|
||||
type JSX,
|
||||
type ParentProps,
|
||||
} from "solid-js"
|
||||
import { PanelProvider, PluginProvider, NativeSurfaceProvider } from "@opencode/plugin/desktop/solid"
|
||||
import type { PanelInput, SlotMap, SlotPath } from "@opencode/plugin/desktop/context"
|
||||
import { emptySlotted } from "@opencode/plugin/slots"
|
||||
import { useLanguage } from "@/runtime/i18n/language"
|
||||
import { showToast } from "@/shell/notifications/toast"
|
||||
import { useOptionalDesktopExtensions, type Contribution } from "./provider"
|
||||
import { extensionTabKey } from "./keys"
|
||||
import { ExtensionNativeSurface } from "./native-surface"
|
||||
|
||||
export function ExtensionSlot<Path extends SlotPath>(props: ParentProps<{ path: Path; input?: SlotMap[Path] }>) {
|
||||
const host = useOptionalDesktopExtensions()
|
||||
if (!host) return props.children
|
||||
const language = useLanguage()
|
||||
const slotted = createMemo(() => host.resolved().slotted.get(props.path) ?? emptySlotted<Contribution["render"]>())
|
||||
const contribution = (claim: Contribution) => (
|
||||
<ErrorBoundary
|
||||
fallback={(error) => {
|
||||
host.failed(claim.plugin)
|
||||
onMount(() =>
|
||||
showToast({
|
||||
variant: "error",
|
||||
title: language.t("common.requestFailed"),
|
||||
description: `${claim.plugin}: ${String(error)}`,
|
||||
}),
|
||||
)
|
||||
return null
|
||||
}}
|
||||
>
|
||||
<PluginProvider value={claim.render.context}>
|
||||
<NativeSurfaceProvider
|
||||
render={(surface) => <ExtensionNativeSurface extensionID={claim.plugin} id={surface.id} />}
|
||||
>
|
||||
<Show
|
||||
when={props.path === "session.panel"}
|
||||
fallback={createComponent(claim.render.render as (input: object) => JSX.Element, props.input ?? {})}
|
||||
>
|
||||
<PanelProvider
|
||||
value={{
|
||||
get session() {
|
||||
return (props.input as PanelInput).session
|
||||
},
|
||||
register(panel) {
|
||||
const owner = getOwner()
|
||||
const session = (props.input as PanelInput).session
|
||||
const render = (value: () => JSX.Element) => {
|
||||
const mounted = createRoot((dispose) => ({ dispose, view: value() }), owner)
|
||||
onCleanup(mounted.dispose)
|
||||
return mounted.view
|
||||
}
|
||||
onCleanup(
|
||||
host.register({
|
||||
key: panel.reference ?? extensionTabKey(claim.plugin, panel.id),
|
||||
plugin: claim.plugin,
|
||||
generation: claim.render.generation,
|
||||
session,
|
||||
props: panel,
|
||||
render: () => render(() => panel.children),
|
||||
icon: () => render(() => panel.icon),
|
||||
}),
|
||||
)
|
||||
},
|
||||
}}
|
||||
>
|
||||
{createComponent(claim.render.render as (input: object) => JSX.Element, props.input ?? {})}
|
||||
</PanelProvider>
|
||||
</Show>
|
||||
</NativeSurfaceProvider>
|
||||
</PluginProvider>
|
||||
</ErrorBoundary>
|
||||
)
|
||||
return (
|
||||
<>
|
||||
<For each={slotted().before}>{contribution}</For>
|
||||
<Show
|
||||
when={slotted().replace}
|
||||
keyed
|
||||
fallback={
|
||||
<>
|
||||
<For each={slotted().prepend}>{contribution}</For>
|
||||
{props.children}
|
||||
<For each={slotted().append}>{contribution}</For>
|
||||
</>
|
||||
}
|
||||
>
|
||||
{contribution}
|
||||
</Show>
|
||||
<For each={slotted().after}>{contribution}</For>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
import type { SessionServices } from "@opencode/plugin/desktop/workspace"
|
||||
import type { SessionModel } from "@/session/model"
|
||||
import { useFile } from "@/workspaces/files/model"
|
||||
import { useComments } from "@/composer/comments"
|
||||
import { useComposerState } from "@/composer/persistence"
|
||||
import { useWorkspaceLocation } from "@/workspaces/location"
|
||||
import { useLayout } from "@/shell/state/layout"
|
||||
import { useSettings } from "@/settings/model"
|
||||
import { useOptionalDesktopExtensions } from "./provider"
|
||||
import { useServer } from "@/runtime/server/current"
|
||||
|
||||
export function createSessionServices(session: SessionModel): SessionServices {
|
||||
const file = useFile()
|
||||
const annotations = useComments()
|
||||
const draft = useComposerState()
|
||||
const location = useWorkspaceLocation()
|
||||
const layout = useLayout()
|
||||
const settings = useSettings()
|
||||
const extensions = useOptionalDesktopExtensions()
|
||||
const server = useServer()
|
||||
return {
|
||||
display: { wrapDiff: settings.general.mobileDiffWrap },
|
||||
files: {
|
||||
...file,
|
||||
get directory() {
|
||||
return location().directory
|
||||
},
|
||||
},
|
||||
annotations,
|
||||
draft: { context: draft.context },
|
||||
view: {
|
||||
auxiliary: {
|
||||
opened: () => session.layout.view().terminal.opened(),
|
||||
open: () => session.layout.view().terminal.open(),
|
||||
close: () => session.layout.view().terminal.close(),
|
||||
toggle: () => session.layout.view().terminal.toggle(),
|
||||
height: () => session.layout.view().terminal.height(),
|
||||
resize: (height) => session.layout.view().terminal.resize(height),
|
||||
placement: settings.general.terminalPlacement,
|
||||
},
|
||||
ready: layout.ready,
|
||||
desktop: session.isDesktop,
|
||||
tabs: {
|
||||
all: () => session.layout.tabs().all(),
|
||||
active: session.tabs.activeTab,
|
||||
open: (reference) => session.layout.tabs().open(reference),
|
||||
close: (reference) => session.layout.tabs().close(reference),
|
||||
canClose: (reference) =>
|
||||
extensions?.state.panels.find(
|
||||
(panel) =>
|
||||
panel.key === reference &&
|
||||
panel.session.sessionID === session.identity.sessionID() &&
|
||||
panel.session.server.id === server.key,
|
||||
)?.props.closable !== false,
|
||||
setActive: (reference) => session.layout.tabs().setActive(reference),
|
||||
preview: () => session.layout.tabs().preview(),
|
||||
previewTab: (reference) => session.layout.tabs().previewTab(reference),
|
||||
},
|
||||
panel: {
|
||||
opened: () => session.layout.view().reviewPanel.opened(),
|
||||
open: (source) => session.layout.view().reviewPanel.open(source),
|
||||
close: () => session.layout.view().reviewPanel.close(),
|
||||
toggle: () => session.layout.view().reviewPanel.toggle(),
|
||||
source: () => session.layout.view().reviewPanel.source(),
|
||||
},
|
||||
sidebar: { ...layout.fileTree, allowed: settings.visibility.fileTree },
|
||||
scroll: (key) => session.layout.view().scroll(key),
|
||||
setScroll: (key, value) => session.layout.view().setScroll(key, value),
|
||||
},
|
||||
get project() {
|
||||
const project = session.project()
|
||||
return project && { id: project.id, directory: project.worktree, name: project.name, vcs: project.vcs }
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -70,14 +70,6 @@
|
||||
animation: side-terminal-panel-presence-out 240ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
|
||||
}
|
||||
|
||||
[data-component="terminal-panel"][data-size-animated="true"][data-opened="true"] {
|
||||
animation: terminal-panel-size-in 200ms cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
[data-component="terminal-panel"][data-size-animated="true"][data-opened="false"] {
|
||||
animation: terminal-panel-size-out 200ms cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
[data-slot="terminal-panel-presence"],
|
||||
[data-slot="side-terminal-panel-presence"],
|
||||
@@ -147,24 +139,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes terminal-panel-size-in {
|
||||
from {
|
||||
height: 0;
|
||||
}
|
||||
to {
|
||||
height: var(--terminal-panel-height);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes terminal-panel-size-out {
|
||||
from {
|
||||
height: var(--terminal-panel-height);
|
||||
}
|
||||
to {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
::highlight(timeline-search-hit) {
|
||||
background-color: color-mix(in srgb, var(--v2-icon-icon-accent) 28%, transparent);
|
||||
}
|
||||
|
||||
@@ -2,6 +2,37 @@ import { DESKTOP_NATIVE_ENGLISH } from "./desktop-native"
|
||||
|
||||
export const dict = {
|
||||
...DESKTOP_NATIVE_ENGLISH,
|
||||
"settings.tab.tools": "Tools",
|
||||
"settings.tools.description": "Manage tools available on this server",
|
||||
"project.settings.tools.description": "View tools available to this project",
|
||||
"settings.desktopExtensions.installTitle": "Install extensions",
|
||||
"settings.desktopExtensions.drop": "Drop extension files",
|
||||
"settings.desktopExtensions.choose": "Choose one or more .ocdx archives from your computer",
|
||||
"settings.desktopExtensions.browse": "Browse",
|
||||
"settings.desktopExtensions.files": "Extension files",
|
||||
"settings.desktopExtensions.fromURL": "Or install from a URL",
|
||||
"settings.desktopExtensions.placeholder": "https://example.com/my-extension.ocdx",
|
||||
"settings.desktopExtensions.url": "Extension URL",
|
||||
"settings.desktopExtensions.install": "Install",
|
||||
"settings.desktopExtensions.installed": "Installed extensions",
|
||||
"settings.desktopExtensions.empty": "No extensions installed.",
|
||||
"settings.desktopExtensions.builtin": "Built-in",
|
||||
"settings.desktopExtensions.main": "Main process",
|
||||
"settings.desktopExtensions.enable": "Enable {{name}}",
|
||||
"settings.desktopExtensions.reload": "Reload {{name}}",
|
||||
"settings.desktopExtensions.error.files": "Choose one or more .ocdx files.",
|
||||
"settings.desktopExtensions.error.archive": "The file is not a valid .ocdx archive",
|
||||
"settings.desktopExtensions.error.manifest": "This archive must target @opencode/plugin/desktop.",
|
||||
"settings.desktopExtensions.error.path": "The archive contains an invalid file path.",
|
||||
"settings.desktopExtensions.error.size": "Extension is larger than 1 GiB",
|
||||
"settings.desktopExtensions.error.reserved": "Extension ID is reserved by a built-in extension",
|
||||
"settings.desktopExtensions.error.notFound": "Extension not found",
|
||||
"settings.desktopExtensions.error.disabled": "This extension is disabled.",
|
||||
"settings.desktopExtensions.error.module": "The extension entrypoint is invalid or uses an unsupported import.",
|
||||
"settings.desktopExtensions.error.download": "Unable to download the extension.",
|
||||
"settings.desktopExtensions.error.url": "Only HTTP and HTTPS URLs are supported",
|
||||
"settings.desktopExtensions.error.storage": "Unable to update installed extensions.",
|
||||
"settings.desktopExtensions.error.activation": "Unable to activate {{name}}.",
|
||||
"session.location.unavailable": "Session location unavailable",
|
||||
"session.location.description": "Choose another directory to continue this session.",
|
||||
"session.location.choose": "Choose directory",
|
||||
|
||||
@@ -1,99 +1,11 @@
|
||||
export * as Persistence from "./schema"
|
||||
|
||||
import { Effect, Option, Predicate, Result, Schema, SchemaAST, SchemaGetter, SchemaParser, Struct } from "effect"
|
||||
|
||||
export type Migrated<S extends Schema.ConstraintCodec<object, unknown>> = {
|
||||
current: S
|
||||
read: Schema.ConstraintDecoder<unknown>
|
||||
}
|
||||
|
||||
export function migrate<S extends Schema.ConstraintCodec<object, unknown>>(
|
||||
current: S,
|
||||
read: Schema.ConstraintDecoder<unknown>,
|
||||
): Migrated<S> {
|
||||
return { current, read }
|
||||
}
|
||||
|
||||
function isMigrated<S extends Schema.ConstraintCodec<object, unknown>>(schema: S | Migrated<S>): schema is Migrated<S> {
|
||||
return "current" in schema
|
||||
}
|
||||
|
||||
export function withInitial<S extends Schema.ConstraintCodec<object, unknown>>(
|
||||
definition: S | Migrated<S>,
|
||||
initial: NoInfer<S["Type"]>,
|
||||
) {
|
||||
const schema = isMigrated(definition) ? definition.current : definition
|
||||
const read = isMigrated(definition)
|
||||
? SchemaParser.decodeUnknownResult(definition.read, { onExcessProperty: "preserve" })
|
||||
: Result.succeed<unknown>
|
||||
const encode = Schema.encodeUnknownSync(schema)
|
||||
return Schema.Unknown.pipe(
|
||||
Schema.decode<Schema.Unknown>({
|
||||
decode: SchemaGetter.transformOrFail((value) =>
|
||||
Effect.fromResult(Result.map(read(value), (stored) => merge(initial, recover(schema.ast, stored, initial)))),
|
||||
),
|
||||
encode: SchemaGetter.transform((value) => encode(value)),
|
||||
}),
|
||||
Schema.decodeTo(Schema.toType(schema)),
|
||||
)
|
||||
}
|
||||
|
||||
// Object-level codecs own their recovery. Plain structs can recover fields independently.
|
||||
function recover(ast: SchemaAST.AST, value: unknown, initial: unknown): unknown {
|
||||
if (value === undefined) return initial
|
||||
if (ast._tag === "Objects" && !ast.encoding && ast.indexSignatures.length === 0 && Predicate.isObject(value)) {
|
||||
return Object.fromEntries(
|
||||
ast.propertySignatures.flatMap((field) => {
|
||||
const defaults = Predicate.isObject(initial) ? initial[field.name] : undefined
|
||||
const next = recover(field.type, value[field.name], defaults)
|
||||
if (next === undefined && !Object.hasOwn(value, field.name) && defaults === undefined) return []
|
||||
return [[field.name, next]]
|
||||
}),
|
||||
)
|
||||
}
|
||||
const decoded = Schema.decodeUnknownOption(Schema.make<Schema.Codec<unknown, unknown>>(ast))(value)
|
||||
return Option.isSome(decoded) ? decoded.value : initial
|
||||
}
|
||||
|
||||
function merge(initial: unknown, value: unknown): unknown {
|
||||
if (value === undefined) return initial
|
||||
if (!Predicate.isObject(initial) || !Predicate.isObject(value)) return value
|
||||
return Object.fromEntries(
|
||||
[...new Set([...Object.keys(initial), ...Object.keys(value)])].map((key) => [key, merge(initial[key], value[key])]),
|
||||
)
|
||||
}
|
||||
|
||||
// Unlike a decoding default, a fallback also replaces invalid persisted values.
|
||||
export function fallback<S extends Schema.ConstraintCodec<unknown, unknown>>(schema: S, value: () => S["Type"]) {
|
||||
const defaulted = Schema.withDecodingDefaultType<S>(Effect.sync(value))(schema)
|
||||
return Schema.catchDecoding<typeof defaulted>(() => Effect.sync(() => Option.some(value())))(defaulted)
|
||||
}
|
||||
|
||||
export function optional<S extends Schema.ConstraintCodec<unknown, unknown>>(schema: S) {
|
||||
const field = Schema.optional(schema)
|
||||
return Schema.catchDecoding<typeof field>(() => Effect.succeed(Option.none()))(field)
|
||||
}
|
||||
|
||||
export function struct<const Fields extends Schema.Struct.Fields>(fields: Fields) {
|
||||
return Schema.Struct(fields).mapFields(Struct.map(Schema.mutableKey))
|
||||
}
|
||||
|
||||
export function record<S extends Schema.ConstraintCodec<unknown, unknown>>(schema: S) {
|
||||
const entries = Schema.Record(Schema.String, Schema.mutableKey(schema))
|
||||
return fallback(entries, () => Schema.decodeUnknownSync(entries)({}))
|
||||
}
|
||||
|
||||
// Recover individual entries rather than discarding a whole history or collection.
|
||||
export function array<S extends Schema.ConstraintCodec<unknown, unknown>>(schema: S) {
|
||||
const decode = Schema.decodeUnknownOption(schema)
|
||||
const encode = Schema.encodeSync(schema)
|
||||
return fallback(
|
||||
Schema.Array(Schema.Unknown).pipe(
|
||||
Schema.decodeTo(Schema.mutable(Schema.Array(Schema.toType(schema))), {
|
||||
decode: SchemaGetter.transform((items) => items.flatMap((item) => Option.toArray(decode(item)))),
|
||||
encode: SchemaGetter.transform((items) => items.map((item) => encode(item))),
|
||||
}),
|
||||
),
|
||||
() => [],
|
||||
)
|
||||
}
|
||||
export {
|
||||
Persistence,
|
||||
type Migrated,
|
||||
migrate,
|
||||
withInitial,
|
||||
fallback,
|
||||
optional,
|
||||
struct,
|
||||
record,
|
||||
array,
|
||||
} from "@opencode/plugin/desktop/persistence"
|
||||
|
||||
@@ -24,6 +24,7 @@ type PersistTarget = {
|
||||
scope?: "window"
|
||||
workspaceStorageAliases?: string[]
|
||||
previousKey?: string
|
||||
previousKeys?: string[]
|
||||
key: string
|
||||
}
|
||||
|
||||
@@ -516,7 +517,11 @@ export function persisted<S extends Schema.ConstraintCodec<object, unknown>>(
|
||||
if (!isDesktop && !draft) {
|
||||
const current = currentStorage as SyncStorage
|
||||
const sources = [
|
||||
...(config.previousKeys ?? []).map((key) => ({ storage: current, key })),
|
||||
...workspaceAliases.map((storage) => ({ storage: localStorageWithPrefix(storage) })),
|
||||
...workspaceAliases.flatMap((storage) =>
|
||||
(config.previousKeys ?? []).map((key) => ({ storage: localStorageWithPrefix(storage), key })),
|
||||
),
|
||||
...(config.previousKey ? [{ storage: localStorageDirect(), key: config.previousKey }] : []),
|
||||
]
|
||||
|
||||
@@ -552,10 +557,17 @@ export function persisted<S extends Schema.ConstraintCodec<object, unknown>>(
|
||||
: undefined
|
||||
const previousStorage = config.previousKey ? (isDesktop ? platform.storage?.() : localStorageDirect()) : undefined
|
||||
const relocationSources = [
|
||||
...(config.previousKeys ?? []).map((key) => ({ storage: current, key })),
|
||||
previousDraftStorage ? { storage: previousDraftStorage } : undefined,
|
||||
...workspaceAliases.map((name) => ({
|
||||
storage: isDesktop ? platform.storage?.(name) : localStorageWithPrefix(name),
|
||||
})),
|
||||
...workspaceAliases.flatMap((name) =>
|
||||
(config.previousKeys ?? []).map((key) => ({
|
||||
storage: isDesktop ? platform.storage?.(name) : localStorageWithPrefix(name),
|
||||
key,
|
||||
})),
|
||||
),
|
||||
previousStorage && config.previousKey ? { storage: previousStorage, key: config.previousKey } : undefined,
|
||||
]
|
||||
.filter((source): source is { storage: SyncStorage | AsyncStorage; key?: string } => !!source?.storage)
|
||||
|
||||
@@ -7,6 +7,9 @@ import type { WslServersPlatform } from "@/servers/wsl/types"
|
||||
import type { UpdaterPlatform } from "@/shell/updates/types"
|
||||
import type { DraftStore } from "@/runtime/persistence/drafts"
|
||||
import type { BrowserPanePlatform } from "./browser-pane"
|
||||
import type { DesktopExtension } from "@opencode/plugin/desktop/protocol"
|
||||
import type { Plugin } from "@opencode/plugin/desktop"
|
||||
import type { ExtensionManager } from "@opencode/plugin/desktop/manager"
|
||||
|
||||
type PickerPaths = string | string[] | null
|
||||
type OpenDirectoryPickerOptions = { title?: string; multiple?: boolean }
|
||||
@@ -122,6 +125,9 @@ type PlatformBase = {
|
||||
|
||||
/** Native browser pane hosted by the platform (desktop only). */
|
||||
browserPane?: BrowserPanePlatform
|
||||
extensions?: DesktopExtension.Transport
|
||||
extensionPlugins?: readonly Plugin.Definition[]
|
||||
extensionManager?: ExtensionManager.Transport
|
||||
}
|
||||
|
||||
export type Platform = PlatformBase &
|
||||
|
||||
@@ -8,6 +8,7 @@ import { RestrictToElement } from "@dnd-kit/dom/modifiers"
|
||||
import { Tabs } from "@opencode/ui/tabs"
|
||||
import { IconButton } from "@opencode/ui/icon-button"
|
||||
import { Icon } from "@opencode/ui/icon"
|
||||
import { Loader } from "@opencode/ui/loader"
|
||||
import { ResizeHandle } from "@opencode/ui/resize-handle"
|
||||
import { Mark } from "@opencode/ui/logo"
|
||||
import { Keybind } from "@opencode/ui/keybind"
|
||||
@@ -48,6 +49,9 @@ import { useSessionLayout } from "@/session/session-layout"
|
||||
import { SessionFileBrowserTab, type SessionFileBrowserState } from "@/session/files/session-file-browser-tab"
|
||||
import { SessionBrowserPane } from "@/session/browser/pane"
|
||||
import type { createSessionBrowser } from "@/session/browser/model"
|
||||
import type { SessionExtensions } from "@/extensions/session"
|
||||
import { isExtensionTab } from "@/extensions/keys"
|
||||
import { ExtensionPanelContent } from "@/extensions/content"
|
||||
|
||||
type ReviewDiff = FileDiffInfo
|
||||
type RenderDiff = FileDiffInfo
|
||||
@@ -58,6 +62,7 @@ function renderDiff(value: ReviewDiff): value is RenderDiff {
|
||||
}
|
||||
|
||||
export function SessionSidePanel(props: {
|
||||
extensions: SessionExtensions
|
||||
canReview: boolean
|
||||
diffs: ReviewDiff[]
|
||||
diffsReady: boolean
|
||||
@@ -81,6 +86,7 @@ export function SessionSidePanel(props: {
|
||||
const command = useCommand()
|
||||
const sdk = useWorkspaceLocation()
|
||||
const { sessionKey, tabs, view, params } = useSessionLayout()
|
||||
const extensions = props.extensions
|
||||
const projectDirectory = createMemo(() => sdk().directory)
|
||||
|
||||
const isDesktop = createMediaQuery("(min-width: 768px)")
|
||||
@@ -174,6 +180,9 @@ export function SessionSidePanel(props: {
|
||||
hasReview: () => props.canReview,
|
||||
fileBrowser: () => true,
|
||||
browser: props.browser.attached,
|
||||
extensions: extensions.keys,
|
||||
defaultPanel: extensions.defaultPanel,
|
||||
canClose: extensions.canClose,
|
||||
})
|
||||
const contextOpen = tabState.contextOpen
|
||||
const openFileOpen = tabState.openFileOpen
|
||||
@@ -225,7 +234,13 @@ export function SessionSidePanel(props: {
|
||||
})
|
||||
const fileBrowserVisible = createMemo(() => {
|
||||
const active = activeTab()
|
||||
return active !== "review" && active !== "context" && active !== "empty" && !isSessionBrowserTab(active)
|
||||
return (
|
||||
active !== "review" &&
|
||||
active !== "context" &&
|
||||
active !== "empty" &&
|
||||
!isSessionBrowserTab(active) &&
|
||||
!extensions.keys().includes(active)
|
||||
)
|
||||
})
|
||||
const openFileKeybind = createMemo(() => command.keybindParts("file.open"))
|
||||
const closeTabKeybind = createMemo(() => command.keybindParts("file.close"))
|
||||
@@ -365,6 +380,27 @@ export function SessionSidePanel(props: {
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Match when={extensions.keys().includes(tab)}>
|
||||
<Show when={extensions.panels().find((panel) => panel.key === tab)}>
|
||||
{(panel) => (
|
||||
<SortableTab
|
||||
tab={tab}
|
||||
index={tabs().all().indexOf(tab)}
|
||||
onTabClose={panel().props.closable === false ? undefined : tabs().close}
|
||||
>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<Show when={panel().props.loading} fallback={panel().icon()}>
|
||||
<Loader />
|
||||
</Show>
|
||||
<span class="max-w-40 truncate" dir="auto">
|
||||
{panel().props.title}
|
||||
</span>
|
||||
<Show when={panel().props.badge}>{panel().props.badge}</Show>
|
||||
</div>
|
||||
</SortableTab>
|
||||
)}
|
||||
</Show>
|
||||
</Match>
|
||||
<Match when={isSessionBrowserTab(tab)}>
|
||||
<Show when={props.browser.tabs().find((item) => sessionBrowserTab(item.id) === tab)}>
|
||||
{(item) => (
|
||||
@@ -436,7 +472,7 @@ export function SessionSidePanel(props: {
|
||||
<div class="h-full shrink-0 sticky end-0 z-10 flex items-center justify-center bg-v2-background-bg-base">
|
||||
{/* With only files to add, the plus stays a one-click "Open file" button. */}
|
||||
<Show
|
||||
when={props.browser.available()}
|
||||
when={props.browser.available() || extensions.hasActions()}
|
||||
fallback={
|
||||
<Tooltip
|
||||
value={
|
||||
@@ -491,12 +527,15 @@ export function SessionSidePanel(props: {
|
||||
<span>{language.t("command.file.open")}</span>
|
||||
</div>
|
||||
</Menu.Item>
|
||||
<Menu.Item onSelect={props.browser.open}>
|
||||
<div class="flex items-center gap-2">
|
||||
<Icon name="window-cursor" size="small" />
|
||||
<span>{language.t("session.tab.browser")}</span>
|
||||
</div>
|
||||
</Menu.Item>
|
||||
<Show when={props.browser.available()}>
|
||||
<Menu.Item onSelect={props.browser.open}>
|
||||
<div class="flex items-center gap-2">
|
||||
<Icon name="window-cursor" size="small" />
|
||||
<span>{language.t("session.tab.browser")}</span>
|
||||
</div>
|
||||
</Menu.Item>
|
||||
</Show>
|
||||
{extensions.actions()}
|
||||
</Menu.Content>
|
||||
</Menu.Portal>
|
||||
</Menu>
|
||||
@@ -552,6 +591,8 @@ export function SessionSidePanel(props: {
|
||||
</Tabs.Content>
|
||||
</Show>
|
||||
|
||||
<ExtensionPanelContent panels={extensions.panels()} active={activeTab()} />
|
||||
|
||||
<Show when={props.browser.opened()}>
|
||||
<div
|
||||
id={browserTabPanelID}
|
||||
|
||||
@@ -13,7 +13,7 @@ export function SortableTab(props: {
|
||||
tab: string
|
||||
index: number
|
||||
temporary?: boolean
|
||||
onTabClose: (tab: string) => void
|
||||
onTabClose?: (tab: string) => void
|
||||
onTabDoubleClick?: (tab: string) => void
|
||||
/** Replaces the file visual for non-file tabs such as the browser. */
|
||||
children?: JSX.Element
|
||||
@@ -46,27 +46,29 @@ export function SortableTab(props: {
|
||||
value={props.tab}
|
||||
id={props.id}
|
||||
aria-controls={props.ariaControls}
|
||||
onMiddleClick={() => props.onTabClose(props.tab)}
|
||||
onMiddleClick={props.onTabClose ? () => props.onTabClose?.(props.tab) : undefined}
|
||||
onDblClick={() => props.onTabDoubleClick?.(props.tab)}
|
||||
closeButton={
|
||||
<Tooltip
|
||||
value={
|
||||
<>
|
||||
{language.t("common.closeTab")}
|
||||
<Show when={closeTabKeybind().length > 0}>
|
||||
<Keybind keys={closeTabKeybind()} variant="neutral" />
|
||||
</Show>
|
||||
</>
|
||||
}
|
||||
placement="bottom"
|
||||
gutter={10}
|
||||
>
|
||||
<Tabs.CloseButton
|
||||
class="h-5 w-5"
|
||||
onClick={() => props.onTabClose(props.tab)}
|
||||
aria-label={language.t("common.closeTab")}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Show when={props.onTabClose}>
|
||||
<Tooltip
|
||||
value={
|
||||
<>
|
||||
{language.t("common.closeTab")}
|
||||
<Show when={closeTabKeybind().length > 0}>
|
||||
<Keybind keys={closeTabKeybind()} variant="neutral" />
|
||||
</Show>
|
||||
</>
|
||||
}
|
||||
placement="bottom"
|
||||
gutter={10}
|
||||
>
|
||||
<Tabs.CloseButton
|
||||
class="h-5 w-5"
|
||||
onClick={() => props.onTabClose?.(props.tab)}
|
||||
aria-label={language.t("common.closeTab")}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Show>
|
||||
}
|
||||
hideCloseButton
|
||||
>
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import { batch, createMemo, onCleanup, onMount, type Accessor } from "solid-js"
|
||||
import { createStore } from "solid-js/store"
|
||||
import { makeEventListener } from "@solid-primitives/event-listener"
|
||||
import { batch, createMemo, type Accessor } from "solid-js"
|
||||
import { createSizing } from "@opencode/ui/resize-state"
|
||||
export { createSizing }
|
||||
import { same } from "@/runtime/persistence/equality"
|
||||
import { isSessionBrowserTab, SESSION_OPEN_FILE_TAB } from "@/shell/state/session-tabs"
|
||||
import { isExtensionTab } from "@/extensions/keys"
|
||||
|
||||
export {
|
||||
SESSION_BROWSER_TAB,
|
||||
@@ -26,6 +27,9 @@ type TabsInput = {
|
||||
hasReview?: Accessor<boolean>
|
||||
fileBrowser?: Accessor<boolean>
|
||||
browser?: Accessor<boolean>
|
||||
extensions?: Accessor<readonly string[]>
|
||||
defaultPanel?: Accessor<string | undefined>
|
||||
canClose?: (key: string) => boolean
|
||||
}
|
||||
|
||||
export function shouldShowFileTree(input: { visible: boolean; opened: boolean }) {
|
||||
@@ -50,7 +54,9 @@ export const createSessionTabs = (input: TabsInput) => {
|
||||
.tabs()
|
||||
.all()
|
||||
.flatMap((tab) => {
|
||||
if (input.extensions?.().includes(tab)) return [tab]
|
||||
if (tab === "context" || tab === "review") return []
|
||||
if (isExtensionTab(tab)) return input.extensions?.().includes(tab) ? [tab] : []
|
||||
if (isSessionBrowserTab(tab)) return browser() ? [tab] : []
|
||||
if (tab === SESSION_OPEN_FILE_TAB && !fileBrowser()) return []
|
||||
const value = input.pathFromTab(tab) ? input.normalizeTab(tab) : tab
|
||||
@@ -63,13 +69,25 @@ export const createSessionTabs = (input: TabsInput) => {
|
||||
{ equals: same },
|
||||
)
|
||||
const openedTabs = createMemo(
|
||||
() => panelTabs().filter((tab) => tab !== SESSION_OPEN_FILE_TAB && !isSessionBrowserTab(tab)),
|
||||
() =>
|
||||
Array.from(
|
||||
new Set(
|
||||
input
|
||||
.tabs()
|
||||
.all()
|
||||
.filter((tab) => !!input.pathFromTab(tab))
|
||||
.map(input.normalizeTab),
|
||||
),
|
||||
),
|
||||
emptyTabs,
|
||||
{ equals: same },
|
||||
{
|
||||
equals: same,
|
||||
},
|
||||
)
|
||||
const activeTab = createMemo(() => {
|
||||
const active = input.tabs().active()
|
||||
if (active === "context") return active
|
||||
if (active && input.extensions?.().includes(active)) return active
|
||||
if (active === SESSION_OPEN_FILE_TAB && openFileOpen()) return active
|
||||
if (active && isSessionBrowserTab(active) && browser()) return active
|
||||
if (active === "review" && review()) return active
|
||||
@@ -77,6 +95,8 @@ export const createSessionTabs = (input: TabsInput) => {
|
||||
|
||||
const first = openedTabs()[0]
|
||||
if (first) return first
|
||||
const preferred = input.defaultPanel?.()
|
||||
if (preferred) return preferred
|
||||
if (contextOpen()) return "context"
|
||||
if (review() && hasReview()) return "review"
|
||||
return "empty"
|
||||
@@ -88,6 +108,7 @@ export const createSessionTabs = (input: TabsInput) => {
|
||||
})
|
||||
const closableTab = createMemo<string | undefined>(() => {
|
||||
const active = activeTab()
|
||||
if (active && input.extensions?.().includes(active)) return input.canClose?.(active) === false ? undefined : active
|
||||
if (active === "context") return active
|
||||
if (active === SESSION_OPEN_FILE_TAB && openFileOpen()) return active
|
||||
if (active && isSessionBrowserTab(active) && browser()) return active
|
||||
@@ -172,44 +193,4 @@ export const getTabReorderIndex = (tabs: readonly string[], from: string, to: st
|
||||
return toIndex
|
||||
}
|
||||
|
||||
export const createSizing = () => {
|
||||
const [state, setState] = createStore({ active: false })
|
||||
let t: number | undefined
|
||||
|
||||
const stop = () => {
|
||||
if (t !== undefined) {
|
||||
clearTimeout(t)
|
||||
t = undefined
|
||||
}
|
||||
setState("active", false)
|
||||
}
|
||||
|
||||
const start = () => {
|
||||
if (t !== undefined) {
|
||||
clearTimeout(t)
|
||||
t = undefined
|
||||
}
|
||||
setState("active", true)
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
makeEventListener(window, "pointerup", stop)
|
||||
makeEventListener(window, "pointercancel", stop)
|
||||
makeEventListener(window, "blur", stop)
|
||||
})
|
||||
|
||||
onCleanup(() => {
|
||||
if (t !== undefined) clearTimeout(t)
|
||||
})
|
||||
|
||||
return {
|
||||
active: () => state.active,
|
||||
start,
|
||||
touch() {
|
||||
start()
|
||||
t = window.setTimeout(stop, 120)
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export type Sizing = ReturnType<typeof createSizing>
|
||||
|
||||
@@ -19,6 +19,7 @@ import { useSessionLayout } from "./session-layout"
|
||||
import { createSessionOwnership } from "./session-ownership"
|
||||
import { useTabs } from "@/shell/tabs/tabs"
|
||||
import { useServer } from "@/runtime/server/current"
|
||||
import { useOptionalDesktopExtensions } from "@/extensions/provider"
|
||||
|
||||
const emptyMessages: SessionMessageInfo[] = []
|
||||
const emptyUserMessages: SessionMessageUser[] = []
|
||||
@@ -30,6 +31,7 @@ export function useSessionModel() {
|
||||
const server = useServer()
|
||||
const shellTabs = useTabs()
|
||||
const attachments = useBrowserAttachments()
|
||||
const extensions = useOptionalDesktopExtensions()
|
||||
const layout = useSessionLayout()
|
||||
const location = useWorkspaceLocation()
|
||||
const isDesktop = createMediaQuery("(min-width: 768px)")
|
||||
@@ -83,6 +85,20 @@ export function useSessionModel() {
|
||||
normalizeTab,
|
||||
review: isDesktop,
|
||||
hasReview: canReview,
|
||||
extensions: () =>
|
||||
extensions?.state.panels
|
||||
.filter((panel) => panel.session.sessionID === sessionID() && panel.session.server.id === server.key)
|
||||
.map((panel) => panel.key) ?? [],
|
||||
defaultPanel: () =>
|
||||
extensions?.state.panels.find(
|
||||
(panel) =>
|
||||
panel.session.sessionID === sessionID() && panel.session.server.id === server.key && panel.props.default,
|
||||
)?.key,
|
||||
canClose: (key) =>
|
||||
extensions?.state.panels.find(
|
||||
(panel) =>
|
||||
panel.session.sessionID === sessionID() && panel.session.server.id === server.key && panel.key === key,
|
||||
)?.props.closable !== false,
|
||||
fileBrowser: () => isDesktop() && !!sessionID(),
|
||||
// Same flag the side panel uses, so keyboard tab commands see the browser tab the panel shows.
|
||||
browser: () => {
|
||||
|
||||
@@ -14,6 +14,7 @@ import { ReviewPanel } from "./panel"
|
||||
import { SessionReviewTab } from "./review-tab"
|
||||
import type { ChangeMode, SessionReviewModel } from "./model"
|
||||
import type { createSessionBrowser } from "../browser/model"
|
||||
import type { SessionExtensions } from "@/extensions/session"
|
||||
|
||||
const StatusDrawer = lazy(async () => {
|
||||
const { StatusDrawer } = await import("@/shell/status/status-drawer")
|
||||
@@ -148,11 +149,13 @@ export function SessionMobileReview(props: { review: SessionReviewModel }) {
|
||||
export function SessionDesktopReview(props: {
|
||||
review: SessionReviewModel
|
||||
browser: ReturnType<typeof createSessionBrowser>
|
||||
extensions: SessionExtensions
|
||||
present?: boolean
|
||||
}) {
|
||||
return (
|
||||
<Suspense>
|
||||
<SessionSidePanel
|
||||
extensions={props.extensions}
|
||||
canReview={props.review.canReview()}
|
||||
diffs={props.review.diffs()}
|
||||
diffsReady={props.review.ready()}
|
||||
|
||||
@@ -34,6 +34,8 @@ import { SessionIdentityHeader } from "./session-identity-header"
|
||||
import { SessionReviewToggle } from "./header/session-header-actions"
|
||||
import { createAnimatedPresence } from "@/runtime/animated-presence"
|
||||
import { createSessionBrowser } from "./browser/model"
|
||||
import { useExtensionPanels } from "@/extensions/session"
|
||||
import { createSessionServices } from "@/extensions/workspace"
|
||||
|
||||
const SessionMobileFiles = lazy(async () => {
|
||||
const { SessionMobileFiles } = await import("./files/session-mobile-files")
|
||||
@@ -49,6 +51,14 @@ export function SessionScreen(props: { session: SessionModel }) {
|
||||
})
|
||||
const isDesktop = session.isDesktop
|
||||
const browser = createSessionBrowser(session)
|
||||
const extensions = useExtensionPanels({
|
||||
services: createSessionServices(session),
|
||||
active: session.tabs.activeTab,
|
||||
serverID: () => server.key,
|
||||
sessionID: session.identity.sessionID,
|
||||
tabs: session.layout.tabs,
|
||||
open: () => session.layout.view().reviewPanel.open(),
|
||||
})
|
||||
const screen = createSessionScreenLayout(session)
|
||||
const timeline = createSessionTimelineInteraction(session)
|
||||
const timelineSearch = createTimelineSearchController({
|
||||
@@ -249,6 +259,7 @@ export function SessionScreen(props: { session: SessionModel }) {
|
||||
<Show when={messagesReady() ? session.identity.params.id : undefined} keyed>
|
||||
{(_id) => (
|
||||
<MessageTimeline
|
||||
headerActions={extensions.header()}
|
||||
hideHeader={!isDesktop()}
|
||||
session={session}
|
||||
background={composer.requests.background}
|
||||
@@ -288,6 +299,7 @@ export function SessionScreen(props: { session: SessionModel }) {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Show when={isDesktop()}>{extensions.declarations()}</Show>
|
||||
<div class="flex-1 min-h-0 flex flex-col gap-2 px-2 pb-[var(--shell-bottom-inset,8px)] pt-[var(--shell-top-inset,8px)]">
|
||||
<div ref={screen.panel.ref} class="relative flex-1 min-h-0 flex flex-col md:flex-row gap-2">
|
||||
{/* Keep the control outside panel animations; the terminal's 52px header includes a 1px divider. */}
|
||||
@@ -379,7 +391,12 @@ export function SessionScreen(props: { session: SessionModel }) {
|
||||
setStore("sideReviewPresent", false)
|
||||
}}
|
||||
>
|
||||
<SessionDesktopReview review={review} browser={browser} present={store.sideReviewPresent} />
|
||||
<SessionDesktopReview
|
||||
review={review}
|
||||
browser={browser}
|
||||
extensions={extensions}
|
||||
present={store.sideReviewPresent}
|
||||
/>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
@@ -1,76 +1,6 @@
|
||||
import { ResizeHandle } from "@opencode/ui/resize-handle"
|
||||
import type { ParentProps } from "solid-js"
|
||||
import { AuxiliaryPanel } from "@opencode/ui/auxiliary-panel"
|
||||
import type { ComponentProps } from "solid-js"
|
||||
|
||||
export function TerminalSurface(
|
||||
props: ParentProps<{
|
||||
label: string
|
||||
opened: boolean
|
||||
present?: boolean
|
||||
framed?: boolean
|
||||
embedded?: boolean
|
||||
desktop: boolean
|
||||
stacked: boolean
|
||||
height: string
|
||||
contentHeight: string
|
||||
pane: number
|
||||
max: number
|
||||
resizing: boolean
|
||||
animate?: boolean
|
||||
onResizeStart: () => void
|
||||
onResize: (height: number) => void
|
||||
onCollapse: () => void
|
||||
ref?: (element: HTMLElement) => void
|
||||
}>,
|
||||
) {
|
||||
return (
|
||||
<aside
|
||||
ref={props.ref}
|
||||
id="terminal-panel"
|
||||
data-component="terminal-panel"
|
||||
data-opened={props.opened}
|
||||
data-size-animated={
|
||||
props.animate !== false && !props.embedded && !props.resizing && (!props.desktop || props.stacked)
|
||||
}
|
||||
role="region"
|
||||
aria-label={props.label}
|
||||
aria-hidden={!props.opened}
|
||||
inert={!props.opened}
|
||||
class="relative shrink-0 overflow-hidden bg-v2-background-bg-base"
|
||||
classList={{
|
||||
"w-full": !props.desktop || props.stacked,
|
||||
"min-w-0 h-full flex-1": props.desktop && (props.present ?? props.opened) && !props.stacked,
|
||||
"w-0 h-full pointer-events-none": props.desktop && !(props.present ?? props.opened),
|
||||
"rounded-[10px] shadow-[var(--v2-elevation-raised)]": props.desktop && (props.framed ?? true),
|
||||
"will-change-[height]": !props.embedded && !props.resizing && (!props.desktop || props.stacked),
|
||||
}}
|
||||
style={{ height: props.height, "--terminal-panel-height": props.contentHeight }}
|
||||
>
|
||||
<div
|
||||
classList={{ "md:hidden": !props.stacked, hidden: props.stacked || props.embedded }}
|
||||
onPointerDown={props.onResizeStart}
|
||||
>
|
||||
<ResizeHandle
|
||||
class="-top-1"
|
||||
direction="vertical"
|
||||
size={props.pane}
|
||||
min={100}
|
||||
max={props.max}
|
||||
collapseThreshold={50}
|
||||
onResize={props.onResize}
|
||||
onCollapse={props.onCollapse}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
data-slot="terminal-panel-content"
|
||||
class="absolute inset-x-0 top-0 flex flex-col overflow-hidden"
|
||||
classList={{
|
||||
"border-t border-border-weak-base": props.opened && !props.desktop && !props.embedded,
|
||||
"pointer-events-none": !props.opened,
|
||||
}}
|
||||
style={{ height: props.contentHeight }}
|
||||
>
|
||||
{props.children}
|
||||
</div>
|
||||
</aside>
|
||||
)
|
||||
export function TerminalSurface(props: ComponentProps<typeof AuxiliaryPanel>) {
|
||||
return <AuxiliaryPanel {...props} id="terminal-panel" data-component="terminal-panel" />
|
||||
}
|
||||
|
||||
@@ -335,6 +335,7 @@ export function SessionSummaryPanel(props: {
|
||||
}
|
||||
|
||||
type MessageTimelineProps = {
|
||||
headerActions?: JSX.Element
|
||||
hideHeader?: boolean
|
||||
session: TimelineSessionSource
|
||||
background: SessionBackground
|
||||
@@ -795,6 +796,7 @@ function MessageTimelineView(
|
||||
<div class="shrink-0 flex items-center gap-2">
|
||||
{props.search}
|
||||
<SessionContextUsage placement="bottom" />
|
||||
{props.headerActions}
|
||||
<Show when={!parentID() && project()}>
|
||||
{(project) => (
|
||||
<Popover open={summaryOpen()} placement="bottom-end" gutter={6} onOpenChange={setSummary}>
|
||||
|
||||
@@ -7,6 +7,7 @@ import { SettingsList } from "@/settings/list"
|
||||
import { useSettings } from "@/settings/model"
|
||||
import { SettingsRow } from "@/settings/row"
|
||||
import "@/settings/settings.css"
|
||||
import { ExtensionSlot } from "@/extensions/slot"
|
||||
|
||||
const tabLayoutOptions: ("horizontal" | "vertical")[] = ["horizontal", "vertical"]
|
||||
|
||||
@@ -31,6 +32,7 @@ export const SettingsExperimental: Component = () => {
|
||||
<div class="settings-tab-body">
|
||||
<div class="settings-section">
|
||||
<SettingsList>
|
||||
<ExtensionSlot path="settings.experimental" />
|
||||
<Show when={platform.browserPane}>
|
||||
<SettingsRow
|
||||
title={language.t("settings.general.row.browserPane.title")}
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
.desktop-extension-manager {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
}
|
||||
.desktop-extension-install {
|
||||
gap: 14px;
|
||||
}
|
||||
.desktop-extension-drop {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 14px 16px;
|
||||
border-radius: 8px;
|
||||
background: var(--v2-background-bg-layer-01);
|
||||
color: var(--v2-text-text-muted);
|
||||
box-shadow: inset 0 0 0 0.5px var(--v2-border-border-muted);
|
||||
transition: 120ms ease-out;
|
||||
}
|
||||
.desktop-extension-drop[data-dragging="true"] {
|
||||
background: var(--v2-overlay-simple-overlay-hover);
|
||||
color: var(--v2-text-text-base);
|
||||
box-shadow: inset 0 0 0 1px var(--v2-border-border-focus);
|
||||
}
|
||||
.desktop-extension-drop > div {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.desktop-extension-drop strong {
|
||||
color: var(--v2-text-text-base);
|
||||
font-size: 13px;
|
||||
line-height: var(--line-height-compact);
|
||||
font-weight: 590;
|
||||
}
|
||||
.desktop-extension-drop span,
|
||||
.desktop-extension-empty {
|
||||
color: var(--v2-text-text-muted);
|
||||
font-size: 13px;
|
||||
line-height: var(--line-height-base);
|
||||
}
|
||||
.desktop-extension-url {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.desktop-extension-url [data-component="text-input-v2"] {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
.desktop-extension-method-label {
|
||||
color: var(--v2-text-text-faint);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.desktop-extension-error {
|
||||
color: var(--v2-state-fg-danger);
|
||||
font-size: 13px;
|
||||
line-height: var(--line-height-base);
|
||||
}
|
||||
.desktop-extension-title {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.desktop-extension-empty {
|
||||
padding: 20px;
|
||||
}
|
||||
@@ -0,0 +1,239 @@
|
||||
import { For, Show, createMemo } from "solid-js"
|
||||
import { createStore } from "solid-js/store"
|
||||
import { Badge } from "@opencode/ui/badge"
|
||||
import { Button } from "@opencode/ui/button"
|
||||
import { Switch } from "@opencode/ui/switch"
|
||||
import { TextInput } from "@opencode/ui/text-input"
|
||||
import { SettingsRow } from "@opencode/ui/layout"
|
||||
import { Icon } from "@opencode/ui/icon"
|
||||
import { IconButton } from "@opencode/ui/icon-button"
|
||||
import { Tooltip } from "@opencode/ui/tooltip"
|
||||
import { ExtensionManager } from "@opencode/plugin/desktop/manager"
|
||||
import { useDesktopExtensions } from "@/extensions/provider"
|
||||
import { useLanguage } from "@/runtime/i18n/language"
|
||||
import { usePlatform } from "@/runtime/platform/platform"
|
||||
import "./extensions.css"
|
||||
|
||||
const errors = {
|
||||
invalidArchive: "settings.desktopExtensions.error.archive",
|
||||
invalidManifest: "settings.desktopExtensions.error.manifest",
|
||||
invalidPath: "settings.desktopExtensions.error.path",
|
||||
tooLarge: "settings.desktopExtensions.error.size",
|
||||
reserved: "settings.desktopExtensions.error.reserved",
|
||||
notFound: "settings.desktopExtensions.error.notFound",
|
||||
disabled: "settings.desktopExtensions.error.disabled",
|
||||
invalidModule: "settings.desktopExtensions.error.module",
|
||||
download: "settings.desktopExtensions.error.download",
|
||||
url: "settings.desktopExtensions.error.url",
|
||||
storage: "settings.desktopExtensions.error.storage",
|
||||
files: "settings.desktopExtensions.error.files",
|
||||
} as const
|
||||
|
||||
/** Port of OCDX's manager, backed by the native Desktop extension registry. */
|
||||
export function SettingsExtensions() {
|
||||
const host = useDesktopExtensions()
|
||||
const language = useLanguage()
|
||||
const platform = usePlatform()
|
||||
const [state, setState] = createStore({
|
||||
url: "",
|
||||
busy: false,
|
||||
dragging: false,
|
||||
error: undefined as keyof typeof errors | undefined,
|
||||
})
|
||||
let picker: HTMLInputElement | undefined
|
||||
const entries = createMemo(() =>
|
||||
[
|
||||
...host.builtins().map((plugin) => ({
|
||||
id: plugin.id,
|
||||
name: plugin.name ? (language.t(plugin.name as Parameters<typeof language.t>[0]) ?? plugin.name) : plugin.id,
|
||||
version: plugin.version ?? platform.version ?? "0.0.0",
|
||||
enabled: true,
|
||||
builtin: true,
|
||||
hasMain: plugin.main ?? false,
|
||||
})),
|
||||
...host.state.installed
|
||||
.filter((entry) => !host.builtins().some((plugin) => plugin.id === entry.id))
|
||||
.map((entry) => ({ ...entry, builtin: false })),
|
||||
].toSorted((a, b) => Number(b.builtin) - Number(a.builtin) || a.name.localeCompare(b.name)),
|
||||
)
|
||||
const error = () => state.error ?? host.state.managerError
|
||||
const failed = () => host.state.installed.find((entry) => host.state.failures[entry.id])
|
||||
const perform = async (action: (manager: ExtensionManager.Transport) => Promise<unknown>) => {
|
||||
if (state.busy || !host.manager) return false
|
||||
setState({ busy: true, error: undefined })
|
||||
try {
|
||||
await action(host.manager)
|
||||
return true
|
||||
} catch (error) {
|
||||
setState("error", error instanceof ExtensionManager.ManagerError ? error.code : "storage")
|
||||
return false
|
||||
} finally {
|
||||
setState("busy", false)
|
||||
}
|
||||
}
|
||||
const installFiles = async (files: FileList | File[]) => {
|
||||
const archives = Array.from(files).filter((file) => file.name.toLowerCase().endsWith(".ocdx"))
|
||||
if (!archives.length) {
|
||||
setState("error", "files")
|
||||
return
|
||||
}
|
||||
await perform(async (manager) => {
|
||||
for (const file of archives) await manager.install(new Uint8Array(await file.arrayBuffer()))
|
||||
})
|
||||
}
|
||||
const installURL = async () => {
|
||||
const url = state.url.trim()
|
||||
if (!url) return
|
||||
if (await perform((manager) => manager.installURL(url))) setState("url", "")
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<div class="settings-tab-header">
|
||||
<div class="settings-tab-header-row">
|
||||
<h2 class="settings-tab-title">{language.t("settings.tab.extensions")}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-tab-body desktop-extension-manager" data-component="desktop-extension-manager">
|
||||
<section class="settings-section desktop-extension-install">
|
||||
<h3 class="settings-section-title">{language.t("settings.desktopExtensions.installTitle")}</h3>
|
||||
<div
|
||||
class="desktop-extension-drop"
|
||||
data-dragging={state.dragging}
|
||||
onDragEnter={(event) => {
|
||||
event.preventDefault()
|
||||
setState("dragging", true)
|
||||
}}
|
||||
onDragOver={(event) => event.preventDefault()}
|
||||
onDragLeave={(event) => {
|
||||
if (event.relatedTarget instanceof Node && event.currentTarget.contains(event.relatedTarget)) return
|
||||
setState("dragging", false)
|
||||
}}
|
||||
onDrop={(event) => {
|
||||
event.preventDefault()
|
||||
setState("dragging", false)
|
||||
if (event.dataTransfer) void installFiles(event.dataTransfer.files)
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<strong>{language.t("settings.desktopExtensions.drop")}</strong>
|
||||
<span>{language.t("settings.desktopExtensions.choose")}</span>
|
||||
</div>
|
||||
<Button size="small" variant="neutral" disabled={state.busy} onClick={() => picker?.click()}>
|
||||
{language.t("settings.desktopExtensions.browse")}
|
||||
</Button>
|
||||
<input
|
||||
ref={picker}
|
||||
type="file"
|
||||
accept=".ocdx"
|
||||
multiple
|
||||
hidden
|
||||
aria-label={language.t("settings.desktopExtensions.files")}
|
||||
onChange={(event) => {
|
||||
if (event.currentTarget.files) void installFiles(event.currentTarget.files)
|
||||
event.currentTarget.value = ""
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div class="desktop-extension-method-label">{language.t("settings.desktopExtensions.fromURL")}</div>
|
||||
<div class="desktop-extension-url">
|
||||
<TextInput
|
||||
appearance="large"
|
||||
dir="ltr"
|
||||
value={state.url}
|
||||
placeholder={language.t("settings.desktopExtensions.placeholder")}
|
||||
aria-label={language.t("settings.desktopExtensions.url")}
|
||||
disabled={state.busy}
|
||||
onInput={(event) => setState("url", event.currentTarget.value)}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === "Enter") void installURL()
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
size="normal"
|
||||
variant="neutral"
|
||||
disabled={state.busy || !state.url.trim()}
|
||||
onClick={() => void installURL()}
|
||||
>
|
||||
{language.t("settings.desktopExtensions.install")}
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
<Show when={error()}>
|
||||
{(error) => (
|
||||
<div role="alert" class="desktop-extension-error">
|
||||
{language.t(errors[error()])}
|
||||
</div>
|
||||
)}
|
||||
</Show>
|
||||
<Show when={failed()}>
|
||||
{(entry) => (
|
||||
<div role="alert" class="desktop-extension-error">
|
||||
{language.t("settings.desktopExtensions.error.activation", { name: entry().name })}
|
||||
</div>
|
||||
)}
|
||||
</Show>
|
||||
<section class="settings-section">
|
||||
<h3 class="settings-section-title">{language.t("settings.desktopExtensions.installed")}</h3>
|
||||
<div data-component="settings-list">
|
||||
<Show
|
||||
when={host.state.managerReady}
|
||||
fallback={
|
||||
<div role="status" class="desktop-extension-empty">
|
||||
{language.t("common.loading")}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Show
|
||||
when={entries().length}
|
||||
fallback={<div class="desktop-extension-empty">{language.t("settings.desktopExtensions.empty")}</div>}
|
||||
>
|
||||
<For each={entries()}>
|
||||
{(entry) => (
|
||||
<SettingsRow
|
||||
title={
|
||||
<span class="desktop-extension-title">
|
||||
<bdi dir="auto">{entry.name}</bdi>
|
||||
<Badge variant="neutral">v{entry.version}</Badge>
|
||||
<Show when={entry.builtin}>
|
||||
<Badge variant="accent">{language.t("settings.desktopExtensions.builtin")}</Badge>
|
||||
</Show>
|
||||
<Show when={entry.hasMain}>
|
||||
<Badge variant="neutral">{language.t("settings.desktopExtensions.main")}</Badge>
|
||||
</Show>
|
||||
</span>
|
||||
}
|
||||
description={<bdi dir="ltr">{entry.id}</bdi>}
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<Show when={!entry.builtin}>
|
||||
<Tooltip value={language.t("settings.desktopExtensions.reload", { name: entry.name })}>
|
||||
<IconButton
|
||||
icon={<Icon name="reset" />}
|
||||
variant="ghost-muted"
|
||||
size="normal"
|
||||
disabled={state.busy || !entry.enabled}
|
||||
aria-label={language.t("settings.desktopExtensions.reload", { name: entry.name })}
|
||||
onClick={() => void perform((manager) => manager.reload(entry.id))}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Show>
|
||||
<Switch
|
||||
checked={entry.enabled}
|
||||
disabled={entry.builtin || state.busy}
|
||||
onChange={(enabled) => void perform((manager) => manager.enable(entry.id, enabled))}
|
||||
hideLabel
|
||||
>
|
||||
{language.t("settings.desktopExtensions.enable", { name: entry.name })}
|
||||
</Switch>
|
||||
</div>
|
||||
</SettingsRow>
|
||||
)}
|
||||
</For>
|
||||
</Show>
|
||||
</Show>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
+3
-3
@@ -20,7 +20,7 @@ interface PluginRowItem {
|
||||
name: string
|
||||
}
|
||||
|
||||
export const SettingsExtensions: Component = () => {
|
||||
export const SettingsTools: Component = () => {
|
||||
const language = useLanguage()
|
||||
const serverSdk = useServerSDK()
|
||||
const data = useData()
|
||||
@@ -60,8 +60,8 @@ export const SettingsExtensions: Component = () => {
|
||||
<div class="settings-tab-header">
|
||||
<div class="settings-tab-header-row">
|
||||
<div class="flex flex-col gap-1">
|
||||
<h2 class="settings-tab-title">{language.t("settings.tab.extensions")}</h2>
|
||||
<span class="text-11-regular text-v2-text-text-muted">{language.t("settings.extensions.description")}</span>
|
||||
<h2 class="settings-tab-title">{language.t("settings.tab.tools")}</h2>
|
||||
<span class="text-11-regular text-v2-text-text-muted">{language.t("settings.tools.description")}</span>
|
||||
</div>
|
||||
<InlineServerSelect />
|
||||
</div>
|
||||
@@ -1,20 +1 @@
|
||||
import type { Component, JSX } from "solid-js"
|
||||
import "@/settings/settings.css"
|
||||
|
||||
export interface SettingsRowProps {
|
||||
title: string | JSX.Element
|
||||
description: string | JSX.Element
|
||||
children: JSX.Element
|
||||
}
|
||||
|
||||
export const SettingsRow: Component<SettingsRowProps> = (props) => {
|
||||
return (
|
||||
<div data-component="settings-row">
|
||||
<div data-slot="settings-row-copy">
|
||||
<div data-slot="settings-row-title">{props.title}</div>
|
||||
<div data-slot="settings-row-description">{props.description}</div>
|
||||
</div>
|
||||
<div data-slot="settings-row-control">{props.children}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export { SettingsRow } from "@opencode/ui/layout"
|
||||
|
||||
@@ -15,7 +15,9 @@ import { SettingsModels } from "./models/models"
|
||||
import { SettingsServers } from "./servers/servers"
|
||||
import { SettingsWorkspaces } from "./workspaces/workspaces"
|
||||
import { SettingsProjects } from "./workspaces/projects"
|
||||
import { SettingsExtensions } from "./providers/extensions"
|
||||
import { SettingsTools } from "./providers/tools"
|
||||
import { SettingsExtensions } from "./extensions/extensions"
|
||||
import { usePlatform } from "@/runtime/platform/platform"
|
||||
import { SettingsAbout } from "./about/about"
|
||||
import { SettingsServerScope } from "./server-scope"
|
||||
import { useDialog } from "@opencode/ui/context/dialog"
|
||||
@@ -41,14 +43,21 @@ const sections = [
|
||||
[
|
||||
{ value: "providers", icon: "providers", label: "settings.providers.title" },
|
||||
{ value: "models", icon: "models", label: "settings.models.title" },
|
||||
{ value: "tools", icon: "extensions", label: "settings.tab.tools" },
|
||||
],
|
||||
[
|
||||
{ value: "extensions", icon: "extensions", label: "settings.tab.extensions" },
|
||||
{ value: "experimental", icon: "flask", label: "settings.tab.experimental" },
|
||||
],
|
||||
[{ value: "experimental", icon: "flask", label: "settings.tab.experimental" }],
|
||||
[{ value: "about", icon: "info", label: "settings.tab.about" }],
|
||||
] as const
|
||||
|
||||
export const SettingsScreen: Component = () => {
|
||||
const language = useLanguage()
|
||||
const platform = usePlatform()
|
||||
const visibleSections = createMemo(() =>
|
||||
sections.map((group) => group.filter((section) => section.value !== "extensions" || !!platform.extensionManager)),
|
||||
)
|
||||
const dialog = useDialog()
|
||||
const surface = useSettingsSurface()
|
||||
const layout = useLayout()
|
||||
@@ -56,6 +65,9 @@ export const SettingsScreen: Component = () => {
|
||||
const tabs = useTabs()
|
||||
const global = useGlobal()
|
||||
const [state, setState] = createStore({ worktreeFilterReset: 0 })
|
||||
createEffect(() => {
|
||||
if (!platform.extensionManager && surface.tab() === "extensions") surface.open("tools")
|
||||
})
|
||||
let root: HTMLDivElement | undefined
|
||||
|
||||
onMount(() => {
|
||||
@@ -128,8 +140,9 @@ export const SettingsScreen: Component = () => {
|
||||
<Menu.Trigger as={Button} size="normal" variant="outline" class="settings-mobile-menu-trigger">
|
||||
<span>
|
||||
{language.t(
|
||||
sections.flat().find((section) => section.value === surface.tab())?.label ??
|
||||
"settings.tab.preferences",
|
||||
visibleSections()
|
||||
.flat()
|
||||
.find((section) => section.value === surface.tab())?.label ?? "settings.tab.preferences",
|
||||
)}
|
||||
</span>
|
||||
<Icon name="chevron-down" size="small" />
|
||||
@@ -140,7 +153,7 @@ export const SettingsScreen: Component = () => {
|
||||
value={surface.tab()}
|
||||
onChange={(value) => void startTransition(() => surface.open(value))}
|
||||
>
|
||||
<For each={sections}>
|
||||
<For each={visibleSections()}>
|
||||
{(group, index) => (
|
||||
<>
|
||||
<Show when={index() > 0}>
|
||||
@@ -176,9 +189,9 @@ export const SettingsScreen: Component = () => {
|
||||
<span>{language.t("settings.backToApp")}</span>
|
||||
</button>
|
||||
<div class="flex flex-col gap-4 w-full">
|
||||
<For each={sections}>
|
||||
<For each={visibleSections()}>
|
||||
{(group) => (
|
||||
<div class="flex flex-col gap-1 w-full">
|
||||
<div data-slot="settings-nav-group" class="flex flex-col gap-1 w-full">
|
||||
<For each={group}>
|
||||
{(section) => (
|
||||
<Tabs.Trigger
|
||||
@@ -214,6 +227,11 @@ export const SettingsScreen: Component = () => {
|
||||
<Tabs.Content value="experimental" class="settings-panel">
|
||||
<SettingsExperimental />
|
||||
</Tabs.Content>
|
||||
<Show when={platform.extensionManager}>
|
||||
<Tabs.Content value="extensions" class="settings-panel">
|
||||
<SettingsExtensions />
|
||||
</Tabs.Content>
|
||||
</Show>
|
||||
<Tabs.Content value="servers" class="settings-panel">
|
||||
<SettingsServers />
|
||||
</Tabs.Content>
|
||||
@@ -222,10 +240,7 @@ export const SettingsScreen: Component = () => {
|
||||
</Tabs.Content>
|
||||
<SettingsServerScope directory={directory()}>
|
||||
<Tabs.Content value="workspaces" class="settings-panel">
|
||||
<SettingsWorkspaces
|
||||
activeDirectory={directory()}
|
||||
resetProjectFilter={() => state.worktreeFilterReset}
|
||||
/>
|
||||
<SettingsWorkspaces activeDirectory={directory()} resetProjectFilter={() => state.worktreeFilterReset} />
|
||||
</Tabs.Content>
|
||||
<Tabs.Content value="providers" class="settings-panel">
|
||||
<SettingsProviders directory={directory()} onBack={showProviders} />
|
||||
@@ -233,8 +248,8 @@ export const SettingsScreen: Component = () => {
|
||||
<Tabs.Content value="models" class="settings-panel">
|
||||
<SettingsModels />
|
||||
</Tabs.Content>
|
||||
<Tabs.Content value="extensions" class="settings-panel">
|
||||
<SettingsExtensions />
|
||||
<Tabs.Content value="tools" class="settings-panel">
|
||||
<SettingsTools />
|
||||
</Tabs.Content>
|
||||
</SettingsServerScope>
|
||||
<Tabs.Content value="about" class="settings-panel settings-about">
|
||||
|
||||
@@ -67,7 +67,7 @@ function ProjectSettingsDialog(props: { project: LocalProject; server: ServerCon
|
||||
</Tabs.Trigger>
|
||||
<Tabs.Trigger value="extensions">
|
||||
<Icon name="extensions" size="small" />
|
||||
{language.t("settings.tab.extensions")}
|
||||
{language.t("settings.tab.tools")}
|
||||
</Tabs.Trigger>
|
||||
</div>
|
||||
</Tabs.List>
|
||||
|
||||
@@ -147,8 +147,8 @@ export const ProjectSettingsExtensions: Component = () => {
|
||||
return (
|
||||
<div class="project-settings-extensions">
|
||||
<div class="project-settings-page-header">
|
||||
<h2>{language.t("settings.tab.extensions")}</h2>
|
||||
<span>{language.t("project.settings.extensions.description")}</span>
|
||||
<h2>{language.t("settings.tab.tools")}</h2>
|
||||
<span>{language.t("project.settings.tools.description")}</span>
|
||||
</div>
|
||||
|
||||
<Tabs variant="pill" defaultValue="mcps" class="project-settings-extension-tabs">
|
||||
|
||||
@@ -458,6 +458,10 @@ export const { use: useCommand, provider: CommandProvider } = createSimpleContex
|
||||
const config = keybindConfig(id)
|
||||
return config ? formatKeybindParts(config, language.t) : []
|
||||
},
|
||||
matches(id: string, event: KeyboardEvent) {
|
||||
const config = keybindConfig(id)
|
||||
return !!config && matchKeybind(parseKeybind(config), event)
|
||||
},
|
||||
show: showPalette,
|
||||
keybinds(enabled: boolean) {
|
||||
setStore("suspendCount", (count) => Math.max(0, count + (enabled ? -1 : 1)))
|
||||
|
||||
@@ -5,6 +5,8 @@ import { ServerProvider } from "@/runtime/server/current"
|
||||
import { useGlobal } from "@/runtime/server/runtime"
|
||||
import { ServerConnection, useServers } from "@/runtime/server/registry"
|
||||
import { BrowserAttachmentsProvider } from "@/session/browser/attachments"
|
||||
import { DesktopExtensionsProvider } from "@/extensions/provider"
|
||||
import { ExtensionSlot } from "@/extensions/slot"
|
||||
import { SessionPanelFrame, SessionRouteFrame } from "@/session/session-frame"
|
||||
import { LayoutProvider } from "@/shell/state/layout"
|
||||
import { SettingsSurfaceProvider } from "@/settings/surface"
|
||||
@@ -80,7 +82,11 @@ function AppLayout(props: ParentProps) {
|
||||
<LayoutProvider>
|
||||
<SettingsSurfaceProvider>
|
||||
<BrowserAttachmentsProvider>
|
||||
<Shell>{props.children}</Shell>
|
||||
<DesktopExtensionsProvider>
|
||||
<ExtensionSlot path="app">
|
||||
<Shell>{props.children}</Shell>
|
||||
</ExtensionSlot>
|
||||
</DesktopExtensionsProvider>
|
||||
</BrowserAttachmentsProvider>
|
||||
</SettingsSurfaceProvider>
|
||||
</LayoutProvider>
|
||||
|
||||
@@ -52,7 +52,7 @@ export type HomeProjectSelection = typeof layoutSchema.Type.home.selection
|
||||
|
||||
export type ReviewDiffStyle = typeof layoutSchema.Type.review.diffStyle
|
||||
export type ReviewChangeMode = NonNullable<(typeof layoutSchema.Type.sessionView)[string]["reviewMode"]>
|
||||
export type ReviewPanelSource = "context-button" | "other"
|
||||
export type ReviewPanelSource = string
|
||||
export type TabPanes = {
|
||||
terminalOpened: Accessor<boolean>
|
||||
setTerminalOpened(opened: boolean): void
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { createContext, onCleanup, onMount, Show, useContext, type ParentProps } from "solid-js"
|
||||
import { createStore } from "solid-js/store"
|
||||
import { Portal } from "solid-js/web"
|
||||
import { ExtensionSlot } from "@/extensions/slot"
|
||||
|
||||
type Registration = {
|
||||
active: () => boolean
|
||||
@@ -45,7 +46,9 @@ export function TitlebarRightMount(props: { vertical?: boolean }) {
|
||||
ref={slot.setMount}
|
||||
id="opencode-titlebar-right"
|
||||
class={props.vertical ? "flex w-full shrink-0 flex-col" : "flex shrink-0 items-center justify-end gap-0"}
|
||||
/>
|
||||
>
|
||||
<ExtensionSlot path="titlebar.actions" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -257,7 +257,7 @@ export const { use: useFile, provider: FileProvider } = createSimpleContext({
|
||||
return state
|
||||
}
|
||||
|
||||
function withPath(input: string, action: (file: string) => unknown) {
|
||||
function withPath<Value>(input: string, action: (file: string) => Value): Value {
|
||||
return action(path.normalize(input))
|
||||
}
|
||||
const scrollTop = (input: string) => withPath(input, (file) => view().scrollTop(file))
|
||||
|
||||
@@ -48,6 +48,40 @@ function desktop() {
|
||||
}
|
||||
|
||||
describe("schema-backed persistence", () => {
|
||||
for (const mode of ["web", "desktop"] as const) {
|
||||
test(`relocates an extracted workspace key from an alias in ${mode} storage`, async () => {
|
||||
const native = desktop()
|
||||
const target = {
|
||||
...Persist.workspace(`C:\\extension-relocation-${mode}`, "extension.example.document"),
|
||||
previousKeys: ["workspace:legacy"],
|
||||
}
|
||||
const previous = `${target.workspaceStorageAliases![0]}:workspace:legacy`
|
||||
const current = `${target.storage}:${target.key}`
|
||||
const read = (key: string) => (mode === "web" ? localStorage.getItem(key) : native.values.get(key))
|
||||
const raw = JSON.stringify({ enabled: false, label: "retained" })
|
||||
if (mode === "web") localStorage.setItem(previous, raw)
|
||||
if (mode === "desktop") native.values.set(previous, raw)
|
||||
const mounted = createRoot((dispose) => {
|
||||
const state = persisted(target, Current, initial, mode === "web" ? web : native.platform)
|
||||
const ready = new Promise<void>((resolve) =>
|
||||
createComputed(() => {
|
||||
if (state[3]()) resolve()
|
||||
}),
|
||||
)
|
||||
return { dispose, state, ready }
|
||||
})
|
||||
try {
|
||||
await mounted.ready
|
||||
expect(mounted.state[3]()).toBe(true)
|
||||
expect(mounted.state[0]).toEqual({ enabled: false, label: "retained" })
|
||||
expect(read(current)).toBe(raw)
|
||||
expect(read(previous)).toBeFalsy()
|
||||
} finally {
|
||||
mounted.dispose()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
test("clears the recent tab after restoring it from storage", () => {
|
||||
const target = Persist.global("schema-recent-clear")
|
||||
const key = `${target.storage}:${target.key}`
|
||||
|
||||
@@ -38,6 +38,7 @@
|
||||
"@lydell/node-pty": "catalog:",
|
||||
"@opencode/app": "workspace:*",
|
||||
"@opencode/client": "workspace:*",
|
||||
"@opencode/plugin": "workspace:*",
|
||||
"@opencode/schema": "workspace:*",
|
||||
"@opencode/plugin-browser": "workspace:*",
|
||||
"@opencode/ui": "workspace:*",
|
||||
|
||||
@@ -6,7 +6,7 @@ import { createCdp, abortError, waitFor } from "./browser/cdp"
|
||||
import { createBrowserFiles } from "./browser/files"
|
||||
import { createDiagnostics } from "./browser/diagnostics"
|
||||
import { createProfiling } from "./browser/profiling"
|
||||
import { createCornerImages } from "./browser/corners"
|
||||
import { createCornerImages } from "./native/corners"
|
||||
import type { BrowserNetwork } from "./browser/network"
|
||||
import { destinationOrigin, normalizeURL } from "./browser/policy"
|
||||
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
import { Uint8ArrayReader, Uint8ArrayWriter, TextWriter, ZipReader } from "@zip.js/zip.js"
|
||||
import { Schema } from "effect"
|
||||
import { createHash } from "node:crypto"
|
||||
import { ExtensionManager } from "@opencode/plugin/desktop/manager"
|
||||
|
||||
export const archiveLimit = 1_073_741_824
|
||||
|
||||
export function archivePath(value: string) {
|
||||
if (
|
||||
!value ||
|
||||
value.includes("\\") ||
|
||||
value.includes(":") ||
|
||||
/[\u0000-\u001f]/.test(value) ||
|
||||
value.startsWith("/") ||
|
||||
value.split("/").some((part) => !part || part === "." || part === "..")
|
||||
) {
|
||||
throw new ExtensionManager.ManagerError("invalidPath")
|
||||
}
|
||||
return value
|
||||
}
|
||||
|
||||
export async function readArchive(data: Uint8Array) {
|
||||
if (data.byteLength > archiveLimit) throw new ExtensionManager.ManagerError("tooLarge")
|
||||
if (data[0] !== 0x50 || data[1] !== 0x4b) throw new ExtensionManager.ManagerError("invalidArchive")
|
||||
// zip.js expects slice() to copy; Node Buffer.slice() returns a view instead.
|
||||
const reader = new ZipReader(new Uint8ArrayReader(Buffer.isBuffer(data) ? new Uint8Array(data) : data), {
|
||||
useWebWorkers: false,
|
||||
})
|
||||
try {
|
||||
const entries = await reader.getEntries()
|
||||
if (entries.length > 1024 || entries.reduce((total, entry) => total + entry.uncompressedSize, 0) > archiveLimit)
|
||||
throw new ExtensionManager.ManagerError("tooLarge")
|
||||
const paths = entries.map((entry) =>
|
||||
archivePath(entry.directory ? entry.filename.replace(/\/$/, "") : entry.filename),
|
||||
)
|
||||
if (new Set(paths).size !== paths.length) throw new ExtensionManager.ManagerError("invalidPath")
|
||||
const metadata = entries.find((entry) => entry.filename === "manifest.json" && !entry.directory)
|
||||
if (!metadata || metadata.directory || !metadata.getData || metadata.uncompressedSize > 65536)
|
||||
throw new ExtensionManager.ManagerError("invalidManifest")
|
||||
const manifest = Schema.decodeUnknownOption(Schema.fromJsonString(ExtensionManager.Manifest))(
|
||||
await metadata.getData(new TextWriter()),
|
||||
)
|
||||
if (manifest._tag === "None") throw new ExtensionManager.ManagerError("invalidManifest")
|
||||
const value = manifest.value
|
||||
archivePath(value.entry)
|
||||
if (value.main) archivePath(value.main)
|
||||
if (value.style) archivePath(value.style)
|
||||
const files = await Promise.all(
|
||||
entries
|
||||
.filter((entry) => !entry.directory)
|
||||
.map(async (entry) => {
|
||||
if (!entry.getData) throw new ExtensionManager.ManagerError("invalidArchive")
|
||||
return { path: entry.filename, data: Buffer.from(await entry.getData(new Uint8ArrayWriter())) }
|
||||
}),
|
||||
)
|
||||
if (files.reduce((total, file) => total + file.data.byteLength, 0) > archiveLimit)
|
||||
throw new ExtensionManager.ManagerError("tooLarge")
|
||||
if (value.style && !files.some((file) => file.path === value.style))
|
||||
throw new ExtensionManager.ManagerError("invalidManifest")
|
||||
for (const entry of [value.entry, value.main].filter((entry) => entry !== undefined)) {
|
||||
const file = files.find((file) => file.path === entry)
|
||||
if (!file) throw new ExtensionManager.ManagerError("invalidManifest")
|
||||
// Reject syntax errors before replacing a working installation. Execution
|
||||
// remains in the renderer/main host with their shared module identities.
|
||||
try {
|
||||
new Function("require", "module", "exports", file.data.toString("utf8"))
|
||||
} catch {
|
||||
throw new ExtensionManager.ManagerError("invalidModule")
|
||||
}
|
||||
}
|
||||
return { manifest: value, revision: createHash("sha256").update(data).digest("hex"), files }
|
||||
} catch (error) {
|
||||
if (error instanceof ExtensionManager.ManagerError) throw error
|
||||
throw new ExtensionManager.ManagerError("invalidArchive", { cause: error })
|
||||
} finally {
|
||||
await reader.close()
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
import { and, eq, sql } from "drizzle-orm"
|
||||
import type { Database } from "../storage/database"
|
||||
import { extensions, extensionFiles } from "../storage/schema"
|
||||
|
||||
const types: Record<string, string> = {
|
||||
png: "image/png",
|
||||
jpg: "image/jpeg",
|
||||
jpeg: "image/jpeg",
|
||||
webp: "image/webp",
|
||||
svg: "image/svg+xml",
|
||||
mp4: "video/mp4",
|
||||
webm: "video/webm",
|
||||
mp3: "audio/mpeg",
|
||||
wav: "audio/wav",
|
||||
ogg: "audio/ogg",
|
||||
woff2: "font/woff2",
|
||||
woff: "font/woff",
|
||||
json: "application/json",
|
||||
css: "text/css",
|
||||
txt: "text/plain",
|
||||
pdf: "application/pdf",
|
||||
wasm: "application/wasm",
|
||||
}
|
||||
|
||||
export function extensionAssetResponse(
|
||||
db: Database,
|
||||
input: { id: string; revision: string; path: string; range?: string | null; head?: boolean },
|
||||
) {
|
||||
const where = and(
|
||||
eq(extensionFiles.extension_id, input.id),
|
||||
eq(extensionFiles.path, input.path),
|
||||
eq(extensions.revision, input.revision),
|
||||
eq(extensions.enabled, true),
|
||||
)
|
||||
const metadata = db
|
||||
.select({ size: sql<number>`length(${extensionFiles.data})` })
|
||||
.from(extensionFiles)
|
||||
.innerJoin(extensions, eq(extensionFiles.extension_id, extensions.id))
|
||||
.where(where)
|
||||
.get()
|
||||
if (!metadata) return new Response(null, { status: 404 })
|
||||
const headers = new Headers({
|
||||
"Content-Type": types[input.path.split(".").at(-1)?.toLowerCase() ?? ""] ?? "application/octet-stream",
|
||||
"Cache-Control": "no-store",
|
||||
"Accept-Ranges": "bytes",
|
||||
})
|
||||
const match = input.range?.match(/^bytes=(\d*)-(\d*)$/)
|
||||
const start = match?.[1] ? Number(match[1]) : match?.[2] ? Math.max(0, metadata.size - Number(match[2])) : 0
|
||||
const end = match?.[1] && match[2] ? Math.min(Number(match[2]), metadata.size - 1) : metadata.size - 1
|
||||
if (
|
||||
input.range &&
|
||||
(!match ||
|
||||
(!match[1] && !match[2]) ||
|
||||
!Number.isSafeInteger(start) ||
|
||||
!Number.isSafeInteger(end) ||
|
||||
start > end ||
|
||||
start >= metadata.size)
|
||||
) {
|
||||
headers.set("Content-Range", `bytes */${metadata.size}`)
|
||||
return new Response(null, { status: 416, headers })
|
||||
}
|
||||
headers.set("Content-Length", String(Math.max(0, end - start + 1)))
|
||||
if (input.range) headers.set("Content-Range", `bytes ${start}-${end}/${metadata.size}`)
|
||||
const data = input.head
|
||||
? undefined
|
||||
: db
|
||||
.select({
|
||||
data: sql<Uint8Array>`substr(${extensionFiles.data}, ${start + 1}, ${Math.max(0, end - start + 1)})`,
|
||||
})
|
||||
.from(extensionFiles)
|
||||
.innerJoin(extensions, eq(extensionFiles.extension_id, extensions.id))
|
||||
.where(where)
|
||||
.get()?.data
|
||||
return new Response(data ? new Uint8Array(data) : null, { status: input.range ? 206 : 200, headers })
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
import type { MainPlugin } from "@opencode/plugin/desktop/main"
|
||||
|
||||
export const mainExtensions: readonly MainPlugin.Entry[] = []
|
||||
@@ -0,0 +1,182 @@
|
||||
import type { BrowserWindow } from "electron"
|
||||
import { NodeHttpClient } from "@effect/platform-node"
|
||||
import { OpenCode } from "@opencode/client/effect"
|
||||
import type { MainPlugin } from "@opencode/plugin/desktop/main"
|
||||
import { DesktopExtension } from "@opencode/plugin/desktop/protocol"
|
||||
import { createLifecycle } from "@opencode/plugin/desktop/lifecycle"
|
||||
import { CallError, decode, encode } from "@opencode/plugin/desktop/rpc"
|
||||
import { Effect, ManagedRuntime, Schema } from "effect"
|
||||
import { HttpClient, HttpClientRequest } from "effect/unstable/http"
|
||||
import { SidecarCredentials } from "../service/sidecar-credentials"
|
||||
import { createSurfaces } from "./surfaces"
|
||||
|
||||
export function createMainExtensionHost(
|
||||
plugins: readonly MainPlugin.Entry[],
|
||||
publish: (win: BrowserWindow, event: DesktopExtension.Event) => void,
|
||||
load?: (id: string) => Promise<MainPlugin.Entry | undefined>,
|
||||
) {
|
||||
const windows = new Map<BrowserWindow, ReturnType<typeof windowHost>>()
|
||||
const host = (win: BrowserWindow) => {
|
||||
const previous = windows.get(win)
|
||||
if (previous) return previous
|
||||
const result = windowHost(win)
|
||||
windows.set(win, result)
|
||||
win.once("closed", () => {
|
||||
result.dispose()
|
||||
windows.delete(win)
|
||||
})
|
||||
return result
|
||||
}
|
||||
const runtime = ManagedRuntime.make(NodeHttpClient.layerNodeHttp)
|
||||
return {
|
||||
configure(win: BrowserWindow, servers: readonly DesktopExtension.Endpoint[]) {
|
||||
host(win).configure(servers)
|
||||
},
|
||||
call(win: BrowserWindow, input: DesktopExtension.Call) {
|
||||
return host(win).call(input)
|
||||
},
|
||||
cancel(win: BrowserWindow, extensionID: string, requestID: string) {
|
||||
host(win).cancel(extensionID, requestID)
|
||||
},
|
||||
surface(win: BrowserWindow, extensionID: string, surfaceID: string, layout?: DesktopExtension.Layout) {
|
||||
host(win).surfaces.layout(extensionID, surfaceID, layout)
|
||||
},
|
||||
release(win: BrowserWindow, extensionID: string) {
|
||||
host(win).release(extensionID)
|
||||
},
|
||||
releaseAll(extensionID: string) {
|
||||
windows.forEach((host) => host.release(extensionID))
|
||||
},
|
||||
async dispose() {
|
||||
windows.forEach((value) => value.dispose())
|
||||
windows.clear()
|
||||
await runtime.dispose()
|
||||
},
|
||||
}
|
||||
|
||||
function windowHost(win: BrowserWindow) {
|
||||
const servers = new Map<string, DesktopExtension.Endpoint>()
|
||||
const instances = new Map<
|
||||
string,
|
||||
{
|
||||
lifecycle: ReturnType<typeof createLifecycle>
|
||||
handlers: ReturnType<MainPlugin.Entry["setup"]>
|
||||
definition: MainPlugin.Entry
|
||||
}
|
||||
>()
|
||||
const calls = new Map<string, AbortController>()
|
||||
const surfaces = createSurfaces(win)
|
||||
const release = (extensionID: string) => {
|
||||
calls.forEach((call, key) => {
|
||||
if (key.startsWith(`${extensionID}/`)) call.abort()
|
||||
})
|
||||
const instance = instances.get(extensionID)
|
||||
instances.delete(extensionID)
|
||||
try {
|
||||
instance?.lifecycle.dispose()
|
||||
} finally {
|
||||
surfaces.release(extensionID)
|
||||
}
|
||||
}
|
||||
const instance = async (id: string) => {
|
||||
const previous = instances.get(id)
|
||||
if (previous) return previous
|
||||
const definition = plugins.find((plugin) => plugin.id === id) ?? (await load?.(id))
|
||||
if (!definition) throw new CallError("rpc.unavailable", `Desktop extension unavailable: ${id}`)
|
||||
const loaded = instances.get(id)
|
||||
if (loaded) return loaded
|
||||
const lifecycle = createLifecycle()
|
||||
const context: MainPlugin.Context = {
|
||||
window: win,
|
||||
lifecycle,
|
||||
client(serverID) {
|
||||
const endpoint = servers.get(serverID)
|
||||
if (!endpoint) return Promise.reject(new Error("Desktop server is unavailable"))
|
||||
return runtime.runPromise(
|
||||
Effect.gen(function* () {
|
||||
const http = yield* HttpClient.HttpClient
|
||||
const authorization = endpoint.password
|
||||
? `Basic ${Buffer.from(`${endpoint.username ?? "opencode"}:${endpoint.password}`).toString("base64")}`
|
||||
: SidecarCredentials.authorization(SidecarCredentials.get(), endpoint.url)
|
||||
return yield* OpenCode.make({ baseUrl: endpoint.url }).pipe(
|
||||
Effect.provideService(
|
||||
HttpClient.HttpClient,
|
||||
authorization
|
||||
? HttpClient.mapRequest(http, HttpClientRequest.setHeader("authorization", authorization))
|
||||
: http,
|
||||
),
|
||||
)
|
||||
}),
|
||||
)
|
||||
},
|
||||
surfaces: { register: (view) => surfaces.register(id, view) },
|
||||
async emit(contract, name, data) {
|
||||
if (lifecycle.signal.aborted) return
|
||||
const event = contract.events[name]
|
||||
if (!event) throw new Error(`Unknown desktop event: ${name}`)
|
||||
publish(win, { extensionID: id, rpcID: contract.id, name, data: await encode(event.schema, data) })
|
||||
},
|
||||
}
|
||||
try {
|
||||
const value = { lifecycle, definition, handlers: definition.setup(context) }
|
||||
instances.set(id, value)
|
||||
return value
|
||||
} catch (error) {
|
||||
lifecycle.dispose()
|
||||
throw error
|
||||
}
|
||||
}
|
||||
return {
|
||||
surfaces,
|
||||
release,
|
||||
configure(values: readonly DesktopExtension.Endpoint[]) {
|
||||
servers.clear()
|
||||
values.forEach((server) => servers.set(server.id, server))
|
||||
},
|
||||
cancel(id: string, requestID: string) {
|
||||
calls.get(`${id}/${requestID}`)?.abort()
|
||||
},
|
||||
async call(input: DesktopExtension.Call): Promise<Schema.Json> {
|
||||
const key = `${input.extensionID}/${input.requestID}`
|
||||
const controller = new AbortController()
|
||||
calls.set(key, controller)
|
||||
try {
|
||||
const current = await instance(input.extensionID)
|
||||
controller.signal.throwIfAborted()
|
||||
const method =
|
||||
current.definition.rpc.id === input.rpcID ? current.definition.rpc.methods[input.method] : undefined
|
||||
const handler = current.handlers[input.method]
|
||||
if (!method || !handler) throw new CallError("rpc.method_not_found", "Unknown desktop extension method")
|
||||
const value = await decode(method.input, input.input).catch((error) => {
|
||||
throw new CallError("rpc.invalid_input", String(error))
|
||||
})
|
||||
const output = await handler(value, {
|
||||
signal: AbortSignal.any([controller.signal, current.lifecycle.signal]),
|
||||
error(type, message, data): never {
|
||||
throw new CallError(type, message, data)
|
||||
},
|
||||
})
|
||||
return { ok: true, output: await encode(method.output, output) }
|
||||
} catch (error) {
|
||||
return Schema.decodeUnknownSync(Schema.Json)({
|
||||
ok: false,
|
||||
error: {
|
||||
type: error instanceof CallError ? error.type : "rpc.internal",
|
||||
message: error instanceof Error ? error.message : String(error),
|
||||
...(error instanceof CallError && error.data !== undefined
|
||||
? { data: Schema.decodeUnknownSync(Schema.Json)(error.data) }
|
||||
: {}),
|
||||
},
|
||||
})
|
||||
} finally {
|
||||
calls.delete(key)
|
||||
}
|
||||
},
|
||||
dispose() {
|
||||
calls.forEach((call) => call.abort())
|
||||
Array.from(instances.keys()).forEach(release)
|
||||
surfaces.dispose()
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
import { expect, test } from "bun:test"
|
||||
import { openDatabase } from "../storage/database"
|
||||
import { createExtensionManager, readExtensionAsset } from "./manager"
|
||||
import { readArchive } from "./archive"
|
||||
import { ExtensionManager } from "@opencode/plugin/desktop/manager"
|
||||
import { extensionArchive } from "../../../test/extensions/fixture"
|
||||
import { extensionAssetResponse } from "./assets"
|
||||
|
||||
test("installation, replacement, enable state and same-build reload persist in SQLite", async () => {
|
||||
const database = openDatabase(":memory:")
|
||||
const changed: string[] = []
|
||||
const manager = createExtensionManager({ db: database.db, fetch, changed: (id) => changed.push(id) })
|
||||
const archive = await extensionArchive({ files: { "assets/value.txt": "one" } })
|
||||
const [first] = await manager.install(archive)
|
||||
expect(first).toMatchObject({ id: "test.lifecycle", name: "File utilities", enabled: true, generation: 1 })
|
||||
expect(readExtensionAsset(database.db, first.id, first.revision, "assets/value.txt")?.toString()).toBe("one")
|
||||
const [reloaded] = manager.reload(first.id)
|
||||
expect(reloaded).toMatchObject({ revision: first.revision, generation: 2 })
|
||||
manager.enable(first.id, false)
|
||||
expect(() => manager.source(first.id, first.revision)).toThrow("disabled")
|
||||
const restored = createExtensionManager({ db: database.db, fetch, changed() {} })
|
||||
expect(restored.list()[0].enabled).toBe(false)
|
||||
expect(readExtensionAsset(database.db, first.id, first.revision, "assets/value.txt")).toBeUndefined()
|
||||
manager.enable(first.id, true)
|
||||
const [updated] = await manager.install(
|
||||
await extensionArchive({ version: "2.0.0", files: { "assets/value.txt": "two" } }),
|
||||
)
|
||||
expect(updated).toMatchObject({ version: "2.0.0", generation: 5 })
|
||||
expect(updated.revision).not.toBe(first.revision)
|
||||
expect(readExtensionAsset(database.db, first.id, updated.revision, "assets/value.txt")?.toString()).toBe("two")
|
||||
expect(readExtensionAsset(database.db, first.id, first.revision, "assets/value.txt")).toBeUndefined()
|
||||
expect(changed).toEqual(Array(5).fill(first.id))
|
||||
database.close()
|
||||
})
|
||||
|
||||
test("a rejected update preserves the working archive", async () => {
|
||||
const database = openDatabase(":memory:")
|
||||
const manager = createExtensionManager({ db: database.db, fetch, changed() {} })
|
||||
const [first] = await manager.install(await extensionArchive())
|
||||
await expect(manager.install(await extensionArchive({ renderer: "export const broken =" }))).rejects.toThrow(
|
||||
"invalidModule",
|
||||
)
|
||||
await expect(manager.install(await extensionArchive({ id: "opencode.browser" }))).rejects.toThrow("reserved")
|
||||
expect(manager.list()).toEqual([first])
|
||||
expect(manager.source(first.id, first.revision).source).toContain("setup()")
|
||||
database.close()
|
||||
})
|
||||
|
||||
test("archive assets retain byte ranges, HEAD and disabled-state behavior", async () => {
|
||||
const database = openDatabase(":memory:")
|
||||
const manager = createExtensionManager({ db: database.db, fetch, changed() {} })
|
||||
const [entry] = await manager.install(await extensionArchive({ files: { "assets/movie.webm": "0123456789" } }))
|
||||
const input = { id: entry.id, revision: entry.revision, path: "assets/movie.webm" }
|
||||
const range = extensionAssetResponse(database.db, { ...input, range: "bytes=2-5" })
|
||||
expect(range.status).toBe(206)
|
||||
expect(range.headers.get("Content-Range")).toBe("bytes 2-5/10")
|
||||
expect(await range.text()).toBe("2345")
|
||||
expect(await extensionAssetResponse(database.db, { ...input, range: "bytes=-3" }).text()).toBe("789")
|
||||
expect(extensionAssetResponse(database.db, { ...input, range: "bytes=20-" }).status).toBe(416)
|
||||
const head = extensionAssetResponse(database.db, { ...input, head: true })
|
||||
expect(head.headers.get("Content-Length")).toBe("10")
|
||||
expect(await head.text()).toBe("")
|
||||
manager.enable(entry.id, false)
|
||||
expect(extensionAssetResponse(database.db, input).status).toBe(404)
|
||||
database.close()
|
||||
})
|
||||
|
||||
test.each([
|
||||
{ manifest: { schema: 1 } },
|
||||
{ manifest: { entry: "missing.cjs" } },
|
||||
{ manifest: { main: "missing.cjs" } },
|
||||
{ manifest: { entry: "../renderer.cjs" } },
|
||||
{ files: { "../escape.txt": "bad" } },
|
||||
{ files: { "C:/escape.txt": "bad" } },
|
||||
])("validates the archive boundary: %j", async (input) => {
|
||||
await expect(readArchive(await extensionArchive(input))).rejects.toBeInstanceOf(ExtensionManager.ManagerError)
|
||||
})
|
||||
|
||||
test("downloads archives over HTTP and rejects unsupported URLs or failed responses", async () => {
|
||||
const archive = await extensionArchive()
|
||||
const server = Bun.serve({
|
||||
hostname: "127.0.0.1",
|
||||
port: 0,
|
||||
fetch: (request) =>
|
||||
new URL(request.url).pathname === "/extension.ocdx" ? new Response(archive) : new Response(null, { status: 404 }),
|
||||
})
|
||||
const database = openDatabase(":memory:")
|
||||
const manager = createExtensionManager({ db: database.db, fetch, changed() {} })
|
||||
try {
|
||||
expect(await manager.installURL(new URL("extension.ocdx", server.url).href)).toHaveLength(1)
|
||||
await expect(manager.installURL(new URL("missing.ocdx", server.url).href)).rejects.toThrow("download")
|
||||
await expect(manager.installURL("file:///extension.ocdx")).rejects.toThrow("url")
|
||||
} finally {
|
||||
server.stop(true)
|
||||
database.close()
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,147 @@
|
||||
import { and, eq, sql } from "drizzle-orm"
|
||||
import { Schema } from "effect"
|
||||
import type { Database } from "../storage/database"
|
||||
import { extensions, extensionFiles } from "../storage/schema"
|
||||
import { ExtensionManager } from "@opencode/plugin/desktop/manager"
|
||||
import { readArchive, archiveLimit } from "./archive"
|
||||
|
||||
const decodeManifest = Schema.decodeUnknownSync(Schema.fromJsonString(ExtensionManager.Manifest))
|
||||
|
||||
/** Archive bytes and enable state are committed together in Desktop's SQLite store. */
|
||||
export function createExtensionManager(input: {
|
||||
db: Database
|
||||
fetch: (url: string) => Promise<Response>
|
||||
changed(id: string, entries: readonly ExtensionManager.Installed[]): void
|
||||
reserved?: readonly string[]
|
||||
}) {
|
||||
const list = (): ExtensionManager.Installed[] =>
|
||||
input.db
|
||||
.select()
|
||||
.from(extensions)
|
||||
.all()
|
||||
.map((row) => {
|
||||
const manifest = decodeManifest(row.manifest)
|
||||
return {
|
||||
id: row.id,
|
||||
name: manifest.name,
|
||||
version: manifest.version,
|
||||
revision: row.revision,
|
||||
generation: row.generation,
|
||||
enabled: row.enabled,
|
||||
hasMain: !!manifest.main,
|
||||
}
|
||||
})
|
||||
const get = (id: string, revision?: string) => {
|
||||
const row = input.db.select().from(extensions).where(eq(extensions.id, id)).get()
|
||||
if (!row || (revision && row.revision !== revision)) throw new ExtensionManager.ManagerError("notFound")
|
||||
if (!row.enabled) throw new ExtensionManager.ManagerError("disabled")
|
||||
return { ...row, manifest: decodeManifest(row.manifest) }
|
||||
}
|
||||
const source = (id: string, revision?: string, main = false): ExtensionManager.Source => {
|
||||
const row = get(id, revision)
|
||||
const entry = main ? row.manifest.main : row.manifest.entry
|
||||
const file =
|
||||
entry &&
|
||||
input.db
|
||||
.select()
|
||||
.from(extensionFiles)
|
||||
.where(and(eq(extensionFiles.extension_id, id), eq(extensionFiles.path, entry)))
|
||||
.get()
|
||||
if (!file) throw new ExtensionManager.ManagerError("notFound")
|
||||
return { manifest: row.manifest, revision: row.revision, source: file.data.toString("utf8") }
|
||||
}
|
||||
const install = async (bytes: Uint8Array) => {
|
||||
const archive = await readArchive(bytes)
|
||||
if (archive.manifest.id.startsWith("opencode.") || input.reserved?.includes(archive.manifest.id))
|
||||
throw new ExtensionManager.ManagerError("reserved")
|
||||
input.db.transaction((db) => {
|
||||
db.delete(extensionFiles).where(eq(extensionFiles.extension_id, archive.manifest.id)).run()
|
||||
db.insert(extensions)
|
||||
.values({
|
||||
id: archive.manifest.id,
|
||||
manifest: JSON.stringify(archive.manifest),
|
||||
revision: archive.revision,
|
||||
generation: 1,
|
||||
enabled: true,
|
||||
})
|
||||
.onConflictDoUpdate({
|
||||
target: extensions.id,
|
||||
set: {
|
||||
manifest: JSON.stringify(archive.manifest),
|
||||
revision: archive.revision,
|
||||
generation: sql`${extensions.generation} + 1`,
|
||||
enabled: true,
|
||||
},
|
||||
})
|
||||
.run()
|
||||
archive.files.forEach((file) =>
|
||||
db.insert(extensionFiles).values({ extension_id: archive.manifest.id, path: file.path, data: file.data }).run(),
|
||||
)
|
||||
})
|
||||
const entries = list()
|
||||
input.changed(archive.manifest.id, entries)
|
||||
return entries
|
||||
}
|
||||
return {
|
||||
list,
|
||||
source,
|
||||
install,
|
||||
enable(id: string, enabled: boolean) {
|
||||
const row = input.db.select().from(extensions).where(eq(extensions.id, id)).get()
|
||||
if (!row) throw new ExtensionManager.ManagerError("notFound")
|
||||
input.db
|
||||
.update(extensions)
|
||||
.set({ enabled, generation: row.generation + 1 })
|
||||
.where(eq(extensions.id, id))
|
||||
.run()
|
||||
const entries = list()
|
||||
input.changed(id, entries)
|
||||
return entries
|
||||
},
|
||||
reload(id: string) {
|
||||
const row = get(id)
|
||||
input.db
|
||||
.update(extensions)
|
||||
.set({ generation: row.generation + 1 })
|
||||
.where(eq(extensions.id, id))
|
||||
.run()
|
||||
const entries = list()
|
||||
input.changed(id, entries)
|
||||
return entries
|
||||
},
|
||||
async installURL(value: string) {
|
||||
if (!URL.canParse(value) || !["http:", "https:"].includes(new URL(value).protocol))
|
||||
throw new ExtensionManager.ManagerError("url")
|
||||
const response = await input.fetch(value).catch(() => {
|
||||
throw new ExtensionManager.ManagerError("download")
|
||||
})
|
||||
if (!response.ok || !response.body) throw new ExtensionManager.ManagerError("download")
|
||||
if (Number(response.headers.get("content-length")) > archiveLimit) {
|
||||
await response.body.cancel()
|
||||
throw new ExtensionManager.ManagerError("tooLarge")
|
||||
}
|
||||
const chunks: Uint8Array[] = []
|
||||
let size = 0
|
||||
for await (const chunk of response.body) {
|
||||
size += chunk.byteLength
|
||||
if (size > archiveLimit) throw new ExtensionManager.ManagerError("tooLarge")
|
||||
chunks.push(chunk)
|
||||
}
|
||||
return install(Buffer.concat(chunks))
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export function readExtensionAsset(db: Database, id: string, revision: string, path: string) {
|
||||
const row = db
|
||||
.select()
|
||||
.from(extensions)
|
||||
.where(and(eq(extensions.id, id), eq(extensions.revision, revision), eq(extensions.enabled, true)))
|
||||
.get()
|
||||
if (!row) return
|
||||
return db
|
||||
.select({ data: extensionFiles.data })
|
||||
.from(extensionFiles)
|
||||
.where(and(eq(extensionFiles.extension_id, id), eq(extensionFiles.path, path)))
|
||||
.get()?.data
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import { createRequire, isBuiltin } from "node:module"
|
||||
import { Schema } from "effect"
|
||||
import { MainPlugin } from "@opencode/plugin/desktop/main"
|
||||
import { ExtensionManager } from "@opencode/plugin/desktop/manager"
|
||||
import { evaluateBundle } from "@opencode/plugin/desktop/bundle"
|
||||
import type { createExtensionManager } from "./manager"
|
||||
|
||||
const native = createRequire(import.meta.url)
|
||||
const shared = new Map<string, () => Promise<unknown>>([
|
||||
["effect", () => import("effect")],
|
||||
["@opencode/plugin/desktop/main", () => import("@opencode/plugin/desktop/main")],
|
||||
["@opencode/schema/rpc", () => import("@opencode/schema/rpc")],
|
||||
["@opencode/client/effect", () => import("@opencode/client/effect")],
|
||||
["@opencode/client", () => import("@opencode/client")],
|
||||
])
|
||||
|
||||
export async function loadMainPlugin(manager: ReturnType<typeof createExtensionManager>, id: string) {
|
||||
const entry = manager.list().find((entry) => entry.id === id && entry.enabled && entry.hasMain)
|
||||
if (!entry) return
|
||||
const input = manager.source(id, entry.revision, true)
|
||||
const modules = new Map(
|
||||
await Promise.all(
|
||||
(input.manifest.mainImports ?? []).map(async (name) => {
|
||||
if (name === "electron" || isBuiltin(name)) return [name, native(name)] as const
|
||||
const load = shared.get(name)
|
||||
if (!load) throw new ExtensionManager.ManagerError("invalidModule")
|
||||
return [name, await load()] as const
|
||||
}),
|
||||
),
|
||||
)
|
||||
// Re-read after module loading so disabling/replacing an archive takes effect
|
||||
// before a new main instance can start.
|
||||
const current = manager.source(id, entry.revision, true)
|
||||
const decoded = Schema.decodeUnknownOption(Schema.Struct({ default: MainPlugin.Entry }))(
|
||||
evaluateBundle(current.source, modules),
|
||||
)
|
||||
if (decoded._tag === "None" || decoded.value.default.id !== id)
|
||||
throw new ExtensionManager.ManagerError("invalidModule")
|
||||
return decoded.value.default
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
import { ImageView, screen, type BrowserWindow, type View } from "electron"
|
||||
import type { DesktopExtension } from "@opencode/plugin/desktop/protocol"
|
||||
import { createCornerImages } from "../native/corners"
|
||||
|
||||
export function createSurfaces(win: BrowserWindow) {
|
||||
const entries = new Map<string, { extensionID: string; view: View; corners: ImageView[]; key: string }>()
|
||||
const remove = (id: string) => {
|
||||
const entry = entries.get(id)
|
||||
if (!entry) return
|
||||
entries.delete(id)
|
||||
if (win.isDestroyed()) return
|
||||
entry.view.setVisible(false)
|
||||
entry.corners.forEach((corner) => win.contentView.removeChildView(corner))
|
||||
win.contentView.removeChildView(entry.view)
|
||||
}
|
||||
return {
|
||||
register(extensionID: string, view: View) {
|
||||
const id = crypto.randomUUID()
|
||||
view.setBounds({ x: 0, y: 0, width: 1000, height: 700 })
|
||||
view.setVisible(false)
|
||||
win.contentView.addChildView(view)
|
||||
const corners = [new ImageView(), new ImageView()]
|
||||
corners.forEach((corner) => {
|
||||
corner.setVisible(false)
|
||||
win.contentView.addChildView(corner)
|
||||
})
|
||||
entries.set(id, { extensionID, view, corners, key: "" })
|
||||
return { id, dispose: () => remove(id) }
|
||||
},
|
||||
layout(extensionID: string, id: string, layout?: DesktopExtension.Layout) {
|
||||
const entry = entries.get(id)
|
||||
if (!entry || entry.extensionID !== extensionID || win.isDestroyed()) return
|
||||
const bounds = layout?.bounds
|
||||
if (!layout?.visible || !bounds || bounds.width <= 0 || bounds.height <= 0) {
|
||||
entry.view.setVisible(false)
|
||||
entry.corners.forEach((corner) => corner.setVisible(false))
|
||||
return
|
||||
}
|
||||
entry.view.setBounds(bounds)
|
||||
const size = Math.min(layout.radius ?? 10, Math.floor(bounds.width / 2), Math.floor(bounds.height / 2))
|
||||
const scale = screen.getDisplayMatching(win.getBounds()).scaleFactor
|
||||
const key = layout.background && size > 0 ? `${layout.background}:${size}:${scale}` : ""
|
||||
if (key && key !== entry.key && layout.background)
|
||||
createCornerImages(layout.background, size, scale).forEach((image, index) =>
|
||||
entry.corners[index].setImage(image),
|
||||
)
|
||||
entry.key = key
|
||||
entry.corners.forEach((corner, index) => {
|
||||
corner.setBounds(
|
||||
{
|
||||
x: bounds.x + (index ? bounds.width - size : 0),
|
||||
y: bounds.y + bounds.height - size,
|
||||
width: size,
|
||||
height: size,
|
||||
},
|
||||
{ animate: { duration: 0 } },
|
||||
)
|
||||
corner.setVisible(!!key)
|
||||
})
|
||||
entry.view.setVisible(true)
|
||||
},
|
||||
release(extensionID: string) {
|
||||
entries.forEach((entry, id) => {
|
||||
if (entry.extensionID === extensionID) remove(id)
|
||||
})
|
||||
},
|
||||
dispose() {
|
||||
Array.from(entries.keys()).forEach(remove)
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { BrowserWindow } from "electron"
|
||||
import { BrowserWindow, net } from "electron"
|
||||
import { Effect } from "effect"
|
||||
import { EventRpcs } from "../../shared/ipc-rpc"
|
||||
import { createBrowserPane } from "../browser-pane"
|
||||
@@ -7,16 +7,99 @@ import { IpcPortHandoff } from "../ipc-transport"
|
||||
import { Shutdown } from "../lifecycle/shutdown"
|
||||
import { isRendererUrl } from "../windows/protocol"
|
||||
import { sender } from "./context"
|
||||
import { createMainExtensionHost } from "../extensions/host"
|
||||
import { mainExtensions } from "../extensions/builtins"
|
||||
import { emitIpcEvent } from "../ipc-events"
|
||||
import { ExtensionEvent } from "../../shared/ipc-rpc/events"
|
||||
import { ExtensionsChanged } from "../../shared/ipc-rpc/events"
|
||||
import { ExtensionManagerRpcs } from "../../shared/ipc-rpc/extension-manager"
|
||||
import { ExtensionManager } from "@opencode/plugin/desktop/manager"
|
||||
import { DesktopStorage } from "../storage"
|
||||
import { createExtensionManager } from "../extensions/manager"
|
||||
import { loadMainPlugin } from "../extensions/module"
|
||||
|
||||
export const eventHandlers = EventRpcs.toLayer(
|
||||
const rpcs = EventRpcs.merge(ExtensionManagerRpcs)
|
||||
export const eventHandlers = rpcs.toLayer(
|
||||
Effect.gen(function* () {
|
||||
const handoff = yield* IpcPortHandoff
|
||||
const shutdown = yield* Shutdown.Service
|
||||
const storage = yield* DesktopStorage.Service
|
||||
const browser = createBrowserPane()
|
||||
const extensions = createMainExtensionHost(
|
||||
mainExtensions,
|
||||
(win, event) => emitIpcEvent(win.webContents, new ExtensionEvent({ event })),
|
||||
(id) => loadMainPlugin(manager, id),
|
||||
)
|
||||
const manager = createExtensionManager({
|
||||
db: storage.db,
|
||||
fetch: net.fetch,
|
||||
reserved: mainExtensions.map((plugin) => plugin.id),
|
||||
changed(id, entries) {
|
||||
extensions.releaseAll(id)
|
||||
BrowserWindow.getAllWindows().forEach((win) => {
|
||||
if (!win.isDestroyed() && isRendererUrl(win.webContents.getURL()))
|
||||
emitIpcEvent(win.webContents, new ExtensionsChanged({ entries }))
|
||||
})
|
||||
},
|
||||
})
|
||||
const authorized = (context: Parameters<typeof sender>[1]) => {
|
||||
const contents = sender(handoff, context)
|
||||
const win = BrowserWindow.fromWebContents(contents)
|
||||
if (!win || win.isDestroyed() || win.webContents !== contents || !isRendererUrl(contents.getURL()))
|
||||
throw new ExtensionManager.ManagerError("notFound")
|
||||
}
|
||||
const operation = <Value>(context: Parameters<typeof sender>[1], run: () => Value | Promise<Value>) =>
|
||||
Effect.tryPromise(async () => {
|
||||
try {
|
||||
authorized(context)
|
||||
return { ok: true as const, entries: await run() }
|
||||
} catch (error) {
|
||||
return {
|
||||
ok: false as const,
|
||||
error: { code: error instanceof ExtensionManager.ManagerError ? error.code : ("storage" as const) },
|
||||
}
|
||||
}
|
||||
}).pipe(Effect.orDie)
|
||||
yield* Effect.addFinalizer(() => Effect.promise(() => extensions.dispose()))
|
||||
const stop = Effect.promise(() => browser.dispose())
|
||||
const remove = yield* shutdown.add(stop)
|
||||
yield* Effect.addFinalizer(() => Effect.sync(remove).pipe(Effect.andThen(stop)))
|
||||
return EventRpcs.of({
|
||||
return rpcs.of({
|
||||
ExtensionManagerList: (_request, context) =>
|
||||
Effect.sync(() => {
|
||||
authorized(context)
|
||||
return manager.list()
|
||||
}),
|
||||
ExtensionManagerInstall: ({ data }, context) => operation(context, () => manager.install(data)),
|
||||
ExtensionManagerInstallURL: ({ url }, context) => operation(context, () => manager.installURL(url)),
|
||||
ExtensionManagerEnable: ({ id, enabled }, context) => operation(context, () => manager.enable(id, enabled)),
|
||||
ExtensionManagerReload: ({ id }, context) => operation(context, () => manager.reload(id)),
|
||||
ExtensionManagerSource: ({ id, revision }, context) =>
|
||||
Effect.sync(() => {
|
||||
try {
|
||||
authorized(context)
|
||||
return { ok: true as const, value: manager.source(id, revision) }
|
||||
} catch (error) {
|
||||
return {
|
||||
ok: false as const,
|
||||
error: { code: error instanceof ExtensionManager.ManagerError ? error.code : ("storage" as const) },
|
||||
}
|
||||
}
|
||||
}),
|
||||
DesktopExtension: ({ request }, context) =>
|
||||
Effect.tryPromise(async () => {
|
||||
const contents = sender(handoff, context)
|
||||
const win = BrowserWindow.fromWebContents(contents)
|
||||
if (!win || win.isDestroyed() || win.webContents !== contents || !isRendererUrl(contents.getURL()))
|
||||
throw new Error("Desktop extension owner is unavailable")
|
||||
if (request.type === "call") return extensions.call(win, request.call)
|
||||
if (request.type === "cancel") extensions.cancel(win, request.extensionID, request.requestID)
|
||||
if (request.type === "servers") extensions.configure(win, request.servers)
|
||||
if (request.type === "surface")
|
||||
extensions.surface(win, request.extensionID, request.surfaceID, request.layout)
|
||||
if (request.type === "release") extensions.release(win, request.extensionID)
|
||||
return null
|
||||
}).pipe(Effect.orDie),
|
||||
DesktopEvents: (_request, context) => ipcEventStream(sender(handoff, context).id),
|
||||
BrowserPane: ({ request }, context) =>
|
||||
Effect.tryPromise(async () => {
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
import { nativeImage } from "electron"
|
||||
|
||||
// Native browser surfaces ignore a parent View's clip path. Cover only the
|
||||
// Native surfaces ignore a parent View's clip path. Cover only the
|
||||
// pixels outside the bottom arcs; never resize or style the page itself.
|
||||
export function createCornerImages(color: readonly [number, number, number, number], radius: number, scale: number) {
|
||||
const size = Math.max(1, Math.round(radius * scale))
|
||||
@@ -14,7 +14,14 @@ const tables = (db: ReturnType<typeof drizzle>) =>
|
||||
describe("database", () => {
|
||||
test("bootstraps every table on a fresh database and is idempotent", () => {
|
||||
const database = openDatabase(":memory:")
|
||||
expect(tables(database.db)).toEqual(["blob", "document", "migration", "state"])
|
||||
expect(tables(database.db)).toEqual([
|
||||
"blob",
|
||||
"desktop_extension",
|
||||
"desktop_extension_file",
|
||||
"document",
|
||||
"migration",
|
||||
"state",
|
||||
])
|
||||
expect(migrate(database.db)).toEqual([])
|
||||
database.close()
|
||||
})
|
||||
@@ -26,7 +33,14 @@ describe("database", () => {
|
||||
)
|
||||
const db = drizzle({ client: native })
|
||||
expect(migrate(db)).toEqual(migrations.map((migration) => migration.id))
|
||||
expect(tables(db)).toEqual(["blob", "document", "migration", "state"])
|
||||
expect(tables(db)).toEqual([
|
||||
"blob",
|
||||
"desktop_extension",
|
||||
"desktop_extension_file",
|
||||
"document",
|
||||
"migration",
|
||||
"state",
|
||||
])
|
||||
expect(db.all<{ value: string }>(sql`SELECT value FROM document`)).toEqual([{ value: "v" }])
|
||||
expect(migrate(db)).toEqual([])
|
||||
})
|
||||
|
||||
@@ -18,4 +18,11 @@ export const migrations = [
|
||||
id: "20260907031611_blob-touched",
|
||||
statements: ["ALTER TABLE `blob` ADD `touched_at` integer DEFAULT 0 NOT NULL;"],
|
||||
},
|
||||
{
|
||||
id: "20260908211404_desktop-extensions",
|
||||
statements: [
|
||||
"CREATE TABLE `desktop_extension_file` (\n\t`extension_id` text NOT NULL,\n\t`path` text NOT NULL,\n\t`data` blob NOT NULL,\n\tCONSTRAINT `desktop_extension_file_pk` PRIMARY KEY(`extension_id`, `path`)\n);",
|
||||
"CREATE TABLE `desktop_extension` (\n\t`id` text PRIMARY KEY,\n\t`manifest` text NOT NULL,\n\t`revision` text NOT NULL,\n\t`generation` integer NOT NULL,\n\t`enabled` integer NOT NULL\n);",
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
CREATE TABLE `desktop_extension_file` (
|
||||
`extension_id` text NOT NULL,
|
||||
`path` text NOT NULL,
|
||||
`data` blob NOT NULL,
|
||||
CONSTRAINT `desktop_extension_file_pk` PRIMARY KEY(`extension_id`, `path`)
|
||||
);
|
||||
--> statement-breakpoint
|
||||
CREATE TABLE `desktop_extension` (
|
||||
`id` text PRIMARY KEY,
|
||||
`manifest` text NOT NULL,
|
||||
`revision` text NOT NULL,
|
||||
`generation` integer NOT NULL,
|
||||
`enabled` integer NOT NULL
|
||||
);
|
||||
+248
@@ -0,0 +1,248 @@
|
||||
{
|
||||
"version": "7",
|
||||
"dialect": "sqlite",
|
||||
"id": "373d581e-0c79-4a9d-9a31-616c3a734892",
|
||||
"prevIds": [
|
||||
"53c65132-8703-42d6-8464-64356145dfb4"
|
||||
],
|
||||
"ddl": [
|
||||
{
|
||||
"name": "blob",
|
||||
"entityType": "tables"
|
||||
},
|
||||
{
|
||||
"name": "document",
|
||||
"entityType": "tables"
|
||||
},
|
||||
{
|
||||
"name": "desktop_extension_file",
|
||||
"entityType": "tables"
|
||||
},
|
||||
{
|
||||
"name": "desktop_extension",
|
||||
"entityType": "tables"
|
||||
},
|
||||
{
|
||||
"name": "state",
|
||||
"entityType": "tables"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"notNull": false,
|
||||
"autoincrement": false,
|
||||
"default": null,
|
||||
"generated": null,
|
||||
"name": "id",
|
||||
"entityType": "columns",
|
||||
"table": "blob"
|
||||
},
|
||||
{
|
||||
"type": "blob",
|
||||
"notNull": true,
|
||||
"autoincrement": false,
|
||||
"default": null,
|
||||
"generated": null,
|
||||
"name": "data",
|
||||
"entityType": "columns",
|
||||
"table": "blob"
|
||||
},
|
||||
{
|
||||
"type": "integer",
|
||||
"notNull": true,
|
||||
"autoincrement": false,
|
||||
"default": "0",
|
||||
"generated": null,
|
||||
"name": "touched_at",
|
||||
"entityType": "columns",
|
||||
"table": "blob"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"notNull": false,
|
||||
"autoincrement": false,
|
||||
"default": null,
|
||||
"generated": null,
|
||||
"name": "key",
|
||||
"entityType": "columns",
|
||||
"table": "document"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"notNull": true,
|
||||
"autoincrement": false,
|
||||
"default": null,
|
||||
"generated": null,
|
||||
"name": "value",
|
||||
"entityType": "columns",
|
||||
"table": "document"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"notNull": true,
|
||||
"autoincrement": false,
|
||||
"default": null,
|
||||
"generated": null,
|
||||
"name": "extension_id",
|
||||
"entityType": "columns",
|
||||
"table": "desktop_extension_file"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"notNull": true,
|
||||
"autoincrement": false,
|
||||
"default": null,
|
||||
"generated": null,
|
||||
"name": "path",
|
||||
"entityType": "columns",
|
||||
"table": "desktop_extension_file"
|
||||
},
|
||||
{
|
||||
"type": "blob",
|
||||
"notNull": true,
|
||||
"autoincrement": false,
|
||||
"default": null,
|
||||
"generated": null,
|
||||
"name": "data",
|
||||
"entityType": "columns",
|
||||
"table": "desktop_extension_file"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"notNull": false,
|
||||
"autoincrement": false,
|
||||
"default": null,
|
||||
"generated": null,
|
||||
"name": "id",
|
||||
"entityType": "columns",
|
||||
"table": "desktop_extension"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"notNull": true,
|
||||
"autoincrement": false,
|
||||
"default": null,
|
||||
"generated": null,
|
||||
"name": "manifest",
|
||||
"entityType": "columns",
|
||||
"table": "desktop_extension"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"notNull": true,
|
||||
"autoincrement": false,
|
||||
"default": null,
|
||||
"generated": null,
|
||||
"name": "revision",
|
||||
"entityType": "columns",
|
||||
"table": "desktop_extension"
|
||||
},
|
||||
{
|
||||
"type": "integer",
|
||||
"notNull": true,
|
||||
"autoincrement": false,
|
||||
"default": null,
|
||||
"generated": null,
|
||||
"name": "generation",
|
||||
"entityType": "columns",
|
||||
"table": "desktop_extension"
|
||||
},
|
||||
{
|
||||
"type": "integer",
|
||||
"notNull": true,
|
||||
"autoincrement": false,
|
||||
"default": null,
|
||||
"generated": null,
|
||||
"name": "enabled",
|
||||
"entityType": "columns",
|
||||
"table": "desktop_extension"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"notNull": true,
|
||||
"autoincrement": false,
|
||||
"default": null,
|
||||
"generated": null,
|
||||
"name": "name",
|
||||
"entityType": "columns",
|
||||
"table": "state"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"notNull": true,
|
||||
"autoincrement": false,
|
||||
"default": null,
|
||||
"generated": null,
|
||||
"name": "key",
|
||||
"entityType": "columns",
|
||||
"table": "state"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"notNull": true,
|
||||
"autoincrement": false,
|
||||
"default": null,
|
||||
"generated": null,
|
||||
"name": "value",
|
||||
"entityType": "columns",
|
||||
"table": "state"
|
||||
},
|
||||
{
|
||||
"type": "integer",
|
||||
"notNull": true,
|
||||
"autoincrement": false,
|
||||
"default": null,
|
||||
"generated": null,
|
||||
"name": "updated_at",
|
||||
"entityType": "columns",
|
||||
"table": "state"
|
||||
},
|
||||
{
|
||||
"columns": [
|
||||
"extension_id",
|
||||
"path"
|
||||
],
|
||||
"nameExplicit": false,
|
||||
"name": "desktop_extension_file_pk",
|
||||
"entityType": "pks",
|
||||
"table": "desktop_extension_file"
|
||||
},
|
||||
{
|
||||
"columns": [
|
||||
"name",
|
||||
"key"
|
||||
],
|
||||
"nameExplicit": false,
|
||||
"name": "state_pk",
|
||||
"entityType": "pks",
|
||||
"table": "state"
|
||||
},
|
||||
{
|
||||
"columns": [
|
||||
"id"
|
||||
],
|
||||
"nameExplicit": false,
|
||||
"name": "blob_pk",
|
||||
"table": "blob",
|
||||
"entityType": "pks"
|
||||
},
|
||||
{
|
||||
"columns": [
|
||||
"key"
|
||||
],
|
||||
"nameExplicit": false,
|
||||
"name": "document_pk",
|
||||
"table": "document",
|
||||
"entityType": "pks"
|
||||
},
|
||||
{
|
||||
"columns": [
|
||||
"id"
|
||||
],
|
||||
"nameExplicit": false,
|
||||
"name": "desktop_extension_pk",
|
||||
"table": "desktop_extension",
|
||||
"entityType": "pks"
|
||||
}
|
||||
],
|
||||
"renames": []
|
||||
}
|
||||
@@ -27,3 +27,21 @@ export const state = sqliteTable(
|
||||
},
|
||||
(table) => [primaryKey({ columns: [table.name, table.key] })],
|
||||
)
|
||||
|
||||
export const extensions = sqliteTable("desktop_extension", {
|
||||
id: text().primaryKey(),
|
||||
manifest: text().notNull(),
|
||||
revision: text().notNull(),
|
||||
generation: integer().notNull(),
|
||||
enabled: integer({ mode: "boolean" }).notNull(),
|
||||
})
|
||||
|
||||
export const extensionFiles = sqliteTable(
|
||||
"desktop_extension_file",
|
||||
{
|
||||
extension_id: text().notNull(),
|
||||
path: text().notNull(),
|
||||
data: blob({ mode: "buffer" }).notNull(),
|
||||
},
|
||||
(table) => [primaryKey({ columns: [table.extension_id, table.path] })],
|
||||
)
|
||||
|
||||
@@ -5,6 +5,8 @@ import { Effect, Path } from "effect"
|
||||
import { scoped } from "../native/logging"
|
||||
import { DesktopPaths } from "../paths"
|
||||
import { documentPolicyHeader, jsCallStacksDocumentPolicy } from "./headers"
|
||||
import { DesktopStorage } from "../storage"
|
||||
import { extensionAssetResponse } from "../extensions/assets"
|
||||
|
||||
const rendererProtocol = "oc"
|
||||
const rendererHost = "renderer"
|
||||
@@ -16,6 +18,7 @@ protocol.registerSchemesAsPrivileged([
|
||||
secure: true,
|
||||
standard: true,
|
||||
supportFetchAPI: true,
|
||||
corsEnabled: true,
|
||||
stream: true,
|
||||
},
|
||||
},
|
||||
@@ -24,11 +27,26 @@ protocol.registerSchemesAsPrivileged([
|
||||
export const registerRendererProtocol = Effect.fn("Window.registerRendererProtocol")(function* () {
|
||||
const path = yield* Path.Path
|
||||
const paths = yield* DesktopPaths.resolve
|
||||
const storage = yield* DesktopStorage.Service
|
||||
const runFork = Effect.runForkWith(yield* Effect.context<never>())
|
||||
if (protocol.isProtocolHandled(rendererProtocol)) return
|
||||
|
||||
protocol.handle(rendererProtocol, async (request) => {
|
||||
const url = new URL(request.url)
|
||||
if (url.host === "extensions") {
|
||||
const [id, revision, ...parts] = url.pathname.slice(1).split("/").map(decodeURIComponent)
|
||||
if (!id || !revision) return new Response(null, { status: 404 })
|
||||
const response = extensionAssetResponse(storage.db, {
|
||||
id,
|
||||
revision,
|
||||
path: parts.join("/"),
|
||||
range: request.headers.get("range"),
|
||||
head: request.method === "HEAD",
|
||||
})
|
||||
const origin = request.headers.get("origin")
|
||||
if (origin && isRendererUrl(origin)) response.headers.set("Access-Control-Allow-Origin", origin)
|
||||
return response
|
||||
}
|
||||
if (url.host !== rendererHost) {
|
||||
runFork(scoped("protocol", Effect.logWarning("rejected host", { url: request.url })))
|
||||
return new Response("Not found", { status: 404 })
|
||||
|
||||
@@ -4,6 +4,8 @@ import type { DesktopNativeBundle } from "@opencode/app/i18n/desktop-native"
|
||||
import type { UpdaterState } from "@opencode/app/updater"
|
||||
import type { WslServersPlatform } from "@opencode/app/wsl/types"
|
||||
import type { BrowserPaneRequest } from "../shared/ipc-rpc/browser"
|
||||
import type { DesktopExtension } from "@opencode/plugin/desktop/protocol"
|
||||
import type { ExtensionManager } from "@opencode/plugin/desktop/manager"
|
||||
import type {
|
||||
ClipboardImage,
|
||||
DirectoryPickerOptions,
|
||||
@@ -23,6 +25,8 @@ export type UpdaterAPI = {
|
||||
}
|
||||
|
||||
export type ElectronAPI = {
|
||||
extensions: DesktopExtension.Transport
|
||||
extensionManager: ExtensionManager.Transport
|
||||
awaitInitialization(): Promise<ServerReadyData>
|
||||
reconnectService(): Promise<ServerReadyData>
|
||||
browserPane: {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import type { ElectronAPI } from "./api-types"
|
||||
import type { UpdaterState } from "@opencode/app/updater"
|
||||
import { invoke, listen, send } from "./ipc-client"
|
||||
import { ExtensionManager } from "@opencode/plugin/desktop/manager"
|
||||
|
||||
type Mutable<Value> =
|
||||
Value extends ReadonlyArray<unknown>
|
||||
@@ -23,6 +24,43 @@ const updaterHandler = (state: UpdaterState) => {
|
||||
}
|
||||
|
||||
export const api: ElectronAPI = {
|
||||
extensionManager: {
|
||||
list: () => invoke("ExtensionManagerList"),
|
||||
install: (data) => invoke("ExtensionManagerInstall", { data }).then(extensionResult),
|
||||
installURL: (url) => invoke("ExtensionManagerInstallURL", { url }).then(extensionResult),
|
||||
enable: (id, enabled) => invoke("ExtensionManagerEnable", { id, enabled }).then(extensionResult),
|
||||
reload: (id) => invoke("ExtensionManagerReload", { id }).then(extensionResult),
|
||||
source: (id, revision) =>
|
||||
invoke("ExtensionManagerSource", { id, revision }).then((result) => {
|
||||
if (!result.ok) throw new ExtensionManager.ManagerError(result.error.code)
|
||||
return result.value
|
||||
}),
|
||||
onChange: (callback) => listen("ExtensionsChanged", (event) => callback(event.entries)),
|
||||
assetURL: (id, revision, path) =>
|
||||
`oc://extensions/${encodeURIComponent(id)}/${revision}/${path.split("/").map(encodeURIComponent).join("/")}`,
|
||||
},
|
||||
extensions: {
|
||||
call(input, signal) {
|
||||
if (signal?.aborted) return Promise.reject(signal.reason)
|
||||
return new Promise((resolve, reject) => {
|
||||
const cancel = () => {
|
||||
send("DesktopExtension", {
|
||||
request: { type: "cancel", extensionID: input.extensionID, requestID: input.requestID },
|
||||
})
|
||||
reject(signal?.reason)
|
||||
}
|
||||
signal?.addEventListener("abort", cancel, { once: true })
|
||||
void invoke("DesktopExtension", { request: { type: "call", call: input } })
|
||||
.then(resolve, reject)
|
||||
.finally(() => signal?.removeEventListener("abort", cancel))
|
||||
})
|
||||
},
|
||||
onEvent: (callback) => listen("ExtensionEvent", ({ event }) => callback(event)),
|
||||
surface: (extensionID, surfaceID, layout) =>
|
||||
send("DesktopExtension", { request: { type: "surface", extensionID, surfaceID, layout } }),
|
||||
configure: (servers) => send("DesktopExtension", { request: { type: "servers", servers } }),
|
||||
release: (extensionID) => send("DesktopExtension", { request: { type: "release", extensionID } }),
|
||||
},
|
||||
awaitInitialization: () => invoke("AppAwaitInitialization"),
|
||||
reconnectService: () => invoke("AppReconnectService"),
|
||||
browserPane: {
|
||||
@@ -131,3 +169,12 @@ export const api: ElectronAPI = {
|
||||
recordFatalRendererError: (error) => invoke("AppRecordFatalRendererError", { error }),
|
||||
setNativeTranslations: (bundle) => invoke("AppSetNativeTranslations", { value: bundle }),
|
||||
}
|
||||
|
||||
function extensionResult(
|
||||
result:
|
||||
| { readonly ok: true; readonly entries: readonly ExtensionManager.Installed[] }
|
||||
| { readonly ok: false; readonly error: { readonly code: ExtensionManager.ErrorCode } },
|
||||
) {
|
||||
if (!result.ok) throw new ExtensionManager.ManagerError(result.error.code)
|
||||
return result.entries
|
||||
}
|
||||
|
||||
@@ -1,9 +1,4 @@
|
||||
import {
|
||||
ACCEPTED_FILE_EXTENSIONS,
|
||||
ServerConnection,
|
||||
type Platform,
|
||||
type UpdaterPlatform,
|
||||
} from "@opencode/app/desktop"
|
||||
import { ACCEPTED_FILE_EXTENSIONS, ServerConnection, type Platform, type UpdaterPlatform } from "@opencode/app/desktop"
|
||||
import type { ElectronAPI } from "../api-types"
|
||||
import { setPinchZoomEnabled, webviewZoom } from "../window/zoom"
|
||||
import { windowFullscreen } from "../window/fullscreen"
|
||||
@@ -29,6 +24,8 @@ export function createDesktopPlatform(
|
||||
os,
|
||||
version: windowState.version,
|
||||
windowID: windowState.id,
|
||||
extensions: api.extensions,
|
||||
extensionManager: api.extensionManager,
|
||||
...createDesktopFiles(api, os, ACCEPTED_FILE_EXTENSIONS),
|
||||
...createDesktopStorage(api),
|
||||
browserPane: {
|
||||
|
||||
@@ -7,6 +7,7 @@ import { StorageRpcs } from "./ipc-rpc/storage"
|
||||
import { UpdaterRpcs } from "./ipc-rpc/updater"
|
||||
import { WindowRpcs } from "./ipc-rpc/window"
|
||||
import { WslRpcs } from "./ipc-rpc/wsl"
|
||||
import { ExtensionManagerRpcs } from "./ipc-rpc/extension-manager"
|
||||
|
||||
export { AppRpcs } from "./ipc-rpc/app"
|
||||
export { EventRpcs } from "./ipc-rpc/events"
|
||||
@@ -17,5 +18,14 @@ export { UpdaterRpcs } from "./ipc-rpc/updater"
|
||||
export { WindowRpcs } from "./ipc-rpc/window"
|
||||
export { WslRpcs } from "./ipc-rpc/wsl"
|
||||
|
||||
export const DesktopRpcs = AppRpcs.merge(StorageRpcs, FileRpcs, WindowRpcs, MenuRpcs, UpdaterRpcs, WslRpcs, EventRpcs)
|
||||
export const DesktopRpcs = AppRpcs.merge(
|
||||
StorageRpcs,
|
||||
FileRpcs,
|
||||
WindowRpcs,
|
||||
MenuRpcs,
|
||||
UpdaterRpcs,
|
||||
WslRpcs,
|
||||
EventRpcs,
|
||||
ExtensionManagerRpcs,
|
||||
)
|
||||
export type DesktopRpcClient = RpcClient.FromGroup<typeof DesktopRpcs, RpcClientError.RpcClientError>
|
||||
|
||||
@@ -3,6 +3,17 @@ import { Rpc, RpcGroup } from "effect/unstable/rpc"
|
||||
import { BrowserPaneEventSchema, BrowserPaneRpc } from "./browser"
|
||||
import { UpdaterStateSchema } from "./updater"
|
||||
import { WslServersEventSchema } from "./wsl"
|
||||
import { DesktopExtension } from "@opencode/plugin/desktop/protocol"
|
||||
import { ExtensionRpc } from "./extensions"
|
||||
import { ExtensionManager } from "@opencode/plugin/desktop/manager"
|
||||
|
||||
export class ExtensionsChanged extends Schema.TaggedClass<ExtensionsChanged>()("ExtensionsChanged", {
|
||||
entries: Schema.Array(ExtensionManager.Installed),
|
||||
}) {}
|
||||
|
||||
export class ExtensionEvent extends Schema.TaggedClass<ExtensionEvent>()("ExtensionEvent", {
|
||||
event: DesktopExtension.Event,
|
||||
}) {}
|
||||
|
||||
export class BrowserPaneEvent extends Schema.TaggedClass<BrowserPaneEvent>()("BrowserPaneEvent", {
|
||||
bindingID: Schema.String,
|
||||
@@ -46,6 +57,8 @@ export class StorageChanged extends Schema.TaggedClass<StorageChanged>()("Storag
|
||||
}) {}
|
||||
|
||||
export const DesktopEvent = Schema.Union([
|
||||
ExtensionsChanged,
|
||||
ExtensionEvent,
|
||||
BrowserPaneEvent,
|
||||
DeepLinksOpened,
|
||||
MenuCommandTriggered,
|
||||
@@ -59,4 +72,4 @@ export const DesktopEvent = Schema.Union([
|
||||
export type DesktopEvent = Schema.Schema.Type<typeof DesktopEvent>
|
||||
|
||||
export const DesktopEvents = Rpc.make("DesktopEvents", { success: DesktopEvent, stream: true })
|
||||
export const EventRpcs = RpcGroup.make(DesktopEvents, BrowserPaneRpc)
|
||||
export const EventRpcs = RpcGroup.make(DesktopEvents, BrowserPaneRpc, ExtensionRpc)
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
import { Schema } from "effect"
|
||||
import { Rpc, RpcGroup } from "effect/unstable/rpc"
|
||||
import { ExtensionManager } from "@opencode/plugin/desktop/manager"
|
||||
|
||||
const Inventory = Schema.Array(ExtensionManager.Installed)
|
||||
const Result = Schema.Union([
|
||||
Schema.Struct({ ok: Schema.Literal(true), entries: Inventory }),
|
||||
Schema.Struct({ ok: Schema.Literal(false), error: ExtensionManager.Failure }),
|
||||
])
|
||||
export const ExtensionManagerRpcs = RpcGroup.make(
|
||||
Rpc.make("ExtensionManagerList", { success: Inventory }),
|
||||
Rpc.make("ExtensionManagerInstall", { payload: { data: Schema.Uint8Array }, success: Result }),
|
||||
Rpc.make("ExtensionManagerInstallURL", { payload: { url: Schema.String }, success: Result }),
|
||||
Rpc.make("ExtensionManagerEnable", { payload: { id: Schema.String, enabled: Schema.Boolean }, success: Result }),
|
||||
Rpc.make("ExtensionManagerReload", { payload: { id: Schema.String }, success: Result }),
|
||||
Rpc.make("ExtensionManagerSource", {
|
||||
payload: { id: Schema.String, revision: Schema.String },
|
||||
success: Schema.Union([
|
||||
Schema.Struct({ ok: Schema.Literal(true), value: ExtensionManager.Source }),
|
||||
Schema.Struct({ ok: Schema.Literal(false), error: ExtensionManager.Failure }),
|
||||
]),
|
||||
}),
|
||||
)
|
||||
@@ -0,0 +1,21 @@
|
||||
import { DesktopExtension } from "@opencode/plugin/desktop/protocol"
|
||||
import { Schema } from "effect"
|
||||
import { Rpc } from "effect/unstable/rpc"
|
||||
|
||||
export const ExtensionRequest = Schema.Union([
|
||||
Schema.Struct({ type: Schema.Literal("call"), call: DesktopExtension.Call }),
|
||||
Schema.Struct({ type: Schema.Literal("cancel"), extensionID: Schema.String, requestID: Schema.String }),
|
||||
Schema.Struct({ type: Schema.Literal("servers"), servers: Schema.Array(DesktopExtension.Endpoint) }),
|
||||
Schema.Struct({
|
||||
type: Schema.Literal("surface"),
|
||||
extensionID: Schema.String,
|
||||
surfaceID: Schema.String,
|
||||
layout: Schema.optionalKey(DesktopExtension.Layout),
|
||||
}),
|
||||
Schema.Struct({ type: Schema.Literal("release"), extensionID: Schema.String }),
|
||||
])
|
||||
export type ExtensionRequest = typeof ExtensionRequest.Type
|
||||
export const ExtensionRpc = Rpc.make("DesktopExtension", {
|
||||
payload: { request: ExtensionRequest },
|
||||
success: Schema.Json,
|
||||
})
|
||||
@@ -3,7 +3,7 @@ import type { BrowserWindow } from "electron"
|
||||
import { Browser } from "@opencode/plugin-browser/rpc"
|
||||
import { Schema } from "effect"
|
||||
import { createBrowserPage } from "../../src/main/browser-chromium"
|
||||
import { createCornerImages } from "../../src/main/browser/corners"
|
||||
import { createCornerImages } from "../../src/main/native/corners"
|
||||
|
||||
export async function verifyTargets(win: BrowserWindow, url: string) {
|
||||
const children = win.contentView.children.length
|
||||
|
||||
@@ -0,0 +1,49 @@
|
||||
import { test, expect } from "bun:test"
|
||||
import { mkdtemp, rm } from "node:fs/promises"
|
||||
import path from "node:path"
|
||||
import { tmpdir } from "node:os"
|
||||
import { pathToFileURL } from "node:url"
|
||||
|
||||
test.skipIf(!!process.env.CI)(
|
||||
"installed main extensions hot-load, reload, replace and dispose in Electron",
|
||||
async () => {
|
||||
const root = await mkdtemp(
|
||||
path.join(process.platform === "win32" ? "C:/tmp/opencode" : tmpdir(), "extension-native-"),
|
||||
)
|
||||
const output = await mkdtemp(path.resolve(import.meta.dir, "../node_modules/.extension-native-"))
|
||||
const built = await Bun.build({
|
||||
entrypoints: [path.join(import.meta.dir, "extensions/native.ts")],
|
||||
outdir: output,
|
||||
naming: "native.cjs",
|
||||
target: "node",
|
||||
format: "cjs",
|
||||
external: ["electron"],
|
||||
define: {
|
||||
"import.meta": JSON.stringify({
|
||||
url: pathToFileURL(path.join(output, "native.cjs")).href,
|
||||
env: { OPENCODE_CHANNEL: "dev" },
|
||||
}),
|
||||
},
|
||||
})
|
||||
if (!built.success) throw new AggregateError(built.logs)
|
||||
await Bun.write(path.join(output, "entry.cjs"), Bun.file(path.join(import.meta.dir, "extensions/entry.cjs")))
|
||||
const electron: unknown = (await import("electron")).default
|
||||
if (typeof electron !== "string") throw new Error("Electron binary is unavailable")
|
||||
const child = Bun.spawn([electron, path.join(output, "entry.cjs")], {
|
||||
cwd: output,
|
||||
env: { ...process.env, ELECTRON_RUN_AS_NODE: undefined, EXTENSION_TEST_HOME: root },
|
||||
stdout: "inherit",
|
||||
stderr: "inherit",
|
||||
})
|
||||
try {
|
||||
expect(await child.exited).toBe(0)
|
||||
} finally {
|
||||
if (child.exitCode === null) {
|
||||
child.kill()
|
||||
await child.exited
|
||||
}
|
||||
await Promise.all([rm(root, { recursive: true, force: true }), rm(output, { recursive: true, force: true })])
|
||||
}
|
||||
},
|
||||
30000,
|
||||
)
|
||||
@@ -0,0 +1,14 @@
|
||||
const { app } = require("electron")
|
||||
const fail = (error) => {
|
||||
console.error(error)
|
||||
app.exit(1)
|
||||
}
|
||||
// Install error handlers before loading any production modules. Electron's
|
||||
// default startup handler otherwise opens a native dialog on the user's desktop.
|
||||
process.on("uncaughtException", fail)
|
||||
process.on("unhandledRejection", fail)
|
||||
try {
|
||||
require("./native.cjs")
|
||||
} catch (error) {
|
||||
fail(error)
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import { Uint8ArrayWriter, TextReader, ZipWriter } from "@zip.js/zip.js"
|
||||
|
||||
export async function extensionArchive(
|
||||
input: {
|
||||
id?: string
|
||||
version?: string
|
||||
renderer?: string
|
||||
main?: string
|
||||
files?: Record<string, string>
|
||||
manifest?: Record<string, unknown>
|
||||
} = {},
|
||||
) {
|
||||
const id = input.id ?? "test.lifecycle"
|
||||
const writer = new ZipWriter(new Uint8ArrayWriter())
|
||||
await writer.add(
|
||||
"manifest.json",
|
||||
new TextReader(
|
||||
JSON.stringify({
|
||||
schema: "opencode.desktop/1",
|
||||
id,
|
||||
name: "File utilities",
|
||||
version: input.version ?? "1.0.0",
|
||||
entry: "renderer.cjs",
|
||||
imports: ["@opencode/plugin/desktop"],
|
||||
...(input.main
|
||||
? { main: "main.cjs", mainImports: ["@opencode/plugin/desktop/main", "@opencode/schema/rpc", "effect"] }
|
||||
: {}),
|
||||
...input.manifest,
|
||||
}),
|
||||
),
|
||||
)
|
||||
await writer.add(
|
||||
"renderer.cjs",
|
||||
new TextReader(input.renderer ?? `module.exports.default = { id: ${JSON.stringify(id)}, setup() {} }`),
|
||||
)
|
||||
if (input.main) await writer.add("main.cjs", new TextReader(input.main))
|
||||
for (const [name, text] of Object.entries(input.files ?? {})) await writer.add(name, new TextReader(text))
|
||||
return writer.close()
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
import { app, BrowserWindow } from "electron"
|
||||
import { DesktopStorage } from "../../src/main/storage"
|
||||
import { registerRendererProtocol } from "../../src/main/windows/protocol"
|
||||
import { NodePath } from "@effect/platform-node"
|
||||
import { Effect } from "effect"
|
||||
import { createServer } from "node:http"
|
||||
import { once } from "node:events"
|
||||
import { createExtensionManager } from "../../src/main/extensions/manager"
|
||||
import { loadMainPlugin } from "../../src/main/extensions/module"
|
||||
import { createMainExtensionHost } from "../../src/main/extensions/host"
|
||||
import { extensionArchive } from "./fixture"
|
||||
import assert from "node:assert/strict"
|
||||
|
||||
async function mainTest() {
|
||||
app.setPath("userData", process.env.EXTENSION_TEST_HOME!)
|
||||
await app.whenReady()
|
||||
const web = createServer((_request, response) => {
|
||||
response.setHeader("content-type", "text/html")
|
||||
response.end("<title>Fixture</title>")
|
||||
})
|
||||
web.listen(0, "127.0.0.1")
|
||||
await once(web, "listening")
|
||||
const address = web.address()
|
||||
if (!address || typeof address === "string") throw new Error("Fixture address is unavailable")
|
||||
process.env.ELECTRON_RENDERER_URL = `http://127.0.0.1:${address.port}`
|
||||
const database = DesktopStorage.make(":memory:")
|
||||
await Effect.runPromise(
|
||||
registerRendererProtocol().pipe(
|
||||
Effect.provideService(DesktopStorage.Service, database),
|
||||
Effect.provide(NodePath.layer),
|
||||
),
|
||||
)
|
||||
const win = new BrowserWindow({ show: false })
|
||||
await win.loadURL(process.env.ELECTRON_RENDERER_URL)
|
||||
const manager = createExtensionManager({ db: database.db, fetch, changed: (id) => host.releaseAll(id) })
|
||||
const host = createMainExtensionHost(
|
||||
[],
|
||||
() => {},
|
||||
(id) => loadMainPlugin(manager, id),
|
||||
)
|
||||
const main = (version: string) => `
|
||||
const { MainPlugin } = require('@opencode/plugin/desktop/main');
|
||||
const { Rpc } = require('@opencode/schema/rpc');
|
||||
const { Schema } = require('effect');
|
||||
module.exports.default = MainPlugin.define({ id: 'test.lifecycle', rpc: Rpc.define({ id: 'test.lifecycle', methods: { ping: { input: Schema.String, output: Schema.String } }, events: {} }), setup(ctx) {
|
||||
ctx.window.setTitle(${JSON.stringify(version)});
|
||||
ctx.lifecycle.own(() => ctx.window.setTitle('disposed'));
|
||||
return { ping: (value) => ${JSON.stringify(version)} + ':' + value };
|
||||
} });`
|
||||
const call = () =>
|
||||
host.call(win, {
|
||||
extensionID: "test.lifecycle",
|
||||
rpcID: "test.lifecycle",
|
||||
method: "ping",
|
||||
requestID: crypto.randomUUID(),
|
||||
input: "hello",
|
||||
})
|
||||
try {
|
||||
const [installed] = await manager.install(
|
||||
await extensionArchive({ main: main("one"), files: { "assets/value.txt": "native asset" } }),
|
||||
)
|
||||
const asset = `oc://extensions/${installed.id}/${installed.revision}/assets/value.txt`
|
||||
assert.equal(
|
||||
await win.webContents.executeJavaScript(`fetch(${JSON.stringify(asset)}).then(response => response.text())`),
|
||||
"native asset",
|
||||
)
|
||||
assert.deepEqual(await call(), { ok: true, output: "one:hello" })
|
||||
assert.equal(win.getTitle(), "one")
|
||||
manager.reload("test.lifecycle")
|
||||
assert.equal(win.getTitle(), "disposed")
|
||||
assert.deepEqual(await call(), { ok: true, output: "one:hello" })
|
||||
manager.enable("test.lifecycle", false)
|
||||
assert.equal(win.getTitle(), "disposed")
|
||||
assert.equal(((await call()) as { ok: boolean }).ok, false)
|
||||
await manager.install(await extensionArchive({ version: "2.0.0", main: main("two") }))
|
||||
assert.deepEqual(await call(), { ok: true, output: "two:hello" })
|
||||
assert.equal(win.getTitle(), "two")
|
||||
await host.dispose()
|
||||
assert.equal(win.getTitle(), "disposed")
|
||||
win.destroy()
|
||||
database.close()
|
||||
web.close()
|
||||
app.exit(0)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
app.exit(1)
|
||||
}
|
||||
}
|
||||
void mainTest().catch((error) => {
|
||||
console.error(error)
|
||||
app.exit(1)
|
||||
})
|
||||
@@ -0,0 +1,108 @@
|
||||
# Desktop extensions — exploratory API
|
||||
|
||||
This draft adds a renderer entrypoint at `@opencode/plugin/desktop` and a trusted main entrypoint at `@opencode/plugin/desktop/main`. Built-in registrations and installed `.ocdx` archives run through the same contracts. Settings → Extensions, grouped with Experimental, ports the OCDX manager: browse/drop archives, install from a URL, enable/disable, and reload across open windows. Server MCPs, plugins, and skills live under Settings → Tools.
|
||||
|
||||
## Contributions
|
||||
|
||||
Active routes expose `session.services`: workspace file caches and selection,
|
||||
draft attachments, annotations, tab references, scroll state, and panel/sidebar
|
||||
layout controls. These services exist while the session route is mounted. Stable
|
||||
session identity and the public client remain available while its shell tab is open.
|
||||
Feature queries stay in the extension and use TanStack Query.
|
||||
|
||||
Panels can use a shared `reference` (for example a `file://` resource) so existing
|
||||
document producers can select them. `initial: "closed"` separates availability from
|
||||
opening, `default` selects a fallback, and `closable: false` declares a pinned panel.
|
||||
`view.tabs.canClose(reference)` lets a feature count user-opened tabs without knowing
|
||||
which extensions supply pinned defaults. The host retains activated `group` content
|
||||
while a declaration in that group exists, so replacing a file preview preserves its
|
||||
surrounding sidebar. Group identity includes the server and session.
|
||||
|
||||
Session controls can use `session.header.actions`, `session.panel.toolbar`,
|
||||
`session.panel.tools`, and `session.sidebar`. Each receives the session input and
|
||||
uses the shared placement rules. Renderer contexts also expose shared translations,
|
||||
notifications, file export, and available native path actions.
|
||||
|
||||
`session.auxiliary` renders the host's secondary dock with reactive session identity,
|
||||
shared session services, and presentation props. Its owner can remain mounted while
|
||||
switching sessions in one workspace. `session.mobile.actions` supplies corresponding
|
||||
mobile navigation. The host owns docking and resize state through `view.auxiliary`.
|
||||
|
||||
Schema-aware `storage.persist(key, schema, initial, options)` returns a Solid store,
|
||||
setter, and hydration accessor. `options.scope` selects a server/workspace and
|
||||
`legacyKey` imports that feature's previous host key. `storage.remove` clears that
|
||||
scope. Call it in an owned Solid scope; the host shares overlapping consumers and
|
||||
flushes/releases the hydrated store when its last owner is disposed.
|
||||
`workspaces.onRemoved` lets extensions release workspace-local state.
|
||||
`servers.list`, server URLs, command keybind matching, and the shared console font
|
||||
let extensions use the existing client and UI behavior without importing App internals.
|
||||
|
||||
```tsx
|
||||
import { Plugin } from "@opencode/plugin/desktop"
|
||||
import { Panel, NativeSurface } from "@opencode/plugin/desktop/solid"
|
||||
|
||||
export default Plugin.define({
|
||||
id: "opencode.browser",
|
||||
setup(ctx) {
|
||||
ctx.ui.slot({
|
||||
append: "session.panel",
|
||||
when: () => available(),
|
||||
render: ({ session }) => (
|
||||
<Panel id={tab.id} title={tab.title} onClose={close}>
|
||||
<NativeSurface id={surfaceID} />
|
||||
</Panel>
|
||||
),
|
||||
})
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
Slots share the TUI resolver and its `append`, `prepend`, `before`, `after`, and `replace` rules. The plugin controls `when`, commands, and opening. Panel IDs are scoped to the plugin. Multiple reactive `Panel` instances share the host's ordered, closable tab strip. Closing, hiding, and disposing content are separate operations. Panel declarations live with the session route, even when the panel is closed.
|
||||
|
||||
Use the host's UI components directly. `@opencode/ui/layout` supplies shared layout, toolbar, form, text, and settings-row components. The browser companion in the next layer uses these components rather than shipping private CSS. Solid and TanStack remain normal libraries; the SDK adds no query framework.
|
||||
|
||||
## Lifetimes and data
|
||||
|
||||
- `ctx.sessions.list()` contains sessions visited by each open shell tab, retaining child-session ownership across navigation. `current()` is the currently routed session.
|
||||
- Every session carries stable server, shell-tab, and session identities. Its server provides the existing client and reactive data APIs.
|
||||
- `ctx.lifecycle.own` owns custom cleanup; its signal aborts on unload. Slots, commands and main RPC subscriptions are owned automatically.
|
||||
- `storage.store` uses the host's persistence and cross-window synchronization. `storage.memory` retains window-local values across extension reloads. Schema-specific migrations remain an open API design item.
|
||||
- `commands.register` accepts a reactive command list and registers with the existing command palette, keyboard, and slash-command host. IDs are plugin-scoped.
|
||||
- `i18n` resolves existing host keys through the active language. Extension-owned translation catalogs are a follow-up.
|
||||
|
||||
## Installation and live reload
|
||||
|
||||
The manager stores manifests, archive files, enabled state, and activation generations
|
||||
in Desktop's SQLite database. Installing a replacement or reloading an unchanged
|
||||
archive advances its generation. Open windows replace that plugin's contributions,
|
||||
dispose its commands/listeners/styles/native surfaces, and retain its extension storage.
|
||||
Failed module loads keep the previous renderer definition available and appear in the
|
||||
manager. Built-in IDs are reserved and their switches are read-only.
|
||||
|
||||
Archives target this SDK with `schema: "opencode.desktop/1"`; rebuild earlier OCDX
|
||||
extensions for the new renderer and main entrypoints. `manifest.json` identifies the
|
||||
extension, CommonJS entrypoints, and shared imports. The host supplies its own Solid,
|
||||
Query, client, schema, and shared UI module instances. Other dependencies are bundled
|
||||
by the packer. Pack from this repository:
|
||||
|
||||
```sh
|
||||
bun packages/plugin/script/desktop-pack.ts --manifest manifest.json --renderer index.tsx --main main.ts --assets assets --out extension.ocdx
|
||||
```
|
||||
|
||||
The input manifest contains `id`, `name`, and `version`. `--main` and `--assets` are
|
||||
optional. `ctx.assets.url("assets/icon.png")` resolves an installed archive asset.
|
||||
The runtime is trusted in-process code; installation adds no sandbox or app restart.
|
||||
|
||||
## Local main entrypoint
|
||||
|
||||
`MainPlugin.define({ id, rpc, setup })` uses a public `Rpc.define` contract. Inputs, outputs and events are decoded/encoded at the bridge. Effect codecs can carry bytes over the JSON envelope, and Standard Schema/JSON Schema are supported. Methods receive a cancellation signal. Null is the void wire value.
|
||||
|
||||
Main context exposes the owning Electron window, a lifecycle, authenticated Node-side OpenCode clients for host-known server IDs, and a native surface registrar. It does not import Core. A renderer calls `ctx.main.rpc(contract)` and subscribes to its events.
|
||||
|
||||
`ctx.surfaces.register(view)` returns an opaque, window/extension-owned ID. `<NativeSurface id={id} />` presents that view. The host owns bounds, zoom conversion, corner composition, and menu/dialog occlusion. The extension owns the view's domain behavior and disposal.
|
||||
|
||||
## Verification
|
||||
|
||||
Production parent-branch comparisons are recorded in the draft PR bodies. The measurements use isolated fixtures and do not set machine-independent thresholds.
|
||||
|
||||
Focused tests cover lifecycle teardown, codec validation and binary round trips, shared slot ordering, and actual application panel behavior through an independent fixture plugin. The dependent browser extraction exercises native surfaces and server RPC.
|
||||
@@ -14,6 +14,8 @@
|
||||
"./effect": "./src/effect/index.ts",
|
||||
"./host": "./src/host.ts",
|
||||
"./tui": "./src/tui/index.ts",
|
||||
"./desktop": "./src/desktop/index.ts",
|
||||
"./desktop/solid": "./src/desktop/solid.ts",
|
||||
"./*": "./src/*.ts"
|
||||
},
|
||||
"imports": {
|
||||
@@ -58,6 +60,9 @@
|
||||
}
|
||||
},
|
||||
"devDependencies": {
|
||||
"@zip.js/zip.js": "2.7.62",
|
||||
"vite": "8.2.2",
|
||||
"vite-plugin-solid": "2.11.14",
|
||||
"@opencode/theme": "workspace:*",
|
||||
"@opentui/core": "catalog:",
|
||||
"@opentui/solid": "catalog:",
|
||||
@@ -66,6 +71,7 @@
|
||||
"@types/bun": "catalog:",
|
||||
"@types/node": "catalog:",
|
||||
"solid-js": "catalog:",
|
||||
"electron": "42.10.1",
|
||||
"typescript": "catalog:",
|
||||
"@typescript/native-preview": "catalog:"
|
||||
}
|
||||
|
||||
@@ -0,0 +1,84 @@
|
||||
#!/usr/bin/env bun
|
||||
import path from "node:path"
|
||||
import { parseArgs } from "node:util"
|
||||
import { isBuiltin } from "node:module"
|
||||
import { BlobWriter, TextReader, Uint8ArrayReader, ZipWriter } from "@zip.js/zip.js"
|
||||
import { build } from "vite"
|
||||
import solid from "vite-plugin-solid"
|
||||
import { Schema } from "effect"
|
||||
import { ExtensionManager } from "../src/desktop/manager"
|
||||
|
||||
const args = parseArgs({
|
||||
options: {
|
||||
manifest: { type: "string" },
|
||||
renderer: { type: "string" },
|
||||
main: { type: "string" },
|
||||
assets: { type: "string" },
|
||||
out: { type: "string" },
|
||||
},
|
||||
}).values
|
||||
if (!args.manifest || !args.renderer || !args.out)
|
||||
throw new Error(
|
||||
"Usage: desktop-pack --manifest manifest.json --renderer index.tsx [--main main.ts] [--assets assets] --out extension.ocdx",
|
||||
)
|
||||
const metadata = Schema.decodeUnknownSync(
|
||||
Schema.fromJsonString(Schema.Struct({ id: Schema.String, name: Schema.String, version: Schema.String })),
|
||||
)(await Bun.file(args.manifest).text())
|
||||
|
||||
async function bundle(entry: string, renderer: boolean) {
|
||||
const result = await build({
|
||||
configFile: false,
|
||||
plugins: renderer ? [solid()] : [],
|
||||
ssr: { noExternal: true },
|
||||
build: {
|
||||
target: renderer ? "esnext" : "node22",
|
||||
ssr: !renderer,
|
||||
write: false,
|
||||
cssCodeSplit: false,
|
||||
assetsInlineLimit: Number.MAX_SAFE_INTEGER,
|
||||
lib: { entry: path.resolve(entry), formats: ["cjs"], fileName: () => (renderer ? "renderer.cjs" : "main.cjs") },
|
||||
rollupOptions: {
|
||||
external: (id) =>
|
||||
isBuiltin(id) || /^(solid-js(?:\/|$)|effect(?:\/|$)|@tanstack\/solid-query$|@opencode\/|electron$)/.test(id),
|
||||
output: { inlineDynamicImports: true, dynamicImportInCjs: false, exports: "named" },
|
||||
},
|
||||
},
|
||||
})
|
||||
const outputs = (Array.isArray(result) ? result : [result]).flatMap((result) =>
|
||||
"output" in result ? result.output : [],
|
||||
)
|
||||
const code = outputs.find((output) => output.type === "chunk")
|
||||
if (!code || code.type !== "chunk") throw new Error(`No bundle was produced for ${entry}`)
|
||||
return { code, assets: outputs.filter((output) => output.type === "asset") }
|
||||
}
|
||||
|
||||
const renderer = await bundle(args.renderer, true)
|
||||
const main = args.main ? await bundle(args.main, false) : undefined
|
||||
const style = renderer.assets.find((asset) => asset.fileName.endsWith(".css"))
|
||||
const manifest = Schema.decodeUnknownSync(ExtensionManager.Manifest)({
|
||||
...metadata,
|
||||
schema: "opencode.desktop/1",
|
||||
entry: "renderer.cjs",
|
||||
imports: renderer.code.imports,
|
||||
...(main ? { main: "main.cjs", mainImports: main.code.imports } : {}),
|
||||
...(style ? { style: style.fileName } : {}),
|
||||
})
|
||||
const archive = new ZipWriter(new BlobWriter("application/vnd.ocdx"))
|
||||
await archive.add("manifest.json", new TextReader(JSON.stringify(manifest)))
|
||||
await archive.add("renderer.cjs", new TextReader(renderer.code.code))
|
||||
if (main) await archive.add("main.cjs", new TextReader(main.code.code))
|
||||
for (const asset of renderer.assets)
|
||||
await archive.add(
|
||||
asset.fileName,
|
||||
typeof asset.source === "string" ? new TextReader(asset.source) : new Uint8ArrayReader(asset.source),
|
||||
)
|
||||
if (args.assets) {
|
||||
for await (const file of new Bun.Glob("**/*").scan({ cwd: args.assets, onlyFiles: true })) {
|
||||
await archive.add(
|
||||
`assets/${file.replaceAll("\\", "/")}`,
|
||||
new Uint8ArrayReader(await Bun.file(path.join(args.assets, file)).bytes()),
|
||||
)
|
||||
}
|
||||
}
|
||||
await Bun.write(args.out, await archive.close())
|
||||
console.log(args.out)
|
||||
@@ -0,0 +1,14 @@
|
||||
export function evaluateBundle(source: string, modules: ReadonlyMap<string, unknown>): unknown {
|
||||
const module = { exports: {} as unknown }
|
||||
// Installed extensions are trusted code. Supplying the host modules keeps Solid
|
||||
// contexts and shared controls identical to those used by the application.
|
||||
new Function("require", "module", "exports", source)(
|
||||
(id: string) => {
|
||||
if (!modules.has(id)) throw new Error(`Unsupported desktop extension import: ${id}`)
|
||||
return modules.get(id)
|
||||
},
|
||||
module,
|
||||
module.exports,
|
||||
)
|
||||
return module.exports
|
||||
}
|
||||
@@ -0,0 +1,185 @@
|
||||
import type { OpenCodeClient, LocationRef } from "@opencode/client"
|
||||
import type { Data } from "../tui/context.js"
|
||||
import type { Accessor, JSX } from "solid-js"
|
||||
import type { Store, SetStoreFunction } from "solid-js/store"
|
||||
import type { Schema } from "effect"
|
||||
import type { Rpc } from "@opencode/schema/rpc"
|
||||
import type { RpcClient } from "./rpc.js"
|
||||
import type { SessionServices } from "./workspace.js"
|
||||
|
||||
export type Dispose = () => void
|
||||
export interface Lifecycle {
|
||||
readonly signal: AbortSignal
|
||||
own(dispose: Dispose): Dispose
|
||||
}
|
||||
|
||||
export interface Server {
|
||||
readonly id: string
|
||||
readonly url: string
|
||||
readonly client: OpenCodeClient
|
||||
readonly data: Data
|
||||
readonly compatible: boolean
|
||||
readonly local: boolean
|
||||
}
|
||||
|
||||
/** A visited session remains owned by its shell tab, including while another route is shown. */
|
||||
export interface SessionContext {
|
||||
readonly key: string
|
||||
readonly ownerID: string
|
||||
readonly sessionID: string
|
||||
readonly server: Server
|
||||
readonly creating: boolean
|
||||
readonly location: LocationRef | undefined
|
||||
readonly services?: SessionServices
|
||||
}
|
||||
|
||||
export interface PanelInput {
|
||||
readonly session: SessionContext
|
||||
}
|
||||
|
||||
export interface AuxiliaryPresentation {
|
||||
readonly stacked?: boolean
|
||||
readonly fill?: boolean
|
||||
readonly framed?: boolean
|
||||
readonly present?: boolean
|
||||
readonly contentHeight?: string
|
||||
readonly embedded?: boolean
|
||||
readonly animate?: boolean
|
||||
readonly reserveActions?: boolean
|
||||
}
|
||||
|
||||
export interface SlotMap {
|
||||
readonly app: Readonly<Record<string, never>>
|
||||
readonly "titlebar.actions": Readonly<Record<string, never>>
|
||||
readonly "settings.experimental": Readonly<Record<string, never>>
|
||||
readonly "session.panel": PanelInput
|
||||
readonly "session.panel.actions": PanelInput
|
||||
readonly "session.composer.top": PanelInput
|
||||
readonly "session.header.actions": PanelInput
|
||||
readonly "session.panel.toolbar": PanelInput
|
||||
readonly "session.panel.tools": PanelInput
|
||||
readonly "session.sidebar": PanelInput
|
||||
readonly "session.auxiliary": PanelInput & {
|
||||
readonly services: SessionServices
|
||||
readonly presentation: AuxiliaryPresentation
|
||||
}
|
||||
readonly "session.mobile.actions": PanelInput
|
||||
}
|
||||
export type SlotPath = keyof SlotMap
|
||||
type Placement<Path extends string> = {
|
||||
[Kind in "append" | "prepend" | "before" | "after" | "replace"]: { readonly [Key in Kind]: Path } & {
|
||||
readonly [Key in Exclude<"append" | "prepend" | "before" | "after" | "replace", Kind>]?: never
|
||||
}
|
||||
}["append" | "prepend" | "before" | "after" | "replace"]
|
||||
export type SlotClaim<Path extends SlotPath = SlotPath> = Path extends SlotPath
|
||||
? Placement<Path> & { readonly when?: Accessor<boolean>; readonly render: (input: SlotMap[Path]) => JSX.Element }
|
||||
: never
|
||||
|
||||
export interface Command {
|
||||
readonly id: string
|
||||
/** Optional shared command reference, e.g. a document opener used by other UI. */
|
||||
readonly reference?: string
|
||||
readonly title: string
|
||||
readonly description?: string
|
||||
readonly group?: string
|
||||
readonly bind?: string
|
||||
readonly slash?: string
|
||||
readonly enabled?: boolean
|
||||
readonly palette?: boolean
|
||||
readonly when?: (event: KeyboardEvent) => boolean
|
||||
readonly run: () => void | Promise<void>
|
||||
}
|
||||
|
||||
export interface Storage {
|
||||
persist<S extends Schema.ConstraintCodec<object, unknown>>(
|
||||
key: string,
|
||||
schema: S,
|
||||
initial: NoInfer<S["Type"]>,
|
||||
options?: StorageOptions,
|
||||
): readonly [Store<S["Type"]>, SetStoreFunction<S["Type"]>, Accessor<boolean>]
|
||||
remove(key: string, options?: StorageOptions): void
|
||||
store<Value extends object>(
|
||||
key: string,
|
||||
options: { initial: Value },
|
||||
): readonly [Store<Value>, (update: (draft: Value) => void) => void]
|
||||
memory<Value extends object>(
|
||||
key: string,
|
||||
options: { initial: Value },
|
||||
): readonly [Store<Value>, (update: (draft: Value) => void) => void]
|
||||
}
|
||||
|
||||
export interface StorageOptions {
|
||||
readonly scope?: { readonly serverID: string; readonly directory: string }
|
||||
/** Import an existing host-owned key when extracting a built-in feature. */
|
||||
readonly legacyKey?: string
|
||||
}
|
||||
|
||||
export interface Context {
|
||||
readonly assets: { url(path: string): string }
|
||||
readonly app: { readonly version?: string; readonly windowID?: string; readonly native: boolean }
|
||||
readonly lifecycle: Lifecycle
|
||||
readonly sessions: { list(): readonly SessionContext[]; current(): SessionContext | undefined }
|
||||
readonly servers: { list(): readonly Server[] }
|
||||
readonly workspaces: { onRemoved(handler: (value: { serverID: string; directory: string }) => void): Dispose }
|
||||
readonly fonts: { console(): string }
|
||||
readonly storage: Storage
|
||||
readonly commands: {
|
||||
register(commands: Accessor<readonly Command[]>): Dispose
|
||||
dispatch(id: string): void
|
||||
keys(reference: string): string[]
|
||||
matches(reference: string, event: KeyboardEvent): boolean
|
||||
}
|
||||
readonly main: { rpc<D extends Rpc.Definition>(definition: D): RpcClient<D> }
|
||||
readonly ui: {
|
||||
slot(claim: SlotClaim): Dispose
|
||||
readonly toast: {
|
||||
show(options: { title: string; message?: string; variant?: "error" | "success" | "default" | "loading" }): void
|
||||
}
|
||||
readonly panel: {
|
||||
open(id: string, session: SessionContext): boolean
|
||||
close(id: string, session: SessionContext): boolean
|
||||
selected(id: string, session: SessionContext): boolean
|
||||
visible(id: string, session: SessionContext): boolean
|
||||
}
|
||||
}
|
||||
readonly platform: {
|
||||
readonly platform: "web" | "desktop"
|
||||
readonly os?: "macos" | "windows" | "linux"
|
||||
readonly webviewZoom?: Accessor<number>
|
||||
openExternal(url: string): void
|
||||
openLocalFile?(url: string): void
|
||||
openPath?(path: string, app?: string): Promise<void>
|
||||
revealPath?(path: string): Promise<boolean>
|
||||
checkAppExists?(app: string): Promise<boolean>
|
||||
saveFile(options: { defaultPath?: string }, content: string): Promise<boolean>
|
||||
writeClipboardText?(text: string): Promise<void>
|
||||
}
|
||||
/** Host copy uses the host language; extension-specific copy can be supplied as a fallback. */
|
||||
readonly i18n: {
|
||||
locale(): string
|
||||
intl(): string
|
||||
t(key: string, params?: Record<string, string | number>): string
|
||||
plural(key: string, count: number, params?: Record<string, string | number>): string
|
||||
}
|
||||
}
|
||||
|
||||
export interface PanelProps {
|
||||
readonly id: string
|
||||
/** Shared resource reference understood by existing document/command producers. */
|
||||
readonly reference?: string
|
||||
readonly closable?: boolean
|
||||
readonly default?: boolean
|
||||
/** Reuse the content owner across related panel instances, such as file previews. */
|
||||
readonly group?: string
|
||||
/** Available declarations can start closed until another UI opens them. */
|
||||
readonly initial?: "open" | "closed"
|
||||
readonly onDoubleClick?: () => void
|
||||
readonly temporary?: boolean
|
||||
readonly title: string
|
||||
readonly icon?: JSX.Element
|
||||
readonly badge?: string | number
|
||||
readonly loading?: boolean
|
||||
readonly onClose?: () => void
|
||||
readonly onSelect?: () => void
|
||||
readonly children: JSX.Element
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
export * as Plugin from "./plugin.js"
|
||||
export { usePlugin } from "./solid.js"
|
||||
export type {
|
||||
Context,
|
||||
SessionContext,
|
||||
Server,
|
||||
SlotClaim,
|
||||
SlotMap,
|
||||
PanelProps,
|
||||
Lifecycle,
|
||||
AuxiliaryPresentation,
|
||||
StorageOptions,
|
||||
} from "./context.js"
|
||||
@@ -0,0 +1,35 @@
|
||||
import type { Lifecycle } from "./context.js"
|
||||
|
||||
export function createLifecycle(): Lifecycle & { dispose(): void } {
|
||||
const controller = new AbortController()
|
||||
const owned = new Set<() => void>()
|
||||
return {
|
||||
signal: controller.signal,
|
||||
own(dispose) {
|
||||
if (controller.signal.aborted) {
|
||||
dispose()
|
||||
return () => {}
|
||||
}
|
||||
const cleanup = () => {
|
||||
if (owned.delete(cleanup)) dispose()
|
||||
}
|
||||
owned.add(cleanup)
|
||||
return cleanup
|
||||
},
|
||||
dispose() {
|
||||
if (controller.signal.aborted) return
|
||||
controller.abort()
|
||||
const failures: unknown[] = []
|
||||
Array.from(owned)
|
||||
.reverse()
|
||||
.forEach((dispose) => {
|
||||
try {
|
||||
dispose()
|
||||
} catch (error) {
|
||||
failures.push(error)
|
||||
}
|
||||
})
|
||||
if (failures.length) throw new AggregateError(failures, "Extension cleanup failed")
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
export * as MainPlugin from "./main.js"
|
||||
import type { BrowserWindow, View } from "electron"
|
||||
import type { OpenCodeClient } from "@opencode/client/effect"
|
||||
import type { Rpc } from "@opencode/schema/rpc"
|
||||
import type { Lifecycle } from "./context.js"
|
||||
import { Schema } from "effect"
|
||||
|
||||
export interface Context {
|
||||
readonly window: BrowserWindow
|
||||
readonly lifecycle: Lifecycle
|
||||
/** Returns an authenticated Node-side client for a host-known server. */
|
||||
client(serverID: string): Promise<OpenCodeClient>
|
||||
readonly surfaces: {
|
||||
register(view: View): { readonly id: string; dispose(): void }
|
||||
}
|
||||
emit<D extends Rpc.Definition, Name extends keyof D["events"] & string>(
|
||||
definition: D,
|
||||
name: Name,
|
||||
data: Rpc.EventInputData<D["events"][Name]["schema"]>,
|
||||
): Promise<void>
|
||||
}
|
||||
|
||||
export type Handlers<D extends Rpc.Definition> = {
|
||||
[Name in keyof D["methods"]]: (
|
||||
input: Rpc.Output<D["methods"][Name]["input"]>,
|
||||
call: { signal: AbortSignal; error: Rpc.ErrorFactory<D["methods"][Name]> },
|
||||
) => Rpc.HandlerOutput<D["methods"][Name]["output"]> | Promise<Rpc.HandlerOutput<D["methods"][Name]["output"]>>
|
||||
}
|
||||
|
||||
export interface Definition<D extends Rpc.Definition = Rpc.Definition> {
|
||||
readonly id: string
|
||||
readonly rpc: D
|
||||
readonly setup: (context: Context) => Handlers<D>
|
||||
}
|
||||
|
||||
/** Type-erased host entrypoint; authors register through define to retain method correlations. */
|
||||
export interface Entry {
|
||||
readonly id: string
|
||||
readonly rpc: Rpc.Definition
|
||||
readonly setup: (
|
||||
context: Context,
|
||||
) => Record<
|
||||
string,
|
||||
(
|
||||
input: unknown,
|
||||
call: { signal: AbortSignal; error: (type: string, message: string, data?: unknown) => never },
|
||||
) => unknown
|
||||
>
|
||||
}
|
||||
|
||||
export function define<const D extends Rpc.Definition>(definition: Definition<D>): Entry {
|
||||
return definition as Entry
|
||||
}
|
||||
|
||||
export const Entry = Schema.declare<Entry>(
|
||||
(value): value is Entry =>
|
||||
typeof value === "object" &&
|
||||
value !== null &&
|
||||
"id" in value &&
|
||||
typeof value.id === "string" &&
|
||||
"setup" in value &&
|
||||
typeof value.setup === "function" &&
|
||||
"rpc" in value &&
|
||||
typeof value.rpc === "object" &&
|
||||
value.rpc !== null &&
|
||||
"id" in value.rpc &&
|
||||
typeof value.rpc.id === "string" &&
|
||||
"methods" in value.rpc &&
|
||||
"events" in value.rpc,
|
||||
)
|
||||
@@ -0,0 +1,66 @@
|
||||
export * as ExtensionManager from "./manager.js"
|
||||
|
||||
import { Schema } from "effect"
|
||||
|
||||
export const Manifest = Schema.Struct({
|
||||
schema: Schema.Literal("opencode.desktop/1"),
|
||||
id: Schema.String.check(Schema.isPattern(/^[a-zA-Z0-9][a-zA-Z0-9._-]*$/)),
|
||||
name: Schema.String.check(Schema.isMinLength(1)),
|
||||
version: Schema.String.check(Schema.isMinLength(1)),
|
||||
entry: Schema.String,
|
||||
main: Schema.optionalKey(Schema.String),
|
||||
style: Schema.optionalKey(Schema.String),
|
||||
imports: Schema.Array(Schema.String),
|
||||
mainImports: Schema.optionalKey(Schema.Array(Schema.String)),
|
||||
})
|
||||
export type Manifest = typeof Manifest.Type
|
||||
|
||||
export const Installed = Schema.Struct({
|
||||
id: Schema.String,
|
||||
name: Schema.String,
|
||||
version: Schema.String,
|
||||
revision: Schema.String,
|
||||
generation: Schema.Number,
|
||||
enabled: Schema.Boolean,
|
||||
hasMain: Schema.Boolean,
|
||||
})
|
||||
export type Installed = typeof Installed.Type
|
||||
|
||||
export const Source = Schema.Struct({ manifest: Manifest, revision: Schema.String, source: Schema.String })
|
||||
export type Source = typeof Source.Type
|
||||
|
||||
export const ErrorCode = Schema.Literals([
|
||||
"invalidArchive",
|
||||
"invalidManifest",
|
||||
"invalidPath",
|
||||
"tooLarge",
|
||||
"reserved",
|
||||
"notFound",
|
||||
"disabled",
|
||||
"invalidModule",
|
||||
"download",
|
||||
"url",
|
||||
"storage",
|
||||
])
|
||||
export type ErrorCode = typeof ErrorCode.Type
|
||||
export const Failure = Schema.Struct({ code: ErrorCode })
|
||||
export class ManagerError extends Error {
|
||||
constructor(
|
||||
readonly code: ErrorCode,
|
||||
options?: ErrorOptions,
|
||||
) {
|
||||
super(code, options)
|
||||
}
|
||||
}
|
||||
|
||||
/** The native manager owns installation; renderer code owns activation through the same plugin host. */
|
||||
export interface Transport {
|
||||
list(): Promise<readonly Installed[]>
|
||||
install(data: Uint8Array): Promise<readonly Installed[]>
|
||||
installURL(url: string): Promise<readonly Installed[]>
|
||||
enable(id: string, enabled: boolean): Promise<readonly Installed[]>
|
||||
reload(id: string): Promise<readonly Installed[]>
|
||||
source(id: string, revision: string): Promise<Source>
|
||||
onChange(callback: (entries: readonly Installed[]) => void): () => void
|
||||
assetURL(id: string, revision: string, path: string): string
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
export * as Persistence from "./persistence.js"
|
||||
|
||||
import { Effect, Option, Predicate, Result, Schema, SchemaAST, SchemaGetter, SchemaParser, Struct } from "effect"
|
||||
|
||||
export type Migrated<S extends Schema.ConstraintCodec<object, unknown>> = {
|
||||
current: S
|
||||
read: Schema.ConstraintDecoder<unknown>
|
||||
}
|
||||
|
||||
export function migrate<S extends Schema.ConstraintCodec<object, unknown>>(
|
||||
current: S,
|
||||
read: Schema.ConstraintDecoder<unknown>,
|
||||
): Migrated<S> {
|
||||
return { current, read }
|
||||
}
|
||||
|
||||
function isMigrated<S extends Schema.ConstraintCodec<object, unknown>>(schema: S | Migrated<S>): schema is Migrated<S> {
|
||||
return "current" in schema
|
||||
}
|
||||
|
||||
export function withInitial<S extends Schema.ConstraintCodec<object, unknown>>(
|
||||
definition: S | Migrated<S>,
|
||||
initial: NoInfer<S["Type"]>,
|
||||
) {
|
||||
const schema = isMigrated(definition) ? definition.current : definition
|
||||
const read = isMigrated(definition)
|
||||
? SchemaParser.decodeUnknownResult(definition.read, { onExcessProperty: "preserve" })
|
||||
: Result.succeed<unknown>
|
||||
const encode = Schema.encodeUnknownSync(schema)
|
||||
return Schema.Unknown.pipe(
|
||||
Schema.decode<Schema.Unknown>({
|
||||
decode: SchemaGetter.transformOrFail((value) =>
|
||||
Effect.fromResult(Result.map(read(value), (stored) => merge(initial, recover(schema.ast, stored, initial)))),
|
||||
),
|
||||
encode: SchemaGetter.transform((value) => encode(value)),
|
||||
}),
|
||||
Schema.decodeTo(Schema.toType(schema)),
|
||||
)
|
||||
}
|
||||
|
||||
// Object-level codecs own their recovery. Plain structs can recover fields independently.
|
||||
function recover(ast: SchemaAST.AST, value: unknown, initial: unknown): unknown {
|
||||
if (value === undefined) return initial
|
||||
if (ast._tag === "Objects" && !ast.encoding && ast.indexSignatures.length === 0 && Predicate.isObject(value)) {
|
||||
return Object.fromEntries(
|
||||
ast.propertySignatures.flatMap((field) => {
|
||||
const defaults = Predicate.isObject(initial) ? initial[field.name] : undefined
|
||||
const next = recover(field.type, value[field.name], defaults)
|
||||
if (next === undefined && !Object.hasOwn(value, field.name) && defaults === undefined) return []
|
||||
return [[field.name, next]]
|
||||
}),
|
||||
)
|
||||
}
|
||||
const decoded = Schema.decodeUnknownOption(Schema.make<Schema.Codec<unknown, unknown>>(ast))(value)
|
||||
return Option.isSome(decoded) ? decoded.value : initial
|
||||
}
|
||||
|
||||
function merge(initial: unknown, value: unknown): unknown {
|
||||
if (value === undefined) return initial
|
||||
if (!Predicate.isObject(initial) || !Predicate.isObject(value)) return value
|
||||
return Object.fromEntries(
|
||||
[...new Set([...Object.keys(initial), ...Object.keys(value)])].map((key) => [key, merge(initial[key], value[key])]),
|
||||
)
|
||||
}
|
||||
|
||||
// Unlike a decoding default, a fallback also replaces invalid persisted values.
|
||||
export function fallback<S extends Schema.ConstraintCodec<unknown, unknown>>(schema: S, value: () => S["Type"]) {
|
||||
const defaulted = Schema.withDecodingDefaultType<S>(Effect.sync(value))(schema)
|
||||
return Schema.catchDecoding<typeof defaulted>(() => Effect.sync(() => Option.some(value())))(defaulted)
|
||||
}
|
||||
|
||||
export function optional<S extends Schema.ConstraintCodec<unknown, unknown>>(schema: S) {
|
||||
const field = Schema.optional(schema)
|
||||
return Schema.catchDecoding<typeof field>(() => Effect.succeed(Option.none()))(field)
|
||||
}
|
||||
|
||||
export function struct<const Fields extends Schema.Struct.Fields>(fields: Fields) {
|
||||
return Schema.Struct(fields).mapFields(Struct.map(Schema.mutableKey))
|
||||
}
|
||||
|
||||
export function record<S extends Schema.ConstraintCodec<unknown, unknown>>(schema: S) {
|
||||
const entries = Schema.Record(Schema.String, Schema.mutableKey(schema))
|
||||
return fallback(entries, () => Schema.decodeUnknownSync(entries)({}))
|
||||
}
|
||||
|
||||
// Recover individual entries rather than discarding a whole history or collection.
|
||||
export function array<S extends Schema.ConstraintCodec<unknown, unknown>>(schema: S) {
|
||||
const decode = Schema.decodeUnknownOption(schema)
|
||||
const encode = Schema.encodeSync(schema)
|
||||
return fallback(
|
||||
Schema.Array(Schema.Unknown).pipe(
|
||||
Schema.decodeTo(Schema.mutable(Schema.Array(Schema.toType(schema))), {
|
||||
decode: SchemaGetter.transform((items) => items.flatMap((item) => Option.toArray(decode(item)))),
|
||||
encode: SchemaGetter.transform((items) => items.map((item) => encode(item))),
|
||||
}),
|
||||
),
|
||||
() => [],
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import type { Context, Dispose } from "./context.js"
|
||||
import { Schema } from "effect"
|
||||
|
||||
export interface Definition {
|
||||
readonly id: string
|
||||
readonly name?: string
|
||||
readonly version?: string
|
||||
readonly main?: boolean
|
||||
readonly setup: (context: Context) => void | Dispose
|
||||
}
|
||||
|
||||
export const Definition = Schema.declare<Definition>(
|
||||
(value): value is Definition =>
|
||||
typeof value === "object" &&
|
||||
value !== null &&
|
||||
"id" in value &&
|
||||
typeof value.id === "string" &&
|
||||
"setup" in value &&
|
||||
typeof value.setup === "function",
|
||||
)
|
||||
|
||||
export function define<const T extends Definition>(plugin: T) {
|
||||
return plugin
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
export * as DesktopExtension from "./protocol.js"
|
||||
import { Schema } from "effect"
|
||||
|
||||
const id = Schema.String.check(Schema.isMinLength(1), Schema.isMaxLength(256))
|
||||
export const Endpoint = Schema.Struct({
|
||||
id,
|
||||
url: Schema.String,
|
||||
username: Schema.optionalKey(Schema.String),
|
||||
password: Schema.optionalKey(Schema.String),
|
||||
})
|
||||
export type Endpoint = typeof Endpoint.Type
|
||||
export const Layout = Schema.Struct({
|
||||
visible: Schema.Boolean,
|
||||
bounds: Schema.optionalKey(
|
||||
Schema.Struct({ x: Schema.Finite, y: Schema.Finite, width: Schema.Finite, height: Schema.Finite }),
|
||||
),
|
||||
background: Schema.optionalKey(Schema.Tuple([Schema.Number, Schema.Number, Schema.Number, Schema.Number])),
|
||||
radius: Schema.optionalKey(Schema.Number),
|
||||
})
|
||||
export type Layout = typeof Layout.Type
|
||||
export const Call = Schema.Struct({ extensionID: id, rpcID: id, method: id, requestID: id, input: Schema.Json })
|
||||
export type Call = typeof Call.Type
|
||||
export const Event = Schema.Struct({ extensionID: id, rpcID: id, name: id, data: Schema.Json })
|
||||
export type Event = typeof Event.Type
|
||||
|
||||
export interface Transport {
|
||||
call(input: Call, signal?: AbortSignal): Promise<unknown>
|
||||
onEvent(listener: (event: Event) => void): () => void
|
||||
surface(extensionID: string, surfaceID: string, layout?: Layout): void
|
||||
configure(servers: readonly Endpoint[]): void
|
||||
release(extensionID: string): void
|
||||
}
|
||||
@@ -0,0 +1,122 @@
|
||||
import { Effect, JsonSchema, Schema, SchemaRepresentation } from "effect"
|
||||
import type { Rpc } from "@opencode/schema/rpc"
|
||||
import type { StandardSchemaV1 } from "@standard-schema/spec"
|
||||
import type { DesktopExtension } from "./protocol.js"
|
||||
|
||||
type Input<S extends Rpc.Method["input"]> = S extends Schema.Top ? S["Type"] : Rpc.Input<S>
|
||||
export type RpcClient<D extends Rpc.Definition> = {
|
||||
readonly [Name in keyof D["methods"]]: (
|
||||
input: Input<D["methods"][Name]["input"]>,
|
||||
options?: { signal?: AbortSignal },
|
||||
) => Promise<Rpc.Output<D["methods"][Name]["output"]>>
|
||||
} & {
|
||||
readonly events: {
|
||||
on<Name extends keyof D["events"] & string>(
|
||||
name: Name,
|
||||
listener: (data: Rpc.EventData<D["events"][Name]["schema"]>) => void,
|
||||
): () => void
|
||||
}
|
||||
}
|
||||
|
||||
export class CallError extends Error {
|
||||
constructor(
|
||||
readonly type: string,
|
||||
message: string,
|
||||
readonly data?: unknown,
|
||||
) {
|
||||
super(message)
|
||||
}
|
||||
}
|
||||
|
||||
const codecs = new WeakMap<object, Schema.Codec<unknown>>()
|
||||
export async function decode(schema: Rpc.Method["input"], input: unknown): Promise<unknown> {
|
||||
if (Schema.isSchema(schema)) return Effect.runPromise(Schema.decodeUnknownEffect(schema)(input))
|
||||
if ("~standard" in schema) {
|
||||
const result = await (schema as StandardSchemaV1)["~standard"].validate(input)
|
||||
if (result.issues) throw new Error(result.issues.map((issue) => issue.message).join("; "))
|
||||
return result.value
|
||||
}
|
||||
const codec =
|
||||
codecs.get(schema) ??
|
||||
Schema.make<Schema.Codec<unknown>>(
|
||||
SchemaRepresentation.fromJsonSchemaDocument(JsonSchema.fromSchemaDraft2020_12(schema)).ast,
|
||||
)
|
||||
codecs.set(schema, codec)
|
||||
return Effect.runPromise(Schema.decodeUnknownEffect(codec)(input))
|
||||
}
|
||||
|
||||
export async function encode(schema: Rpc.Method["output"], value: unknown) {
|
||||
const encoded = Schema.isSchema(schema)
|
||||
? await Effect.runPromise(Schema.encodeUnknownEffect(schema)(value))
|
||||
: await decode(schema, value)
|
||||
return Schema.decodeUnknownSync(Schema.Json)(encoded)
|
||||
}
|
||||
|
||||
const Outcome = Schema.Union([
|
||||
Schema.Struct({ ok: Schema.Literal(true), output: Schema.Json }),
|
||||
Schema.Struct({
|
||||
ok: Schema.Literal(false),
|
||||
error: Schema.Struct({ type: Schema.String, message: Schema.String, data: Schema.optionalKey(Schema.Json) }),
|
||||
}),
|
||||
])
|
||||
|
||||
export function client<D extends Rpc.Definition>(
|
||||
extensionID: string,
|
||||
definition: D,
|
||||
transport: DesktopExtension.Transport,
|
||||
signal: AbortSignal,
|
||||
own: (dispose: () => void) => unknown,
|
||||
): RpcClient<D> {
|
||||
const methods = Object.fromEntries(
|
||||
Object.entries(definition.methods).map(([name, method]) => [
|
||||
name,
|
||||
async (input: unknown, options?: { signal?: AbortSignal }) => {
|
||||
const result = Schema.decodeUnknownSync(Outcome)(
|
||||
await transport.call(
|
||||
{
|
||||
extensionID,
|
||||
rpcID: definition.id,
|
||||
method: name,
|
||||
requestID: crypto.randomUUID(),
|
||||
input: await encode(method.input, input),
|
||||
},
|
||||
options?.signal ? AbortSignal.any([signal, options.signal]) : signal,
|
||||
),
|
||||
)
|
||||
if (!result.ok) throw new CallError(result.error.type, result.error.message, result.error.data)
|
||||
return Schema.isSchema(method.output) ? decode(method.output, result.output) : result.output
|
||||
},
|
||||
]),
|
||||
)
|
||||
// The definition supplies every method name and the codecs preserve its input/output correlation.
|
||||
return Object.assign(methods, {
|
||||
events: {
|
||||
on(name: keyof D["events"] & string, listener: (data: unknown) => void) {
|
||||
const event = definition.events[name]
|
||||
if (!event) throw new Error(`Unknown extension event: ${name}`)
|
||||
let live = true
|
||||
const stop = transport.onEvent((message) => {
|
||||
if (
|
||||
!live ||
|
||||
signal.aborted ||
|
||||
message.extensionID !== extensionID ||
|
||||
message.rpcID !== definition.id ||
|
||||
message.name !== name
|
||||
)
|
||||
return
|
||||
void decode(event.schema, message.data)
|
||||
.then((data) => {
|
||||
if (live && !signal.aborted) listener(data)
|
||||
})
|
||||
.catch(console.error)
|
||||
})
|
||||
const dispose = () => {
|
||||
live = false
|
||||
stop()
|
||||
}
|
||||
own(dispose)
|
||||
return dispose
|
||||
},
|
||||
},
|
||||
}) as RpcClient<D>
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
import { createComponent, createContext, useContext, type JSX, type ParentProps } from "solid-js"
|
||||
import type { Context, PanelProps, SessionContext } from "./context.js"
|
||||
|
||||
const PluginContext = createContext<Context>()
|
||||
const SurfaceContext = createContext<(props: { id: string }) => JSX.Element>()
|
||||
const PanelContext = createContext<{
|
||||
session: SessionContext
|
||||
register(props: PanelProps): void
|
||||
}>()
|
||||
|
||||
export function PluginProvider(props: ParentProps<{ value: Context }>) {
|
||||
return createComponent(PluginContext.Provider, {
|
||||
value: props.value,
|
||||
get children() {
|
||||
return props.children
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export function PanelProvider(props: ParentProps<{ value: NonNullable<ReturnType<typeof usePanel>> }>) {
|
||||
return createComponent(PanelContext.Provider, {
|
||||
value: props.value,
|
||||
get children() {
|
||||
return props.children
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
function usePanel() {
|
||||
return useContext(PanelContext)
|
||||
}
|
||||
|
||||
export function usePlugin() {
|
||||
const value = useContext(PluginContext)
|
||||
if (!value) throw new Error("Desktop plugin context is unavailable")
|
||||
return value
|
||||
}
|
||||
|
||||
export function NativeSurfaceProvider(props: ParentProps<{ render: (props: { id: string }) => JSX.Element }>) {
|
||||
return createComponent(SurfaceContext.Provider, {
|
||||
value: props.render,
|
||||
get children() {
|
||||
return props.children
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export function NativeSurface(props: { id: string }) {
|
||||
const render = useContext(SurfaceContext)
|
||||
if (!render) throw new Error("Native surfaces require a desktop extension host")
|
||||
return render(props)
|
||||
}
|
||||
|
||||
/** Declare a host-owned panel instance in the session.panel slot. */
|
||||
export function Panel(props: PanelProps): JSX.Element {
|
||||
const context = usePanel()
|
||||
if (!context) throw new Error("Panel must be contributed to session.panel")
|
||||
context.register(props)
|
||||
return null
|
||||
}
|
||||
@@ -0,0 +1,149 @@
|
||||
export interface LineRange {
|
||||
start: number
|
||||
end: number
|
||||
side?: "additions" | "deletions"
|
||||
endSide?: "additions" | "deletions"
|
||||
}
|
||||
export interface TextSelection {
|
||||
startLine: number
|
||||
endLine: number
|
||||
startChar: number
|
||||
endChar: number
|
||||
}
|
||||
export interface FileNode {
|
||||
name: string
|
||||
path: string
|
||||
absolute: string
|
||||
type: "file" | "directory"
|
||||
ignored: boolean
|
||||
}
|
||||
export interface FileState {
|
||||
path: string
|
||||
name: string
|
||||
loaded?: boolean
|
||||
loading?: boolean
|
||||
error?: string
|
||||
content?: { type: "text" | "binary"; content: string; encoding?: "base64"; mimeType?: string }
|
||||
}
|
||||
export interface Files {
|
||||
readonly directory: string
|
||||
ready(): boolean
|
||||
normalize(path: string): string
|
||||
tab(path: string): string
|
||||
pathFromTab(tab: string): string | undefined
|
||||
get(path: string): FileState | undefined
|
||||
load(path: string, options?: { force?: boolean }): Promise<void>
|
||||
selectedLines(path: string): LineRange | null | undefined
|
||||
setSelectedLines(path: string, range: LineRange | null): unknown
|
||||
scrollTop(path: string): number | undefined
|
||||
scrollLeft(path: string): number | undefined
|
||||
setScrollTop(path: string, top: number): unknown
|
||||
setScrollLeft(path: string, left: number): unknown
|
||||
searchFiles(query: string, options?: { limit?: number; signal?: AbortSignal }): Promise<string[]>
|
||||
searchFilesAndDirectories(query: string): Promise<string[]>
|
||||
readonly tree: {
|
||||
list(path: string): Promise<void>
|
||||
refresh(path: string): Promise<void>
|
||||
state(path: string): { expanded: boolean; loaded?: boolean; loading?: boolean; error?: string } | undefined
|
||||
children(path: string): FileNode[]
|
||||
expand(path: string, options?: { list?: boolean }): unknown
|
||||
collapse(path: string): unknown
|
||||
}
|
||||
}
|
||||
|
||||
export interface Annotation {
|
||||
id: string
|
||||
time: number
|
||||
file: string
|
||||
selection: LineRange
|
||||
comment: string
|
||||
}
|
||||
export interface Annotations {
|
||||
all(): Annotation[]
|
||||
list(file: string): Annotation[]
|
||||
add(input: Omit<Annotation, "id" | "time">): Annotation
|
||||
update(file: string, id: string, comment: string): void
|
||||
remove(file: string, id: string): void
|
||||
focus(): { file: string; id: string } | null
|
||||
setFocus(value: { file: string; id: string } | null): unknown
|
||||
clearFocus(): void
|
||||
}
|
||||
export interface DraftFile {
|
||||
type: "file"
|
||||
path: string
|
||||
selection?: TextSelection
|
||||
preview?: string
|
||||
comment?: string
|
||||
commentID?: string
|
||||
commentOrigin?: "review" | "file"
|
||||
}
|
||||
export interface Draft {
|
||||
readonly context: {
|
||||
add(input: DraftFile): unknown
|
||||
updateComment(path: string, id: string, input: { comment?: string; preview?: string }): unknown
|
||||
removeComment(path: string, id: string): unknown
|
||||
}
|
||||
}
|
||||
|
||||
export interface SessionView {
|
||||
/** Host-managed secondary dock; its persisted layout may predate extensions. */
|
||||
readonly auxiliary: {
|
||||
opened(): boolean
|
||||
open(): void
|
||||
close(): void
|
||||
toggle(): void
|
||||
height(): number
|
||||
resize(height: number): void
|
||||
placement(): "side" | "bottom"
|
||||
}
|
||||
ready(): boolean
|
||||
desktop(): boolean
|
||||
readonly tabs: {
|
||||
all(): string[]
|
||||
active(): string | undefined
|
||||
open(reference: string): Promise<void>
|
||||
setActive(reference: string): void
|
||||
close(reference: string): void
|
||||
canClose(reference: string): boolean
|
||||
preview(): string | undefined
|
||||
previewTab(reference: string): void
|
||||
}
|
||||
readonly panel: {
|
||||
opened(): boolean
|
||||
open(source?: string): void
|
||||
close(): void
|
||||
toggle(): void
|
||||
source(): string
|
||||
}
|
||||
readonly sidebar: {
|
||||
allowed(): boolean
|
||||
opened(): boolean
|
||||
width(): number
|
||||
resize(width: number): void
|
||||
toggle(): void
|
||||
tab(): string
|
||||
setTab(value: "changes" | "all"): void
|
||||
}
|
||||
scroll(key: string): { x: number; y: number } | undefined
|
||||
setScroll(key: string, value: { x: number; y: number }): void
|
||||
}
|
||||
|
||||
/** Shared workspace/draft capabilities. Feature queries and presentation remain extension-owned. */
|
||||
export interface SessionServices {
|
||||
/** Shared diff presentation preference, also used by built-in session surfaces. */
|
||||
readonly display: { wrapDiff(): boolean }
|
||||
readonly files: Files
|
||||
readonly annotations: Annotations
|
||||
readonly draft: Draft
|
||||
readonly view: SessionView
|
||||
readonly project: { id: string; directory: string; name?: string; vcs?: string } | undefined
|
||||
}
|
||||
|
||||
export function selectionFromLines(range: LineRange): TextSelection {
|
||||
return {
|
||||
startLine: Math.min(range.start, range.end),
|
||||
endLine: Math.max(range.start, range.end),
|
||||
startChar: 0,
|
||||
endChar: 0,
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
// Pure resolution of the slot tree: the mounted slot paths plus plugin claims
|
||||
// Shared resolution of the slot tree: the mounted slot paths plus plugin claims
|
||||
// in, per-path placement buckets plus diagnostics out. No solid, no I/O —
|
||||
// every policy rule (replacement takeover, hierarchy-beats-timeline,
|
||||
// last-enabled-wins, missing-target degradation) is testable as a data
|
||||
@@ -0,0 +1,50 @@
|
||||
import { expect, test } from "bun:test"
|
||||
import { Schema } from "effect"
|
||||
import { z } from "zod"
|
||||
import { createLifecycle } from "../src/desktop/lifecycle"
|
||||
import { decode, encode } from "../src/desktop/rpc"
|
||||
import { resolveSlots } from "../src/slots"
|
||||
|
||||
test("extension teardown cancels work and disposes every resource in reverse order", () => {
|
||||
const scope = createLifecycle()
|
||||
const called: string[] = []
|
||||
scope.signal.addEventListener("abort", () => called.push("abort"))
|
||||
scope.own(() => called.push("first"))
|
||||
scope.own(() => {
|
||||
called.push("second")
|
||||
throw new Error("cleanup")
|
||||
})
|
||||
expect(() => scope.dispose()).toThrow(AggregateError)
|
||||
expect(called).toEqual(["abort", "second", "first"])
|
||||
scope.dispose()
|
||||
scope.own(() => called.push("late"))
|
||||
expect(called).toEqual(["abort", "second", "first", "late"])
|
||||
})
|
||||
|
||||
test("main RPC codecs transfer bytes and reject incompatible values", async () => {
|
||||
const schema = Schema.Struct({ bytes: Schema.Uint8ArrayFromBase64 })
|
||||
const input = { bytes: new Uint8Array([0, 1, 127, 255]) }
|
||||
expect(await decode(schema, await encode(schema, input))).toEqual(input)
|
||||
await expect(decode(schema, { bytes: 17 })).rejects.toThrow()
|
||||
await expect(encode(schema, { bytes: "wrong" })).rejects.toThrow()
|
||||
})
|
||||
|
||||
test("main RPC accepts Standard Schema and JSON Schema contracts", async () => {
|
||||
expect(await decode(z.object({ name: z.string().min(1) }), { name: "inspector" })).toEqual({ name: "inspector" })
|
||||
await expect(decode({ type: "integer", minimum: 1 }, 0)).rejects.toThrow()
|
||||
expect(await decode({ type: "integer", minimum: 1 }, 2)).toBe(2)
|
||||
})
|
||||
|
||||
test("shared TUI/Desktop slots compose replacements and preserve neighboring contributions", () => {
|
||||
const result = resolveSlots({
|
||||
paths: new Set(["app", "app.panel"]),
|
||||
claims: [
|
||||
{ key: "a", plugin: "one", placement: { kind: "append", target: "app.panel" }, render: "A" },
|
||||
{ key: "b", plugin: "two", placement: { kind: "replace", target: "app.panel" }, render: "B" },
|
||||
{ key: "c", plugin: "three", placement: { kind: "after", target: "app.panel" }, render: "C" },
|
||||
],
|
||||
})
|
||||
expect(result.slotted.get("app.panel")?.replace?.render).toBe("B")
|
||||
expect(result.slotted.get("app.panel")?.after.map((claim) => claim.render)).toEqual(["C"])
|
||||
expect(result.suppressed.map((item) => item.claim.key)).toEqual(["a"])
|
||||
})
|
||||
@@ -1,5 +1,6 @@
|
||||
import { Show, type JSX, type ParentProps } from "solid-js"
|
||||
import "./session-review-v2.css"
|
||||
import "./session-mobile-file-panel.css"
|
||||
|
||||
export function SessionFilePanelV2(props: {
|
||||
sidebar?: JSX.Element
|
||||
@@ -37,3 +38,14 @@ export function SessionFilePanelV2(props: {
|
||||
export function SessionFilePanelV2Empty(props: ParentProps) {
|
||||
return <div data-slot="session-review-v2-empty">{props.children}</div>
|
||||
}
|
||||
|
||||
export function SessionMobileFilePanel(props: ParentProps<{ browsing: boolean; header: JSX.Element }>) {
|
||||
return (
|
||||
<div data-slot="session-mobile-files" data-browsing={props.browsing} class="flex h-full min-h-0 flex-col">
|
||||
<div data-slot="session-mobile-files-header" class="relative flex h-10 shrink-0 items-center">
|
||||
{props.header}
|
||||
</div>
|
||||
<div class="min-h-0 flex-1">{props.children}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
[data-slot="session-mobile-files"]
|
||||
[data-slot="session-mobile-files-header"]
|
||||
[data-component="tabs-v2"][data-variant="normal"][data-orientation="horizontal"]
|
||||
[data-slot="tabs-v2-list"] {
|
||||
position: static;
|
||||
|
||||
&::before {
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
[data-slot="session-mobile-files"] [data-component="line-comment-v2"] {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
[data-slot="session-mobile-files"][data-browsing="true"] {
|
||||
[data-component="session-review-v2-sidebar-root"] {
|
||||
width: 100%;
|
||||
}
|
||||
[data-slot="session-review-v2-sidebar"] {
|
||||
width: 100% !important;
|
||||
border-inline-end: 0;
|
||||
}
|
||||
[data-slot="session-review-v2-preview"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
[data-slot="session-mobile-files"] [data-slot="tabs-v2-trigger-close-button"] [data-slot="tabs-close-button"] {
|
||||
width: 32px;
|
||||
height: 36px;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user